:root {
        --radius: 18px;
        --radius-sm: 12px;
      }
      [data-theme="light"] {
        color-scheme: light;
        --bg: #f4f4f1;
        --bg-soft: #ececea;
        --surface: #ffffff;
        --surface-2: #fafaf8;
        --ink: #1d1b16;
        --ink-2: #55524a;
        --ink-3: #8a867c;
        --line: #e3e1da;
        --line-strong: #cfccc2;
        --accent: #d92c1f;
        --accent-ink: #b91f14;
        --accent-soft: #fdecea;
        --good: #177245;
        --good-soft: #e4f4ec;
        --warn-soft: #fdf3e0;
        --shadow: 0 1px 2px rgba(29,27,22,.05), 0 10px 30px -12px rgba(29,27,22,.14);
        --shadow-lg: 0 2px 4px rgba(29,27,22,.06), 0 24px 48px -16px rgba(29,27,22,.22);
        --hero-a: #fdf3ec;
        --hero-b: #fdecea;
        --drop-bg: #fffaf7;
      }
      [data-theme="dark"] {
        color-scheme: dark;
        --bg: #141311;
        --bg-soft: #1b1a17;
        --surface: #201f1c;
        --surface-2: #26251f;
        --ink: #f3f1ea;
        --ink-2: #b8b4a8;
        --ink-3: #86817a;
        --line: #33322c;
        --line-strong: #45433a;
        --accent: #ff5142;
        --accent-ink: #ff7a6e;
        --accent-soft: #3a2320;
        --good: #4cc38a;
        --good-soft: #1d2f26;
        --warn-soft: #33291a;
        --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.5);
        --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.6);
        --hero-a: #241a16;
        --hero-b: #2a1a17;
        --drop-bg: #241d19;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: "Manrope", system-ui, -apple-system, sans-serif;
        background: var(--bg);
        color: var(--ink);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
      }
      h1, h2, h3 { font-family: "Bricolage Grotesque", "Manrope", sans-serif; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
      p { margin: 0; }
      button { font-family: inherit; cursor: pointer; }
      input, select { font-family: inherit; }
      .mono { font-family: "JetBrains Mono", monospace; }
      :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

      /* Header */
      .site-header {
        position: sticky; top: 0; z-index: 50;
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line);
      }
      .header-in { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
      .brand { display: flex; align-items: center; gap: 10px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none; }
      .brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); display: grid; place-items: center; flex: none; }
      .brand-mark svg { width: 20px; height: 20px; }
      .header-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
      .header-nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 999px; }
      .header-nav a:hover { background: var(--bg-soft); color: var(--ink); }
      .theme-btn {
        margin-left: 8px; width: 40px; height: 40px; border-radius: 999px;
        border: 1px solid var(--line); background: var(--surface); color: var(--ink);
        display: grid; place-items: center;
      }
      .theme-btn svg { width: 19px; height: 19px; }
      .theme-btn .icon-sun { display: none; }
      [data-theme="dark"] .theme-btn .icon-sun { display: block; }
      [data-theme="dark"] .theme-btn .icon-moon { display: none; }
      @media (max-width: 560px) { .header-nav a { display: none; } }

      .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

      /* Hero */
      .hero { padding: 52px 0 8px; }
      .hero-card {
        background: linear-gradient(120deg, var(--hero-a), var(--hero-b));
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: clamp(28px, 5vw, 56px);
        position: relative; overflow: hidden;
      }
      .hero-card::after {
        content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px;
        border-radius: 50%; border: 44px solid color-mix(in srgb, var(--accent) 10%, transparent);
        pointer-events: none;
      }
      .hero h1 { font-size: clamp(32px, 5.2vw, 54px); font-weight: 800; max-width: 16ch; }
      .hero h1 .hl { color: var(--accent); }
      .hero-sub { margin-top: 16px; font-size: clamp(16px, 2vw, 19px); color: var(--ink-2); max-width: 58ch; font-weight: 500; }
      .hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
      .chip {
        display: inline-flex; align-items: center; gap: 7px;
        background: var(--surface); border: 1px solid var(--line);
        padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink);
      }
      .chip svg { width: 15px; height: 15px; color: var(--good); flex: none; }
      .search-box { margin-top: 28px; position: relative; max-width: 560px; z-index: 2; }
      .search-box svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
      .search-box input {
        width: 100%; padding: 16px 18px 16px 50px; font-size: 16.5px; font-weight: 600;
        border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
        box-shadow: var(--shadow);
      }
      .search-box input::placeholder { color: var(--ink-3); font-weight: 500; }
      .search-box input:focus { outline: none; border-color: var(--accent); }

      /* Tool grid */
      .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 44px 0 18px; }
      .section-head h2 { font-size: 26px; font-weight: 700; }
      .section-head p { color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
      .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
      .tool-card {
        text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 20px; display: flex; flex-direction: column; gap: 12px; width: 100%;
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
        color: var(--ink);
      }
      .tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
      .tool-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; }
      .tool-ic svg { width: 25px; height: 25px; }
      .tool-card h3 { font-size: 18.5px; font-weight: 700; }
      .tool-card p { color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.45; }
      .tool-card .go { margin-top: auto; font-size: 13.5px; font-weight: 800; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 5px; }
      .tool-card .go svg { width: 15px; height: 15px; }
      .no-results { grid-column: 1 / -1; text-align: center; padding: 36px 16px; color: var(--ink-2); font-weight: 600; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

      /* Privacy + steps */
      .band { margin: 52px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 44px); }
      .band h2 { font-size: clamp(23px, 3vw, 30px); font-weight: 700; max-width: 26ch; }
      .band .lead { color: var(--ink-2); margin-top: 12px; max-width: 62ch; font-weight: 500; }
      .band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 28px; }
      .band-item h3 { font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
      .band-item h3 svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
      .band-item p { color: var(--ink-2); font-size: 14.5px; margin-top: 7px; font-weight: 500; }
      .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
      .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
      .step .num { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 13px; color: var(--accent-ink); background: var(--accent-soft); display: inline-block; padding: 3px 9px; border-radius: 999px; }
      .step h3 { font-size: 16.5px; margin-top: 12px; font-weight: 700; }
      .step p { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; font-weight: 500; }

      footer { margin: 56px 0 0; border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--ink-3); font-size: 14px; font-weight: 500; }
      footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }

      /* Tool view */
      .tool-view { padding: 30px 0 10px; display: none; }
      .tool-view.active { display: block; }
      .home-view.hidden { display: none; }
      .back-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 14.5px; padding: 9px 15px; border-radius: 999px; }
      .back-btn:hover { border-color: var(--line-strong); }
      .back-btn svg { width: 16px; height: 16px; }
      .tool-head { display: flex; gap: 16px; align-items: flex-start; margin-top: 20px; }
      .tool-head .tool-ic { width: 56px; height: 56px; border-radius: 16px; flex: none; }
      .tool-head .tool-ic svg { width: 29px; height: 29px; }
      .tool-head h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; }
      .tool-head p { color: var(--ink-2); margin-top: 6px; font-weight: 500; max-width: 62ch; }

      .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 28px); margin-top: 24px; box-shadow: var(--shadow); }
      .dropzone {
        border: 2px dashed var(--line-strong); border-radius: 18px; background: var(--drop-bg);
        padding: 40px 20px; text-align: center; transition: border-color .15s, background .15s;
      }
      .dropzone.drag { border-color: var(--accent); background: var(--accent-soft); }
      .dropzone svg.dz-ic { width: 46px; height: 46px; color: var(--accent); }
      .dropzone h3 { font-size: 19px; margin-top: 12px; font-weight: 700; }
      .dropzone p { color: var(--ink-2); font-size: 14.5px; margin-top: 5px; font-weight: 500; }
      .pick-btn {
        margin-top: 16px; background: var(--accent); color: #fff; border: none; border-radius: 12px;
        padding: 12px 22px; font-size: 15.5px; font-weight: 800;
      }
      .pick-btn:hover { filter: brightness(1.07); }

      .file-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
      .file-item { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; padding: 10px 13px; }
      .file-item .f-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
      .file-item .f-ic svg { width: 18px; height: 18px; }
      .file-item .f-meta { min-width: 0; flex: 1; }
      .file-item .f-name { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .file-item .f-sub { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
      .icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; flex: none; }
      .icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
      .icon-btn svg { width: 16px; height: 16px; }
      .icon-btn:disabled { opacity: .35; cursor: default; }

      .opts { margin-top: 22px; display: none; }
      .opts.show { display: block; }
      .opts h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
      .opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
      .field label { display: block; font-size: 13px; font-weight: 800; color: var(--ink-2); margin-bottom: 7px; letter-spacing: .02em; }
      .field input[type="text"], .field input[type="number"], .field select {
        width: 100%; padding: 11px 13px; font-size: 15px; font-weight: 600; color: var(--ink);
        background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 11px;
      }
      .field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
      .field .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; font-weight: 600; }
      .field input[type="range"] { width: 100%; accent-color: var(--accent); }
      .seg { display: flex; flex-wrap: wrap; gap: 8px; }
      .seg button {
        border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink-2);
        padding: 9px 15px; border-radius: 999px; font-weight: 700; font-size: 14px;
      }
      .seg button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

      .action-row { margin-top: 24px; display: none; align-items: center; gap: 14px; flex-wrap: wrap; }
      .action-row.show { display: flex; }
      .run-btn {
        background: var(--accent); color: #fff; border: none; border-radius: 14px;
        padding: 15px 30px; font-size: 17px; font-weight: 800; display: inline-flex; align-items: center; gap: 9px;
        box-shadow: var(--shadow);
      }
      .run-btn:hover { filter: brightness(1.07); }
      .run-btn:disabled { opacity: .55; cursor: wait; }
      .run-btn svg { width: 19px; height: 19px; }
      .ghost-btn { background: transparent; border: 1.5px solid var(--line-strong); color: var(--ink); border-radius: 14px; padding: 14px 22px; font-size: 15px; font-weight: 800; }

      .status-box { margin-top: 20px; display: none; border-radius: 14px; padding: 16px 18px; font-weight: 600; font-size: 15px; align-items: flex-start; gap: 12px; }
      .status-box.show { display: flex; }
      .status-box.err { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
      .status-box.busy { background: var(--warn-soft); color: var(--ink); border: 1px solid var(--line); }
      .spinner { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; margin-top: 1px; }
      @keyframes spin { to { transform: rotate(360deg); } }

      .result-box { margin-top: 20px; display: none; background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); border-radius: 16px; padding: 20px; }
      .result-box.show { display: block; }
      .result-box h3 { font-size: 18px; display: flex; align-items: center; gap: 9px; }
      .result-box h3 svg { width: 21px; height: 21px; color: var(--good); }
      .result-box p { color: var(--ink-2); font-weight: 600; font-size: 14.5px; margin-top: 6px; }
      .result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
      .dl-btn {
        background: var(--good); color: #fff; border: none; border-radius: 13px; padding: 14px 26px;
        font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
      }
      .dl-btn svg { width: 19px; height: 19px; }
      .dl-btn:hover { filter: brightness(1.08); }

      /* Organize page grid */
      .page-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 20px; }
      .page-grid.show { display: grid; }
      .page-thumb { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 8px; position: relative; }
      .page-thumb canvas { width: 100%; height: auto; display: block; border-radius: 6px; background: #fff; }
      .page-thumb.removed { opacity: .38; }
      .page-thumb.removed canvas { filter: grayscale(1); }
      .page-thumb .p-num { font-size: 12px; font-weight: 800; color: var(--ink-2); text-align: center; margin-top: 7px; }
      .page-thumb .p-actions { display: flex; justify-content: center; gap: 5px; margin-top: 6px; }
      .page-thumb .p-actions .icon-btn { width: 28px; height: 28px; }
      .page-thumb .p-actions .icon-btn svg { width: 14px; height: 14px; }
      .page-thumb .del-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
      .org-note { display: none; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
      .org-note.show { display: block; }

      .status-box.warn { background: var(--warn-soft); color: var(--ink); border: 1px solid var(--line-strong); }
      .status-box.warn a { color: var(--accent-ink); font-weight: 800; }
      .sig-wrap { margin-top: 4px; }
      .sig-pad-box { border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; overflow: hidden; }
      #sigPad { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
      .sig-line { border-top: 1px dashed #c9c4b8; margin: 0 18px; position: relative; top: -52px; pointer-events: none; }
      .sig-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
      .sig-actions .hint { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
      .mini-btn { border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; }
      .mini-btn:hover { border-color: var(--line-strong); }
      .type-sig-preview { display: none; margin-top: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 22px 18px; text-align: center; color: #1d1b16; overflow: hidden; }
      .type-sig-preview.show { display: block; }
      .type-sig-preview span { font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; font-size: clamp(34px, 7vw, 54px); line-height: 1.2; word-break: break-word; }
      .crop-note { font-weight: 600; color: var(--ink-2); font-size: 14.5px; max-width: 64ch; }
      @media (max-width: 640px) {
        .hero { padding-top: 30px; }
        .tool-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
        .tool-card { padding: 15px; }
        .tool-card h3 { font-size: 16px; }
        .tool-card p { font-size: 13px; }
        .tool-ic { width: 42px; height: 42px; border-radius: 12px; }
        .run-btn { width: 100%; justify-content: center; }
        .action-row .ghost-btn { width: 100%; }
      }
      /* Ad slots - reserved for Google AdSense, hidden until enabled in one place (ADS_ENABLED in the script / body.ads-enabled) */
      .ad-slot { display: none !important; height: 0; overflow: hidden; }
      body.ads-enabled .ad-slot { display: block !important; height: auto; min-height: 90px; margin: 22px auto; }
      body.ads-enabled .ad-slot .ad-inner { border: 1px dashed var(--line-strong); border-radius: 14px; min-height: 90px; background: var(--surface); }
      .preset-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 10px; }
      .preset-row .preset-label { font-size: 12.5px; font-weight: 800; color: var(--ink-3); margin-right: 2px; }
      .preset-chip { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 6px 11px; border-radius: 999px; font-weight: 700; font-size: 13px; }
      .preset-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
      .target-note { font-weight: 600; color: var(--ink-2); font-size: 14.5px; max-width: 68ch; }
      .target-note strong { color: var(--ink); }
      .size-group { border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 16px; margin-top: 14px; background: var(--surface-2); }
      .size-group h4 { margin: 0 0 12px; font-size: 16px; font-weight: 800; font-family: "Bricolage Grotesque", "Manrope", sans-serif; color: var(--ink); }
      .pic-preview-wrap { display: none; margin-top: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
      .pic-preview-wrap.show { display: block; }
      .pic-preview-wrap img { max-width: 100%; max-height: 320px; display: block; margin: 0 auto; border-radius: 10px; background: #fff; object-fit: contain; }
      .pic-preview-wrap p { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-top: 10px; }
      .form-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
      .form-fields .field input[type="text"], .form-fields .field select { width: 100%; padding: 11px 13px; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 11px; }
      .check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--ink); padding: 10px 13px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 11px; }
      .check-row input { width: 20px; height: 20px; accent-color: var(--accent); }
      .compare-report { display: none; margin-top: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; max-height: 420px; overflow: auto; }
      .compare-report.show { display: block; }
      .compare-report pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.6; color: var(--ink); }
      .redact-wrap { display: none; margin-top: 20px; }
      .redact-wrap.show { display: block; }
      .redact-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
      .redact-toolbar .page-label { font-weight: 800; font-size: 14.5px; color: var(--ink-2); margin: 0 4px; }
      .redact-canvas-box { border: 1.5px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #fff; max-width: 760px; margin: 0 auto; }
      #redactCanvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
      .redact-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
      .redact-list li { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
      .redact-list li span { flex: 1; }
      .field textarea {
        width: 100%; padding: 11px 13px; font-size: 15px; font-weight: 600; color: var(--ink);
        background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 11px;
        font-family: inherit; line-height: 1.55; resize: vertical;
      }
      .field textarea:focus { outline: none; border-color: var(--accent); }
      .field input[type="color"] { width: 100%; height: 44px; padding: 4px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 11px; }
      .info-box { display: none; margin-top: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
      .info-box.show { display: block; }
      .info-box h4 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
      .info-box dl { margin: 0; display: grid; grid-template-columns: minmax(86px, auto) 1fr; gap: 5px 14px; font-size: 14px; }
      .info-box dt { font-weight: 800; color: var(--ink-2); }
      .info-box dd { margin: 0; font-weight: 600; color: var(--ink); word-break: break-word; }
      .qr-preview { display: none; margin-top: 18px; text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
      .qr-preview.show { display: block; }
      .qr-box { display: inline-block; background: #fff; padding: 12px; border-radius: 10px; line-height: 0; max-width: 100%; }
      .qr-box img, .qr-box canvas { max-width: min(280px, 72vw) !important; height: auto !important; }
      .qr-preview p { margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); word-break: break-all; }
      @media (prefers-reduced-motion: reduce) {
        * { animation: none !important; transition: none !important; }
        html { scroll-behavior: auto; }
      }