@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Noto+Sans:wght@400;600;700;800&family=Open+Sans:wght@400;500;600&display=swap";


@layer components;

/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */

@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer utilities {
  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

:root {
  --text-primary: oklch(28.894% .0130799 193.563);
  --text-secondary: oklch(48.6209% .0176831 207.464 / .7);
  --text-muted: oklch(70.2705% .0154173 143.667);
  --bg-glass: oklch(96.1855% .00474742 185.532);
  --bg-glass-darker: oklch(95.27% .00755209 144.862);
  --bg-warm: oklch(96.0253% .00808241 100.047);
  --bg-gradient-warm: oklch(94.6909% .00804468 104.712);
  --bg-gradient-cool: oklch(93.1076% .00560644 222.773);
  --bg-gradient-cream: #f5f5f0;
  --bg-gradient-blush: oklch(93.3287% .0103978 94.3505);
  --bg-gradient-slate: oklch(92.6303% .0061511 214.419);
  --bg-gradient-peach: oklch(95.2374% .00768645 105.165);
  --bg-gradient-ice: oklch(94.5395% .00397244 247.833);
  --accent-blue: #012eff;
  --accent-blue-soft: oklch(47.9567% .294585 264.231 / .15);
  --accent-terracotta: #ae5630;
  --accent-terracotta-soft: oklch(55.3819% .126225 42.773 / .15);
  --accent-green: #00ff25;
  --accent-green-muted: oklch(65.5071% .180845 186.489);
  --glass-bg: var(--bg-glass);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --glass-bg: color-mix(in oklch, var(--bg-glass) 52%, transparent 48%);
  }
}

:root {
  --glass-border: oklch(100% 5.96046e-8 none / .4);
  --glass-shadow: oklch(33.6902% .0192458 251.462 / .12);
  --glass-shadow-warm: oklch(55.3819% .126225 42.773 / .06);
  --glass-highlight-top: #ffffff73;
  --glass-highlight-bottom: #ffffff14;
  --code-glass-base: var(--bg-glass-darker);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --code-glass-base: color-mix(in oklch, var(--bg-glass-darker) 55%, transparent 45%);
  }
}

:root {
  --code-bg: #303841;
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --code-bg: color-mix(in oklch, #303841 10%, var(--code-glass-base) 90%);
  }
}

:root {
  --code-border: oklch(33.6902% .0192458 251.462 / .15);
  --font-heading: "Noto Sans", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  font-size: 17px;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  min-height: 100dvh;
  line-height: 1.7;
  overflow-x: hidden;
}

#root {
  min-height: 100dvh;
  position: relative;
}

.animated-bg {
  z-index: 0;
  position: fixed;
  inset: 0;
}

.animated-bg:before {
  content: "";
  background: linear-gradient(135deg, var(--bg-gradient-warm) 0%, var(--bg-gradient-cream) 16%, var(--bg-gradient-cool) 33%, var(--bg-gradient-blush) 50%, var(--bg-gradient-slate) 66%, var(--bg-gradient-cream) 83%, var(--bg-gradient-warm) 100%);
  background-size: 400% 400%;
  animation: 45s infinite gradientShift;
  position: absolute;
  inset: 0;
}

.animated-bg:after {
  content: "";
  background: radial-gradient(ellipse 80% 60% at 20% 30%, var(--bg-gradient-peach), transparent 70%), radial-gradient(ellipse 70% 80% at 80% 70%, var(--bg-gradient-ice), transparent 70%);
  opacity: .35;
  mix-blend-mode: normal;
  background-size: 200% 200%;
  animation: 60s ease-in-out infinite radialShift;
  position: absolute;
  inset: 0;
}

@keyframes gradientShift {
  0% {
    background-position: 0%;
  }

  25% {
    background-position: 50% 0;
  }

  50% {
    background-position: 100%;
  }

  75% {
    background-position: 50% 100%;
  }

  100% {
    background-position: 0%;
  }
}

@keyframes radialShift {
  0% {
    background-position: 30% 40%, 70% 60%;
  }

  33% {
    background-position: 60% 20%, 40% 80%;
  }

  66% {
    background-position: 40% 70%, 60% 30%;
  }

  100% {
    background-position: 30% 40%, 70% 60%;
  }
}

.gradient-orb {
  filter: blur(60px);
  pointer-events: none;
  will-change: transform;
  border-radius: 50%;
  position: absolute;
}

.gradient-orb--warm {
  background: var(--bg-gradient-blush);
  opacity: .06;
  width: clamp(300px, 40vw, 600px);
  height: clamp(300px, 40vw, 600px);
  animation: 50s ease-in-out infinite orbDrift1;
  top: 10%;
  left: -5%;
}

.gradient-orb--cool {
  background: var(--bg-gradient-ice);
  opacity: .05;
  width: clamp(250px, 35vw, 500px);
  height: clamp(250px, 35vw, 500px);
  animation: 65s ease-in-out infinite orbDrift2;
  bottom: 10%;
  right: -5%;
}

.gradient-orb--accent {
  background: var(--bg-gradient-peach);
  opacity: .04;
  width: clamp(200px, 25vw, 400px);
  height: clamp(200px, 25vw, 400px);
  animation: 55s ease-in-out infinite orbDrift3;
  top: 50%;
  left: 40%;
}

@keyframes orbDrift1 {
  0%, 100% {
    transform: translate(0) scale(1);
  }

  33% {
    transform: translate(3vw, 2vh) scale(1.02);
  }

  66% {
    transform: translate(-1vw, -3vh) scale(.98);
  }
}

@keyframes orbDrift2 {
  0%, 100% {
    transform: translate(0) scale(1);
  }

  33% {
    transform: translate(-2vw, -2vh) scale(1.03);
  }

  66% {
    transform: translate(2vw, 3vh) scale(.97);
  }
}

@keyframes orbDrift3 {
  0%, 100% {
    transform: translate(0) scale(1);
  }

  50% {
    transform: translate(-2vw, 3vh) scale(1.03);
  }
}

.glass-panel {
  background: linear-gradient(180deg, var(--bg-glass) 0%, var(--bg-glass) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .glass-panel {
    background: linear-gradient(180deg, color-mix(in oklch, var(--bg-glass) 56%, transparent 44%) 0%, color-mix(in oklch, var(--bg-glass) 48%, transparent 52%) 100%);
  }
}

.glass-panel {
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px var(--glass-shadow), 0 2px 8px var(--glass-shadow-warm), 0 1px 3px #0000000a, inset 0 1px 0 var(--glass-highlight-top), inset 0 -1px 0 var(--glass-highlight-bottom);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}

.glass-panel:before {
  content: "";
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, #0000 10%, #ffffff80 30%, #fff9 50%, #ffffff80 70%, #0000 90%);
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.glass-panel:after {
  content: "";
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-composite: xor;
  background: linear-gradient(135deg, #0000 30%, #ffffff26 45%, #ffffff40 50%, #ffffff26 55%, #0000 70%) 100% 100% / 250% 250%;
  padding: 1px;
  transition: opacity .4s, background-position .6s;
  position: absolute;
  inset: -1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}

.glass-panel:hover:after {
  opacity: 1;
  background-position: 0 0;
}

.glass-panel-code {
  background: linear-gradient(180deg, var(--code-glass-base) 0%, var(--code-bg) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .glass-panel-code {
    background: linear-gradient(180deg, color-mix(in oklch, var(--code-glass-base) 58%, transparent 42%) 0%, var(--code-bg) 100%);
  }
}

.glass-panel-code {
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--code-border);
  box-shadow: 0 4px 16px var(--glass-shadow), 0 1px 4px var(--glass-shadow-warm), inset 0 1px 0 #ffffff40;
  border-radius: .75rem;
  transition: border-color .3s, box-shadow .3s;
  position: relative;
}

.glass-panel-code:before {
  content: "";
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(135deg, #ffffff14 0%, #0000 60%);
  border-radius: .75rem 0 0;
  width: 50%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
}

.glass-panel-code.copied-flash {
  box-shadow: 0 4px 16px var(--glass-shadow), 0 0 12px oklch(86.7183% .288578 143.174 / .15), inset 0 1px 0 #fff3;
  border-color: oklch(86.7183% .288578 143.174 / .4);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.3;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: oklch(33.6902% .0192458 251.462 / .2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: oklch(33.6902% .0192458 251.462 / .35);
}

.landing-dot-grid {
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(circle, oklch(33.6902% .0192458 251.462 / .12) 1px, #0000 1px);
  background-size: 40px 40px;
  animation: 30s linear infinite dotGridDrift;
  position: fixed;
  inset: 0;
}

@keyframes dotGridDrift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 40px 40px;
  }
}

@keyframes inputIdleBreathe {
  0%, 100% {
    box-shadow: 0 0 #0000;
  }

  50% {
    box-shadow: 0 0 8px 2px oklch(47.9567% .294585 264.231 / .03);
  }
}

.input-focus-glow {
  animation: 4.5s ease-in-out infinite inputIdleBreathe;
}

@keyframes focusPulse {
  0% {
    box-shadow: 0 0 0 4px var(--accent-blue-soft), 0 0 0 8px transparent;
  }

  50% {
    box-shadow: 0 0 0 4px var(--accent-blue-soft), 0 0 16px 4px var(--accent-blue-soft);
  }

  100% {
    box-shadow: 0 0 0 4px var(--accent-blue-soft), 0 0 0 8px transparent;
  }
}

.input-focus-glow:focus {
  animation: 1.5s ease-out focusPulse;
}

.logo-breathe {
  animation: 4s ease-in-out infinite logoBreathe;
}

@keyframes logoBreathe {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

.btn-premium {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue) 100%) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  .btn-premium {
    background: linear-gradient(135deg, var(--accent-blue) 0%, color-mix(in oklch, var(--accent-blue) 80%, #303841 20%) 100%) !important;
  }
}

.btn-premium {
  position: relative;
  overflow: hidden;
}

.btn-premium:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000 0%, #ffffff1a 40%, #fff3 50%, #ffffff1a 60%, #0000 100%);
  width: 200%;
  height: 100%;
  animation: 6s ease-in-out infinite btnIdleShimmer;
  position: absolute;
  top: 0;
  left: -100%;
}

.btn-premium:hover:before {
  transition: left .6s;
  animation: none;
  left: 100%;
}

@keyframes btnIdleShimmer {
  0%, 100% {
    left: -100%;
  }

  50% {
    left: 100%;
  }
}

.coaching-phrase-card {
  transition: box-shadow .4s;
}

.coaching-phrase-card:hover {
  box-shadow: 0 8px 32px var(--glass-shadow), 0 2px 8px var(--glass-shadow-warm), 0 0 20px oklch(55.3819% .126225 42.773 / .06), inset 0 1px 0 var(--glass-highlight-top), inset 0 -1px 0 var(--glass-highlight-bottom);
}

.phrase-text, .section-header-text {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .phrase-text, .section-header-text {
    background: linear-gradient(135deg, var(--text-primary) 0%, color-mix(in oklch, var(--text-primary) 85%, #ae5630 15%) 100%);
  }
}

.phrase-text, .section-header-text {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.glass-panel[data-depth] {
  transition: box-shadow .4s, border-color .4s;
}

.glass-panel[data-depth="near"] {
  box-shadow: 0 14px 48px var(--glass-shadow), 0 4px 14px var(--glass-shadow-warm), 0 1px 4px #0000000f, inset 0 1px 0 var(--glass-highlight-top), inset 0 -1px 0 var(--glass-highlight-bottom);
  border-color: oklch(100% 5.96046e-8 none / .45) oklch(100% 5.96046e-8 none / .45) oklch(100% 5.96046e-8 none / .45) oklch(100% 5.96046e-8 none / .45);
}

.glass-panel[data-depth="far"] {
  box-shadow: 0 4px 16px oklch(33.6902% .0192458 251.462 / .07), 0 1px 4px oklch(55.3819% .126225 42.773 / .03), 0 0 2px #00000005, inset 0 1px 0 var(--glass-highlight-top), inset 0 -1px 0 var(--glass-highlight-bottom);
  border-color: oklch(100% 5.96046e-8 none / .32) oklch(100% 5.96046e-8 none / .32) oklch(100% 5.96046e-8 none / .32) oklch(100% 5.96046e-8 none / .32);
}

@media (hover: none) and (pointer: coarse) {
  .tap-feedback {
    position: relative;
  }

  .tap-feedback:active:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    background: #ffffff26;
    animation: .3s ease-out forwards tapFlash;
    position: absolute;
    inset: 0;
  }
}

@keyframes tapFlash {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.lesson-tab {
  cursor: pointer;
  font-family: var(--font-heading);
  color: var(--text-secondary);
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: .6rem;
  min-width: 44px;
  min-height: 44px;
  padding: .6rem .85rem;
  font-size: .9rem;
  font-weight: 600;
  transition: color .18s, background-color .18s, box-shadow .18s, transform .12s;
}

.lesson-tab:hover:not(.is-active) {
  background-color: var(--accent-blue);
}

@supports (color: color-mix(in lab, red, red)) {
  .lesson-tab:hover:not(.is-active) {
    background-color: color-mix(in oklch, var(--accent-blue) 10%, transparent 90%);
  }
}

.lesson-tab:hover:not(.is-active) {
  color: var(--text-primary);
}

.lesson-tab:active:not(.is-active) {
  transform: scale(.97);
}

.lesson-tab.is-active {
  color: #fff;
  background: var(--accent-blue);
  box-shadow: 0 2px 8px var(--accent-blue), 0 0 12px 4px var(--accent-blue);
  font-weight: 700;
}

@supports (color: color-mix(in lab, red, red)) {
  .lesson-tab.is-active {
    box-shadow: 0 2px 8px color-mix(in oklch, var(--accent-blue) 30%, transparent 70%), 0 0 12px 4px color-mix(in oklch, var(--accent-blue) 25%, transparent 75%);
  }
}

@media (max-width: 480px) {
  .homework-toggle-container, .homework-toggle-container > [role="radiogroup"] {
    width: 100%;
  }

  .homework-toggle-container > [role="radiogroup"] > button {
    flex: 1;
  }
}

.presence-pill {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  outline-offset: 3px;
  border-radius: 999px;
}

.presence-pill:after {
  display: none;
}

.presence-pill--waiting {
  animation: 2.6s ease-in-out infinite presenceWaiting;
}

@keyframes presenceWaiting {
  0%, 100% {
    opacity: .55;
  }

  50% {
    opacity: 1;
  }
}

.presence-pill--warm {
  border-color: var(--accent-terracotta);
}

@supports (color: color-mix(in lab, red, red)) {
  .presence-pill--warm {
    border-color: color-mix(in oklch, var(--accent-terracotta) 28%, var(--glass-border) 72%);
  }
}

.presence-pill--instructor {
  opacity: .92;
}

.presence-pill--reconnect {
  animation: .42s cubic-bezier(.22, 1, .36, 1) presenceReconnect;
}

@keyframes presenceReconnect {
  0% {
    opacity: .72;
    transform: scale(1);
  }

  40% {
    opacity: 1;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.presence-offline-glyph {
  opacity: .8;
  background: linear-gradient(to right, currentColor 0% 40%, #0000 40% 60%, currentColor 60% 100%);
  border-radius: 2px;
  flex-shrink: 0;
  width: .85em;
  height: 2px;
  margin-right: .1rem;
  display: inline-block;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .presence-pill-wrapper {
    justify-content: stretch;
  }

  .presence-pill {
    justify-content: space-between;
    width: 100%;
    padding: .55rem .9rem .55rem .6rem;
  }

  .presence-counter {
    flex: 1;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .presence-pill--waiting {
    opacity: 1 !important;
    animation: none !important;
  }

  .presence-pill--reconnect {
    animation: none !important;
  }

  .animated-bg:before, .animated-bg:after {
    background-position: 50% !important;
    animation: none !important;
  }

  .gradient-orb, .btn-premium:before, .input-focus-glow {
    animation: none !important;
  }

  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}
/* Admin panel styles — scoped to .admin-* classnames so they can't leak. */

.admin-hamburger {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  /* Translucent background so backdrop-filter has something to blur through.
     Spec §Glassmorphism: frosted pill, not opaque. */
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--bg-glass) 40%, transparent 60%) 0%,
    color-mix(in oklch, var(--bg-glass) 32%, transparent 68%) 100%
  );
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 8px 24px var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight-top),
    inset 0 -1px 0 var(--glass-highlight-bottom);
  z-index: 60;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.admin-hamburger:hover { transform: scale(1.04); }
.admin-hamburger:active { transform: scale(0.96); }
.admin-hamburger svg { width: 20px; height: 20px; color: var(--text-primary); }

.admin-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50vw;
  min-width: 420px;
  /* Translucent gradient so backdrop-filter has something to blur through.
     Spec §Glassmorphism / ADR-002 require a frosted panel, not an opaque one. */
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--bg-glass) 50%, transparent 50%) 0%,
    color-mix(in oklch, var(--bg-glass-darker) 42%, transparent 58%) 100%
  );
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid var(--glass-border);
  box-shadow:
    -8px 0 32px var(--glass-shadow),
    inset 1px 0 0 var(--glass-highlight-top);
  z-index: 55;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}
@media (max-width: 899px) {
  .admin-panel { width: 100vw; min-width: 0; }
}

.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--glass-border);
  gap: 0.75rem;
}
.admin-panel-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.admin-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1.1rem;
  border-bottom: 1px solid var(--glass-border);
}
.admin-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.admin-tab:hover { color: var(--text-secondary); }
.admin-tab.active {
  color: var(--text-primary);
  background: color-mix(in oklch, var(--accent-blue) 10%, transparent 90%);
  border-color: color-mix(in oklch, var(--accent-blue) 30%, transparent 70%);
}
.admin-tab-dirty-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-terracotta);
}

.admin-panel-body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.25rem 2rem;
}

.admin-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
}
.admin-close-btn:hover { color: var(--text-primary); background: color-mix(in oklch, var(--text-primary) 6%, transparent 94%); }

.admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed color-mix(in oklch, var(--text-muted) 25%, transparent 75%);
  margin-bottom: 1rem;
}
.admin-meta code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.admin-viewer {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-primary);
  cursor: text;
}
.admin-viewer h1 { font-size: 1.45rem; font-weight: 800; margin: 0.75rem 0 0.5rem; }
.admin-viewer h2 { font-size: 1.2rem; font-weight: 700; margin: 1rem 0 0.4rem; }
.admin-viewer h3 { font-size: 1.05rem; font-weight: 700; margin: 0.8rem 0 0.3rem; }
.admin-viewer p { margin: 0 0 0.75rem; }
.admin-viewer ul, .admin-viewer ol { margin: 0 0 0.75rem 1.25rem; }
.admin-viewer li { margin-bottom: 0.25rem; }
.admin-viewer blockquote {
  border-left: 3px solid var(--accent-blue);
  padding-left: 0.75rem;
  color: var(--text-secondary);
  margin: 0.5rem 0;
}
.admin-viewer pre,
.admin-viewer code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.admin-viewer pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  overflow: auto;
  margin: 0.5rem 0 0.9rem;
}
.admin-viewer :not(pre) > code {
  background: color-mix(in oklch, var(--text-primary) 8%, transparent 92%);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}
.admin-viewer a { color: var(--accent-blue); }
.admin-viewer table {
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.admin-viewer th, .admin-viewer td {
  border: 1px solid var(--glass-border);
  padding: 0.35rem 0.55rem;
  text-align: left;
}

.admin-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 60vh;
}
.admin-editor textarea {
  flex: 1;
  min-height: 52vh;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: color-mix(in oklch, var(--bg-glass) 60%, transparent 40%);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  resize: vertical;
  tab-size: 2;
  -moz-tab-size: 2;
}
.admin-editor textarea:focus {
  outline: 2px solid color-mix(in oklch, var(--accent-blue) 40%, transparent 60%);
  outline-offset: 2px;
}

.admin-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.25rem;
}
.admin-btn {
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.83rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.admin-btn:hover { color: var(--text-primary); background: color-mix(in oklch, var(--text-primary) 4%, transparent 96%); }
.admin-btn-primary {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}
.admin-btn-primary:hover { background: color-mix(in oklch, var(--accent-blue) 88%, #000 12%); color: white; }
.admin-btn[disabled], .admin-btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }

.admin-error {
  background: color-mix(in oklch, var(--accent-terracotta) 14%, transparent 86%);
  color: var(--accent-terracotta);
  border: 1px solid color-mix(in oklch, var(--accent-terracotta) 30%, transparent 70%);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  font-family: var(--font-body);
  margin-bottom: 0.75rem;
}

.admin-paired-banner {
  background: color-mix(in oklch, #E8A33D 18%, transparent 82%);
  border: 1px solid color-mix(in oklch, #E8A33D 40%, transparent 60%);
  color: color-mix(in oklch, #7a5a18 60%, var(--text-primary) 40%);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.8rem;
  font-family: var(--font-body);
  margin-bottom: 0.75rem;
}

.admin-toast-region {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  z-index: 70;
}
.admin-toast {
  pointer-events: auto;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 20px var(--glass-shadow);
}
.admin-toast-success {
  background: color-mix(in oklch, var(--accent-green) 12%, var(--bg-glass) 88%);
  color: color-mix(in oklch, #0c6b1b 70%, var(--text-primary) 30%);
}
.admin-toast-error {
  background: color-mix(in oklch, var(--accent-terracotta) 14%, var(--bg-glass) 86%);
  color: var(--accent-terracotta);
}

.admin-empty {
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 1.5rem 0;
}

/* Sub-tab bar inside the Lesson Plan tab (Briefing | Full Plan).
   Per ADR-009 — Briefing is the default; Full Plan opens the existing
   markdown editor unchanged. */
.admin-subtabs {
  display: flex;
  gap: 0.25rem;
  margin: 0.4rem 0 0.85rem;
  border-bottom: 1px solid var(--glass-border);
}
.admin-subtab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.85rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.admin-subtab:hover { color: var(--text-primary); }
.admin-subtab-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-terracotta);
}
.admin-subtab:focus-visible {
  outline: 2px solid var(--accent-terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Briefing dashboard cards. */
.briefing-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1rem;
}
.briefing-card {
  background: var(--bg-glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 0.85rem 1rem 1rem;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.briefing-card-head {
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed var(--glass-border);
  padding-bottom: 0.45rem;
}
.briefing-card-title {
  margin: 0;
  font-family: var(--font-heading, var(--font-body));
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.briefing-card-subtitle {
  margin: 0.15rem 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.briefing-card-body { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.55; }
.briefing-prose {
  margin: 0 0 0.5rem;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.briefing-meta {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.briefing-meta code {
  font-size: 0.75rem;
  background: color-mix(in oklch, var(--text-primary) 6%, transparent 94%);
  padding: 0 0.3rem;
  border-radius: 3px;
}
.briefing-empty {
  margin: 0;
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.briefing-flag {
  color: var(--accent-terracotta);
  font-style: italic;
}
.briefing-drift {
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.65rem;
  list-style: none;
  border-radius: 4px;
  background: color-mix(in oklch, var(--accent-terracotta) 10%, transparent 90%);
  border-left: 3px solid var(--accent-terracotta);
  font-size: 0.78rem;
  color: var(--accent-terracotta);
}
.briefing-drift li { margin: 0.15rem 0; }
.briefing-drift li::before {
  content: '⚠ ';
  font-weight: 600;
}
.briefing-topics {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.briefing-topics li { margin: 0.1rem 0; }
.briefing-gaps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.briefing-gaps li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: baseline;
}
.gap-score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
}
.gap-score-0 { background: color-mix(in oklch, var(--accent-terracotta) 28%, transparent 72%); color: var(--accent-terracotta); }
.gap-score-1 { background: color-mix(in oklch, var(--accent-terracotta) 22%, transparent 78%); color: var(--accent-terracotta); }
.gap-score-2 { background: color-mix(in oklch, var(--accent-terracotta) 12%, transparent 88%); color: var(--accent-terracotta); }
.gap-topic { color: var(--text-primary); }
.gap-date {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Shifts the cohort content left when the panel is open on desktop. */
.admin-content-shift {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
@media (min-width: 900px) {
  .admin-content-shift[data-panel-open='true'] {
    transform: translateX(-25vw);
  }
}
@media (max-width: 899px) {
  .admin-content-shift[data-panel-open='true'] {
    pointer-events: none;
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-content-shift { transition: none; }
}