/* cinekomi.in — "Dusk Glass" theme: dim, professional liquid glass. Loads LAST; delete this file + its <link> to revert. */
:root{
  --bg:#0b0d13;--panel:#12151d;--line:rgba(190,200,230,.10);--text:#e8eaf2;--mute:#8b90a3;
  --hot:#7f8fe0;--gold:#b9c2ee;--pill:rgba(20,24,34,.62);--r:14px;
  --edge:rgba(200,210,240,.14);
  --spec:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 20px rgba(255,255,255,.02);
  --drop:0 14px 36px -18px rgba(0,0,0,.8);
  --glass:rgba(22,26,38,.58);
}
body{background:radial-gradient(110% 55% at 50% -8%,#1b2133 0%,#0f121a 48%,#0b0d13 82%) fixed;letter-spacing:.005em}
h1,h2,h3,.brand{font-weight:600;letter-spacing:-.015em}

/* ambient light: low, cool, slow */
.liquid-bg{opacity:.5}
.liquid-bg i:nth-child(1){background:radial-gradient(circle at 40% 40%,rgba(88,100,190,.42),transparent 62%)}
.liquid-bg i:nth-child(2){background:radial-gradient(circle,rgba(50,110,150,.26),transparent 62%)}
.liquid-bg i:nth-child(3){background:radial-gradient(circle,rgba(120,80,150,.18),transparent 62%)}

/* glass surfaces: frosted dark, thin edge, soft bevel (no bright white) */
.top,.tabbar,.gp,.btn,select,.chipsrow a,.meta,.sg,.ctl,.rb,.toast,.tag,.tabs a,.eps a,.sblock,.adm.row,.note{
  --surface:radial-gradient(180px circle at var(--mx,50%) var(--my,-70%),rgba(200,210,255,calc(.04 + var(--sa,0)*.12)),transparent 65%),
            linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 50%,rgba(255,255,255,.04));
  --surface-hot:linear-gradient(135deg,#8c9ae8,#5a68b8 80%);
  background:var(--surface),var(--glass);border-color:var(--edge)}
.top,.tabbar,.gp,.btn,select,.chipsrow a,.meta,.sg,.ctl,.rb,.toast,.brand,.nav,.rbtn,.mrow{
  -webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%)}

/* top bar */
.brand,.nav,.rbtn,.search input{background:var(--pill);border-color:var(--line)}
.brand{font-weight:700;font-size:20px}
.brand b{color:var(--hot)}

/* hero: cinematic fade into the page colour */
.hc{border-radius:24px;box-shadow:0 30px 70px -40px #000;background:#0e1118}
.slide::after{background:linear-gradient(to top,#0b0d13 2%,rgba(11,13,19,.6) 36%,transparent 72%)}
.gp h1{font-weight:700;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.mrow{background:rgba(14,17,25,.55);border-color:var(--line)}
.mrow>*{color:#d9dcea}

/* buttons: one calm primary, glass secondary */
.btn{background:var(--surface),rgba(255,255,255,.04);border-radius:12px;color:var(--text)}
.btn.hot{background:linear-gradient(135deg,#97a4ee,#6573c9);color:#0b0d13;border-color:rgba(255,255,255,.25);box-shadow:0 10px 28px -12px rgba(127,143,224,.6),var(--spec)}
.btn.ic{border-radius:50%}
.btn.hot:hover{filter:brightness(1.06)}

/* rows and cards */
.row-h h2{background:none;border:0;padding:0;font-size:19px;color:var(--text)}
.row-h a{border-radius:10px;color:var(--mute);border-color:var(--line)}
.row-h a:hover{color:var(--text);border-color:var(--edge)}
.poster{border-radius:14px;border-color:var(--line);background:#12151d;box-shadow:0 10px 26px -16px #000}
.card:hover .poster,.poster.glowing{border-color:rgba(150,165,235,.45);box-shadow:0 16px 36px -16px rgba(100,115,200,.45)}
.card h3{font-weight:500;color:#d9dcea}
.gl{background:radial-gradient(circle 90px at var(--gx,50%) var(--gy,50%),rgba(160,175,255,.22),rgba(127,143,224,.07) 55%,transparent)}

/* chips, tabs, episodes */
.chipsrow a,.tag,.tabs a,.eps a{border-radius:10px;color:#c9cde0}
.tabs a.on,.eps a.on,.chipsrow a.on{background:linear-gradient(135deg,#8c9ae8,#5a68b8);color:#fff;border-color:transparent}
.bar{background:var(--hot)}
.score,.gold{color:var(--gold)}

/* detail page + panels */
.detail.glass{background:rgba(18,21,30,.66);border-radius:22px;border:1px solid var(--line)}
.sblock,.adm.row,.note{background:var(--surface),rgba(18,21,30,.6)}
input,textarea,select{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);border-radius:10px}
input:focus,textarea:focus,select:focus{border-color:rgba(150,165,235,.55);outline:none}
a:focus-visible,button:focus-visible{box-shadow:0 0 0 2px var(--hot)}
.catmode{border-color:rgba(150,165,235,.35)}
::selection{background:rgba(127,143,224,.35)}

/* mobile bottom bar */
@media(max-width:820px){
  .tabbar{background:rgba(16,19,28,.78);border-color:var(--edge)}
  .tabbar a{color:#aab0c6}
  .tabbar a.on{background:linear-gradient(135deg,#8c9ae8,#5a68b8);box-shadow:0 8px 22px -8px rgba(100,115,200,.7)}
  .hc{border-radius:22px}
}