:root {
    --primary: #3B82F6;
    --accent: #8B5CF6;
    --added-bg: rgba(16,185,129,0.35);
    --removed-bg: rgba(220,38,38,0.40);
    --modified-bg: rgba(245,158,11,0.30);
    --bg: #FAFBFE;
    --card: #FFFFFF;
    --text: #1E293B;
    --text-sec: #64748B;
    --text-dim: #94A3B8;
    --border: #E2E8F0;
    --gutter: #F1F5F9;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --radius: 10px;
    --transition: 0.15s ease;
    --line-height: 1.7;
    --font-size: 13px;
    --pad-left: 12px;
    --pad-top: 10px;
}
[data-theme="dark"] {
    --bg: #0F1117; --card: #1A1D2E; --text: #E2E8F0; --text-sec: #94A3B8;
    --text-dim: #64748B; --border: #2D3348; --gutter: #141728;
    --added-bg: rgba(16,185,129,0.35);
    --removed-bg: rgba(239,68,68,0.35);
    --modified-bg: rgba(245,158,11,0.30);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;transition:background var(--transition),color var(--transition)}

.header{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:1px solid var(--border)}
.header-inner{max-width:1600px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px}
.logo-text{font-size:1.15rem;font-weight:700}
.logo-dot{color:var(--primary)}
.header-actions{display:flex;align-items:center;gap:6px;flex:1}
.header-actions .tools-nav{margin:0 auto}
.header-actions .menu-wrapper{margin-left:auto}
.btn-sm{padding:5px 12px;font-size:0.75rem;font-family:var(--font);font-weight:500;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text-sec);cursor:pointer;transition:all var(--transition)}
.btn-sm:hover{border-color:var(--primary);color:var(--primary)}
.btn-icon{width:34px;height:34px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text-sec);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.btn-icon:hover{border-color:var(--primary);color:var(--primary)}
.icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:block}

/* Menu */
.menu-wrapper{position:relative}
.menu-toggle{position:relative}
.menu-dropdown{
    display:none;position:absolute;top:calc(100% + 8px);right:0;
    min-width:180px;padding:6px 0;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:0 12px 32px rgba(0,0,0,0.12),0 4px 12px rgba(0,0,0,0.06);
    z-index:200;animation:menuIn 0.15s ease;
}
[data-theme="dark"] .menu-dropdown{box-shadow:0 12px 32px rgba(0,0,0,0.4)}
.menu-dropdown.open{display:block}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.menu-item{
    display:block;padding:10px 16px;font-size:0.85rem;font-weight:500;
    color:var(--text);text-decoration:none;transition:background var(--transition);
    border:none;background:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font);
}
.menu-item:hover{background:var(--gutter);color:var(--primary)}

.main{max-width:1600px;margin:0 auto;padding:12px 20px}

/* App Layout with Sidebar */
.app-layout{display:flex;min-height:calc(100vh - 52px);position:relative}
.sidebar{
    width:260px;flex-shrink:0;
    background:var(--card);border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    padding:14px;overflow-y:auto;
    transition:transform 0.2s ease,opacity 0.2s ease;
}
.sidebar.collapsed{transform:translateX(-100%);opacity:0;position:absolute;pointer-events:none}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sidebar-header h3{font-size:0.85rem;font-weight:700}
.sidebar-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.sidebar-save{margin-top:10px;width:100%;text-align:center;padding:8px;font-size:0.8rem}
.sidebar-toggle{
    position:absolute;left:260px;top:10px;z-index:60;
    width:28px;height:28px;border:1px solid var(--border);border-radius:6px;
    background:var(--card);color:var(--text-sec);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all var(--transition);
}
.sidebar.collapsed ~ .sidebar-toggle{left:6px}
.sidebar-toggle:hover{border-color:var(--primary);color:var(--primary)}

.main-content{flex:1;padding:12px 20px;max-width:1400px;overflow-y:auto;overflow-x:hidden}

/* Hero */
.hero{text-align:center;padding:28px 0 16px}
.hero h1{font-size:2rem;font-weight:800;letter-spacing:-0.03em;line-height:1.2}
.gradient-text{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--text-sec);font-size:1.15rem;margin-top:8px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.5}

/* Mode Tabs */
.mode-tabs{display:flex;justify-content:center;gap:0;margin-bottom:14px;background:var(--gutter);border:1px solid var(--border);border-radius:50px;padding:4px;width:fit-content;margin-left:auto;margin-right:auto}
.mode-tab{padding:8px 24px;font-size:0.82rem;font-family:var(--font);font-weight:600;border:none;border-radius:50px;background:transparent;color:var(--text-sec);cursor:pointer;transition:all var(--transition);letter-spacing:-0.01em}
.mode-tab:hover:not(:disabled){color:var(--text)}
.mode-tab.active{background:var(--primary);color:#fff;box-shadow:0 2px 10px rgba(59,130,246,0.3)}
.mode-tab:disabled{opacity:0.35;cursor:not-allowed}

.opt{display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
.opt input{width:13px;height:13px;accent-color:var(--primary);cursor:pointer}

/* Editor Container */
.editor-outer{display:flex;gap:6px;margin-bottom:24px}
.editor-container{display:grid;grid-template-columns:1fr auto 1fr;gap:0;flex:1;overflow:hidden;min-height:200px;height:450px}
.editor-pane{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);display:flex;flex-direction:column;min-height:0}

/* Minimap */
.minimap{
    width:28px;flex-shrink:0;
    border:1px solid var(--border);border-radius:6px;
    background:var(--gutter);overflow:hidden;
    cursor:pointer;position:relative;
    align-self:stretch;
    margin-top:60px;
    margin-bottom:0;
}
.minimap-block{
    position:absolute;left:2px;right:2px;
    border-radius:2px;min-height:3px;
    transition:opacity 0.1s;
}
.minimap-block:hover{opacity:0.7}
.minimap-block.mm-add{background:#10B981}
.minimap-block.mm-del{background:#EF4444}
.minimap-block.mm-mod{background:linear-gradient(to right, #EF4444 50%, #10B981 50%)}

/* Minimap viewport indicator */
.minimap-viewport{
    position:absolute;left:0;right:0;
    background:rgba(59,130,246,0.15);
    border:1px solid rgba(59,130,246,0.4);
    border-radius:3px;
    pointer-events:none;
    transition:top 0.1s ease;
}

/* Empty line texture (diagonal stripes) for placeholder lines */
.highlight-layer .hl-line.hl-empty{
    background:repeating-linear-gradient(
        -45deg,
        var(--gutter),
        var(--gutter) 3px,
        var(--border) 3px,
        var(--border) 4px
    );
}
.editor-divider{display:flex;align-items:center;justify-content:center;padding:0 8px}
.swap-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--card);color:var(--text-sec);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.swap-btn:hover{border-color:var(--primary);color:var(--primary);transform:scale(1.1)}
.pane-label{padding:6px 14px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-sec);background:var(--gutter);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.pane-clear{font-size:0.65rem;padding:2px 8px;text-transform:none;letter-spacing:0}
.pane-upload{font-size:0.65rem;padding:2px 8px;text-transform:none;letter-spacing:0}
.pane-stat{font-size:0.72rem;font-weight:700;margin-left:8px;text-transform:none;letter-spacing:0}
.pane-stat-del{color:#EF4444}
.pane-stat-add{color:#10B981}
.pane-lines{font-size:0.68rem;color:var(--text-dim);margin-left:auto;text-transform:none;letter-spacing:0;margin-right:6px}

/* Code area: line numbers + stacked highlight + textarea */
.code-area{
    position:relative;
    display:flex;
    flex:1;
    min-height:0;
    overflow:hidden;
}
.line-nums{
    min-width:40px;padding:var(--pad-top) 8px var(--pad-top) 6px;text-align:right;
    font-family:var(--mono);font-size:var(--font-size);line-height:var(--line-height);
    color:var(--text-dim);background:var(--gutter);border-right:1px solid var(--border);
    user-select:none;overflow:hidden;white-space:pre-wrap;flex-shrink:0;
}

/* Highlight layer: sits behind textarea, same size/position/font */
.highlight-layer{
    position:absolute;
    top:0;left:40px;right:0;bottom:0;
    padding:var(--pad-top) var(--pad-left);
    font-family:var(--mono);font-size:var(--font-size);line-height:var(--line-height);
    white-space:pre;word-wrap:normal;
    overflow:hidden;
    pointer-events:none;
}
.highlight-layer .hl-line{
    display:block;
    margin:0 calc(-1 * var(--pad-left));
    padding:0 var(--pad-left);
}
.highlight-layer .hl-line.hl-add{background:var(--added-bg)}
.highlight-layer .hl-line.hl-del{background:var(--removed-bg)}

/* Textarea: on top, transparent background so highlight shows through */
.code-input{
    position:relative;
    flex:1;
    padding:var(--pad-top) var(--pad-left);
    border:none;outline:none;resize:none;
    font-family:var(--mono);font-size:var(--font-size);line-height:var(--line-height);
    color:var(--text);background:transparent;
    tab-size:4;
    overflow:auto;
    z-index:1;
    white-space:pre;
    word-wrap:normal;
}
.code-input::placeholder{color:var(--text-dim)}

/* History */
.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.history-header h3{font-size:0.85rem;font-weight:700}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-empty{color:var(--text-dim);font-size:0.8rem;text-align:center;padding:20px 0}
.history-item{
    padding:10px 12px;border:1px solid var(--border);border-radius:8px;
    cursor:pointer;transition:all var(--transition);
}
.history-item:hover{border-color:var(--primary);background:var(--gutter)}
.history-item-info{display:flex;flex-direction:column;gap:2px}
.history-item-time{font-size:0.68rem;color:var(--text-dim)}
.history-item-preview{font-size:0.75rem;color:var(--text-sec);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.history-item-stats{font-size:0.68rem;color:var(--text-dim);display:flex;gap:8px;margin-top:2px}
.history-item-stats .hi-add{color:#10B981}
.history-item-stats .hi-del{color:#EF4444}
.history-item-stats .hi-mod{color:#F59E0B}
.history-item-actions{display:flex;justify-content:flex-end;margin-top:4px}
.history-item-actions .btn-sm{font-size:0.6rem;padding:2px 6px}

/* Drop Zone - only visible when dragging file over */
.drop-zone{
    display:none;position:absolute;top:0;left:0;right:0;bottom:0;
    background:rgba(59,130,246,0.05);
    backdrop-filter:blur(2px);
    border:2px dashed var(--primary);
    border-radius:8px;z-index:10;
    align-items:center;justify-content:center;
}
.drop-zone.active{display:flex;pointer-events:auto}
.drop-zone-content{text-align:center;color:var(--primary);display:flex;flex-direction:column;align-items:center;gap:6px}
.drop-zone-content svg{opacity:0.6}
.drop-zone-content span{font-size:0.85rem;font-weight:600}
.drop-zone-content small{display:none}
.editor-pane.drag-over{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,0.15)}

/* Sample Dropdown */
.sample-dropdown{position:relative}
.sample-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 0;box-shadow:0 8px 24px rgba(0,0,0,0.1);z-index:200;min-width:120px}
.sample-menu.open{display:block}
.sample-item{display:block;width:100%;padding:7px 14px;font-size:0.78rem;font-family:var(--font);font-weight:500;border:none;background:none;color:var(--text);text-align:left;cursor:pointer;transition:background var(--transition)}
.sample-item:hover{background:var(--gutter);color:var(--primary)}

/* Content Type Badge */
.content-badge{font-size:0.6rem;font-weight:600;padding:2px 6px;border-radius:4px;background:rgba(59,130,246,0.1);color:var(--primary);text-transform:uppercase;letter-spacing:0.03em;margin-left:4px}
.content-badge:empty{display:none}

/* Keyboard Shortcuts Dialog */
.shortcuts-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:1000;align-items:center;justify-content:center}
.shortcuts-overlay.open{display:flex}
.shortcuts-dialog{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;min-width:320px;box-shadow:0 20px 60px rgba(0,0,0,0.15)}
.shortcuts-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.shortcuts-header h3{font-size:1rem;font-weight:700}
.shortcuts-list{display:flex;flex-direction:column;gap:10px}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;font-size:0.85rem}
.shortcut-row kbd{padding:3px 8px;background:var(--gutter);border:1px solid var(--border);border-radius:4px;font-family:var(--mono);font-size:0.75rem;font-weight:500}
.shortcut-row span{color:var(--text-sec)}

/* Diff Navigator - inline */
.diff-nav{
    display:inline-flex;align-items:center;gap:6px;
    font-size:0.78rem;font-weight:600;color:var(--text-sec);margin-left:auto;
}
.diff-nav-btn{
    width:22px;height:22px;border:1px solid var(--border);border-radius:4px;
    background:var(--card);color:var(--text);cursor:pointer;font-size:0.65rem;
    display:inline-flex;align-items:center;justify-content:center;transition:all var(--transition);
}
.diff-nav-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--gutter)}

/* Sticky Stats */
.stats-bar{display:flex;flex-direction:column;gap:6px;padding:8px 14px;margin-bottom:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);font-size:0.78rem;font-weight:500;color:var(--text-sec);position:sticky;top:52px;z-index:10}
.stats-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.stats-counts{font-size:0.72rem;color:var(--text-dim);font-family:var(--mono);justify-content:space-between;width:100%}
.s-add span{color:#10B981;font-weight:700}
.s-del span{color:#EF4444;font-weight:700}
.s-mod span{color:#F59E0B;font-weight:700}
.s-sim span{color:var(--primary);font-weight:700}
.stats-divider{width:1px;height:16px;background:var(--border);margin:0 4px}

/* SEO */
.seo-content{margin-top:40px;padding:32px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.seo-content h2{font-size:1.3rem;font-weight:700;margin:24px 0 8px}
.seo-content h2:first-child{margin-top:0}
.seo-content p{color:var(--text-sec);margin-bottom:12px;line-height:1.7;font-size:0.9rem}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:16px 0}
.feature-card{padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.feature-card h3{font-size:0.8rem;margin-bottom:3px}
.feature-card p{font-size:0.72rem;margin:0;color:var(--text-sec);line-height:1.4}
.seo-steps{color:var(--text-sec);padding-left:24px;margin:16px 0;font-size:0.9rem;line-height:2}
.seo-formats{font-family:var(--mono);font-size:0.8rem;padding:14px 18px;background:var(--gutter);border-radius:8px;text-align:center}
.seo-why{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.why-item{padding:12px 16px;border-left:3px solid var(--primary);background:var(--gutter);border-radius:0 8px 8px 0;font-size:0.85rem;color:var(--text-sec)}
.why-item strong{color:var(--text)}
details{border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:6px;transition:border-color var(--transition)}
details:hover{border-color:var(--primary)}
details summary{font-weight:600;cursor:pointer;font-size:0.9rem}
details p{margin-top:6px;margin-bottom:0}

.footer{margin-top:40px;border-top:1px solid var(--border);background:var(--card);text-align:center;padding:16px;font-size:0.8rem;color:var(--text-sec)}
.footer a{color:var(--text-sec);text-decoration:none}
.footer a:hover{color:var(--primary)}
.footer p{margin-top:6px;font-size:0.7rem;color:var(--text-dim)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);padding:10px 20px;background:var(--text);color:var(--bg);border-radius:8px;font-size:0.82rem;font-weight:500;transition:transform 0.3s ease;z-index:1000;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}

@media(max-width:768px){
    .app-layout{flex-direction:column}
    .sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:200px}
    .sidebar.collapsed{transform:translateY(-100%);height:0;padding:0;overflow:hidden}
    .sidebar-toggle{position:fixed !important;bottom:16px !important;right:16px !important;left:auto !important;top:auto !important;z-index:250 !important;border-radius:50% !important;width:44px !important;height:44px !important;box-shadow:0 2px 10px rgba(0,0,0,0.15) !important;background:var(--primary) !important;color:#fff !important;border:none !important}
    .sidebar.collapsed ~ .sidebar-toggle{left:auto !important;right:16px !important;bottom:16px !important;top:auto !important}
    .editor-container{grid-template-columns:1fr}
    .editor-divider{padding:8px 0;justify-content:center}
    .swap-btn{transform:rotate(90deg)}
    .code-area{min-height:250px}
    .stats-bar{font-size:0.7rem;gap:8px}
    .main-content{padding:10px 12px}
    .features-grid{grid-template-columns:1fr}
}

/* === Sub-page Styles === */
.hero-mini {
    text-align: center;
    padding: 30px 20px 20px;
}
.hero-mini h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 8px;
}
.hero-mini p {
    color: var(--text-muted);
    font-size: 0.95rem;
}
.editor-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 16px 16px;
    max-width: 1400px;
    margin: 0 auto;
}
.editor-panel {
    display: flex;
    flex-direction: column;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--header-bg, #f8fafc);
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.panel-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.editor-textarea {
    width: 100%;
    min-height: 300px;
    padding: 16px;
    border: none;
    outline: none;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.6;
    background: var(--card, #fff);
    color: var(--text, #1e293b);
}
.diff-output {
    margin: 0 16px 24px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}
.diff-result {
    padding: 16px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
}
.diff-stats {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}
.diff-added {
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
    border-left: 3px solid #10b981;
    padding: 2px 8px;
    margin: 1px 0;
}
.diff-removed {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
    border-left: 3px solid #ef4444;
    padding: 2px 8px;
    margin: 1px 0;
}
.diff-unchanged {
    padding: 2px 8px;
    margin: 1px 0;
    opacity: 0.6;
}
.dark .diff-added {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}
.dark .diff-removed {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}
.seo-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}
.seo-section h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.seo-section p {
    color: var(--text-muted, #64748b);
    line-height: 1.8;
    font-size: 0.92rem;
}
.footer {
    text-align: center;
    padding: 24px 16px;
    border-top: 1px solid var(--border, #e2e8f0);
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}
.footer-links {
    margin-bottom: 12px;
    line-height: 2;
}
.footer-links a, .footer a {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover, .footer a:hover {
    color: var(--primary, #3B82F6);
}
@media (max-width: 768px) {
    .editor-wrapper {
        grid-template-columns: 1fr;
    }
    .editor-textarea {
        min-height: 200px;
    }
}

/* === Tools Navigation === */
.tools-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
    padding-left: 40px;
}
.tools-nav > a {
    padding: 6px 14px;
    border-radius: 6px;
    color: var(--text-muted, #64748b);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}
.tools-nav > a:hover {
    color: var(--text, #1e293b);
    background: var(--bg, #f1f5f9);
}
.tools-dropdown {
    position: relative;
}
.tools-dropdown > .tools-trigger {
    padding: 6px 14px;
    border-radius: 6px;
    color: var(--text-muted, #64748b);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    transition: all 0.2s;
}
.tools-dropdown > .tools-trigger::after {
    content: '▾';
    font-size: 0.65rem;
    opacity: 0.6;
}
.tools-dropdown:hover > .tools-trigger {
    color: var(--text, #1e293b);
    background: var(--bg, #f1f5f9);
}
.tools-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 240px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.12), 0 10px 30px rgba(0,0,0,0.08);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
}
.tools-dropdown:hover .tools-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.tools-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    color: var(--text, #1e293b);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 2px;
}
.tools-dropdown-menu a:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.04));
    color: var(--primary, #3B82F6);
    padding-left: 20px;
}
.dark .tools-dropdown-menu,
[data-theme="dark"] .tools-dropdown-menu {
    background: var(--card);
    border-color: var(--border);
    box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
    .tools-nav {
        display: none;
    }
}

/* Mega Menu */
.tools-dropdown-menu.mega {
    min-width: 560px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 24px;
    border-radius: 18px;
}
.tools-dropdown-menu.mega .mega-col {
    padding: 0 20px;
}
.tools-dropdown-menu.mega .mega-col:not(:last-child) {
    border-right: 1px solid var(--border);
}
.tools-dropdown-menu.mega h4 {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 12px;
    padding: 0 12px;
}
.tools-dropdown-menu.mega a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 2px;
}
.tools-dropdown-menu.mega a:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.04));
    color: var(--primary);
    padding-left: 16px;
}
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}

/* All Tools Section */
.all-tools-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}
.all-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.atool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 16px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s ease;
    gap: 6px;
}
.atool-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.1);
    transform: translateY(-3px);
}
.atool-icon {
    font-size: 1.6rem;
    margin-bottom: 4px;
}
.atool-card h3 {
    font-size: 0.88rem;
    font-weight: 700;
}
.atool-card p {
    font-size: 0.75rem;
    color: var(--text-sec);
    line-height: 1.4;
}

/* === Mobile App Experience === */
@media (max-width: 768px) {
    body { font-size: 15px; -webkit-text-size-adjust: 100%; }

    /* Sticky compact header */
    .header { position: sticky; top: 0; z-index: 100; }
    .header-inner { padding: 8px 12px; }
    .logo-text { font-size: 1rem; }
    .logo svg { width: 28px; height: 28px; }

    /* Action buttons as icon-only on mobile */
    .header-actions .btn-sm { padding: 6px 8px; font-size: 0.7rem; }

    /* Full-width content */
    .main-content { padding: 8px; }
    .hero-mini { padding: 16px 12px 12px; }
    .hero-mini h1 { font-size: 1.3rem; }
    .hero-mini p { font-size: 0.82rem; }

    /* Tool area - full screen feel */
    .tool-container, .editor-wrapper { border-radius: 12px; overflow: hidden; }
    .editor-wrapper { grid-template-columns: 1fr !important; gap: 0; }
    .editor-textarea, .code-area { 
        min-height: 200px; 
        font-size: 14px; 
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Smooth scrolling */
    * { -webkit-overflow-scrolling: touch; }

    /* Larger touch targets */
    button, .btn-sm, .btn-icon { min-height: 40px; min-width: 40px; }
    .btn-sm { border-radius: 8px; }

    /* Bottom action bar feel */
    .header-actions { gap: 4px; }

    /* Card-like sections */
    .seo-section, .faq-section { padding: 20px 12px; border-radius: 0; }
    .seo-section h2 { font-size: 1.15rem; }
    .seo-section p, .seo-section li { font-size: 0.85rem; }

    /* Menu dropdown full width on mobile */
    .menu-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
        min-width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        padding: 12px 0 24px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    }
    .menu-dropdown a { padding: 14px 20px; font-size: 0.9rem; }

    /* Sub-pages tool grid */
    .features-grid { grid-template-columns: 1fr !important; gap: 10px; }
    .feature-card { padding: 14px; }

    /* Sidebar as bottom sheet on mobile */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-height: 60vh;
        border-radius: 16px 16px 0 0;
        border-top: 1px solid var(--border);
        border-right: none;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 200;
        overflow-y: auto;
    }
    .sidebar:not(.collapsed) { transform: translateY(0); }
    /* sidebar toggle hidden on mobile - use menu instead */

    /* Footer compact */
    .footer { padding: 16px 12px; font-size: 0.72rem; }

    /* Diff output readable */
    .diff-output { font-size: 12px; }
    .line-content { word-break: break-all; }

    /* Smooth page transitions */
    .tool-container { animation: slideUp 0.2s ease; }
    @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

/* Extra small screens */
@media (max-width: 400px) {
    .header-inner { padding: 6px 8px; }
    .logo-text { font-size: 0.9rem; }
    .btn-sm { padding: 5px 6px; font-size: 0.65rem; }
    .editor-textarea, .code-area { min-height: 180px; font-size: 13px; }
}


/* Mobile Tools Button (header) */
.mobile-tools-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--gutter);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.mobile-tools-btn::after { content: ' ▾'; font-size: 0.6rem; opacity: 0.6; }
.mobile-tools-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    padding: 12px;
    z-index: 1002;
    max-height: 70vh;
    overflow-y: auto;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.mobile-tools-dropdown.open { display: grid; }
.mobile-tools-dropdown a {
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    text-align: center;
}
.mobile-tools-dropdown a:active { background: var(--gutter); color: var(--primary); }

/* Horizontal scrollable nav row */
.mobile-chips {
    display: none;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 52px;
    z-index: 99;
}
.mobile-chips::-webkit-scrollbar { display: none; }
.mobile-chips > a {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-sec);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
}
.mobile-chips > a:hover, .mobile-chips > a:active { color: var(--primary); background: var(--gutter); }
.mobile-chips .mobile-dd { flex-shrink: 0; }
.mobile-chips .mobile-dd .tools-trigger { font-size: 0.78rem; padding: 7px 12px; }
.mobile-chips .mobile-dd .tools-dropdown-menu { min-width: 180px; left: 0; transform: none; position: fixed; top: 100px; }
.mobile-chips .mobile-dd .tools-dropdown-menu.mega { min-width: 180px; grid-template-columns: 1fr; }

/* Bottom sheet */
.mobile-bottom-sheet { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; }
.mobile-bottom-sheet .sheet-trigger {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 14px; background: var(--primary); color: #fff;
    border: none; font-size: 0.85rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 -4px 20px rgba(59,130,246,0.2);
}
.sheet-content { display: none; position: fixed; bottom: 0; left: 0; right: 0; max-height: 75vh; background: var(--card); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,0.15); padding: 20px 16px; overflow-y: auto; z-index: 301; }
.sheet-content.open { display: block; animation: sheetUp 0.3s ease; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 16px; }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-grid a { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 0.78rem; font-weight: 500; color: var(--text); text-decoration: none; }
.sheet-grid a:active { background: var(--gutter); border-color: var(--primary); }
.sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 299; }
.sheet-overlay.open { display: block; }

@media (max-width: 768px) {
    .mobile-tools-btn { display: none !important; }
    .mobile-chips { display: flex !important; }
    .mobile-bottom-sheet { display: none !important; }
    .tools-nav { display: none !important; }
    .all-tools-section { margin-bottom: 20px; }
}

/* Footer Tools Grid */
.footer-tools { margin-bottom: 16px; }
.footer-tools h4 { font-size: 0.75rem; font-weight: 700; color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.footer-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.footer-tools-grid a { font-size: 0.75rem; color: var(--text-dim); text-decoration: none; padding: 4px 0; transition: color 0.15s; }
.footer-tools-grid a:hover { color: var(--primary); }
.footer-bottom { padding-top: 12px; border-top: 1px solid var(--border); }

/* Mobile menu - hidden on desktop */
.mobile-menu-wrapper { display: none; position: relative; }
.mobile-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.12); padding: 8px; z-index: 1002; }
.mobile-menu.open { display: block; }
.mobile-menu-item { display: block; width: 100%; padding: 12px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; color: var(--text); text-decoration: none; text-align: left; border: none; background: none; cursor: pointer; font-family: inherit; }
.mobile-menu-item:active { background: var(--gutter); color: var(--primary); }

@media (max-width: 768px) {
    .mobile-menu-wrapper { display: block !important; }
    .mobile-tools-btn { display: none !important; }
}

@media (max-width: 768px) {
    /* Hide desktop contact and dark mode on mobile - they're in hamburger menu */
    .header-actions > div > a[href="/contact.html"] { display: none !important; }
    .header-actions #darkModeToggle { display: none !important; }
}

@media (max-width: 768px) {
    .sidebar-toggle { display: none !important; }
    .sidebar { display: none !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; max-height: 60vh !important; border-radius: 16px 16px 0 0 !important; box-shadow: 0 -8px 30px rgba(0,0,0,0.15) !important; z-index: 250 !important; overflow-y: auto !important; }
    .sidebar.collapsed { display: none !important; }
    .sidebar.mobile-open { display: block !important; }
}

/* Mobile tap to open dropdowns */
.mobile-dd .tools-dropdown-menu {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobile-dd.active .tools-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    position: fixed !important;
    top: 95px !important;
    left: 16px !important;
    right: auto !important;
    width: 200px !important;
    transform: translateY(0) !important;
    min-width: auto !important;
    z-index: 1003 !important;
    border-radius: 12px;
    max-height: 60vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .mobile-dd:hover .tools-dropdown-menu { opacity: 0 !important; visibility: hidden !important; }
    .mobile-dd.active .tools-dropdown-menu { opacity: 1 !important; visibility: visible !important; }
}