/* =============================================
   The Sapphire Tree Cliff — Основные стили
   ============================================= */

:root {
    --bg-primary:    #0d1117;
    --bg-secondary:  #161b22;
    --bg-card:       #1c2230;
    --bg-card-hover: #222b3a;
    --border:        #2d3748;
    --border-light:  #3d4f6a;

    --text-primary:  #e6edf3;
    --text-secondary:#8b949e;
    --text-muted:    #6e7681;

    --accent:        #4a90d9;
    --accent-hover:  #5ba3f5;
    --accent-dark:   #1a3a5c;

    --yellow:        #f0b72f;
    --green:         #3fb950;
    --red:           #f85149;
    --purple:        #8b5cf6;
    --orange:        #fb923c;

    --hp-color:      #ef4444;
    --mp-color:      #3b82f6;
    --rage-color:    #e05c2e;

    --tab-active:    #4a90d9;
    --tab-bg:        #1c2230;

    --radius:        6px;
    --radius-lg:     10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ---- AUTH ---- */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: radial-gradient(ellipse at center, #0f1923 0%, #0d1117 100%);
}
.auth-container { width: 380px; max-width: 100%; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo h1 { font-size: 20px; color: var(--yellow); }
.auth-subtitle { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.auth-card h2 { font-size: 16px; margin-bottom: 20px; color: var(--text-primary); }
.auth-links { margin-top: 16px; text-align: center; font-size: 12px; color: var(--text-secondary); }

/* ---- FORMS ---- */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--text-secondary); }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-card-hover); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border-light); }
.btn-success { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-full { width: 100%; }
.btn-icon { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: var(--radius); }
.btn-icon:hover { color: var(--text-primary); background: var(--bg-card-hover); }

/* ---- ALERTS ---- */
.alert { padding: 10px 12px; border-radius: var(--radius); margin-bottom: 14px; font-size: 12px; }
.alert-error { background: rgba(248, 81, 73, 0.15); border: 1px solid var(--red); color: var(--red); }
.alert-success { background: rgba(63, 185, 80, 0.15); border: 1px solid var(--green); color: var(--green); }

/* ---- LAYOUT ГЛАВНОГО ЭКРАНА ---- */
.app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ---- POINTS BADGES ---- */
.points-header { display: flex; align-items: center; gap: 8px; }
.points-badge {
    font-size: 11px; font-weight: 700;
    padding: 2px 10px; border-radius: 10px;
}
.points-combat { background: rgba(248,81,73,0.15); color: #f85149; border: 1px solid #f85149; }
.points-social  { background: rgba(139,92,246,0.15); color: #8b5cf6; border: 1px solid #8b5cf6; }
.badge-social { background: #8b5cf6 !important; color: #fff !important; }

/* ---- XP BAR ---- */
.xp-bar-wrap { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.xp-bar {
    flex: 1; height: 6px;
    background: var(--bg-primary);
    border-radius: 3px; overflow: hidden;
    border: 1px solid var(--border);
}
.xp-bar-fill { height: 100%; background: var(--yellow); border-radius: 3px; transition: width 0.3s; }
.xp-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

/* ---- DERIVED PARAMS ---- */
.derived-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
}
.derived-col {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 9px;
}
.derived-title {
    font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.derived-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2px 0; font-size: 11px; color: var(--text-secondary);
}
.dval { color: var(--text-primary); font-weight: 600; }

/* Блок штрафов/бонусов сетов доспехов */
.armor-set-summary {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 7px 9px;
    font-size: 11px;
}
.armor-set-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2px 0; color: var(--text-secondary);
}
.armor-set-name { font-weight: 600; color: var(--text-primary); }
.armor-set-pieces { color: var(--text-muted); font-size: 10px; }
.armor-set-pieces.set-full { color: var(--green); font-weight: 700; }
.armor-penalty-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2px 0; color: var(--text-secondary);
    border-top: 1px solid rgba(255,255,255,.04); margin-top: 3px;
}
.armor-pen-val { color: var(--red); font-weight: 600; display: flex; gap: 5px; align-items: center; }

/* Кликабельные строки derived */
.ds-clickable {
    cursor: pointer; border-radius: 4px;
    padding: 3px 4px; margin: 0 -4px;
    transition: background .12s;
}
.ds-clickable:hover { background: rgba(74,144,217,.1); }
.ds-clickable.ds-active {
    background: rgba(74,144,217,.18);
    color: var(--text-primary);
}

/* Панель разбивки стата */
#stat-breakdown-panel {
    grid-column: 1 / -1;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 12px;
}
.sbp-title {
    font-size: 11px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 8px;
}
.sbp-formula {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    margin-bottom: 10px;
}
.sbp-formula-part {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 4px; padding: 2px 8px;
    font-size: 12px; color: var(--text-secondary);
}
.sbp-formula-part strong { color: var(--text-primary); }
.sbp-formula-eq {
    color: var(--text-muted); font-weight: 700; margin: 0 2px;
}
.sbp-skills { display: flex; flex-direction: column; gap: 4px; }
.sbp-skill-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-secondary); border-radius: 4px; padding: 4px 8px;
}
.sbp-skill-name { flex: 1; color: var(--text-primary); font-weight: 600; }
.sbp-skill-detail { color: var(--text-muted); font-size: 11px; }
.sbp-skill-total {
    color: var(--accent); font-weight: 700; min-width: 28px; text-align: right;
}
.sbp-no-skills { color: var(--text-muted); font-style: italic; font-size: 11px; }

/* ---- MAIN PARAMS (социальные) ---- */
.main-params {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.main-param-row {
    display: flex; justify-content: space-between;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 5px 8px; font-size: 11px;
}
.main-param-label { color: var(--text-secondary); }
.main-param-val { font-weight: 700; color: var(--text-primary); }
.hp-color { color: var(--hp-color) !important; }
.mp-color { color: var(--mp-color) !important; }

/* ---- NO CHAR ---- */
.no-char-placeholder {
    text-align: center; padding: 60px 20px; color: var(--text-muted);
}

/* ---- NAVBAR USERNAME ---- */
.navbar-username { color: var(--text-muted); font-size: 12px; }

/* ---- NAVBAR ---- */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.navbar-brand img { width: 28px; height: 28px; border-radius: 50%; }
.navbar-logo-placeholder {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent-dark);
    border: 2px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--accent);
}
.navbar-nav { display: flex; gap: 4px; }
.navbar-nav a {
    padding: 5px 12px;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 13px;
    transition: all 0.15s;
}
.navbar-nav a:hover, .navbar-nav a.active { color: var(--text-primary); background: var(--bg-card); }
.navbar-right { display: flex; align-items: center; gap: 12px; }

/* ---- MAIN AREA ---- */
.main-area {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ---- CHARACTER SHEET ---- */
.character-sheet {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
    gap: 10px;
}

.sheet-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
}

/* ---- STAT PANEL ---- */
.stat-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
}
.stat-panel-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.free-points-badge {
    background: var(--yellow);
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}

.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stat-row:last-child { border-bottom: none; }

.stat-name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}
.stat-icon { width: 14px; height: 14px; opacity: 0.6; }
.stat-tip { color: var(--text-muted); font-size: 10px; cursor: help; }

.stat-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 28px;
    text-align: center;
}
.stat-btn {
    width: 20px; height: 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.stat-btn-minus { background: rgba(248, 81, 73, 0.2); color: var(--red); }
.stat-btn-minus:hover { background: rgba(248, 81, 73, 0.4); }
.stat-btn-plus { background: rgba(63, 185, 80, 0.2); color: var(--green); }
.stat-btn-plus:hover { background: rgba(63, 185, 80, 0.4); }
.stat-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---- COMBAT PANEL ---- */
.combat-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.combat-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
}
.combat-block-title {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
}
.combat-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}
.combat-stat-name { color: var(--text-secondary); font-size: 11px; }
.combat-stat-value { color: var(--text-primary); font-weight: 600; font-size: 12px; }
.combat-stat-value.bonus { color: var(--green); }
.combat-stat-value.malus { color: var(--red); }

/* ---- TABS ---- */
.sheet-tabs {
    display: flex;
    gap: 4px;
    padding: 0 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.sheet-tab {
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.sheet-tab:hover { color: var(--text-primary); }
.sheet-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- TAB PANELS ---- */
.tab-panel { display: none; flex: 1; overflow-y: auto; min-height: 0; }
.tab-panel.active { display: flex; flex-direction: column; }
.tab-panel[data-panel="stats"].active { display: block; overflow-y: auto; }
.coming-soon {
    display: flex; align-items: center; justify-content: center;
    height: 200px; color: var(--text-muted); font-size: 16px;
}

/* ---- НАВЫКИ И УМЕНИЯ ---- */
.skills-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: 100%;
    min-height: 0;
}
.skills-list-panel {
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding-bottom: 20px;
}
.skills-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    position: sticky; top: 0; z-index: 1;
}
.skill-category-label {
    padding: 8px 12px 4px;
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
}
.skill-row {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
}
.skill-row:hover { background: var(--bg-card-hover); }
.skill-row.selected { background: var(--accent-dark); border-left: 2px solid var(--accent); }
.skill-row.skill-active .skill-name { color: var(--text-primary); }
.skill-row.skill-locked { cursor: default; opacity: 0.75; }
.skill-row.skill-locked:hover { background: transparent; }
.skill-lock-icon { font-size: 11px; margin-right: 3px; flex-shrink: 0; }
.skill-prereq-hint { font-size: 10px; color: #f85149; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 6px; }
.skill-row-main { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.skill-name { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.skill-level-badge {
    font-size: 10px; padding: 1px 6px; border-radius: 10px;
    background: var(--bg-secondary); color: var(--text-muted); white-space: nowrap;
}
.skill-level-badge.active { background: rgba(74,144,217,0.2); color: var(--accent); }
.skill-row-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pool-info { font-size: 10px; color: var(--text-muted); }
.pool-free { color: var(--yellow); font-weight: 600; }
/* Pool progress bar */
.skill-pool-wrap { flex: 1; min-width: 0; }
.skill-pool-bar-track { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.skill-pool-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s ease; min-width: 0; }
.skill-row.skill-active .skill-pool-bar-fill { background: linear-gradient(90deg, var(--accent) 0%, #6ec6ff 100%); }
/* Learnable dot */
.skill-dot-learnable {
    display: inline-block; width: 7px; height: 7px;
    background: #4caf50; border-radius: 50%; margin: 0 4px;
    animation: skillDotPulse 2s ease-in-out infinite;
    flex-shrink: 0; vertical-align: middle;
}
@keyframes skillDotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
/* Techniques panel header pool bar */
.tech-header-name { font-weight: 600; font-size: 13px; }
.tech-pool-header { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.tech-pool-bar { width: 100%; }
.btn-level-up {
    font-size: 10px; padding: 2px 7px; border-radius: var(--radius);
    background: rgba(63,185,80,0.15); color: var(--green);
    border: 1px solid rgba(63,185,80,0.3); cursor: pointer;
    white-space: nowrap; transition: background 0.15s;
}
.btn-level-up:hover { background: rgba(63,185,80,0.3); }
.skill-bonuses-preview { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px; }
.bonus-chip {
    font-size: 9px; padding: 1px 5px; border-radius: 8px;
    background: rgba(240,183,47,0.1); color: var(--yellow);
    border: 1px solid rgba(240,183,47,0.2);
}

/* ПАНЕЛЬ ПРИЁМОВ */
.techniques-panel {
    display: flex; flex-direction: column;
    overflow: hidden;
}
.techniques-header {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    position: sticky; top: 0;
    flex-shrink: 0;
}
.techniques-list {
    overflow-y: auto; flex: 1;
    padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.tech-placeholder { color: var(--text-muted); font-size: 12px; text-align: center; padding: 40px 0; }

.technique-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.technique-card.passive-tech { border-left: 3px solid var(--purple); }
.technique-card.learned { border-left: 3px solid var(--green); }
.tech-header {
    padding: 9px 12px;
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.tech-header:hover { background: rgba(74,144,217,0.07); }
.tech-expand-arrow { font-size: 10px; color: var(--text-muted); margin-left: auto; flex-shrink: 0; transition: transform .15s; }
.technique-card.expanded .tech-expand-arrow { transform: rotate(90deg); }
.tech-type-badge {
    font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 600; flex-shrink: 0;
}
.badge-active   { background: rgba(74,144,217,0.25); color: #7ab8f5; }
.badge-passive  { background: rgba(139,92,246,0.25); color: #b08cf5; }
.badge-triggered{ background: rgba(251,146,60,0.25); color: var(--orange); }
.tech-name { font-size: 13px; font-weight: 600; flex: 1; color: var(--text-primary); }
.tech-weapon { font-size: 10px; color: var(--text-muted); background: var(--bg-primary); padding: 1px 6px; border-radius: 4px; }
.tech-learned-badge { font-size: 10px; color: var(--green); font-weight: 700; }
.tech-mp-cost  { font-size: 10px; color: #7ab8f5; font-weight: 600; }
.tech-levels { display: none; flex-direction: column; }
.technique-card.expanded .tech-levels { display: flex; }
.tech-level-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(45,55,72,0.6);
    transition: background 0.1s;
    min-height: 32px;
}
.tech-level-row:last-child { border-bottom: none; }
.tech-level-row.unlocked:hover { background: rgba(74,144,217,0.05); }
.tech-level-row.locked { opacity: 0.35; }
.tech-level-row.current-learned { background: rgba(63,185,80,0.07); }
.lv-badge {
    font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700;
    background: var(--bg-card); color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
    min-width: 36px; text-align: center;
}
.lv-badge.lv-unlocked { background: rgba(74,144,217,0.15); color: #7ab8f5; }
.lv-badge.lv-learned  { background: rgba(63,185,80,0.2); color: var(--green); }
.lv-effect { font-size: 12px; color: var(--text-primary); flex: 1; line-height: 1.3; }
.lv-unlock-req { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.btn-learn {
    font-size: 10px; padding: 3px 9px; border-radius: var(--radius);
    background: rgba(74,144,217,0.2); color: #7ab8f5;
    border: 1px solid rgba(74,144,217,0.35); cursor: pointer;
    white-space: nowrap; flex-shrink: 0;
    transition: background 0.15s;
}
.btn-learn:hover { background: rgba(74,144,217,0.4); }
.btn-learn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 1023px) {
    .skills-layout { grid-template-columns: 260px 1fr; }
}
@media (max-width: 767px) {
    .skills-layout { grid-template-columns: 1fr; }
    .techniques-panel { display: none; }
    .skills-layout.show-techs .skills-list-panel { display: none; }
    .skills-layout.show-techs .techniques-panel { display: flex; }
}

/* ─── СИСТЕМА ЗАКЛИНАНИЙ ─────────────────────────────────────────────────── */
.spells-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100%;
    min-height: 0;
}
.spells-schools-panel {
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding-bottom: 20px;
}
.spells-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    position: sticky; top: 0; z-index: 1;
}
.school-item {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
    display: flex; flex-direction: column; gap: 3px;
}
.school-item:hover { background: var(--bg-card-hover); }
.school-item.selected { background: var(--accent-dark); border-left: 2px solid var(--accent); }
.school-item-main { display: flex; align-items: center; gap: 6px; }
.school-icon { font-size: 14px; }
.school-name { font-size: 12px; font-weight: 500; color: var(--text-secondary); flex: 1; }
.school-item.selected .school-name { color: var(--text-primary); }
.school-count { font-size: 10px; color: var(--text-muted); }
.school-pool-chip {
    font-size: 9px; padding: 1px 5px; border-radius: 8px;
    background: rgba(74,144,217,0.12); color: var(--accent);
    border: 1px solid rgba(74,144,217,0.2); white-space: nowrap;
}
.school-pool-chip.prayer { background: rgba(240,183,47,0.12); color: var(--yellow); border-color: rgba(240,183,47,0.25); }
.school-pool-chip.blood  { background: rgba(248,81,73,0.12);  color: var(--red);    border-color: rgba(248,81,73,0.25); }

/* Панель списка заклинаний */
.spells-detail-panel {
    display: flex; flex-direction: column; overflow: hidden;
}
.spells-detail-header {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.spells-filter-bar {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.spells-search-input {
    width: 100%; box-sizing: border-box;
    padding: 5px 10px;
    background: var(--bg-input, var(--bg-primary));
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
}
.spells-search-input:focus { border-color: var(--accent); }
.spell-filter-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.filter-chip {
    padding: 2px 9px; border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px; cursor: pointer;
    transition: all .15s;
    line-height: 1.6;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: rgba(var(--accent-rgb, 100,140,255),.15); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.filter-chip-learned.filter-chip-learned-active { background: rgba(76,175,80,.15); border-color: #4caf50; color: #4caf50; font-weight: 600; }
.spells-filter-count { font-size: 10px; color: var(--text-muted); margin-left: auto; align-self: center; }
.spells-list-container {
    overflow-y: auto; flex: 1; padding: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.spells-placeholder { color: var(--text-muted); font-size: 12px; text-align: center; padding: 40px 0; }

/* ─── Тултип сравнения предметов ─────────────────────────────────────────── */
.item-cmp-tooltip {
    display: none; position: fixed; z-index: 9999;
    background: var(--bg-card); border: 1px solid var(--accent);
    border-radius: 8px; padding: 10px 14px;
    font-size: 11px; min-width: 175px; max-width: 240px;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.cmp-tip-title { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; font-style: italic; }
.cmp-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-pos { color: var(--green); font-weight: 600; }
.cmp-neg { color: var(--red); font-weight: 600; }
.cmp-eq  { color: var(--text-muted); }
.cmp-tip-none { color: var(--text-muted); font-style: italic; }

/* ─── Сет-тултип (WoW/Diablo style) ─────────────────────────────────────── */
.item-set-tooltip {
    display: none; position: fixed; z-index: 9999;
    background: var(--bg-card); border: 2px solid var(--accent-blue, #4a6fa5);
    border-radius: 8px; padding: 10px 14px;
    min-width: 200px; max-width: 280px;
    font-size: 13px; line-height: 1.4;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    pointer-events: none;
}
.set-tip-name {
    font-weight: 700; font-size: 14px;
    color: var(--accent-blue, #4a9cd6);
    margin-bottom: 3px;
}
.set-tip-count {
    color: var(--text-muted); font-size: 12px;
    margin-bottom: 8px;
}
.set-tip-stats { opacity: .7; font-size: 11px; }
.set-tip-tiers {
    border-top: 1px solid var(--border);
    padding-top: 6px; margin-bottom: 8px;
}
.set-tier {
    padding: 2px 0; color: var(--text-muted); font-size: 12px;
}
.set-tier-active {
    color: var(--gold, #e6c640); font-weight: 600;
}
.set-tier-req { font-weight: 700; margin-right: 2px; }
.set-tip-pieces {
    border-top: 1px solid var(--border);
    padding-top: 6px;
}
.set-piece {
    display: flex; align-items: center; gap: 5px;
    padding: 2px 0; font-size: 12px;
}
.set-piece-eq   { color: var(--green, #5cb85c); }
.set-piece-miss { color: var(--text-muted); }
.set-piece-mark { width: 12px; font-size: 11px; flex-shrink: 0; }

/* Карточка заклинания */
.spell-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    transition: border-color 0.15s;
}
.spell-card:hover { border-color: var(--border-light); }
.spell-card.learned { border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.04); }
.spell-header {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
}
.spell-type-badge {
    font-size: 9px; padding: 1px 5px; border-radius: 8px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.badge-spell-active   { background: rgba(74,144,217,0.2); color: var(--accent); }
.badge-spell-passive  { background: rgba(130,80,255,0.2); color: #a78bfa; }
.spell-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.spell-learned-badge {
    font-size: 10px; padding: 1px 7px; border-radius: 8px;
    background: rgba(63,185,80,0.2); color: var(--green);
    border: 1px solid rgba(63,185,80,0.3); white-space: nowrap;
}
.spell-reqs {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 5px;
}
.spell-req-chip {
    font-size: 10px; color: var(--text-muted);
    display: flex; align-items: center; gap: 2px;
}
.spell-req-chip b { color: var(--text-secondary); }
.spell-effect {
    font-size: 11px; color: var(--text-secondary);
    line-height: 1.5; margin-bottom: 5px;
    border-left: 2px solid var(--border); padding-left: 8px;
}
.spell-extra {
    font-size: 10px; color: var(--text-muted);
    font-style: italic; margin-bottom: 5px;
}
.spell-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.btn-learn-spell {
    font-size: 10px; padding: 3px 10px; border-radius: var(--radius);
    background: rgba(74,144,217,0.15); color: var(--accent);
    border: 1px solid rgba(74,144,217,0.3); cursor: pointer;
    transition: background 0.15s; white-space: nowrap;
}
.btn-learn-spell:hover { background: rgba(74,144,217,0.35); }
.btn-learn-spell:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-forget-spell {
    font-size: 10px; padding: 3px 10px; border-radius: var(--radius);
    background: rgba(248,81,73,0.1); color: var(--red);
    border: 1px solid rgba(248,81,73,0.25); cursor: pointer;
    transition: background 0.15s; white-space: nowrap;
}
.btn-forget-spell:hover { background: rgba(248,81,73,0.25); }
.spell-pool-cost { font-size: 10px; color: var(--text-muted); }

@media (max-width: 1023px) {
    .spells-layout { grid-template-columns: 220px 1fr; }
}
@media (max-width: 767px) {
    .spells-layout { grid-template-columns: 1fr; }
    .spells-detail-panel { display: none; }
    .spells-layout.show-spells .spells-schools-panel { display: none; }
    .spells-layout.show-spells .spells-detail-panel { display: flex; }
}

/* ─── ИНВЕНТАРЬ ─────────────────────────────────────────────────────────── */
.inventory-layout {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.inventory-header {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.currency-display {
    display: flex; align-items: center; gap: 10px; font-size: 12px;
}
.currency-coin {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 12px; font-weight: 600;
}
.coin-gold   { background: rgba(240,183,47,0.15); color: var(--yellow); border: 1px solid rgba(240,183,47,0.3); }
.coin-silver { background: rgba(200,210,220,0.12); color: #c8d2dc; border: 1px solid rgba(200,210,220,0.25); }
.coin-copper { background: rgba(180,120,60,0.15); color: #b4783c; border: 1px solid rgba(180,120,60,0.3); }
.inv-filter-bar {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    flex-shrink: 0;
}
.inv-filter-btn {
    font-size: 10px; padding: 3px 9px; border-radius: 12px;
    background: var(--bg-secondary); color: var(--text-muted);
    border: 1px solid var(--border); cursor: pointer; transition: all 0.15s;
    white-space: nowrap;
}
.inv-filter-btn:hover { border-color: var(--border-light); color: var(--text-secondary); }
.inv-filter-btn.active { background: rgba(74,144,217,0.15); color: var(--accent); border-color: rgba(74,144,217,0.4); }
.inventory-list {
    flex: 1; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.inv-empty { color: var(--text-muted); font-size: 12px; text-align: center; padding: 40px 0; }
.inv-section-label {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 1px; padding: 8px 0 2px; font-weight: 600;
}

/* Карточка предмета */
.item-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.item-card:hover { border-color: var(--border-light); }
.item-card.equipped { border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.03); }
.item-card-header {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap;
}
.item-cat-icon { font-size: 13px; display:inline-flex; align-items:center; }
.item-icon-img { width:32px; height:32px; object-fit:contain; border-radius:4px; }
.stat-icon-sm  { width:15px; height:15px; vertical-align:middle; margin-right:2px; flex-shrink:0; }
.item-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.item-qty-badge {
    font-size: 10px; padding: 1px 6px; border-radius: 8px;
    background: var(--bg-secondary); color: var(--text-muted);
}
.item-equipped-badge {
    font-size: 10px; padding: 1px 7px; border-radius: 8px;
    background: rgba(63,185,80,0.2); color: var(--green);
    border: 1px solid rgba(63,185,80,0.3);
}
.item-quality-badge {
    font-size: 9px; padding: 1px 5px; border-radius: 8px;
    background: rgba(240,183,47,0.12); color: var(--yellow);
    border: 1px solid rgba(240,183,47,0.25);
}
.item-material-badge {
    font-size: 9px; padding: 1px 5px; border-radius: 8px;
    background: rgba(130,80,255,0.12); color: #a78bfa;
    border: 1px solid rgba(130,80,255,0.25);
}
.item-stats {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 3px;
}
.item-stat-chip {
    font-size: 10px; color: var(--text-muted);
    display: flex; align-items: center; gap: 2px;
}
.item-stat-chip b { color: var(--accent); }
.item-stat-chip.pos b { color: var(--green); }
.item-stat-chip.neg b { color: var(--red); }
.item-desc {
    font-size: 11px; color: var(--text-muted); line-height: 1.4;
    margin-bottom: 5px; font-style: italic;
}
.item-reqs {
    font-size: 10px; color: var(--text-muted); margin-bottom: 5px;
}
.item-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.item-price { font-size: 10px; color: var(--text-muted); }
.item-price span { color: #c8d2dc; font-weight: 600; }
.item-actions { display: flex; gap: 5px; }
.btn-equip, .btn-remove, .btn-ia {
    font-size: 10px; padding: 2px 8px; border-radius: var(--radius);
    cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.btn-equip  { background: rgba(74,144,217,0.15); color: var(--accent); border: 1px solid rgba(74,144,217,0.3); }
.btn-equip:hover { background: rgba(74,144,217,0.3); }
.btn-equip.on { background: rgba(63,185,80,0.15); color: var(--green); border-color: rgba(63,185,80,0.3); }
.btn-equip.on:hover { background: rgba(63,185,80,0.3); }
.btn-remove { background: rgba(248,81,73,0.1); color: var(--red); border: 1px solid rgba(248,81,73,0.25); }
.btn-remove:hover { background: rgba(248,81,73,0.25); }

.item-sec-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); }
.btn-ia-use      { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); font-weight: 600; }
.btn-ia-use:hover { background: rgba(52,211,153,.25); }
.btn-ia-transfer { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.btn-ia-transfer:hover { background: rgba(139,92,246,.25); }
.btn-ia-group    { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.btn-ia-group:hover { background: rgba(251,191,36,.2); }
.btn-ia-sell     { background: rgba(249,115,22,.1); color: #fb923c; border: 1px solid rgba(249,115,22,.3); }
.btn-ia-sell:hover { background: rgba(249,115,22,.2); }
.btn-ia-sell:disabled { opacity: .4; cursor: not-allowed; }
.btn-ia-drop     { background: rgba(248,81,73,.1); color: var(--red); border: 1px solid rgba(248,81,73,.25); }
.btn-ia-drop:hover { background: rgba(248,81,73,.25); }

.inv-weight-bar {
    display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted);
}
.weight-bar-track { flex: 1; height: 4px; background: var(--bg-secondary); border-radius: 2px; }
.weight-bar-fill  { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.3s; }

/* ---- CHARACTER FOOTER ---- */
.character-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.char-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    object-fit: cover;
    background: var(--bg-card);
    flex-shrink: 0;
}
.char-avatar-placeholder {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--accent-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--accent); font-weight: 700;
    flex-shrink: 0;
}
.char-info { flex: 1; min-width: 0; }
.char-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.char-level { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.char-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-class { font-size: 11px; color: var(--text-muted); }
.status-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.status-active { background: rgba(63, 185, 80, 0.2); color: var(--green); border: 1px solid var(--green); }
.status-inactive { background: rgba(139, 148, 158, 0.2); color: var(--text-muted); border: 1px solid var(--border); }
.char-bars { display: flex; flex-direction: column; gap: 3px; min-width: 200px; }
.char-bar-row { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.char-bar-label { color: var(--text-muted); width: 20px; }
.char-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.char-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.hp-bar { background: var(--hp-color); }
.mp-bar { background: var(--mp-color); }
.char-bar-val { color: var(--text-secondary); white-space: nowrap; }

.char-exp { font-size: 10px; color: var(--text-muted); }

/* ---- SIDEBAR ---- */
.sidebar {
    width: 280px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.sidebar-char-card {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}
.sidebar-char-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-char-info { flex: 1; min-width: 0; }
.sidebar-char-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-char-sub { font-size: 10px; color: var(--text-muted); }
.sidebar-bars { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.sidebar-tab {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.sidebar-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ---- EDIT MODE ---- */
.editing-mode .stat-btn { display: flex; }
.not-editing .stat-btn { display: none; }
.edit-toggle-btn {
    font-size: 11px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.edit-toggle-btn:hover { color: var(--text-primary); border-color: var(--border-light); }
.edit-toggle-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dark); }

/* =============================================
   АДАПТИВНОСТЬ
   ============================================= */

/* --- Мобильное меню --- */
.navbar-burger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 6px;
    border: none;
    background: transparent;
}
.navbar-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.2s;
}
.mobile-menu {
    display: none;
    position: fixed;
    top: 48px;
    left: 0; right: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    z-index: 100;
    flex-direction: column;
    padding: 8px 0;
}
.mobile-menu.open { display: flex; }
.mobile-menu a, .mobile-menu button {
    padding: 12px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child, .mobile-menu button:last-child { border-bottom: none; }
.mobile-menu a:hover, .mobile-menu button:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* --- Сайдбар как выдвижная панель на мобиле --- */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 98;
}
.sidebar-overlay.open { display: block; }

/* ---- ПЛАНШЕТ (768px – 1023px) ---- */
@media (max-width: 1023px) {

    /* Сайдбар скрываем, показываем по кнопке */
    .sidebar {
        position: fixed;
        right: -300px;
        top: 48px;
        bottom: 0;
        width: 280px;
        z-index: 99;
        transition: right 0.25s ease;
        border-left: 1px solid var(--border);
    }
    .sidebar.open { right: 0; }

    /* Статы в одну колонку */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Боевые блоки — 3 колонки вместо 2 */
    .combat-section {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* Навбар — показываем бургер */
    .navbar-nav { display: none; }
    .navbar-burger { display: flex; }

    /* Кнопка открытия сайдбара */
    .sidebar-toggle-btn { display: flex; }
}

/* ---- МОБИЛЬНЫЙ (< 768px) ---- */
@media (max-width: 767px) {

    /* Шрифты чуть крупнее для пальцев */
    body { font-size: 14px; }

    /* Паддинги компактнее */
    .character-sheet { padding: 8px; gap: 8px; }

    .sheet-title { font-size: 16px; }

    /* Статы на весь экран, одна колонка */
    .stats-grid { grid-template-columns: 1fr; }

    /* Боевые блоки — 2 колонки на телефоне */
    .combat-section { grid-template-columns: 1fr 1fr; }

    /* Вкладки — горизонтальный скролл */
    .sheet-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 8px;
        gap: 2px;
    }
    .sheet-tabs::-webkit-scrollbar { display: none; }
    .sheet-tab {
        padding: 10px 10px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Футер персонажа — компактный */
    .character-footer {
        padding: 6px 8px;
        gap: 8px;
    }
    .char-avatar-placeholder { width: 36px; height: 36px; font-size: 13px; }
    .char-bars { min-width: 140px; }
    .char-bar-val { display: none; } /* Прячем цифры на маленьком экране */

    /* Бары шире */
    .char-bar { height: 10px; }

    /* Кнопки характеристик — крупнее для тапа */
    .stat-btn { width: 28px; height: 28px; font-size: 16px; }
    .stat-value { font-size: 16px; min-width: 32px; }

    /* Авторизация */
    .auth-container { width: 100%; padding: 0 16px; }

    /* Navbar */
    .navbar { padding: 0 12px; }
    .navbar-brand { font-size: 12px; }
    .navbar-burger { display: flex; }
    .navbar-nav { display: none; }
    .navbar-right .btn { display: none; } /* Выход через мобильное меню */
}

/* ---- Кнопка сайдбара (всегда скрыта на десктопе) ---- */
.sidebar-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
}
.sidebar-toggle-btn:hover { color: var(--text-primary); border-color: var(--border-light); }

/* ══════════════════════════════════════════════════════════════
   АДАПТИВНАЯ ВЁРСТКА — Task Alpha
   Планшет: 768–1023px | Мобиль: max 767px
   ══════════════════════════════════════════════════════════════ */

/* ── ПЛАНШЕТ (768–1023px) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { max-width: 100%; padding: 0 16px; }

  /* Навигация */
  .nav-links { gap: 8px; }
  .nav-links a { font-size: 13px; padding: 6px 10px; }

  /* Карточки в сетке */
  .cards-grid,
  .grid-2,
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Лист персонажа */
  .sheet-tabs { flex-wrap: wrap; gap: 4px; }
  .sheet-tab  { font-size: 12px; padding: 6px 10px; }

  /* Боковые панели */
  .sidebar { width: 260px; }
}

/* ── МОБИЛЬ (max 767px) ───────────────────────────────────── */
@media (max-width: 767px) {
  /* Базовые сбросы */
  body    { font-size: 15px; }
  .container { padding: 0 12px; max-width: 100%; }

  /* ── Навигация → горизонтальный скролл ── */
  nav, .navbar, .nav-bar {
    padding: 8px 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 8px;
  }
  /* Бейдж уведомлений */
  .nav-badge {
    font-size: 9px;
    padding: 1px 4px;
    min-width: 14px;
    height: 14px;
  }

  /* ── Карточки ── */
  .card { padding: 12px; border-radius: 8px; }

  /* ── Гриды → 1 колонка ── */
  .cards-grid,
  .grid-2,
  .grid-3,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="display:grid"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Флексы с переносом ── */
  .flex-row,
  [style*="display:flex"]:not(.flex-nowrap):not(.nav-links) {
    flex-wrap: wrap;
  }

  /* ── Лист персонажа ── */
  .character-sheet,
  .sheet-wrap {
    padding: 8px;
  }

  /* Вкладки листа → горизонтальный скролл */
  .sheet-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 12px;
  }
  .sheet-tabs::-webkit-scrollbar { display: none; }
  .sheet-tab {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
    flex-shrink: 0;
  }

  /* Панели листа */
  .sheet-panel { padding: 8px 0; }

  /* ── Ресурс-бары (HP/MP/ОД/Ярость) ── */
  .resource-bars,
  .combat-bars {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .bar-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .bar-label { min-width: 60px; font-size: 13px; }
  .bar-track { height: 18px; }
  .bar-value { font-size: 12px; }

  /* Кнопки ± у баров */
  .bar-btn { width: 30px; height: 30px; font-size: 16px; }

  /* ── Инвентарь → 2 колонки ── */
  .inventory-grid,
  .items-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .item-card { padding: 8px; }
  .item-icon { width: 36px; height: 36px; font-size: 20px; }

  /* ── Кукла персонажа ── */
  .doll-wrap,
  .paper-doll {
    transform: scale(0.85);
    transform-origin: top center;
    margin-bottom: -30px;
  }

  /* ── Характеристики → 2 колонки ── */
  .stats-grid,
  .char-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .stat-box { padding: 8px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 10px; }

  /* ── Производные параметры ── */
  .derived-table { font-size: 13px; }
  .derived-table td { padding: 4px 6px; }

  /* ── Навыки ── */
  .skill-item,
  .skill-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .skill-name { font-size: 13px; }
  .skill-level { font-size: 12px; }

  /* ── Заклинания ── */
  .spell-card { padding: 8px; }
  .spell-name { font-size: 13px; }
  .spell-cost { font-size: 11px; }

  /* ── Боевая вкладка ── */
  .combat-panel .btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .combat-panel .btn { padding: 10px 8px; font-size: 13px; }

  /* Трекер инициативы */
  .initiative-tracker { font-size: 13px; }
  .init-row { padding: 6px 8px; }

  /* Боевой лог */
  .battle-log { max-height: 150px; font-size: 12px; }
  .battle-log-entry { padding: 4px 6px; }

  /* ── Квесты ── */
  .quest-card { padding: 10px; }
  .quest-badges { flex-wrap: wrap; gap: 4px; }

  /* ── Фракции ── */
  .faction-rep-bar { height: 10px; }
  .faction-row { flex-wrap: wrap; gap: 6px; }

  /* ── Формы ── */
  .form-input,
  .form-select,
  textarea.form-input {
    font-size: 16px; /* предотвращает zoom на iOS */
    padding: 10px 12px;
  }
  .form-label { font-size: 13px; margin-bottom: 4px; }

  /* ── Кнопки ── */
  .btn { padding: 10px 16px; font-size: 14px; }
  .btn-sm { padding: 6px 10px; font-size: 12px; }

  /* ── Модальные окна ── */
  .modal-box,
  .modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto;
    padding: 16px;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ── Таблицы → горизонтальный скролл ── */
  .table-wrap,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 500px; }

  /* ── Карта (SVG/Canvas) ── */
  #map-canvas,
  #map-svg,
  .hex-map {
    touch-action: pan-x pan-y pinch-zoom;
    max-width: 100%;
  }
  .map-controls { flex-wrap: wrap; gap: 6px; }
  .map-toolbar { flex-wrap: wrap; gap: 4px; }

  /* ── Admin страницы ── */
  .admin-grid { grid-template-columns: 1fr !important; }
  .admin-section { padding: 12px; }

  /* ── Мастерские страницы ── */
  .master-layout,
  .two-panel {
    flex-direction: column !important;
  }
  .master-sidebar,
  .panel-left,
  .panel-right {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* ── Хедер/заголовки ── */
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }

  /* ── Скрыть второстепенное на мобиле ── */
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }

  /* ── Специфика страниц ── */

  /* character_create.php — шаги */
  .create-steps { flex-direction: column; }
  .create-step-dot { margin: 0 0 8px 0; }

  /* Магазин */
  .shop-items { grid-template-columns: 1fr !important; }
  .shop-item { flex-wrap: wrap; }

  /* Профиль */
  .profile-layout { flex-direction: column !important; }
  .profile-avatar { width: 80px; height: 80px; margin: 0 auto 12px; }
}

/* ── Touch utilities ─────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* На touch-устройствах убираем hover-эффекты */
  .btn:hover { opacity: 1; }
  /* Увеличиваем tap targets */
  .btn, a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .sheet-tab { min-height: 40px; }
  /* Карта — включаем пинч-зум */
  canvas, svg { touch-action: manipulation; }
}

/* ── Утилиты ─────────────────────────────────────────────────── */
.show-mobile { display: none; }
@media (max-width: 767px) { .show-mobile { display: block; } }

/* ── Адаптивные таблицы ──────────────────────────────────────── */
/* Оборачивай широкие таблицы в <div class="table-scroll">       */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Глобальный фоллбэк: таблицы внутри .container без явной обёртки */
@media (max-width: 767px) {
  .container table:not(.no-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}


/* ── Loading state для кнопок (боевой модуль) ────────────── */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Tooltips для игровых терминов ───────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: help;
  border-bottom: 1px dashed currentColor;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
  max-width: 220px;
  white-space: normal;
  text-align: center;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Empty states ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-secondary, #888);
  font-size: 14px;
}
.empty-state-icon { font-size: 32px; margin-bottom: 8px; }
.empty-state-text { line-height: 1.5; }