/* 
 * Morse Master - CSS Custom Properties for Theming
 * Override these variables in your own stylesheet to customize the theme.
 * See THEMING.md for complete documentation and examples.
 */
:root {
    /* Primary Colors */
    --mt-primary: #4f46e5;
    --mt-primary-hover: #4338ca;
    --mt-primary-light: #e0e7ff;
    --mt-primary-lighter: #c7d2fe;
    --mt-primary-dark: #0f172a;
    --mt-primary-darker: #1e293b;
    
    /* Secondary Colors */
    --mt-secondary: #f1f5f9;
    --mt-secondary-hover: #e2e8f0;
    
    /* Background Colors */
    --mt-bg: #f8fafc;
    --mt-surface: #ffffff;
    --mt-surface-dark: #1e293b;
    --mt-surface-darker: #334155;
    
    /* Text Colors */
    --mt-text-main: #0f172a;
    --mt-text-muted: #64748b;
    --mt-text-light: #cbd5e1;
    --mt-text-lighter: #a0aec0;
    --mt-text-white: #ffffff;
    
    /* Status Colors */
    --mt-success: #10b981;
    --mt-success-bg: #ecfdf5;
    --mt-success-light: #f0fdf4;
    --mt-success-border: #a7f3d0;
    --mt-success-hover: #d1fae5;
    
    --mt-error: #f43f5e;
    --mt-error-bg: #fff1f2;
    --mt-error-light: #ffe4e6;
    --mt-error-border: #ffe4e6;
    
    --mt-info: #4f46e5;
    --mt-info-bg: #e0e7ff;
    --mt-info-border: #c7d2fe;
    
    --mt-warning: #f59e0b;
    
    /* Accent Colors */
    --mt-cyan: #0891b2;
    --mt-cyan-light: #a5f3fc;
    --mt-cyan-bright: #22d3ee;
    
    --mt-sky: #38bdf8;
    
    --mt-indigo-light: #a5b4fc;
    
    /* Border Colors */
    --mt-border: #e2e8f0;
    --mt-border-light: rgba(255, 255, 255, 0.1);
    --mt-border-lighter: rgba(255, 255, 255, 0.15);
    
    /* Shadow & Overlay */
    --mt-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --mt-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
    --mt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --mt-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --mt-overlay: rgba(0, 0, 0, 0.5);
    
    /* Spacing & Layout */
    --mt-radius: 1rem;
    --mt-radius-sm: 0.5rem;
    --mt-radius-lg: 1.5rem;
    --mt-radius-xl: 2rem;
    --mt-radius-full: 9999px;
    
    /* Typography */
    --mt-font: ui-sans-serif, system-ui, sans-serif;
    --mt-font-mono: ui-monospace, monospace;
    
    /* Transitions */
    --mt-transition: all 0.2s;
    --mt-transition-fast: all 0.15s;
    --mt-transition-slow: all 0.3s;
}

/* Base Reset within wrapper */
.mt-wrapper * { box-sizing: border-box; }
.mt-wrapper {
    font-family: var(--mt-font);
    background: var(--mt-bg);
    color: var(--mt-text-main);
    min-height: 100vh;
    padding-bottom: 5rem;
}

/* Header */
.mt-header { background: var(--mt-surface); border-bottom: 1px solid var(--mt-border); position: sticky; top: 0; z-index: 20; }
.mt-header-inner { max-width: 56rem; margin: 0 auto; height: 4rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; }
.mt-logo { display: flex; align-items: center; gap: 0.5rem; }
.mt-logo-icon { width: 2rem; height: 2rem; background: var(--mt-primary); border-radius: var(--mt-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--mt-text-white); }
.mt-logo-text { font-weight: 700; font-size: 1.25rem; }

/* Nav */
.mt-nav { display: flex; background: var(--mt-secondary); padding: 0.25rem; border-radius: 0.75rem; }
.mt-nav-btn { padding: 0.375rem 0.75rem; border-radius: var(--mt-radius-sm); font-size: 0.875rem; font-weight: 500; border: none; background: transparent; cursor: pointer; color: var(--mt-text-muted); transition: var(--mt-transition); }
.mt-nav-btn.active { background: var(--mt-surface); color: var(--mt-primary); box-shadow: var(--mt-shadow-sm); }

.mt-icon-btn { padding: 0.5rem; border-radius: var(--mt-radius-full); border: none; background: transparent; cursor: pointer; color: var(--mt-text-muted); }
.mt-icon-btn:hover { background: var(--mt-secondary); }

/* Main */
.mt-main { max-width: 56rem; margin: 0 auto; padding: 2rem 1rem; }
.mt-card { background: var(--mt-surface); border-radius: var(--mt-radius-lg); padding: 2rem; box-shadow: var(--mt-shadow); border: 1px solid var(--mt-border); margin-bottom: 2rem; }
.mt-card.flex-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mt-card h2, .mt-card h3, .mt-card h4 { margin-top: 0; margin-bottom: 1rem; line-height: 1.3; }
.mt-card h2 { font-size: 1.875rem; font-weight: 700; }
.mt-card h3 { font-size: 1.25rem; font-weight: 700; }
.mt-card h4 { font-size: 1rem; font-weight: 600; }
.mt-card p { margin: 0; color: var(--mt-text-muted); font-size: 0.875rem; line-height: 1.5; }

/* Play Area */
.mt-play-area { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mt-play-controls { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.mt-play-btn { width: 7rem; height: 7rem; border-radius: var(--mt-radius-full); border: none; cursor: pointer; transition: var(--mt-transition); display: flex; align-items: center; justify-content: center; box-shadow: var(--mt-shadow-lg); }
.mt-play-btn.play { background: var(--mt-primary); color: var(--mt-text-white); }
.mt-play-btn.play:hover { background: var(--mt-primary-hover); transform: scale(1.05); }
.mt-play-btn.stop { background: var(--mt-error-bg); color: var(--mt-error); }
.mt-play-btn.stop:hover { background: var(--mt-error-light); }
.mt-hint { margin-top: 1rem; color: var(--mt-text-muted); font-size: 0.875rem; font-weight: 500; }

.mt-input-wrapper { width: 100%; max-width: 24rem; position: relative; margin: 2rem 0 0.5rem 0; }
.mt-input-large { width: 100%; text-align: center; font-size: 1.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 1.25rem; background: var(--mt-secondary); border: 2px solid var(--mt-border); border-radius: var(--mt-radius); outline: none; transition: border-color 0.2s; }
.mt-input-large:focus { border-color: var(--mt-primary); }

.mt-feedback { position: absolute; bottom: -3rem; left: 0; right: 0; font-size: 0.875rem; font-weight: 700; padding: 0.75rem; border-radius: 0.75rem; border: 1px solid transparent; }
.mt-feedback.success { background: var(--mt-success-bg); color: var(--mt-success); border-color: var(--mt-success-hover); }
.mt-feedback.error { background: var(--mt-error-bg); color: var(--mt-error); border-color: var(--mt-error-border); }
.mt-feedback.info { background: var(--mt-info-bg); color: var(--mt-primary); border-color: var(--mt-info-border); }
.hidden { display: none !important; }

.mt-btn-primary { width: 100%; max-width: 24rem; margin-top: 5rem; background: var(--mt-primary-dark); color: var(--mt-text-white); padding: 1rem; border-radius: var(--mt-radius); font-weight: 700; font-size: 1.125rem; border: none; cursor: pointer; transition: opacity 0.2s; }
.mt-btn-primary:hover { background: var(--mt-primary-darker); }
.mt-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.mt-btn-small { padding: 0.5rem 1rem; background: var(--mt-secondary); color: var(--mt-text-main); border: none; border-radius: var(--mt-radius-sm); font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: var(--mt-transition); }
.mt-btn-small:hover { background: var(--mt-secondary-hover); }

.mt-btn-secondary { padding: 0.75rem 1.5rem; background: var(--mt-secondary); color: var(--mt-text-main); border: none; border-radius: 0.75rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: var(--mt-transition); }
.mt-btn-secondary:hover { background: var(--mt-secondary-hover); }

.mt-btn-danger { padding: 0.75rem 1.5rem; background: var(--mt-error); color: var(--mt-text-white); border: none; border-radius: 0.75rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: var(--mt-transition); }
.mt-btn-danger:hover { opacity: 0.9; }

.mt-sub-controls { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.mt-btn-text { background: none; border: none; cursor: pointer; color: var(--mt-text-muted); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.mt-btn-text:hover { color: var(--mt-primary); }

.mt-link-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--mt-primary); font-weight: 600; font-size: 0.875rem; text-decoration: underline; }
.mt-link-btn:hover { opacity: 0.8; }

/* Toggle */
.mt-toggle { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.mt-toggle-input { display: none; }
.mt-toggle-slider { position: relative; width: 2.25rem; height: 1.25rem; background: var(--mt-secondary-hover); border-radius: var(--mt-radius-full); transition: background 0.2s; }
.mt-toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; background: var(--mt-text-white); width: 1rem; height: 1rem; border-radius: 50%; transition: transform 0.2s; box-shadow: var(--mt-shadow-sm); }
.mt-toggle-input:checked + .mt-toggle-slider { background: var(--mt-primary); }
.mt-toggle-input:checked + .mt-toggle-slider::after { transform: translateX(100%); }
.mt-toggle-label { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--mt-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Grid & Layouts */
.mt-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .mt-grid-2 { grid-template-columns: 1fr 1fr; } }
.mt-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .mt-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Cards & Actions */
.mt-card-action { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1.25rem; cursor: pointer; transition: var(--mt-transition); }
.mt-card-action:hover { border-color: var(--mt-indigo-light); transform: translateY(-1px); box-shadow: var(--mt-shadow); }
.mt-card-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; }
.icon-indigo { background: var(--mt-primary-light); color: var(--mt-primary); }
.icon-emerald { background: var(--mt-success-bg); color: var(--mt-success); }

/* Koch Grid */
.mt-koch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .mt-koch-grid { grid-template-columns: repeat(12, 1fr); } }
.mt-char-box { position: relative; aspect-ratio: 1; border-radius: 0.75rem; border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: var(--mt-transition); background: var(--mt-secondary); color: var(--mt-text-light); }
.mt-char-box span { font-size: 1.125rem; font-weight: 900; }
.mt-char-box:hover { transform: scale(1.05); background: var(--mt-secondary); }
/* States */
.mt-char-box.unlocked { background: var(--mt-surface); border-color: var(--mt-primary-light); color: var(--mt-primary); box-shadow: var(--mt-shadow-sm); cursor: default; }
.mt-char-box.manual { background: var(--mt-surface); border-color: var(--mt-cyan-light); color: var(--mt-cyan); cursor: pointer; }
.mt-dot { position: absolute; top: 0.25rem; right: 0.25rem; width: 0.5rem; height: 0.5rem; background: var(--mt-cyan-bright); border-radius: 50%; }
.mt-bar { position: absolute; bottom: 0.25rem; width: 80%; height: 0.25rem; background: var(--mt-secondary); border-radius: 99px; overflow: hidden; }
.mt-bar-fill { height: 100%; transition: var(--mt-transition-slow); }

/* Stats & History */
.mt-label { font-size: 0.875rem; font-weight: 600; color: var(--mt-text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.75rem; }
.mt-stat-value { font-size: 2.25rem; font-weight: 900; color: var(--mt-text-main); }
.mt-history-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mt-history-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--mt-secondary); border-radius: 0.75rem; border-left: 4px solid transparent; font-size: 0.875rem; }
.mt-history-item.success { border-left-color: var(--mt-success); background: var(--mt-success-light); }
.mt-history-item.error { border-left-color: var(--mt-error); background: var(--mt-error-bg); }
.mt-history-result { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-weight: 700; flex-shrink: 0; }
.mt-history-item.success .mt-history-result { background: var(--mt-success); color: var(--mt-text-white); }
.mt-history-item.error .mt-history-result { background: var(--mt-error); color: var(--mt-text-white); }
.mt-history-text { flex: 1; font-weight: 500; color: var(--mt-text-main); text-transform: uppercase; letter-spacing: 0.05em; }
.mt-history-time { font-size: 0.75rem; color: var(--mt-text-muted); white-space: nowrap; }

/* Sections */
.mt-view { display: block; }
.mt-view.hidden { display: none !important; }
.mt-section { margin-bottom: 2rem; }
.mt-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.mt-section-header h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }

/* Level Controls */
.mt-level-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mt-border); }
.mt-level-controls > div { display: flex; gap: 0.75rem; }

/* AI Tip */
.mt-ai-tip { background: var(--mt-info-bg); border-left: 4px solid var(--mt-primary); padding: 1rem; border-radius: var(--mt-radius-sm); margin-bottom: 1.5rem; font-size: 0.875rem; color: var(--mt-text-main); }

/* Guide Styles */
.mt-list-spaced { display: flex; flex-direction: column; gap: 0.75rem; }
.mt-guide-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: var(--mt-secondary); border-radius: 0.5rem; font-size: 0.875rem; color: var(--mt-text-main); font-weight: 500; }
.mt-guide-item strong { color: var(--mt-primary); font-weight: 700; }
.mt-guide-num { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: var(--mt-primary); color: var(--mt-text-white); border-radius: 50%; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; }
.mt-roadmap-chunk { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; background: var(--mt-border-light); border: 1px solid var(--mt-border-light); border-radius: var(--mt-radius); }
@media (min-width: 640px) { .mt-roadmap-chunk { flex-direction: row; align-items: center; gap: 1rem; } }
.mt-roadmap-label { font-family: var(--mt-font-mono); font-weight: 900; font-size: 0.875rem; color: var(--mt-warning); }
@media (min-width: 640px) { .mt-roadmap-label { min-width: 7rem; } }
.mt-roadmap-content { display: flex; flex-direction: column; gap: 0.25rem; }
.mt-roadmap-chars { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; }
.mt-roadmap-desc { font-size: 0.75rem; color: var(--mt-text-lighter); }

/* Abbreviation Grid */
.mt-abbr-card { background: var(--mt-secondary); padding: 1rem; border-radius: 0.75rem; text-align: center; }
.mt-abbr-code { font-weight: 700; color: var(--mt-primary); font-size: 1.125rem; margin-bottom: 0.5rem; }
.mt-abbr-meaning { font-size: 0.75rem; color: var(--mt-text-muted); }

/* Card Variants */
.mt-card.mt-card-dark { background: var(--mt-surface-dark); color: var(--mt-text-white); }
.mt-card.mt-card-dark h3 { color: var(--mt-text-white); }
.mt-card.mt-card-dark h4 { color: var(--mt-text-white); }
.mt-card.mt-card-dark p { color: var(--mt-text-light); }
.mt-card.mt-card-dark .mt-guide-item { background: var(--mt-surface-darker); color: var(--mt-text-white); }
.mt-card.mt-card-dark .mt-guide-item strong { color: var(--mt-sky); }
.mt-card.mt-card-dark .mt-roadmap-chunk { border-color: var(--mt-border-lighter); background: var(--mt-border-light); }
.mt-card.mt-card-dark .mt-roadmap-chars { color: var(--mt-text-white); }
.mt-card.mt-card-dark .mt-roadmap-desc { color: var(--mt-text-lighter); }

/* Form & Inputs */
.mt-form-group { margin-bottom: 1.5rem; }
.mt-form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.875rem; color: var(--mt-text-main); }
.mt-form-group input[type="range"] { width: 100%; cursor: pointer; }
.mt-form-group input[type="text"],
.mt-form-group input[type="password"] { width: 100%; padding: 0.75rem; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-sm); font-size: 0.875rem; }
.mt-form-group input[type="text"]:focus,
.mt-form-group input[type="password"]:focus { outline: none; border-color: var(--mt-primary); }
.mt-input { padding: 0.75rem; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-sm); font-size: 0.875rem; }

.border-top { border-top: 1px solid var(--mt-border); padding-top: 1rem; margin-top: 1rem; }

/* Button Groups */
.mt-btn-group { display: flex; gap: 0.75rem; justify-content: center; }

/* Info Box */
.mt-info-box { background: var(--mt-info-bg); border: 1px solid var(--mt-info-border); border-radius: 0.75rem; padding: 1rem; margin-top: 1rem; font-size: 0.875rem; color: var(--mt-text-main); }

/* Utility Classes */
.flex-center { display: flex; align-items: center; justify-content: center; }
.center { text-align: center; }
.scroll { overflow-y: auto; }

/* Modals */
.mt-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--mt-overlay); overflow-y: auto; }
.mt-modal.hidden { display: none !important; }
.mt-modal-content { position: relative; background: var(--mt-surface); width: 100%; max-width: 28rem; max-height: 90vh; border-radius: var(--mt-radius-xl); box-shadow: var(--mt-shadow-xl); overflow: hidden; display: flex; flex-direction: column; margin: auto; }
.mt-modal-header { padding: 1.5rem; border-bottom: 1px solid var(--mt-border); display: flex; justify-content: space-between; align-items: center; background: var(--mt-bg); flex-shrink: 0; }
.mt-modal-body { padding: 2rem; overflow-y: auto; flex: 1; min-height: 0; }
.mt-modal-footer { padding: 1.5rem; background: var(--mt-bg); border-top: 1px solid var(--mt-border); flex-shrink: 0; }
.mt-close-btn { background: none; border: none; cursor: pointer; color: var(--mt-text-muted); font-size: 1.5rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }

/* Badges */
.mt-badge { font-size: 0.75rem; font-weight: 700; color: var(--mt-primary); background: var(--mt-primary-light); padding: 0.25rem 0.75rem; border-radius: 99px; }
.mt-badge-large { margin-top: 0.75rem; padding: 0.5rem; border-radius: var(--mt-radius-sm); border: 1px solid; font-size: 0.65rem; font-weight: 700; text-align: center; }
.mt-badge-large.active-cloud { background: var(--mt-primary-light); color: var(--mt-primary); border-color: var(--mt-primary-lighter); }
.mt-badge-large.active-local { background: var(--mt-success-bg); color: var(--mt-success); border-color: var(--mt-success-border); }
.mt-badge-large.inactive { background: var(--mt-secondary); color: var(--mt-text-muted); border-color: var(--mt-border); }