:root {
    --navy: #1a1a2e;
    --dark-navy: #16213e;
    --info: #00d2ff;
}

body {
    background-color: #f4f6f9;
    font-family: 'Inter', sans-serif;
}

.fw-800 { font-weight: 800; }
.bg-sidebar { background-color: var(--navy); }
.bg-dark-soft { background: rgba(255,255,255,0.05); }
.text-info { color: var(--info) !important; }

/* Editor Field */
.editor-field {
    border: 2px solid #f1f3f5;
    background-color: #fcfcfc;
    border-radius: 20px;
    height: 500px;
    padding: 25px;
    font-size: 1.1rem;
    line-height: 1.6;
    resize: none;
    transition: 0.2s ease-in-out;
}

/* OVER LIMIT STYLE - CRITICAL */
.is-over-limit {
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
    color: #b02a37 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.bg-success-soft { background-color: #d1e7dd; color: #0f5132 !important; }
.bg-danger-soft { background-color: #f8d7da; color: #842029 !important; }

#limitControls .btn { width: 45px; transition: 0.2s; }
#limitControls .btn:hover { background-color: var(--info); color: white !important; }
.bg-dark { background-color: var(--dark-navy) !important; }

.modal-content {
    background: #ffffff;
}
.text-navy {
    color: var(--navy);
}
.btn-danger {
    background-color: #ff4757;
    border: none;
}
.btn-danger:hover {
    background-color: #ff6b81;
}
.rounded-4 { border-radius: 1.5rem !important; }

@media (max-width: 991px) {
    .editor-field { height: 350px; }
}