:root {
      --bg: #f3f0e8;
      --paper: #fffdf8;
      --panel: rgba(255, 252, 245, 0.9);
      --panel-strong: #fffaf0;
      --line: rgba(46, 39, 24, 0.12);
      --line-strong: rgba(46, 39, 24, 0.22);
      --text: #1f1a12;
      --muted: #6c6253;
      --accent: #8c5e34;
      --accent-strong: #603913;
      --success: #1f6a4b;
      --warning: #b87416;
      --shadow: 0 24px 70px rgba(47, 35, 16, 0.10);
      --radius: 22px;
      --rail-width: 280px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: "Fraunces", "IBM Plex Sans", "Avenir Next", sans-serif;
      background:
        radial-gradient(circle at top left, rgba(201, 163, 116, 0.25), transparent 28%),
        radial-gradient(circle at top right, rgba(109, 145, 117, 0.18), transparent 24%),
        linear-gradient(180deg, #efe8db 0%, var(--bg) 48%, #ede7dc 100%);
    }

    a { color: inherit; }
    button, input, select, textarea { font: inherit; }

    .app-shell {
      display: grid;
      grid-template-columns: minmax(0, var(--rail-width)) minmax(0, 1fr);
      gap: 28px;
      max-width: 1560px;
      margin: 0 auto;
      padding: 24px;
    }

    .rail {
      position: sticky;
      top: 24px;
      align-self: start;
      display: grid;
      gap: 18px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: rgba(255, 250, 240, 0.84);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
    }

    .rail-brand {
      display: grid;
      gap: 10px;
    }

    .eyebrow {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-family: "IBM Plex Sans", system-ui, sans-serif;
    }

    h1, h2, h3 { margin: 0; }
    h1 {
      font-size: clamp(2.2rem, 3.8vw, 4rem);
      line-height: 0.94;
      font-weight: 700;
      letter-spacing: -0.05em;
    }
    h2 {
      font-size: clamp(1.3rem, 2vw, 1.8rem);
      line-height: 1;
      letter-spacing: -0.04em;
    }
    h3 {
      font-size: 1rem;
      letter-spacing: -0.02em;
    }

    p {
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
      font-family: "IBM Plex Sans", system-ui, sans-serif;
    }

    .rail-links {
      display: grid;
      gap: 8px;
    }

    .rail-links a,
    .rail-link-static {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid transparent;
      text-decoration: none;
      color: var(--text);
      font-family: "IBM Plex Sans", system-ui, sans-serif;
      transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
    }

    .rail-links a:hover,
    .rail-link-static:hover {
      background: rgba(140, 94, 52, 0.08);
      border-color: rgba(140, 94, 52, 0.16);
      transform: translateX(2px);
    }

    .rail-meta {
      display: grid;
      gap: 10px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

    .status-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      border-radius: 999px;
      padding: 6px 12px;
      border: 1px solid var(--line-strong);
      background: rgba(255,255,255,0.56);
      color: var(--muted);
      font-size: 12px;
      font-family: "IBM Plex Sans", system-ui, sans-serif;
    }

    .pill strong { color: var(--text); font-weight: 600; }

    .rail-actions,
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    button,
    a.btn {
      appearance: none;
      border: 1px solid var(--line-strong);
      background: linear-gradient(180deg, #fff8ec 0%, #f1e1c8 100%);
      color: var(--text);
      border-radius: 14px;
      padding: 10px 14px;
      cursor: pointer;
      text-decoration: none;
      font-weight: 600;
      font-family: "IBM Plex Sans", system-ui, sans-serif;
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
      box-shadow: 0 10px 30px rgba(96, 57, 19, 0.08);
    }

    button:hover,
    a.btn:hover {
      transform: translateY(-1px);
      border-color: rgba(96, 57, 19, 0.35);
      box-shadow: 0 16px 36px rgba(96, 57, 19, 0.14);
    }

    button[disabled] {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-secondary {
      background: rgba(255,255,255,0.68);
      box-shadow: none;
    }

    .invoice-dialog {
      border: 0;
      padding: 0;
      background: transparent;
    }

    .invoice-dialog.invoice-dialog-inline {
      position: static;
      inset: auto;
      width: 100%;
      max-width: none;
      margin: 0;
    }

    .invoice-dialog.invoice-dialog-inline::backdrop {
      display: none;
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .invoice-dialog::backdrop {
      background: rgba(17, 12, 6, 0.48);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    .invoice-dialog-card {
      width: min(960px, calc(100vw - 32px));
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .invoice-dialog.invoice-dialog-inline .invoice-dialog-card {
      width: 100%;
      max-width: none;
      margin-top: 16px;
    }

    .service-rows {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .service-row {
      display: grid;
      grid-template-columns: minmax(130px, 1.1fr) minmax(220px, 2fr) minmax(80px, 0.7fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr) auto;
      gap: 10px;
      align-items: end;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,0.52);
    }

    .service-row-total {
      min-height: 48px;
      display: grid;
      align-content: center;
      font-weight: 600;
      color: var(--text);
    }

    .service-summary {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      color: var(--muted);
    }

    .invoice-dialog-hint {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.6);
      color: var(--muted);
    }

    .content {
      display: grid;
      gap: 22px;
      align-content: start;
      padding-bottom: 48px;
    }

    .hero,
    .section-card,
    .split-card,
    .admin-grid > .section-card,
    .model-grid > .section-card {
      border: 1px solid var(--line);
      border-radius: 30px;
      background: var(--panel);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
    }

    .section-card-plain {
      padding: 18px;
      box-shadow: none;
    }

    .hero {
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
      min-height: 320px;
    }

    .hero-copy {
      display: grid;
      gap: 18px;
      padding: 32px;
    }

    .hero-copy p { max-width: 68ch; }

    .hero-side {
      position: relative;
      padding: 32px;
      border-left: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(140, 94, 52, 0.10) 0%, rgba(255, 248, 236, 0.65) 100%),
        radial-gradient(circle at top right, rgba(91, 126, 97, 0.16), transparent 42%);
      display: grid;
      gap: 16px;
      align-content: start;
    }

    .hero-side::after {
      content: "";
      position: absolute;
      inset: auto -70px -80px auto;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(140, 94, 52, 0.18), transparent 70%);
      pointer-events: none;
    }

    .section-card,
    .split-card {
      padding: 26px;
      display: grid;
      gap: 18px;
    }

    .section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
    }

    .section-note {
      max-width: 68ch;
    }

    .metrics-grid,
    .ops-grid,
    .admin-grid,
    .model-grid,
    .form-grid,
    .template-grid,
    .grid {
      display: grid;
      gap: 14px;
    }

    .metrics-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .metric {
      padding: 18px;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.58);
      display: grid;
      gap: 10px;
    }

    .metric-label {
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-family: "IBM Plex Sans", system-ui, sans-serif;
    }

    .metric-value {
      font-size: clamp(1.5rem, 2.8vw, 2.5rem);
      line-height: 1;
      letter-spacing: -0.06em;
    }

    .metric-foot {
      color: var(--muted);
      font-size: 13px;
      font-family: "IBM Plex Sans", system-ui, sans-serif;
    }

    .ops-grid {
      grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.8fr);
      align-items: start;
    }

    .stack {
      display: grid;
      gap: 14px;
    }

    .mini-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,0.52);
      padding: 16px;
      display: grid;
      gap: 10px;
    }

    .field {
      display: grid;
      gap: 6px;
    }

    .field label {
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      font-family: "IBM Plex Sans", system-ui, sans-serif;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid rgba(46, 39, 24, 0.14);
      background: rgba(255,255,255,0.85);
      color: var(--text);
      border-radius: 14px;
      padding: 11px 12px;
    }

    .field textarea {
      min-height: 180px;
      font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
      font-size: 12px;
      line-height: 1.45;
      resize: vertical;
    }

    .template-grid,
    .form-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-grid,
    .model-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .code {
      white-space: pre-wrap;
      background: #201912;
      color: #f6ede0;
      border: 1px solid rgba(255, 247, 232, 0.14);
      border-radius: 20px;
      padding: 16px;
      font-size: 12px;
      line-height: 1.45;
      font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
      overflow: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: "IBM Plex Sans", system-ui, sans-serif;
    }

    th, td {
      border-bottom: 1px solid var(--line);
      text-align: left;
      padding: 12px 10px;
      vertical-align: top;
    }

    th {
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .muted-list {
      display: grid;
      gap: 8px;
      color: var(--muted);
      font-family: "IBM Plex Sans", system-ui, sans-serif;
      font-size: 14px;
    }

    .muted-list strong { color: var(--text); }

    .highlight {
      color: var(--accent-strong);
      font-weight: 700;
    }

    .section-anchor {
      position: relative;
      top: -16px;
    }

    @media (max-width: 1180px) {
      .app-shell,
      .hero,
      .ops-grid,
      .admin-grid,
      .model-grid,
      .template-grid,
      .form-grid,
      .metrics-grid {
        grid-template-columns: 1fr;
      }

      .rail {
        position: static;
      }

      .hero-side {
        border-left: 0;
        border-top: 1px solid var(--line);
      }
    }

    @media (max-width: 760px) {
      .app-shell { padding: 14px; gap: 14px; }
      .rail,
      .hero-copy,
      .hero-side,
      .section-card,
      .split-card { padding: 20px; }
      h1 { font-size: 2.2rem; }
      .service-row { grid-template-columns: 1fr; }
    }