/* Original CSS adaptation of the Spotlight Card and animated hero ideas
   featured at https://21st.dev/community/components. No React dependency. */
:root{--bg:#080a11;--panel:#111522;--line:#ffffff13;--muted:#9ba7bd;--accent:#9580ff;--accent2:#6de2d1}
html{color-scheme:dark;scroll-padding-top:100px}
body{background:radial-gradient(ellipse at 0 0,#34245560,transparent 48%),radial-gradient(ellipse at 100% 40%,#17433e30,transparent 46%),#080a11;background-attachment:fixed;line-height:1.6}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#000,transparent 75%)}
.wrap{width:min(1280px,calc(100% - 64px))}main.wrap{padding-bottom:64px}
.top{margin-top:16px;border:1px solid #ffffff15;border-radius:20px;background:#0e111deF;box-shadow:0 12px 40px #0003;gap:18px;backdrop-filter:blur(20px)}
.brand{letter-spacing:-1px;flex-shrink:0}.brand img{border-radius:12px}.nav{min-width:0}.nav .hide-mobile{display:none}.menu.desktop-menu{background:transparent;border:0;padding:0}.menu a{transition:background .2s,color .2s;white-space:nowrap}.menu a[aria-current=page]{background:#9c86ff20;color:#d4c9ff;box-shadow:inset 0 0 0 1px #a48aff30}
.hero{padding:52px 0 20px;gap:32px}.hero h1{font-size:clamp(32px,4vw,54px);letter-spacing:-1.8px;line-height:1.25;overflow-wrap:anywhere}.hero p{margin-bottom:0}.eyebrow{font-size:11px;letter-spacing:3px;color:#b9a8ff}.hero-note{font-size:13px;background:#ffffff03;border-color:#ffffff0e;max-width:310px;padding:18px 20px}.hero-note strong{display:block;margin-bottom:4px;color:#d7def0}
.quick-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 28px}.quick-actions .button{gap:24px}.workspace-label{margin-left:auto;font-size:10px;letter-spacing:2px;color:#7c879e}
.card{background:radial-gradient(550px circle at var(--spot-x,50%) var(--spot-y,0%),#a88cff0a,transparent 65%),linear-gradient(145deg,#151927,#0f131e);border:1px solid #ffffff12;border-radius:24px;box-shadow:0 12px 35px #0002,inset 0 1px #ffffff04;padding:26px;transition:border-color .25s,box-shadow .25s}
.card:hover{transform:none;border-color:#aa96ff42;box-shadow:0 16px 42px #0003}.card h2,.section h2{font-size:21px;letter-spacing:-.5px;line-height:1.5}.section-head{margin-bottom:20px}.section{padding:22px 0}.stats{gap:18px}.stat{min-height:165px;padding:28px}.stat strong{font-size:clamp(30px,3.5vw,46px);letter-spacing:-1.8px;font-variant-numeric:tabular-nums;line-height:1.3;margin-top:20px}.stat:first-child{background:linear-gradient(115deg,#a78bfa,#8b7beb 55%,#789bd6);border-color:#c9baff;color:#161329}.stat:first-child .muted{color:#292344}.stat:first-child::after{content:"";width:200px;height:200px;border:28px solid #ffffff14;border-radius:50%;position:absolute;right:-55px;top:-70px;pointer-events:none}.stat:nth-child(2)::after,.stat:nth-child(3)::after{content:"↗";position:absolute;right:26px;top:22px;color:#bda8ff;font-size:23px}.stat:nth-child(3)::after{content:"✦";color:#6de2d1}
.summary-box{padding:22px;border-radius:20px;background:#ffffff03;border-color:#ffffff12}.summary-box strong{font-size:28px;font-variant-numeric:tabular-nums}.summary-box small{display:block;margin-top:10px}.account{padding:19px 0;border-bottom-color:#ffffff0c}.avatar{border-radius:16px;border:1px solid #c1b5ff1c;background-color:#322a53}.pill{border:1px solid #b8a3ff20;background:#a888ff12}.global-search input,.form input,.form select,.form textarea{font:inherit;background:#090d16;border-color:#ffffff1a;min-height:48px;border-radius:13px}.global-search{margin-bottom:20px}.global-search input{box-shadow:none;padding-left:18px}.form{gap:14px}.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid #ae97ff70;outline-offset:2px}.check{min-height:52px;background:#0b0f19;border-color:#ffffff15}.check:has(input:checked){background:#a58aff15;border-color:#b199ff;box-shadow:0 0 0 1px #b199ff25}
.button,button{border-radius:12px;transition:filter .2s,box-shadow .2s,background .2s;background:linear-gradient(110deg,#9b80f7,#7d68e1);box-shadow:inset 0 1px #ffffff20;color:#fff}.button:hover,button:hover{transform:none;box-shadow:0 5px 22px #9e7bff26}.button.ghost,button.ghost{background:#ffffff05;border-color:#ffffff18;box-shadow:none}.button:active,button:active{filter:brightness(.9)}:focus-visible{outline:2px solid #8aeada;outline-offset:4px}.danger{background:linear-gradient(110deg,#d53b59,#a72240)}.input-icon,.input-icon:hover{transform:translateY(-50%)}dialog{border-color:#a78bfa35;border-radius:24px;box-shadow:0 30px 100px #0009}dialog[open]{animation:dialog-arrive .2s ease-out}dialog::backdrop{background:#040610b8;backdrop-filter:blur(8px)}
.shell{width:min(1160px,calc(100% - 48px));margin:40px auto;border:1px solid #ffffff18;border-radius:30px;background:#10131e;grid-template-columns:1.12fr 1fr;box-shadow:0 32px 100px #0006}.intro{padding:46px;background:radial-gradient(ellipse at 15% 20%,#7150ad40,transparent 75%),#141525;position:relative}.intro::after{display:none}.experience-tag{display:flex;align-items:center;gap:8px;color:#bcb1db;font-size:10px;letter-spacing:2px}.experience-tag>span{height:6px;width:6px;background:#87e2c6;border-radius:50%;box-shadow:0 0 12px #87e2c6}.wordmark{margin:30px 0 24px;gap:12px}.wordmark img{height:44px;width:44px}.wordmark strong{font-size:36px;line-height:1.3}.intro-title{font-size:clamp(38px,4.5vw,62px);line-height:1.3;letter-spacing:-2px;margin:0;color:#f4efff}.intro-title>span{color:#ad93ff}.intro>p{font-size:14px;line-height:1.9;margin:18px 0 26px}.split-scene{position:relative;max-width:390px;border:1px solid #bca6ff35;border-radius:22px;padding:22px;background:linear-gradient(135deg,#2c2746,#1a2334);box-shadow:0 20px 45px #0004;animation:card-float 7s ease-in-out infinite}.sample-caption{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#b7acca}.sample-caption>span{color:#a3e4d1}.sample-title{font-size:17px;font-weight:700;margin:14px 0 2px}.sample-amount{font-size:34px;letter-spacing:-1px;font-weight:800}.sample-amount>span{font-size:12px;font-weight:400;color:#a9a2bf;letter-spacing:0}.split-people{display:flex;gap:8px;margin:16px 0}.split-people>span{border:1px solid #ffffff15;border-radius:9px;background:#ffffff06;padding:6px 12px;color:#ddd4f3;font-size:11px}.sample-bottom{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #ffffff12;padding-top:14px;font-size:11px;color:#c5bdd7}.sample-bottom>span:last-child{color:#9bdfca}.intro-features{display:flex;justify-content:space-between;gap:8px;margin-top:28px;color:#9a90ad;font-size:10px;letter-spacing:.4px}.login{padding:48px}.login h2{font-size:38px;line-height:1.35;letter-spacing:-1px}.login a:not(.button){color:#c1abff}.login .tabs{grid-template-columns:1fr 1fr}.login .muted{font-size:14px}.login .safe{line-height:1.7}.reveal-enter{animation:content-arrive .55s both;animation-delay:var(--enter-delay,0ms)}
@keyframes content-arrive{from{opacity:.4;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes dialog-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes card-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(min-width:801px){.mobile-menu{display:none!important}.desktop-menu{display:flex}.top .nav{gap:6px}.desktop-menu a{padding:9px 8px;font-size:12px}.nav>form button{font-size:12px;padding:10px}}
@media(max-width:1000px) and (min-width:801px){.brand{font-size:19px}.brand img{width:28px;height:28px}.top{gap:8px;padding:10px}.wrap{width:calc(100% - 24px)}.desktop-menu a{padding:8px 5px;font-size:11px}}
@media(max-width:800px){.wrap{width:calc(100% - 24px)}.top{margin-top:6px;min-height:64px;padding:10px 12px;gap:8px;border-radius:16px;flex-wrap:nowrap}.brand{font-size:20px;gap:7px}.brand img{width:30px;height:30px}.nav{gap:6px;flex-shrink:0}.nav button{font-size:12px;padding:10px;min-height:40px}.desktop-menu{display:none!important}.mobile-menu{display:none;position:fixed;top:82px;left:12px;right:12px;max-height:calc(100dvh - 100px);padding:10px;overflow:auto;z-index:50;background:#121623;box-shadow:0 20px 80px #000a;border:1px solid #ac94ff30;border-radius:20px}.mobile-menu.open{display:flex;flex-direction:column;animation:dialog-arrive .18s ease-out}.mobile-menu a{width:100%;padding:13px 16px;min-height:48px}.hero{padding-top:30px}.hero h1{font-size:34px}.hero-note{max-width:none;margin-top:18px}.workspace-label{display:none}.stats{grid-template-columns:1fr;gap:12px}.stat{min-height:132px;padding:22px}.stat strong{margin-top:10px;font-size:36px}.card{padding:20px;border-radius:20px}.quick-actions{gap:8px}.quick-actions .button{font-size:13px;gap:12px}.section{padding:16px 0}.summary-box{padding:20px}.shell{grid-template-columns:1fr;width:calc(100% - 24px);margin:12px auto}.intro,.login{padding:28px}.intro-title{font-size:42px}.wordmark{margin:22px 0 18px}.wordmark strong{font-size:32px}.intro>p br{display:none}.split-scene{max-width:none;animation:none}.intro-features{margin-top:20px}.login h2{font-size:32px}.bill-actions form.upload{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.bill-actions form.upload input{width:100%;min-width:0;max-width:100%}.account{gap:12px}.summary-grid,.grid,.profile-layout,.workbench,.admin-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){.brand{font-size:17px}.brand img{width:26px;height:26px}.top{padding:9px}.nav button{font-size:11px;padding:8px}.intro,.login{padding:22px}.intro-title{font-size:36px}.sample-bottom{flex-wrap:wrap}.intro-features{font-size:9px}}
.shell .check{border-radius:12px;padding:10px 12px}.shell .check input[type=checkbox]{min-height:18px;width:18px;height:18px;accent-color:#a48afa}.shell .panel{min-width:0}.shell .input-icon{position:absolute}
@media(max-width:800px){.shell .panel{padding:28px}.split-scene{display:none}.intro-features{margin-top:14px}.intro>p{margin-bottom:12px}}
/* Black and rose: quiet surfaces, clear hierarchy, one accent. */
:root{--bg:#09090b;--panel:#141416;--soft:#202024;--line:#ffffff17;--muted:#a4a0a8;--accent:#ee8ab6;--accent2:#f4a6c9}
body{background:radial-gradient(ellipse at 5% 0,#e969aa0b,transparent 42%),#09090b;color:#f5f2f4}body::before{display:none}
.top{background:#111113ed;border-color:#ffffff12}.brand span,.wordmark strong{background:none;color:#f3bbd3}.eyebrow{color:#e7a6c4}.menu a[aria-current=page]{background:#ef8ab617;color:#f3bbd3;box-shadow:inset 0 0 0 1px #ee8ab627}
.card,.summary-box{background:radial-gradient(500px circle at var(--spot-x,50%) var(--spot-y,0%),#ef8ab606,transparent 70%),#141416;border-color:#ffffff13;box-shadow:none}.card:hover,.summary-box:hover{border-color:#ee8ab640;box-shadow:none}.hero-note{background:#ffffff02}.hero h1{letter-spacing:-1px}.stat:first-child{background:#eaa5c3;border-color:#eaa5c3;color:#29151f}.stat:first-child .muted{color:#4f2b3d}.stat:first-child::after{border-color:#fff2}.stat:nth-child(2)::after,.stat:nth-child(3)::after{color:#eda6c7}
.button,button,.tab.active,.button[type=submit],button[type=submit]{background:#e9a0c0;color:#25131c;border-color:#efb6d1;box-shadow:none}.button:hover,button:hover{box-shadow:0 4px 20px #ea88b514}.button.ghost,button.ghost{background:#ffffff04;color:#eee8ed;border-color:#ffffff1c}.danger{background:#b92d4d;color:#fff}.tab{background:transparent;color:var(--muted)}.tabs,.menu.desktop-menu{box-shadow:none}.tab.active{background:#e9a0c0;color:#25131c}.button::before,button::before{display:none}.input-icon{background:#292329;color:#f3d5e3}.pill{background:#ee8ab610;color:#f1b9d2;border-color:#ee8ab623}.avatar,.profile-preview{background-color:#31242d;background-image:linear-gradient(135deg,#43303d,#251e25);color:#f5bbd6;border-color:#ee8ab623}
.form input,.form select,.form textarea,.global-search input{background:#0e0e11;border-color:#ffffff18}.form input:focus,.form select:focus,.form textarea:focus{outline-color:#ee8ab680}.check{background:#101013}.check:has(input:checked){background:#ee8ab610;border-color:#ee8ab6;box-shadow:none}.check:has(input:checked)::after{color:#f4b2d0}.form input[type=file],.upload input[type=file]{background:#101013}.form input[type=file]::file-selector-button,.upload input[type=file]::file-selector-button{background:#272128;border-color:#4b3543;color:#f6d7e5}.page-link.active{background:#e9a0c0;color:#25131c}.shell{background:#121214;border-color:#ffffff15}.intro{background:radial-gradient(ellipse at 0 0,#b4567c20,transparent 75%),#171217}.intro-title>span{color:#eaa5c3}.experience-tag{color:#cba7b8}.experience-tag>span{background:#eaa5c3;box-shadow:0 0 12px #eaa5c344}.split-scene{background:linear-gradient(135deg,#31232d,#1c181e);border-color:#eaa5c330}.sample-caption>span,.sample-bottom>span:last-child{color:#e9b8cf}.login a:not(.button){color:#efb3cf}.shell .check input[type=checkbox]{accent-color:#eaa5c3}.intro-features{color:#baa3af}dialog{border-color:#ee8ab633}
.profile-heading{padding:34px 0 0}.profile-heading h1{font-size:clamp(28px,3vw,38px);margin:8px 0}.profile-heading p{margin:4px 0 0}#my-profile{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px}.profile-settings-column{display:grid;gap:20px;min-width:0;align-content:start}.profile-setting{min-width:0}.profile-setting h2{margin:0}.profile-setting>p{font-size:13px;margin:7px 0 22px}.profile-setting .form{margin:0;padding:0;gap:10px}.profile-setting .form+.form{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}.profile-setting .form>button{justify-self:start;min-height:42px;font-size:13px;padding:11px 18px}.profile-setting #avatar-form{grid-template-columns:1fr 1fr}.profile-setting #avatar-preview{grid-column:1/-1;width:88px;height:88px;border-radius:50%;margin-bottom:8px}.profile-setting #avatar-form>label,.profile-setting #avatar-input{grid-column:1/-1}.profile-setting #avatar-form>button{width:100%}.profile-setting #avatar-open-crop{background:#ffffff05;color:#eee3e9;border:1px solid #ffffff1c}.profile-setting .field-row{grid-template-columns:minmax(0,1fr) auto auto}.profile-setting label{font-size:13px}.profile-setting .toolbar .button{background:#ffffff05;color:#f0c0d6;border:1px solid #ee8ab633}.password-settings{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.password-settings summary{cursor:pointer;color:#efb6d0;padding:6px 0;min-height:44px}.password-settings[open] summary{margin-bottom:14px}.profile-setting .input-icon{color:#f5d2e3;background:#30232c;box-shadow:none}.profile-setting .field-status:empty{display:none}
@media(max-width:800px){.mobile-menu{background:#181419;border-color:#ee8ab633}#my-profile{grid-template-columns:minmax(0,1fr);gap:16px}.profile-settings-column{gap:16px}.profile-setting .field-row{grid-template-columns:minmax(0,1fr) auto}.profile-setting .field-row>input{grid-column:1/-1}.profile-setting .field-row>button{width:auto}.profile-setting #avatar-form{grid-template-columns:minmax(0,1fr)}.profile-setting .form>button{width:100%}.profile-setting #avatar-form>button{grid-column:1/-1}.profile-heading{padding-top:24px}}
.stat-hint{display:block;margin-top:16px;font-size:12px;opacity:.7;transition:translate .2s,opacity .2s}.stat:hover .stat-hint{opacity:1;translate:4px 0}.stat:focus-visible{outline-color:#f4bdd7}.stat:first-child::after{animation:rose-orbit 9s ease-in-out infinite}.card:not(.stat):hover{background:radial-gradient(480px circle at var(--spot-x,50%) var(--spot-y,0%),#ef8ab615,transparent 70%),#141416}.scroll-arrive{animation:content-arrive .5s both}button:not(.input-icon),.button{position:relative;overflow:hidden}.tap-ripple{position:absolute;pointer-events:none;width:20px;height:20px;border-radius:50%;background:#ffffff40;translate:-50% -50%;animation:tap-wave .5s ease-out forwards}.check:has(input:checked){transition:background .2s,border-color .2s,box-shadow .2s}.check:has(input:checked)::after{animation:check-pop .22s ease-out}.stat strong,.summary-box strong{font-variant-numeric:tabular-nums}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@keyframes tap-wave{to{transform:scale(22);opacity:0}}@keyframes rose-orbit{50%{translate:-12px 16px;rotate:12deg}}@keyframes check-pop{from{scale:.5}to{scale:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}