:root {
    --bg:         #FFFFFF;
    --surface:    #F7F9FC;
    --ink:        #0B1220;
    --mid:        #5A6A7E;
    --faint:      #9AAABA;
    --blue:       #1C5281;
    --blue-lt:    #EBF3FB;
    --green:      #1F7A4A;
    --border:     #D8E2EE;
    --white:      #FFFFFF;
    --text:       #0B1220;
    --muted:      #5A6A7E;
    --accent:     #1C5281;
    --ok:         #1F7A4A;
    --err:        #c0392b;
    --run:        #B87818;
    --light:      #D8E2EE;
    --radius:     4px;
    --glass:      rgba(28,82,129,0.04);
    --glass-border: #D8E2EE;
  }
  .vh {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { margin:0; padding:0; }
  body { font-family: 'Barlow', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 17px; overflow-x: hidden; position: relative; }
  body::before { content:''; position:fixed; inset:0; background: linear-gradient(160deg, rgba(28,82,129,0.035) 0%, transparent 40%); pointer-events:none; z-index:0; }

  /* ─── SIDEBAR — removed ─────────────────────────────────────────────────── */
  #sidebar { display: none; }

  /* ─── MAIN WRAP ─────────────────────────────────────────────────────────── */
  #main-wrap {
    margin-left: 0;
    display: flex; flex-direction: column;
    min-height: 100vh;
    position: relative; z-index: 1;
  }

  /* ─── TOP BAR ───────────────────────────────────────────────────────────── */
  #top-strip {
    display: flex; align-items: center;
    justify-content: space-between; gap: 14px;
    padding: 0 28px;
    height: 72px;
    position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  #topbar-logo {
    display: flex; align-items: center; gap: 11px;
    text-decoration: none; color: var(--ink);
    height: 100%; flex-shrink: 0;
  }
  #topbar-logo img {
    height: 46px; width: auto;
    border-radius: 0; display: block;
    flex-shrink: 0;
  }
  .topbar-brand {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 1.22rem; font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ink);
    line-height: 1; white-space: nowrap;
    text-transform: uppercase;
  }
  .topbar-brand em { color: var(--blue); font-style: normal; }
  #seo-h1 {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  #seo-h1 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
  .logo-accent { color: var(--blue); }
  #topbar-right {
    display: flex; align-items: center; gap: 14px; min-width: 0;
  }
  #file-indicator { font-size:0.75rem; color:var(--mid); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #file-indicator span { color:var(--blue); font-weight:600; }
  #btn-change-file { background:none; border:1px solid var(--border); color:var(--mid); padding:4px 12px; cursor:pointer; font-family:'Barlow',system-ui,sans-serif; font-size:0.72rem; border-radius:100px; transition:all 0.2s; letter-spacing:0.03em; }
  #btn-change-file:hover { border-color:var(--blue); color:var(--blue); }
  #lang-switcher { display:flex; gap:2px; flex-shrink:0; }
  #lang-switcher button { background:none; border:none; color:var(--faint); padding:3px 7px; font-size:0.72rem; cursor:pointer; font-family:'Barlow',system-ui,sans-serif; letter-spacing:0.06em; font-weight:700; transition:color 0.15s; }
  #lang-switcher button:hover { color:var(--ink); }
  #lang-switcher button.active { color:var(--ink); }

  #page-body { flex:1; position:relative; z-index:1; }
  .view { display:none; }
  .view.active { display:block; }

  /* ─── HOME ──────────────────────────────────────────────────────────────── */
  #view-home { position:relative; z-index:1; }
  .home-header { margin-bottom:32px; }
  .home-header h2 { font-family:'Barlow',system-ui,sans-serif; font-size:2rem; font-weight:800; letter-spacing:-0.015em; margin-bottom:8px; color:var(--ink); }
  .home-header p { font-size:1rem; color:var(--mid); line-height:1.7; max-width:620px; }
  .home-header .privacy-badge { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:6px 16px; background:var(--blue-lt); border:1px solid rgba(28,82,129,0.2); border-radius:100px; font-size:0.76rem; color:var(--blue); letter-spacing:0.04em; }

  /* ─── SECTION HEADINGS ──────────────────────────────────────────────────── */
  .section-label {
    font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 16px; display: block;
  }

  /* ─── SUITE PICKER (2 cards, home page) ─────────────────────────────────── */
  .suite-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 8px;
  }
  @media (max-width: 700px) {
    .suite-grid { grid-template-columns: 1fr; }
  }
  .suite-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--glass);
    border: 1.5px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    padding: 32px 28px;
    overflow: hidden;
    transition: all 0.25s;
  }
  .suite-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(28,82,129,0.06), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
  }
  a.suite-card { cursor: pointer; }
  a.suite-card:hover {
    border-color: rgba(28,82,129,0.35);
    box-shadow: 0 10px 28px rgba(28,82,129,0.12);
    transform: translateY(-3px);
  }
  a.suite-card:hover::before { opacity: 1; }
  .suite-card.disabled { cursor: default; opacity: 0.74; }
  .suite-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(28,82,129,0.1);
    border: 1px solid rgba(28,82,129,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 20px;
    position: relative; z-index: 1;
  }
  .suite-card h3 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 1.18rem; font-weight: 800;
    letter-spacing: -0.01em; color: var(--ink);
    margin-bottom: 9px;
    position: relative; z-index: 1;
  }
  .suite-card p {
    font-size: 0.86rem; color: var(--mid);
    line-height: 1.6; margin-bottom: 18px;
    max-width: 360px;
    position: relative; z-index: 1;
  }
  .suite-cta {
    font-size: 0.78rem; font-weight: 700;
    color: var(--blue);
    display: flex; align-items: center; gap: 6px;
    letter-spacing: 0.04em;
    position: relative; z-index: 1;
  }
  .suite-cta-arrow { display: inline-block; font-size: 0.85rem; transition: transform 0.2s; }
  a.suite-card:hover .suite-cta-arrow { transform: translateX(3px); }
  .suite-badge-soon {
    font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--faint);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 3px 11px;
    position: relative; z-index: 1;
  }

  /* ─── SECTION DIVIDER ───────────────────────────────────────────────────── */
  .section-divider {
    display: flex; align-items: center; gap: 16px;
    margin: 44px 0 20px;
  }
  .section-divider .line { flex:1; height:1px; background:var(--border); }
  .section-divider span {
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--faint); white-space: nowrap;
  }

  #drop-zone { border: 2px dashed rgba(28,82,129,0.4); background: var(--blue-lt); border-radius: 16px; padding: 52px 24px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; margin-bottom: 32px; position: relative; overflow: hidden; }
  #drop-zone:hover { border-color: var(--blue); background: rgba(235,243,251,0.85); box-shadow: 0 4px 20px rgba(28,82,129,0.1); }
  #drop-zone.dragover { border-color: var(--blue); border-style: solid; background: rgba(235,243,251,0.85); box-shadow: 0 4px 20px rgba(28,82,129,0.15); }
  #drop-zone h3 { font-family:'Barlow',system-ui,sans-serif; font-size:1.08rem; font-weight:600; margin-bottom:6px; color: var(--blue); letter-spacing:0.02em; }
  #drop-zone p { color: var(--mid); font-size:0.88rem; }
  #file-input-hidden { display:none; }
  #drop-check { display:none; position:absolute; inset:0; background:rgba(235,243,251,0.95); align-items:center; justify-content:center; flex-direction:column; gap:10px; }
  #drop-check.show { display:flex; animation:fadeCheck 1.6s ease forwards; }
  @keyframes fadeCheck { 0%{opacity:0} 20%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
  #drop-check .check-circle { width:52px; height:52px; border-radius:50%; border:2px solid var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--blue); animation:scaleIn 0.3s ease; }
  @keyframes scaleIn { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
  #drop-check p { font-size:0.85rem; color:var(--blue); font-weight:600; }

  /* ─── TOOLS CAROUSEL ────────────────────────────────────────────────────── */
  .tools-carousel-wrap { position:relative; margin-bottom:4px; }
  .tools-carousel-wrap .scroll-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.05); border:1px solid var(--border); border-radius:50%; width:30px; height:30px; cursor:pointer; font-size:0.9rem; display:flex; align-items:center; justify-content:center; z-index:2; transition:all 0.2s; color:var(--mid); }
  .tools-carousel-wrap .scroll-btn:hover { border-color:var(--blue); color:var(--blue); }
  .tools-carousel-wrap .scroll-btn.left { left:-15px; }
  .tools-carousel-wrap .scroll-btn.right { right:-15px; }
  .tools-grid { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:6px; scrollbar-width:none; }
  .tools-grid::-webkit-scrollbar { display:none; }
  .tool-card { background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:14px; padding:16px; cursor:pointer; transition:all 0.3s; min-width:185px; max-width:185px; scroll-snap-align:start; flex-shrink:0; transform:translateZ(0); isolation:isolate; position:relative; overflow:hidden; }
  .tool-card::before { content:''; position:absolute; inset:0; border-radius:14px; background:rgba(28,82,129,0.05); opacity:0; transition:opacity 0.3s; }
  .tool-card:hover { transform:translateY(-3px) translateZ(0); border-color:rgba(28,82,129,0.28); box-shadow:0 8px 20px rgba(0,0,0,0.1),0 0 0 1px rgba(28,82,129,0.15); }
  .tool-card:hover::before { opacity:1; }
  .tool-card .icon { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; font-size:1.1rem; background:rgba(28,82,129,0.1); border:1px solid rgba(28,82,129,0.2); position:relative; z-index:1; }
  .tool-card .icon svg { width:20px; height:20px; }
  .tool-card h3 { font-family:'Barlow',system-ui,sans-serif; font-size:0.78rem; font-weight:600; margin-bottom:4px; line-height:1.3; color:var(--text); position:relative; z-index:1; }
  .tool-card p { font-size:0.68rem; color:var(--faint); line-height:1.4; position:relative; z-index:1; }

  /* ─── TOOL VIEW ─────────────────────────────────────────────────────────── */
  #view-tool { max-width:880px; margin:0 auto; padding:22px 32px 72px; position:relative; z-index:1; background:var(--bg); }
  #back-btn { background:none; border:none; cursor:pointer; font-family:'Barlow',system-ui,sans-serif; font-size:0.8rem; color:var(--mid); padding:0; margin-bottom:24px; display:inline-flex; align-items:center; gap:6px; transition:color 0.2s; letter-spacing:0.05em; }
  #back-btn:hover { color:var(--blue); }
  .tool-panel { display:none; }
  .tool-panel.active { display:block; }
  .tool-panel-meta {
    font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 10px; display: block;
  }
  .tool-panel-h1 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 2rem; font-weight: 800;
    letter-spacing: -0.025em; line-height: 1.12;
    color: var(--ink); margin-bottom: 14px;
    max-width: 580px;
  }
  #working-banner { display:none; background:var(--blue-lt); border:1px solid rgba(28,82,129,0.25); border-radius:8px; padding:8px 14px; margin-bottom:16px; font-size:0.78rem; color:var(--blue); font-weight:500; }
  #working-banner.show { display:flex; align-items:center; gap:8px; }

  /* ─── TOOL FILE DROP ZONE ───────────────────────────────────────────────── */
  #tool-choose-wrap {
    border-color: var(--blue);
    background: var(--blue-lt);
    color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
    border-radius: 6px;
    padding: 14px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    margin-bottom: 22px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  #tool-choose-wrap:hover {
    border-color: rgba(28,82,129,0.35);
    background: var(--blue-lt);
  }
  #tool-choose-wrap.has-file {
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--mid);
    box-shadow: none;
  }
  #tool-choose-btn {
    background: none !important;
    color: var(--blue) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Barlow', system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    cursor: pointer !important;
    letter-spacing: 0.03em !important;
    transition: none !important;
  }
  #tool-choose-name {
    font-size: 0.82rem !important;
    color: var(--mid) !important;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #tool-choose-name:not(:empty)::before { content: '—'; margin-right: 6px; color: var(--faint); }
  .tool-choose-icon {
    width: 22px; height: 22px; flex-shrink: 0;
    color: var(--blue); opacity: 0.7;
  }

  /* ─── FORM ELEMENTS ─────────────────────────────────────────────────────── */
  label { display:block; margin-bottom:5px; font-size:0.86rem; color:var(--mid); }
  input[type="text"], input[type="number"], input[type="password"], select, textarea { display:block; width:100%; padding:8px 12px; margin-bottom:14px; border:1px solid var(--border); border-radius:var(--radius); font-family:'Barlow',system-ui,sans-serif; font-size:0.86rem; background:#fff; color:var(--text); transition:border-color 0.2s; outline:none; }
  input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, select:focus { border-color:rgba(28,82,129,0.4); }
  select option { background:#fff; color:var(--text); }
  input[type="file"] { display:block; margin-bottom:14px; font-family:'Barlow',system-ui,sans-serif; font-size:0.82rem; color:var(--mid); }
  input[type="range"] { width:100%; margin-bottom:4px; cursor:pointer; accent-color:var(--blue); }
  input[type="color"] { background:var(--surface); border:1px solid var(--glass-border); border-radius:var(--radius); cursor:pointer; }
  .row { display:flex; gap:14px; flex-wrap:wrap; }
  .row > div { flex:1; min-width:150px; }

  /* ─── BUTTONS ───────────────────────────────────────────────────────────── */
  .btn { display:inline-block; padding:9px 20px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:'Barlow',system-ui,sans-serif; font-size:0.84rem; cursor:pointer; border-radius:var(--radius); margin-right:8px; margin-bottom:6px; transition:all 0.15s; letter-spacing:0.03em; }
  .btn:hover { border-color:var(--blue); color:var(--blue); background:rgba(28,82,129,0.06); }
  .btn:disabled { opacity:0.3; cursor:not-allowed; }
  .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
  .btn-primary:hover { background: #163d62; border-color: #163d62; color: #fff; }
  .btn-dl { border-color:rgba(28,82,129,0.3); color:var(--blue); }
  .btn-dl:hover { background:rgba(28,82,129,0.1); }
  .btn-dl.ready { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
  .btn-dl.ready:hover { background:#163d62; border-color:#163d62; }
  .btn-primary.done { background:var(--surface); border-color:var(--border); color:var(--mid); font-weight:400; }
  .btn-primary.done:hover { background:rgba(28,82,129,0.06); border-color:var(--blue); color:var(--blue); }
  .btn-apply { border-color:rgba(31,122,74,0.35); color:var(--green); }
  .btn-apply:hover { background:rgba(31,122,74,0.08); border-color:var(--green); }
  .btn-apply:disabled { opacity:0.3; }

  /* ─── STATUS ────────────────────────────────────────────────────────────── */
  .status { margin-top:10px; font-size:0.78rem; min-height:18px; padding:4px 0; font-family:'Barlow',system-ui,sans-serif; }
  .status:empty { min-height:0; padding:0; margin-top:0; }
  .ok { color:var(--blue); } .err { color:var(--err); } .run { color:var(--run); }

  /* ─── PROGRESS BAR ──────────────────────────────────────────────────────── */
  .progress-bar-wrap { background:rgba(0,0,0,0.05); border-radius:2px; height:5px; margin:8px 0; overflow:hidden; display:none; }
  .progress-bar-wrap.show { display:block; }
  .progress-bar { height:100%; background:linear-gradient(90deg,var(--blue),var(--green)); width:0%; transition:width 0.3s; }

  /* ─── FILE LIST (scrollable batch pickers, e.g. plan/page numbering) ────── */
  .file-list-title { font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--faint); margin:10px 0 6px; }
  .file-list-scroll { display:flex; flex-direction:column; gap:4px; max-height:96px; overflow-y:auto; margin:0 0 10px; padding-right:2px; }
  .file-list-scroll::-webkit-scrollbar { width:6px; }
  .file-list-scroll::-webkit-scrollbar-track { background:transparent; }
  .file-list-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

  /* ─── MODE TABS (e.g. Resize / Crop switcher) ──────────────────────────── */
  .crop-mode-tabs { display:flex; gap:0; margin-bottom:18px; border-bottom:1px solid var(--border); }
  .crop-mode-tab { background:none; border:none; border-bottom:2px solid transparent; padding:9px 4px; margin:0 22px 0 0; font-family:'Barlow',system-ui,sans-serif; font-size:0.86rem; font-weight:600; color:var(--mid); cursor:pointer; transition:color 0.15s, border-color 0.15s; }
  .crop-mode-tab:hover { color:var(--blue); }
  .crop-mode-tab.active { color:var(--blue); border-bottom-color:var(--blue); }

  /* ─── PRESET GRID ───────────────────────────────────────────────────────── */
  .preset-grid { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
  .preset-btn { flex:1; min-width:100px; padding:10px 8px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-family:'Barlow',system-ui,sans-serif; border-radius:6px; text-align:center; transition:all 0.15s; }
  .preset-btn:hover { border-color:rgba(28,82,129,0.35); background: var(--blue-lt); }
  .preset-btn.active { border-color:var(--blue); background:var(--blue-lt); color:var(--blue); box-shadow: 0 0 0 1px var(--blue); }
  .preset-btn .preset-name { font-size:0.88rem; font-weight:700; display:block; }
  .preset-btn .preset-desc { font-size:0.73rem; color:inherit; opacity:0.65; display:block; margin-top:3px; }
  .gs-custom-opts { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:14px; }
  .gs-load-note { font-size:0.75rem; color:var(--mid); padding:8px 0; }

  /* ─── PATCH FULLSCREEN ──────────────────────────────────────────────────── */
  #patch-fullscreen { display:none; position:fixed; inset:0; z-index:500; background:var(--surface); flex-direction:column; }
  #patch-fullscreen.open { display:flex; }
  #patch-topbar { background:#1C5281; color:#fff; padding:10px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--light); flex-shrink:0; }
  #patch-topbar span { font-size:0.78rem; color:rgba(255,255,255,0.7); }
  #patch-topbar .patch-sep { color:rgba(255,255,255,0.25); }
  #patch-canvas-wrap { flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:16px; }
  #patch-canvas-container { position:relative; display:inline-block; cursor:crosshair; }
  #patch-canvas-bg { display:block; }
  #patch-canvas-draw { position:absolute; top:0; left:0; cursor:crosshair; }
  .patch-vertex-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:#e03; border:2px solid #fff; transform:translate(-50%,-50%); pointer-events:none; }
  .patch-vertex-dot.first { width:18px; height:18px; background:var(--blue); }
  #patch-info-bar { background:#1C5281; color:var(--mid); font-size:0.75rem; padding:6px 16px; border-top:1px solid var(--light); flex-shrink:0; }

  /* ─── PREVIEW CANVAS ────────────────────────────────────────────────────── */
  #ai-canvas-wrap { position:relative; width:100%; border:1px solid var(--border); overflow:hidden; border-radius:var(--radius); }
  #convert-preview { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
  #convert-preview:empty { margin-top:0; }
  #convert-preview canvas { border:1px solid var(--border); border-radius:4px; }

  /* ─── REORDER GRID ──────────────────────────────────────────────────────── */
  #reorder-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); min-height:100px; }
  .page-thumb { position:relative; cursor:grab; user-select:none; border:2px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:6px; text-align:center; transition:border-color 0.15s; }
  .page-thumb:hover { border-color:var(--blue); }
  .page-thumb.dragging { opacity:0.4; cursor:grabbing; }
  .page-thumb.drag-over { border-color:var(--blue); border-style:dashed; }
  .page-thumb canvas { display:block; pointer-events:none; }
  .page-thumb .thumb-label { font-size:0.68rem; color:var(--mid); margin-top:4px; }
  .page-thumb .delete-cb { position:absolute; top:4px; right:4px; cursor:pointer; accent-color:var(--err); }

  /* Base canvas wrapper — width/height are set inline (per-thumbnail, from
     the rendered canvas size), this just keeps it block-level and lets
     .thumb-canvas-wrap canvas rotate cleanly around its own center. */
  .thumb-canvas-wrap { display:block; margin:0 auto; position:relative; }
  .thumb-canvas-wrap canvas { display:block; transition:transform 0.15s; }

  /* Row of per-thumbnail actions below the canvas (rotate + label). The
     delete button is positioned absolutely against .page-thumb itself (see
     .thumb-btn.delete-btn above), so this row reserves bottom padding for
     it rather than overlapping the label text. */
  .thumb-controls { display:flex; align-items:center; gap:6px; margin-top:8px; padding-bottom:22px; position:relative; }
  .thumb-btn.rotate-btn { width:22px; height:22px; border-radius:50%; padding:0; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.75rem; line-height:1; }
  .thumb-btn.rotate-btn:hover { background:rgba(28,82,129,0.08); border-color:var(--blue); color:var(--blue); }

  /* Each existing/blank page renders as a pair: the thumbnail card, plus a
     thin insert-blank gap to its right (mirrors the .split-gap pattern
     used by the split tool). */
  .page-thumb-pair { display:flex; align-items:flex-start; gap:2px; }
  .blank-page-btn-wrap { display:flex; align-items:stretch; flex-shrink:0; }
  .blank-page-btn {
    writing-mode: vertical-rl; text-orientation: mixed;
    background:none; border:1px dashed var(--border); border-radius:4px;
    color:var(--faint); font-family:'Barlow',system-ui,sans-serif;
    font-size:0.62rem; font-weight:600; letter-spacing:0.02em;
    padding:8px 3px; min-height:60px; cursor:pointer; transition:all 0.15s;
  }
  .blank-page-btn:hover { border-color:var(--blue); color:var(--blue); background:rgba(28,82,129,0.05); }

  /* ─── GENERIC STANDALONE-MODULE WRAPPER ─────────────────────────────────── */
  /* Root container some standalone tool-*.js modules (e.g. merge) render
     their whole self-built UI into. Intentionally minimal: the module
     supplies its own spacing between its own child elements. */
  .panel-box { display:block; }

  /* ─── GENERIC THUMBNAIL ACTION BUTTON ───────────────────────────────────── */
  .thumb-btn { border:1px solid var(--border); background:var(--surface); color:var(--faint); cursor:pointer; transition:all 0.15s; }
  .thumb-btn.delete-btn {
    position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
    width:22px; height:22px; border-radius:50%; padding:0;
    display:flex; align-items:center; justify-content:center;
    font-size:0.7rem; line-height:1;
  }
  .thumb-btn.delete-btn:hover { background:var(--err); border-color:var(--err); color:#fff; }

  /* ─── MERGE TOOL CARDS ───────────────────────────────────────────────────── */
  /* Scoped with .merge-thumb (added alongside .page-thumb by tool-merge.js)
     so this doesn't change the reorder/split tools' cards, which share the
     base .page-thumb class but keep their natural, content-sized height.
     Merge cards get a fixed height + column layout so the remove "✕"
     button (positioned via .thumb-btn.delete-btn above) always lands at
     the same height across every card, regardless of how tall that PDF's
     first-page thumbnail happens to render. */
  .page-thumb.merge-thumb { width:118px; height:152px; padding:6px 6px 34px; box-sizing:border-box; display:flex; flex-direction:column; }
  .page-thumb.merge-thumb .thumb-canvas-wrap { flex:1; min-height:0; overflow:hidden; }
  .page-thumb.merge-thumb .thumb-canvas-wrap canvas { max-width:100%; max-height:100%; width:auto; height:auto; }
  .page-thumb.merge-thumb .thumb-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ─── SPLIT PAGE GRID ───────────────────────────────────────────────────── */
  .split-page-wrap { display:inline-flex; flex-direction:column; align-items:center; }
  .split-thumb { text-align:center; border:2px solid var(--border); border-radius:var(--radius); background:#fff; padding:4px; }
  .split-gap { display:flex; align-items:center; justify-content:center; width:28px; height:80px; cursor:pointer; position:relative; }
  .split-gap .split-line { width:3px; background:rgba(255,255,255,0.08); flex:1; min-height:50px; border-radius:2px; transition:background 0.15s; }
  .split-gap.marked .split-line { background:var(--err); }
  .split-gap:hover .split-line { background:rgba(28,82,129,0.3); }
  .split-gap .split-icon { font-size:0.72rem; opacity:0; transition:opacity 0.15s; position:absolute; top:50%; transform:translateY(-50%); background:#fff; padding:0 2px; color:var(--err); pointer-events:none; }
  .split-gap:hover .split-icon, .split-gap.marked .split-icon { opacity:1; }

  /* ─── OTHER TOOLS TICKER ────────────────────────────────────────────────── */
  #other-tools-section { padding: 4px 0; margin-top: 14px; }
  #other-tools-section h3 { font-size:0.75rem; color:var(--mid); margin-bottom:12px; letter-spacing:0.1em; text-transform:uppercase; }
  .other-tools-ticker-viewport {
    overflow: hidden;
    position: relative;
  }
  .other-tools-ticker-viewport::before,
  .other-tools-ticker-viewport::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 52px; z-index: 2; pointer-events: none;
  }
  .other-tools-ticker-viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent);
  }
  .other-tools-ticker-viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent);
  }
  .other-tools-strip {
    display: flex; flex-wrap: nowrap; gap: 18px;
    width: max-content;
    padding: 3px 0;
    animation: otherToolsTicker 90s linear infinite;
    will-change: transform;
  }
  .other-tools-strip:hover { animation-play-state: paused; }
  @keyframes otherToolsTicker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .other-btn {
    display: inline-flex; align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    padding: 7px 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--mid);
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 100px;
    transition: all 0.15s;
  }
  .other-btn:hover { border-color:rgba(28,82,129,0.3); color:var(--blue); background:rgba(28,82,129,0.05); }

  /* ─── KEEP-FILE TOGGLE ──────────────────────────────────────────────────── */
  #keep-file-toggle-wrap { display:flex; align-items:center; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:2px; flex-shrink:0; }

  /* ─── FILE INPUT WRAP ───────────────────────────────────────────────────── */
  .file-input-wrap { position:relative; margin-bottom:14px; }
  .file-input-wrap input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; margin:0; }
  .file-input-label { display:flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius); font-family:'Barlow',system-ui,sans-serif; font-size:0.8rem; color:var(--mid); background:var(--surface); cursor:pointer; transition:border-color 0.15s; }
  .file-input-wrap:hover .file-input-label { border-color:rgba(28,82,129,0.3); color:var(--blue); }
  .file-input-label .file-name { color:var(--blue); }

  /* ─── SCALE BAR STYLE BUTTONS ───────────────────────────────────────────── */
  .sb-style-btn { background:var(--surface)!important; border:2px solid var(--border)!important; color:var(--text)!important; border-radius:6px!important; padding:5px 7px!important; cursor:pointer!important; display:flex!important; align-items:center!important; }
  .sb-style-btn:hover { border-color:rgba(28,82,129,0.3)!important; }

  /* ─── COLOUR SWATCHES ───────────────────────────────────────────────────── */
  .sb-swatch-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; align-items:center; }
  .sb-swatch { width:22px; height:22px; border-radius:3px; cursor:pointer; flex-shrink:0; border:2px solid transparent; transition:border-color 0.1s; }
  .sb-swatch:hover { border-color:rgba(28,82,129,0.4); }
  .sb-swatch.active { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
  .vn-swatch-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; align-items:center; }
  .vn-swatch { width:22px; height:22px; border-radius:3px; cursor:pointer; flex-shrink:0; border:2px solid transparent; transition:border-color 0.1s; }
  .vn-swatch:hover { border-color:rgba(28,82,129,0.4); }
  .vn-swatch.active { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }

  /* ─── COLOR PALETTE ─────────────────────────────────────────────────────── */
  #color-palette-wrap { display:none; align-items:center; gap:6px; background:var(--border); border:1px solid rgba(255,255,255,0.22); border-radius:6px; padding:4px 8px; flex-shrink:0; }
  #color-palette-wrap.visible { display:flex; }
  #color-palette-swatches { display:flex; gap:4px; align-items:center; }
  .cp-swatch { width:18px; height:18px; border-radius:3px; cursor:pointer; border:1.5px solid rgba(255,255,255,0.35); transition:transform 0.1s,box-shadow 0.1s; flex-shrink:0; }
  .cp-swatch:hover { transform:scale(1.18); box-shadow:0 2px 5px rgba(0,0,0,0.4); }
  #cp-active-wrap { display:flex; align-items:center; gap:5px; }
  #cp-active-shape { width:28px; height:18px; clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); cursor:pointer; border-radius:2px; transition:box-shadow 0.1s; flex-shrink:0; }
  #cp-active-shape:hover { box-shadow:0 2px 6px rgba(0,0,0,0.4); }
  #cp-eyedropper { background:none; border:none; cursor:pointer; font-size:13px; color:#1C5281; padding:0 2px; display:none; transition:color 0.1s; }
  #cp-eyedropper:hover { color:#0d3459; }
  #cp-eyedropper.supported { display:block; }
  #cp-hidden-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
  .cp-sep { width:1px; height:14px; background:rgba(255,255,255,0.3); flex-shrink:0; }

  /* ─── DONATION BANNER ───────────────────────────────────────────────────── */
  /* Animation values live ONLY here — donation-banner.js just toggles the
     .heart-in / .heart-out / .content-in classes, it never hardcodes a
     timing/easing string. Keep it that way when tuning these. */
  @keyframes heartIn { 0%{transform:scale(0);opacity:0} 50%{transform:scale(1.25);opacity:1} 100%{transform:scale(1);opacity:1} }
  @keyframes heartOut { 0%{transform:scale(1);opacity:1} 100%{transform:scale(0.7);opacity:0} }
  @keyframes donationContentIn { 0%{opacity:0;transform:translateY(4px)} 100%{opacity:1;transform:translateY(0)} }
  @keyframes donationBannerIn { 0%{opacity:0;transform:translateY(-6px)} 100%{opacity:1;transform:translateY(0)} }
  #donation-banner { display:none; background:var(--blue-lt); border:1px solid rgba(28,82,129,0.18); border-radius:var(--radius); padding:18px 20px; margin-top:14px; animation:donationBannerIn 0.25s ease-out forwards; }
  #donation-heart-stage { display:flex; align-items:center; justify-content:center; height:52px; }
  #donation-heart { font-size:32px; color:var(--blue); display:block; }
  #donation-heart.heart-in  { animation:heartIn 0.45s cubic-bezier(.17,.67,.35,1.3) forwards; }
  #donation-heart.heart-out { animation:heartOut 0.3s ease-in forwards; }
  #donation-content { display:none; }
  #donation-content.content-in { animation:donationContentIn 0.35s ease-out forwards; }
  #donation-kofi-btn { display:inline-flex; align-items:center; gap:7px; background:var(--blue); color:#fff; padding:7px 14px; border-radius:var(--radius); font-family:'Barlow',system-ui,sans-serif; font-size:0.8rem; text-decoration:none; font-weight:600; border:none; cursor:pointer; transition:background 0.15s; }
  #donation-kofi-btn:hover { background:#163d62; }
  #donation-dismiss { background:none; border:none; font-family:'Barlow',system-ui,sans-serif; font-size:0.75rem; color:var(--faint); cursor:pointer; text-decoration:underline; }

  /* ─── CARBON ADS ────────────────────────────────────────────────────────── */
  .carbon-wrap { margin:32px 0 0; border:1px solid var(--glass-border); border-radius:12px; padding:12px 16px; display:flex; align-items:center; gap:14px; min-height:130px; background:var(--glass); backdrop-filter:blur(10px); }
  .carbon-wrap .carbon-slot { flex:1; min-height:100px; }
  .carbon-wrap .carbon-label { font-size:0.65rem; color:var(--mid); white-space:nowrap; align-self:flex-end; }

  /* ─── FAQ ───────────────────────────────────────────────────────────────── */
  .section-h3 { font-family:'Barlow',system-ui,sans-serif; font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:20px; letter-spacing:0.01em; }
  .faq-item { border-top:1px solid var(--border); }
  .faq-item:last-child { border-bottom:1px solid var(--border); }
  .faq-q { width:100%; background:none; border:none; text-align:left; padding:14px 4px; font-size:0.84rem; font-weight:600; color:var(--text); font-family:'Barlow',system-ui,sans-serif; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; transition:color 0.2s; }
  .faq-q:hover { color:var(--blue); }
  .faq-q .faq-arrow { font-size:0.7rem; color:var(--mid); transition:transform .2s; flex-shrink:0; }
  .faq-q.open .faq-arrow { transform:rotate(180deg); }
  .faq-a { display:none; padding:0 4px 16px; font-size:0.8rem; line-height:1.7; color:var(--mid); }
  .faq-a.open { display:block; }
  .faq-a a { color:var(--blue); }
  .faq-a strong { color:var(--text); }
  .faq-a code { background:rgba(28,82,129,0.08); padding:1px 6px; border-radius:3px; font-size:0.78rem; color:var(--blue); }

  /* ─── TP FAQ (tool panel) ───────────────────────────────────────────────── */
  .tp-faq { margin-top:24px; }
  .tp-faq-item { border-top:1px solid var(--border); }
  .tp-faq-item:last-child { border-bottom:1px solid var(--border); }
  .tp-faq-q { width:100%; background:none; border:none; text-align:left; padding:12px 4px; font-size:0.84rem; font-weight:600; color:var(--text); font-family:'Barlow',system-ui,sans-serif; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; transition:color 0.2s; }
  .tp-faq-q:hover { color:var(--blue); }
  .tp-faq-q .faq-arrow { font-size:0.7rem; color:var(--mid); transition:transform .2s; flex-shrink:0; }
  .tp-faq-q.open .faq-arrow { transform:rotate(180deg); }
  .tp-faq-a { display:none; padding:0 4px 14px; font-size:0.8rem; line-height:1.65; color:var(--mid); }
  .tp-faq-a.open { display:block; }
  .tp-faq-a strong { color:var(--text); }
  .tp-faq-a em { color:var(--mid); }
  .tp-faq-a code { background:var(--blue-lt); padding:1px 6px; border-radius:3px; font-size:0.78rem; color:var(--blue); border:1px solid rgba(28,82,129,0.18); }

  /* ─── DESCRIPTION TOGGLE (short desc → expandable step list) ────────────── */
  /* Text-only, no border/background — used across all tool pages via
     window.toggleDescSteps() in tools.js. */
  .desc-toggle { display:inline-block; background:none; border:none; padding:0; margin:0 0 18px; font-family:'Barlow',system-ui,sans-serif; font-size:0.82rem; font-weight:600; color:var(--blue); cursor:pointer; transition:opacity 0.15s; }
  .desc-toggle:hover { opacity:0.7; }

/* ─── HISTOGRAM (generic value-distribution bar chart) ───────────────────── */
/* Container: flex row, children bottom-aligned on a shared baseline. */
.histogram {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding-bottom: 30px;         /* reserve space below bars for labels */
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  position: relative;
}
/* Each column: bar sits at the bottom of the chart area, label is absolutely
   positioned below the baseline so it never affects bar alignment. */
.histogram-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;    /* bar sticks to the bottom */
  flex-shrink: 0;
  cursor: pointer;
  padding: 2px 1px 0;
  transition: background 0.15s;
  position: relative;
}
.histogram-bar-wrap:hover { background: var(--glass); border-radius: 3px 3px 0 0; }
.histogram-bar-wrap.in-range .histogram-bar     { background: var(--blue); }
.histogram-bar-wrap.in-range .histogram-bar-lbl { color: var(--blue); }
/* The colored bar — height set inline by JS (proportional to count). */
.histogram-bar {
  width: 100%;
  min-height: 3px;
  background: var(--border);
  border-radius: 2px 2px 0 0;
  transition: background 0.15s;
  flex-shrink: 0;
}
/* Label: absolutely positioned below the bar area so all bar-bottoms align. */
.histogram-bar-lbl {
  position: absolute;
  bottom: -30px;                /* sits in the padding-bottom reserved space */
  left: 0; right: 0;
  font-size: 0.58rem;
  color: var(--mid);
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  transition: color 0.15s;
  pointer-events: none;
}

/* ─── PRESET PILL BUTTONS (quick-select chips) ────────────────────────────── */
.preset-pill {
  padding: 4px 12px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--mid);
  font-family: inherit;
  font-size: 0.72rem;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.preset-pill:hover,
.preset-pill.active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-lt);
}

/* NOTE: footer, #feedback-trigger/#contact-trigger, and the #feedback-modal
   (.fb-box, .fb-close, #fb-success, etc.) styles used to live here. They are
   now owned entirely by footer.js, which injects its own <style> block at
   runtime (single source of truth for markup + CSS + i18n of the shared
   footer/feedback modal). Do not re-add footer/modal selectors to this
   file — edit footer.js instead. */

/* ─── ABOUT / COMMON USES ────────────────────────────────────────────────
   Reusable "about the tool" SEO block, shown below the other-tools
   carousel on every tool page. Lives here (not in each page's own <style>)
   because it's identical across all 24 tool pages — single source of
   truth, same as .tool-panel-h1 above. Two-column layout: about text on
   the left (.about-col-info), common-uses list on the right
   (.about-col-uses), bullets stacked one per row. To add it to a tool
   page: drop in the #about-tool-section markup (see compress.html for
   reference) and only fill in that page's own data-i18n values
   (about_title, about_desc, uses_title, uses_1..uses_6) — no CSS to
   write or copy. ─────────────────────────────────────────────────────── */
#about-tool-section {
  max-width: 980px; margin: 88px auto 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 32px;
  align-items: start; text-align: left;
}
#about-tool-section h2 {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.12;
  color: var(--mid); margin-bottom: 10px;
}
#about-tool-section p { font-size: 0.875rem; color: var(--mid); line-height: 1.65; margin: 0; }
#about-tool-section .about-uses-title { margin-bottom: 18px; }
.about-uses-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: none;
  margin: 0;
  text-align: left;
  list-style: none;
  padding: 0;
}
.about-uses-item { display: flex; align-items: flex-start; gap: 12px; }
.about-uses-check {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: var(--blue-lt); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.about-uses-check svg { width: 11px; height: 11px; }
.about-uses-item p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--ink); }
@media (max-width: 720px) {
  #about-tool-section { grid-template-columns: 1fr; row-gap: 32px; text-align: center; }
  #about-tool-section .about-col-uses { text-align: left; }
}