:root {
    --mz-bg: #0d1f1a;
    --mz-panel: #14352d;
    --mz-panel-2: #194538;
    --mz-text: #ebfaf2;
    --mz-muted: #b3d6c5;
    --mz-accent: #59b88a;
    --mz-accent-2: #2e8a66;
    --mz-warn: #f2bf33;
    --mz-danger: #f25b5b;
    --mz-blue: #4266a2;
    --mz-purple: #6b57ad;
    --mz-gold: #b9952f;
}

.miznee-signal-app {
    background: var(--mz-bg);
    color: var(--mz-text);
    padding: 12px;
    border-radius: 18px;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.miznee-panel {
    background: var(--mz-panel);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 10px;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.miznee-panel-header {
    background: var(--mz-panel-2);
}

.miznee-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--mz-text);
    margin-bottom: 6px;
}

.miznee-subtitle,
.miznee-input-help,
.miznee-graph-legend {
    color: var(--mz-muted);
    font-size: 12px;
    line-height: 1.5;
}

.miznee-textarea,
.miznee-output {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    resize: vertical;
    background: #1a2723;
    color: var(--mz-text);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    font-family: Consolas, Monaco, monospace;
}

.miznee-textarea {
    min-height: 120px;
    margin-top: 10px;
}

.miznee-output {
    min-height: 620px;
    white-space: pre-wrap;
}

.miznee-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.miznee-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    color: #f3fff8;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.miznee-btn:hover {
    transform: translateY(-1px);
}

.miznee-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.miznee-btn-primary { background: var(--mz-accent-2); }
.miznee-btn-accent { background: var(--mz-accent); color: #072016; }
.miznee-btn-blue { background: var(--mz-blue); }
.miznee-btn-purple { background: var(--mz-purple); }
.miznee-btn-muted { background: #4a4a4a; }

.miznee-status-line,
.miznee-alert-line,
.miznee-countdown-line {
    font-size: 13px;
    line-height: 1.6;
}

.miznee-status-line[data-tone="muted"] { color: var(--mz-muted); }
.miznee-status-line[data-tone="accent"] { color: var(--mz-accent); }
.miznee-status-line[data-tone="warn"] { color: var(--mz-warn); }
.miznee-status-line[data-tone="danger"] { color: var(--mz-danger); }

.miznee-alert-line[data-tone="warn"] { color: var(--mz-warn); }
.miznee-alert-line[data-tone="danger"] { color: var(--mz-danger); }

.miznee-countdown-line { color: var(--mz-accent); }

.miznee-graph-title {
    color: var(--mz-text);
    font-size: 13px;
    margin-bottom: 8px;
}

#miznee-graph-canvas {
    width: 100%;
    display: block;
    border-radius: 10px;
    background: var(--mz-panel);
}

@media (max-width: 768px) {
    .miznee-btn {
        width: 100%;
    }
}

.miznee-btn-gold { background: var(--mz-gold); color: #111; }
/* === FIX: Prevent unreadable text on focus === */

.miznee-textarea,
.miznee-output {
    color: #ebfaf2 !important;
    caret-color: #ebfaf2;
}

/* Force same color when focused / active */
.miznee-textarea:focus,
.miznee-textarea:active,
.miznee-output:focus,
.miznee-output:active {
    color: #ebfaf2 !important;
    background: #1a2723 !important;
    outline: none;
}

/* Prevent browser autofill / weird overrides */
.miznee-textarea:-webkit-autofill,
.miznee-output:-webkit-autofill {
    -webkit-text-fill-color: #ebfaf2 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Ensure selection is visible */
.miznee-textarea::selection,
.miznee-output::selection {
    background: #59b88a;
    color: #072016;
}