/* ── Reset & Base ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", sans-serif;
    background: #F8FAFC;
    color: #1E293B;
    min-height: 100vh;
    line-height: 1.6;
  }
  a { color: inherit; text-decoration: none; }

  :root {
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --green-600: #16A34A;
    --green-50: #F0FDF4;
    --red-600: #DC2626;
    --red-50: #FEF2F2;
    --amber-600: #D97706;
    --amber-50: #FFFBEB;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  }

  /* ── Header ── */
  .header {
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .header-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue-600);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .header-logo svg { width: 28px; height: 28px; }
  .header-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--gray-500); }
  .header-nav a:hover { color: var(--gray-800); }
  .header-nav .nav-link { color: var(--gray-600); text-decoration: none; font-weight: 500; }
  .quota-badge {
    font-size: 13px;
    background: var(--blue-50);
    color: var(--blue-600);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
  }
  .quota-badge.warning { background: var(--amber-50); color: var(--amber-600); }
  .quota-badge.exhausted { background: var(--red-50); color: var(--red-600); }

  /* ── Pages ── */
  .page { display: none; }
  .page.active { display: block; }

  /* ── Upload Page ── */
  .upload-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding: 40px 24px;
  }
  .upload-hero h1 { font-size: 36px; font-weight: 700; text-align: center; color: var(--gray-800); margin-bottom: 12px; }
  .upload-hero h1 span { color: var(--blue-600); }
  .upload-hero .subtitle { text-align: center; color: var(--gray-500); font-size: 16px; margin-bottom: 40px; line-height: 1.8; }
  .upload-hero .subtitle strong { color: var(--gray-700); font-weight: 600; }

  /* Drop Zone */
  .dropzone {
    width: 100%;
    max-width: 600px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    background: #fff;
    padding: 48px 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .dropzone:hover, .dropzone.dragover { border-color: var(--blue-600); background: var(--blue-50); box-shadow: var(--shadow-md); }
  .dropzone-icon {
    width: 64px; height: 64px; margin: 0 auto 16px;
    background: var(--blue-50); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .dropzone-icon svg { width: 32px; height: 32px; color: var(--blue-600); }
  .dropzone h3 { font-size: 18px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px; }
  .dropzone p { font-size: 14px; color: var(--gray-400); margin-bottom: 16px; }
  .browse-btn {
    display: inline-block; background: var(--blue-600); color: #fff;
    font-size: 15px; font-weight: 600; padding: 10px 28px;
    border-radius: 8px; border: none; cursor: pointer; transition: background 0.15s;
  }
  .browse-btn:hover { background: var(--blue-700); }
  /* スマホから選ぶ (10-31): PC only — the button stays hidden until hoSetup() finds a mouse + a wide screen; the dialog's .ho-* rules: public/shared/handoff.css */
  .dz-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .phone-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--blue-700); font-size: 15px; font-weight: 600;
    padding: 9px 18px; border-radius: 8px; border: 1.5px solid var(--blue-100); cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit; }
  .phone-btn:hover { border-color: var(--blue-600); background: var(--blue-50); }
  .phone-btn svg { width: 18px; height: 18px; }
  .phone-btn[hidden] { display: none; }
  @media (max-width: 767px) and (hover: none) { .phone-btn { display: none !important; } }   /* touch screens; a narrowed desktop window keeps it */
  .format-info { margin-top: 24px; font-size: 13px; color: var(--gray-400); }
  .format-info span {
    display: inline-block; background: var(--gray-100); padding: 2px 8px;
    border-radius: 4px; margin: 2px; font-family: monospace; font-size: 12px; color: var(--gray-600);
  }
  .features { display: flex; gap: 32px; margin-top: 48px; max-width: 600px; width: 100%; }
  .feature { flex: 1; text-align: center; }
  .feature-icon {
    width: 40px; height: 40px; margin: 0 auto 8px;
    background: var(--blue-50); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
  }
  .feature h4 { font-size: 14px; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; }
  .feature p { font-size: 12px; color: var(--gray-400); }
  .privacy-note {
    margin-top: 32px; font-size: 12px; color: var(--gray-400);
    display: flex; align-items: center; gap: 6px;
  }
  .privacy-note svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* SEO content section */
  .seo-content {
    max-width: 720px; width: 100%; margin: 48px auto 0; padding: 0 24px;
    text-align: left; color: var(--gray-600); font-size: 14px; line-height: 1.9;
  }
  .seo-content h2 {
    font-size: 18px; font-weight: 600; color: var(--gray-800);
    margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200);
  }
  .seo-content h2:first-child { margin-top: 0; }
  .seo-content p { margin-bottom: 12px; }
  .seo-content ul { margin: 8px 0 16px 20px; }
  .seo-content li { margin-bottom: 6px; }
  .seo-content .faq-item { margin-bottom: 16px; }
  .seo-content .faq-q { font-weight: 600; color: var(--gray-700); margin-bottom: 4px; }
  .seo-content .faq-a { color: var(--gray-500); }
  .seo-content a { color: var(--blue-600); text-decoration: underline; }
  .seo-content a:hover { color: var(--blue-700); }
  /* /pricing plan cards (app/server.py _pricing_page) */
  .seo-content.pricing { max-width: 960px; }
  .seo-content .price-lead { font-size: 15px; color: var(--gray-700); margin-bottom: 8px; }
  .price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 12px; }
  .price-card { position: relative; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 18px 16px; display: flex; flex-direction: column; }
  .price-card.featured { border-color: var(--blue-600); box-shadow: inset 0 0 0 1px var(--blue-600); }
  .price-card h3 { font-size: 15px; font-weight: 600; color: var(--gray-800); margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .price-badge { position: absolute; top: -10px; right: 12px; font-size: 11px; font-weight: 600; line-height: 18px; color: #fff; background: var(--blue-600); border-radius: 10px; padding: 0 8px; }
  .seo-content .price-card .price { font-size: 26px; font-weight: 700; color: var(--gray-800); line-height: 1.3; margin: 0; }
  .price-card .price small { font-size: 12px; font-weight: 500; color: var(--gray-500); margin-left: 4px; }
  .seo-content .price-card .credits { font-size: 14px; font-weight: 600; color: var(--blue-600); margin: 0 0 8px; }
  .seo-content .price-card ul { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; line-height: 1.7; }
  .seo-content .price-card li { margin: 0 0 4px; padding-left: 1em; position: relative; }
  .seo-content .price-card li::before { content: "・"; position: absolute; left: -0.25em; color: var(--gray-400); }
  .seo-content .price-card .tag { margin: auto 0 0; font-size: 12px; line-height: 1.6; color: var(--gray-500); background: var(--gray-50); border-radius: 6px; padding: 4px 8px; }
  .seo-content .price-card .tag:empty { display: none; }
  .seo-content .price-note { font-size: 13px; color: var(--gray-500); }
  .seo-content.pricing ol { margin: 8px 0 16px 20px; }
  .seo-content.pricing ol li { margin-bottom: 6px; }
  .price-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; }
  .seo-content .price-cta a { display: inline-block; padding: 10px 18px; border-radius: 8px; background: var(--blue-600); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.5; }
  .seo-content .price-cta a:hover { background: var(--blue-700); color: #fff; }
  .seo-content .price-cta a.secondary { background: #fff; color: var(--blue-600); border: 1px solid var(--blue-600); }
  .seo-content .price-cta a.secondary:hover { background: var(--blue-50); color: var(--blue-700); }
  .seo-content .price-cta.price-top { margin: 14px 0 22px; }
  .seo-content .price-cta.price-top a { padding: 12px 22px; font-size: 15px; }
  .seo-content .price-card .price-buy { display: block; margin-top: 10px; padding: 9px 12px; border-radius: 8px; text-align: center; font-weight: 600; font-size: 14px; text-decoration: none; color: var(--blue-600); border: 1px solid var(--blue-600); background: #fff; }
  .seo-content .price-card .price-buy:hover { background: var(--blue-50); color: var(--blue-700); }
  .seo-content .price-card .price-buy.primary { background: var(--blue-600); color: #fff; }
  .seo-content .price-card .price-buy.primary:hover { background: var(--blue-700); color: #fff; }
  @media (max-width: 900px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 480px) { .price-grid { grid-template-columns: 1fr; } .seo-content .price-cta a { width: 100%; text-align: center; } }

  /* Hidden file input */
  #fileInput { display: none; }

  /* ── Result Page ── */
  .result-page { display: flex; flex-direction: column; height: calc(100vh - 56px); }
  .result-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--gray-200); flex-shrink: 0;
  }
  .back-btn {
    display: flex; align-items: center; gap: 6px; font-size: 14px;
    color: var(--gray-500); cursor: pointer; background: none; border: none;
    font-family: inherit; padding: 6px 12px; border-radius: 6px; transition: all 0.15s;
  }
  .back-btn:hover { background: var(--gray-100); color: var(--gray-700); }
  .back-btn svg { width: 18px; height: 18px; }
  .result-status { display: flex; align-items: center; gap: 12px; font-size: 13px; flex-wrap: wrap; }
  .status-pill {
    display: flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: 20px; font-weight: 500;
  }
  .status-pill.success { background: var(--green-50); color: var(--green-600); }
  .status-pill.success::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); }
  .status-pill.error { background: var(--red-50); color: var(--red-600); }
  .processing-time { color: var(--gray-400); }
  .orientation-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
    background: var(--amber-50); color: var(--amber-600); border-radius: 6px; font-size: 12px; font-weight: 500;
  }
  .engine-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
    background: var(--blue-50); color: var(--blue-600); border-radius: 6px; font-size: 12px; font-weight: 500;
  }

  /* Dual Pane */
  .result-main { display: flex; flex: 1; min-height: 0; overflow: hidden; }   /* min-height: 0 so the panes scroll instead of growing with the image */
  /* The image pane is the same scroll + zoom pane as the PDF drawer (.pdf-d-scroll / .pdf-d-zoom / .pdf-ov). */
  .image-pane { width: 45%; min-height: 0; position: relative; background: var(--gray-100); border-right: 1px solid var(--gray-200); overflow: hidden; }
  .image-pane img { display: block; width: 100%; height: auto; background: #fff; }
  .result-pane { flex: 1; display: flex; flex-direction: column; background: #fff; overflow: hidden; }

  /* Purchase email confirmation / one-time fix (thanks panel + account menu) */
  .email-box {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px; text-align: left;
    background: #F0F9FF; border: 1px solid #BAE6FD; font-size: 13px; color: #0C4A6E; line-height: 1.7;
  }
  .email-box strong { word-break: break-all; }
  .email-box .email-fix-link { color: var(--blue-600); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
  .email-box .email-fix-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
  .email-box .email-fix-form input {
    flex: 1; min-width: 180px; padding: 8px 10px; border: 1px solid var(--gray-300); border-radius: 8px; font-size: 14px;
  }
  .email-box .email-fix-form button {
    padding: 8px 12px; border-radius: 8px; border: 1px solid var(--blue-600); background: var(--blue-600); color: #fff; font-size: 13px; cursor: pointer;
  }
  .email-box .email-fix-form button.secondary { background: #fff; color: var(--gray-600); border-color: var(--gray-300); }
  .email-box .email-fix-form button:disabled { opacity: 0.6; cursor: default; }

  /* 通常 / 高精度 result views (the paid second pass sits next to the first) */
  .view-tabs { display: flex; gap: 6px; padding: 14px 24px 0; flex-shrink: 0; }
  .view-tabs.hidden { display: none; }
  .view-tab {
    padding: 6px 14px; border: 1px solid var(--gray-200); background: #fff; border-radius: 999px;
    font-size: 13px; color: var(--gray-600); cursor: pointer; transition: all 0.15s;
  }
  .view-tab:hover { color: var(--gray-700); background: var(--gray-50); }
  .view-tab.active { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }

  /* 高精度で再認識 (1 credit, user-initiated) */
  .rerun-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 0 24px 12px; flex-shrink: 0;
  }
  .rerun-bar.hidden { display: none; }
  .rerun-bar.recommended .action-btn { border-color: var(--blue-600); color: var(--blue-600); }
  .rerun-bar .action-btn:disabled { opacity: 0.6; cursor: default; }
  .rerun-cost {
    font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
    background: var(--amber-50); color: var(--amber-600); white-space: nowrap;
  }
  .rerun-sub { font-size: 12px; color: var(--gray-500); }
  .refine-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-500); }
  .mini-spinner {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--gray-200); border-top-color: var(--blue-600);
    animation: pwspin 0.9s linear infinite;
  }
  .engine-badge.refined { background: var(--green-50); color: var(--green-600); }

  /* Sub-tabs (text / JSON) */
  .result-tabs { display: flex; padding: 16px 24px 0; gap: 4px; flex-shrink: 0; }
  .result-tabs.hidden { display: none; }
  .tab-content.hidden { display: none; }
  .tab-btn {
    padding: 8px 20px; font-size: 14px; font-weight: 500; color: var(--gray-400);
    background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
  }
  .tab-btn:hover { color: var(--gray-600); }
  .tab-btn.active { color: var(--blue-600); border-bottom-color: var(--blue-600); }

  .tab-content { flex: 1; padding: 16px 24px; overflow: hidden; display: flex; flex-direction: column; }
  .tab-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
  .tab-panel.active { display: flex; }
  .result-textarea {
    flex: 1; width: 100%; border: 1px solid var(--gray-200); border-radius: 8px;
    padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", sans-serif; font-size: 15px;
    line-height: 1.8; resize: none; color: var(--gray-800); background: var(--gray-50); outline: none;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .result-textarea:focus { border-color: var(--blue-600); background: #fff; }
  .result-json {
    flex: 1; width: 100%; border: 1px solid var(--gray-200); border-radius: 8px;
    padding: 16px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px;
    line-height: 1.6; color: var(--gray-700); background: var(--gray-50); overflow: auto; white-space: pre;
    transition: background 0.25s ease, border-color 0.25s ease;
  }

  /* Line-by-line result display (for overlay hover sync) */
  .result-lines {
    flex: 1; width: 100%; border: 1px solid var(--gray-200); border-radius: 8px;
    padding: 12px 16px; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", sans-serif; font-size: 15px;
    line-height: 1.8; color: var(--gray-800); background: var(--gray-50);
    overflow: auto; user-select: text; cursor: text;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .result-lines.hidden { display: none; }
  .result-textarea.hidden { display: none; }
  .result-line { padding: 2px 4px; border-radius: 4px; }
  .result-line.highlight { background: #FEF3C7; box-shadow: inset 3px 0 0 #EAB308; }
  .result-line:hover { background: #FEF3C7; }

  /* Actions */
  .result-actions {
    display: flex; gap: 8px; padding: 16px 24px;
    border-top: 1px solid var(--gray-200); flex-shrink: 0; flex-wrap: wrap;
  }
  .action-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 16px;
    font-size: 14px; font-weight: 500; border-radius: 8px;
    border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700);
    cursor: pointer; font-family: inherit; transition: all 0.15s;
  }
  .action-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
  .action-btn svg { width: 16px; height: 16px; }
  .action-btn.primary { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
  .action-btn.primary:hover { background: var(--blue-700); }

  /* ── Loading Overlay ── */
  .loading-overlay {
    display: none; position: fixed; inset: 0; background: rgba(255,255,255,0.85);
    z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  }
  .loading-overlay.active { display: flex; }
  .spinner {
    width: 48px; height: 48px; border: 4px solid var(--gray-200);
    border-top-color: var(--blue-600); border-radius: 50%; animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font-size: 16px; color: var(--gray-600); font-weight: 500; }
  .loading-timer { font-size: 28px; font-weight: 700; color: var(--blue-600); font-variant-numeric: tabular-nums; }
  .loading-hint { font-size: 13px; color: var(--gray-400); max-width: 300px; text-align: center; line-height: 1.6; margin-top: 4px; }

  /* ── Toast: one centred card for every notice (info / success / error).
     Dark card so it reads on any page, a coloured dot for the type, never
     blocks clicks (pointer-events: none), fades in and out in place. ── */
  .toast {
    position: fixed; top: 50%; left: 50%; z-index: 300;
    transform: translate(-50%, -50%) scale(0.96); opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    min-width: 280px; max-width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
    padding: 16px 22px 16px 46px; border-radius: 12px;
    background: #1F2937; color: #fff; font-size: 14.5px; line-height: 1.65; text-align: left;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .28); pointer-events: none;
  }
  .toast::before {
    content: ""; position: absolute; left: 20px; top: 21px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--blue-500, #3B82F6); box-shadow: 0 0 0 4px rgba(59, 130, 246, .22);
  }
  .toast.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
  .toast.success::before { background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .22); }
  .toast.error::before { background: #EF4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .22); }
  .toast.error { background: #3B1D1D; }

  /* ── Paywall Modal ── */
  .paywall-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
    z-index: 400; align-items: center; justify-content: center; padding: 16px;
  }
  .paywall-overlay.active { display: flex; }
  .paywall-modal {
    background: #fff; border-radius: 16px; max-width: 440px; width: 100%;
    padding: 28px; box-shadow: var(--shadow-lg); position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; }
  .paywall-close {
    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
    border: none; background: transparent; cursor: pointer; color: var(--gray-400);
    font-size: 20px; line-height: 1; border-radius: 8px;
  }
  .paywall-close:hover { background: var(--gray-100); color: var(--gray-700); }
  .paywall-title { font-size: 20px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
  .paywall-body { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin-bottom: 20px; }
  .paywall-body strong { color: var(--gray-900); }
  .paywall-form { display: flex; flex-direction: column; gap: 12px; }
  .paywall-input {
    width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
    border: 1px solid var(--gray-200); border-radius: 8px; box-sizing: border-box;
  }
  .paywall-input:focus { outline: none; border-color: var(--blue-600); }
  .paywall-input.invalid, .email-box .email-fix-form input.invalid, .sup-contact input.invalid { border-color: var(--red-600); }
  .email-hint { display: none; font-size: 12px; border-radius: 6px; padding: 6px 10px; margin-top: 6px; line-height: 1.5; }
  .email-hint.typo { display: block; color: var(--amber-600); background: var(--amber-50); cursor: pointer; }
  .email-hint.err { display: block; color: var(--red-600); background: var(--red-50); }
  /* 「購入したのにメールが届かない」 card in the login code pane → the human-contact form */
  .login-help { border: 1.5px solid var(--blue-600); background: var(--blue-50); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
  .login-help-t { font-size: 14px; font-weight: 700; color: var(--gray-900); }
  .login-help-b { font-size: 12.5px; color: var(--gray-700); line-height: 1.75; margin-top: 4px; }
  .login-help-btn {
    display: block; width: 100%; margin-top: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600;
    color: #fff; background: var(--blue-600); border: none; border-radius: 8px; cursor: pointer; font-family: inherit;
  }
  .login-help-btn:hover { background: var(--blue-700); }
  .paywall-submit {
    padding: 12px 16px; font-size: 15px; font-weight: 600; color: #fff;
    background: var(--blue-600); border: none; border-radius: 8px; cursor: pointer;
    font-family: inherit;
  }
  .paywall-submit:hover { background: var(--blue-700); }
  .paywall-submit:disabled { background: var(--gray-300); cursor: not-allowed; }
  .paywall-note { font-size: 12px; color: var(--gray-400); text-align: center; margin-top: 4px; }
  .paywall-success { padding: 16px; background: var(--green-50); color: var(--green-600); border-radius: 8px; font-size: 14px; text-align: center; }
  .pack-card {
    border: 1px solid var(--blue-600); border-radius: 12px; padding: 18px; margin-bottom: 16px;
    background: linear-gradient(180deg, #F0F7FF 0%, #fff 100%);
  }
  .pack-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
  .pack-name { font-size: 14px; font-weight: 600; color: var(--gray-700); }
  .pack-price { font-size: 22px; color: var(--gray-900); }
  .pack-features { list-style: none; padding: 0; margin: 0 0 16px 0; font-size: 14px; color: var(--gray-600); }
  .pack-features li { padding: 4px 0; }
  .pack-features li::before { content: "✓ "; color: var(--green-600); font-weight: 700; }
  .pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
  #paywallOverlay .paywall-modal { max-width: 540px; }
  /* ── Big upload dialog (10-23): image compress notice; PDF over 500 pages → text extraction / page range ── */
  .bf-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 400; align-items: center; justify-content: center; padding: 16px; }
  .bf-overlay.active { display: flex; }
  .bf-modal { background: #fff; border-radius: 16px; max-width: 460px; width: 100%; padding: 24px 24px 20px; box-shadow: var(--shadow-lg); position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; outline: none; }
  .bf-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: var(--gray-400); font-size: 20px; line-height: 1; border-radius: 8px; }
  .bf-close:hover { background: var(--gray-100); color: var(--gray-700); }
  .bf-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; background: var(--blue-50); }
  .bf-icon.err { background: var(--red-50); }
  .bf-title { font-size: 18px; font-weight: 700; color: var(--gray-900, #0F172A); margin-bottom: 6px; line-height: 1.4; padding-right: 24px; }
  .bf-body { font-size: 14px; color: var(--gray-600); line-height: 1.65; margin-bottom: 16px; }
  .bf-body strong { color: var(--gray-900, #0F172A); }
  .bf-size { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
  .bf-size .nm { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-700); }
  .bf-size .from { color: var(--gray-500); }
  .bf-size.ok .from { text-decoration: line-through; }
  .bf-size .to { color: var(--green-600); font-weight: 700; }
  .bf-size .arrow { color: var(--gray-400); }
  .bf-bar { height: 6px; background: var(--gray-100); border-radius: 99px; overflow: hidden; margin: 2px 0 8px; }
  .bf-bar i { display: block; height: 100%; width: 0; background: var(--blue-600); border-radius: 99px; transition: width .2s ease; }
  .bf-bar.indet i { width: 35%; animation: bfslide 1.1s ease-in-out infinite; }
  @keyframes bfslide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
  .bf-note { font-size: 12px; color: var(--gray-500); line-height: 1.6; }
  .bf-note.err { color: var(--red-600); }
  .bf-link { border: none; background: none; padding: 0; color: var(--blue-600); text-decoration: underline; font: inherit; cursor: pointer; }
  .bf-opt { display: block; width: 100%; text-align: left; border: 1.5px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; background: #fff; font-family: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
  .bf-opt:hover { border-color: var(--blue-600); }
  .bf-opt.primary { border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-50); }
  .bf-opt b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; color: var(--gray-900, #0F172A); margin-bottom: 3px; }
  .bf-opt > span { display: block; font-size: 13px; color: var(--gray-600); line-height: 1.55; }
  .bf-tag { white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--green-600); background: var(--green-50); border-radius: 99px; padding: 2px 8px; }
  .bf-range { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; color: var(--gray-700); }
  .bf-range input { width: 96px; min-width: 0; flex: 0 1 96px; padding: 9px 10px; font-size: 16px; border: 1px solid var(--gray-200); border-radius: 8px; font-family: inherit; text-align: center; }
  .bf-range input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-50); }
  .bf-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
  .bf-quick button { font-size: 12px; border: 1px solid var(--gray-200); background: #fff; border-radius: 99px; padding: 5px 10px; color: var(--gray-700); font-family: inherit; cursor: pointer; }
  .bf-quick button:hover { border-color: var(--blue-600); color: var(--blue-700); }
  .bf-quick button.on { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-700); }
  .bf-hint { font-size: 12px; color: var(--gray-500); margin-top: 6px; min-height: 1em; }
  .bf-btn { display: block; width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600; color: #fff; background: var(--blue-600); border: none; border-radius: 8px; font-family: inherit; margin-top: 6px; cursor: pointer; }
  .bf-btn:hover { background: var(--blue-700); }
  .bf-btn.ghost { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-200); margin-top: 8px; }
  .bf-btn.ghost:hover { background: var(--gray-50); }
  .bf-row { display: flex; gap: 8px; }
  .bf-row .bf-btn { flex: 1; margin-top: 6px; }
  .bf-preview { border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.75; color: var(--gray-700); max-height: 132px; overflow: hidden; position: relative; margin-bottom: 12px; background: #fff; white-space: pre-wrap; word-break: break-all; }
  .bf-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(rgba(255,255,255,0), #fff); }
  .bf-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--gray-600); margin-bottom: 12px; }
  .bf-stats b { color: var(--gray-900, #0F172A); font-size: 16px; }
  .bf-modal button:focus-visible, .bf-opt:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
  /* 履歴 /history (2026-11-05): the link shows only when this browser has records */
  html:not(.has-hist) .nav-hist { display: none !important; }
  /* one link more: the menu takes over a little earlier (see the 1020px rule below) */
  @media (max-width: 1060px) {
    html.has-hist .header-nav .nav-link { display: none; }
    html.has-hist .nav-menu-btn { display: inline-flex; }
  }
  .hist-main { align-items: stretch; justify-content: flex-start; padding: 24px 16px 40px; }
  .hist-main .upload-hero, #historyLanding { width: 100%; max-width: 760px; margin: 0 auto; }
  .hist-main .upload-hero[hidden] { display: none; }
  .hist-main .seo-content { max-width: 760px; padding: 0; margin-top: 36px; }
  .hist-main .seo-content[hidden] { display: none; }
  .hist-main .upload-hero h1 { font-size: 20px; text-align: left; margin: 0; }
  .hist-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .hist-note { margin: 4px 0 0; font-size: 12.5px; color: var(--gray-500); line-height: 1.6; }
  .hist-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; font-size: 13px; font-weight: 500; border-radius: 8px; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); font-family: inherit; white-space: nowrap; line-height: 1.4; cursor: pointer; text-decoration: none; }
  .hist-btn[hidden] { display: none; }
  .hist-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
  .hist-btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
  .hist-btn.primary { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
  .hist-btn.primary:hover { background: var(--blue-700); }
  .hist-btn.quiet { border-color: transparent; background: none; color: var(--gray-500); padding: 6px 8px; }
  .hist-btn.danger { border-color: #DC2626; background: #DC2626; color: #fff; }
  .hist-btn[disabled] { opacity: .45; cursor: not-allowed; }
  .hist-day { margin: 18px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--gray-500); }
  .hist-list { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
  .hist-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--gray-100); }
  .hist-item:first-child { border-top: none; }
  .hist-ic { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--blue-50); color: var(--blue-700); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
  .hist-tx { flex: 1; min-width: 0; }
  .hist-nm { font-size: 14px; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hist-mt { font-size: 12px; color: var(--gray-500); line-height: 1.6; }
  .hist-exp { flex: none; text-align: right; font-size: 12px; color: var(--gray-500); min-width: 112px; line-height: 1.45; }
  .hist-exp b { display: block; font-weight: 600; color: var(--gray-700); font-size: 12.5px; }
  .hist-exp.soon b { color: #92400E; }
  .hist-acts { flex: none; display: flex; gap: 4px; }
  .hist-sm { display: none; }
  .hist-empty { padding: 30px 24px; text-align: center; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); margin-top: 18px; }
  .hist-empty b { display: block; font-size: 15px; color: var(--gray-800); margin-bottom: 4px; }
  .hist-empty p { margin: 0 0 14px; font-size: 13px; color: var(--gray-500); }
  .hist-msg { margin-top: 14px; padding: 9px 12px; border-radius: 9px; font-size: 13px; background: var(--gray-100); color: var(--gray-600); }
  .hist-msg.warn { background: var(--amber-50); color: #92400E; }
  .hist-back { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--blue-700); cursor: pointer; }
  .hist-dname { margin: 6px 0 2px; font-size: 16px; font-weight: 600; color: var(--gray-800); overflow-wrap: anywhere; }
  .hist-banner { margin-top: 12px; background: var(--blue-50); border-radius: 9px; padding: 9px 12px; font-size: 13px; color: var(--gray-700); display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: center; }
  .hist-banner small { flex-basis: 100%; font-size: 12px; color: var(--gray-500); }
  .hist-tabs { display: flex; gap: 4px; margin-top: 12px; }
  .hist-tab { padding: 5px 12px; font: inherit; font-size: 13px; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; color: var(--gray-600); cursor: pointer; }
  .hist-tab.active { background: var(--blue-50); border-color: var(--blue-100, #DBEAFE); color: var(--blue-700); font-weight: 600; }
  .hist-box { margin-top: 10px; background: #fff; border: 1px solid var(--gray-200); border-radius: 9px; padding: 12px; min-height: 128px; max-height: 60vh; overflow: auto; font-size: 14px; line-height: 1.8; color: var(--gray-800); white-space: pre-wrap; overflow-wrap: anywhere; }
  .hist-box h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--gray-500); white-space: normal; }
  .hist-box h3:first-child { margin-top: 0; }
  .hist-box .hist-pg { white-space: pre-wrap; }
  .hist-racts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .hist-foot { margin: 8px 0 0; font-size: 12px; color: var(--gray-500); }
  .hist-ov { position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
  .hist-modal { width: 380px; max-width: 100%; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 20px 22px; }
  .hist-modal h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--gray-800); }
  .hist-modal p { margin: 0 0 14px; font-size: 13px; color: var(--gray-600); line-height: 1.7; }
  .hist-modal .hist-acts { justify-content: flex-end; gap: 8px; }
  @media (max-width: 640px) {
    .hist-main { padding: 14px 12px 32px; }
    .hist-main .upload-hero h1 { font-size: 18px; }
    .hist-item { flex-wrap: wrap; padding: 10px 12px; gap: 8px 10px; }
    .hist-tx { flex: 1 1 180px; }
    .hist-exp { order: 3; flex: 1 1 auto; text-align: left; min-width: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
    .hist-exp b { display: inline; }
    .hist-acts { order: 4; }
    .hist-lg { display: none; }
    .hist-sm { display: inline; }
    .hist-box { max-height: none; }
  }
  /* 同じファイルをもう一度選んだとき (2026-11-05): desktop dialog / phone bottom sheet, the restored-result banner */
  .dup-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 400; align-items: center; justify-content: center; padding: 16px; }
  .dup-overlay.active { display: flex; }
  .dup-modal { position: relative; width: 420px; max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 22px 24px 18px; outline: none; }
  .dup-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: var(--gray-400); font-size: 20px; line-height: 1; border-radius: 8px; }
  .dup-x:hover { background: var(--gray-100); color: var(--gray-700); }
  .dup-grip { display: none; }
  .dup-head { display: flex; gap: 14px; align-items: center; padding-right: 18px; }
  .dup-thumb { flex: none; display: block; width: 58px; height: 76px; border-radius: 7px; border: 1px solid var(--gray-200); object-fit: cover; background: repeating-linear-gradient(180deg, #fff 0 7px, var(--gray-200) 7px 8px); }
  .dup-thumb.pdf { position: relative; background: #fff; }
  .dup-thumb.pdf::after { content: "PDF"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; color: var(--gray-500); }
  .dup-t { font-size: 16.5px; line-height: 1.45; font-weight: 700; color: var(--gray-800); }
  .dup-meta { margin-top: 2px; color: var(--gray-500); font-size: 12.5px; }
  .dup-choice { display: block; width: 100%; margin-top: 14px; padding: 10px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; color: #fff; background: var(--blue-600); border: 1px solid var(--blue-600); border-radius: 9px; cursor: pointer; }
  .dup-choice:hover { background: var(--blue-700); border-color: var(--blue-700); }
  .dup-choice small { display: block; font-size: 11.5px; font-weight: 400; opacity: .9; }
  .dup-choice.second { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--gray-700); background: #fff; border-color: var(--gray-200); }
  .dup-choice.second:hover { background: var(--gray-50); border-color: var(--gray-300); }
  .dup-choice.second small { color: var(--gray-500); opacity: 1; }
  .dup-modal button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
  .dup-foot { margin-top: 12px; font-size: 11.5px; color: var(--gray-400); line-height: 1.6; }
  @media (max-width: 640px) {
    .dup-overlay { align-items: flex-end; padding: 0; }
    .dup-modal { width: 100%; max-height: calc(100dvh - 24px); border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
    .dup-grip { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--gray-300); margin: -6px auto 12px; }
    /* the sheet closes on a tap outside (mock); the × stays for screen readers only */
    .dup-x { top: auto; right: auto; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .dup-head { padding-right: 0; }
    .dup-thumb { width: 44px; height: 58px; }
    .dup-t { font-size: 15px; }
  }
  .result-dup-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; background: var(--blue-50); color: var(--gray-700); font-size: 13px; padding: 9px 14px; }
  .result-dup-banner[hidden] { display: none; }
  .result-dup-banner button { border: none; background: none; padding: 0; font: inherit; color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; cursor: pointer; }
  @media (prefers-reduced-motion: reduce) { .bf-bar.indet i { animation: none; width: 100%; opacity: .5; } .bf-bar i { transition: none; } }
  .pack-card.selectable { cursor: pointer; margin: 0; padding: 12px 14px; border: 1.5px solid var(--gray-200); transition: border-color .12s, box-shadow .12s; position: relative; }
  .pack-card.selectable:hover { border-color: var(--blue-600); }
  .pack-card.selectable.selected { border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-50); background: #fff; }
  .pack-card.selectable .pack-header { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 8px; }
  .pack-card.selectable .pack-price { font-size: 20px; }
  .pack-card.selectable .pack-features { margin: 0; font-size: 12.5px; }
  .pack-card.selectable .pack-features li { padding: 2px 0; }
  .pack-tax { font-size: 11px; color: var(--gray-400); font-weight: 400; }
  .pack-card.selectable { display: flex; flex-direction: column; gap: 2px; background: #fff; }
  .pack-card.selectable.selected { background: #F5F9FF; }
  #paywallContent .paywall-submit { width: 100%; }
  .pack-sub .nw { white-space: nowrap; }
  @media (max-width: 560px) {
    .pack-card.selectable { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 0; align-items: center; padding: 10px 12px; }
    .pack-card.selectable .pack-name { grid-column: 1; grid-row: 1; }
    .pack-card.selectable .pack-price { grid-column: 1; grid-row: 2; font-size: 20px; }
    .pack-card.selectable .pack-unit { grid-column: 2; grid-row: 1; text-align: right; }
    .pack-card.selectable .pack-sub { grid-column: 2; grid-row: 2; text-align: right; }
  }
  .pack-card.selectable .pack-name { font-size: 12.5px; color: var(--gray-600); font-weight: 600; }
  .pack-card.selectable .pack-price { font-size: 22px; line-height: 1.25; }
  .pack-card.selectable .pack-unit { font-size: 14px; color: var(--gray-900); }
  .pack-card.selectable .pack-sub { font-size: 11.5px; color: var(--gray-500); }
  .pack-badge { position: absolute; top: -9px; right: 10px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--blue-600); border-radius: 999px; padding: 1px 8px; }
  .pw-trust { list-style: none; padding: 0; margin: 4px 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px; color: var(--gray-700); }
  .pw-trust li { display: flex; align-items: center; gap: 6px; }
  .pw-trust svg { color: var(--green-600); flex-shrink: 0; }
  .pw-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 10px 0 2px; }
  .pw-pay span { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--gray-600); border: 1px solid var(--gray-200); border-radius: 4px; padding: 1px 6px; background: #fff; }
  .pw-foot a { color: var(--gray-500); }
  .pw-email { margin: 4px 0 10px; }
  .pw-label { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
  .pw-label span { font-size: 11.5px; font-weight: 500; color: var(--gray-500); }
  .pw-email .paywall-input { width: 100%; box-sizing: border-box; height: 48px; font-size: 16px; border: 1.5px solid var(--gray-400); border-radius: 10px; padding-left: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") no-repeat 13px center / 18px 18px; }
  .pw-email .paywall-input:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-50); }
  .pw-trust.pw-trust-after { margin: 12px 0 4px; }
  .pw-email .paywall-input.invalid { border-color: var(--red-600); box-shadow: none; }
  @media (max-width: 560px) { .pw-trust { grid-template-columns: 1fr; gap: 4px; } }
  .pack-hint { font-size: 12.5px; color: var(--amber-600); background: var(--amber-50); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.6; }
  @media (max-width: 560px) { .pack-grid { grid-template-columns: 1fr; } }
  .paywall-divider {
    text-align: center; color: var(--gray-400); font-size: 12px;
    margin: 16px 0 12px; position: relative;
  }
  .paywall-divider::before, .paywall-divider::after {
    content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--gray-200);
  }
  .paywall-divider::before { left: 0; }
  .paywall-divider::after { right: 0; }
  .quota-badge.token { background: #DBEAFE; color: var(--blue-600); border: 1px solid #93C5FD; }
  .quota-badge.token::before { content: "🎫 "; }

  /* ── Header menu: on narrow screens the nav links collapse into this dropdown (also in public/blog.html) ── */
  .header-nav .nav-link.active { color: var(--blue-600); }
  .nav-menu-btn { display: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; color: var(--gray-700); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
  .nav-menu-btn svg { width: 20px; height: 20px; }
  .nav-menu-btn[aria-expanded="true"] { background: var(--gray-100); }
  .nav-menu { position: absolute; top: 100%; right: 8px; margin-top: 6px; z-index: 120; min-width: 230px; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; }
  .nav-menu[hidden] { display: none; }
  .nav-mlink { padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--gray-700); }
  .nav-mlink:hover { background: var(--gray-50); }
  .nav-mlink.active { color: var(--blue-600); background: var(--blue-50); }
  .nav-mlink.account { color: var(--blue-600); font-weight: 600; border-top: 1px solid var(--gray-100); border-radius: 0 0 8px 8px; margin-top: 4px; }
  /* the full nav needs ~1130px: tighter below that, and the menu takes over below ~1020px (it used to wrap into two-line links) */
  @media (max-width: 1140px) {
    .header-nav { gap: 12px; font-size: 13px; }
    .header-nav .nav-link, #navAccountLink { white-space: nowrap; }
    #navAccountLink { font-size: 13px !important; }
  }
  @media (max-width: 1020px) {
    .header-nav .nav-link { display: none; }
    .nav-menu-btn { display: inline-flex; }
  }
  @media (min-width: 1021px) { .nav-menu { display: none !important; } }
  @media (max-width: 600px) { #navAccountLink { display: none; } }   /* it moves into the menu; the bar keeps logo + badge + menu */

  /* ═══ /tools/* (文字数カウント・無料ツール一覧): everything below is scoped to main.mc-page or mc-* classes ═══ */
  .mc-page { --mc-gutter: 24px; justify-content: flex-start; padding: 20px var(--mc-gutter) 56px; }
  .mc-page > .upload-hero, .mc-page > .mc, .mc-page > .mc-content { width: 100%; max-width: 1132px; }
  .mc-page.tools-index > .upload-hero, .mc-page.tools-index > .mc-content { max-width: 960px; }
  .mc-page .upload-hero h1 { font-size: 36px; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 14px; }
  .mc-page .upload-hero h1 em { font-style: normal; color: var(--blue-600); }
  .mc-page .upload-hero .subtitle { margin-bottom: 30px; }
  .mc-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 22px; font-size: 13px; color: var(--gray-500); }
  .mc-crumb a { color: var(--blue-600); }
  .mc-crumb a:hover { text-decoration: underline; }
  .mc-crumb span[aria-hidden] { color: var(--gray-400); }
  .mc-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
  .mc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; align-items: start; }
  .mc-editor { overflow: hidden; }
  .mc-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
  .mc-tab { display: flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 8px 14px; border: 1px solid transparent; border-radius: 8px 8px 0 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--gray-500); cursor: pointer; }
  .mc-tab:hover { color: var(--gray-700); }
  .mc-tab.on { background: #fff; color: var(--blue-600); border-color: var(--gray-200); border-bottom-color: #fff; }
  .mc-tab .new, .mc-toolcard .new { font-size: 10px; font-weight: 700; background: var(--amber-50); color: var(--amber-600); padding: 1px 6px; border-radius: 999px; }
  .mc-ocr-done { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 8px 12px; border-radius: 8px; background: var(--green-50); color: var(--green-600); font-size: 13px; font-weight: 500; }
  .mc-ocr-done[hidden] { display: none; }
  .mc-ocr-done > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mc-ocr-done b { color: var(--gray-700); font-weight: 600; }
  .mc-ocr-done .cost { margin-left: 8px; }
  .mc-ocr-done .undo { margin-left: auto; flex: none; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 400; color: var(--gray-500); cursor: pointer; }
  .mc-ocr-done .undo:hover { color: var(--gray-800); text-decoration: underline; }
  .mc-editor textarea { display: block; width: 100%; height: 330px; padding: 14px 18px; border: 0; outline: 0; resize: vertical; background: #fff; font: inherit; font-size: 16px; line-height: 1.9; color: var(--gray-800); }
  .mc-editor textarea::placeholder { color: var(--gray-400); }
  .mc-editor textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-100); }
  .mc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--gray-200); background: var(--gray-50); }
  .mc-bar .sp { flex: 1; }
  .mc-btn { padding: 6px 12px; border: 1px solid var(--gray-300); border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--gray-700); white-space: nowrap; cursor: pointer; }
  .mc-btn:hover { border-color: var(--blue-600); color: var(--blue-600); }
  .mc-btn.primary { padding: 8px 18px; border-color: var(--blue-600); background: var(--blue-600); color: #fff; font-weight: 600; }
  .mc-btn.primary:hover { background: var(--blue-700); color: #fff; }
  .mc-btn.lg { padding: 11px 22px; font-size: 15px; }
  .mc-target { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); }
  .mc-target input { width: 76px; padding: 5px 8px; border: 1px solid var(--gray-300); border-radius: 6px; background: #fff; font: inherit; font-size: 13px; text-align: right; }
  .mc-target b { min-width: 3em; color: var(--gray-700); }
  .mc-prog { width: 120px; height: 6px; border-radius: 4px; background: var(--gray-200); overflow: hidden; }
  .mc-prog i { display: block; width: 0; height: 100%; background: var(--blue-600); transition: width .15s; }
  .mc-prog i.done { background: var(--green-600); }
  .mc-pane-ocr { padding: 16px; }
  .mc-drop { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px dashed var(--gray-300); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
  .mc-drop:hover, .mc-drop.dragover, .mc-drop:focus-visible { border-color: var(--blue-600); background: var(--blue-50); outline: none; }
  .mc-drop .ic { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-50); color: var(--blue-600); }
  .mc-drop .ic svg { width: 22px; height: 22px; }
  .mc-drop .h { font-size: 14px; font-weight: 700; color: var(--gray-800); }
  .mc-drop .tx p:not(.h) { font-size: 12.5px; line-height: 1.6; color: var(--gray-500); }
  .mc-drop .fmt { margin-top: 2px; }
  .mc-drop .fmt span { margin-right: 3px; padding: 1px 6px; border-radius: 4px; background: var(--gray-100); font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--gray-600); }
  .mc-drop .mc-btn { flex: none; margin-left: auto; }
  .mc-ocr-note { display: none; margin-top: 10px; font-size: 12px; color: var(--gray-500); }
  .mc-pdfpick { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--blue-100); border-radius: 10px; background: var(--blue-50); font-size: 13.5px; color: var(--gray-700); }
  .mc-pdfpick[hidden] { display: none; }
  .mc-pdfpick .h { margin-bottom: 8px; font-weight: 600; overflow-wrap: anywhere; }
  .mc-pdfpick .h span { margin-left: 6px; font-weight: 400; color: var(--gray-500); }
  .mc-pdfpick .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .mc-pdfpick input { width: 130px; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: 6px; background: #fff; font: inherit; font-size: 14px; }
  .mc-pdfpick .note { margin-top: 8px; font-size: 12px; color: var(--gray-500); }
  /* 画像・PDFから数える tab: the drop zone becomes the main area */
  .mc-editor.ocr #mcPaneText { display: none; }
  .mc-editor.ocr .mc-drop { flex-direction: column; justify-content: center; gap: 12px; min-height: 300px; padding: 36px 24px; text-align: center; }
  .mc-editor.ocr .mc-drop .ic { width: 64px; height: 64px; }
  .mc-editor.ocr .mc-drop .ic svg { width: 30px; height: 30px; }
  .mc-editor.ocr .mc-drop .h { font-size: 17px; margin-bottom: 4px; }
  .mc-editor.ocr .mc-drop .tx p:not(.h) { font-size: 13.5px; }
  .mc-editor.ocr .mc-drop .mc-btn { margin-left: 0; padding: 10px 28px; font-size: 15px; }
  .mc-editor.ocr .mc-ocr-note { display: block; }
  .mc-stats { padding: 18px; }
  .mc-stats button { font: inherit; color: inherit; text-align: left; cursor: pointer; }
  .mc-big { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 4px 0 14px; border: 0; border-bottom: 1px solid var(--gray-200); background: none; }
  .mc-big .lbl { font-size: 13px; font-weight: 600; color: var(--gray-500); }
  .mc-big .num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--blue-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mc-big .num small { margin-left: 4px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--gray-500); }
  .mc-big:hover .num { color: var(--blue-700); }
  .mc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .mc-stats .st { display: block; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--gray-100); border-radius: 8px; background: var(--gray-50); }
  .mc-stats .st:hover { border-color: var(--blue-100); background: var(--blue-50); }
  .mc-stats .st .k { display: block; font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-stats .st .v { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--gray-800); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-stats .st .v small { margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--gray-500); }
  .mc-stats .st .ng { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--amber-600); white-space: normal; line-height: 1.35; }
  .mc-stats .countnote { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--gray-400); }
  .mc-stats .copyhint { margin-top: 6px; font-size: 11px; text-align: right; color: var(--gray-400); }
  .mc-stats .sub-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--gray-700); }
  .mc-stats .sub-h span { font-size: 11.5px; font-weight: 400; color: var(--gray-400); text-align: right; }
  .mc-stats .mix { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--gray-100); }
  .mc-stats .mix i { display: block; height: 100%; }
  .mc-stats .legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--gray-600); }
  .mc-stats .legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
  .mc-stats .gauge { margin-bottom: 9px; }
  .mc-stats .gauge .row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--gray-600); }
  .mc-stats .gauge .row > span:last-child { white-space: nowrap; }
  .mc-stats .gauge .row small { margin-left: 4px; font-size: 11px; color: var(--gray-400); }
  .mc-stats .gauge .row b { font-weight: 600; color: var(--gray-800); }
  .mc-stats .gauge .gs { margin-left: 2px; }
  .mc-stats .gauge .ok { color: var(--green-600); }
  .mc-stats .gauge .ng { color: var(--red-600); }
  .mc-stats .gauge .tr { height: 6px; margin-top: 3px; border-radius: 4px; background: var(--gray-100); overflow: hidden; }
  .mc-stats .gauge .tr i { display: block; height: 100%; border-radius: 4px; background: var(--green-600); }
  .mc-stats .gauge.over .tr i { background: var(--red-600); }
  .mc-mini { display: none; }
  .mc-content { display: flex; flex-direction: column; gap: 44px; margin-top: 40px; text-align: left; }
  .mc-content h2 { margin: 0 0 16px; font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--gray-800); }
  .mc-content a:not(.mc-link):not(.mc-toolcard) { color: var(--blue-600); text-decoration: underline; }
  .mc-funnel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; padding: 24px 28px; background: linear-gradient(135deg, #EFF6FF, #fff); }
  .mc-funnel h2 { margin-bottom: 8px; }
  .mc-funnel p { font-size: 15px; line-height: 1.9; color: var(--gray-600); }
  .mc-funnel ul { margin: 12px 0 16px 1.2em; font-size: 14px; line-height: 2; color: var(--gray-600); }
  .mc-paper { position: relative; padding: 14px; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); }
  .mc-paper .ph { height: 150px; padding: 12px 14px; border: 1px solid #EEE7D2; border-radius: 6px; background: #FDFCF7; font-family: "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif; font-size: 12px; line-height: 1.9; color: #444; overflow: hidden; transform: rotate(-1.2deg); }
  .mc-paper .res { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13px; color: var(--gray-600); }
  .mc-paper .res b { font-size: 20px; color: var(--blue-600); }
  .mc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .mc-step { padding: 18px; }
  .mc-step .n { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; background: var(--blue-600); font-size: 14px; font-weight: 700; color: #fff; }
  .mc-step h3 { margin: 0 0 4px; font-size: 15px; color: var(--gray-800); }
  .mc-step p { font-size: 13.5px; line-height: 1.75; color: var(--gray-600); }
  .mc-table { border: 1px solid var(--gray-200); border-radius: var(--radius); background: #fff; overflow-x: auto; }
  .mc-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
  .mc-table th { padding: 10px 14px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); font-size: 13px; font-weight: 600; text-align: left; color: var(--gray-600); }
  .mc-table td { padding: 10px 14px; border-top: 1px solid var(--gray-100); color: var(--gray-700); vertical-align: top; }
  .mc-faq { margin-bottom: 10px; border: 1px solid var(--gray-200); border-radius: var(--radius); background: #fff; }
  .mc-faq summary { padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--gray-800); list-style: none; cursor: pointer; }
  .mc-faq summary::-webkit-details-marker { display: none; }
  .mc-faq summary .q { margin-right: 4px; color: var(--blue-600); }
  .mc-faq p { padding: 0 18px 14px; font-size: 14px; line-height: 1.85; color: var(--gray-600); }
  .mc-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .mc-link { display: block; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; }
  .mc-link:hover, .mc-toolcard:hover { border-color: var(--blue-600); box-shadow: var(--shadow-md); }
  .mc-link b { display: block; font-size: 14px; color: var(--gray-800); }
  .mc-link span { display: block; margin-top: 2px; font-size: 12px; color: var(--gray-500); }
  .mc-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mc-toolcard { display: block; padding: 20px 22px; }
  .mc-toolcard b { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 17px; color: var(--gray-800); }
  .mc-toolcard > span { font-size: 14px; line-height: 1.8; color: var(--gray-600); }
  .mc-lead { margin: -6px 0 14px; font-size: 14px; color: var(--gray-600); }
  .tools-index .mc-links { grid-template-columns: repeat(3, 1fr); }
  .mc-page.tools-index .upload-hero .subtitle { margin-bottom: 0; }
  @media (max-width: 900px) {
    .mc-grid { grid-template-columns: 1fr; }
    .mc-links, .tools-index .mc-links { grid-template-columns: repeat(2, 1fr); }
    /* the stats are below the editor now: a sticky mini bar keeps the three main numbers in view */
    .mc-mini { position: sticky; top: 56px; z-index: 50; display: flex; align-items: baseline; gap: 14px; margin: 0 calc(-1 * var(--mc-gutter)) 10px; padding: 8px var(--mc-gutter); border-bottom: 1px solid var(--gray-200); background: #fff; font-size: 12px; color: var(--gray-500); }
    .mc-mini b { font-size: 18px; color: var(--blue-600); font-variant-numeric: tabular-nums; }
    .mc-mini .m2 b { font-size: 14px; color: var(--gray-800); }
  }
  @media (max-width: 600px) {
    .mc-page { --mc-gutter: 16px; padding-top: 14px; padding-bottom: 40px; }
    .mc-page .upload-hero h1 { font-size: 26px; }
    .mc-page .upload-hero .subtitle { margin-bottom: 18px; }
    .mc-crumb { margin-bottom: 14px; }
    .mc-grid { gap: 14px; }
    .mc-tabs { padding: 8px 8px 0; }
    .mc-tabs { gap: 2px; }
    .mc-tab { gap: 4px; padding: 7px 8px; font-size: 12.5px; white-space: nowrap; }
    .mc-tab .new { font-size: 9.5px; padding: 1px 5px; }
    .mc-editor textarea { height: 260px; padding: 12px 14px; font-size: 15px; }
    .mc-bar { padding: 10px 12px; }
    .mc-bar .sp { display: none; }
    .mc-target { width: 100%; }
    .mc-prog { flex: 1; }
    .mc-pane-ocr { padding: 12px; }
    .mc-drop { flex-direction: column; align-items: flex-start; }
    .mc-drop .mc-btn { width: 100%; margin-left: 0; }
    .mc-editor.ocr .mc-drop { align-items: center; min-height: 0; }
    .mc-big .num { font-size: 38px; }
    .mc-ocr-done { margin: 10px 12px 0; font-size: 12px; }
    .mc-ocr-done .cost { display: none; }
    .mc-content { gap: 36px; margin-top: 32px; }
    .mc-content h2 { font-size: 19px; }
    .mc-steps, .mc-tools { grid-template-columns: 1fr; }
    .mc-funnel { grid-template-columns: 1fr; padding: 20px 16px; }
    .mc-faq summary { padding: 12px 14px; font-size: 14px; }
    .mc-faq p { padding: 0 14px 12px; }
  }

  /* ── Footer ── */
  .footer {
    padding: 16px 24px; text-align: center; font-size: 12px;
    color: var(--gray-400); border-top: 1px solid var(--gray-100); background: #fff;
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .upload-hero h1 { font-size: 26px; }
    .upload-hero .subtitle { font-size: 14px; }
    .dropzone { padding: 32px 20px; }
    .features { flex-direction: column; gap: 16px; }
    .result-main { flex-direction: column; }
    .image-pane { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
    .result-pane { flex: 1; min-height: 0; }
    .result-actions { padding: 12px 16px; }
    .action-btn { padding: 8px 12px; font-size: 13px; }
    .rerun-bar { padding: 0 16px 8px; }
    .view-tabs { padding: 10px 16px 0; }
    .header-nav .nav-link { display: none; }
    .header { padding: 0 12px; gap: 8px; }
    .header-logo { font-size: 18px; gap: 6px; flex-shrink: 0; white-space: nowrap; }
    .header-logo svg { width: 24px; height: 24px; }
    .header-nav { gap: 10px; min-width: 0; }
    #navAccountLink { font-size: 13px !important; white-space: nowrap; }
    .quota-badge { white-space: nowrap; }
    .result-status { font-size: 12px; gap: 6px; }
  }

  /* ═══ PDF（複数ページ）ページ選択ビュー — photo-picker layout: sticky header + tool chips, page grid, fixed bottom action bar ═══ */
  #page-pdf { min-height: 100vh; background: var(--gray-50); }
  .pdf-hdr { position: sticky; top: 56px; z-index: 20; background: #fff; border-bottom: 1px solid var(--gray-200); }
  .pdf-hdr-in { display: flex; align-items: center; gap: 12px; padding: 10px 16px; max-width: 1280px; margin: 0 auto; }
  .pdf-back { border: 0; background: none; color: var(--gray-500); font-size: 13px; cursor: pointer; padding: 4px 0; white-space: nowrap; }
  .pdf-back:hover { color: var(--gray-700); }
  .pdf-doc { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
  .pdf-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
  .pdf-meta { color: var(--gray-500); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pdf-tools { position: sticky; top: 101px; z-index: 19; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
  .pdf-tools-in { display: flex; gap: 8px; align-items: center; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; max-width: 1280px; margin: 0 auto; }
  .pdf-tools-in::-webkit-scrollbar { display: none; }
  .pdf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; font-size: 13px; white-space: nowrap; cursor: pointer; color: var(--gray-700); }
  .pdf-chip:hover { border-color: var(--blue-600); }
  .pdf-chip.active { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-600); }
  .pdf-chip small { color: var(--gray-500); }
  .pdf-range { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; padding: 2px 4px 2px 12px; }
  .pdf-range input { border: 0; background: transparent; width: 120px; font-size: 13px; outline: none; color: var(--gray-800); }
  .pdf-range button { border: 0; background: var(--blue-600); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
  .pdf-counter { margin-left: auto; color: var(--gray-500); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pdf-grid-wrap { padding: 14px 16px 110px; max-width: 1280px; margin: 0 auto; }
  .pdf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; user-select: none; -webkit-user-select: none; }
  .pdf-tile { position: relative; border-radius: 10px; background: #fff; border: 1.5px solid var(--gray-200); padding: 6px; cursor: pointer; transition: border-color .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
  .pdf-tile:hover { border-color: var(--blue-600); }
  .pdf-tile.sel { border-color: var(--blue-600); background: var(--blue-50); }
  .pdf-tile.queued { border-style: dashed; border-color: var(--blue-600); }
  .pdf-tile.busy { border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-50); }
  .pdf-tile.fail { border-color: var(--red-600); }
  .pdf-tile.ai-done { border-color: var(--blue-600); }
  .pdf-tile canvas, .pdf-tile .ph { display: block; width: 100%; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
  .pdf-tile canvas { height: auto; }
  .pdf-tile .ph { aspect-ratio: 1 / 1.41; }
  .pdf-tile .ph { background: linear-gradient(180deg, var(--gray-100), var(--gray-200)); }
  .pdf-tile .num { position: absolute; left: 10px; top: 10px; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(17,24,39,.72); color: #fff; font-variant-numeric: tabular-nums; }
  .pdf-tile .chk { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--gray-400); background: rgba(255,255,255,.95); display: grid; place-items: center; font-size: 13px; color: #fff; }
  .pdf-tile.sel .chk { background: var(--blue-600); border-color: var(--blue-600); }
  .pdf-tile.done .chk { display: none; }
  .pdf-tile .st { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font-size: 11.5px; min-height: 18px; color: var(--gray-500); }
  .pdf-tile.done .st { color: var(--green-600); font-weight: 500; }
  .pdf-tile.fail .st { color: var(--red-600); font-weight: 500; }
  .pdf-tile.busy .st, .pdf-tile.queued .st { color: var(--blue-600); }
  .pdf-tile .ai { font-size: 10px; padding: 0 5px; border-radius: 999px; background: var(--blue-600); color: #fff; font-weight: 500; line-height: 16px; }
  .pdf-tile.flash { animation: pdfpop .5s ease; }
  @keyframes pdfpop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
  .pdf-peek { position: fixed; z-index: 240; pointer-events: none; display: none; background: #fff; padding: 8px; border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); }
  .pdf-peek.on { display: block; }
  .pdf-peek canvas { display: block; width: 300px; max-width: 80vw; height: auto; background: #fff; border-radius: 6px; }
  .pdf-peek .cap { font-size: 12px; color: var(--gray-500); text-align: center; margin-top: 6px; }
  .pdf-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: #fff; border-top: 1px solid var(--gray-200); box-shadow: 0 -6px 24px rgba(16,24,40,.08); padding: 10px 16px; display: none; }
  #page-pdf.active ~ .pdf-bar, #page-pdf.active .pdf-bar { display: block; }
  .pdf-bar-in { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .pdf-bar .lead { flex: 1 1 240px; min-width: 0; font-size: 13.5px; }
  .pdf-bar .lead strong { font-variant-numeric: tabular-nums; }
  .pdf-bar .lead .sub { color: var(--gray-500); font-size: 12px; }
  .pdf-bar .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .pdf-bar .acts.export { flex-basis: 100%; justify-content: flex-end; border-top: 1px dashed var(--gray-200); padding-top: 8px; margin-top: 2px; }
  .pdf-bar .hint { font-size: 12px; color: var(--gray-500); }
  .pdf-bar.warnst { border-top-color: var(--amber-600); background: var(--amber-50); }
  .pdf-bar.badst { border-top-color: var(--red-600); background: var(--red-50); }
  .pdf-bar.okst { border-top-color: var(--green-600); }
  .pdf-prog { height: 4px; background: var(--gray-200); border-radius: 2px; overflow: hidden; margin-top: 8px; width: 100%; }
  .pdf-prog i { display: block; height: 100%; background: var(--blue-600); width: 0; transition: width .3s; }
  .pdf-quick { display: flex; gap: 8px; flex-wrap: wrap; }
  .pdf-scrim { position: fixed; inset: 0; background: rgba(10,14,24,.45); z-index: 250; display: none; }
  .pdf-scrim.on { display: block; }
  .pdf-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: #fff; z-index: 251; transform: translateX(104%); transition: transform .22s ease; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
  .pdf-drawer.on { transform: none; }
  .pdf-d-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); }
  .pdf-d-h .t { font-weight: 700; flex: 1; }
  .pdf-d-h .nav { display: flex; gap: 4px; }
  .pdf-d-b { flex: 1; min-height: 0; overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .pdf-d-b canvas { width: 100%; height: auto; background: #fff; border-radius: 8px; border: 1px solid var(--gray-200); display: block; }
  .pdf-d-img { position: relative; flex: 0 0 auto; height: 44%; border-radius: 8px; border: 1px solid var(--gray-200); overflow: hidden; background: var(--gray-100); }
  .pdf-d-side { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }   /* tabs / state / lines / text: below the page, or beside it on wide screens */
  .pdf-d-grip { display: none; }
  .pdf-d-scroll { height: 100%; overflow: auto; cursor: grab; overscroll-behavior: contain; touch-action: pan-x pan-y; }
  .pdf-d-scroll.dragging { cursor: grabbing; user-select: none; }
  .pdf-d-zoom { position: relative; width: 100%; }
  .pdf-d-img canvas { border: 0; border-radius: 0; width: 100%; height: auto; display: block; }
  .pdf-zoom-ctl { position: absolute; right: 8px; top: 8px; display: flex; gap: 2px; background: rgba(255,255,255,.95); border: 1px solid var(--gray-200); border-radius: 8px; padding: 2px; box-shadow: var(--shadow-sm); }
  .pdf-zoom-ctl button { border: 0; background: transparent; font-size: 14px; min-width: 28px; height: 26px; border-radius: 6px; cursor: pointer; color: var(--gray-700); font-variant-numeric: tabular-nums; }
  .pdf-zoom-ctl button:hover { background: var(--gray-100); }
  #pdfZoomPct { font-size: 12px; padding: 0 6px; }
  .pdf-ov { position: absolute; inset: 0; pointer-events: none; }
  .pdf-ov-b { position: absolute; border: 1.5px solid rgba(37,99,235,.65); background: rgba(37,99,235,.07); border-radius: 2px; pointer-events: auto; cursor: pointer; }
  .pdf-ov-b.ai { border-color: var(--green-600); background: rgba(22,163,74,.07); }   /* 高精度 text aligned to the first pass's boxes (before .hl so the hover look wins) */
  .pdf-ov-b.hl { background: rgba(250,204,21,.45); border-color: #EAB308; border-width: 2px; box-shadow: 0 0 0 2px rgba(250,204,21,.35); z-index: 1; }
  .pdf-lines { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.75; border: 1px solid var(--gray-200); border-radius: 8px; padding: 6px; }
  .pdf-lines[hidden] { display: none; }
  .pdf-line { padding: 2px 6px; border-radius: 4px; cursor: default; }
  .pdf-line.hl { background: #FEF3C7; box-shadow: inset 3px 0 0 #EAB308; }
  .pdf-ov-toggle { margin-left: auto; font-size: 12px; color: var(--gray-500); border: 1px solid var(--gray-200); background: #fff; border-radius: 999px; padding: 3px 9px; cursor: pointer; }
  .pdf-ov-toggle.on { color: var(--blue-600); border-color: var(--blue-600); }
  .pdf-ov-toggle.hidden { display: none; }
  .pdf-vt { display: flex; gap: 6px; }
  .pdf-vt:empty { display: none; }
  .pdf-vt button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; font-size: 12.5px; cursor: pointer; }
  .pdf-vt button.on { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
  .pdf-d-b textarea { width: 100%; flex: 1 1 auto; min-height: 120px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px; font-size: 14px; line-height: 1.9; resize: none; background: var(--gray-50); color: var(--gray-800); font-family: inherit; }
  /* ≥ 1024px: the drawer takes ~2/3 of the window (width dragged from its left edge, --pdf-dw) and the page sits
     beside its text; the overlay boxes are in % of the page, so they follow any width without a re-layout */
  @media (min-width: 1024px) {
    .pdf-drawer { width: clamp(560px, var(--pdf-dw, 66.7vw), calc(100vw - 120px)); }
    .pdf-d-b { flex-direction: row; gap: 12px; }
    .pdf-d-img { flex: 1.25 1 0; height: auto; min-width: 0; }
    .pdf-d-side { flex: 1 1 0; }
    .pdf-d-grip { display: block; position: absolute; left: -6px; top: 0; bottom: 0; width: 12px; cursor: ew-resize; z-index: 2; touch-action: none; }
    .pdf-d-grip::after { content: ''; position: absolute; left: 4px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 3px; background: var(--gray-300); opacity: 0; transition: opacity .15s; }
    .pdf-d-grip:hover::after, .pdf-d-grip.dragging::after { opacity: 1; }
    body.pdf-d-resizing { cursor: ew-resize; user-select: none; }
  }
  .pdf-d-f { padding: 10px 14px; border-top: 1px solid var(--gray-200); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .pdf-cost { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--amber-50); color: var(--amber-600); font-weight: 500; }
  .pdf-badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--green-50); color: var(--green-600); font-weight: 500; }
  .pdf-badge.warn { background: var(--amber-50); color: var(--amber-600); }
  .pdf-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--gray-200); border-top-color: var(--blue-600); animation: pwspin 0.8s linear infinite; display: inline-block; }
  /* one-time guide after the first finished multi-page job: scrim (below the drawer's 250/251, above the bar/peek),
     the first done tile lifted above it as a spotlight, and a callout card pointing at that tile (bottom sheet on phones) */
  .pdf-guide-scrim { position: fixed; inset: 0; z-index: 245; background: rgba(15,23,42,.55); animation: pdfgfade .16s ease; }
  .pdf-tile.pdf-spot { z-index: 246; border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-600), 0 0 0 9px rgba(37,99,235,.22), 0 12px 32px rgba(15,23,42,.35); }
  .pdf-guide { position: fixed; left: 0; top: 0; z-index: 247; width: 324px; max-width: calc(100vw - 32px); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(15,23,42,.06); padding: 16px 18px 14px; animation: pdfgfade .16s ease; }
  .pdf-guide .t { font-size: 15.5px; font-weight: 700; color: var(--gray-800); margin-bottom: 6px; }
  .pdf-guide p { font-size: 13.5px; line-height: 1.75; color: var(--gray-600); }
  .pdf-guide .acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 14px; }
  .pdf-guide .later { border: 0; background: none; color: var(--gray-500); font-size: 13.5px; font-family: inherit; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
  .pdf-guide .later:hover { color: var(--gray-700); background: var(--gray-100); }
  .pdf-guide .ptr { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
  .pdf-guide[data-side="right"] .ptr { left: -6px; }
  .pdf-guide[data-side="below"] .ptr { top: -6px; }
  .pdf-guide[data-side="above"] .ptr { bottom: -6px; }
  .pdf-guide[data-side="sheet"] { top: auto; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .pdf-guide[data-side="sheet"] .ptr { display: none; }
  .pdf-guide[data-side="sheet"] .acts { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .pdf-guide[data-side="sheet"] .action-btn { justify-content: center; padding: 11px 16px; font-size: 14.5px; }
  @keyframes pdfgfade { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .pdf-guide-scrim, .pdf-guide { animation: none; } .pdf-tile.pdf-spot { transition: none; } }
  @media (max-width: 640px) {
    .pdf-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .pdf-drawer { width: 100vw; }
    .pdf-name { max-width: 40vw; }
  }

  /* ═══ サポート（右下の質問ボタン + パネル） ═══ */
  /* Bottom-left, away from the PDF action bar's primary button (bottom-right). */
  .sup-bubble {
    position: fixed; left: 16px; bottom: 16px; z-index: 190;
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px;
    border: 0; border-radius: 999px; background: var(--blue-600); color: #fff; font-size: 14px; font-weight: 600;
    box-shadow: var(--shadow-lg); cursor: pointer; transition: transform .12s, background .12s;
  }
  .sup-bubble:hover { background: var(--blue-700); transform: translateY(-1px); }
  .sup-bubble svg { width: 18px; height: 18px; }
  #page-pdf.active ~ .sup-bubble { bottom: var(--sup-bottom, 112px); }   /* above the PDF action bar (height set by pdfRenderBar) */
  .sup-panel {
    position: fixed; left: 16px; bottom: 76px; z-index: 211; width: min(380px, calc(100vw - 32px));
    max-height: min(560px, calc(100dvh - 100px)); display: none; flex-direction: column;
    background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
  }
  .sup-panel.on { display: flex; }
  #page-pdf.active ~ .sup-panel { bottom: calc(var(--sup-bottom, 112px) + 60px); max-height: calc(100dvh - var(--sup-bottom, 112px) - 76px); }
  .sup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
  .sup-title { font-weight: 700; font-size: 14px; }
  .sup-sub { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; }
  .sup-close { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--gray-400); cursor: pointer; padding: 0 2px; }
  .sup-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
  .sup-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
  .sup-msg.bot { background: var(--gray-100); color: var(--gray-800); border-bottom-left-radius: 4px; align-self: flex-start; }
  .sup-msg.user { background: var(--blue-600); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
  .sup-msg a { color: var(--blue-600); }
  .sup-msg.thinking { color: var(--gray-500); display: inline-flex; align-items: center; gap: 6px; }
  .sup-quick { display: flex; flex-wrap: wrap; gap: 6px; }
  .sup-quick button { border: 1px solid var(--gray-200); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; color: var(--gray-700); cursor: pointer; }
  .sup-quick button:hover { border-color: var(--blue-600); color: var(--blue-600); }
  .sup-sep { align-self: center; font-size: 11px; color: var(--gray-400); padding: 2px 8px; border-top: 1px dashed var(--gray-200); width: 100%; text-align: center; }
  .sup-escalate { align-self: flex-start; display: flex; gap: 6px; flex-wrap: wrap; }
  .sup-escalate button { border: 1px solid var(--blue-600); background: var(--blue-50); color: var(--blue-600); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
  .sup-input { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--gray-200); }
  .sup-input input { flex: 1; min-width: 0; border: 1px solid var(--gray-300); border-radius: 10px; padding: 9px 11px; font-size: 14px; }
  .sup-send { border: 0; border-radius: 10px; background: var(--blue-600); color: #fff; padding: 0 14px; font-size: 13px; cursor: pointer; }
  .sup-send:disabled { opacity: .55; cursor: default; }
  .sup-foot { display: flex; gap: 6px; align-items: center; padding: 6px 14px 10px; font-size: 11.5px; color: var(--gray-500); }
  .sup-link { border: 0; background: none; color: var(--blue-600); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
  .sup-contact { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--gray-50); border-radius: 12px; align-self: stretch; }
  .sup-contact input, .sup-contact textarea { border: 1px solid var(--gray-300); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
  .sup-contact textarea { min-height: 70px; resize: vertical; }
  .sup-contact .row { display: flex; gap: 6px; justify-content: flex-end; }
  @media (max-width: 640px) {
    .sup-bubble span { display: none; }
    .sup-bubble { padding: 12px; }
    /* On a phone the PDF bar's buttons start at the left edge, so the bubble goes right and higher. */
    #page-pdf.active ~ .sup-bubble { left: auto; right: 16px; bottom: calc(var(--sup-bottom, 112px) + 16px); }
    /* the result page's コピー starts at the left edge too (11-05: the bubble sat on it) */
    #page-result.active ~ .sup-bubble { left: auto; right: 16px; }
    .sup-panel { right: 8px; left: 8px; width: auto; bottom: 72px; max-height: calc(100dvh - 90px); }
    #page-pdf.active ~ .sup-panel { bottom: calc(var(--sup-bottom, 112px) + 56px); max-height: calc(100dvh - var(--sup-bottom, 112px) - 70px); }
  }

  /* ═══ 音声文字起こし（page-audio: file card, result rows, bottom bar = .pdf-bar） ═══ */
  #page-audio { min-height: 100vh; background: var(--gray-50); }
  #page-audio.active .pdf-bar { display: block; }
  #page-audio .pdf-bar.au-off { display: none; }
  /* /mojiokoshi: the landing mount is a plain div inside the flex column main, so it centres its own children */
  #audioLanding { display: flex; flex-direction: column; align-items: center; width: 100%; }
  /* /qr: QR reader mount (decoding stays in the browser) */
  #qrLanding { display: flex; flex-direction: column; align-items: center; width: 100%; }
  #qrLanding [hidden] { display: none !important; }
  .qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; max-width: 600px; }
  .qr-btn { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-300); border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
  .qr-btn:hover { border-color: var(--blue-600); color: var(--blue-600); background: var(--blue-50); }
  .qr-cam { margin-top: 16px; width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .qr-cam video { width: 100%; border-radius: var(--radius); background: #000; }
  .qr-status { margin-top: 16px; min-height: 20px; max-width: 600px; font-size: 14px; color: var(--gray-500); text-align: center; }
  .qr-status.ok { color: var(--green-600); font-weight: 600; }
  .qr-status.error { color: var(--red-600); }
  .qr-results { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
  .qr-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 14px 16px; text-align: left; }
  .qr-card-head { font-size: 12px; font-weight: 600; color: var(--blue-600); margin-bottom: 6px; }
  .qr-domain { font-size: 14px; color: var(--gray-700); margin-bottom: 6px; word-break: break-all; }
  .qr-warn { margin: 0 0 8px; padding: 8px 10px 8px 28px; background: var(--amber-50); border-radius: 6px; color: var(--amber-600); font-size: 13px; }
  .qr-fields { margin-bottom: 8px; font-size: 14px; color: var(--gray-700); }
  .qr-fields div { margin-bottom: 2px; word-break: break-all; }
  .qr-fields span { color: var(--gray-500); margin-right: 8px; }
  .qr-raw { margin: 0; padding: 8px 10px; max-height: 240px; overflow: auto; background: var(--gray-50); border-radius: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--gray-800); white-space: pre-wrap; word-break: break-all; }
  .qr-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .qr-card-actions .browse-btn { font-size: 14px; padding: 8px 20px; text-decoration: none; }
  /* reading: a full overlay inside the drop zone, not just the small status line */
  #qrDrop { position: relative; }
  #qrDrop.qr-busy { border-style: solid; border-color: var(--blue-600); cursor: progress; }
  .qr-busy-overlay { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--blue-50); border-radius: var(--radius); }
  #qrDrop.qr-busy .qr-busy-overlay { display: flex; }
  .qr-busy-text { font-size: 17px; font-weight: 600; color: var(--blue-700); }
  .qr-busy-track { width: 60%; max-width: 280px; height: 6px; border-radius: 3px; background: var(--blue-100); overflow: hidden; }
  .qr-busy-bar { width: 0; height: 100%; background: var(--blue-600); transition: width 0.2s ease; }
  .au-wrap { max-width: 880px; margin: 0 auto; padding: 16px 16px 150px; display: flex; flex-direction: column; gap: 14px; }
  .au-wrap > [hidden] { display: none; }
  #auEmpty .dropzone { margin: 8px auto 0; }
  .au-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px; min-width: 0; }
  .au-file { display: flex; gap: 12px; align-items: center; }
  .au-file .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-50); color: var(--blue-600); display: grid; place-items: center; flex-shrink: 0; }
  .au-file .ic svg { width: 22px; height: 22px; }
  .au-file .nm { font-weight: 600; overflow-wrap: anywhere; }
  .au-file .mt { font-size: 12.5px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
  .au-cost { margin-top: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
  .au-note { font-size: 12px; color: var(--gray-500); line-height: 1.6; }
  .au-gl { margin-top: 12px; }
  .au-gl label, .au-gl summary { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; }
  .au-gl summary { cursor: pointer; list-style: revert; display: list-item; }
  .au-warn { margin-top: 6px; font-size: 12.5px; color: #B45309; background: var(--amber-50, #FFFBEB); border: 1px solid #FDE68A; border-radius: 8px; padding: 6px 10px; line-height: 1.6; }
  .au-ok { margin-top: 4px; font-size: 12.5px; color: #15803D; font-weight: 500; }
  .au-cta { border: 1.5px solid var(--blue-600); background: var(--blue-50); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
  .au-cta[hidden] { display: none; }
  .au-cta .t { font-size: 13.5px; font-weight: 700; color: var(--gray-800); }
  .au-cta .d { font-size: 12px; color: var(--gray-600); margin-top: 2px; line-height: 1.6; }
  .au-cta .action-btn { margin-top: 8px; width: 100%; justify-content: center; }
  .au-gl textarea { width: 100%; border: 1px solid var(--gray-300); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; resize: vertical; min-height: 44px; }
  .au-segs-h { margin-top: 12px; font-size: 12.5px; color: var(--gray-600); font-variant-numeric: tabular-nums; }
  .au-segs { display: flex; gap: 2px; margin-top: 6px; }
  .au-segs i { flex: 1 1 0; min-width: 2px; height: 8px; border-radius: 2px; background: var(--gray-200); }
  .au-segs i.done { background: var(--green-600); }
  .au-segs i.running { background: var(--blue-600); animation: aupulse 1s ease-in-out infinite alternate; }
  .au-segs i.failed { background: var(--red-600); }
  @keyframes aupulse { from { opacity: .45; } to { opacity: 1; } }
  /* the next step inside the file card (the bottom bar is far away on wide screens) */
  .au-next { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-100); }
  .au-next:empty { display: none; }
  .au-next-h { font-size: 14px; line-height: 1.6; color: var(--gray-700); }
  .au-next-h .ok { color: var(--green-600); font-weight: 600; margin-right: 8px; white-space: nowrap; }
  .au-next-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .au-next-acts:empty { display: none; }
  .au-link { border: 0; background: none; padding: 0; font: inherit; color: var(--blue-600); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
  .au-free { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--green-600); background: var(--green-50); border-radius: 999px; padding: 3px 12px; }
  .au-recent { width: 100%; max-width: 600px; margin: 18px auto 0; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 12px 14px; }
  .au-recent-h { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
  .au-recent .au-priv { margin: 10px 0 6px; }
  .au-recent-it { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--gray-100); flex-wrap: wrap; }
  .au-recent-tx { flex: 1 1 180px; min-width: 0; }
  .au-recent-tx .nm { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .au-recent-tx .mt { font-size: 12px; color: var(--gray-500); }
  .au-recent-bt { display: flex; gap: 6px; }
  /* the player sticks under the two headers while the transcript scrolls, so
     timestamps / highlight stay usable on long recordings */
  .au-player { position: sticky; top: 101px; z-index: 18; background: #fff; margin: -16px -16px 10px; padding: 12px 16px 6px; border-bottom: 1px solid var(--gray-100); border-radius: var(--radius) var(--radius) 0 0; }
  .au-player audio { width: 100%; display: block; }
  .au-player audio[hidden] { display: none; }
  .au-player .au-note { margin-top: 4px; }
  .au-priv { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--green-50); border: 1px solid #BBF7D0; color: #15803D; font-size: 12px; line-height: 1.6; }
  .au-reattach { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .au-res-h { margin-top: 12px; font-size: 14px; }
  .au-spks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
  .au-spks:empty { display: none; }
  .au-chip { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; cursor: text; }
  .au-chip input { border: 0; background: transparent; font: inherit; color: inherit; outline: none; padding: 2px 0; min-width: 3em; }
  .au-chip span { opacity: .6; font-size: 11px; }
  .au-chip:focus-within { box-shadow: 0 0 0 2px var(--blue-600); }
  .c0 { background: #DBEAFE; color: #1D4ED8; } .c1 { background: #DCFCE7; color: #15803D; } .c2 { background: #FEF3C7; color: #B45309; }
  .c3 { background: #FCE7F3; color: #BE185D; } .c4 { background: #EDE9FE; color: #6D28D9; } .c5 { background: #E0F2FE; color: #0369A1; }
  .au-tabs { margin-top: 12px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .au-tabs::-webkit-scrollbar { display: none; }
  .au-tabs button { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  /* bottom bar in the export states (done / trial / deleted / archived, auExpState): ONE row on every width —
     コピー outside, .txt / Word / .srt + タイムスタンプ in a menu that opens upward (mock v2 2026-10-28) */
  #auBar.au-1row .pdf-bar-in { flex-wrap: nowrap; }
  #auBar.au-1row .lead { flex: 1 1 auto; line-height: 1.45; }
  #auBar.au-1row .lead > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #auBar.au-1row .acts { flex-wrap: nowrap; flex-shrink: 0; }
  #auBar.au-mopen { z-index: 195; }   /* the open menu goes over the support bubble (190), under its panel (211) and the modals */
  #auBar .au-sm { display: none; }
  .action-btn .car { font-size: 10px; opacity: .7; margin-left: -2px; }
  .action-btn.open { border-color: var(--blue-600); box-shadow: 0 0 0 2px var(--blue-100); }
  .action-btn.ghost { border-color: transparent; background: transparent; color: var(--gray-500); padding-left: 8px; padding-right: 8px; }
  .action-btn.ghost:hover { background: var(--gray-100); color: var(--gray-700); }
  .action-btn.icon-btn { width: 38px; height: 38px; padding: 0; justify-content: center; color: var(--gray-500); }
  .action-btn.icon-btn svg { width: 17px; height: 17px; }
  /* right edge = the bar row's (.pdf-bar-in: max 1280, centred inside 16 px padding) */
  .au-menu { position: absolute; right: max(16px, calc((100% - 1280px) / 2)); bottom: calc(100% + 8px); width: 256px; max-width: calc(100vw - 32px);
    background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.18); padding: 6px; z-index: 30; font-size: 13.5px; }
  .au-menu[hidden] { display: none; }
  .au-menu .mh { font-size: 11.5px; color: var(--gray-500); padding: 6px 10px 4px; }
  .au-menu .mh b { color: var(--gray-700); }
  .au-menu .mi { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--gray-800); font: inherit; text-align: left; cursor: pointer; }
  .au-menu .mi small { color: var(--gray-500); font-size: 11.5px; }
  .au-menu .mi:hover, .au-menu .mi:focus-visible { background: var(--gray-100); outline: none; }
  .au-menu .sep { height: 1px; background: var(--gray-100); margin: 4px 6px; }
  .au-menu .tg { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12.5px; color: var(--gray-600); cursor: pointer; }
  .au-body { margin-top: 10px; border-top: 1px solid var(--gray-100); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
  .au-row { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 10px; padding: 7px 2px; border-bottom: 1px solid var(--gray-100); font-size: 14.5px; line-height: 1.8; align-items: start; }
  .au-ts { border: 0; background: none; color: var(--blue-600); font-variant-numeric: tabular-nums; cursor: pointer; font-size: 12.5px; padding: 3px 0 0; font-family: inherit; }
  .au-ts:hover { text-decoration: underline; }
  .au-row.au-now { background: #FEF9C3; border-radius: 6px; }   /* the utterance under the playhead (same yellow as the PDF line highlight) */
  .au-sp { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-top: 3px; white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
  .au-tx { min-width: 0; overflow-wrap: anywhere; }
  .au-md { padding: 4px 2px; font-size: 14.5px; line-height: 1.9; }
  .au-md h3 { font-size: 15px; margin: 14px 0 4px; }
  .au-md ul { padding-left: 1.3em; }
  .au-md p { margin: 6px 0; }
  .au-wait { padding: 18px 4px; color: var(--gray-500); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
  #page-audio.active ~ .sup-bubble { bottom: var(--sup-bottom, 112px); }
  #page-audio.active ~ .sup-panel { bottom: calc(var(--sup-bottom, 112px) + 60px); max-height: calc(100dvh - var(--sup-bottom, 112px) - 76px); }
  @media (max-width: 640px) {
    .au-row { grid-template-columns: auto 1fr; }
    .au-row .au-tx { grid-column: 1 / -1; }
    .au-sp { justify-self: start; }
    .au-body { max-height: none; }
    #page-audio.active ~ .sup-bubble { left: auto; right: 16px; bottom: calc(var(--sup-bottom, 112px) + 16px); }
    #page-audio.active ~ .sup-panel { bottom: calc(var(--sup-bottom, 112px) + 56px); max-height: calc(100dvh - var(--sup-bottom, 112px) - 70px); }
    /* phone: short lead (nowrap + ellipsis), compact buttons, delete = trash icon → still one row at 375 px */
    #auBar .lead .au-lg, #auBar .acts .au-lg { display: none; }
    #auBar .lead .au-sm { display: block; }
    #auBar .acts .au-sm { display: flex; }
    #auBar.au-1row .pdf-bar-in { gap: 8px; }
    #auBar.au-1row .lead { font-size: 13px; }
    #auBar.au-1row .lead .sub { font-size: 11.5px; }
    #auBar.au-1row .acts { gap: 6px; }
    #auBar.au-1row .action-btn:not(.icon-btn) { padding: 8px 11px; font-size: 13px; }
  }
  @media (max-width: 600px) {
    .au-next-acts .action-btn { flex: 1 1 100%; justify-content: center; }
  }