:root{--title:'Cormorant Garamond','Playfair Display','Fraunces',serif;--bg:#241430;--bg-2:#2e1b3a;--panel:#3c2748;--panel-2:#4a3156;--panel-hover:#634470;--ink:#fffaf5;--ink-dim:#d6c2da;--ink-soft:#f5e7f1;--line:#916c95;--line-soft:#694b72;--accent:#ff82b2;--accent-deep:#e85f96;--accent-soft:#ffd2e2;--highlight:#b8a8ff;--diamond:#ffe4a8;--pink:#ff9fc8;--pink-soft:#ffd6e7;--gold:#f9d98f;--red:#ff7380;--red-deep:#5c1824;--yellow:#ffd76d;--green:#62df9c;
/* ── Premium layer tokens (v2 polish) ── */
--gold-deep:#d4a84e;--gold-bright:#ffe9b0;--rose-glow:rgba(255,130,178,.55);--gold-glow:rgba(249,217,143,.45);
--glass-bg:linear-gradient(155deg,rgba(255,250,243,.10) 0%,rgba(60,39,72,.82) 44%,rgba(43,28,57,.88) 100%);
--glass-border:rgba(255,255,255,.10);
--shadow-sm:0 2px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);
--shadow-md:0 14px 34px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06);
--shadow-lg:0 28px 64px rgba(0,0,0,.34),0 6px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.07);
--shadow-glow:0 0 28px -6px var(--rose-glow);
--ease-silk:cubic-bezier(.22,.61,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
::selection{background:linear-gradient(90deg,rgba(255,143,178,.45),rgba(249,217,143,.45));color:#fff;text-shadow:0 0 6px rgba(255,143,178,.5)}
::-moz-selection{background:rgba(255,143,178,.45);color:#fff}
/* Global custom scrollbars — slim & branded */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.02);border-radius:8px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,143,178,.4),rgba(249,217,143,.35));border-radius:8px;border:1px solid rgba(255,143,178,.18)}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(255,143,178,.7),rgba(249,217,143,.55))}
*{scrollbar-width:thin;scrollbar-color:rgba(255,143,178,.4) rgba(255,255,255,.02)}
/* Mobile touch feedback — gentle press effect on all interactive elements */
@media (hover:none) and (pointer:coarse){
  .nav-item:active,.sb-nav-btn:active,.edit-btn:active,.save-btn:active,.cancel-btn:active,.mt-btn:active,button:not(:disabled):active,a:active{transform:scale(.965);transition:transform .1s ease}
  .panel:active,.stat:active{transform:scale(.992) translateY(0);transition:transform .12s ease}
}
html,body{height:100%;background:linear-gradient(180deg,#392041 0%,#2b1b37 42%,#222640 100%);color:var(--ink);font-family:'Manrope',sans-serif;font-weight:300;letter-spacing:.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body{margin:0;min-height:100vh;min-height:100dvh}
body::before{content:'';position:fixed;inset:0;background:linear-gradient(135deg,rgba(255,130,178,.22) 0%,rgba(184,168,255,.15) 38%,transparent 72%),linear-gradient(315deg,rgba(249,217,143,.13) 0%,transparent 46%),linear-gradient(180deg,#42264b 0%,#2d1d3a 48%,#222842 100%);pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;z-index:1;opacity:.6}

.cam-box{display:inline-flex;align-items:center;justify-content:center;position:relative}
.cam-box svg{width:100%;height:100%;overflow:visible}
.cam-body-g{transform-origin:50% 50%;animation:camTilt 6s ease-in-out infinite}
@keyframes camTilt{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-1px)}}
.shutter-g{transform-origin:50% 55%;animation:shutterSpin 5s linear infinite}
@keyframes shutterSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.aperture-core{transform-origin:50% 55%;animation:aperturePulse 2.2s ease-in-out infinite}
@keyframes aperturePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.lens-ring{animation:lensGlow 3s ease-in-out infinite}
@keyframes lensGlow{0%,100%{stroke:var(--highlight);stroke-opacity:.6}50%{stroke:var(--accent);stroke-opacity:1}}
.rec-dot{animation:recBlink 1s steps(2,end) infinite}
@keyframes recBlink{0%,49%{opacity:1;filter:drop-shadow(0 0 4px var(--red))}50%,100%{opacity:.25;filter:none}}
.tally-ring{transform-origin:50% 55%;animation:tallyRing 2.4s ease-out infinite}
@keyframes tallyRing{0%{transform:scale(.9);stroke-opacity:.9}80%{transform:scale(1.35);stroke-opacity:0}100%{transform:scale(1.35);stroke-opacity:0}}
.flash-sweep{animation:flashSweep 4s ease-in-out infinite}
@keyframes flashSweep{0%,100%{opacity:0;transform:translateX(-8px)}40%,60%{opacity:.8;transform:translateX(0)}}
.sparkle-1{animation:sparkle 2.4s ease-in-out infinite;transform-origin:center}
.sparkle-2{animation:sparkle 2.4s ease-in-out .8s infinite;transform-origin:center}
.sparkle-3{animation:sparkle 2.4s ease-in-out 1.6s infinite;transform-origin:center}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.nav-rec{animation:recBlink 1.1s steps(2,end) infinite}
.nav-ring{transform-origin:center;animation:navRing 2.4s ease-out infinite}
@keyframes navRing{0%{transform:scale(.85);stroke-opacity:1}80%{transform:scale(1.4);stroke-opacity:0}100%{transform:scale(1.4);stroke-opacity:0}}

.dia-inline{display:inline-block;vertical-align:-0.2em;width:1.25em;height:1.25em;margin:0 .06em;position:relative;filter:drop-shadow(0 0 6px rgba(244,213,141,.35)) drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.dia-inline svg{width:100%;height:100%;overflow:visible}
.dia-body{transform-origin:50% 50%;animation:diaFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(244,213,141,.75))}
@keyframes diaFloat{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}
.dia-shine{animation:diaShine 2.5s ease-in-out infinite}
@keyframes diaShine{0%,100%{opacity:0}40%,60%{opacity:1}}
.dia-tw-1{animation:twk 1.8s ease-in-out infinite;transform-origin:center}
.dia-tw-2{animation:twk 1.8s ease-in-out .6s infinite;transform-origin:center}
.dia-tw-3{animation:twk 1.8s ease-in-out 1.2s infinite;transform-origin:center}
@keyframes twk{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}

.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;background:var(--bg);padding:20px}
.login-box{width:100%;max-width:440px;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);padding:44px 36px 36px;position:relative;border-radius:20px;box-shadow:0 50px 100px rgba(0,0,0,.5),0 0 0 1px rgba(242,125,158,.05)}
.login-box::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.login-brand{text-align:center;margin-bottom:28px}
.cam-login{width:80px;height:80px;margin:0 auto 16px}
.login-video-wrap{width:240px;height:240px;margin:0 auto 8px;border-radius:50%;overflow:hidden;position:relative;background:var(--bg-2);box-shadow:0 0 0 3px rgba(242,125,158,.2),0 0 80px rgba(242,125,158,.25),0 0 140px rgba(245,139,179,.15),0 20px 50px rgba(0,0,0,.5);border:2px solid rgba(242,125,158,.35)}
.login-video-wrap::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.12),transparent 55%);pointer-events:none;z-index:2}
.login-video-wrap::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(242,125,158,.55) 90deg,rgba(245,139,179,.4) 180deg,rgba(159,216,194,.35) 270deg,transparent 360deg);animation:videoGlowRing 6s linear infinite;z-index:-1}
@keyframes videoGlowRing{to{transform:rotate(360deg)}}
.login-video{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.login-brand .mark{font-size:10px;font-weight:600;letter-spacing:.4em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
.login-brand h1{font-family:var(--title);font-weight:300;font-size:clamp(28px,6.5vw,38px);letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.login-brand h1 em{font-style:italic;color:var(--accent);font-weight:400}
.field{margin-bottom:16px}
.field label{display:block;font-size:10px;letter-spacing:.25em;color:var(--ink-dim);text-transform:uppercase;margin-bottom:8px;font-weight:600}
.field input{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--ink);font-family:'Manrope',sans-serif;font-size:16px;font-weight:400;outline:none;transition:all .25s;-webkit-appearance:none}
.field input:focus{border-color:var(--accent);background:var(--panel)}
.field input::placeholder{color:#464a68}

.remember-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0 18px;gap:10px}
.remember-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.remember-check input{display:none}
.check-box{width:20px;height:20px;border-radius:6px;border:1px solid var(--line);background:var(--bg-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s}
.check-box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.4);transition:all .2s}
.remember-check input:checked + .check-box{background:var(--accent);border-color:var(--accent)}
.remember-check input:checked + .check-box svg{opacity:1;transform:scale(1)}
.remember-label{font-size:12px;color:var(--ink-soft);font-weight:500;letter-spacing:.03em}
.clear-saved{background:none;border:none;color:var(--ink-dim);font-family:'Manrope',sans-serif;font-size:11px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s;padding:4px 0}
.clear-saved:hover{color:var(--accent)}
.clear-saved.hidden{display:none}

.login-btn{width:100%;margin-top:4px;padding:16px;background:var(--accent);border:none;color:#fff;border-radius:10px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:all .25s}
.login-btn:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 10px 30px rgba(242,125,158,.3)}
.login-btn:active{transform:translateY(0)}
.login-btn.is-loading{pointer-events:none;opacity:.85}
.login-rose-spinner{display:inline-block;font-size:18px;animation:roseSpin .9s linear infinite;filter:drop-shadow(0 0 8px rgba(255,143,178,.6))}
@keyframes roseSpin{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}
.login-error{margin-top:14px;color:var(--red);font-size:13px;text-align:center;min-height:16px;font-family:var(--title);font-style:italic}

.app{display:none;min-height:100vh;position:relative;z-index:2}
.app.active{display:grid;grid-template-columns:260px 1fr}

.mobile-topbar{display:none;position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(61,41,72,.96) 0%,rgba(42,26,50,.9) 100%);border-bottom:1px solid var(--line-soft);padding:12px 16px;padding-top:calc(6px + env(safe-area-inset-top,0px));padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));align-items:center;justify-content:space-between;gap:12px;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);min-height:56px;box-shadow:0 4px 20px rgba(0,0,0,.18)}
.mobile-topbar .brand-left{display:flex;align-items:center;gap:11px;min-width:0;overflow:hidden;flex:1}
.cam-mobile-sm{width:26px;height:26px;flex-shrink:0;color:var(--accent);opacity:1;filter:drop-shadow(0 0 6px rgba(242,125,158,.25))}
.mobile-topbar h1{font-family:var(--title);font-size:18px;font-weight:400;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;color:var(--ink)}
.mobile-topbar h1 em{color:var(--accent);font-style:italic;margin-left:.14em;font-weight:500}
.mobile-topbar .dia-inline{display:inline-block;width:1em;height:1em;margin:0 .06em;vertical-align:-0.15em;position:relative;top:0;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(244,213,141,.4))}
.mobile-topbar .dia-inline svg{width:100%;height:100%;display:block}
.burger{width:40px;height:40px;background:rgba(31,40,80,.55);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.burger:active{background:var(--panel-hover);border-color:var(--accent);transform:scale(.94)}
.burger svg{width:18px;height:18px;color:var(--ink);stroke-width:1.8}

.sidebar{background:var(--bg-2);border-right:1px solid var(--line);padding:26px 0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:60}
.sidebar-brand{padding:0 24px 22px;border-bottom:1px solid var(--line-soft);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.cam-sidebar{width:44px;height:44px;flex-shrink:0}
.sidebar-brand .txt{min-width:0;flex:1}
.sidebar-brand h1{font-family:var(--title);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.4}
.sidebar-brand h1 em{font-style:italic;color:var(--accent);font-weight:700}
.sidebar-brand .tag{margin-top:4px;font-family:'Manrope',sans-serif;font-style:normal;font-size:10px;color:var(--ink-dim);display:flex;align-items:center;font-weight:700;letter-spacing:.25em;text-transform:uppercase}
.sidebar-close{display:none;position:absolute;top:16px;right:16px;width:34px;height:34px;background:var(--panel);border:1px solid var(--line);border-radius:8px;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.sidebar-close svg{width:14px;height:14px;color:var(--ink-soft)}
.nav-group{padding:0 14px;margin-bottom:28px;position:relative}
.nav-group:not(:last-child)::after{content:'';position:absolute;bottom:-14px;left:22px;right:22px;height:1px;background:linear-gradient(90deg,transparent,var(--line-soft) 20%,var(--line-soft) 80%,transparent);opacity:.5}
.sidebar-nav-scroll{flex:1;min-height:0;overflow-y:auto}
.nav-group .title{font-size:14px;font-weight:700;letter-spacing:-.005em;color:var(--ink);text-transform:none;padding:0 12px 14px}
.nav-group .ng-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;transition:background .15s ease;margin:0 -4px 6px;position:relative}
.nav-group .ng-toggle:hover{background:rgba(255,255,255,.03)}
.nav-group .ng-toggle:active{transform:scale(.98)}
.nav-group .ng-chevron{width:14px;height:14px;color:var(--ink-dim);margin-left:auto;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);opacity:.6}
.nav-group.is-collapsed .ng-chevron{transform:rotate(-90deg)}
.nav-group .ng-toggle:hover .ng-chevron{opacity:1;color:var(--accent)}
.nav-group .ng-body{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease,margin-top .3s ease;max-height:600px;opacity:1}
.nav-group.is-collapsed .ng-body{max-height:0;opacity:0;pointer-events:none}
.nav-group.is-collapsed{margin-bottom:14px}
.nav-group.is-collapsed:not(:last-child)::after{bottom:-7px}
.nav-group .title-with-icon{display:flex;align-items:center;gap:10px}
.nav-group .title-with-icon .title-cam{width:18px;height:18px;opacity:.85;flex-shrink:0;color:var(--ink-soft)}
.nav-group .title-with-icon .cam-nav-title{width:22px;height:22px;flex-shrink:0;color:var(--accent);margin-top:-1px}
.nav-group .title-with-icon .workers-anim{width:19px;height:19px;flex-shrink:0;color:var(--ink-soft);overflow:visible}
.workers-anim .w-person-1{transform-origin:9px 8px;animation:workerNod 3s ease-in-out infinite}
.workers-anim .w-person-2{transform-origin:17px 9.5px;animation:workerNod 3s ease-in-out 1.5s infinite}
@keyframes workerNod{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-.5px)}}
.nav-group .title-with-emoji{display:flex;align-items:center;gap:10px}
.nav-group .title-with-emoji .title-emoji{font-size:17px;line-height:1;flex-shrink:0}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--ink-soft);cursor:pointer;border-radius:8px;transition:all .18s ease;font-size:14px;font-weight:600;margin-bottom:1px;position:relative}
.nav-item:hover{background:var(--panel);color:var(--ink);transform:translateX(2px)}
.nav-item.active{background:var(--panel-hover);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 2px 8px rgba(0,0,0,.15)}
.nav-item.active::before{content:'';position:absolute;left:-2px;top:10px;bottom:10px;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent-deep));border-radius:2px;box-shadow:0 0 8px rgba(242,125,158,.6)}
.nav-item .icon{width:15px;height:15px;flex-shrink:0;opacity:.8}
.nav-item.model-row{padding:13px 14px 12px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(255,250,243,.055),rgba(255,143,178,.045));border-radius:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:all .35s cubic-bezier(.4,0,.2,1)}
.nav-item.model-row:hover{transform:none;border-color:rgba(255,143,178,.3);background:linear-gradient(135deg,rgba(255,143,178,.12),rgba(143,230,208,.05))}
.nav-item.model-row.active{background:linear-gradient(135deg,rgba(255,143,178,.26),rgba(255,225,163,.10));border-color:rgba(255,143,178,.42);box-shadow:0 10px 28px rgba(0,0,0,.18),0 0 0 1px rgba(249,217,143,.22),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-item.model-row.active::before{left:-1px;top:12px;bottom:12px;width:2px;background:linear-gradient(180deg,var(--accent),var(--gold));box-shadow:0 0 10px rgba(255,143,178,.45)}
.nav-item.model-row .num{font-family:'Manrope',sans-serif;font-size:9px;color:var(--accent-soft);margin-left:auto;font-style:normal;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border:1px solid rgba(255,143,178,.28);border-radius:999px;background:rgba(255,143,178,.06)}
.nav-item.model-row.active .num{color:var(--ink);border-color:rgba(255,225,163,.36);background:rgba(255,225,163,.08)}
.sidebar-footer{margin-top:auto;padding:18px 18px 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-soft)}
.user-chip{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:10px;background:var(--panel);border-radius:10px}
.user-chip .avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;overflow:hidden;flex-shrink:0;border:1.5px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.3);background-size:cover;background-position:center center;background-repeat:no-repeat;text-indent:-9999px}.user-chip .avatar.has-photo{background-image:none}
.user-chip .meta{flex:1;min-width:0}
.user-chip .name{font-size:14px;font-weight:600;line-height:1.2}
.user-chip .role{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:2px}
.logout{width:100%;background:transparent;border:1px solid var(--line);color:var(--ink-dim);padding:10px;border-radius:10px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .25s}
.logout:hover{border-color:var(--accent);color:var(--accent)}
.sidebar-brand-footer{margin-top:16px;padding-top:14px;text-align:center;position:relative}
.sbf-line{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin-bottom:12px}
.sbf-text{font-family:var(--title);font-weight:400;font-size:13px;color:var(--ink-soft);letter-spacing:.01em;line-height:1.5;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px}
.sbf-text em{font-style:italic;color:var(--accent);font-weight:400}
/* Brand logo: circular image showing the Sin & Roses logo */
.sidebar-brand{justify-content:center;padding:8px 24px 22px}
.brand-logo-circle{width:140px;height:140px;border-radius:50%;display:block;object-fit:cover;box-shadow:0 0 0 2px rgba(249,217,143,.45),0 0 0 4px rgba(255,143,178,.18),0 12px 32px rgba(0,0,0,.4),0 0 24px rgba(255,143,178,.25);transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1);animation:logoBreathe 5s ease-in-out infinite}
.brand-logo-circle:hover{transform:scale(1.03);box-shadow:0 0 0 2px rgba(249,217,143,.7),0 0 0 5px rgba(255,143,178,.28),0 16px 40px rgba(0,0,0,.45),0 0 36px rgba(255,143,178,.4)}
@keyframes logoBreathe{0%,100%{box-shadow:0 0 0 2px rgba(249,217,143,.45),0 0 0 4px rgba(255,143,178,.18),0 12px 32px rgba(0,0,0,.4),0 0 20px rgba(255,143,178,.18)}50%{box-shadow:0 0 0 2px rgba(249,217,143,.6),0 0 0 4px rgba(255,143,178,.28),0 12px 32px rgba(0,0,0,.4),0 0 32px rgba(255,143,178,.32)}}
.nav-rose-icon{font-size:18px;line-height:1;display:inline-block;flex-shrink:0;margin-top:-1px;filter:drop-shadow(0 0 4px rgba(255,143,178,.45));animation:roseWind 3.5s ease-in-out infinite;animation-delay:.4s;transform-origin:bottom center}
.rose-flank{display:inline-block;font-size:.85em;margin:0 .45em;filter:drop-shadow(0 0 4px rgba(255,143,178,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.4));animation:roseWind 3.5s ease-in-out infinite;-webkit-text-fill-color:initial;color:initial;background:none;transform-origin:bottom center}
.rose-flank-left{animation-delay:0s}
.rose-flank-right{animation-delay:1.75s}
@keyframes roseWind{0%{transform:rotate(-8deg) translateX(-1px)}25%{transform:rotate(2deg) translateX(0)}50%{transform:rotate(8deg) translateX(1px)}75%{transform:rotate(-2deg) translateX(0)}100%{transform:rotate(-8deg) translateX(-1px)}}
.sbf-sub{margin-top:8px;font-size:9px;font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:var(--ink-dim);display:flex;align-items:center;justify-content:center;gap:6px}
.sbf-diamond{font-size:11px;display:inline-block;animation:sbfDiaPulse 3s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(249,217,143,.65));color:var(--gold);font-weight:700}
@keyframes sbfDiaPulse{0%,100%{transform:scale(1);opacity:.75;filter:drop-shadow(0 0 3px rgba(249,217,143,.4))}50%{transform:scale(1.18);opacity:1;filter:drop-shadow(0 0 8px rgba(249,217,143,.85))}}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:55}

.content{padding:40px 44px 80px;min-width:0}
.view{display:none}
.view.active{display:block;animation:fadeUp .5s cubic-bezier(.4,0,.2,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.view-header{margin-bottom:36px}
.view-header .kicker{font-size:11px;font-weight:700;letter-spacing:.3em;background:linear-gradient(90deg,var(--accent) 0%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent);text-transform:uppercase;margin-bottom:12px;display:inline-block}
.view-header .kicker-with-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(242,125,158,.08);border:1px solid rgba(242,125,158,.2);border-radius:999px;-webkit-background-clip:border-box;background-clip:border-box}
.view-header .kicker-with-badge > span{background:linear-gradient(90deg,var(--accent) 0%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.view-header .kicker-with-badge .kicker-dot{opacity:.6;-webkit-text-fill-color:var(--ink-dim);margin:0 -2px}
.view-header .kicker-with-badge .kicker-num{font-family:var(--title);font-style:italic;letter-spacing:.08em;font-weight:500}
.view-header h2{font-family:var(--title);font-weight:400;font-size:clamp(36px,6vw,72px);line-height:1.08;letter-spacing:-.02em;display:block}
.view-header h2.h2-flex{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-top:20px}
.view-header h2.h2-flex .cam-title{margin-bottom:4px;margin-left:4px}
.view-header h2 em{font-style:italic;color:var(--accent)}
.view-header .sub{margin-top:12px;font-family:var(--title);font-style:italic;font-size:16px;color:var(--ink-dim);line-height:1.5}
.view-header .sub-with-diamond{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.view-header .sub-with-diamond .sub-sep{color:var(--accent);opacity:.6;font-style:normal;font-weight:600;margin:0 2px}

/* Alyssa profile — badge top-right, name as hero */
.view-header-alyssa{position:relative;padding-top:8px;text-align:center}
.view-header-alyssa::before{content:'';position:absolute;left:50%;top:50px;width:min(620px,80%);height:300px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,143,178,.18) 0%,rgba(249,217,143,.08) 35%,transparent 70%);pointer-events:none;z-index:0;filter:blur(8px);animation:alyssaSpotlight 6s ease-in-out infinite}
@keyframes alyssaSpotlight{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.04)}}
.profile-badge-top{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(242,125,158,.08);border:1px solid rgba(242,125,158,.22);border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;z-index:2}
.profile-badge-top > span{background:linear-gradient(90deg,var(--accent) 0%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.profile-badge-top .kicker-dot{-webkit-text-fill-color:var(--ink-dim);opacity:.7;margin:0 -2px}
.profile-badge-top .kicker-num{font-family:var(--title);font-style:italic;letter-spacing:.08em;font-weight:500}
.view-header-alyssa .alyssa-hero{text-align:center;margin-top:28px;display:flex;justify-content:center;position:relative;z-index:1}
.view-header-alyssa .alyssa-hero .foxx-name{text-align:center}
#view-alyssa.active .alyssa-hero{animation:heroReveal 1.1s cubic-bezier(.22,.61,.36,1) both;animation-delay:.15s}
#view-alyssa.active .alyssa-hero .foxx-name{animation:heroNameShimmer 2.5s ease-in-out .8s}
@keyframes heroReveal{0%{opacity:0;transform:translateY(20px) scale(.92);letter-spacing:-.04em;filter:blur(8px)}50%{filter:blur(2px)}100%{opacity:1;transform:translateY(0) scale(1);letter-spacing:.005em;filter:blur(0)}}
@keyframes heroNameShimmer{0%,100%{filter:drop-shadow(0 0 12px rgba(255,143,178,.2))}50%{filter:drop-shadow(0 0 22px rgba(255,143,178,.5)) drop-shadow(0 0 8px rgba(249,217,143,.3))}}
.view-header-alyssa::after{content:'🌹  ·  🌹';display:block;text-align:center;margin:18px auto 0;font-size:11px;letter-spacing:1.2em;color:var(--gold);opacity:.85;position:relative;z-index:1;background:linear-gradient(90deg,transparent 0%,rgba(249,217,143,.18) 35%,rgba(249,217,143,.32) 50%,rgba(249,217,143,.18) 65%,transparent 100%);padding:10px 0;width:min(420px,70%);margin-left:auto;margin-right:auto;border-radius:999px}
.cam-title{width:78px;height:78px;flex-shrink:0}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.panels.single{grid-template-columns:1fr;max-width:860px}
.view.active{animation:viewEnter .55s cubic-bezier(.22,.61,.36,1) both}
.view.active .panel{animation:panelIn .65s cubic-bezier(.22,.61,.36,1) both}
.view.active .panel:nth-child(1){animation-delay:.08s}
.view.active .panel:nth-child(2){animation-delay:.18s}
.view.active .panel:nth-child(3){animation-delay:.28s}
.view.active .panel:nth-child(4){animation-delay:.38s}
.view.active .stat{animation:panelIn .65s cubic-bezier(.22,.61,.36,1) both}
.view.active .stat:nth-child(1){animation-delay:.08s}
.view.active .stat:nth-child(2){animation-delay:.18s}
.view.active .stat:nth-child(3){animation-delay:.28s}
.view.active .view-header{animation:headerIn .7s cubic-bezier(.22,.61,.36,1) both}
@keyframes viewEnter{from{opacity:0}to{opacity:1}}
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(2px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes headerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.view.active,.view.active .panel,.view.active .stat,.view.active .view-header{animation:none !important}}

.panel{background:linear-gradient(150deg,rgba(255,250,243,.075) 0%,rgba(50,32,59,.96) 46%,rgba(42,31,58,.96) 100%);border:1px solid rgba(255,143,178,.18);border-radius:18px;position:relative;display:flex;flex-direction:column;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 18px 44px rgba(0,0,0,.16)}
.panel:hover{border-color:rgba(255,143,178,.34);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 54px rgba(0,0,0,.2)}
.panel.closed{display:none}
.panel-chrome{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;background:linear-gradient(90deg,rgba(255,250,243,.055),rgba(255,143,178,.04));border-bottom:1px solid rgba(255,255,255,.075)}
.traffic{width:14px;height:14px;border-radius:50%;border:none;padding:0;position:relative;transition:transform .12s;flex-shrink:0}

body:not(.admin) .traffic{display:none}

body.admin .traffic.red{cursor:pointer;background:var(--red)}
body.admin .traffic.red:active{transform:scale(.9)}
body.admin .traffic.red:hover::after,body.admin .traffic.red:active::after{content:'×';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--red-deep);font-size:14px;font-weight:700;line-height:1}
body.admin .traffic.yellow{background:var(--yellow);cursor:default;opacity:.5}
body.admin .traffic.green{background:var(--green);cursor:default;opacity:.5}
body.admin #view-alyssa .traffic.yellow,body.admin #view-alyssa .traffic.green{display:none}
body.admin #view-alyssa .traffic.red{order:2;margin-left:auto;width:28px;height:28px;border-radius:10px;background:rgba(255,115,128,.1);border:1px solid rgba(255,115,128,.24)}
body.admin #view-alyssa .traffic.red::after{content:'×';position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);color:var(--ink-dim);font-size:17px;font-weight:800;line-height:1}
body.admin #view-alyssa .traffic.red:hover{background:rgba(255,115,128,.18);border-color:rgba(255,115,128,.45);transform:none}
body.admin #view-alyssa .traffic.red:hover::after{color:var(--red)}
body.admin #view-alyssa .panel-title{order:1;flex:0 1 auto}

.panel-title{flex:1;text-align:left;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
body.admin .panel-title{margin-right:0}
.panel-body{padding:20px 22px 20px;flex:1;display:flex;flex-direction:column}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.panel-body h4{font-family:var(--title);font-weight:600;font-size:20px;letter-spacing:-.01em}
.panel-body h4 em{font-style:italic;color:var(--accent);font-weight:400}
.panel-timestamp{font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;opacity:0;transition:opacity .3s;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.panel-timestamp.visible{opacity:1}
.panel-body .accent{width:34px;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:999px;margin:2px 0 14px}
.panel-content{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.7;color:var(--ink-soft);font-weight:500;white-space:pre-wrap;flex:1;word-wrap:break-word}
.panel-content.placeholder{color:var(--ink-dim);font-style:italic}

.edit-controls{display:none;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);gap:10px;flex-wrap:wrap;align-items:center}
body.admin .edit-controls{display:flex}
.edit-btn,.save-btn,.cancel-btn{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12);color:var(--ink-soft);border-radius:10px;padding:9px 16px;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:all .25s;font-family:'Manrope',sans-serif}
.edit-btn:hover,.save-btn:hover{border-color:var(--accent);color:var(--accent)}
.cancel-btn:hover{border-color:var(--red);color:var(--red)}
.esc-hint{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);margin-left:auto;display:none}
.esc-hint kbd{display:inline-block;padding:2px 6px;border:1px solid var(--line);border-radius:4px;background:var(--bg);font-family:'Manrope',sans-serif;font-size:9px;margin-right:4px}
.panel.editing .esc-hint{display:inline-block}
.panel textarea{width:100%;flex:1;min-height:160px;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:14px;font-family:'Manrope',sans-serif;font-size:14px;line-height:1.6;resize:vertical;outline:none;transition:border-color .25s;-webkit-appearance:none}
.panel textarea:focus{border-color:var(--accent)}

/* Alyssa model profile cards: cleaner shape for viewers */
body:not(.admin) #view-alyssa .panels{gap:16px}
body:not(.admin) #view-alyssa .panel{display:block;min-height:142px;padding:20px 22px;border-radius:18px;background:linear-gradient(145deg,rgba(255,250,243,.08),rgba(50,32,59,.96) 52%,rgba(61,41,72,.9));border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 38px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.05)}
body:not(.admin) #view-alyssa .panel:hover{transform:none;border-color:rgba(255,143,178,.24);box-shadow:0 18px 42px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06)}
body:not(.admin) #view-alyssa .panel::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--accent),rgba(159,216,194,.35),transparent);opacity:.72}
body:not(.admin) #view-alyssa .panel::after{content:'';position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
body:not(.admin) #view-alyssa .panel-chrome{display:none}
body:not(.admin) #view-alyssa .panel-body{padding:0;min-height:102px}
body:not(.admin) #view-alyssa .panel-heading{align-items:center;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.055)}
body:not(.admin) #view-alyssa .panel-body h4{font-size:21px;line-height:1.1}
body:not(.admin) #view-alyssa .panel-timestamp.visible{opacity:1;background:rgba(255,255,255,.035);border:1px solid var(--line-soft);padding:5px 8px;border-radius:999px;font-size:9px}
body:not(.admin) #view-alyssa .panel-body .accent{display:none}
body:not(.admin) #view-alyssa .panel-content{font-size:14px;line-height:1.72;color:var(--ink-soft)}
body:not(.admin) #view-alyssa .panel-content.placeholder{font-style:normal;color:var(--ink-dim)}
@media(max-width:520px){
  body:not(.admin) #view-alyssa .panel{padding:18px 18px;border-radius:16px}
  body:not(.admin) #view-alyssa .panel::before{top:16px;bottom:16px;width:3px}
  body:not(.admin) #view-alyssa .panel::after{left:18px;right:18px;top:0;height:1px}
  body:not(.admin) #view-alyssa .panel-body h4{font-size:20px}
}

.viewer-notice{margin-bottom:20px;padding:12px 16px;background:rgba(159,216,194,.08);border:1px solid rgba(159,216,194,.25);border-radius:10px;font-size:13px;color:var(--ink-soft);align-items:center;gap:10px}
body.admin .viewer-notice{display:none}
body:not(.admin) .viewer-notice{display:flex}
.viewer-notice svg{width:16px;height:16px;color:var(--highlight);flex-shrink:0}

.restore-bar{display:none;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);gap:10px;flex-wrap:wrap;align-items:center}
body:not(.admin) .restore-bar{display:none !important}
.trophy-emoji{display:inline-block}

/* ============= Role-based visibility ============= */
/* Models see: Camera Models + Ranks only (no Overview/Dashboard, no Workers, no Analytics) */
body.role-model .overview-group{display:none !important}
body.role-model .workers-group{display:none !important}
/* Workers see: Workers only (no Camera Models, no Ranks, no Dashboard, no Analytics) */
body.role-worker .overview-group{display:none !important}
body.role-worker .camera-models-group{display:none !important}
body.role-worker .ranks-sidebar{display:none !important}
body.role-worker .mt-btn{display:none !important}

/* ================= ANALYTICS VIEW ================= */
.an-top-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.an-range-tabs{display:flex;gap:6px;border:1px solid var(--line-soft);border-radius:12px;padding:4px;background:var(--bg-2);width:fit-content;flex-wrap:wrap;margin-bottom:0}
.an-range-btn{background:transparent;border:none;color:var(--ink-dim);padding:10px 18px;border-radius:8px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.an-range-btn:hover{color:var(--ink-soft)}
.an-range-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 2px 10px rgba(242,125,158,.3)}

.an-download-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--panel-hover) 0%,var(--panel-2) 100%);border:1px solid var(--line);color:var(--ink-soft);padding:12px 18px;border-radius:12px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:all .22s;white-space:nowrap}
.an-download-btn:hover{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);color:#fff;border-color:var(--accent);box-shadow:0 4px 14px rgba(242,125,158,.3);transform:translateY(-1px)}
.an-download-btn:active{transform:translateY(0)}
.an-download-btn svg{width:16px;height:16px}
.an-download-btn.is-loading{opacity:.6;pointer-events:none}
.an-download-btn.is-loading svg{animation:spinDl 1s linear infinite}
@keyframes spinDl{to{transform:rotate(360deg)}}

.an-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.an-stat{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:14px;padding:18px 20px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}
.an-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}
.an-stat-label{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.an-stat-value{font-family:var(--title);font-weight:500;font-size:28px;color:var(--ink);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.an-stat-sub{font-family:var(--title);font-style:italic;font-size:12px;color:var(--ink-dim);margin-top:6px}

.an-panel{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:20px;position:relative}
.an-panel h4{font-family:var(--title);font-weight:400;font-size:22px;letter-spacing:-.01em}
.an-panel h4 em{font-style:italic;color:var(--accent)}
.an-panel-meta{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}

/* Chart */
.an-chart-wrap{margin-top:18px;position:relative}
.an-chart{display:flex;align-items:flex-end;gap:4px;height:180px;padding:12px 0 4px;border-bottom:1px solid var(--line-soft);position:relative}
.an-chart::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-soft);opacity:.4}
.an-chart::after{content:'';position:absolute;left:0;right:0;top:25%;height:1px;background:var(--line-soft);opacity:.2}
.an-bar{flex:1;min-width:3px;position:relative;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);border-radius:4px 4px 0 0;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;min-height:2px}
.an-bar:hover{filter:brightness(1.2);transform:translateY(-2px)}
.an-bar::after{content:attr(data-value);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--panel-hover);border:1px solid var(--line);color:var(--ink);padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;font-variant-numeric:tabular-nums;z-index:5}
.an-bar:hover::after{opacity:1}
.an-bar.an-bar-best{background:linear-gradient(180deg,var(--gold) 0%,#b88f45 100%);box-shadow:0 0 12px rgba(231,193,111,.3)}
.an-bar.an-bar-empty{background:var(--line-soft);opacity:.5}
.an-chart-xlabels{display:flex;gap:4px;margin-top:6px;font-size:9px;color:var(--ink-dim);letter-spacing:.04em;font-family:'Manrope',sans-serif}
.an-chart-xlabels span{flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.an-chart-empty{text-align:center;padding:40px 20px;color:var(--ink-dim);font-family:var(--title);font-style:italic;font-size:14px}

/* Records */
.an-records-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.an-record{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;transition:all .25s}
.an-record:hover{border-color:var(--line);transform:translateY(-2px)}
.an-record-gold{background:linear-gradient(135deg,rgba(231,193,111,.08) 0%,var(--bg-2) 100%);border-color:rgba(231,193,111,.25)}
.an-record-gold::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.an-record-icon{font-size:22px;margin-bottom:8px;line-height:1}
.an-record-label{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
.an-record-value{font-family:var(--title);font-weight:500;font-size:22px;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.an-record-meta{font-family:var(--title);font-style:italic;font-size:11px;color:var(--ink-dim);margin-top:6px}

/* ================= MODEL RANKING MINI ================= */
.ranks-sidebar .title-with-icon{display:flex;align-items:center;gap:10px}
.ranks-title-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;line-height:1;filter:drop-shadow(0 0 8px rgba(231,193,111,.25))}
.ranks-title-icon::before{content:none}
.ranks-podium-sidebar{display:flex;flex-direction:column;gap:8px;padding:6px 2px 3px}
.rsp-empty{text-align:center;font-size:11px;color:var(--ink-dim);font-style:italic;padding:12px 0;font-family:var(--title)}
.rsp-row{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:transparent;border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease;position:relative;overflow:hidden}
.rsp-row::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--line-soft);opacity:.8}
.rsp-row:hover{background:rgba(255,255,255,.04);border-color:var(--line-soft)}
.rsp-medal{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:0;color:transparent;background:transparent;border:0;box-shadow:none;position:relative}
.rsp-medal::before,.rsp-medal::after{content:'';position:absolute;bottom:6px;width:4px;border-radius:999px;background:var(--line);opacity:.75}
.rsp-medal::before{left:7px;height:10px}
.rsp-medal::after{left:15px;height:18px}
.rsp-row-1 .rsp-medal{background:transparent;border:0}
.rsp-row-1 .rsp-medal::before{height:12px;background:var(--accent);opacity:.7}
.rsp-row-1 .rsp-medal::after{height:20px;background:var(--accent-soft);opacity:1;box-shadow:8px 5px 0 rgba(242,125,158,.35)}
.rsp-row-2 .rsp-medal::before{background:var(--highlight);opacity:.55}
.rsp-row-2 .rsp-medal::after{background:var(--highlight);opacity:.9}
.rsp-row-3 .rsp-medal::before{background:var(--gold);opacity:.45}
.rsp-row-3 .rsp-medal::after{background:var(--gold);opacity:.75}
.rsp-row-1{background:rgba(242,125,158,.055)}
.rsp-row-1::before{background:var(--accent)}
.rsp-row-2::before{background:var(--highlight)}
.rsp-row-3::before{background:var(--gold)}
.rsp-name{font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700;color:var(--ink-soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}
.rsp-row-1 .rsp-name{color:var(--ink);font-weight:800}
.rsp-name .foxx-name{font-size:12.5px;padding-top:.52em}
.rsp-tokens{font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.restore-bar.visible{display:flex}
.restore-bar .label{font-size:10px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-dim);margin-right:4px}
.restore-btn{background:transparent;border:1px solid var(--line);color:var(--ink-soft);border-radius:8px;padding:7px 14px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .25s;font-family:'Manrope',sans-serif}
.restore-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ============ LIVE STATUS PANEL (compact) ============ */
.live-panel{display:inline-flex;align-items:center;gap:14px;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:14px;padding:14px 22px;margin-bottom:28px;position:relative;transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 4px 18px rgba(0,0,0,.12);min-width:280px;max-width:100%}
.live-panel.is-live{border-color:rgba(84,217,141,.3);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 4px 18px rgba(0,0,0,.12),0 0 0 1px rgba(84,217,141,.08),0 0 28px rgba(84,217,141,.1)}
.lp-dot-wrap{position:relative;width:11px;height:11px;flex-shrink:0;align-self:center}
.lp-dot{width:11px;height:11px;border-radius:50%;background:var(--ink-dim);transition:all .4s ease;position:relative}
.live-panel.is-live .lp-dot{background:radial-gradient(circle at 30% 30%,#8ff0bb,var(--green));box-shadow:0 0 10px rgba(84,217,141,.7)}
.live-panel.is-live .lp-dot::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(84,217,141,.55);animation:lpDotPing 1.8s ease-out infinite}
@keyframes lpDotPing{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(2)}}
.lp-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.lp-state{font-family:var(--title);font-weight:500;font-size:18px;line-height:1.1;letter-spacing:-.01em;color:var(--ink-dim);font-style:italic}
.live-panel.is-live .lp-state{color:var(--green)}
.lp-models-list{font-family:var(--title);font-style:italic;font-size:15px;color:var(--ink-soft);line-height:1.2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.lp-models-list .foxx-name{font-weight:500;font-size:16px}
.lp-models-list .model-comma{color:var(--line);font-style:normal;opacity:.8}
.live-panel:not(.is-live) .lp-models-list{color:var(--ink-dim);font-size:13px}
.lp-reset{display:none;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);color:var(--ink-dim);padding:6px 12px;border-radius:8px;font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .2s;flex-shrink:0;margin-left:14px}
.live-panel.is-live .lp-reset{display:inline-flex}
.lp-reset:hover{border-color:var(--red);color:var(--red);background:rgba(255,107,114,.08)}
.lp-reset svg{width:12px;height:12px}

/* ============ LIVE FEED VIEW ============ */
/* Live Feed view: iframe fills the main content area with border radius and nice framing */
.view-livefeed-root{margin:0;min-height:0}
.view-livefeed-root.active{display:flex;flex-direction:column;min-height:0}
.lf-iframe-wrap{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-2);box-shadow:0 10px 30px rgba(0,0,0,.25);height:calc(100dvh - 120px);min-height:0;max-height:calc(100dvh - 120px)}
.lf-iframe-wrap iframe{width:100%;height:100%;border:0;display:block;background:var(--bg-2)}
body.livefeed-active .content{height:100vh;height:100dvh;padding:0;overflow:hidden}
body.livefeed-active .view-livefeed-root{height:100%;min-height:0}
body.livefeed-active .lf-iframe-wrap{height:100%;max-height:none;min-height:0;flex:1;border:0;border-radius:0;box-shadow:none}
@media(max-width:900px){
  body.livefeed-active .content{height:calc(100dvh - 56px);padding:0}
  body.livefeed-active .view-livefeed-root{margin:0}
  body.livefeed-active .lf-iframe-wrap{height:100%;max-height:none;border-radius:0;border-left:0;border-right:0}
}
@media(max-width:640px){
  body.livefeed-active .content{height:calc(100dvh - 52px);padding:0}
  body.livefeed-active .view-livefeed-root{margin:0}
  body.livefeed-active .lf-iframe-wrap{height:100%;max-height:none;border-radius:0}
}
.lf-header-status{display:flex;align-items:center;gap:10px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-left:auto}
.lf-conn-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-dim);flex-shrink:0;transition:background .3s}
.lf-conn-dot.is-live{background:var(--green);box-shadow:0 0 0 0 rgba(84,217,141,.6);animation:lf-pulse 2s infinite}
.lf-conn-dot.is-error{background:var(--red)}
@keyframes lf-pulse{0%{box-shadow:0 0 0 0 rgba(255,143,178,.55)}70%{box-shadow:0 0 0 9px rgba(255,143,178,0)}100%{box-shadow:0 0 0 0 rgba(255,143,178,0)}}
.lf-conn-label{color:var(--ink)}
.lf-conn-sep{color:var(--ink-dim);opacity:.5}
.lf-nav-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:auto;box-shadow:0 0 8px rgba(255,143,178,.7);animation:lf-pulse 2s infinite}

/* KPI cards */
.lf-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.lf-kpi{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:14px;padding:18px 22px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}
.lf-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.lf-kpi:hover{transform:translateY(-2px);border-color:rgba(231,193,111,.3)}
.lf-kpi-label{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.lf-kpi-value{font-family:var(--title);font-size:38px;font-weight:500;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.lf-kpi-sub{font-size:11px;color:var(--ink-dim);margin-top:8px;font-family:'Manrope',sans-serif}

/* Controls */
.lf-controls{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px;padding:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.lf-filter-group{display:flex;flex-direction:column;gap:6px}
.lf-filter-label{font-family:'Manrope',sans-serif;font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.lf-select{background:var(--bg-2);border:1px solid var(--line-soft);color:var(--ink);padding:9px 14px;border-radius:8px;font-family:'Manrope',sans-serif;font-size:13px;cursor:pointer;min-width:180px;outline:none;transition:all .2s}
.lf-select:hover{border-color:var(--accent)}
.lf-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,125,158,.12)}
.lf-range-tabs{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:9px;padding:3px}
.lf-range-btn{background:transparent;border:none;color:var(--ink-dim);font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:6px;cursor:pointer;transition:all .2s}
.lf-range-btn:hover{color:var(--ink-soft)}
.lf-range-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff}
.lf-refresh-btn{margin-left:auto;background:var(--bg-2);border:1px solid var(--line-soft);color:var(--ink-soft);width:42px;height:42px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.lf-refresh-btn:hover{border-color:var(--gold);color:var(--gold);transform:rotate(45deg)}
.lf-refresh-btn svg{width:18px;height:18px}

/* Restore button */
.lf-restore-btn{background:var(--bg-2);border:1px solid var(--line-soft);color:var(--ink-soft);padding:0 16px;height:42px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:all .2s}
.lf-restore-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(242,125,158,.05)}
.lf-restore-btn svg{width:16px;height:16px}

/* Restore modal */
.lf-restore-modal{display:none;position:fixed;inset:0;background:rgba(14,18,52,.85);backdrop-filter:blur(8px);z-index:800;align-items:center;justify-content:center;padding:20px}
.lf-restore-modal.is-open{display:flex}
.lf-restore-box{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:16px;max-width:560px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:lf-slide-in .3s cubic-bezier(.2,.9,.3,1)}
.lf-restore-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line-soft)}
.lf-restore-header h3{margin:0;font-family:var(--title);font-size:22px;font-weight:400;color:var(--ink);font-style:italic}
.lf-restore-close{background:transparent;border:none;color:var(--ink-dim);font-size:28px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .15s;padding:0}
.lf-restore-close:hover{background:var(--bg-2);color:var(--ink)}
.lf-restore-body{padding:24px;min-height:120px}

/* Restore states */
.lf-restore-intro{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-bottom:16px}
.lf-restore-intro strong{color:var(--gold);font-family:var(--title);font-style:italic}
.lf-restore-info{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px;margin-bottom:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px}
.lf-restore-info-row{display:flex;flex-direction:column;gap:3px}
.lf-restore-info-label{color:var(--ink-dim);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.lf-restore-info-value{color:var(--ink);font-family:var(--title);font-size:18px;font-style:italic;font-variant-numeric:tabular-nums}
.lf-restore-warn{background:rgba(231,193,111,.08);border:1px solid rgba(231,193,111,.3);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--gold);line-height:1.5;margin-bottom:16px}
.lf-restore-actions{display:flex;gap:10px;justify-content:flex-end}
.lf-restore-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border:none;padding:12px 22px;border-radius:10px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.lf-restore-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(242,125,158,.3)}
.lf-restore-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.lf-restore-btn-secondary{background:transparent;border:1px solid var(--line);color:var(--ink-soft);padding:12px 22px;border-radius:10px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.lf-restore-btn-secondary:hover{border-color:var(--accent);color:var(--accent)}

/* Progress bar */
.lf-progress-wrap{margin-top:14px}
.lf-progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);margin-bottom:8px;font-family:'Manrope',sans-serif}
.lf-progress-bar{height:10px;background:var(--bg-2);border-radius:5px;overflow:hidden;border:1px solid var(--line-soft)}
.lf-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));border-radius:4px;transition:width .3s;width:0%}
.lf-progress-stats{margin-top:10px;font-size:11px;color:var(--ink-dim);display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.lf-progress-stats strong{color:var(--ink);font-family:var(--title);font-style:italic}
.lf-result-success{background:rgba(84,217,141,.1);border:1px solid rgba(84,217,141,.35);border-radius:10px;padding:18px 20px;text-align:center;color:var(--green)}
.lf-result-success h4{margin:0 0 8px;font-family:var(--title);font-size:22px;font-style:italic;font-weight:400}
.lf-result-error{background:rgba(255,107,114,.1);border:1px solid rgba(255,107,114,.35);border-radius:10px;padding:16px 18px;color:var(--red);font-size:13px}

.lf-empty{padding:32px 20px;text-align:center;color:var(--ink-dim);font-size:12px;font-family:'Manrope',sans-serif;font-style:italic}

/* Main grid */
.lf-main-grid{display:grid;grid-template-columns:1fr 360px;gap:14px;margin-bottom:14px}
@media(max-width:1100px){.lf-main-grid{grid-template-columns:1fr}}
.lf-side-column{display:flex;flex-direction:column;gap:14px}

.lf-panel{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:14px;padding:18px 20px;overflow:hidden}
.lf-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.lf-panel-header h3{font-family:var(--title);font-size:18px;font-weight:400;color:var(--ink);font-style:italic;margin:0}
.lf-event-count{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);background:var(--bg-2);padding:4px 10px;border-radius:999px}
.lf-panel-sub{font-size:10px;color:var(--ink-dim);letter-spacing:.12em;text-transform:uppercase}

/* Events list */
.lf-events-panel{min-height:500px;max-height:700px;display:flex;flex-direction:column}
.lf-events-list{flex:1;overflow-y:auto;margin:0 -8px;padding:0 8px}
.lf-events-list::-webkit-scrollbar{width:6px}
.lf-events-list::-webkit-scrollbar-track{background:transparent}
.lf-events-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.lf-event-row{display:grid;grid-template-columns:70px 1fr 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(53,63,114,.3);font-family:'Manrope',sans-serif;font-size:13px;transition:background .15s;animation:lf-slide-in .35s cubic-bezier(.2,.9,.3,1)}
@keyframes lf-slide-in{0%{opacity:0;transform:translateX(-12px)}100%{opacity:1;transform:translateX(0)}}
.lf-event-row:hover{background:rgba(255,255,255,.025)}
.lf-event-time{color:var(--ink-dim);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lf-event-user{color:var(--pink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-event-desc{color:var(--ink-soft);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-event-desc .lf-item-tag{color:var(--ink-dim);font-style:italic}
.lf-event-amount{font-family:var(--title);font-style:italic;font-size:15px;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.lf-event-type-tip .lf-event-amount{color:var(--gold)}
.lf-event-type-purchase .lf-event-amount{color:var(--green)}
.lf-event-type-toy .lf-event-amount{color:#c084fc}
.lf-event-type-goal .lf-event-amount{color:var(--highlight)}
.lf-event-model{color:var(--ink-dim);font-size:10px;margin-left:6px;background:var(--bg-2);padding:2px 7px;border-radius:999px}

/* Rank lists (Top Spenders, Top Items) */
.lf-rank-list{display:flex;flex-direction:column;gap:2px}
.lf-rank-row{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;font-family:'Manrope',sans-serif;font-size:12px;transition:background .15s}
.lf-rank-row:hover{background:rgba(255,255,255,.025)}
.lf-rank-num{font-family:var(--title);font-style:italic;color:var(--ink-dim);font-size:14px;font-weight:500;text-align:right}
.lf-rank-row:nth-child(1) .lf-rank-num{color:var(--gold)}
.lf-rank-row:nth-child(2) .lf-rank-num{color:var(--ink-soft)}
.lf-rank-row:nth-child(3) .lf-rank-num{color:var(--accent)}
.lf-rank-name{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lf-rank-name.is-user{color:var(--pink)}
.lf-rank-meta{font-size:10px;color:var(--ink-dim);margin-top:2px;font-weight:400}
.lf-rank-value{font-family:var(--title);font-style:italic;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:500;font-size:14px}

/* Heatmap */
.lf-heatmap-panel{margin-bottom:40px}
.lf-heatmap{overflow-x:auto}
.lf-heatmap-grid{display:grid;grid-template-columns:56px repeat(24,minmax(24px,1fr));gap:2px;min-width:720px}
.lf-heatmap-label{font-size:10px;color:var(--ink-dim);font-weight:600;padding:4px 8px;text-align:right}
.lf-heatmap-head{font-size:9px;color:var(--ink-dim);font-weight:700;text-align:center;padding:2px 0;font-variant-numeric:tabular-nums}
.lf-heatmap-cell{aspect-ratio:1;min-height:20px;border-radius:3px;cursor:pointer;transition:transform .1s}
.lf-heatmap-cell:hover{transform:scale(1.18);z-index:2;box-shadow:0 0 0 2px var(--gold)}
.lf-heatmap-cell[data-intensity="0"]{background:var(--bg-2)}
.lf-heatmap-cell[data-intensity="1"]{background:rgba(231,193,111,.15)}
.lf-heatmap-cell[data-intensity="2"]{background:rgba(231,193,111,.3)}
.lf-heatmap-cell[data-intensity="3"]{background:rgba(231,193,111,.5)}
.lf-heatmap-cell[data-intensity="4"]{background:rgba(231,193,111,.75)}
.lf-heatmap-cell[data-intensity="5"]{background:var(--gold)}

.lf-empty{padding:32px 20px;text-align:center;color:var(--ink-dim);font-size:12px;font-family:'Manrope',sans-serif;font-style:italic}
.lf-loading{padding:24px;text-align:center;color:var(--ink-dim);font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.lf-badge-new{display:inline-block;background:var(--green);color:#231629;padding:1px 6px;border-radius:4px;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-left:6px;animation:lf-slide-in .3s}

/* ============ STATS GRID (Dashboard tiles) ============ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:28px}
.stat{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:14px;padding:20px 22px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 4px 16px rgba(0,0,0,.12)}
.stat:hover{transform:translateY(-2px);border-color:rgba(242,125,158,.25);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 24px rgba(0,0,0,.2)}
.stat .label{font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.stat .value{font-family:var(--title);font-size:36px;font-weight:400;letter-spacing:-.02em;color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:4px}
.stat .value em{font-style:italic;color:var(--accent);font-variant-numeric:tabular-nums}
.stat .value .unit{font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;color:var(--ink-dim);letter-spacing:0}
.stat .note{margin-top:8px;font-family:var(--title);font-style:italic;font-size:13px;color:var(--ink-dim);position:relative;z-index:2}
/* Status states */
.stat .status-idle{color:var(--ink-dim);font-style:italic;font-weight:400}
.stat .status-live{color:var(--green);font-weight:500;font-style:normal;letter-spacing:.04em;position:relative;display:inline-flex;align-items:center;gap:10px}
.stat .status-live::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(40,200,64,.7),0 0 0 0 rgba(40,200,64,.6);animation:livePulse 1.4s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 10px rgba(40,200,64,.7),0 0 0 0 rgba(40,200,64,.5)}70%{box-shadow:0 0 10px rgba(40,200,64,.7),0 0 0 14px rgba(40,200,64,0)}100%{box-shadow:0 0 10px rgba(40,200,64,.7),0 0 0 0 rgba(40,200,64,0)}}
.stat-tokens{position:relative}
.stat-tokens::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,200,80,.04) 0%,transparent 50%);pointer-events:none}
.stat-tokens .stat-coins{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.stat-tokens .dc{position:absolute;top:-12px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe58a 0%,#f5c147 45%,#c78f1e 100%);box-shadow:0 0 4px rgba(255,200,80,.45),inset 0 -1px 1px rgba(120,80,0,.35),inset 0 1px 1px rgba(255,240,180,.5);opacity:0}
.stat-tokens .dc::before{content:'';position:absolute;inset:2px;border-radius:50%;border:.8px solid rgba(120,80,0,.35)}
.stat-tokens .dc-1{left:12%;animation:dashCoin 4.2s ease-in 0s infinite}
.stat-tokens .dc-2{left:30%;animation:dashCoin 4.2s ease-in .9s infinite}
.stat-tokens .dc-3{left:52%;animation:dashCoin 4.2s ease-in 1.8s infinite}
.stat-tokens .dc-4{left:72%;animation:dashCoin 4.2s ease-in 2.6s infinite}
.stat-tokens .dc-5{left:88%;animation:dashCoin 4.2s ease-in 3.4s infinite}
@keyframes dashCoin{0%{top:-12px;opacity:0;transform:scale(.6) rotate(-10deg)}8%{opacity:.9}50%{opacity:.9;transform:scale(1) rotate(180deg)}85%{opacity:.7;transform:scale(.9) rotate(340deg)}100%{top:calc(100% + 6px);opacity:0;transform:scale(.5) rotate(420deg)}}
.stat-tokens .label,.stat-tokens .value,.stat-tokens .note{position:relative;z-index:2}
.stat-tokens .value em{color:#ffd76a}

.save-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--panel);border:1px solid var(--accent);color:var(--ink);padding:12px 22px;border-radius:10px;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:200;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.save-toast.visible{transform:translateX(-50%) translateY(0);opacity:1}

/* =========== LOVE NOTE MODAL (Start/Stop tender messages) =========== */
.ln-modal{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(61,41,72,.88) 0%,rgba(35,22,41,.94) 100%);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);display:none;align-items:center;justify-content:center;z-index:400;padding:24px;animation:lnFade .4s ease-out}
.ln-modal.open{display:flex}
@keyframes lnFade{from{opacity:0}to{opacity:1}}
.ln-box{background:linear-gradient(180deg,rgba(31,40,86,.85) 0%,rgba(25,31,72,.9) 100%);border:1px solid rgba(242,125,158,.3);border-radius:20px;padding:40px 32px 34px;max-width:440px;width:100%;text-align:center;position:relative;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 60px rgba(242,125,158,.15),inset 0 1px 0 rgba(255,255,255,.06);animation:lnBoxIn .6s cubic-bezier(.22,1,.36,1)}
@keyframes lnBoxIn{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
.ln-box::before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(242,125,158,.6),transparent)}
.ln-icon{font-size:44px;margin-bottom:18px;display:inline-block;animation:lnHeart 1.6s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(245,139,179,.5))}
@keyframes lnHeart{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.ln-greeting{font-family:var(--title);font-style:italic;font-size:17px;color:var(--ink-dim);letter-spacing:.02em;margin-bottom:18px;opacity:.9}
.ln-greeting:empty{display:none;margin:0}
.ln-greeting .foxx-name{font-size:17px}
.ln-message{font-family:var(--title);font-weight:400;font-size:22px;line-height:1.4;color:var(--ink);letter-spacing:-.005em;margin-bottom:28px;padding:0 6px}
.ln-message em{font-style:italic;color:var(--accent)}
.ln-footer{display:flex;flex-direction:column;align-items:center;gap:18px}
.ln-signature{font-family:var(--title);font-style:italic;font-size:14px;color:var(--ink-soft);opacity:.75;letter-spacing:.04em}
.ln-signature .dia-inline{width:.85em;height:.85em}
.ln-close{background:transparent;border:1px solid var(--line);color:var(--ink-soft);padding:10px 28px;border-radius:999px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:all .25s ease}
.ln-close:hover{background:var(--panel-hover);border-color:var(--accent);color:var(--ink)}
.ln-close:active{transform:scale(.97)}
.ln-shift-stats{display:flex;gap:18px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.ln-stat{text-align:center}
.ln-stat-value{font-family:var(--title);font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.ln-stat-label{font-size:9px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-dim);margin-top:4px}
/* Sparkle decorations around the modal */
.ln-sparkle{position:absolute;width:8px;height:8px;background:radial-gradient(circle,rgba(255,255,255,.9) 0%,transparent 70%);border-radius:50%;pointer-events:none;animation:lnSparkle 3s ease-in-out infinite}
.ln-sparkle-1{top:12%;left:8%;animation-delay:0s}
.ln-sparkle-2{top:18%;right:12%;animation-delay:.8s}
.ln-sparkle-3{bottom:22%;left:14%;animation-delay:1.6s}
.ln-sparkle-4{bottom:14%;right:10%;animation-delay:2.4s}
@keyframes lnSparkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.9;transform:scale(1)}}
@media (max-width:520px){
  .ln-box{padding:32px 22px 26px;border-radius:18px}
  .ln-icon{font-size:38px}
  .ln-greeting{font-size:14px}
  .ln-message{font-size:18px}
  .ln-stat-value{font-size:22px}
}

/* =========== LOVE NOTES ADMIN PANEL =========== */
body:not(.admin) .ln-admin{display:none !important}
.ln-admin{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:14px;padding:22px;margin-top:18px}
.ln-admin .ln-header{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;margin:-22px -22px 0;padding:22px;border-radius:14px 14px 0 0;transition:background .15s ease}
.ln-admin .ln-header:hover{background:rgba(255,255,255,.02)}
.ln-admin .ln-header h3{margin-bottom:0;flex:1}
.ln-admin .ln-header .ng-chevron{width:16px;height:16px;color:var(--ink-dim);flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1),color .2s ease;opacity:.6}
.ln-admin .ln-header:hover .ng-chevron{opacity:1;color:var(--pink)}
.ln-admin.is-collapsed .ln-header .ng-chevron{transform:rotate(-90deg)}
.ln-admin .ng-body{overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .25s ease,margin-top .3s ease,padding-top .3s ease;max-height:3000px;opacity:1;padding-top:16px}
.ln-admin.is-collapsed .ng-body{max-height:0;opacity:0;pointer-events:none;padding-top:0;margin-top:-16px}
.ln-admin.is-collapsed{padding-bottom:22px}
.ln-admin h3{font-family:var(--title);font-weight:400;font-size:22px;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.ln-admin h3 em{font-style:italic;color:var(--accent)}
.ln-admin .ln-sub{font-family:var(--title);font-style:italic;font-size:13px;color:var(--ink-dim);margin-bottom:18px;line-height:1.5}
.ln-admin .ln-tabs{display:flex;gap:4px;margin-bottom:16px;border:1px solid var(--line-soft);border-radius:10px;padding:3px;background:var(--bg-2);width:fit-content;flex-wrap:wrap}
.ln-tab-btn{background:transparent;border:none;color:var(--ink-dim);font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;border-radius:8px;cursor:pointer;transition:all .2s}
.ln-tab-btn:hover{color:var(--ink)}
.ln-tab-btn.active{background:var(--panel-hover);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.ln-form{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ln-input{flex:1;min-width:220px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);padding:13px 14px;border-radius:10px;font-family:'Manrope',sans-serif;font-size:14px;transition:border-color .2s}
.ln-input:focus{outline:none;border-color:var(--accent)}
.ln-add-btn{background:var(--accent);border:none;color:white;padding:10px 18px;border-radius:10px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:all .2s;flex-shrink:0}
.ln-add-btn:hover{background:var(--accent-deep)}
.ln-add-btn:active{transform:scale(.97)}
.ln-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;padding-right:4px}
.ln-item{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:10px 14px;transition:all .2s}
.ln-item:hover{border-color:var(--line)}
.ln-item-text{flex:1;font-family:var(--title);font-style:italic;font-size:14px;color:var(--ink);line-height:1.4;min-width:0;word-break:break-word}
.ln-item-del{background:transparent;border:1px solid var(--line-soft);color:var(--ink-dim);width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;flex-shrink:0;font-size:14px}
.ln-item-del:hover{border-color:var(--red);color:var(--red)}
.ln-empty{text-align:center;padding:28px 16px;color:var(--ink-dim);font-family:var(--title);font-style:italic;font-size:14px}
.ln-count{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.ln-test-row{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ln-test-label{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.ln-test-buttons{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.ln-test-btn{background:var(--bg-2);border:1px solid var(--line);color:var(--ink-soft);padding:8px 14px;border-radius:8px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .18s}
.ln-test-btn:hover{background:var(--panel);border-color:var(--accent);color:var(--ink)}
.ln-test-btn:active{transform:scale(.97)}
.ln-test-btn.ln-test-reset{border-color:var(--line-soft);color:var(--ink-dim);margin-left:auto}
.ln-test-btn.ln-test-reset:hover{border-color:var(--red);color:var(--red)}

@media(max-width:860px){
.app.active{grid-template-columns:1fr}
.mobile-topbar{display:flex}
.sidebar{position:fixed;top:0;left:0;width:300px;max-width:85vw;height:100vh;height:100dvh;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 40px rgba(0,0,0,.6);padding:22px 0 14px;overflow:hidden;display:flex;flex-direction:column}
.sidebar.open{transform:translateX(0)}
.sidebar>.sidebar-brand{flex-shrink:0}
.sidebar>.nav-group{flex-shrink:0}
.sidebar>.sidebar-footer{flex-shrink:0}
.sidebar-nav-scroll{flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
.sidebar-close{display:flex}
.sidebar-backdrop.open{display:block}
.sidebar-brand{padding:0 20px 20px;margin-bottom:18px}
.sidebar-brand h1{font-size:18px}
.sidebar-brand .tag{font-size:12px;margin-top:5px}
.nav-group{padding:0 12px;margin-bottom:22px}
.nav-group:not(:last-child)::after{bottom:-11px}
.nav-group .title{font-size:14px;padding:0 12px 12px}
.nav-item{padding:14px 14px;font-size:14px}
.nav-item.active{background:var(--panel-hover)}
.sidebar-footer{padding:16px 16px 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));margin-top:0}
.user-chip{padding:12px;margin-bottom:12px}
.user-chip .avatar{width:44px;height:44px}
.user-chip .name{font-size:14px}
.user-chip .role{font-size:10px}
.logout{padding:12px;font-size:11px}
.sbf-text{font-size:14px}
.content{padding:22px 16px 60px}
.view-header{margin-bottom:24px}
.view-header .kicker{font-size:10px;letter-spacing:.25em;margin-bottom:10px}
.view-header h2{font-size:clamp(30px,10vw,44px);gap:12px;line-height:1.05}
.view-header .sub{font-size:14px;margin-top:10px}
.cam-title{width:52px;height:52px}
.panels{grid-template-columns:1fr;gap:14px}
.panel-body{padding:16px 14px 14px}
.panel-body h4{font-size:16px}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}
.stat{padding:16px 14px}
.live-panel{padding:16px 18px}
.an-summary{grid-template-columns:repeat(2,1fr);gap:12px}
.an-records-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.stat .label{font-size:9px;letter-spacing:.22em;margin-bottom:8px}
.stat .value{font-size:28px}
.stat .note{font-size:12px;margin-top:6px}
.panel-title{font-size:10px;letter-spacing:.2em}
body.admin .panel-title{margin-right:8px}
.panel-heading{flex-wrap:wrap;gap:6px}
.panel-timestamp{font-size:9px;letter-spacing:.08em}
.viewer-notice{padding:10px 14px;font-size:12px;margin-bottom:16px}
.edit-controls{gap:8px}
.edit-btn,.save-btn,.cancel-btn{padding:8px 12px;font-size:9px;letter-spacing:.2em}
}
@media(max-width:460px){
.content{padding:18px 12px 60px}
.stats-grid{grid-template-columns:1fr;gap:10px}
.stat .value{font-size:32px}
.live-panel{padding:16px 18px;gap:14px;margin-bottom:22px}
.lp-state{font-size:20px}
.lp-meta{font-size:15px}
.live-panel:not(.is-live) .lp-meta{font-size:13px}
.lp-meta .foxx-name{font-size:16px}
.view-header h2{font-size:clamp(26px,9vw,36px)}
.profile-badge-top{padding:5px 10px;font-size:9px;letter-spacing:.22em;gap:6px}
.view-header-alyssa .alyssa-hero{margin-top:36px}
.an-summary{grid-template-columns:repeat(2,1fr);gap:10px}
.an-stat{padding:14px 14px}
.an-stat-value{font-size:22px}
.an-records-grid{grid-template-columns:1fr;gap:10px}
.an-record{padding:14px 16px}
.an-record-value{font-size:18px}
.an-panel{padding:18px 16px}
.an-range-tabs{width:100%;justify-content:space-between}
.an-range-btn{padding:10px 10px;font-size:10px;letter-spacing:.15em;flex:1}
.an-chart{height:140px}
.an-top-row{flex-direction:column;align-items:stretch;gap:10px}
.an-download-btn{justify-content:center;padding:14px 18px}
.cam-title{width:44px;height:44px}
.login-box{padding:34px 22px 28px}
.cam-login{width:68px;height:68px}
.login-video-wrap{width:200px;height:200px}
.login-brand h1{font-size:clamp(24px,7vw,32px)}
.mobile-topbar{padding:10px 14px;padding-top:calc(4px + env(safe-area-inset-top,0px));padding-left:calc(14px + env(safe-area-inset-left,0px));padding-right:calc(14px + env(safe-area-inset-right,0px));min-height:52px}
.mobile-topbar h1{font-size:16px}
.cam-mobile-sm{width:23px;height:23px}
.burger{width:38px;height:38px;border-radius:10px}
.burger svg{width:17px;height:17px}
.esc-hint{display:none !important}
.panel.editing .esc-hint{display:none !important}
}

/* --- AlyssaFoxx: bold pink letters (crown moved to .is-leader) --- */
.foxx-name{display:inline-block;position:relative;color:var(--pink);font-weight:700;letter-spacing:.005em;white-space:nowrap;padding-top:.6em;font-size:1.05em}
.foxx-name em{font-family:var(--title);font-style:italic;font-weight:600;color:var(--pink-soft)}
.nav-item.model-row .foxx-name{font-size:14px;font-weight:700}

/* --- Brittany: warm coral name styling (no italic em) --- */
.brittany-name{display:inline-block;position:relative;color:#ff8aa3;font-weight:700;letter-spacing:.005em;white-space:nowrap;padding-top:.6em;font-size:1.05em}

/* --- Generic custom rank name --- */
.custom-name{display:inline-block;position:relative;color:var(--ink);font-weight:600;letter-spacing:.005em;white-space:nowrap;padding-top:.6em;font-size:1.05em}

/* --- Crown indicator: appears ONLY on the #1 ranked entry, anywhere on the site --- */
.is-leader{position:relative}
.is-leader::before{content:'👑';position:absolute;top:.1em;left:45%;font-size:.7em;line-height:1;pointer-events:none;transform-origin:50% 65%;animation:foxxCrown 3.2s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,200,0,.25))}
@keyframes foxxCrown{0%,100%{transform:translateX(-50%) rotate(-12deg)}50%{transform:translateX(-50%) rotate(12deg)}}

/* --- Custom Ranks Manager (Admin only) --- */
.crm-section{margin-top:14px;padding:12px;background:var(--panel);border:1px solid var(--line-soft);border-radius:10px}
.crm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.crm-title{font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.crm-add-btn{background:var(--accent);color:var(--bg);border:none;padding:6px 12px;border-radius:6px;font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .15s}
.crm-add-btn:hover{background:var(--accent-soft,#ffb6c9);transform:translateY(-1px)}
.crm-list{display:flex;flex-direction:column;gap:6px}
.crm-item{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 10px;background:var(--bg);border:1px solid var(--line-soft);border-radius:7px;font-family:'Manrope',sans-serif;font-size:12px}
.crm-item-name{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-item-tokens{color:var(--gold);font-family:var(--title);font-style:italic;font-variant-numeric:tabular-nums;font-weight:500;cursor:pointer;padding:2px 8px;border-radius:5px;transition:background .15s}
.crm-item-tokens:hover{background:rgba(231,193,111,.1)}
.crm-item-del{background:transparent;border:1px solid var(--line);color:var(--red);width:24px;height:24px;border-radius:5px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}
.crm-item-del:hover{background:rgba(255,107,114,.1);border-color:var(--red)}
.crm-empty{font-family:'Manrope',sans-serif;font-size:11px;color:var(--ink-dim);text-align:center;padding:8px;font-style:italic}

/* Modal for adding custom rank */
.crm-modal-backdrop{position:fixed;inset:0;background:rgba(35,22,41,.75);backdrop-filter:blur(6px);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.crm-modal-backdrop.show{display:flex}
.crm-modal{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:24px;width:100%;max-width:380px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.crm-modal h3{font-family:var(--title);font-size:18px;font-weight:500;color:var(--ink);margin:0 0 4px}
.crm-modal .crm-modal-sub{font-family:'Manrope',sans-serif;font-size:11px;color:var(--ink-dim);letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:18px}
.crm-modal label{display:block;font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px;margin-top:14px}
.crm-modal label:first-of-type{margin-top:0}
.crm-modal input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:10px 12px;border-radius:8px;font-family:'Manrope',sans-serif;font-size:13px;outline:none;transition:border-color .15s}
.crm-modal input:focus{border-color:var(--accent)}
.crm-modal-actions{display:flex;gap:8px;margin-top:20px}
.crm-modal-actions button{flex:1;padding:10px;border-radius:8px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .15s;border:none}
.crm-modal-cancel{background:transparent;border:1px solid var(--line) !important;color:var(--ink-dim)}
.crm-modal-cancel:hover{border-color:var(--ink-dim) !important;color:var(--ink)}
.crm-modal-save{background:var(--accent);color:var(--bg)}
.crm-modal-save:hover{background:var(--accent-soft,#ffb6c9)}

/* ════════════════════════════════════════════════════════════
   PINNED MESSAGE — admin composer + viewer modal
   ════════════════════════════════════════════════════════════ */

/* Admin composer panel inside Dashboard */
.pin-admin{margin-top:24px;padding:22px;background:linear-gradient(135deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden;transition:padding .18s ease,margin .18s ease}
.pin-admin.is-collapsed{padding:14px 18px;margin-top:16px}
.pin-admin::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--gold),var(--accent),transparent);opacity:.5}
.pin-admin-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.pin-admin.is-collapsed .pin-admin-header{margin-bottom:0}
.pin-admin-title{display:flex;align-items:center;gap:10px;font-family:var(--title);font-size:18px;font-weight:500;color:var(--ink);margin:0}
.pin-admin-title em{font-family:var(--title);font-style:italic;font-weight:500;color:var(--accent)}
.pin-admin-icon{font-size:18px;line-height:1}
.pin-admin-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.pin-status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.pin-status-badge.active{background:rgba(84,217,141,.12);color:#54d98d;border:1px solid rgba(84,217,141,.3)}
.pin-status-badge.inactive{background:rgba(168,173,200,.08);color:var(--ink-dim);border:1px solid var(--line-soft)}
.pin-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.pin-collapse-btn{height:28px;padding:0 10px;border:1px solid var(--line-soft);border-radius:999px;background:rgba(61,41,72,.36);color:var(--ink-dim);font-family:'Manrope',sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.pin-collapse-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(242,125,158,.08)}
.pin-collapse-icon{display:inline-block;line-height:1;transition:transform .18s ease}
.pin-admin.is-collapsed .pin-collapse-icon{transform:rotate(-90deg)}
.pin-admin-sub{font-family:'Manrope',sans-serif;font-size:12px;color:var(--ink-dim);margin-bottom:18px;line-height:1.5}
.pin-admin.is-collapsed .pin-admin-sub,.pin-admin.is-collapsed .pin-textarea-wrap,.pin-admin.is-collapsed .pin-audience,.pin-admin.is-collapsed .pin-actions{display:none}
.pin-textarea-wrap{position:relative;margin-bottom:14px}
.pin-textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:14px 16px;border-radius:10px;font-family:'Manrope',sans-serif;font-size:14px;line-height:1.6;outline:none;resize:vertical;min-height:110px;max-height:300px;transition:border-color .15s;box-sizing:border-box}
.pin-textarea:focus{border-color:var(--accent)}
.pin-textarea::placeholder{color:var(--ink-dim);font-style:italic}
.pin-char-count{position:absolute;bottom:10px;right:14px;font-family:'SF Mono',Monaco,monospace;font-size:10px;color:var(--ink-dim);pointer-events:none;background:var(--bg);padding:2px 6px;border-radius:4px}
.pin-char-count.warn{color:#e7c16f}
.pin-audience{margin:0 0 14px;padding:12px;background:rgba(61,41,72,.34);border:1px solid var(--line-soft);border-radius:10px}
.pin-audience-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-family:'Manrope',sans-serif;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.pin-audience-count{font-family:'SF Mono',Monaco,monospace;color:var(--gold);letter-spacing:0}
.pin-audience-options{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pin-audience-option,.pin-user-check{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:9px;background:rgba(61,41,72,.65);color:var(--ink-soft);font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;cursor:pointer;user-select:none}
.pin-audience-option input,.pin-user-check input{accent-color:var(--accent)}
.pin-audience-option:has(input:checked),.pin-user-check:has(input:checked){border-color:var(--accent);background:rgba(242,125,158,.1);color:var(--ink)}
.pin-user-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.pin-user-list.is-disabled{opacity:.45;pointer-events:none}
.pin-user-empty{font-size:12px;color:var(--ink-dim);font-style:italic;padding:8px 0}
.pin-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pin-btn{padding:10px 18px;border:none;border-radius:9px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.pin-btn-pin{background:var(--accent);color:var(--bg)}
.pin-btn-pin:hover{background:var(--accent-soft,#ffb6c9);transform:translateY(-1px)}
.pin-btn-pin:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pin-btn-clear{background:transparent;border:1px solid var(--line);color:var(--ink-dim)}
.pin-btn-clear:hover{border-color:var(--red);color:var(--red);background:rgba(255,107,114,.05)}
.pin-meta{margin-left:auto;font-family:'Manrope',sans-serif;font-size:11px;color:var(--ink-dim);font-style:italic}
.pin-meta strong{color:var(--ink-soft);font-weight:600;font-style:normal}

/* Viewer-facing modal — shown to non-admin users on login */
.pin-modal-backdrop{position:fixed;inset:0;background:rgba(35,22,41,.85);backdrop-filter:blur(10px);z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;animation:pinFadeIn .35s ease-out}
.pin-modal-backdrop.show{display:flex}
@keyframes pinFadeIn{from{opacity:0}to{opacity:1}}
.pin-modal-card{background:linear-gradient(135deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:18px;padding:34px 32px 28px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;box-shadow:0 30px 100px rgba(0,0,0,.7);position:relative;animation:pinSlideUp .45s cubic-bezier(.2,.8,.3,1)}
@keyframes pinSlideUp{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.pin-modal-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--gold),var(--pink),transparent);border-radius:0 0 2px 2px}
.pin-modal-icon{display:flex;justify-content:center;margin-bottom:14px}
.pin-modal-icon-circle{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,rgba(242,125,158,.2),rgba(231,193,111,.15));border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:28px;animation:pinIconPulse 2.4s ease-in-out infinite;box-shadow:0 0 30px rgba(242,125,158,.3)}
@keyframes pinIconPulse{0%,100%{transform:scale(1);box-shadow:0 0 30px rgba(242,125,158,.3)}50%{transform:scale(1.06);box-shadow:0 0 45px rgba(242,125,158,.5)}}
.pin-modal-title{font-family:var(--title);font-size:24px;font-weight:500;color:var(--ink);text-align:center;margin:0 0 4px;letter-spacing:-.01em}
.pin-modal-title em{font-family:var(--title);font-style:italic;font-weight:500;color:var(--accent)}
.pin-modal-kicker{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);text-align:center;margin-bottom:22px}
.pin-modal-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0 0 22px}
.pin-modal-body{font-family:'Manrope',sans-serif;font-size:15px;line-height:1.7;color:var(--ink);white-space:pre-wrap;word-wrap:break-word;margin-bottom:20px;padding:0 4px;text-align:center}
.pin-modal-meta{font-family:'Manrope',sans-serif;font-size:10px;color:var(--ink-dim);text-align:center;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:24px}
.pin-modal-meta .pin-modal-time{color:var(--ink-soft)}
.pin-modal-actions{display:flex;justify-content:center}
.pin-modal-ack{background:linear-gradient(135deg,var(--accent),var(--accent-soft,#ffb6c9));color:var(--bg);border:none;padding:13px 36px;border-radius:10px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:all .2s;box-shadow:0 8px 24px rgba(242,125,158,.35)}
.pin-modal-ack:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(242,125,158,.5)}
.pin-modal-signature{margin-top:20px;text-align:center;font-family:var(--title);font-style:italic;font-size:11px;color:var(--ink-dim);letter-spacing:.05em}
.pin-modal-signature .sig-diamond{color:var(--accent);margin:0 4px}

/* Mobile tweaks */
@media (max-width:680px){
  .pin-admin{padding:18px}
  .pin-modal-card{padding:26px 22px 22px;border-radius:14px}
  .pin-modal-title{font-size:20px}
  .pin-modal-body{font-size:14px}
  .pin-actions{flex-direction:column;align-items:stretch}
  .pin-meta{margin-left:0;text-align:center;margin-top:6px}
}

/* --- Access denied toast --- */
.access-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-left:3px solid var(--red);color:var(--ink);padding:14px 20px;border-radius:10px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:500;letter-spacing:.01em;box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:200;max-width:90vw}
.access-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- Per-model sidebar tracker: Sin & Roses compact studio tools --- */
.model-tracker{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:9px 14px 12px;margin:5px 0 4px;position:relative}
.model-tracker::before{content:'Model tools';grid-column:1/-1;font-size:8px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);padding:0 2px 1px}
.mt-btn{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-height:84px;background:linear-gradient(145deg,rgba(255,250,243,.07),rgba(61,41,72,.45));border:1px solid rgba(255,255,255,.09);color:var(--ink-soft);padding:14px 8px 12px;border-radius:14px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;font-family:'Manrope',sans-serif;position:relative;width:100%;text-align:center;overflow:hidden}
.mt-btn::after{content:'';position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:linear-gradient(90deg,rgba(255,143,178,.45),rgba(255,225,163,.2),transparent);opacity:.45}
.mt-btn:hover{transform:translateY(-1px);background:linear-gradient(145deg,rgba(255,143,178,.16),rgba(143,230,208,.06));border-color:rgba(255,143,178,.34);box-shadow:0 12px 24px rgba(0,0,0,.16);color:var(--ink)}
.mt-btn:active{transform:translateY(0) scale(.99)}
.mt-btn .mt-icon-wrap{position:relative;top:auto;left:auto;width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(145deg,rgba(255,143,178,.12),rgba(255,225,163,.07));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.mt-label{padding:0;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mt-value{font-family:var(--title);font-size:22px;font-weight:600;color:var(--accent-soft);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-align:center}
.mt-value.is-empty{color:var(--ink-dim);font-weight:400}
/* Animated clock icon — subtle */
.mt-clock{width:17px;height:17px;color:var(--gold);overflow:visible;transition:color .2s}
.mt-btn:hover .mt-clock{color:var(--highlight)}
.mt-clock-hands{transform-origin:12px 12px}
.mt-hand-h{stroke-linecap:round;transform-origin:12px 12px;animation:mtClockHour 60s linear infinite}
.mt-hand-m{stroke-linecap:round;stroke-width:1.4;transform-origin:12px 12px;animation:mtClockMin 6s linear infinite;opacity:.7}
@keyframes mtClockHour{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes mtClockMin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.mt-hours.running{background:linear-gradient(160deg,rgba(242,125,158,.16),rgba(231,193,111,.06));border-color:rgba(242,125,158,.38)}
.mt-hours.running .mt-clock{color:var(--accent)}
.mt-hours.running .mt-hand-h{animation-duration:10s}
.mt-hours.running .mt-hand-m{animation-duration:1.2s}
.mt-hours.running::before{content:'';position:absolute;right:10px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(242,125,158,.65);animation:mtPulseDot 1.2s ease-in-out infinite;pointer-events:none}
@keyframes mtPulseDot{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
/* Falling coins — professional version */
.mt-coin-wrap{position:relative;width:18px;height:18px;overflow:hidden;display:inline-block}
.mt-coin-wrap .fc{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe58a 0%,#f5c147 45%,#c78f1e 100%);box-shadow:0 0 3px rgba(255,200,80,.5),inset 0 -1px 1px rgba(120,80,0,.35),inset 0 1px 1px rgba(255,240,180,.5)}
.mt-coin-wrap .fc::before{content:'';position:absolute;inset:2px;border-radius:50%;border:.8px solid rgba(120,80,0,.35)}
.mt-coin-wrap .fc-1{animation:fcDrop 2.4s ease-in infinite}
.mt-coin-wrap .fc-2{animation:fcDrop 2.4s ease-in .8s infinite;left:30%}
.mt-coin-wrap .fc-3{animation:fcDrop 2.4s ease-in 1.6s infinite;left:70%}
@keyframes fcDrop{0%{top:-8px;opacity:0;transform:scale(.7) rotate(-10deg)}10%{opacity:1}45%{opacity:1;transform:scale(1) rotate(180deg)}70%{opacity:1;transform:scale(.95) rotate(340deg)}100%{top:18px;opacity:0;transform:scale(.6) rotate(420deg)}}
.mt-btn:hover .mt-coin-wrap .fc{filter:brightness(1.1)}

/* ═══════════════════════════════════════════════════
   TARGETS MODAL — Goals tracker
   ═══════════════════════════════════════════════════ */
.tg-modal{position:fixed;inset:0;background:rgba(35,22,41,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;animation:tgFadeIn .22s ease-out}
.tg-modal.open{display:flex}
@keyframes tgFadeIn{from{opacity:0}to{opacity:1}}
.tg-modal-box{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:18px;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.6);animation:tgBoxIn .28s cubic-bezier(.22,.61,.36,1);overflow:hidden}
@keyframes tgBoxIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.tg-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 16px;border-bottom:1px solid var(--line-soft)}
.tg-modal-title{font-family:var(--title);font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
.tg-modal-title em{font-style:italic;color:var(--gold);font-weight:500}
.tg-modal-title .foxx-name{font-size:inherit}
.tg-modal-close{background:transparent;border:none;color:var(--ink-dim);font-size:26px;cursor:pointer;line-height:1;padding:2px 8px;border-radius:6px;transition:all .2s}
.tg-modal-close:hover{color:var(--ink);background:var(--panel-hover)}
.tg-modal-body{padding:18px 22px 22px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,143,178,.3) transparent}
.tg-modal-body::-webkit-scrollbar{width:8px}
.tg-modal-body::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.tg-modal-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,143,178,.4),rgba(249,217,143,.3));border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.tg-modal-body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(255,143,178,.6),rgba(249,217,143,.5));background-clip:padding-box;border:2px solid transparent}
/* Admin add form */
.tg-admin-section{padding:16px 18px 14px;background:linear-gradient(135deg,rgba(255,143,178,.06),rgba(74,49,86,.3));border:1px solid rgba(255,143,178,.18);border-radius:12px;position:sticky;top:0;z-index:2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tg-admin-title{font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.tg-form-grid{display:grid;grid-template-columns:1fr 130px auto;gap:10px;align-items:end}
.tg-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.tg-field-label{font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);padding-left:3px}
.tg-field input{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--ink);font-family:'Manrope',sans-serif;font-size:13px;outline:none;transition:all .2s;width:100%;box-sizing:border-box}
.tg-field input:focus{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 3px rgba(255,143,178,.1)}
.tg-field input::placeholder{color:var(--ink-dim);opacity:.55}
.tg-field-tokens input{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
/* Legacy class kept for any other uses */
.tg-form-row{display:grid;grid-template-columns:1fr 100px auto;gap:8px;align-items:center}
.tg-form-row input{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--ink);font-family:'Manrope',sans-serif;font-size:13px;outline:none;transition:all .2s}
.tg-form-row input:focus{border-color:var(--accent);background:var(--panel)}
.tg-form-row input::placeholder{color:var(--ink-dim);opacity:.7}
.tg-add-btn{background:linear-gradient(135deg,var(--accent),var(--gold));border:none;border-radius:8px;padding:10px 14px;color:#fff;font-family:'Manrope',sans-serif;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s;white-space:nowrap}
.tg-add-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,143,178,.32)}
.tg-add-btn:active{transform:translateY(0)}
.tg-admin-hint{font-size:10px;color:var(--ink-dim);margin-top:8px;line-height:1.5;opacity:.75}
/* Read-only banner */
.tg-readonly-banner{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(168,148,232,.08);border:1px solid rgba(168,148,232,.22);border-radius:10px;color:var(--ink-soft);font-size:11px;font-weight:600}
/* Collapsible section (Λίστα targets) — opens/closes like nav groups */
.tg-section{display:flex;flex-direction:column;background:linear-gradient(135deg,rgba(255,250,243,.04),rgba(74,49,86,.3));border:1px solid var(--line);border-radius:12px;position:relative}
.tg-section-toggle{display:flex;align-items:center;gap:10px;padding:14px 18px;background:linear-gradient(180deg,rgba(54,32,63,.92),rgba(48,28,56,.94));border:none;border-bottom:1px solid var(--line-soft);border-radius:12px 12px 0 0;color:var(--ink);font-family:'Manrope',sans-serif;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;width:100%;text-align:left;transition:background .2s ease;position:sticky;top:0;z-index:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tg-section.collapsed .tg-section-toggle{border-bottom-color:transparent;border-radius:12px}
.tg-section-toggle:hover{background:linear-gradient(180deg,rgba(64,40,75,.95),rgba(54,32,63,.96))}
.tg-section-title{flex:1;color:var(--ink-soft)}
.tg-section-count{font-family:var(--title);font-style:italic;font-size:14px;font-weight:500;color:var(--gold);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;padding:2px 10px;background:rgba(231,193,111,.1);border:1px solid rgba(231,193,111,.22);border-radius:999px}
.tg-section-chevron{width:14px;height:14px;color:var(--ink-dim);transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.tg-section.collapsed .tg-section-chevron{transform:rotate(-90deg)}
.tg-section-body{overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .25s ease,padding .35s ease;max-height:5000px;opacity:1;padding:0 14px 14px}
.tg-section.collapsed .tg-section-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
/* Targets list */
.tg-list{display:flex;flex-direction:column;gap:10px}
.tg-empty{padding:32px 20px;text-align:center;color:var(--ink-dim);font-size:13px;line-height:1.6;background:var(--panel-2);border:1px dashed var(--line);border-radius:12px}
.tg-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px 16px;background:linear-gradient(135deg,rgba(255,250,243,.04),rgba(74,49,86,.4));border:1px solid var(--line);border-radius:12px;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.tg-row:hover{border-color:rgba(255,143,178,.3);transform:translateX(2px)}
.tg-row.reached{background:linear-gradient(135deg,rgba(143,230,208,.1),rgba(74,49,86,.4));border-color:rgba(143,230,208,.32)}
.tg-row.reached::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#5edda0,#9fd8c2)}
.tg-row-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.tg-row-name{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-row-progress{font-size:10px;color:var(--ink-dim);font-weight:600;letter-spacing:.04em}
.tg-row.reached .tg-row-progress{color:#5edda0}
.tg-row-tokens{font-family:var(--title);font-style:italic;font-size:17px;font-weight:500;color:var(--gold);font-variant-numeric:tabular-nums;padding:6px 14px;background:linear-gradient(135deg,rgba(231,193,111,.1),rgba(255,143,178,.06));border:1px solid rgba(231,193,111,.28);border-radius:10px;letter-spacing:0;line-height:1.2;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tg-row.reached .tg-row-tokens{color:#5edda0;background:linear-gradient(135deg,rgba(94,221,160,.1),rgba(143,230,208,.06));border-color:rgba(94,221,160,.32)}
.tg-row-actions{display:flex;gap:6px}
.tg-row-edit{width:32px;height:32px;border-radius:8px;background:rgba(255,143,178,.08);border:1px solid rgba(255,143,178,.22);color:rgba(255,180,200,.9);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0}
.tg-row-edit:hover{background:rgba(255,143,178,.18);border-color:rgba(255,143,178,.45);transform:scale(1.05)}
.tg-row-edit svg{width:14px;height:14px}
.tg-row-delete{width:32px;height:32px;border-radius:8px;background:rgba(255,115,128,.08);border:1px solid rgba(255,115,128,.22);color:rgba(255,140,150,.85);cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s}
.tg-row-delete:hover{background:rgba(255,115,128,.18);border-color:rgba(255,115,128,.45);transform:scale(1.05)}
/* Inline edit mode for a target row */
.tg-row.editing{background:linear-gradient(135deg,rgba(255,143,178,.08),rgba(74,49,86,.5));border-color:rgba(255,143,178,.4);grid-template-columns:1fr 110px auto !important}
.tg-row.editing .tg-row-info,.tg-row.editing .tg-row-tokens,.tg-row.editing .tg-row-progress,.tg-row.editing .tg-row-bar{display:none}
.tg-row-edit-name,.tg-row-edit-tokens{background:var(--panel-2);border:1px solid var(--accent);border-radius:8px;padding:9px 11px;color:var(--ink);font-family:'Manrope',sans-serif;font-size:13px;outline:none;transition:all .2s;min-width:0;width:100%;box-sizing:border-box}
.tg-row-edit-name:focus,.tg-row-edit-tokens:focus{box-shadow:0 0 0 3px rgba(255,143,178,.15)}
.tg-row-edit-tokens{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.tg-row-edit-actions{display:flex;gap:6px}
.tg-row-save,.tg-row-cancel{width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;border:1px solid;font-weight:800}
.tg-row-save{background:linear-gradient(135deg,rgba(94,221,160,.18),rgba(143,230,208,.08));border-color:rgba(94,221,160,.4);color:#9fefc1}
.tg-row-save:hover{background:linear-gradient(135deg,rgba(94,221,160,.28),rgba(143,230,208,.14));transform:scale(1.05)}
.tg-row-cancel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--ink-dim)}
.tg-row-cancel:hover{background:rgba(255,255,255,.08);color:var(--ink)}
body:not(.admin) .tg-row-actions{display:none}
body:not(.admin) .tg-row{grid-template-columns:1fr auto}
.tg-row-readonly{grid-template-columns:1fr auto !important;padding:16px 18px}
.tg-row-readonly .tg-row-bar{display:none}
/* Mini progress bar inside each row */
.tg-row-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.04);overflow:hidden}
.tg-row-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .8s cubic-bezier(.22,.61,.36,1)}
.tg-row.reached .tg-row-bar-fill{background:linear-gradient(90deg,#5edda0,#9fd8c2)}
/* Mobile */
@media(max-width:520px){
  .tg-modal{padding:12px;align-items:flex-end}
  .tg-modal-box{max-height:94vh;height:94vh;border-radius:18px 18px 12px 12px;animation:tgBoxInMobile .32s cubic-bezier(.22,.61,.36,1)}
  .tg-modal-head,.tg-modal-body{padding-left:16px;padding-right:16px}
  .tg-modal-body{padding-bottom:max(22px,env(safe-area-inset-bottom,22px))}
  .tg-form-row{grid-template-columns:1fr 80px;grid-template-rows:auto auto;gap:8px}
  .tg-form-grid{grid-template-columns:1fr 110px;gap:8px}
  .tg-form-grid .tg-add-btn{grid-column:1/-1;padding:11px}
  .tg-add-btn{grid-column:1/-1;padding:11px}
  .tg-row{padding:12px 14px;gap:10px}
  .tg-row-name{font-size:13px}
  .tg-row-tokens{font-size:15px;padding:5px 10px}
  .tg-row-delete,.tg-row-edit{width:28px;height:28px}
  .tg-row.editing{grid-template-columns:1fr 90px auto !important;gap:6px}
  .tg-row-edit-name,.tg-row-edit-tokens{padding:8px 10px;font-size:12.5px}
  .tg-row-save,.tg-row-cancel{width:28px;height:28px}
  /* Sticky admin form: a touch shorter on mobile */
  .tg-admin-section{padding:14px 16px 12px}
  /* Section toggle: more touch-friendly */
  .tg-section-toggle{padding:14px 16px;font-size:10.5px}
  .tg-section-body{padding:0 12px 12px}
  /* Compact 3-button tracker on mobile */
  .model-tracker{gap:5px;padding:8px 12px 10px}
  .mt-btn{min-height:74px;padding:10px 2px 9px;gap:6px}
  .mt-btn .mt-icon-wrap{width:26px;height:26px;border-radius:9px}
  .mt-value{font-size:14px;letter-spacing:-.02em}
  .mt-btn::after{left:6px;right:6px}
}
@keyframes tgBoxInMobile{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* Target icon (Targets button) — animated bullseye */
.mt-target-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;position:relative}
.mt-target-icon{width:18px;height:18px;color:var(--gold);filter:drop-shadow(0 0 4px rgba(231,193,111,.35));transition:transform .35s cubic-bezier(.4,0,.2,1)}
.mt-target-icon circle:nth-child(1){animation:tgRingPulse 3s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.mt-target-icon circle:nth-child(2){animation:tgRingPulse 3s ease-in-out 1s infinite;transform-origin:center;transform-box:fill-box}
.mt-target-icon circle:nth-child(3){fill:var(--gold)}
@keyframes tgRingPulse{0%,100%{opacity:.6}50%{opacity:1;stroke-width:2.2}}
.mt-targets:hover .mt-target-icon{transform:rotate(45deg) scale(1.1)}
.mt-targets.has-reached .mt-target-icon circle:nth-child(3){animation:tgGlow 1.5s ease-in-out infinite}
@keyframes tgGlow{0%,100%{filter:drop-shadow(0 0 2px var(--accent))}50%{filter:drop-shadow(0 0 8px var(--accent))}}

/* --- Tokens / Hours modal --- */
.th-modal{position:fixed;inset:0;background:rgba(35,22,41,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;animation:thFadeIn .2s ease-out}
.th-modal.open{display:flex}
@keyframes thFadeIn{from{opacity:0}to{opacity:1}}
.th-modal-box{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);border-radius:16px;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.6);animation:thBoxIn .25s cubic-bezier(.4,0,.2,1);overflow:hidden}
@keyframes thBoxIn{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.th-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--line-soft)}
.th-modal-title{font-family:var(--title);font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.th-modal-title .foxx-name{font-size:inherit}
.th-modal-close{background:transparent;border:none;color:var(--ink-dim);font-size:26px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px;transition:all .2s}
.th-modal-close:hover{color:var(--ink);background:var(--panel-hover)}
.th-modal .th-tabs,.th-modal .th-tab-body{padding-left:22px;padding-right:22px}
.th-modal .th-tabs{margin:14px 22px 14px;padding:0;border-bottom:1px solid var(--line)}
.th-modal .th-tab-body{padding:0 22px 22px;overflow-y:auto}

/* --- Tokens / Hours shared UI --- */
.th-tabs{display:flex;gap:0}
.th-tab{flex:1;background:transparent;border:none;color:var(--ink-dim);font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;padding:10px 8px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.th-tab:hover{color:var(--ink-soft)}
.th-tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.th-live-card{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center;margin-bottom:16px}
.th-live-label{font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.th-live-timer{font-family:var(--title);font-weight:400;font-size:clamp(34px,8vw,46px);letter-spacing:.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:6px}
.th-live-timer.running{color:var(--accent);text-shadow:0 0 18px rgba(242,125,158,.35)}
.th-live-meta{font-size:11px;color:var(--ink-dim);letter-spacing:.08em;margin-bottom:14px;min-height:14px}
.th-live-meta .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:middle;animation:recBlink 1s steps(2,end) infinite}
.th-live-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.th-start,.th-stop,.th-clear{font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:10px 18px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:all .2s;min-width:100px}
.th-start{background:var(--accent);color:#fff}
.th-start:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-1px)}
.th-stop{background:transparent;color:var(--ink-soft);border-color:var(--line)}
.th-stop:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.th-start:disabled,.th-stop:disabled{opacity:.35;cursor:not-allowed;transform:none}
.th-admin-hint{font-size:10px;color:var(--ink-dim);letter-spacing:.06em;margin-top:10px;font-style:italic}
.th-token-form{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:34px 14px 16px;margin-bottom:16px;position:relative}
.th-form-status{position:absolute;top:10px;left:14px;background:var(--bg);border:1px solid var(--line);color:var(--ink-dim);font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:3px 10px;border-radius:20px;z-index:5}
.th-form-status.editing{background:var(--accent);border-color:var(--accent);color:#fff}
.th-form-status.closing{background:var(--highlight);border-color:var(--highlight);color:var(--bg)}
.th-entry.th-open{border-color:var(--accent);background:linear-gradient(90deg,rgba(242,125,158,.08),var(--panel))}
.th-entry.th-open .th-value{color:var(--highlight)}
.th-entry-open-tag{font-size:8px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);background:rgba(242,125,158,.12);padding:2px 6px;border-radius:4px;margin-left:4px;vertical-align:middle}
.th-entry-edit{background:transparent;border:none;color:var(--highlight);cursor:pointer;font-size:14px;padding:0 4px;line-height:1}
.th-entry-edit:hover{color:var(--accent)}
body:not(.admin):not(.th-owner) .th-entry-edit{display:none}
.th-token-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.th-token-row label{flex:0 0 120px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.th-token-row input{flex:1;min-width:120px;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px 11px;font-family:'Manrope',sans-serif;font-size:14px;font-weight:500;outline:none;transition:border-color .2s;-webkit-appearance:none;font-variant-numeric:tabular-nums}
.th-token-row input:focus{border-color:var(--accent)}
.th-token-preview{font-family:var(--title);font-size:17px;color:var(--highlight);margin:10px 0 12px;text-align:center;font-variant-numeric:tabular-nums}
.th-token-preview.has-value{color:var(--accent)}
.th-history{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px}
.th-history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px}
.th-history-header span{font-size:10px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-dim)}
.th-clear{background:transparent;color:var(--ink-dim);border-color:transparent;padding:5px 10px;font-size:9px;letter-spacing:.15em;min-width:auto}
.th-clear:hover{color:var(--red);border-color:var(--red)}
.th-history-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.th-empty{text-align:center;color:var(--ink-dim);font-style:italic;font-size:12px;padding:16px 0}
.th-entry{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line-soft);border-radius:8px;padding:9px 10px;font-size:12px}
.th-entry .th-info{flex:1;min-width:0}
.th-entry .th-value{flex-shrink:0}
.th-entry .th-day{font-weight:700;color:var(--ink);font-size:11px;letter-spacing:.05em;min-width:40px}
.th-entry .th-info{display:flex;flex-direction:column;gap:2px;color:var(--ink-soft);font-size:11px;font-variant-numeric:tabular-nums}
.th-entry .th-info .th-date{color:var(--ink-dim);font-size:10px}
.th-entry .th-value{font-family:var(--title);font-size:14px;color:var(--accent);font-variant-numeric:tabular-nums;text-align:right;line-height:1.1}
.th-entry .th-value small{display:block;font-family:'Manrope',sans-serif;font-size:9px;color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
body:not(.admin):not(.th-owner) .th-entry-del{display:none}
.th-entry-del{background:transparent;border:none;color:var(--ink-dim);cursor:pointer;font-size:14px;padding:0 4px;line-height:1}
.th-entry-del:hover{color:var(--red)}
.th-totals{margin-top:10px;padding:10px 10px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px}
.th-totals .th-total-label{color:var(--ink-dim);letter-spacing:.15em;text-transform:uppercase;font-size:10px;font-weight:700}
.th-totals .th-total-value{font-family:var(--title);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
body:not(.admin):not(.th-owner) .th-start,
body:not(.admin):not(.th-owner) .th-stop,
body:not(.admin):not(.th-owner) .th-clear,
body:not(.admin):not(.th-owner) .th-token-row input{pointer-events:none;opacity:.45}
body.admin .th-admin-hint,body.th-owner .th-admin-hint{display:none}

/* Private Suite visual refresh: presentation only, no data/function changes */
.login-screen{background:radial-gradient(circle at 18% 14%,rgba(255,130,178,.20),transparent 28%),radial-gradient(circle at 82% 18%,rgba(249,217,143,.12),transparent 26%),linear-gradient(180deg,#321d3e 0%,#24182f 100%);overflow:hidden}
/* Floating petals — desktop only */
.login-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.login-petals .petal{position:absolute;font-size:22px;opacity:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));animation:petalFall 18s linear infinite;will-change:transform}
.petal-1{left:8%;animation-delay:0s;animation-duration:16s;font-size:24px}
.petal-2{left:22%;animation-delay:3s;animation-duration:21s;font-size:18px}
.petal-3{left:38%;animation-delay:6s;animation-duration:19s;font-size:26px}
.petal-4{left:55%;animation-delay:9s;animation-duration:17s;font-size:20px}
.petal-5{left:70%;animation-delay:2s;animation-duration:22s;font-size:22px}
.petal-6{left:84%;animation-delay:11s;animation-duration:18s;font-size:24px}
.petal-7{left:92%;animation-delay:5s;animation-duration:20s;font-size:18px}
@keyframes petalFall{0%{transform:translateY(-20vh) rotate(0deg) translateX(0);opacity:0}10%{opacity:.65}50%{transform:translateY(50vh) rotate(180deg) translateX(40px);opacity:.7}90%{opacity:.5}100%{transform:translateY(110vh) rotate(360deg) translateX(-30px);opacity:0}}
@media (max-width:768px){.login-petals{display:none}}
@media (prefers-reduced-motion:reduce){.login-petals{display:none}}
.login-screen::before,.login-screen::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.74) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(249,217,143,.6) 0 1px,transparent 1.7px);background-size:120px 120px,190px 190px;background-position:18px 40px,80px 12px;opacity:.32;animation:suiteStars 7s ease-in-out infinite}
.login-screen::after{background-size:170px 170px,260px 260px;background-position:40px 90px,130px 40px;opacity:.18;animation-duration:11s}
@keyframes suiteStars{0%,100%{opacity:.18;transform:translateY(0)}50%{opacity:.42;transform:translateY(-5px)}}
.login-box{z-index:2;background:linear-gradient(180deg,rgba(255,250,245,.08),rgba(60,39,72,.86));border-color:rgba(249,217,143,.26);box-shadow:0 48px 110px rgba(0,0,0,.42),0 0 80px rgba(255,130,178,.13)}
.login-box::before{height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--accent),transparent)}
.login-monogram{font-family:var(--title);font-size:clamp(48px,13vw,76px);font-weight:600;font-style:italic;line-height:.9;letter-spacing:-.04em;color:var(--gold);text-shadow:0 0 26px rgba(249,217,143,.24);margin-bottom:18px}
.login-video-wrap{box-shadow:0 0 0 1px rgba(249,217,143,.52),0 0 0 8px rgba(255,130,178,.055),0 0 90px rgba(255,130,178,.28),0 24px 60px rgba(0,0,0,.42);border:2px solid rgba(249,217,143,.55)}
.field input{background:transparent;border:none;border-bottom:1px solid rgba(249,217,143,.36);border-radius:0;padding:14px 2px;color:var(--ink);caret-color:var(--gold)}
.field input:focus{background:transparent;border-color:var(--gold);box-shadow:0 10px 24px -22px rgba(249,217,143,.8)}
.login-btn{border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 12px 30px rgba(232,95,150,.22)}
.sidebar{background:linear-gradient(180deg,rgba(54,32,63,.96),rgba(39,24,48,.98));box-shadow:16px 0 60px rgba(0,0,0,.14)}
.sidebar-brand h1,.mobile-topbar h1{font-family:var(--title);font-weight:600}
.sidebar-brand .tag{font-family:var(--title);font-size:12px;font-weight:500;font-style:italic;letter-spacing:.03em;text-transform:none;color:var(--gold)}
.nav-group .title{font-weight:800;letter-spacing:.01em;color:var(--ink-soft)}
.foxx-name{background:linear-gradient(90deg,var(--pink) 0%,var(--gold) 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-item.model-row:hover .foxx-name::after{content:' 🌹';font-size:12px;color:var(--accent);-webkit-text-fill-color:var(--accent)}
.nav-item.model-row.active{box-shadow:0 0 0 1px rgba(249,217,143,.18),0 0 26px rgba(255,130,178,.16),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-item.model-row .num::before{content:'✦ ';color:var(--gold)}
/* AlyssaFoxx rotating crown — κορώνα πάνω στο "y" του ονόματος */
.foxx-name{position:relative;padding-top:.6em;display:inline-block}
.foxx-name::before{content:'👑';position:absolute;top:-.05em;left:45%;font-size:.7em;line-height:1;pointer-events:none;transform-origin:50% 65%;animation:foxxCrown 3.2s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(249,217,143,.55));-webkit-text-fill-color:initial;color:initial;background:none;-webkit-background-clip:initial;background-clip:initial;z-index:2}
@keyframes foxxCrown{0%,100%{transform:translateX(-50%) rotate(-12deg)}50%{transform:translateX(-50%) rotate(12deg)}}
.model-tracker::before{content:'Suite Tools';color:rgba(249,217,143,.82)}
.mt-btn{border-color:rgba(249,217,143,.28);background:linear-gradient(145deg,rgba(255,250,245,.07),rgba(74,49,86,.50));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.mt-btn:hover{border-color:rgba(249,217,143,.65);box-shadow:0 0 0 1px rgba(249,217,143,.35),0 8px 28px rgba(255,130,178,.22),0 0 30px rgba(249,217,143,.18),inset 0 1px 0 rgba(255,255,255,.08);transform:translateY(-2px)}
.mt-label{letter-spacing:.12em}
.ranks-title-icon{display:inline-block;animation:crownShimmer 4s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(249,217,143,.24))}
@keyframes crownShimmer{0%,100%{filter:drop-shadow(0 0 3px rgba(249,217,143,.15));transform:translateY(0)}50%{filter:drop-shadow(0 0 12px rgba(249,217,143,.55));transform:translateY(-1px)}}
.view-header h2{font-family:var(--title);font-weight:600;letter-spacing:-.035em}
.view-header .sub{font-family:var(--title);font-size:18px;color:rgba(249,217,143,.76)}
#view-alyssa .panels{gap:28px}
#view-alyssa .panel{border-radius:24px;border-color:rgba(249,217,143,.22);background:linear-gradient(145deg,rgba(255,250,245,.095),rgba(60,39,72,.88) 44%,rgba(43,31,58,.94));box-shadow:0 24px 70px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.055);transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1)}
#view-alyssa .panel:hover{transform:translateY(-3px);border-color:rgba(249,217,143,.4);box-shadow:0 32px 84px rgba(0,0,0,.22),0 0 30px rgba(255,143,178,.12),inset 0 1px 0 rgba(255,255,255,.08)}
#view-alyssa .panel::before{content:'';position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,transparent,var(--accent),var(--gold),var(--pink),var(--gold),var(--accent),transparent);background-size:200% 100%;opacity:.9;animation:panelShimmer 6s ease-in-out infinite}
@keyframes panelShimmer{0%,100%{background-position:0% 50%;opacity:.85}50%{background-position:100% 50%;opacity:1}}
#view-alyssa .panel-chrome{min-height:54px;background:linear-gradient(90deg,rgba(255,250,245,.06),rgba(184,168,255,.055));border-bottom-color:rgba(249,217,143,.12)}
#view-alyssa .panel-title{font-size:10px;letter-spacing:.3em;color:rgba(249,217,143,.78)}
#view-alyssa .panel-body{padding:34px 34px 30px}
/* Hide the small uppercase eyebrow labels (e.g. "01 · CHARACTER") and panel-chrome titles inside Alyssa cards — keep only the big italic title (Character/Schedule/Notes) */
#view-alyssa .panel-body::before{display:none}
#view-alyssa .panel-chrome .panel-title{display:none}
#view-alyssa .panel-body h4{font-family:var(--title);font-style:italic;font-size:clamp(30px,3.1vw,42px);font-weight:600;line-height:.95}
#view-alyssa .panel-body .accent{width:46px;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold));margin:12px 0 18px}
#view-alyssa .panel-content{font-size:15px;line-height:1.78}
#view-alyssa .edit-controls{margin-top:24px;padding-top:20px}
#view-alyssa .edit-btn,#view-alyssa .save-btn,#view-alyssa .cancel-btn{border-radius:999px;border-color:rgba(249,217,143,.26);background:rgba(255,255,255,.025);padding:10px 18px}
#view-alyssa .edit-btn::before{content:'✎';margin-right:8px;color:var(--gold)}
#view-alyssa .edit-btn:hover,#view-alyssa .save-btn:hover{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(232,95,150,.22)}
body:not(.admin) #view-alyssa .panel{padding:30px 32px}
body:not(.admin) #view-alyssa .panel-body{padding:0}
body:not(.admin) #view-alyssa .panel-body::before{margin-bottom:14px}
body:not(.admin) #view-alyssa .panel-body h4{font-size:clamp(30px,7vw,38px)}
body:not(.admin) #view-alyssa .panel-body .accent{display:block}
body:not(.admin) #view-alyssa .panel-heading{display:block;border-bottom:0;padding-bottom:0}
body:not(.admin) #view-alyssa .panel-content{line-height:1.8}
.sbf-text{font-family:var(--title);font-size:14px;color:var(--gold)}
.sbf-sub{letter-spacing:.18em}
@media (max-width:640px){
.th-token-row label{flex:0 0 100%}
.th-entry{gap:6px;padding:8px 9px}
.th-live-timer{font-size:36px}
.th-modal-box{max-height:92vh}
.th-modal .th-tabs{margin:12px 16px 12px}
.th-modal-head,.th-modal .th-tab-body{padding-left:16px;padding-right:16px}
#view-alyssa .panels{gap:18px}
#view-alyssa .panel-body{padding:26px 22px 24px}
#view-alyssa .panel-content{font-size:14px}
}

/* ════════════════════════════════════════════════════════════
   ✦ PREMIUM POLISH LAYER v2 ✦
   Appended last so it refines existing components without
   removing any original rule. Pure visual enhancement.
   Works identically on iPhone Safari + desktop.
   ════════════════════════════════════════════════════════════ */

/* ── Richer ambient background: deeper, more cinematic ── */
body::before{
  background:
    radial-gradient(120% 80% at 15% 0%,rgba(255,130,178,.20) 0%,transparent 55%),
    radial-gradient(100% 70% at 85% 10%,rgba(184,168,255,.16) 0%,transparent 50%),
    radial-gradient(90% 60% at 50% 100%,rgba(249,217,143,.10) 0%,transparent 55%),
    linear-gradient(180deg,#3a2143 0%,#2a1a37 50%,#211a38 100%) !important;
}

/* ── Panels: glass depth + animated gold top-edge shimmer ── */
.panel{
  box-shadow:var(--shadow-md) !important;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.panel::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(249,217,143,.5),rgba(255,143,178,.5),transparent);
  opacity:.5;pointer-events:none;
}
.panel:hover{
  box-shadow:var(--shadow-lg),0 0 30px -10px var(--rose-glow) !important;
  border-color:rgba(255,143,178,.30) !important;
  transform:translateY(-2px);
}

/* ── Stat cards: subtle inner glow + lift on hover ── */
.stat{box-shadow:var(--shadow-md) !important;transition:all .35s var(--ease-silk) !important}
.stat::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,rgba(255,210,226,.06),transparent 60%);
}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg) !important;border-color:rgba(255,143,178,.32) !important}

/* ── Stat numbers: faint gold luminosity ── */
.stat .value,.stat-value{text-shadow:0 0 22px rgba(249,217,143,.18)}

/* ── Nav items: silky slide + gradient active state ── */
.nav-item{transition:all .22s var(--ease-silk) !important}
.nav-item:hover{background:linear-gradient(90deg,rgba(255,143,178,.12),rgba(255,143,178,.03)) !important;transform:translateX(3px)}
.sb-nav-btn{transition:all .22s var(--ease-silk) !important}
.sb-nav-btn:hover{transform:translateX(2px)}

/* ── Login button: gradient + glow + spring press ── */
.login-btn{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 55%,#d4528a 100%) !important;
  box-shadow:0 8px 24px -6px var(--rose-glow),inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition:all .3s var(--ease-spring) !important;
}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px -6px var(--rose-glow),inset 0 1px 0 rgba(255,255,255,.3) !important;filter:brightness(1.05)}
.login-btn:active{transform:translateY(0) scale(.98)}

/* ── Login box: deeper premium shadow + glass ── */
.login-box{
  box-shadow:var(--shadow-lg),0 0 80px -20px var(--rose-glow) !important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ── Sidebar profile card "AlyssaFoxx": gold-rimmed glow ── */
.model-profile,.sb-profile,.profile-card{position:relative}

/* ── Targets tokens chip: brighter premium gradient ── */
.tg-row-tokens{
  background:linear-gradient(135deg,rgba(255,233,176,.16),rgba(255,143,178,.08)) !important;
  border-color:rgba(249,217,143,.36) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.12) !important;
}

/* ── Modals: refined glass + deeper backdrop ── */
.tg-modal-box,.modal-box{box-shadow:var(--shadow-lg),0 0 60px -16px var(--rose-glow) !important}

/* ── Buttons get silky transitions globally ── */
button{transition:all .2s var(--ease-silk)}

/* ── Premium focus rings (accessibility + polish) ── */
input:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 3px rgba(255,143,178,.18),inset 0 1px 2px rgba(0,0,0,.2) !important;
}

/* ── Scrollbar: a touch more luxurious ── */
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,143,178,.5),rgba(249,217,143,.42)) !important;
}

/* ── iPhone: respect safe areas + crisper text + no overscroll glow bugs ── */
@supports (-webkit-touch-callout:none){
  .panel,.stat,.tg-modal-box,.modal-box{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  body{overscroll-behavior-y:none}
}

/* ── Respect reduced-motion (premium = considerate) ── */
@media (prefers-reduced-motion:reduce){
  .panel:hover,.stat:hover,.nav-item:hover,.login-btn:hover{transform:none}
  *{animation-duration:.001ms !important;transition-duration:.08s !important}
}