:root{
    --ink:#f3f0ff; --muted:#b3a9d4;
    --card:rgba(28,24,58,.6);
    --card-brd:rgba(170,140,255,.42);
    --line:rgba(180,165,235,.28);
    --field:rgba(22,18,48,.55);
    --accent:#c084fc; --accent-d:#a855f7; --accent-soft:rgba(192,132,252,.22);
    --pink:#f04bb0; --purple:#9b5de5;
    --green:#4ade80; --green-d:#22c55e;
    --red:#fb7185; --red-d:#f43f5e;
    --amber:#fcd34d; --amber-d:#f59e0b;
    --hours:#ff3d7f; --minutes:#ffe600; --seconds:#22ff6a;
    --shadow:0 20px 60px rgba(80,40,160,.35), 0 0 40px rgba(168,85,247,.15);
    --glow:0 0 18px rgba(192,132,252,.55);
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent;
     -webkit-user-select:none; -moz-user-select:none; user-select:none; }
  ::selection{background:transparent;} ::-moz-selection{background:transparent;}
  button:focus, button:focus-visible{outline:none;}
  html,body{margin:0; padding:0; height:100%; overflow:hidden;}
  body{
    font-family:'Quicksand',sans-serif; color:var(--ink);
    min-height:100dvh; display:flex; align-items:center; justify-content:center;
    padding:18px; position:relative; background:#06030f;
  }

  /* ===== Latar SPACE (black hole 3D + bintang jatuh) ===== */
  #space{position:fixed; inset:0; z-index:-3; overflow:hidden;
    background:radial-gradient(circle at 50% 20%, #150d33, #06030f 75%);}
  #bh3d{position:fixed; inset:0; z-index:-2; pointer-events:none;}
  /* layer gabungan efek space */
  #vantaBirds{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;}
  #cosmicCv{position:fixed; inset:0; z-index:-2; pointer-events:none;}
  #particleCv{position:fixed; inset:0; z-index:-2; pointer-events:none;}
  #supernovaCv{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:0; transition:opacity .3s;}
  #supernovaCv.on{opacity:1;}
  #cosmicLayer{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;}
  #cosmicLayer .star{position:absolute; background:#fff; border-radius:50%;
    animation:twinkle var(--d) ease-in-out infinite; animation-delay:var(--dl);
    box-shadow:0 0 var(--g) rgba(255,255,255,.9);}
  @keyframes twinkle{0%,100%{opacity:.2; transform:scale(.8);}50%{opacity:1; transform:scale(1.3);}}
  #cosmicLayer .asteroid{position:absolute; border-radius:50%;
    background:linear-gradient(135deg,#8b7355,#5c4a3a 50%,#3d3227);
    box-shadow:inset -5px -5px 10px rgba(0,0,0,.5),0 0 20px rgba(139,115,85,.3);}
  @keyframes asteroidDrift{0%{transform:translate(0,0) rotate(0); opacity:0;}5%{opacity:1;}95%{opacity:1;}100%{transform:translate(var(--ax),var(--ay)) rotate(360deg); opacity:0;}}
  /* bintang jatuh (meteor) */
  #meteors{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;}
  .meteor{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
    box-shadow:0 0 6px 1px rgba(255,255,255,.9);}
  .meteor::after{content:""; position:absolute; top:50%; right:0; width:90px; height:1px; transform:translateY(-50%);
    background:linear-gradient(90deg, rgba(255,255,255,.9), transparent);}
  #vignette{position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at 50% 30%, transparent 44%, rgba(3,1,10,.6) 100%);}
  @keyframes shoot{
    0%{transform:translate(0,0) rotate(var(--ang)); opacity:0;}
    10%{opacity:1;}
    100%{transform:translate(var(--dx),var(--dy)) rotate(var(--ang)); opacity:0;}
  }

  /* ===== Cursor ribbon ===== */
  #canvas{position:fixed; inset:0; z-index:9999; pointer-events:none;}

  /* ===== Kartu ===== */
  .wrap{width:100%; max-width:440px; position:relative; z-index:5;}
  .card{
    background:var(--card); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
    border-radius:26px; padding:26px 22px; border:1px solid var(--card-brd);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); animation:cardIn .6s cubic-bezier(.22,1,.36,1);
  }
  @keyframes cardIn{from{opacity:0; transform:translateY(24px) scale(.96);}to{opacity:1; transform:none;}}

  /* ===== INTRO (Welcome) ===== */
  #intro{position:fixed; inset:0; z-index:20; cursor:pointer; transition:opacity .8s ease;}
  #intro.hide{opacity:0; pointer-events:none;}
  .intro-top{position:absolute; top:13%; left:0; right:0; text-align:center; z-index:21;}
  .intro-welcome{font-size:15px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--muted);
    opacity:0; animation:introUp .7s .2s forwards;}
  .intro-title{font-size:46px; font-weight:700; letter-spacing:-1px; color:#fff; margin-top:8px;
    opacity:0; animation:introUp .7s .45s forwards; text-shadow:0 0 30px rgba(139,92,246,.5);}
  .intro-title .em{background:linear-gradient(90deg,#a855f7,#d53a9d,#a855f7); background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 4s linear infinite;}
  .intro-hint{position:absolute; left:0; right:0; bottom:16%; text-align:center; z-index:21;
    font-size:14px; font-weight:700; letter-spacing:1px; color:#c4b5fd;
    opacity:0; animation:introUp .7s 1.1s forwards, hintPulse 1.8s 1.8s ease-in-out infinite;
    text-shadow:0 0 16px rgba(168,85,247,.6);}
  @keyframes introUp{from{opacity:0; transform:translateY(18px);}to{opacity:1; transform:none;}}
  @keyframes hintPulse{0%,100%{opacity:.45; transform:translateY(0);}50%{opacity:1; transform:translateY(4px);}}
  @keyframes shimmer{to{background-position:200% center;}}
  #introFlash{position:fixed; inset:0; z-index:25; background:#000; opacity:0; pointer-events:none; transition:opacity .5s ease;}
  #introFlash.on{opacity:1;}

  .brand{text-align:center; margin-bottom:4px;}
  .brand .logo{font-size:24px; font-weight:700; letter-spacing:-.3px; color:var(--ink); text-shadow:0 0 18px rgba(192,132,252,.4);}
  .brand .logo .em{color:var(--accent); text-shadow:0 0 20px rgba(192,132,252,.7);}
  .sub{text-align:center; color:var(--muted); font-size:13px; margin:6px 0 18px; font-weight:600;}

  .rulebar{
    display:flex; align-items:center; gap:8px; justify-content:center;
    background:var(--accent-soft); border:1px solid var(--line); color:var(--muted);
    border-radius:12px; padding:9px 12px; font-size:12.5px; font-weight:700; margin-bottom:16px;
  }
  .rulebar b{color:var(--ink);}
  label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin:8px 0 10px;}
  .shift-label{text-align:center; font-size:16px; font-weight:700; color:var(--ink); letter-spacing:1px; text-transform:uppercase; margin:14px 0 14px;}

  /* ===== Tombol space (gradient ungu-pink) ===== */
  .btn-space{
    width:100%; padding:15px; border:none; border-radius:12px; cursor:pointer;
    text-align:center; text-transform:uppercase; letter-spacing:.5px;
    font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px; color:#fff;
    background-image:linear-gradient(to right,#743ad5 0%,#d53a9d 51%,#743ad5 100%);
    background-size:200% auto; transition:background-position .6s ease, box-shadow .4s ease, transform .25s cubic-bezier(.22,1,.36,1); margin-top:16px; position:relative; overflow:hidden;
  }
  .btn-space:hover{ background-position:right center; box-shadow:0 0 22px #743ad5; text-shadow:0 1px 10px #d53a9d; transform:translateY(-2px); }
  .btn-space:active{ transform:scale(.97); }
  .btn-space:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
  .btn-ghost{
    width:100%; background:none; border:none; color:var(--muted); cursor:pointer;
    margin-top:8px; font-size:13px; font-weight:700; font-family:'Quicksand',sans-serif;
  }
  .btn-ghost:hover{color:var(--accent);}

  /* ===== Pilih shift (interaktif) ===== */
  .shift-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px;}
  .shift-btn{
    padding:28px 12px; border:1px solid var(--line); border-radius:18px;
    background:linear-gradient(160deg,rgba(40,30,75,.55),rgba(15,12,35,.6)); color:var(--ink); cursor:pointer;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s;
    text-align:center; font-family:'Quicksand',sans-serif; position:relative; overflow:hidden;
    animation:shiftIn .55s backwards;
  }
  .shift-btn.morning{animation-delay:.15s;} .shift-btn.night{animation-delay:.28s;}
  /* lapisan glow gradient yang bernapas di dalam box */
  .shift-btn::before{content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
    background:linear-gradient(130deg, var(--g1), var(--g2), var(--g1)); background-size:200% 200%;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.5; animation:borderFlow 5s ease infinite;}
  .shift-btn.morning{--g1:#f59e0b; --g2:#a855f7;}
  .shift-btn.night{--g1:#3b82f6; --g2:#a855f7;}
  /* kilau nyapu pas hover */
  .shift-btn::after{content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; z-index:1;
    background:linear-gradient(115deg,transparent,rgba(255,255,255,.16),transparent); transition:left .6s ease;}
  .shift-btn:hover::after{left:140%;}
  .shift-btn:hover{transform:translateY(-6px) scale(1.03); border-color:transparent;
    box-shadow:0 18px 44px rgba(155,93,229,.5), 0 0 40px rgba(192,132,252,.4);}
  .shift-btn:hover::before{opacity:1; animation-duration:2s;}
  .shift-btn:active{transform:scale(.95);}
  .shift-btn .ttl{font-size:21px; font-weight:700; display:block; letter-spacing:2px; position:relative; z-index:2; transition:text-shadow .3s, transform .3s;}
  .shift-btn:hover .ttl{text-shadow:0 0 16px rgba(168,85,247,.9); transform:scale(1.06);}
  .shift-btn .desc{font-size:11.5px; color:var(--muted); font-weight:600; margin-top:6px; position:relative; z-index:2;}
  @keyframes borderFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
  @keyframes shiftIn{from{opacity:0; transform:translateY(22px) scale(.9);}to{opacity:1; transform:none;}}

  /* Animasi masuk kata-kata (judul, sub, label) */
  .reveal{animation:revealUp .55s backwards;}
  .reveal.d1{animation-delay:.05s;} .reveal.d2{animation-delay:.16s;} .reveal.d3{animation-delay:.27s;}
  @keyframes revealUp{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:none;}}
  /* Judul dengan shimmer halus pada kata aksen */
  #shiftPick .logo .em{background:linear-gradient(90deg,#a855f7,#d53a9d,#a855f7); background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 4s linear infinite;}
  @keyframes shimmer{to{background-position:200% center;}}

  .ico{width:40px; height:40px; margin:0 auto 8px; position:relative;}
  .ico-sun .core{position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
    border-radius:50%; background:radial-gradient(circle at 35% 35%,#ffe9a8,#fbbf24 60%,#f59e0b); box-shadow:0 0 14px rgba(251,191,36,.7);}
  .ico-sun .ray{position:absolute; top:50%; left:50%; width:3px; height:7px; margin:-20px 0 0 -1.5px;
    background:#fbbf24; border-radius:3px; transform-origin:1.5px 20px; opacity:.9;}
  .ico-sun .ray:nth-child(2){transform:rotate(45deg);} .ico-sun .ray:nth-child(3){transform:rotate(90deg);}
  .ico-sun .ray:nth-child(4){transform:rotate(135deg);} .ico-sun .ray:nth-child(5){transform:rotate(180deg);}
  .ico-sun .ray:nth-child(6){transform:rotate(225deg);} .ico-sun .ray:nth-child(7){transform:rotate(270deg);}
  .ico-sun .ray:nth-child(8){transform:rotate(315deg);}
  .shift-btn:hover .ico-sun{animation:spin 8s linear infinite;}
  .ico-moon .crescent{position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
    border-radius:50%; box-shadow:7px 7px 0 0 #cdd9f5; transform:rotate(-20deg); filter:drop-shadow(0 0 8px rgba(168,85,247,.5));}
  .ico-moon .star{position:absolute; width:3px; height:3px; border-radius:50%; background:#cdd9f5; opacity:.85;}
  .ico-moon .star.s1{top:4px; right:4px;} .ico-moon .star.s2{top:14px; right:0px; width:2px; height:2px;}
  .shift-btn:hover .ico-moon .star{animation:twinkle 1.2s ease-in-out infinite alternate;}
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes twinkle{from{opacity:.3; transform:scale(.7);}to{opacity:1; transform:scale(1.3);}}

  /* ===== Search glowing ===== */
  #poda{position:relative; margin-bottom:14px; display:flex; align-items:center; justify-content:center;}
  #poda .glow,#poda .darkBorderBg,#poda .white,#poda .border{
    position:absolute; overflow:hidden; z-index:-1; border-radius:12px;
    height:100%; width:100%; left:50%; top:50%; transform:translate(-50%,-50%);
  }
  #poda .darkBorderBg{height:calc(100% + 4px); width:calc(100% + 4px);}
  #poda .white{height:calc(100% - 4px); width:calc(100% - 4px); border-radius:10px; filter:blur(2px);}
  #poda .border{height:calc(100% - 1px); width:calc(100% - 1px); border-radius:11px; filter:blur(.5px);}
  #poda .glow{height:calc(100% + 60px); width:calc(100% + 40px); filter:blur(30px); opacity:.4;}
  #poda .white::before,#poda .border::before,#poda .darkBorderBg::before,#poda .glow::before{
    content:""; position:absolute; top:50%; left:50%; width:600px; height:600px; background-repeat:no-repeat; background-position:0 0; z-index:-2; transition:transform 2s ease;
  }
  #poda .white::before{transform:translate(-50%,-50%) rotate(83deg); filter:brightness(1.4);
    background-image:conic-gradient(rgba(0,0,0,0) 0%,#a099d8,rgba(0,0,0,0) 8%,rgba(0,0,0,0) 50%,#dfa2da,rgba(0,0,0,0) 58%);}
  #poda .border::before{transform:translate(-50%,-50%) rotate(70deg); filter:brightness(1.3);
    background-image:conic-gradient(#1c191c,#402fb5 5%,#1c191c 14%,#1c191c 50%,#cf30aa 60%,#1c191c 64%);}
  #poda .darkBorderBg::before{transform:translate(-50%,-50%) rotate(82deg);
    background-image:conic-gradient(rgba(0,0,0,0),#18116a,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 50%,#6e1b60,rgba(0,0,0,0) 60%);}
  #poda .glow::before{transform:translate(-50%,-50%) rotate(60deg); width:900px; height:900px;
    background-image:conic-gradient(#000,#402fb5 5%,#000 38%,#000 50%,#cf30aa 60%,#000 87%);}
  #poda .white::before{animation:rotateloop 8s linear infinite;}
  #poda .border::before{animation:rotateloop 8s .1s linear infinite;}
  #poda .darkBorderBg::before{animation:rotateloop 8s .2s linear infinite;}
  #poda .glow::before{animation:rotateloop 8s .3s linear infinite;}
  @keyframes rotateloop{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
  #poda:focus-within .white::before,#poda:focus-within .border::before,#poda:focus-within .darkBorderBg::before,#poda:focus-within .glow::before{animation-duration:4s;}
  #poda #main{position:relative; width:100%;}
  .searchbox{
    width:100%; height:52px; background:#0a0a12; border:none; border-radius:10px; color:#fff;
    padding-left:46px; padding-right:16px; font-size:15px; font-weight:600; font-family:'Quicksand',sans-serif;
    -webkit-user-select:text; user-select:text; position:relative; z-index:1;
  }
  .searchbox::placeholder{color:#9b94b0; font-weight:600;}
  .searchbox:focus{outline:none;}
  #poda #search-icon{position:absolute; left:16px; top:50%; transform:translateY(-50%); z-index:2; pointer-events:none; display:flex;}

  /* ===== Daftar nama ===== */
  .names{display:grid; grid-template-columns:1fr; gap:8px; max-height:300px; overflow-y:auto; padding:2px 8px 2px 2px; scroll-behavior:smooth;
    scrollbar-width:thin; scrollbar-color:var(--accent) transparent;}
  .names::-webkit-scrollbar{width:8px;}
  .names::-webkit-scrollbar-track{background:transparent; margin:2px 0;}
  .names::-webkit-scrollbar-thumb{border-radius:8px; background:linear-gradient(var(--accent),var(--accent-d)); border:2px solid transparent; background-clip:padding-box;}
  .names::-webkit-scrollbar-thumb:hover{background:var(--accent-d); background-clip:padding-box;}
  .names-wrap{position:relative;}
  .names-wrap::before,.names-wrap::after{content:""; position:absolute; left:0; right:8px; height:18px; pointer-events:none; z-index:2; opacity:0; transition:opacity .25s;}
  .names-wrap::before{top:0; background:linear-gradient(var(--card),transparent);}
  .names-wrap::after{bottom:0; background:linear-gradient(transparent,var(--card));}
  .names-wrap.fade-top::before{opacity:1;}
  .names-wrap.fade-bot::after{opacity:1;}
  .name-btn{
    padding:13px 18px; font-size:15px; font-weight:700; border:1px solid var(--line); border-radius:12px;
    background:linear-gradient(145deg,rgba(40,30,70,.55),rgba(15,12,35,.5)); color:var(--ink); cursor:pointer;
    transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
    text-align:center; position:relative; overflow:hidden; will-change:transform,opacity;
    animation:nameIn .42s cubic-bezier(.22,1,.36,1) backwards;
  }
  .name-btn::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
    background:linear-gradient(115deg,transparent,rgba(168,85,247,.25),transparent); transition:left .5s ease;}
  .name-btn:hover::after{left:140%;}
  .name-btn:hover{transform:translateY(-3px) scale(1.02); border-color:var(--accent); box-shadow:0 10px 24px var(--accent-soft), 0 0 22px rgba(192,132,252,.35);}
  .name-btn:active{transform:scale(.94);}
  .name-btn.sel{background:linear-gradient(135deg,#c084fc,#9b5de5); color:#fff; border-color:transparent; box-shadow:0 10px 28px rgba(155,93,229,.6), 0 0 28px rgba(192,132,252,.6); transform:translateY(-2px) scale(1.02); text-shadow:0 0 12px rgba(255,255,255,.5);}
  .names-loading{text-align:center; color:var(--muted); font-size:14px; padding:20px 0; font-weight:600; grid-column:1/-1;}
  @keyframes nameIn{from{opacity:0; transform:translateY(14px) scale(.96);}to{opacity:1; transform:none;}}
  @keyframes nameOut{from{opacity:1; transform:none;}to{opacity:0; transform:translateY(-10px) scale(.96);}}
  .name-btn.leaving{animation:nameOut .26s cubic-bezier(.4,0,1,1) forwards; pointer-events:none;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}

  .ripple{position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.18); animation:rip .55s ease-out; pointer-events:none;}
  @keyframes rip{to{transform:scale(3); opacity:0;}}

  .msg{margin-top:14px; padding:11px 13px; border-radius:12px; font-size:14px; display:none; line-height:1.45; font-weight:600;}
  .msg.show{display:block; animation:fadeIn .3s ease;}
  .msg.err{background:rgba(239,68,68,.14); color:var(--red); border:1px solid rgba(239,68,68,.32);}
  .msg.ok{background:rgba(16,185,129,.14); color:var(--green); border:1px solid rgba(16,185,129,.32);}
  .msg.warn{background:rgba(245,158,11,.14); color:var(--amber); border:1px solid rgba(245,158,11,.32);}
  .msg.info{background:var(--accent-soft); color:var(--accent); border:1px solid var(--line);}

  /* ===== Panel ===== */
  #panel{display:none;} #shiftPick{display:none;} #namePick{display:none;}
  .step-anim{animation:stepIn .45s cubic-bezier(.22,1,.36,1);}
  @keyframes stepIn{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:none;}}
  .userbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .hello{font-size:13px; color:var(--muted); font-weight:600;}
  .hello b{color:var(--ink); font-size:19px; display:block; font-weight:700;}
  .hello .shifttag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.5px; padding:2px 9px; border-radius:7px; margin-top:4px; color:#fff;}
  .shifttag.morning{background:var(--amber-d);} .shifttag.night{background:var(--accent-d);}
  .logout{font-size:12px; color:var(--red); background:none; border:none; cursor:pointer; font-weight:700;}

  /* ===== JAM PIE (3 lingkaran real-time) ===== */
  .clockwrap{display:flex; justify-content:center; gap:12px; margin:6px 0 6px;}
  .pie{
    position:relative; width:92px; height:92px; border-radius:50%;
    display:grid; place-content:center; text-align:center; border:5px solid #1b1730;
  }
  .pie::before{
    content:""; position:absolute; inset:-5px; border-radius:50%;
    background:
      radial-gradient(farthest-side, var(--c) 98%, #0000) top/7px 7px no-repeat,
      conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - 7px),#000 calc(100% - 7px));
    mask:radial-gradient(farthest-side,#0000 calc(99% - 7px),#000 calc(100% - 7px));
    transition:none;
  }
  .pie .dot{position:absolute; inset:0; transition:transform .5s cubic-bezier(.4,2,.55,.44);}
  .pie .dot::before{
    content:""; position:absolute; top:-9px; left:50%; margin-left:-4px; width:8px; height:8px;
    border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c),0 0 24px var(--c);
  }
  .pie .num{font-family:'Orbitron',sans-serif; font-size:26px; font-weight:700; color:#fff; line-height:1; text-shadow:0 0 14px var(--c), 0 0 4px rgba(255,255,255,.6);}
  .pie .lbl{font-size:9px; font-weight:700; letter-spacing:1.5px; color:var(--muted); margin-top:3px;}
  .pie.h{--c:var(--hours);} .pie.m{--c:var(--minutes);} .pie.s{--c:var(--seconds);}
  .ampm{text-align:center; font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:2px; color:var(--muted); margin-bottom:4px;}
  .datebar{text-align:center; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px;}

  .status{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 4px;}
  .stat{border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; background:var(--field);}
  .stat .lbl{font-size:11px; font-weight:800; letter-spacing:1px; color:var(--muted);}
  .stat .val{font-size:22px; font-weight:700; margin-top:4px; color:var(--ink); font-variant-numeric:tabular-nums;}
  .stat.start .lbl{color:var(--green);} .stat.finish .lbl{color:var(--red);}
  .stat .val.empty{color:var(--muted); opacity:.5; font-size:18px;}

  /* ===== TIMER 45 MENIT (digit roller countdown) ===== */
  .countdown{display:none; margin:6px 0 4px; text-align:center;}
  .countdown.show{display:block; animation:fadeIn .3s ease;}
  .cd-lead{font-size:12px; font-weight:700; color:var(--accent); letter-spacing:1px; margin-bottom:10px; text-transform:uppercase;}
  .roller{display:flex; align-items:center; justify-content:center; gap:4px;}
  .rg{display:flex; gap:2px;}
  .digit-col{
    width:42px; height:62px; overflow:hidden; border-radius:10px;
    background:linear-gradient(180deg,rgba(40,30,70,.7),rgba(15,12,35,.7));
    border:1px solid var(--line); position:relative;
  }
  .digit-col .reel{display:flex; flex-direction:column; transition:transform .6s cubic-bezier(.5,0,.2,1);}
  .digit-col .reel span{height:62px; display:flex; align-items:center; justify-content:center;
    font-family:'Orbitron',sans-serif; font-size:34px; font-weight:700; color:#fff; text-shadow:0 0 16px rgba(192,132,252,.8);}
  .roller .colon{font-family:'Orbitron',sans-serif; font-size:34px; font-weight:700; color:var(--accent); padding:0 2px; text-shadow:0 0 14px var(--accent);}
  .cd-sub{font-size:11px; color:var(--muted); font-weight:600; margin-top:10px;}
  .countdown.over .digit-col .reel span{color:#fca5a5;}
  .countdown.over .colon{color:var(--red);}

  .spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:6px;}
  @keyframes sp{to{transform:rotate(360deg);}}
  .foot{text-align:center; font-size:11px; color:var(--muted); margin-top:16px; font-weight:600;}

  .pop{position:fixed; inset:0; pointer-events:none; z-index:50; display:none;}
  .pop.show{display:block;}
  .pop span{position:absolute; font-size:22px; animation:fall 1.4s ease-in forwards;}
  @keyframes fall{0%{transform:translateY(-20px) rotate(0); opacity:1;}100%{transform:translateY(80vh) rotate(300deg); opacity:0;}}