/* ==== DESIGN SYSTEM ==== */
:root {
    --font: 'Inter', system-ui, sans-serif;
    --radius: 12px;
    --transition: 0.22s cubic-bezier(0.2, 0, 0, 1);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,.12);
    --shadow-lg: 0 12px 28px rgba(0,0,0,.16);

    /* Light palette */
    --bg: #fafafa;
    --surface: #ffffff;
    --text: #1a1a1a;
    --text-muted: #666;
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --border: #e5e7eb;
}

/* Dark mode */
[data-theme="dark"] {
    --bg: #0f0f12;
    --surface: #16161a;
    --text: #f5f5f5;
    --text-muted: #9ca3af;
    --primary: #818cf8;
    --primary-hover: #6366f1;
    --border: #374151;
}

/* ==== GLOBAL ==== */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); font-size: 100%; }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.5; }

.app { min-height:100vh; display:flex; flex-direction:column; }
.header, .footer { padding:1rem 1.5rem; background:var(--surface); border-bottom:1px solid var(--border); }
.header { display:flex; align-items:center; justify-content:space-between; }
.logo { font-weight:700; font-size:1.25rem; color:var(--primary); }
.main { flex:1; display:grid; gap:1.5rem; padding:1.5rem; grid-template-columns:1fr 1fr; }
@media (max-width: 960px) { .main { grid-template-columns:1fr; } }

.label { font-weight:600; margin-bottom:.5rem; display:block; color:var(--text-muted); }
.editor, .output {
    width:100%; border:1px solid var(--border); border-radius:var(--radius);
    padding:1rem; font-size:1rem; background:var(--surface); color:var(--text);
    transition:var(--transition); resize:vertical;
}
.editor:focus, .output:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.2); }

.toolbar { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.tool-btn {
    display:flex; align-items:center; gap:.35rem; padding:.5rem .75rem;
    font-size:.875rem; font-weight:500; border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--border);
    cursor:pointer; transition:var(--transition);
}
.tool-btn:hover { background:var(--bg); border-color:var(--primary); }
.tool-btn svg { width:18px; height:18px; fill:currentColor; }

.output-section { position:relative; }
.output { min-height:12rem; overflow-y:auto; white-space:pre-wrap; }
.output-actions {
    position:absolute; top:.75rem; right:.75rem; display:flex; gap:.35rem;
}
.icon-btn {
    background:transparent; border:none; cursor:pointer; padding:.35rem;
    border-radius:50%; transition:var(--transition);
}
.icon-btn:hover { background:rgba(0,0,0,.06); }
[data-theme="dark"] .icon-btn:hover { background:rgba(255,255,255,.1); }
.icon-btn svg { width:20px; height:20px; fill:currentColor; }

.footer { font-size:.875rem; color:var(--text-muted); text-align:center; }

.toast {
    position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
    background:var(--surface); color:var(--text); padding:.75rem 1.25rem;
    border-radius:var(--radius); box-shadow:var(--shadow-lg);
    opacity:0; visibility:hidden; transition:var(--transition);
    z-index:1000; max-width:90vw; text-align:center;
}
.toast.show { opacity:1; visibility:visible; }

.sun { display:none; }
.moon { display:block; }
[data-theme="dark"] .sun { display:block; }
[data-theme="dark"] .moon { display:none; }

/* ==== ANIMATIONS ==== */
@keyframes fadeIn { from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:none;} }
.output[data-ready] { animation:fadeIn .3s ease-out; }

/* ==== ACCESSIBILITY ==== */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }