*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe;
      --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb;
      --blue-700:#1d4ed8; --cyan-400:#22d3ee; --cyan-500:#06b6d4;
      --white:#fff; --gray-50:#f8fafc; --gray-100:#f1f5f9;
      --gray-200:#e2e8f0; --gray-300:#cbd5e1; --gray-500:#64748b;
      --gray-700:#334155; --gray-900:#0f172a;
      --font-d:'Syne',sans-serif; --font-b:'Plus Jakarta Sans',sans-serif;
      --radius:14px; --sidebar:260px;
    }
    html { scroll-behavior:smooth; }
    body { font-family:var(--font-b); color:var(--gray-900); background:var(--gray-50); overflow-x:hidden; }
    a { text-decoration:none; color:inherit; }
    button { font-family:var(--font-b); cursor:pointer; }

    /* ── NAV ── */
    .nav {
      position:fixed; top:0; left:0; right:0; z-index:200;
      height:60px; background:rgba(255,255,255,.95); backdrop-filter:blur(16px);
      border-bottom:1px solid var(--gray-100);
      display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
      padding:0 5%;
    }
    .nav-logo { display:flex; align-items:center; gap:9px; justify-self:start; }
    .nav-logo img { width:30px; height:30px; object-fit:contain; }
    .nav-logo-text {
      font-family:var(--font-d); font-size:1.2rem; font-weight:800;
      background:linear-gradient(135deg,var(--blue-600),var(--cyan-500));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }
    .nav-tag {
      font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
      background:var(--blue-50); color:var(--blue-600); border:1px solid var(--blue-100);
      padding:.2rem .6rem; border-radius:999px;
    }
    .nav-right { display:flex; align-items:center; gap:12px; justify-self:end; }
    .nav-center { display:flex; gap:1.5rem; align-items:center; justify-self:center; }
    .nav-link-sec { font-size:.85rem; font-weight:500; color:var(--gray-500); transition:all .2s; border:1px solid var(--gray-200); background:white; padding:.4rem .8rem; border-radius:8px; }
    .nav-link-sec:hover { border-color:var(--blue-400); color:var(--blue-600); }
    .nav-back {
      font-size:.85rem; font-weight:600; color:var(--gray-500);
      padding:.4rem .8rem; border-radius:8px; transition:all .2s;
      border:1px solid var(--gray-200); background:white;
    }
    .nav-back:hover { border-color:var(--blue-400); color:var(--blue-600); }
    .btn-nav-primary {
      background:linear-gradient(135deg,var(--blue-600),var(--cyan-500));
      color:white; border:none; font-weight:700; font-size:.82rem;
      padding:.45rem 1.1rem; border-radius:9px;
      box-shadow:0 3px 10px rgba(37,99,235,.3); transition:opacity .2s;
    }
    .btn-nav-primary:hover { opacity:.9; }

    /* ── LAYOUT ── */
    .layout { display:flex; padding-top:60px; min-height:100vh; }

    /* ── SIDEBAR ── */
    .sidebar {
      width:var(--sidebar); flex-shrink:0;
      position:fixed; top:60px; left:0; bottom:0;
      background:white; border-right:1px solid var(--gray-100);
      overflow-y:auto; z-index:100; padding:16px 0;
    }
    .sidebar::-webkit-scrollbar { width:4px; }
    .sidebar::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:2px; }
    .sidebar-cat-label {
      font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
      color:var(--gray-500); padding:12px 20px 6px;
    }
    .sidebar-item {
      display:flex; align-items:center; gap:10px;
      padding:8px 20px; font-size:.85rem; font-weight:500; color:var(--gray-700);
      cursor:pointer; transition:all .15s; border-left:3px solid transparent;
    }
    .sidebar-item:hover { background:var(--gray-50); color:var(--blue-600); }
    .sidebar-item.active {
      background:var(--blue-50); color:var(--blue-600); border-left-color:var(--blue-600);
      font-weight:700;
    }
    .sidebar-item-icon {
      width:28px; height:28px; border-radius:7px;
      background:var(--gray-100); display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:background .15s;
    }
    .sidebar-item-icon i { font-size:15px; color:var(--gray-500); transition:color .15s; }
    .sidebar-item:hover .sidebar-item-icon,
    .sidebar-item.active .sidebar-item-icon { background:var(--blue-100); }
    .sidebar-item:hover .sidebar-item-icon i,
    .sidebar-item.active .sidebar-item-icon i { color:var(--blue-600); }
    .sidebar-divider { height:1px; background:var(--gray-100); margin:8px 16px; }

    /* ── MAIN ── */
    .main { margin-left:var(--sidebar); flex:1; min-height:calc(100vh - 60px); }

    /* ── HOME VIEW ── */
    #home-view { padding:40px 48px; }
    .home-header { margin-bottom:36px; }
    .home-header h2 { font-family:var(--font-d); font-size:2rem; font-weight:800; margin-bottom:.4rem; }
    .home-header p { color:var(--gray-500); font-size:1rem; }
    .cat-section { margin-bottom:40px; }
    .cat-title {
      font-family:var(--font-d); font-size:.9rem; font-weight:800;
      text-transform:uppercase; letter-spacing:.06em; color:var(--gray-900);
      padding-bottom:12px; border-bottom:2px solid var(--blue-100);
      margin-bottom:16px; display:flex; align-items:center; gap:8px;
    }
    .cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
    .tool-card {
      background:white; border:1.5px solid var(--gray-100); border-radius:var(--radius);
      padding:18px 16px; cursor:pointer; transition:all .2s;
      display:flex; align-items:center; gap:12px;
    }
    .tool-card:hover { border-color:var(--blue-300,#93c5fd); box-shadow:0 4px 16px rgba(37,99,235,.1); transform:translateY(-2px); }
    .tool-card-icon {
      width:40px; height:40px; border-radius:10px; flex-shrink:0;
      background:linear-gradient(135deg,var(--blue-500),var(--cyan-500));
      display:flex; align-items:center; justify-content:center;
      color:white; font-size:1.2rem;
    }
    .tool-card-icon i { font-size:20px; color:white; }
    .tool-card-label { font-size:.9rem; font-weight:700; color:var(--gray-900); }
    .tool-card-desc { font-size:.75rem; color:var(--gray-500); margin-top:2px; line-height:1.4; }

    /* ── TOOL VIEW ── */
    #tool-view { display:none; padding:40px 48px; }
    .tool-header { margin-bottom:32px; }
    .tool-breadcrumb {
      font-size:.8rem; color:var(--gray-500); margin-bottom:8px;
      display:flex; align-items:center; gap:6px;
    }
    .tool-breadcrumb a { color:var(--blue-600); }
    .tool-header h2 { font-family:var(--font-d); font-size:1.75rem; font-weight:800; margin-bottom:.3rem; }
    .tool-header p { color:var(--gray-500); font-size:.95rem; }

    /* Upload zone */
    .upload-zone {
      border:2px dashed var(--gray-200); border-radius:var(--radius);
      padding:56px 32px; text-align:center; cursor:pointer;
      transition:all .2s; background:white;
    }
    .upload-zone:hover, .upload-zone.drag-over {
      border-color:var(--blue-400); background:var(--blue-50);
    }
    .upload-zone-icon { font-size:2.5rem; margin-bottom:16px; }
    .upload-zone h3 { font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
    .upload-zone p { font-size:.85rem; color:var(--gray-500); margin-bottom:16px; }
    .btn-upload {
      background:linear-gradient(135deg,var(--blue-600),var(--cyan-500));
      color:white; border:none; font-weight:700; font-size:.9rem;
      padding:.65rem 1.6rem; border-radius:10px;
      box-shadow:0 4px 14px rgba(37,99,235,.35);
    }
    .btn-upload:hover { opacity:.9; }

    /* Tool controls */
    .tool-body { display:flex; gap:24px; margin-top:24px; }
    .tool-controls {
      width:280px; flex-shrink:0;
      background:white; border:1px solid var(--gray-100);
      border-radius:var(--radius); padding:20px;
    }
    .tool-controls h3 { font-size:.85rem; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
    .ctrl-group { margin-bottom:18px; }
    .ctrl-label { font-size:.82rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; display:block; }
    .ctrl-input {
      width:100%; padding:.55rem .75rem; border:1.5px solid var(--gray-200);
      border-radius:8px; font-family:var(--font-b); font-size:.85rem; color:var(--gray-900);
      transition:border-color .2s; background:white;
    }
    .ctrl-input:focus { outline:none; border-color:var(--blue-400); }
    .ctrl-select {
      width:100%; padding:.55rem .75rem; border:1.5px solid var(--gray-200);
      border-radius:8px; font-family:var(--font-b); font-size:.85rem; color:var(--gray-900);
      background:white; appearance:none; cursor:pointer;
    }
    .ctrl-select:focus { outline:none; border-color:var(--blue-400); }
    .ctrl-row { display:flex; gap:8px; }
    .ctrl-row .ctrl-input { flex:1; }
    .btn-primary {
      width:100%; background:linear-gradient(135deg,var(--blue-600),var(--cyan-500));
      color:white; border:none; font-weight:700; font-size:.95rem;
      padding:.75rem; border-radius:10px;
      box-shadow:0 4px 14px rgba(37,99,235,.35); transition:all .2s;
    }
    .btn-primary:hover { opacity:.92; transform:translateY(-1px); }
    .btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
    .btn-secondary {
      width:100%; background:white; color:var(--gray-700);
      border:1.5px solid var(--gray-200); font-weight:600; font-size:.9rem;
      padding:.65rem; border-radius:10px; transition:all .2s; margin-top:8px;
    }
    .btn-secondary:hover { border-color:var(--blue-400); color:var(--blue-600); }

    /* Preview area */
    .tool-preview {
      flex:1; background:white; border:1px solid var(--gray-100);
      border-radius:var(--radius); padding:20px; min-height:300px;
      position:relative;
    }
    .preview-placeholder {
      height:100%; min-height:200px; display:flex; flex-direction:column;
      align-items:center; justify-content:center; color:var(--gray-300);
      gap:12px;
    }
    .preview-placeholder svg { opacity:.4; }

    /* Progress */
    .progress-bar-wrap {
      background:var(--gray-100); border-radius:999px; height:6px;
      margin:12px 0; overflow:hidden;
    }
    .progress-bar {
      height:100%; border-radius:999px;
      background:linear-gradient(90deg,var(--blue-600),var(--cyan-500));
      transition:width .3s; width:0%;
    }
    .status-msg { font-size:.8rem; color:var(--gray-500); margin-top:6px; }
    .status-ok { color:#16a34a; font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:6px; margin-top:12px; }
    .status-err { color:#dc2626; font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:6px; margin-top:12px; }

    /* File list */
    .file-list { margin-top:16px; }
    .file-item {
      display:flex; align-items:center; gap:10px;
      background:var(--gray-50); border:1px solid var(--gray-100);
      border-radius:9px; padding:10px 14px; margin-bottom:8px;
    }
    .file-item-icon { font-size:1.2rem; flex-shrink:0; }
    .file-item-name { font-size:.82rem; font-weight:600; flex:1; truncate:ellipsis; overflow:hidden; white-space:nowrap; }
    .file-item-size { font-size:.75rem; color:var(--gray-500); flex-shrink:0; }
    .file-item-remove { background:none; border:none; color:var(--gray-300); font-size:1rem; cursor:pointer; padding:0 4px; }
    .file-item-remove:hover { color:#dc2626; }

    /* Page thumbnails for organize tool */
    .page-grid { display:flex; flex-wrap:wrap; gap:12px; }
    .page-thumb {
      width:120px; border:2px solid var(--gray-200); border-radius:8px;
      overflow:hidden; cursor:grab; position:relative; background:white;
      transition:border-color .2s, box-shadow .2s;
    }
    .page-thumb:hover { border-color:var(--blue-400); box-shadow:0 4px 12px rgba(37,99,235,.15); }
    .page-thumb.selected { border-color:var(--blue-600); box-shadow:0 0 0 3px var(--blue-100); }
    .page-thumb.dragging { opacity:.5; }
    .page-thumb canvas { display:block; width:100%; }
    .page-thumb-label {
      font-size:.7rem; font-weight:700; text-align:center; padding:4px;
      background:var(--gray-50); color:var(--gray-500); border-top:1px solid var(--gray-100);
    }
    .page-thumb-check {
      position:absolute; top:4px; right:4px; width:18px; height:18px;
      background:white; border:2px solid var(--gray-300); border-radius:50%;
      display:flex; align-items:center; justify-content:center;
    }
    .page-thumb.selected .page-thumb-check { background:var(--blue-600); border-color:var(--blue-600); }
    .page-thumb.selected .page-thumb-check::after { content:'✓'; color:white; font-size:.6rem; }

    /* Signature canvas */
    #sig-canvas {
      border:2px solid var(--gray-200); border-radius:10px;
      cursor:crosshair; display:block; touch-action:none;
      background:white; width:100%; height:160px;
    }
    .sig-btns { display:flex; gap:8px; margin-top:8px; }
    .sig-btns button {
      flex:1; padding:.45rem; border-radius:7px; font-size:.78rem; font-weight:600;
    }
    .sig-clear { background:none; border:1.5px solid var(--gray-200); color:var(--gray-700); }
    .sig-clear:hover { border-color:var(--blue-300); color:var(--blue-600); }

    /* Compare view */
    .compare-view { display:flex; gap:12px; }
    .compare-pane { flex:1; border:1.5px solid var(--gray-200); border-radius:10px; overflow:hidden; }
    .compare-pane-header { background:var(--gray-50); border-bottom:1px solid var(--gray-200); padding:8px 14px; font-size:.82rem; font-weight:700; }
    .compare-pane canvas { display:block; width:100%; }

    /* OCR output */
    .ocr-output {
      width:100%; min-height:160px; padding:.75rem;
      border:1.5px solid var(--gray-200); border-radius:10px;
      font-size:.85rem; line-height:1.65; color:var(--gray-900);
      font-family:monospace; resize:vertical; background:white;
    }

    /* Watermark preview */
    .wm-preview {
      position:relative; width:100%; aspect-ratio:3/4; max-width:200px;
      background:white; border:1px solid var(--gray-200); border-radius:8px;
      overflow:hidden; margin:12px auto 0;
      display:flex; align-items:center; justify-content:center;
    }
    .wm-preview-text {
      font-size:1.4rem; font-weight:800; opacity:.15;
      transform:rotate(-30deg); white-space:nowrap; color:var(--blue-600);
      pointer-events:none;
    }
    .wm-preview-lines { position:absolute; inset:0; padding:12px; }
    .wm-line { height:5px; background:var(--gray-100); border-radius:3px; margin-bottom:7px; }
    .wm-line:nth-child(1){ width:80%; }
    .wm-line:nth-child(2){ width:100%; }
    .wm-line:nth-child(3){ width:70%; }
    .wm-line:nth-child(4){ width:90%; }
    .wm-line:nth-child(5){ width:60%; }

    /* Stamp buttons */
    .stamp-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
    .stamp-btn {
      padding:.55rem; border:2px solid var(--gray-200); border-radius:8px;
      font-size:.78rem; font-weight:700; background:white; color:var(--gray-700);
      transition:all .15s; cursor:pointer;
    }
    .stamp-btn.sel-approved { border-color:#16a34a; color:#16a34a; background:#f0fdf4; }
    .stamp-btn.sel-rejected { border-color:#dc2626; color:#dc2626; background:#fef2f2; }
    .stamp-btn.sel-draft { border-color:#d97706; color:#d97706; background:#fffbeb; }
    .stamp-btn.sel-confidential { border-color:#7c3aed; color:#7c3aed; background:#f5f3ff; }

    /* Radio / Checkbox groups */
    .radio-group { display:flex; flex-direction:column; gap:6px; }
    .radio-item { display:flex; align-items:center; gap:8px; font-size:.85rem; cursor:pointer; }
    .radio-item input { accent-color:var(--blue-600); }
    .check-group { display:flex; flex-direction:column; gap:6px; }
    .check-item { display:flex; align-items:center; gap:8px; font-size:.82rem; cursor:pointer; }
    .check-item input { accent-color:var(--blue-600); }

    /* Color slider */
    input[type=range] { width:100%; accent-color:var(--blue-600); }

    /* Download area */
    .download-area {
      margin-top:16px; border:2px solid #d1fae5; border-radius:12px;
      padding:16px; background:#f0fdf4; display:none;
    }
    .download-area.show { display:block; }
    .download-area h4 { font-size:.9rem; font-weight:700; color:#15803d; margin-bottom:12px; }
    .btn-download {
      display:inline-flex; align-items:center; gap:8px;
      background:#16a34a; color:white; border:none; font-weight:700;
      font-size:.9rem; padding:.6rem 1.4rem; border-radius:9px; cursor:pointer;
      transition:opacity .2s;
    }
    .btn-download:hover { opacity:.88; }

    /* Toast */
    .toast {
      position:fixed; bottom:24px; right:24px; z-index:999;
      background:var(--gray-900); color:white; font-size:.85rem; font-weight:600;
      padding:.75rem 1.25rem; border-radius:10px;
      box-shadow:0 8px 24px rgba(0,0,0,.2); transform:translateY(80px);
      transition:transform .3s; pointer-events:none;
    }
    .toast.show { transform:translateY(0); }

    /* Loading overlay */
    .loading-overlay {
      position:absolute; inset:0; background:rgba(255,255,255,.85);
      backdrop-filter:blur(4px); display:none; align-items:center;
      justify-content:center; flex-direction:column; gap:16px;
      border-radius:var(--radius); z-index:10;
    }
    .loading-overlay.show { display:flex; }
    .spinner {
      width:40px; height:40px; border:3px solid var(--gray-200);
      border-top-color:var(--blue-600); border-radius:50%;
      animation:spin .8s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .loading-text { font-size:.9rem; font-weight:600; color:var(--gray-700); }

    /* Responsive */
    @media(max-width:900px) {
      .sidebar { display:none; }
      .main { margin-left:0; }
      #home-view, #tool-view { padding:24px 20px; }
      .tool-body { flex-direction:column; }
      .tool-controls { width:100%; }
    }

    /* Range label */
    .range-val { font-size:.82rem; font-weight:700; color:var(--blue-600); margin-left:6px; }
    .ph-icon { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
    .ph-icon svg { display:block; }

/* ── Sticky download bar padding ── */
body.has-result { padding-bottom: 72px; }
#sticky-dl-bar { font-family: var(--font-b); }


    /* ── TOOL PAGE: hero is inside #tool-view, remove tool-view padding ── */
    .tool-page #tool-view {
      display: block !important;   /* always visible — JS controls content */
      padding: 0 !important;       /* hero fills full width of .main */
    }
    .tool-page #home-view { display: none !important; }
    .tool-page .tool-content { padding: 40px 48px 100px; }
    @media(max-width:900px) {
      .tool-page .tool-content { padding: 24px 20px 80px; }
    }

    /* ── HERO ── */
    .tool-hero-static {
      background: linear-gradient(135deg, var(--blue-700), var(--blue-600) 60%, var(--cyan-500));
      color: white;
      padding: 28px 48px 22px;   /* internal padding only — no margin tricks */
    }
    @media(max-width:900px) {
      .tool-hero-static { padding: 20px 20px 16px; }
    }
    .t-breadcrumb { font-size:.75rem; opacity:.6; margin-bottom:8px; }
    .t-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
    .t-breadcrumb a:hover { color:white; }
    .t-breadcrumb span { margin:0 4px; opacity:.5; }
    .tool-hero-static h1 {
      font-family:var(--font-d); font-size:clamp(1.2rem,2vw,1.6rem);
      font-weight:800; margin-bottom:.4rem; line-height:1.15;
    }
    .t-desc { font-size:.88rem; opacity:.85; max-width:680px; line-height:1.55; margin-bottom:.75rem; }
    .t-pills { display:flex; flex-wrap:wrap; gap:5px; }
    .t-pill {
      background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2);
      border-radius:999px; padding:.25rem .75rem; font-size:.73rem; font-weight:600;
    }
    /* ── RELATED TOOLS (parity with index.html cards) ── */
    .related-tools {
      padding: 32px 48px 56px;
      border-top: 1px solid var(--gray-100);
      background: white;
    }
    @media (max-width: 900px) {
      .related-tools { padding: 24px 20px 40px; }
    }
    .related-tools h2 {
      font-family: var(--font-d); font-size: 1.25rem; font-weight: 800;
      color: var(--gray-900); margin: 0 0 18px;
    }
    .related-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
    }
    .related-card {
      display: block;
      padding: 16px 18px;
      background: white;
      border: 1.5px solid var(--gray-100);
      border-radius: var(--radius);
      transition: border-color .2s, transform .2s, box-shadow .2s;
    }
    .related-card:hover {
      border-color: var(--blue-400);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(37, 99, 235, .08);
    }
    .related-name {
      font-weight: 700; font-size: .95rem; color: var(--gray-900); margin-bottom: 4px;
    }
    .related-desc {
      font-size: .8rem; color: var(--gray-500); line-height: 1.45;
    }



.lang-suggest{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;justify-content:center;padding:10px 16px;background:var(--gray-900,#0a0a0a);color:#fff;font-size:.85rem}
.lang-suggest a{color:#fff;text-decoration:underline;font-weight:600}
.lang-suggest button{margin-left:8px;background:transparent;border:0;color:#fff;cursor:pointer;font-size:1rem;line-height:1}
.lang-switcher{font:inherit;font-size:.82rem;padding:6px 8px;border:1px solid var(--gray-200,#e5e5e5);border-radius:8px;background:#fff;margin-right:12px;cursor:pointer}