@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    --bg-deep: #020204; --panel-bg: rgba(8, 10, 14, 0.90); --top-bar-bg: rgba(2, 2, 4, 0.95);
    --gold-core: #D4AF37; --gold-grad: linear-gradient(135deg, #BF953F 0%, #FCF6BA 50%, #B38728 100%);
    --gold-glow: rgba(212, 175, 55, 0.4); --gold-border: rgba(212, 175, 55, 0.3);
    --cyan-core: #00E5FF; --cyan-glow: rgba(0, 229, 255, 0.3);
    --red-core: #FF003C; --text-main: #EAEAEA; --text-dim: #777777; 
    --input-bg: rgba(0,0,0,0.6); --btn-bg: linear-gradient(180deg, rgba(25,28,34,1) 0%, rgba(10,12,16,1) 100%);
    --font-head: 'Orbitron', sans-serif; --font-mono: 'Space Mono', monospace; --font-text: 'Montserrat', sans-serif;
}

/* =========================================================
   ДОРОГАЯ СВЕТЛАЯ ТЕМА (PLATINUM GLASS) 
   ========================================================= */
body.theme-platinum {
    --bg-deep: #F5F4F0; /* Благородный жемчужно-матовый фон */
    --panel-bg: rgba(255, 255, 255, 0.85); /* Дорогое стекло */
    --top-bar-bg: rgba(255, 255, 255, 0.95);
    --gold-core: #A87E18; /* Тяжелое, темное золото для читаемости */
    --gold-grad: linear-gradient(135deg, #B8860B 0%, #E8D399 50%, #8B6508 100%);
    --gold-glow: rgba(184, 134, 11, 0.15); 
    --gold-border: rgba(184, 134, 11, 0.3); 
    --cyan-core: #1A365D; /* Глубокий футуристичный темно-синий (navy) */
    --cyan-glow: rgba(26, 54, 93, 0.1);
    --red-core: #C0392B; 
    --text-main: #1C1C24; /* Почти черный графит для текста */
    --text-dim: #6E6E7A;
    --input-bg: #FFFFFF; 
    --btn-bg: #FFFFFF;
}

body.theme-platinum .premium-panel {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
    border-top: 2px solid var(--gold-core);
}

body.theme-platinum .cyber-table th { background: rgba(245, 244, 240, 0.9); color: var(--cyan-core); font-weight: 800; border-bottom: 2px solid var(--gold-core); }
body.theme-platinum .cyber-table td { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
body.theme-platinum .cyber-table th:first-child, body.theme-platinum .cyber-table td:first-child { background: rgba(245, 244, 240, 0.9); border-right: 1px dashed rgba(0, 0, 0, 0.15); }
body.theme-platinum .cyber-input { background: #FFFFFF; color: var(--cyan-core); border-color: rgba(0, 0, 0, 0.2); box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); }
body.theme-platinum .cyber-input:focus { border-color: var(--cyan-core); background: #FFFFFF; box-shadow: 0 0 0 3px var(--cyan-glow); }
body.theme-platinum .varga-main-btn { background: rgba(255,255,255,0.95); box-shadow: 0 5px 15px rgba(26, 54, 93, 0.2); }
body.theme-platinum .status-badge { background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-deep); color: var(--text-main); font-family: var(--font-text); overflow-x: hidden; transition: 0.4s ease; }

.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 25px; background: var(--top-bar-bg); border-bottom: 1px solid var(--gold-border); box-shadow: 0 5px 25px rgba(0,0,0,0.3); z-index: 1000; }
.logo-container { display: flex; flex-direction: column; text-decoration: none; cursor: pointer; }
.logo-astro { font-family: var(--font-head); font-size: 1.6rem; font-weight: 900; letter-spacing: 5px; background: var(--gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px var(--gold-glow); }
.logo-processor { font-family: var(--font-mono); font-size: 0.6rem; color: var(--gold-core); letter-spacing: 9px; margin-top: -2px; }

.top-nav-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sq-btn { -webkit-appearance: none; display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background: var(--btn-bg); border: 1px solid var(--gold-border); border-radius: 6px; color: var(--gold-core); cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.05); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); font-family: var(--font-head); font-size: 14px; font-weight: 700; }
.sq-btn svg { width: 22px; height: 22px; filter: drop-shadow(0 0 2px var(--gold-glow)); transition: 0.3s; }
.sq-btn:hover { border-color: var(--gold-core); box-shadow: 0 6px 12px var(--gold-glow); transform: translateY(-1px); }
.sq-btn:active { transform: translateY(2px) scale(0.95); box-shadow: inset 0 4px 8px rgba(0,0,0,0.8); border-color: var(--gold-core); }
.gold-btn { border-color: var(--gold-core); }

.lang-menu { display: none; position: absolute; top: 110%; right: 0; background: var(--panel-bg); border: 1px solid var(--gold-core); border-radius: 4px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 100; }
.lang-item { padding: 10px 20px; font-family: var(--font-head); font-size: 14px; color: var(--gold-core); cursor: pointer; border-bottom: 1px solid var(--gold-border); }
.lang-item:hover { background: var(--gold-glow); color: var(--text-main); }

.main-workspace { max-width: 1500px; margin: 25px auto; padding: 0 15px; display: flex; flex-direction: column; gap: 20px; }
.premium-panel { background: var(--panel-bg); border: 1px solid var(--gold-border); border-top: 2px solid var(--gold-core); border-radius: 4px; padding: 25px; box-shadow: inset 0 0 30px rgba(0,0,0,0.1); position: relative; }
.panel-title { font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; color: var(--gold-core); margin-bottom: 25px; letter-spacing: 3px; text-transform: uppercase; border-bottom: 1px dashed var(--gold-border); padding-bottom: 10px; }

.terminal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.compact-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.compact-3-col { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 10px; margin-bottom: 15px; } 
.input-group { display: flex; flex-direction: column; position: relative; margin-bottom: 15px; }
.compact-2-col .input-group, .compact-3-col .input-group { margin-bottom: 0 !important; }
.input-group label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }

.cyber-input { -webkit-appearance: none; width: 100%; background: var(--input-bg); border: 1px solid var(--gold-border); border-bottom: 2px solid var(--gold-core); color: var(--gold-core); font-family: var(--font-mono); outline: none; transition: 0.3s ease; border-radius: 2px; height: 44px !important; padding: 0 15px !important; font-size: 14px !important; line-height: 44px !important; }
.cyber-input:focus { border-color: var(--cyan-core); border-bottom-color: var(--cyan-core); box-shadow: inset 0 0 10px var(--cyan-glow); }
.smart-placeholder::placeholder { color: var(--text-dim); font-style: italic; opacity: 0.5; font-size: 12px; }

.btn-calc { -webkit-appearance: none; display: inline-block; padding: 0 40px !important; background: var(--gold-grad); color: #000; border: none; font-family: var(--font-head); font-weight: 900; text-transform: uppercase; letter-spacing: 4px; border-radius: 4px; cursor: pointer; transition: 0.2s; height: 50px !important; line-height: 50px !important; font-size: 14px !important; box-shadow: 0 5px 15px var(--gold-glow); }
.btn-calc:hover { box-shadow: 0 8px 25px var(--gold-glow); filter: brightness(1.1); transform: translateY(-2px); }
.btn-calc:active { transform: scale(0.95); box-shadow: 0 2px 10px var(--gold-glow); }

.autocomplete-dropdown { position: absolute; top: 100%; left: 0; min-width: 100%; background: var(--panel-bg); border: 1px solid var(--cyan-core); z-index: 100; max-height: 250px; overflow-y: auto; border-radius: 2px; box-shadow: 0 10px 30px rgba(0,229,255,0.2); margin-top: 4px; }
.autocomplete-item { padding: 12px 15px; font-family: var(--font-mono); font-size: 0.85rem; border-bottom: 1px solid var(--gold-border); cursor: pointer; color: var(--text-main); }
.autocomplete-item:hover { background: var(--cyan-glow); color: var(--cyan-core); }

.charts-grid { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%; max-width: 100%; overflow: hidden; margin-bottom: 15px; }
@media(min-width: 900px) { .charts-grid { flex-direction: row; justify-content: center; } }
.chart-wrapper { position: relative; width: 100%; max-width: 45vh; aspect-ratio: 1 / 1; background: var(--input-bg); border: 1px solid var(--gold-border); border-radius: 4px; box-shadow: inset 0 0 30px rgba(0,0,0,0.2); overflow: hidden; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.chart-wrapper canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: contain; }

/* КНОПКА D1 СТРОГО ПО ЦЕНТРУ КАРТЫ */
.chart-wrapper .varga-center { position: absolute !important; top: 50% !important; left: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -50%) !important; z-index: 10 !important; }
.varga-main-btn { -webkit-appearance: none; background: var(--panel-bg); border: 2px solid var(--cyan-core); color: var(--cyan-core); width: 55px; height: 55px; font-family: var(--font-head); font-size: 1.1rem; font-weight: 900; border-radius: 4px; cursor: pointer; box-shadow: 0 0 15px var(--cyan-glow); display: flex; justify-content: center; align-items: center; transition: 0.2s; }
.varga-main-btn:hover { background: var(--cyan-core); color: #FFF; }
.varga-main-btn:active { transform: scale(0.92); }
.varga-list { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--panel-bg); border: 1px solid var(--cyan-core); border-radius: 4px; width: 260px; max-height: 350px; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.8); z-index: 20; }
.varga-item { padding: 12px 15px; border-bottom: 1px solid var(--gold-border); cursor: pointer; color: var(--text-main); font-family: var(--font-mono); }
.varga-item:hover { background: var(--cyan-glow); color: var(--cyan-core); }

.time-shift-panel { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 5px; background: rgba(0,0,0,0.3); border: 1px dashed var(--gold-border); border-radius: 4px; width: 100%; max-width: 45vh; margin: 0 auto; }
.time-btn { width: 36px !important; height: 32px !important; font-size: 10px !important; padding: 0 !important; background: var(--input-bg); border-color: var(--gold-border); color: var(--gold-core); }
.time-btn:hover { background: var(--gold-glow); border-color: var(--gold-core); color: #FFF; }

.tabs-container { display: flex; border-bottom: 1px solid var(--gold-border); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs-container::-webkit-scrollbar { display: none; }
.tab-btn { background: transparent; border: none; color: var(--text-dim); padding: 12px 20px; font-family: var(--font-head); font-size: 0.8rem; font-weight: 700; cursor: pointer; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; transition: 0.2s; }
.tab-btn:hover { color: var(--text-main); }
.tab-btn.active { color: var(--gold-core); border-bottom: 2px solid var(--gold-core); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.table-responsive { width: 100%; max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; border-radius: 4px; border: 1px solid var(--gold-border); background: var(--input-bg); position: relative; }
.cyber-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: max-content; }
.cyber-table th { background: var(--panel-bg); text-align: left; padding: 10px 12px; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 1px; border-bottom: 1px solid var(--gold-border); text-transform: uppercase; white-space: nowrap; }
.cyber-table td { padding: 10px 12px; border-bottom: 1px solid var(--gold-border); white-space: nowrap; font-size: 0.85rem; }
.cyber-table tr:hover td { background: var(--gold-glow); }
.cyber-table th:first-child, .cyber-table td:first-child { position: sticky; left: 0; background: var(--panel-bg); z-index: 2; border-right: 1px dashed var(--gold-border); }
.cyber-table th:first-child { z-index: 3; }

.table-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--gold-border); }
.varga-table-select { -webkit-appearance: none; background: var(--panel-bg); color: var(--gold-core); border: 1px solid var(--gold-core); padding: 8px 15px; font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; border-radius: 4px; cursor: pointer; outline: none; box-shadow: 0 0 10px var(--gold-glow); transition: 0.2s; }
.varga-table-select:focus { background: var(--gold-glow); color: var(--text-main); }
.varga-table-select option { background: var(--panel-bg); color: var(--text-main); }

.status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; font-size: 10px; font-family: var(--font-mono); font-weight: bold; border-radius: 3px; border: 1px solid; margin: 1px; white-space: nowrap; cursor: help; background: rgba(0,0,0,0.5); text-decoration: none; transition: 0.2s; }
.status-badge:hover { background: var(--cyan-glow); color: var(--cyan-core) !important; border-color: var(--cyan-core) !important; }
.tooltip-box { display: none; position: absolute; background: var(--panel-bg); border: 1px solid var(--cyan-core); padding: 12px 18px; font-family: var(--font-mono); font-size: 13px; color: var(--text-main); z-index: 10000; border-radius: 4px; box-shadow: 0 10px 25px rgba(0,0,0,0.8); pointer-events: none; max-width: 250px; line-height: 1.4; }

.vh-top-menu { display: flex; background: var(--panel-bg); border-bottom: 2px solid var(--gold-core); padding: 0 15px; overflow-x: auto; scrollbar-width: none; backdrop-filter: blur(10px); }
.vh-top-menu::-webkit-scrollbar { display: none; }
.vh-top-btn { background: transparent; border: none; color: var(--text-main); padding: 12px 20px; font-family: var(--font-text); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: 0.2s; opacity: 0.7; }
.vh-top-btn:hover { opacity: 1; color: var(--gold-core); }
.vh-top-btn.active { opacity: 1; color: var(--bg-deep); background: var(--gold-core); border-radius: 4px 4px 0 0; }

.misc-full-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 20px; }
@media (min-width: 900px) { .misc-full-grid { grid-template-columns: 1fr 1fr; } }

/* ПЕРИОДЫ */
.dasha-row { display: flex; justify-content: space-between; padding: 12px 15px; background: rgba(0,0,0,0.6); border: 1px solid var(--gold-border); border-left: 3px solid var(--gold-core); margin-bottom: 6px; cursor: pointer; border-radius: 2px; font-family: var(--font-mono); font-size: 14px; color: var(--text-main); transition: 0.2s; }
.dasha-row:hover { background: var(--gold-glow); border-color: var(--gold-core); }
.dasha-planet { font-weight: 700; color: var(--gold-core); width: 30%; }
.dasha-dates { color: var(--text-main); width: 50%; text-align: center; }
.dasha-age { color: var(--cyan-core); width: 20%; text-align: right; }
.dasha-sub-row { display: flex; justify-content: space-between; padding: 10px 15px 10px 25px; background: rgba(0,229,255,0.05); border-left: 2px solid var(--cyan-core); margin-bottom: 4px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--text-main); transition: 0.2s; }
.dasha-sub-row:hover { background: rgba(0,229,255,0.15); border-color: var(--cyan-core); }
.dasha-sub-planet { font-weight: 700; color: var(--cyan-core); }

@media (max-width: 800px) {
    .terminal-grid { grid-template-columns: 1fr; }
    .compact-3-col { grid-template-columns: 1fr 1fr 70px; gap: 8px; } 
    .table-header-flex { flex-direction: column; align-items: flex-start; gap: 10px; }
    .vh-top-menu { display: flex; justify-content: space-between; padding: 0 5px; }
    .vh-top-btn { padding: 10px 4px; font-size: 10px; flex: 1; text-align: center; letter-spacing: 0px; }
}