/*
 * Optical Study Atlas — replacement visual world.
 * Function and data stay in app.js; this layer owns material, depth and rhythm.
 */

:root {
  --atlas-bg: #ebe9e4;
  --atlas-bg-deep: #dcd9d1;
  --atlas-ink: #1b1b1a;
  --atlas-muted: #6f6c65;
  --atlas-cobalt: #565650;
  --atlas-cobalt-deep: #30312e;
  --atlas-violet: #8a867d;
  --atlas-action-start: #30312e;
  --atlas-action-end: #66635c;
  --atlas-glass: rgba(252, 251, 248, 0.56);
  --atlas-glass-quiet: rgba(248, 247, 243, 0.38);
  --atlas-glass-strong: rgba(255, 255, 255, 0.76);
  --atlas-glass-edge: rgba(255, 255, 255, 0.82);
  --atlas-reflection: #ffffff;
  --atlas-hairline: rgba(67, 65, 60, 0.15);
  --atlas-hairline-strong: rgba(58, 57, 53, 0.25);
  --atlas-depth: 0 20px 52px rgba(48, 47, 43, 0.13), 0 3px 12px rgba(48, 47, 43, 0.06);
  --atlas-depth-soft: 0 10px 28px rgba(48, 47, 43, 0.1), 0 2px 6px rgba(48, 47, 43, 0.05);
  --atlas-depth-control: 0 6px 16px rgba(45, 44, 40, 0.11), 0 2px 4px rgba(45, 44, 40, 0.06);
  --atlas-radius-shell: 26px;
  --atlas-radius-panel: 20px;
  --atlas-radius-control: 14px;
  --atlas-blur: blur(30px) saturate(138%);
  --bg: var(--atlas-bg);
  --surface: rgba(255, 255, 255, 0.72);
  --surface-soft: rgba(244, 242, 237, 0.7);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --ink: var(--atlas-ink);
  --muted: var(--atlas-muted);
  --muted-strong: #504e49;
  --line: var(--atlas-hairline);
  --line-strong: var(--atlas-hairline-strong);
  --blue: var(--atlas-cobalt);
  --blue-deep: var(--atlas-cobalt-deep);
  --violet: var(--atlas-violet);
  --glass-surface: var(--atlas-glass);
  --glass-surface-strong: var(--atlas-glass-strong);
  --glass-line: var(--atlas-glass-edge);
  --glass-shadow: var(--atlas-depth);
  --radius: var(--atlas-radius-panel);
  --radius-small: var(--atlas-radius-control);
  --radius-overlay: 24px;
  --sidebar-width: 300px;
  --topbar-height: 62px;
  --page-gutter: clamp(24px, 3.6vw, 58px);
}

:root[data-theme="dark"] {
  --atlas-bg: #151513;
  --atlas-bg-deep: #0b0b0a;
  --atlas-ink: #f3f1ec;
  --atlas-muted: #aaa69d;
  --atlas-cobalt: #d0ccc2;
  --atlas-cobalt-deep: #b6b1a7;
  --atlas-violet: #8e897f;
  --atlas-action-start: #3c3d38;
  --atlas-action-end: #69665e;
  --atlas-glass: rgba(31, 31, 28, 0.58);
  --atlas-glass-quiet: rgba(27, 27, 24, 0.42);
  --atlas-glass-strong: rgba(42, 42, 38, 0.78);
  --atlas-glass-edge: rgba(255, 255, 255, 0.16);
  --atlas-reflection: rgba(255, 255, 255, 0.16);
  --atlas-hairline: rgba(242, 239, 232, 0.12);
  --atlas-hairline-strong: rgba(242, 239, 232, 0.22);
  --atlas-depth: 0 22px 58px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.18);
  --atlas-depth-soft: 0 12px 32px rgba(0, 0, 0, 0.26), 0 2px 8px rgba(0, 0, 0, 0.16);
  --atlas-depth-control: 0 7px 18px rgba(0, 0, 0, 0.24), 0 2px 5px rgba(0, 0, 0, 0.16);
  --bg: var(--atlas-bg);
  --surface: rgba(34, 34, 31, 0.74);
  --surface-soft: rgba(39, 39, 35, 0.7);
  --surface-strong: rgba(46, 46, 42, 0.92);
  --ink: var(--atlas-ink);
  --muted: var(--atlas-muted);
  --muted-strong: #d0ccc2;
  --line: var(--atlas-hairline);
  --line-strong: var(--atlas-hairline-strong);
  --blue: var(--atlas-cobalt);
  --blue-deep: var(--atlas-cobalt-deep);
  --violet: var(--atlas-violet);
  --glass-surface: var(--atlas-glass);
  --glass-surface-strong: var(--atlas-glass-strong);
  --glass-line: var(--atlas-glass-edge);
  --glass-shadow: var(--atlas-depth);
}

html { background: var(--atlas-bg-deep); }

body {
  position: relative;
  background:
    radial-gradient(ellipse 42% 48% at 96% 3%, color-mix(in srgb, var(--violet) 13%, transparent), transparent 70%),
    linear-gradient(142deg, var(--atlas-bg) 0%, color-mix(in srgb, var(--atlas-bg) 76%, #fff) 48%, var(--atlas-bg-deep) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

body::before {
  position: fixed;
  z-index: -1;
  border-radius: 48% 52% 62% 38% / 42% 44% 56% 58%;
  content: "";
  filter: blur(7px);
  pointer-events: none;
}

body::before {
  top: 11vh;
  right: 7vw;
  width: min(32vw, 520px);
  height: min(32vw, 520px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 17%, transparent), color-mix(in srgb, var(--violet) 11%, transparent));
  opacity: 0.72;
}

:root[data-theme="dark"] body {
  background: linear-gradient(145deg, #20201d 0%, #151513 58%, #0b0b0a 100%);
}

:root[data-theme="dark"] body::before {
  right: -12vw;
  opacity: 0.24;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--ap-radius-pill);
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--blue) 55%, transparent); }
* { scrollbar-color: color-mix(in srgb, var(--muted) 34%, transparent) transparent; }

button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible,
[contenteditable="plaintext-only"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 82%, white);
  outline-offset: 3px;
}

.app-shell {
  min-height: 100dvh;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

.sidebar {
  top: 12px;
  height: calc(100dvh - 24px);
  overflow: hidden;
  border: 0;
  border-radius: var(--atlas-radius-shell);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--atlas-reflection) 38%, transparent), transparent 38%),
    var(--atlas-glass);
  box-shadow: var(--atlas-depth), inset 0 1px 0 var(--atlas-glass-edge), inset 0 -1px 0 color-mix(in srgb, var(--line) 70%, transparent);
  backdrop-filter: var(--atlas-blur);
  -webkit-backdrop-filter: var(--atlas-blur);
}

.sidebar::after,
.topbar::after,
.class-intro::after,
.space-cover::before,
.modal::after {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--atlas-glass-edge), transparent);
  content: "";
  pointer-events: none;
}

.sidebar > *,
.topbar > *,
.class-intro > *,
.space-cover > *,
.modal > * { position: relative; z-index: 1; }

.brand-row {
  min-height: 72px;
  padding: 0 17px 0 19px;
  border-bottom-color: color-mix(in srgb, var(--line) 68%, transparent);
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--ap-radius-sm);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 80%, white), color-mix(in srgb, var(--violet) 86%, var(--blue)));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.58), 0 8px 18px color-mix(in srgb, var(--blue) 26%, transparent);
}

.brand strong { font-size: var(--type-ui); font-weight: 650; }
.brand small { margin-top: 2px; }

.primary-nav { gap: 5px; padding: 18px 12px 10px; }
.nav-section { padding-inline: 12px; }
.nav-section-head,
.nav-section-label { color: color-mix(in srgb, var(--muted) 82%, var(--blue)); }

.nav-link,
.space-link,
.sidebar-class-row,
.sidebar-collection-toggle,
.theme-row {
  border-radius: 13px;
  transition: background 170ms ease, color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.nav-link:hover,
.space-link:hover,
.sidebar-class-row:hover,
.sidebar-collection-toggle:hover {
  background: color-mix(in srgb, var(--atlas-glass-strong) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 65%, transparent);
}

.nav-link.active,
.space-link.active {
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, var(--atlas-glass-strong)), color-mix(in srgb, var(--violet) 10%, var(--atlas-glass)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 68%, transparent), 0 7px 18px color-mix(in srgb, var(--blue) 11%, transparent);
}

.space-monogram {
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--atlas-glass-edge));
  border-radius: 9px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 13%, var(--atlas-glass-strong)), color-mix(in srgb, var(--violet) 7%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 64%, transparent);
}

.space-folder-list { border-left-color: color-mix(in srgb, var(--blue) 24%, transparent); }
.space-folder,
.space-block-link { border-radius: 9px; }

.sidebar-footer {
  border-top-color: color-mix(in srgb, var(--line) 70%, transparent);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--atlas-glass-strong) 44%, transparent));
}

.sidebar-resizer { right: -8px; width: 15px; }

.app-body {
  min-width: 0;
  overflow: clip;
  border-radius: var(--atlas-radius-shell);
  container-name: study-app-body;
  container-type: inline-size;
}

.topbar {
  position: sticky;
  z-index: var(--ap-z-topbar);
  top: 12px;
  box-sizing: border-box;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  grid-template-columns: 60px minmax(0, 1fr) max-content;
  grid-template-rows: minmax(0, 1fr);
  align-content: center;
  margin: 0 12px;
  padding: 0 12px 0 16px;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--atlas-reflection) 30%, transparent), transparent 44%),
    var(--atlas-glass);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge), inset 0 -1px 0 color-mix(in srgb, var(--line) 66%, transparent);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}

.topbar > * { min-width: 0; }
.topbar .menu-button { grid-row: 1; }
.topbar .history-controls { grid-row: 1; grid-column: 1; }
.topbar .topbar-actions {
  grid-row: 1;
  grid-column: 3;
  flex-wrap: nowrap;
  justify-self: end;
  white-space: nowrap;
}

.app-shell.sidebar-collapsed .topbar {
  grid-template-columns: 44px 60px minmax(0, 1fr) max-content;
}
.app-shell.sidebar-collapsed .topbar .menu-button {
  width: 44px;
  height: 44px;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}
.app-shell.sidebar-collapsed .topbar .history-controls { grid-row: 1; grid-column: 2; }
.app-shell.sidebar-collapsed .topbar .topbar-actions { grid-row: 1; grid-column: 4; }

.icon-button,
.search-trigger,
.timer-control,
.primary-button,
.secondary-button,
.glass-button,
.light-button {
  border-radius: var(--atlas-radius-control);
  font-size: var(--type-ui);
  line-height: 1.4;
}

.icon-button:hover,
.search-trigger:hover,
.timer-control:hover,
.secondary-button:hover,
.glass-button:hover,
.light-button:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--atlas-glass-strong) 88%, var(--blue) 4%);
  box-shadow: var(--atlas-depth-control), inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 80%, transparent);
  transform: translateY(-1px);
}

.search-trigger,
.timer-control,
.secondary-button,
.glass-button,
.light-button {
  border: 1px solid color-mix(in srgb, var(--atlas-glass-edge) 75%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--atlas-reflection) 35%, transparent), transparent), var(--atlas-glass-quiet);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 55%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
}

.primary-button {
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 48%),
    linear-gradient(120deg, var(--atlas-action-start), var(--atlas-action-end));
  color: #fff;
  box-shadow: var(--atlas-depth-control), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(28, 28, 25, 0.22);
}

.primary-button:hover {
  filter: brightness(1.04);
  box-shadow: 0 13px 28px color-mix(in srgb, var(--blue) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.main-content {
  position: relative;
  min-height: calc(100dvh - 86px);
  background: transparent;
}

.page {
  width: min(1480px, 100%);
  padding-top: 42px;
  padding-bottom: 100px;
}

.panel,
.grades-section,
.stats-panel,
.empty-state {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--atlas-radius-panel);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--atlas-reflection) 31%, transparent), transparent 45%),
    var(--atlas-glass-quiet);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge), inset 0 -1px 0 color-mix(in srgb, var(--line) 68%, transparent);
  backdrop-filter: blur(24px) saturate(136%);
  -webkit-backdrop-filter: blur(24px) saturate(136%);
}

.dashboard-page { padding-top: 28px; }

.dashboard-intro {
  position: relative;
  min-height: clamp(230px, 25vh, 300px);
  margin-bottom: 24px;
  padding: clamp(36px, 4.4vw, 58px) clamp(30px, 6vw, 88px);
  overflow: hidden;
  align-items: center;
  border-radius: 32px;
  background:
    radial-gradient(circle at 84% 24%, color-mix(in srgb, var(--atlas-reflection) 78%, transparent) 0 1px, transparent 2px),
    radial-gradient(ellipse 50% 85% at 104% 50%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 70%),
    linear-gradient(125deg, color-mix(in srgb, var(--atlas-glass-strong) 78%, transparent), color-mix(in srgb, var(--blue) 8%, var(--atlas-glass-quiet)));
  box-shadow: var(--atlas-depth), inset 0 1px 0 var(--atlas-glass-edge), inset 0 -1px 0 color-mix(in srgb, var(--blue) 14%, transparent);
  backdrop-filter: blur(34px) saturate(145%);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
}

.dashboard-intro::before {
  position: absolute;
  top: -34%;
  right: -8%;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  border-radius: 44% 56% 63% 37% / 55% 38% 62% 45%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08) 34%, color-mix(in srgb, var(--blue) 21%, transparent) 72%),
    var(--atlas-glass-quiet);
  box-shadow: inset 14px 12px 26px rgba(255, 255, 255, 0.38), inset -12px -18px 34px color-mix(in srgb, var(--violet) 10%, transparent), 0 24px 62px rgba(55, 53, 48, 0.1);
  content: "";
  opacity: 0.78;
  transform: rotate(-17deg);
  pointer-events: none;
}

.dashboard-intro::after,
.space-card::after { content: none; }

.dashboard-intro > div { position: relative; z-index: 2; }
.dashboard-intro h1 {
  max-width: 9ch;
  font-size: var(--type-display);
  font-weight: 520;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.dashboard-intro .lead { max-width: 47ch; margin-top: 18px; color: var(--muted-strong); font-size: var(--type-body); line-height: var(--leading-body); }

.section-heading { align-items: end; }
.section-heading h2 { font-size: var(--type-title); font-weight: 570; line-height: 1.08; letter-spacing: -0.035em; }
.home-subjects { margin-top: 0; }

.spaces-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  border: 0;
}

.space-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 264px;
  grid-column: span 4;
  overflow: hidden;
  padding: 18px;
  border: 0;
  border-radius: var(--atlas-radius-panel);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--atlas-reflection) 34%, transparent), transparent 46%),
    var(--atlas-glass-quiet);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge), inset 0 -1px 0 color-mix(in srgb, var(--line) 60%, transparent);
  backdrop-filter: blur(24px) saturate(138%);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
}

.space-card:nth-child(3n + 1) { grid-column: span 5; }
.space-card:nth-child(3n + 2) { grid-column: span 4; }
.space-card:nth-child(3n) { grid-column: span 3; }

.space-card > * { position: relative; z-index: 2; }
.space-card > .space-card-top { align-self: stretch; }
.space-card::before {
  position: absolute;
  z-index: 1;
  right: -22%;
  bottom: -34%;
  width: min(190px, 58%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone1) 26%, rgba(255, 255, 255, .24)), color-mix(in srgb, var(--tone2) 34%, transparent));
  box-shadow: inset 16px 14px 32px color-mix(in srgb, var(--atlas-reflection) 18%, transparent);
  content: "";
  opacity: .78;
  pointer-events: none;
}

/* A photographic cover uses a flat tint layer. Reset the decorative orb so
   changing the layer intensity never reveals a circular patch over the image. */
.space-card.has-photo::before {
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border-radius: inherit;
  background: var(--space-cover-color, var(--action-start));
  box-shadow: none;
  opacity: var(--space-cover-opacity, .72);
  transform: none;
  z-index: 0;
}
/* Legibility scrim for photographic cards, independent of the user tint so
   the name and count stay readable over light photos at tint intensity 0.
   Sits above the tint (::before) and below the card content. */
.space-card.has-photo::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(0deg, rgba(18, 18, 16, 0.74) 0%, rgba(18, 18, 16, 0.46) 36%, rgba(18, 18, 16, 0.08) 66%, rgba(18, 18, 16, 0) 100%),
    linear-gradient(180deg, rgba(18, 18, 16, 0.28) 0%, rgba(18, 18, 16, 0) 30%);
  pointer-events: none;
}
.space-card.has-photo > strong,
.space-card.has-photo > small { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 16px rgba(0, 0, 0, 0.3); }
.space-card.has-photo .space-card-top .icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.space-card:hover {
  background-color: color-mix(in srgb, var(--atlas-glass-strong) 64%, transparent);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge);
  transform: translateY(-2px);
}
.space-card > strong { margin-top: auto; padding-top: 28px; font-size: var(--type-subtitle); font-weight: 610; line-height: 1.25; }
.space-card > small { margin-top: 7px; }
.space-card .space-monogram { width: 34px; height: 34px; border-radius: 11px; }

.dashboard-feature-grid { grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.7fr); gap: 14px; margin-top: 30px; }
.focus-card,
.goal-card { min-height: 240px; }
.focus-card { padding: 22px 24px 0; }
.focus-card > *,
.goal-card > * { position: relative; z-index: 2; }
.focus-card::before,
.goal-card::before {
  position: absolute;
  z-index: 1;
  right: -12%;
  bottom: -58%;
  width: min(390px, 62%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, white 28%, var(--blue)), color-mix(in srgb, var(--violet) 30%, transparent));
  box-shadow: inset 24px 20px 44px color-mix(in srgb, var(--atlas-reflection) 18%, transparent);
  content: "";
  opacity: .72;
  pointer-events: none;
}
.goal-card::before {
  right: -24%;
  bottom: -66%;
  width: min(340px, 78%);
  opacity: .34;
}
.focus-card::after { bottom: 60px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.focus-content h2 { max-width: 16ch; font-size: var(--type-title); line-height: 1.08; }
.round-action { border: 0; background: var(--atlas-glass-strong); box-shadow: var(--atlas-depth-control), inset 0 1px 0 var(--atlas-glass-edge); }
.goal-card { padding: 22px; }
.space-page { padding-top: 40px; }
.space-cover {
  position: relative;
  min-height: clamp(340px, 40vh, 520px);
  overflow: hidden;
  padding: clamp(38px, 5vw, 72px);
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(ellipse 62% 110% at 96% 40%, color-mix(in srgb, var(--violet) 32%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 100% at 2% 100%, color-mix(in srgb, #b8b3a9 27%, transparent), transparent 72%),
    linear-gradient(128deg, color-mix(in srgb, var(--blue-deep) 84%, #20211e), color-mix(in srgb, var(--blue) 68%, #454641) 56%, color-mix(in srgb, var(--violet) 64%, #4f4d47));
  box-shadow: var(--atlas-depth), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -1px 0 rgba(25, 25, 23, 0.3);
}

.space-cover.has-photo { background-image: var(--space-cover-image); background-size: cover; background-position: center; }
/* Legibility scrim for photographic covers. It is independent of the user
   tint (::before, driven by --space-cover-color/--space-cover-opacity) so the
   title and subtitle stay readable even when the tint intensity is 0 over a
   light photo. Graphite, denser behind the copy, fading to clear on the right. */
.space-cover.has-photo::after {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  opacity: 1;
  background:
    linear-gradient(100deg, rgba(18, 18, 16, 0.66) 0%, rgba(18, 18, 16, 0.46) 34%, rgba(18, 18, 16, 0.18) 62%, rgba(18, 18, 16, 0.04) 100%),
    linear-gradient(0deg, rgba(18, 18, 16, 0.42) 0%, rgba(18, 18, 16, 0) 46%);
  box-shadow: none;
  transform: none;
}
.space-cover.has-photo .space-cover-copy { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 24px rgba(0, 0, 0, 0.34); }
.space-cover:not(.has-photo)::after {
  top: -18%;
  right: -16%;
  bottom: auto;
  left: auto; /* Reset the base inset so right anchors the decorative sphere. */
  width: min(68%, 620px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.02) 46%, color-mix(in srgb, var(--violet) 24%, transparent));
  box-shadow: inset 24px 20px 50px rgba(255, 255, 255, 0.14);
  transform: none;
}
:root[data-theme="dark"] .space-cover:not(.has-photo) {
  background: linear-gradient(132deg, #292925 0%, #1b1b19 58%, #0e0e0d 100%);
}
.space-cover-copy { max-width: min(720px, 76%); }
.space-cover .space-monogram.large { width: 46px; height: 46px; margin-bottom: 34px; border-color: rgba(255, 255, 255, 0.38); border-radius: 15px; background: rgba(255, 255, 255, 0.16); color: white; backdrop-filter: blur(18px); }
.space-cover h1 { max-width: 22ch; font-size: var(--type-section-display); font-weight: 520; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.space-cover-copy > p:last-child { max-width: 52ch; margin-top: 21px; color: rgba(255, 255, 255, 0.82); font-size: var(--type-body); line-height: var(--leading-body); }
.space-cover > .cover-actions { position: absolute; z-index: 4; top: 28px; right: 28px; align-self: start; }
.space-actions-menu > summary {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.17);
  box-shadow: 0 12px 30px rgba(27, 27, 24, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.48);
  color: white;
  backdrop-filter: blur(20px) saturate(140%);
}
.space-actions-panel {
  margin-top: 9px;
  border: 0;
  border-radius: 18px;
  background: var(--atlas-glass-strong);
  box-shadow: var(--atlas-depth), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(30px) saturate(140%);
}
.compact-top { margin-top: 44px; }
.class-filter { border: 1px solid color-mix(in srgb, var(--atlas-glass-edge) 70%, var(--line)); border-radius: 14px; background: var(--atlas-glass-quiet); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 60%, transparent); backdrop-filter: blur(16px); }
.class-disclosure-list { gap: 10px; }
.space-class-disclosure {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--atlas-glass-quiet);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(20px) saturate(132%);
}
.space-class-disclosure > summary { min-height: 82px; border-radius: inherit; }
.space-class-disclosure[open] > summary { background: color-mix(in srgb, var(--atlas-glass-strong) 75%, var(--blue) 3%); }
.space-class-content { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--atlas-glass-quiet) 80%, transparent); }
.space-class-blocks > button { border-radius: 13px; background: color-mix(in srgb, var(--atlas-glass-strong) 68%, transparent); }

.class-page { padding-top: 40px; }
.class-intro {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.58fr);
  gap: clamp(28px, 4vw, 54px);
  padding: clamp(30px, 4vw, 52px);
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(ellipse 45% 100% at 100% 30%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 75%),
    linear-gradient(145deg, color-mix(in srgb, var(--atlas-reflection) 34%, transparent), transparent 48%),
    var(--atlas-glass-quiet);
  box-shadow: var(--atlas-depth), inset 0 1px 0 var(--atlas-glass-edge), inset 0 -1px 0 color-mix(in srgb, var(--line) 65%, transparent);
  backdrop-filter: blur(30px) saturate(138%);
  -webkit-backdrop-filter: blur(30px) saturate(138%);
}
.class-title-block { padding-top: 0; border-top: 0; }
.class-title-block h1 { max-width: 17ch; font-size: var(--type-headline); font-weight: 520; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.editable-class-title {
  width: fit-content;
  min-width: 1ch;
  margin-inline: -10px;
  padding: 6px 10px 8px;
  border-radius: var(--ap-radius-sm);
  caret-color: var(--blue);
  cursor: text;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.editable-class-title:hover {
  background: color-mix(in srgb, var(--atlas-glass-strong) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 54%, transparent);
}
.editable-class-title:focus {
  outline: none;
  background: color-mix(in srgb, var(--atlas-glass-strong) 68%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, var(--line)),
    0 8px 24px color-mix(in srgb, var(--ink) 7%, transparent);
}
.editable-class-title:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 26%, transparent);
  outline-offset: 3px;
}
.editable-class-title,
.space-cover h1,
.paper-sheet h1,
.editor-title strong,
.space-link-copy strong,
.sidebar-class-main strong,
.space-class-identity strong,
.grade-entry-row strong,
.search-result strong {
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}
.editable-class-title,
.space-cover h1,
.paper-sheet h1 { overflow-wrap: break-word; hyphens: none; word-break: normal; }
.back-link { margin-bottom: 30px; vertical-align: middle; }
/* The class status pill shares the line with the back link; keep a gap so the
   pill border never touches the link text, and centre both on the same line. */
.back-link + .status-pill { margin-left: 14px; margin-bottom: 30px; vertical-align: middle; }
.status-pill { margin-bottom: 17px; border-color: color-mix(in srgb, var(--atlas-glass-edge) 70%, var(--line)); background: var(--atlas-glass-quiet); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 65%, transparent); }
.class-layout { grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.53fr); gap: 16px; margin-top: 18px; }
.class-documents {
  border: 0;
  border-radius: var(--atlas-radius-panel);
  background: var(--atlas-glass-quiet);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(24px) saturate(134%);
}
.class-documents { padding: 24px; }
.document-type { border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--ap-radius-sm); background: transparent; box-shadow: none; }
.class-blocks-disclosure { margin-top: 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.class-blocks-disclosure > summary { border-radius: inherit; }
.class-blocks-disclosure[open] > summary { border-radius: 15px 15px 0 0; }
.block-list { border: 0; border-radius: 14px; overflow: hidden; }
.block-row { border-bottom-color: color-mix(in srgb, var(--line) 72%, transparent); background: color-mix(in srgb, var(--atlas-glass-strong) 68%, transparent); }

/* Acceso editorial al documento principal */
.class-layout { align-items: start; }
.class-documents {
  display: grid;
  align-self: start;
  gap: 16px;
  min-height: 0;
}
.class-documents-heading {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 2px 4px;
}
.class-documents-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight: 690;
  letter-spacing: -0.035em;
}
.class-documents-heading p {
  max-width: 48ch;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: 1.55;
}
.class-documents-heading > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: var(--ap-radius-pill);
  background: color-mix(in srgb, var(--atlas-glass-strong) 72%, transparent);
  color: var(--muted);
  font-size: var(--type-meta);
  font-variant-numeric: tabular-nums;
}
.document-access-primary {
  grid-area: primary;
  display: flex;
  min-width: 0;
  gap: 16px;
  align-items: flex-start;
}
.document-access-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 18px;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: 1.35;
}
.document-access-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.document-save-state i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--success, #42a47c);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--success, #42a47c) 34%, transparent);
}
.class-documents > .class-blocks-disclosure.compact {
  margin-top: 0;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.class-documents > .class-blocks-disclosure.compact > summary {
  min-height: 68px;
  padding: 10px 4px;
  border-radius: 0;
}
.class-documents > .class-blocks-disclosure.compact > summary:hover {
  background: color-mix(in srgb, var(--atlas-glass-strong) 50%, transparent);
}
.class-documents > .class-blocks-disclosure.compact .class-blocks { padding: 18px 4px 4px; }

@media (max-width: 760px) {
  .class-documents-heading { align-items: flex-start; }
  .class-documents-heading > span { display: none; }
  .document-access-meta { margin-top: 14px; }
}

@media (max-width: 480px) {
  .class-documents-heading p { max-width: 34ch; }
  .document-access-primary { gap: 12px; }
  .document-access-meta { display: grid; gap: 7px; }
}

.save-state[data-state="pending"] { color: var(--warning); }
.save-state[data-state="error"] { color: var(--danger); font-weight: 650; }
.form-error {
  margin: -4px 0 0;
  padding: 11px 13px;
  border-radius: var(--ap-radius-sm);
  background: color-mix(in srgb, var(--danger) 10%, var(--atlas-glass-strong));
  color: var(--danger);
  font-size: var(--type-ui);
  line-height: 1.45;
}
.form-error[hidden],
[hidden] { display: none !important; }

.document-page {
  min-height: calc(100dvh - 86px);
  padding: 26px clamp(10px, 2vw, 28px) 70px;
  background: transparent;
}
.editor-shell { position: relative; overflow: visible; }
.editor-header,
.editor-toolbar {
  border: 0;
  background: var(--atlas-glass);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(28px) saturate(138%);
  -webkit-backdrop-filter: blur(28px) saturate(138%);
}
.editor-header { min-height: 68px; margin: 0 auto 10px; padding: 0 16px; border-radius: 20px; }
.editor-toolbar { position: sticky; top: 86px; min-height: 50px; margin: 0 auto; padding: 4px 12px; border-radius: 17px; }
.editor-toolbar button { min-height: 36px; border-radius: 11px; }
.editor-toolbar button:hover { background: var(--atlas-glass-strong); box-shadow: var(--atlas-depth-control), inset 0 1px 0 var(--atlas-glass-edge); transform: translateY(-1px); }
.paper-sheet {
  width: min(900px, calc(100% - 48px));
  min-height: 980px;
  margin: 30px auto 80px;
  padding: clamp(54px, 7vw, 96px);
  border: 0;
  border-radius: var(--ap-radius-xs);
  background: color-mix(in srgb, #fff 95%, var(--atlas-bg));
  color: #1b1b1a;
  box-shadow: 0 38px 90px rgba(48, 47, 43, 0.18), 0 6px 18px rgba(48, 47, 43, 0.09);
}
:root[data-theme="dark"] .paper-sheet { background: #f8f7f3; color: #1b1b1a; }
.paper-sheet h1 { max-width: 18ch; font-size: var(--type-paper-heading); font-weight: 520; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.paper-kicker { color: #565650; }
.paper-rule { background: rgba(47, 46, 42, 0.12); }
.editable-note { max-width: 70ch; color: #292925; caret-color: #565650; }
.note-index { border: 0; border-radius: var(--ap-radius-md); background: var(--ap-glass-3); box-shadow: inset 0 1px 0 var(--atlas-glass-edge); }
.editor-warning { border: 0; border-radius: 15px; box-shadow: var(--atlas-depth-control); }

.modal[open],
.toast {
  border: 0;
  background: var(--atlas-glass-strong);
  box-shadow: var(--atlas-depth), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
}
.modal[open] { border-radius: var(--ap-radius-lg); }
.field input,
.field select,
.search-field,
.cover-upload,
.icon-upload { border-radius: 13px; background: color-mix(in srgb, var(--atlas-glass-strong) 74%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 64%, transparent); }

/* Secondary routes inherit the same optical world without becoming dashboards. */
.standard-heading,
.grades-page-heading {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 18px;
  padding: clamp(36px, 5vw, 64px);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 52% 115% at 102% 10%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--atlas-reflection) 32%, transparent), transparent 48%),
    var(--atlas-glass-quiet);
  box-shadow: var(--atlas-depth), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(30px) saturate(138%);
  -webkit-backdrop-filter: blur(30px) saturate(138%);
}
.standard-heading::after,
.grades-page-heading::after {
  position: absolute;
  top: -36%;
  right: -9%;
  width: min(42vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), color-mix(in srgb, var(--blue) 11%, transparent) 56%, color-mix(in srgb, var(--violet) 10%, transparent));
  box-shadow: inset 18px 14px 38px rgba(255, 255, 255, 0.26);
  content: "";
}
/* Dark theme: the heading sphere keeps only an edge highlight, matching the
   space cover sphere, instead of a flat 48% white disc over graphite. */
:root[data-theme="dark"] .standard-heading::after,
:root[data-theme="dark"] .grades-page-heading::after {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05) 42%, color-mix(in srgb, var(--violet) 10%, transparent) 78%, rgba(255, 255, 255, 0.02));
  box-shadow: inset 18px 14px 38px rgba(255, 255, 255, 0.12);
}
.standard-heading > *,
.grades-page-heading > * { position: relative; z-index: 1; }
/* Keep the lead clear of the sphere edge on desktop widths. */
.standard-heading .lead,
.grades-page-heading .lead { max-width: min(640px, 56%); }
.standard-heading h1,
.grades-page-heading h1 { max-width: 14ch; font-size: var(--type-headline); font-weight: 520; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }

.period-switch {
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--atlas-glass-edge) 72%, var(--line));
  border-radius: 15px;
  background: var(--atlas-glass-quiet);
  box-shadow: var(--atlas-depth-control), inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 64%, transparent);
  backdrop-filter: blur(18px);
}
.period-switch button { border-radius: 11px; }
.period-switch button.active { background: var(--atlas-glass-strong); color: var(--ink); box-shadow: var(--atlas-depth-control), inset 0 1px 0 var(--atlas-glass-edge); }
.stats-scope-switch { gap: 8px; margin: 16px 0 22px; padding: 0; border: 0; background: transparent; }
.stats-scope-switch > button {
  min-height: 54px;
  border: 0;
  border-radius: 15px;
  background: var(--atlas-glass-quiet);
  box-shadow: inset 0 1px 0 var(--atlas-glass-edge), 0 8px 20px color-mix(in srgb, var(--ink) 6%, transparent);
  backdrop-filter: blur(18px);
}
.stats-scope-switch > button.active { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 15%, var(--atlas-glass-strong)), color-mix(in srgb, var(--violet) 9%, var(--atlas-glass))); box-shadow: var(--atlas-depth-control), inset 0 1px 0 var(--atlas-glass-edge); }
.metric-grid { display: grid; grid-template-columns: 1.35fr repeat(3, minmax(0, 0.75fr)); gap: 10px; }
.metric-card {
  min-height: 190px;
  overflow: hidden;
  padding: 22px;
  border: 0;
  border-radius: 18px;
  background: var(--atlas-glass-quiet);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(22px) saturate(134%);
}
.metric-card.featured-metric { background: linear-gradient(140deg, color-mix(in srgb, var(--blue) 13%, var(--atlas-glass-strong)), color-mix(in srgb, var(--violet) 7%, var(--atlas-glass))); }
.metric-card > strong { font-size: var(--type-metric-large); }
.stats-grid { gap: 12px; }
.weekly-chart,
.distribution-panel { min-height: 350px; }
.activity-bar i { border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 78%, white), color-mix(in srgb, var(--violet) 66%, var(--blue))); box-shadow: inset 0 1px 0 rgba(255,255,255,.42); }
.distribution-row { border-bottom-color: color-mix(in srgb, var(--line) 68%, transparent); }
.stats-context { margin-top: 12px; padding: 30px; }

.grades-section { padding: clamp(22px, 3vw, 36px); }
.grades-heading { gap: 24px; }
.grade-summary-grid { overflow: hidden; border: 0; border-radius: 17px; background: color-mix(in srgb, var(--atlas-glass-strong) 58%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 62%, transparent); }
.grade-space-list,
.grade-entry-list { gap: 8px; }
.grade-space-row,
.grade-entry-row {
  border: 0;
  border-radius: 15px;
  background: color-mix(in srgb, var(--atlas-glass-strong) 64%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 66%, transparent), 0 7px 18px color-mix(in srgb, var(--ink) 5%, transparent);
}
.grade-space-row:hover,
.grade-entry-row:hover { background: var(--atlas-glass-strong); box-shadow: var(--atlas-depth-control), inset 0 1px 0 var(--atlas-glass-edge); transform: translateY(-1px); }
.grade-space-progress,
.grade-coverage-track,
.progress-track { overflow: hidden; border-radius: var(--ap-radius-pill); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.grade-space-progress i,
.grade-coverage-track i,
.progress-track i { background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--violet) 74%, var(--blue))); }

@media (max-width: 1180px) {
  :root { --sidebar-width: 264px; }
  .space-card:nth-child(n) { grid-column: span 6; }
  .dashboard-feature-grid { grid-template-columns: 1fr 1fr; }
  .focus-card { grid-column: 1 / -1; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-intro,
  .class-layout { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .app-shell,
  .app-shell.sidebar-collapsed { display: block; padding: 0; }
  .app-body { border-radius: 0; }
  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    top: 10px;
    bottom: 10px;
    left: 10px;
    width: min(350px, calc(100vw - 20px));
    height: calc(100dvh - 20px);
    border-radius: var(--ap-radius-lg);
  }
  .topbar { top: 10px; margin: 0 10px; }
  .dashboard-intro::before { right: -17%; width: min(68vw, 580px); }
  .dashboard-feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root {
    --page-gutter: 14px;
    --atlas-blur: blur(20px) saturate(128%);
  }
  body { background-attachment: scroll; }
  body::before { top: 5vh; right: -24vw; width: 82vw; height: 82vw; }
  .topbar {
    min-height: var(--topbar-height);
    margin: 0 8px;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
    border-radius: 18px;
    backdrop-filter: blur(20px) saturate(128%);
    -webkit-backdrop-filter: blur(20px) saturate(128%);
  }
  .page { padding-top: 28px; }
  .dashboard-page { padding-top: 22px; }
  .dashboard-intro {
    min-height: 280px;
    padding: 36px 24px;
    border-radius: var(--ap-radius-lg);
    align-items: end;
  }
  .dashboard-intro::before { top: -20%; right: -34%; width: 94vw; }
  .dashboard-intro h1 { max-width: 9ch; font-size: var(--type-display-mobile); }
  .dashboard-intro .lead { max-width: 30ch; font-size: var(--type-body); }
  .spaces-grid { grid-template-columns: 1fr; gap: 10px; }
  .space-card:nth-child(n) { min-height: 152px; grid-column: auto; }
  .space-card > strong { margin-top: 30px; }
  .dashboard-feature-grid { grid-template-columns: 1fr; }
  .focus-card,
  .goal-card { min-height: 245px; }
  .space-cover { min-height: 410px; padding: 80px 22px 32px; border-radius: var(--ap-radius-lg); }
  .space-cover-copy { max-width: 100%; }
  .space-cover h1 { font-size: var(--type-display-mobile); }
  .cover-actions { top: 14px; right: 14px; }
  .compact-top { margin-top: 34px; }
  .space-class-disclosure > summary { min-height: 82px; }
  .class-intro { padding: 28px 22px; border-radius: var(--ap-radius-lg); }
  .class-title-block h1 { font-size: var(--type-display-mobile); }
  .back-link { margin-bottom: 34px; }
  /* Narrow widths: the pill drops to its own line, flush left and close to the link. */
  .back-link:has(+ .status-pill) { margin-bottom: 12px; }
  .back-link + .status-pill { display: flex; width: fit-content; margin-left: 0; margin-bottom: 28px; }
  .class-documents { padding: 18px; }
  .document-page { padding: 16px 0 42px; }
  .editor-header { min-height: 0; margin-inline: 10px; padding: 12px 14px; border-radius: 17px; }
  .editor-toolbar {
    top: calc(var(--topbar-height) + 18px);
    margin-inline: 10px;
    border-radius: 15px;
    backdrop-filter: blur(20px) saturate(128%);
    -webkit-backdrop-filter: blur(20px) saturate(128%);
  }
  .editor-toolbar button { min-width: 44px; min-height: 44px; }
  .document-page .paper-sheet { width: calc(100% - 16px); margin: 16px 8px 36px; padding: 40px 22px 58px; border-radius: 7px; }
  .paper-sheet h1 { font-size: var(--type-display-mobile); }

  .standard-heading,
  .grades-page-heading {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 34px 22px 28px;
    border-radius: var(--ap-radius-lg);
  }
  .standard-heading::after,
  .grades-page-heading::after {
    top: -34%;
    right: -32%;
    width: 92vw;
    opacity: 0.72;
  }
  .standard-heading h1,
  .grades-page-heading h1 {
    max-width: 100%;
    font-size: var(--type-display-mobile);
    line-height: 1.02;
  }
  .standard-heading .lead,
  .grades-page-heading .lead { max-width: 65ch; font-size: var(--type-body); }

  .period-switch { display: flex; width: 100%; }
  .period-switch button { min-height: 44px; flex: 1; }
  .metric-grid,
  .stats-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-card { min-height: 156px; padding: 20px; }
  .metric-card.featured-metric { min-height: 188px; }
  .weekly-chart,
  .distribution-panel { min-height: 300px; }
  .stats-context { padding: 24px 20px; }
  .grades-section { padding: 18px; }
  .grades-heading { align-items: stretch; flex-direction: column; }
  .grades-heading .secondary-button { width: 100%; min-height: 44px; }
  .grade-summary-grid { grid-template-columns: minmax(0, 1fr); }

  .modal[open] {
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    overscroll-behavior: contain;
  }
  .space-actions-panel {
    width: min(280px, calc(100vw - 28px));
    max-height: min(440px, calc(100dvh - 96px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 480px) {
  .editable-class-title { margin-inline: -6px; padding-inline: 6px; }
  .dashboard-intro h1,
  .class-title-block h1,
  .space-cover h1 { letter-spacing: -0.04em; }
  .section-heading { gap: 14px; align-items: stretch; }
  .section-heading > .secondary-button { width: 100%; }
  .class-documents { padding: 15px; }
  .standard-heading,
  .grades-page-heading { padding-inline: 18px; }
  .standard-heading h1,
  .grades-page-heading h1 { font-size: var(--type-display-mobile); }
  .paper-sheet h1,
  .editable-note,
  .space-cover h1 { overflow-wrap: anywhere; }
  .class-title-block h1 { overflow-wrap: break-word; word-break: normal; }
}

@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .topbar { top: 6px; margin-inline: 6px; border-radius: var(--ap-radius-md); }
  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    top: 6px;
    bottom: 6px;
    left: 6px;
    height: calc(100dvh - 12px);
  }
  .page { padding-top: 24px; }
  .dashboard-intro { min-height: 250px; padding-block: 34px; }
  .space-cover { min-height: 286px; padding-block: 48px 30px; }
  .standard-heading,
  .grades-page-heading { min-height: 210px; padding-block: 30px; }
  .editor-toolbar { top: calc(var(--topbar-height) + 12px); }
}

/* V3 layout audit — deterministic shell geometry and independent class actions. */
.topbar {
  box-sizing: border-box;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  grid-template-columns: 60px minmax(0, 1fr) max-content;
  grid-template-rows: minmax(0, 1fr);
  align-content: center;
}
.topbar > * { min-width: 0; }
.topbar .menu-button { grid-row: 1; }
.topbar .history-controls { grid-row: 1; grid-column: 1; }
.topbar .topbar-actions {
  grid-row: 1;
  grid-column: 3;
  flex-wrap: nowrap;
  justify-self: end;
  white-space: nowrap;
}
.app-shell.sidebar-collapsed .topbar {
  grid-template-columns: 44px 60px minmax(0, 1fr) max-content;
}
.app-shell.sidebar-collapsed .topbar .menu-button {
  width: 44px;
  height: 44px;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}
.app-shell.sidebar-collapsed .topbar .history-controls { grid-row: 1; grid-column: 2; }
.app-shell.sidebar-collapsed .topbar .topbar-actions { grid-row: 1; grid-column: 4; }

.space-cover > .cover-actions {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 28px;
}

.space-class-row {
  display: grid;
  min-height: 82px;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
}
.space-class-open {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(260px, 1.35fr) minmax(130px, .5fr) minmax(80px, .3fr);
  gap: 18px;
  align-items: center;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.space-class-open:hover,
.space-class-open:focus-visible { background: color-mix(in srgb, var(--blue) 5%, var(--atlas-glass-strong)); }
.space-class-chevron {
  display: grid;
  min-width: 48px;
  min-height: 48px;
  place-items: center;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.space-class-chevron:hover,
.space-class-chevron:focus-visible { background: color-mix(in srgb, var(--violet) 5%, var(--atlas-glass-strong)); color: var(--blue); }
.space-class-chevron .icon { width: 14px; transition: transform 160ms ease; }
.space-class-disclosure.open .space-class-chevron .icon { transform: rotate(90deg); }
.space-class-disclosure.open .space-class-row { background: color-mix(in srgb, var(--atlas-glass-strong) 75%, var(--blue) 3%); }
.space-class-content[hidden] { display: none; }

@container study-app-body (max-width: 720px) {
  .topbar .search-trigger,
  .topbar .top-add {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }
  .topbar .search-trigger span,
  .topbar .search-trigger kbd,
  .topbar .top-add span { display: none; }
  .topbar .timer-control small { display: none; }
}

@media (max-width: 980px) {
  :root { --topbar-height: calc(64px + env(safe-area-inset-top)); }
  .topbar,
  .app-shell.sidebar-collapsed .topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    grid-template-columns: 44px 88px minmax(120px, 1fr) max-content;
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    align-content: center;
  }
  .topbar .menu-button,
  .app-shell.sidebar-collapsed .topbar .menu-button { display: grid; grid-row: 1; grid-column: 1; }
  .topbar .history-controls,
  .app-shell.sidebar-collapsed .topbar .history-controls { grid-row: 1; grid-column: 2; }
  .topbar .topbar-actions,
  .app-shell.sidebar-collapsed .topbar .topbar-actions { grid-row: 1; grid-column: 4; }
}

@media (max-width: 760px) {
  :root { --topbar-height: calc(64px + env(safe-area-inset-top)); }
  .topbar,
  .app-shell.sidebar-collapsed .topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    grid-template-columns: 44px 88px minmax(0, 1fr);
    grid-template-rows: 52px;
    gap: 0 8px;
    align-content: start;
  }
  .topbar .menu-button,
  .app-shell.sidebar-collapsed .topbar .menu-button { grid-row: 1; grid-column: 1; }
  .topbar .history-controls,
  .app-shell.sidebar-collapsed .topbar .history-controls { grid-row: 1; grid-column: 2; }
  .topbar .topbar-actions,
  .app-shell.sidebar-collapsed .topbar .topbar-actions { grid-row: 1; grid-column: 3; align-self: center; }
  .space-cover > .cover-actions { top: 14px; right: 14px; }
  .space-class-row { min-height: 82px; grid-template-columns: minmax(0, 1fr) 48px; }
  .space-class-open {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 10px 12px;
  }
  .space-class-status,
  .space-class-count { padding-left: 39px; }
}

@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  :root { --topbar-height: calc(60px + env(safe-area-inset-top)); }
  .topbar,
  .app-shell.sidebar-collapsed .topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    grid-template-columns: 44px 88px minmax(120px, 1fr) max-content;
    grid-template-rows: 52px;
    gap: 8px;
    align-content: center;
    padding-bottom: 0;
  }
  .topbar .menu-button,
  .app-shell.sidebar-collapsed .topbar .menu-button { grid-row: 1; grid-column: 1; }
  .topbar .history-controls,
  .app-shell.sidebar-collapsed .topbar .history-controls { grid-row: 1; grid-column: 2; }
  .topbar .topbar-actions,
  .app-shell.sidebar-collapsed .topbar .topbar-actions { grid-row: 1; grid-column: 4; }
}

@media (pointer: coarse) {
  .icon-button,
  .search-trigger,
  .timer-control,
  .primary-button,
  .secondary-button,
  .glass-button,
  .light-button,
  .space-actions-panel button,
  .period-switch button,
  .stats-scope-switch > button,
  .editor-toolbar button,
  .grade-entry-edit,
  .field input,
  .field select,
  .search-field input { min-height: 44px; }
  .icon-button,
  .grade-entry-edit { min-width: 44px; }
  .space-actions-menu > summary { width: 48px; height: 48px; }
}

@media (hover: none) {
  .space-card:hover,
  .grade-space-row:hover,
  .grade-entry-row:hover,
  .icon-button:hover,
  .primary-button:hover,
  .secondary-button:hover,
  .glass-button:hover,
  .light-button:hover {
    transform: none;
  }
  .space-card:hover { box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge); }
  .grade-space-row:hover,
  .grade-entry-row:hover { box-shadow: inset 0 1px 0 var(--atlas-glass-edge), 0 7px 18px rgba(72, 70, 64, 0.06); }
  .primary-button:hover { filter: none; box-shadow: var(--atlas-depth-control), inset 0 1px 0 rgba(255, 255, 255, 0.34); }
  button:active,
  summary:active { filter: brightness(0.97); transform: scale(0.99); }
}

@media (prefers-reduced-transparency: reduce) {
  body { background: var(--atlas-bg); }
  .sidebar,
  .topbar,
  .panel,
  .space-card,
  .space-class-disclosure,
  .class-intro,
  .class-documents,
  .editor-header,
  .editor-toolbar,
  .modal[open],
  .toast { background: var(--surface-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar,
  .topbar,
  .panel,
  .space-card,
  .space-class-disclosure,
  .class-intro,
  .class-documents,
  .editor-header,
  .editor-toolbar,
  .modal[open],
  .toast { background: var(--surface-strong); }
}

@media (forced-colors: active) {
  .sidebar,
  .topbar,
  .panel,
  .space-card,
  .space-cover,
  .space-class-disclosure,
  .class-intro,
  .class-documents,
  .editor-header,
  .editor-toolbar,
  .modal[open] { border: 1px solid CanvasText; box-shadow: none; }
  .primary-button { border: 1px solid ButtonText; }
}

@media (prefers-reduced-motion: reduce) {
  .space-card,
  .space-card::after,
  .icon-button,
  .primary-button,
  .secondary-button { transition-duration: 0.01ms !important; transform: none !important; }
}

@media print {
  body { background: #fff !important; }
  .paper-sheet,
  .document-page .paper-sheet { box-shadow: none !important; }
}

/* Fondo de pantalla personalizado: lo define tokens.css, que es quien fija el
   fondo del documento. Aquí solo se deja constancia para no reintroducirlo. */
/* Portada: menú alineado con el icono */
.space-cover > .cover-actions { top: clamp(38px, 5vw, 72px); }

/* Barra lateral: glass en toda la superficie */
.sidebar .primary-nav,
.sidebar .nav-section,
.sidebar .sidebar-footer,
.sidebar .space-list,
.sidebar .sidebar-collection,
.sidebar .brand-row { background: transparent; box-shadow: none; }

/* Barra superior: el buscador ocupa el hueco central. */
.topbar .search-trigger { width: 100%; max-width: 480px; min-width: 200px; justify-content: flex-start; }

/* Inicio: objetivo y continuidad; las métricas viven en Estadísticas. */
.home-top-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 14px; margin-top: 24px; }
.home-top-grid .focus-card { grid-column: auto; }
.goal-card.featured-goal { border: 0; background: linear-gradient(135deg, var(--action-start), var(--action-end)); color: #fff; box-shadow: var(--atlas-depth), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.goal-card.featured-goal .panel-heading, .goal-card.featured-goal .goal-value, .goal-card.featured-goal .goal-empty-copy { color: #fff; }
.goal-card.featured-goal .goal-value > strong { font-size: var(--type-metric-large); }
.goal-card.featured-goal .goal-value p, .goal-card.featured-goal .goal-value small, .goal-card.featured-goal .goal-empty-copy p { color: rgba(255, 255, 255, 0.78); }
.goal-card.featured-goal .progress-track { background: rgba(255, 255, 255, 0.28); }
.goal-card.featured-goal .progress-track i { background: #fff; }
.goal-card.featured-goal .secondary-button { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.38); color: #fff; box-shadow: none; backdrop-filter: none; }
.goal-card.featured-goal .text-action { color: rgba(255, 255, 255, 0.82); }

/* Producción: contenido resistente, listas largas y fuentes no interactivas. */
.source-document { cursor: default; }
.source-document:hover { background-color: transparent; box-shadow: none; transform: none; }
.review-unavailable {
  display: flex;
  max-width: 760px;
  min-height: 180px;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
}
.review-unavailable h2 { margin: 2px 0 8px; font-size: var(--type-title); line-height: 1.08; }
.review-unavailable p { max-width: 62ch; margin: 0; color: var(--muted); line-height: var(--leading-body); }

.space-link-copy,
.sidebar-class-main > span,
.space-class-identity > span,
.grade-space-identity > span,
.editor-title > span,
.focus-content > div { min-width: 0; }

.space-link-copy strong,
.sidebar-class-main strong,
.space-card > strong,
.space-cover h1,
.class-title-block h1,
.space-class-identity strong,
.grade-space-identity strong,
.editor-title strong,
.focus-content h2 {
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.space-class-disclosure,
.grade-entry-row,
.sidebar-class-tree { contain: layout style; }
.space-class-disclosure,
.grade-entry-row { content-visibility: auto; contain-intrinsic-size: auto 72px; }

/* Movimiento óptico: las rutas se sustituyen como un cambio de foco. */
.sidebar { view-transition-name: atlas-sidebar; }
.topbar { view-transition-name: atlas-topbar; }
.main-content { view-transition-name: atlas-content; }

::view-transition-old(atlas-sidebar),
::view-transition-new(atlas-sidebar),
::view-transition-old(atlas-topbar),
::view-transition-new(atlas-topbar) { animation: none; }

::view-transition-image-pair(atlas-content) {
  isolation: isolate;
  background: var(--atlas-bg-deep);
}
/* Con fondo de pantalla ese relleno liso tapaba la foto mientras duraba el cambio de pantalla. */
:root:has(body.has-wallpaper)::view-transition-image-pair(atlas-content) {
  background: transparent;
}

::view-transition-old(atlas-content) {
  animation: atlas-defocus-out 120ms ease-in both;
}

::view-transition-new(atlas-content) {
  animation: atlas-refocus-in 240ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes atlas-defocus-out {
  to { opacity: 0; filter: blur(3px); }
}

@keyframes atlas-refocus-in {
  from { opacity: .45; filter: blur(6px); clip-path: inset(0 0 2% 0 round 22px); }
  to { opacity: 1; filter: blur(0); clip-path: inset(0 round 0); }
}

.modal[open]::backdrop { animation: atlas-backdrop-in 160ms ease-out both; }
.modal[open] .modal-shell { animation: atlas-modal-in 220ms cubic-bezier(.16, 1, .3, 1) both; }
.space-class-disclosure.open .space-class-content { animation: atlas-disclosure-in 180ms cubic-bezier(.16, 1, .3, 1) both; }
.progress-track i,
.grade-coverage-track i,
.grade-space-progress i { transition: width 320ms cubic-bezier(.16, 1, .3, 1); } /* impeccable-disable-line layout-transition: width is the semantic fill of these bounded progress bars */

@keyframes atlas-backdrop-in { from { opacity: 0; } }
@keyframes atlas-modal-in {
  from { opacity: .5; filter: blur(5px); transform: scale(.985) translateY(6px); }
  to { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
}
@keyframes atlas-disclosure-in {
  from { opacity: .45; clip-path: inset(0 0 18% 0 round 16px); transform: translateY(-4px); }
  to { opacity: 1; clip-path: inset(0 round 0); transform: translateY(0); }
}

form[aria-busy="true"] button[type="submit"]::after,
.v2-review-item button[aria-busy="true"]::after {
  width: 14px;
  height: 14px;
  margin-inline-start: 8px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  content: "";
  animation: atlas-busy-spin 650ms linear infinite;
}
@keyframes atlas-busy-spin { to { transform: rotate(1turn); } }

@media (max-width: 760px) {
  .home-top-grid { grid-template-columns: 1fr; }
  .review-unavailable { min-height: 0; padding: 22px; }
  .sidebar .brand,
  .sidebar button,
  .sidebar summary,
  .goal-card .secondary-button,
  .section-heading > .secondary-button { min-height: 44px; }
  .sidebar .icon-button,
  .sidebar .space-chevron { min-width: 44px; width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .editor-toolbar {
    gap: 3px;
    overflow-x: hidden;
    padding-inline: 8px;
  }
  .editor-toolbar button[data-action] {
    width: 44px;
    flex: 0 0 44px;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
  .editor-toolbar button[data-action] .icon { width: 18px; height: 18px; }
}

@media (max-width: 360px) {
  .editor-toolbar { gap: 0; padding-inline: 2px; }
  .editor-toolbar > span { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(atlas-content),
  ::view-transition-new(atlas-content),
  .modal[open]::backdrop,
  .modal[open] .modal-shell,
  .space-class-disclosure.open .space-class-content,
  form[aria-busy="true"] button[type="submit"]::after,
  .v2-review-item button[aria-busy="true"]::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .progress-track i,
  .grade-coverage-track i,
  .grade-space-progress i { transition-duration: .01ms !important; }
}

@container study-app-body (max-width: 1050px) {
  .space-card:nth-child(n) { grid-column: span 6; }
}

/* Las filas de clase conservan su disclosure independiente. */
.class-disclosure-list { border: 0; background: transparent; }
.space-class-disclosure > summary { border-radius: 20px; }

/* Editor y fuentes unificados · 2026-08-31 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.supplementary-source { align-items: center; }
.space-card-shell {
  position: relative;
  grid-column: span 4;
  min-width: 0;
  border-radius: var(--ap-radius-lg);
  outline: 0;
  transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.space-card-shell:nth-child(3n + 1) { grid-column: span 5; }
.space-card-shell:nth-child(3n + 2) { grid-column: span 4; }
.space-card-shell:nth-child(3n) { grid-column: span 3; }
.space-card-shell .space-card { width: 100%; height: 100%; grid-column: auto; }
.space-card-shell.dragging { opacity: .52; transform: scale(.985); }
.space-card-shell.drag-over { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 76%, transparent); }
.space-card-shell:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 28%, transparent); }
.space-reorder-handle {
  position: absolute;
  right: 48px;
  top: 22px;
  z-index: 4;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 11px;
  color: var(--muted);
  background: color-mix(in srgb, var(--atlas-glass-strong) 76%, transparent);
  cursor: grab;
  pointer-events: none;
}
.space-reorder-handle .icon { width: 15px; height: 15px; }
/* Over a photographic card the light glass handle vanishes in light theme;
   use the same dark translucent chip as the cover monogram. */
.space-card-shell:has(> .space-card.has-photo) .space-reorder-handle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(24, 24, 22, 0.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.class-disclosure-list {
  display: grid;
  gap: 12px;
  border: 0;
  background: transparent;
}
.space-class-disclosure {
  overflow: hidden;
  border: 1px solid var(--atlas-edge);
  border-radius: 20px;
  background: color-mix(in srgb, var(--atlas-glass) 92%, transparent);
  box-shadow: var(--atlas-depth-control);
}
.space-class-disclosure:last-child { border-bottom: 1px solid var(--atlas-edge); }

.source-manager {
  margin-top: 18px;
  padding: clamp(18px, 2.4vw, 28px);
}
.source-manager > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.source-manager > header h2 { margin: 0; font-size: clamp(20px, 2vw, 28px); }
.source-manager > header p { max-width: 62ch; margin: 6px 0 0; color: var(--muted); }
.source-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--atlas-edge);
  border-radius: var(--ap-radius-pill);
  color: var(--muted);
  font-size: var(--ap-text-label);
}
.source-manager-list { display: grid; gap: 10px; }
.source-manager-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--atlas-edge) 86%, transparent);
  border-radius: 17px;
  background: color-mix(in srgb, var(--atlas-glass-strong) 68%, transparent);
}
.source-manager-row.selected { border-color: color-mix(in srgb, var(--blue) 52%, var(--atlas-edge)); }
.source-manager-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 11%, transparent);
}
.source-manager-icon .icon { width: 18px; height: 18px; }
.source-manager-copy { display: grid; min-width: 0; gap: 3px; }
.source-manager-copy strong, .source-manager-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-manager-copy small { color: var(--muted); }
.source-manager-actions { display: flex; align-items: center; gap: 8px; }
.source-replace-button, .toolbar-file-button {
  position: relative;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--atlas-edge);
  border-radius: 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--atlas-glass-strong) 82%, transparent);
  cursor: pointer;
}
.source-replace-button:hover, .toolbar-file-button:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--atlas-edge)); }
.source-replace-button input, .toolbar-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.supplementary-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px 4px 54px; }
.supplementary-list > span { display: inline-flex; align-items: center; border: 1px solid var(--atlas-edge); border-radius: var(--ap-radius-sm); background: var(--atlas-glass); }
.supplementary-list > span > button:first-child { display: inline-flex; max-width: 260px; min-height: 38px; align-items: center; gap: 7px; padding: 0 8px 0 11px; border: 0; color: var(--text); background: transparent; }
.supplementary-list > span > button:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-version-notice { color: var(--blue); }

.editor-header > div:last-child { display: flex; align-items: center; gap: 9px; }
.editor-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: min(100% - 24px, 1120px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.editor-toolbar::-webkit-scrollbar { display: none; }
.editor-toolbar > * { flex: 0 0 auto; }
.editor-toolbar > span { width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
.editor-toolbar button, .editor-toolbar .toolbar-file-button { min-width: 38px; min-height: 38px; padding: 0 10px; }
.editor-toolbar button[aria-pressed="true"] { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
.format-select { display: inline-flex; min-height: 38px; align-items: center; }
.format-select select {
  min-width: 124px;
  height: 38px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--atlas-edge);
  border-radius: 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--atlas-glass-strong) 82%, transparent);
}

.export-menu { position: relative; }
.export-menu > summary { list-style: none; cursor: pointer; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(300px, 76vw);
  padding: 7px;
  border: 1px solid var(--atlas-edge);
  border-radius: 17px;
  background: color-mix(in srgb, var(--atlas-glass-strong) 94%, transparent);
  box-shadow: var(--atlas-depth);
  backdrop-filter: blur(28px) saturate(1.25);
}
.export-menu-panel button {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  color: var(--text);
  text-align: left;
  background: transparent;
}
.export-menu-panel button:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 9%, transparent); }
.export-menu-panel button:disabled { opacity: .48; cursor: not-allowed; }
.export-menu-panel small { color: var(--muted); font-weight: 400; }
/* DOCX en Gratis: solo un candado junto al nombre; el botón sigue pulsable y abre los planes. */
.export-menu-panel strong { display: inline-flex; align-items: center; gap: 6px; }
.export-lock { display: inline-flex; color: var(--muted); }
.export-lock .icon { width: 14px; height: 14px; }

.document-page .paper-sheet {
  box-sizing: border-box;
  width: min(calc(var(--note-paper-width, 920px) + var(--note-margin-inline, 72px) + var(--note-margin-inline, 72px)), calc(100% - 24px));
  margin: 24px auto 64px;
  padding: clamp(44px, 6vw, 72px) var(--note-margin-inline, 72px) clamp(70px, 8vw, 110px);
  border-radius: 4px;
  box-shadow: none;
}
.document-title-editor {
  max-width: none;
  margin: 0;
  border-radius: 4px;
  outline: 0;
  caret-color: var(--blue);
}
.editable-note {
  width: 100%;
  max-width: none;
  min-height: 48vh;
  font-size: var(--note-font-size, 16px);
  line-height: var(--note-line-height, 1.75);
  outline: 0;
}
.document-page .document-title-editor:focus,
.document-page .document-title-editor:focus-visible,
.document-page .editable-note:focus,
.document-page .editable-note:focus-visible {
  outline: 0;
  outline-offset: 0;
  box-shadow: none;
}
.editable-note h2 { margin: 2.15em 0 .7em; font-size: 1.65em; line-height: 1.16; letter-spacing: -.025em; }
.editable-note h3 { margin: 1.75em 0 .55em; font-size: 1.24em; line-height: 1.25; letter-spacing: -.015em; }
.editable-note p, .editable-note div { margin: 0 0 1em; }
.editable-note strong, .editable-note b { color: inherit; font-weight: 720; }
.editable-note u { text-underline-offset: .16em; text-decoration-thickness: .08em; }
.note-figure { margin: 2.1rem 0; }
.note-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; }
.note-figure figcaption, .editable-note [data-note-style="caption"] { margin: .65rem auto 0; color: var(--muted); font-size: .86em; line-height: 1.45; text-align: center; }
.note-figure.missing-image { min-height: 120px; border: 1px dashed var(--line); }
.v2-generated-figure { position: relative; width: min(var(--v2-figure-width, 60%), 100%); max-width: 100%; margin: 1.1rem auto 1.45rem; break-inside: avoid; overflow-wrap: anywhere; user-select: none; }
.v2-generated-figure img { width: 100%; max-height: none; height: auto; object-fit: contain; pointer-events: none; }
.v2-generated-figure.is-resizing { cursor: ew-resize; }
.v2-figure-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin: 0 0 .45rem; }
.v2-figure-toolbar button { min-height: 1.7rem; padding: 0 .55rem; font-size: .78rem; }
.v2-figure-toolbar [data-v2-width-label] { color: var(--muted); font-size: .75rem; min-width: 2.6rem; text-align: center; }
.v2-figure-resize { position: absolute; right: -.15rem; bottom: 1.55rem; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: ew-resize; touch-action: none; }
.v2-figure-resize::after { content: ""; position: absolute; right: .2rem; bottom: .2rem; width: .72rem; height: .72rem; border-right: 2px solid color-mix(in oklab, var(--text) 55%, transparent); border-bottom: 2px solid color-mix(in oklab, var(--text) 55%, transparent); } /* impeccable-disable-line side-tab: two borders draw the literal diagonal resize-corner control */
.v2-review-actions { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; }

:root[data-theme="light"] .document-page .paper-sheet { background: #fff; color: #1b1b1a; border-color: rgba(77, 75, 69, .13); }
:root[data-theme="dark"] .document-page .paper-sheet { background: var(--ap-paper-dark); color: var(--ap-ink); border-color: var(--ap-line); }
:root[data-theme="dark"] .document-page .paper-kicker { color: var(--ap-muted); }
:root[data-theme="dark"] .document-page .paper-rule { background: linear-gradient(90deg, #b6b1a7, #989287, rgba(255,255,255,.12)); }
:root[data-theme="dark"] .document-page .editable-note, :root[data-theme="dark"] .document-page .document-title-editor { color: #f3f1ec; }

:root[data-theme="light"] .goal-card.featured-goal {
  color: #292925;
  border: 1px solid rgba(78, 77, 71, .16);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(239,237,232,.78));
}
:root[data-theme="light"] .goal-card.featured-goal .panel-heading,
:root[data-theme="light"] .goal-card.featured-goal .goal-value,
:root[data-theme="light"] .goal-card.featured-goal .goal-empty-copy { color: #292925; }
:root[data-theme="light"] .goal-card.featured-goal .goal-value p,
:root[data-theme="light"] .goal-card.featured-goal .goal-value small,
:root[data-theme="light"] .goal-card.featured-goal .goal-empty-copy p { color: #716e67; }
:root[data-theme="light"] .goal-card.featured-goal .secondary-button { color: #3b3b37; background: rgba(255,255,255,.62); border-color: rgba(78,77,71,.2); }
:root[data-theme="dark"] .goal-card.featured-goal { color: #f3f1ec; background: linear-gradient(145deg, rgba(51,51,47,.94), rgba(29,29,26,.94)); border: 1px solid rgba(226,221,210,.14); }

.document-settings-form { min-width: min(540px, 80vw); }
.range-field { display: grid; gap: 10px; }
.range-field > span { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.range-field output { color: var(--muted); font-variant-numeric: tabular-nums; }
.modal-action-spacer { flex: 1; }

@media (max-width: 760px) {
  .source-manager > header { display: grid; }
  .source-count { justify-self: start; }
  .source-manager-row { grid-template-columns: 38px minmax(0, 1fr); }
  .source-manager-actions { grid-column: 2; justify-content: flex-start; }
  .supplementary-list { padding-left: 0; }
  .editor-header > div:last-child .save-state { display: none; }
  .editor-toolbar { width: calc(100% - 12px); padding-inline: 6px; }
  .editor-toolbar button span, .toolbar-file-button > span { display: none; }
  .format-select select { min-width: 110px; }
  .document-page .paper-sheet { width: 100%; margin: 12px 0 32px; padding: 38px clamp(20px, 7vw, 44px) 64px; border-radius: 0; }
  .document-settings-form { min-width: 0; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .space-card-shell,
  .space-card-shell:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 760px) {
  .space-card-shell,
  .space-card-shell:nth-child(n) { grid-column: 1 / -1; }
}

@media print {
  .document-page .paper-sheet {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #111 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .document-title-editor, .editable-note { color: #111 !important; }
  .note-figure img { max-height: 240mm; object-fit: contain; }
}

/* Motor V2: una única secuencia visible desde las fuentes hasta la revisión. */
.v2-engine-panel {
  width: 100%;
  margin-top: 26px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--line) 76%, white 24%);
  border-radius: var(--ap-radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--atlas-glass-strong) 88%, transparent), color-mix(in srgb, var(--accent-soft) 34%, transparent));
  box-shadow: var(--atlas-depth-card), inset 0 1px 0 rgba(255, 255, 255, .42);
  overflow: hidden;
}

.v2-engine-panel > header,
.v2-review-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.v2-engine-panel h2,
.v2-review-panel h2 { margin: 8px 0 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; }
.v2-engine-mark { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: var(--type-label); font-weight: 700; }
.v2-engine-mark .icon { width: 16px; height: 16px; }
.v2-service-state,
.v2-export-gate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--ap-radius-pill);
  background: color-mix(in srgb, var(--atlas-glass-strong) 78%, transparent);
  color: var(--muted);
  font-size: var(--type-meta);
  white-space: nowrap;
}
.v2-service-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent); }
.v2-service-state.offline i { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent); }
.v2-engine-intro { max-width: 74ch; margin: 16px 0 24px; color: var(--muted); line-height: var(--leading-body); }

.v2-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v2-source-field {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 78px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--atlas-glass-strong) 70%, transparent);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.v2-source-field:hover { border-color: color-mix(in srgb, var(--blue) 38%, var(--line)); background: var(--atlas-glass-strong); transform: translateY(-1px); }
.v2-source-field.selected { border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); box-shadow: inset 3px 0 0 var(--blue); }
.v2-source-field > .icon { width: 22px; color: var(--blue); }
.v2-source-field strong,
.v2-source-field small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-source-field strong { font-size: var(--type-ui); }
.v2-source-field small { margin-top: 4px; color: var(--muted); font-size: var(--type-meta); }
.v2-source-action { color: var(--blue); font-size: var(--type-meta); font-weight: 650; }
.v2-source-field input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v2-source-field:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }

.v2-engine-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; }
.v2-engine-actions > span { max-width: 64ch; color: var(--muted); font-size: var(--type-meta); line-height: 1.45; }
.v2-engine-actions .primary-button,
.v2-engine-actions .secondary-button { flex: 0 0 auto; }
.v2-engine-actions button[disabled] { cursor: not-allowed; opacity: .45; transform: none; }

.v2-stage-rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 25px 0 14px; padding: 0; list-style: none; }
.v2-stage-rail::before { position: absolute; top: 15px; left: 7%; right: 7%; height: 1px; background: var(--line); content: ""; }
.v2-stage-rail li { position: relative; display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: var(--type-meta); text-align: center; }
.v2-stage-rail i { z-index: 1; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.v2-stage-rail i .icon { width: 14px; }
.v2-stage-rail li.done i,
.v2-stage-rail li.active i { border-color: color-mix(in srgb, var(--blue) 58%, var(--line)); background: color-mix(in srgb, var(--blue) 13%, var(--surface)); color: var(--blue); }
.v2-stage-rail li.active { color: var(--ink); font-weight: 650; }
.v2-progress-track { height: 5px; overflow: hidden; border-radius: var(--ap-radius-pill); background: color-mix(in srgb, var(--line) 78%, transparent); }
.v2-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--violet)); transition: width 300ms cubic-bezier(.16, 1, .3, 1); } /* impeccable-disable-line layout-transition: width is the semantic fill of the bounded job progress bar */
.v2-progress-value { color: var(--blue); font-size: var(--type-title); font-weight: 680; font-variant-numeric: tabular-nums; }
.v2-engine-message { margin: 16px 0 0; color: var(--ink); }
.v2-source-line { margin: 7px 0 0; overflow: hidden; color: var(--muted); font-size: var(--type-meta); text-overflow: ellipsis; white-space: nowrap; }
.v2-review-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.v2-review-summary span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: var(--type-meta); }
.v2-review-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.v2-document-status,
.v2-review-panel {
  width: min(980px, calc(100% - 48px));
  margin: 24px auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--atlas-glass-strong) 80%, transparent);
  box-shadow: var(--atlas-depth-card), inset 0 1px 0 rgba(255, 255, 255, .34);
}
.v2-document-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; }
.v2-document-status strong { display: block; }
.v2-document-status p { margin: 4px 0 0; color: var(--muted); font-size: var(--type-meta); }
.v2-document-status > span:last-child { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.v2-document-status.error { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.v2-review-panel { padding: clamp(20px, 3vw, 30px); }
.v2-review-panel header p { max-width: 66ch; margin: 9px 0 0; color: var(--muted); line-height: var(--leading-body); }
.v2-export-gate .icon { width: 14px; }
.v2-export-gate.ready { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); color: var(--success); }
.v2-export-gate.blocked { border-color: color-mix(in srgb, var(--warning) 38%, var(--line)); color: var(--warning); }
.v2-review-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 16px; }
.v2-review-counts span { padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); font-size: var(--type-meta); }
.v2-review-counts strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 19px; font-variant-numeric: tabular-nums; }
.v2-review-group { border-top: 1px solid var(--line); }
.v2-review-group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 3px; color: var(--ink); font-weight: 650; cursor: pointer; list-style: none; }
.v2-review-group > summary::-webkit-details-marker { display: none; }
.v2-review-group > summary span { display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 7px; border-radius: var(--ap-radius-pill); background: var(--accent-soft); color: var(--blue); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
.v2-review-group > div { display: grid; gap: 8px; padding: 0 0 14px; }
.v2-review-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface) 74%, transparent); }
.v2-review-item strong { display: block; font-size: var(--type-ui); line-height: 1.38; }
.v2-review-item p { max-width: 76ch; margin: 7px 0 0; color: var(--muted); font-size: var(--type-meta); line-height: 1.55; }
.v2-review-item small { display: block; margin-top: 8px; color: var(--blue); font-size: var(--type-meta); }
.v2-review-item > .icon { width: 18px; color: var(--success); }
.v2-severity { display: inline-flex; margin-bottom: 8px; padding: 3px 7px; border-radius: var(--ap-radius-pill); background: var(--accent-soft); color: var(--blue); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.v2-severity.high,
.v2-severity.alta { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }
.review-context { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--accent-soft); }
.review-context-label { display: block; margin-bottom: 7px; color: var(--blue); font-size: .72rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.review-context strong { display: block; line-height: 1.4; }
.review-context p { margin: 7px 0 0; color: var(--muted); font-size: var(--type-meta); line-height: 1.5; }
.review-context small { display: block; margin-top: 8px; color: var(--blue); }
.review-context .v2-review-actions { margin-top: 12px; align-items: flex-start; }
.review-guided-types { flex-wrap: wrap; }
.v2-review-cause-items { grid-column: 1 / -1; display: grid; gap: 10px; }
.v2-review-cause-items > summary { cursor: pointer; color: var(--blue); font-size: var(--type-meta); font-weight: 650; }
.v2-moment-list { margin: 6px 0 4px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--type-meta); }
.v2-moment-list span { font-weight: 650; margin-right: 4px; }
.review-guided-warning { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.review-guided-warning p { margin-top: 0; color: inherit; }
.review-guided-warning p + p { margin-top: 6px; }
.review-guided-warning .review-guided-warning-strong { color: var(--danger); font-weight: 650; }
.review-guided-nudge { padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 8px; background: var(--accent-soft); color: var(--ink); }
.review-guided-confirm { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: var(--type-meta); line-height: 1.45; }
.review-guided-confirm input { margin-top: 3px; }
.modal-form textarea { width: 100%; resize: vertical; }
.editor-warning.generated-note { align-items: center; }
.editor-warning.generated-note p { flex: 1; }
.editor-warning.generated-note .secondary-button { flex: 0 0 auto; }

@media (max-width: 760px) {
  .v2-source-grid { grid-template-columns: 1fr; }
  .v2-engine-panel > header,
  .v2-review-panel > header,
  .v2-engine-actions { align-items: stretch; flex-direction: column; }
  .v2-engine-actions button { width: 100%; }
  .v2-review-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-review-item { grid-template-columns: 1fr; }
  .v2-review-item .secondary-button { width: 100%; }
  .v2-document-status,
  .v2-review-panel { width: calc(100% - 24px); }
  .editor-warning.generated-note { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
  .v2-stage-rail li span { font-size: 10px; }
  .v2-source-field { grid-template-columns: 36px minmax(0, 1fr); }
  .v2-source-action { grid-column: 2; }
  .v2-review-counts { grid-template-columns: 1fr 1fr; }
}

@media print {
  .v2-engine-panel,
  .v2-document-status,
  .v2-review-panel,
  .editor-warning.generated-note { display: none !important; }
}

/* Barra única del editor y menú tipográfico */
.editor-shell { container-type: inline-size; }
.editor-command-bar {
  position: sticky;
  z-index: 18;
  top: 86px;
  display: grid;
  width: min(calc(100% - 24px), 1400px);
  min-height: 68px;
  grid-template-columns: minmax(230px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  margin: 0 auto;
  padding: 9px 12px;
  border-radius: 18px;
  background: var(--atlas-glass);
  box-shadow: var(--atlas-depth-soft), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(28px) saturate(138%);
  -webkit-backdrop-filter: blur(28px) saturate(138%);
}
.editor-context {
  min-width: 0;
  gap: 9px;
}
.editor-context .icon-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.editor-context p,
.editor-context strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-context p {
  color: var(--muted);
  font-size: var(--type-meta);
}
.editor-context strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: var(--type-meta);
  font-weight: 650;
}
.editor-format-tools {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
}
.editor-command-bar button,
.editor-command-bar summary,
.editor-command-bar .toolbar-file-button {
  font-family: inherit;
  font-size: var(--type-ui);
}
.editor-format-tools > button,
.editor-format-tools > .toolbar-file-button {
  display: inline-flex;
  min-width: 38px;
  min-height: 40px;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 11px;
  color: var(--muted-strong);
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.editor-format-tools > button:hover,
.editor-format-tools > .toolbar-file-button:hover {
  color: var(--ink);
  background: var(--atlas-glass-strong);
  box-shadow: var(--atlas-depth-control), inset 0 1px 0 color-mix(in srgb, var(--atlas-reflection) 62%, transparent);
  transform: translateY(-1px);
}
[data-theme="dark"] .editor-format-tools > button:hover,
[data-theme="dark"] .editor-format-tools > .toolbar-file-button:hover {
  box-shadow: var(--atlas-depth-control), inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
}
.editor-format-tools > button[aria-pressed="true"] {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
}
.editor-format-tools .icon { width: 15px; height: 15px; }
.editor-format-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  margin: 0 4px;
  background: color-mix(in srgb, var(--line) 82%, transparent);
}
.editor-actions {
  display: flex;
  min-width: max-content;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.editor-actions .save-state {
  margin-right: 2px;
  white-space: nowrap;
}
.editor-actions .secondary-button,
.editor-actions .primary-button {
  min-height: 42px;
}
.editor-style-menu {
  position: relative;
  flex: 0 0 auto;
}
.editor-style-menu > summary {
  position: relative;
  display: flex;
  min-width: 118px;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--atlas-glass-strong) 78%, transparent);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.editor-style-menu > summary::-webkit-details-marker { display: none; }
.editor-style-menu > summary:hover,
.editor-style-menu[open] > summary {
  background: var(--atlas-glass-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent);
}
.editor-style-menu > summary > i {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms cubic-bezier(.16, 1, .3, 1);
}
.editor-style-menu[open] > summary > i { transform: rotate(225deg) translate(-1px, -1px); }
.editor-style-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 10px);
  left: 0;
  display: grid;
  width: min(286px, calc(100vw - 44px));
  gap: 3px;
  padding: 7px;
  border-radius: var(--ap-radius-md);
  background: #faf9f6;
  box-shadow: 0 22px 54px -24px color-mix(in srgb, var(--ink) 38%, transparent), inset 0 1px 0 var(--atlas-glass-edge);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  transform-origin: top left;
  animation: editor-menu-in 160ms cubic-bezier(.16, 1, .3, 1);
}
.editor-style-panel button {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 11px;
  color: var(--ink);
  text-align: left;
  background: transparent;
}
.editor-style-panel button:hover,
.editor-style-panel button[aria-checked="true"] {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.editor-style-panel button[aria-checked="true"] {
  color: var(--blue);
}
[data-theme="dark"] .editor-style-panel { background: #262622; }
.editor-style-panel button > span,
.editor-style-panel button strong,
.editor-style-panel button small { display: block; }
.editor-style-panel button strong {
  font-size: var(--type-ui);
  font-weight: 650;
}
.editor-style-panel button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 400;
}
.style-sample {
  min-width: 34px;
  color: var(--muted-strong);
  text-align: center;
}
.style-sample.text { font-size: 15px; font-weight: 450; }
.style-sample.title { font-size: 20px; font-weight: 720; letter-spacing: -.03em; }
.style-sample.subtitle { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.style-sample.caption { font-size: var(--ap-text-label); font-style: italic; font-weight: 450; }
@keyframes editor-menu-in {
  from { opacity: .4; transform: translateY(-5px) scale(.985); backdrop-filter: blur(18px); }
  to { opacity: 1; transform: translateY(0) scale(1); backdrop-filter: blur(28px); }
}

@container (max-width: 1280px) {
  .editor-command-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .editor-format-tools { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .editor-command-bar {
    top: calc(var(--topbar-height) + 10px);
    width: calc(100% - 20px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    padding: 10px;
    border-radius: var(--ap-radius-md);
  }
  .editor-context .icon-button { width: 42px; height: 42px; flex-basis: 42px; }
  .editor-actions .save-state { display: none; }
  .editor-actions .secondary-button,
  .editor-actions .primary-button { min-height: 42px; padding-inline: 12px; }
  .editor-format-tools { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; gap: 5px; }
  .editor-format-divider { display: none; }
  .editor-format-tools > button,
  .editor-format-tools > .toolbar-file-button { min-width: 42px; min-height: 42px; }
}

@media (max-width: 520px) {
  .editor-command-bar { grid-template-columns: minmax(0, 1fr); }
  .editor-actions { grid-row: 2; width: 100%; justify-content: stretch; }
  .editor-actions .export-menu,
  .editor-actions .primary-button { flex: 1; }
  .editor-actions .export-menu > summary,
  .editor-actions .primary-button { width: 100%; justify-content: center; }
  .editor-format-tools { grid-row: 3; }
  .editor-format-tools > button > span,
  .editor-format-tools > .toolbar-file-button > span { display: none; }
  .editor-style-menu > summary { min-width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-style-panel { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .editor-command-bar,
  .editor-style-panel { background: var(--surface-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media print {
  .editor-command-bar { display: none !important; }
}