:root{
  --cp-bg0:#070A12; --cp-bg1:#0B1020;
  --cp-card: rgba(255,255,255,.06);
  --cp-stroke: rgba(255,255,255,.14);
  --cp-stroke2: rgba(255,255,255,.22);
  --cp-text: rgba(255,255,255,.92);
  --cp-muted: rgba(255,255,255,.66);
  --cp-muted2: rgba(255,255,255,.52);
  --cp-c1:#22d3ee; --cp-c2:#8b5cf6; --cp-c3:#34d399;
  --cp-shadow: 0 18px 60px rgba(0,0,0,.55);
  --cp-radius: 18px;
  --cp-radius2: 22px;
  --cp-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC","Microsoft YaHei","Noto Sans CJK SC", sans-serif;
  --cp-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html,body{height:100%}
body{
  margin:0;
  color:var(--cp-text) !important;
  font-family:var(--cp-sans) !important;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 600px at 90% 25%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(52,211,153,.10), transparent 55%),
    linear-gradient(180deg, var(--cp-bg0), var(--cp-bg1)) !important;
}

/* tighten legacy <br><br> spacing */
body > br{display:none}

/* Top info line */
body > p{
  max-width: 980px;
  margin: 18px auto 10px !important;
  padding: 10px 14px;
  border:1px solid var(--cp-stroke);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--cp-shadow);
  backdrop-filter: blur(12px);
  color: var(--cp-muted) !important;
  display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap;
}
#weather, #pDate, #pTime{color: var(--cp-text) !important}

/* Main container */
.content.pailuan{
  max-width: 980px;
  margin: 0 auto 60px !important;
  float: none !important;
  padding: 0 14px;
}
.left{width:100% !important; float:none !important}

/* Cards */
.box01, .box02{
  border:1px solid var(--cp-stroke) !important;
  border-radius: var(--cp-radius2) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.45) !important;
  overflow:hidden;
}

/* Headers */
.box02 .hd, .box01 .hd{
  background: transparent !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  padding: 14px 16px !important;
}
.h1List, .box01 .hd h3{
  margin:0 !important;
  font-weight: 800 !important;
  letter-spacing:.2px;
  color: var(--cp-text) !important;
}
.box01 .hd h3{font-size:14px !important}
.h1List{font-size:16px !important; display:flex; align-items:center; gap:10px}
.h1List img{filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); height:26px; width:auto}

/* Body */
.box02 .bd, .box01 .bd{padding: 16px !important; background: transparent !important}
.sf-con p{color: var(--cp-muted) !important; line-height: 1.85 !important; font-size: 13px !important}

/* Search */
.sf-sear p{color: var(--cp-muted2) !important}
.sf-sear .clearfix{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.sf-sear .fl{flex: 1 1 260px}
.sf-sear .fr{flex: 0 0 auto}
.sf-sear .int{
  width: 100% !important;
  height: 46px !important;
  border-radius: 16px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.18) !important;
  color: var(--cp-text) !important;
  padding: 0 14px !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.sf-sear .int::placeholder{color: rgba(255,255,255,.45)}
.sf-sear .int:focus{
  border-color: rgba(34,211,238,.45) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}
.sf-sear .btn{
  height: 46px !important;
  min-width: 110px;
  border-radius: 16px !important;
  border:1px solid rgba(34,211,238,.40) !important;
  background: linear-gradient(135deg, rgba(34,211,238,.20), rgba(139,92,246,.16)) !important;
  color: var(--cp-text) !important;
  font-weight: 800 !important;
  letter-spacing:.2px;
  cursor:pointer;
  padding: 0 16px !important;
  transition: transform .12s ease, filter .12s ease;
}
.sf-sear .btn:hover{transform: translateY(-1px); filter: brightness(1.06)}
.sf-sear .btn:active{transform: translateY(0)}
.sf-sear .btn:focus{outline:none; box-shadow: 0 0 0 3px rgba(139,92,246,.12)}

/* Results */
.sf-result p{color: var(--cp-muted) !important; line-height: 1.85 !important}
.sf-result p span{color: var(--cp-muted2) !important}
.sf-result strong{color: var(--cp-text) !important}
.sf-result a{color: rgba(34,211,238,.92) !important}
.sf-result a:hover{color: rgba(34,211,238,1) !important}
#error{
  border:1px solid rgba(239,68,68,.35) !important;
  background: rgba(239,68,68,.10) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}

/* Lists */
.tlist01 li a{
  color: rgba(255,255,255,.84) !important;
  background: rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  display:block;
}
.tlist01 li a:hover{
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important
}

/* Hide legacy floating ad zones if present */
.couplet, .zone5{display:none !important}

/* Premium header injected */
.cp-topbar{
  max-width: 980px;
  margin: 18px auto 14px;
  padding: 14px 16px;
  border:1px solid var(--cp-stroke);
  border-radius: var(--cp-radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--cp-shadow);
  backdrop-filter: blur(12px);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.cp-brand{display:flex; align-items:center; gap:12px}
.cp-logo{
  width:44px;height:44px;border-radius:14px;
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(34,211,238,.95), transparent 62%),
    radial-gradient(20px 20px at 70% 70%, rgba(139,92,246,.92), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.cp-brand h1{margin:0;font-size:15px}
.cp-brand p{margin:2px 0 0; font-size:12px; color: var(--cp-muted)}
.cp-badges{display:flex; gap:8px; flex-wrap:wrap}
.cp-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--cp-muted);
  font-size:12px;
}
.cp-pill i{color: rgba(34,211,238,.92)}

.input-wrap,
.input-container,
.search-box {
  display: flex;
  justify-content: center;
}

.input-wrap input,
.input-container input {
  max-width: 420px;
  width: 90%;
}