/* Office Sidekick — productivity dashboard system (VibeProSoft v3.0) */

:root {
  /* Surfaces — deep, layered */
  --vps-bg-base:        #07080d;
  --vps-bg-app:         #0a0c14;
  --vps-bg-surface:     #0e1220;
  --vps-bg-elevated:    rgba(20, 26, 42, 0.66);
  --vps-bg-elevated-solid: #141a2a;
  --vps-bg-card:        rgba(255, 255, 255, 0.03);
  --vps-bg-card-hover:  rgba(255, 255, 255, 0.05);

  /* Brand blues */
  --vps-blue-950: #172554;
  --vps-blue-700: #1d4ed8;
  --vps-blue-600: #2563eb;
  --vps-blue-500: #3b82f6;
  --vps-blue-400: #60a5fa;
  --vps-blue-300: #93c5fd;
  --vps-blue-200: #bfdbfe;

  /* Amber accents */
  --vps-amber-500: #f59e0b;
  --vps-amber-400: #fbbf24;
  --vps-amber-300: #fcd34d;
  --vps-amber-200: #fde68a;

  /* Functional */
  --vps-green-400: #34d399;
  --vps-green-300: #6ee7b7;
  --vps-red-400:   #f87171;
  --vps-violet-400: #a78bfa;

  /* Text */
  --vps-text-primary:   #ffffff;
  --vps-text-secondary: #d6dbe6;
  --vps-text-body:      #9aa3b8;
  --vps-text-muted:     #6b7388;

  /* Borders */
  --vps-border:         rgba(255, 255, 255, 0.07);
  --vps-border-strong:  rgba(255, 255, 255, 0.14);
  --vps-border-hover:   rgba(59, 130, 246, 0.45);
  --vps-border-active:  rgba(96, 165, 250, 0.55);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 9999px;

  /* Shadow */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 50px -28px rgba(0,0,0,0.7);
  --shadow-pop:  0 24px 60px -24px rgba(0,0,0,0.7), 0 0 0 1px var(--vps-border-strong);
  --glow-blue:   0 0 30px -5px rgba(96, 165, 250, 0.5);
  --glow-amber:  0 0 28px -5px rgba(245, 158, 11, 0.45);

  /* Fonts */
  --font-sans: "Helvetica Neue", Helvetica, "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Mono", "SF Mono", "Courier New", monospace;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 64px;
}

[data-theme="light"] {
  --vps-bg-base:        #f3f4ee;
  --vps-bg-app:         #efeee6;
  --vps-bg-surface:     #ffffff;
  --vps-bg-elevated:    rgba(255, 255, 255, 0.78);
  --vps-bg-elevated-solid: #ffffff;
  --vps-bg-card:        rgba(255, 255, 255, 0.7);
  --vps-bg-card-hover:  #ffffff;

  --vps-text-primary:   #0b1020;
  --vps-text-secondary: #1f2937;
  --vps-text-body:      #4b5563;
  --vps-text-muted:     #6b7280;

  --vps-border:         rgba(11, 16, 32, 0.09);
  --vps-border-strong:  rgba(11, 16, 32, 0.16);
  --vps-border-hover:   rgba(37, 99, 235, 0.45);
  --vps-border-active:  rgba(37, 99, 235, 0.55);

  --shadow-card: 0 1px 0 rgba(255,255,255,1) inset, 0 16px 38px -20px rgba(11,16,32,0.12);
  --shadow-pop:  0 24px 60px -24px rgba(11,16,32,0.22), 0 0 0 1px var(--vps-border-strong);
}

/* Reset */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--vps-bg-base);
  color: var(--vps-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 320ms ease, color 320ms ease;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* Atmospherics (subtle, only on app bg) */
.bg-fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-fx::before {
  content: ""; position: absolute; top: -20%; left: -10%;
  width: 900px; height: 900px;
  background: radial-gradient(circle at center, rgba(37,99,235,0.18), transparent 60%);
  filter: blur(60px);
}
.bg-fx::after {
  content: ""; position: absolute; bottom: -15%; right: -8%;
  width: 700px; height: 700px;
  background: radial-gradient(circle at center, rgba(245,158,11,0.10), transparent 65%);
  filter: blur(60px);
}
[data-theme="light"] .bg-fx::before { background: radial-gradient(circle at center, rgba(37,99,235,0.08), transparent 60%); }
[data-theme="light"] .bg-fx::after  { background: radial-gradient(circle at center, rgba(245,158,11,0.05), transparent 65%); }

/* ============================================================
   APP SHELL
   ============================================================ */
#root { position: relative; z-index: 1; }
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: var(--vps-bg-app);
  border-right: 1px solid var(--vps-border);
  display: flex; flex-direction: column;
  padding: 18px 14px;
  z-index: 20;
}
[data-theme="light"] .sidebar { background: var(--vps-bg-app); }

.sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid var(--vps-border);
  margin-bottom: 14px;
}
.sb-brand .brand-text { display: flex; flex-direction: column; line-height: 1; }
.sb-brand .brand-name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em; }
.sb-brand .brand-by { font-size: 9px; letter-spacing: 0.24em; color: var(--vps-blue-300); margin-top: 5px; text-transform: uppercase; }
[data-theme="light"] .sb-brand .brand-by { color: var(--vps-blue-700); }

.sb-search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--vps-bg-card);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-md);
  color: var(--vps-text-muted);
  font-size: 12.5px;
  margin-bottom: 18px;
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.sb-search:hover { border-color: var(--vps-border-hover); }
.sb-search .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--vps-border);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--vps-text-secondary);
}
[data-theme="light"] .sb-search .kbd { background: rgba(11,16,32,0.05); }

.sb-section { margin-bottom: 14px; }
.sb-section h4 {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vps-text-muted);
  font-weight: 600;
}

/* Pinned section gets a subtle highlight */
.sb-section-pinned h4 { color: var(--vps-amber-300); }

/* Collapsible category header — the whole thing is one button */
.sb-cat-toggle {
  width: 100%;
  display: flex; align-items: center;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-align: left; font-family: inherit;
  border-radius: 6px;
}
.sb-cat-toggle:hover h4 { color: var(--vps-text-secondary); }
.sb-cat-toggle h4 { flex: 1; margin: 0 0 6px; }
.sb-cat-chev {
  font-size: 10px; color: var(--vps-text-muted);
  margin-right: 8px; margin-bottom: 6px;
  transition: transform 160ms ease;
}
.sb-cat-toggle:hover .sb-cat-chev { color: var(--vps-text-secondary); }

/* Hamburger toggle — sits on the LEFT of the topbar; only visible on
   narrow widths via the @media block below */
.sb-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--vps-border);
  color: var(--vps-text-secondary);
  width: 38px; height: 38px;
  border-radius: 10px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.sb-toggle:hover { color: var(--vps-text-primary); border-color: var(--vps-border-hover); }
.sb-toggle.live::after {
  content: ""; position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vps-amber-300);
  box-shadow: 0 0 8px var(--vps-amber-300);
  animation: sb-pulse 1.6s ease-in-out infinite;
}
@keyframes sb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* Backdrop behind the open mobile drawer */
.sb-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 19;
  animation: sb-fade 180ms ease-out;
}
@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }

/* Close (✕) button inside the brand area — mobile only */
.sb-close {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--vps-border);
  color: var(--vps-text-muted);
  width: 36px; height: 36px;
  border-radius: 10px;
  cursor: pointer; font-size: 13px;
}
.sb-close:hover { color: var(--vps-text-primary); border-color: var(--vps-border-hover); }

/* Mid-sidebar scroll region so the foot stays fixed at the bottom */
.sb-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding-right: 2px;
  margin-right: -2px;
}
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: var(--vps-text-body);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  width: 100%; text-align: left;
}
.sb-item:hover { background: var(--vps-bg-card); color: var(--vps-text-primary); }
.sb-item.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.20), rgba(37,99,235,0.05));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.25);
}
[data-theme="light"] .sb-item.active { color: #0b1020; }
.sb-item .ic {
  width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 14px;
  border-radius: 6px;
  background: var(--vps-bg-card);
  border: 1px solid var(--vps-border);
}
.sb-item.active .ic {
  background: linear-gradient(135deg, rgba(37,99,235,0.35), rgba(96,165,250,0.10));
  border-color: rgba(96,165,250,0.4);
  color: #fff;
}
.sb-item .badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--vps-amber-300);
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.30);
  padding: 1px 6px;
  border-radius: 999px;
}
.sb-item.active .badge { color: var(--vps-amber-300); }

.sb-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--vps-border);
  display: flex; flex-direction: column; gap: 8px;
}
.sb-foot .privacy-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--vps-border);
  border-radius: var(--r-md);
  font-size: 11px;
  color: var(--vps-text-body);
  cursor: pointer;
  transition: border-color 150ms;
}
.sb-foot .privacy-chip:hover { border-color: var(--vps-border-hover); color: var(--vps-text-primary); }
.sb-foot .privacy-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vps-green-400);
  box-shadow: 0 0 8px var(--vps-green-400);
}
.sb-foot .vps-lockup {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  font-size: 10px;
  color: var(--vps-text-muted);
  letter-spacing: 0.04em;
}
.sb-foot .vps-lockup img { height: 16px; opacity: 0.9; }

/* Logo mark */
.logo-mark {
  position: relative; width: 34px; height: 34px;
  display: inline-grid; place-items: center; flex-shrink: 0;
}
.logo-mark .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(96,165,250,0.55) 90deg,
    transparent 180deg,
    rgba(252,211,77,0.45) 270deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 61%);
  mask: radial-gradient(circle, transparent 60%, black 61%);
  animation: spin 14s linear infinite;
}
.logo-mark .core {
  position: relative; width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, #2563eb, #172554);
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; color: #fff;
  box-shadow: 0 0 14px rgba(96,165,250,0.5), inset 0 0 0 1px rgba(255,255,255,0.14);
}
.logo-mark .core::before {
  content: ""; position: absolute; inset: 0; border-radius: 7px;
  background: linear-gradient(135deg, transparent 45%, rgba(252,211,77,0.45) 100%);
  mix-blend-mode: screen;
}
.logo-mark .core span { position: relative; z-index: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Main */
.main {
  min-height: 100vh;
  padding: 22px 32px 64px;
  position: relative;
  z-index: 1;
  /* min-width: 0 lets this grid item shrink below its content's min-content
     size — without it, a wide child (long string, fixed-width element) pushes
     .main past the viewport and causes horizontal scroll on mobile. */
  min-width: 0;
  overflow-x: hidden;
}

/* Top bar inside main */
.topbar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.topbar .crumb {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vps-text-muted);
}
.topbar .crumb .sep { margin: 0 8px; opacity: 0.5; }
.topbar .crumb .cur { color: var(--vps-blue-300); }
[data-theme="light"] .topbar .crumb .cur { color: var(--vps-blue-700); }
.topbar .spacer { flex: 1; }
.topbar .topbar-right { display: flex; gap: 8px; align-items: center; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--vps-bg-card);
  border: 1px solid var(--vps-border);
  color: var(--vps-text-secondary);
  font-size: 16px;
  transition: border-color 150ms, background 150ms, color 150ms;
}
.icon-btn:hover { border-color: var(--vps-border-hover); color: var(--vps-text-primary); }
.icon-btn.active { background: rgba(37,99,235,0.15); border-color: var(--vps-border-active); color: #fff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: transform 120ms, background 200ms, border-color 200ms, box-shadow 200ms, color 200ms;
  white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--vps-blue-600), var(--vps-blue-500));
  color: #fff;
  box-shadow: 0 8px 24px -10px rgba(37,99,235,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--vps-blue-500), var(--vps-blue-400)); }
.btn-ghost { background: var(--vps-bg-card); border-color: var(--vps-border); color: var(--vps-text-primary); }
.btn-ghost:hover { border-color: var(--vps-border-hover); }
.btn-amber {
  background: linear-gradient(135deg, var(--vps-amber-500), var(--vps-amber-400));
  color: #0b1020;
  box-shadow: 0 8px 24px -10px rgba(245,158,11,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-amber:hover { filter: brightness(1.08); }
.btn-danger { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4); color: #fecaca; }
.btn-danger:hover { background: rgba(239,68,68,0.20); }
[data-theme="light"] .btn-danger { color: #991b1b; }
.btn-sm { padding: 7px 11px; font-size: 12.5px; }

/* Card primitives */
.card {
  background: var(--vps-bg-elevated);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: border-color 200ms, transform 200ms;
}
.card-hov:hover { border-color: var(--vps-border-hover); transform: translateY(-2px); }

/* Inputs */
.input, .textarea, .select {
  width: 100%;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--vps-border);
  color: var(--vps-text-primary);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
}
.textarea { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; min-height: 160px; resize: vertical; }
.select {
  font-family: var(--font-mono); font-size: 13px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2393c5fd' stroke-width='1.5'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 32px;
}
[data-theme="light"] .input, [data-theme="light"] .textarea, [data-theme="light"] .select {
  background-color: rgba(255,255,255,0.85);
}
[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231d4ed8' stroke-width='1.5'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--vps-blue-500); }
.label {
  display: block; font-size: 10.5px; letter-spacing: 0.20em;
  text-transform: uppercase; color: var(--vps-text-muted);
  font-weight: 600; margin-bottom: 8px;
}
.field { margin-bottom: 16px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--vps-border);
  background: transparent;
  color: var(--vps-text-secondary);
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: 0.03em;
  transition: border-color 160ms, background 160ms, color 160ms;
}
.chip:hover { border-color: var(--vps-border-hover); color: var(--vps-text-primary); }
.chip.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.20), rgba(37,99,235,0.06));
  border-color: rgba(96,165,250,0.55);
  color: #fff;
}
[data-theme="light"] .chip.active { color: #0b1020; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
@media (min-width: 1100px) { .dash-hero { grid-template-columns: 1.4fr 1fr; } }

.greet {
  position: relative;
  padding: 28px 28px 26px;
  background: linear-gradient(135deg, rgba(37,99,235,0.18) 0%, rgba(245,158,11,0.06) 100%), var(--vps-bg-elevated);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.greet::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(96,165,250,0.25), transparent 60%);
  pointer-events: none;
}
.greet .greet-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--vps-blue-300);
  padding: 5px 10px;
  border: 1px solid rgba(96,165,250,0.30);
  border-radius: 999px;
  background: rgba(37,99,235,0.10);
  margin-bottom: 16px;
}
.greet .greet-tag .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--vps-blue-400); box-shadow: 0 0 8px var(--vps-blue-400);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.greet h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.greet h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--vps-blue-200), var(--vps-amber-200));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .greet h1 em {
  background: linear-gradient(135deg, var(--vps-blue-700), var(--vps-amber-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.greet .greet-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--vps-text-body);
  margin-top: 14px;
  position: relative;
}
.greet .greet-meta b { color: var(--vps-text-primary); font-weight: 600; }
.greet .greet-cta {
  display: flex; gap: 10px; margin-top: 20px;
  position: relative; flex-wrap: wrap;
}

/* Hero focus card on right */
.focus-card {
  position: relative;
  padding: 24px;
  border: 1px solid var(--vps-border);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(245,158,11,0.10), transparent 60%), var(--vps-bg-elevated);
  display: flex; flex-direction: column; gap: 14px;
}
.focus-card h3 {
  margin: 0;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--vps-amber-300); font-weight: 600;
}
[data-theme="light"] .focus-card h3 { color: var(--vps-amber-500); }
.focus-card .focus-state {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vps-text-muted);
  letter-spacing: 0.04em;
}
.focus-card .focus-time {
  font-family: var(--font-mono);
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(135deg, var(--vps-text-primary) 25%, var(--vps-blue-200) 70%, var(--vps-amber-200) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .focus-card .focus-time {
  background: linear-gradient(135deg, #0b1020 30%, var(--vps-blue-700) 70%, var(--vps-amber-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.focus-card .focus-ring {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
[data-theme="light"] .focus-card .focus-ring { background: rgba(11,16,32,0.07); }
.focus-card .focus-ring-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vps-blue-400), var(--vps-amber-300));
  border-radius: 999px;
  transition: width 0.4s linear;
}
.focus-card .focus-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Widget row */
.widget-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
@media (min-width: 720px) { .widget-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .widget-row { grid-template-columns: repeat(3, 1fr); } }

.widget {
  position: relative;
  padding: 18px;
  background: var(--vps-bg-elevated);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 168px;
  cursor: pointer;
  transition: border-color 200ms, transform 200ms;
}
.widget:hover { border-color: var(--vps-border-hover); transform: translateY(-2px); }
.widget .w-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.widget .w-title {
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--vps-text-muted); font-weight: 600;
}
.widget .w-link { color: var(--vps-blue-300); font-size: 18px; opacity: 0.5; }
.widget:hover .w-link { opacity: 1; }
[data-theme="light"] .widget .w-link { color: var(--vps-blue-700); }

/* Day progress widget */
.daybar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  margin: 12px 0 8px;
}
[data-theme="light"] .daybar-track { background: rgba(11,16,32,0.06); }
.daybar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vps-blue-500), var(--vps-amber-400));
  border-radius: 999px;
}
.daybar-marks {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; justify-content: space-between;
}
.daybar-marks span {
  width: 1px; background: rgba(255,255,255,0.15);
}
[data-theme="light"] .daybar-marks span { background: rgba(11,16,32,0.15); }
.daybar-meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--vps-text-body);
  display: flex; justify-content: space-between;
}
.daybar-meta b { color: var(--vps-text-primary); }
.daybar-big {
  font-family: var(--font-mono);
  font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--vps-text-primary);
}
.daybar-sub { font-size: 12px; color: var(--vps-text-body); }

/* World clock strip widget */
.clock-strip { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.clock-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.clock-row .city { color: var(--vps-text-secondary); letter-spacing: 0.05em; text-transform: uppercase; font-size: 10.5px; font-weight: 600; }
.clock-row .time { color: var(--vps-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.clock-row .delta { color: var(--vps-text-muted); font-size: 11px; }
.clock-row.local .time { color: var(--vps-blue-300); }
[data-theme="light"] .clock-row.local .time { color: var(--vps-blue-700); }

/* Today list widget */
.today-list { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.today-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--vps-text-secondary);
  padding: 4px 0;
}
.today-item .check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--vps-border-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.today-item.done .check {
  background: var(--vps-blue-500);
  border-color: var(--vps-blue-500);
}
.today-item.done .check::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 700; }
.today-item.done .label { text-decoration: line-through; color: var(--vps-text-muted); }
.today-item .label { flex: 1; }
.today-item .x {
  opacity: 0; font-size: 13px; color: var(--vps-text-muted);
  transition: opacity 150ms;
}
.today-item:hover .x { opacity: 1; }
.today-item .x:hover { color: var(--vps-red-400); }
.today-empty { font-size: 12px; color: var(--vps-text-muted); padding: 8px 0; font-style: italic; }
.today-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--vps-border);
  padding: 10px 0 0;
  font-size: 13px;
  color: var(--vps-text-primary);
  margin-top: 8px;
}
.today-input::placeholder { color: var(--vps-text-muted); }
.today-input:focus { outline: none; }

/* Section header */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 14px; margin: 8px 0 14px;
}
.section-head h2 {
  margin: 0;
  font-size: 18px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--vps-text-primary);
}
.section-head h2 .count {
  color: var(--vps-text-muted); font-weight: 500; margin-left: 8px;
}
.section-head .head-line {
  font-size: 12px;
  color: var(--vps-text-muted);
}

/* Tool grid */
.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1300px) { .tool-grid { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative;
  background: var(--vps-bg-elevated);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex; flex-direction: column;
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms, transform 200ms, background 200ms;
  min-height: 138px;
}
.tile:hover {
  border-color: var(--vps-border-hover);
  transform: translateY(-2px);
}
.tile .tile-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
  background: linear-gradient(135deg, rgba(37,99,235,0.30), rgba(23,37,84,0.30));
  border: 1px solid rgba(96,165,250,0.25);
  margin-bottom: 12px;
}
.tile.amber .tile-icon {
  background: linear-gradient(135deg, rgba(245,158,11,0.30), rgba(180,83,9,0.20));
  border-color: rgba(245,158,11,0.30);
}
.tile.green .tile-icon {
  background: linear-gradient(135deg, rgba(16,185,129,0.30), rgba(6,95,70,0.20));
  border-color: rgba(16,185,129,0.30);
}
.tile.violet .tile-icon {
  background: linear-gradient(135deg, rgba(139,92,246,0.30), rgba(76,29,149,0.20));
  border-color: rgba(139,92,246,0.30);
}
.tile h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; }
.tile p { margin: 0; font-size: 12.5px; color: var(--vps-text-body); line-height: 1.5; }
.tile .tile-tag {
  position: absolute; top: 16px; right: 16px;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vps-green-300);
  padding: 2px 7px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 999px;
}
.tile .tile-tag.new {
  color: var(--vps-amber-300);
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
}

/* ============================================================
   TOOL VIEW SHELL
   ============================================================ */
.tool-shell { max-width: 1100px; }
.tool-shell .tool-head {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 22px;
}
.tool-shell .tool-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 24px;
  background: linear-gradient(135deg, rgba(37,99,235,0.30), rgba(23,37,84,0.30));
  border: 1px solid rgba(96,165,250,0.25);
  flex-shrink: 0;
}
.tool-shell .tool-title h1 {
  margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
}
.tool-shell .tool-title p {
  margin: 4px 0 0; font-size: 13.5px; color: var(--vps-text-body); max-width: 60ch;
}

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
.cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 7, 14, 0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: grid; place-items: start center;
  padding-top: 12vh;
  animation: cmdFade 180ms ease;
}
[data-theme="light"] .cmd-overlay { background: rgba(150, 150, 140, 0.45); }
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
.cmd {
  width: min(560px, 90vw);
  background: var(--vps-bg-elevated-solid);
  border: 1px solid var(--vps-border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: cmdRise 200ms cubic-bezier(0.22, 1.1, 0.36, 1);
}
@keyframes cmdRise { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cmd-input {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--vps-border);
  color: var(--vps-text-primary);
  font-size: 15px;
}
.cmd-input::placeholder { color: var(--vps-text-muted); }
.cmd-input:focus { outline: none; }
.cmd-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmd-section-title {
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--vps-text-muted); padding: 10px 12px 6px; font-weight: 600;
}
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--vps-text-secondary);
  font-size: 13.5px;
}
.cmd-item:hover, .cmd-item.active {
  background: var(--vps-bg-card-hover);
  color: var(--vps-text-primary);
}
.cmd-item .ic {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 14px;
  background: var(--vps-bg-card);
  border: 1px solid var(--vps-border);
}
.cmd-item .desc { color: var(--vps-text-muted); font-size: 11.5px; margin-left: auto; }
.cmd-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--vps-border);
  font-size: 11px;
  color: var(--vps-text-muted);
  display: flex; gap: 14px;
  font-family: var(--font-mono);
}
.cmd-foot .kbd {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--vps-border);
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
}
[data-theme="light"] .cmd-foot .kbd { background: rgba(11,16,32,0.05); }

/* ============================================================
   ABOUT page styles
   ============================================================ */
.about-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  margin: 20px 0;
}
@media (min-width: 720px) { .about-grid { grid-template-columns: repeat(2, 1fr); } }
.about-card {
  background: var(--vps-bg-elevated);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.about-card .ic {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 16px;
  background: linear-gradient(135deg, rgba(37,99,235,0.30), rgba(23,37,84,0.30));
  color: var(--vps-blue-300);
  border: 1px solid rgba(96,165,250,0.25);
  margin-bottom: 10px;
}
.about-card h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; }
.about-card p { margin: 0; font-size: 12.5px; color: var(--vps-text-body); line-height: 1.55; }

/* ============================================================
   Mini util
   ============================================================ */
.mono { font-family: var(--font-mono); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--vps-text-muted); }
.sub { font-size: 12px; color: var(--vps-text-body); }
.copy-btn {
  font-family: var(--font-mono); font-size: 11px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(96,165,250,0.30);
  color: var(--vps-blue-300);
  padding: 6px 10px; border-radius: 8px;
  transition: background 150ms, color 150ms;
}
.copy-btn:hover { background: rgba(37,99,235,0.20); color: #fff; }
.copy-btn.copied { background: rgba(16,185,129,0.20); border-color: rgba(16,185,129,0.40); color: #6ee7b7; }
[data-theme="light"] .copy-btn { color: var(--vps-blue-700); }

/* Scrollbar polish (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(11,16,32,0.12); }

/* ============================================================
   CUSTOMIZE BAR
   ============================================================ */
.customize-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; padding: 12px 16px;
  background: var(--vps-bg-elevated);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-md);
  transition: border-color 220ms, box-shadow 220ms, background 220ms;
}
.customize-bar.active {
  border-color: rgba(96,165,250,0.45);
  background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(245,158,11,0.05));
  box-shadow: 0 0 0 1px rgba(96,165,250,0.20), 0 18px 40px -22px rgba(37,99,235,0.4);
}
.cb-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-title { font-size: 12.5px; font-weight: 600; color: var(--vps-text-primary); }
.customize-bar.active .cb-title { color: var(--vps-blue-300); }
[data-theme="light"] .customize-bar.active .cb-title { color: var(--vps-blue-700); }
.cb-sub { font-size: 12px; color: var(--vps-text-muted); }
.cb-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ============================================================
   WIDGET headings — updated for icon + remove
   ============================================================ */
.widget .w-head-left {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.widget .w-icon {
  font-size: 16px; line-height: 1;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--vps-border);
}
[data-theme="light"] .widget .w-icon { background: rgba(11,16,32,0.04); }
.widget .w-open, .widget .w-remove {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--vps-text-muted);
  font-size: 14px;
  transition: border-color 150ms, background 150ms, color 150ms;
}
.widget:hover .w-open { color: var(--vps-blue-300); border-color: var(--vps-border); }
.widget .w-open:hover { background: rgba(37,99,235,0.10); color: var(--vps-blue-300); border-color: rgba(96,165,250,0.40); }
.widget .w-remove {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.30);
  color: var(--vps-red-400);
  font-size: 18px; font-weight: 700;
}
.widget .w-remove:hover { background: rgba(239,68,68,0.20); }

.pinned-widget { cursor: default; }
.pinned-widget .w-body { flex: 1; display: flex; flex-direction: column; }
.pinned-widget.shake { animation: tinyShake 320ms ease infinite; }
@keyframes tinyShake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-0.6px, 0.4px); }
  50% { transform: translate(0.6px, -0.3px); }
  75% { transform: translate(-0.4px, -0.4px); }
  100% { transform: translate(0, 0); }
}

.w-launcher {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px;
}
.w-launcher p {
  margin: 0; font-size: 12.5px; color: var(--vps-text-body); line-height: 1.5;
}

/* Add-widget tile (last in widget-row) */
.widget.add-widget {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  border-style: dashed;
  background: transparent;
  color: var(--vps-text-muted);
  text-align: center;
  cursor: pointer;
}
.widget.add-widget:hover {
  background: var(--vps-bg-card);
  border-style: solid;
}
.add-widget-plus {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(96,165,250,0.30);
  color: var(--vps-blue-300);
}
.add-widget-title { font-size: 13px; font-weight: 600; color: var(--vps-text-secondary); }
.add-widget-sub { font-size: 11.5px; color: var(--vps-text-muted); margin-top: 2px; }

/* ============================================================
   TILE pin button
   ============================================================ */
.tile {
  position: relative;
  background: var(--vps-bg-elevated);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-lg);
  padding: 0;
  display: flex; flex-direction: column;
  text-align: left;
  transition: border-color 200ms, transform 200ms, background 200ms;
  min-height: 138px;
  overflow: hidden;
}
.tile:hover { border-color: var(--vps-border-hover); transform: translateY(-2px); }
.tile.is-pinned { border-color: rgba(96,165,250,0.35); }
.tile.is-pinned::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--vps-blue-400), var(--vps-amber-300));
  z-index: 1;
}
.tile-body {
  flex: 1;
  padding: 18px 18px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex; flex-direction: column;
}
.tile-pin {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 0;
  border-top: 1px solid var(--vps-border);
  background: transparent;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--vps-text-muted);
  transition: background 150ms, color 150ms;
  cursor: pointer;
}
.tile-pin:hover { background: var(--vps-bg-card); color: var(--vps-text-primary); }
.tile-pin.pinned {
  color: var(--vps-blue-300);
  background: rgba(37,99,235,0.06);
  border-top-color: rgba(96,165,250,0.30);
}
.tile-pin.pinned:hover {
  color: var(--vps-red-400);
  background: rgba(239,68,68,0.08);
}
.tile-pin.pinned:hover::after { content: " — Unpin"; }
[data-theme="light"] .tile-pin.pinned { color: var(--vps-blue-700); }

/* Tool-shell pin button */
.pin-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--vps-bg-card);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 600;
  color: var(--vps-text-secondary);
  transition: border-color 160ms, background 160ms, color 160ms;
}
.pin-btn:hover { border-color: var(--vps-border-hover); color: var(--vps-text-primary); }
.pin-btn.pinned {
  background: rgba(37,99,235,0.10);
  border-color: rgba(96,165,250,0.35);
  color: var(--vps-blue-300);
}
.pin-btn.pinned:hover { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.40); color: var(--vps-red-400); }
.pin-btn.pinned:hover .pin-ic::before { content: "−"; }
.pin-btn.pinned:hover .pin-ic { font-size: 0; }
.pin-btn.pinned:hover .pin-ic::before { font-size: 14px; }
[data-theme="light"] .pin-btn.pinned { color: var(--vps-blue-700); }
.pin-ic {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  font-size: 14px;
  font-weight: 700;
}
.pin-btn.pinned .pin-ic {
  background: rgba(96,165,250,0.18);
  color: var(--vps-blue-200);
}
[data-theme="light"] .pin-ic { background: rgba(11,16,32,0.06); }

/* ============================================================
   ADD-WIDGET MODAL
   ============================================================ */
.add-modal {
  width: min(720px, 92vw);
  max-height: 84vh;
  background: var(--vps-bg-elevated-solid);
  border: 1px solid var(--vps-border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: cmdRise 220ms cubic-bezier(0.22, 1.1, 0.36, 1);
  display: flex; flex-direction: column;
}
.add-modal-head {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--vps-border);
}
.add-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.add-modal-head p { margin: 4px 0 0; font-size: 12px; color: var(--vps-text-muted); }
.add-modal-head .icon-btn { margin-left: auto; }
.add-modal .cmd-input {
  border-bottom: 1px solid var(--vps-border);
  border-radius: 0;
  font-size: 14px;
}
.add-modal-body {
  overflow-y: auto;
  padding: 14px 14px 20px;
  flex: 1;
}
.add-cat { margin-bottom: 16px; }
.add-cat h4 {
  margin: 8px 6px 8px;
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--vps-text-muted); font-weight: 600;
}
.add-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 640px) { .add-cat-grid { grid-template-columns: 1fr 1fr; } }
.add-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--vps-bg-card);
  border: 1px solid var(--vps-border);
  border-radius: var(--r-md);
  text-align: left;
  color: var(--vps-text-primary);
  cursor: pointer;
  transition: border-color 160ms, background 160ms, transform 160ms;
}
.add-card:hover { border-color: var(--vps-border-hover); background: var(--vps-bg-card-hover); }
.add-card.pinned {
  border-color: rgba(96,165,250,0.35);
  background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(37,99,235,0.02));
}
.add-card-ic {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(23,37,84,0.20));
  border: 1px solid rgba(96,165,250,0.20);
  flex-shrink: 0;
}
.add-card-text { flex: 1; min-width: 0; }
.add-card-name {
  font-size: 13.5px; font-weight: 600; color: var(--vps-text-primary);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.add-card-desc {
  font-size: 11.5px; color: var(--vps-text-body); margin-top: 2px; line-height: 1.4;
}
.add-card-pill {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.30);
  color: var(--vps-green-300); font-weight: 600;
}
.add-card-pill.new {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
  color: var(--vps-amber-300);
}
.add-card-toggle {
  font-family: var(--font-mono); font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--vps-border);
  color: var(--vps-text-muted);
  flex-shrink: 0;
}
.add-card-toggle.on {
  background: rgba(96,165,250,0.18);
  border-color: rgba(96,165,250,0.45);
  color: var(--vps-blue-200);
}
[data-theme="light"] .add-card-toggle.on { color: var(--vps-blue-700); }

/* ============================================================
   WATERCOOLER
   ============================================================ */
.wc-card {
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(139,92,246,0.18), transparent 40%),
    radial-gradient(circle at 92% 100%, rgba(245,158,11,0.12), transparent 45%),
    var(--vps-bg-elevated);
}
.wc-tabs { gap: 6px; }
.wc-tab { display: inline-flex; align-items: center; gap: 6px; }
.wc-tab-ic { font-size: 14px; line-height: 1; }
.wc-stage {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 200px;
  padding: 16px 0;
}
.wc-quote {
  position: relative;
  padding: 0 20px 0 36px;
  animation: wcFade 400ms ease;
}
@keyframes wcFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.wc-quote p {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--vps-text-primary);
  text-wrap: balance;
}
.wc-quote-mark {
  position: absolute; top: -10px; left: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px; line-height: 1;
  color: var(--vps-blue-400);
  opacity: 0.4;
}
.wc-quote.amber .wc-quote-mark { color: var(--vps-amber-400); }
.wc-quote.green .wc-quote-mark { color: var(--vps-green-400); }
.wc-quote.violet .wc-quote-mark { color: var(--vps-violet-400); }
.wc-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding: 0 20px 0 36px;
}
.wc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(139,92,246,0.35);
  color: var(--vps-violet-400);
  font-weight: 600;
}
.wc-pill.subtle {
  background: transparent;
  border-color: var(--vps-border);
  color: var(--vps-text-muted);
}
.wc-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Watercooler compact widget */
.wc-compact {
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.wc-compact-tabs { display: flex; gap: 4px; }
.wc-compact-tab {
  width: 28px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--vps-bg-card);
  border: 1px solid var(--vps-border);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.wc-compact-tab:hover { border-color: var(--vps-border-hover); }
.wc-compact-tab.active {
  background: rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.50);
}
.wc-compact-quote {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border-left: 2px solid var(--vps-violet-400);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vps-text-secondary);
  min-height: 80px;
  display: flex; align-items: center;
  animation: wcFade 380ms ease;
}
.wc-compact-quote p {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-compact-quote.amber { border-left-color: var(--vps-amber-400); }
.wc-compact-quote.blue { border-left-color: var(--vps-blue-400); }
.wc-compact-quote.green { border-left-color: var(--vps-green-400); }
.wc-compact-quote.violet { border-left-color: var(--vps-violet-400); }
.wc-compact-next {
  align-self: stretch;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 10px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(96,165,250,0.30);
  color: var(--vps-blue-300);
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms;
}
.wc-compact-next:hover { background: rgba(37,99,235,0.20); color: #fff; }
[data-theme="light"] .wc-compact-next { color: var(--vps-blue-700); }
[data-theme="light"] .wc-compact-quote { background: rgba(11,16,32,0.04); }

/* ============================================================
   STOPWATCH / POMODORO COMPACT
   ============================================================ */
.sw-compact {
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  flex: 1; justify-content: center;
}
.sw-compact-time {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--vps-text-primary) 25%, var(--vps-blue-200) 70%, var(--vps-amber-200) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .sw-compact-time {
  background: linear-gradient(135deg, #0b1020 30%, var(--vps-blue-700) 70%, var(--vps-amber-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sw-compact-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   LIVE COMPACT WIDGETS (weather, FX, crypto)
   ============================================================ */
.live-compact {
  display: flex; flex-direction: column;
  flex: 1; gap: 8px;
}
.live-compact-main {
  display: flex; align-items: center; gap: 14px;
}
.live-compact-big {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vps-text-primary);
  font-variant-numeric: tabular-nums;
}
.live-compact-sub {
  font-size: 11.5px; color: var(--vps-text-muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.live-compact-meta {
  font-size: 10.5px; color: var(--vps-blue-300);
  text-transform: uppercase; letter-spacing: 0.18em;
  margin-top: auto;
}
[data-theme="light"] .live-compact-meta { color: var(--vps-blue-700); }

/* FX mini rows */
.fx-mini-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed var(--vps-border);
  font-size: 13px;
}
.fx-mini-row:last-child { border-bottom: 0; }
.fx-mini-code { color: var(--vps-text-body); letter-spacing: 0.04em; font-weight: 600; font-size: 11.5px; }
.fx-mini-val { color: var(--vps-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* FX page pair grid */
.fx-pair {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--vps-border);
  border-radius: 8px;
}
.fx-pair-code { font-size: 11px; color: var(--vps-text-muted); letter-spacing: 0.10em; font-weight: 600; }
.fx-pair-rate { font-size: 14px; color: var(--vps-text-primary); font-weight: 600; }
[data-theme="light"] .fx-pair { background: rgba(11,16,32,0.03); }

/* ============================================================
   FORMULA / CODE OUTPUT BOX
   ============================================================ */
.formula-output {
  margin: 0;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--vps-border);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--vps-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
[data-theme="light"] .formula-output { background: rgba(255,255,255,0.7); color: #1f2937; }

/* ============================================================
   REGEX TESTER
   ============================================================ */
.rx-output {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--vps-border);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 220px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--vps-text-secondary);
  overflow-y: auto;
}
[data-theme="light"] .rx-output { background: rgba(255,255,255,0.7); color: #1f2937; }
.rx-hl {
  background: rgba(252,211,77,0.25);
  border: 1px solid rgba(245,158,11,0.50);
  border-radius: 3px;
  padding: 0 2px;
  color: var(--vps-amber-200);
  font-weight: 600;
}
[data-theme="light"] .rx-hl { color: #92400e; background: rgba(252,211,77,0.55); }

/* ============================================================
   CLEANUP options
   ============================================================ */
.cu-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--vps-border);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.cu-opt:hover { border-color: var(--vps-border-hover); }
.cu-opt.on {
  background: rgba(37,99,235,0.08);
  border-color: rgba(96,165,250,0.40);
}
.cu-opt-tick {
  width: 18px; height: 18px;
  border: 1.5px solid var(--vps-border-strong);
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 150ms, border-color 150ms;
}
.cu-opt-tick.on { background: var(--vps-blue-500); border-color: var(--vps-blue-500); }
.cu-opt-label { font-size: 12.5px; font-weight: 600; color: var(--vps-text-primary); }
.cu-opt-hint { font-size: 11px; color: var(--vps-text-muted); margin-top: 2px; line-height: 1.4; }

/* ============================================================
   MOBILE / TABLET (≤880px): sidebar becomes a slide-in drawer.
   Hamburger toggles `.is-open` on the aside.
   ============================================================ */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }

  /* Sidebar slides in from the left, full-height, taking 84% of viewport but
     capped at 320px so it doesn't dominate tablets. */
  .sidebar {
    position: fixed; top: 0; left: 0;
    width: min(320px, 84vw); height: 100dvh; height: 100vh;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.4, 1);
    z-index: 30;
    border-right: 1px solid var(--vps-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.30);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sb-backdrop { display: block; }
  .sb-close { display: inline-flex; align-items: center; justify-content: center; }
  .sb-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* Main content gets full width and a little bottom padding for safe area */
  .main { padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }
}

/* Hide the close-✕ button on desktop (it lives in the brand area) */
@media (min-width: 881px) {
  .sb-close { display: none !important; }
}

/* ============================================================
   TOPBAR — let auth controls + crumb wrap below ~540px so the
   row never overflows on narrow screens.
   ============================================================ */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 0; }
  .crumb { flex: 1 1 auto; min-width: 0; }
  .crumb .crumb-root { display: none; }   /* save horizontal room */
  .crumb .sep { display: none; }
  .topbar-right { gap: 6px; flex-wrap: wrap; }
}

/* ============================================================
   POMODORO — the 280px focus ring overflows on phones; clamp it.
   Tutorial overlay needs a scroll cap on short viewports too.
   ============================================================ */
@media (max-width: 480px) {
  .pomo-tut { max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 20px 18px; }
}

/* ============================================================
   CUSTOMIZE BAR — wrap actions onto their own line on small screens
   so the descriptive text doesn't get crushed by the buttons.
   ============================================================ */
@media (max-width: 600px) {
  .customize-bar { flex-wrap: wrap; row-gap: 10px; }
  .customize-bar .cb-actions { width: 100%; }
}

/* ============================================================
   KO-FI WIDGET — on small screens nudge it out of the way so it
   doesn't sit on top of clickable content. We don't control the
   floating widget script's own DOM, but we can push our mount
   container around and reduce its visual weight.
   ============================================================ */
@media (max-width: 600px) {
  #kofi-mount.kofi-mount-fixed { bottom: 8px; }
  /* For the floating overlay variant: keep it but make sure it doesn't
     overlap a focused input by giving it slightly less prominence. */
  .floatingchat-container-wrap,
  .floatingchat-container-wrap-mobi { transform: scale(0.85); transform-origin: bottom right; }
}

/* ============================================================
   TOUCH TARGETS — bump the smallest interactive elements so they're
   reliably tappable. Pointer:coarse matches phone/tablet input modes.
   ============================================================ */
@media (pointer: coarse) {
  .icon-btn { width: 40px; height: 40px; }
  .sb-item { padding: 10px 10px; min-height: 40px; }
  .wd-cog { width: 32px; height: 32px; }
  .w-open, .w-remove { width: 30px; height: 30px; font-size: 13px; }
  .wc-x { padding: 6px 12px; }
  .chip { padding: 9px 14px; }
  .nps-btn { height: 48px; }
  .pomo-help-btn { width: 34px; height: 34px; }
  .wc-compact-tab { width: 36px; height: 32px; }
  .copy-btn { padding: 8px 12px; }
}

/* ============================================================
   FEEDBACK TOOL
   ============================================================ */
.fb-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 980px) {
  .fb-shell { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.fb-card { padding: 22px 24px; }
.fb-section { padding: 14px 0; }
.fb-section:first-child { padding-top: 0; }
.fb-hr {
  border: 0;
  border-top: 1px solid var(--vps-border);
  margin: 4px 0 0;
}

/* NPS scale */
.nps-row {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 6px;
  margin: 12px 0 8px;
}
@media (max-width: 600px) {
  .nps-row { grid-template-columns: repeat(6, 1fr); }
}
.nps-btn {
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--vps-border);
  background: var(--vps-bg-card);
  color: var(--vps-text-secondary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  transition: transform 100ms ease, border-color 150ms, background 150ms, color 150ms;
}
.nps-btn:hover { border-color: var(--vps-border-hover); color: var(--vps-text-primary); }
.nps-btn:active { transform: scale(0.96); }
.nps-btn.active {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20), 0 0 18px -4px rgba(96,165,250,0.55);
  border-color: transparent;
}
[data-theme="light"] .nps-btn.active { color: #0b1020; }
.nps-btn.active.d { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.nps-btn.active.p { background: linear-gradient(135deg, #f59e0b, #d97706); }
.nps-btn.active.g { background: linear-gradient(135deg, #10b981, #047857); }
.nps-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--vps-text-muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.nps-axis span:nth-child(2) { text-align: center; flex: 1; }

/* Turnstile box — give it a stable height so layout doesn't jump while it loads */
.ts-wrap {
  min-height: 70px;
  display: flex;
  align-items: center;
}

/* Result banner */
.fb-result {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
}
.fb-result .ic { font-weight: 700; }
.fb-result.ok {
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.35);
  color: var(--vps-green-300);
}
.fb-result.err {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.35);
  color: var(--vps-red-400);
}

/* Side card */
.fb-side {
  padding: 22px 24px;
}
.fb-side h3 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vps-blue-300);
  font-weight: 600;
}
[data-theme="light"] .fb-side h3 { color: var(--vps-blue-700); }
.fb-side ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--vps-text-body);
}
.fb-side ul li { margin-bottom: 8px; }
.fb-side b { color: var(--vps-text-secondary); font-weight: 500; }
.small { font-size: 12px; }

/* ============================================================
   KO-FI WIDGET POSITIONING
   Ko-fi's floating-chat anchors to the bottom-LEFT by default, which
   collides with our sticky sidebar. Force it to the right side.
   Selectors target every plausible id/class the widget might use,
   so this stays robust if Ko-fi tweaks its DOM.
   ============================================================ */
[id^="kofi-"],
[id*="kofi-widget"],
[class^="kofi-"],
[class*="kofi-widget"] {
  left: auto !important;
  right: 16px !important;
}

/* The expanded chat panel may also use left positioning — same override */
iframe[src*="ko-fi.com"],
iframe[id*="kofi"] {
  left: auto !important;
  right: 16px !important;
}

@media (max-width: 880px) {
  /* On mobile the bottom nav lives at top; bring the widget closer to the corner */
  [id^="kofi-"], [class^="kofi-"] { right: 8px !important; bottom: 8px !important; }
}