/* DHiveWork 2026 look: fresh light theme, soft glass, motion, floating particles, new components.
   Loaded after app.css. Dark mode lives in dark.css (generated) and the tokens below. */
:root{
  --bg:#f3f7fc;--card:#fff;--line:#e2e9f3;--soft:#eef3fa;--muted:#5f6f87;
  --r:20px;--r-sm:12px;
  --shadow:0 1px 2px rgba(11,26,51,.04),0 12px 32px -10px rgba(11,26,51,.14);
  --green:#22b573;--green-bg:#e3f8ee;--mint:#3ddc97;
  --ease:cubic-bezier(.2,.7,.2,1);
}
[hidden]{display:none!important}
html{background:var(--bg);color-scheme:light}
html[data-theme=dark]{color-scheme:dark}
body{background:transparent;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(700px 420px at 92% -4%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
             radial-gradient(640px 460px at -6% 38%,rgba(61,220,151,.14),transparent 70%),
             radial-gradient(760px 520px at 70% 108%,rgba(59,130,246,.12),transparent 70%)}
.admin-body{background:transparent}

/* lighter, fresher green across the whole UI */
.badge-green,.pill-ok,.tag-green{color:#12804d!important}
.tag-green{background:#dcf7ea}
.alert-success{background:var(--green-bg);border-color:#b7ebd0;color:#0f5f3a}
.hero-points .ic{color:var(--mint)}
.tick li::before{background-color:var(--green)}

/* glass header, softer cards, smoother controls */
.site-header{background:rgba(255,255,255,.78);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
.card,.lcard,.auth-card{border-radius:var(--r)}
.btn{transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#ffb36b));box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent-d),var(--accent));box-shadow:0 14px 30px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.lcard{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.lcard:hover{transform:translateY(-5px);box-shadow:0 22px 44px -16px rgba(11,26,51,.22)}
.card.pad{transition:box-shadow .25s var(--ease)}
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 38%,transparent),transparent 65%);filter:blur(10px);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
.hero-visual{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-60px,50px) scale(1.15)}}
main{animation:pagein .5s var(--ease) both}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* scroll reveal (only when JS is on) */
.js .reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* floating particles */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* theme toggle */
.theme-btn{position:relative}
.theme-btn .t-moon{display:none}
html[data-theme=dark] .theme-btn .t-sun{display:none}
html[data-theme=dark] .theme-btn .t-moon{display:inline-block}

/* support chat button + panel */
.sup{position:fixed;right:18px;bottom:20px;z-index:80}
body.is-member .sup{bottom:20px}
.sup-fab{width:58px;height:58px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),#ffa45c);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -6px color-mix(in srgb,var(--accent) 65%,transparent);transition:transform .2s var(--ease);position:relative}
.sup-fab:hover{transform:scale(1.07)}
.sup-fab::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 50%,transparent);animation:ping 2.6s ease-out infinite}
.sup.open .sup-fab::after{display:none}
@keyframes ping{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.sup-dot{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:99px;background:#ef4444;color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;padding:0 5px;border:2px solid var(--card)}
.sup-panel{position:absolute;right:0;bottom:72px;width:min(360px,calc(100vw - 28px));background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 70px -18px rgba(11,26,51,.4);overflow:hidden;transform-origin:bottom right;transform:scale(.9) translateY(12px);opacity:0;visibility:hidden;transition:.22s var(--ease)}
.sup.open .sup-panel{transform:none;opacity:1;visibility:visible}
.sup-head{background:linear-gradient(135deg,var(--navy),#1b3a73);color:#fff;padding:18px 18px 22px}
.sup-head strong{display:block;font-size:1.1rem}.sup-head span{font-size:.88rem;color:#c3d1ea}
.sup-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.sup-link{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;background:var(--soft);color:var(--text);font-weight:600;font-size:.92rem}
.sup-link:hover{text-decoration:none;filter:brightness(.97)}
.sup-x{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center}
.sup-form{display:flex;flex-direction:column;gap:8px}.sup-form input,.sup-form textarea{font-size:.92rem;padding:10px 12px}
.sup-ok{display:none;text-align:center;padding:10px;color:var(--green);font-weight:700}
@media(max-width:860px){body.is-member .sup{bottom:84px}}

/* auth extras */
.social-login{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.sso{gap:10px;font-weight:700}
.or-line{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;margin:6px 0 2px}.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
.pk-msg{margin:6px 0 0;font-size:.85rem}.pk-msg[hidden]{display:none}
[data-passkey-login][data-unsupported="1"]{opacity:.55}
.rules-box{border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--soft);font-size:.9rem}
.rules-box summary{cursor:pointer;font-weight:700;display:flex;gap:8px;align-items:center}
.rules-text{margin-top:8px;color:var(--muted);line-height:1.6}
.card-soft{border:1px dashed var(--line);border-radius:18px;padding:16px;background:var(--soft)}
.face-box{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.face-top{display:flex;gap:12px;align-items:center}
.face-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);flex:none}
.face-stage{position:relative;width:200px;height:200px;margin:2px auto;border-radius:50%;overflow:hidden;background:#0b1a33;display:none}
.face-box.live .face-stage,.face-box.done .face-stage{display:block}
.face-stage video,.face-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face-stage video{transform:scaleX(-1)}
.face-stage canvas{display:none}.face-box.done canvas{display:block}.face-box.done video{display:none}
.face-ring{position:absolute;inset:0;border-radius:50%;border:4px solid var(--accent);animation:ringp 1.8s ease-in-out infinite;pointer-events:none}
.face-box.done .face-ring{border-color:var(--green);animation:none}
@keyframes ringp{0%,100%{opacity:.9}50%{opacity:.35}}
.center-row{justify-content:center}
.check-line{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--muted)}
.face-thumb{border-radius:50%;object-fit:cover;border:3px solid var(--line)}
.pk-nudge{align-items:center}.pk-nudge[hidden]{display:none}
.pk-nudge .btn{margin-left:auto}
hr.soft{border:0;border-top:1px solid var(--line);margin:14px 0}
.bar-mini{flex:1;height:8px;border-radius:99px;background:var(--soft);margin:0 10px;overflow:hidden}.bar-mini i{display:block;height:100%;background:linear-gradient(90deg,#f5b301,#fbbf24)}
.svc-rate{margin:0!important;flex:none!important}
.rate-card .rating-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.rate-card .rating-input input{position:absolute;opacity:0}
.rate-card .rating-input label{cursor:pointer;color:#cbd5e1;transition:transform .15s}
.rate-card .rating-input label svg{fill:none}
.rate-card .rating-input label:hover,.rate-card .rating-input label:hover~label,.rate-card .rating-input input:checked~label{color:#f5b301}
.rate-card .rating-input label:hover svg,.rate-card .rating-input label:hover~label svg,.rate-card .rating-input input:checked~label svg{fill:#f5b301}
.rate-card .rating-input label:hover{transform:scale(1.15)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #fx{display:none}.js .reveal{opacity:1;transform:none}
}

@media(max-width:520px){.brand span{display:none}.nav-right{gap:6px}}