/* The crystal finish is shared by every route and both colour themes. */
body {
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse at 74% 2%,var(--sky-glow),transparent 48%),
    radial-gradient(ellipse at 28% 80%,var(--violet-glow),transparent 52%),
    radial-gradient(ellipse at 100% 72%,var(--warm-glow),transparent 40%),
    linear-gradient(125deg,transparent 20%,rgba(255,255,255,.10) 20.1%,transparent 46%,rgba(255,255,255,.07) 46.1%,transparent 75%);
  background-attachment:fixed;
}
.panel,.skill-card,.stat-card,.notebook-banner,.topbar {
  background:linear-gradient(135deg,var(--glass-top),var(--glass-bottom));
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 rgba(255,255,255,.06),var(--shadow);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  backdrop-filter:blur(26px) saturate(145%);
}
.panel-header { background:linear-gradient(110deg,rgba(255,255,255,.08),transparent); }
.stat-card { border-radius:17px; }
.skill-card { border-radius:22px; }
.skill-card:hover { border-color:var(--skill);box-shadow:inset 0 1px 0 var(--glass-highlight),0 18px 40px rgba(40,77,127,.13);transform:translateY(-3px); }
.skill-icon,.stat-icon,.empty-icon {
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 1px var(--glass-highlight),0 5px 12px rgba(42,73,115,.04);
}
.skill-icon { border-radius:15px; }
.badge,.count { background:var(--surface-soft);border-color:var(--line); }
.goal-card {
  background:linear-gradient(120deg,rgba(20,40,71,.94),rgba(48,79,116,.76));
  border:1px solid rgba(195,222,255,.48);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 1px 0 0 rgba(255,255,255,.12),0 16px 36px rgba(34,68,118,.14);
  -webkit-backdrop-filter:blur(24px) saturate(145%);backdrop-filter:blur(24px) saturate(145%);
}
.goal-card:after {
  inset:0;width:auto;height:auto;border:0;border-radius:inherit;box-shadow:none;
  background:linear-gradient(128deg,transparent 41%,rgba(198,224,255,.10) 41.2%,rgba(198,224,255,.025) 64%,transparent 64.2%);
}
.goal-card .target-icon { border-color:rgba(235,242,255,.34);background:rgba(224,235,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.13); }
.goal-number small,.goal-card .eyebrow { color:#c2d3ea; }
.goal-copy p { color:#cad8ed; }
.goal-copy .button { background:linear-gradient(135deg,#fffffff2,#e8f1ffdb);border-color:#ffffffb3;box-shadow:inset 0 1px 0 #fff,0 4px 12px #0000000a; }
.topbar { margin:14px 16px 0;border-radius:17px;height:70px;padding:0 26px; }
.topbar-left { display:flex;align-items:center;gap:19px;min-width:0; }
.main { margin-left:272px;transition:margin-left .24s ease; }
.content { padding:34px 30px 28px; }
.sidebar {
  inset:14px auto 14px 14px;width:244px;padding:25px 17px 19px;
  border:1px solid rgba(207,228,255,.30);border-radius:23px;
  background:linear-gradient(148deg,rgba(56,79,113,.80),var(--nav) 35%,rgba(22,42,70,.91));
  box-shadow:inset 0 1px 0 rgba(240,249,255,.22),inset 1px 0 0 rgba(222,237,255,.06),0 18px 48px rgba(21,39,68,.17);
  -webkit-backdrop-filter:blur(32px) saturate(150%);backdrop-filter:blur(32px) saturate(150%);
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#60718a transparent;
  transition:transform .24s ease,visibility .24s;
}
.brand { padding:0 4px;gap:10px; }
.brand > div { min-width:0; }
/* Frame the supplied screenshot around the badge, hiding its corner controls. */
.brand-mark {
  display:block;flex:none;width:48px;height:48px;padding:0;
  object-fit:cover;object-position:70% 50%;border-radius:50%;
  background:#100d09;border:1px solid #ffc36e66;
  box-shadow:0 3px 13px #f5803526;
}
.brand-name { font-size:1rem;letter-spacing:.8px;white-space:nowrap; }
.brand-sub { color:#b3c2d9;letter-spacing:.7px;white-space:nowrap; }
.nav-heading { display:flex;align-items:center;justify-content:space-between;margin:29px 10px 11px 14px;gap:12px; }
.nav-heading .nav-label { margin:0;color:#a5b9d5; }
.sidebar-collapse { display:grid;place-items:center;width:34px;height:34px;padding:6px;border:1px solid #d5e5ff28;border-radius:10px;background:#d5e5ff0a;color:#d6e4f7; }
.sidebar-collapse:hover { background:#d5e5ff20;border-color:#d5e5ff66; }
.sidebar-collapse .icon { width:19px;height:19px; }
.nav-link { border:1px solid transparent;border-radius:11px; }
.nav-link:hover { background:rgba(221,235,255,.07);border-color:rgba(225,239,255,.10); }
.nav-link.active { color:#ffd0b2;background:linear-gradient(115deg,rgba(255,164,108,.22),rgba(255,164,108,.07));border-color:rgba(255,199,160,.20);box-shadow:inset 0 1px 0 rgba(255,214,181,.13),inset 3px 0 #ffac7c; }
.nav-divider { background:#d5e5ff16; }


.version { color:#a1b3cd; }
.sidebar-toggle { gap:8px;flex:none;font-size:.8125rem;min-height:38px;padding:8px 11px; }
.sidebar-toggle .icon { width:18px;height:18px; }
.sidebar-toggle[aria-expanded=true] { display:none; }
.button,.icon-button { border-radius:11px; }
.button.primary,[data-theme=dark] .button.primary { color:#431d0c;background:linear-gradient(145deg,#ffb786,#f68b53);border-color:rgba(255,203,163,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 5px 13px rgba(214,105,53,.12); }
.button.primary:hover { background:linear-gradient(145deg,#ffc59c,#ff9b66); }
.button.secondary,.icon-button { background:linear-gradient(135deg,var(--glass-top),var(--surface-soft));border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-highlight),0 2px 5px #12213a04; }
.button.secondary:hover,.icon-button:hover { background:var(--surface);border-color:var(--muted); }
.callout { background:var(--surface-soft);border-color:var(--glass-edge);border-radius:15px; }
.notebook-banner { border-left:3px solid var(--accent);border-radius:17px; }
input,select,textarea { background:var(--field-bg);border-radius:11px; }
select option { background:var(--opaque-surface);color:var(--ink); }
.modal { background:linear-gradient(140deg,var(--glass-top),var(--opaque-surface));border-color:var(--glass-edge);border-radius:23px;-webkit-backdrop-filter:blur(34px) saturate(140%);backdrop-filter:blur(34px) saturate(140%);box-shadow:inset 0 1px 0 var(--glass-highlight),0 30px 100px #08172b40; }
.modal::backdrop { -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#10223869; }
.editor-main { overflow:hidden; }
.draft-title,.prompt-input { background:transparent;border-radius:0; }
.essay-input { background:var(--field-bg);border-radius:0; }
.prompt-area { background:var(--surface-soft); }
.footer { border-color:var(--line); }
.theme-preview { box-shadow:inset 0 1px 0 var(--glass-highlight); }
[data-theme=dark] .sidebar { background:linear-gradient(145deg,rgba(40,66,103,.66),var(--nav) 35%,rgba(14,29,50,.87)); }
[data-theme=dark] .goal-card { background:linear-gradient(120deg,rgba(41,70,111,.75),rgba(48,70,107,.44));border-color:rgba(185,216,255,.27); }
@media(min-width:901px) {
  :root[data-sidebar=collapsed] .sidebar { transform:translateX(calc(-100% - 20px));visibility:hidden;pointer-events:none; }
  :root[data-sidebar=collapsed] .main { margin-left:0; }
  :root:not([data-sidebar=collapsed]) .sidebar-toggle { display:none; }
}
@media(min-width:1600px) { .topbar { padding-left:26px; }.content { padding-top:44px; } }
@media(max-width:1150px) and (min-width:901px) { .sidebar { width:224px;padding-left:13px;padding-right:13px; }.main { margin-left:252px; }.content { padding:28px 24px; }.brand-name { font-size:1rem; } }
@media(max-width:900px) {
  .main { margin-left:0; }
  .sidebar { width:260px;inset:10px auto 10px 10px;transform:translateX(calc(-100% - 20px));visibility:hidden; }
  .menu-open .sidebar { transform:translateX(0);visibility:visible; }
  .sidebar .brand { margin-top:0; }
  .topbar { margin:10px 12px 0;height:66px;padding:0 19px; }
  .menu-open .sidebar-scrim { background:#08162c55;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); }
}
@media(max-width:600px) {
  .content { padding:25px 18px; }.topbar { padding:0 13px;border-radius:15px;margin:10px 10px 0; }
  .topbar-left { gap:12px; }.sidebar-toggle { font-size:.75rem;padding:8px 9px;gap:6px;min-height:40px; }
  .breadcrumb { font-size:.8125rem;min-width:0; }.breadcrumb strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .topbar-right { margin-left:10px; }.topbar-right .icon-button { width:36px;height:36px; }
  .topbar-left { flex:1; }.stat-card { border-radius:15px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .panel,.skill-card,.stat-card,.notebook-banner,.topbar,.modal { background:var(--opaque-surface); }
  .sidebar { background:#182d49; }.goal-card { background:#213b5f; }
}
@media(prefers-reduced-motion:reduce) { .sidebar,.main,.skill-card { transition:none; } }