/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Inter","arguments":[{"variable":"--font-sans-next","subsets":["latin"]}],"variableName":"inter"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_f367f3 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_f367f3 {--font-sans-next: 'Inter', 'Inter Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Fira_Code","arguments":[{"variable":"--font-fira-code","subsets":["latin"]}],"variableName":"firaCode"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/999e639cd9d85971-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/9af6411484c7e20a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/e6b5cfd5a74e1cae-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/6aacc40b7795b725-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* symbols2 */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/67110d8fe39c5e84-s.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/046b90749014f852-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/3703c28dcda155b1-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Fira Code Fallback';src: local("Arial");ascent-override: 73.56%;descent-override: 23.92%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_13fb82 {font-family: 'Fira Code', 'Fira Code Fallback';font-style: normal
}.__variable_13fb82 {--font-fira-code: 'Fira Code', 'Fira Code Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  /* Catppuccin Mocha */
  --crust: #11111b;
  --mantle: #181825;
  --base: #1e1e2e;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --text: #cdd6f4;
  --subtext1: #bac2de;
  --subtext0: #a6adc8;
  --overlay2: #9399b2;
  --overlay1: #7f849c;
  --overlay0: #6c7086;
  
  --mauve: #cba6f7;
  --blue: #89b4fa;
  --sapphire: #74c7ec;
  --green: #a6e3a1;
  --peach: #fab387;
  --red: #f38ba8;

  /* Functional Mappings */
  --bg-main: var(--base);
  --bg-card: var(--surface0);
  --bg-input: var(--mantle);
  --text-main: var(--text);
  --text-muted: var(--subtext0);
  --border: var(--surface1);
  
  --primary: var(--mauve);
  /* Derived so it adapts to every theme (darker shade of the theme's mauve). */
  --primary-hover: color-mix(in srgb, var(--mauve), #000 14%);
  --secondary: var(--overlay0);
  --success: var(--green);
  --warning: var(--peach);
  --danger: var(--red);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Merriweather', 'Georgia', serif;

  color-scheme: dark;
}

/* ---- Themes ----
   Each theme overrides ONLY the Catppuccin primitive tokens above; the functional
   mappings (--bg-main, --primary, …) reference them via var() and follow automatically.
   Default (no data-theme) = Mocha, matching the :root values above. */

/* Catppuccin Latte (light) */
[data-theme="latte"] {
  color-scheme: light;
  --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5;
  --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
  --text: #4c4f69; --subtext1: #5c5f77; --subtext0: #6c6f85;
  --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0;
  --mauve: #8839ef; --blue: #1e66f5; --sapphire: #209fb5;
  --green: #40a02b; --peach: #fe640b; --red: #d20f39;
}

/* Catppuccin Frappé */
[data-theme="frappe"] {
  color-scheme: dark;
  --crust: #232634; --mantle: #292c3c; --base: #303446;
  --surface0: #414559; --surface1: #51576d; --surface2: #626880;
  --text: #c6d0f5; --subtext1: #b5bfe2; --subtext0: #a5adce;
  --overlay2: #949cbb; --overlay1: #838ba7; --overlay0: #737994;
  --mauve: #ca9ee6; --blue: #8caaee; --sapphire: #85c1dc;
  --green: #a6d189; --peach: #ef9f76; --red: #e78284;
}

/* Catppuccin Macchiato */
[data-theme="macchiato"] {
  color-scheme: dark;
  --crust: #181926; --mantle: #1e2030; --base: #24273a;
  --surface0: #363a4f; --surface1: #494d64; --surface2: #5b6078;
  --text: #cad3f5; --subtext1: #b8c0e0; --subtext0: #a5adcb;
  --overlay2: #939ab7; --overlay1: #8087a2; --overlay0: #6e738d;
  --mauve: #c6a0f6; --blue: #8aadf4; --sapphire: #7dc4e4;
  --green: #a6da95; --peach: #f5a97f; --red: #ed8796;
}

/* Theme switcher (in the header) */
.theme-switcher { display: inline-flex; align-items: center; gap: 0.35rem; }
.theme-switcher select {
  background: var(--surface0); color: var(--text-main); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.35rem 0.5rem; font-size: 0.85rem; cursor: pointer;
  font-family: inherit;
}
.theme-switcher-icon { font-size: 0.9rem; line-height: 1; }

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

html, body {
  height: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--text-main);
  background: var(--bg-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

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

/* Layout Utilities */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
}

/* Buttons */
/* Flat, monospace buttons: muted by default, brighten to the accent on hover. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--surface0);
  color: var(--subtext1);
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-family: var(--font-fira-code), monospace;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.button:hover {
  background: var(--mauve);
  color: var(--crust);
}
.button:active {
  transform: translateY(1px);
}

.button.secondary {
  background: var(--surface0);
  color: var(--subtext1);
}
.button.secondary:hover {
  background: var(--surface2);
  color: var(--text-main);
}

.button.success {
  background: var(--surface0);
  color: var(--subtext1);
}
.button.success:hover {
  background: var(--green);
  color: var(--crust);
}

/* Hero Section */
.hero {
  padding: 6rem 2rem;
  text-align: center;
  background: radial-gradient(circle at top, var(--surface0), var(--base));
  border-bottom: 1px solid var(--border);
}
.hero h1 { font-size: 3rem; margin-bottom: 1.2rem; color: var(--mauve); letter-spacing: -0.03em; }
.hero p { font-size: 1.2rem; color: var(--subtext1); margin-bottom: 2.5rem; max-width: 600px; margin-inline: auto; }
.hero .actions { display: flex; justify-content: center; gap: 1rem; }

/* Task Selector */
.task-selector { padding: 2rem 0; }

/* Beginner prompt picker (TaskSelector) */
.ts-heading { text-align: center; font-size: 2rem; color: var(--text-main); margin-bottom: 1.5rem; }
.ts-modes { display: flex; gap: 0.5rem; justify-content: center; }
.ts-mode {
  background: var(--surface0); color: var(--subtext1); border: 1px solid var(--border);
  padding: 0.6rem 1.2rem; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 0.95rem;
  transition: background .15s, color .15s, border-color .15s;
}
.ts-mode.active { background: var(--mauve); color: var(--crust); border-color: var(--mauve); }
.ts-mode:not(:disabled):hover { background: var(--mauve); color: var(--crust); border-color: var(--mauve); }
.ts-mode:disabled { opacity: 0.6; cursor: default; }
.ts-mode-hint { text-align: center; color: var(--subtext0); font-size: 0.85rem; margin: 0.6rem 0 1.5rem; }

/* Mode-choice modal (shown after a topic is picked) */
.ts-modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ts-modal {
  background: var(--surface0); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.75rem; max-width: 420px; width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.ts-modal-title { text-align: center; font-size: 1.15rem; color: var(--text-main); margin: 0 0 1.25rem; }
.ts-modal .ts-modes { margin-bottom: 0.75rem; }
.ts-modal-hint { text-align: center; color: var(--subtext0); font-size: 0.85rem; margin: 0 0 1rem; }
.ts-modal-cancel {
  display: block; margin: 0 auto; background: none; border: none;
  color: var(--subtext1); cursor: pointer; font-size: 0.85rem; text-decoration: underline;
}
.ts-modal-cancel:disabled { opacity: 0.5; cursor: default; }

.ts-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  max-width: 760px; margin: 0 auto 1rem;
}
.ts-tabs, .ts-chips { display: flex; gap: 0.4rem; }
.ts-tab, .ts-chip {
  background: var(--surface0); color: var(--subtext1); border: 1px solid var(--border);
  padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.ts-tab.active { background: var(--blue); color: var(--crust); border-color: var(--blue); }
.ts-chip.active { background: var(--surface1); color: var(--text-main); border-color: var(--overlay0); }
.ts-search {
  flex: 1 1 160px; min-width: 140px; background: var(--mantle); color: var(--text-main);
  border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.8rem; font-size: 0.9rem;
}
.ts-random { padding: 0.5rem 1rem; }

.ts-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ts-empty { text-align: center; color: var(--subtext0); padding: 2rem; }
.ts-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.9rem 1.1rem; cursor: pointer; text-align: left; transition: border-color .15s, transform .1s;
}
.ts-item:hover { border-color: var(--primary); transform: translateX(2px); }
.ts-item:disabled { opacity: 0.6; cursor: wait; }
.ts-item-title { color: var(--text-main); font-size: 1rem; }
.ts-badge {
  font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem;
  border-radius: 999px; white-space: nowrap;
}
.ts-badge.diff-easy { background: rgba(166, 227, 161, 0.18); color: var(--green); }
.ts-badge.diff-medium { background: rgba(203, 166, 247, 0.18); color: var(--mauve); }
.ts-badge.diff-hard { background: rgba(243, 139, 168, 0.18); color: var(--red); }

/* "See example" panel in the editor sidebar (Learn mode) */
.example-box { margin-bottom: 1.5rem; }
.example-content {
  margin-top: 0.75rem; background: var(--surface0); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem; max-height: 40vh; overflow-y: auto;
}
.example-title { color: var(--mauve); font-size: 0.95rem; margin: 0 0 0.6rem; }
.example-content .essay-content {
  white-space: pre-wrap; color: var(--subtext1); line-height: 1.6; font-size: 0.9rem;
}
.example-structure { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.example-structure li { color: var(--subtext1); font-size: 0.88rem; }
.example-structure strong { color: var(--text-main); }
.example-target { color: var(--overlay1); font-size: 0.8rem; }
.example-structure p { margin: 0.2rem 0 0; }
.task-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.task-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 3rem 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.task-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.task-card h3 { font-size: 2rem; color: var(--mauve); margin-bottom: 1rem; }
.task-card p { color: var(--subtext1); font-size: 1.1rem; margin-bottom: 2rem; flex-grow: 1; }
.task-card span {
  display: inline-block;
  background: var(--mantle);
  color: var(--blue);
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid var(--border);
}

/* Dashboard */
.dashboard { min-height: 100vh; padding: 4rem 0; }
.dashboard header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.back-link { color: var(--blue); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.back-link:hover { color: var(--text-main); }

.stats-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 4rem; }
.stat-box {
  background: var(--bg-card);
  padding: 2.5rem 2rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  text-align: center;
}
.stat-box .label { display: block; color: var(--overlay1); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.stat-box .value { font-size: 2.5rem; font-weight: 800; color: var(--text-main); }

.drafts-section { margin-bottom: 3rem; }
.drafts-section h2 { margin-bottom: 1rem; }
.drafts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.draft-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface0);
  border: 1px solid var(--border);
  border-left: 3px solid var(--peach);
  border-radius: 12px;
}
.draft-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.draft-title { font-weight: 600; color: var(--text-main); }
.draft-meta { font-size: 0.85rem; color: var(--overlay1); }

.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
}
th, td { padding: 1.5rem; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--mantle); font-weight: 600; color: var(--overlay1); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom-color: var(--surface2); }
td:last-child, th:last-child { border-right: none; }
tr:last-child td { border-bottom: none; }
.band-tag { padding: 0.4rem 0.8rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem; background: var(--surface1); color: var(--text-main); }
.band-tag.rated { background: rgba(166, 227, 161, 0.1); color: var(--green); border: 1px solid rgba(166, 227, 161, 0.2); }
.view-link { color: var(--mauve); font-weight: 600; }
.view-link:hover { text-decoration: underline; }

/* Result Page */
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: var(--bg-card); padding: 1.5rem; border-radius: 16px; border: 1px solid var(--border); text-align: center; }
.stat-card .label { display: block; font-size: 0.8rem; color: var(--overlay1); text-transform: uppercase; margin-bottom: 0.5rem; }
.stat-card .value { font-size: 1.5rem; font-weight: bold; color: var(--text-main); }
.content-section { background: var(--mantle); padding: 2.5rem; border-radius: 16px; border: 1px solid var(--border); margin-bottom: 3rem; }
.essay-content { white-space: pre-wrap; line-height: 1.8; color: var(--text-main); font-family: var(--font-serif); font-size: 1.1rem; }
.model-answer > summary { cursor: pointer; font-weight: 700; color: var(--green); font-size: 1.15rem; list-style: none; }
.model-answer > summary::-webkit-details-marker { display: none; }
.model-answer > summary::before { content: '▶ '; font-size: 0.8rem; color: var(--overlay1); }
.model-answer[open] > summary::before { content: '▼ '; }

/* Evaluation Component */
.evaluation-container {
  background: var(--bg-card);
  padding: 3rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  margin-top: 2rem;
}
.evaluation-container h2 { color: var(--mauve); margin-bottom: 2.5rem; text-align: center; }
.overall-score { display: flex; justify-content: center; margin-bottom: 3rem; }
.band-circle {
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--mantle); color: var(--mauve);
  border: 4px solid var(--mauve);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(203, 166, 247, 0.1);
}
.band-circle .number { font-size: 3rem; font-weight: 800; line-height: 1; }
.band-circle .label { font-size: 0.75rem; text-transform: uppercase; margin-top: 8px; color: var(--subtext0); letter-spacing: 0.05em; }

.criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.criterion {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem; background: var(--mantle); border-radius: 12px;
  border-left: 4px solid var(--blue);
}
.criterion .name { font-size: 0.95rem; color: var(--subtext1); font-weight: 500; }
.criterion .score { font-weight: 800; font-size: 1.2rem; color: var(--text-main); }

.feedback-section h3 { margin-bottom: 1.5rem; color: var(--sapphire); font-size: 1.5rem; }
.feedback-text { line-height: 1.75; color: var(--subtext1); font-size: 1.05rem; max-width: 72ch; }
.feedback-text > *:first-child { margin-top: 0; }
.feedback-text > *:last-child { margin-bottom: 0; }
.feedback-text p { margin: 0 0 1rem; }
.feedback-text h4 {
  color: var(--sapphire);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.75rem 0 0.75rem;
}
.feedback-text h5 {
  color: var(--mauve);
  font-size: 1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.6rem;
}
.feedback-text ul, .feedback-text ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.feedback-text li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.feedback-text ul li::marker { color: var(--sapphire); }
.feedback-text ol li::marker { color: var(--sapphire); font-weight: 700; }
.feedback-text strong { color: var(--text-main); font-weight: 700; }
.feedback-text em { color: var(--subtext0); }
.feedback-text code {
  font-family: var(--font-fira-code), monospace;
  background: var(--surface0);
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  font-size: 0.9em;
  color: var(--peach);
}

/* Topic / prompt recap on the result page */
.prompt-recap-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.prompt-recap-head h3 { margin: 0; color: var(--sapphire); font-size: 1.2rem; }
.prompt-recap .zen-prompt-type { margin-bottom: 0; }
.prompt-recap-title { margin: 0 0 0.75rem; color: var(--mauve); font-size: 1.2rem; }
.prompt-recap-body { margin: 0; color: var(--subtext1); line-height: 1.7; white-space: pre-wrap; }
.prompt-recap-image {
  display: block;
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  margin-top: 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Inline error highlight inside the essay */
.essay-correction {
  background: rgba(250, 179, 135, 0.22);
  color: inherit;
  border-bottom: 2px solid var(--peach);
  border-radius: 3px;
  padding: 0 1px;
  cursor: help;
}

/* Corrections list */
.corrections-section { margin-bottom: 3rem; }
.corrections-section h3 { color: var(--sapphire); font-size: 1.4rem; margin-bottom: 1.25rem; }
.corrections-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.correction-card {
  background: var(--base);
  border: 1px solid var(--border);
  border-left: 3px solid var(--peach);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.correction-type {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--peach);
  background: rgba(250, 179, 135, 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
}
.correction-diff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  line-height: 1.6;
}
.correction-wrong { color: var(--red); text-decoration: line-through; text-decoration-color: rgba(243, 139, 168, 0.6); }
.correction-arrow { color: var(--overlay1); }
.correction-right { color: var(--green); font-weight: 600; }
.correction-explain { margin: 0.6rem 0 0; color: var(--subtext0); font-size: 0.9rem; line-height: 1.5; }
.correction-rule { margin: 0.6rem 0 0; color: var(--subtext1); font-size: 0.88rem; line-height: 1.5; }
.correction-rule span { color: var(--mauve); font-weight: 700; margin-right: 0.35rem; }

/* Loading Spinner */
.loading-state { text-align: center; padding: 4rem; background: var(--bg-card); border-radius: 16px; border: 1px dashed var(--surface2); }
.spinner {
  border: 4px solid var(--surface1); border-top: 4px solid var(--mauve);
  border-radius: 50%; width: 48px; height: 48px; animation: spin 1s linear infinite; margin: 0 auto 1.5rem;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ----------------------------------
   Zen Editor Specifics 
----------------------------------- */
.zen-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--base);
}

.zen-sidebar {
  background: var(--mantle);
  border-right: 1px solid var(--border);
  padding: 0 2rem 2.5rem;
  overflow-y: auto;
  scrollbar-gutter: stable; /* reserve the scrollbar space so opening a panel doesn't shift the layout */
  display: flex;
  flex-direction: column;
}

.zen-prompt-title { color: var(--mauve); font-size: 1.5rem; margin-bottom: 0.5rem; }
.zen-prompt-type { display: inline-block; background: var(--surface1); color: var(--text-main); padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; margin-bottom: 2rem; }
.zen-prompt-body {
  color: var(--mauve);
  font-weight: 700;
  line-height: 1.7;
  font-size: 1.05rem;
  white-space: pre-wrap;
  margin-bottom: 2rem;
}

/* Zen Hints Accordion */
.zen-hints {
  margin-bottom: 3rem;
  background: var(--surface0);
  border: none;
  border-radius: 8px;
  overflow: hidden;
  /* lets block-size: auto animate on ::details-content (modern Chrome) */
  interpolate-size: allow-keywords;
}
/* Smooth open/close: animate the disclosed content's height + fade. ::details-content
   is the implicit wrapper around everything after <summary>. Degrades to instant where
   unsupported. allow-discrete carries content-visibility through the transition. */
.zen-hints::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size 0.25s ease, opacity 0.2s ease,
    content-visibility 0.25s ease allow-discrete;
}
.zen-hints[open]::details-content {
  block-size: auto;
  opacity: 1;
}
.zen-hints-summary {
  padding: 0.65rem 1rem;
  cursor: pointer;
  font-family: var(--font-fira-code), monospace;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--subtext0);
  list-style: none; /* remove default arrow in some browsers */
  display: flex;
  align-items: center;
  gap: 0.55rem;
  -webkit-user-select: none;
          user-select: none;
  transition: background 0.15s, color 0.15s;
}
.zen-hints-summary:hover { background: var(--surface1); color: var(--text-main); }
.zen-hints[open] .zen-hints-summary { color: var(--text-main); }
.zen-hints-summary::-webkit-details-marker {
  display: none;
}
/* Disclosure chevron sits on the right */
.zen-hints-summary::after {
  content: '▶';
  margin-left: auto;
  transition: transform 0.2s;
  font-size: 0.7rem;
  color: var(--overlay1);
}
.zen-hints[open] .zen-hints-summary::after {
  transform: rotate(90deg);
}
/* Monochrome line icons (inherit the summary's text color) */
.panel-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}
.zen-hints-list {
  padding: 0 1.5rem 1.5rem 3rem;
  color: var(--subtext1);
  font-size: 0.95rem;
  line-height: 1.6;
}
.zen-hints-list li {
  margin-bottom: 0.75rem;
}

/* Beginner toolkit group */
.beginner-group { margin-bottom: 3rem; }
.beginner-group-heading {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--overlay1);
  margin-bottom: 0.75rem;
}
.beginner-group .zen-hints { margin-bottom: 0.6rem; }

/* Writing-aids bar (top of the writing area): outline progress + toggles */
.zen-aids-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding: 0.6rem 2.5rem;
  /* Fixed height (sized to the taller pill state, ~50px) so toggling the outline
     pill on/off never resizes the bar. Content is vertically centered. */
  height: 3.25rem;
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  background: var(--mantle);
}
.aids-outline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  flex: 1 1 auto;
}
.aids-outline li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--surface0);
  color: var(--subtext1);
  font-size: 0.85rem;
}
.aids-outline li.met { color: var(--green); }
.aids-outline-count {
  font-family: var(--font-fira-code), monospace;
  font-size: 0.78rem;
  color: var(--overlay1);
}
.aids-outline li.met .aids-outline-count { color: var(--green); }
.aids-outline li.has-hint { position: relative; cursor: help; }
/* Hint tooltip — opens upward so the bottom bar never clips or overflows it. */
.aids-hint-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: 280px;
  padding: 0.5rem 0.7rem;
  background: var(--surface1);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 50;
  pointer-events: none;
}
.aids-outline li.has-hint:hover .aids-hint-tip,
.aids-outline li.has-hint:focus-within .aids-hint-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.aids-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface1);
  color: var(--subtext0);
  font-size: 0.65rem;
  font-weight: 700;
}
.aids-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-left: auto;
}
.aids-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--subtext1);
  font-size: 0.85rem;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.aids-toggles input[type="checkbox"] { accent-color: var(--mauve); cursor: pointer; }

/* Sentence-starter templates */
.template-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
}
.template-chip {
  background: var(--surface0);
  color: var(--subtext1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.template-chip:hover { background: var(--sapphire); color: var(--crust); }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0 1.25rem 1.25rem; }
.checklist li { margin-bottom: 0.5rem; }
.checklist label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  color: var(--subtext1);
  font-size: 0.9rem;
  line-height: 1.4;
}
.checklist input { margin-top: 0.2rem; accent-color: var(--green); }
.checklist .done { color: var(--overlay0); text-decoration: line-through; }

.zen-stats {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Full-bleed horizontally; provides the sidebar's top spacing so it pins flush */
  margin: 0 -2rem 2rem;
  padding: 2.5rem 2rem 1.5rem;
  background: var(--mantle);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.zen-stat { background: var(--base); padding: 1rem; border-radius: 12px; text-align: center; }
.zen-stat .lbl { display: block; font-size: 0.75rem; color: var(--overlay1); text-transform: uppercase; margin-bottom: 0.3rem; }
.zen-stat .val { font-size: 1.25rem; font-weight: 700; color: var(--text-main); }
.zen-stat .val.timer-warning { color: var(--red); }

.kbd-hint {
  font-family: var(--font-fira-code), monospace;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
  background: var(--surface1);
  color: var(--subtext0);
  border: 1px solid var(--border);
}

.spellcheck-toggle {
  margin-top: 1rem;
  text-align: center;
}
.spellcheck-toggle label {
  cursor: pointer;
  color: var(--subtext1);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  -webkit-user-select: none;
          user-select: none;
}
.spellcheck-toggle input[type="checkbox"] {
  accent-color: var(--mauve);
  cursor: pointer;
  width: 1.1rem;
  height: 1.1rem;
}

.zen-main {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.editor-wrapper {
  position: relative;
  flex: 1 1;
  display: flex;
  overflow: hidden;
}

.zen-textarea, .highlight-overlay, .caret-mirror {
  font-family: var(--font-fira-code), monospace;
  font-size: 1.1rem;
  line-height: 1.9;
  padding: 6rem 15% 4rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  /* The textarea, overlay, and caret-measuring mirror MUST wrap text identically,
     or the custom caret lands on the wrong line at wrap boundaries. Ligatures render
     in a <div> but not a <textarea> (different glyph widths → different wrap points),
     and a scrollbar appearing changes the content width — pin both down. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, none;
  scrollbar-gutter: stable;
}

/* Hidden mirror used only to measure the caret's pixel position. Keeps the
   inherited overflow-y so its scrollbar gutter matches the textarea and text
   wraps identically. */
.caret-mirror {
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  color: transparent;
}

.zen-textarea {
  background: transparent;
  border: none;
  color: var(--text-main);
  resize: none;
  outline: none;
  z-index: 2;
  /* Make text somewhat transparent if we want the highlight to pop, or keep solid and put highlight behind */
  color: transparent;
  caret-color: transparent; /* native caret hidden; custom .zen-caret is drawn instead */
}
/* Placeholder uses the editor's own font so it lines up with the caret */
.zen-textarea::placeholder { color: var(--surface2); font-style: italic; }

/* Selected text: tint the (transparent) textarea layer so the real text in the
   overlay below reads through as a highlight instead of a solid system-colored box.
   No `color` here — keeping the glyph transparent avoids double-painting it over the
   overlay text; the visible highlighted text IS the overlay showing through. */
.zen-textarea::selection { background: rgba(203, 166, 247, 0.30); } /* --mauve @ 30% */
.zen-textarea::-moz-selection { background: rgba(203, 166, 247, 0.30); }

/* Monkeytype-style smooth caret */
.zen-caret {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 1.1rem;
  background: var(--mauve);
  border-radius: 1px;
  z-index: 3;
  opacity: 0; /* shown only while the editor is focused (.visible) */
  pointer-events: none;
  /* linear travel reads as a steady "glide"; ease decelerates and feels like lag at the end of each hop */
  transition: transform 0.11s linear, opacity 0.15s ease;
  will-change: transform;
}
.zen-caret.visible { opacity: 1; animation: caret-blink 1s ease infinite; }
.zen-caret.visible.typing { animation: none; opacity: 1; }
@keyframes caret-blink {
  0%, 45% { opacity: 1; }
  55%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

/* Out-of-focus state: blur + dim the writing area with a hint */
.zen-focus-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: text;
  background: rgba(30, 30, 46, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--subtext0);
  font-size: 1rem;
  letter-spacing: 0.02em;
  animation: fadeIn 0.15s ease;
}

.highlight-overlay {
  z-index: 1;
  color: var(--text-main);
  pointer-events: none; /* Let clicks pass through to textarea */
}
/* In-word completion preview: gray suffix appended after the typed text in the
   overlay. Inherits the editor font/metrics from .highlight-overlay so it aligns. */
.zen-ghost { color: var(--overlay0); }

.spelling-error {
  -webkit-text-decoration: underline wavy var(--red) 2px;
          text-decoration: underline wavy var(--red) 2px;
  background-color: rgba(243, 139, 168, 0.15); /* Red tint */
}

/* Image Modal */
.image-modal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(17, 17, 27, 0.95); /* Crust color with high opacity */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.2s ease;
}

.image-modal-content {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* Diagram viewer: cover the full viewport (not just the writing column) and scale the
   image to fill a large box — guaranteeing it takes up well over 70% of the screen.
   The box is sized to the viewport and the image fits inside it (object-fit: contain),
   so small/low-res charts are upscaled to fill rather than shown at their native size. */
.image-modal-overlay.image-view {
  position: fixed;
  padding: 1.5rem;
}
.image-modal-overlay.image-view .image-modal-content {
  width: 60vw;
  height: 68vh;
  max-width: 60vw;
  max-height: 68vh;
}
.image-modal-overlay.image-view .image-modal-content img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Keep the close button inside the viewport now that the image box nearly fills it. */
.image-modal-overlay.image-view .image-modal-close {
  top: 0.5rem;
  right: 0.5rem;
}

.image-modal-close {
  position: absolute;
  top: -2rem;
  right: -2rem;
  background: var(--red);
  color: var(--crust);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  box-shadow: 0 4px 12px rgba(243, 139, 168, 0.3);
}
.image-modal-close:hover {
  transform: scale(1.1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.zen-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem;
  /* In normal mode the top bar sits in flow so the aids bar can follow it without
     overlap. In Focus mode it floats over the full-width editor (see .zen-mode rule). */
  position: relative;
  z-index: 10;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.zen-topbar:hover, .zen-topbar.active { opacity: 1; }
.zen-topbar-utils { display: flex; gap: 0.5rem; }
.zen-topbar-main { display: flex; gap: 0.5rem; }

.icon-button {
  background: var(--surface0);
  color: var(--subtext0);
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-family: var(--font-fira-code), monospace;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.icon-button:hover { background: var(--surface1); color: var(--text-main); }

/* Word-count target colors */
.count-good { color: var(--green); }
.count-progress { color: var(--peach); }
.val-target { font-size: 0.8rem; color: var(--overlay1); font-weight: 500; margin-left: 0.15rem; }

/* Focus (zen) mode */
.zen-layout.zen-mode { grid-template-columns: 1fr; }
.zen-layout.zen-mode .zen-sidebar { display: none; }
/* Focus mode: float the top bar over the editor for an immersive, chrome-free view. */
.zen-layout.zen-mode .zen-topbar { position: absolute; top: 0; right: 0; left: 0; }
.zen-float-stats {
  position: absolute;
  top: 1.6rem;
  left: 50%;
  transform: translateX(-50%); /* top-center, clear of the Focus/Shortcuts and Submit buttons */
  z-index: 9;
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  font-family: var(--font-fira-code), monospace;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.zen-float-stats:hover { opacity: 1; }
.zen-float-stats .fs-timer { font-size: 1.1rem; font-weight: 700; color: var(--text-main); }
.zen-float-stats .fs-timer.timer-warning { color: var(--red); }
.zen-float-stats .fs-words { font-size: 0.95rem; color: var(--overlay1); }

/* Toast notifications */
.zen-toast {
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface0);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: fadeIn 0.2s ease;
}
.zen-toast.warn { border-color: var(--red); color: var(--red); }
.zen-toast button {
  background: none;
  border: none;
  color: var(--overlay1);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.zen-toast button:hover { color: var(--text-main); }

/* Generic centered dialog (time's up, shortcuts) */
.zen-dialog {
  position: relative;
  background: var(--mantle);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.zen-dialog h3 { color: var(--mauve); font-size: 1.4rem; margin-bottom: 1rem; }
.zen-dialog p { color: var(--subtext1); line-height: 1.6; margin-bottom: 1.5rem; }
.zen-dialog .button { width: 100%; }
/* Two-button row (e.g. Cancel / Restart) — sit side by side, each filling half */
.zen-dialog-actions { display: flex; gap: 0.75rem; }
.zen-dialog-actions .button { flex: 1 1; width: auto; }

.shortcuts-list { list-style: none; text-align: left; margin: 0; padding: 0; }
.shortcuts-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.shortcuts-list li:last-child { border-bottom: none; }
.shortcuts-list span { margin-left: auto; color: var(--subtext1); font-size: 0.9rem; }
.shortcuts-list kbd {
  font-family: var(--font-fira-code), monospace;
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
  background: var(--surface1);
  color: var(--text-main);
  border: 1px solid var(--border);
}

/* Word count, shown in the top bar to the left of the Start/Submit button. */
.topbar-word-count {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: 0.5rem;
  color: var(--overlay0);
  font-family: var(--font-fira-code), monospace;
  font-size: 0.9rem;
}
.topbar-word-count .wc-checking { color: var(--mauve); font-size: 0.8rem; }

/* Auth Pages Styles */
.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: radial-gradient(circle at center, var(--surface0), var(--base));
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.auth-card h2 {
  font-size: 2.2rem;
  color: var(--mauve);
  margin-bottom: 0.5rem;
  text-align: center;
}

.auth-card p.subtitle {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 0.95rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--overlay2);
}

.form-group input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.2s ease;
}

.form-group input:focus {
  border-color: var(--mauve);
  box-shadow: 0 0 0 3px rgba(203, 166, 247, 0.15);
}

.auth-error {
  background: rgba(243, 139, 168, 0.1);
  color: var(--red);
  border: 1px solid rgba(243, 139, 168, 0.2);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid var(--border);
}

.google-button:hover:not(:disabled) {
  background: #f1f1f1;
}

.google-button svg {
  display: block;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--border);
}

.auth-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-footer a {
  color: var(--mauve);
  font-weight: 600;
  margin-left: 0.25rem;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Navigation Header */
.app-header {
  border-bottom: 1px solid var(--border);
  background: var(--mantle);
  padding: 1rem 0;
}

.app-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mauve);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--subtext1);
}

.logout-form {
  margin: 0;
  padding: 0;
}

.logout-button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.logout-button:hover {
  background: var(--surface0);
  color: var(--red);
  border-color: var(--red);
}