/* ════════════════════════════════════════
 FATAPLUS OS v2 — DESIGN SYSTEM
 ════════════════════════════════════════ */

:root {
 --eclipse: #0C0F0C;
 --lime: #9FE870;
 --forest: #1B3300;
 --mint: #E2F6D5;
 --stone: #EBEBE5;
 --sunlight: #FFCD91;
 --fg: #0C0F0C;
 --muted: #6B7268;
 --border: rgba(12,15,12,0.10);
 --radius-pill: 9999px;
 --radius-card: 20px;
 --radius-sm: 12px;

 --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
 --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
 --font-mono: 'JetBrains Mono', ui-monospace, monospace;

 --menu-h: 32px;
 --dock-h: 74px;
 --win-radius: 12px;

 --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
 --ease-out: cubic-bezier(0.55,0,0.95,0.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-feature-settings: "calt" 1; -webkit-font-smoothing: antialiased; }
body {
 font-family: var(--font-body);
 background: #000;
 color: var(--fg);
 overflow: hidden;
 height: 100vh;
 width: 100vw;
 user-select: none;
}

.hidden { display: none !important; }

/* ═══════════════════════════════════
 LOGIN SCREEN
 ═══════════════════════════════════ */
.login-screen {
 position: fixed;
 inset: 0;
 z-index: 999999;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: opacity 0.6s ease, visibility 0.6s ease;
}
.login-screen.fade-out {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}

.login-bg {
 position: absolute;
 inset: 0;
 background:
 radial-gradient(ellipse at 30% 50%, rgba(159,232,112,0.10) 0%, transparent 50%),
 radial-gradient(ellipse at 70% 50%, rgba(27,51,0,0.15) 0%, transparent 50%),
 linear-gradient(170deg, #0a0d0a 0%, #0C0F0C 50%, #111911 100%);
 z-index: -1;
}

.login-card {
 background: rgba(18,20,18,0.85);
 backdrop-filter: blur(40px) saturate(1.4);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: 24px;
 padding: 48px 40px 36px;
 width: 380px;
 text-align: center;
 box-shadow:
 0 24px 80px rgba(0,0,0,0.6),
 0 0 0 1px rgba(255,255,255,0.04) inset,
 0 2px 0 rgba(159,232,112,0.1) inset;
 animation: loginSlideUp 0.7s var(--ease-out) both;
}

@keyframes loginSlideUp {
 from { opacity: 0; transform: translateY(30px) scale(0.97); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-logo {
 width: 56px; height: 64px;
 margin: 0 auto 16px;
}
.login-logo svg { width: 100%; height: 100%; }

.login-title {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: 28px;
 color: #fff;
 letter-spacing: -0.03em;
}
.login-accent {
 color: var(--lime);
 font-style: italic;
}

.login-subtitle {
 font-size: 13px;
 color: rgba(255,255,255,0.4);
 margin-top: 4px;
 font-weight: 500;
 margin-bottom: 28px;
}

.login-form { display: flex; flex-direction: column; gap: 12px; }

.login-field {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 16px;
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.06);
 border-radius: 12px;
 transition: border-color 0.2s;
}
.login-field:focus-within {
 border-color: rgba(159,232,112,0.35);
}
.login-icon {
 font-size: 16px;
 color: rgba(255,255,255,0.35);
 flex-shrink: 0;
}
.login-field input {
 flex: 1;
 background: none;
 border: none;
 outline: none;
 color: #fff;
 font-size: 14px;
 font-family: var(--font-body);
}
.login-field input::placeholder { color: rgba(255,255,255,0.25); }

.login-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 14px 24px;
 margin-top: 8px;
 background: var(--lime);
 color: var(--forest);
 border: none;
 border-radius: var(--radius-pill);
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 800;
 cursor: pointer;
 transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
 letter-spacing: 0.01em;
}
.login-btn:hover {
 transform: scale(1.03);
 box-shadow: 0 4px 20px rgba(159,232,112,0.3);
}
.login-btn:active { transform: scale(0.98); }

.login-footer {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 margin-top: 20px;
 padding-top: 16px;
 border-top: 0.5px solid rgba(255,255,255,0.06);
}
.login-mode-label {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: rgba(255,255,255,0.3);
}

.login-mode-toggle {
 display: flex;
 background: rgba(255,255,255,0.05);
 border-radius: 8px;
 padding: 2px;
 gap: 2px;
}
.lm-btn {
 font-size: 11px;
 font-weight: 700;
 padding: 5px 14px;
 border-radius: 6px;
 border: none;
 cursor: pointer;
 color: rgba(255,255,255,0.4);
 background: transparent;
 transition: all 0.2s;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}
.lm-btn.active {
 background: var(--lime);
 color: var(--forest);
}

.login-copy {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 font-size: 11px;
 color: rgba(255,255,255,0.15);
 font-weight: 600;
}

/* ═══ DESKTOP ═══ */
#desktop {
 position: relative;
 width: 100vw;
 height: 100vh;
 background:
 radial-gradient(ellipse at 20% 80%, rgba(159,232,112,0.08) 0%, transparent 50%),
 radial-gradient(ellipse at 80% 20%, rgba(27,51,0,0.12) 0%, transparent 50%),
 linear-gradient(160deg, #0a0d0a 0%, #0C0F0C 40%, #111911 100%);
 overflow: hidden;
}

#desktop.client-view {
 background:
 radial-gradient(ellipse at 70% 30%, rgba(159,232,112,0.06) 0%, transparent 45%),
 radial-gradient(ellipse at 30% 70%, rgba(255,205,145,0.04) 0%, transparent 45%),
 linear-gradient(180deg, #0e110e 0%, #0C0F0C 50%, #0a0f0a 100%);
}

/* ═══ MENU BAR ═══ */
.menubar {
 position: fixed;
 top: 0; left: 0; right: 0;
 height: var(--menu-h);
 background: rgba(12,15,12,0.75);
 backdrop-filter: blur(24px) saturate(1.4);
 -webkit-backdrop-filter: blur(24px) saturate(1.4);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 14px;
 z-index: 10000;
 border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.mb-left, .mb-right {
 display: flex;
 align-items: center;
 gap: 2px;
}
.mb-item {
 font-size: 13px;
 font-weight: 600;
 color: rgba(255,255,255,0.85);
 padding: 2px 10px;
 border-radius: 6px;
 cursor: default;
 transition: background 0.12s, color 0.12s;
}
.mb-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.mb-item.apple-logo { font-size: 16px; padding: 2px 10px; }
.mb-spacer { width: 1px; height: 14px; background: rgba(255,255,255,0.12); margin: 0 8px; }
.mb-brand {
 display: flex; align-items: center; gap: 6px;
 font-weight: 800; font-size: 13px; letter-spacing: -0.02em;
 color: var(--lime);
}
.mb-brand svg { width: 16px; height: 18px; }

.view-toggle {
 display: flex;
 align-items: center;
 background: rgba(255,255,255,0.06);
 border-radius: 8px;
 padding: 2px;
 gap: 2px;
 margin-left: 12px;
}
.vt-btn {
 font-size: 11px;
 font-weight: 700;
 padding: 4px 12px;
 border-radius: 6px;
 border: none;
 cursor: pointer;
 transition: all 0.2s;
 color: rgba(255,255,255,0.5);
 background: transparent;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}
.vt-btn.active {
 background: var(--lime);
 color: var(--forest);
 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.tray-icon {
 width: 18px; height: 18px;
 display: flex; align-items: center; justify-content: center;
 color: rgba(255,255,255,0.7);
 font-size: 13px;
 padding: 2px 4px;
 border-radius: 5px;
 cursor: pointer;
 position: relative;
}
.tray-icon:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tray-badge {
 position: absolute; top: -1px; right: -2px;
 min-width: 14px; height: 14px;
 background: #ff5f57; color: #fff;
 border-radius: 7px; font-size: 9px; font-weight: 800;
 display: flex; align-items: center; justify-content: center;
 padding: 0 3px; border: 1.5px solid rgba(12,15,12,0.9);
}
.tray-clock {
 font-size: 13px;
 font-weight: 700;
 color: rgba(255,255,255,0.6);
 padding: 2px 8px;
}

/* ═══ DESKTOP ICONS ═══ */
.desktop-icons {
 position: absolute;
 top: calc(var(--menu-h) + 16px);
 right: 20px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 z-index: 1;
}
.dicon {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 width: 80px;
 padding: 8px 4px;
 border-radius: 10px;
 cursor: pointer;
 transition: background 0.12s;
}
.dicon:hover { background: rgba(255,255,255,0.07); }
.dicon.selected { background: rgba(159,232,112,0.18); }
.dicon-icon {
 width: 48px; height: 48px;
 border-radius: 12px;
 display: flex; align-items: center; justify-content: center;
 font-size: 22px;
 flex-shrink: 0;
}
.dicon-label {
 font-size: 11px;
 font-weight: 600;
 color: #fff;
 text-align: center;
 text-shadow: 0 1px 3px rgba(0,0,0,0.8);
 line-height: 1.2;
 max-width: 72px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

/* ═══ DOCK ═══ */
.dock {
 position: fixed;
 bottom: 8px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 align-items: flex-end;
 gap: 5px;
 padding: 4px 10px;
 background: rgba(255,255,255,0.08);
 backdrop-filter: blur(24px) saturate(1.4);
 -webkit-backdrop-filter: blur(24px) saturate(1.4);
 border: 0.5px solid rgba(255,255,255,0.12);
 border-radius: 18px;
 z-index: 10000;
 transition: transform 0.25s var(--ease-spring);
}
.dock-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-end;
 cursor: pointer;
 transition: transform 0.2s var(--ease-spring);
 padding: 4px 2px 2px;
 border-radius: 12px;
 position: relative;
}
.dock-item:hover { transform: translateY(-8px) scale(1.18); }
.dock-item:active { transform: translateY(-2px) scale(1.05); }
.dock-icon {
 width: 46px; height: 46px;
 border-radius: 11px;
 display: flex; align-items: center; justify-content: center;
 font-size: 22px;
 transition: box-shadow 0.2s;
}
.dock-item:hover .dock-icon {
 box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
}
.dock-dot {
 position: absolute;
 bottom: 1px;
 width: 4px; height: 4px;
 border-radius: 50%;
 background: rgba(255,255,255,0.7);
 opacity: 0;
 transition: opacity 0.2s;
}
.dock-item.open .dock-dot { opacity: 1; }
.dock-sep {
 width: 0.5px;
 height: 36px;
 background: rgba(255,255,255,0.15);
 margin: 0 4px;
 align-self: center;
}

/* ═══ WINDOWS ═══ */
.window {
 position: absolute;
 min-width: 360px;
 min-height: 240px;
 background: rgba(28,30,28,0.92);
 backdrop-filter: blur(40px) saturate(1.3);
 -webkit-backdrop-filter: blur(40px) saturate(1.3);
 border: 0.5px solid rgba(255,255,255,0.1);
 border-radius: var(--win-radius);
 box-shadow:
 0 20px 60px rgba(0,0,0,0.5),
 0 0 0 0.5px rgba(255,255,255,0.05),
 inset 0 1px 0 rgba(255,255,255,0.06);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 opacity: 0;
 transform: scale(0.92);
 transition: opacity 0.22s ease, transform 0.22s var(--ease-spring);
}
.window.visible {
 opacity: 1;
 transform: scale(1);
}
.window.minimizing {
 opacity: 0;
 transform: scale(0.5) translateY(100px);
 transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
}
.window.maximized {
 border-radius: 0;
 top: var(--menu-h) !important;
 left: 0 !important;
 width: 100vw !important;
 height: calc(100vh - var(--menu-h) - var(--dock-h)) !important;
}

.win-titlebar {
 display: flex;
 align-items: center;
 padding: 10px 14px;
 background: rgba(255,255,255,0.03);
 border-bottom: 0.5px solid rgba(255,255,255,0.05);
 flex-shrink: 0;
 cursor: grab;
 -webkit-app-region: drag;
}
.win-titlebar:active { cursor: grabbing; }
.win-dots {
 display: flex;
 gap: 7px;
 margin-right: 14px;
 flex-shrink: 0;
}
.wdot {
 width: 12px; height: 12px;
 border-radius: 50%;
 cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 font-size: 8px;
 color: transparent;
 transition: color 0.12s;
}
.wdot:hover { color: rgba(0,0,0,0.6); }
.wdot-close { background: #ff5f57; }
.wdot-minimize { background: #febc2e; }
.wdot-maximize { background: #28c840; }
.win-title {
 font-size: 13px;
 font-weight: 600;
 color: rgba(255,255,255,0.85);
 flex: 1;
 text-align: center;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 pointer-events: none;
}
.win-toolbar {
 display: flex;
 gap: 8px;
 flex-shrink: 0;
}
.win-tb-btn {
 width: 20px; height: 20px;
 border-radius: 5px;
 display: flex; align-items: center; justify-content: center;
 color: rgba(255,255,255,0.4);
 cursor: pointer;
 font-size: 11px;
 transition: background 0.12s, color 0.12s;
}
.win-tb-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }

.win-body {
 flex: 1;
 overflow: auto;
 position: relative;
 background: rgba(18,20,18,0.6);
}
.win-body::-webkit-scrollbar { width: 6px; }
.win-body::-webkit-scrollbar-track { background: transparent; }
.win-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

.resize-handle {
 position: absolute;
 bottom: 0; right: 0;
 width: 16px; height: 16px;
 cursor: nwse-resize;
}

/* ═══ NOTIFICATION BADGE ON DOCK ═══ */
.notif-badge {
 position: absolute; top: -2px; right: -2px;
 min-width: 16px; height: 16px;
 background: #ff5f57; color: #fff;
 border-radius: 8px; font-size: 9px; font-weight: 800;
 display: flex; align-items: center; justify-content: center;
 padding: 0 4px; border: 1.5px solid rgba(20,22,20,0.9);
}

/* ═══ SPOTLIGHT / SEARCH ═══ */
.spotlight-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.5);
 backdrop-filter: blur(8px);
 z-index: 100001;
 display: none;
 align-items: flex-start;
 justify-content: center;
 padding-top: 18vh;
}
.spotlight-overlay.show { display: flex; animation: fadeIn 0.15s ease; }

.spotlight-box {
 width: 580px;
 background: rgba(28,30,28,0.95);
 backdrop-filter: blur(40px);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 24px 80px rgba(0,0,0,0.5);
 animation: spotlightIn 0.2s var(--ease-spring);
}
@keyframes spotlightIn {
 from { opacity: 0; transform: translateY(-10px) scale(0.98); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}

.spotlight-input-wrap {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 14px 18px;
 border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.spotlight-icon { font-size: 18px; color: rgba(255,255,255,0.3); }
.spotlight-input {
 flex: 1;
 background: none;
 border: none;
 outline: none;
 color: #fff;
 font-size: 16px;
 font-family: var(--font-body);
}
.spotlight-input::placeholder { color: rgba(255,255,255,0.25); }
.spotlight-hint {
 font-size: 11px;
 font-weight: 700;
 color: rgba(255,255,255,0.2);
 padding: 4px 8px;
 border: 0.5px solid rgba(255,255,255,0.1);
 border-radius: 6px;
 font-family: var(--font-mono);
}

.spotlight-results {
 max-height: 320px;
 overflow-y: auto;
 padding: 6px;
}
.spotlight-results::-webkit-scrollbar { width: 4px; }
.spotlight-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sr-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 12px;
 border-radius: 10px;
 cursor: pointer;
 transition: background 0.1s;
}
.sr-item:hover, .sr-item.selected {
 background: rgba(159,232,112,0.1);
}
.sr-item.selected { background: rgba(159,232,112,0.15); }
.sr-icon {
 width: 32px; height: 32px;
 border-radius: 8px;
 display: flex; align-items: center; justify-content: center;
 font-size: 16px;
 flex-shrink: 0;
}
.sr-info { flex: 1; }
.sr-name {
 font-size: 13px;
 font-weight: 700;
 color: rgba(255,255,255,0.9);
}
.sr-desc {
 font-size: 11px;
 color: rgba(255,255,255,0.35);
}
.sr-shortcut {
 font-size: 10px;
 font-weight: 700;
 color: rgba(255,255,255,0.2);
 font-family: var(--font-mono);
 padding: 2px 6px;
 border: 0.5px solid rgba(255,255,255,0.08);
 border-radius: 4px;
}

/* ═══ NOTIFICATIONS PANEL ═══ */
.notif-panel {
 position: fixed;
 top: var(--menu-h);
 right: 8px;
 width: 340px;
 max-height: calc(100vh - var(--menu-h) - var(--dock-h) - 20px);
 background: rgba(28,30,28,0.95);
 backdrop-filter: blur(40px);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 14px;
 z-index: 100002;
 display: none;
 flex-direction: column;
 overflow: hidden;
 box-shadow: 0 16px 60px rgba(0,0,0,0.5);
 animation: notifSlide 0.2s var(--ease-spring);
}
.notif-panel.show { display: flex; }
@keyframes notifSlide {
 from { opacity: 0; transform: translateX(10px); }
 to { opacity: 1; transform: translateX(0); }
}

.notif-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 18px;
 border-bottom: 0.5px solid rgba(255,255,255,0.06);
 flex-shrink: 0;
}
.notif-header h3 {
 font-size: 14px;
 font-weight: 800;
 color: #fff;
}
.notif-clear {
 font-size: 11px;
 font-weight: 700;
 color: var(--lime);
 background: none;
 border: none;
 cursor: pointer;
}
.notif-clear:hover { text-decoration: underline; }

.notif-list {
 flex: 1;
 overflow-y: auto;
 padding: 8px;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.ni-card {
 display: flex;
 gap: 10px;
 padding: 12px;
 border-radius: 10px;
 cursor: pointer;
 transition: background 0.12s;
 margin-bottom: 4px;
}
.ni-card:hover { background: rgba(255,255,255,0.04); }
.ni-icon {
 width: 34px; height: 34px;
 border-radius: 8px;
 display: flex; align-items: center; justify-content: center;
 font-size: 15px;
 flex-shrink: 0;
}
.ni-body { flex: 1; }
.ni-title {
 font-size: 12px;
 font-weight: 700;
 color: rgba(255,255,255,0.9);
}
.ni-text {
 font-size: 11px;
 color: rgba(255,255,255,0.4);
 margin-top: 2px;
 line-height: 1.4;
}
.ni-time {
 font-size: 10px;
 color: rgba(255,255,255,0.25);
 margin-top: 4px;
}

/* ═══ APP-SPECIFIC STYLES ═══ */

/* ─── Dashboard ─── */
.app-dashboard { padding: 24px; color: #fff; }
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.dash-greeting h1 {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: 32px;
 letter-spacing: -0.03em;
 line-height: 1.1;
 color: #fff;
}
.dash-greeting p {
 font-size: 14px;
 color: rgba(255,255,255,0.45);
 margin-top: 4px;
 font-weight: 500;
}
.dash-avatar {
 width: 44px; height: 44px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--lime), var(--forest));
 display: flex; align-items: center; justify-content: center;
 font-weight: 800; font-size: 16px; color: var(--forest);
 flex-shrink: 0;
}
.dash-stats {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-bottom: 24px;
}
.ds-card {
 background: rgba(255,255,255,0.04);
 border: 0.5px solid rgba(255,255,255,0.06);
 border-radius: var(--radius-sm);
 padding: 18px 20px;
 transition: transform 0.2s, border-color 0.2s;
}
.ds-card:hover {
 transform: translateY(-2px);
 border-color: rgba(159,232,112,0.2);
}
.ds-card-label {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: rgba(255,255,255,0.4);
 margin-bottom: 8px;
}
.ds-card-value {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: 28px;
 color: #fff;
 line-height: 1;
}
.ds-card-value.lime { color: var(--lime); }
.ds-card-change {
 font-size: 11px;
 font-weight: 600;
 margin-top: 6px;
 display: flex; align-items: center; gap: 4px;
}
.ds-card-change.up { color: var(--lime); }
.ds-card-change.down { color: #ff5f57; }

.dash-grid {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 16px;
}
.dash-panel {
 background: rgba(255,255,255,0.03);
 border: 0.5px solid rgba(255,255,255,0.05);
 border-radius: var(--radius-sm);
 overflow: hidden;
}
.dp-header {
 display: flex; justify-content: space-between; align-items: center;
 padding: 14px 18px;
 border-bottom: 0.5px solid rgba(255,255,255,0.05);
}
.dp-title {
 font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.8);
}
.dp-action {
 font-size: 11px; font-weight: 600; color: var(--lime);
 cursor: pointer; text-decoration: none;
}
.dp-action:hover { text-decoration: underline; }

/* Activity list */
.activity-list { padding: 8px 0; }
.al-item {
 display: flex; align-items: center; gap: 12px;
 padding: 10px 18px;
 transition: background 0.12s;
}
.al-item:hover { background: rgba(255,255,255,0.03); }
.al-dot {
 width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.al-dot.green { background: var(--lime); box-shadow: 0 0 6px rgba(159,232,112,0.4); }
.al-dot.orange { background: var(--sunlight); }
.al-dot.blue { background: #5ebaff; }
.al-info { flex: 1; min-width: 0; }
.al-text {
 font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85);
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-sub { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 1px; }
.al-time { font-size: 11px; color: rgba(255,255,255,0.3); flex-shrink: 0; }

/* Progress bars */
.progress-section { padding: 16px 18px; }
.pi-row { margin-bottom: 16px; }
.pi-row:last-child { margin-bottom: 0; }
.pi-label {
 display: flex; justify-content: space-between;
 font-size: 12px; font-weight: 600; margin-bottom: 6px;
 color: rgba(255,255,255,0.7);
}
.pi-bar {
 height: 6px; background: rgba(255,255,255,0.08);
 border-radius: 3px; overflow: hidden;
}
.pi-fill {
 height: 100%; border-radius: 3px;
 transition: width 0.6s ease;
}
.pi-fill.lime { background: linear-gradient(90deg, var(--forest), var(--lime)); }
.pi-fill.orange { background: linear-gradient(90deg, #996000, var(--sunlight)); }
.pi-fill.blue { background: linear-gradient(90deg, #004080, #5ebaff); }

/* ─── Project Board (Kanban) ─── */
.app-board { display: flex; flex-direction: column; height: 100%; }
.board-toolbar {
 display: flex; align-items: center; justify-content: space-between;
 padding: 12px 20px;
 background: rgba(255,255,255,0.02);
 border-bottom: 0.5px solid rgba(255,255,255,0.05);
 flex-shrink: 0;
}
.bt-title {
 font-size: 15px; font-weight: 800; color: #fff;
 display: flex; align-items: center; gap: 8px;
}
.bt-actions { display: flex; gap: 8px; }
.bt-btn {
 font-size: 12px; font-weight: 700; padding: 6px 14px;
 border-radius: var(--radius-pill); border: none; cursor: pointer;
 transition: transform 0.15s, box-shadow 0.15s;
 font-family: var(--font-body);
}
.bt-btn-primary { background: var(--lime); color: var(--forest); }
.bt-btn-primary:hover { transform: scale(1.05); }
.bt-btn-secondary { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.bt-btn-secondary:hover { background: rgba(255,255,255,0.1); }

.board-columns {
 flex: 1; display: flex; gap: 12px; padding: 16px 20px;
 overflow-x: auto; overflow-y: hidden;
}
.board-columns::-webkit-scrollbar { height: 5px; }
.board-columns::-webkit-scrollbar-track { background: transparent; }
.board-columns::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.bcol {
 min-width: 280px; max-width: 280px;
 display: flex; flex-direction: column;
 flex-shrink: 0;
}
.bcol-header {
 display: flex; align-items: center; justify-content: space-between;
 margin-bottom: 10px; padding: 0 2px;
}
.bcol-name {
 font-size: 12px; font-weight: 800; text-transform: uppercase;
 letter-spacing: 0.06em; color: rgba(255,255,255,0.6);
 display: flex; align-items: center; gap: 6px;
}
.bcol-count {
 font-size: 11px; font-weight: 700;
 padding: 2px 8px; border-radius: 10px;
 background: rgba(255,255,255,0.06);
 color: rgba(255,255,255,0.4);
}
.bcol-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.bcard {
 background: rgba(255,255,255,0.04);
 border: 0.5px solid rgba(255,255,255,0.06);
 border-radius: 10px;
 padding: 14px 16px;
 cursor: pointer;
 transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bcard:hover {
 transform: translateY(-2px);
 border-color: rgba(159,232,112,0.2);
 box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.bcard-tag {
 font-size: 10px; font-weight: 700; text-transform: uppercase;
 letter-spacing: 0.04em; padding: 3px 8px; border-radius: 5px;
 display: inline-block; margin-bottom: 8px;
}
.tag-design { background: rgba(159,232,112,0.15); color: var(--lime); }
.tag-dev { background: rgba(94,186,255,0.15); color: #5ebaff; }
.tag-marketing { background: rgba(255,205,145,0.15); color: var(--sunlight); }
.tag-research { background: rgba(200,130,255,0.15); color: #c882ff; }
.tag-urgent { background: rgba(255,95,87,0.15); color: #ff5f57; }
.tag-content { background: rgba(159,232,112,0.1); color: var(--mint); }

.bcard-title {
 font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9);
 line-height: 1.35; margin-bottom: 8px;
}
.bcard-meta {
 display: flex; align-items: center; justify-content: space-between;
}
.bcard-assignee {
 display: flex; align-items: center; gap: 6px;
}
.ba-avatar {
 width: 22px; height: 22px; border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 font-size: 9px; font-weight: 800; color: #fff;
 flex-shrink: 0;
}
.ba-name { font-size: 11px; color: rgba(255,255,255,0.45); font-weight: 600; }
.bcard-date { font-size: 10px; color: rgba(255,255,255,0.3); font-weight: 500; }

/* ─── File Manager ─── */
.app-files { display: flex; flex-direction: column; height: 100%; }
.files-sidebar {
 width: 200px; background: rgba(255,255,255,0.02);
 border-right: 0.5px solid rgba(255,255,255,0.05);
 padding: 12px 0; flex-shrink: 0;
 overflow-y: auto;
}
.files-sidebar::-webkit-scrollbar { width: 4px; }
.files-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.fs-group {
 padding: 8px 16px 4px;
 font-size: 10px; font-weight: 800;
 text-transform: uppercase; letter-spacing: 0.1em;
 color: rgba(255,255,255,0.3);
}
.fs-item {
 display: flex; align-items: center; gap: 8px;
 padding: 6px 16px;
 font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6);
 cursor: pointer; transition: all 0.12s;
}
.fs-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.9); }
.fs-item.active { background: rgba(159,232,112,0.1); color: var(--lime); }
.fs-icon { font-size: 15px; width: 20px; text-align: center; }

.files-main {
 flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.files-breadcrumb {
 display: flex; align-items: center; gap: 6px;
 padding: 10px 20px;
 font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4);
 border-bottom: 0.5px solid rgba(255,255,255,0.04);
 flex-shrink: 0;
}
.fbc-sep { color: rgba(255,255,255,0.2); }
.fbc-current { color: rgba(255,255,255,0.8); }

.files-grid {
 flex: 1; display: grid;
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 gap: 8px; padding: 16px 20px;
 overflow-y: auto; align-content: start;
}
.files-grid::-webkit-scrollbar { width: 5px; }
.files-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.fg-item {
 display: flex; flex-direction: column; align-items: center;
 gap: 6px; padding: 14px 8px; border-radius: 10px;
 cursor: pointer; transition: background 0.12s;
}
.fg-item:hover { background: rgba(255,255,255,0.05); }
.fg-icon {
 width: 48px; height: 48px;
 border-radius: 12px;
 display: flex; align-items: center; justify-content: center;
 font-size: 24px;
}
.fg-name {
 font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7);
 text-align: center; line-height: 1.2;
 max-width: 90px; overflow: hidden; text-overflow: ellipsis;
 white-space: nowrap;
}

/* ─── Calendar ─── */
.app-calendar { display: flex; height: 100%; }
.cal-sidebar {
 width: 220px; background: rgba(255,255,255,0.02);
 border-right: 0.5px solid rgba(255,255,255,0.05);
 padding: 16px; flex-shrink: 0;
 display: flex; flex-direction: column; gap: 16px;
}
.cal-month-title {
 font-size: 20px; font-weight: 900; color: #fff;
 letter-spacing: -0.02em;
}
.cal-nav {
 display: flex; gap: 6px;
}
.cal-nav button {
 width: 28px; height: 28px; border-radius: 8px;
 border: 0.5px solid rgba(255,255,255,0.1);
 background: transparent; color: rgba(255,255,255,0.6);
 cursor: pointer; font-size: 14px; display: flex;
 align-items: center; justify-content: center;
 transition: all 0.12s;
}
.cal-nav button:hover { background: rgba(255,255,255,0.08); color: #fff; }

.cal-mini-grid {
 display: grid; grid-template-columns: repeat(7, 1fr);
 gap: 2px; font-size: 10px;
}
.cm-head {
 text-align: center; font-weight: 700;
 color: rgba(255,255,255,0.3); padding: 4px 0;
 font-size: 9px; text-transform: uppercase;
}
.cm-day {
 aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
 border-radius: 6px; font-size: 11px; font-weight: 600;
 color: rgba(255,255,255,0.5); cursor: pointer;
 transition: all 0.12s;
 position: relative;
}
.cm-day:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cm-day.today { background: var(--lime); color: var(--forest); font-weight: 800; }
.cm-day.has-event::after {
 content: ''; position: absolute; bottom: 2px; width: 4px; height: 4px;
 border-radius: 50%; background: var(--lime);
}
.cm-day.other-month { color: rgba(255,255,255,0.15); }

.cal-events-list { flex: 1; overflow-y: auto; }
.cal-event-item {
 display: flex; gap: 10px; padding: 10px 0;
 border-bottom: 0.5px solid rgba(255,255,255,0.04);
 cursor: pointer; transition: background 0.12s;
}
.cal-event-item:hover { background: rgba(255,255,255,0.02); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.ce-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ce-info { flex: 1; }
.ce-time { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.35); }
.ce-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); margin-top: 2px; }
.ce-desc { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }

.cal-main {
 flex: 1; padding: 20px 24px; overflow-y: auto;
}
.cal-week-grid {
 display: grid; grid-template-columns: 60px repeat(7, 1fr);
 gap: 1px;
}
.cg-day-head {
 text-align: center; font-size: 10px; font-weight: 800;
 text-transform: uppercase; color: rgba(255,255,255,0.3);
 padding: 12px 0 8px; letter-spacing: 0.06em;
}
.cg-day-num {
 text-align: center; font-size: 14px; font-weight: 800;
 color: rgba(255,255,255,0.6); padding: 8px 0 4px;
}
.cg-slot {
 min-height: 60px; padding: 4px;
 border-top: 0.5px solid rgba(255,255,255,0.03);
 transition: background 0.12s;
}
.cg-slot:hover { background: rgba(255,255,255,0.02); }
.cg-event {
 font-size: 10px; font-weight: 700; padding: 4px 8px;
 border-radius: 5px; margin-bottom: 2px; cursor: pointer;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 transition: transform 0.12s;
}
.cg-event:hover { transform: scale(1.02); }
.cg-event.green { background: rgba(159,232,112,0.18); color: var(--lime); border-left: 2px solid var(--lime); }
.cg-event.orange { background: rgba(255,205,145,0.18); color: var(--sunlight); border-left: 2px solid var(--sunlight); }
.cg-event.blue { background: rgba(94,186,255,0.18); color: #5ebaff; border-left: 2px solid #5ebaff; }
.cg-event.purple { background: rgba(200,130,255,0.18); color: #c882ff; border-left: 2px solid #c882ff; }

/* ─── Chat / Messages ─── */
.app-chat { display: flex; height: 100%; }
.chat-sidebar {
 width: 240px; background: rgba(255,255,255,0.02);
 border-right: 0.5px solid rgba(255,255,255,0.05);
 display: flex; flex-direction: column; flex-shrink: 0;
}
.chat-search {
 padding: 12px 14px;
 border-bottom: 0.5px solid rgba(255,255,255,0.04);
}
.cs-input {
 width: 100%; padding: 8px 12px;
 border-radius: 8px; border: 0.5px solid rgba(255,255,255,0.08);
 background: rgba(255,255,255,0.04); color: #fff;
 font-size: 12px; font-family: var(--font-body); outline: none;
}
.cs-input::placeholder { color: rgba(255,255,255,0.25); }
.cs-input:focus { border-color: rgba(159,232,112,0.3); }

.chat-convos { flex: 1; overflow-y: auto; }
.chat-convos::-webkit-scrollbar { width: 4px; }
.chat-convos::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
.convo-item {
 display: flex; align-items: center; gap: 10px;
 padding: 12px 14px; cursor: pointer;
 transition: background 0.12s;
}
.convo-item:hover { background: rgba(255,255,255,0.03); }
.convo-item.active { background: rgba(159,232,112,0.08); }
.convo-avatar {
 width: 38px; height: 38px; border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 font-weight: 800; font-size: 13px; color: #fff; flex-shrink: 0;
}
.convo-info { flex: 1; min-width: 0; }
.convo-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85); }
.convo-preview { font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.convo-meta { text-align: right; flex-shrink: 0; }
.convo-time { font-size: 10px; color: rgba(255,255,255,0.25); }
.convo-badge {
 font-size: 10px; font-weight: 800;
 padding: 2px 7px; border-radius: 10px;
 background: var(--lime); color: var(--forest);
 margin-top: 3px; display: inline-block;
}

.chat-main { flex: 1; display: flex; flex-direction: column; }
.chat-header {
 display: flex; align-items: center; justify-content: space-between;
 padding: 14px 20px;
 border-bottom: 0.5px solid rgba(255,255,255,0.05);
 flex-shrink: 0;
}
.ch-contact { display: flex; align-items: center; gap: 10px; }
.ch-name { font-size: 15px; font-weight: 800; color: #fff; }
.ch-status { font-size: 11px; color: var(--lime); font-weight: 600; }
.ch-actions { display: flex; gap: 4px; }
.ch-btn {
 width: 30px; height: 30px; border-radius: 8px;
 border: none; background: transparent; color: rgba(255,255,255,0.4);
 cursor: pointer; display: flex; align-items: center; justify-content: center;
 font-size: 14px; transition: all 0.12s;
}
.ch-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }

.chat-messages {
 flex: 1; overflow-y: auto; padding: 20px;
 display: flex; flex-direction: column; gap: 12px;
}
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }

.msg {
 display: flex; gap: 10px; max-width: 70%;
}
.msg.sent { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
 width: 30px; height: 30px; border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.msg-bubble {
 padding: 10px 14px; border-radius: 16px;
 font-size: 13px; font-weight: 500; line-height: 1.4;
}
.msg.received .msg-bubble {
 background: rgba(255,255,255,0.06);
 color: rgba(255,255,255,0.85);
 border-bottom-left-radius: 4px;
}
.msg.sent .msg-bubble {
 background: var(--forest);
 color: var(--mint);
 border-bottom-right-radius: 4px;
}
.msg-time { font-size: 10px; color: rgba(255,255,255,0.25); margin-top: 4px; }
.msg.sent .msg-time { text-align: right; }

.chat-input-area {
 padding: 14px 20px;
 border-top: 0.5px solid rgba(255,255,255,0.05);
 display: flex; gap: 10px; align-items: center;
 flex-shrink: 0;
}
.cia-field {
 flex: 1; padding: 10px 16px;
 border-radius: var(--radius-pill);
 border: 0.5px solid rgba(255,255,255,0.08);
 background: rgba(255,255,255,0.04); color: #fff;
 font-size: 13px; font-family: var(--font-body); outline: none;
}
.cia-field::placeholder { color: rgba(255,255,255,0.25); }
.cia-field:focus { border-color: rgba(159,232,112,0.3); }
.cia-send {
 width: 38px; height: 38px; border-radius: 50%;
 background: var(--lime); border: none; cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 color: var(--forest); font-size: 16px; font-weight: 800;
 transition: transform 0.15s;
 flex-shrink: 0;
}
.cia-send:hover { transform: scale(1.08); }

/* ─── Terminal ─── */
.app-terminal {
 display: flex;
 flex-direction: column;
 height: 100%;
 background: #0a0c0a;
 font-family: var(--font-mono);
 padding: 0;
}
.term-toolbar {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 14px;
 background: rgba(255,255,255,0.03);
 border-bottom: 0.5px solid rgba(255,255,255,0.05);
 flex-shrink: 0;
}
.term-dot {
 width: 10px; height: 10px;
 border-radius: 50%;
}
.term-dot.red { background: #ff5f57; }
.term-dot.yellow { background: #febc2e; }
.term-dot.green { background: #28c840; }
.term-title {
 flex: 1;
 font-size: 12px;
 font-weight: 600;
 color: rgba(255,255,255,0.5);
 text-align: center;
 font-family: var(--font-mono);
}
.term-body {
 flex: 1;
 padding: 14px 18px;
 overflow-y: auto;
 font-size: 13px;
 line-height: 1.6;
 color: rgba(255,255,255,0.85);
}
.term-body::-webkit-scrollbar { width: 5px; }
.term-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.term-line { margin-bottom: 2px; white-space: pre-wrap; word-break: break-all; }
.term-prompt {
 color: var(--lime);
 font-weight: 600;
}
.term-input-line {
 display: flex;
 align-items: center;
 gap: 6px;
}
.term-prompt-text {
 color: var(--lime);
 font-weight: 600;
 white-space: nowrap;
 font-size: 13px;
}
.term-input {
 flex: 1;
 background: none;
 border: none;
 outline: none;
 color: #fff;
 font-family: var(--font-mono);
 font-size: 13px;
 caret-color: var(--lime);
}
.term-output { color: rgba(255,255,255,0.6); }
.term-error { color: #ff5f57; }
.term-success { color: var(--lime); }
.term-info { color: #5ebaff; }

/* ─── Settings ─── */
.app-settings { padding: 24px; color: #fff; }
.settings-header { margin-bottom: 28px; }
.settings-header h2 {
 font-family: var(--font-display);
 font-weight: 900; font-size: 26px; color: #fff;
 letter-spacing: -0.02em;
}
.settings-header p { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 4px; }

.settings-section { margin-bottom: 24px; }
.ss-title {
 font-size: 10px; font-weight: 800; text-transform: uppercase;
 letter-spacing: 0.1em; color: rgba(255,255,255,0.3);
 margin-bottom: 12px;
}
.setting-row {
 display: flex; align-items: center; justify-content: space-between;
 padding: 14px 16px;
 background: rgba(255,255,255,0.03);
 border: 0.5px solid rgba(255,255,255,0.04);
 border-radius: 10px;
 margin-bottom: 6px;
 transition: border-color 0.12s;
}
.setting-row:hover { border-color: rgba(255,255,255,0.1); }
.sr-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
.sr-desc { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }

/* Toggle switch */
.toggle-switch {
 width: 42px; height: 24px;
 border-radius: 12px;
 background: rgba(255,255,255,0.1);
 position: relative; cursor: pointer;
 transition: background 0.2s;
 flex-shrink: 0;
}
.toggle-switch.on { background: var(--lime); }
.toggle-knob {
 width: 18px; height: 18px;
 border-radius: 50%; background: #fff;
 position: absolute; top: 3px; left: 3px;
 transition: transform 0.2s var(--ease-spring);
 box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-switch.on .toggle-knob { transform: translateX(18px); }

/* ═══ ANIMATIONS ═══ */
@keyframes windowOpen {
 from { opacity: 0; transform: scale(0.92); }
 to { opacity: 1; transform: scale(1); }
}
@keyframes dockBounce {
 0% { transform: translateY(0); }
 40% { transform: translateY(-20px); }
 70% { transform: translateY(-8px); }
 100% { transform: translateY(0); }
}
@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}
@keyframes slideUp {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

.animate-in { animation: slideUp 0.3s ease forwards; }

/* Context menu */
.ctx-menu {
 position: fixed;
 background: rgba(30,32,30,0.95);
 backdrop-filter: blur(20px);
 border: 0.5px solid rgba(255,255,255,0.1);
 border-radius: 10px;
 padding: 5px 0;
 min-width: 180px;
 z-index: 99999;
 box-shadow: 0 12px 40px rgba(0,0,0,0.5);
 display: none;
}
.ctx-menu.show { display: block; animation: slideUp 0.12s ease; }
.ctx-item {
 padding: 7px 16px; font-size: 13px; font-weight: 500;
 color: rgba(255,255,255,0.8); cursor: pointer;
 display: flex; align-items: center; gap: 10px;
 transition: background 0.1s;
}
.ctx-item:hover { background: rgba(159,232,112,0.15); color: var(--lime); }
.ctx-sep { height: 0.5px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.ctx-shortcut { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.25); font-family: var(--font-mono); }

/* Client-specific overrides */
.client-view .dash-greeting h1::after {
 content: 'Client Portal';
 display: block;
 font-size: 14px;
 font-weight: 600;
 color: var(--lime);
 letter-spacing: 0.02em;
 margin-top: 2px;
}
.team-view .dash-greeting h1::after {
 content: 'Team Dashboard';
 display: block;
 font-size: 14px;
 font-weight: 600;
 color: var(--lime);
 letter-spacing: 0.02em;
 margin-top: 2px;
}

/* Responsive tweaks for tablet-ish */
@media (max-width: 1024px) {
 .dash-stats { grid-template-columns: repeat(2, 1fr); }
 .dash-grid { grid-template-columns: 1fr; }
 .ds-card-value { font-size: 22px; }
 .dash-greeting h1 { font-size: 24px; }
}
@media (max-width: 768px) {
 .window { min-width: 300px; }
 .files-sidebar { width: 160px; }
 .chat-sidebar { width: 200px; }
 .cal-sidebar { width: 180px; }
 .bcol { min-width: 240px; max-width: 240px; }
}