* { box-sizing: border-box; }
:root {
  --purple:#7e2bff;
  --purple-alt:#a066ff;
  --blue:#5bc9ff;
  --blue-alt:#9ee6ff;
  --bg:#0d0b16;
  --panel:#181428;
  --panel-glow: 0 0 0 1px #2a2144,0 0 18px -4px rgba(123,78,255,.55);
  --radius:22px;
  --gradient:linear-gradient(120deg,var(--purple) 0%, var(--blue) 60%, var(--blue-alt) 100%);
  color-scheme: dark;
  font-family:'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}
html,body { height:100%; margin:0; }
body {
  background: radial-gradient(circle at 30% 30%, rgba(126,43,255,.15), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(91,201,255,.12), transparent 60%),
              var(--bg);
  color:#f6f7fb;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding: clamp(1.25rem,3vw,2.5rem) clamp(1rem,2.5vw,2rem);
}
.wrap { width:min(1120px,100%); margin:0 auto; display:flex; flex-direction:column; flex:1; }
section#knowledge { flex:1; display:flex; flex-direction:column; }
header { text-align:center; margin-bottom:2rem; }
header h1 { font-size: clamp(2.4rem,6vw,4.2rem); margin:0 0 .35rem; letter-spacing:-1px; font-weight:800; }
.lang-switch { margin: .75rem 0 1.75rem; display:inline-flex; gap:.6rem; background:#1e1931; padding:.4rem; border-radius:999px; box-shadow:0 0 0 1px #2a2144,0 4px 14px -6px rgba(0,0,0,.6); }
.lang-btn { background:#221c37; border:0; color:#cfd2e6; font-weight:600; font-size:.8rem; letter-spacing:.5px; padding:.55rem .95rem; border-radius:999px; cursor:pointer; transition:.35s; position:relative; }
.lang-btn:hover { background:#2b2444; }
.lang-btn.active { background:var(--gradient); color:#111018; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px -4px rgba(126,43,255,.55); }
.lang-btn:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.logo-link { display:inline-block; margin-bottom:1rem; transition:transform .4s cubic-bezier(.55,.08,.18,.99), filter .4s; }
.logo-link:hover { transform:translateY(-4px) scale(1.04) rotate(-1deg); filter:drop-shadow(0 6px 14px rgba(126,43,255,.45)); }
.logo { width: clamp(120px,26vw,220px); height:auto; display:block; margin:0 auto; image-rendering:-webkit-optimize-contrast; }
.gradient { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { font-size: clamp(.95rem,1.8vw,1.15rem); opacity:.85; margin:0; }

/* Removed category tile grid styles (time-grid, unit, value, label) after redesign */

.progress-wrapper { height:10px; background:#221c37; border-radius:6px; position:relative; overflow:hidden; margin:-.25rem 0 1.2rem; box-shadow:inset 0 0 0 1px #2a2241,0 4px 10px -4px rgba(0,0,0,.6); }
.progress-bar { position:absolute; inset:0; width:0%; background:var(--gradient); box-shadow:0 0 12px -2px rgba(126,43,255,.6); transition:width .9s cubic-bezier(.55,.08,.18,.99); }

.status { text-align:center; font-size:1.05rem; font-weight:600; letter-spacing:.5px; margin:0 0 1.25rem; background:linear-gradient(90deg,var(--blue-alt),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }

footer { text-align:center; font-size:.7rem; opacity:.55; max-width:720px; margin:2rem auto 0; line-height:1.4; }
footer .credit-link { font-weight:700; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; text-decoration:none; position:relative; }
footer .credit-link::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--gradient); transform:scaleX(.25); transform-origin:left; transition:.4s cubic-bezier(.55,.08,.18,.99); opacity:.65; }
footer .credit-link:hover::after { transform:scaleX(1); opacity:1; }

/* Coming Soon Mode */
.coming-soon { text-align:center; padding:2.5rem 1.5rem 2rem; margin:0 0 1.5rem; border-radius:var(--radius); background:linear-gradient(160deg,#1f1933,#151228 70%); box-shadow:var(--panel-glow); position:relative; overflow:hidden; }
.coming-soon::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(126,43,255,.25), transparent 60%), radial-gradient(circle at 70% 80%, rgba(91,201,255,.18), transparent 55%); mix-blend-mode:overlay; pointer-events:none; }
.coming-soon h2 { margin:0 0 .75rem; font-size: clamp(2.3rem,6.5vw,3.6rem); font-weight:800; letter-spacing:-1px; }
.coming-soon h2 .soon-accent { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.soon-note { margin:0 auto 1.5rem; max-width:560px; font-size: clamp(.95rem,1.9vw,1.1rem); opacity:.85; line-height:1.4; }
.reveal-btn { background:var(--gradient); color:#101018; font-weight:700; border:none; padding:.85rem 1.4rem; border-radius:14px; cursor:pointer; font-size:1rem; letter-spacing:.5px; box-shadow:0 6px 18px -6px rgba(93,54,173,.55); transition:.35s; }
.reveal-btn:hover { filter:brightness(1.1); transform:translateY(-2px); }
.reveal-btn:active { transform:translateY(0); }

.coming-soon + .time-grid { transition:.5s ease; }
.coming-soon-hidden .coming-soon { display:none !important; }


@media (max-width:760px){
  body { padding:1rem .9rem 1.4rem; }
  header { margin-bottom:1.4rem; }
  header h1 { font-size: clamp(2rem,9vw,3rem); }
  .soon-note { font-size: clamp(.9rem,3.5vw,1.05rem); }
}

@media (min-height:760px) and (min-width:900px){
  section#knowledge { justify-content:flex-start; }
}

@media (orientation:landscape) and (max-height:520px){
  body { padding: .6rem 1rem; }
  header h1 { font-size: clamp(1.6rem,6vw,2.4rem); }
}