:root{--primary:#7772d8;--muted:#77839d;--theme-soft:#eeedff;--theme-border:#e5e2f5;--hero-image:url('/snow.png');--theme-tint:#eef3ff;--theme-ink:#373e69;--theme-glow:#cbd6ff}
body{background:radial-gradient(ellipse at 90% 0%,var(--theme-glow),transparent 47%),linear-gradient(145deg,#fafaff,var(--theme-tint));background-attachment:fixed;color:var(--theme-ink)}
body[data-theme=sakura]{--primary:#bd6e94;--muted:#937d90;--theme-soft:#fcedf3;--theme-border:#f0dfeb;--hero-image:url('/sakura.png');--theme-tint:#fff4f5;--theme-ink:#604359;--theme-glow:#f9dce9}
.sidebar{background:linear-gradient(175deg,#ffffffed,var(--theme-tint));border-right:1px solid #fff;padding-top:26px}.brand{color:var(--primary)}.brand span{color:var(--theme-ink)}.workspace{background:#ffffff9e;border-color:var(--theme-border);border-radius:14px}.game-icon,.avatar{background:var(--theme-soft);color:var(--primary)}.nav{border-radius:12px}.nav.active{background:var(--theme-soft);color:var(--primary);box-shadow:inset 3px 0 var(--primary)}.nav:hover{background:var(--theme-soft)}.sidebar-bottom p{color:var(--muted)}header{background:#ffffff90;border-color:#ffffffad;backdrop-filter:blur(16px)}.page{padding-top:24px}.page-heading .eyebrow{color:var(--primary)}.heading-row{margin-bottom:22px}.heading-row p{color:var(--muted)}h1{color:var(--theme-ink)}.theme-switch{display:flex;background:#ffffffbd;border:1px solid var(--theme-border);border-radius:30px;padding:4px;gap:3px}.theme-switch button{border:0;background:transparent;color:var(--muted);font-size:12px;border-radius:22px;padding:7px 13px;white-space:nowrap}.theme-switch button[aria-pressed=true]{background:var(--primary);color:#fff;box-shadow:0 3px 10px var(--theme-glow)}
.anime-hero{position:relative;isolation:isolate;min-height:300px;overflow:hidden;border-radius:22px;margin-bottom:24px;background-color:var(--theme-tint);background-image:var(--hero-image);background-size:cover;background-position:center 27%;box-shadow:0 14px 38px #5e659c15;border:1px solid #ffffffbd}.anime-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f4f7fff2 0%,#f4f7ffd9 25%,#f4f7ff55 48%,transparent 70%)}body[data-theme=sakura] .anime-hero:before{background:linear-gradient(90deg,#fff4f2f5 0%,#fff4f2dc 25%,#fff4f255 48%,transparent 70%)}.hero-copy{position:relative;padding:32px 38px;width:57%;z-index:1}.hero-kicker{font-size:10px;letter-spacing:2.1px;color:var(--primary);font-weight:700}.hero-copy h2{font-size:32px;line-height:1.4;letter-spacing:3px;color:var(--theme-ink);margin:15px 0 11px;font-weight:750}.hero-copy p{color:var(--theme-ink);opacity:.78;font-size:12px;line-height:1.9;margin:0 0 18px}.hero-button{background:#ffffffcf;border:1px solid #fff;border-radius:24px;color:var(--theme-ink);padding:10px 19px;font-size:12px;box-shadow:0 5px 18px #70619710;display:flex;gap:24px;align-items:center}.hero-button span{color:var(--primary);font-size:17px}.hero-caption{position:absolute;right:22px;bottom:18px;padding:7px 13px;border:1px solid #ffffff63;border-radius:20px;background:#ffffffb8;backdrop-filter:blur(10px);color:var(--theme-ink);font-size:10px;letter-spacing:1px}.hero-sparkles{position:absolute;left:48%;top:38px;font-size:42px;color:#fff;animation:glimmer 5s ease-in-out infinite;pointer-events:none}@keyframes glimmer{50%{transform:translateY(8px) rotate(12deg);opacity:.4}}
.panel,.stat{background:#ffffffed;border-color:#ffffff;border-radius:16px;box-shadow:0 6px 22px #695e9610}.stat{position:relative;overflow:hidden}.stat:after{content:'✧';position:absolute;right:19px;bottom:9px;font-size:52px;color:var(--theme-soft);pointer-events:none}.stat strong{color:var(--theme-ink)}.stat-symbol{border-radius:11px}.stat-symbol.purple{background:var(--theme-soft);color:var(--primary)}.primary{background:var(--primary);border-color:var(--primary);border-radius:9px}.soft{background:var(--theme-soft);border-color:var(--theme-soft);color:var(--primary)}.button{border-radius:9px}.tag.neutral{background:var(--theme-soft);color:var(--muted)}.queue-segments i.used{background:var(--primary)}.role-avatar,.activity-icon{background:var(--theme-soft);color:var(--primary)}.role-avatar{border-radius:11px}.text-button{color:var(--primary)}th{background:var(--theme-tint);color:var(--muted)}tbody tr:hover{background:var(--theme-tint)}.search{background:#fff;border-color:var(--theme-border)}.demo-banner{background:#ffffffad;border-color:var(--theme-border);color:var(--theme-ink);border-radius:11px}.demo-banner button{color:var(--primary)}.notice{background:var(--theme-soft);color:var(--theme-ink)}dialog{border-color:#fff;border-radius:22px;background:linear-gradient(150deg,#fff,var(--theme-tint))}dialog::backdrop{background:#24254470;backdrop-filter:blur(8px)}#auth-dialog{padding-top:155px;background-image:linear-gradient(180deg,transparent 50px,#fffffff0 149px,#fff 220px),var(--hero-image);background-size:100% 100%,100% auto;background-position:top,center top;background-repeat:no-repeat}.auth-brand{display:none}#auth-dialog .eyebrow{color:var(--primary)}footer{color:var(--muted)}
@media(min-width:1450px){.anime-hero{min-height:328px;background-position:center 26%}.hero-copy{padding:36px 46px}.hero-copy h2{font-size:37px}.hero-copy p{font-size:13px}}
@media(max-width:1050px){.header-right{gap:10px}.header-right #clock,.header-line{display:none}.anime-hero{min-height:295px;background-position:60% 22%}.hero-copy{padding:27px;width:60%}.hero-copy h2{font-size:28px}.hero-copy p{font-size:11px}}
@media(max-width:600px){.anime-hero{min-height:285px;background-size:auto 100%;background-position:62% center}.hero-copy{padding:24px 19px;width:75%}.hero-copy h2{font-size:25px;letter-spacing:1px}.hero-kicker{font-size:8px;letter-spacing:1px}.hero-copy p{font-size:10px}.hero-caption{right:10px;bottom:10px;font-size:8px}.hero-sparkles{display:none}.theme-switch button{font-size:10px;padding:6px 9px}.header-right .mini{display:none}.theme-switch{padding:3px}.hero-button{padding:9px 14px;font-size:11px}.sidebar{padding-top:16px}}
@media(prefers-reduced-motion:reduce){.hero-sparkles{animation:none}}
.effects-toggle{border:0;background:transparent;color:var(--primary);font-size:11px;white-space:nowrap;padding:6px}.effects-toggle[aria-pressed=false]{color:var(--muted)}
#ambient-particles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:4;contain:strict}.particle{position:absolute;top:-25px;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 5px #a8bbec90;opacity:0;animation:drift-snow 18s linear infinite;will-change:transform;pointer-events:none}
body[data-theme=sakura] .particle{width:10px;height:14px;border-radius:85% 0 80% 20%;background:linear-gradient(135deg,#fff1f6,#eca6c7);box-shadow:0 0 1px #d881ab66;animation-name:drift-petal}
@keyframes drift-snow{0%{transform:translate3d(-15px,-25px,0);opacity:0}8%{opacity:.68}50%{transform:translate3d(40px,50vh,0);opacity:.5}92%{opacity:.65}100%{transform:translate3d(-25px,104vh,0);opacity:0}}
@keyframes drift-petal{0%{transform:translate3d(0,-25px,0) rotate(0deg);opacity:0}8%{opacity:.65}35%{transform:translate3d(65px,35vh,0) rotate(140deg);opacity:.5}70%{transform:translate3d(-25px,72vh,0) rotate(280deg);opacity:.6}100%{transform:translate3d(55px,104vh,0) rotate(430deg);opacity:0}}
.effects-off #ambient-particles{display:none}.effects-off .hero-sparkles{animation:none}body:has(dialog[open]) #ambient-particles{visibility:hidden}.page-hidden .particle{animation-play-state:paused}
@media(max-width:600px){.particle:nth-child(n+13){display:none}.effects-toggle{font-size:10px;padding:5px 2px}.header-right{gap:5px}header{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){#ambient-particles{display:none}}

.particle-0{left:5%;animation-delay:-0s;animation-duration:16s;}
.particle-1{left:42%;animation-delay:-7s;animation-duration:19s;}
.particle-2{left:79%;animation-delay:-14s;animation-duration:22s;}
.particle-3{left:16%;animation-delay:-21s;animation-duration:25s;}
.particle-4{left:53%;animation-delay:-5s;animation-duration:28s;}
.particle-5{left:90%;animation-delay:-12s;animation-duration:16s;}
.particle-6{left:27%;animation-delay:-19s;animation-duration:19s;}
.particle-7{left:64%;animation-delay:-3s;animation-duration:22s;}
.particle-8{left:1%;animation-delay:-10s;animation-duration:25s;}
.particle-9{left:38%;animation-delay:-17s;animation-duration:28s;}
.particle-10{left:75%;animation-delay:-1s;animation-duration:16s;}
.particle-11{left:12%;animation-delay:-8s;animation-duration:19s;}
.particle-12{left:49%;animation-delay:-15s;animation-duration:22s;}
.particle-13{left:86%;animation-delay:-22s;animation-duration:25s;}
.particle-14{left:23%;animation-delay:-6s;animation-duration:28s;}
.particle-15{left:60%;animation-delay:-13s;animation-duration:16s;}
.particle-16{left:97%;animation-delay:-20s;animation-duration:19s;}
.particle-17{left:34%;animation-delay:-4s;animation-duration:22s;}
.particle-18{left:71%;animation-delay:-11s;animation-duration:25s;}
.particle-19{left:8%;animation-delay:-18s;animation-duration:28s;}
.particle-20{left:45%;animation-delay:-2s;animation-duration:16s;}
.particle-21{left:82%;animation-delay:-9s;animation-duration:19s;}
.particle-22{left:19%;animation-delay:-16s;animation-duration:22s;}
.particle-23{left:56%;animation-delay:-0s;animation-duration:25s;}
body.auth-pending>.sidebar,body.auth-pending>main,body.auth-visible>.sidebar,body.auth-visible>main{visibility:hidden}body.auth-visible{overflow:hidden}
#auth-dialog{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:var(--theme-tint);box-shadow:none;color:var(--theme-ink);overflow:auto}
#auth-dialog[open]{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(470px,1fr)}#auth-dialog::backdrop{background:var(--theme-tint);backdrop-filter:none}
.login-scene{position:relative;min-height:100%;background-image:linear-gradient(0deg,#15243dc9,transparent 65%),var(--hero-image);background-size:cover;background-position:58% center;overflow:hidden}.login-scene:after{content:'✧';position:absolute;top:12%;left:12%;font-size:50px;color:#fff9;animation:glimmer 7s ease-in-out infinite}.login-orbit{position:absolute;inset:28px;border:1px solid #ffffff45;border-radius:3px;pointer-events:none}.login-story{position:absolute;bottom:10%;left:10%;right:8%;color:white}.login-edition{font-size:11px;letter-spacing:4px;color:#ffffffb3}.login-story h2{font-size:clamp(36px,4vw,64px)!important;line-height:1.35;font-weight:500;letter-spacing:4px;margin:26px 0!important}.login-story p{font-size:14px;letter-spacing:2px;color:#ffffffe0}.login-story-line{display:block;width:44px;height:1px;background:#ffffff80;margin:30px 0 22px}.login-story small{font-size:9px;letter-spacing:3px;color:#ffffffaa}
.login-panel{display:flex;flex-direction:column;min-height:100dvh;padding:38px clamp(28px,4vw,72px);background:radial-gradient(ellipse at 100% 0%,var(--theme-glow),transparent 55%),linear-gradient(150deg,#fff,var(--theme-tint))}.login-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.login-brand{display:flex;gap:10px;align-items:center;color:var(--primary);text-decoration:none;font-size:35px}.login-brand span{font-size:23px;color:var(--theme-ink);font-weight:650;letter-spacing:3px}.login-brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:3px;color:var(--muted)}#auth-form{width:100%;max-width:380px;margin:auto;padding:65px 0}.login-welcome{font-size:10px;letter-spacing:4px;color:var(--primary);margin-bottom:16px}#auth-title{font-size:30px;font-weight:600;letter-spacing:1px;margin-bottom:12px}#auth-description{font-size:13px;color:var(--muted);margin-bottom:36px}#auth-form label{font-size:12px;color:var(--theme-ink);margin:23px 0}#auth-form input{height:50px;padding:13px 15px;border-radius:10px;background:#ffffffb8;border:1px solid var(--theme-border);font-size:14px;box-shadow:0 2px 5px #28364a03;transition:border-color .2s,box-shadow .2s}#auth-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--theme-soft)}.login-password{display:block;position:relative}.login-password input{padding-right:65px!important}#password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--primary);font-size:12px;padding:8px}#auth-error{min-height:22px;margin:0}#auth-submit{height:50px;font-size:14px;letter-spacing:2px;box-shadow:0 7px 20px color-mix(in srgb,var(--primary) 22%,transparent);border-radius:10px}.login-divider{display:flex;align-items:center;gap:13px;font-size:10px;color:var(--muted);margin-top:30px}.login-divider:before,.login-divider:after{content:'';height:1px;background:var(--theme-border);flex:1}#auth-form #demo{margin-top:12px;font-size:12px}.login-help{text-align:center;font-size:11px;color:var(--muted);margin-top:18px}.login-footer{display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:1px;color:var(--muted)}
@media(min-width:1800px){.login-panel{padding-inline:90px}#auth-form{max-width:420px}}
@media(max-width:900px){#auth-dialog[open]{grid-template-columns:1fr}.login-scene{display:none}.login-panel{padding:26px;min-height:100dvh;background-image:linear-gradient(#ffffffdb,#ffffffef),var(--hero-image);background-size:cover;background-position:center}#auth-form{padding:55px 0}.login-top .theme-switch button{padding:7px 9px}.login-footer{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.login-scene:after{animation:none}}

.brand-mark{width:38px;height:38px;flex-shrink:0;display:block;color:var(--primary)}.login-brand .brand-mark{width:36px;height:36px}
