/* ===== Modern CSS v3 - EnglishMaster Grammar Pages ===== */

:root {
    --primary: #E8573A;
    --primary-dark: #C9422A;
    --primary-light: #F0845C;
    --primary-pale: #FDECE8;
    --gold: #D4A853;
    --gold-light: #F5E6C8;
    --secondary: #78716C;
    --accent: #D4A853;
    --bg: #F7F5F0;
    --surface: #FFFFFF;
    --cream: #FDFAF5;
    --border: #E7E5E4;
    --border-light: #F5F5F4;
    --text-main: #1C1917;
    --text-heading: #0C0A09;
    --text-light: #78716C;
    --success: #059669;
    --error: #DC2626;
    --radius: 14px;
    --shadow-xs: 0 1px 3px rgba(13,79,79,0.04);
    --shadow-sm: 0 2px 8px rgba(13,79,79,0.06);
    --shadow: 0 4px 12px rgba(13,79,79,0.08);
    --shadow-lg: 0 12px 40px rgba(13,79,79,0.1);
    --font-heading: 'Fraunces', Georgia, serif;
    --font-body: 'Nunito Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg);
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); color: var(--text-heading); line-height: 1.25; }

/* Layout */
.app-container { display: flex; flex-direction: column; height: 100vh; }
.split-view-container { display: flex; flex: 1; overflow: hidden; position: relative; }
.sidebar {
    width: 270px; background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; transition: width 0.3s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0;
}
.sidebar.collapsed { width: 0; overflow: hidden; }
.main-content { flex: 1; display: flex; overflow: hidden; }

.theory-panel { flex:1; overflow-y:auto; padding:2.5rem 3rem; background:var(--surface); border-right:1px solid var(--border); max-width:55%; }
.theory-content { max-width:700px; margin:0 auto; }
.practice-panel { flex:1; overflow-y:auto; padding:2.5rem; background:var(--cream); }
.practice-content { max-width:620px; margin:0 auto; }

/* Brand */
.brand-logo {
    font-family: var(--font-heading); font-weight:700; font-size:1.2rem;
    color: var(--primary); text-decoration:none; display:flex; align-items:center; gap:0.5rem;
}

/* Theory */
.grammar-topic h1 { font-size:2rem; margin-bottom:1.5rem; color:var(--primary); }
.theory-section { margin-bottom:2.5rem; }
.theory-section h3 {
    font-size:1.1rem; font-family:var(--font-body); font-weight:700; margin-bottom:0.75rem;
    padding-bottom:0.5rem; border-bottom:2px solid var(--border-light); color:var(--primary);
}
.theory-section p { font-size:0.95rem; line-height:1.75; margin-bottom:0.75rem; }
.example-box {
    background:var(--primary-pale); border-left:4px solid var(--primary); padding:1rem 1.5rem;
    border-radius:0 var(--radius) var(--radius) 0; margin:1rem 0; font-style:italic; color:var(--primary-dark);
}

/* Exercise Cards */
.exercise-card {
    background:var(--surface); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.25rem;
    border:1px solid var(--border); transition:all 0.25s cubic-bezier(0.4,0,0.2,1); position:relative;
}
.exercise-card:hover { box-shadow:var(--shadow); border-color:transparent; }
.question-text { font-weight:600; margin-bottom:1rem; display:block; color:var(--text-heading); font-size:0.95rem; line-height:1.5; }
.options-grid { display:grid; grid-template-columns:1fr; gap:0.6rem; }
.option-btn {
    text-align:left; padding:0.8rem 1rem; background:var(--cream); border:1.5px solid var(--border);
    border-radius:10px; cursor:pointer; font-family:var(--font-body); font-size:0.9rem;
    transition:all 0.2s; display:flex; align-items:center; gap:0.75rem; color:var(--text-main);
}
.option-btn:hover:not(:disabled) { border-color:var(--primary); background:var(--primary-pale); color:var(--primary); }
.option-btn.selected { border-color:var(--primary); background:var(--primary-pale); color:var(--primary); font-weight:600; }
.option-btn.correct { border-color:var(--success); background:#E8F8F0; color:#1B7A43; }
.option-btn.incorrect { border-color:var(--error); background:#FEF0F0; color:#C0392B; }

/* Search Modal */
.search-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(6px); z-index:100; display:none; align-items:flex-start; justify-content:center; padding-top:15vh; }
.search-modal { background:var(--surface); width:100%; max-width:580px; border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; animation:slideDown 0.25s ease-out; }
.search-input-wrapper { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:0.75rem; }
.search-icon { color:var(--secondary); }
.search-input { flex:1; border:none; font-size:1.05rem; outline:none; font-family:var(--font-body); background:transparent; color:var(--text-main); }
.search-results { max-height:400px; overflow-y:auto; padding:0.5rem; }
.search-result-item { padding:0.8rem 1rem; border-radius:8px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background 0.15s; }
.search-result-item:hover { background:var(--cream); }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* Buttons */
.btn-primary { background:var(--primary); color:white; border:none; padding:0.8rem 1.75rem; border-radius:10px; font-weight:700; cursor:pointer; font-family:var(--font-body); font-size:0.9rem; transition:all 0.25s; }
.btn-primary:hover { background:var(--primary-light); transform:translateY(-1px); box-shadow:0 6px 20px rgba(13,79,79,0.2); }
.btn-outline { background:var(--surface); border:1.5px solid var(--border); color:var(--text-main); padding:0.8rem 1.75rem; border-radius:10px; font-weight:600; cursor:pointer; font-family:var(--font-body); font-size:0.9rem; transition:all 0.25s; }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.auth-btn { background:var(--primary); color:white; border:none; padding:0.5rem 1.25rem; border-radius:8px; font-weight:600; cursor:pointer; font-size:0.85rem; font-family:var(--font-body); transition:all 0.2s; }
.auth-btn:hover { background:var(--primary-light); }

/* Explanation Box */
.explanation-box { margin-top:0.5rem; padding:1rem 1.25rem; background:var(--primary-pale); border-left:3px solid var(--primary); border-radius:0 8px 8px 0; font-size:0.88rem; color:var(--text-main); display:none; animation:fadeIn 0.3s ease; width:100%; line-height:1.6; }
.explanation-box strong { color:var(--primary); }
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

/* Toggle Switch */
.toggle-switch { display:flex; align-items:center; gap:0.5rem; cursor:pointer; font-size:0.82rem; color:var(--secondary); user-select:none; }
.toggle-switch input { display:none; }
.toggle-slider { width:36px; height:20px; background-color:var(--border); border-radius:20px; position:relative; transition:background 0.2s; }
.toggle-slider::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:white; border-radius:50%; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.12); }
.toggle-switch input:checked+.toggle-slider { background-color:var(--primary); }
.toggle-switch input:checked+.toggle-slider::after { transform:translateX(16px); }
.toggle-switch:hover .toggle-label { color:var(--primary); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); display:none; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(6px); }
.modal { background:var(--surface); padding:2.25rem; border-radius:18px; width:100%; max-width:420px; box-shadow:var(--shadow-lg); position:relative; }
.modal-close { position:absolute; top:1rem; right:1rem; background:var(--cream); border:none; width:34px; height:34px; border-radius:50%; font-size:1.2rem; cursor:pointer; color:var(--secondary); display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--border-light); }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; margin-bottom:0.4rem; font-weight:600; font-size:0.85rem; color:var(--text-heading); }
.form-group input { width:100%; padding:0.8rem 1rem; border:1.5px solid var(--border); border-radius:10px; font-family:var(--font-body); font-size:0.9rem; background:var(--cream); color:var(--text-main); transition:all 0.2s; }
.form-group input:focus { outline:none; border-color:var(--primary); background:white; box-shadow:0 0 0 3px rgba(13,79,79,0.06); }
.auth-submit { width:100%; padding:0.85rem; background:var(--primary); color:white; border:none; border-radius:10px; font-weight:700; cursor:pointer; margin-top:0.75rem; font-family:var(--font-body); font-size:0.95rem; transition:all 0.2s; }
.auth-submit:hover { background:var(--primary-light); }
.auth-switch { margin-top:1.25rem; text-align:center; font-size:0.88rem; color:var(--secondary); }
.auth-switch a { color:var(--primary); cursor:pointer; font-weight:700; margin-left:0.25rem; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#C5BFB5; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#A09A90; }

/* Utilities */
.text-center { text-align:center; }
.mt-1{margin-top:0.25rem} .mt-2{margin-top:0.5rem} .mt-4{margin-top:1rem} .mb-4{margin-bottom:1rem}

@media (max-width:1024px) { .theory-panel{padding:2rem;max-width:50%} }
@media (max-width:768px) {
    .main-content{display:block;overflow-y:auto}
    .theory-panel,.practice-panel{max-width:100%;border-right:none;overflow:visible;height:auto}
    .theory-panel{border-bottom:1px solid var(--border)}
}