:root{
  --bg:#0b0e14; --panel:#11151f; --card:#161c2b; --line:#232b40;
  --txt:#e8ecf4; --dim:#8b93a7; --acc:#ff4d6d; --gold:#ffc94d; --green:#3ddc84;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--txt); font-family:'Segoe UI',system-ui,sans-serif; font-size:14px;}
header{display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5;}
.brand{font-weight:800; letter-spacing:3px; font-size:17px;}
.brand .zap{color:var(--gold);}
.brand .sub{display:block; font-size:9px; letter-spacing:2px; color:var(--dim); font-weight:600;}
.hctl{display:flex; gap:10px; align-items:center;}
.live{border:1px solid var(--green); color:var(--green); border-radius:8px; padding:5px 12px; font-weight:700; font-size:12px;}
.live .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:6px; animation:blink 2s infinite;}
@keyframes blink{50%{opacity:.35;}}
.updated{color:var(--dim); font-size:12px;}
.btn{background:#1a2030; color:var(--txt); border:1px solid #2a3248; border-radius:8px; padding:8px 14px; cursor:pointer; font-size:13px;}
.btn:hover{border-color:var(--acc);}
.btn.primary{background:var(--acc); border-color:var(--acc); color:#fff; font-weight:700;}
.btn.ghost{background:transparent;}
.watchrow{display:flex; gap:10px; align-items:center; padding:10px 18px; border-bottom:1px solid var(--line);}
.wlabel{font-size:11px; letter-spacing:2px; color:var(--dim); font-weight:700;}
#watchlist{flex:1; background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:9px 12px; font-size:13px;}
.whint{font-size:11px; color:var(--dim);}
main{display:grid; grid-template-columns:1.15fr 1fr; gap:0; min-height:70vh;}
.feed{border-right:1px solid var(--line); padding:14px 18px;}
.detail{padding:14px 18px; background:var(--panel);}
.sechead{display:flex; justify-content:space-between; font-size:11px; letter-spacing:2px; color:var(--dim); font-weight:700; margin:12px 0 8px;}
.sechead:first-child{margin-top:0;}
#count{letter-spacing:0;}
#filter{width:100%; background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:9px 12px; margin-bottom:10px;}
table{width:100%; border-collapse:collapse;}
th{text-align:left; font-size:10px; letter-spacing:2px; color:var(--dim); padding:8px 6px; border-bottom:1px solid var(--line);}
td{padding:9px 6px; border-bottom:1px solid #161c2b; vertical-align:top;}
tbody tr{cursor:pointer;}
tbody tr:hover td{background:#141a29;}
tbody tr.sel td{background:#1b2740;}
tbody tr.hit td{color:var(--gold);}
td.time{white-space:nowrap; color:var(--dim); font-size:12px;}
td.src{white-space:nowrap; font-size:12px;}
#dTitle{font-size:17px; margin:6px 0;}
.meta{color:var(--dim); font-size:12px; margin-bottom:4px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; min-height:60px; white-space:pre-wrap; font-size:13px; line-height:1.55;}
textarea.card{width:100%; color:var(--txt); font-family:inherit; resize:vertical;}
.hit{background:#2e240a; color:var(--gold); border:1px solid var(--gold); display:inline-block; border-radius:8px; padding:4px 12px; font-weight:700; font-size:12px; margin-bottom:6px;}
.hidden{display:none;}
.goldtag{background:#2e240a; color:var(--gold); border:1px solid var(--gold); border-radius:6px; padding:1px 8px; font-size:10px;}
.scorerow{display:flex; gap:12px; align-items:center; margin-bottom:6px;}
.scorebadge{background:#1a2030; color:var(--dim); border:1px solid #2a3248; border-radius:8px; padding:5px 12px; font-weight:700; white-space:nowrap;}
.scorebadge.good{background:#0f2f1d; color:var(--green); border-color:var(--green);}
.scorebadge.mid{background:#2e240a; color:var(--gold); border-color:var(--gold);}
.scorebadge.bad{background:#331414; color:#ff6b6b; border-color:#ff6b6b;}
.tip{color:var(--dim); font-size:12px;}
.break{color:var(--dim); font-size:12px; margin-bottom:8px;}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
footer{padding:12px 18px; border-top:1px solid var(--line); color:var(--dim); font-size:12px;}
footer .honest{margin-top:6px; font-size:11px; opacity:.75;}
@media(max-width:900px){main{grid-template-columns:1fr;} .feed{border-right:none; border-bottom:1px solid var(--line);}}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:4px; background:#0d1220; border:1px solid var(--line); border-radius:10px; padding:3px;}
.tab{background:transparent; border:none; color:var(--dim); font-weight:700; font-size:12px; letter-spacing:1.5px;
  padding:7px 14px; border-radius:7px; cursor:pointer;}
.tab.active{background:var(--acc); color:#fff;}
.tab:hover:not(.active){color:var(--txt);}

/* ---------- instagram autoposter panel ---------- */
.igpanel{padding:14px 18px 30px; max-width:900px;}
.iggrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:6px;}
.igstat{padding:14px;}
.iglabel{font-size:10px; letter-spacing:2px; color:var(--dim); font-weight:700; margin-bottom:8px;}
.igbig{font-size:17px; font-weight:700; word-break:break-word;}
.igsub{font-size:12px; color:var(--dim); margin-top:6px; line-height:1.5;}
.igstatus{font-size:11px; letter-spacing:1px; font-weight:700;}
.igstatus.ok{color:var(--green);}
.igstatus.warn{color:var(--gold);}
.igstatus.err{color:var(--acc);}
.igconfig{display:flex; flex-direction:column; gap:12px; padding:16px;}
.igconfig label{display:flex; align-items:center; gap:10px; font-size:13px; flex-wrap:wrap;}
.igconfig input[type=number]{width:80px;}
.igconfig input[type=time]{width:110px;}
.igconfig input{background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:8px 10px; font-size:13px;}
.igcheck{cursor:pointer;}
.igmsg{font-size:13px; min-height:18px;}
.igmsg.ok{color:var(--green);}
.igmsg.err{color:var(--acc);}
.ighistory{display:flex; flex-direction:column; gap:8px;}
.ighist{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:13px;}
.ighist .ht{font-weight:700;}
.ighist .hm{color:var(--dim); font-size:12px; margin-top:4px;}
.ighist a{color:var(--gold);}
@media(max-width:768px){
  .iggrid{grid-template-columns:1fr;}
  .igpanel{padding:10px 14px 26px;}
}

/* ---------- access-code lock screen ---------- */
.lock{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,16,.92); backdrop-filter:blur(6px); padding:20px;}
.lock.hidden{display:none;}
.lockcard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:34px 30px;
  width:100%; max-width:360px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.locklogo{font-weight:800; letter-spacing:3px; font-size:20px; color:var(--gold); margin-bottom:8px;}
.locksub{font-size:10px; letter-spacing:2px; color:var(--dim); margin-bottom:22px;}
#lockInput{width:100%; background:#0d1322; border:1px solid #3a4560; color:var(--txt);
  border-radius:10px; padding:13px 14px; font-size:16px; text-align:center; letter-spacing:1px; margin-bottom:14px;}
#lockInput:focus{outline:none; border-color:var(--gold);}
.lockbtn{width:100%; padding:13px; font-weight:800; letter-spacing:2px; background:var(--gold);
  border-color:var(--gold); color:#111;}
.lockbtn:hover{border-color:var(--gold); filter:brightness(1.08);}
.lockerr{min-height:20px; margin-top:10px; color:var(--acc); font-size:13px;}
.appblur{filter:blur(14px); pointer-events:none; user-select:none;}
.shake{animation:shake .35s;}
@keyframes shake{25%{transform:translateX(-7px);}50%{transform:translateX(7px);}75%{transform:translateX(-4px);}}

/* ---------- mobile-only components (hidden on desktop) ---------- */
.cards{display:none;}
.backdrop{display:none;}
.sheetHandle,.sheetClose{display:none;}

/* ---------- professional mobile app view ---------- */
@media (max-width:768px){
  html{-webkit-text-size-adjust:100%;}
  body{-webkit-tap-highlight-color:transparent; font-size:15px;}

  /* compact app bar */
  header{padding:10px 14px; background:rgba(11,14,20,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
  .brand{font-size:14px; letter-spacing:2px;}
  .brand .sub{font-size:8px;}
  .updated{display:none;}
  #refreshBtn{padding:9px 12px; font-size:14px; border-radius:10px;}

  /* slim watchlist row */
  .watchrow{padding:8px 14px; gap:8px;}
  .wlabel{font-size:10px;}
  #watchlist{padding:10px 12px; font-size:14px;}
  .whint{display:none;}

  /* single-column app layout */
  main{display:block;}
  .feed{border-right:none; padding:10px 14px 26px;}
  .feed table{display:none;}
  #filter{position:sticky; top:57px; z-index:4; padding:12px 14px; font-size:14px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.35);}
  .sechead{margin:14px 2px 10px;}

  /* news cards */
  .cards{display:flex; flex-direction:column; gap:10px;}
  .ncard{background:linear-gradient(180deg,#171d2d,#141a29); border:1px solid var(--line); border-radius:16px;
    padding:13px 15px; cursor:pointer; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;}
  .ncard:active{transform:scale(.978);}
  .ncard.hit{border-color:rgba(255,201,77,.65); border-left:4px solid var(--gold); box-shadow:0 4px 22px rgba(255,201,77,.10);}
  .ncard.sel{border-color:var(--acc); box-shadow:0 4px 22px rgba(255,77,109,.14);}
  .ncard-top{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
  .spill{font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:20px; white-space:nowrap;}
  .spill.yt{background:rgba(255,77,109,.14); color:#ff8fa3;}
  .spill.ann{background:rgba(255,201,77,.13); color:var(--gold);}
  .spill.mal{background:rgba(96,165,250,.14); color:#93c5fd;}
  .spill.corner{background:rgba(251,146,60,.14); color:#fdba74;}
  .spill.otaku{background:rgba(192,132,252,.14); color:#d8b4fe;}
  .spill.gn{background:rgba(61,220,132,.12); color:var(--green);}
  .spill.reddit{background:rgba(255,107,53,.14); color:#ff9e7d;}
  .spill.other{background:#232b40; color:var(--dim);}
  .ago{margin-left:auto; font-size:11px; color:var(--dim); white-space:nowrap;}
  .hitmini{font-size:10px; font-weight:800; color:var(--gold); letter-spacing:.5px;}
  .ncard-title{font-size:14.5px; font-weight:600; line-height:1.5; display:-webkit-box;
    -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

  /* detail becomes a bottom sheet */
  .detail{position:fixed; left:0; right:0; bottom:0; z-index:60; max-height:92dvh; overflow-y:auto;
    -webkit-overflow-scrolling:touch; background:#101524; border-top:1px solid #2a3350; border-radius:24px 24px 0 0;
    padding:8px 18px calc(22px + env(safe-area-inset-bottom)); transform:translateY(104%);
    transition:transform .34s cubic-bezier(.32,.72,.3,1); box-shadow:0 -20px 60px rgba(0,0,0,.6);}
  .detail.open{transform:none;}
  .backdrop.open{display:block; position:fixed; inset:0; z-index:55; background:rgba(2,4,8,.62); animation:fadein .25s;}
  @keyframes fadein{from{opacity:0;}}
  .sheetHandle{display:block; width:46px; height:5px; border-radius:3px; background:#2c3650; margin:4px auto 12px;}
  .sheetClose{display:flex; position:absolute; top:16px; right:16px; width:36px; height:36px; align-items:center;
    justify-content:center; border-radius:50%; background:#1a2030; border:1px solid var(--line); color:var(--txt); font-size:15px;}
  #dTitle{font-size:18px; line-height:1.45; padding-right:36px;}
  #dSummary{font-size:14px; line-height:1.65;}
  #dCaption{font-size:14px; line-height:1.6;}
  .btnrow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}
  .btnrow .btn{padding:15px 10px; font-size:14px; font-weight:700; border-radius:13px;}
  #genBtn{grid-column:1/-1;}

  footer{padding:16px 18px calc(20px + env(safe-area-inset-bottom)); font-size:11px;}
  .honest{font-size:10.5px;}
}