:root {
    --bg: #ffffff; --text: #000000; --border: #000000;
    --secondary: #666666; --accent: #f0f0f0;
    --red: #ff4d4d; --orange: #ffa500;
    --coffee: #6F4E37;
    --water: #2b7fff;
}

[data-theme="dark"] {
    --bg: #0a0a0a; --text: #ffffff; --border: #ffffff;
    --secondary: #888888; --accent: #1a1a1a;
    --coffee: #8B5E3C;
    --water: #3a92ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body {
    background-color: var(--bg); color: var(--text);
    transition: all 0.2s; display: flex; flex-direction: column;
    align-items: center; min-height: 100vh; padding: 40px 20px;
}

.app-width { width: 100%; max-width: 550px; }

header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 20px; border-bottom: 2px solid var(--text); margin-bottom: 30px;
}

.logo-group { display: flex; align-items: center; gap: 15px; }
h1 { font-size: 1.2rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
#timer-display { font-family: monospace; font-weight: 900; font-size: 1rem; color: var(--red); }

.nav-cluster { display: flex; gap: 15px; }
.nav-link { font-size: 0.7rem; font-weight: 700; cursor: pointer; text-transform: uppercase; color: var(--secondary); }
.nav-link.active { color: var(--text); border-bottom: 2px solid var(--text); }

.progress-container { width: 100%; height: 4px; background: var(--accent); margin-bottom: 30px; position: relative; overflow: hidden; }
#progress-fill { height: 100%; background: var(--text); width: 0%; transition: width 0.4s ease; }

/* Focus Mode Styling */
.focus-modes { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.mode-btn { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; padding: 5px 10px; cursor: pointer; border: 1px solid transparent; color: var(--secondary); }
.mode-btn.active { color: var(--text); border: 1px solid var(--border); }
.timer-large { font-size: 5rem; font-family: monospace; font-weight: 900; margin: 20px 0; text-align: center; }
.timer-controls { display: flex; gap: 10px; margin-top: 10px; }
.secondary-btn { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 15px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.poms-count { font-size: 0.7rem; font-weight: 900; color: var(--secondary); margin-top: 20px; text-align: center; text-transform: uppercase; }

/* Planner Controls */
.planner-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; padding: 10px; border: 1px solid var(--border); }
.planner-date-display { font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.nav-btn { background: none; border: 1px solid var(--border); cursor: pointer; font-size: 0.8rem; padding: 2px 8px; color: var(--text); }

/* Inputs & Buttons */
.main-input-group { margin-bottom: 40px; }
input[type="text"], textarea, select { width: 100%; background: var(--bg); border: 1px solid var(--border); padding: 12px; color: var(--text); outline: none; font-size: 0.85rem; margin-bottom: 10px; }
.action-btn { width: 100%; background: var(--text); color: var(--bg); border: 1px solid var(--text); padding: 15px; font-weight: 800; text-transform: uppercase; cursor: pointer; letter-spacing: 1px; }

/* Boxed Lists */
.day-box { border: 1px solid var(--border); margin-bottom: 30px; }
.day-box-header { background: var(--text); color: var(--bg); padding: 10px 15px; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: space-between; }
.item { background: var(--bg); padding: 15px; display: flex; align-items: flex-start; gap: 15px; border-bottom: 1px solid var(--accent); }
.item-content { flex-grow: 1; }
.item-title { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.task-text.striked { text-decoration: line-through; opacity: 0.4; }
.item-meta { font-size: 0.65rem; color: var(--secondary); margin-top: 4px; font-weight: 600; }
.del-btn { font-size: 0.6rem; font-weight: 700; color: var(--secondary); cursor: pointer; text-transform: uppercase; }

/* Notes Excel-style Tabs */
.notes-tabs-container {
    display: flex;
    overflow-x: auto;
    gap: 2px;
    margin-bottom: -1px;
    padding-left: 5px;
}
.note-tab {
    padding: 6px 12px;
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-bottom: none;
    background: var(--accent);
    color: var(--secondary);
    cursor: pointer;
    white-space: nowrap;
}
.note-tab.active {
    background: var(--bg);
    color: var(--text);
    position: relative;
    z-index: 2;
}
.notes-tabs-container::-webkit-scrollbar { height: 0px; }

/* Radar Styling */
.radar-stats { font-size: 0.65rem; font-weight: 900; text-transform: uppercase; margin-bottom: 15px; border: 1px solid var(--border); padding: 12px; display: flex; justify-content: space-between; }
.radar-legend { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.radar-controls { display: flex; justify-content: center; gap: 5px; margin-bottom: 25px; }
.radar-controls select { width: auto; padding: 5px; font-weight: 800; border: 1px solid var(--border); color: var(--text); background: var(--bg); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.weekday-label { font-size: 0.65rem; font-weight: 900; text-align: center; padding-bottom: 10px; color: var(--secondary); }

.radar-cell { border: 1px solid var(--border); aspect-ratio: 1/1.2; padding: 5px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; border-style: dashed; opacity: 0.4; pointer-events: none; }
.radar-cell.is-today { border-style: solid; border-width: 2px; opacity: 1; pointer-events: auto; }

.day-num { font-size: 0.6rem; font-weight: 700; margin-bottom: 4px; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--secondary); cursor: pointer; }
.dot.junk.active { background: var(--red); border-color: var(--red); }
.dot.soda.active { background: var(--orange); border-color: var(--orange); }

/* Caffeine Styling */
.caffeine-main-container { display: flex; flex-direction: column; gap: 20px; }

.caffeine-worksheet-nav { 
    display: flex; flex-direction: column; max-height: 120px; 
    overflow-y: auto; border: 1px solid var(--border); background: var(--accent);
}
.caffeine-sheet-tab {
    padding: 8px 15px; font-size: 0.65rem; font-weight: 800;
    border-bottom: 1px solid var(--border); cursor: pointer;
    display: flex; justify-content: space-between; color: var(--secondary);
}
.caffeine-sheet-tab.active { background: var(--bg); color: var(--text); font-weight: 900; }

.caffeine-layout { display: flex; gap: 20px; width: 100%; align-items: center; justify-content: center; padding: 20px 0; }
.mg-display { font-size: 4rem; font-family: monospace; font-weight: 900; line-height: 1; }
.mg-unit { font-family: monospace; font-size: 0.7rem; font-weight: 900; letter-spacing: 1px; margin-top: -5px; margin-bottom: 20px; text-align: center; }

.cup-wrapper { 
    position: relative; width: 100px; height: 85px; margin-right: 15px;
    cursor: pointer; transition: transform 0.1s; flex-shrink: 0; 
}
.cup-wrapper:active { transform: scale(0.95); }
.cup-wrapper.disabled { cursor: not-allowed; opacity: 0.3; pointer-events: none; filter: grayscale(1); }

.cup-outline { 
    position: absolute; width: 100%; height: 100%; 
    border: 4px solid var(--text); 
    border-bottom-left-radius: 35px; border-bottom-right-radius: 35px; 
    z-index: 2; background: transparent;
}
.cup-handle { 
    position: absolute; right: -20px; top: 15px; width: 30px; height: 40px; 
    border: 4px solid var(--text); border-radius: 50%; z-index: 1; 
}

.liquid-mask {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;
    overflow: hidden; z-index: 1;
}
.coffee-liquid {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 0%;
    background: var(--coffee); transition: height 0.4s ease;
}

.report-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); 
    gap: 4px; border: 1px solid var(--border); padding: 10px; background: var(--bg);
}
.report-cell {
    aspect-ratio: 1/1; border: 1px solid var(--accent);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; font-size: 0.6rem; font-weight: 800;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.report-cell.has-data { border-color: var(--text); }
.report-val { color: var(--coffee); font-weight: 900; font-size: 0.7rem; }

/* Container to keep them grouped */
.report-header-group {
    display: flex;
    flex-direction: column;
    gap: 2px;         /* This controls the exact gap between the title and hint */
    margin-bottom: 15px;
    align-items: flex-start; /* Ensures they align left */
}

/* Updated Title Style */
.report-title {
    font-size: 0.65rem;
    font-weight: 900;
    margin: 0;        /* Removes default margin that causes the gap */
    text-transform: uppercase;
    letter-spacing: 1px;
}
.note-text {
    font-size: 0.6rem;
    color: var(--secondary);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;        /* Removes default margin */
    text-align: left; /* Changed from center to match the title's alignment */
}
/* Hydration View Framework Layout styles */
.body-wrapper {
    position: relative; width: 90px; height: 180px; margin-right: 15px;
    cursor: pointer; transition: transform 0.1s; flex-shrink: 0;
}
.body-wrapper:active { transform: scale(0.96); }
.body-wrapper.disabled { cursor: not-allowed; opacity: 0.3; pointer-events: none; filter: grayscale(1); }

.body-svg { width: 100%; height: 100%; display: block; }
.body-outline { fill: none; stroke: var(--text); stroke-width: 4px; stroke-linejoin: round; }

#water-level { transition: y 0.4s ease, height 0.4s ease; }

.h2o-meta-display {
    display: flex; justify-content: space-between; align-items: center;
    border: 1px solid var(--border); padding: 10px; background: var(--bg);
}
.h2o-date-text { font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; }
.h2o-stamp-text { font-family: monospace; font-size: 0.6rem; color: var(--secondary); font-weight: 700; text-transform: uppercase; }

.h2o-stats-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.h2o-stat-line { font-family: monospace; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.5px; margin-top: 4px; color: var(--secondary); }
.h2o-stat-line span { color: var(--text); }

.report-cell-h2o-pct { font-size: 0.5rem; font-weight: 900; color: var(--water); margin-top: 2px; }

.h2o-log-container {
    margin-top: 15px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}

.h2o-log-list {
    max-height: 80px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: monospace;
}

.h2o-log-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    padding: 4px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.h2o-log-item span { color: var(--water); font-weight: 900; }
.h2o-top-section { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.h2o-bottom-section { margin-top: 10px; }
.report-title { font-size: 0.65rem; font-weight: 900; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }

/* Grid Adjustment */
.report-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 10px;
}

@keyframes pulse-blue {
    0% { text-shadow: 0 0 0px #00f2ff; }
    50% { text-shadow: 0 0 8px #00f2ff; }
    100% { text-shadow: 0 0 0px #00f2ff; }
}

.over-goal { animation: pulse-blue 2s infinite ease-in-out; color: #00f2ff !important; }

/* History Flex Wrapper Fixes */
.h2o-history-layout {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-top: 0px;
    width: 100%;
}

.h2o-history-panel {
    width: 140px; 
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 10px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
    flex-shrink: 0; /* Fixed structural squash behavior */
}

.h2o-history-panel.hidden-panel {
    width: 0; padding: 0; margin-left: 0; border: none; opacity: 0;
    transform: scaleX(0); pointer-events: none; overflow: hidden;
}

.history-header-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 5px; margin-bottom: 10px; }
.history-header { font-size: 0.6rem; font-weight: 900; color: var(--water); letter-spacing: 0.5px; }
.close-history { cursor: pointer; font-size: 1.1rem; line-height: 1; opacity: 0.6; transition: opacity 0.2s, color 0.2s; padding: 2px 5px; }
.close-history:hover { opacity: 1; color: #ff4d4d; }

.history-log-list { max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 0.55rem; }

/* Overlay View Corrections */
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding: 80px 20px; overflow-y: auto; }
.overlay-content { width: 100%; max-width: 550px; }
.overlay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.copy-btn { border: 1px solid var(--border); background: var(--bg); padding: 8px 15px; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; cursor: pointer; color: var(--text); }
.editable-title { width: 100%; background: transparent; border: none; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; outline: none; color: var(--text); margin-bottom: 5px; }

/* Fixed Typo Line-Height Here */
.editable-body { width: 100%; background: transparent; border: none; font-size: 1rem; line-height: 1.6; color: var(--secondary); outline: none; resize: none; min-height: 300px; margin-top: 30px; }

.auto-save-tag { color: var(--orange); font-size: 0.7rem; font-weight: 900; letter-spacing: 1px; }
.return-btn { width: 100%; background: var(--text); color: var(--bg); border: none; padding: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; }

footer { margin-top: auto; padding: 40px 0; width: 100%; border-top: 1px solid var(--accent); display: flex; justify-content: center; gap: 20px; }
.footer-link:hover { color: var(--text); }
.hidden { display: none !important; }

/* Report Card Hovers */
#caffeine-report-grid .report-cell:hover { color: var(--coffee); border-color: var(--coffee); opacity: 1; cursor: pointer; }
#caffeine-report-grid .report-cell:hover .report-val { color: var(--coffee); }
#hydration-report-grid .report-cell:hover { color: var(--water); border-color: var(--water); opacity: 1; cursor: pointer; }
#hydration-report-grid .report-cell:hover .report-cell-h2o-pct { color: var(--water); }

/* Spectrum Panels */
.spectrum-container { margin: 20px 0; padding: 15px; border: 1px solid var(--border); background: var(--accent); }
.spectrum-title { font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.spectrum-item { font-size: 0.65rem; font-weight: 700; padding: 6px 10px; margin-bottom: 4px; opacity: 0.3; transition: all 0.3s ease; border-left: 3px solid transparent; }
.spectrum-item.active { opacity: 1; background: var(--bg); border-left-color: currentColor; transform: translateX(5px); }

.spec-optimal { color: #04d372; }
.spec-peak { color: #00ff88; }
.spec-moderate { color: #ffcc00; }
.spec-high { color: #ff9900; }
.spec-overload { color: #ff4d4d; }

.note-clickable { cursor: pointer; transition: background 0.2s ease; }
.note-clickable:hover { background: var(--accent); border-color: var(--text); }
.note-clickable:hover .note-title-text { color: #bb0725; }

/* Dark-Mode Safe Rich Text Editor Components */
.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    margin: 20px 0;
}

.rich-toolbar button {
    background: transparent;
    border: 1px solid var(--accent);
    padding: 6px 10px;
    font-size: 0.7rem;
    cursor: pointer;
    color: var(--text);
}

.rich-toolbar button.active {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: 2px solid var(--orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 166, 0, 0.3);
}

.rich-toolbar button:hover {
    background: var(--accent);
    border-color: var(--border);
}

.rich-editor {
    width: 100%;
    min-height: 100px;
    max-height: none; 
    outline: none;
    line-height: 1.6;
    margin-top: 20px;
    font-family: inherit;
    color: var(--text);
}

.rich-editor img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; }

.scheduler-controls { display: flex; justify-content: center; gap: 5px; margin-bottom: 25px; }
.scheduler-controls select { width: auto; padding: 5px; font-weight: 800; border: 1px solid var(--border); color: var(--text); background: var(--bg); }

.scheduler-calendar-framework { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; width: 100%; }
.scheduler-cell { 
    border: 1px solid var(--border); aspect-ratio: 1/1.1; padding: 6px; 
    display: flex; flex-direction: column; justify-content: space-between; 
    align-items: center; position: relative; cursor: pointer; transition: all 0.15s ease;
}
.scheduler-cell.past-day {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.03); /* Gives it a slight dimmed overlay */
    pointer-events: none; /* Secondary layer of click-blocking */
}

.scheduler-cell.empty {
    pointer-events: none;
}.scheduler-cell:hover:not(.empty) { background: var(--accent); }
.scheduler-cell.is-today { border-width: 2px; border-color: var(--text); font-weight: 900; }
.scheduler-cell.selected-cell { background: var(--text); color: var(--bg); }
.scheduler-cell.selected-cell .scheduler-day-num { color: var(--bg); }

.scheduler-day-num { font-size: 0.65rem; font-weight: 800; color: var(--text); }

.density-container { display: flex; gap: 3px; justify-content: center; width: 100%; min-height: 6px; margin-top: 2px; }
.sched-dot-indicator { width: 6px; height: 6px; border-radius: 2px; transition: background 0.2s; }

.density-low { background: #ffb3d9; }   
.density-mid { background: #ff66b2; }   
.density-high { background: #ff007f; }  

.selected-cell .density-low { background: var(--bg); }
.selected-cell .density-mid { background: var(--bg); }
.selected-cell .density-high { background: var(--bg); }

/* Unified Main Grid Layout Wrapper - Keeps Calendar Unhidden */
.sched-workspace-layout {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-top: 10px;
    width: 100%;
}

/* Widened Pop-Out Note Type Side Drawer */
#sched-agenda-panel {
    width: 260px; 
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 10px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scaleX(1);
    transform-origin: right;
    flex-shrink: 0;
}

/* Collapsed Hidden State for the Side Panel only */
#sched-agenda-panel.hidden-panel {
    width: 0; padding: 0; margin-left: 0; border: none; opacity: 0;
    transform: scaleX(0); pointer-events: none; overflow: hidden;
}

.agenda-input-block { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* Inline Time Picker Layout wrapper */
.sched-time-picker-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
}
.sched-time-picker-row input[type="time"] {
    flex: 1;
    padding: 4px;
    font-size: 0.65rem;
    font-family: monospace;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    outline: none;
    height: 24px;
}
.sched-time-split-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--secondary);
    text-transform: uppercase;
}

.agenda-item-row { 
    display: flex; gap: 8px; justify-content: space-between; align-items: flex-start;
    padding: 8px; border: 1px solid var(--border); background: var(--accent); margin-bottom: 6px;
}
.agenda-meta-time { font-family: monospace; font-size: 0.55rem; font-weight: 900; color: var(--secondary); white-space: nowrap; }
.agenda-desc-text { font-size: 0.65rem; font-weight: 700; color: var(--text); flex-grow: 1; word-break: break-word; }

/* Main Footer Wrapper */
.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligns baseline beautifully */
    padding: 30px 20px;
    margin: 60px auto 0 auto;
    border-top: 1px solid var(--border);
    opacity: 0.4;
    transition: opacity 0.2s;
}

.app-footer:hover {
    opacity: 1;
}

/* Stacks buttons above copyright */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 8px; 
}

/* Keeps export and import side-by-side */
.footer-actions-row {
    display: flex;
    gap: 15px;
}

/* Base style for all links in your footer */
.footer-link {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.75rem; /* Set this to match your exact current layout size */
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

.footer-link:hover {
    color: var(--orange); /* Or your preferred studio hover color highlight */
}

/* Copyright line position styling */
.footer-copyright {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    opacity: 0.7;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Scheduled Dates Overview Container placed below the main grid */
.sched-overview-box.bottom-layout {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.01);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sched-overview-title {
    font-size: 0.55rem;
    font-weight: 900;
    color: var(--secondary);
    letter-spacing: 0.5px;
}

/* Turns the list container into a multi-column row wrap */
.sched-overview-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 110px;
    overflow-y: auto;
    padding: 2px;
}

/* Compact individual item badges matching the theme layout grid */
.sched-overview-item {
    font-family: monospace;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.sched-overview-item:hover {
    background: var(--accent);
    border-color: var(--text);
}

/* Highlighting context if you actively have the panel open for this date */
.sched-overview-item.active-view-date {
    background: #ff66b2; /* Rosé Pink aesthetic accent */
    color: #fff;
    border-color: #ff66b2;
}

.sched-overview-badge {
    font-size: 0.55rem;
    font-weight: 900;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
    padding: 1px 4px;
    border-radius: 2px;
}

.sched-overview-item.active-view-date .sched-overview-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ==========================================================================
   ABOUT STUDIO OVERLAY STYLES - FIXED
   ========================================================================== */

.spec-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: var(--bg);
    z-index: 10000;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    /* Clean Font Stack */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Body Content Scroll Wrapper */
.about-scroll-body {
    margin: 30px 0 0 0;
    padding-bottom: 80px; /* Space at the bottom so content doesn't hit the button */
}

/* Standard Paragraph Text (Manifesto) */
.studio-text {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 15px 0;
    opacity: 0.85;
    color: var(--text);
    text-align: justify; /* Justified */
}

/* Share Overlay: link field + copy button */
.share-link-row {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.share-link-field {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--accent);
    border: 1px solid var(--border);
    color: var(--text);
    outline: none;
    border-radius: 4px;
}

/* Share Overlay: platform grid */
.share-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.share-target-btn {
    text-align: center;
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--accent);
    letter-spacing: 0.3px;
}

.share-target-btn:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* Section Header Titles */
.studio-sub {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0 0 15px 0;
    color: var(--text);
    text-transform: uppercase;
}

/* Blockquote styling for the Bio */
.studio-quote {
    border-left: 3px solid var(--text);
    padding-left: 15px;
    margin: 15px 0;
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify; /* Justified */
}

/* Unordered Core Pillar List Configuration */
.studio-pillars {
    list-style: none;
    padding: 0;
    margin: 0;
}

.studio-pillars li {
    margin-bottom: 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: justify; /* Justified */
}

/* Storage & Privacy Info Callout Box */
.storage-notice-box {
    background: transparent;
    border: 1px solid var(--border);
    padding: 20px;
    margin: 20px 0 30px 0;
    border-radius: 4px;
}

.notice-text {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 12px 0;
    opacity: 0.85;
    color: var(--text);
    text-align: justify; /* Justified */
}

.analogy-list li {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 8px;
    opacity: 0.85;
    color: var(--text);
    text-align: justify; /* Justified */
}

.studio-signature {
    margin-top: 80px; /* Large gap to breathe */
    text-align: center;
    padding-bottom: 40px;
}

.sig-line {
    width: 40px;
    height: 1px;
    background: var(--text);
    margin: 0 auto 20px auto;
    opacity: 0.2;
}

.studio-signature p {
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 2px;
    opacity: 0.4;
    text-transform: uppercase;
}

/* Rest of your header/button styles... */
.overlay-top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.close-x-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: 300;
    cursor: pointer;
    color: var(--text);
    padding: 5px;
}

/* Container for the logo and the hint */
.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keeps text aligned to the left */
}

/* The actual BLOC. text */
.logo-text {
    cursor: pointer;
    margin: 0;
    line-height: 1; /* Prevents extra space between logo and hint */
}

/* The small instruction text */
.theme-hint {
    font-size: 0.5rem; /* Very small */
    font-weight: 900;
    letter-spacing: 0.5px;
    opacity: 0.4;
    margin-top: 4px;
    text-transform: uppercase;
    pointer-events: none; /* Clicking this won't trigger the theme change, only the logo does */
}

/* Optional: Make the hint slightly clearer on hover of the logo */
.logo-wrapper:hover .theme-hint {
    opacity: 0.8;
    color: var(--orange); /* Or your primary accent color */
}

/* Keep the timer aligned with the logo text, not the hint */
.logo-group {
    display: flex;
    align-items: flex-start; /* Ensures timer stays at the top level */
    gap: 20px;
}

/* Snaps the secondary link directly up against the black line */
.secondary-nav-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -4px;     /* 🔥 Negative margin yanks it directly up to the line */
    padding-top: 0px;     /* Removes any top buffer padding */
    margin-bottom: 12px;  /* Keeps room below it for the view containers */
}

.secondary-cluster {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;           /* Strip away any trailing padding noise */
    margin: 0;
}

/* Highly compact typography layout */
.nav-link.secondary-link {
    font-family: monospace;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 2px 8px;     /* Light side-to-side padding */
    line-height: 1;       /* Collapses the invisible text height box tight */
}

.nav-link.secondary-link:hover {
    opacity: 1;
    color: #ff66b2;       /* Rosé pink signature accent */
}

/* Clean underline matching primary headers if active */
.nav-link.secondary-link.active {
    opacity: 1;
    border-bottom: 2px solid var(--text);
}

/* Target the Ko-fi floating container */
.kofi-widget-overlay-container {
    transform: scale(0.8); /* Shrinks the entire widget */
    transform-origin: bottom left; /* Ensures it stays pinned to the corner */
    bottom: 20px !important; /* Adjust position after scaling */
    left: 20px !important;
}


.app-footer {
    padding: 20px; /* Reduced from 30px */
    margin-top: 40px; /* Reduced from 60px */
}

.footer-link {
    font-size: 0.6rem; /* Smaller, more tactical feel */
    letter-spacing: 1px;
}

.footer-copyright {
    font-size: 0.5rem;
    opacity: 0.5;
}

/* ==========================================================================
   DYNAMIC VAULT ENGINE
   ========================================================================== */

.vault-input-panel {
    padding: 15px;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.vault-input-row {
    display: flex;
    gap: 10px;
}

.vault-input-row input, .vault-input-row select {
    flex-grow: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    font-family: inherit;
    font-size: 0.65rem;
    outline: none;
}

.vault-input-row select {
    flex-grow: 0;
    min-width: 130px;
    cursor: pointer;
}

.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    padding: 15px;
}

/* Base Utility Button Container */
.vault-card {
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    transition: all 0.15s ease-in-out;
}

.vault-btn-core {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Minimalist Clean Delete Button Anchor */
.vault-del-btn {
    background: transparent;
    border: none;
    color: var(--red);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0 0 10px;
    opacity: 0.3;
    transition: opacity 0.1s ease;
}
.vault-card:hover .vault-del-btn {
    opacity: 1;
}

/* Visual Feedback Alterations */
.vault-card:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}
.vault-card:hover .vault-btn-core {
    color: var(--bg);
}
.vault-card:hover .v-desc {
    color: var(--bg);
    opacity: 0.8;
}

.vault-card.v-success {
    border-color: var(--orange) !important;
    background: transparent !important;
}
.vault-card.v-success .vault-btn-core {
    color: var(--orange) !important;
}
.vault-card.v-success .v-desc {
    color: var(--orange) !important;
    opacity: 1;
}

#brain-dump-input {
    width: 100%;
    height: 300px; /* Made it significantly taller since it has its own screen space now! */
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.65rem;
    line-height: 1.5;
    resize: none;
    outline: none;
    padding: 0;
    margin: 0;
}

.brain-dump-textarea::placeholder {
    color: #8a8a93; /* Muted slate gray - highly readable on light backgrounds */
    opacity: 1;    /* Overrides Firefox default opacity override */
    font-style: italic;
}

body.dark-mode .brain-dump-textarea::placeholder {
    color: #a1a1aa; /* Crisp, low-glow silver - perfectly legible in dark mode */
    opacity: 0.8;
}

/* ==========================================================================
   THE SHREDDER SYSTEM (DIGITAL DECAY BIN)
   ========================================================================== */

.shredder-wrapper {
    margin-top: 30px;
    border: 1px dashed var(--border);
    background: var(--bg);
    padding: 10px;
    opacity: 0.4; /* Soft low-profile structural presence */
    transition: opacity 0.2s ease-in-out;
}

/* Lights up dynamically when content is active inside */
.shredder-wrapper.active-disposal {
    opacity: 0.95;
    border-style: solid;
    border-color: var(--orange);
}

.shredder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.shredder-timer {
    color: var(--orange);
    text-transform: uppercase;
}

.shredder-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Individual Volatile Item Strip */
.shred-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 6px 10px;
    font-size: 0.62rem;
}

.shred-meta {
    font-style: italic;
    opacity: 0.5;
    margin-right: 6px;
}

.shred-restore-btn {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.58rem;
    font-weight: 700;
    text-decoration: underline;
    padding: 0;
}
.shred-restore-btn:hover {
    color: var(--orange);
}

.margin-top-studio {
    margin-top: 25px;
}

/* ==========================================================================
   THE PULSE TRACKING ENGINE
   ========================================================================== */

.pulse-container {
    padding: 15px;
    background: transparent;
}

.pulse-meta {
    font-size: 0.55rem;
    opacity: 0.4;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.pulse-matrix-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 20px 0;
    border-bottom: 1px dashed var(--border);
}

.pulse-dots-grid {
    display: flex;
    gap: 14px;
}

/* Individual Consistency Node Styles */
.pulse-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pulse-dot {
    width: 12px;
    height: 12px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    transition: all 0.2s ease-in-out;
}

/* Win State: Rigidly Filled Node */
.pulse-dot.dot-win {
    background: var(--text);
    border-color: var(--text);
    box-shadow: 0 0 4px var(--text);
}

/* Miss State: Explicit Hollow Outline */
.pulse-dot.dot-miss {
    background: transparent;
    border-color: var(--orange);
}

.pulse-day-label {
    font-size: 0.52rem;
    font-weight: 700;
    opacity: 0.4;
}
.pulse-node:hover .pulse-day-label {
    opacity: 0.9;
}

/* Control Hub Matrix */
.pulse-controls {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 12px;
}

.pulse-action-btn {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.58rem;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    transition: opacity 0.1s ease;
}
.pulse-action-btn:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ==========================================================================
   THE STUDIO TERMINAL ENGINE (CTRL + K OVERLAY) - IMPROVED SPACING
   ========================================================================== */

.terminal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    z-index: 9999;
    backdrop-filter: blur(6px);
}

.terminal-box {
    width: 90%;
    max-width: 960px;
    background: var(--bg);
    border: 2px solid var(--text);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    font-family: monospace;
    padding: 35px 40px;           /* Much more internal padding */
    border-radius: 4px;
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.45;
    letter-spacing: 0.08em;
    margin-bottom: 22px;
}

.terminal-input-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 28px;
}

.terminal-prompt {
    font-weight: 900;
    color: var(--orange);
    font-size: 1.1rem;
    margin-right: 16px;
}

#terminal-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    padding: 6px 0;
}

/* ==================== MAIN GUIDE AREA ==================== */

.terminal-guide {
    display: flex;
    justify-content: space-between;
    gap: 40px;                    /* Increased horizontal spacing */
    margin-top: 10px;
}

.guide-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;                    /* Much better vertical spacing */
    font-size: 0.65rem;
    line-height: 1.65;            /* Improved readability */
}

.guide-title {
    font-weight: 900;
    color: var(--orange);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.guide-column .command-line {
    display: flex;
    gap: 18px;
    padding: 2px 0;
}

.guide-column b {
    color: var(--text);
    display: inline-block;
    width: 58px;                  /* More space for command */
    font-weight: 700;
    flex-shrink: 0;
}

.guide-column span {
    opacity: 0.85;
}

/* ==========================================================================
   ABOUT STUDIO // EPHEMERAL ARCHITECTURE LAYOUT
   ========================================================================== */

/* The header text label */
.studio-divider + span[style*="color: var(--orange)"] {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 10px;
    text-transform: uppercase;
}

/* Paragraph styling context */
.studio-divider + span + p {
    font-size: 0.65rem;
    line-height: 1.5;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* The Decay Systems List Container */
.studio-divider + span + p + ul {
    list-style: none; /* Stripping default bullet noise */
    padding: 0 !important;
    margin: 15px 0 0 0;
}

/* Individual list item rows */
.studio-divider + span + p + ul li {
    font-size: 0.62rem;
    line-height: 1.5;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
}

/* Subtle accent block indicator for lists */
.studio-divider + span + p + ul li::before {
    content: "// ";
    font-weight: 700;
    color: var(--orange);
}

/* Styling the item titles inside the text */
.studio-divider + span + p + ul li b {
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.02em;
}   

/* ==========================================================================
   BRUTALIST CALCULATOR HARDWARE KEYPAD
   ========================================================================== */

.calc-matrix-btn {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 12px 0;
    cursor: pointer;
    border-radius: 0 !important; /* Forces rigid square edges */
    transition: background 0.1s ease, color 0.1s ease;
}

.calc-matrix-btn:hover {
    background: var(--text);
    color: var(--bg); /* Inverts colors cleanly on hover state */
}

/* High contrast accent execution key styling assignment */
.action-execute-btn {
    background: var(--text);
    color: var(--bg);
}

.action-execute-btn:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

/* Layout Thumbnail Content Blocks */
.preview-thumb-col {
    height: 100%;
    background: var(--text);
    opacity: 0.15;
    border: 1px solid var(--text);
    box-sizing: border-box;
}

/* Light Mode Lightbox Styles */
.lightbox-active-8 {
    background-image: linear-gradient(rgba(240, 98, 146, 0.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(240, 98, 146, 0.07) 1px, transparent 1px);
    background-size: 8px 8px;
}

.lightbox-active-16 {
    background-image: linear-gradient(rgba(33, 150, 243, 0.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(33, 150, 243, 0.07) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* Dark Mode Tint Adjustments */
.dark-mode .lightbox-active-8 {
    background-image: linear-gradient(rgba(240, 98, 146, 0.12) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(240, 98, 146, 0.12) 1px, transparent 1px);
}
.dark-mode .lightbox-active-16 {
    background-image: linear-gradient(rgba(33, 150, 243, 0.12) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(33, 150, 243, 0.12) 1px, transparent 1px);
}

/* --- CORE INTEGRATION STYLES --- */
.studio-module-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    font-family: monospace;
    color: #000000;
    padding: 10px;
    box-sizing: border-box;
}

/*`==========================================================================

   THE RACER MODULE (TYPING PRACTICE) - CORE STYLES

   ========================================================================== */
/* FIXED CLEAN PROGRESS BAR MATRIX */
.progress-container {
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}
.progress-header-matrix {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 16px;
    line-height: 16px;
}
.progress-label-tag { font-family: monospace; font-size: 11px; font-weight: bold; letter-spacing: 0.05em; color: var(--secondary); }
.progress-val-output { font-family: monospace; font-size: 11px; font-weight: bold; color: var(--text); }

/* The outer bounding container box */
.progress-track-frame {
    width: 100%;
    height: 12px;
    border: 1px solid var(--border); 
    background: var(--accent);       /* Becomes dark in dark mode */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* The inner solid filling line */
.progress-fill-deck { 
    width: 0%; 
    height: 100%; 
    background: var(--border);       /* Seamlessly adapts: pure black on light, pure white on dark */
    transition: width 0.08s linear;   /* Smooth tracking interpolation */
}

/* --- HOOKED SYSTEM BASE DESIGN COLOR VARIABLES --- */
:root {
    --bg: #ffffff; 
    --text: #000000; 
    --border: #000000;
    --secondary: #666666; 
    --accent: #f0f0f0;
    --red: #ff4d4d; 
    --orange: #ffa500;
}

[data-theme="dark"] {
    --bg: #0a0a0a; 
    --text: #ffffff; 
    --border: #ffffff;
    --secondary: #888888; 
    --accent: #1a1a1a;
}

/* --- RUNTIME CORE LAYOUT HOOKS --- */
.studio-module-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    font-family: monospace;
    color: var(--text);
    background: var(--bg);
    padding: 10px;
    box-sizing: border-box;
}

.racer-config-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.config-group { display: flex; flex-direction: column; gap: 4px; }
.checkbox-toggle { align-items: center; justify-content: center; }
.config-label { font-size: 10px; font-weight: bold; color: var(--secondary); letter-spacing: 0.05em; }

.studio-select {
    border: 1px solid var(--border);
    background: var(--accent);
    color: var(--text);
    padding: 6px 12px;
    font-family: monospace;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}
.studio-checkbox {
    accent-color: var(--orange);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.utility-toggle-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--orange);
    padding: 6px 12px;
    background: transparent;
    font-family: monospace;
    cursor: pointer;
}
.utility-toggle-btn.deck-disabled { border-color: var(--secondary); }
.status-indicator-dot { width: 6px; height: 6px; background: var(--secondary); border-radius: 50%; }
.status-indicator-dot.active { background: var(--orange); }
.status-text { font-size: 11px; font-weight: bold; color: var(--orange); }
.utility-toggle-btn.deck-disabled .status-text { color: var(--secondary); }

.ghost-pacer-node {
    position: absolute;
    top: -3px;
    left: 0%;
    font-size: 14px;
    color: var(--orange);
    transition: left 0.5s linear;
    line-height: 1;
    z-index: 5;
    pointer-events: none;
    display: none; /* Only reveals when a personal best exists */
}

/* WORKSPACE SPLIT SYSTEM */
.racer-workspace-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 850px) { .racer-workspace-grid { grid-template-columns: 1fr; } }

/* TARGET TERMINAL DISPLAY PANEL */
.display-panel-wrapper {
    border: 2px solid var(--border);
    background: var(--bg);
    margin-bottom: 14px;
    padding: 16px;
    transition: background 0.15s ease;
}
/* STRICT MODE FLASH TRIGGER CLASS */
.display-panel-wrapper.compiler-error-flash {
    background: rgba(255, 77, 77, 0.15);
    border-color: var(--red);
}
.text-display-target { font-size: 18px; line-height: 1.6; min-height: 80px; color: var(--secondary); user-select: none; white-space: pre-wrap; }
.text-display-target span.correct { color: var(--text); background: rgba(46, 125, 50, 0.15); }
.text-display-target span.incorrect { color: #ffffff; background: var(--red); }
.text-display-target span.current-letter { border-left: 2px solid var(--orange); background: rgba(255, 165, 0, 0.15); }

.input-panel-wrapper { border: 2px solid var(--border); background: var(--bg); margin-bottom: 14px; padding: 16px; }
.racer-textarea { width: 100%; height: 70px; border: none; resize: none; font-family: monospace; font-size: 16px; outline: none; padding: 0; background: transparent; color: var(--text); }

/* METRICS DISPLAY AND GRAPH WRAPPERS */
.telemetry-card { border: 1px solid var(--border); background: var(--accent); padding: 14px; margin-bottom: 16px; }
.card-header { font-size: 10px; color: var(--secondary); font-weight: bold; border-bottom: 1px dashed var(--border); padding-bottom: 6px; margin-bottom: 12px; }
.metric-block { margin-bottom: 10px; }
.metric-label { font-size: 10px; font-weight: bold; color: var(--text); }
.metric-value-wrapper { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.metric-number { font-size: 28px; font-weight: bold; }
.metric-unit { font-size: 12px; color: var(--secondary); font-weight: bold; }
.highlight-orange { color: var(--orange); }

/* SPARKLINE ELEMENT CANVAS BOX */
.sparkline-container {
    margin-top: 15px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}
.sparkline-title { font-size: 9px; font-weight: bold; color: var(--secondary); margin-bottom: 6px; letter-spacing: 0.05em; }
#telemetry-sparkline { background: var(--bg); border: 1px solid var(--border); display: block; width: 100%; }

.speed-guide-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.guide-item { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: bold; }
.guide-range { padding: 3px 8px; border-radius: 12px; font-size: 11px; color: #fff; min-width: 85px; text-align: center; }
.badge-green { background-color: #2e7d32; }
.badge-yellow { background-color: #f9a825; color: #000; }
.badge-orange { background-color: var(--orange); color: #000; }
.badge-red { background-color: var(--red); }

.action-control-bar { display: flex; gap: 12px; margin-bottom: 20px; }
.studio-btn { font-family: monospace; font-size: 12px; font-weight: bold; padding: 10px 18px; border: 1px solid var(--border); cursor: pointer; outline: none; }
.btn-primary { background: var(--orange); color: #000000; border-color: var(--orange); }
.btn-secondary { background: var(--accent); color: var(--text); }

/* HARDWARE SIMULATION MATRIX */
.hardware-emulation-deck { border: 1px solid var(--border); background: var(--accent); padding: 12px; width: 100%; box-sizing: border-box; }
.hardware-emulation-deck.hidden { display: none; }
.deck-header { font-size: 9px; color: var(--secondary); font-weight: bold; margin-bottom: 12px; }
.virtual-keyboard-matrix { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.keyboard-row { display: flex; gap: 5px; width: 100%; }
.row-center-bottom { justify-content: center; }

.key-cap { height: 36px; flex: 1; min-width: 22px; border: 1px solid var(--border); background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; user-select: none; box-sizing: border-box; }
.key-tab { flex: 1.4; max-width: 55px; font-size: 9px; color: var(--secondary); }
.key-caps { flex: 1.7; max-width: 65px; font-size: 9px; color: var(--secondary); }
.key-enter { flex: 2; max-width: 75px; font-size: 9px; color: var(--secondary); }
.key-shift { flex: 2.3; max-width: 85px; font-size: 9px; color: var(--secondary); }
.key-ctrl { flex: 1.5; max-width: 55px; font-size: 9px; color: var(--secondary); }
.key-alt { flex: 1.3; max-width: 50px; font-size: 9px; color: var(--secondary); }
.key-cap.key-spacebar { flex: 6; max-width: 280px; font-size: 9px; letter-spacing: 0.1em; }

.key-cap.hardware-pressed { 
    background: var(--orange) !important; 
    color: #000000 !important; 
    border-color: var(--orange) !important;
    transform: translateY(1px); 
}

/* STUDIO TUNER MODULE */
/* ==========================================================================
   THEME TUNER ENGINE: FIXED L & D COLOR VALUE MAPPING
   ========================================================================== */

/* --- PALETTE 01: REFERENCE DEFAULT --- */
body.palette-01,
body.palette-01[data-theme="light"] {
    --bg: #faf9f6; --text: #2b2927; --border: #c3b9ac; --secondary: #8c857b; --accent: #f7f4ef;
}
body.palette-01[data-theme="dark"] {
    --bg: #1c1b1a; --text: #f7f4ef; --border: #8c857b; --secondary: #c3b9ac; --accent: #2b2927;
}

/* --- PALETTE 02: MINT [L] & STONE [D] --- */
body.palette-02,
body.palette-02[data-theme="light"] {
    --bg: #e2f3e7;          /* Mint Light Base [L] */
    --text: #16241b; 
    --border: #99c2a7; 
    --secondary: #4d735a; 
    --accent: #cee9d6;
}
body.palette-02[data-theme="dark"] {
    --bg: #1a1a1a;          /* Deep Workspace Backing */
    --text: #e0e0e0; 
    --border: #737373;      /* Stone Dark Neutral Border [D] */
    --secondary: #949494; 
    --accent: #2d2d2d;      /* Stone Dark Container Block [D] */
}

/* --- PALETTE 03: DUSTY ROSE [L] & IVORY [D] --- */
body.palette-03,
body.palette-03[data-theme="light"] {
    --bg: #f5e1e1;          /* Dusty Rose Light Base [L] */
    --text: #2b1818; 
    --border: #dba6a6; 
    --secondary: #824d4d; 
    --accent: #ebd0d0;
}
body.palette-03[data-theme="dark"] {
    --bg: #1f1d1a;          /* Muted Dark Base */
    --text: #f2ede4; 
    --border: #80776b;      /* Ivory Dark Neutral Border [D] */
    --secondary: #b3a796; 
    --accent: #2e2a24;      /* Ivory Dark Container Block [D] */
}

/* --- PALETTE 04: SLATE [L] & CREMA [D] --- */
body.palette-04,
body.palette-04[data-theme="light"] {
    --bg: #deecf7;          /* Slate Light Base [L] */
    --text: #18222b; 
    --border: #a1bed6; 
    --secondary: #4a6880; 
    --accent: #cbdff0;
}
body.palette-04[data-theme="dark"] {
    --bg: #1f1b14;          /* Soft Dark Core Warmth */
    --text: #f7f3eb; 
    --border: #8c8069;      /* Crema Dark Neutral Border [D] */
    --secondary: #c7b99d; 
    --accent: #2e291f;      /* Crema Dark Container Block [D] */
}

/* --- PALETTE 05: SEAFOAM [L] & BLUSH [D] --- */
body.palette-05,
body.palette-05[data-theme="light"] {
    --bg: #daf0ea;          /* Seafoam Light Base [L] */
    --text: #132420; 
    --border: #99cfc1; 
    --secondary: #467a6e; 
    --accent: #c4ebd0;
}
body.palette-05[data-theme="dark"] {
    --bg: #211a17;          /* Earthy Base Platform */
    --text: #fcf6f2; 
    --border: #8a7063;      /* Blush Dark Neutral Border [D] */
    --secondary: #c4a798; 
    --accent: #30241f;      /* Blush Dark Container Block [D] */
}

/* --- PALETTE 06: STUDIO CLASSIC (MONOCHROME OVERSIGHT) --- */
body.palette-06,
body.palette-06[data-theme="light"] {
    --bg: #ffffff; --text: #000000; --border: #000000; --secondary: #666666; --accent: #f0f0f0;
}
body.palette-06[data-theme="dark"] {
    --bg: #0a0a0a; --text: #ffffff; --border: #ffffff; --secondary: #888888; --accent: #1a1a1a;
}

/* --- PALETTE 07: SAGE & CHARCOAL --- */
body.palette-07,
body.palette-07[data-theme="light"] {
    --bg: #eaf2ec;          /* Soft Sage [L] */
    --text: #19241d; --border: #a1c2ac; --secondary: #4d755a; --accent: #d3ebd9;
}
body.palette-07[data-theme="dark"] {
    --bg: #181c19;          /* Deep Forest Charcoal [D] */
    --text: #e1e6e2; --border: #69786f; --secondary: #97a69c; --accent: #272e29;
}

/* --- PALETTE 08: LAVENDER & NIGHTSHADE --- */
body.palette-08,
body.palette-08[data-theme="light"] {
    --bg: #f1eaf7;          /* Pale Lavender [L] */
    --text: #211929; --border: #caa6e3; --secondary: #6e4d87; --accent: #decde8;
}
body.palette-08[data-theme="dark"] {
    --bg: #1a151f;          /* Midnight Violet [D] */
    --text: #eedff7; --border: #756385; --secondary: #a795b8; --accent: #2c2236;
}

/* --- PALETTE 09: DRIFTWOOD & SANDSTONE --- */
body.palette-09,
body.palette-09[data-theme="light"] {
    --bg: #f7f3eb;          /* Warm Linen Sand [L] */
    --text: #29241b; --border: #d4c5b0; --secondary: #7a6c58; --accent: #ebdcc5;
}
body.palette-09[data-theme="dark"] {
    --bg: #1c1a17;          /* Smoked Driftwood [D] */
    --text: #f5eedf; --border: #7a7266; --secondary: #aba194; --accent: #2e2a24;
}

/* --- PALETTE 10: PERIWINKLE & DEEP OCEAN --- */
body.palette-10,
body.palette-10[data-theme="light"] {
    --bg: #e6eaf7;          /* Soft Periwinkle [L] */
    --text: #161a24; --border: #abb8db; --secondary: #4a587d; --accent: #cbd3eb;
}
body.palette-10[data-theme="dark"] {
    --bg: #13161c;          /* Abyssal Blue [D] */
    --text: #e1e5fc; --border: #5d6780; --secondary: #8d98b5; --accent: #212630;
}

/* --- PALETTE 11: PEACH & AMBER --- */
body.palette-11,
body.palette-11[data-theme="light"] {
    --bg: #fdf2eb;          /* Creamy Peach [L] */
    --text: #2b1d14; --border: #e6c5b0; --secondary: #805335; --accent: #f5dcce;
}
body.palette-11[data-theme="dark"] {
    --bg: #211712;          /* Burnt Amber [D] */
    --text: #fcefe6; --border: #8c6a54; --secondary: #c4a088; --accent: #33231b;
}

/* --- PALETTE 12: CHERRY BLOSSOM & ASHEN ROSE (ROSE-CODED) --- */
body.palette-12,
body.palette-12[data-theme="light"] {
    --bg: #fff0f3;          /* Soft Cherry Blossom Pink [L] */
    --text: #2e161b; --border: #f0c2cc; --secondary: #8c4654; --accent: #ffd6e0;
}
body.palette-12[data-theme="dark"] {
    --bg: #211417;          /* Dark Ashen Rose / Velvet [D] */
    --text: #ffe0e6; --border: #8c5863; --secondary: #c48c97; --accent: #361f24;
}

/* --- PALETTE 13: MATCHA & OBSIDIAN --- */
body.palette-13,
body.palette-13[data-theme="light"] {
    --bg: #f2f7ee;          /* Milky Matcha Green [L] */
    --text: #1e2618; --border: #cbdba9; --secondary: #586e41; --accent: #e1ebd3;
}
body.palette-13[data-theme="dark"] {
    --bg: #161a13;          /* Dark Raw Obsidian [D] */
    --text: #edf5e6; --border: #6d7d5a; --secondary: #9fb388; --accent: #252e20;
}

/* --- PALETTE 14: LEMON meringue & DESERT SUN --- */
body.palette-14,
body.palette-14[data-theme="light"] {
    --bg: #fcfaf0;          /* Lemon Chiffon [L] */
    --text: #262416; --border: #e6dfb8; --secondary: #7a723c; --accent: #f5f0cf;
}
body.palette-14[data-theme="dark"] {
    --bg: #1c1b14;          /* Desert Twilight Gold [D] */
    --text: #faf7e6; --border: #807954; --secondary: #b3a978; --accent: #2e2b1e;
}

.tuner-palette-item.active {
    border: 2px solid var(--text) !important;
    outline: 1px solid var(--border);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.05);
}
/* ==========================================================================
   LOCAL TELEMETRY STYLING MODULE
   ========================================================================== */
#view-local-telemetry {
    font-family: monospace;
    color: var(--text);
    padding: 15px;
}

.telemetry-header-bar {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.telemetry-title {
    font-weight: bold;
    letter-spacing: 1px;
}

.telemetry-subtitle {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
}

.telemetry-badge {
    background: var(--accent);
    border: 1px solid var(--border);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
}

.telemetry-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.telemetry-card {
    border: 1px solid var(--border);
    padding: 12px;
    background: rgba(0, 0, 0, 0.02);
}

.card-label {
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 4px;
}

.metrics-list-data {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.telemetry-row {
    display: flex;
    justify-content: space-between;
}

.telemetry-row.divider-top {
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 4px;
}

.metric-bold {
    font-weight: bold;
}

.telemetry-actions-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-terminal-action {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 12px;
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-terminal-action:hover {
    background: var(--text);
    color: var(--bg);
}

.btn-terminal-action.btn-accent-filled {
    background: var(--accent);
}

.telemetry-row small {
    font-size: 0.75em;
    opacity: 0.7;
    margin-left: 6px;
}

.btn-terminal-action.btn-sm {
    padding: 4px 8px;
    font-size: 10px;
}

input[type="range"] {
    background: var(--border);
    height: 4px;
    border-radius: 0px;
    outline: none;
}

/* Custom Native Layout Look For The Upload Input Zone Box */
.custom-file-upload-zone:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--text) !important;
}

body[data-theme="dark"] .custom-file-upload-zone {
    background: rgba(255, 255, 255, 0.02) !important;
}
body[data-theme="dark"] .custom-file-upload-zone:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Action Button Hover States */
.btn-terminal-action-prime:hover {
    background: #e08500 !important;
    border-color: #e08500 !important;
}
.btn-terminal-action-sub:hover:not(:disabled) {
    background: var(--text) !important;
    color: var(--bg) !important;
}
.btn-terminal-action-sub:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* Custom Native Layout Look For The Upload Input Zone Box */
.custom-file-upload-zone:hover {
    filter: brightness(0.95);
}
body[data-theme="dark"] .custom-file-upload-zone:hover {
    filter: brightness(1.2);
}

/* Action Button Hover States */
.btn-terminal-action-prime:hover {
    filter: brightness(1.1);
}
.btn-terminal-action-sub:hover:not(:disabled) {
    background: var(--text) !important;
    color: var(--bg) !important;
}
.btn-terminal-action-sub:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* Range Input Syncing with your Native Text and Border System Variables */
#stitch-size-slider {
    -webkit-appearance: none;
    appearance: none;
    background: var(--accent);
    border: 1px solid var(--border);
    height: 6px;
    outline: none;
}
#stitch-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
}
#stitch-size-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
    border-radius: 0;
}

/* ==========================================================================
   UPDATED VIA BLOC. STUDIOS UI SPEC: MICRO-COMPACT WORKSPACE GRID (550px MAX)
   ========================================================================== */

/* Target the vault ONLY when it is active (when it DOES NOT have the .hidden class) */
#view-vault-storage:not(.hidden) {
    display: flex !important;
    flex-direction: row !important; /* Forces layout panels side-by-side cleanly */
    gap: 12px;                      /* Compact spacing to fit inside a narrow container */
    width: 100% !important;         /* Matches exactly with upper main header boundaries */
    max-width: 550px !important;    /* Restores the perfect centralized symmetry from Image 2 */
    align-items: flex-start;
    box-sizing: border-box;
    padding: 10px 0;
}

/* MICRO-SCALED SIDEBAR LAYER */
.vault-sidebar {
    width: 155px;                  /* Reduced width from 240px to leave plenty of room for files */
    min-width: 155px; 
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Compact Headings */
.vault-sidebar h3 {
    font-size: 0.75rem !important;
    margin-top: 0; 
    margin-bottom: 5px !important;
    border-bottom: 1px solid #3f3f46; 
    padding-bottom: 8px;
}

/* Micro Sidebar Selection Buttons */
.category-btn {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: #a1a1aa;
    text-align: left;
    padding: 6px 8px !important;    /* Thinned down margins to stay sleek */
    cursor: pointer;
    margin-bottom: 3px;
    font-family: monospace;
    font-size: 0.7rem !important;   /* Smaller typography limits text overflow */
}
.category-btn.active, .category-btn:hover {
    border-color: #ef4444;          /* Crimson Red accents */
    color: #fff;
    background: #27272a;
}

/* FILE CONTAINER WORKSPACE PLATFORM */
.vault-main {
    background: #1e1b1b;
    border: 1px solid #3f3f46;
    padding: 15px 12px !important;  /* Snug interior padding bounds */
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: calc(100% - 167px);     /* Dynamically maps exact remaining width space */
}

/* Sleeker Multi-File Drop Area */
.upload-zone {
    border: 2px dashed #3f3f46;
    padding: 12px 8px !important;  /* Keeps the zone shorter on screen height */
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: border 0.2s;
}
.upload-zone p {
    font-size: 0.68rem !important; /* Small descriptive layout font */
    margin: 0;
}
.upload-zone:hover {
    border-color: #3b82f6;          /* Electric Blue hover highlight */
}

/* COMPACT RESPONSIVE GRID ENGINE */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; /* Compact cards fit neatly */
    gap: 8px !important;            /* Tighten up space leaks between element cards */
}

/* Micro Dashboard File Cards */
.file-card {
    background: #27272a;
    border: 1px solid #3f3f46;
    padding: 8px 4px !important;    /* Tight internal container spacing boundaries */
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.file-card:hover {
    border-color: #ef4444;
}

/* Folder/Document Display Icon Glyphs */
.file-icon {
    font-size: 1.2rem !important;  /* Scaled down from 2rem to balance nicely inside 550px columns */
    margin-bottom: 3px !important;
}

/* File Title Truncation Systems */
.file-name {
    font-size: 0.62rem !important; /* Prevents long document names from blowing up card borders */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tiny Card Removers */
.delete-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.6rem;
    padding: 0px 3px;
}

/* GLOBAL VISIBILITY UTILITY OVERRIDES */
.hidden {
    display: none !important;      /* Completely blocks hidden panels from popping up across tabs */
}

/* MODAL PREVIEW HOVER SYSTEM FRAMEWORKS */
.preview-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.preview-content {
    background: #18181b;
    padding: 20px;
    border: 1px solid #3f3f46;
    max-width: 80%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.preview-content img, .preview-content video {
    max-width: 100%;
    max-height: 60vh;
}