:root {
    --primary: #3B82F6;
    --accent: #8B5CF6;
    --added-bg: rgba(16,185,129,0.15);
    --removed-bg: rgba(239,68,68,0.15);
    --modified-bg: rgba(245,158,11,0.12);
    --bg: #FAFBFE;
    --card: #FFFFFF;
    --text: #1E293B;
    --text-sec: #64748B;
    --text-dim: #94A3B8;
    --border: #E2E8F0;
    --gutter: #F1F5F9;
    --font: 'Plus Jakarta Sans', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --radius: 10px;
    --transition: 0.15s ease;
    --line-height: 1.7;
    --font-size: 14px;
    --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.2);
    --removed-bg: rgba(239,68,68,0.2);
    --modified-bg: rgba(245,158,11,0.16);
}
*,*::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}
.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}

/* 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}

.stats-bar{display:flex;align-items:center;flex-wrap:wrap;gap:14px;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)}
.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}
.opt{display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none;margin-left:8px}
.opt input{width:13px;height:13px;accent-color:var(--primary);cursor:pointer}

/* Editor Container */
.editor-container{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-bottom:12px}
.editor-pane{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.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}

/* Code area: line numbers + stacked highlight + textarea */
.code-area{
    position:relative;
    display:flex;
    flex:1;
    min-height:300px;
}
.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)}
.highlight-layer .hl-line.hl-mod{background:var(--modified-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-toggle{margin-left:auto}
.history-section{margin-bottom:10px;padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);animation:menuIn 0.15s ease}
.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.history-header h3{font-size:0.95rem;font-weight:700}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-empty{color:var(--text-dim);font-size:0.85rem;text-align:center;padding:16px 0}
.history-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;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.72rem;color:var(--text-dim)}
.history-item-preview{font-size:0.8rem;color:var(--text-sec);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}
.history-item-stats{font-size:0.72rem;color:var(--text-dim);display:flex;gap:8px}
.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;gap:4px}
.history-item-actions .btn-sm{font-size:0.65rem;padding:2px 8px}

/* 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-fit,minmax(200px,1fr));gap:12px;margin:16px 0}
.feature-card{padding:16px;border:1px solid var(--border);border-radius:8px}
.feature-card:hover{border-color:var(--primary)}
.feature-card h3{font-size:0.9rem;margin-bottom:4px}
.feature-card p{font-size:0.8rem;margin:0}
details{border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:6px}
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){
    .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{padding:10px 12px}
    .features-grid{grid-template-columns:1fr}
}