:root{--bg:#07111f;--panel:#0c192a;--card:#101f32;--text:#f5f8fc;--muted:#aebbd0;--line:#fff;--accent:#4381ff;--soft:#152945;--shadow:#0004}
html[data-theme=light]{--bg:#f4f7fb;--panel:#fff;--card:#fff;--text:#0a1930;--muted:#52627a;--line:#0a1930;--soft:#e8effc;--shadow:#14213d16}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI Variable","Segoe UI",system-ui,sans-serif;font-size:16px}
body{margin:0;background:var(--bg);min-width:320px;letter-spacing:.005em}
button,select,input{font:inherit}
button,select{min-height:44px}
header{height:72px;padding:0 max(24px,calc((100% - 1320px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid color-mix(in srgb,var(--text) 15%,transparent);background:var(--bg);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}
.brand span>*{display:block}.brand b{font-weight:700}.brand small{color:var(--muted);font-size:.72rem}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700}
nav{display:flex;align-items:center;gap:9px}
button{border:0;border-radius:10px;padding:.65rem 1rem;background:var(--soft);color:var(--text);cursor:pointer;font-weight:600}
.icon{width:44px;padding:0}
.welcome{width:min(1320px,calc(100% - 48px));margin:auto;padding:clamp(2.25rem,4.5vw,4.25rem) 0}
.eyebrow{font-size:.72rem;letter-spacing:.15em;font-weight:650;color:var(--accent);text-transform:uppercase}
.welcome h1{font-size:clamp(2.45rem,5vw,4.5rem);line-height:1.04;letter-spacing:-.025em;margin:.75rem 0;font-weight:650}
.welcome em{font-style:normal;color:var(--accent)}
.lead,.section-title p,.message p,article>p{color:var(--muted);line-height:1.65}
.lead{font-size:clamp(1rem,1.6vw,1.15rem);margin-bottom:0}
#shell{width:min(1320px,calc(100% - 48px));margin:auto;padding:0 0 4.5rem}
.app-intro{display:none;align-items:end;justify-content:space-between;gap:2rem;padding:clamp(2.25rem,4vw,3.5rem) 0 2rem;border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent);margin-bottom:2rem}
.authenticated .welcome{display:none}
.authenticated .app-intro{display:flex}
#greeting{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.15;font-weight:650;margin:0 0 .55rem}
.app-intro>div>p{color:var(--muted);line-height:1.55;margin:0}
.workspace-picker{flex:0 0 min(340px,32vw);margin:0}
.workspace-picker span{display:block;color:var(--muted);font-size:.78rem;letter-spacing:.06em;margin-bottom:.45rem}
.workspace-picker select{width:100%}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:1.5rem}
.section-title h2{font-size:clamp(1.55rem,2.6vw,2.15rem);margin:.4rem 0;font-weight:650}
.section-title p{margin:0}
select,input{border:1px solid color-mix(in srgb,var(--text) 24%,transparent);border-radius:10px;background:var(--panel);color:var(--text);padding:.75rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:1.4rem}
.card,.message{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:1.5rem;box-shadow:0 12px 34px var(--shadow);min-width:0}
.card .app-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:1.35rem}
.card h3{font-size:1.2rem;margin:1.2rem 0 .5rem}
.card p{color:var(--muted);line-height:1.55;min-height:3rem}
.card .status{font-size:.8rem;color:var(--accent);font-weight:650}
.discover-title{margin-top:3rem}
.discover{grid-template-columns:repeat(3,minmax(0,1fr))}
.discover .card{border-color:color-mix(in srgb,var(--line) 45%,transparent);box-shadow:none}
.skeleton{height:190px;margin-top:1.4rem;border:1.5px solid var(--line);border-radius:18px;background:linear-gradient(90deg,var(--card),var(--soft),var(--card));background-size:200%;animation:p 1.4s infinite}
@keyframes p{to{background-position:-200%}}
.message{margin-top:1.4rem}.message h3{margin-top:0}
dialog{width:min(450px,calc(100% - 28px));padding:0;border:0;border-radius:20px;background:var(--panel);color:var(--text);box-shadow:0 30px 90px #0008}
dialog::backdrop{background:#020711cc}
dialog form,dialog article{padding:2rem;position:relative}
dialog h2{font-size:1.8rem;margin:.6rem 0 1.2rem}
label{display:block;font-weight:600;margin:1rem 0}
input{width:100%;display:block;margin-top:.5rem}
.primary{width:100%;background:var(--accent);color:#fff}
.x{position:absolute;right:12px;top:10px;background:transparent;font-size:1.5rem}
.form-error{color:#ff8d8d;min-height:1.4rem}
.user-menu{position:relative}
.menu{position:absolute;right:0;top:50px;width:245px;background:var(--panel);border:1px solid color-mix(in srgb,var(--text) 20%,transparent);border-radius:14px;padding:.5rem;box-shadow:0 16px 50px var(--shadow)}
.menu button{display:block;width:100%;text-align:left;background:transparent}
.admin-list{line-height:2;color:var(--muted)}
footer{text-align:center;color:var(--muted);padding:2rem;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
@media(max-width:1024px){.grid,.discover{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){header{height:70px}.app-intro{align-items:stretch;flex-direction:column;gap:1.25rem;padding-top:2.25rem}.workspace-picker{flex:auto;width:100%}.section-title{align-items:stretch;flex-direction:column;gap:1rem}.welcome{padding-top:2.5rem}.grid,.discover{grid-template-columns:1fr}.card p{min-height:auto}}
@media(max-width:430px){.brand small{display:none}.brand b{font-size:.9rem}header{padding:0 14px}.welcome,#shell{width:calc(100% - 32px)}.welcome h1{letter-spacing:-.015em}.card{padding:1.25rem}}
@media(max-width:340px){.logo{width:38px;height:38px}.brand b{font-size:.82rem}nav{gap:4px}button{padding:.6rem .75rem}}