/* ==============================
   BASE
   ============================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

    color: #f5f5f5;
    font-family: Arial, sans-serif;

    display: flex;
    justify-content: center;

    transition:
        background-color 1.5s ease,
        color 1.5s ease;

    overflow-x: hidden;
}

/* Decorative glows and clipped card corners should never create a horizontal
   scrollbar, particularly on narrow mobile viewports. */
html,
body {
    overflow-x: hidden;
}


/* ==============================
   TIME PERIOD BACKGROUNDS
   ============================== */

body.early-morning {
    background:
        radial-gradient(
            circle at 50% 0%,
            #245457 0%,
            #172f33 45%,
            #0b1113 100%
        );
}

body.morning {
    background:
        radial-gradient(
            circle at 50% 0%,
            #304c63 0%,
            #202a33 45%,
            #101216 100%
        );
}

body.lunch {
    background:
        radial-gradient(
            circle at 50% 0%,
            #66532c 0%,
            #332c1f 45%,
            #121212 100%
        );
}

body.afternoon {
    background:
        radial-gradient(
            circle at 50% 0%,
            #61412c 0%,
            #30251f 45%,
            #121212 100%
        );
}

body.evening {
    background:
        radial-gradient(
            circle at 50% 0%,
            #6b2639 0%,
            #321c29 45%,
            #0d0c12 100%
        );
}

body.night {
    background:
        radial-gradient(
            circle at 50% 0%,
            #33245c 0%,
            #171422 45%,
            #07070a 100%
        );
}


/* ==============================
   MAIN DASHBOARD
   ============================== */

.dashboard {
    width: min(1400px, 94vw);
    margin: 28px auto;

    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.layout-controls { grid-column:span 12; display:flex; justify-content:flex-end; align-items:center; gap:8px; min-height:22px; font-size:9px; letter-spacing:2px; opacity:.7; }
.layout-shortcuts { margin-right:auto; opacity:.65; }
.fullscreen-active .dashboard { width:min(1600px,96vw); margin:18px auto; }.fullscreen-active .layout-controls { position:sticky; top:0; z-index:20; padding:7px 0; background:linear-gradient(90deg,rgba(8,8,12,.92),rgba(8,8,12,.5)); }
.layout-controls button { padding:5px 8px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:9px; letter-spacing:1px; cursor:pointer; }.layout-controls button:hover { background:currentColor; color:#08080c; }
.dashboard.custom-layout, .dashboard.layout-editing { grid-auto-rows:34px; min-height:1500px; }
.dashboard.custom-layout > [data-layout-id] { min-height:0; height:100%; align-self:stretch; }
.dashboard-panel-hidden { display:none !important; }
.empty-panel-state { padding:24px 0; text-align:center; font-size:12px; line-height:1.8; letter-spacing:2px; opacity:.65; }.empty-panel-state span { font-size:9px; opacity:.7; }
.layout-editing > [data-layout-id] { position:relative; outline:1px dashed currentColor; outline-offset:5px; cursor:grab; user-select:none; transition:opacity .18s ease, transform .18s ease; }.layout-editing > [data-layout-id]:hover { transform:translateY(-3px); }.layout-editing > [data-layout-id].moving { opacity:.72; cursor:grabbing; }.panel-resize-handle { display:none; position:absolute; right:7px; bottom:7px; z-index:5; width:15px; height:15px; padding:0; border:0; border-right:2px solid currentColor; border-bottom:2px solid currentColor; background:transparent; cursor:nwse-resize; }.layout-editing .panel-resize-handle { display:block; }.layout-editing > [data-layout-id].resizing { opacity:.82; }
.dashboard.free-layout { display:block; position:relative; width:min(1500px,96vw); }.dashboard.free-layout > [data-layout-id] { box-sizing:border-box; overflow:auto; margin:0; }.dashboard.free-layout.layout-editing > [data-layout-id]:hover { transform:none; }

/* Content follows the panel's saved size, while preserving each component's visual language. */
.dashboard > [data-layout-id] { --panel-scale:1; overflow:hidden; }
.dashboard > [data-layout-id] h2 { font-size:calc(18px * var(--panel-scale)); margin-bottom:calc(22px * var(--panel-scale)); }
.dashboard > [data-layout-id] { padding:calc(30px * var(--panel-scale)); }
.dashboard > .date-section { padding:calc(30px * var(--panel-scale)) calc(20px * var(--panel-scale)) calc(40px * var(--panel-scale)); }
.dashboard > .date-section .time-period { font-size:calc(16px * var(--panel-scale)); margin-bottom:calc(24px * var(--panel-scale)); letter-spacing:calc(9px * var(--panel-scale)); }
.dashboard > .date-section .day { font-size:clamp(calc(32px * var(--panel-scale)), calc(7vw * var(--panel-scale)), calc(72px * var(--panel-scale))); letter-spacing:calc(12px * var(--panel-scale)); }
.dashboard > .date-section .date { font-size:clamp(calc(20px * var(--panel-scale)), calc(4vw * var(--panel-scale)), calc(42px * var(--panel-scale))); letter-spacing:calc(5px * var(--panel-scale)); }
.dashboard > .date-section .time { font-size:calc(26px * var(--panel-scale)); }
.dashboard > .big-event-section #big-event-name { font-size:clamp(calc(20px * var(--panel-scale)), calc(4vw * var(--panel-scale)), calc(40px * var(--panel-scale))); }.dashboard > .big-event-section #big-event-days { font-size:clamp(calc(55px * var(--panel-scale)), calc(12vw * var(--panel-scale)), calc(120px * var(--panel-scale))); }.dashboard > .big-event-section .big-event-label,.dashboard > .big-event-section #big-event-date { font-size:calc(13px * var(--panel-scale)); }
.dashboard > .next-event-section .next-event-name { font-size:calc(28px * var(--panel-scale)); }.dashboard > .next-event-section .next-event-countdown { font-size:calc(38px * var(--panel-scale)); }.dashboard > .next-event-section .next-event-time,.dashboard > .next-event-section .next-event-label { font-size:calc(12px * var(--panel-scale)); }
.dashboard > .weather-section .weather { font-size:calc(42px * var(--panel-scale)); }.dashboard > .weather-section .condition { font-size:calc(17px * var(--panel-scale)); }.dashboard > .weather-section .weather-location,.dashboard > .weather-section .weather-stats,.dashboard > .weather-section .sun-times { font-size:calc(11px * var(--panel-scale)); }
.dashboard > .events-section .event-title { font-size:calc(15px * var(--panel-scale)); }.dashboard > .events-section .event-time,.dashboard > .events-section .event-weather,.dashboard > .events-section .event-location { font-size:calc(11px * var(--panel-scale)); }.dashboard > .assistant-section .assistant-messages { height:calc(126px * var(--panel-scale)); }.dashboard > .assistant-section .assistant-message,.dashboard > .productivity-section .check-item { font-size:calc(11px * var(--panel-scale)); }.dashboard > .productivity-section .quick-add-form input,.dashboard > .productivity-section .quick-add-form button { font-size:calc(14px * var(--panel-scale)); }


/* ==============================
   DATE SECTION
   ============================== */

.date-section {
    text-align: center;

    padding: 30px 20px 40px;

    position: relative;
    grid-column: span 7;
}

.time-period {
    display: inline-block;

    font-size: 16px;

    font-weight: bold;

    letter-spacing: 9px;

    margin-bottom: 24px;

    padding: 7px 14px;

    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transition: color 1.5s ease;
}

 .day {
    font-size: clamp(40px, 8vw, 72px);

    font-weight: 900;

    letter-spacing: 12px;

    line-height: 1;

    text-transform: uppercase;

    text-shadow:
        0 0 25px rgba(255, 255, 255, 0.08);
}

.date {
    font-size: clamp(24px, 5vw, 42px);
    font-weight: bold;

    letter-spacing: 5px;

    margin-top: 15px;
}

.time {
    font-size: 26px;

    font-weight: 600;

    letter-spacing: 4px;

    margin-top: 22px;

    opacity: 0.85;

    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.15);
}


/* ==============================
   ANIMATED ACCENT LINE
   ============================== */

.date-section::after {
    content: "";

    display: block;

    width: 100%;
    height: 3px;

    margin-top: 40px;

    background: linear-gradient(
        90deg,
        transparent,
        currentColor,
        transparent
    );

    background-size: 200% 100%;

    animation: scanLine 4s linear infinite;

    transition: color 1.5s ease;
}

@keyframes scanLine {

    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }

}


/* ==============================
   SECTIONS
   ============================== */

.weather-section,
.events-section,
.status-section {
    position: relative;

    padding: 30px 30px;

    margin-top: 30px;

    background: rgba(0, 0, 0, 0.25);

    border-left: 4px solid #d91c24;

    clip-path: polygon(
        18px 0,
        100% 0,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        0 100%,
        0 18px
    );

    transition:
        border-color 1.5s ease,
        background 1.5s ease,
        transform 0.3s ease;
}

.weather-section:hover,
.events-section:hover,
.status-section:hover {
    transform: translateX(8px);
}
.weather-section::before,
.events-section::before,
.status-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background: currentColor;

    opacity: 0.8;
}

.weather-section,
.events-section,
.status-section {
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ==============================
   SECTION HEADINGS
   ============================== */

h2 {
    margin: 0 0 22px;

    font-size: 18px;

    letter-spacing: 5px;

    color: #d91c24;

    transition: color 1.5s ease;
}

.section-config-button {
    float: right;
    margin-top: 1px;
    padding: 6px 9px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 9px;
    letter-spacing: 1px;
    cursor: pointer;
    opacity: 0.65;
}

.section-config-button:hover {
    background: currentColor;
    color: #08080c;
    opacity: 1;
}


/* ==============================
   WEATHER
   ============================== */

.weather {
    font-size: 42px;
    font-weight: bold;
}

.condition {
    margin-top: 8px;

    font-size: 17px;

    letter-spacing: 1px;

    color: #bdbdbd;
}

.weather-location {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.55;
}

.weather-stats { margin-top:10px; font-size:10px; letter-spacing:1px; opacity:.65; }

.sun-times { display:flex; gap:16px; margin-top:18px; padding-top:12px; border-top:1px solid rgba(255,255,255,.12); font-size:11px; letter-spacing:2px; opacity:.7; }
.next-event-section, .productivity-section { position:relative; margin-top:30px; padding:28px 30px; background:rgba(0,0,0,.25); border-left:4px solid currentColor; clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.next-event-name { font-size:28px; font-weight:900; letter-spacing:3px; }.next-event-time,.next-event-label { margin-top:10px; font-size:12px; letter-spacing:3px; opacity:.65; }.next-event-label { margin-top:22px; }.next-event-countdown { margin-top:7px; font-size:38px; font-weight:bold; letter-spacing:4px; }
.quick-add-form { display:flex; gap:8px; }.quick-add-form input { flex:1; min-width:0; padding:10px; border:1px solid rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.05); font:inherit; }.quick-add-form button,.check-item button { border:1px solid currentColor; background:transparent; color:inherit; padding:8px 12px; cursor:pointer; }.check-list { margin-top:14px; }.check-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); }.check-item label { display:flex; gap:10px; align-items:center; }.check-item input:checked + span { text-decoration:line-through; opacity:.55; }.progress-count { float:right; font-size:10px; opacity:.55; }
.event-weather { width:100%; margin-top:7px; font-size:10px; letter-spacing:1px; color:#ffd166; }.event { flex-wrap:wrap; }
.event-location { width:100%; margin-top:7px; font-size:10px; letter-spacing:1px; opacity:.7; }.route-event { margin-left:8px; padding:3px 6px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:9px; cursor:pointer; }
.briefing-card.priority { border-color:currentColor; }
.command-palette { position:fixed; inset:0; z-index:100001; display:none; align-items:flex-start; justify-content:center; padding:clamp(24px,10vh,18vh) 0 24px; background:radial-gradient(circle at 50% 0,rgba(110,180,255,.12),transparent 38%),rgba(0,0,0,.83); backdrop-filter:blur(10px); }.command-palette.active { display:flex; }.command-panel { display:flex; flex-direction:column; width:min(700px,92vw); max-height:calc(100vh - 48px); padding:0; background:linear-gradient(145deg,rgba(18,20,30,.98),rgba(5,6,10,.98)); border:1px solid rgba(210,230,255,.5); box-shadow:0 24px 80px rgba(0,0,0,.72),0 0 60px rgba(90,170,255,.08); }.command-title { flex:0 0 auto; padding:20px 22px 7px; font-size:14px; letter-spacing:3px; }.command-title > span:last-child { float:right; font-size:9px; opacity:.55; }.command-mark { display:inline-grid; place-items:center; width:23px; height:23px; margin-right:10px; border:1px solid currentColor; font-size:12px; }.command-subtitle { padding:0 22px 12px; font-size:9px; letter-spacing:2px; opacity:.5; }.command-panel input { flex:0 0 auto; width:calc(100% - 44px); margin:0 22px 12px; padding:14px; color:#fff; background:rgba(0,0,0,.32); border:1px solid rgba(210,230,255,.28); font:inherit; }.command-results { min-height:0; padding:0 10px; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:currentColor rgba(255,255,255,.06); scrollbar-width:thin; }.command-group { padding:5px 0 11px; }.command-group-label { padding:8px 12px 5px; color:#9ab5d8; font-size:9px; letter-spacing:2px; }.command-results button { display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 12px; text-align:left; border:1px solid transparent; background:transparent; color:#fff; font:inherit; cursor:pointer; }.command-results button span { font-size:12px; letter-spacing:1px; }.command-results button small { color:#9fa9b6; font-size:9px; letter-spacing:1px; }.command-results button:hover { border-color:rgba(180,220,255,.3); background:rgba(160,210,255,.09); }.command-empty { padding:30px; text-align:center; font-size:11px; letter-spacing:2px; opacity:.55; }.command-footer { display:flex; justify-content:space-between; padding:13px 22px; border-top:1px solid rgba(210,230,255,.15); color:#aab5c5; font-size:8px; letter-spacing:1px; }
body.weather-rain::before, body.weather-cloudy::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; }.weather-rain::before { background:repeating-linear-gradient(110deg,transparent 0 26px,rgba(160,200,255,.08) 27px 28px,transparent 29px 55px); }.weather-cloudy::before { background:radial-gradient(circle at 30% 15%,rgba(200,210,230,.08),transparent 36%); }.dashboard { z-index:1; }
/* Focus keeps the schedule readable in a deliberate, gap-free two-panel view. */
body.focus-mode .weather-section,
body.focus-mode .productivity-section,
body.focus-mode .status-section,
body.focus-mode .big-event-section { display:none; }
body.focus-mode .dashboard { grid-template-columns:repeat(12,minmax(0,1fr)); }
body.focus-mode .dashboard > .date-section { grid-column:span 12; }
body.focus-mode .dashboard > .next-event-section { grid-column:span 4; }
body.focus-mode .dashboard > .events-section { grid-column:span 8; }
.assistant-status { float:right; font-size:9px; letter-spacing:2px; opacity:.55; }.assistant-clear { float:right; margin:-5px 12px 0 0; padding:4px 7px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:8px; letter-spacing:1px; cursor:pointer; opacity:.7; }.assistant-clear:hover { background:rgba(255,255,255,.1); opacity:1; }.assistant-messages { height:126px; overflow-y:auto; margin-bottom:12px; padding-right:5px; }.assistant-message { width:fit-content; max-width:92%; margin:0 0 9px; padding:8px 10px; border-left:2px solid currentColor; background:rgba(255,255,255,.05); font-size:11px; line-height:1.45; letter-spacing:1px; }.assistant-message.user { margin-left:auto; border-left:0; border-right:2px solid currentColor; text-align:right; }
.travel-modal-content { width:min(720px,92vw); }.travel-route-summary { margin-bottom:16px; font-size:14px; letter-spacing:2px; }.travel-map { display:block; width:100%; height:280px; border:1px solid rgba(255,255,255,.2); background:#08080c; }.travel-map-link { display:inline-block; margin-top:14px; color:inherit; font-size:11px; letter-spacing:2px; }

/* DASHBOARD GRID: preserves the original cards while using the viewport efficiently. */
.dashboard > .big-event-section { grid-column: span 5; margin-top:0; align-self:stretch; }
.dashboard > .next-event-section { grid-column:span 4; margin-top:0; }
.dashboard > .weather-section { grid-column:span 3; margin-top:0; }
.dashboard > .events-section { grid-column:span 5; margin-top:0; }
.dashboard > .productivity-section { grid-column:span 4; margin-top:0; }
.dashboard > .status-section { grid-column:span 4; margin-top:0; }
.dashboard > .weather-section, .dashboard > .events-section, .dashboard > .status-section, .dashboard > .productivity-section, .dashboard > .next-event-section { min-width:0; }
.dashboard > .big-event-section { padding:35px 30px; }
.big-event-section { overscroll-behavior:contain; }

/* Keep a recurring schedule from growing the entire dashboard. The calendar
   list owns its overflow while the heading and add button stay in view. */
.dashboard > .events-section { display:flex; flex-direction:column; height:min(520px, 68vh); }
#events-list { min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; scrollbar-width:thin; scrollbar-color:currentColor rgba(255,255,255,.06); }
.event-panel-actions { float:right; display:flex; gap:6px; margin:-5px 0 0; }
.events-section h2 .event-panel-actions button { padding:5px 7px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:8px; letter-spacing:1px; cursor:pointer; opacity:.7; }
.events-section h2 .event-panel-actions button:hover,
.events-section h2 #toggle-event-clutter[aria-pressed="true"] { background:color-mix(in srgb,currentColor 18%,transparent); color:inherit; box-shadow:0 0 12px color-mix(in srgb,currentColor 28%,transparent); opacity:1; }
.archived-events-modal-content { width:min(620px,92vw); }.archived-events-list { max-height:min(62vh,560px); overflow-y:auto; overscroll-behavior:contain; }.archived-event-date { margin-top:20px; padding-bottom:7px; border-bottom:1px solid currentColor; font-size:10px; letter-spacing:2px; opacity:.78; }.archived-event-date:first-child { margin-top:0; }.archived-event { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:11px; letter-spacing:1px; }.archived-event time { flex:none; font-size:10px; opacity:.62; }.archived-events-empty { padding:35px 0; text-align:center; font-size:10px; letter-spacing:2px; opacity:.58; }

@media (max-width: 900px) {
    .dashboard { width:min(760px, 92vw); grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
    .date-section { grid-column:span 2; }
    .layout-controls { grid-column:span 2; }
    .dashboard > .big-event-section, .dashboard > .next-event-section, .dashboard > .weather-section, .dashboard > .events-section, .dashboard > .productivity-section, .dashboard > .status-section { grid-column:span 1; }
    .dashboard > .events-section { grid-column:span 2; }
}

@media (max-width: 600px) {
    .dashboard { display:block; width:min(94vw, 520px); margin:24px auto; }
    .dashboard > .date-section, .dashboard > .big-event-section, .dashboard > .next-event-section, .dashboard > .weather-section, .dashboard > .events-section, .dashboard > .productivity-section, .dashboard > .status-section { margin-top:20px; }
    .dashboard > .date-section { margin-top:0; }
    .layout-controls { justify-content:center; margin-bottom:15px; }
    .briefing-card { width:min(86vw, 420px); }
    .layout-controls { gap:5px; flex-wrap:wrap; }.layout-shortcuts { display:none; }.layout-controls button { font-size:8px; padding:6px; }
    .event-info { gap:10px; flex-wrap:wrap; }.event-actions { margin-left:auto; }.weather { font-size:34px; }.next-event-countdown { font-size:30px; }
    .command-palette { padding:16px 0; }.command-panel { width:94vw; padding:16px; }.command-title { font-size:11px; }.command-title span { font-size:8px; }
    .lock-panel { padding:34px 22px; }.event-modal-content { max-height:92vh; overflow-y:auto; }
    .dashboard > .docked-system-panel { margin-top:20px; }
}

.account-status { margin-bottom:20px; padding:11px; border-left:2px solid currentColor; background:rgba(255,255,255,.05); font-size:10px; letter-spacing:2px; }.utility-modal-content .event-form-buttons { flex-wrap:wrap; }
.account-signed-in-actions { display:grid; gap:14px; }.cloud-sync-actions { display:grid; gap:10px; padding:13px; border-left:2px solid var(--system-accent,#79c7ff); background:rgba(255,255,255,.035); }.cloud-sync-status { min-height:16px; color:#d7d8de; font-size:9px; line-height:1.5; letter-spacing:1.1px; }.cloud-sync-actions .event-form-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.cloud-sync-actions button { min-height:38px; padding:8px; border:1px solid var(--system-accent,#79c7ff); background:transparent; color:var(--system-accent,#79c7ff); font:inherit; font-size:9px; letter-spacing:.8px; cursor:pointer; }.cloud-sync-actions button:hover { background:var(--system-accent,#79c7ff); color:#08080c; }
.account-text-button { justify-self:start; padding:0; color:var(--system-accent,#79c7ff); border:0; background:transparent; font:inherit; font-size:9px; letter-spacing:1.2px; cursor:pointer; }.account-text-button:hover { text-decoration:underline; }.account-auth-message { min-height:16px; color:#d7d8de; font-size:9px; line-height:1.55; letter-spacing:1px; }.account-recovery-title { color:var(--system-accent,#79c7ff); font-size:12px; font-weight:700; letter-spacing:2px; }
#vault-remove { color:#ff9dad; border-color:rgba(255,157,173,.55); }.utility-modal-content #cloud-sync-status { margin:8px 0 2px; padding:11px; border-left:2px solid var(--system-accent,#79c7ff); background:rgba(255,255,255,.035); }
@media (max-width:600px) { .cloud-sync-actions .event-form-buttons { grid-template-columns:1fr; }.cloud-sync-actions button { min-height:44px; } }

/* LOCAL SYSTEM OVERLAYS */
.system-modal-content { width:min(420px,90vw); }.system-readout { margin:26px 0 8px; font-size:clamp(54px,12vw,88px); font-weight:300; letter-spacing:5px; text-align:center; line-height:1; }.system-readout.small { font-size:clamp(40px,8vw,58px); }.system-state { margin:0 0 24px; color:#aab6c8; font-size:10px; letter-spacing:2px; text-align:center; }.history-list { max-height:290px; overflow:auto; border-top:1px solid rgba(255,255,255,.12); }.history-row { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:10px; letter-spacing:1px; }.history-row strong { color:#c8f6e0; font-size:9px; letter-spacing:1px; }.week-modal-content { width:min(940px,94vw); }.week-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }.week-day { min-height:230px; padding:11px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.025); }.week-day.today { border-color:currentColor; background:rgba(255,255,255,.07); }.week-day h3 { display:flex; justify-content:space-between; margin:0 0 15px; color:#aab6c8; font-size:9px; letter-spacing:1px; }.week-day h3 span { color:inherit; font-size:16px; }.week-event { margin-bottom:9px; padding-left:7px; border-left:2px solid currentColor; font-size:10px; line-height:1.4; word-break:break-word; }.week-event b { display:block; font-size:8px; letter-spacing:1px; opacity:.65; }.week-empty { margin-top:45px; text-align:center; font-size:8px; letter-spacing:2px; opacity:.35; }.scan-modal-content { overflow:hidden; }.scan-lines { height:110px; margin:-20px -20px 20px; background:repeating-linear-gradient(0deg,rgba(180,220,255,.07) 0 1px,transparent 1px 9px),linear-gradient(90deg,transparent,rgba(150,220,255,.2),transparent); animation:scanPulse 1.2s ease-in-out infinite; }.scan-status { min-height:48px; font-size:12px; line-height:1.7; letter-spacing:2px; text-align:center; }.scan-status span { font-size:9px; color:#b3c0d2; }.scan-bar { height:4px; margin:22px 0; background:rgba(255,255,255,.12); }.scan-bar div { width:0; height:100%; background:currentColor; transition:width 1.15s ease; }.alarm-overlay { position:fixed; inset:0; z-index:100100; display:none; place-items:center; align-content:center; overflow:hidden; background:radial-gradient(circle,#ff5c79 0,rgba(72,6,18,.98) 44%,#08080c 100%); color:#fff; text-align:center; }.alarm-overlay.active { display:grid; animation:alarmFlash 1s ease-in-out infinite; }.alarm-glow { position:absolute; inset:-20%; background:repeating-linear-gradient(135deg,transparent 0 25px,rgba(255,255,255,.06) 26px 27px); animation:alarmSpin 15s linear infinite; }.alarm-label,.alarm-time,.alarm-message,.alarm-overlay button { position:relative; z-index:1; }.alarm-label { font-size:12px; letter-spacing:5px; }.alarm-time { margin:18px 0; font-size:clamp(76px,18vw,180px); font-weight:200; letter-spacing:8px; }.alarm-message { font-size:11px; letter-spacing:3px; }.alarm-overlay button { margin-top:38px; padding:14px 20px; border:1px solid #fff; background:rgba(0,0,0,.25); color:#fff; font:inherit; font-size:11px; letter-spacing:2px; cursor:pointer; }.alarm-mode .dashboard { filter:blur(4px) saturate(.5); }.alarm-mode::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:100099; border:8px solid rgba(255,90,120,.65); }@keyframes scanPulse { 50% { filter:brightness(1.9); transform:translateY(4px); } } @keyframes alarmFlash { 50% { filter:brightness(1.22); } } @keyframes alarmSpin { to { transform:rotate(360deg); } }
.budget-list { margin:8px 0 18px; border-top:1px solid rgba(255,255,255,.1); }.budget-row { display:grid; grid-template-columns:1fr auto 24px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:11px; letter-spacing:1px; }.budget-row strong { color:#c8f6e0; }.budget-row button { border:0; background:transparent; color:inherit; cursor:pointer; font-size:17px; }
.event-modal-content { color:inherit; background:linear-gradient(145deg,rgba(16,18,28,.98),rgba(6,7,12,.98)); box-shadow:0 22px 70px rgba(0,0,0,.65),0 0 28px color-mix(in srgb,currentColor 20%,transparent); }.timer-modal-content,.alarm-modal-content { text-align:center; }.timer-orbit { position:relative; margin:18px auto 22px; padding:25px 10px 12px; border:1px solid color-mix(in srgb,currentColor 40%,transparent); border-radius:50%; box-shadow:inset 0 0 35px color-mix(in srgb,currentColor 9%,transparent),0 0 30px color-mix(in srgb,currentColor 8%,transparent); }.timer-orbit .system-readout { margin:0; font-variant-numeric:tabular-nums; }.timer-orbit .system-state { margin:10px 0 0; }.timer-presets { display:flex; justify-content:center; gap:8px; margin:12px 0; }.timer-presets button { width:48px; height:30px; border:1px solid color-mix(in srgb,currentColor 45%,transparent); background:rgba(255,255,255,.04); color:inherit; font:inherit; font-size:10px; letter-spacing:1px; cursor:pointer; }.timer-presets button:hover { background:color-mix(in srgb,currentColor 15%,transparent); }.alarm-icon { margin:22px auto 8px; width:62px; height:62px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:26px; box-shadow:0 0 30px color-mix(in srgb,currentColor 24%,transparent); }.alarm-modal-content .settings-toggle { display:inline-flex; margin:18px auto; }
.event-modal-content input,.event-modal-content select { color-scheme:dark; color:inherit; background:rgba(5,8,15,.82); border-color:color-mix(in srgb,currentColor 42%,transparent); }.event-modal.pinned .event-modal-content { border-color:currentColor; background:linear-gradient(140deg,color-mix(in srgb,currentColor 10%,#10131f),rgba(4,7,14,.97)); box-shadow:0 18px 60px rgba(0,0,0,.62),0 0 45px color-mix(in srgb,currentColor 20%,transparent); backdrop-filter:blur(16px); resize:both; overflow:auto; min-width:300px; min-height:180px; }
body.early-morning .event-modal-content { border-color:#d6a8ff; } body.morning .event-modal-content { border-color:#79c7ff; } body.lunch .event-modal-content { border-color:#ffd166; } body.afternoon .event-modal-content { border-color:#ff9f43; } body.evening .event-modal-content { border-color:#ff4d6d; } body.night .event-modal-content { border-color:#d8b4fe; }

/* Phone dashboard: a simple vertical reading flow. This intentionally ignores
   any saved desktop canvas, so panels cannot overlap on a narrow screen. */
@media (max-width:760px) {
    #lock-screen,
    #boot-screen,
    #event-briefing { display:none !important; }

    .dashboard,
    .dashboard.free-layout,
    .dashboard.custom-layout {
        display:flex !important;
        flex-direction:column;
        align-items:stretch;
        width:100% !important;
        min-height:0 !important;
        margin:0;
        padding:12px;
        gap:12px;
    }

    .dashboard > [data-layout-id],
    .dashboard.free-layout > [data-layout-id] {
        position:static !important;
        inset:auto !important;
        display:block;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 !important;
        transform:none !important;
        overflow:visible !important;
    }

    .dashboard > .events-section,
    .dashboard.free-layout > .events-section {
        display:flex;
        height:min(520px, 70dvh) !important;
        overflow:hidden !important;
    }
}




/* ==============================
   TIME PERIOD COLORS
   ============================== */

body.early-morning .time-period,
body.early-morning h2 {
    color: #d6a8ff;
}

body.morning .time-period,
body.morning h2 {
    color: #79c7ff;
}

body.lunch .time-period,
body.lunch h2 {
    color: #ffd166;
}

body.afternoon .time-period,
body.afternoon h2 {
    color: #ff9f43;
}

body.evening .time-period,
body.evening h2 {
    color: #ff4d6d;
}

body.night .time-period,
body.night h2 {
    color: #d8b4fe;
}


/* ==============================
   TIME PERIOD BORDERS
   ============================== */

body.early-morning .weather-section,
body.early-morning .events-section,
body.early-morning .status-section {
    border-color: #d6a8ff;
}

body.morning .weather-section,
body.morning .events-section,
body.morning .status-section {
    border-color: #79c7ff;
}

body.lunch .weather-section,
body.lunch .events-section,
body.lunch .status-section {
    border-color: #ffd166;
}

body.afternoon .weather-section,
body.afternoon .events-section,
body.afternoon .status-section {
    border-color: #ff9f43;
}

body.evening .weather-section,
body.evening .events-section,
body.evening .status-section {
    border-color: #ff4d6d;
}

body.night .weather-section,
body.night .events-section,
body.night .status-section {
    border-color: #d8b4fe;
}

/* ==============================
   SYSTEM STATUS
   ============================== */

.status-section {
    margin-top: 30px;

    padding: 25px;

    background: rgba(0, 0, 0, 0.15);

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.status-item {
    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    font-size: 14px;

    letter-spacing: 2px;

    color: #999;
}

.status-online {
    color: #7cffb2;

    font-weight: bold;

    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

}

.loading-container {
    margin-top: 25px;
}

.loading-label {
    display: flex;

    justify-content: space-between;

    font-size: 12px;

    letter-spacing: 2px;

    color: #888;

    margin-bottom: 8px;
}

.loading-bar {
    width: 100%;

    height: 8px;

    background: rgba(255, 255, 255, 0.08);

    overflow: hidden;
}

.loading-progress {
    width: 0%;

    height: 100%;

    position: relative;
    overflow: hidden;

    background: currentColor;

    transition: width 1s linear;
}

.loading-progress::after {
    content: "";

    position: absolute;

    top: 0;
    left: -30%;

    width: 30%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgb(255, 202, 202),
        transparent
    );

    animation: progressScan 3.5s linear infinite;
}

@keyframes progressScan {

    0% {
        left: -30%;
    }

    100% {
        left: 100%;
    }

}

body.early-morning .loading-progress {
    color: #d6a8ff;
}

body.morning .loading-progress {
    color: #79c7ff;
}

body.lunch .loading-progress {
    color: #ffd166;
}

body.afternoon .loading-progress {
    color: #ff9f43;
}

body.evening .loading-progress {
    color: #ff4d6d;
}

body.night .loading-progress {
    color: #d8b4fe;
}


/* ==============================
   BOOT SCREEN
   ============================== */

#boot-screen {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    justify-content: center;
    align-items: center;

    background: #08080c;

    color: #f5f5f5;

    transition:
        opacity 1s ease,
        visibility 1s ease,
        transform 1s ease;
}

.boot-content {
    width: min(500px, 80vw);
}

.boot-title {
    font-size: 24px;

    font-weight: bold;

    letter-spacing: 6px;

    margin-bottom: 35px;
}

.boot-line {
    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    font-size: 14px;

    letter-spacing: 3px;

    color: #999;
}

.boot-status {
    color: #777;
}

.boot-divider {
    width: 100%;

    height: 1px;

    margin: 25px 0;

    background: rgba(255, 255, 255, 0.15);
}

.boot-loading-label {
    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

    font-size: 12px;

    letter-spacing: 2px;

    color: #888;
}

.boot-loading-bar {
    width: 100%;

    height: 6px;

    background: rgba(255, 255, 255, 0.08);

    overflow: hidden;
}

#boot-progress {
    width: 0%;

    height: 100%;

    background: #d91c24;

    transition:
        width 0.15s linear,
        background 1.5s ease;
}

#boot-ready {
    margin-top: 25px;

    font-size: 14px;

    letter-spacing: 5px;

    opacity: 0;

    text-align: center;

    transition: opacity 0.5s ease;
}

#boot-screen.hidden {
    opacity: 0;
visibility: hidden;
    
    transform: scale(1.02);
}

body.early-morning #boot-progress {
    background: #d6a8ff;
}

body.morning #boot-progress {
    background: #79c7ff;
}

body.lunch #boot-progress {
    background: #ffd166;
}

body.afternoon #boot-progress {
    background: #ff9f43;
}

body.evening #boot-progress {
    background: #ff4d6d;
}

body.night #boot-progress {
    background: #d8b4fe;
}


/* ==============================
   DASHBOARD ENTRANCE
   ============================== */

.dashboard {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

.dashboard.loaded {
    opacity: 1;

    transform: translateY(0);
}

/* When the vault refreshes an already-open dashboard, hide startup overlays
   before the first paint so the update feels like a clean continuation. */
html.pdash-sync-resuming #lock-screen,
html.pdash-sync-resuming #boot-screen {
    display:none !important;
}
html.pdash-sync-resuming .dashboard {
    opacity:1 !important;
    transform:none !important;
}

.dashboard.loaded .date-section {
    animation: sectionAppear 0.8s ease forwards;
}

.dashboard.loaded .weather-section {
    animation: sectionAppear 0.8s ease 0.15s forwards;
}

.dashboard.loaded .events-section {
    animation: sectionAppear 0.8s ease 0.3s forwards;
}

.dashboard.loaded .status-section {
    animation: sectionAppear 0.8s ease 0.45s forwards;
}

@keyframes sectionAppear {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.date-section,
.weather-section,
.events-section,
.status-section {
    opacity: 0;
}

/* ==============================
   TIME PERIOD ICON
   ============================== */

.period-icon {
    display: inline-block;

    margin-right: 10px;

    font-size: 18px;

    vertical-align: middle;

    animation: periodFloat 3s ease-in-out infinite;
}

@keyframes periodFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }

}


body.early-morning .date-section {
    color: #d6a8ff;
}

body.morning .date-section {
    color: #79c7ff;
}

body.lunch .date-section {
    color: #ffd166;
}

body.afternoon .date-section {
    color: #ff9f43;
}

body.evening .date-section {
    color: #ff4d6d;
}

body.night .date-section {
    color: #d8b4fe;
}

/* ==============================
   BIG EVENT
   ============================== */

.big-event-section {
    position: relative;

    margin-top: 35px;
    padding: 35px 30px;

    text-align: center;

    background: rgba(0, 0, 0, 0.3);

    border: 1px solid currentColor;

    clip-path: polygon(
        25px 0,
        100% 0,
        100% calc(100% - 25px),
        calc(100% - 25px) 100%,
        0 100%,
        0 25px
    );

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.3);

    transition:
        color 1.5s ease,
        background 1.5s ease;
}

.big-event-label {
    font-size: 13px;

    letter-spacing: 6px;

    opacity: 0.6;

    margin-bottom: 15px;
}

#big-event-name {
    font-size: clamp(25px, 5vw, 40px);

    font-weight: 900;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.big-event-countdown {
    margin: 20px 0;
}

#big-event-days {
    display: block;

    font-size: clamp(70px, 15vw, 120px);

    font-weight: 900;

    line-height: 0.9;

    text-shadow:
        0 0 30px currentColor;
}

.big-event-days-label {
    display: block;

    margin-top: 12px;

    font-size: 13px;

    letter-spacing: 7px;

    opacity: 0.65;
}

#big-event-date {
    margin-top: 20px;

    font-size: 15px;

    letter-spacing: 3px;

    opacity: 0.7;
}

.big-event-section.upcoming-slide-next .big-event-label,.big-event-section.upcoming-slide-next #big-event-name,.big-event-section.upcoming-slide-next .big-event-countdown,.big-event-section.upcoming-slide-next #big-event-date,.big-event-section.upcoming-slide-next #edit-big-event { animation:upcoming-slide-next .18s ease both; }
.big-event-section.upcoming-slide-previous .big-event-label,.big-event-section.upcoming-slide-previous #big-event-name,.big-event-section.upcoming-slide-previous .big-event-countdown,.big-event-section.upcoming-slide-previous #big-event-date,.big-event-section.upcoming-slide-previous #edit-big-event { animation:upcoming-slide-previous .18s ease both; }
@keyframes upcoming-slide-next { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } }
@keyframes upcoming-slide-previous { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }

/* A scheduled big event becomes an unmistakable live priority on its day. */
.big-event-section.big-event-today { overflow:hidden; animation:big-event-today-pulse 2.4s ease-in-out infinite; }
.big-event-section.big-event-today::after { content:""; position:absolute; inset:-40%; pointer-events:none; background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,currentColor 22%,transparent) 50%,transparent 58%); animation:big-event-today-sweep 3.6s ease-in-out infinite; }
.big-event-section.big-event-today #big-event-days { position:relative; z-index:1; font-size:clamp(43px,9vw,80px); letter-spacing:6px; animation:big-event-today-word 1.15s ease-in-out infinite alternate; }
.big-event-section.big-event-today .big-event-days-label { position:relative; z-index:1; font-weight:700; opacity:1; }
@keyframes big-event-today-pulse { 50% { box-shadow:0 10px 42px color-mix(in srgb,currentColor 26%,rgba(0,0,0,.3)); } }
@keyframes big-event-today-sweep { from { transform:translateX(-32%); } to { transform:translateX(32%); } }
@keyframes big-event-today-word { from { transform:scale(.96); text-shadow:0 0 18px currentColor; } to { transform:scale(1.035); text-shadow:0 0 42px currentColor; } }

body.early-morning .big-event-section {
    color: #d6a8ff;
}

body.morning .big-event-section {
    color: #79c7ff;
}

body.lunch .big-event-section {
    color: #ffd166;
}

body.afternoon .big-event-section {
    color: #ff9f43;
}

body.evening .big-event-section {
    color: #ff4d6d;
}

body.night .big-event-section {
    color: #d8b4fe;
}

/* ==============================
   EVENT MODAL
   ============================== */

.event-modal {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.75);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.event-modal.active {
    opacity: 1;

    visibility: visible;
}

.event-modal.pinned { inset:auto; z-index:9999; display:block; width:min(500px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; background:transparent; }.event-modal.pinned .event-modal-content { width:auto; margin:0; transform:none; }.event-modal.pinned .event-modal-header { cursor:move; }.pin-window { margin-left:auto; margin-right:10px; padding:4px 7px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:8px; letter-spacing:1px; cursor:pointer; opacity:.65; }.pin-window.active,.pin-window:hover { background:rgba(255,255,255,.12); opacity:1; }

/* FINAL HOLOGRAPHIC WINDOW LAYER — intentionally below legacy modal rules. */
:root { --holo-glow: rgba(120,200,255,.3); --holo-panel: rgba(8,14,28,.94); }
body.early-morning { --holo-glow: rgba(214,168,255,.42); } body.morning { --holo-glow: rgba(121,199,255,.42); } body.lunch { --holo-glow: rgba(255,209,102,.4); } body.afternoon { --holo-glow: rgba(255,159,67,.42); } body.evening { --holo-glow: rgba(255,77,109,.42); } body.night { --holo-glow: rgba(216,180,254,.44); }
.event-modal.active .event-modal-content { border-color:currentColor; background:linear-gradient(135deg,rgba(15,22,42,.96),rgba(4,7,16,.98)); box-shadow:0 26px 75px rgba(0,0,0,.72),0 0 45px var(--holo-glow),inset 0 1px rgba(255,255,255,.1); }
.event-modal.active .event-modal-content::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.23; background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.05) 6px 7px),linear-gradient(110deg,transparent 30%,var(--holo-glow),transparent 70%); mix-blend-mode:screen; }
.event-modal.pinned { width:auto; max-width:calc(100vw - 18px); max-height:calc(100vh - 18px); overflow:visible; }
.event-modal.pinned .event-modal-content { position:relative; width:100%; min-width:320px; min-height:210px; max-width:none; max-height:none; padding:24px; resize:both; overflow:auto; border:1px solid currentColor; background:linear-gradient(140deg,color-mix(in srgb,currentColor 12%,#11182a),rgba(3,7,16,.95)); box-shadow:0 25px 80px rgba(0,0,0,.75),0 0 60px var(--holo-glow),inset 0 0 42px color-mix(in srgb,currentColor 9%,transparent); }
.event-modal.pinned .event-modal-content::after { content:""; position:absolute; right:5px; bottom:5px; width:16px; height:16px; pointer-events:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; opacity:.85; }
.event-modal.pinned .event-modal-header { position:sticky; top:-24px; z-index:2; margin:-24px -24px 16px; padding:14px 18px; background:linear-gradient(90deg,color-mix(in srgb,currentColor 15%,rgba(5,9,18,.97)),rgba(5,9,18,.97)); border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent); }
.event-modal.pinned .event-modal-content input,.event-modal.pinned .event-modal-content select { background:rgba(1,5,12,.82); box-shadow:inset 0 0 12px color-mix(in srgb,currentColor 9%,transparent); }
.mission-strip { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100%; margin-top:20px; padding:10px 0 0; border:0; border-top:1px solid rgba(255,255,255,.16); background:transparent; color:inherit; text-align:left; cursor:pointer; }.mission-strip span,.mission-strip i { font-size:8px; font-style:normal; letter-spacing:2px; opacity:.58; }.mission-strip strong { overflow:hidden; font-size:10px; letter-spacing:1px; text-overflow:ellipsis; white-space:nowrap; }.event-complete { opacity:.55; }.event-complete .event-title { text-decoration:line-through; }.complete-event { color:inherit; font-size:8px!important; }.complete-event.completed { background:color-mix(in srgb,currentColor 20%,transparent); }.data-import-label { display:block; margin-top:12px; padding:12px; border:1px dashed color-mix(in srgb,currentColor 55%,transparent); font-size:10px; letter-spacing:1px; text-align:center; cursor:pointer; }


.event-modal-content {

    width: min(500px, 90vw);

    padding: 30px;

    background: #0c0c12;

    border: 1px solid currentColor;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6);

    clip-path: polygon(
        20px 0,
        100% 0,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        0 100%,
        0 20px
    );

    transform: translateY(20px);

    transition:
        transform 0.3s ease;
}


.event-modal.active
.event-modal-content {

    transform: translateY(0);
}


.event-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

    font-size: 18px;

    font-weight: bold;

    letter-spacing: 4px;
}


#close-event-modal,
.modal-close {

    background: none;

    border: none;

    color: inherit;

    font-size: 28px;

    cursor: pointer;

    line-height: 1;
}

.weather-config-note {
    margin-top: 8px;
    color: #bdbdbd;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 1px;
}


.event-form {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.event-form label {

    margin-top: 10px;

    font-size: 11px;

    letter-spacing: 3px;

    opacity: 0.6;
}


.event-form input {

    width: 100%;

    box-sizing: border-box;

    padding: 12px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: white;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}


.event-form input:focus {

    border-color: currentColor;

    background: rgba(255, 255, 255, 0.08);
}

.recurrence-picker { margin:10px 0 0; padding:12px; border:1px solid rgba(255,255,255,.2); }
.recurrence-picker legend { padding:0 6px; font-size:11px; letter-spacing:2px; opacity:.75; }
.recurrence-days { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
.event-form .recurrence-days label { display:flex; align-items:center; justify-content:center; gap:4px; min-height:34px; margin:0; padding:4px; border:1px solid rgba(255,255,255,.16); font-size:9px; letter-spacing:1px; opacity:1; cursor:pointer; }
.event-form .recurrence-days input { width:auto; margin:0; padding:0; accent-color:currentColor; }
.recurrence-picker small { display:block; margin-top:10px; font-size:9px; line-height:1.4; letter-spacing:1px; opacity:.6; }
.event-recurring { margin-left:6px; font-size:9px; letter-spacing:1px; opacity:.65; }


.event-form-buttons {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 25px;
}


.event-form-buttons button {

    padding: 10px 20px;

    border: 1px solid currentColor;

    background: transparent;

    color: inherit;

    font-family: inherit;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.event-form-buttons button:hover {

    background: currentColor;

    color: #08080c;
}

/* ==============================
   ADD EVENT BUTTON
   ============================== */

#add-event-button {

    margin-top: 20px;

    padding: 10px 18px;

    background: transparent;

    border: 1px solid currentColor;

    color: inherit;

    font-family: inherit;

    font-size: 12px;

    letter-spacing: 3px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


#add-event-button:hover {

    background: currentColor;

    color: #08080c;

    transform: translateX(4px);
}

/* ==============================
   EVENT DELETE BUTTON
   ============================== */

.event {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.event-info {
    display: flex;

    gap: 25px;

    align-items: center;
}


.event-time {
    min-width: 80px;

    font-size: 13px;

    opacity: 0.6;
}


.event-title {
    font-size: 15px;

    letter-spacing: 1px;
}


/* ==============================
   EVENT DATE HEADERS
   ============================== */

.event-date-header {

    display: flex;

    align-items: baseline;

    margin-top: 25px;

    margin-bottom: 5px;

    padding-bottom: 8px;

    border-bottom: 1px solid currentColor;
}


.event-day {

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;
}


.event-date-header:first-child {

    margin-top: 10px;
}

/* ==============================
   EVENT ACTIONS
   ============================== */

.event-actions {

    display: flex;

    gap: 6px;

}


.edit-event,
.delete-event {

    width: 28px;

    height: 28px;

    border: 1px solid currentColor;

    background: transparent;

    color: inherit;

    font-size: 16px;

    line-height: 1;

    cursor: pointer;

    opacity: 0;

    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;

}


.event:hover .edit-event,
.event:hover .delete-event {

    opacity: 0.7;

}


.edit-event:hover,
.delete-event:hover {

    opacity: 1;

    background: currentColor;

    color: #08080c;

    transform: scale(1.1);

}

/* ==============================
   BIG EVENT EDIT BUTTON
   ============================== */

#edit-big-event {

    margin-top: 15px;

    padding: 8px 16px;

    background: transparent;

    border: 1px solid currentColor;

    color: inherit;

    font-family: inherit;

    font-size: 10px;

    letter-spacing: 2px;

    cursor: pointer;

    opacity: 0.6;

    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


#edit-big-event:hover {

    opacity: 1;

    background: currentColor;

    color: #08080c;

    transform: translateX(3px);

}

.event-category {

    margin-left: auto;

    font-size: 9px;

    letter-spacing: 2px;

    opacity: 0.7;

}
.event-category.school,
.event-category.professional,
.event-category.activity,
.event-category.personal {
    opacity: 0.9;
}

/* ==============================
   CUSTOM CATEGORY DROPDOWN
   ============================== */

.custom-dropdown {
    position: relative;
    width: 100%;
}

.custom-dropdown-button {
    width: 100%;
    padding: 10px;

    background: #08080c;
    border: 1px solid currentColor;

    color: white;

    font-family: inherit;
    font-size: 12px;
    letter-spacing: 1px;

    text-align: left;

    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-sizing: border-box;
}

.dropdown-arrow {
    font-size: 9px;

    transition:
        transform 0.2s ease;
}

.custom-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown-menu {
    position: absolute;

    left: 0;
    right: 0;

    top: calc(100% + 4px);

    background: #08080c;

    border: 1px solid currentColor;

    z-index: 1000;

    display: none;

    box-sizing: border-box;
}

.custom-dropdown.open .custom-dropdown-menu {
    display: block;
}

.custom-dropdown-option {
    padding: 10px;

    color: white;

    font-family: inherit;
    font-size: 12px;
    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        padding-left 0.15s ease;
}

.custom-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.12);

    padding-left: 16px;
}

#event-description {

    width: 100%;

    min-height: 80px;

    padding: 10px;

    box-sizing: border-box;

    resize: vertical;

    display: block;

    margin-top: 6px;

    background: #08080c;

    border: 1px solid currentColor;

    color: white;

    font-family: inherit;

    font-size: 12px;

    letter-spacing: 1px;

    line-height: 1.4;

    outline: none;

}


#event-description::placeholder {

    color: rgba(255, 255, 255, 0.45);

}

/* ==============================
   DAILY EVENT BRIEFING
   ============================== */

.event-briefing {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    background: #08080c;

    opacity: 0;

    transition:
        opacity 0.8s ease;
}


.event-briefing.active {
    display: flex;
    opacity: 1;
}

.event-briefing.closing {
    opacity: 0;
}


.briefing-header {

    position: absolute;

    top: 8%;

    left: 0;

    right: 0;

    text-align: center;

}


.briefing-label {

    font-size: 28px;

    font-weight: bold;

    letter-spacing: 5px;

}


.briefing-subtitle {

    margin-top: 8px;

    font-size: 11px;

    letter-spacing: 4px;

    opacity: 0.55;

}


/* CAROUSEL */

.briefing-carousel {

    width: 100%;

    overflow: visible;

}


.briefing-track {

    display: flex;

    align-items: center;

    gap: 35px;

    width: max-content;

    transition:
        transform 0.8s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* EVENT CARD */

.briefing-card {

    width: 420px;

    min-height: 300px;

    flex-shrink: 0;

    padding: 30px;

    box-sizing: border-box;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.35
    );

    background: rgba(
        10,
        10,
        15,
        0.95
    );

    text-align: center;

    opacity: 0.35;

    transform:
        scale(0.72);

    transition:
        transform 0.8s ease,
        opacity 0.8s ease;

}


/* CENTER CARD */

.briefing-card.active {

    opacity: 1;

    transform:
        scale(1);

    border-color: white;

    box-shadow:
        0 0 35px rgba(
            255,
            255,
            255,
            0.12
        );

}


/* TIME */

.briefing-time {

    font-size: 18px;

    letter-spacing: 3px;

    margin-bottom: 25px;

}


/* EVENT NAME */

.briefing-title {

    font-size: 30px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 15px;

}


/* CATEGORY */

.briefing-category {

    font-size: 10px;

    letter-spacing: 3px;

    opacity: 0.55;

    margin-bottom: 25px;

}


/* DESCRIPTION */

.briefing-description {

    font-size: 13px;

    line-height: 1.6;

    opacity: 0.75;

}


/* DOTS */

.briefing-dots {

    position: absolute;

    bottom: 12%;

    display: flex;

    gap: 10px;

}


.briefing-dot {

    width: 7px;

    height: 7px;

    border: 1px solid white;

    opacity: 0.35;

}


.briefing-dot.active {

    opacity: 1;

    transform: scale(1.3);

}


/* STATUS */

.briefing-status {

    position: absolute;

    bottom: 5%;

    font-size: 9px;

    letter-spacing: 3px;

    opacity: 0.35;

}
.briefing-continue { position:absolute; bottom:9%; min-height:42px; padding:10px 18px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:10px; letter-spacing:2px; cursor:pointer; }.briefing-continue:hover { background:currentColor; color:#08080c; }
@media (max-width:760px) { .briefing-status { bottom:15%; padding:0 20px; text-align:center; line-height:1.5; }.briefing-continue { bottom:7%; min-width:180px; min-height:50px; font-size:12px; } }

/* LOCAL ACCESS GATE */
.lock-screen { position:fixed; inset:0; z-index:100002; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 20%,rgba(110,80,180,.2),transparent 40%),#08080c; opacity:1; visibility:visible; transition:opacity .65s ease,visibility .65s ease; }
.lock-screen::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:36px 36px; mask-image:radial-gradient(circle,black,transparent 72%); }
.lock-screen.unlocked { opacity:0; visibility:hidden; pointer-events:none; }
.lock-panel { position:relative; width:min(480px,86vw); padding:44px 34px; text-align:center; border:1px solid currentColor; background:rgba(8,8,12,.9); box-shadow:0 0 60px rgba(150,110,255,.15); clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); }
.lock-mark { font-size:42px; color:#d8b4fe; text-shadow:0 0 20px currentColor; }.lock-title { margin-top:18px; font-size:16px; font-weight:bold; letter-spacing:5px; }.lock-time { margin:24px 0; font-size:38px; font-weight:bold; letter-spacing:4px; }.lock-panel button { padding:12px 18px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:11px; letter-spacing:3px; cursor:pointer; }.lock-panel button:hover { background:currentColor; color:#08080c; }.lock-note { margin-top:18px; font-size:9px; letter-spacing:2px; opacity:.55; }
.lock-password-wrap { margin:0 auto 18px; width:min(280px,100%); }.lock-password-wrap label { display:block; margin-bottom:7px; font-size:9px; letter-spacing:2px; opacity:.65; }.lock-password-wrap input { width:100%; padding:11px; border:1px solid currentColor; background:#08080c; color:#fff; font:inherit; text-align:center; }.lock-error { min-height:16px; margin-top:7px; color:#ff9aa8; font-size:9px; letter-spacing:2px; }
@media (max-width:760px) { .lock-panel { width:min(440px,calc(100vw - 28px)); padding:34px 22px; }.lock-password-wrap { width:100%; }.lock-password-wrap input,.lock-panel button { min-height:48px; font-size:16px; }.lock-note { line-height:1.5; } }
.settings-divider { margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); font-size:10px; letter-spacing:2px; opacity:.7; }.settings-inline-button { align-self:flex-start; padding:7px 10px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:9px; letter-spacing:1px; cursor:pointer; }
.utility-modal-content { width:min(640px,90vw); }.utility-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.utility-metric { min-height:80px; padding:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }.utility-metric span { display:block; font-size:9px; letter-spacing:2px; opacity:.6; }.utility-metric strong { display:block; margin-top:12px; font-size:16px; letter-spacing:1px; overflow-wrap:anywhere; }
@media (max-width:600px) { .utility-grid { grid-template-columns:1fr; } }

.complete-event { width:28px; height:28px; padding:0; border:1px solid currentColor; background:transparent; color:inherit; font-size:15px; line-height:1; cursor:pointer; transition:background .2s ease,box-shadow .2s ease; }.complete-event:hover,.complete-event.completed { background:color-mix(in srgb,currentColor 16%,transparent); box-shadow:0 0 13px color-mix(in srgb,currentColor 25%,transparent); }

/* Holographic control normalisation (kept last to override legacy modal styles). */
.event-modal.active .event-modal-content { color:inherit; border-color:currentColor; background:linear-gradient(135deg,rgba(14,22,43,.97),rgba(3,6,15,.98)); box-shadow:0 26px 75px rgba(0,0,0,.72),0 0 48px var(--holo-glow,rgba(120,200,255,.3)),inset 0 1px rgba(255,255,255,.1); }
.event-modal.active .event-modal-content input,.event-modal.active .event-modal-content select,.event-modal.active .event-modal-content textarea { color-scheme:dark; color:inherit; background:rgba(1,5,14,.82); border:1px solid color-mix(in srgb,currentColor 42%,transparent); box-shadow:inset 0 0 15px color-mix(in srgb,currentColor 8%,transparent); }
.event-modal.active .event-modal-content select option { background:#0a1020; color:#fff; }
.event-modal.pinned .event-modal-content { width:100%; min-width:320px; min-height:220px; max-width:none; max-height:none; padding:24px; resize:both; overflow:auto; background:linear-gradient(140deg,color-mix(in srgb,currentColor 13%,#111a30),rgba(2,6,15,.96)); border:1px solid currentColor; box-shadow:0 25px 80px rgba(0,0,0,.75),0 0 62px var(--holo-glow,rgba(120,200,255,.3)),inset 0 0 46px color-mix(in srgb,currentColor 9%,transparent); }
.event-modal.pinned .event-modal-header { position:sticky; top:-24px; z-index:3; margin:-24px -24px 18px; padding:14px 18px; background:linear-gradient(90deg,color-mix(in srgb,currentColor 16%,rgba(5,9,18,.97)),rgba(5,9,18,.97)); border-bottom:1px solid color-mix(in srgb,currentColor 42%,transparent); }
.event-modal.pinned .event-modal-content::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.05) 6px 7px); }

/* System tools live as original-style dashboard panels, hidden until requested. */
.dashboard > .docked-system-panel { position:relative; inset:auto; z-index:auto; display:none; width:auto; max-height:none; margin:0; padding:0; overflow:visible; opacity:1; visibility:visible; background:transparent; grid-column:span 4; }
.dashboard > .docked-system-panel.active { display:block; }
.dashboard > .docked-system-panel .event-modal-content { width:auto; max-width:none; min-height:0; margin:0; padding:28px 30px; transform:none; clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.dashboard > .docked-system-panel .event-modal-header { margin-bottom:18px; }.dashboard > #week-modal { grid-column:span 12; }.dashboard > #budget-modal { grid-column:span 5; }.dashboard > #data-modal,.dashboard > #mission-modal { grid-column:span 4; }
.timer-inputs { display:grid; grid-template-columns:1fr auto 1fr auto; gap:8px; align-items:center; margin:12px 0; }.timer-inputs input { min-width:0; padding:10px!important; text-align:center; font-size:16px!important; }.timer-inputs span { font-size:8px; letter-spacing:1px; opacity:.6; }.dashboard > .docked-system-panel .modal-close { display:none; }
body.alarm-flash { filter:brightness(1.7) saturate(1.5); } body.alarm-flash::after { content:""; position:fixed; inset:0; z-index:100200; pointer-events:none; background:rgba(255,0,35,.3); }
body.early-morning { --system-accent:#d6a8ff; } body.morning { --system-accent:#79c7ff; } body.lunch { --system-accent:#ffd166; } body.afternoon { --system-accent:#ff9f43; } body.evening { --system-accent:#ff4d6d; } body.night { --system-accent:#d8b4fe; }
/* Docked tools use the exact dashboard-card shell. Their controls and accents
   follow the active time-of-day theme instead of retaining a modal-blue skin. */
.dashboard > .docked-system-panel { color:var(--system-accent,#79c7ff); }
.dashboard > .docked-system-panel .event-modal-content {
    color:#f5f5f5;
    border-left:4px solid var(--system-accent,#79c7ff);
    background:rgba(0,0,0,.25);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.dashboard > .docked-system-panel .event-modal-header span,
.dashboard > .docked-system-panel .system-readout,
.dashboard > .docked-system-panel .event-modal-header { color:var(--system-accent,#79c7ff); }
.dashboard > .docked-system-panel button { color:var(--system-accent,#79c7ff); }
.dashboard > .docked-system-panel .modal-close {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    margin:-5px -5px 0 auto;
    padding:0;
    border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 65%,transparent);
    background:transparent;
    color:var(--system-accent,#79c7ff);
    font-size:21px;
    line-height:1;
}
.dashboard > .docked-system-panel .modal-close:hover {
    background:var(--system-accent,#79c7ff);
    color:#08080c;
}
/* The scan remains animated, but its light is now the current dashboard
   accent—not an unrelated blue panel treatment. */
.dashboard > .docked-system-panel .scan-lines {
    background:
        repeating-linear-gradient(0deg,color-mix(in srgb,var(--system-accent,#79c7ff) 14%,transparent) 0 1px,transparent 1px 9px),
        linear-gradient(90deg,transparent,color-mix(in srgb,var(--system-accent,#79c7ff) 34%,transparent),transparent);
}

/* Every dashboard card shares the same live accent strip. */
.dashboard > .next-event-section,
.dashboard > .weather-section,
.dashboard > .events-section,
.dashboard > .productivity-section,
.dashboard > .status-section,
.dashboard > .big-event-section {
    border-left-color:var(--system-accent,#79c7ff);
}

/* Standard popups are dashboard cards in an overlay, not a second visual
   system. This keeps Add Event, settings, account, and travel consistent. */
.event-modal.active:not(.docked-system-panel) .event-modal-content {
    color:#f5f5f5;
    border-color:var(--system-accent,#79c7ff);
    border-left:4px solid var(--system-accent,#79c7ff);
    background:rgba(0,0,0,.25);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.event-modal.active:not(.docked-system-panel) .event-modal-header span,
.event-modal.active:not(.docked-system-panel) .event-form-buttons button,
.event-modal.active:not(.docked-system-panel) .modal-close { color:var(--system-accent,#79c7ff); }

/* Week view retains the grid, but uses the same quiet card surface and faint
   horizontal telemetry lines as the rest of the dashboard. */
.dashboard > #week-modal .event-modal-content {
    background:rgba(0,0,0,.25);
}
.dashboard > #week-modal .week-day { background:transparent; }
.dashboard > #week-modal .week-day.today { background:color-mix(in srgb,var(--system-accent,#79c7ff) 8%,transparent); }
.dashboard > #week-modal .week-event { border-left-color:var(--system-accent,#79c7ff); }

/* The simple clock is a compact form-and-readout card: no orbit, flare, or
   modal scanline layer. */
.dashboard > .docked-system-panel .event-modal-content::before { content:none; }
.dashboard > #timer-modal .event-modal-content { text-align:left; }
.dashboard > #timer-modal label { display:block; margin:0 0 7px; font-size:10px; letter-spacing:2px; color:var(--system-accent,#79c7ff); }
.dashboard > #timer-modal input,
.dashboard > #timer-modal select { box-sizing:border-box; width:100%; margin:0 0 16px; padding:10px; color:#f5f5f5; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.25); font:inherit; letter-spacing:1px; }
.dashboard > #timer-modal .system-readout { margin:20px 0 8px; color:#f5f5f5; font-size:clamp(32px,5vw,52px); letter-spacing:3px; text-align:left; overflow:hidden; }
.dashboard > #timer-modal .system-state { margin:0 0 20px; text-align:left; }
.dashboard > #timer-modal #timer-help { margin:-8px 0 18px; font-size:8px; }
.dashboard > .docked-system-panel .event-form-buttons button:hover { color:#08080c; }

/* Clock and calculator float over the visible viewport. They do not enter the
   dashboard canvas, so opening either tool cannot move or lengthen the page. */
.event-modal.floating-tool.active { display:block; background:transparent; pointer-events:none; }
.event-modal.floating-tool .event-modal-content { position:fixed; box-sizing:border-box; margin:0; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); overflow:auto; pointer-events:auto; text-align:left; color:#f5f5f5; border-color:var(--system-accent,#79c7ff); border-left:4px solid var(--system-accent,#79c7ff); background:rgba(0,0,0,.9); box-shadow:0 16px 42px rgba(0,0,0,.62); }
.event-modal.floating-tool .event-modal-content::before { content:none; }
.event-modal.floating-tool .event-modal-header { cursor:move; user-select:none; }
.event-modal.floating-tool label { display:block; margin:0 0 7px; color:var(--system-accent,#79c7ff); font-size:10px; letter-spacing:2px; }
.event-modal.floating-tool input,.event-modal.floating-tool select { box-sizing:border-box; width:100%; margin:0 0 16px; padding:10px; color:#f5f5f5; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.25); font:inherit; letter-spacing:1px; }
.event-modal.floating-tool .system-readout { margin:20px 0 8px; color:#f5f5f5; font-size:clamp(32px,5vw,52px); letter-spacing:3px; text-align:left; overflow:hidden; }
.event-modal.floating-tool .system-state { margin:0 0 20px; text-align:left; }
.event-modal.floating-tool #timer-help { margin:-8px 0 18px; font-size:8px; }
.calculator-keypad { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.calculator-keypad button { min-height:42px; border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 55%,transparent); background:rgba(255,255,255,.04); color:#f5f5f5; font:inherit; cursor:pointer; }
.calculator-keypad button:hover { background:color-mix(in srgb,var(--system-accent,#79c7ff) 18%,transparent); }
.calculator-keypad .calculator-clear { grid-column:span 4; }

/* Private Diary uses the same compact floating surface as Clock/Calculator,
   with a dedicated writing workspace after its encrypted vault is unlocked. */
.diary-modal-content { min-height:430px; }
.diary-lock-screen { max-width:470px; margin:22px auto 4px; }
.diary-lock-screen p { margin:0 0 20px; color:#d9d9df; font-size:10px; line-height:1.65; letter-spacing:1.2px; }
.diary-lock-screen label { margin-top:14px; }.diary-lock-screen button { width:100%; margin-top:8px; }
.diary-lock-error { min-height:18px; margin-top:7px; color:#ff9dad; font-size:9px; letter-spacing:1px; }
.diary-privacy-note { margin-top:20px!important; color:#a5a5af!important; font-size:8px!important; }
.diary-workspace { position:relative; display:grid; grid-template-columns:205px minmax(0,1fr); min-height:440px; margin:0 -2px -2px; border-top:1px solid rgba(255,255,255,.14); }
.diary-entry-lock { position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:22px; background:rgba(0,0,0,.94); }
.diary-workspace[hidden],.diary-entry-lock[hidden] { display:none; }
.diary-entry-lock > div { width:min(390px,100%); }.diary-entry-lock p { margin:0 0 18px; color:#d9d9df; font-size:10px; line-height:1.65; letter-spacing:1.2px; }.diary-entry-lock label { display:block; margin:12px 0 7px; color:var(--system-accent,#79c7ff); font-size:10px; letter-spacing:2px; }.diary-entry-lock input { box-sizing:border-box; width:100%; padding:10px; color:#f5f5f5; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.25); font:inherit; }.diary-entry-lock button { width:100%; margin-top:8px; }
.diary-history { min-width:0; padding:15px 12px; border-right:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.025); }
.diary-history > button { width:100%; margin-bottom:12px; }
.diary-entry-list { display:grid; gap:5px; max-height:380px; overflow-y:auto; }
.diary-entry-button { display:grid; gap:5px; width:100%; padding:10px; border:1px solid transparent; background:transparent; color:#f5f5f5; text-align:left; cursor:pointer; }
.diary-entry-button:hover,.diary-entry-button.active { border-color:color-mix(in srgb,var(--system-accent,#79c7ff) 55%,transparent); background:color-mix(in srgb,var(--system-accent,#79c7ff) 10%,transparent); }
.diary-entry-button strong { overflow:hidden; font-size:10px; letter-spacing:.7px; text-overflow:ellipsis; white-space:nowrap; }.diary-entry-button small,.diary-empty { color:#aab0b9; font-size:8px; letter-spacing:.8px; line-height:1.35; }
.diary-editor { display:flex; flex-direction:column; min-width:0; padding:17px; }
.diary-entry-date { margin:0 0 12px; color:var(--system-accent,#79c7ff); font-size:9px; letter-spacing:1.4px; }
.diary-editor input { margin-bottom:10px!important; font-size:15px!important; font-weight:600; letter-spacing:1px!important; }
.diary-editor textarea { flex:1; min-height:270px; width:100%; resize:none; padding:12px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.18); color:#f5f5f5; font:inherit; font-size:13px; line-height:1.65; letter-spacing:.35px; }
.diary-save-status { min-height:22px; padding-top:10px; color:#aab0b9; font-size:8px; letter-spacing:1.2px; }
.diary-editor-footer { display:flex; align-items:center; gap:12px; }.diary-editor-footer .diary-save-status { flex:1; }.diary-editor-footer button { color:#ff9dad; border-color:rgba(255,157,173,.55); }
@media (max-width:620px) { .diary-workspace { grid-template-columns:1fr; }.diary-history { border-right:0; border-bottom:1px solid rgba(255,255,255,.14); }.diary-entry-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:130px; }.diary-editor textarea { min-height:220px; } }

/* Test Lab: experiments are local workspaces with a clear daily signal. */
.tests-modal-content { min-height:420px; }.test-create-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.35fr) auto; gap:8px; margin:0 0 20px; }.test-create-form input,.test-meta-form input,.test-meta-form textarea,.test-entry-form input,.test-entry-form select,.test-entry-form textarea { min-width:0; padding:10px; color:#f5f5f5; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.25); font:inherit; }
.tests-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.test-card { display:grid; gap:8px; min-height:112px; padding:15px; border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 35%,transparent); background:rgba(255,255,255,.035); color:#f5f5f5; text-align:left; cursor:pointer; }.test-card:hover { background:color-mix(in srgb,var(--system-accent,#79c7ff) 10%,transparent); }.test-card strong { color:var(--system-accent,#79c7ff); font-size:13px; letter-spacing:1.4px; }.test-card span { font-size:10px; line-height:1.4; opacity:.8; }.test-card small { font-size:8px; letter-spacing:1px; opacity:.65; }.test-empty { padding:28px 0; font-size:10px; letter-spacing:1.5px; opacity:.65; }
#test-detail > h3 { margin:17px 0 12px; color:var(--system-accent,#79c7ff); font-size:20px; letter-spacing:2px; }.test-meta-form { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:center; margin:0 0 14px; padding:14px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.02); }.test-meta-form label,.test-entry-form label { color:var(--system-accent,#79c7ff); font-size:9px; letter-spacing:1.5px; }.test-meta-form textarea { min-height:58px; resize:vertical; }.test-meta-form button { grid-column:1 / -1; justify-self:end; }.test-entry-form { display:grid; grid-template-columns:auto 145px auto 130px; gap:8px; align-items:center; padding:14px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.025); }.test-entry-form textarea { grid-column:1 / -1; min-height:86px; resize:vertical; }.test-entry-form button { grid-column:1 / -1; justify-self:end; }
.test-days-list { display:grid; gap:8px; margin-top:16px; }.test-day { padding:13px; border-left:3px solid #9a9fa8; background:rgba(255,255,255,.025); }.test-day-success { border-left-color:#65da98; }.test-day-failed { border-left-color:#ff6978; }.test-day > div { display:flex; justify-content:space-between; gap:12px; }.test-day strong { font-size:11px; letter-spacing:1.2px; }.test-day-success strong,.test-day-success span { color:#65da98; }.test-day-failed strong,.test-day-failed span { color:#ff6978; }.test-day span { font-size:9px; font-weight:700; letter-spacing:1.3px; }.test-day p { margin:9px 0; color:#d1d3d8; font-size:11px; line-height:1.55; }.test-day button { padding:4px 7px; font-size:8px; }
@media (max-width:650px) { .test-create-form,.test-meta-form,.test-entry-form { grid-template-columns:1fr; }.test-entry-form button,.test-meta-form button { justify-self:stretch; }.tests-list { grid-template-columns:1fr; } }

/* Five-point Skills Tracker */
.skills-section { grid-column:span 12; position:relative; padding:30px; color:#f5f5f5; border-left:4px solid var(--system-accent,#79c7ff); background:rgba(0,0,0,.25); box-shadow:0 10px 30px rgba(0,0,0,.25); clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
.skills-layout { display:grid; grid-template-columns:minmax(350px,1fr) minmax(280px,.85fr); align-items:center; gap:30px; }.skills-star-wrap { position:relative; width:min(100%,460px); margin:auto; aspect-ratio:1; }.skills-star-wrap canvas { display:block; width:100%; height:100%; }.skill-tip { position:absolute; color:#ffd166; font-size:10px; font-weight:700; letter-spacing:1.6px; text-shadow:0 2px 8px #000; }.skill-knowledge { top:0; left:50%; transform:translateX(-50%); }.skill-charm { top:34%; left:0; }.skill-kindness { bottom:4%; left:7%; }.skill-guts { top:34%; right:0; }.skill-proficiency { right:5%; bottom:4%; }
.skills-stat-list { display:grid; gap:12px; }.skill-stat { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; align-items:end; padding:12px; border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 30%,transparent); background:rgba(255,255,255,.025); }.skill-stat div { display:grid; gap:4px; }.skill-stat strong { color:var(--system-accent,#79c7ff); font-size:11px; letter-spacing:1.6px; }.skill-stat span { font-size:8px; letter-spacing:1px; opacity:.72; }.skill-stat b { color:#ffd166; font-size:11px; letter-spacing:1px; }.skill-stat i { grid-column:1 / -1; display:block; height:4px; overflow:hidden; background:rgba(255,255,255,.12); }.skill-stat em { display:block; height:100%; background:#ffd166; box-shadow:0 0 10px #ffd166; }
.skill-add-form { display:grid; grid-template-columns:minmax(0,1.5fr) 100px 160px auto auto auto; gap:8px; margin-top:22px; }.skill-add-form input,.skill-add-form select { min-width:0; padding:10px; color:#f5f5f5; background:rgba(0,0,0,.18); border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 45%,transparent); font:inherit; font-size:11px; letter-spacing:.7px; }.skill-add-form button { white-space:nowrap; }
.skills-log-modal-content { max-height:min(80vh,760px); overflow-y:auto; }.skills-log-list { display:grid; gap:8px; }.skill-log-row { display:grid; grid-template-columns:minmax(180px,1fr) 76px 145px 165px 135px auto auto; gap:7px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.025); }.skill-log-row input,.skill-log-row select { min-width:0; padding:8px; color:#f5f5f5; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.25); font:inherit; font-size:10px; }.skill-log-row input[name="date"] { min-width:165px; }.skill-log-row input[name="time"] { min-width:135px; }.skill-log-row button { padding:7px 8px; font-size:8px; }.skill-log-row button[data-delete-skill-entry] { color:#ff9dad; border-color:rgba(255,157,173,.5); }.skills-log-empty { padding:28px 0; font-size:10px; letter-spacing:1.5px; opacity:.62; }
.skills-settings-modal-content { max-height:min(80vh,760px); overflow-y:auto; }.skill-rank-settings { display:grid; grid-template-columns:minmax(150px,1fr) repeat(5,70px) auto; gap:8px; align-items:end; margin:0 0 17px; padding:12px; border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 35%,transparent); background:rgba(255,255,255,.025); }.skill-rank-settings > div { display:grid; gap:4px; }.skill-rank-settings strong { color:var(--system-accent,#79c7ff); font-size:10px; letter-spacing:1.4px; }.skill-rank-settings span,.skill-rank-settings p { color:#d7d8de; font-size:8px; letter-spacing:.7px; }.skill-rank-settings label { display:grid; gap:5px; color:#ffd166; font-size:9px; letter-spacing:1px; }.skill-rank-settings input { min-width:0; padding:7px; color:#f5f5f5; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.3); font:inherit; font-size:10px; }.skill-rank-settings p { grid-column:1 / -1; margin:0; min-height:11px; color:#ffd166; }.skills-settings-intro { margin:0 0 16px; color:#d7d8de; font-size:10px; line-height:1.55; letter-spacing:1.1px; }.skill-guide-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }.skill-guide-tabs button[aria-selected="true"] { color:#17120a; border-color:#ffd166; background:#ffd166; }.skill-guide-sheet-wrap { overflow:auto; border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 42%,transparent); background:rgba(0,0,0,.28); }.skill-guide-sheet { width:max-content; min-width:100%; border-collapse:collapse; table-layout:fixed; }.skill-guide-sheet th,.skill-guide-sheet td { height:42px; min-width:155px; padding:0; border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 28%,transparent); }.skill-guide-sheet thead th { height:36px; color:var(--system-accent,#79c7ff); background:rgba(255,255,255,.045); font-size:10px; letter-spacing:1.5px; text-align:left; padding:0 10px; }.skill-guide-sheet tbody > tr > th { min-width:84px; width:84px; color:#ffd166; background:rgba(255,255,255,.03); font-size:10px; letter-spacing:1.2px; text-align:left; padding:0 9px; }.skill-guide-cell { position:relative; }.skill-guide-cell input { width:100%; height:100%; padding:8px 23px 8px 9px; color:#f5f5f5; border:0; outline:0; background:transparent; font:inherit; font-size:10px; letter-spacing:.45px; }.skill-guide-cell input:focus { background:color-mix(in srgb,var(--system-accent,#79c7ff) 12%,transparent); }.skill-guide-cell button { position:absolute; top:3px; right:3px; display:grid; width:16px; height:16px; place-items:center; padding:0; color:#ff9dad; border:0; background:transparent; font-size:15px; line-height:1; opacity:0; }.skill-guide-cell:hover button,.skill-guide-cell:focus-within button { opacity:1; }.skill-guide-add-cell { min-width:42px !important; width:42px; text-align:center; }.skill-guide-add-cell button { width:100%; height:100%; color:var(--system-accent,#79c7ff); border:0; background:transparent; font-size:21px; }.skill-guide-add-cell button:hover { color:#ffd166; background:rgba(255,255,255,.06); }
@media (max-width:850px) { .skill-rank-settings { grid-template-columns:repeat(3,minmax(70px,1fr)); }.skill-rank-settings > div,.skill-rank-settings p { grid-column:1 / -1; } }
@media (max-width:800px) { .skills-layout { grid-template-columns:1fr; }.skill-add-form { grid-template-columns:1fr 90px 1fr; }.skill-add-form button { grid-column:span 1; }.skill-log-row { grid-template-columns:1fr 70px 1fr; }.skill-log-row small { grid-column:1 / -1; }.skill-log-row button { grid-column:span 1; } }
@media (max-width:480px) { .skills-section { padding:22px; }.skill-add-form { grid-template-columns:1fr; }.skill-log-row { grid-template-columns:1fr; }.skill-tip { font-size:8px; letter-spacing:.8px; } }
.skill-guide-cell input { white-space:nowrap; }
.skill-guide-sheet { table-layout:auto; }

/* Keep floating tools legible above any dashboard panel. This deliberately
   wins over the shared popup surface rule above. */
.event-modal.active.floating-tool .event-modal-content { background:rgba(0,0,0,.9); }
/* Floating tools close instantly: inherited popup fade/slide effects caused a
   momentary full-screen flash behind the compact clock and calculator. */
.event-modal.floating-tool { transition:none; }
.event-modal.floating-tool .event-modal-content { transform:none; transition:none; }

/* Utility views use the same dark card surface and live accent as the main
   dashboard, with no fixed blue/teal treatment. */
#telemetry-modal .event-modal-content,
#stats-modal .event-modal-content,
.dashboard > #budget-modal .event-modal-content { background:rgba(0,0,0,.25); }
#telemetry-modal .utility-metric,
#stats-modal .utility-metric,
.dashboard > #budget-modal .utility-metric { border-color:color-mix(in srgb,var(--system-accent,#79c7ff) 35%,transparent); background:rgba(0,0,0,.16); }
#telemetry-modal .utility-metric strong,
#stats-modal .utility-metric strong,
.dashboard > #budget-modal .utility-metric strong,
.dashboard > #budget-modal .budget-row strong { color:var(--system-accent,#79c7ff); }

/* Controls occupy their own final dashboard row, never the content area. */
body { padding-bottom:0; }
.layout-controls {
    position:relative;
    grid-column:span 12;
    width:min(760px,94vw);
    min-height:42px;
    margin:0 0 16px auto;
    padding:9px 12px;
    justify-content:center;
    border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 45%,transparent);
    background:rgba(8,8,12,.92);
    box-shadow:0 10px 30px rgba(0,0,0,.34);
    backdrop-filter:blur(12px);
    opacity:1;
}
.dashboard.free-layout .layout-controls { position:absolute; right:0; bottom:16px; z-index:1; }
.layout-controls button { color:var(--system-accent,#79c7ff); }
.dashboard.free-layout > [data-layout-id] { cursor:grab; }
.dashboard.free-layout > [data-layout-id].moving { cursor:grabbing; }
.dashboard.free-layout > [data-layout-id].resizing { cursor:nwse-resize; }
.dashboard.free-layout > [data-layout-id] { font-size:calc(16px * var(--panel-scale)); }
.fullscreen-active .dashboard .layout-controls { position:relative; top:auto; right:auto; bottom:auto; left:auto; transform:none; }
@media (max-width:600px) {
    .layout-controls { min-height:70px; margin-bottom:12px; }
    .dashboard.free-layout .layout-controls { bottom:12px; }
    .layout-shortcuts { display:none; }
}

/* Keep overlays quiet and card-like: no holographic flare layer. */
.event-modal.active:not(.docked-system-panel) .event-modal-content::before { content:none; }

/* Dawn uses a distinct teal accent rather than sharing night’s purple family. */
body.early-morning { --system-accent:#55d6c2; --holo-glow:rgba(85,214,194,.35); }
body.early-morning .time-period,
body.early-morning h2,
body.early-morning .date-section,
body.early-morning .big-event-section { color:var(--system-accent); }
body.early-morning .weather-section,
body.early-morning .events-section,
body.early-morning .status-section { border-color:var(--system-accent); }

/* Resized main panels use this value from layout.js for their text and controls. */
.dashboard > .events-section .event-category,
.dashboard > .events-section .event-day,
.dashboard > .events-section .event-actions button,
.dashboard > .productivity-section .assistant-status,
.dashboard > .productivity-section .assistant-clear,
.dashboard > .status-section .status-item,
.dashboard > .status-section .loading-label,
.dashboard > .big-event-section #edit-big-event { font-size:calc(10px * var(--panel-scale)); }
.dashboard > .composition-section .composition-content { grid-template-columns:calc(260px * var(--panel-scale)) minmax(calc(220px * var(--panel-scale)),1fr); gap:calc(36px * var(--panel-scale)); }
.dashboard > .composition-section #composition-chart { width:calc(260px * var(--panel-scale)); height:calc(260px * var(--panel-scale)); }
.dashboard > .composition-section .composition-row { min-height:calc(48px * var(--panel-scale)); font-size:calc(11px * var(--panel-scale)); letter-spacing:calc(2px * var(--panel-scale)); }
.dashboard > .composition-section .composition-row strong { font-size:calc(13px * var(--panel-scale)); }.dashboard > .composition-section .composition-controls { margin-top:calc(28px * var(--panel-scale)); padding-top:calc(18px * var(--panel-scale)); gap:calc(10px * var(--panel-scale)); }.dashboard > .composition-section .composition-controls label,.dashboard > .composition-section .composition-entry,.dashboard > .composition-section .composition-empty { font-size:calc(10px * var(--panel-scale)); }.dashboard > .composition-section .composition-controls input,.dashboard > .composition-section .composition-controls button { font-size:calc(12px * var(--panel-scale)); }.dashboard > .composition-section .composition-entry { padding:calc(9px * var(--panel-scale)) 0; }.dashboard > .composition-section .composition-entry strong { font-size:calc(10px * var(--panel-scale)); }

/* Day composition is a dashboard card; only the chart itself uses stable
   category colours so its meaning remains clear through day-cycle changes. */
.composition-section {
    grid-column:span 12;
    position:relative;
    padding:30px;
    color:#f5f5f5;
    border-left:4px solid var(--system-accent,#79c7ff);
    background:linear-gradient(135deg,color-mix(in srgb,var(--system-accent,#79c7ff) 8%,rgba(10,10,16,.72)),rgba(4,5,10,.8));
    box-shadow:inset 0 1px color-mix(in srgb,#fff 9%,transparent),0 10px 30px rgba(0,0,0,.22);
    clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.composition-section h2 { color:var(--system-accent,#79c7ff); }
.composition-content { display:grid; grid-template-columns:260px minmax(260px,1fr); align-items:center; gap:36px; }
#composition-chart { display:block; width:260px; height:260px; max-width:100%; }
.composition-breakdown { display:grid; gap:0; border-top:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 32%,transparent); }
.composition-row { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:48px; border-bottom:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 20%,transparent); font-size:11px; letter-spacing:2px; }
.composition-row span { display:flex; align-items:center; gap:10px; }.composition-row i { width:9px; height:9px; flex:none; }.composition-row strong { color:var(--system-accent,#79c7ff); font-size:13px; letter-spacing:1px; }
.composition-controls { display:grid; grid-template-columns:auto 156px minmax(0,1fr); align-items:center; gap:10px; margin-top:28px; padding-top:18px; border-top:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 28%,transparent); }
.composition-controls label { font-size:10px; letter-spacing:2px; color:var(--system-accent,#79c7ff); }.composition-controls input { min-width:0; padding:10px; border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 45%,transparent); background:rgba(0,0,0,.18); color:#f5f5f5; font:inherit; letter-spacing:1px; }
.composition-sleep-inputs { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:6px; }.composition-sleep-inputs span { font-size:9px; letter-spacing:1px; opacity:.68; }
.composition-controls .quick-add-form { display:grid; grid-template-columns:minmax(0,1fr) 105px auto; gap:8px; margin:0; }.composition-controls .quick-add-form button,.composition-entry button { border:1px solid var(--system-accent,#79c7ff); background:transparent; color:var(--system-accent,#79c7ff); font:inherit; font-size:10px; letter-spacing:1px; cursor:pointer; }.composition-controls .quick-add-form button { padding:0 14px; }.composition-controls .quick-add-form button:hover,.composition-entry button:hover { background:var(--system-accent,#79c7ff); color:#08080c; }
.composition-entries { display:grid; gap:7px; margin-top:14px; }.composition-entry { display:grid; grid-template-columns:minmax(0,1fr) auto 28px; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 14%,transparent); font-size:11px; letter-spacing:1px; }.composition-entry strong { color:var(--system-accent,#79c7ff); font-size:10px; letter-spacing:1px; }.composition-entry button { width:25px; height:25px; padding:0; font-size:18px; line-height:1; }.composition-empty { padding:10px 0; font-size:9px; letter-spacing:2px; opacity:.58; }
@media (max-width:700px) { .composition-section { padding:24px; }.composition-content { grid-template-columns:1fr; gap:18px; }.composition-content canvas { margin:auto; }.composition-controls { grid-template-columns:1fr; }.composition-controls .quick-add-form { grid-template-columns:1fr 88px auto; } }
@media (max-width:450px) { .composition-controls .quick-add-form { grid-template-columns:1fr 78px; }.composition-controls .quick-add-form button { grid-column:span 2; min-height:38px; } }

/* Free movement must not alter the dashboard's page geometry or nudge cards. */
html { overflow-y:scroll; scrollbar-gutter:stable both-edges; }
.dashboard.free-layout { width:min(1400px,94vw); }
.weather-section:hover,
.events-section:hover,
.status-section:hover { transform:none; }

/* Free positioning should not switch the outer dashboard from grid to block.
   Keeping its original formatting context prevents the first drag/reset from
   nudging the whole page while the individual panels become absolute. */
.dashboard.free-layout { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; margin:28px auto; }

/* Day Composition stays deliberately clear behind its actual data. */
.composition-section { background:rgba(0,0,0,.25); }
.composition-breakdown { gap:8px; border-top:0; }
.composition-row { min-height:40px; border-bottom:0; }
.composition-controls { border-top:0; }
.composition-entry { border-bottom:0; }

/* Panels retain wheel scrolling when needed, but never expose a visual scrollbar. */
* { scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar { width:0; height:0; }
.dashboard.free-layout > [data-layout-id] { overflow-x:hidden; overflow-y:auto; }
.dashboard > #week-modal.active .week-grid { display:grid; min-height:230px; }
.dashboard > #week-modal .week-day { display:block; color:#f5f5f5; border-color:color-mix(in srgb,var(--system-accent,#79c7ff) 34%,transparent); }
.dashboard > #week-modal .week-day h3 { color:var(--system-accent,#79c7ff); }
.dashboard > #week-modal .week-empty { color:#f5f5f5; opacity:.58; }
.dashboard > #week-modal .week-grid { display:grid!important; visibility:visible!important; opacity:1!important; }
.complete-event { opacity:0; pointer-events:none; }
.event:hover .complete-event { opacity:.7; pointer-events:auto; }
.complete-event:hover { opacity:1!important; }

/* The feature guide is a readable popup reference, using the same quiet
   dashboard-card language rather than a separate visual system. */
.features-modal-content { width:min(1080px,94vw); max-height:min(82vh,900px); overflow-y:auto; }
.features-intro { margin:0 0 22px; font-size:11px; line-height:1.55; letter-spacing:1px; opacity:.72; }
.features-guide { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.features-group { padding:16px; border-left:2px solid var(--system-accent,#79c7ff); background:rgba(255,255,255,.025); }
.features-group h3 { margin:0 0 12px; color:var(--system-accent,#79c7ff); font-size:10px; letter-spacing:2px; }
.features-list { display:grid; gap:10px; }.features-item { display:grid; gap:4px; }.features-item strong { font-size:10px; letter-spacing:1px; }.features-item span { font-size:10px; line-height:1.45; letter-spacing:.45px; opacity:.73; }
@media (max-width:700px) { .features-guide { grid-template-columns:1fr; }.features-modal-content { max-height:88vh; } }

/* Week is a self-contained popup: a readable seven-day view, without the
   docked-panel sizing rules or scanline background. */
#week-modal.active .week-modal-content { width:min(1180px,94vw); max-height:84vh; overflow-y:auto; background:#0b0b10; }
#week-modal .week-grid { display:grid!important; grid-template-columns:repeat(7,minmax(120px,1fr)); gap:12px; min-height:0!important; visibility:visible!important; opacity:1!important; }
#week-modal .week-day { display:block; min-height:210px; padding:14px; color:#f5f5f5; border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 38%,transparent); background:rgba(255,255,255,.025); }
#week-modal .week-day h3 { color:var(--system-accent,#79c7ff); } #week-modal .week-empty { color:#f5f5f5; opacity:.58; }
#week-modal .week-event { color:#f5f5f5; } #week-modal .week-event b { color:var(--system-accent,#79c7ff); }
.event-modal.active:not(.docked-system-panel) .features-modal-content { background:#000; }
@media (max-width:850px) { #week-modal .week-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #week-modal .week-day { min-height:145px; } }
@media (max-width:480px) { #week-modal .week-grid { grid-template-columns:1fr; } }

/* On-demand panels are designed to sit over the dashboard: opaque enough to
   remain readable, while retaining only the existing accent border. */
.dashboard > .docked-system-panel .event-modal-content { background:rgba(0,0,0,.8); }
.dashboard.free-layout .layout-controls { bottom:auto; }

/* A quieter task list keeps current work first and completed work out of the way. */
.productivity-section .check-item { align-items:center; gap:12px; min-height:42px; padding:10px 0; }
.productivity-section .check-item label { flex:1; min-width:0; }.productivity-section .check-item label span { overflow-wrap:anywhere; }
.productivity-section .check-item.done { opacity:.58; }.productivity-section .check-item button { opacity:0; }.productivity-section .check-item:hover button { opacity:.8; }
#clear-completed-tasks { display:none; } .productivity-section:has(.check-item.done) #clear-completed-tasks { display:block; }
.layout-controls-hidden { display:none!important; }

/* ==============================
   V6 DESIGN PRESETS
   Original PDash intentionally adds no override, preserving the existing
   time-cycle visuals exactly. Other presets share a compact variable layer.
   ============================== */
body[data-design-preset="midnight"],
body[data-design-preset="aurora"],
body[data-design-preset="solaris"],
body[data-design-preset="blueprint"],
body[data-design-preset="custom"] {
    --design-panel:rgba(5,7,11,.80);
    --design-panel-edge:rgba(255,255,255,.18);
    --design-text:#f4f7f8;
    --design-muted:#afbac1;
    color:var(--design-text);
}
body[data-design-preset="midnight"] { background:radial-gradient(circle at 50% -20%,#18322b 0%,#0b1110 42%,#030504 100%) !important; }
body[data-design-preset="aurora"] { background:radial-gradient(ellipse at 18% 18%,rgba(47,226,185,.34),transparent 38%),radial-gradient(ellipse at 80% 12%,rgba(128,84,255,.34),transparent 42%),linear-gradient(125deg,#07151e,#0c1027 48%,#170d29) !important; background-size:150% 150%; animation:design-drift 18s ease-in-out infinite alternate; }
body[data-design-preset="solaris"] { background:radial-gradient(circle at 50% -10%,rgba(255,183,78,.48),transparent 36%),linear-gradient(145deg,#2a1620,#20100d 48%,#080608) !important; }
body[data-design-preset="blueprint"] { background:linear-gradient(rgba(88,185,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(88,185,255,.07) 1px,transparent 1px),radial-gradient(circle at 50% 0%,#152b46,#07111f 54%,#03070c) !important; background-size:32px 32px,32px 32px,auto; }
body[data-design-preset="sakura"] { background:radial-gradient(circle at 50% -10%,rgba(255,213,226,.38),transparent 34%),linear-gradient(145deg,#351b36 0%,#1a142c 48%,#090811 100%) !important; }
body[data-design-preset="japan"] { background:radial-gradient(circle at 72% 22%,rgba(255,116,106,.55) 0 7%,transparent 7.5%),linear-gradient(165deg,transparent 0 53%,rgba(13,20,40,.9) 53.5% 58%,rgba(5,8,17,.98) 58%),linear-gradient(145deg,#42213b,#182143 47%,#080b16) !important; }
body[data-design-preset="custom"] { background:linear-gradient(rgb(0 0 0 / var(--custom-background-dimming,75%)),rgb(0 0 0 / var(--custom-background-dimming,75%))),var(--custom-background-image) center/cover fixed !important; }

body[data-design-preset="midnight"].early-morning { --system-accent:#83d6b5; } body[data-design-preset="midnight"].morning { --system-accent:#a2e5c2; } body[data-design-preset="midnight"].lunch { --system-accent:#d7df8d; } body[data-design-preset="midnight"].afternoon { --system-accent:#d8ad74; } body[data-design-preset="midnight"].evening { --system-accent:#d5828b; } body[data-design-preset="midnight"].night { --system-accent:#9ab7aa; }
body[data-design-preset="aurora"].early-morning { --system-accent:#7af1cb; } body[data-design-preset="aurora"].morning { --system-accent:#70dfff; } body[data-design-preset="aurora"].lunch { --system-accent:#d7adff; } body[data-design-preset="aurora"].afternoon { --system-accent:#ff9ee5; } body[data-design-preset="aurora"].evening { --system-accent:#b689ff; } body[data-design-preset="aurora"].night { --system-accent:#76b7ff; }
body[data-design-preset="solaris"].early-morning { --system-accent:#ffd18a; } body[data-design-preset="solaris"].morning { --system-accent:#ffe1a8; } body[data-design-preset="solaris"].lunch { --system-accent:#fff0a4; } body[data-design-preset="solaris"].afternoon { --system-accent:#ffb35c; } body[data-design-preset="solaris"].evening { --system-accent:#ff7965; } body[data-design-preset="solaris"].night { --system-accent:#d6a1db; }
body[data-design-preset="blueprint"].early-morning { --system-accent:#74d8e8; } body[data-design-preset="blueprint"].morning { --system-accent:#7ac7ff; } body[data-design-preset="blueprint"].lunch { --system-accent:#9dc7ff; } body[data-design-preset="blueprint"].afternoon { --system-accent:#65a8e6; } body[data-design-preset="blueprint"].evening { --system-accent:#9787e9; } body[data-design-preset="blueprint"].night { --system-accent:#65b5d7; }
body[data-design-preset="sakura"].early-morning { --system-accent:#ffd4e3; } body[data-design-preset="sakura"].morning { --system-accent:#ffb4d0; } body[data-design-preset="sakura"].lunch { --system-accent:#f7b0d9; } body[data-design-preset="sakura"].afternoon { --system-accent:#ef8fbc; } body[data-design-preset="sakura"].evening { --system-accent:#dc719e; } body[data-design-preset="sakura"].night { --system-accent:#c99ad7; }
body[data-design-preset="japan"].early-morning { --system-accent:#ffc8c0; } body[data-design-preset="japan"].morning { --system-accent:#ffd2c8; } body[data-design-preset="japan"].lunch { --system-accent:#ffb99c; } body[data-design-preset="japan"].afternoon { --system-accent:#ee8c75; } body[data-design-preset="japan"].evening { --system-accent:#e45f65; } body[data-design-preset="japan"].night { --system-accent:#b4b8ef; }
body[data-design-preset="custom"] { --system-accent:#d9efff; }

body[data-design-preset]:not([data-design-preset="original"]) .dashboard > section,
body[data-design-preset]:not([data-design-preset="original"]) .dashboard > .docked-system-panel .event-modal-content,
body[data-design-preset]:not([data-design-preset="original"]) .event-modal.active:not(.docked-system-panel) .event-modal-content {
    background:var(--design-panel) !important;
    border-color:var(--design-panel-edge);
    border-left-color:var(--system-accent);
    box-shadow:0 14px 38px rgba(0,0,0,.36);
    backdrop-filter:blur(14px);
}
body[data-design-preset]:not([data-design-preset="original"]) .dashboard h2,
body[data-design-preset]:not([data-design-preset="original"]) .time-period,
body[data-design-preset]:not([data-design-preset="original"]) .event-modal-header span { color:var(--system-accent) !important; }
body[data-design-preset]:not([data-design-preset="original"]) .dashboard .date-section,
body[data-design-preset]:not([data-design-preset="original"]) .dashboard .big-event-section { color:var(--system-accent); }
/* The clock/date header keeps the original open, background-free treatment in every new preset. */
body[data-design-preset]:not([data-design-preset="original"]) .dashboard > .date-section { background:transparent !important; box-shadow:none; backdrop-filter:none; }
body[data-design-preset] .event-modal.active.floating-tool .event-modal-content { background:rgba(0,0,0,.9) !important; }

.design-preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0 14px; }
.design-preset-grid button { min-height:60px; padding:9px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.035); color:#f5f5f5; font:inherit; text-align:left; cursor:pointer; }
.design-preset-grid button:nth-child(1) { background:linear-gradient(135deg,#15161c,#333026); }.design-preset-grid button:nth-child(2) { background:linear-gradient(135deg,#07110e,#1e382c); }.design-preset-grid button:nth-child(3) { background:linear-gradient(135deg,#0b1725,#2d1452); }.design-preset-grid button:nth-child(4) { background:linear-gradient(135deg,#3c1d13,#6b331a); }.design-preset-grid button:nth-child(5) { background:linear-gradient(135deg,#071324,#1a4169); }.design-preset-grid button:nth-child(6) { background:linear-gradient(135deg,#4a1c3e,#c77399); }.design-preset-grid button:nth-child(7) { background:linear-gradient(135deg,#241530,#c35a63); }.design-preset-grid button:nth-child(8) { background:linear-gradient(135deg,#171717,#454545); }
.design-preset-grid button.active { border-color:var(--system-accent,#79c7ff); box-shadow:inset 0 0 0 1px var(--system-accent,#79c7ff); }
.design-preset-grid button span,.design-preset-grid button small { display:block; }.design-preset-grid button span { font-size:10px; letter-spacing:1.5px; }.design-preset-grid button small { margin-top:4px; font-size:9px; opacity:.68; }
.design-upload { display:block; margin:8px 0 14px; padding:11px; border:1px dashed color-mix(in srgb,var(--system-accent,#79c7ff) 60%,transparent); color:var(--system-accent,#79c7ff); font-size:10px; letter-spacing:1px; text-align:center; cursor:pointer; }
#design-background-overlay { width:100%; margin:7px 0 14px; accent-color:var(--system-accent,#79c7ff); }
@keyframes design-drift { from { background-position:0% 0%; } to { background-position:100% 100%; } }
body[data-design-preset="sakura"]::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.78; background:radial-gradient(ellipse at 12% -5%,#ffd2e2 0 5px,transparent 6px),radial-gradient(ellipse at 35% -12%,#ff9ec4 0 4px,transparent 5px),radial-gradient(ellipse at 57% -7%,#ffe2ee 0 6px,transparent 7px),radial-gradient(ellipse at 79% -14%,#f49ac2 0 4px,transparent 5px),radial-gradient(ellipse at 94% -4%,#ffd0e5 0 5px,transparent 6px); background-size:210px 280px,260px 360px,310px 300px,230px 390px,340px 320px; animation:sakura-petals 11s linear infinite; }
@keyframes sakura-petals { from { background-position:0 -80px,80px -170px,140px -110px,30px -220px,170px -60px; } to { background-position:90px calc(100vh + 80px),-20px calc(100vh + 120px),240px calc(100vh + 100px),-80px calc(100vh + 160px),290px calc(100vh + 90px); } }
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
@media (max-width:480px) { .design-preset-grid { grid-template-columns:1fr; } }

/* Skills actions follow the same compact outlined control language as the
   rest of the dashboard, rather than browser-default form buttons. */
.skill-add-form button {
    min-height:40px;
    padding:9px 12px;
    border:1px solid color-mix(in srgb,var(--system-accent,#79c7ff) 70%,transparent);
    background:rgba(255,255,255,.025);
    color:var(--system-accent,#79c7ff);
    font:inherit;
    font-size:10px;
    letter-spacing:1.2px;
    cursor:pointer;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.skill-add-form button:hover,.skill-add-form button:focus-visible {
    background:var(--system-accent,#79c7ff);
    color:#08080c;
    box-shadow:0 0 16px color-mix(in srgb,var(--system-accent,#79c7ff) 28%,transparent);
    outline:0;
}
.skill-add-form #open-skills-settings { border-style:dashed; }

/* Command center: centre the panel inside narrow phone viewports and keep
   its input and results aligned with its actual content width. */
@media (max-width:760px) {
    .command-palette { align-items:center; padding:12px; }
    .command-panel { width:min(100%,560px); max-height:calc(100dvh - 24px); padding:0; }
    .command-title { padding:18px 16px 8px; font-size:12px; letter-spacing:2px; }
    .command-title > span:last-child { font-size:8px; }
    .command-subtitle { padding:0 16px 12px; font-size:8px; letter-spacing:1.4px; }
    .command-panel input { width:calc(100% - 32px); min-height:46px; margin:0 16px 12px; padding:12px; }
    .command-results { padding:0 7px; }
    .command-results button { min-height:46px; padding:10px; }
    .command-footer { padding:11px 16px; font-size:7px; letter-spacing:.7px; }
}

/* The settings dialog owns its scroll area. Wheel input over it must never
   continue through to the dashboard behind the overlay. */
#settings-modal.active { overscroll-behavior:contain; }
#settings-modal .settings-modal-content {
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    overscroll-behavior:contain;
}
@media (max-width:760px) {
    #settings-modal .settings-modal-content { max-height:calc(100dvh - 24px); }
}

/* ==============================
   V7.1 MOBILE FOUNDATION
   A saved desktop free-layout becomes a simple, touch-first reading flow.
   ============================== */
@media (max-width:760px) {
    html { scrollbar-gutter:auto; }
    body { display:block; min-width:0; padding:0; }
    .dashboard,
    .dashboard.free-layout {
        display:grid;
        width:100%;
        min-width:0;
        min-height:0 !important;
        margin:0;
        padding:12px;
        grid-template-columns:minmax(0,1fr);
        gap:12px;
    }
    .dashboard > [data-layout-id],
    .dashboard.free-layout > [data-layout-id] {
        position:static !important;
        display:block;
        width:auto !important;
        min-width:0;
        height:auto !important;
        min-height:0 !important;
        margin:0;
        grid-column:1 / -1 !important;
        grid-row:auto !important;
        transform:none !important;
        overflow:visible !important;
        touch-action:pan-y;
    }
    .dashboard > [data-layout-id] { padding:22px; }
    .dashboard > .date-section { padding:24px 12px 28px; }
    .dashboard > .date-section .time-period { margin-bottom:16px; letter-spacing:5px; }
    .dashboard > .date-section .day { font-size:clamp(34px,12vw,54px); letter-spacing:6px; }
    .dashboard > .date-section .date { font-size:clamp(19px,7vw,31px); letter-spacing:3px; }
    .dashboard > .date-section .time { font-size:22px; letter-spacing:3px; }
    .dashboard.free-layout .layout-controls,
    .layout-controls {
        position:static !important;
        grid-column:1 / -1;
        width:100%;
        min-height:0;
        margin:0;
        padding:10px;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
    .layout-shortcuts { display:none; }
    #layout-mode-status { flex:1 1 160px; line-height:1.35; }
    .layout-controls button { min-height:40px; padding:8px 10px; }
    .dashboard button,
    .event-modal button,
    .dashboard input,
    .dashboard select,
    .dashboard textarea,
    .event-modal input,
    .event-modal select,
    .event-modal textarea { min-height:44px; font-size:16px !important; }
    .dashboard h2 { font-size:18px !important; letter-spacing:3px; }
    .skill-add-form,
    .composition-controls,
    .composition-controls .quick-add-form { grid-template-columns:1fr !important; }
    .skill-add-form button,
    .composition-controls .quick-add-form button { grid-column:auto; }
    .skills-star-wrap { width:min(100%,330px); }
    .skill-tip { font-size:8px; letter-spacing:.8px; }
    .skill-guide-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
    .skill-guide-tabs button { flex:0 0 auto; }
    .event-modal.active:not(.docked-system-panel) { padding:0; align-items:flex-start; }
    .event-modal.active:not(.docked-system-panel) .event-modal-content,
    .event-modal.active.floating-tool .event-modal-content {
        position:fixed;
        top:12px !important;
        left:12px !important;
        width:calc(100vw - 24px) !important;
        max-width:calc(100vw - 24px) !important;
        max-height:calc(100dvh - 24px);
        margin:0;
        padding:18px;
        overflow:auto;
    }
    .event-modal-header { gap:12px; }
    .event-modal-header > span { min-width:0; font-size:12px; letter-spacing:1.5px; }
    .modal-close { flex:0 0 40px; }
    .features-guide,
    .tests-list,
    .diary-entry-list { grid-template-columns:1fr; }
    .diary-workspace { min-height:0; }
    .calculator-keypad button { min-height:52px; }
}

@media (max-width:760px) {
    .dashboard > .events-section,
    .dashboard.free-layout > .events-section { display:flex; height:min(520px, 70dvh) !important; }
}

@media (max-width:760px) {
    .assistant-section h2 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; line-height:1.35; }
    .assistant-section .assistant-status { margin-left:0; font-size:8px; letter-spacing:1px; }
    .assistant-section .assistant-clear { margin:0 0 0 auto; }
    .assistant-section .assistant-messages { width:100%; height:180px !important; padding-right:0; }
    .assistant-section .assistant-message { box-sizing:border-box; width:100%; max-width:100%; overflow-wrap:anywhere; word-break:normal; text-align:left; font-size:12px !important; line-height:1.55; letter-spacing:.7px; }
    .assistant-section .assistant-message.user { margin-left:0; text-align:left; border-right:0; border-left:2px solid currentColor; }
    .assistant-section .quick-add-form { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; }
    .composition-row { align-items:flex-start; gap:8px; }
    .composition-breakdown { width:100%; min-width:0; }
    .dashboard > .composition-section .composition-content { grid-template-columns:1fr !important; gap:18px; }
    .dashboard > .composition-section #composition-chart { width:min(260px,100%); height:auto; margin:0 auto; }
    .composition-row { display:grid; grid-template-columns:minmax(0,1fr) max-content; width:100%; }
    .composition-row span { display:grid; grid-template-columns:9px minmax(0,1fr); align-items:start; min-width:0; line-height:1.4; white-space:normal; }
    .composition-row span em { min-width:0; overflow-wrap:anywhere; font-style:normal; }
    .composition-row strong { flex:0 0 auto; padding-top:1px; white-space:nowrap; font-size:11px; }
}