/* -------------------------------------------------
   Global Styles & Design Tokens
   ------------------------------------------------- */
:root {
    --font-primary: 'Inter', sans-serif;
    --color-bg: #ffffff;
    --color-bg-dark: #1e1e2a;
    --color-primary: #0077ff;
    --color-primary-dark: #005bb5;
    --color-text: #212529;
    --color-text-dark: #e0e0e0;
    --color-muted: #6c757d;
    --radius: 12px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
    --shadow-lg: 0 8px 20px rgba(0,0,0,.12);
}

/* Dark mode overrides */
[data-theme="dark"] {
    --color-bg: var(--color-bg-dark);
    --color-text: var(--color-text-dark);
}

/* Reset & basic typography */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: var(--font-primary);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

/* Utility classes */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}
.hidden { display: none; }
.text-center { text-align: center; }

/* -------------------------------------------------
   HERO SECTION
   ------------------------------------------------- */
.hero {
    padding: 4rem 0 2rem;
    background: linear-gradient(135deg, #f0f8ff, #e6f2ff);
}
.title {
    font-size: 2.8rem;
    margin-bottom: .5rem;
    text-align: center;
    color: var(--color-primary);
}
.subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--color-muted);
}
textarea#userInput {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ced4da;
    border-radius: var(--radius);
    font-size: 1rem;
    resize: vertical;
    min-height: 120px;
    transition: border-color .2s;
}
textarea#userInput:focus {
    outline: none;
    border-color: var(--color-primary);
}
.actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}
.btn {
    padding: .75rem 1.5rem;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.btn.primary {
    background: linear-gradient(90deg, #0066ff, #33aaff);
    color: #fff;
}
.btn.primary:hover {
    background: linear-gradient(90deg, #0055dd, #2299dd);
}
.btn.secondary {
    background: #f8f9fa;
    color: var(--color-text);
}
.btn.secondary:hover {
    background: #e2e6ea;
}
.btn:active { transform: scale(.98); }

.dark-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .9rem;
    color: var(--color-muted);
}

/* Loading spinner */
.spinner {
    margin: 2rem auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.char-count {
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--color-muted);
    text-align: right;
}

/* -------------------------------------------------
   OUTPUT SECTION
   ------------------------------------------------- */
.output-section {
    padding: 3rem 0;
    background: var(--color-bg);
}
.output-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--color-primary);
}
.article {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.7;
}
.output-actions { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.status { margin-top: .75rem; font-size: .9rem; color: var(--color-muted); display: flex; gap: 1.5rem; }

/* -------------------------------------------------
   FEATURES SECTION
   ------------------------------------------------- */
.features { padding: 3rem 0; background: #f8f9fb; }
.section-title { font-size: 2rem; margin-bottom: 2rem; text-align: center; }
.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: #fff; border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3 { margin-top: 0; color: var(--color-primary); }
.card p { margin: .5rem 0 0; color: var(--color-muted); }

/* -------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------- */
@media (max-width: 768px) {
    .title { font-size: 2.2rem; }
    .subtitle { font-size: 1rem; }
}