/* ═══════════════════════════════════════════════════════════
   MultiMian ImageKit — Advanced Professional UI v3
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts + Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:           #f0f4fb;
    --surface:      #ffffff;
    --surface2:     #f5f7fc;
    --surface3:     #eef1f8;
    --text:         #0f1117;
    --text2:        #4a5568;
    --text3:        #8892a4;
    --border:       #e2e6f0;
    --accent:       #16a34a;
    --accent-light: #dcfce7;
    --accent2:      #2563eb;
    --accent2-dark: #1d4ed8;
    --accent2-light:#dbeafe;
    --danger:       #dc2626;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.06);
    --shadow:       0 4px 16px rgba(0,0,0,0.08);
    --shadow-md:    0 8px 28px rgba(0,0,0,0.12);
    --shadow-lg:    0 20px 50px rgba(0,0,0,0.15);
    --radius:       12px;
    --radius-sm:    8px;
    --radius-lg:    18px;
    --radius-xl:    24px;
    --g1:           #16a34a;
    --g2:           #0ea5e9;
    --g3:           #6366f1;
    --grad:         linear-gradient(135deg, var(--g1), var(--g2), var(--g3));
}

[data-theme="dark"] {
    --bg:           #080b12;
    --surface:      #111827;
    --surface2:     #1a2035;
    --surface3:     #1f2640;
    --text:         #f0f2f8;
    --text2:        #94a3b8;
    --text3:        #64748b;
    --border:       #1e2d45;
    --accent-light: #14532d;
    --accent2-light:#1e3a5f;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
    --shadow:       0 4px 16px rgba(0,0,0,0.5);
    --shadow-md:    0 8px 28px rgba(0,0,0,0.6);
    --shadow-lg:    0 20px 50px rgba(0,0,0,0.7);
}

/* ── Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.35s, color 0.35s;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
header {
    position: sticky;
    top: 0;
    z-index: 300;
    background: rgba(10, 14, 26, 0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
    transition: background 0.4s;
}
[data-theme="light"] header {
    background: rgba(15, 23, 42, 0.92);
}

/* shimmer line */
header::after {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, #16a34a, #0ea5e9, #6366f1, #a78bfa, #16a34a);
    background-size: 300% 100%;
    animation: hdrShimmer 4s linear infinite;
}
@keyframes hdrShimmer {
    0%   { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── Logo — clean static text ─────────────────────────────── */
.logo-wrap {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.22em;
    font-weight: 800;
    letter-spacing: -0.5px;
    white-space: nowrap;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.logo-wrap:hover .logo-name {
    transform: scale(1.04);
}

/* "Multi" — solid white */
.logo-multi {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-weight: 800;
}

/* "Mian" — gradient */
.logo-mian {
    background: linear-gradient(90deg, #6ee7b7 0%, #60a5fa 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* "ImageKit" — subtle */
.logo-kit {
    color: rgba(255,255,255,0.55);
    -webkit-text-fill-color: rgba(255,255,255,0.55);
    font-size: 0.76em;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-left: 5px;
    transition: color 0.2s, -webkit-text-fill-color 0.2s;
}
.logo-wrap:hover .logo-kit {
    color: rgba(255,255,255,0.85);
    -webkit-text-fill-color: rgba(255,255,255,0.85);
}

/* ── Tabs nav ──────────────────────────────────────────────── */
.tabs-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
    overflow: visible;
    scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }

.tab-btn {
    background: transparent;
    color: rgba(255,255,255,0.5);
    border: none;
    padding: 7px 13px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8em;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s, transform 0.15s;
    position: relative;
    letter-spacing: 0.1px;
}
.tab-btn:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.08);
    transform: translateY(-1px);
}
.tab-btn.active {
    color: #fff;
    background: rgba(110,231,183,0.12);
    font-weight: 700;
}
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 2px;
    background: linear-gradient(90deg, #6ee7b7, #60a5fa);
    border-radius: 2px;
    animation: tabLine 0.25s ease both;
}
@keyframes tabLine {
    from { width: 0; opacity: 0; }
    to   { width: 18px; opacity: 1; }
}

/* ── Header right ──────────────────────────────────────────── */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dark-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 5px 10px;
    cursor: pointer;
    color: rgba(255,255,255,0.8);
    font-size: 0.78em;
    transition: background 0.2s, border-color 0.2s;
}
.dark-toggle:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); }
.toggle-track {
    width: 30px; height: 17px;
    background: rgba(255,255,255,0.15);
    border-radius: 9px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.3s;
}
.toggle-thumb {
    position: absolute;
    top: 2.5px; left: 2.5px;
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
[data-theme="dark"] .toggle-track { background: #3b82f6; }
[data-theme="dark"] .toggle-thumb { transform: translateX(13px); }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 9px;
    transition: background 0.2s;
}
.hamburger:hover { background: rgba(255,255,255,0.14); }
.hamburger span {
    display: block;
    width: 18px; height: 2px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
    transition: all 0.28s ease;
    transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px 14px;
    background: rgba(8,11,18,0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06);
    animation: drawerIn 0.22s ease both;
}
.mobile-drawer.open { display: flex; }
@keyframes drawerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mobile-drawer .tab-btn {
    border-radius: 10px;
    padding: 11px 14px;
    text-align: left;
    font-size: 0.9em;
}
.mobile-drawer .tab-btn.active {
    background: rgba(110,231,183,0.1);
    border-left: 3px solid #6ee7b7;
    padding-left: 11px;
    color: #fff;
}
.mobile-drawer .tab-btn.active::after { display: none; }

/* ══════════════════════════════════════════════════════════════
   MAIN + TOOL SECTIONS
   ══════════════════════════════════════════════════════════════ */
main { flex: 1; width: 100%; }

.tab-section:not(.home-section) {
    width: 92%;
    max-width: 700px;
    margin: 36px auto 90px;
}

.tab-section { display: none; }
.tab-section.active { display: block; animation: fadeUp 0.3s ease; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Section Header ────────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}
.section-icon {
    width: 46px; height: 46px;
    background: var(--accent2-light);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35em;
    flex-shrink: 0;
}
.section-header h2 { font-size: 1.3em; font-weight: 700; color: var(--text); line-height: 1.2; }
.section-header p  { font-size: 0.82em; color: var(--text2); margin-top: 2px; }

/* ── Card ──────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); }

/* ── Drop Zone ─────────────────────────────────────────────── */
.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 36px 24px;
    text-align: center;
    background: var(--surface2);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--accent2);
    background: var(--accent2-light);
    transform: scale(1.005);
}
.drop-icon { font-size: 2.6em; margin-bottom: 10px; display: block; }
.drop-zone p { color: var(--text2); font-size: 0.92em; }
.link { color: var(--accent2); cursor: pointer; text-decoration: underline; font-weight: 500; }
.drop-hint { font-size: 0.76em; color: var(--text3); margin-top: 6px; }

/* ── Preview Box ───────────────────────────────────────────── */
.preview-box {
    background: var(--surface2);
    border-radius: var(--radius);
    padding: 14px;
    border: 1px solid var(--border);
    text-align: center;
    animation: fadeUp 0.2s ease;
}
.preview-box img { max-width: 100%; max-height: 220px; border-radius: var(--radius-sm); object-fit: contain; box-shadow: var(--shadow-sm); }

/* ── File Info ─────────────────────────────────────────────── */
.file-info { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; margin-top: 12px; }
.file-info span {
    background: var(--surface);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-size: 0.78em;
    color: var(--text2);
    display: flex; align-items: center; gap: 4px;
}
.file-info strong { color: var(--accent); font-weight: 600; }

/* ── Options Panel ─────────────────────────────────────────── */
.options-panel {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: flex-end;
}
.opt-group { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.opt-group label { font-size: 0.78em; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }
.opt-group select,
.opt-group input[type="number"],
.opt-group input[type="text"] {
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.opt-group select:focus, .opt-group input:focus {
    outline: none;
    border-color: var(--accent2);
    box-shadow: 0 0 0 3px var(--accent2-light);
}
.opt-group input[type="color"] {
    width: 52px; height: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer; padding: 3px;
    background: var(--surface);
}
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.88em; color: var(--text2); cursor: pointer; padding: 8px 0; }
.checkbox-row input[type="checkbox"] { accent-color: var(--accent2); width: 16px; height: 16px; cursor: pointer; }

/* ── Slider ────────────────────────────────────────────────── */
.slider-row { width: 100%; padding: 4px 0; }
.slider-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.82em; color: var(--text2); margin-bottom: 6px; font-weight: 500; }
.slider-label strong { color: var(--accent2); }
input[type="range"] { width: 100%; accent-color: var(--accent2); height: 6px; cursor: pointer; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }

.primary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--accent2), var(--accent2-dark));
    color: white; font-size: 0.97em; font-weight: 600;
    padding: 13px 28px; border: none; border-radius: var(--radius-sm);
    cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
    letter-spacing: 0.2px; min-width: 180px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.primary-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37,99,235,0.45); }
.primary-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.primary-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.secondary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--surface2); color: var(--text);
    border: 1.5px solid var(--border);
    padding: 9px 18px; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 0.88em; font-weight: 500;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.secondary-btn:hover { background: var(--accent2-light); border-color: var(--accent2); color: var(--accent2); transform: translateY(-1px); }

.action-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }

/* ── Progress Bar ──────────────────────────────────────────── */
.progress-bar {
    width: 100%; background: var(--surface3); border-radius: 20px;
    height: 26px; position: relative; overflow: hidden; border: 1px solid var(--border);
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 20px; width: 0%; transition: width 0.25s ease;
}
.progress-bar span {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75em; font-weight: 700; color: var(--text);
    mix-blend-mode: difference;
}

/* ── OCR Textarea ──────────────────────────────────────────── */
#ocrText {
    width: 100%; margin-top: 14px; padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 0.9em; resize: vertical;
    background: var(--surface2); color: var(--text);
    line-height: 1.75; transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 200px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
#ocrText:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 3px var(--accent2-light); }

/* ── Result stats bar ──────────────────────────────────────── */
.result-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: 0.72em;
    color: var(--text3);
    font-weight: 500;
}
.result-stats strong { color: var(--accent2); }
.result-stats:empty { display: none; }

/* ── Size Info ─────────────────────────────────────────────── */
.size-info {
    display: flex; justify-content: center; gap: 0;
    margin-top: 14px; border-radius: var(--radius-sm);
    overflow: hidden; border: 1px solid var(--border);
}
.size-info span { flex: 1; text-align: center; padding: 10px 8px; font-size: 0.82em; color: var(--text2); background: var(--surface2); border-right: 1px solid var(--border); }
.size-info span:last-child { border-right: none; }
.size-info strong { display: block; font-size: 1.05em; color: var(--accent); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════
   TEXT STUDIO
   ══════════════════════════════════════════════════════════════ */

/* Header */
.ts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}
.ts-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ts-icon-wrap {
    width: 46px; height: 46px;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35em;
    flex-shrink: 0;
}
[data-theme="dark"] .ts-icon-wrap { background: rgba(99,102,241,0.18); }
.ts-header h2 { font-size: 1.3em; font-weight: 700; color: var(--text); line-height: 1.2; }
.ts-header p  { font-size: 0.82em; color: var(--text2); margin-top: 2px; }

/* Mode tabs */
.ts-mode-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ts-mode-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
}
.ts-mode-btn:hover { border-color: var(--accent2); color: var(--accent2); background: var(--accent2-light); }
.ts-mode-btn.active {
    background: linear-gradient(135deg, var(--accent2), var(--accent2-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}

/* Panels */
.ts-panel { display: none; }
.ts-panel.active { display: block; animation: fadeUp 0.25s ease; }

/* Editor card */
.ts-editor-wrap {
    padding: 0;
    overflow: hidden;
    border: 1.5px solid var(--border);
}

/* Toolbar */
.ts-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
.ts-toolbar-group {
    display: flex;
    align-items: center;
    gap: 3px;
}
.ts-toolbar-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}
.ts-select {
    padding: 5px 8px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: 0.78em;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: border-color 0.2s;
}
.ts-select:focus { outline: none; border-color: var(--accent2); }
.ts-select-sm { width: 58px; }
.ts-tb-btn {
    padding: 5px 9px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text2);
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.2;
}
.ts-tb-btn:hover { background: var(--accent2-light); border-color: var(--accent2); color: var(--accent2); }
.ts-tb-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }
.ts-tb-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.ts-color-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--text2);
    transition: border-color 0.2s;
}
.ts-color-wrap:hover { border-color: var(--accent2); }
.ts-color-wrap input[type="color"] {
    width: 20px; height: 20px;
    border: none; padding: 0;
    background: none; cursor: pointer;
    border-radius: 4px;
}

/* Editor area */
.ts-editor {
    min-height: 320px;
    max-height: 520px;
    overflow-y: auto;
    padding: 20px 22px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95em;
    line-height: 1.75;
    color: var(--text);
    background: var(--surface);
    outline: none;
    caret-color: var(--accent2);
}
.ts-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text3);
    pointer-events: none;
}
.ts-editor:focus { background: var(--surface); }

/* Status bar */
.ts-statusbar {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    font-size: 0.72em;
    color: var(--text3);
    font-weight: 500;
}

/* Export bar */
.ts-export-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
}
.ts-export-label {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
.ts-export-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.ts-export-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Plus Jakarta Sans', sans-serif;
    min-width: 72px;
    flex: 1;
}
.ts-export-btn:hover {
    border-color: var(--accent2);
    background: var(--accent2-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.ts-export-btn-primary {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-color: #fca5a5;
}
[data-theme="dark"] .ts-export-btn-primary { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.3); }
.ts-export-btn-primary:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); border-color: transparent; }
.ts-export-btn-primary:hover .ts-exp-name,
.ts-export-btn-primary:hover .ts-exp-desc { color: #fff; }
.ts-exp-icon { font-size: 1.3em; }
.ts-exp-name { font-size: 0.82em; font-weight: 700; color: var(--text); }
.ts-exp-desc { font-size: 0.68em; color: var(--text3); }

/* Upload-or-paste layout */
.ts-upload-or-paste {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
}
.ts-or-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
}
.ts-or-divider span {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--surface);
    padding: 4px 6px;
    border-radius: 20px;
    border: 1px solid var(--border);
}
@media (max-width: 560px) {
    .ts-upload-or-paste { grid-template-columns: 1fr; }
    .ts-or-divider { width: 100%; }
}

/* Plain textarea (shared) */
.ts-plain-textarea {
    width: 100%;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 0.9em;
    background: var(--surface2);
    color: var(--text);
    line-height: 1.75;
    resize: vertical;
    min-height: 200px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ts-plain-textarea:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 3px var(--accent2-light); }

/* ── PDF Thumbnails ────────────────────────────────────────── */
.image-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 4px 0; }
.image-list .thumb {
    position: relative; width: 88px; text-align: center;
    background: var(--surface); border-radius: var(--radius-sm);
    padding: 6px; box-shadow: var(--shadow-sm);
    border: 1.5px solid var(--border); cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.image-list .thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent2); }
.image-list .thumb img { width: 100%; height: 68px; object-fit: cover; border-radius: 5px; }
.image-list .thumb .remove-btn {
    position: absolute; top: -6px; right: -6px;
    background: var(--danger); color: white;
    border: 2px solid var(--surface); border-radius: 50%;
    width: 20px; height: 20px; font-size: 11px;
    cursor: pointer; line-height: 16px; text-align: center; padding: 0;
    transition: transform 0.15s;
}
.image-list .thumb .remove-btn:hover { transform: scale(1.2); }
.image-list .thumb p { font-size: 0.68em; color: var(--text3); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drag-hint { text-align: center; font-size: 0.76em; color: var(--text3); margin-top: 6px; }

/* ── PDF Preview ───────────────────────────────────────────── */
.preview-label { font-size: 0.82em; font-weight: 600; color: var(--text2); text-align: center; margin: 12px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.pdf-preview-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pdf-preview-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.72em; color: var(--text3); font-weight: 500; }
.pdf-preview-item img { width: 72px; height: 90px; object-fit: cover; border-radius: 5px; border: 2px solid var(--border); box-shadow: var(--shadow-sm); }

/* ── PDF→Text thumbnail grid ───────────────────────────────── */
.p2t-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 4px 0;
}
.p2t-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.p2t-thumb canvas {
    width: 80px;
    height: 104px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    object-fit: contain;
    background: #fff;
}
.p2t-thumb span {
    font-size: 0.68em;
    color: var(--text3);
    font-weight: 500;
}

/* ── Presets ───────────────────────────────────────────────── */
.presets-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding: 4px 0; }
.presets-label { font-size: 0.76em; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; width: 100%; text-align: center; margin-bottom: 2px; }
.preset-btn {
    background: var(--surface2); border: 1.5px solid var(--border);
    color: var(--text2); padding: 5px 12px; border-radius: 20px;
    cursor: pointer; font-size: 0.78em; font-weight: 500; transition: all 0.2s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.preset-btn:hover { background: var(--accent2); color: white; border-color: var(--accent2); transform: translateY(-1px); }

/* ── Clear Row ─────────────────────────────────────────────── */
.clear-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.clear-btn {
    background: transparent;
    border: 1.5px solid var(--danger);
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.clear-btn:hover {
    background: var(--danger);
    color: #fff;
}

/* ── Notifications ─────────────────────────────────────────── */
.success-msg {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--accent); background: var(--accent-light);
    border: 1px solid #bbf7d0; border-radius: var(--radius-sm);
    padding: 10px 16px; margin-top: 14px;
    font-weight: 600; font-size: 0.9em; animation: fadeUp 0.3s ease;
}
[data-theme="dark"] .success-msg { border-color: #166534; }

.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ── Merge Tool ────────────────────────────────────────────── */
.merge-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.merge-slot { display: flex; flex-direction: column; }
.merge-slot-label { font-size: 0.78em; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; text-align: center; }
.merge-slot .drop-zone { padding: 22px 10px; }
.merge-slot .drop-zone .drop-icon { font-size: 1.8em; margin-bottom: 6px; }
.merge-slot .drop-zone p { font-size: 0.82em; }
.merge-slot .preview-box img { max-height: 140px; }
@media (max-width: 500px) { .merge-uploads { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   HOME / HERO SECTION — Advanced
   ══════════════════════════════════════════════════════════════ */

.home-section {
    display: none;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Animated canvas background */
#heroCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
[data-theme="dark"] #heroCanvas { opacity: 0.7; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 80px 24px 52px;
    max-width: 820px;
    margin: 0 auto;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(110,231,183,0.08);
    border: 1px solid rgba(110,231,183,0.25);
    border-radius: 30px;
    padding: 6px 18px;
    font-size: 0.78em;
    font-weight: 600;
    color: #6ee7b7;
    letter-spacing: 0.3px;
    margin-bottom: 28px;
    animation: fadeUp 0.6s 0.1s ease both;
}
[data-theme="light"] .hero-eyebrow {
    background: rgba(22,163,74,0.08);
    border-color: rgba(22,163,74,0.2);
    color: #16a34a;
}
.eyebrow-dot {
    width: 6px; height: 6px;
    background: currentColor;
    border-radius: 50%;
    animation: pulse 2s ease infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

.hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 22px;
    animation: fadeUp 0.6s 0.2s ease both;
}
.ht-line1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2em, 5.5vw, 4em);
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -1.5px;
}
.ht-line2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2em, 5.5vw, 4em);
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -1.5px;
}
.ht-gradient {
    background: linear-gradient(135deg, #16a34a 0%, #0ea5e9 50%, #6366f1 100%);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradShift 5s ease infinite alternate;
}
@keyframes gradShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.hero-desc {
    font-size: 1.05em;
    color: var(--text2);
    max-width: 580px;
    margin: 0 auto 32px;
    line-height: 1.75;
    animation: fadeUp 0.6s 0.3s ease both;
}

.hero-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    animation: fadeUp 0.6s 0.4s ease both;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 28px;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.97em;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.18s, box-shadow 0.2s;
    letter-spacing: 0.1px;
}
.hero-cta-primary {
    background: linear-gradient(135deg, #16a34a, #0ea5e9);
    color: #fff;
    box-shadow: 0 6px 24px rgba(14,165,233,0.35);
    position: relative;
    overflow: hidden;
}
.hero-cta-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    opacity: 0;
    transition: opacity 0.3s;
}
.hero-cta-primary:hover::before { opacity: 1; }
.hero-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,165,233,0.45); }
.hero-cta-primary span { position: relative; z-index: 1; }
.btn-arrow { font-size: 1.1em; transition: transform 0.2s; position: relative; z-index: 1; }
.hero-cta-primary:hover .btn-arrow { transform: translateX(4px); }
.btn-icon { position: relative; z-index: 1; }

.hero-cta-ghost {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--border);
}
.hero-cta-ghost:hover {
    border-color: var(--accent2);
    color: var(--accent2);
    transform: translateY(-2px);
    background: var(--accent2-light);
}

.hero-note {
    font-size: 0.76em;
    color: var(--text3);
    animation: fadeUp 0.6s 0.5s ease both;
}

/* ── Floating chips ────────────────────────────────────────── */
.tool-chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0 24px 52px;
    max-width: 700px;
    margin: 0 auto;
}
.chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 7px 16px;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text2);
    box-shadow: var(--shadow-sm);
    animation: chipFloat linear infinite;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.chip:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-md); border-color: var(--accent2); color: var(--accent2); }
.chip-1 { animation-duration: 6s; animation-delay: 0s; }
.chip-2 { animation-duration: 7s; animation-delay: 0.5s; }
.chip-3 { animation-duration: 5.5s; animation-delay: 1s; }
.chip-4 { animation-duration: 6.5s; animation-delay: 1.5s; }
.chip-5 { animation-duration: 7.5s; animation-delay: 0.8s; }
.chip-6 { animation-duration: 6s; animation-delay: 1.2s; }
.chip-7 { animation-duration: 5s; animation-delay: 0.3s; }
.chip-8 { animation-duration: 6.8s; animation-delay: 0.7s; }
@keyframes chipFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* ── Stats row ─────────────────────────────────────────────── */
.stats-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 680px;
    margin: 0 auto 72px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding: 0;
}
.stat-item {
    flex: 1;
    text-align: center;
    padding: 22px 16px;
    position: relative;
}
.stat-val {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2em;
    font-weight: 800;
    background: linear-gradient(135deg, #16a34a, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
}
.stat-val-plus {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4em;
    font-weight: 800;
    background: linear-gradient(135deg, #16a34a, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    vertical-align: super;
}
.stat-lbl {
    display: block;
    font-size: 0.72em;
    color: var(--text3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
    flex-shrink: 0;
}

/* ── Section label ─────────────────────────────────────────── */
.features-section, .how-section {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto 72px;
    padding: 0 24px;
}
.section-label {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 36px;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.sl-line {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border));
}
.sl-line:last-child { background: linear-gradient(90deg, var(--border), transparent); }

/* ── Feature cards ─────────────────────────────────────────── */
.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.home-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 26px 22px 20px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s, border-color 0.2s;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.home-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* glow effect on hover */
.card-glow {
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #16a34a33, #0ea5e933, #6366f133);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}
.home-card:hover .card-glow { opacity: 1; }

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.card-icon-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5em;
    flex-shrink: 0;
}
.ci-ocr     { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.ci-pdf     { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.ci-compress{ background: linear-gradient(135deg, #fef3c7, #fde68a); }
.ci-resize  { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.ci-convert { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.ci-wm      { background: linear-gradient(135deg, #cffafe, #a5f3fc); }
.ci-merge   { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
.ci-share   { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
[data-theme="dark"] .ci-ocr     { background: rgba(22,163,74,0.15); }
[data-theme="dark"] .ci-pdf     { background: rgba(37,99,235,0.15); }
[data-theme="dark"] .ci-compress{ background: rgba(217,119,6,0.15); }
[data-theme="dark"] .ci-resize  { background: rgba(219,39,119,0.15); }
[data-theme="dark"] .ci-convert { background: rgba(99,102,241,0.15); }
[data-theme="dark"] .ci-wm      { background: rgba(6,182,212,0.15); }
[data-theme="dark"] .ci-merge   { background: rgba(234,88,12,0.15); }
[data-theme="dark"] .ci-share   { background: rgba(14,165,233,0.15); }

.card-badge {
    font-size: 0.68em;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}
[data-theme="dark"] .card-badge { border-color: #166534; }
.card-badge-new {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: #fde68a;
}
[data-theme="dark"] .card-badge-new { background: rgba(217,119,6,0.2); color: #fbbf24; border-color: rgba(217,119,6,0.3); }

.home-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1em;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}
.home-card p {
    font-size: 0.82em;
    color: var(--text2);
    line-height: 1.65;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.card-tech {
    font-size: 0.7em;
    font-weight: 600;
    color: var(--text3);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px;
}
.card-arrow {
    font-size: 1em;
    color: var(--text3);
    transition: transform 0.2s, color 0.2s;
}
.home-card:hover .card-arrow { transform: translateX(4px); color: var(--accent2); }

.home-card-featured {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .home-card-featured { border-color: rgba(99,102,241,0.25); }

/* ── How it works ──────────────────────────────────────────── */
.how-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.how-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    flex: 1;
    min-width: 180px;
    max-width: 240px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.how-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.how-num {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #16a34a, #0ea5e9);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 4px 14px rgba(14,165,233,0.3);
}
.how-num span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1em;
    font-weight: 800;
    color: #fff;
}
.how-step h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1em;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.how-step p { font-size: 0.8em; color: var(--text2); line-height: 1.6; }
.how-connector {
    flex-shrink: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.how-connector span {
    display: block;
    width: 28px; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 2px;
    position: relative;
}
.how-connector span::after {
    content: '';
    position: absolute;
    right: -4px; top: -3px;
    border: 4px solid transparent;
    border-left-color: var(--accent2);
}
@media (max-width: 600px) { .how-connector { display: none; } .how-steps { gap: 12px; } }

/* ── Trust section ─────────────────────────────────────────── */
.trust-section {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 700px;
    margin: 0 auto 52px;
    padding: 0 24px;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82em;
    color: var(--text2);
    font-weight: 500;
    padding: 8px 16px;
}
.trust-icon { font-size: 1.1em; }
.trust-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
@media (max-width: 560px) { .trust-sep { display: none; } .trust-item { width: 100%; justify-content: center; } }

/* ── Tech section ──────────────────────────────────────────── */
.tech-section {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 28px 24px 60px;
    max-width: 600px;
    margin: 0 auto;
}
.tech-title {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}
.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.tech-pills span {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.8em;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}
.tech-pills span:hover { background: var(--accent2-light); color: var(--accent2); border-color: var(--accent2); transform: translateY(-2px); }

/* ── Share Tool ────────────────────────────────────────────── */
.share-api-hint {
    font-size: 0.74em;
    color: var(--text3);
    margin-top: 10px;
    text-align: center;
}
.share-result-card {
    border-color: rgba(22,163,74,0.3);
    background: var(--surface);
}
.share-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 16px;
}
.share-result-icon { font-size: 1.2em; }
.share-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.share-link-input {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    background: var(--surface2);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', monospace;
    min-width: 0;
    transition: border-color 0.2s;
}
.share-link-input:focus { outline: none; border-color: var(--accent2); }
.share-copy-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.share-copy-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.share-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    border: none;
    color: #fff;
    transition: opacity 0.2s, transform 0.15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.share-social-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.share-wa { background: #25d366; }
.share-tg { background: #0088cc; }
.share-tw { background: #000; }
.share-extra-links { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.share-extra-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-extra-label { font-size: 0.74em; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; min-width: 130px; }
.share-extra-item .share-link-input { font-size: 0.78em; }
.share-extra-item .share-copy-btn { padding: 7px 10px; font-size: 0.8em; }

/* ══════════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════════ */
.about-hero, .contact-hero {
    text-align: center;
    padding: 52px 24px 40px;
    max-width: 680px;
    margin: 0 auto 48px;
}
.about-badge {
    display: inline-block;
    background: var(--accent2-light);
    color: var(--accent2);
    border: 1px solid rgba(37,99,235,0.2);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.about-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8em, 4vw, 2.6em);
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 16px;
}
.about-title-accent {
    background: linear-gradient(135deg, #16a34a, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.about-subtitle {
    font-size: 1em;
    color: var(--text2);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* Value cards */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    max-width: 900px;
    margin: 0 auto 52px;
    padding: 0 24px;
}
.about-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}
.about-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.about-card-icon { font-size: 2em; margin-bottom: 14px; }
.about-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1em; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.about-card p  { font-size: 0.82em; color: var(--text2); line-height: 1.65; }

/* Tools list */
.about-tools-section {
    max-width: 760px;
    margin: 0 auto 52px;
    padding: 0 24px;
}
.about-section-label {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 24px;
}
.about-tools-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.about-tool-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.about-tool-row:last-child { border-bottom: none; }
.about-tool-row:hover { background: var(--surface2); }
.atr-icon { font-size: 1.4em; width: 36px; text-align: center; flex-shrink: 0; }
.atr-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.atr-info strong { font-size: 0.88em; font-weight: 600; color: var(--text); }
.atr-info span   { font-size: 0.76em; color: var(--text3); }
.atr-badge {
    font-size: 0.68em;
    font-weight: 600;
    color: var(--accent2);
    background: var(--accent2-light);
    border: 1px solid rgba(37,99,235,0.15);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Developer card */
.about-dev-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 760px;
    margin: 0 auto 52px;
    padding: 28px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.about-dev-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a34a, #0ea5e9);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3em;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(14,165,233,0.3);
}
.about-dev-info h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.1em; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.about-dev-info p  { font-size: 0.84em; color: var(--text2); line-height: 1.65; margin-bottom: 16px; }
.about-dev-links   { display: flex; gap: 10px; flex-wrap: wrap; }
.about-dev-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.82em; font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--border);
    color: var(--text2);
    background: var(--surface2);
    transition: all 0.2s;
}
.about-dev-link:hover { border-color: var(--accent2); color: var(--accent2); background: var(--accent2-light); }
.about-dev-link-cta {
    background: linear-gradient(135deg, var(--accent2), var(--accent2-dark));
    color: #fff; border-color: transparent;
}
.about-dev-link-cta:hover { opacity: 0.88; color: #fff; background: linear-gradient(135deg, var(--accent2), var(--accent2-dark)); }

/* Nav static links */
.nav-static-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Footer link button */
.footer-link-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.78em;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    padding: 0;
    transition: color 0.2s;
}
.footer-link-btn:hover { color: #6ee7b7; }

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════════ */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto 52px;
    padding: 0 24px;
    align-items: start;
}

/* Form */
.contact-form-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.cf-group { display: flex; flex-direction: column; gap: 5px; }
.cf-group label {
    font-size: 0.78em; font-weight: 600;
    color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px;
}
.cf-group input,
.cf-group select,
.cf-group textarea {
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    background: var(--surface2);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.cf-group input:focus,
.cf-group select:focus,
.cf-group textarea:focus {
    outline: none;
    border-color: var(--accent2);
    box-shadow: 0 0 0 3px var(--accent2-light);
}
.cf-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.cf-error { font-size: 0.76em; color: var(--danger); font-weight: 500; min-height: 16px; }
.cf-submit { margin-top: 4px; }
.cf-success {
    background: var(--accent-light);
    border: 1px solid #bbf7d0;
    color: var(--accent);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 0.88em;
    font-weight: 600;
    text-align: center;
    animation: fadeUp 0.3s ease;
}
[data-theme="dark"] .cf-success { border-color: #166534; }
.cf-note { font-size: 0.72em; color: var(--text3); text-align: center; }
.cf-note a { color: var(--accent2); text-decoration: none; }
.cf-note a:hover { text-decoration: underline; }

/* Info cards */
.contact-info { display: flex; flex-direction: column; gap: 12px; }
.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}
.contact-info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cic-icon { font-size: 1.5em; flex-shrink: 0; margin-top: 2px; }
.contact-info-card h4 { font-size: 0.82em; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.contact-info-card a,
.contact-info-card span { font-size: 0.82em; color: var(--text2); text-decoration: none; word-break: break-all; }
.contact-info-card a:hover { color: var(--accent2); text-decoration: underline; }

/* FAQ */
.contact-faq { margin-top: 8px; }
.contact-faq-title {
    font-size: 0.78em; font-weight: 700;
    color: var(--text3); text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 10px;
}
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    overflow: hidden;
    background: var(--surface);
}
.faq-q {
    width: 100%; text-align: left;
    padding: 12px 14px;
    background: none; border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.84em; font-weight: 600;
    color: var(--text); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    transition: background 0.15s;
}
.faq-q::after { content: '▾'; font-size: 0.8em; color: var(--text3); transition: transform 0.2s; }
.faq-q:hover { background: var(--surface2); }
.faq-item.open .faq-q::after { transform: rotate(180deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    font-size: 0.82em;
    color: var(--text2);
    line-height: 1.65;
    padding: 0 14px;
    transition: max-height 0.28s ease, padding 0.28s ease;
}
.faq-item.open .faq-a { max-height: 200px; padding: 0 14px 12px; }

/* Responsive — about & contact */
@media (max-width: 860px) {
    .contact-layout { grid-template-columns: 1fr; }
    .about-grid { padding: 0 14px; }
    .about-tools-section, .about-dev-card { padding-left: 14px; padding-right: 14px; }
    .contact-layout { padding: 0 14px; }
    .about-dev-card { gap: 18px; }
}
@media (max-width: 640px) {
    .about-hero, .contact-hero { padding: 36px 16px 28px; }
    .about-title { font-size: clamp(1.5em, 7vw, 2em); }
    .about-dev-card { flex-direction: column; align-items: center; text-align: center; padding: 22px 18px; }
    .about-dev-links { justify-content: center; }
    .about-dev-contacts { align-items: stretch; }
    .about-dev-name-row { justify-content: center; }
    .about-tool-row { padding: 12px 14px; gap: 10px; }
    .atr-badge { display: none; }
    .contact-layout { padding: 0 12px; }
    .contact-social-row { gap: 6px; }
    .csocial-btn { font-size: 0.78em; padding: 7px 14px; }
}
@media (max-width: 400px) {
    .contact-social-row { flex-direction: column; }
    .csocial-btn { justify-content: center; width: 100%; }
    .contact-info-card { padding: 12px 14px; }
    .cic-icon { width: 36px; height: 36px; }
    .logo-name     { font-size: 0.88em; }
    .home-grid     { grid-template-columns: 1fr; }
    .home-card p   { display: none; }
    .stats-row     { margin: 0 10px 40px; }
    .stat-item     { min-width: 50%; }
    .hero-btns     { gap: 8px; }
    .tab-section:not(.home-section) { width: 98%; margin: 12px auto 48px; }
    .about-grid    { grid-template-columns: 1fr; }
    .card          { padding: 12px; }
    .drop-zone     { padding: 18px 10px; }
    .header-inner  { padding: 0 10px; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — Advanced compact
   ══════════════════════════════════════════════════════════════ */
footer {
    background: #060c14;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #6ee7b7, #60a5fa, #a78bfa, transparent);
    opacity: 0.6;
}
[data-theme="light"] footer { background: #0a1628; }

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.footer-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95em;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -0.3px;
}
.fl-multi { color: rgba(255,255,255,0.85); }
.fl-mian {
    background: linear-gradient(90deg, #6ee7b7 0%, #60a5fa 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fl-kit { color: rgba(255,255,255,0.4); font-size: 0.85em; font-weight: 500; }

.footer-tagline {
    font-size: 0.72em;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-center {
    flex-shrink: 0;
}
.footer-copy {
    font-size: 0.72em;
    color: rgba(255,255,255,0.25);
    white-space: nowrap;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78em;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.footer-link:hover { color: #6ee7b7; }
.footer-link svg { opacity: 0.7; }
.footer-link:hover svg { opacity: 1; }

.scroll-top {
    width: 32px; height: 32px;
    background: rgba(110,231,183,0.1);
    border: 1px solid rgba(110,231,183,0.2);
    border-radius: 50%;
    color: #6ee7b7;
    text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9em; font-weight: 700; flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
}
.scroll-top:hover { background: rgba(110,231,183,0.22); transform: translateY(-2px); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet landscape (≤1024px) ────────────────────────────── */
@media (max-width: 1024px) {
    .home-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
    .features-section, .how-section { padding: 0 16px; }
    .hero { padding: 72px 24px 40px; }
}

/* ── Tablet / nav collapse (≤860px) ───────────────────────── */
@media (max-width: 860px) {
    .tabs-nav  { display: none; }
    .hamburger { display: flex; }

    .hero { padding: 64px 20px 36px; }
    .ht-line1, .ht-line2 { font-size: clamp(1.9em, 6vw, 2.8em); }
    .hero-desc { font-size: 0.94em; max-width: 520px; margin-left: auto; margin-right: auto; }

    .stats-row { max-width: 560px; }
    .features-section, .how-section { padding: 0 14px; }
    .home-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

    .tab-section:not(.home-section) { width: 94%; margin: 28px auto 70px; }
}

/* ── Mobile (≤640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
    /* Header */
    .header-inner  { height: 52px; padding: 0 14px; gap: 10px; }
    .logo-name     { font-size: 1em; }
    .logo-kit      { display: none; }

    /* Hero */
    .hero          { padding: 48px 16px 32px; }
    .ht-line1, .ht-line2 { font-size: clamp(1.6em, 8vw, 2.2em); }
    .hero-desc     { font-size: 0.88em; padding: 0 4px; }
    .hero-btns     { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-cta      { justify-content: center; width: 100%; }
    .hero-note     { font-size: 0.72em; }

    /* Chips */
    .tool-chips    { padding: 0 12px 36px; gap: 7px; }
    .chip          { font-size: 0.74em; padding: 5px 12px; }

    /* Stats */
    .stats-row     { flex-wrap: wrap; border-radius: var(--radius-lg); max-width: 100%; margin: 0 16px 48px; }
    .stat-item     { min-width: 50%; padding: 16px 10px; }
    .stat-val      { font-size: 1.6em; }
    .stat-divider  { display: none; }

    /* Feature cards */
    .features-section, .how-section { padding: 0 12px; margin-bottom: 48px; }
    .home-grid     { grid-template-columns: 1fr 1fr; gap: 10px; }
    .home-card     { padding: 16px 12px 14px; border-radius: var(--radius-lg); }
    .home-card h3  { font-size: 0.9em; }
    .home-card p   { font-size: 0.76em; margin-bottom: 10px; }
    .card-icon-wrap{ width: 38px; height: 38px; font-size: 1.2em; border-radius: 10px; }
    .card-tech     { display: none; }
    .tool-category-header { font-size: 0.82em; padding: 6px 14px; }

    /* How it works */
    .how-steps     { gap: 10px; }
    .how-connector { display: none; }
    .how-step      { min-width: 140px; padding: 20px 16px; }

    /* Tool sections */
    .tab-section:not(.home-section) { width: 96%; margin: 16px auto 56px; }
    .section-header { gap: 10px; margin-bottom: 18px; }
    .section-header h2 { font-size: 1.05em; }
    .section-icon  { width: 38px; height: 38px; font-size: 1.1em; border-radius: 10px; }
    .card          { padding: 16px; }
    .options-panel { padding: 12px; gap: 10px; flex-wrap: wrap; }
    .opt-group     { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
    .file-info-row { flex-wrap: wrap; gap: 6px; }

    /* Merge tool */
    .merge-uploads { grid-template-columns: 1fr; }

    /* GIF frames */
    .gif-frame-list { gap: 8px; }
    .thumb          { width: 80px; }
    .thumb img      { height: 60px; }

    /* PDF thumbnails */
    .p2t-thumb-grid { gap: 8px; }
    .p2t-thumb canvas { max-width: 80px; }

    /* Result stats */
    .result-stats  { flex-wrap: wrap; gap: 8px; font-size: 0.78em; }

    /* Buttons */
    .primary-btn   { width: 100%; min-width: unset; padding: 12px 20px; }
    .secondary-btn { flex: 1; font-size: 0.82em; padding: 8px 12px; }
    .action-row    { gap: 6px; flex-wrap: wrap; }
    .btn-row       { gap: 8px; }

    /* Size info */
    .size-info     { flex-direction: column; }
    .size-info span{ border-right: none; border-bottom: 1px solid var(--border); }
    .size-info span:last-child { border-bottom: none; }

    /* Text Studio */
    .ts-header     { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ts-mode-tabs  { width: 100%; }
    .ts-mode-btn   { flex: 1; text-align: center; padding: 8px 10px; font-size: 0.78em; }
    .ts-toolbar    { gap: 3px; padding: 8px 10px; }
    .ts-export-bar { flex-direction: column; gap: 10px; padding: 12px 14px; }
    .ts-export-btns{ width: 100%; }
    .ts-export-btn { padding: 10px 12px; }

    /* Share */
    .share-link-row { flex-direction: column; }
    .share-actions  { gap: 6px; }
    .share-social-btn { flex: 1; justify-content: center; font-size: 0.78em; }
    .share-extra-label { min-width: unset; width: 100%; }

    /* Footer */
    .footer-inner  { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
    .footer-tagline{ display: none; }
    .footer-center { display: none; }
    .footer-right  { width: 100%; justify-content: space-between; }
    .footer-left   { gap: 8px; }
}

/* ── Small mobile (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {
    .ht-line1, .ht-line2 { font-size: clamp(1.4em, 9vw, 1.9em); }
    .home-grid     { grid-template-columns: 1fr 1fr; gap: 8px; }
    .home-card     { padding: 14px 10px 12px; }
    .home-card h3  { font-size: 0.84em; }
    .home-card p   { display: none; }
    .stat-item     { min-width: 50%; padding: 14px 8px; }
    .stat-val      { font-size: 1.4em; }
    .ts-mode-btn   { font-size: 0.72em; padding: 7px 6px; }
    .drop-zone     { padding: 24px 14px; }
    .drop-icon     { font-size: 2em; }
    .how-step      { min-width: 120px; padding: 16px 12px; }
    .opt-group     { min-width: 100%; flex: 1 1 100%; }
    .action-row    { flex-direction: column; }
    .secondary-btn { width: 100%; justify-content: center; }
    .about-grid    { grid-template-columns: 1fr 1fr; }
    .contact-info-card { gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   TOOL CATEGORY SECTIONS (Homepage grouped layout)
   ══════════════════════════════════════════════════════════════ */
.tool-category {
    margin-bottom: 52px;
}

.tool-category-header {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    border-radius: 30px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88em;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 20px;
    border: 1.5px solid transparent;
}
.tc-icon { font-size: 1.1em; }

.tc-image {
    background: linear-gradient(135deg, rgba(22,163,74,0.1), rgba(14,165,233,0.1));
    border-color: rgba(22,163,74,0.25);
    color: var(--accent);
}
[data-theme="dark"] .tc-image { background: rgba(22,163,74,0.08); }

.tc-pdf {
    background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(99,102,241,0.1));
    border-color: rgba(37,99,235,0.25);
    color: var(--accent2);
}
[data-theme="dark"] .tc-pdf { background: rgba(37,99,235,0.08); }

.tc-media {
    background: linear-gradient(135deg, rgba(217,119,6,0.1), rgba(239,68,68,0.1));
    border-color: rgba(217,119,6,0.25);
    color: #d97706;
}
[data-theme="dark"] .tc-media { background: rgba(217,119,6,0.08); color: #fbbf24; }

/* New card icon colors */
.ci-pdf2img  { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.ci-gif      { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.ci-videogif { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.ci-sticker  { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
[data-theme="dark"] .ci-pdf2img  { background: rgba(14,165,233,0.15); }
[data-theme="dark"] .ci-gif      { background: rgba(217,119,6,0.15); }
[data-theme="dark"] .ci-videogif { background: rgba(220,38,38,0.15); }
[data-theme="dark"] .ci-sticker  { background: rgba(139,92,246,0.15); }

/* ── Nav separator ─────────────────────────────────────────── */
.nav-sep {
    color: rgba(255,255,255,0.15);
    font-size: 0.7em;
    padding: 0 2px;
    user-select: none;
    flex-shrink: 0;
}

/* ── Drawer group labels ────────────────────────────────────── */
.drawer-group-label {
    font-size: 0.68em;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 10px 14px 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}

/* ── PDF → Image pages grid ─────────────────────────────────── */
.pdf2img-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.pdf2img-page-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    width: 130px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pdf2img-page-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent2); }
.pdf2img-page-item img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    border-radius: 5px;
    background: #fff;
    border: 1px solid var(--border);
}
.pdf2img-page-item p {
    font-size: 0.72em;
    color: var(--text3);
    font-weight: 600;
    text-align: center;
}

/* ── Share QR code ──────────────────────────────────────────── */
.share-qr-wrap {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
#shareQrCode img,
#shareQrCode canvas {
    border-radius: 8px;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════════════════════
   DROPDOWN NAV MENUS
   ══════════════════════════════════════════════════════════════ */

/* Dropdown wrapper */
.nav-dropdown {
    position: relative;
    z-index: 400;
}

/* The top-level menu trigger button */
.nav-menu-btn {
    background: transparent;
    color: rgba(255,255,255,0.55);
    border: none;
    padding: 7px 13px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8em;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.1px;
}
.nav-menu-btn:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.08);
}
.nav-menu-btn.active {
    color: #fff;
    background: rgba(110,231,183,0.12);
    font-weight: 700;
}

/* Chevron rotates when open */
.nav-chevron {
    font-size: 0.7em;
    transition: transform 0.2s ease;
    display: inline-block;
    opacity: 0.6;
}
.nav-dropdown.open .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Dropdown panel */
.nav-dropdown-panel {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 260px;
    background: #0d1424;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
    z-index: 9999;
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.22,1,.36,1), visibility 0.2s;
}

/* Top caret arrow */
.nav-dropdown-panel::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #0d1424;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px 0 0 0;
}

.nav-dropdown.open .nav-dropdown-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* CSS hover fallback */
@media (hover: hover) {
    .nav-dropdown:hover .nav-dropdown-panel {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown:hover .nav-chevron {
        transform: rotate(180deg);
        opacity: 1;
    }
}

/* Panel header */
.ndp-header {
    padding: 12px 16px 10px;
    font-size: 0.67em;
    font-weight: 700;
    color: rgba(255,255,255,0.28);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
}

/* Each item in the dropdown */
.ndp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 16px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
}
.ndp-item:last-child { border-bottom: none; }
.ndp-item:hover {
    background: rgba(110,231,183,0.07);
    border-left-color: #6ee7b7;
}
.ndp-item:hover .ndp-text strong {
    color: #6ee7b7;
}
.ndp-item:hover .ndp-icon {
    background: rgba(110,231,183,0.15);
}

.ndp-icon {
    font-size: 1.1em;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 9px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ndp-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ndp-text strong {
    font-size: 0.84em;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    transition: color 0.15s;
    line-height: 1.2;
}
.ndp-text small {
    font-size: 0.71em;
    color: rgba(255,255,255,0.32);
    line-height: 1.3;
}

/* Keep hamburger breakpoint in main responsive section above */

/* ══════════════════════════════════════════════════════════════
   ABOUT — Developer name row + role badge
   ══════════════════════════════════════════════════════════════ */
.about-dev-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.about-dev-name-row h3 { margin-bottom: 0; }
.about-dev-role {
    display: inline-block;
    background: linear-gradient(135deg, rgba(22,163,74,0.15), rgba(14,165,233,0.15));
    color: var(--accent2);
    border: 1px solid rgba(37,99,235,0.2);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   ABOUT — Developer contact details
   ══════════════════════════════════════════════════════════════ */
.about-dev-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.adc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}
.adc-item:hover { border-color: var(--accent2); }
.adc-icon { font-size: 1em; flex-shrink: 0; width: 20px; text-align: center; }
.adc-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.adc-label { font-size: 0.68em; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
.adc-text a {
    font-size: 0.82em;
    font-weight: 500;
    color: var(--text2);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adc-text a:hover { color: var(--accent2); }

/* ══════════════════════════════════════════════════════════════
   CONTACT — Colored icon wrappers
   ══════════════════════════════════════════════════════════════ */
.cic-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cic-wa    { background: rgba(37,211,102,0.12); color: #16a34a; }
.cic-email { background: rgba(37,99,235,0.1);   color: var(--accent2); }
.cic-web   { background: rgba(99,102,241,0.1);  color: #6366f1; }
.cic-gh    { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); }
[data-theme="dark"] .cic-gh { background: rgba(255,255,255,0.08); }

/* ══════════════════════════════════════════════════════════════
   CONTACT — Social row buttons
   ══════════════════════════════════════════════════════════════ */
.contact-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--border);
}
.csocial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.82em;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all 0.2s;
    color: #fff;
    letter-spacing: 0.2px;
}
.csocial-li  { background: #0a66c2; }
.csocial-li:hover  { background: #004182; color: #fff; }
.csocial-ig  { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.csocial-ig:hover  { opacity: 0.85; color: #fff; }
.csocial-gh  { background: #24292e; }
.csocial-gh:hover  { background: #1a1e22; color: #fff; }
.csocial-web { background: #16a34a; }
.csocial-web:hover { background: #15803d; color: #fff; }

/* end */

/* ── External Tools Reference Panel ───────────────────────── */
.ext-tools-panel {
    margin-top: 24px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.ext-tools-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
.ext-tools-icon { font-size: 1.3em; flex-shrink: 0; }
.ext-tools-header strong { display: block; font-size: 0.9em; font-weight: 700; color: var(--text); }
.ext-tools-header span { font-size: 0.78em; color: var(--text2); }

.ext-tools-group { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ext-tools-group:last-of-type { border-bottom: none; }

.ext-tools-group-label {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text3);
    margin-bottom: 10px;
}

.ext-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.ext-tool-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.ext-tool-card:hover {
    border-color: var(--accent2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.etc-name {
    font-size: 0.88em;
    font-weight: 700;
    color: var(--text);
}
.etc-desc {
    font-size: 0.72em;
    color: var(--text2);
    line-height: 1.5;
}
.etc-link {
    font-size: 0.7em;
    font-weight: 600;
    color: var(--accent2);
    margin-top: 2px;
}

.ext-tools-tip {
    padding: 12px 18px;
    font-size: 0.78em;
    color: var(--text2);
    background: var(--surface2);
    border-top: 1px solid var(--border);
    line-height: 1.6;
}

.ext-tool-static {
    cursor: default;
    opacity: 0.8;
}
.ext-tool-static:hover {
    border-color: var(--border);
    transform: none;
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   IMAGE → GIF  enhanced
   ══════════════════════════════════════════════════════════════ */

.gif-frame-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}

.gif-thumb {
    position: relative;
    width: 90px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 6px 4px;
    text-align: center;
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    user-select: none;
}
.gif-thumb:hover        { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent2); }
.gif-thumb.dragging     { opacity: 0.4; cursor: grabbing; }
.gif-thumb.drag-over    { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.gif-thumb img          { width: 100%; height: 64px; object-fit: cover; border-radius: 4px; display: block; }

.gif-thumb-remove {
    position: absolute;
    top: -7px; right: -7px;
    width: 20px; height: 20px;
    background: var(--danger);
    color: #fff;
    border: 2px solid var(--surface);
    border-radius: 50%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s;
}
.gif-thumb-remove:hover { transform: scale(1.2); }

.gif-thumb p {
    font-size: 0.68em;
    color: var(--text3);
    margin: 4px 0 2px;
    font-weight: 600;
}

.gif-thumb-delay input {
    width: 100%;
    padding: 3px 5px;
    font-size: 0.68em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface2);
    color: var(--text2);
    text-align: center;
}
.gif-thumb-delay input:focus { outline: none; border-color: var(--accent2); }

.gif-frame-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 2px;
    font-size: 0.78em;
    color: var(--text2);
    font-weight: 500;
}
.gif-drag-hint {
    color: var(--text3);
    font-size: 0.72em;
}

.gif-result-stats {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.78em;
    color: var(--text2);
    font-weight: 500;
    margin-bottom: 4px;
}
.gif-result-stats span {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px;
}

/* ══════════════════════════════════════════════════════════════
   VIDEO → GIF  enhanced
   ══════════════════════════════════════════════════════════════ */

/* YouTube notice */
.vg-yt-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8em;
    color: var(--text2);
    line-height: 1.55;
}
.vg-yt-notice span:first-child { font-size: 1.2em; flex-shrink: 0; margin-top: 1px; }
.vg-yt-notice a { color: var(--accent2); font-weight: 600; }

/* Timeline card */
.vg-timeline-card { padding: 16px 18px; }

.vg-timeline-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--text2);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.vg-trim-info {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--accent2);
    text-transform: none;
    letter-spacing: 0;
}

.vg-timeline-wrap {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface3);
    border: 1px solid var(--border);
    height: 52px;
    margin-bottom: 12px;
}

.vg-strip {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.vg-strip img {
    flex: 1;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vg-range-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.vg-range {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: all;
    cursor: ew-resize;
    margin: 0;
}
.vg-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 52px;
    background: var(--accent2);
    border-radius: 3px;
    cursor: ew-resize;
    box-shadow: 0 0 0 2px #fff;
}
.vg-range::-moz-range-thumb {
    width: 14px; height: 52px;
    background: var(--accent2);
    border-radius: 3px;
    cursor: ew-resize;
    border: 2px solid #fff;
}
.vg-range-end::-webkit-slider-thumb { background: var(--accent); }
.vg-range-end::-moz-range-thumb     { background: var(--accent); }

.vg-time-inputs {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.vg-time-inputs .opt-group { min-width: 90px; flex: 1; }

.vg-duration-badge {
    padding: 8px 14px;
    background: var(--accent2-light);
    color: var(--accent2);
    border-radius: var(--radius-sm);
    font-size: 0.82em;
    font-weight: 700;
    white-space: nowrap;
    align-self: flex-end;
    border: 1px solid var(--accent2);
}
[data-theme="dark"] .vg-duration-badge { background: rgba(37,99,235,0.15); }

/* Estimate bar */
.vg-estimate {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8em;
    font-weight: 500;
    display: none;
}
.vg-estimate:not(:empty) { display: block; }
.vg-estimate-ok   { background: var(--accent-light);  color: var(--accent);  border: 1px solid #bbf7d0; }
.vg-estimate-warn { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
[data-theme="dark"] .vg-estimate-warn { background: rgba(234,179,8,0.12); color: #fde047; border-color: rgba(234,179,8,0.3); }


/* ══════════════════════════════════════════════════════════════
   EXPERT UI UPGRADE v4 — Enhanced Visual Polish
   ══════════════════════════════════════════════════════════════ */

/* ── Enhanced CSS Variables ─────────────────────────────────── */
:root {
    --glow-blue:    0 0 24px rgba(37,99,235,0.18);
    --glow-green:   0 0 24px rgba(22,163,74,0.18);
    --glow-purple:  0 0 24px rgba(99,102,241,0.18);
    --card-hover-lift: 0 12px 36px rgba(0,0,0,0.13);
    --transition-smooth: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── Section Header — upgraded ──────────────────────────────── */
.section-header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    border-bottom: none;
}
.section-icon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--accent2-light), #ede9fe);
    border-radius: 14px;
    font-size: 1.5em;
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .section-icon {
    background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(99,102,241,0.2));
}
.section-header h2 { font-size: 1.4em; font-weight: 800; letter-spacing: -0.3px; }
.section-header p  { font-size: 0.84em; color: var(--text3); margin-top: 3px; }

/* ── Card — upgraded ────────────────────────────────────────── */
.card {
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card:hover { box-shadow: var(--card-hover-lift); transform: translateY(-1px); }
.card:hover::before { opacity: 1; }

/* ── Drop Zone — upgraded ───────────────────────────────────── */
.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 44px 28px;
    background: linear-gradient(135deg, var(--surface2) 0%, var(--surface3) 100%);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.drop-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, var(--accent2-light) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.drop-zone:hover::after, .drop-zone.dragover::after { opacity: 0.5; }
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--accent2);
    transform: scale(1.008);
    box-shadow: var(--glow-blue);
}
.drop-icon {
    font-size: 3em;
    margin-bottom: 12px;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(37,99,235,0.2));
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.drop-zone:hover .drop-icon { transform: scale(1.15) translateY(-3px); }
.drop-zone p { font-size: 0.95em; font-weight: 500; color: var(--text2); }
.drop-hint {
    font-size: 0.78em;
    color: var(--text3);
    margin-top: 8px;
    background: var(--surface);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

/* ── Primary Button — upgraded ──────────────────────────────── */
.primary-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #4f46e5 100%);
    background-size: 200% 200%;
    padding: 14px 32px;
    border-radius: 10px;
    font-size: 0.98em;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 18px rgba(37,99,235,0.4), 0 1px 0 rgba(255,255,255,0.1) inset;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.primary-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}
.primary-btn:hover:not(:disabled)::after { left: 150%; }
.primary-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(37,99,235,0.5), 0 1px 0 rgba(255,255,255,0.1) inset;
    background-position: right center;
}
.primary-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Secondary Button — upgraded ────────────────────────────── */
.secondary-btn {
    border-radius: 9px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.88em;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.secondary-btn:hover {
    background: var(--accent2-light);
    border-color: var(--accent2);
    color: var(--accent2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37,99,235,0.15);
}

/* ── Options Panel — upgraded ───────────────────────────────── */
.options-panel {
    background: linear-gradient(135deg, var(--surface2) 0%, var(--surface3) 100%);
    border-radius: var(--radius);
    padding: 18px 20px;
    gap: 16px;
}
.opt-group label {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text3);
}
.opt-group select,
.opt-group input[type="number"],
.opt-group input[type="text"] {
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: 0.9em;
    font-weight: 500;
    background: var(--surface);
    transition: var(--transition-smooth);
}
.opt-group select:focus,
.opt-group input:focus {
    border-color: var(--accent2);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ── Progress Bar — upgraded ────────────────────────────────── */
.progress-bar {
    height: 28px;
    border-radius: 14px;
    background: var(--surface3);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.progress-fill {
    background: linear-gradient(90deg, #16a34a, #0ea5e9, #6366f1);
    background-size: 200% 100%;
    animation: progressShimmer 1.5s linear infinite;
    border-radius: 14px;
    transition: width 0.3s ease;
}
@keyframes progressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Success Message — upgraded ─────────────────────────────── */
.success-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--accent-light), #f0fdf4);
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    color: #15803d;
    font-weight: 600;
    font-size: 0.9em;
    margin-top: 14px;
    animation: successPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
[data-theme="dark"] .success-msg {
    background: rgba(22,163,74,0.12);
    border-color: rgba(22,163,74,0.3);
    color: #4ade80;
}
@keyframes successPop {
    from { opacity: 0; transform: scale(0.92) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── File Info — upgraded ───────────────────────────────────── */
.file-info span {
    background: linear-gradient(135deg, var(--surface), var(--surface2));
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-size: 0.8em;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}
.file-info strong { color: var(--accent2); }

/* ── Result Stats — upgraded ────────────────────────────────── */
.result-stats {
    background: linear-gradient(135deg, var(--surface2), var(--surface3));
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 10px 16px;
    gap: 20px;
    font-size: 0.75em;
    font-weight: 600;
}
.result-stats strong { color: var(--accent2); font-size: 1.05em; }

/* ── Size Info — upgraded ───────────────────────────────────── */
.size-info {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.size-info span {
    padding: 12px 10px;
    font-size: 0.84em;
    background: linear-gradient(135deg, var(--surface2), var(--surface3));
    font-weight: 500;
}
.size-info strong { font-size: 1.1em; color: var(--accent); font-weight: 700; }

/* ── Clear Row — upgraded ───────────────────────────────────── */
.clear-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.clear-btn {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text3);
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.clear-btn:hover {
    background: #fee2e2;
    border-color: var(--danger);
    color: var(--danger);
    transform: scale(1.03);
}
[data-theme="dark"] .clear-btn:hover { background: rgba(220,38,38,0.12); }

/* ── Slider — upgraded ──────────────────────────────────────── */
.slider-row { padding: 6px 0; }
.slider-label { font-size: 0.84em; font-weight: 600; margin-bottom: 8px; }
.slider-label strong { color: var(--accent2); font-size: 1.1em; }
input[type="range"] {
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
    accent-color: var(--accent2);
}

/* ── Preview Box — upgraded ─────────────────────────────────── */
.preview-box {
    background: linear-gradient(135deg, var(--surface2), var(--surface3));
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.preview-box img {
    max-height: 240px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

/* ── Divider ────────────────────────────────────────────────── */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 14px 0;
}

/* ── Tool badge on cards ────────────────────────────────────── */
.tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.3px;
    background: var(--accent2-light);
    color: var(--accent2);
    border: 1px solid rgba(37,99,235,0.2);
}

/* ── Animated gradient border on active drop zone ───────────── */
@keyframes borderPulse {
    0%, 100% { border-color: var(--accent2); }
    50%       { border-color: var(--g3); }
}
.drop-zone.dragover { animation: borderPulse 1s ease infinite; }

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 600px) {
    .tab-section:not(.home-section) {
        width: 96%;
        margin: 20px auto 60px;
    }
    .card { padding: 16px; }
    .drop-zone { padding: 32px 16px; }
    .primary-btn { min-width: 140px; padding: 12px 22px; }
    .section-header { padding: 16px; }
}