/* ===== RESET & ROOT ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    :root {
      --bg: #111116;
      --bg2: #171720;
      --bg3: #20202b;
      --accent: #e8ff47;
      --accent2: #ff6b47;
      --accent3: #47ffb2;
      --txt: #f0ede8;
      --txt2: #9b9898;
      --txt3: #5a5858;
      --border: #2a2a35;
      --card: #18181f;
      --success: #47ffb2;
      --error: #ff6b47;
    }

    /* LIGHT MODE OVERRIDES */
    body.light-mode {
      --bg: #f5f4f0;
      --bg2: #e9e8e4;
      --bg3: #dcdbd7;
      --accent: #c8df00; /* Darkened yellow for contrast */
      --txt: #1a1a1a;
      --txt2: #4a4a4a;
      --txt3: #7a7a7a;
      --border: #e0ddd8;
      --card: #ffffff;
    }

    body {
      background: var(--bg);
      color: var(--txt);
      font-family: 'Syne', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* NOISE */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      opacity: .46;
      pointer-events: none;
      z-index: 0;
    }

    /* GRID */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 60px 60px;
      opacity: .34;
      pointer-events: none;
      z-index: 0;
    }

    /* ===== LAYOUT ===== */
    .wrap {
      position: relative;
      z-index: 1;
      max-width: 780px;
      margin: 0 auto;
      padding: 0 24px
    }

    /* ===== NAV ===== */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      border-bottom: 1px solid var(--border);
    }

    .logo {
      font-family: 'DM Serif Display', serif;
      font-size: 1.15rem;
      letter-spacing: -.02em;
      color: var(--txt)
    }

    .logo span {
      color: var(--accent)
    }

    .nav-badges {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .badge {
      font-family: 'DM Mono', monospace;
      font-size: .62rem;
      color: var(--txt3);
      border: 1px solid var(--border);
      padding: 4px 10px;
      border-radius: 20px;
      letter-spacing: .04em
    }

    .badge.green {
      color: var(--success);
      border-color: rgba(71, 255, 178, .25)
    }

    /* THEME TOGGLE BUTTON */
    .theme-btn {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--txt);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 50%;
      margin-left: 12px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .theme-btn:hover {
      background: var(--bg3);
      border-color: var(--txt3);
    }

    /* ===== HERO ===== */
    .hero {
      padding: 72px 0 52px;
      text-align: center
    }

    .eyebrow {
      font-family: 'DM Mono', monospace;
      font-size: .68rem;
      letter-spacing: .18em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 22px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .eyebrow::before,
    .eyebrow::after {
      content: '';
      width: 28px;
      height: 1px;
      background: var(--accent);
      opacity: .4
    }

    h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(2.8rem, 7vw, 4.8rem);
      line-height: 1.05;
      letter-spacing: -.03em;
      margin-bottom: 8px;
    }

    h1 em {
      font-style: italic;
      color: var(--accent)
    }

    .sub {
      font-size: .95rem;
      color: var(--txt2);
      max-width: 430px;
      margin: 20px auto 0;
      line-height: 1.75;
      font-weight: 400;
    }

    /* ===== STEPS ===== */
    .steps {
      display: flex;
      gap: 0;
      margin: 44px 0 0;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      background: var(--card);
    }

    .step {
      flex: 1;
      padding: 18px 16px;
      text-align: center;
      border-right: 1px solid var(--border)
    }

    .step:last-child {
      border-right: none
    }

    .step-num {
      font-family: 'DM Mono', monospace;
      font-size: .65rem;
      color: var(--accent);
      margin-bottom: 4px
    }

    .step-label {
      font-size: .75rem;
      color: var(--txt2);
      font-weight: 500
    }

    /* ===== API SECTION ===== */
    .section-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      margin: 20px 0 0;
    }

    .section-label {
      font-family: 'DM Mono', monospace;
      font-size: .63rem;
      letter-spacing: .12em;
      color: var(--txt3);
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .api-row {
      display: flex;
      gap: 10px
    }

    .api-select,
    .api-input {
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--txt);
      font-family: 'Syne', sans-serif;
      font-size: .85rem;
      padding: 13px 14px;
      border-radius: 10px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }

    .api-select {
      cursor: pointer;
      flex-shrink: 0
    }

    .api-input {
      flex: 1;
      font-family: 'DM Mono', monospace;
      font-size: .8rem
    }

    .api-input::placeholder,
    .url-field::placeholder {
      color: var(--txt3)
    }

    .api-select:focus,
    .api-input:focus,
    .url-field:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(232, 255, 71, .08);
    }

    .key-hint {
      margin-top: 10px;
      font-family: 'DM Mono', monospace;
      font-size: .63rem;
      color: var(--txt3);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color 0.3s ease;
    }

    .key-hint::before {
      content: '🔒';
      font-size: .7rem
    }

    /* ===== TEMPLATE PICKER ===== */
    .template-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .tpl {
      border: 2px solid var(--border);
      border-radius: 12px;
      padding: 14px 12px;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      text-align: center;
    }

    .tpl:hover {
      border-color: var(--txt3);
      background: var(--bg3)
    }

    .tpl.selected {
      border-color: var(--accent);
      background: rgba(232, 255, 71, .05)
    }

    .tpl-preview {
      width: 100%;
      height: 68px;
      border-radius: 6px;
      margin-bottom: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 8px;
      background: var(--bg3);
    }

    .tpl-line {
      height: 3px;
      border-radius: 2px;
      background: var(--txt3)
    }

    .tpl-line.h {
      height: 5px;
      background: var(--txt2);
      width: 60%
    }

    .tpl-line.accent {
      background: var(--accent);
      width: 40%
    }

    .tpl-line.short {
      width: 70%
    }

    .tpl-name {
      font-size: .78rem;
      font-weight: 600;
      color: var(--txt)
    }

    .tpl-desc {
      font-size: .65rem;
      color: var(--txt3);
      margin-top: 2px
    }

    /* MINIMAL PREVIEW */
    .tpl:nth-child(1) .tpl-preview {
      justify-content: flex-start;
      gap: 4px
    }

    /* MODERN PREVIEW */
    .tpl:nth-child(2) .tpl-preview {
      background: linear-gradient(135deg, #1a1a25 0%, #1c1c2f 100%)
    }

    /* CLASSIC PREVIEW */
    .tpl:nth-child(3) .tpl-preview {
      border-left: 3px solid var(--accent2)
    }

    /* ===== URL INPUT ===== */
    .url-box {
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      transition: border-color .2s, box-shadow .2s;
    }

    .url-box:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(232, 255, 71, .07)
    }

    .url-inner {
      display: flex;
      align-items: center
    }

    .url-prefix {
      font-family: 'DM Mono', monospace;
      font-size: .8rem;
      color: var(--txt3);
      padding: 18px 0 18px 20px;
      flex-shrink: 0;
    }

    .url-field {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: none;
      color: var(--txt);
      font-family: 'DM Mono', monospace;
      font-size: .85rem;
      padding: 18px 12px;
      outline: none;
    }

    .go-btn {
      margin: 10px;
      background: var(--accent);
      color: #0c0c0f;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .85rem;
      letter-spacing: .02em;
      border: none;
      padding: 14px 22px;
      border-radius: 10px;
      cursor: pointer;
      transition: transform .15s, opacity .15s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .go-btn:hover {
      transform: scale(1.03)
    }

    .go-btn:active {
      transform: scale(.97)
    }

    .go-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
      transform: none
    }

    /* HINTS */
    .hints {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
      justify-content: center
    }

    .hint {
      font-family: 'DM Mono', monospace;
      font-size: .63rem;
      color: var(--txt3);
      border: 1px solid var(--border);
      padding: 5px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: border-color .2s, color .2s;
    }

    .hint:hover {
      border-color: var(--txt3);
      color: var(--txt2)
    }

    .source-hint {
      min-height: 20px;
      margin-top: 10px;
      text-align: center;
      font-family: 'DM Mono', monospace;
      font-size: .63rem;
      color: var(--txt3);
    }

    .source-hint.active {
      color: var(--accent3);
    }

    /* ===== ERROR ===== */
    .error-box {
      background: rgba(255, 107, 71, .07);
      border: 1px solid rgba(255, 107, 71, .3);
      border-radius: 12px;
      padding: 14px 18px;
      margin: 14px 0;
      font-family: 'DM Mono', monospace;
      font-size: .75rem;
      color: var(--error);
      display: none;
      line-height: 1.6;
      white-space: pre-wrap;
    }

    /* ===== STAGES ===== */
    .stages {
      margin: 28px 0;
      display: none
    }

    .stage {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px 24px 18px;
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, opacity .3s;
    }

    .stage.active {
      border-color: var(--accent);
      animation: pulse-b 2.2s infinite
    }

    .stage.done {
      border-color: var(--success);
      opacity: .65
    }

    .stage.waiting {
      opacity: .28
    }

    @keyframes pulse-b {
      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(232, 255, 71, 0)
      }
      50% {
        box-shadow: 0 0 0 8px rgba(232, 255, 71, .06)
      }
    }

    .stage-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 6px
    }

    .stage-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      background: var(--bg3);
    }

    .stage.active .stage-icon {
      background: rgba(232, 255, 71, .1)
    }

    .stage.done .stage-icon {
      background: rgba(71, 255, 178, .1)
    }

    .stage-name {
      font-size: .88rem;
      font-weight: 600
    }

    .stage-status {
      margin-left: auto;
      font-family: 'DM Mono', monospace;
      font-size: .63rem
    }

    .stage.active .stage-status {
      color: var(--accent);
      animation: blink 1.2s infinite
    }

    .stage.done .stage-status {
      color: var(--success)
    }

    .stage.waiting .stage-status {
      color: var(--txt3)
    }

    @keyframes blink {
      0%,
      100% {
        opacity: 1
      }
      50% {
        opacity: .25
      }
    }

    .stage-desc {
      font-size: .75rem;
      color: var(--txt2);
      line-height: 1.65;
      padding-left: 52px
    }

    .load-bar {
      height: 2px;
      background: var(--bg3);
      border-radius: 2px;
      margin-top: 12px;
      overflow: hidden;
      position: relative
    }

    .load-fill {
      height: 100%;
      border-radius: 2px;
      width: 0;
      transition: width .5s ease
    }

    .stage.active .load-fill {
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      animation: load-a 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes load-a {
      0% {
        width: 0
      }
      30% {
        width: 40%
      }
      70% {
        width: 88%
      }
      100% {
        width: 95%
      }
    }

    .stage.done .load-fill {
      width: 100%;
      background: var(--success);
      animation: none;
      transition: width .4s ease
    }

    /* ===== RESULT ===== */
    .result-section {
      display: none;
      margin: 20px 0 60px
    }

    .result-card {
      background: var(--card);
      border: 1px solid var(--success);
      border-radius: 20px;
      padding: 32px;
    }

    .result-header {
      text-align: center;
      margin-bottom: 24px
    }

    .result-title {
      font-family: 'DM Serif Display', serif;
      font-size: 1.7rem;
      margin-bottom: 4px
    }

    .result-title span {
      color: var(--success)
    }

    .result-sub {
      font-size: .78rem;
      color: var(--txt2)
    }

    /* PREVIEW TABS */
    .preview-tabs {
      display: flex;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 16px
    }

    .ptab {
      flex: 1;
      padding: 10px;
      text-align: center;
      font-size: .75rem;
      font-weight: 600;
      cursor: pointer;
      color: var(--txt3);
      border-right: 1px solid var(--border);
      transition: background .2s, color .2s;
      background: var(--bg3);
    }

    .ptab:last-child {
      border-right: none
    }

    .ptab.active {
      background: var(--bg2);
      color: var(--txt)
    }

    .preview-pane {
      display: none
    }

    .preview-pane.active {
      display: block
    }

    .resume-preview {
      background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
      border-radius: 14px;
      padding: 30px 30px 28px;
      max-height: 440px;
      overflow-y: auto;
      border: 1px solid var(--border);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    }

    .resume-preview::-webkit-scrollbar {
      width: 4px
    }

    .resume-preview::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px
    }

    .resume-formatted {
      color: var(--txt);
      font-size: .84rem;
      line-height: 1.7;
      letter-spacing: -.01em;
      max-width: 620px;
    }

    .resume-formatted>* {
      break-inside: avoid
    }

    .rf-name {
      font-family: 'DM Serif Display', serif;
      font-size: 1.52rem;
      line-height: 1.08;
      letter-spacing: -.03em;
      margin-bottom: 8px;
    }

    .rf-title {
      color: var(--txt2);
      font-style: italic;
      font-size: .88rem;
      line-height: 1.45;
      margin-bottom: 12px;
    }

    .rf-contact {
      font-family: 'DM Mono', monospace;
      font-size: .67rem;
      line-height: 1.55;
      color: var(--txt3);
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
      word-break: break-word;
    }

    .rf-section {
      font-family: 'DM Mono', monospace;
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 20px 0 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(232, 255, 71, .2);
    }

    .rf-section::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(232, 255, 71, 0.3), transparent);
    }

    .rf-item-title {
      font-weight: 700;
      font-size: .84rem;
      line-height: 1.35;
      margin-bottom: 4px;
      color: var(--txt);
    }

    .rf-item-sub {
      color: var(--txt3);
      font-size: .71rem;
      line-height: 1.45;
      font-style: italic;
      margin-bottom: 7px;
    }

    .rf-item-desc {
      color: var(--txt2);
      font-size: .79rem;
      line-height: 1.7;
      margin-bottom: 14px;
      overflow-wrap: anywhere;
    }

    .rf-skills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .rf-skill {
      background: var(--bg2);
      border: 1px solid var(--border);
      font-family: 'DM Mono', monospace;
      font-size: .66rem;
      padding: 5px 11px;
      border-radius: 20px;
      color: var(--txt2);
      line-height: 1.3;
      white-space: nowrap;
    }

    .rf-skill:hover {
      border-color: var(--accent);
      color: var(--txt);
      background: rgba(232, 255, 71, 0.05);
    }

    .resume-empty {
      border: 1px dashed var(--border);
      border-radius: 12px;
      color: var(--txt2);
      font-size: .8rem;
      line-height: 1.65;
      padding: 16px;
      background: rgba(255, 255, 255, .025);
    }

    .json-preview {
      font-family: 'DM Mono', monospace;
      font-size: .7rem;
      color: var(--txt2);
      white-space: pre-wrap;
      word-break: break-all;
      line-height: 1.5;
    }

    .toast-region {
      position: fixed;
      right: 24px;
      bottom: 88px;
      z-index: 250;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: min(360px, calc(100vw - 48px));
    }

    .toast {
      background: rgba(24, 24, 31, .94);
      border: 1px solid rgba(255, 255, 255, .12);
      border-left: 3px solid var(--success);
      border-radius: 14px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .36);
      color: var(--txt);
      font-size: .78rem;
      line-height: 1.5;
      padding: 13px 16px;
      transform: translateY(10px);
      opacity: 0;
      animation: toast-in .24s ease forwards;
      backdrop-filter: blur(14px);
    }

    .toast.error {
      border-left-color: var(--error);
    }

    .toast.leaving {
      animation: toast-out .22s ease forwards;
    }

    @keyframes toast-in {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes toast-out {
      to {
        opacity: 0;
        transform: translateY(10px);
      }
    }

    @media print {
      .resume-preview {
        max-height: none;
        overflow: visible;
        box-shadow: none;
        border-color: #ddd;
        background: #fff;
        color: #111;
      }

      .resume-formatted {
        font-size: 11px;
        line-height: 1.55;
        color: #111;
      }

      .rf-name {
        font-size: 19px;
        color: #111
      }

      .rf-title {
        color: #555
      }

      .rf-contact {
        color: #666;
        border-bottom-color: #ddd
      }

      .rf-section {
        color: #7a5c00;
        border-bottom-color: #e6dcc8
      }

      .rf-item-title {
        color: #111
      }

      .rf-item-sub {
        color: #666
      }

      .rf-item-desc {
        color: #333
      }

      .rf-skill {
        border-color: #ddd;
        color: #444;
        background: #fafafa
      }

      .json-preview {
        color: #444
      }
    }

    .btn-row {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 22px
    }

    .btn-dl {
      background: var(--accent);
      color: #0c0c0f;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .85rem;
      border: none;
      padding: 14px 28px;
      border-radius: 12px;
      cursor: pointer;
      transition: transform .15s;
    }

    .btn-dl:hover {
      transform: scale(1.03)
    }

    .btn-copy {
      background: rgba(255, 255, 255, .04);
      color: var(--txt);
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .85rem;
      border: 1px solid var(--border);
      padding: 14px 24px;
      border-radius: 12px;
      cursor: pointer;
      transition: transform .15s, border-color .2s, background .2s, color .2s;
      min-height: 48px;
    }

    .btn-copy:hover {
      transform: scale(1.03);
      border-color: rgba(232, 255, 71, .45);
      background: rgba(232, 255, 71, .08);
    }

    .btn-copy:focus-visible,
    .btn-dl:focus-visible,
    .btn-new:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .btn-copy.is-copying {
      color: var(--txt2);
      pointer-events: none;
    }

    .btn-copy.is-copied {
      border-color: rgba(71, 255, 178, .5);
      color: var(--success);
      background: rgba(71, 255, 178, .08);
    }

    .btn-new {
      background: transparent;
      color: var(--txt2);
      font-family: 'Syne', sans-serif;
      font-weight: 600;
      font-size: .85rem;
      border: 1px solid var(--border);
      padding: 14px 28px;
      border-radius: 12px;
      cursor: pointer;
      transition: border-color .2s, color .2s;
    }

    .btn-new:hover {
      border-color: var(--txt2);
      color: var(--txt)
    }

    .improver-card {
      margin-top: 20px;
    }

    .improver-input {
      width: 100%;
      min-height: 104px;
      resize: vertical;
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--txt);
      font-family: 'Syne', sans-serif;
      font-size: .86rem;
      line-height: 1.65;
      padding: 14px 16px;
      border-radius: 10px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }

    .improver-input::placeholder {
      color: var(--txt3);
    }

    .improver-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(232, 255, 71, .08);
    }

    .improver-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
    }

    .improver-btn,
    .improver-copy {
      padding: 12px 18px;
      border-radius: 10px;
    }

    .improver-output {
      display: none;
      margin-top: 14px;
      border: 1px solid rgba(71, 255, 178, .28);
      background: rgba(71, 255, 178, .06);
      border-radius: 12px;
      color: var(--txt);
      font-size: .86rem;
      line-height: 1.65;
      padding: 15px 16px;
      overflow-wrap: anywhere;
    }

    /* ===== FAQ ===== */
    .faq {
      margin: 48px 0 20px
    }

    .faq-title {
      font-family: 'DM Serif Display', serif;
      font-size: 1.4rem;
      margin-bottom: 20px;
      text-align: center
    }

    .faq-item {
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 8px;
      overflow: hidden
    }

    .faq-q {
      padding: 16px 20px;
      cursor: pointer;
      font-size: .85rem;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background .2s;
    }

    .faq-q:hover {
      background: var(--bg3)
    }

    .faq-a {
      padding: 0 20px;
      max-height: 0;
      overflow: hidden;
      font-size: .8rem;
      color: var(--txt2);
      line-height: 1.7;
      transition: max-height .3s ease, padding .3s ease;
    }

    .faq-item.open .faq-a {
      max-height: 200px;
      padding: 0 20px 16px
    }

    .faq-arrow {
      font-size: .7rem;
      transition: transform .3s;
      color: var(--txt3)
    }

    .faq-item.open .faq-arrow {
      transform: rotate(90deg)
    }

    /* ===== FOOTER ===== */
    footer {
      border-top: 1px solid var(--border);
      padding: 28px 0;
      text-align: center;
      font-family: 'DM Mono', monospace;
      font-size: .68rem;
      color: var(--txt3);
    }

    footer a {
      color: var(--txt3);
      text-decoration: none
    }

    footer a:hover {
      color: var(--accent)
    }

    .footer-links {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin-bottom: 10px;
      flex-wrap: wrap
    }

    /* ===== FEEDBACK ===== */
    .fb-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 100;
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      padding: 10px 18px;
      border-radius: 30px;
      color: var(--txt2);
      font-family: 'DM Mono', monospace;
      font-size: .65rem;
      letter-spacing: .05em;
      cursor: pointer;
      transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .fb-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--txt);
      transform: translateY(-2px);
      border-color: var(--txt3)
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-content {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 24px;
      width: 100%;
      max-width: 400px;
      padding: 32px;
      position: relative;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }

    .modal-title {
      font-family: 'DM Serif Display', serif;
      font-size: 1.5rem;
      margin-bottom: 8px
    }

    .modal-sub {
      font-size: .75rem;
      color: var(--txt2);
      margin-bottom: 20px;
      line-height: 1.6
    }

    .fb-textarea {
      width: 100%;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      color: var(--txt);
      font-family: inherit;
      font-size: .85rem;
      min-height: 120px;
      outline: none;
      margin-bottom: 16px;
      resize: none;
    }

    .fb-textarea:focus {
      border-color: var(--accent)
    }

    .fb-submit {
      width: 100%;
      background: var(--accent);
      color: #000;
      border: none;
      padding: 14px;
      border-radius: 10px;
      font-weight: 700;
      font-size: .85rem;
      cursor: pointer;
      transition: opacity .2s;
    }

    .fb-submit:hover {
      opacity: 0.9
    }

    .modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      color: var(--txt3);
      cursor: pointer;
      font-size: 1.2rem;
    }

    /* ===== RESPONSIVE ===== */
    @media(max-width:600px) {
      .wrap {
        padding: 0 16px;
      }

      h1 {
        font-size: 2.5rem
      }

      .hero {
        padding: 52px 0 38px;
      }

      .section-card,
      .result-card {
        padding: 20px;
        border-radius: 14px;
      }

      .steps {
        flex-direction: column
      }

      .step {
        border-right: none;
        border-bottom: 1px solid var(--border)
      }

      .step:last-child {
        border-bottom: none
      }

      .api-row {
        flex-direction: column
      }

      .template-grid {
        grid-template-columns: 1fr 1fr
      }

      .url-inner {
        align-items: stretch;
        flex-direction: column
      }

      .url-prefix {
        display: none
      }

      .url-field {
        padding: 16px;
        width: 100%
      }

      .go-btn {
        margin: 0 10px 10px;
        width: calc(100% - 20px)
      }

      .improver-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .improver-btn,
      .improver-copy {
        width: 100%;
      }

      .btn-row {
        flex-direction: column
      }

      .btn-dl,
      .btn-copy,
      .btn-new {
        width: 100%
      }

      .toast-region {
        right: 16px;
        left: 16px;
        bottom: 82px;
        max-width: none;
      }
    }

    @media(max-width:399px) {
      .template-grid {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:379px) {
      .nav-badges {
        display: none
      }
    }