/* PEN Startup — App Orca design system tokens */
:root {
  --orca-ink: #15161E; --orca-white: #FFFFFF; --family-gold: #FFBC39; --water: #5CE1E6;
  --deep-water: #0B6E8A; --ink: #15161E; --ink-on-brand: #15161E; --ink-muted: #4A5160;
  --paper: #FFFFFF; --surface-2: #EEF6F7; --line: #D5DFE3; --border-control: #6B7785;
  --action: #15161E; --on-action: #FFFFFF; --danger: #A1262A;
  --sans: "Poppins", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --deep-water: #6FD6F0; --ink: #F2F5F7; --ink-muted: #A9B1BE; --paper: #0B0D12; --surface-2: #171A22;
    --line: #2A2F3B; --border-control: #5A6372; --action: #FFBC39; --on-action: #15161E; --danger: #FF8A8A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --deep-water: #6FD6F0; --ink: #F2F5F7; --ink-muted: #A9B1BE; --paper: #0B0D12; --surface-2: #171A22;
  --line: #2A2F3B; --border-control: #5A6372; --action: #FFBC39; --on-action: #15161E; --danger: #FF8A8A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); }
[hidden] { display: none !important; }
a { color: var(--deep-water); }
:focus-visible { outline: 2px solid var(--deep-water); outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.15; }
h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0 0 12px; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 1.5; }
.eyebrow { font: 500 13px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 32px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.brand { align-items: center; }
.brand b { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.brand .word-mono { font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace); font-weight: 500; font-size: 18px; margin-left: -6px; }
.brand .mark { flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .mark rect:first-child { fill: #FFFFFF; } :root:not([data-theme="light"]) .brand .mark rect:not(:first-child):not(:last-child) { fill: #15161E; } }
.nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* controls */
button, .btn { font: 600 15px/1 var(--sans); border-radius: var(--radius-md); padding: 12px 18px;
  border: 1px solid var(--border-control); background: transparent; color: var(--ink); cursor: pointer; }
button:hover { background: var(--surface-2); }
button.primary { background: var(--action); color: var(--on-action); border-color: var(--action); }
button.primary:hover { filter: brightness(1.12); }
button.ghost { border-color: transparent; }
button.danger { color: var(--danger); border-color: transparent; }
button:disabled { opacity: 0.55; cursor: progress; }
label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
input, textarea { width: 100%; font: 400 16px/1.5 var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--border-control); border-radius: var(--radius-md); padding: 12px 14px; }
textarea { resize: vertical; min-height: 120px; }
.hint { font-size: 14px; color: var(--ink-muted); margin: 4px 0 0; }

/* auth */
.auth { max-width: 440px; margin: 56px auto; padding: 0 16px; }
.auth .panel { background: var(--surface-2); border-radius: var(--radius-lg); padding: 28px; }
.waterline { height: 4px; width: 64px; background: var(--water); border-radius: 2px; margin: 12px 0 20px; }
.tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.tabs button[aria-selected="true"] { background: var(--paper); border-color: var(--ink); }

/* workspace */
.layout { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 62px); }
.side { border-right: 1px solid var(--line); padding: 20px 16px; overflow: auto; }
.side ul { list-style: none; padding: 0; margin: 12px 0 0; }
.side li button { width: 100%; text-align: left; border: 0; border-radius: var(--radius-md);
  padding: 10px 12px; font-weight: 500; line-height: 1.35; }
.side li button[aria-current="true"] { background: var(--surface-2); }
.side li .meta { display: block; font: 400 12px/1.4 var(--mono); color: var(--ink-muted); margin-top: 2px; }
.main { padding: 28px 32px 64px; max-width: 900px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.chips button { border-radius: var(--radius-pill); padding: 9px 16px; font-weight: 500; }
.chips button[aria-pressed="true"] { background: var(--water); color: var(--ink-on-brand); border-color: var(--water); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; margin-top: 24px; }
.draft-title { font: 700 20px/1.3 var(--sans); border: 0; padding: 0; background: transparent; }
.draft-body { min-height: 360px; font: 400 16px/1.65 var(--sans); }
.notice { border-radius: var(--radius-md); padding: 12px 14px; margin: 14px 0; font-size: 15px; }
.notice.error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--ink); border: 1px solid var(--danger); }
.notice.ok { background: var(--surface-2); }
.usage { font: 400 13px/1.4 var(--mono); color: var(--ink-muted); }
details summary { cursor: pointer; font-weight: 600; font-size: 14px; margin-top: 14px; }

@media (max-width: 760px) {
  .top { padding: 12px 16px; flex-wrap: wrap; row-gap: 4px; }
  .brand { flex-wrap: wrap; row-gap: 0; }
  .brand b { white-space: nowrap; }
  .nav { gap: 0; margin-right: -12px; }
  .nav button { padding: 10px 12px; }
  .layout { grid-template-columns: 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px; }
  .main { padding: 20px 16px 48px; }
}
.block { width: 100%; }
.pre { white-space: pre-wrap; }