:root {
  color-scheme: light;
  --primary-hue: 90deg;
  --secondary-hue: calc(var(--primary-hue) - 30deg);
  --primary: oklch(.67 .16 var(--primary-hue));
  --primary-hover: oklch(.57 .14 var(--primary-hue));
  --primary-soft: oklch(.96 .035 var(--primary-hue));
  --primary-outline: oklch(.82 .065 var(--primary-hue));
  --ink: oklch(.23 .035 var(--primary-hue));
  --navy: oklch(.27 .055 var(--primary-hue));
  --muted: oklch(.49 .035 var(--primary-hue));
  --line: oklch(.86 .026 var(--primary-hue));
  --surface: oklch(.995 .006 var(--primary-hue));
  --background: oklch(.965 .015 var(--primary-hue));
  --shadow-color: oklch(.30 .04 var(--primary-hue) / .10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(ellipse at 50% -25%,var(--primary-soft) 0,transparent 54%),var(--background); }
.topbar { height:76px; padding:0 max(24px,calc((100vw - 1160px)/2)); display:flex; align-items:center; gap:44px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:20px; font-weight:800; letter-spacing:-.7px; }
.brand>span:last-child>span { color:var(--primary-hover); }
.brand-mark { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:var(--ink); background:linear-gradient(145deg,var(--primary),var(--primary-hover)); font-size:19px; }
nav { display:flex; gap:28px; }
nav a { color:var(--muted); text-decoration:none; font-size:13px; font-weight:650; }
nav a:hover,.nav-current { color:var(--primary-hover); }
.account { margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--muted); font-size:13px; }
.account button { border:0; background:none; color:var(--primary-hover); font:inherit; font-weight:700; cursor:pointer; }
.shell { width:min(1120px,calc(100% - 40px)); margin:54px auto 90px; }
.welcome { padding:35px 38px; min-height:210px; border:1px solid oklch(.35 .06 var(--primary-hue)); border-radius:24px; background:linear-gradient(116deg,oklch(.26 .045 var(--primary-hue)),oklch(.34 .07 var(--primary-hue)) 62%,oklch(.42 .095 var(--primary-hue))); color:var(--surface); display:flex; justify-content:space-between; align-items:center; gap:24px; box-shadow:0 18px 44px var(--shadow-color); }
.eyebrow { margin:0 0 9px; color:oklch(.86 .09 var(--primary-hue)); font-weight:800; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.welcome h1 { margin:0; font-size:clamp(30px,4vw,43px); line-height:1.1; letter-spacing:-1.6px; }
.welcome p:not(.eyebrow) { max-width:530px; margin:12px 0 0; color:oklch(.93 .025 var(--primary-hue)); font-size:14px; line-height:1.65; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-weight:750; font-size:13px; text-decoration:none; white-space:nowrap; box-shadow:0 3px 9px var(--shadow-color); transition:transform .15s,border-color .15s; }
.button:hover { transform:translateY(-1px); border-color:var(--primary-outline); color:var(--primary-hover); }
.button.primary { border-color:var(--primary); color:var(--ink); background:var(--primary); }
.signin { margin-top:28px; padding:24px; display:flex; align-items:center; gap:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 4px 16px var(--shadow-color); }
.signin-icon { width:48px; height:48px; flex:none; border-radius:15px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-hover); font-size:23px; }
.signin h2,.section-heading h2 { margin:0; font-size:18px; letter-spacing:-.4px; }
.signin p { max-width:560px; margin:6px 0 0; color:var(--muted); font-size:13px; }
.signin .button { margin-left:auto; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin:38px 0 17px; }
.section-heading .eyebrow { color:var(--primary-hover); }
.count { color:var(--muted); font-size:12px; }
.app-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:14px; }
.app-tile { min-height:162px; padding:20px 14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; transition:transform .18s,border-color .18s,box-shadow .18s; }
.app-tile:hover { transform:translateY(-3px); border-color:var(--primary-outline); box-shadow:0 12px 25px var(--shadow-color); }
.app-icon { width:66px; height:66px; display:grid; place-items:center; overflow:hidden; border-radius:20px; background:var(--primary-soft); color:var(--primary-hover); font-size:25px; font-weight:800; box-shadow:0 5px 14px var(--shadow-color); }
.app-icon img { width:100%; height:100%; object-fit:cover; }
.app-tile strong { font-size:13px; line-height:1.35; }
.empty { margin-top:12px; padding:46px 20px; text-align:center; }
.empty-icon { color:var(--primary-hover); font-size:34px; }
.empty h3 { margin:10px 0 5px; font-size:18px; }
.empty p { margin:0 0 18px; color:var(--muted); font-size:13px; }
.notice { margin-top:18px; padding:14px; border:1px solid oklch(.82 .10 calc(var(--primary-hue) + 5deg)); border-radius:12px; background:oklch(.97 .045 calc(var(--primary-hue) + 5deg)); color:oklch(.38 .09 calc(var(--primary-hue) + 5deg)); font-size:13px; }
footer { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:18px 0 28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
footer nav { gap:18px; }
footer nav a { font-size:12px; }
[hidden] { display:none !important; }
@media(max-width:650px) {
  .topbar { height:auto; min-height:68px; padding:12px 18px; gap:20px; flex-wrap:wrap; }
  .topbar nav { order:3; width:100%; gap:22px; padding:5px 0; }
  .account { font-size:12px; }
  .shell { width:calc(100% - 28px); margin:25px auto 54px; }
  .welcome { align-items:flex-start; flex-direction:column; padding:26px 23px; }
  .signin { align-items:flex-start; flex-wrap:wrap; padding:18px; }
  .signin .button { margin-left:0; }
  .app-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  footer { width:calc(100% - 28px); gap:20px; align-items:flex-start; flex-direction:column; }
  footer nav { flex-wrap:wrap; }
}