/* =========================================================
   DESIGN TOKENS — "Rune-Midgard Sky" (white / blue, from the RO logo)
   ========================================================= */
:root{
  --sky-0:#ffffff;
  --sky-1:#f6f9ff;      /* page background */
  --sky-2:#eaf1fd;      /* soft panel */
  --sky-3:#d6e3fa;      /* borders / dividers */
  --ice-1:#b9cbf2;      /* logo highlight */
  --ice-2:#8ea6e3;      /* logo mid */
  --rune-1:#5f7bd0;     /* primary */
  --rune-2:#3f5bb2;     /* primary strong (logo outline) */
  --rune-3:#2a3f86;     /* deep */
  --navy:#16224a;       /* text / footer */
  --ink-2:#4a5680;      /* secondary text */
  --ink-3:#7c87ab;      /* muted */
  --gold:#c9a24a;       /* tiny accent only (online dot halo, hot tags) */
  --ok:#2fbf8f;
  --link:var(--rune-2);   /* blue used as TEXT (dark theme lightens these; button/tag backgrounds keep --rune-*) */
  --link-2:var(--rune-3);
  --link-3:var(--rune-1);
  --edge:var(--ice-1);    /* highlighted borders */
  --deep:#16224a;         /* utility bar + footer background */
  --row-alt:#f8faff; --row-hover:#eef3ff;

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --shadow-1:0 1px 2px rgba(22,34,74,.06),0 4px 14px rgba(63,91,178,.08);
  --shadow-2:0 2px 6px rgba(22,34,74,.06),0 18px 40px rgba(63,91,178,.16);
  --glass:rgba(255,255,255,.72);

  --f-th:'Noto Sans Thai',system-ui,sans-serif;
  --f-display:'Cinzel','Noto Sans Thai',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-th);color:var(--navy);background:var(--sky-1);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:1rem;letter-spacing:.2px;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn svg{width:20px;height:20px}
.btn-primary{color:#fff;background:linear-gradient(180deg,#7590e0 0%,var(--rune-2) 55%,var(--rune-3) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px rgba(63,91,178,.35);border:1px solid #33499a}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 30px rgba(63,91,178,.45)}
.btn-ghost{color:var(--link-2);background:rgba(255,255,255,.8);border:1px solid var(--edge);backdrop-filter:blur(8px);box-shadow:var(--shadow-1)}
.btn-ghost:hover{background:var(--sky-0);transform:translateY(-2px)}
.btn-sm{min-height:40px;padding:0 18px;font-size:0.875rem}

/* =========================================================
   TOP BAR + NAV
   ========================================================= */
.utility{background:var(--deep);color:#c9d5f5;font-size:0.8125rem}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:16px}
.utility .stat{display:flex;gap:22px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(47,191,143,.25);display:inline-block;margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(47,191,143,0)}}
.utility b{color:#fff;font-weight:600}
.utility .lang{display:flex;gap:10px}
.utility .lang a{opacity:.6}.utility .lang a.on{opacity:1;color:#fff}

.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--sky-3)}
.nav .wrap{display:flex;align-items:center;height:72px;gap:28px}
.nav .brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav .brand img{height:50px;width:auto;filter:drop-shadow(0 2px 4px rgba(63,91,178,.25))}
.nav .brand span{font-family:var(--f-display);font-weight:700;font-size:0.8125rem;letter-spacing:2px;color:var(--link);line-height:1.1}
.nav ul{display:flex;gap:4px;list-style:none;margin-left:auto}
.nav ul a{display:block;padding:8px 14px;border-radius:999px;font-weight:500;font-size:0.9375rem;color:var(--ink-2);transition:.2s}
.nav ul a:hover,.nav ul a.on{color:var(--link);background:var(--sky-2)}
.nav .actions{display:flex;gap:10px}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--sky-3);margin-left:auto}
.burger svg{width:22px;height:22px;margin:auto}

/* =========================================================
   HERO — the sky above Juno
   ========================================================= */
.hero{position:relative;min-height:min(820px,100svh);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero{background:linear-gradient(180deg,#7fb0e6 0%,#a9cbf0 30%,#d4e5f8 58%,#eef4fd 80%)}
.hero .art{position:absolute;left:-2%;right:-2%;bottom:0;height:58%;z-index:-3;background:url(../art/juno-pano.png) 60% 100%/cover no-repeat;filter:saturate(1.05) blur(1.4px);
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 30%);mask:linear-gradient(180deg,transparent 0%,#000 30%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(246,249,255,0) 0%,rgba(246,249,255,0) 72%,var(--sky-1) 100%),
    radial-gradient(ellipse 60% 70% at 18% 45%,rgba(246,249,255,.92) 0%,rgba(246,249,255,.6) 45%,rgba(246,249,255,0) 75%)}
/* drifting clouds */
.clouds{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cloud{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(6px);animation:drift linear infinite}
.cloud.c1{width:520px;height:160px;top:8%;left:-10%;animation-duration:70s}
.cloud.c2{width:380px;height:120px;top:30%;left:50%;animation-duration:90s;opacity:.8}
.cloud.c3{width:640px;height:200px;top:62%;left:-30%;animation-duration:110s;opacity:.7}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(70vw)}}
/* light rays */
.rays{position:absolute;top:-20%;right:8%;width:60vw;height:120%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 200deg at 70% 0%,transparent 0deg,rgba(255,255,255,.55) 8deg,transparent 16deg,rgba(255,255,255,.35) 26deg,transparent 34deg,rgba(255,255,255,.4) 44deg,transparent 52deg);
  mask-image:linear-gradient(180deg,#000 10%,transparent 75%);opacity:.8}

.hero .wrap{position:relative;padding:72px 0 140px}
.hero-logo{position:relative;width:min(560px,92%);margin-left:-4px;animation:float 6s ease-in-out infinite}
.hero-logo img{width:100%;filter:drop-shadow(0 10px 24px rgba(42,63,134,.28))}
@keyframes float{50%{transform:translateY(-8px)}}
.hero h1{font-size:clamp(1.625rem,4vw,2.625rem);font-weight:800;line-height:1.3;margin-top:8px;color:var(--navy);max-width:620px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--rune-2),var(--rune-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(0.9375rem,1.6vw,1.125rem);color:var(--ink-2);margin-top:14px;max-width:540px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:0.8125rem;font-weight:500;background:rgba(255,255,255,.75);border:1px solid var(--sky-3);color:var(--ink-2);backdrop-filter:blur(6px)}
.chip svg{width:14px;height:14px;color:var(--link-3)}
.scroll-hint{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);color:var(--link);opacity:.6;font-size:0.75rem;letter-spacing:3px;font-family:var(--f-display);display:flex;flex-direction:column;align-items:center;gap:6px}
.scroll-hint i{width:1px;height:34px;background:linear-gradient(var(--rune-2),transparent);animation:hint 1.8s infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   STATUS STRIP (overlaps hero)
   ========================================================= */
.status{position:relative;z-index:5;margin-top:-84px}
.status .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--sky-0);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden}
.status .cell{padding:22px 26px;display:flex;gap:14px;align-items:center;border-left:1px solid var(--sky-3)}
.status .cell:first-child{border-left:0;background:linear-gradient(135deg,rgba(95,123,208,.10),transparent)}
.status .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#fff,var(--sky-2));border:1px solid var(--sky-3);color:var(--link);flex-shrink:0}
.status .ico svg{width:22px;height:22px}
.status small{display:block;font-size:0.7812rem;color:var(--ink-3);font-weight:500}
.status strong{font-size:1.25rem;font-weight:700;line-height:1.3}
.status .online{color:var(--ok)}
.status .srv{display:flex;gap:6px;margin-top:4px}
.status .srv span{font-size:0.6875rem;font-weight:600;padding:1px 8px;border-radius:999px;background:rgba(47,191,143,.12);color:#1d8f69}

/* =========================================================
   SECTION HEADINGS (ornamental, official-site style)
   ========================================================= */
section{padding:96px 0}
.sec-head{text-align:center;margin-bottom:48px}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-display);font-weight:700;font-size:0.8125rem;letter-spacing:.35em;color:var(--link-3)}
.eyebrow::before,.eyebrow::after{content:"";width:56px;height:9px;background:
  linear-gradient(var(--ice-2),var(--ice-2)) center/100% 1px no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000)}
.eyebrow::after{transform:scaleX(-1)}
.sec-head h2{font-size:clamp(1.625rem,3.4vw,2.375rem);font-weight:800;margin-top:8px;letter-spacing:-.2px}
.sec-head p{color:var(--ink-2);margin-top:8px}
.diamond{display:block;width:9px;height:9px;margin:14px auto 0;transform:rotate(45deg);background:linear-gradient(135deg,var(--ice-1),var(--rune-2))}
.sec-head.left{text-align:left}.sec-head.left .eyebrow::before{display:none}.sec-head.left .diamond{margin-left:0}

/* =========================================================
   ART FRAME — reusable crystal frame for artwork
   ========================================================= */
.frame{position:relative;border-radius:var(--r-lg);padding:8px;background:linear-gradient(160deg,#fff,var(--sky-2) 60%,var(--ice-1));box-shadow:var(--shadow-2)}
.frame>.in{position:relative;border-radius:calc(var(--r-lg) - 6px);overflow:hidden;height:100%}
.frame>.in::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 40px rgba(22,34,74,.18);pointer-events:none}
.frame .corner{position:absolute;width:26px;height:26px;border:2px solid var(--rune-1);opacity:.55}
.frame .tl{top:-5px;left:-5px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.frame .tr{top:-5px;right:-5px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.frame .bl{bottom:-5px;left:-5px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.frame .br{bottom:-5px;right:-5px;border-left:0;border-top:0;border-radius:0 0 12px 0}
/* placeholder for art that will be supplied later */
.slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--link);
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.9),transparent 60%),
    repeating-linear-gradient(135deg,rgba(95,123,208,.07) 0 12px,transparent 12px 24px),
    linear-gradient(160deg,#dfe8fb,#b9cbf2)}
.slot b{font-family:var(--f-display);letter-spacing:.25em;font-size:0.75rem;display:block}
.slot span{font-size:0.75rem;color:var(--ink-3)}

/* =========================================================
   NEWS
   ========================================================= */
.news .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.feature{display:block;background:var(--sky-0);border:1px solid var(--sky-3);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden;transition:transform .3s,box-shadow .3s}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.feature .cv{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#dfe8fb,#b9cbf2)}
.feature .cv img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.feature:hover .cv img{transform:scale(1.04)}
.feature .cv::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(22,34,74,.35))}
.feature .badge{position:absolute;top:16px;left:16px;z-index:2}
.feature .bd{padding:22px 26px 24px}
.feature time{font-size:0.8125rem;color:var(--ink-3)}
.feature h3{font-size:1.375rem;font-weight:700;margin-top:4px;line-height:1.45}
.feature p{color:var(--ink-2);margin-top:6px;font-size:0.9375rem}
.feature .more{margin-top:14px;color:var(--link);font-weight:600;font-size:0.875rem;display:inline-flex;gap:6px;align-items:center}
.feature .more svg{width:16px;height:16px;transition:transform .2s}
.feature:hover .more svg{transform:translateX(4px)}
.tag{display:inline-block;font-size:0.75rem;font-weight:600;padding:3px 12px;border-radius:999px;background:var(--rune-2);color:#fff;white-space:nowrap}
.tag.update{background:#e6eeff;color:var(--link)}
.tag.event{background:#fff4dc;color:#9a7322}
.tag.notice{background:#e7f8f1;color:#1d8f69}
.feature .tag{box-shadow:0 2px 8px rgba(22,34,74,.15)}
.board{background:var(--sky-0);border:1px solid var(--sky-3);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:10px 8px 8px;display:flex;flex-direction:column}
.tabs{display:flex;gap:4px;padding:6px 10px 14px;border-bottom:1px solid var(--sky-2);overflow-x:auto}
.tabs button{padding:8px 16px;border-radius:999px;font-size:0.875rem;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:.2s}
.tabs button.on{background:var(--sky-2);color:var(--link)}
.list{list-style:none}
.list li a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:15px 14px;border-radius:12px;transition:.2s}
.list li a:hover{background:var(--sky-1)}
.list li+li a{border-top:1px dashed var(--sky-3)}
.list .t{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list time{font-size:0.8125rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.board .all{margin:6px;text-align:center;padding:12px;border-radius:12px;background:var(--sky-1);color:var(--link);font-weight:600;font-size:0.875rem}

/* =========================================================
   EPISODE 5.0 — what players remember
   ========================================================= */
.ep5{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-1),#e3ecfc 45%,var(--sky-1))}
.ep5::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;left:-380px;top:-160px;border:1px solid rgba(95,123,208,.18);box-shadow:0 0 0 60px rgba(95,123,208,.04),0 0 0 140px rgba(95,123,208,.03)}
.ep5-top{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:end;position:relative}
.ep5-art{position:relative;height:520px}
.ep5-art::before{content:"";position:absolute;left:8%;right:8%;bottom:0;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#cfe0f8 60%,rgba(207,224,248,0) 72%)}
.ep5-art img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:none;filter:drop-shadow(0 18px 30px rgba(42,63,134,.25))}
.ep5-art .bubble{position:absolute;right:-70px;top:36px;background:var(--sky-0);border:1px solid var(--sky-3);border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:0.875rem;font-weight:600;color:var(--link-2);box-shadow:var(--shadow-1);max-width:190px;line-height:1.5}
.ep5-copy{padding-bottom:12px}
.ep5-copy h2{font-size:clamp(1.625rem,3.4vw,2.5rem);font-weight:800;line-height:1.3}
.ep5-copy h2 em{font-style:normal;background:linear-gradient(90deg,var(--rune-2),var(--rune-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.ep5-copy>p{color:var(--ink-2);margin-top:12px;max-width:620px}
.ep5-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.ep5-stats div{padding:18px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.8);border:1px solid var(--sky-0);box-shadow:var(--shadow-1)}
.ep5-stats b{display:block;font:900 2rem/1.1 var(--f-display);color:var(--link)}
.ep5-stats span{font-size:0.8125rem;color:var(--ink-2)}
.ep5-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;position:relative}
.ep5-card{padding:24px;border-radius:var(--r-lg);background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-1)}
.ep5-card h4{font-size:1.0625rem;font-weight:700;display:flex;align-items:center;gap:10px}
.ep5-card h4 i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(180deg,var(--rune-1),var(--rune-2));color:#fff;font-style:normal}
.ep5-card h4 svg{width:18px;height:18px}
.ep5-card p{font-size:0.875rem;color:var(--ink-3);margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips span{font-size:0.8125rem;font-weight:500;padding:4px 11px;border-radius:999px;background:var(--sky-1);border:1px solid var(--sky-3);color:var(--ink-2)}
.chips span.hl{background:linear-gradient(180deg,#eef3ff,#dfe8fb);border-color:var(--edge);color:var(--link-2);font-weight:600}
.mvp{margin-top:56px}
.mvp-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.mvp-head h3{font-size:1.375rem;font-weight:800}
.mvp-head p{color:var(--ink-3);font-size:0.875rem}
.mvp-row{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.mcard{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 6px 18px rgba(22,34,74,.18);transition:transform .35s,box-shadow .35s;background:#e7c983}
.mcard img{width:100%;height:100%;object-fit:cover}
.mcard span{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 8px;font-size:0.7812rem;font-weight:700;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(22,34,74,.85))}
.mcard:hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 18px 34px rgba(22,34,74,.28)}
.memories-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.memories-list div{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-md);background:rgba(255,255,255,.7);border:1px dashed var(--edge);font-size:0.875rem;color:var(--ink-2)}
.memories-list div::before{content:"◆";color:var(--link-3);font-size:0.625rem;margin-top:5px}

/* =========================================================
   CLASSES
   ========================================================= */
.jobs{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.job{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,var(--hue,#dfe8fb),#fff 62%);border:1px solid var(--sky-3);box-shadow:var(--shadow-1);transition:transform .35s,box-shadow .35s}
.job:hover{transform:translateY(-8px);box-shadow:var(--shadow-2)}
.job .stage{position:relative;height:250px;display:flex;align-items:flex-end;justify-content:center;padding:18px 8px 14px}
.job .stage::before{content:"";position:absolute;left:50%;bottom:10px;width:72%;height:18px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(42,63,134,.22),transparent)}
.job .stage::after{content:"";position:absolute;left:50%;top:22px;width:150px;height:150px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}
.job .stage img{position:relative;z-index:1;max-height:100%;max-width:100%;width:auto;image-rendering:pixelated;transition:transform .35s}
.job:hover .stage img{transform:translateY(-6px) scale(1.04)}
.job .info{padding:6px 14px 18px;text-align:center;border-top:1px solid rgba(214,227,250,.7);background:rgba(255,255,255,.6)}
.job .info small{font-family:var(--f-display);letter-spacing:.2em;font-size:0.6875rem;color:var(--link-3);font-weight:700}
.job .info b{display:block;font-size:1.125rem;margin-top:2px}
.job .info span{display:block;font-size:0.75rem;color:var(--ink-3);margin-top:6px;line-height:1.5}

/* =========================================================
   RANKING
   ========================================================= */
.rank .grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px}
.panel{background:var(--sky-0);border:1px solid var(--sky-3);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}
.panel header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--sky-2)}
.panel header b{font-size:1.0625rem}
.panel header .tabs{border:0;padding:0}
table{width:100%;border-collapse:collapse;font-size:0.9062rem}
th{font-size:0.75rem;font-weight:600;color:var(--ink-3);text-align:left;padding:10px 22px;background:var(--sky-1)}
td{padding:12px 22px;border-top:1px solid var(--sky-2)}
td.n{font-variant-numeric:tabular-nums}
.medal{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:0.8125rem;background:var(--sky-2);color:var(--ink-2)}
.m1{background:linear-gradient(135deg,#f6e2a6,var(--gold));color:#4a3608}
.m2{background:linear-gradient(135deg,#eef2f9,#b8c3d9);color:#3a4560}
.m3{background:linear-gradient(135deg,#f3d6bf,#c78b5c);color:#4a2a10}
.who{display:flex;align-items:center;gap:10px}
.who i{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--sky-2),var(--ice-1));display:inline-block;flex-shrink:0}
.who small{display:block;font-size:0.75rem;color:var(--ink-3)}
.guild li{display:flex;gap:14px;align-items:center;padding:14px 22px;border-top:1px solid var(--sky-2)}
.guild li:first-child{border-top:0}
.guild .em{width:42px;height:42px;border-radius:10px;background:var(--sky-2);display:grid;place-items:center;color:var(--link);font-family:var(--f-display);font-weight:900}
.guild .g{flex:1}.guild .g small{display:block;color:var(--ink-3);font-size:0.75rem}
.guild .castle{font-size:0.75rem;font-weight:600;color:var(--link);background:var(--sky-2);padding:3px 10px;border-radius:999px}

/* =========================================================
   DOWNLOAD
   ========================================================= */
.download{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#2a3f86 0%,#3f5bb2 55%,#6f86c9 100%)}
.download::before{content:"";position:absolute;inset:0;background:url(../art/juno-pano.png) center bottom/cover;opacity:.18;mix-blend-mode:luminosity;filter:blur(2px)}
.download::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 0%,rgba(255,255,255,.25),transparent 55%)}
.download .wrap{position:relative;z-index:1}
.download .sec-head h2,.download .sec-head p{color:#fff}.download .sec-head p{opacity:.8}
.download .eyebrow{color:var(--ice-1)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{position:relative;padding:28px 24px;border-radius:var(--r-lg);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--f-display);font-weight:900;font-size:2.75rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.6)}
.step b{display:block;font-size:1.1875rem;margin-top:10px}
.step p{font-size:0.875rem;opacity:.82;margin-top:6px}
.step code{font-family:Consolas,monospace;font-size:0.7812rem;background:rgba(0,0,0,.2);padding:1px 6px;border-radius:6px}
.dl-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px}
.dl-cta .btn-primary{background:var(--sky-0);color:var(--link-2);border-color:#fff}
.dl-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.req{margin-top:26px;text-align:center;font-size:0.8125rem;opacity:.75}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--deep);color:#aeb9da;padding:64px 0 28px;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--rune-3),var(--ice-1),var(--rune-3))}
footer .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
footer img{height:80px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
footer h5{color:#fff;font-size:0.9375rem;margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px;font-size:0.875rem}
footer a:hover{color:#fff}
footer .legal{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:0.75rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#7f8bb0}
footer .disclaimer{margin:12px 0 0;font-size:0.75rem;color:#7f8bb0;text-align:center}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .burger{display:grid}
  .jobs{grid-template-columns:repeat(3,1fr)}.job .stage{height:280px}
  .status .grid{grid-template-columns:1fr 1fr}.status .cell:nth-child(3){border-left:0}.status .cell:nth-child(n+3){border-top:1px solid var(--sky-3)}
}
@media (max-width:860px){
  section{padding:72px 0}
  .news .grid,.rank .grid,.ep5-top{grid-template-columns:1fr}
  .ep5-art{height:380px}.ep5-art .bubble{right:8px;top:8px;max-width:170px;font-size:0.8125rem}.ep5-grid{grid-template-columns:1fr}.mvp-row{grid-template-columns:repeat(4,1fr)}.memories-list{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr 1fr}
  .hero .wrap{padding:40px 0 130px}
  .hero::before{background:linear-gradient(180deg,#eaf2ff 0%,rgba(234,242,255,.85) 50%,rgba(234,242,255,.5) 75%,var(--sky-1) 100%)}
  .scroll-hint{display:none}
}
@media (max-width:560px){
  .utility .stat span:nth-child(n+2){display:none}
  .jobs{grid-template-columns:repeat(2,1fr)}.job .stage{height:200px}
  .ep5-stats,.memories-list{grid-template-columns:1fr 1fr}.mvp-row{grid-template-columns:repeat(3,1fr)}
  .status .grid{grid-template-columns:1fr}.status .cell{border-left:0!important;border-top:1px solid var(--sky-3)}.status .cell:first-child{border-top:0}
  .hero-logo{margin-left:-8px}
  .btn{min-height:48px;padding:0 22px}
  .rank td:nth-child(4),.rank th:nth-child(4){display:none}
  td,th{padding-inline:14px}
  footer .grid{grid-template-columns:1fr}
}

/* =========================================================
   DYNAMIC PAGES (added for the PHP site)
   ========================================================= */
.notice-bar{background:linear-gradient(90deg,var(--rune-3),var(--rune-2));color:#fff;text-align:center;font-size:0.875rem;padding:8px 16px}
.dot.off{background:#e05a5a;box-shadow:0 0 0 3px rgba(224,90,90,.25);animation:none}
.status .offline{color:#d64545}
.status .srv span.down{background:rgba(214,69,69,.12);color:#b83232}
.nav form{display:inline}
.nav .who-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 6px;border-radius:999px;background:var(--sky-2);color:var(--link-2);font-weight:600;font-size:0.875rem}
.nav .who-pill i{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--rune-1),var(--rune-3));color:#fff;display:grid;place-items:center;font-style:normal;font-size:0.8125rem}
.nav .menu{display:flex;align-items:center;gap:28px;margin-left:auto}
@media (max-width:1080px){
  .nav .menu{display:none}
  .nav.open .menu{display:flex;flex-direction:column;align-items:stretch;gap:12px;position:absolute;top:72px;left:0;right:0;background:var(--sky-0);padding:12px 16px 18px;border-bottom:1px solid var(--sky-3);box-shadow:var(--shadow-2)}
  .nav.open .menu ul{display:flex;flex-direction:column;position:static;box-shadow:none;border:0;padding:0;margin:0}
  .nav.open .menu .actions{display:flex;flex-wrap:wrap}
}

/* sub-page header */
.page-head{position:relative;overflow:hidden;padding:64px 0 56px;text-align:center;isolation:isolate;background:linear-gradient(180deg,#8fbbea 0%,#cfe1f7 60%,var(--sky-1) 100%)}
.page-head::before{content:"";position:absolute;inset:auto -2% 0;height:85%;z-index:-1;background:url(../art/juno-pano.png) 50% 100%/cover no-repeat;filter:blur(1.6px);opacity:.55;-webkit-mask:linear-gradient(180deg,transparent,#000 50%,transparent);mask:linear-gradient(180deg,transparent,#000 50%,transparent)}
.page-head h1{font-size:clamp(1.75rem,4vw,2.625rem);font-weight:800;text-shadow:0 2px 12px rgba(255,255,255,.8)}
.page-head p{color:var(--ink-2);margin-top:6px}
.page-head .eyebrow{text-shadow:0 0 8px #fff}
.page{padding:56px 0 96px}

/* alerts */
.flash-wrap{position:fixed;top:120px;right:16px;z-index:90;display:grid;gap:10px;max-width:min(420px,calc(100% - 32px))}
.alert{display:flex;gap:10px;align-items:flex-start;padding:14px 18px;border-radius:14px;font-size:0.9062rem;border:1px solid;background:var(--sky-0);box-shadow:var(--shadow-1);margin-bottom:16px}
.alert svg{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.alert.ok{border-color:#bfe8d8;background:#effaf5;color:#17694f}
.alert.err{border-color:#f3c7c7;background:#fff3f3;color:#a12f2f}
.alert.info{border-color:var(--sky-3);background:var(--sky-1);color:var(--link-2)}
.flash-wrap .alert{animation:slidein .35s ease-out;box-shadow:var(--shadow-2);margin:0;cursor:pointer}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}}
.alert ul{margin:0;padding-left:18px}

/* forms */
.auth{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-2)}
.auth .side{position:relative;padding:40px;color:#fff;background:linear-gradient(160deg,rgba(42,63,134,.15),rgba(22,34,74,.88)),url(../art/juno-pano.png) 32% 50%/auto 100% no-repeat,#9cc3ea;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px}
.auth .side h2{font-size:1.625rem;font-weight:800;line-height:1.35}
.auth .side p{opacity:.9;margin-top:8px;font-size:0.9062rem}
.auth .side ul{list-style:none;margin-top:18px;display:grid;gap:8px;font-size:0.875rem}
.auth .side li::before{content:"◆";color:var(--ice-1);margin-right:8px;font-size:0.625rem}
.auth .body{padding:40px}
.auth .body h1,.auth .body h2{font-size:1.625rem;font-weight:800}
.auth .body .sub{color:var(--ink-3);font-size:0.875rem;margin-top:4px;margin-bottom:22px}
.auth.single{grid-template-columns:1fr;max-width:480px}
.field{margin-bottom:16px}
.field label{display:block;font-size:0.875rem;font-weight:600;margin-bottom:6px;color:var(--navy)}
.field .hint{font-size:0.7812rem;color:var(--ink-3);margin-top:5px}
.input{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--sky-3);background:var(--sky-1);padding:0 16px;font:500 0.9375rem var(--f-th);color:var(--navy);transition:border-color .2s,box-shadow .2s,background .2s}
textarea.input{height:auto;min-height:120px;padding:12px 16px;line-height:1.6;resize:vertical}
.input:focus{outline:none;border-color:var(--rune-1);background:var(--sky-0);box-shadow:0 0 0 4px rgba(95,123,208,.15)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg{display:flex;gap:8px}
.seg label{flex:1;margin:0;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:12px;border:1px solid var(--sky-3);background:var(--sky-1);font-weight:600;color:var(--ink-2);cursor:pointer;transition:.2s}
.seg input:checked+span{border-color:var(--rune-1);background:var(--sky-0);color:var(--link);box-shadow:0 0 0 3px rgba(95,123,208,.15)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:0.875rem;color:var(--ink-2);cursor:pointer}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--rune-2);flex-shrink:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-block{width:100%;justify-content:center}
.auth .alt{text-align:center;margin-top:18px;font-size:0.875rem;color:var(--ink-3)}
.auth .alt a,.link{color:var(--link);font-weight:600}
.pw-meter{height:4px;border-radius:4px;background:var(--sky-2);margin-top:8px;overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;border-radius:4px;transition:width .3s,background .3s}

/* message page */
.msg-card{max-width:560px;margin:0 auto;text-align:center;padding:48px 36px;border-radius:var(--r-lg);background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-2)}
.msg-card .big{width:76px;height:76px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,var(--sky-2),var(--ice-1));color:var(--link)}
.msg-card .big.warn{background:linear-gradient(135deg,#fff4dc,#f3dca0);color:#9a7322}
.msg-card .big svg{width:36px;height:36px}
.msg-card h1{font-size:1.5rem;font-weight:800}
.msg-card p{color:var(--ink-2);margin-top:10px}
.msg-card .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* account */
.acc-grid{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
.card{background:var(--sky-0);border:1px solid var(--sky-3);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:24px}
.card+.card{margin-top:24px}
.card h3{font-size:1.125rem;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.card h3 svg{width:20px;height:20px;color:var(--link-3)}
.profile{text-align:center}
.profile .avatar{width:84px;height:84px;margin:0 auto 12px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(135deg,var(--rune-1),var(--rune-3));color:#fff;font:900 2.125rem var(--f-display);box-shadow:0 10px 24px rgba(63,91,178,.35)}
.profile h2{font-size:1.375rem;font-weight:800}
.profile .em{color:var(--ink-3);font-size:0.875rem;word-break:break-all}
.kv{list-style:none;margin-top:18px;text-align:left;font-size:0.875rem}
.kv li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dashed var(--sky-3)}
.kv li span{color:var(--ink-3)}
.kv li b{font-weight:600;text-align:right}
.at-box{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.at-box>div{padding:18px;border-radius:16px;background:linear-gradient(160deg,var(--sky-1),var(--sky-2));border:1px solid var(--sky-3)}
.at-box small{display:block;color:var(--ink-3);font-size:0.7812rem}
.at-box b{font-size:1.375rem;font-weight:800;color:var(--link-2)}
.at-box .on{background:linear-gradient(160deg,#5f7bd0,#2a3f86);border-color:#2a3f86}
.at-box .on small{color:var(--ice-1)}.at-box .on b{color:#fff}
.inline-form{display:flex;gap:10px}
.inline-form .input{flex:1;min-width:0}
.code-input{text-transform:uppercase;letter-spacing:.15em;font-weight:700}
.tbl{width:100%;border-collapse:collapse;font-size:0.875rem}
.tbl th{font-size:0.75rem;font-weight:600;color:var(--ink-3);text-align:left;padding:10px 12px;background:var(--sky-1);white-space:nowrap}
.tbl td{padding:12px;border-top:1px solid var(--sky-2)}
.tbl-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--sky-2)}
.on-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle}
.empty{padding:30px;text-align:center;color:var(--ink-3);font-size:0.875rem}
.pill{display:inline-block;font-size:0.75rem;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--sky-2);color:var(--link);white-space:nowrap}
.pill.plus{background:#e7f8f1;color:#1d8f69}.pill.minus{background:#fff0f0;color:#b83232}

/* news list / article */
.cat-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.cat-tabs a{padding:8px 18px;border-radius:999px;font-weight:600;font-size:0.875rem;color:var(--ink-2);background:var(--sky-0);border:1px solid var(--sky-3)}
.cat-tabs a.on{background:var(--rune-2);color:#fff;border-color:var(--rune-2)}
.news-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ncard{display:flex;flex-direction:column;background:var(--sky-0);border:1px solid var(--sky-3);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);transition:.3s}
.ncard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.ncard .cv{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,#dfe8fb,#b9cbf2);overflow:hidden}
.ncard .cv img{position:relative;width:100%;height:100%;object-fit:cover}
.ncard .cv .tag{position:absolute;top:12px;left:12px;z-index:1}
.ncard .bd{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.ncard h3{font-size:1.0625rem;font-weight:700;line-height:1.45}
.ncard p{font-size:0.875rem;color:var(--ink-3);margin-top:6px;flex:1}
.ncard time{font-size:0.7812rem;color:var(--ink-3);margin-top:12px}
.cv-fallback{position:absolute;inset:0;background:url(../art/juno-pano.png) 50% 100%/cover;filter:blur(1px) saturate(1.05);opacity:.9}
.pager{display:flex;gap:6px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--sky-3);background:var(--sky-0);font-weight:600;color:var(--ink-2);padding:0 10px}
.pager .on{background:var(--rune-2);color:#fff;border-color:var(--rune-2)}
.article{max-width:820px;margin:0 auto}
.article .cover{margin-bottom:32px}
.article .cover .frame{aspect-ratio:16/8}
.article .cover img{width:100%;height:100%;object-fit:cover}
.article .meta{display:flex;gap:12px;align-items:center;color:var(--ink-3);font-size:0.875rem;margin-bottom:10px}
.article h1{font-size:clamp(1.625rem,3.6vw,2.25rem);font-weight:800;line-height:1.35}
.prose{margin-top:24px;font-size:1.0312rem;line-height:1.85;color:#2a355e}
.prose h2,.prose h3,.prose h4,.prose h5{margin:28px 0 10px;line-height:1.4;color:var(--navy)}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin:4px 0}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:14px;margin:18px 0;box-shadow:var(--shadow-1)}
.prose blockquote{margin:0 0 16px;padding:12px 18px;border-left:4px solid var(--ice-2);background:var(--sky-1);border-radius:0 12px 12px 0;color:var(--ink-2)}
.prose code{background:var(--sky-2);padding:2px 6px;border-radius:6px;font-size:.9em}
.prose hr{border:0;border-top:1px solid var(--sky-3);margin:28px 0}
.more-news{margin-top:56px;padding-top:28px;border-top:1px solid var(--sky-3)}
.more-news h3{font-size:1.125rem;margin-bottom:8px}

/* ranking page */
.rank-filter{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:22px}
.rank-filter .tabs{border:0;padding:0;background:var(--sky-0);border:1px solid var(--sky-3);border-radius:999px;padding:4px}
.rank-filter .tabs a{padding:8px 18px;border-radius:999px;font-size:0.875rem;font-weight:600;color:var(--ink-3)}
.rank-filter .tabs a.on{background:var(--rune-2);color:#fff}
.rank-filter select{width:auto;min-width:200px;height:44px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;align-items:end;margin-bottom:28px}
.pod{text-align:center;padding:26px 16px 22px;border-radius:var(--r-lg);background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-1)}
.pod.p1{padding-top:36px;background:linear-gradient(180deg,#fffaf0,#fff);border-color:#ecd9a6;box-shadow:0 18px 40px rgba(201,162,74,.18)}
.pod .medal{width:44px;height:44px;font-size:1.125rem;margin-bottom:10px}
.pod b{display:block;font-size:1.125rem}
.pod small{color:var(--ink-3)}
.pod .lv{font:700 1.375rem var(--f-display);color:var(--link);margin-top:6px}
.castle-list{display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:860px){
  .auth{grid-template-columns:1fr}.auth .side{min-height:220px;padding:28px}.auth .body{padding:28px}
  .acc-grid{grid-template-columns:1fr}
  .news-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .news-cards{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .podium{grid-template-columns:1fr}.pod.p1{order:-1}
  .at-box{grid-template-columns:1fr}
  .inline-form{flex-direction:column}
  .auth .body{padding:22px}
}

/* ===== database (ข้อมูลเกม) ===== */
.db-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.db-tabs a{padding:9px 20px;border-radius:999px;font-weight:600;color:var(--ink-3);background:var(--sky-0);border:1px solid var(--sky-3)}
.db-tabs a.on{background:var(--sky-2);color:var(--link);border-color:var(--edge)}
.db-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.db-filter .input{width:auto;min-width:140px;flex:0 1 auto}
.db-filter input[name=q]{min-width:220px;flex:1 1 220px}
.db-count{font-size:0.8125rem;color:var(--ink-3);margin:6px 0 10px}
.db .tbl td.n,.db .tbl th{white-space:nowrap}
.db .tbl td.n,.db .tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.db .tbl td.id{width:56px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.db .tbl td,.db .tbl th{vertical-align:middle}
.db .tbl td.db-ico{width:44px;padding:6px 6px 6px 14px}.db-ico img{width:24px;height:24px;max-width:none;display:block;image-rendering:pixelated}
.db-tag{display:inline-block;font-size:0.6875rem;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--sky-2);color:var(--link);vertical-align:middle}
.db .tbl td.nm{white-space:nowrap}.db .tbl td.nm .db-tag{margin-left:4px}
.db-tag.mvp{margin-top:0;background:linear-gradient(180deg,#ffe08a,#f2b938);color:#5a3a00}
.db-mobline{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:0.8125rem}.db-mobline small{color:var(--ink-3)}
.db-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
@media (max-width:820px){.db-grid{grid-template-columns:1fr}}
.db-drops{list-style:none;margin:0;padding:0}
.db-drops li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--sky-3);font-size:0.875rem}
.db-drops li a{display:flex;align-items:center;gap:8px;color:var(--link);font-weight:600}
.db-drops li a small{color:var(--ink-3);font-weight:400}
.db-drops li img{width:24px;height:24px;max-width:none;flex:none;image-rendering:pixelated}
.db-drops li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.db-drops.cols{columns:2;column-gap:28px}.db-drops.cols li{break-inside:avoid}
@media (max-width:820px){.db-drops.cols{columns:1}}
.db-title{display:inline-flex;align-items:center;gap:12px}.db-title img{width:36px;height:36px;max-width:none;flex:none;image-rendering:pixelated}
.db-desc{white-space:normal;line-height:1.75;font-size:0.9062rem}
.db-back{margin-top:18px}
.muted{color:var(--ink-3)}

/* ===== job guide (คู่มือเปลี่ยนอาชีพ) ===== */
.guide-intro ul{margin:0;padding-left:20px;line-height:1.8}
.guide-tier{font-size:1.5rem;font-weight:800;margin:40px 0 10px}
.guide-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.guide-jump a{padding:6px 14px;border-radius:999px;background:var(--sky-0);border:1px solid var(--sky-3);font-size:0.8125rem;font-weight:600;color:var(--link)}
.job-guide{margin-bottom:20px;scroll-margin-top:90px}
.jg-head{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.jg-head h3{margin:0}.jg-head h3 small{font-size:0.875rem;color:var(--ink-3);font-weight:500;margin-left:6px}
.jg-head p{margin:2px 0 0}
.jg-sprite{height:84px;width:auto;flex-shrink:0;image-rendering:pixelated;filter:drop-shadow(0 4px 6px rgba(42,63,134,.18))}
.jg-body{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
@media (max-width:860px){.jg-body{grid-template-columns:1fr}}
.jg-body h4{font-size:0.875rem;font-weight:700;color:var(--link);margin:14px 0 6px}
.jg-req{margin:0;padding-left:18px;line-height:1.7;font-size:0.9062rem}
.jg-steps{margin:0;padding-left:20px;line-height:1.75;font-size:0.9062rem}.jg-steps li{margin-bottom:6px}
.mm{margin:0}.mm-img{position:relative;display:inline-block;max-width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--sky-3);background:#0b1430}
.mm-img img{display:block;width:280px;max-width:100%;height:auto}
.mm figcaption{font-size:0.8125rem;color:var(--ink-3);margin-top:6px}
.pin{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#e63b3b;color:#fff;font-size:0.6875rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.jg-pins,.jg-more{list-style:none;margin:8px 0 0;padding:0;font-size:0.8438rem;line-height:1.8}
.jg-pins b{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#e63b3b;color:#fff;font-size:0.6875rem;align-items:center;justify-content:center;margin-right:4px}
.jg-pins small,.jg-more small{color:var(--ink-3)}
.guide-foot{margin-top:24px;font-size:0.8125rem}
.mm-img{background:transparent}
.jg-thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}.jg-thumbs .mm-img img{width:150px}
.jg-indoor{font-size:0.8438rem;padding:12px 14px;border:1px dashed var(--sky-3);border-radius:10px}

.db .tbl td.db-thumb{width:64px;padding:4px 8px;text-align:center}
.db-thumb img{max-width:56px;max-height:48px;width:auto;height:auto;margin:auto;image-rendering:pixelated}
.db-thumb.map img{max-width:64px;max-height:64px;border-radius:6px}
.db-mobpic{display:flex;justify-content:center;align-items:flex-end;min-height:120px;padding:10px;margin:-6px 0 12px;border-radius:12px;background:radial-gradient(ellipse at 50% 90%,rgba(63,91,178,.18),transparent 60%),var(--sky-1)}
.db-mobpic img{max-width:100%;max-height:220px;width:auto;height:auto;image-rendering:pixelated}
.db-minimap{display:flex;justify-content:center;margin-bottom:20px}
.db-minimap img{width:min(360px,100%);height:auto;border-radius:12px;border:1px solid var(--sky-3)}

/* ===== skill tree ===== */
.sk-th{font-size:.55em;font-weight:600;color:var(--ink-3);margin-left:8px}
.sk-jobs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.sk-jobs span{font-size:0.75rem;font-weight:700;color:var(--ink-3);width:84px}
.sk-jobs a{padding:5px 13px;border-radius:999px;background:var(--sky-0);border:1px solid var(--sky-3);font-size:0.8125rem;font-weight:600;color:var(--ink-2)}
.sk-jobs a.on{background:var(--sky-2);border-color:var(--edge);color:var(--link)}
.sk-help{font-size:0.8125rem;margin:16px 0 10px}
.sk-tree{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.sk-col{display:flex;flex-direction:column;gap:10px;min-width:250px;flex:0 0 250px}
.sk{background:var(--sky-0);border:1px solid var(--sky-3);border-radius:12px;box-shadow:var(--shadow-1)}
.sk summary{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;cursor:pointer;list-style:none}
.sk summary::-webkit-details-marker{display:none}
.sk summary img,.sk-noicon{width:24px;height:24px;max-width:none;flex:none;image-rendering:pixelated;margin-top:2px}
.sk-noicon{display:inline-block;border-radius:6px;background:var(--sky-2)}
.sk-name{display:flex;flex-direction:column;gap:2px;font-size:0.875rem}
.sk-name small{font-size:0.75rem;color:var(--ink-3)}.sk-name em{font-style:normal;color:#b5700b;font-weight:700}
.sk-req{color:var(--link)!important}
.sk[open]{border-color:var(--edge)}
.sk-desc{padding:0 12px 12px 46px;font-size:0.8125rem;line-height:1.7;color:var(--ink-2)}

/* ===== database look (tabs / filter / tables) ===== */
.db-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-1);margin-bottom:16px}
.db-tabs a{border:0;background:transparent;padding:9px 22px;color:var(--ink-2);transition:background .2s,color .2s}
.db-tabs a:hover{background:var(--sky-2);color:var(--link)}
.db-tabs a.on{background:linear-gradient(135deg,var(--rune-1),var(--rune-3));color:#fff;box-shadow:0 4px 12px rgba(63,91,178,.35)}
.db-filter{padding:14px;border-radius:var(--r-md);background:linear-gradient(135deg,#fff,var(--sky-2));border:1px solid var(--sky-3);box-shadow:var(--shadow-1)}
.db-filter .input{min-height:42px;background:var(--sky-0);border-radius:10px;font-size:0.875rem}
.db-filter .check{align-items:center;padding:0 12px;min-height:42px;border-radius:10px;background:var(--sky-0);border:1px solid var(--sky-3);white-space:nowrap}
.db-filter .check input{margin-top:0}
.db-filter .btn{min-height:42px;padding:0 24px}
.db-count{margin:14px 2px 10px}
.db .tbl-wrap{background:var(--sky-0);border-color:var(--sky-3);box-shadow:var(--shadow-1)}
.db .tbl th{background:linear-gradient(180deg,var(--rune-2),var(--rune-3));color:#e8eeff;font-size:0.7812rem;letter-spacing:.02em;padding:12px}
.db .tbl tbody tr:nth-child(even){background:var(--row-alt)}
.db .tbl tbody tr{transition:background .15s}
.db .tbl tbody tr:hover{background:var(--row-hover)}
.db .tbl td{border-top-color:#edf2fc}
.db .tbl td.id{font-size:0.8125rem}
.db .tbl td.c-hp{font-weight:600;color:#c2415b}
.db .tbl td.zeny{color:#9a6b00;font-weight:600}.db .tbl td.zeny small{margin-left:1px;opacity:.7}
.db .tbl .lv{display:inline-block;min-width:34px;text-align:center;padding:2px 8px;border-radius:8px;background:var(--sky-2);color:var(--link-2);font-weight:700;font-size:0.8125rem}
.db .c-race,.db .el,.db .sz,.db .it{display:inline-block;padding:2px 10px;border-radius:999px;font-size:0.7812rem;font-weight:600;white-space:nowrap;background:var(--sky-2);color:var(--ink-2)}
.db .c-slot{font-weight:700;color:var(--link)}
.el-neutral{background:#eef0f4!important;color:#5b6273!important}
.el-water{background:#dcefff!important;color:#1f6fc0!important}
.el-earth{background:#f1e6d6!important;color:#7a5520!important}
.el-fire{background:#ffe3dc!important;color:#c43c1c!important}
.el-wind{background:#ddf6e8!important;color:#1d8a55!important}
.el-poison{background:#efe0f7!important;color:#7d3aa3!important}
.el-holy{background:#fff4cf!important;color:#8f6a00!important}
.el-dark{background:#e2e0ee!important;color:#3d3566!important}
.el-ghost{background:#e8e6ff!important;color:#5a4fc4!important}
.el-undead{background:#e3e8e3!important;color:#3f5a46!important}
.sz-small{background:#e4f7ef!important;color:#1e8a5e!important}
.sz-medium{background:#e6efff!important;color:#3f5bb2!important}
.sz-large{background:#fde9e1!important;color:#b6532c!important}
.it-healing{background:#ffe6ea!important;color:#c2415b!important}
.it-usable,.it-delayconsume{background:#e4f7ef!important;color:#1e8a5e!important}
.it-weapon{background:#fde9e1!important;color:#b6532c!important}
.it-armor{background:#e6efff!important;color:#3f5bb2!important}
.it-card{background:#fff4cf!important;color:#8f6a00!important}
.it-ammo{background:#eef0f4!important;color:#5b6273!important}
.it-petegg,.it-petarmor{background:#efe0f7!important;color:#7d3aa3!important}
@media (max-width:720px){.db-tabs{display:flex;overflow-x:auto}.db-tabs a{padding:8px 14px;white-space:nowrap}}

/* ===== refine guide ===== */
.refine .tbl-wrap{background:var(--sky-0);border-color:var(--sky-3);box-shadow:var(--shadow-1);margin-bottom:8px}
.rf-rules{margin-bottom:26px}.rf-rules ul{margin:0;padding-left:20px;line-height:1.85;font-size:0.9062rem}
.rf-rules li.danger{color:#b4233c}
.rf-h{font-size:1.25rem;font-weight:800;margin:30px 0 10px;color:var(--link-2)}
.rf-note{font-size:0.8125rem;margin:-4px 0 10px}
.rf-item{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--link)}
.rf-item img{width:24px;height:24px;max-width:none;image-rendering:pixelated}
.refine .zeny{color:#9a6b00;font-weight:600}.refine .zeny small{opacity:.7;margin-left:1px}
.rf-safe{display:inline-block;padding:2px 10px;border-radius:8px;background:#e4f7ef;color:#1e8a5e;font-weight:700}
.rf-lv{font-weight:800;color:var(--link-2);width:70px}
.rf-rates td,.rf-bonus td{text-align:center;white-space:nowrap}.rf-rates th,.rf-bonus th{text-align:center}
.rf-rates th:first-child,.rf-bonus th:first-child,.rf-rates td.rf-lv,.rf-bonus td.rf-lv{text-align:left}
.rf-rate{display:inline-block;min-width:56px;padding:3px 8px;border-radius:8px;font-weight:700;font-size:0.8438rem}
.rf-rate.safe{box-shadow:inset 0 0 0 2px #1e8a5e}
.r100{background:#e4f7ef;color:#1e8a5e}.r60{background:#fff4cf;color:#8f6a00}.r40{background:#ffe9d2;color:#b45f0b}
.r20{background:#ffe0e0;color:#c2304a}.r10{background:#f6d0d6;color:#8e1530}
.rf-chain{display:block;font-size:0.7188rem;color:var(--ink-3);margin-top:3px;cursor:help}
.rf-bonus td{font-size:0.8438rem}.rf-over{display:inline-block;margin-left:4px;padding:0 6px;border-radius:6px;background:#ffe9d2;color:#b45f0b;font-size:0.75rem;font-weight:700}
.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.rf-list code{font-size:0.8125rem;color:var(--link);background:var(--sky-2);padding:1px 6px;border-radius:6px}
.rf-list{list-style:none;margin:0;padding:0}.rf-list li{padding:8px 0;border-top:1px dashed var(--sky-3);font-size:0.875rem;line-height:1.7}.rf-list li:first-child{border-top:0}
.rf-mat-h{font-size:0.7812rem;font-weight:700;color:var(--ink-3);margin:14px 0 4px}.rf-mat-h:first-child{margin-top:0}
.rf-mat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px dashed var(--sky-3);font-size:0.875rem}
.rf-mat-h+.rf-mat-row{border-top:0}
.rf-mat-row .zeny{font-variant-numeric:tabular-nums}
.rf-mat-ex{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:0.8125rem}.rf-mat-ex .rf-item{font-weight:500}
.rf-item{line-height:24px;vertical-align:middle}
.rf-explain{display:grid;gap:10px;padding:16px 18px;margin:0 0 14px;border-radius:var(--r-md);background:linear-gradient(135deg,#fff,var(--sky-2));border:1px solid var(--sky-3);font-size:0.875rem;line-height:1.7;color:var(--ink-2)}
.rf-ex-row{display:flex;gap:14px;align-items:flex-start}.rf-ex-row>span{flex:none;margin-top:2px;min-width:86px;text-align:center}
.rf-ex-row b{color:var(--navy)}
.rf-chain-demo{display:inline-block;padding:3px 8px;border-radius:8px;background:var(--sky-0);border:1px dashed var(--ink-3);font-size:0.75rem;color:var(--ink-3)}
@media (max-width:760px){.rf-grid{grid-template-columns:1fr}}

/* ===== topup / donate ===== */
.tp-top{display:grid;grid-template-columns:340px 1fr;gap:20px;margin-bottom:24px}
.tp-bal{padding:22px 24px;border-radius:var(--r-lg);background:linear-gradient(140deg,var(--rune-1),var(--rune-3));color:#fff;box-shadow:var(--shadow-2)}
.tp-bal small{color:var(--ice-1);font-size:0.8125rem}.tp-bal small b{color:#fff}
.tp-bal-n{font:800 2.5rem/1.2 var(--f-th);margin:8px 0 10px}.tp-bal-n span{font-size:1rem;font-weight:600;color:var(--ice-1)}
.tp-bal-link{display:inline-flex;align-items:center;gap:6px;font-size:0.8438rem;font-weight:600;color:#fff;opacity:.9}.tp-bal-link svg{width:16px;height:16px}
.tp-how{padding:20px 24px;border-radius:var(--r-lg);background:linear-gradient(135deg,#fff,var(--sky-2));border:1px solid var(--sky-3)}
.tp-how h3{font-size:1rem;margin-bottom:6px}.tp-how ul{margin:0;padding-left:18px;font-size:0.875rem;line-height:1.85;color:var(--ink-2)}
.tp-tabs{margin-bottom:14px}
.tp-pane{max-width:640px}.tp-pane h3{font-size:1.125rem;margin-bottom:4px}.tp-pane>.muted{font-size:0.8438rem;margin-bottom:14px}
.tp-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tp-presets button{padding:7px 16px;border-radius:10px;border:1px solid var(--sky-3);background:var(--sky-0);font:600 0.875rem var(--f-th);color:var(--link);cursor:pointer}
.tp-presets button:hover{background:var(--sky-2)}
.tp-amount input[readonly]{background:var(--sky-2);color:var(--ink-2)}
.tp-get{margin:6px 0 16px;padding:12px 16px;border-radius:12px;background:#effaf5;color:#17694f;font-size:0.9062rem}.tp-get b{font-size:1.125rem}
.tp-steps{margin:0 0 14px;padding-left:20px;font-size:0.875rem;line-height:1.8;color:var(--ink-2)}
.tp-small{font-size:0.7812rem;margin-top:8px}
.tp-qr{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;max-width:820px}
.tp-qr-img{padding:12px;border-radius:16px;background:var(--sky-0);border:1px solid var(--sky-3)}.tp-qr-img img{width:100%;display:block}
.tp-qr-info h2{font-size:1.25rem;margin-bottom:4px}
.tp-qr-amt{font:800 2.375rem/1.2 var(--f-th);color:var(--link-2)}.tp-qr-amt small{font-size:1rem;color:var(--ink-3)}
.tp-warn{display:flex;gap:8px;align-items:flex-start;margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:#fff8e6;color:#8f6a00;font-size:0.8438rem}.tp-warn svg{width:18px;height:18px;flex:none;margin-top:2px}
.tp-qr-info .kv{margin-top:8px}
.tp-qr-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.tp-wait{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--link)}
.tp-wait i{width:16px;height:16px;border-radius:50%;border:3px solid var(--sky-3);border-top-color:var(--rune-1);animation:tpspin 1s linear infinite}
@keyframes tpspin{to{transform:rotate(360deg)}}
.tp-h{font-size:1.375rem;font-weight:800;color:var(--link-2);margin:36px 0 12px}
.tp-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tp-plan{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-1)}
.tp-plan.day{background:linear-gradient(160deg,#fff,#eef3ff)}
.tp-plan-kind{font-size:0.75rem;font-weight:700;color:var(--ink-3)}
.tp-plan b{font-size:1.125rem;color:var(--navy)}
.tp-plan-price{font-size:1.375rem;font-weight:800;color:var(--link)}.tp-plan-price small{font-size:0.8125rem;color:var(--ink-3)}
.tp-plan .btn{margin-top:auto}
.tp-hist{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.tp-hist h3{font-size:1rem;margin-bottom:10px}.tp-hist .tbl{font-size:0.8125rem}.tp-hist .tbl td,.tp-hist .tbl th{padding:9px 10px}
.acc-point{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:14px;border-radius:12px;background:var(--sky-1);border:1px solid var(--sky-3);font-size:0.9062rem}
.acc-point span{display:inline-flex;align-items:center;gap:8px}.acc-point svg{width:18px;height:18px;color:var(--link-3)}.acc-point b{font-size:1.125rem;color:var(--link-2)}
@media (max-width:860px){.tp-top,.tp-hist,.tp-qr{grid-template-columns:1fr}.tp-qr-img{max-width:280px}}

/* ===== real-email notice + bot check (register / forgot / login) */
.email-note{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;margin-bottom:20px;border-radius:14px;background:linear-gradient(135deg,#eef4ff,#f8fbff);border:1px solid var(--edge)}
.email-note .en-ico{width:42px;height:42px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,var(--rune-1),var(--rune-2));color:#fff}
.email-note .en-ico svg{width:22px;height:22px}
.email-note b{display:block;font-size:0.9688rem;color:var(--link-2)}
.email-note p{font-size:0.8438rem;color:var(--ink-2);margin-top:2px;line-height:1.55}
.email-note small{display:block;font-size:0.7812rem;color:var(--ink-3);margin-top:8px}
.en-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.en-chips span{font-size:0.75rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--sky-0);border:1px solid var(--sky-3);color:var(--link)}
.req-real{font-weight:500;color:#b4541f;font-size:0.7812rem}
.captcha{margin:4px 0 16px}
.captcha-box{min-height:65px;display:flex;justify-content:center}
.captcha-note{font-size:0.75rem;color:var(--ink-3);text-align:center}
.captcha .alert{margin:10px 0 0;font-size:0.8438rem}
.captcha [hidden]{display:none!important}
.captcha.captcha-need .captcha-box{animation:capshake .4s}
@keyframes capshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.grecaptcha-badge{visibility:hidden}
.email-status{display:inline-flex;align-items:center;gap:6px;margin-top:6px}
.email-status .pill.ok{background:#e7f8f1;color:#1d8f69}
.email-status .pill.warn{background:#fff4dc;color:#9a7322}

/* ===== QA 2026-10-05: skip link, short screens, touch targets */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 18px;border-radius:12px;background:var(--rune-3);color:#fff;font-weight:600;box-shadow:var(--shadow-2);transition:top .15s}
.skip-link:focus{top:12px}
main:focus{outline:none}
@media (max-height:820px){.scroll-hint{display:none}}
@media (max-width:1080px){
  .btn-sm{min-height:44px}
  .burger{width:44px;height:44px}
  .nav ul a{min-height:44px;display:flex;align-items:center}
  .tabs button,.cat-tabs a,.rank-filter .tabs a,.db-tabs a,.guide-jump a,.sk-jobs a,.tp-presets button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pager a,.pager span{min-width:44px;height:44px}
  .db-filter .input,.db-filter .check,.db-filter .btn{min-height:44px}
  .utility .lang a,.tp-bal-link{display:inline-block;padding-block:6px}
  footer ul a{display:inline-flex;align-items:center;min-height:44px}
  footer ul{gap:0}
  .db-drops li{padding:0}
  .db-drops li a,.rf-item,.auth .alt a,.auth form>div>.link,main header>.link{min-height:44px;display:inline-flex;align-items:center}
}
/* quest skill guide */
.qs-job{scroll-margin-top:90px}.qs-job small{font-size:0.875rem;font-weight:600}
.qs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.qs-grid>.qs-card{display:flex;flex-direction:column;margin:0}
.qs-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.qs-head img{width:32px;height:32px;image-rendering:pixelated;flex:none}
.qs-head h3{margin:0;font-size:1.0625rem}
.qs-req{display:block;font-size:0.8125rem;color:#1e8a5e;font-weight:600;margin-top:2px;line-height:1.5}
.qs-desc{margin:4px 0 6px;font-size:0.8125rem}.qs-desc summary{cursor:pointer;color:var(--link);font-weight:600}
.qs-desc p{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--sky-2);line-height:1.7;color:var(--ink-2)}
.qs-sec{font-size:0.75rem;font-weight:700;color:var(--ink-3);margin:14px 0 6px;letter-spacing:.04em}
.qs-items{list-style:none;margin:0;padding:0}
.qs-items li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed var(--sky-3);font-size:0.875rem}
.qs-items li:first-child{border-top:0}
.qs-qty{font-variant-numeric:tabular-nums;white-space:nowrap}
.qs-none{font-size:0.8125rem;margin:0}
.qs-npcs li{padding:6px 0}
.qs-steps{margin:0;padding-left:20px;font-size:0.875rem;line-height:1.75}
.qs-note{margin:12px 0 0;padding:8px 12px;border-radius:10px;background:#fff6e6;color:#8a5a0b;font-size:0.8125rem;line-height:1.6}
@media (max-width:560px){.qs-grid{grid-template-columns:1fr}}

/* =========================================================
   DARK THEME — html[data-theme="dark"] (toggle .theme-btn, choice in localStorage 'theme')
   Surfaces/text come from the tokens; --rune-* stay the same so buttons, tags and the blue sections keep the brand.
   ========================================================= */
.theme-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid var(--sky-3);color:var(--link-2);background:var(--sky-0);transition:background .2s,color .2s}
.theme-btn:hover{background:var(--sky-2)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .i-sun,[data-theme="dark"] .theme-btn .i-moon{display:none}
[data-theme="dark"] .theme-btn .i-sun{display:block}
@media (max-width:1080px){.theme-btn{margin-left:auto}.nav .burger{margin-left:0}}

[data-theme="dark"]{
  color-scheme:dark;
  --sky-0:#141c35; --sky-1:#0b1126; --sky-2:#1b2649; --sky-3:#2a3862;
  --navy:#e6ecfb; --ink-2:#b4bfe0; --ink-3:#919dc4;
  --link:#9db4ff; --link-2:#c4d2ff; --link-3:#8ca5f3;
  --edge:#3d5088; --deep:#060a18;
  --row-alt:#172040; --row-hover:#1f2b52;
  --glass:rgba(20,28,53,.78);
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.28);
  --shadow-2:0 2px 6px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.45);
}
[data-theme="dark"] .nav{background:rgba(11,17,38,.86)}
[data-theme="dark"] .btn-ghost{background:rgba(27,38,73,.85);color:var(--link-2)}
[data-theme="dark"] .btn-ghost:hover{background:var(--sky-2)}
[data-theme="dark"] .chip,[data-theme="dark"] .ep5-stats div,[data-theme="dark"] .memories-list div{background:rgba(27,38,73,.7)}
[data-theme="dark"] .ep5-stats div{border-color:var(--sky-3)}
[data-theme="dark"] .job .info{background:rgba(20,28,53,.7);border-top-color:var(--sky-3)}
[data-theme="dark"] .job{background:linear-gradient(180deg,color-mix(in srgb,var(--hue,#dfe8fb) 26%,var(--sky-0)),var(--sky-0) 62%)}
[data-theme="dark"] .job .stage::after{background:radial-gradient(circle,rgba(157,180,255,.18),rgba(157,180,255,0) 70%)}
[data-theme="dark"] .status .ico{background:linear-gradient(180deg,var(--sky-2),var(--sky-0))}
[data-theme="dark"] .frame{background:linear-gradient(160deg,var(--sky-2),var(--sky-0) 60%,var(--edge))}
[data-theme="dark"] .ep5{background:linear-gradient(180deg,var(--sky-1),#111a38 45%,var(--sky-1))}
[data-theme="dark"] .ep5-art::before{background:radial-gradient(circle at 50% 40%,#2a3a6e,#16214a 60%,rgba(22,33,74,0) 72%)}
[data-theme="dark"] .chips span.hl{background:linear-gradient(180deg,#24336a,#1b2649)}
[data-theme="dark"] .tag.update{background:#24336a;color:var(--link-2)}
[data-theme="dark"] .pod.p1{background:linear-gradient(180deg,#2a2614,var(--sky-0));border-color:#6b5a2a}
[data-theme="dark"] .db-filter,[data-theme="dark"] .rf-explain,[data-theme="dark"] .tp-how{background:linear-gradient(135deg,var(--sky-0),var(--sky-2))}
[data-theme="dark"] .tp-plan.day{background:linear-gradient(160deg,var(--sky-0),#1d2a52)}
[data-theme="dark"] .email-note{background:linear-gradient(135deg,#17224a,#141c35)}
[data-theme="dark"] .input{background:var(--sky-1)}
[data-theme="dark"] .input:focus,[data-theme="dark"] .seg input:checked+span{background:var(--sky-0)}
[data-theme="dark"] .input::placeholder{color:#7d89b3}
[data-theme="dark"] .prose{color:#d5ddf5}
[data-theme="dark"] .sk-name em{color:#f0a952}
[data-theme="dark"] .db .tbl td.c-hp{color:#ff8aa0}
[data-theme="dark"] .db .tbl td.zeny,[data-theme="dark"] .refine .zeny{color:#ebc35e}
[data-theme="dark"] .rf-rules li.danger{color:#ff8592}
[data-theme="dark"] .req-real{color:#f5a477}
[data-theme="dark"] .qs-req{color:#5fd6a6}
[data-theme="dark"] .status .offline{color:#ff7272}
/* tinted boxes: dark tint + light text instead of pastel */
[data-theme="dark"] .alert{background:var(--sky-0)}
[data-theme="dark"] .alert.ok,[data-theme="dark"] .tp-get{background:#0f2b25;border-color:#1f5a49;color:#8fe3c3}
[data-theme="dark"] .alert.err{background:#33161c;border-color:#6a2a35;color:#ffb3bd}
[data-theme="dark"] .tp-warn,[data-theme="dark"] .qs-note{background:#2f2614;color:#f1cf86}
/* hero + page headers: Juno at night */
[data-theme="dark"] .hero{background:linear-gradient(180deg,#070c22 0%,#101b42 34%,#1a2a5c 60%,#141f45 80%)}
[data-theme="dark"] .hero .art{filter:brightness(.42) saturate(.9) blur(1.4px)}
[data-theme="dark"] .hero::before{background:
    linear-gradient(180deg,rgba(11,17,38,0) 0%,rgba(11,17,38,0) 72%,var(--sky-1) 100%),
    radial-gradient(ellipse 60% 70% at 18% 45%,rgba(11,17,38,.85) 0%,rgba(11,17,38,.55) 45%,rgba(11,17,38,0) 75%)}
[data-theme="dark"] .cloud{opacity:.12}
[data-theme="dark"] .rays{opacity:.18}
[data-theme="dark"] .hero h1 em{background-image:linear-gradient(90deg,#9db4ff,#c4d2ff)}
[data-theme="dark"] .page-head{background:linear-gradient(180deg,#0a1230 0%,#16234f 60%,var(--sky-1) 100%)}
[data-theme="dark"] .page-head::before{opacity:.22}
[data-theme="dark"] .page-head h1{text-shadow:0 2px 12px rgba(0,0,0,.6)}
[data-theme="dark"] .page-head .eyebrow{text-shadow:none}
@media (max-width:860px){[data-theme="dark"] .hero::before{background:linear-gradient(180deg,rgba(7,12,34,.6) 0%,rgba(11,17,38,.75) 60%,var(--sky-1) 100%)}}

/* ===== two-step sign-up (register → register/continue) */
.reg-steps{list-style:none;display:flex;gap:8px;margin-bottom:18px;font-size:0.8125rem;font-weight:600;color:var(--ink-3)}
.reg-steps li{display:flex;align-items:center;gap:8px;flex:1;padding:8px 10px;border-radius:12px;background:var(--sky-1);border:1px solid var(--sky-3)}
.reg-steps b{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--sky-3);color:var(--ink-2);font-size:0.75rem}
.reg-steps b svg{width:14px;height:14px}
.reg-steps li.on{color:var(--link);border-color:var(--edge);background:var(--sky-0)}
.reg-steps li.on b{background:linear-gradient(135deg,var(--rune-1),var(--rune-3));color:#fff}
.reg-steps li.done{color:#1d8f69}
.reg-steps li.done b{background:#1d8f69;color:#fff}
.auth .sub .pill.ok{display:inline-block;padding:1px 10px;border-radius:999px;background:#e7f8f1;color:#17694f;font-size:0.75rem;font-weight:700;margin-left:4px}
[data-theme="dark"] .reg-steps li.done{color:#5fd6a6}

/* ===== shop / gacha / item box */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shop-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;padding:16px 20px;border-radius:var(--r-lg);background:linear-gradient(140deg,var(--rune-1),var(--rune-3));color:#fff;box-shadow:var(--shadow-2)}
.shop-bal small{opacity:.9}.shop-bal b{font-size:1.75rem;font-weight:800}.shop-bal span{color:#dfe7fb;font-weight:600}
.shop-guest .link{color:#fff;text-decoration:underline}
.shop-links{display:flex;flex-wrap:wrap;gap:8px}
.shop-links a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-weight:600;font-size:0.875rem}
.shop-links a:hover,.shop-links a.on{background:#fff;color:var(--rune-3)}
.shop-links svg{width:16px;height:16px}.shop-links .pill{background:#fff;color:var(--rune-3)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.shop-card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-1)}
.shop-card.out{opacity:.6}
.shop-ico{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:var(--sky-2);border:1px solid var(--sky-3)}
.shop-ico img{width:32px;height:32px;image-rendering:pixelated}.shop-ico svg{width:24px;height:24px;color:var(--ink-3)}
.shop-name{font-size:1rem;line-height:1.35}
.shop-sub,.shop-meta{font-size:0.8125rem;color:var(--ink-3)}
.shop-price{font-size:1.25rem;font-weight:800;color:var(--link)}.shop-price small{font-size:0.8125rem;color:var(--ink-3)}
.shop-buy{display:flex;gap:8px;margin-top:auto}.shop-buy .input{width:72px;min-height:40px;padding:0 10px}
.shop-card>.btn{margin-top:auto}
.shop-note{font-size:0.8125rem;margin-top:14px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.gc-top{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px}
.gc-box h2{font-size:1.375rem;font-weight:800;margin-bottom:6px}
.gc-pity{display:flex;gap:8px;align-items:flex-start;margin:12px 0;padding:10px 14px;border-radius:12px;background:var(--sky-2);font-size:0.875rem;color:var(--ink-2)}
.gc-pity svg{width:18px;height:18px;flex:none;color:var(--link)}
.gc-roll{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.gc-save{font-size:0.8125rem;margin-top:8px}
.gc-recent h3,.gc-result h3,.gc-rates h3{font-size:1.0625rem;margin-bottom:10px}
.gc-recent ul{list-style:none;display:grid;gap:6px;font-size:0.875rem}.gc-recent time{font-size:0.75rem;margin-left:6px}
.gc-result{margin-bottom:18px;border-color:var(--edge)}
.gc-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gc-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:14px;background:var(--sky-1);border:1px solid var(--sky-3);text-align:center;font-size:0.875rem;font-weight:600}
.gc-item img{width:32px;height:32px;image-rendering:pixelated}
.gc-item.rare{background:linear-gradient(180deg,#fff7df,var(--sky-0));border-color:#e5c76b;box-shadow:0 0 0 2px rgba(229,199,107,.35)}
.gc-item small{font-size:0.6875rem;color:#8f6a00}
.gc-rates tr.rare td{background:rgba(229,199,107,.12)}
.gc-name{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-weight:600}.gc-name img{width:24px;height:24px;image-rendering:pixelated}
.box-list{list-style:none;display:grid;gap:6px}
.box-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--sky-1);font-size:0.875rem}
.box-list img{width:24px;height:24px;image-rendering:pixelated}.box-list .muted{margin-left:auto;font-size:0.75rem}
.box-done{margin-top:12px}.box-done summary{cursor:pointer;font-size:0.875rem;color:var(--link);font-weight:600;min-height:32px}
[data-theme="dark"] .gc-item.rare{background:linear-gradient(180deg,#3a3016,var(--sky-0));border-color:#8a7330}
[data-theme="dark"] .gc-item small{color:#ebc35e}
@media (max-width:860px){.gc-top{grid-template-columns:1fr}}

/* ===== modal dialogs (public/assets/js/modal.js) */
.ui-modal-open{overflow:hidden}
.ui-modal-wrap{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(10,16,40,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .16s}
.ui-modal-wrap.in{opacity:1}
.ui-modal{width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:28px 26px 22px;border-radius:20px;background:var(--sky-0,#fff);color:var(--navy);border:1px solid var(--sky-3);box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center;transform:translateY(10px) scale(.98);transition:transform .16s}
.ui-modal-wrap.in .ui-modal{transform:none}
.ui-modal-ico{width:56px;height:56px;margin:0 auto 12px;display:grid;place-items:center;border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--rune-1),var(--rune-3))}
.ui-modal.t-ok .ui-modal-ico{background:linear-gradient(135deg,#34c597,#17694f)}
.ui-modal.t-err .ui-modal-ico{background:linear-gradient(135deg,#e46a6a,#a12f2f)}
.ui-modal.t-warn .ui-modal-ico{background:linear-gradient(135deg,#f0b84f,#b5700b)}
.ui-modal h2{font-size:1.25rem;font-weight:800;margin:0 0 8px}
.ui-modal-body{font-size:.95rem;line-height:1.6;color:var(--ink-2);word-break:break-word}
.ui-modal-body ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.ui-modal-msg+.ui-modal-msg{margin-top:10px;padding-top:10px;border-top:1px dashed var(--sky-3)}
.ui-modal-acts{display:flex;gap:10px;justify-content:center;margin-top:20px}
.ui-modal-acts .btn{flex:1 1 0;max-width:180px;min-height:44px;justify-content:center;padding:0 16px}
.ui-modal-acts .ui-danger{background:linear-gradient(180deg,#e46a6a,#b83232);color:#fff;border:1px solid #a12f2f}
[data-theme="dark"] .ui-modal-wrap{background:rgba(2,5,15,.7)}

/* ===== message / error pages: full-height scene instead of a thin header band */
.msg-page{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 108px);display:grid;place-items:center;padding:56px 0 72px;background:linear-gradient(180deg,#8fbbea 0%,#cfe1f7 45%,var(--sky-1) 100%)}
.msg-page::before{content:"";position:absolute;inset:auto 0 0;height:70%;z-index:-1;background:url(../art/juno-pano.png) 50% 100%/cover no-repeat;opacity:.35;-webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%)}
.msg-page .wrap{width:min(600px,100% - 32px)}
[data-theme="dark"] .msg-page{background:linear-gradient(180deg,#0a1230 0%,#16234f 55%,var(--sky-1) 100%)}
[data-theme="dark"] .msg-page::before{opacity:.18;filter:brightness(.6)}
[data-theme="dark"] .page-head::before{filter:brightness(.6);opacity:.28}
[data-theme="dark"] .msg-card .big.warn{background:linear-gradient(135deg,#3a3016,#5a4818);color:#f1cf86}

/* ===== account area (views/account.php + views/account/*) */
.nav .who-pill img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--sky-3)}
.acc-hero{position:relative;isolation:isolate;overflow:hidden;padding:44px 0 34px;background:linear-gradient(180deg,#8fbbea 0%,#cfe1f7 70%,var(--sky-1) 100%)}
.acc-hero::before{content:"";position:absolute;inset:auto 0 0;height:90%;z-index:-1;background:url(../art/juno-pano.png) 50% 100%/cover no-repeat;opacity:.4;-webkit-mask:linear-gradient(180deg,transparent,#000 50%,transparent);mask:linear-gradient(180deg,transparent,#000 50%,transparent)}
.acc-hero-in{display:flex;align-items:center;gap:22px}
.acc-avatar{position:relative;flex:none;width:104px;height:104px;border-radius:28px;padding:4px;background:linear-gradient(135deg,#fff,var(--ice-1));box-shadow:var(--shadow-2)}
.acc-avatar img{width:100%;height:100%;border-radius:24px;object-fit:cover;background:var(--sky-2)}
.acc-avatar-edit{position:absolute;right:-6px;bottom:-6px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--rune-1),var(--rune-3));color:#fff;border:3px solid var(--sky-0)}
.acc-avatar-edit svg{width:16px;height:16px}
.acc-who h1{font-size:clamp(1.625rem,3.4vw,2.25rem);font-weight:800;line-height:1.2;margin-top:4px;word-break:break-all}
.acc-who p{color:var(--ink-2);font-size:0.9375rem;margin-top:4px;word-break:break-all}
.acc-page{padding-top:28px}
.acc-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:start}
.acc-menu{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:var(--r-lg);background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-1)}
.acc-menu a,.acc-menu button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:12px;font-weight:600;font-size:0.9375rem;color:var(--ink-2);width:100%;text-align:left;transition:background .15s,color .15s}
.acc-menu a:hover,.acc-menu button:hover{background:var(--sky-2);color:var(--link)}
.acc-menu a.on{background:linear-gradient(135deg,var(--rune-1),var(--rune-3));color:#fff;box-shadow:0 6px 16px rgba(63,91,178,.3)}
.acc-menu svg{width:19px;height:19px;flex:none}
.acc-menu .acc-badge{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#e05a5a;color:#fff;font-size:0.75rem}
.acc-logout{margin-top:6px;padding-top:6px;border-top:1px solid var(--sky-2)}
.acc-logout button{color:#b83232}
.acc-main{display:grid;gap:18px;min-width:0}
.acc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.acc-head h2{display:flex;align-items:center;gap:10px;font-size:1.375rem;font-weight:800}
.acc-head h2 svg{width:22px;height:22px;color:var(--link-3)}
.acc-h{font-size:1.125rem;font-weight:800;margin-top:6px}
.acc-notice{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;background:#fff8e6;border:1px solid #f1dca2;color:#7a5a00}
.acc-notice>svg{width:24px;height:24px;flex:none}
.acc-notice div{flex:1;min-width:200px;display:flex;flex-direction:column}.acc-notice span{font-size:0.8438rem}
.acc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.acc-tile{position:relative;display:flex;flex-direction:column;gap:2px;padding:18px;border-radius:18px;background:var(--sky-0);border:1px solid var(--sky-3);box-shadow:var(--shadow-1);transition:transform .2s,box-shadow .2s}
.acc-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.acc-tile-ico{width:40px;height:40px;margin-bottom:8px;display:grid;place-items:center;border-radius:12px;background:var(--sky-2);color:var(--link)}
.acc-tile-ico svg{width:20px;height:20px}
.acc-tile small{color:var(--ink-3);font-size:0.8125rem}
.acc-tile b{font-size:1.375rem;font-weight:800;color:var(--link-2);line-height:1.3}
.acc-tile .muted{font-size:0.75rem;color:var(--ink-3)}
.acc-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.acc-action{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 16px;border-radius:16px;background:var(--sky-0);border:1px solid var(--sky-3);font-weight:600;transition:border-color .15s,background .15s}
.acc-action:hover{border-color:var(--edge);background:var(--sky-1)}
.acc-action>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--rune-1),var(--rune-3));color:#fff}
.acc-action>span svg{width:18px;height:18px}
.acc-action .go{margin-left:auto;width:18px;height:18px;color:var(--ink-3)}
.acc-info .kv{margin-top:0}
.acc-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.acc-char{padding:18px}
.acc-char-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.acc-char-top b{font-size:1.0625rem;word-break:break-all}
.acc-char-job{font-size:0.875rem;color:var(--link);font-weight:600}
.acc-char .kv{margin-top:10px}
.acc-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.acc-ways .muted{margin:-8px 0 12px;font-size:0.875rem}
.acc-box-state{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;border-radius:12px;font-size:0.875rem}
.acc-box-state svg{width:20px;height:20px;flex:none}
.acc-box-state.ok{background:#effaf5;color:#17694f}.acc-box-state.warn{background:#fff8e6;color:#7a5a00}
.acc-avatar-card{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.acc-avatar-big{width:160px;height:160px;border-radius:36px;object-fit:cover;background:var(--sky-2);border:4px solid var(--sky-0);box-shadow:var(--shadow-2)}
.acc-avatar-card>div{flex:1;min-width:240px}
.acc-avatar-card p{color:var(--ink-2);margin-bottom:14px}
.acc-narrow{max-width:520px}
[data-theme="dark"] .acc-hero{background:linear-gradient(180deg,#0a1230 0%,#16234f 70%,var(--sky-1) 100%)}
[data-theme="dark"] .acc-hero::before{opacity:.2;filter:brightness(.6)}
[data-theme="dark"] .acc-avatar{background:linear-gradient(135deg,#2a3862,#3d5088)}
[data-theme="dark"] .acc-notice,[data-theme="dark"] .acc-box-state.warn{background:#2f2614;border-color:#5a4818;color:#f1cf86}
[data-theme="dark"] .acc-box-state.ok{background:#0f2b25;color:#8fe3c3}
[data-theme="dark"] .acc-logout button{color:#ff8592}
@media (max-width:860px){
  .acc-shell{grid-template-columns:1fr}
  .acc-menu{position:static;flex-direction:row;overflow-x:auto;padding:6px;gap:6px;scrollbar-width:thin}
  .acc-menu a,.acc-menu button{width:auto;white-space:nowrap;padding:0 14px;flex:none}
  .acc-logout{margin:0;padding:0;border:0;flex:none}
  .acc-hero-in{gap:16px}
  .acc-avatar{width:80px;height:80px;border-radius:22px}.acc-avatar img{border-radius:18px}
}

/* ===== top up v2: colourful channel picker, amount chips, QR PromptPay Auto */
.tp-bal-links{display:flex;flex-wrap:wrap;gap:8px}
.tp-bal-links a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:0.8438rem;font-weight:600;color:#fff}
.tp-bal-links a:hover{background:#fff;color:var(--rune-3)}
.tp-bal-links svg{width:16px;height:16px}
.tp-h{display:flex;align-items:center;gap:10px}.tp-h svg{width:22px;height:22px;color:var(--link-3)}
.tp-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:6px}
.tp-ch{--c1:#5f7bd0;--c2:#2a3f86;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 18px 16px;border-radius:18px;text-align:left;background:var(--sky-0);border:2px solid var(--sky-3);box-shadow:var(--shadow-1);transition:transform .2s,box-shadow .2s,border-color .2s;color:var(--navy)}
.tp-ch:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--c1)}
.tp-ch b{font-size:1.0625rem;font-weight:800;line-height:1.3}
.tp-ch small{font-size:0.8125rem;color:var(--ink-3);line-height:1.45}
.tp-ch-ico{width:48px;height:48px;margin-bottom:8px;display:grid;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 8px 18px -6px var(--c1)}
.tp-ch.on{border-color:var(--c1);background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 12%,var(--sky-0)),var(--sky-0) 70%);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 22%,transparent),var(--shadow-2)}
.tp-ch.on::after{content:"✓";position:absolute;top:12px;right:14px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--c1);color:#fff;font-size:0.8125rem;font-weight:800}
.ch-lc{--c1:#12a874;--c2:#0b6b52}
.ch-qr{--c1:#2f6fd6;--c2:#123f8f}
.ch-tw{--c1:#f2701d;--c2:#c2410c}
.ch-stripe{--c1:#635bff;--c2:#3c32c9}
.tp-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:999px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-size:0.875rem;font-weight:700}
.tp-pane h3{margin-bottom:6px}
.tp-presets{gap:8px}
.tp-presets button{min-height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--sky-3);font-weight:700;transition:background .15s,border-color .15s,color .15s}
.tp-presets button.on{background:linear-gradient(135deg,var(--rune-1),var(--rune-3));border-color:transparent;color:#fff}
.tp-lc .tp-qr-img{background:#fff}
#lcQr svg{display:block;width:100%;height:auto}
.tp-qr-amt em{font-style:normal;color:#e05a5a;font-size:.9em}
.tp-qr-amt .tp-copy{vertical-align:middle;margin-left:8px}
.tp-qr-info .tp-chip{margin-bottom:8px}
.tp-warn span{flex:1}
.tp-plan.hour{background:linear-gradient(160deg,var(--sky-0),#f1fbf7)}
[data-theme="dark"] .tp-plan.hour{background:linear-gradient(160deg,var(--sky-0),#122a2a)}
[data-theme="dark"] .tp-ch-ico{box-shadow:none}
@media (max-width:560px){.tp-channels{grid-template-columns:1fr 1fr}.tp-ch{padding:14px}.tp-ch small{display:none}}

/* ===== native controls that had no style: file inputs, checkboxes, number spinners */
input[type=file].input{padding:6px;min-height:48px;cursor:pointer;color:var(--ink-2);font-size:0.875rem}
input[type=file]::file-selector-button{margin-right:12px;min-height:34px;padding:0 16px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--rune-1),var(--rune-3));color:#fff;font:600 0.875rem var(--f-th);cursor:pointer;transition:filter .15s}
input[type=file]::file-selector-button:hover{filter:brightness(1.1)}
input[type=checkbox],input[type=radio]{accent-color:var(--rune-2);width:18px;height:18px;flex:none}
select.input{cursor:pointer}
/* play-time page: packages are radio cards */
.tp-sub{font-size:1rem;font-weight:700;color:var(--ink-2);margin:18px 0 10px}
label.tp-plan{position:relative;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;border-width:2px}
label.tp-plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
label.tp-plan input{position:absolute;opacity:0;pointer-events:none}
label.tp-plan:has(input:checked){border-color:var(--link);box-shadow:0 0 0 4px color-mix(in srgb,var(--link) 22%,transparent),var(--shadow-2)}
label.tp-plan:has(input:checked)::after{content:"✓";position:absolute;top:12px;right:14px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--link);color:#fff;font-size:0.8125rem;font-weight:800}
label.tp-plan:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px}
.tp-plan-sum{font-weight:700;color:var(--navy);margin:4px 0 6px}
.tp-bal-time{font-size:1.75rem}