/* ══════════════════════════════════════════
   Space Simulation — Dark Space Theme v5
   ══════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; color:#ddd; }
canvas { display:block; }

/* ── Loading ── */
.loading-screen { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#000; }
.loading-screen.hidden { display:none; }
.loader { width:44px; height:44px; border:3px solid rgba(255,255,255,.1); border-top-color:#6ea8fe; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-screen p { margin-top:14px; color:#777; font-size:13px; letter-spacing:.5px; }

/* ── Shared panel glass ── */
.panel, .control-panel {
    position:fixed; z-index:100;
    background:rgba(8,10,18,.93);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px; color:#ddd; font-size:13px;
}
.hidden { display:none !important; }
.panel-close { position:absolute; top:10px; right:14px; background:none; border:none; color:#666; font-size:20px; cursor:pointer; line-height:1; }
.panel-close:hover { color:#fff; }

/* ── Info Panel ── */
.info-panel { top:20px; right:20px; width:280px; padding:20px; }
.info-panel h2 { font-size:18px; font-weight:600; color:#fff; margin-bottom:10px; }
.info-grid { display:flex; flex-direction:column; gap:1px; }
.info-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:12px; }
.info-row .lbl { color:#777; }
.info-desc { margin:10px 0; color:#999; line-height:1.55; font-size:12px; }
.info-actions { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }

/* Objects-in-simulation section (galaxy / nebula info) */
.info-objects-section { margin: 8px 0 6px; }
.info-objects-header { font-size:11px; font-weight:600; color:#6ea8fe; letter-spacing:.4px; margin-bottom:5px; }
.info-objects-list { display:flex; flex-direction:column; gap:3px; max-height:160px; overflow-y:auto; scrollbar-width:thin; }
.info-obj-item {
    display:flex; align-items:center; gap:7px;
    padding:4px 7px; border-radius:6px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
    font-size:11px; color:#ccc; cursor:pointer; transition:background .15s;
}
.info-obj-item:hover { background:rgba(110,168,254,.15); color:#fff; }
.info-obj-icon { font-size:13px; flex-shrink:0; }
.info-obj-name { flex:1; font-weight:500; }
.info-obj-type { font-size:10px; color:#666; }
.btn-delete-obj { padding:6px 12px; font-size:11px; }

/* ── Camera Mode HUD ── */
.hud-badge {
    position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:120;
    background:rgba(8,10,18,.88); border:1px solid rgba(255,255,255,.1);
    border-radius:10px; padding:8px 18px; display:flex; align-items:center; gap:10px;
    font-size:13px; color:#aaa;
}
.hud-sub { font-size:11px; color:#6ea8fe; }
.hud-badge .btn-xs { padding:3px 10px; font-size:11px; background:rgba(255,255,255,.08); border:none; color:#ccc; border-radius:5px; cursor:pointer; }
.hud-badge .btn-xs:hover { background:rgba(255,255,255,.15); color:#fff; }
.hud-badge .btn-exit { background:rgba(255,60,60,.15); color:#f88; }
.hud-badge .btn-exit:hover { background:rgba(255,60,60,.25); color:#faa; }

/* ── Surface HUD (WASD hints) ── */
.surface-hud {
    position:fixed; bottom:30px; left:50%; transform:translateX(-50%); z-index:110;
    background:rgba(8,10,18,.8); border:1px solid rgba(255,255,255,.07);
    border-radius:10px; padding:10px 20px; display:flex; gap:20px;
    font-size:11px; color:#888;
}
.surface-hud-row { display:flex; align-items:center; gap:4px; }
kbd {
    display:inline-block; padding:2px 6px; font-size:10px; font-family:inherit;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    border-radius:3px; color:#aaa; min-width:18px; text-align:center;
}

/* ── Telescope Overlay ── */
.telescope-overlay {
    position:fixed; inset:0; z-index:80; pointer-events:none;
}
.telescope-vignette {
    position:absolute; inset:0;
    background:radial-gradient(
        ellipse 55% 55% at 50% 50%,
        transparent 0%,
        transparent 60%,
        rgba(0,0,0,0.6) 75%,
        rgba(0,0,0,0.92) 88%,
        rgba(0,0,0,1) 100%
    );
}
.telescope-reticle {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:300px; height:300px;
}
.reticle-line {
    position:absolute; background:rgba(255,255,255,.08);
}
.reticle-h {
    top:50%; left:0; width:100%; height:1px; transform:translateY(-50%);
}
.reticle-v {
    left:50%; top:0; height:100%; width:1px; transform:translateX(-50%);
}
.reticle-circle {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:120px; height:120px; border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
}
.telescope-info {
    position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:14px;
    background:rgba(8,10,18,.85); border:1px solid rgba(255,255,255,.08);
    border-radius:8px; padding:8px 20px;
    font-size:12px; color:#888;
}
.tele-label {
    color:#6ea8fe; font-weight:700; letter-spacing:2px; font-size:10px;
    text-transform:uppercase;
}
.tele-zoom {
    color:#fff; font-weight:600; font-size:16px; font-family:'Courier New',monospace;
}
.tele-hint {
    font-size:10px; color:#555;
}

/* ── Accretion Status HUD ── */
.accretion-hud {
    position:fixed; bottom:80px; right:20px; z-index:120;
    background:rgba(8,10,18,.92);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,160,40,.2);
    border-radius:12px; padding:14px 20px; min-width:220px;
}
.accretion-title {
    font-size:10px; font-weight:700; letter-spacing:2px; color:#ff9800;
    text-transform:uppercase; margin-bottom:10px;
}
.accretion-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:3px 0; font-size:12px;
}
.accretion-lbl { color:#888; }
.accretion-val { color:#fff; font-weight:600; font-family:'Courier New',monospace; font-size:13px; }
.accretion-bar-bg {
    margin-top:8px; height:4px; background:rgba(255,255,255,.08);
    border-radius:2px; overflow:hidden;
}
.accretion-bar-fill {
    height:100%; background:#6ea8fe; border-radius:2px;
    transition:width 0.3s ease, background 0.3s ease;
}
.accretion-hint {
    margin-top:8px; font-size:10px; color:#555; text-align:center;
}

/* ── Control Panel ── */
.control-panel { top:20px; left:20px; width:440px; max-height:calc(100vh - 40px); overflow-y:auto; padding:0; }
.cp-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; }
.cp-header h3 { font-size:15px; font-weight:600; color:#fff; }
.cp-header .panel-close { position:static; }

.cp-tabs {
    display:flex; flex-wrap:wrap; gap:0;
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:0 4px;
}
.cp-tab {
    flex:0 0 auto; padding:7px 8px; font-size:10.5px; text-align:center;
    background:none; border:none; color:#666; cursor:pointer;
    border-bottom:2px solid transparent;
    transition:color .2s, border-color .2s;
    white-space:nowrap;
}
/* Visual separator before the secondary group */
.cp-tab[data-tab="tab-display"] {
    margin-left:4px;
    border-left:1px solid rgba(255,255,255,.08);
    padding-left:8px;
}
.cp-tab:hover { color:#aaa; }
.cp-tab.active { color:#6ea8fe; border-bottom-color:#6ea8fe; }

.cp-section { display:none; padding:14px 18px 18px; }
.cp-section.active { display:block; }

.ctrl-label { display:flex; align-items:center; gap:6px; font-size:11px; color:#777; margin:10px 0 4px; text-transform:uppercase; letter-spacing:.5px; }
.val-badge { background:rgba(110,168,254,.15); color:#6ea8fe; font-size:10px; padding:1px 6px; border-radius:4px; font-weight:600; text-transform:none; letter-spacing:0; }
.hint { font-size:11px; color:#555; margin-bottom:10px; line-height:1.5; }
.selected-name { font-size:14px; font-weight:600; color:#fff; margin-bottom:8px; padding:6px 10px; background:rgba(255,255,255,.04); border-radius:6px; }

.cp-section select, .cp-section input[type="text"] {
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:6px; color:#ddd; padding:7px 10px; font-size:12px; outline:none;
}
.cp-section select:focus, .cp-section input[type="text"]:focus { border-color:rgba(110,168,254,.4); }
.cp-section input[type="range"] { width:100%; accent-color:#6ea8fe; margin:2px 0 6px; }

/* ── Add Object type picker ── */
.add-type-grid {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin:6px 0 12px;
}
.add-type-btn {
    padding:9px 4px; font-size:11px; text-align:center; line-height:1.55;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    border-radius:9px; color:#777; cursor:pointer; transition:all .18s;
}
.add-type-btn:hover {
    color:#aad4ff; border-color:rgba(110,168,254,.35);
    background:rgba(110,168,254,.07);
}
.add-type-btn.active {
    color:#6ea8fe; border-color:#6ea8fe;
    background:rgba(110,168,254,.15); font-weight:600;
}
.add-divider { border:none; border-top:1px solid rgba(255,255,255,.07); margin:18px 0 14px; }

/* Place-in-space hint bar */
.add-place-hint {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(110, 168, 254, 0.12);
    border: 1px solid rgba(110, 168, 254, 0.4);
    border-radius: 8px;
    font-size: 11.5px;
    color: #9bbdfc;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: placePulse 1.4s ease-in-out infinite alternate;
}
.add-place-hint strong { color: #6ea8fe; }
.add-cancel-btn {
    margin-left: auto;
    background: rgba(255,80,80,0.15);
    border: 1px solid rgba(255,80,80,0.35);
    border-radius: 6px;
    color: #ff7777;
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background .15s;
}
.add-cancel-btn:hover { background: rgba(255,80,80,0.28); }
@keyframes placePulse {
    from { border-color: rgba(110,168,254,0.3); }
    to   { border-color: rgba(110,168,254,0.7); }
}
/* Crosshair cursor in placement mode */
body.place-mode #spaceCanvas { cursor: crosshair !important; }

.ctrl-row { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.time-btn {
    flex:1; min-width:36px; padding:6px 2px; font-size:11px; text-align:center;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    border-radius:6px; color:#999; cursor:pointer; transition:all .15s;
}
.time-btn:hover { background:rgba(255,255,255,.1); color:#ccc; }
.time-btn.active { background:rgba(110,168,254,.15); border-color:rgba(110,168,254,.3); color:#6ea8fe; }
.time-btn-fast {
    background:rgba(255,140,0,.08); border-color:rgba(255,140,0,.15); color:#cc8833;
}
.time-btn-fast:hover { background:rgba(255,140,0,.15); color:#ffaa44; }
.time-btn-fast.active { background:rgba(255,140,0,.2); border-color:rgba(255,140,0,.35); color:#ffaa44; }

.toggle-row { display:flex; align-items:center; gap:8px; padding:8px 0; cursor:pointer; font-size:13px; }
.toggle-row input[type="checkbox"] { accent-color:#6ea8fe; }

.collision-preview {
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:12px; margin:10px 0; background:rgba(255,50,50,.06);
    border:1px solid rgba(255,50,50,.12); border-radius:8px;
    font-size:14px; font-weight:600; color:#e88;
}
.collision-arrow { font-size:20px; }

.color-picker-row {
    display:flex; align-items:center; gap:10px; margin:4px 0 8px;
}
.color-picker-row input[type="color"] {
    width:36px; height:28px; border:1px solid rgba(255,255,255,.12);
    border-radius:6px; background:rgba(255,255,255,.05); cursor:pointer;
    padding:2px;
}
.color-picker-row input[type="color"]::-webkit-color-swatch-wrapper { padding:1px; }
.color-picker-row input[type="color"]::-webkit-color-swatch { border:none; border-radius:4px; }

.collide-section-divider {
    margin:12px 0 8px;
    border-top:1px solid rgba(255,255,255,.06);
}
.collide-sub-header {
    font-size:11px; font-weight:600; color:#999;
    text-transform:uppercase; letter-spacing:1px;
    margin-bottom:4px;
}

/* ── Buttons ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    padding:8px 16px; border:none; border-radius:8px;
    font-size:12px; font-weight:500; cursor:pointer; transition:background .15s, transform .1s;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:#4a7cff; color:#fff; }
.btn-primary:hover { background:#5d8dff; }
.btn-accent { background:#2d8a6e; color:#fff; }
.btn-accent:hover { background:#37a080; }
.btn-danger { background:#d94040; color:#fff; }
.btn-danger:hover { background:#e55555; }
.btn-sm { padding:6px 12px; font-size:11px; background:rgba(255,255,255,.07); color:#ccc; border:none; border-radius:6px; cursor:pointer; }
.btn-sm:hover { background:rgba(255,255,255,.13); }
.btn-block { width:100%; margin-top:8px; }

/* ── Notification ── */
.notification {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
    background:rgba(8,10,18,.92); border:1px solid rgba(255,255,255,.08);
    border-radius:10px; padding:10px 24px; font-size:13px; color:#ccc; z-index:200;
    pointer-events:none; transition:opacity .4s;
}
.notification.hidden { opacity:0; }

/* ── Labels ── */
.obj-label {
    color:rgba(255,255,255,.72); font-size:11px; font-family:'Segoe UI',system-ui,sans-serif;
    pointer-events:none; text-shadow:0 0 8px rgba(0,0,0,.95);
    white-space:nowrap; position:absolute;
}

/* ── Belt Labels ── */
.belt-label {
    color:rgba(180,190,210,.7); font-size:12px; font-weight:600;
    font-family:'Segoe UI',system-ui,sans-serif;
    pointer-events:none; text-shadow:0 0 10px rgba(0,0,0,.95), 0 0 20px rgba(60,80,120,.3);
    white-space:nowrap; position:absolute;
    letter-spacing:2px; text-transform:uppercase;
}

/* ── Crosshair ── */
.crosshair {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:28px; color:rgba(255,255,255,.3); z-index:90; pointer-events:none;
    font-family:monospace; text-shadow:0 0 6px rgba(0,0,0,.8);
}

/* ── Toggle button ── */
.control-toggle {
    position:fixed; top:20px; left:20px; z-index:101;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:rgba(8,10,18,.85); border:1px solid rgba(255,255,255,.08);
    border-radius:10px; color:#aaa; font-size:18px; cursor:pointer; transition:all .2s;
}
.control-toggle:hover { background:rgba(20,24,40,.95); color:#fff; }
.control-toggle.hidden { display:none; }

/* ── Scrollbar ── */
.control-panel::-webkit-scrollbar { width:4px; }
.control-panel::-webkit-scrollbar-track { background:transparent; }
.control-panel::-webkit-scrollbar-thumb { background:#222; border-radius:4px; }
.control-panel { scrollbar-width:thin; scrollbar-color:#222 transparent; }

/* ── Search ── */
.search-toggle-btn {
    position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:130;
    display:flex; align-items:center; gap:6px;
    background:rgba(8,10,18,.85); border:1px solid rgba(255,255,255,.1);
    border-radius:20px; padding:7px 16px;
    color:#888; font-size:12px; cursor:pointer;
    transition:all .2s; white-space:nowrap;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.search-toggle-btn:hover { background:rgba(20,24,40,.95); color:#ccc; border-color:rgba(110,168,254,.3); }
.search-toggle-btn.hidden { display:none; }

.search-bar {
    position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:140;
    width:440px; max-width:calc(100vw - 40px);
}

.search-input-wrap {
    display:flex; align-items:center; gap:8px;
    background:rgba(8,10,22,.97); border:1px solid rgba(110,168,254,.4);
    border-radius:12px; padding:11px 14px;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:0 8px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(110,168,254,.08), 0 0 20px rgba(110,168,254,.06);
}

.search-icon { font-size:14px; opacity:.5; flex-shrink:0; }

#searchInput {
    flex:1; background:none; border:none; color:#fff; font-size:14px;
    outline:none; font-family:inherit;
}
#searchInput::placeholder { color:#444; }

.search-esc-hint {
    flex-shrink:0; padding:2px 7px; font-size:10px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
    border-radius:4px; color:#555; font-family:inherit;
}

.search-results {
    margin-top:6px;
    background:rgba(8,10,22,.98); border:1px solid rgba(255,255,255,.07);
    border-radius:12px; overflow:hidden;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:0 12px 40px rgba(0,0,0,.8);
    max-height:340px; overflow-y:auto;
}
.search-results::-webkit-scrollbar { width:4px; }
.search-results::-webkit-scrollbar-thumb { background:#222; border-radius:4px; }

.search-result-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; cursor:pointer;
    transition:background .1s;
    border-bottom:1px solid rgba(255,255,255,.04);
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover,
.search-result-item.sri-active { background:rgba(110,168,254,.1); }

.sri-icon { font-size:17px; width:24px; text-align:center; flex-shrink:0; }
.sri-name { flex:1; font-size:13px; color:#ddd; font-weight:500; }
.sri-highlight { color:#6ea8fe; }
.sri-type {
    font-size:10px; color:#6ea8fe;
    background:rgba(110,168,254,.12); padding:2px 8px;
    border-radius:20px; white-space:nowrap; flex-shrink:0;
}
.sri-type.type-blackhole { color:#cc88ff; background:rgba(180,100,255,.12); }
.sri-type.type-star      { color:#ffcc55; background:rgba(255,200,60,.1); }
.sri-type.type-galaxy    { color:#88ccff; background:rgba(100,180,255,.1); }
.sri-type.type-nebula    { color:#cc88cc; background:rgba(200,100,200,.1); }
.sri-type.type-moon      { color:#aabbcc; background:rgba(150,170,190,.1); }

.search-no-results {
    padding:16px 14px; text-align:center; color:#444; font-size:12px;
}

.search-section-header {
    padding:8px 14px 4px; font-size:10px; color:#555;
    text-transform:uppercase; letter-spacing:1px; font-weight:600;
}

/* ── Panel Search (inside control panel) ── */
.panel-search-wrap {
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    border-radius:8px; padding:8px 10px; margin-bottom:6px;
}
.panel-search-wrap:focus-within {
    border-color:rgba(110,168,254,.4);
    box-shadow:0 0 0 2px rgba(110,168,254,.07);
}
#panelSearchInput {
    flex:1; background:none; border:none; color:#fff; font-size:13px;
    outline:none; font-family:inherit;
}
#panelSearchInput::placeholder { color:#444; }

.panel-search-results {
    max-height:310px; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:#222 transparent;
}
.panel-search-results::-webkit-scrollbar { width:4px; }
.panel-search-results::-webkit-scrollbar-thumb { background:#222; border-radius:4px; }
.panel-search-results .search-result-item { border-radius:6px; margin-bottom:1px; }
.panel-search-results .search-result-item:last-child { border-bottom:1px solid rgba(255,255,255,.04); }

/* ── Edit Tab ── */
.edit-sub-head {
    font-size:10px; font-weight:700; color:#6ea8fe;
    text-transform:uppercase; letter-spacing:1px;
    margin:12px 0 6px; border-bottom:1px solid rgba(110,168,254,.1); padding-bottom:4px;
}
.edit-sub-head:first-child { margin-top:0; }
.edit-text-input {
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:7px; padding:7px 10px; color:#ddd; font-size:13px;
    font-family:inherit; outline:none; box-sizing:border-box;
}
.edit-text-input:focus { border-color:rgba(110,168,254,.4); }
.edit-textarea {
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:7px; padding:7px 10px; color:#ddd; font-size:12px;
    font-family:inherit; outline:none; box-sizing:border-box; resize:vertical;
    min-height:60px; line-height:1.5;
}
.edit-textarea:focus { border-color:rgba(110,168,254,.4); }

/* ── Gravity Counter ── */
.counter-row {
    display:flex; align-items:center; gap:6px; width:100%;
}
.counter-btn {
    flex:0 0 32px; height:32px; background:rgba(110,168,254,.15);
    border:1px solid rgba(110,168,254,.25); border-radius:7px;
    color:#aad4ff; font-size:18px; font-weight:700; cursor:pointer;
    line-height:1; display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.counter-btn:hover { background:rgba(110,168,254,.3); }
.counter-btn:active { background:rgba(110,168,254,.45); }
.counter-input {
    flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:7px; padding:6px 10px; color:#ddd; font-size:13px;
    font-family:inherit; outline:none; text-align:center; min-width:0;
    -moz-appearance:textfield;
}
.counter-input:focus { border-color:rgba(110,168,254,.4); }
.counter-input::-webkit-inner-spin-button,
.counter-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

/* ── Life Viability Panel (inside Edit tab) ── */
.life-bar {
    margin:10px 0 4px; padding:10px 12px; border-radius:9px; border:1px solid;
    transition:all .4s ease;
}
.life-bar.thriving  { border-color:rgba(76,175,80,.35);  background:rgba(30,80,35,.6); }
.life-bar.warning   { border-color:rgba(255,152,0,.35);  background:rgba(80,50,10,.6); }
.life-bar.critical  { border-color:rgba(244,67,54,.35);  background:rgba(80,15,15,.6); }
.life-bar-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }
.life-bar.thriving  .life-bar-title { color:#81c784; }
.life-bar.warning   .life-bar-title { color:#ffb74d; }
.life-bar.critical  .life-bar-title { color:#e57373; }
.life-bar-text { font-size:12px; color:#ccc; line-height:1.5; }

/* ── Life Alert (big floating notification) ── */
@keyframes lifeAlertIn {
    from { opacity:0; transform:translateX(-50%) translateY(-20px) scale(.95); }
    to   { opacity:1; transform:translateX(-50%) translateY(0)      scale(1); }
}
@keyframes lifeAlertOut {
    to { opacity:0; transform:translateX(-50%) translateY(-16px) scale(.95); }
}
.life-alert {
    position:fixed; top:24px; left:50%; transform:translateX(-50%);
    z-index:600; display:flex; align-items:flex-start; gap:14px;
    padding:16px 20px; border-radius:14px;
    min-width:360px; max-width:520px; width:max-content;
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    animation:lifeAlertIn .35s cubic-bezier(.22,1,.36,1) forwards;
    box-shadow:0 16px 48px rgba(0,0,0,.85);
    pointer-events:auto;
}
.life-alert.thriving { background:rgba(18,50,22,.97); border:1px solid rgba(76,175,80,.5); }
.life-alert.warning  { background:rgba(60,38,8,.97);  border:1px solid rgba(255,152,0,.5); }
.life-alert.critical { background:rgba(60,10,10,.97); border:1px solid rgba(244,67,54,.5); }
.life-alert-icon { font-size:28px; flex-shrink:0; line-height:1; margin-top:2px; }
.life-alert-body { flex:1; }
.life-alert-label {
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;
}
.life-alert.thriving .life-alert-label { color:#81c784; }
.life-alert.warning  .life-alert-label { color:#ffb74d; }
.life-alert.critical .life-alert-label { color:#e57373; }
.life-alert-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:3px; }
.life-alert-text  { font-size:12px; color:#bbb; line-height:1.5; }
.life-alert-close {
    flex-shrink:0; background:rgba(255,255,255,.08); border:none; color:#888;
    width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:14px;
    display:flex; align-items:center; justify-content:center; line-height:1;
    transition:background .15s; margin-top:1px;
}
.life-alert-close:hover { background:rgba(255,255,255,.18); color:#fff; }