:root {
    --bg: #121212; --panel: #1e1e1e; --text: #e0e0e0;
    --primary: #0a84ff; --secondary: #323233;
    --emo-chaleureuse: #ffd60a; --emo-amuse: #32d74b; --emo-excitation: #ff9f0a;
    --emo-confidence: #64d2ff; --emo-suspens: #bf5af2; --emo-angoisse: #8e8e93;
    --emo-lourde: #5e5ce6; --emo-panique: #ff453a;
}

body {
    font-family: -apple-system, system-ui, sans-serif;
    background: var(--bg); color: var(--text); margin: 0; padding: 10px;
    display: flex; justify-content: center; align-items: flex-start; min-height: 100vh;
}

/* Login Page */
.login-box {
    background: var(--panel); padding: 30px; border-radius: 16px;
    width: 100%; max-width: 350px; text-align: center; margin-top: 10vh;
}
.login-box input {
    width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px;
    border: 1px solid #333; background: #000; color: #fff; box-sizing: border-box;
}

/* Container principal */
.container {
    background: var(--panel); width: 100%; max-width: 900px;
    padding: 20px; border-radius: 16px; box-sizing: border-box;
}

.toolbar {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px;
    padding: 10px; background: var(--secondary); border-radius: 12px;
    position: sticky; top: 10px; z-index: 100;
}

.btn {
    border: none; padding: 10px; border-radius: 8px; cursor: pointer;
    background: #444; min-height: 44px; min-width: 44px;
    display: flex; align-items: center; justify-content: center;
}

/* Couleurs bordures émotions */
.b-cha { border-bottom: 4px solid var(--emo-chaleureuse); }
.b-amu { border-bottom: 4px solid var(--emo-amuse); }
.b-exc { border-bottom: 4px solid var(--emo-excitation); }
.b-con { border-bottom: 4px solid var(--emo-confidence); }
.b-sus { border-bottom: 4px solid var(--emo-suspens); }
.b-ang { border-bottom: 4px solid var(--emo-angoisse); }
.b-lou { border-bottom: 4px solid var(--emo-lourde); }
.b-pan { border-bottom: 4px solid var(--emo-panique); }

#editor {
    width: 100%; min-height: 350px; padding: 15px; background: #000;
    border-radius: 12px; font-size: 18px; line-height: 1.6; outline: none;
    font-family: 'Georgia', serif; box-sizing: border-box; border: 1px solid #333;
}

.emo[data-type="chaleureuse"] { color: var(--emo-chaleureuse); }
.emo[data-type="amuse"] { color: var(--emo-amuse); }
.emo[data-type="excitation"] { color: var(--emo-excitation); }
.emo[data-type="confidence"] { color: var(--emo-confidence); }
.emo[data-type="suspens"] { color: var(--emo-suspens); }
.emo[data-type="angoisse"] { color: var(--emo-angoisse); }
.emo[data-type="lourde"] { color: var(--emo-lourde); }
.emo[data-type="panique"] { color: var(--emo-panique); font-weight: bold; }

.pause-chip { background: #333; color: #888; padding: 2px 8px; border-radius: 6px; font-size: 11px; margin: 0 4px; border: 1px solid #444; }

.btn-gen {
    width: 100%; background: var(--primary); color: white; border: none;
    padding: 18px; border-radius: 12px; font-size: 18px; font-weight: bold; margin-top: 20px;
}

@media (max-width: 600px) { .container { padding: 10px; } .btn { flex-grow: 1; } }