:root {
    --theme: dark;
    --panel-width: 420px; /* left panel width */
}

:root[data-theme="dark"] {
    --bg: #0e1118;
    --panel-bg: #12151d;
    --text: #e6e9ef;
    --muted: #bfc7d5;
    --border: #333a49;
    --svg-bg: #0c0f15;
    --wheel-bg: #0a0f18;
    --stroke: #333a49;
    --stroke-muted: #555e70;
    --tip-bg: #0b1020;
    --tip-text: #e6ecff;
    --btn: #2a4cff;
    --boost: #22c55e; /* green for boost lines/markers */
}

:root[data-theme="light"] {
    --bg: #ffffff;
    --panel-bg: #f8f9fb;
    --text: #1b2230;
    --muted: #3a475e;
    --border: #d7dde7;
    --svg-bg: #ffffff;
    --wheel-bg: #fbfcff;
    --stroke: #c7cfdb;
    --stroke-muted: #dfe5ef;
    --tip-bg: #ffffff;
    --tip-text: #101623;
    --btn: #2a4cff;
    --boost: #16a34a; /* green for boost lines/markers */
}

body {
    font-family: sans-serif;
    margin: 0;
    display: grid;
    grid-template-columns: var(--panel-width) 1fr;
    height: 100vh;
    background: var(--bg);
    color: var(--text);
}

.panel {
    padding: 1rem;
    background: var(--panel-bg);
    color: var(--text);
    overflow-y: auto;
}

.brand {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.brand svg {
    display: block;
}

.row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.hint {
    font-size: 12px;
    color: var(--muted);
}

label {
    display: block;
    margin-top: 10px;
    font-size: 14px;
}

input, select {
    width: 100%;
    padding: 6px;
    margin-top: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
}

button {
    margin-top: 12px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: var(--btn);
    color: #fff;
    cursor: pointer;
}

.svgWrap {
    background: var(--svg-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    position: relative; /* allow absolute-positioned legend */
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 900px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: 100vh;
    }

    .svgWrap {
        height: calc(100vh - 480px);
    }
}

/* --- Compact mode (14" laptops etc.) --- */
body.compact { /* narrower panel and slightly tighter UI */
    --panel-width: 360px;
}
body.compact .brand svg { transform: scale(.95); transform-origin: left center; }
body.compact label { font-size: 13px; }
body.compact input, body.compact select { padding: 5px; font-size: 13px; }
body.compact button { padding: 7px 10px; }
body.compact .row3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
body.compact .row2 { gap: 6px; }

/* Tables a bit smaller */
body.compact #planetTable table { font-size: 12px; }
body.compact #aspectTable table { font-size: 11px; }

/* Keep the wheel area spacious; trim legend */
body.compact #legend { font-size: 11px; padding: 6px 10px; max-width: 200px; }
body.compact #legend h4 { font-size: 11px; margin-bottom: 4px; }

/* Profiles bar tighter */
body.compact #profilesBar { gap: 4px; margin: 0 10px 10px; }
body.compact .prof-tab { font-size: 11px; padding: 0 4px; }
body.compact .prof-add { font-size: 11px; padding: 5px 8px; }

/* Settings modal slightly narrower */
body.compact .modal { width: min(680px, 96vw); }

/* Prevent aspects matrix from pushing the wheel too far down on small desktops */
@media (min-width: 901px) {
    body.compact #aspectTable { max-height: 260px; overflow: auto; }
}

.error {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: 4px;
}
/* Legend box */
#legend {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: var(--panel-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    box-shadow: 0 6px 18px #0006;
    max-width: 220px;
}
#legend h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
#legend .row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
#legend .swatch { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--border); }
#legend .dash { border-top: 2px dashed var(--text); height: 0; width: 16px; opacity: .6; }

#tip {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: var(--tip-bg);
    color: var(--tip-text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    opacity: 0;
    transform: translate(-50%, -140%);
    transition: opacity 80ms linear;
    white-space: nowrap;
    box-shadow: 0 6px 18px #0008;
}

#planetTable table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 13px;
}

#planetTable th, #planetTable td {
    border-bottom: 1px solid var(--border);
    padding: 6px 4px;
    text-align: left;
}

#planetTable th {
    color: var(--muted);
    font-weight: 600;
}

#planetTable .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

#aspectTable table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 12px;
}

#aspectTable th, #aspectTable td {
    border-bottom: 1px solid var(--border);
    padding: 4px;
    text-align: center;
}

#aspectTable th {
    color: var(--muted);
    font-weight: 600;
}

.chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
}

/* SVG theming via classes */
svg .wheel-base {
    fill: var(--wheel-bg);
    stroke: var(--stroke);
}

svg .wheel-outer {
    fill: none;
    stroke: var(--stroke);
}

svg .wheel-spoke {
    stroke: var(--stroke-muted);
}

svg .zodiac-text {
    fill: var(--muted);
}

svg .marker-label, svg .planet-label {
    fill: var(--text);
}

svg .house-spoke {
    stroke: var(--stroke);
    stroke-width: 1.2;
}

svg .house-label {
    fill: var(--text);
    font-weight: 600;
}

/* Boost visuals */
svg .boost-line {
    stroke: var(--boost);
    stroke-width: 2.8px; /* thicker */
    stroke-dasharray: 6 4; /* dashed */
    opacity: .95;
}

svg .boost-line.highlight { stroke-width: 3.2px; opacity: 1; }

/* If using circular markers / glyphs for boosts */
svg .boost-marker { stroke: var(--boost); }
svg .boost-glyph { fill: var(--boost); }

/* Aspect/planet highlight states */
svg .aspect-line {
    opacity: .9;
    transition: opacity .08s, stroke-width .08s;
}

svg .aspect-line.highlight {
    opacity: 1 !important;
}

svg .aspect-line.dim {
    opacity: .15 !important;
}

svg .planet-glyph, svg .planet-label {
    transition: opacity .08s, transform .08s;
}

svg .planet-glyph.highlight, svg .planet-label.highlight {
    opacity: 1;
}

svg .planet-glyph.dim, svg .planet-label.dim {
    opacity: .35;
}

svg .house-spoke.highlight {
    stroke-width: 2.2;
}

svg .house-label.highlight {
    font-weight: 700;
}

/* Retro / Station coloring */
svg .planet-glyph.retro, svg .planet-label.retro {
    fill: #ff6b6b;
}

svg .planet-glyph.station, svg .planet-label.station {
    fill: #7aa0ff;
}

/* Settings modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: #0008;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.modal {
    background: var(--panel-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: min(720px, 92vw);
    max-height: 88vh;
    overflow: auto;
    box-shadow: 0 20px 60px #000a;
}

.modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--panel-bg);
}

.modal header h3 {
    margin: 0;
    font-size: 16px;
}

.modal .body {
    padding: 12px 16px;
    display: grid;
    gap: 12px;
}

.modal .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal .grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.modal .field label {
    font-size: 12px;
    color: var(--muted);
    display: block;
    margin-bottom: 6px;
}

.modal .footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    background: var(--panel-bg);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-danger {
    background: #e03131;
}

.btn-muted {
    background: var(--border);
    color: var(--text);
}

/* Profiles (tabs) bar */
#profilesBar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px;
    margin: 0 12px 12px;
    background: transparent;
    border-bottom: 1px solid var(--border);
    align-items: flex-end;
}
.prof-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 0px 5px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.prof-tab.active {
    outline: 1px solid var(--btn);
    outline-offset: 0;
}
.prof-name { overflow: hidden; text-overflow: ellipsis; }
.prof-meta { color: var(--muted); }
.prof-del {
    /*width: 18px; height: 18px;*/
    display: inline-flex; align-items: center; justify-content: center;
    /*border-radius: 50%; border: 1px solid var(--border);*/
    background: transparent; color: var(--muted);
    cursor: pointer;
    margin-top: 3px;
    padding: 4px;
}
.prof-del:hover { color: #e03131; border-color: #e03131; }
.prof-del svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    pointer-events: none;
}
.prof-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border: 1px dashed var(--border);
    background: transparent; color: var(--muted);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer; font-size: 12px;
}

/* Collapsible panels styling */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '▾'; float: right; opacity: .6; }
details[open] > summary::after { content: '▴'; }

/* Save profile button styles */
.btn-saveprofile {
    background-color: #4caf50; /* green background */
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-saveprofile:hover {
    background-color: #43a047; /* darker green on hover */
}

#btnCalc + .btn-saveprofile{ margin-left: auto; }

.btn-saveprofile{ float: right; }

body.compact .btn-saveprofile{ padding: 6px 10px; font-size: 13px; }

/* Compact lock group */
.lock-group{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.lock-group label{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12px; opacity:.9; }
.lock-group input{ transform: scale(.95); }
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
fieldset > legend { font-size: 12px; color: var(--muted); padding: 0 6px; }
fieldset label { display: inline-flex; gap: 6px; align-items: center; margin: 4px 8px 4px 0; }

/* Mobile layout helpers */
.mobile-tabs{display:none;gap:8px;padding:8px;position:sticky;top:0;background:var(--bg,#111);z-index:5;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-tabs button{flex:1;padding:10px 12px;border:0;border-radius:6px;background:rgba(255,255,255,.06);color:inherit}
.mobile-tabs button.active{background:rgba(255,255,255,.14)}
.mobile-only{display:none}
body.mobile-layout .mobile-only{display:block}
body.mobile-layout .desktop-only{display:none !important}
@media (max-width: 820px){
    body.mobile-layout #aspectPanel{margin-top:6px}
    body.mobile-layout #planetTable{margin-top:6px}
}

/* Mobile: make planet table layout natural height and full width */
body.mobile-layout #planetTable{ max-height:none !important; overflow:visible !important; }
body.mobile-layout #planetTable table{ width:100%; border-collapse:collapse; }
body.mobile-layout #planetTable td,
body.mobile-layout #planetTable th{ white-space:nowrap; }

/* Force-hide legend on mobile when not on Wheel tab */
body.mobile-layout[data-mobile-tab="planets"] #legend,
body.mobile-layout[data-mobile-tab="aspects"] #legend { display: none !important; }

/* Top logo dock (always visible on mobile) */
.header-dock { display:none; }
body.mobile-layout .header-dock { display:block; position:sticky; top:0; z-index:20; background:var(--bg,#111); border-bottom:1px solid rgba(255,255,255,.08); padding:6px 10px; }
body.mobile-layout .header-dock img, body.mobile-layout .header-dock svg { max-height: 28px; vertical-align: middle; }

/* Mobile: show planets table only on the Planets tab */
body.mobile-layout #planetTable { display:none; height:auto !important; max-height:none !important; overflow:visible !important; padding-bottom:8px; }
body.mobile-layout[data-mobile-tab="planets"] #planetTable { display:block; }
body.mobile-layout #planetTable > div { height:auto !important; max-height:none !important; overflow:visible !important; }
/* If there is a dedicated panel wrapper around planetTable */
body.mobile-layout #planetPanel,
body.mobile-layout .planet-panel { height:auto !important; max-height:none !important; overflow:visible !important; }
/* Common scroll containers used in layout */
body.mobile-layout .scroll,
body.mobile-layout .scroll-y,
body.mobile-layout .panel,
body.mobile-layout .panel-content { height:auto !important; max-height:none !important; overflow:visible !important; }
.mobile-tabs{display:none;gap:8px;padding:8px;position:sticky;top:48px;background:var(--bg,#111);z-index:15;border-bottom:1px solid rgba(255,255,255,.08)}
.header-dock .dock-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.header-dock .dock-row .logo, .header-dock .dock-row [data-logo]{flex:0 0 auto}
.header-dock .dock-row #btnSettings{flex:0 0 auto}