:root {
  color-scheme: light;
  --blue: #1a6aff;
  --blue-light: #4d8fff;
  --blue-muted: #d6e4ff;
  --blue-dark: #0a4fcc;
  --navy: #0d1626;
  --navy-s1: #131e38;
  --navy-s2: #1a2848;
  --navy-s3: #243258;
  --navy-s4: #2e3f6a;
  --gold: #f5c34d;
  --gold-strong: #92400e;
  --gold-muted: #fdf3d4;
  --white: #ffffff;
  --off-white: #f4f7fc;
  --light-s1: #eef2f9;
  --light-s2: #dde3ef;
  --bg: #ffffff;
  --bg-soft: #f4f7fc;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: #ffffff;
  --panel-alt: #eef2f9;
  --line: #dde3ef;
  --line-strong: #b8c4dc;
  --text: #0d1626;
  --muted: #3a4565;
  --faint: #8f9bbd;
  --glass: rgba(255, 255, 255, 0.82);
  --control-bg: rgba(244, 247, 252, 0.86);
  --control-hover: rgba(214, 228, 255, 0.7);
  --list-bg: rgba(244, 247, 252, 0.72);
  --accent-bg: rgba(26, 106, 255, 0.08);
  --avatar-bg: #eef2f9;
  --avatar-shadow: 0 26px 36px rgba(13, 22, 38, 0.16);
  --teal: var(--blue);
  --teal-deep: var(--blue-dark);
  --green: #22c55e;
  --amber: #f5c34d;
  --amber-strong: #b45309;
  --rose: #ef4444;
  --violet: #8b7cff;
  --cyan: #17c9c3;
  --mint: #73e08a;
  --coral: #ff7c8d;
  --shadow: 0 18px 48px rgba(13, 22, 38, 0.1);
  --radius: 12px;
  --btn-shadow-blue: 0 4px 0 #1147cc;
  --btn-shadow-green: 0 4px 0 #15803d;
  --btn-shadow-amber: 0 4px 0 #b45309;
  --btn-shadow-rose: 0 4px 0 #b91c1c;
  --card-border-blue: rgba(26, 106, 255, 0.55);
  --card-border-green: rgba(34, 197, 94, 0.55);
  --card-border-amber: rgba(245, 195, 77, 0.6);
  --card-border-rose: rgba(239, 68, 68, 0.5);
  --glow-blue: rgba(26, 106, 255, 0.18);
  --glow-green: rgba(34, 197, 94, 0.18);
  --glow-amber: rgba(245, 195, 77, 0.22);
  --glow-rose: rgba(239, 68, 68, 0.16);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* P1/P2 feature surfaces */
.deep-work-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #1e3a5f;
  color: #fff;
  font-weight: 700;
}

.deep-work-banner span {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

.morning-priority-card,
.pinned-plan-card,
.goal-momentum-detail,
.journal-reflection-card,
.finance-trend-card,
.pomodoro-live-output,
.mindful-break-output,
.strategist-output,
.rate-review-output {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow);
}

.morning-priority-card,
.pinned-plan-card,
.goal-momentum-detail {
  margin: 14px 0;
  padding: 16px;
}

.morning-priority-input-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.morning-priority-input-row input {
  flex: 1;
  min-width: 0;
}

.goal-momentum-detail {
  display: grid;
  gap: 12px;
}

.momentum-breakdown-list {
  display: grid;
  gap: 10px;
}

.momentum-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 90px;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.momentum-breakdown-row strong {
  color: var(--text);
}

.momentum-mini-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.momentum-mini-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.journal-main-field {
  position: relative;
}

.journal-word-count {
  align-self: flex-end;
  color: var(--muted);
  font-size: 12px;
}

.journal-reflection-card {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.journal-reflection-card p {
  margin: 0;
}

.jobs-tab-row {
  display: inline-flex;
  gap: 6px;
  width: fit-content;
  margin: 0 0 14px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
}

.jobs-tab-row button {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.jobs-tab-row button.is-active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.job-list.is-hidden {
  display: none;
}

.pipeline-board {
  display: grid;
  gap: 14px;
}

.pipeline-stage-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pipeline-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pipeline-stage-pill strong {
  color: var(--blue);
}

.pipeline-column-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.pipeline-column {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  padding: 12px;
}

.pipeline-column-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pipeline-card-list {
  display: grid;
  gap: 10px;
}

.pipeline-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.directory-panel,
.directory-grid,
.directory-card {
  display: grid;
  gap: 12px;
}

.directory-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.directory-card {
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.academy-lesson-viewer,
.academy-content-blocks {
  display: grid;
  gap: 14px;
}

.academy-lesson-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.academy-lesson-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.academy-callout {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--text);
}

.habit-heatmap-section {
  margin-top: 16px;
}

.habit-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(13, 12px);
  gap: 3px;
  margin-top: 8px;
}

.habit-heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #e5e7eb;
}

.habit-heatmap-cell.is-done {
  background: #22c55e;
}

.habit-heatmap-cell.is-streak {
  background: #166534;
}

.add-habit-action {
  margin-top: 12px;
}

.habit-row-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--habit-color, #2563eb) 12%, #fff);
}

.finance-trend-card {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
}

.finance-trend-canvas {
  width: 100%;
  height: 176px;
}

.monthly-goal-field {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

.expense-category-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.expense-category-pills span,
.invoice-age {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pomodoro-live-output,
.mindful-break-output,
.strategist-output,
.rate-review-output {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
}

.pomodoro-ring,
.breathing-circle {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--blue) var(--progress, 0deg), rgba(15, 23, 42, 0.08) 0);
  color: var(--text);
  font-weight: 900;
}

.breathing-circle {
  animation: filoo-breathe 16s ease-in-out infinite;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.04));
}

@keyframes filoo-breathe {
  0%, 100% { transform: scale(0.82); }
  25%, 50% { transform: scale(1); }
  75% { transform: scale(0.82); }
}

.rate-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rate-review-grid span {
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
}

@media (max-width: 768px) {
  .deep-work-banner,
  .morning-priority-input-row,
  .momentum-breakdown-row {
    align-items: stretch;
  }

  .deep-work-banner,
  .morning-priority-input-row {
    flex-direction: column;
  }

  .momentum-breakdown-row {
    grid-template-columns: 1fr;
  }

  .pipeline-column-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }

  .pipeline-column {
    min-width: min(86vw, 340px);
    scroll-snap-align: start;
  }

  .rate-review-grid {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="night"] .notification-center-panel {
  border-color: rgba(77, 143, 255, 0.24);
  background: linear-gradient(145deg, rgba(13, 22, 38, 0.98), rgba(19, 30, 56, 0.94));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

:root[data-theme="night"] .notification-center-item {
  border-color: rgba(77, 143, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="night"] .notification-center-item:hover {
  background: rgba(26, 106, 255, 0.12);
}

:root[data-theme="night"] .notification-center-item.is-read {
  background: rgba(255, 255, 255, 0.035);
}

:root[data-theme="night"] .notification-read-label {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
}

@media (max-width: 768px) {
  .topbar-actions .topbar-notification-button {
    display: inline-flex !important;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 13px;
  }

  .notification-center-panel {
    top: 72px;
    left: 12px;
    right: 12px;
    width: auto;
    padding: 12px;
    border-radius: 18px;
  }

  .notification-center-panel header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .notification-read-all {
    grid-column: 2 / 3;
    justify-self: start;
    min-height: 30px;
  }

  .notification-center-panel header .icon-button {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
}

/* === Home Filoo dedicated live container === */
.home-filoo-container {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: grid;
  isolation: isolate;
  contain: layout paint;
  overflow: visible;
}

.home-filoo-frame-shell {
  position: relative;
  min-height: 100%;
  display: grid;
  overflow: visible;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.home-filoo-frame-surface {
  position: absolute;
  inset: 16px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 68% 34%, var(--glow-color), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  opacity: 0.9;
}

.home-filoo-container .hero-avatar-stage {
  z-index: 1;
  width: 100%;
  border-left: 0;
  background: transparent;
}

.home-filoo-container .mood-pill,
.home-filoo-container .avatar-accessory,
.home-filoo-container .avatar-stage-actions,
.home-filoo-container .avatar-hero-bubble,
.home-filoo-container .filoo-hero-video-wrap {
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .home-filoo-container {
    min-height: 160px;
    margin: 0 16px 8px;
  }

  .app-shell.view-dashboard .home-filoo-frame-shell {
    min-height: 160px;
    border-left: 0;
  }

  .app-shell.view-dashboard .home-filoo-frame-surface {
    inset: 0;
    border-radius: 16px;
  }

  .app-shell.view-dashboard .home-filoo-container .hero-avatar-stage {
    height: 160px;
    min-height: 160px;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .app-shell.view-dashboard .home-filoo-container,
  .app-shell.view-dashboard .home-filoo-frame-shell,
  .app-shell.view-dashboard .home-filoo-container .hero-avatar-stage {
    min-height: 150px;
    height: 150px;
  }
}

/* Chat stability + modern AI/voice motion */
.quick-chat-panel {
  z-index: 130;
  pointer-events: auto;
}

.companion-dock {
  z-index: 120;
}

.chat-log,
.quick-chat-log {
  scroll-behavior: auto;
  overscroll-behavior: contain;
}

.chat-message.is-thinking .chat-bubble {
  min-width: 138px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.14), rgba(23, 201, 195, 0.09)),
    var(--control-bg);
  border: 1px solid rgba(26, 106, 255, 0.14);
}

.chat-message.is-thinking img {
  animation: filooThinkingHalo 1.8s ease-in-out infinite;
}

.filoo-thinking-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}

.filoo-thinking-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue);
  animation: filooThinkingDot 1.05s ease-in-out infinite;
}

.filoo-thinking-indicator span:nth-child(2) {
  animation-delay: 0.16s;
}

.filoo-thinking-indicator span:nth-child(3) {
  animation-delay: 0.32s;
}

.filoo-thinking-indicator i {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

@keyframes filooThinkingDot {
  0%, 100% {
    transform: translateY(0) scale(0.82);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-5px) scale(1.12);
    opacity: 1;
  }
}

@keyframes filooThinkingHalo {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(26, 106, 255, 0.22);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(26, 106, 255, 0);
    transform: translateY(-2px);
  }
}

.voice-visualizer {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 50%, rgba(26, 106, 255, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(244, 247, 252, 0.72));
}

.voice-visualizer::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 90deg, transparent, rgba(26, 106, 255, 0.16), transparent 32%);
  opacity: 0;
  animation: voiceAurora 6s linear infinite;
}

.voice-visualizer.is-listening::before,
.voice-visualizer.is-speaking::before {
  opacity: 1;
}

.voice-orb,
.voice-wave,
.voice-visualizer small {
  position: relative;
  z-index: 1;
}

.voice-orb {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 14px 32px rgba(26, 106, 255, 0.22);
}

.voice-orb i {
  width: 18px;
  height: 18px;
  border-radius: inherit;
  background: #fff;
  opacity: 0.9;
}

.voice-visualizer.is-listening .voice-orb {
  animation: voiceOrbListen 1.45s ease-in-out infinite;
}

.voice-visualizer.is-speaking .voice-orb {
  animation: voiceOrbSpeak 0.9s ease-in-out infinite;
}

.voice-wave {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
}

.voice-wave b {
  display: block;
  width: 5px;
  height: 9px;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0.38;
  transform-origin: center;
}

.voice-visualizer.is-listening .voice-wave b,
.voice-visualizer.is-speaking .voice-wave b {
  animation: voiceWaveRise 0.86s ease-in-out infinite;
}

.voice-wave b:nth-child(2) { animation-delay: 0.1s; }
.voice-wave b:nth-child(3) { animation-delay: 0.2s; }
.voice-wave b:nth-child(4) { animation-delay: 0.3s; }
.voice-wave b:nth-child(5) { animation-delay: 0.4s; }

.voice-visualizer small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@keyframes voiceAurora {
  to { transform: rotate(360deg); }
}

@keyframes voiceOrbListen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.25), 0 14px 32px rgba(26, 106, 255, 0.22); }
  50% { box-shadow: 0 0 0 11px rgba(34, 197, 94, 0), 0 18px 38px rgba(26, 106, 255, 0.28); }
}

@keyframes voiceOrbSpeak {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes voiceWaveRise {
  0%, 100% {
    height: 9px;
    opacity: 0.45;
  }
  50% {
    height: 30px;
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .quick-chat-panel {
    z-index: 130;
  }

  .voice-visualizer {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .voice-visualizer small {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filoo-thinking-indicator span,
  .chat-message.is-thinking img,
  .voice-visualizer::before,
  .voice-orb,
  .voice-wave b {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .hero-panel {
    margin-bottom: 16px;
  }

  .app-shell.view-dashboard .hero-avatar-stage {
    min-height: 88px;
    height: 118px;
    margin: 0 16px 8px;
    padding: 14px 14px 14px 16px;
    overflow: hidden;
  }

  .app-shell.view-dashboard .avatar-hero-bubble {
    max-width: 60%;
    padding-right: 12px;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 90px;
    height: 90px;
    aspect-ratio: 1;
    align-self: flex-end;
  }

  .app-shell.view-dashboard .hero-avatar-stage img {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 90px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .app-shell.view-dashboard .metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
  }

  .app-shell.view-dashboard .metric-card {
    min-height: 90px;
    height: auto;
    padding: 12px 14px;
    border-top-width: 2px;
    border-radius: 16px;
  }

  .app-shell.view-dashboard .metric-card::after {
    inset: auto 14px 0;
    height: 3px;
  }

  .app-shell.view-dashboard .metric-topline {
    gap: 6px;
    min-width: 0;
  }

  .app-shell.view-dashboard .metric-icon {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    flex: 0 0 auto;
  }

  .app-shell.view-dashboard .metric-icon svg {
    width: 12px;
    height: 12px;
  }

  .app-shell.view-dashboard .metric-card p {
    min-width: 0;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shell.view-dashboard .metric-card strong {
    margin: 6px 0 2px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .app-shell.view-dashboard .metric-card > span {
    display: block;
    color: #888;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shell.view-dashboard .metric-card-link {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    width: 14px;
    height: 14px;
    overflow: hidden;
    color: var(--metric-color, var(--blue));
    font-size: 0;
  }

  .app-shell.view-dashboard .metric-card-link svg {
    width: 14px;
    height: 14px;
  }

  .app-shell.view-dashboard .metric-progress {
    height: 3px;
    margin-top: auto;
    border-radius: 2px;
  }
}

/* === compact jobs alert UI === */
@media (max-width: 768px) {
  .jobs-main-panel .section-heading {
    margin-bottom: 10px;
  }

  .job-list {
    gap: 8px;
  }

  .job-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 10px;
  }

  .job-card-head {
    gap: 8px;
  }

  .job-card h3 {
    font-size: 14px;
  }

  .job-card p {
    font-size: 12px;
    line-height: 1.35;
  }

  .job-score {
    justify-self: start;
    text-align: left;
  }

  .job-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .job-card-actions .compact {
    min-height: 34px;
    padding: 0 8px;
    font-size: 11px;
  }

  .connected-accounts-panel {
    gap: 10px;
  }

  .jobs-settings-section {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
  }

  .job-source-form .settings-grid.two,
  .job-draft-form .settings-grid.two {
    grid-template-columns: 1fr;
  }
}

/* === final mobile Filoo mascot visibility fix === */
@media (max-width: 768px) {
  .app-shell.view-dashboard .hero-avatar-stage {
    height: 160px;
    overflow: visible;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap,
  .app-shell.view-dashboard .hero-avatar-stage img {
    right: 10px;
    bottom: 0;
    width: 140px;
    height: 140px;
    overflow: visible;
    object-fit: contain;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .app-shell.view-dashboard .hero-avatar-stage {
    height: 150px;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap,
  .app-shell.view-dashboard .hero-avatar-stage img {
    width: 130px;
    height: 130px;
  }
}

/* === final mobile productivity board optimization === */
@media (max-width: 768px) {
  body,
  #filoo-root,
  .app-shell,
  .main-content {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell.view-work .page-head,
  .board-panel,
  .work-organizer-panel,
  .productivity-board-shell,
  .kanban,
  .kanban-column,
  .kanban .task-card {
    min-width: 0;
    max-width: 100%;
  }

  .work-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .board-panel {
    padding: 12px;
  }

  .board-panel .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .board-panel .section-heading > div {
    min-width: 0;
  }

  .board-panel .section-heading h2 {
    max-width: 100%;
    overflow: hidden;
    font-size: 22px;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .board-panel .section-heading .primary-action.compact {
    min-width: 92px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .board-panel .section-heading .icon-button {
    width: 38px;
    height: 38px;
  }

  .work-filter-panel {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 10px;
  }

  .work-filter-row {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .work-filter-row::-webkit-scrollbar {
    display: none;
  }

  .work-filter-chip {
    flex: 0 0 auto;
    min-height: 32px;
    max-width: 140px;
    padding: 0 10px;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .productivity-board-shell {
    max-height: min(62vh, 620px);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 2px 4px 0;
    scroll-snap-type: none;
  }

  .kanban-mobile-hint {
    display: flex;
    justify-content: space-between;
    margin: 0 0 8px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--control-bg);
    color: var(--muted);
    font-size: 11px;
  }

  .kanban {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .kanban-column {
    width: 100%;
    min-width: 0;
    max-height: none;
    gap: 8px;
    padding: 10px;
    overflow: visible;
    scroll-snap-align: none;
    border-radius: 12px;
  }

  .column-title {
    gap: 10px;
    min-width: 0;
  }

  .column-title span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .kanban .task-card {
    gap: 8px;
    min-height: 0;
    padding: 10px;
    border-radius: 12px;
  }

  .kanban .task-card h3 {
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .kanban .task-card .microcopy {
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .kanban .task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    font-size: 10px;
  }

  .kanban .task-meta span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kanban .work-tag-row,
  .kanban .task-card-actions {
    min-width: 0;
  }

  .kanban .work-tag {
    max-width: 136px;
    min-height: 26px;
    padding: 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .task-resource-row {
    flex-wrap: wrap;
    margin-top: 0;
  }

  .task-resource-row span {
    min-width: 0;
    max-width: 100%;
  }

  .task-resource-row em {
    max-width: 170px;
  }

  .task-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
  }

  .task-card-actions .ghost-action,
  .task-card-actions .task-complete-btn,
  .task-card-actions .task-undo-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .task-card-actions .ghost-action {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .add-task-row {
    min-height: 36px;
  }

  .work-organizer-panel {
    gap: 12px;
    padding: 12px;
  }

  .work-calendar {
    padding: 10px;
  }

  .work-calendar-grid {
    gap: 5px;
  }

  .work-calendar-day {
    min-height: 44px;
    padding: 5px;
    border-radius: 10px;
  }

  .completed-task-item {
    grid-template-columns: 1fr;
  }

  .completed-task-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .completed-task-toolbar .secondary-action,
  .completed-task-actions .ghost-action {
    width: 100%;
    justify-content: center;
  }

  .completed-task-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* === final mobile page overflow guard === */
@media (max-width: 768px) {
  img,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  .panel,
  .metric-card,
  .task-card,
  .job-card,
  .finance-entry-card,
  .habit-row,
  .journal-entry-card,
  .health-metric-card,
  .world-tab-panel,
  .settings-section,
  .entry-modal {
    min-width: 0;
    max-width: 100%;
  }

  .section-heading,
  .button-row,
  .task-card-actions,
  .finance-entry-actions {
    min-width: 0;
  }

  .section-heading h2,
  .panel h2,
  .task-card h3,
  .job-card h3,
  .habit-row strong,
  .journal-entry-card strong {
    overflow-wrap: anywhere;
  }
}

/* === final mobile productivity board optimization (wins cascade) === */
@media (max-width: 768px) {
  body,
  #filoo-root,
  .app-shell,
  .main-content {
    max-width: 100%;
    overflow-x: hidden;
  }

  .work-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .board-panel {
    padding: 12px;
  }

  .board-panel .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .board-panel .section-heading > div,
  .board-panel,
  .work-organizer-panel,
  .productivity-board-shell,
  .kanban,
  .kanban-column,
  .kanban .task-card {
    min-width: 0;
    max-width: 100%;
  }

  .board-panel .section-heading h2 {
    overflow: hidden;
    font-size: 22px;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .board-panel .section-heading .primary-action.compact {
    min-width: 92px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .board-panel .section-heading .icon-button {
    width: 38px;
    height: 38px;
  }

  .work-filter-panel {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 10px;
  }

  .work-filter-row {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .work-filter-row::-webkit-scrollbar {
    display: none;
  }

  .work-filter-chip {
    flex: 0 0 auto;
    min-height: 32px;
    max-width: 140px;
    padding: 0 10px;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .productivity-board-shell {
    max-height: min(62vh, 620px);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 2px 4px 0;
    scroll-snap-type: none;
  }

  .kanban-mobile-hint {
    display: flex;
    justify-content: space-between;
    margin: 0 0 8px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--control-bg);
    color: var(--muted);
    font-size: 11px;
  }

  .kanban {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .kanban-column {
    width: 100%;
    min-width: 0;
    max-height: none;
    gap: 8px;
    padding: 10px;
    overflow: visible;
    scroll-snap-align: none;
    border-radius: 12px;
  }

  .column-title,
  .kanban .work-tag-row,
  .kanban .task-card-actions {
    min-width: 0;
  }

  .column-title span,
  .kanban .task-card .microcopy,
  .task-card-actions .ghost-action {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .kanban .task-card {
    gap: 8px;
    min-height: 0;
    padding: 10px;
    border-radius: 12px;
  }

  .kanban .task-card h3 {
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .kanban .task-card .microcopy,
  .kanban .task-meta {
    font-size: 10px;
  }

  .kanban .task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .kanban .task-meta span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kanban .work-tag {
    max-width: 136px;
    min-height: 26px;
    padding: 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .task-resource-row {
    flex-wrap: wrap;
    margin-top: 0;
  }

  .task-resource-row span {
    min-width: 0;
    max-width: 100%;
  }

  .task-resource-row em {
    max-width: 170px;
  }

  .task-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .task-card-actions .ghost-action,
  .task-card-actions .task-complete-btn,
  .task-card-actions .task-undo-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .add-task-row {
    min-height: 36px;
  }

  .work-organizer-panel {
    gap: 12px;
    padding: 12px;
  }

  .work-calendar {
    padding: 10px;
  }

  .work-calendar-grid {
    gap: 5px;
  }

  .work-calendar-day {
    min-height: 44px;
    padding: 5px;
    border-radius: 10px;
  }

  .completed-task-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .hero-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 0 16px;
    overflow: hidden;
  }

  .app-shell.view-dashboard .hero-copy {
    display: grid;
    gap: 0;
    padding: 0 16px;
    align-self: start;
  }

  .app-shell.view-dashboard .hero-copy > .microcopy {
    margin: 0 0 6px;
  }

  .app-shell.view-dashboard .hero-copy h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
  }

  .app-shell.view-dashboard .motivation-widget {
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .app-shell.view-dashboard .motivation-widget-head {
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    gap: 8px;
    padding-bottom: 10px;
  }

  .app-shell.view-dashboard .motivation-mark,
  .app-shell.view-dashboard .quote-wand-button {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border-radius: 7px;
  }

  .app-shell.view-dashboard .motivation-mark svg,
  .app-shell.view-dashboard .quote-wand-button svg {
    width: 13px;
    height: 13px;
  }

  .app-shell.view-dashboard .motivation-widget-head strong {
    font-size: 13px;
    font-weight: 600;
  }

  .app-shell.view-dashboard .motivation-widget blockquote {
    display: block;
  }

  .app-shell.view-dashboard .motivation-widget blockquote p {
    min-height: 0;
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.4;
  }

  .app-shell.view-dashboard .motivation-widget blockquote footer {
    margin: 0 0 10px;
    font-size: 12px;
  }

  .app-shell.view-dashboard .motivation-prompt {
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .app-shell.view-dashboard .motivation-prompt svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 1px;
  }

  .app-shell.view-dashboard .motivation-prompt small {
    font-size: 12px;
    line-height: 1.4;
  }

  .app-shell.view-dashboard .focus-readout {
    justify-self: start;
    margin: 16px 0 10px;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
  }

  .app-shell.view-dashboard .focus-readout strong {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .app-shell.view-dashboard .focus-readout span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.2;
  }

  .app-shell.view-dashboard .hero-actions {
    display: flex;
    width: 100%;
    gap: 10px;
    margin: 0 0 16px;
    flex-wrap: nowrap;
  }

  .app-shell.view-dashboard .hero-actions .primary-action,
  .app-shell.view-dashboard .hero-actions .secondary-action {
    height: 48px;
    min-height: 48px;
    border-radius: 12px;
    white-space: nowrap;
  }

  .app-shell.view-dashboard .hero-actions .primary-action {
    flex: 1.5 1 0;
    font-size: 15px;
    font-weight: 600;
    background: #2563eb;
    color: #fff;
  }

  .app-shell.view-dashboard .hero-actions .secondary-action {
    flex: 1 1 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }

  .app-shell.view-dashboard .hero-avatar-stage {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 88px;
    height: 118px;
    margin: 0 16px 8px;
    padding: 14px 14px 14px 16px;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
  }

  .app-shell.view-dashboard .avatar-hero-bubble {
    position: relative;
    inset: auto;
    z-index: 4;
    flex: 1 1 auto;
    width: auto;
    max-width: 60%;
    padding: 0 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    opacity: 1;
    transform: none;
    backdrop-filter: none;
    animation: none;
  }

  .app-shell.view-dashboard .avatar-hero-bubble p {
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
  }

  .app-shell.view-dashboard .avatar-hero-bubble::after {
    display: none;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 90px;
    height: 90px;
    aspect-ratio: 1;
    align-self: flex-end;
  }

  .app-shell.view-dashboard .hero-avatar-stage img {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 90px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .app-shell.view-dashboard .avatar-glow,
  .app-shell.view-dashboard .avatar-accessory,
  .app-shell.view-dashboard .mood-pill {
    display: none;
  }

  .app-shell.view-dashboard .metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
  }

  .app-shell.view-dashboard .metric-card {
    min-height: 90px;
    height: auto;
    padding: 12px 14px;
    border-top-width: 2px;
    border-radius: 16px;
  }

  .app-shell.view-dashboard .metric-card::after {
    inset: auto 14px 0;
    height: 3px;
  }

  .app-shell.view-dashboard .metric-topline {
    gap: 6px;
    min-width: 0;
  }

  .app-shell.view-dashboard .metric-icon {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    flex: 0 0 auto;
  }

  .app-shell.view-dashboard .metric-icon svg {
    width: 12px;
    height: 12px;
  }

  .app-shell.view-dashboard .metric-card p {
    min-width: 0;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shell.view-dashboard .metric-card strong {
    margin: 6px 0 2px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .app-shell.view-dashboard .metric-card > span {
    display: block;
    color: #888;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shell.view-dashboard .metric-card-link {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    width: 14px;
    height: 14px;
    overflow: hidden;
    color: var(--metric-color, var(--blue));
    font-size: 0;
  }

  .app-shell.view-dashboard .metric-card-link svg {
    width: 14px;
    height: 14px;
  }

  .app-shell.view-dashboard .metric-progress {
    height: 3px;
    margin-top: auto;
    border-radius: 2px;
  }
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .hero-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 0 16px;
    overflow: hidden;
  }

  .app-shell.view-dashboard .hero-copy {
    display: grid;
    gap: 0;
    padding: 0 16px;
    align-self: start;
  }

  .app-shell.view-dashboard .hero-copy > .microcopy {
    margin: 0 0 6px;
  }

  .app-shell.view-dashboard .hero-copy h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
  }

  .app-shell.view-dashboard .motivation-widget {
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .app-shell.view-dashboard .motivation-widget-head {
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    gap: 8px;
    padding-bottom: 10px;
  }

  .app-shell.view-dashboard .motivation-mark,
  .app-shell.view-dashboard .quote-wand-button {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border-radius: 7px;
  }

  .app-shell.view-dashboard .motivation-mark svg,
  .app-shell.view-dashboard .quote-wand-button svg {
    width: 13px;
    height: 13px;
  }

  .app-shell.view-dashboard .motivation-widget-head strong {
    font-size: 13px;
    font-weight: 600;
  }

  .app-shell.view-dashboard .motivation-widget blockquote {
    display: block;
  }

  .app-shell.view-dashboard .motivation-widget blockquote p {
    min-height: 0;
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.4;
  }

  .app-shell.view-dashboard .motivation-widget blockquote footer {
    margin: 0 0 10px;
    font-size: 12px;
  }

  .app-shell.view-dashboard .motivation-prompt {
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .app-shell.view-dashboard .motivation-prompt svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 1px;
  }

  .app-shell.view-dashboard .motivation-prompt small {
    font-size: 12px;
    line-height: 1.4;
  }

  .app-shell.view-dashboard .focus-readout {
    justify-self: start;
    margin: 16px 0 10px;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
  }

  .app-shell.view-dashboard .focus-readout strong {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .app-shell.view-dashboard .focus-readout span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.2;
  }

  .app-shell.view-dashboard .hero-actions {
    display: flex;
    width: 100%;
    gap: 10px;
    margin: 0 0 16px;
    flex-wrap: nowrap;
  }

  .app-shell.view-dashboard .hero-actions .primary-action,
  .app-shell.view-dashboard .hero-actions .secondary-action {
    height: 48px;
    min-height: 48px;
    border-radius: 12px;
    white-space: nowrap;
  }

  .app-shell.view-dashboard .hero-actions .primary-action {
    flex: 1.5 1 0;
    font-size: 15px;
    font-weight: 600;
    background: #2563eb;
    color: #fff;
  }

  .app-shell.view-dashboard .hero-actions .secondary-action {
    flex: 1 1 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }

  .app-shell.view-dashboard .hero-avatar-stage {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 90px;
    height: 112px;
    margin: 0 16px 8px;
    padding: 14px 14px 14px 16px;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
  }

  .app-shell.view-dashboard .avatar-hero-bubble {
    position: relative;
    inset: auto;
    z-index: 4;
    flex: 1 1 auto;
    width: auto;
    max-width: 65%;
    padding: 0 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    opacity: 1;
    transform: none;
    backdrop-filter: none;
    animation: none;
  }

  .app-shell.view-dashboard .avatar-hero-bubble p {
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
  }

  .app-shell.view-dashboard .avatar-hero-bubble::after {
    display: none;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 80px;
    height: 80px;
    aspect-ratio: 1;
  }

  .app-shell.view-dashboard .hero-avatar-stage img {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

  .app-shell.view-dashboard .avatar-glow,
  .app-shell.view-dashboard .avatar-accessory,
  .app-shell.view-dashboard .mood-pill {
    display: none;
  }
}

@media (max-width: 768px) {
  .topbar h1 {
    max-width: 100%;
  }

  .topbar-title-mobile {
    display: none;
  }

  .app-shell.view-work .topbar-title-full {
    display: none;
  }

  .app-shell.view-work .topbar-title-mobile {
    display: inline;
  }

  .app-shell.view-work .topbar .primary-action {
    min-height: 40px;
    padding: 6px 12px;
  }

  .app-shell.view-work .topbar-actions .primary-action {
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  .daily-quest-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 40px;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    cursor: pointer;
    transition: max-height 200ms ease, opacity 200ms ease, padding 200ms ease;
  }

  .daily-quest-label,
  .daily-quest-count,
  .daily-quest-xp {
    align-self: center;
  }

  .daily-quest-text {
    grid-column: 1 / -1;
    order: 5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 12px;
    transition: max-height 200ms ease, opacity 200ms ease;
  }

  .daily-quest-strip.is-expanded .daily-quest-text {
    max-height: 44px;
    opacity: 1;
  }

  .daily-quest-bar-wrap {
    width: auto;
    min-width: 68px;
  }

  .hero-panel {
    overflow: hidden;
  }

  .avatar-stage,
  .hero-avatar-stage {
    max-width: 100%;
    overflow: hidden;
  }

  .hero-avatar-stage .filoo-hero-video-wrap,
  .hero-avatar-stage img {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .avatar-hero-bubble {
    max-width: calc(100% - 80px);
    left: 12px;
    right: auto;
  }

  .mood-pill {
    right: 12px;
    bottom: 8px;
    max-width: calc(100% - 24px);
    min-height: 44px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .habit-progress-hero {
    transition: max-height 200ms ease, opacity 200ms ease, padding 200ms ease;
  }

  .habit-progress-hero.is-collapsed {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 40px;
    max-height: 52px;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    cursor: pointer;
  }

  .habit-progress-hero.is-collapsed .habit-ring,
  .habit-progress-hero.is-collapsed .habit-tip-detail,
  .habit-progress-hero.is-collapsed h3 {
    display: none;
  }

  .habit-progress-hero.is-collapsed .habit-tip-summary {
    display: block;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .habit-progress-hero.is-collapsed .microcopy {
    margin: 0 0 2px;
  }

  .habit-tip-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--control-bg);
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
    transform: translateY(-50%);
  }

  .habit-progress-hero.is-expanded .habit-tip-toggle {
    top: 10px;
    transform: none;
  }

  .habit-tip-summary {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
  }

  .habit-list {
    display: grid;
    gap: 8px;
  }

  .habit-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 58px;
    max-height: 64px;
    gap: 8px;
    overflow: hidden;
    padding: 8px 10px;
    transition: max-height 200ms ease, opacity 200ms ease, border-color 0.18s ease, background 0.18s ease;
  }

  .habit-row.is-mobile-expanded {
    max-height: 138px;
    align-items: start;
  }

  .habit-select-area {
    min-height: 44px;
  }

  .habit-select-area span:last-child {
    min-width: 0;
  }

  .habit-select-area strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .habit-select-area small,
  .habit-week-mini,
  .habit-check-button {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 200ms ease, opacity 200ms ease;
  }

  .habit-row.is-mobile-expanded .habit-select-area small,
  .habit-row.is-mobile-expanded .habit-week-mini,
  .habit-row.is-mobile-expanded .habit-check-button,
  .habit-row.is-done .habit-check-button {
    max-height: 44px;
    opacity: 1;
    pointer-events: auto;
  }

  .habit-row-streak {
    grid-column: auto;
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .habit-streak-fire {
    max-width: 96px;
    overflow: hidden;
    white-space: nowrap;
  }

  .habit-row.is-mobile-expanded .habit-row-streak {
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
  }

  .habit-check-button {
    grid-column: 2 / -1;
    justify-self: end;
    min-width: 112px;
    min-height: 44px;
  }

  .habit-row.is-done:not(.is-mobile-expanded) .habit-check-button {
    grid-column: 2;
    min-width: 64px;
    min-height: 34px;
    padding: 0 10px;
  }

  .habit-row-chevron {
    display: grid;
    place-items: center;
    align-self: center;
    width: 28px;
    height: 44px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 900;
  }

  .habit-row.is-mobile-expanded .habit-row-chevron {
    position: absolute;
    right: 10px;
    top: 8px;
  }

  .finance-columns {
    gap: 12px;
  }

  .money-ledger {
    display: grid;
    gap: 8px;
  }

  .money-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 60px;
    gap: 3px 10px;
    overflow: hidden;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--entry-accent, var(--blue));
    border-radius: 12px;
    background: var(--panel);
    transform: none;
    transition: padding-right 220ms cubic-bezier(0.22, 1, 0.36, 1), background 0.15s ease;
  }

  .money-row:hover {
    transform: none;
  }

  .money-row > span:first-child {
    grid-row: 1 / 3;
    min-width: 0;
  }

  .money-row strong,
  .money-row small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .money-row em {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 14px;
  }

  .money-row .status-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    min-width: 48px;
    padding: 3px 7px;
    font-size: 10px;
  }

  .money-row-actions {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 3;
    display: grid;
    grid-template-columns: 64px 64px;
    width: 128px;
    opacity: 1;
    background: var(--panel-strong);
    box-shadow: -12px 0 26px rgba(13, 22, 38, 0.12);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .money-row.is-swiped {
    padding-right: 140px;
  }

  .money-row.is-swiped .money-row-actions {
    transform: translateX(0);
  }

  .money-row-actions .icon-button {
    width: 64px;
    min-width: 64px;
    height: 100%;
    min-height: 60px;
    border-radius: 0;
  }

  .more-nav-content {
    display: grid;
    gap: 12px;
    padding-inline: 16px;
  }

  .more-nav-group {
    display: grid;
    gap: 4px;
  }

  .more-nav-heading {
    margin: 8px 2px 4px;
    color: var(--faint);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .more-nav-item {
    min-height: 56px;
    padding: 0 10px;
    border-radius: 14px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .more-nav-item svg {
    width: 24px;
    height: 24px;
  }

  .more-nav-item span {
    font-weight: 750;
  }

  .more-nav-item em {
    color: var(--muted);
    font-style: normal;
    font-size: 22px;
    line-height: 1;
  }

  .more-nav-group.tone-wellness .more-nav-item svg {
    color: var(--green);
  }

  .more-nav-group.tone-career .more-nav-item svg {
    color: var(--blue);
  }

  .more-nav-group.tone-tools .more-nav-item svg {
    color: var(--amber-strong);
  }
}

:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #0d1626;
  --bg-soft: #131e38;
  --panel: rgba(26, 40, 72, 0.88);
  --panel-strong: #1a2848;
  --panel-alt: #243258;
  --line: #243258;
  --line-strong: #2e3f6a;
  --text: #f4f7fc;
  --muted: #a8b4d0;
  --faint: #5a6a8a;
  --glass: rgba(13, 22, 38, 0.82);
  --control-bg: rgba(255, 255, 255, 0.055);
  --control-hover: rgba(255, 255, 255, 0.09);
  --list-bg: rgba(255, 255, 255, 0.04);
  --accent-bg: rgba(26, 106, 255, 0.1);
  --avatar-bg: #243258;
  --avatar-shadow: 0 30px 42px rgba(0, 0, 0, 0.55);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  --gold-strong: #f5c34d;
  --amber-strong: #f5c34d;
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  background: var(--bg);
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 22% 8%, rgba(26, 106, 255, 0.12), transparent 28rem),
    linear-gradient(145deg, #ffffff 0%, #f4f7fc 54%, #eef2f9 100%);
  color: var(--text);
}

:root[data-theme="night"] body {
  background:
    radial-gradient(circle at 22% 8%, rgba(26, 106, 255, 0.18), transparent 28rem),
    linear-gradient(145deg, #0d1626 0%, #101a30 52%, #0c1424 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(13, 22, 38, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 22, 38, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: ambientGrid 18s linear infinite;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(480px, 100%);
  display: grid;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), transparent 52%),
    var(--panel);
  box-shadow: 0 24px 70px rgba(13, 22, 38, 0.16);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-brand h1 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
}

.auth-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.auth-loading {
  min-height: 84px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.auth-loading span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--blue);
  animation: authSpin 0.75s linear infinite;
}

@keyframes authSpin {
  to {
    transform: rotate(360deg);
  }
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--panel-alt);
}

.auth-mode-tabs button {
  min-height: 38px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.auth-mode-tabs button.is-active {
  color: var(--text);
  background: var(--panel-strong);
  box-shadow: 0 1px 4px rgba(13, 22, 38, 0.1);
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.auth-form input {
  min-height: 46px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--control-bg);
  color: var(--text);
}

.auth-feedback {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.auth-feedback.is-notice {
  color: var(--blue-dark);
  border: 1px solid rgba(26, 106, 255, 0.24);
  background: rgba(26, 106, 255, 0.08);
}

.auth-feedback.is-error {
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.08);
}

.auth-oauth-row {
  display: grid;
  gap: 8px;
}

.auth-user-chip {
  max-width: 180px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.auth-user-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-user-chip svg {
  width: 15px;
  height: 15px;
  color: var(--blue-light);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none !important;
}

:root[data-theme="night"] body::before {
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
}

@keyframes ambientGrid {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 44px 44px;
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 16px;
  border-right: 1px solid rgba(77, 143, 255, 0.12);
  background: #0d1626;
  backdrop-filter: blur(18px);
}

.brand-lockup,
.nav-item,
.module-row,
.habit-row,
.prompt-button,
.companion-dock {
  color: inherit;
  background: transparent;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 6px;
}

.brand-lockup strong,
.companion-dock strong {
  display: block;
  font-size: 16px;
  line-height: 1.1;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.brand-lockup strong {
  color: #f4f7fc;
}

.brand-lockup strong span,
.companion-dock strong span {
  color: var(--blue-light);
}

.brand-lockup small,
.companion-dock small,
.module-row small,
.money-row small {
  color: var(--muted);
  font-size: 12px;
}

.brand-lockup small {
  color: rgba(168, 180, 208, 0.7);
}

.brand-orb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--blue);
  background: var(--avatar-bg);
  box-shadow: 0 0 0 5px rgba(26, 106, 255, 0.08);
}

.brand-orb img,
.companion-dock img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-list {
  display: grid;
  gap: 4px;
}

.nav-item {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(168, 180, 208, 0.85);
  font-weight: 500;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.bottom-nav .is-active {
  color: var(--text);
  background: var(--accent-bg);
}

.nav-item.is-active {
  padding-left: 9px;
  border-left: 3px solid var(--blue);
  background: rgba(26, 106, 255, 0.18);
  color: #f4f7fc;
  font-weight: 700;
}

.nav-item:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f4f7fc;
  transform: translateX(2px);
}

.sidebar-signout-action {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 10px 10px;
  color: rgba(245, 195, 77, 0.92);
}

.sidebar-signout-action:hover {
  color: #fff;
  background: rgba(245, 195, 77, 0.12);
}

.privacy-note {
  margin-top: auto;
  display: flex;
  gap: 10px;
  color: rgba(168, 180, 208, 0.6);
  font-size: 12px;
  line-height: 1.45;
  padding: 12px;
  border: 1px solid rgba(77, 143, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.status-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 16px rgba(26, 106, 255, 0.8);
}

.main-panel {
  min-width: 0;
  padding: 24px 28px 36px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-center {
  flex: 0 1 260px;
  display: flex;
  justify-content: center;
}

.mnl-clock-chip {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
}

.mnl-clock-label {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.mnl-clock-date {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.mnl-clock-time {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.mobile-avatar-button {
  display: none;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.mobile-avatar-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-avatar-button span {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: var(--blue);
  text-indent: 999px;
}

.avatar-access-actions {
  display: none;
  align-items: center;
  gap: 6px;
}

.avatar-access-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.avatar-access-button svg {
  width: 14px;
  height: 14px;
  color: var(--blue-light);
}

.avatar-access-button:hover {
  border-color: var(--blue-light);
  background: var(--accent-bg);
}

.topbar h1,
.hero-panel h2,
.section-heading h2,
.detail-panel h2,
.connect-panel h2,
.chat-panel h2 {
  margin: 0;
  line-height: 1.03;
  letter-spacing: 0;
  font-family: "Sora", sans-serif;
  font-weight: 800;
}

.topbar h1 {
  font-size: 32px;
}

.microcopy {
  margin: 0 0 7px;
  color: var(--blue-light);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.topbar-actions,
.hero-actions,
.button-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.primary-action,
.secondary-action,
.ghost-action,
.icon-button,
.theme-toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  border-radius: var(--radius);
  color: var(--text);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.primary-action {
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: var(--btn-shadow-blue);
  transform: translateY(0);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.18s ease;
}

.secondary-action,
.icon-button,
.theme-toggle {
  border: 1px solid var(--line);
  background: var(--control-bg);
}

.secondary-action {
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.ghost-action {
  min-height: 36px;
  color: var(--blue-light);
  background: var(--accent-bg);
}

.primary-action:hover,
.secondary-action:hover,
.ghost-action:hover,
.icon-button:hover,
.theme-toggle:hover,
.habit-row:hover,
.prompt-button:hover,
.module-row:hover {
  transform: translateY(-1px);
}

.primary-action:active,
.secondary-action:active,
.ghost-action:active,
.icon-button:active,
.theme-toggle:active,
.habit-row:active,
.prompt-button:active,
.module-row:active {
  transform: translateY(0);
}

.primary-action:active {
  transform: translateY(3px);
  box-shadow: none;
}

.secondary-action:active {
  transform: translateY(2px);
}

.theme-toggle[aria-pressed="true"] {
  border-color: rgba(77, 143, 255, 0.42);
  background: rgba(26, 106, 255, 0.16);
}

.compact {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.topbar-notification-button {
  position: relative;
  min-width: 42px;
  padding-inline: 12px;
}

.topbar-notification-button.is-active {
  border-color: rgba(26, 106, 255, 0.42);
  background: var(--accent-bg);
  color: var(--blue);
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.notification-center-panel {
  position: fixed;
  top: 86px;
  right: 28px;
  z-index: 950;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 252, 0.94));
  box-shadow: 0 26px 70px rgba(13, 22, 38, 0.18);
  backdrop-filter: blur(18px);
}

.notification-center-panel header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.notification-read-all {
  min-height: 34px;
  white-space: nowrap;
}

.notification-center-panel h2 {
  margin: 0;
  color: var(--text);
  font-family: "Sora", sans-serif;
  font-size: 17px;
  line-height: 1.05;
}

.notification-center-icon,
.notification-item-icon {
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.notification-center-icon {
  width: 40px;
  height: 40px;
  background: var(--accent-bg);
  color: var(--blue);
}

.notification-center-list {
  display: grid;
  gap: 8px;
}

.notification-center-item {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  text-align: left;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.notification-center-item:hover {
  transform: translateY(-1px);
  border-color: rgba(26, 106, 255, 0.34);
  background: var(--panel-strong);
}

.notification-center-item.is-read {
  background: rgba(255, 255, 255, 0.5);
}

.notification-center-item.is-read strong,
.notification-center-item.is-read small {
  opacity: 0.74;
}

.notification-item-main {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-center-item.is-passive .notification-item-main {
  cursor: default;
}

.notification-center-item strong,
.notification-center-item small {
  display: block;
}

.notification-center-item strong {
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.notification-center-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.notification-center-item em {
  color: var(--blue);
  font-style: normal;
}

.notification-center-item em svg {
  width: 16px;
  height: 16px;
}

.notification-item-icon {
  width: 34px;
  height: 34px;
  color: var(--blue);
  background: var(--accent-bg);
}

.notification-item-icon.tone-finance {
  color: var(--amber-strong);
  background: rgba(245, 195, 77, 0.18);
}

.notification-item-icon.tone-jobs,
.notification-item-icon.tone-work {
  color: var(--blue);
  background: rgba(26, 106, 255, 0.11);
}

.notification-item-icon.tone-habits {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.notification-item-icon.tone-focus {
  color: var(--cyan);
  background: rgba(23, 201, 195, 0.13);
}

.notification-item-icon.tone-quiet {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.notification-item-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 44px;
}

.notification-item-actions .secondary-action {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 12px;
}

.notification-read-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.09);
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.notification-read-label svg,
.notification-item-actions svg {
  width: 14px;
  height: 14px;
}

.full-width {
  width: 100%;
}

.view-shell {
  max-width: 1320px;
}

.view-shell > * {
  animation: viewRise 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dashboard-grid > *,
.split-layout > *,
.companion-layout > * {
  animation: surfaceEnter 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dashboard-grid > *:nth-child(2),
.split-layout > *:nth-child(2),
.companion-layout > *:nth-child(2) {
  animation-delay: 45ms;
}

.dashboard-grid > *:nth-child(3),
.split-layout > *:nth-child(3),
.companion-layout > *:nth-child(3) {
  animation-delay: 90ms;
}

@supports (view-transition-name: root) {
  ::view-transition-old(root) {
    animation: viewFadeOut 0.18s ease both;
  }

  ::view-transition-new(root) {
    animation: viewFadeIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 16px;
}

.hero-panel,
.panel,
.metric-card,
.companion-dock {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-panel {
  min-height: 386px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  overflow: hidden;
  border: 1px solid rgba(77, 143, 255, 0.25);
  background-color: #1a2d6b;
  background-image: linear-gradient(135deg, #0f1f4a 0%, #1a2d6b 55%, #0d1f3c 100%);
}

:root[data-theme="night"] .hero-panel {
  background-color: #14265e;
  background-image: linear-gradient(135deg, #0c1838 0%, #14265e 55%, #08162f 100%);
}

.hero-copy {
  padding: 38px;
  align-self: center;
}

.hero-copy h2 {
  max-width: 760px;
  font-size: 44px;
  color: #f4f7fc;
}

.hero-copy p {
  max-width: 640px;
  color: rgba(244, 247, 252, 0.78);
  font-size: 16px;
  line-height: 1.75;
}

.hero-panel .microcopy {
  color: rgba(77, 143, 255, 0.9);
}

.motivation-widget {
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(26, 106, 255, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.09), transparent 42%),
    linear-gradient(315deg, rgba(23, 201, 195, 0.12), transparent 36%),
    var(--control-bg);
  overflow: hidden;
}

.motivation-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 8%, rgba(255, 255, 255, 0.22) 42%, transparent 70%);
  opacity: 0.55;
  transform: translateX(-115%);
  animation: cardSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}

.motivation-widget-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.motivation-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--blue);
  background: rgba(26, 106, 255, 0.12);
}

.quote-wand-button {
  color: var(--blue);
  background: rgba(26, 106, 255, 0.12);
}

.quote-wand-button svg {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease;
}

.quote-wand-button:hover {
  transform: translateY(-1px) rotate(-6deg);
}

.quote-wand-button:hover svg {
  filter: drop-shadow(0 0 10px rgba(26, 106, 255, 0.45));
  transform: rotate(-12deg) scale(1.08);
}

.quote-wand-button.is-loading {
  pointer-events: none;
}

.quote-wand-button.is-loading svg {
  animation: quoteWandCast 0.9s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(26, 106, 255, 0.38));
}

@keyframes quoteWandCast {
  0%,
  100% {
    transform: rotate(-10deg) scale(1);
  }
  50% {
    transform: rotate(12deg) scale(1.1);
  }
}

.motivation-widget-head strong,
.motivation-widget-head small {
  display: block;
}

.motivation-widget-head small,
.motivation-prompt small {
  color: var(--muted);
  font-size: 12px;
}

.motivation-widget blockquote {
  margin: 0;
  display: grid;
  gap: 8px;
}

.motivation-widget blockquote p {
  max-width: none;
  margin: 0;
  color: var(--text);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.35;
  font-weight: 800;
  min-height: 2.7em;
}

.motivation-widget blockquote p.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 3px;
  border-radius: 999px;
  background: var(--blue-light);
  transform: translateY(2px);
  animation: caretBlink 0.78s steps(2, end) infinite;
}

.motivation-widget blockquote footer {
  color: var(--blue-light);
  font-size: 13px;
  font-weight: 800;
}

.motivation-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.motivation-prompt svg {
  color: var(--green);
}

.filoo-live-update {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 860px;
  margin: -4px 0 16px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-left: 4px solid #67e8f9;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(103, 232, 249, 0.12), rgba(37, 99, 235, 0.05)),
    rgba(255, 255, 255, 0.08);
  color: rgba(244, 247, 252, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.filoo-live-update::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.16), transparent);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

.filoo-live-update.is-refreshing::before {
  animation: liveUpdateSweep 0.72s ease-out both;
}

.filoo-live-update-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #67e8f9;
  background: rgba(103, 232, 249, 0.12);
}

.filoo-live-update strong,
.filoo-live-update p {
  display: block;
}

.filoo-live-update strong {
  margin-bottom: 2px;
  color: rgba(219, 234, 254, 0.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filoo-live-update p {
  max-width: none;
  margin: 0;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .filoo-live-update {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    margin: 10px 0 14px;
    padding: 11px 12px;
  }

  .filoo-live-update p {
    font-size: 12px;
  }
}

@keyframes liveUpdateSweep {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  28% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(260%);
  }
}

@keyframes viewRise {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.992);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes surfaceEnter {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes viewFadeOut {
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.995);
  }
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.996);
  }
}

@keyframes cardSheen {
  0%,
  55%,
  100% {
    transform: translateX(-115%);
  }

  72% {
    transform: translateX(115%);
  }
}

@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}

.focus-readout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 18px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
}

.focus-readout strong {
  font-size: 20px;
  font-weight: 900;
}

.focus-readout span {
  color: var(--muted);
  font-size: 13px;
}

.avatar-stage {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
  overflow: visible;
  color: var(--text);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(214, 228, 255, 0.78), rgba(244, 247, 252, 0.42)),
    radial-gradient(circle at 50% 45%, rgba(77, 143, 255, 0.18), transparent 16rem);
}

.avatar-stage:hover img,
.avatar-stage:focus-visible img {
  transform: translateY(-3px) rotate(-1deg);
}

:root[data-theme="night"] .avatar-stage {
  background:
    linear-gradient(180deg, rgba(26, 106, 255, 0.16), transparent),
    radial-gradient(circle at 50% 45%, rgba(77, 143, 255, 0.16), transparent 16rem);
}

.avatar-stage img {
  position: relative;
  z-index: 2;
  width: min(330px, 88%);
  filter: drop-shadow(var(--avatar-shadow));
  transition: transform 0.22s ease;
}

.filoo-loop-video-wrap {
  position: relative;
  z-index: 2;
  width: min(360px, 90%);
  aspect-ratio: 640 / 854;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  filter: none;
  transition: transform 0.22s ease;
}

.avatar-stage:hover .filoo-hero-video-wrap,
.avatar-stage:focus-visible .filoo-hero-video-wrap {
  transform: translateY(-3px) rotate(-1deg);
}

.hero-avatar-stage:hover img,
.hero-avatar-stage:focus-visible img,
.hero-avatar-stage:hover .filoo-hero-video-wrap,
.hero-avatar-stage:focus-visible .filoo-hero-video-wrap {
  transform: none;
}

.avatar-stage .filoo-loop-canvas,
.avatar-stage .filoo-loop-fallback,
.avatar-stage .filoo-loop-gif,
.avatar-preview-stage .filoo-loop-canvas,
.avatar-preview-stage .filoo-loop-fallback,
.avatar-preview-stage .filoo-loop-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.avatar-stage .filoo-loop-gif,
.avatar-preview-stage .filoo-loop-gif {
  z-index: 3;
  display: block;
  background: transparent;
  filter: none;
  mix-blend-mode: normal;
  image-rendering: auto;
  transform: none;
  transform-style: flat;
  backface-visibility: visible;
  contain: none;
  will-change: auto;
}

.avatar-stage .filoo-loop-canvas,
.avatar-preview-stage .filoo-loop-canvas {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.filoo-loop-video-wrap.is-video-ready .filoo-loop-canvas {
  opacity: 1;
}

.filoo-loop-video-wrap.is-video-ready .filoo-loop-gif {
  opacity: 1;
}

.filoo-loop-video-wrap.is-video-ready .filoo-loop-fallback {
  opacity: 0;
}

.avatar-stage .filoo-loop-fallback,
.avatar-preview-stage .filoo-loop-fallback {
  z-index: 1;
  transition: opacity 0.24s ease;
}

.filoo-loop-video-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hero-avatar-stage {
  min-height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.avatar-stage-actions {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-stage-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(13, 22, 38, 0.14);
  backdrop-filter: blur(10px);
}

.avatar-stage-action svg {
  width: 15px;
  height: 15px;
  color: var(--blue-light);
}

.avatar-stage-action:hover {
  transform: translateY(-1px);
  border-color: rgba(26, 106, 255, 0.42);
  background: #fff;
}

:root[data-theme="night"] .avatar-stage-action {
  border-color: rgba(77, 143, 255, 0.28);
  background: rgba(20, 32, 56, 0.86);
}

.avatar-glow {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--glow-color, rgba(26, 106, 255, 0.18));
  filter: blur(28px);
}

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

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

@keyframes avatarBounce {
  0% {
    transform: translateY(0) scale(1);
  }

  25% {
    transform: translateY(-14px) scale(1.06) rotate(-3deg);
  }

  55% {
    transform: translateY(-6px) scale(1.03) rotate(2deg);
  }

  75% {
    transform: translateY(-10px) scale(1.04) rotate(-1deg);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes avatarWiggle {
  0% {
    transform: rotate(0deg) scale(1);
  }

  15% {
    transform: rotate(-8deg) scale(1.05);
  }

  35% {
    transform: rotate(7deg) scale(1.07);
  }

  55% {
    transform: rotate(-5deg) scale(1.04);
  }

  75% {
    transform: rotate(4deg) scale(1.02);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes glowPulse {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }

  100% {
    opacity: 0.4;
    transform: scale(1);
  }
}

@keyframes speechPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.85);
  }

  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.02);
  }

  75% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.95);
  }
}

.avatar-stage:not(.is-tapped):not(:hover):not(:focus-visible) img {
  animation: avatarFloat 3.5s ease-in-out infinite;
}

.avatar-stage:not(.is-tapped):not(:hover):not(:focus-visible) .filoo-hero-video-wrap {
  animation: avatarFloat 3.5s ease-in-out infinite;
}

.hero-avatar-stage:not(.is-tapped):not(:hover):not(:focus-visible) img,
.hero-avatar-stage:not(.is-tapped):not(:hover):not(:focus-visible) .filoo-hero-video-wrap {
  animation: none;
}

.avatar-stage.is-tapped img {
  animation: avatarBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.avatar-stage.is-tapped .filoo-hero-video-wrap {
  animation: avatarBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hero-avatar-stage.is-tapped img,
.hero-avatar-stage.is-tapped .filoo-hero-video-wrap {
  animation: none;
  transform: none;
}

.avatar-stage.is-tapped .avatar-glow {
  animation: glowPulse 0.55s ease both;
}

.avatar-speech-pop {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 12;
  padding: 8px 14px;
  border: 1px solid rgba(26, 106, 255, 0.3);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  animation: speechPop 2.2s ease forwards;
}

.mobile-avatar-button.is-tapped {
  animation: avatarWiggle 0.4s ease both;
}

.avatar-hero-bubble {
  position: absolute;
  top: 22px;
  left: -16px;
  right: 16px;
  z-index: 10;
  padding: 14px 18px;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(26, 106, 255, 0.22);
  border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 28px rgba(13, 22, 38, 0.1);
  backdrop-filter: blur(8px);
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.36s ease, transform 0.36s ease;
}

.avatar-hero-bubble[hidden] {
  display: none !important;
}

.avatar-hero-bubble.is-speaking {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: filooBubbleIn 0.42s ease both;
}

.avatar-hero-bubble p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.avatar-hero-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 28px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(26, 106, 255, 0.22);
  border-bottom: 1px solid rgba(26, 106, 255, 0.22);
  background: rgba(255, 255, 255, 0.92);
  transform: rotate(45deg);
}

:root[data-theme="night"] .avatar-hero-bubble {
  border-color: rgba(77, 143, 255, 0.25);
  background: rgba(20, 32, 56, 0.92);
}

:root[data-theme="night"] .avatar-hero-bubble::after {
  border-color: rgba(77, 143, 255, 0.25);
  background: rgba(20, 32, 56, 0.92);
}

.mood-pill,
.source-tag,
.skill-row span,
.priority {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
}

.mood-pill {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 8px 12px;
}

.avatar-accessory {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.metric-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-top: 3px solid transparent;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(244, 247, 252, 0.72)),
    var(--panel);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
}

.metric-card[data-view] {
  cursor: pointer;
}

.metric-card[data-view]:active {
  transform: scale(0.98);
}

:root[data-theme="night"] .metric-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    var(--panel);
}

.metric-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: var(--metric-color, var(--blue));
}

.metric-topline {
  display: flex;
  align-items: center;
  gap: 9px;
}

.metric-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--metric-color, var(--blue));
  background: color-mix(in srgb, var(--metric-color, var(--blue)) 13%, transparent);
}

.metric-card p,
.metric-card span {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.metric-card strong {
  display: block;
  margin: 9px 0 4px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.metric-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: var(--metric-color, var(--blue));
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.metric-card-link svg {
  width: 12px;
  height: 12px;
}

.metric-progress {
  height: 10px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--panel-alt);
  overflow: hidden;
}

.metric-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  animation: fillBar 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}

.tone-green .metric-progress i {
  background: var(--green);
}

.tone-amber .metric-progress i {
  background: var(--amber);
}

.tone-rose .metric-progress i {
  background: var(--rose);
}

@keyframes fillBar {
  from {
    width: 0 !important;
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

.tone-blue {
  --metric-color: var(--blue);
  border-color: rgba(26, 106, 255, 0.38);
}

.tone-green {
  --metric-color: var(--green);
  border-color: rgba(115, 224, 138, 0.34);
}

.tone-amber {
  --metric-color: var(--amber-strong);
  border-color: rgba(255, 190, 85, 0.34);
}

.tone-rose {
  --metric-color: var(--rose);
  border-color: rgba(255, 124, 141, 0.34);
}

.metric-card.tone-blue {
  border-top-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(26, 106, 255, 0.18), 0 18px 48px rgba(13, 22, 38, 0.1), 0 0 28px var(--glow-blue);
}

.metric-card.tone-green {
  border-top-color: var(--green);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), 0 18px 48px rgba(13, 22, 38, 0.1), 0 0 28px var(--glow-green);
}

.metric-card.tone-amber {
  border-top-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(245, 195, 77, 0.22), 0 18px 48px rgba(13, 22, 38, 0.1), 0 0 28px var(--glow-amber);
}

.metric-card.tone-rose {
  border-top-color: var(--rose);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.16), 0 18px 48px rgba(13, 22, 38, 0.1), 0 0 28px var(--glow-rose);
}

.panel {
  padding: 20px;
}

.wide-panel {
  grid-column: 1 / -1;
}

.rhythm-panel {
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), transparent 34%),
    linear-gradient(315deg, rgba(245, 195, 77, 0.14), transparent 34%),
    var(--panel);
}

.chart-score {
  min-width: 64px;
  padding: 8px 10px;
  border-radius: 14px;
  text-align: center;
  color: var(--blue);
  background: var(--accent-bg);
  font-size: 22px;
  font-weight: 900;
}

.goal-pulse-chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
}

.line-chart {
  min-height: 224px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(rgba(13, 22, 38, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 22, 38, 0.035) 1px, transparent 1px),
    rgba(255, 255, 255, 0.48);
  background-size: 34px 34px;
  color: var(--blue);
}

:root[data-theme="night"] .line-chart {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    rgba(255, 255, 255, 0.035);
}

.line-chart svg {
  width: min(100%, 560px);
  height: auto;
  overflow: visible;
}

.line-chart circle {
  fill: var(--panel-strong);
  stroke: currentColor;
  stroke-width: 4;
}

.pulse-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.pulse-bar {
  min-height: 224px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--control-bg);
}

.pulse-bar span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.pulse-bar strong {
  font-size: 18px;
}

.pulse-bar div {
  position: relative;
  align-self: stretch;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.pulse-bar i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--metric-color, var(--blue));
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-heading h2,
.detail-panel h2 {
  font-size: 24px;
}

.task-strip,
.module-list,
.habit-list,
.entry-list,
.job-list,
.plugin-grid,
.prompt-list {
  display: grid;
  gap: 10px;
}

.task-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.task-card {
  display: grid;
  gap: 16px;
  min-height: 156px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.task-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13, 22, 38, 0.1);
}

.task-due-row {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.task-due-row svg {
  width: 14px;
  height: 14px;
}

.task-due-row.is-overdue {
  color: var(--rose, #f43f5e);
  font-weight: 600;
}

.task-due-row.is-due-today {
  color: var(--amber, #f59e0b);
  font-weight: 600;
}

.task-priority-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
}

.task-priority-high {
  background: rgba(244, 63, 94, 0.12);
  color: var(--rose, #f43f5e);
}

.task-priority-medium {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber, #f59e0b);
}

.task-priority-low {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green, #22c55e);
}

.focus-cycle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--blue, #1a6aff);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
  min-height: 36px;
}

.focus-cycle-btn:hover {
  opacity: 0.85;
}

.focus-cycle-btn.is-active {
  background: var(--green, #22c55e);
}

.focus-cycle-btn svg {
  width: 15px;
  height: 15px;
}

.task-card h3,
.job-card h3,
.plugin-card h3 {
  margin: 0;
  line-height: 1.2;
}

.accent-amber {
  border-left-color: var(--amber);
}

.accent-rose {
  border-left-color: var(--rose);
}

.accent-violet {
  border-left-color: var(--violet);
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.accent-blue {
  border-left-color: var(--blue);
}

.task-card.accent-blue {
  border-left-color: var(--blue);
}

.task-card.accent-green {
  border-left-color: var(--green);
}

.task-card.accent-amber {
  border-left-color: var(--amber);
}

.task-card.accent-rose {
  border-left-color: var(--rose);
}

.task-card.accent-violet {
  border-left-color: var(--violet);
}

.nudge-card {
  display: flex;
  gap: 13px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--accent-bg);
  border: 1px solid rgba(26, 106, 255, 0.22);
}

.nudge-card p,
.muted {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

@keyframes filooBubbleIn {
  0% {
    opacity: 0.72;
    transform: translateY(8px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes filooTextIn {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.module-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--module-color, var(--blue)) 8%, transparent), transparent 52%),
    var(--panel);
  text-align: left;
}

.module-row strong,
.module-row small {
  display: block;
}

.module-row em {
  color: var(--blue-light);
  font-style: normal;
  font-size: 12px;
}

.module-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--module-color, var(--blue)) 40%, var(--line));
  border-radius: 14px;
  color: var(--module-color, var(--blue));
  background: color-mix(in srgb, var(--module-color, var(--blue)) 12%, transparent);
}

.priority {
  width: 8px;
  height: 8px;
  min-height: 8px;
  border-radius: 50%;
  border: 0;
  flex-shrink: 0;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}

.work-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.work-layout--wide {
  grid-template-columns: minmax(0, 1fr);
}

.work-layout--wide .workspace-board-panel {
  grid-column: 1 / -1;
}

.work-layout > *,
.board-panel {
  min-width: 0;
}

.board-focus-cycle-control {
  min-width: 132px;
  white-space: nowrap;
}

.board-focus-cycle-control svg {
  flex-shrink: 0;
}

.detail-panel {
  align-self: start;
}

.stacked-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.stacked-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--list-bg);
}

.stacked-list span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(168px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.productivity-board-shell {
  max-height: clamp(500px, calc(100vh - 316px), 740px);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.kanban-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 360px;
  padding: 9px;
  border-radius: var(--radius);
  background: var(--list-bg);
}

.kanban .task-card {
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border-radius: 12px;
}

.kanban .task-card h3 {
  font-size: 14px;
  line-height: 1.25;
}

.kanban .task-card .microcopy {
  margin-bottom: 2px;
  font-size: 9px;
}

.kanban .task-meta {
  justify-content: flex-start;
  gap: 6px;
  font-size: 10.5px;
}

.kanban .work-tag-row {
  gap: 5px;
}

.kanban .work-tag {
  min-height: 22px;
  padding: 4px 7px;
  font-size: 10px;
}

.task-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.task-card-actions .ghost-action {
  flex: 1;
  min-width: 0;
}

.task-complete-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(34, 197, 94, 0.36);
  border-radius: 9px;
  background: rgba(34, 197, 94, 0.1);
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.task-complete-btn:hover {
  background: var(--green);
  color: #fff;
}

.task-complete-btn svg {
  width: 13px;
  height: 13px;
}

.task-card.is-completed {
  opacity: 0.82;
}

.task-card.is-completed .task-card-actions {
  justify-content: flex-end;
}

.task-undo-btn {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}

.task-undo-btn svg {
  width: 12px;
  height: 12px;
}

.task-undo-btn:hover {
  color: var(--blue);
}

.column-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
}

.column-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.column-add-btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.column-add-btn svg {
  width: 13px;
  height: 13px;
}

.column-add-btn:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}

.add-task-row {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.add-task-row svg {
  width: 14px;
  height: 14px;
}

.add-task-row:hover {
  border-style: solid;
  border-color: rgba(26, 106, 255, 0.35);
  background: var(--accent-bg);
  color: var(--blue);
}

.kanban-mobile-hint {
  display: none;
}

.work-filter-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
  padding: 12px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), transparent 44%),
    var(--list-bg);
}

.work-filter-row,
.work-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.work-filter-row {
  margin-top: 8px;
}

.work-filter-chip,
.work-tag {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--tag-color, var(--blue)) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag-color, var(--blue)) 12%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.work-filter-chip.is-active,
.work-tag:hover {
  border-color: var(--tag-color, var(--blue));
  background: color-mix(in srgb, var(--tag-color, var(--blue)) 22%, transparent);
  color: var(--tag-color, var(--blue));
}

.work-filter-chip.tone-blue,
.work-tag.tone-blue {
  --tag-color: var(--blue);
}

.work-filter-chip.tone-green,
.work-tag.tone-green {
  --tag-color: var(--green);
}

.work-filter-chip.tone-amber,
.work-tag.tone-amber {
  --tag-color: var(--amber-strong);
}

.work-filter-chip.tone-rose,
.work-tag.tone-rose {
  --tag-color: var(--rose);
}

.work-filter-chip.tone-violet,
.work-tag.tone-violet {
  --tag-color: var(--violet);
}

.task-resource-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: -8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.task-resource-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.task-resource-row em {
  max-width: 128px;
  overflow: hidden;
  color: inherit;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-resource-row strong {
  color: var(--blue-light);
  font-size: 10px;
}

.task-resource-row svg {
  width: 12px;
  height: 12px;
}

.work-organizer-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}

.compact-heading {
  align-items: start;
}

.work-calendar {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.work-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.work-calendar-day {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 56px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  isolation: isolate;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.work-calendar-day::before {
  content: "";
  position: absolute;
  inset: auto 6px 5px 6px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--day-accent, var(--blue)) var(--day-load, 0%), var(--line));
  opacity: 0;
}

.work-calendar-day.has-task::before {
  opacity: 1;
}

.work-calendar-day:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--day-accent, var(--blue)) 52%, var(--line));
  box-shadow: 0 6px 16px rgba(13, 22, 38, 0.08);
}

.work-calendar-day.has-urgent-task {
  --day-accent: var(--rose);
  background:
    linear-gradient(135deg, rgba(255, 74, 101, 0.1), transparent 58%),
    var(--panel);
}

.work-calendar-day.has-resource-task {
  --day-accent: var(--blue);
}

.work-calendar-day.has-completed-task:not(.has-urgent-task):not(.has-resource-task) {
  --day-accent: var(--green);
}

.work-calendar-day.is-empty {
  opacity: 0.38;
}

.work-calendar-day.is-today:not(.is-selected) {
  border-color: rgba(26, 106, 255, 0.42);
}

.work-calendar-day.is-selected {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(26, 106, 255, 0.22);
}

.work-calendar-day small {
  position: absolute;
  top: 3px;
  right: 4px;
  display: grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  padding: 0 2px;
  border-radius: 999px;
  background: rgba(26, 106, 255, 0.14);
  color: var(--blue-light);
  font-size: 8px;
  line-height: 1;
}

.work-calendar-day.is-selected small {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.work-calendar-stickers {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 10px);
  overflow: hidden;
  pointer-events: none;
}

.work-calendar-stickers i {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: rgba(26, 106, 255, 0.1);
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

.work-calendar-day.is-selected .work-calendar-stickers i {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.work-calendar-stickers .tone-urgent {
  background: rgba(255, 74, 101, 0.14);
  color: var(--rose);
}

.work-calendar-stickers .tone-resource {
  background: rgba(26, 106, 255, 0.14);
  color: var(--blue);
}

.work-calendar-stickers .tone-complete {
  background: rgba(34, 197, 94, 0.14);
  color: var(--green);
}

.work-calendar-help {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.work-calendar-help span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.calendar-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue);
}

.calendar-dot.is-urgent {
  background: var(--rose);
}

.calendar-dot.is-resource {
  background: var(--blue);
}

.calendar-dot.is-complete {
  background: var(--green);
}

.work-day-modal-list,
.work-day-schedule-picker,
.work-day-completed-strip {
  display: grid;
  gap: 8px;
}

.work-day-task-row,
.work-day-schedule-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
}

.work-day-task-main,
.work-day-schedule-choice {
  color: var(--text);
  text-align: left;
}

.work-day-task-main strong,
.work-day-task-main small,
.work-day-schedule-choice strong,
.work-day-schedule-choice small {
  display: block;
}

.work-day-task-main strong,
.work-day-schedule-choice strong {
  font-size: 13px;
  line-height: 1.25;
}

.work-day-task-main small,
.work-day-schedule-choice small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.work-day-task-main .work-tag-row {
  margin-top: 8px;
}

.work-day-completed-strip {
  padding: 10px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius);
  background: rgba(34, 197, 94, 0.06);
}

.work-day-completed-strip button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  background: var(--panel);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}

.completed-task-panel {
  display: grid;
  gap: 10px;
}

.completed-task-list {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.completed-task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 2px;
}

.completed-task-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.completed-task-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--control-bg);
}

.workspace-column-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.completed-task-main {
  min-width: 0;
  color: var(--text);
  text-align: left;
}

.completed-task-main strong,
.completed-task-main small {
  display: block;
}

.completed-task-main strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.completed-task-main small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.completed-task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.empty-state,
.notice {
  padding: 13px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  line-height: 1.5;
}

.notice.strong {
  border-style: solid;
  color: var(--text);
  background: var(--accent-bg);
  margin-bottom: 12px;
}

.progress-shell {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-alt);
  margin-bottom: 10px;
}

.progress-shell span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
}

.month-navigator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.month-navigator h2 {
  min-width: 190px;
}

.finance-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.finance-stat-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--stat-color, var(--blue)) 28%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--stat-color, var(--blue)) 13%, transparent), transparent 58%),
    var(--list-bg);
}

.finance-stat-card.tone-income {
  --stat-color: var(--green);
}

.finance-stat-card.tone-expense {
  --stat-color: var(--rose);
}

.finance-stat-card.tone-net {
  --stat-color: var(--blue);
}

.finance-stat-card.tone-outstanding {
  --stat-color: var(--amber-strong);
}

.finance-stat-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  color: var(--stat-color, var(--blue));
  background: color-mix(in srgb, var(--stat-color, var(--blue)) 14%, transparent);
}

.finance-stat-icon svg {
  width: 18px;
  height: 18px;
}

.finance-stat-card p,
.finance-stat-card small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.finance-stat-card strong {
  display: block;
  margin: 4px 0 2px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--display-font);
  font-size: 24px;
  line-height: 1.05;
}

.finance-breakdown-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
}

.stacked-money-bar {
  display: flex;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.stacked-money-bar span {
  min-width: 5%;
}

.income-segment {
  background: #22c55e;
}

.expense-segment {
  background: #ef4444;
}

.breakdown-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.breakdown-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breakdown-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.income-dot {
  background: #22c55e;
}

.expense-dot {
  background: #ef4444;
}

.finance-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.finance-columns h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.money-ledger {
  min-width: 0;
}

.money-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 10px 12px 13px;
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--entry-accent, var(--blue));
  background: transparent;
  transition: background 0.15s ease, transform 0.15s ease;
}

.money-row:last-child {
  border-bottom: 1px solid var(--line);
}

.money-row:hover {
  background: var(--list-bg);
  transform: translateX(2px);
}

.money-row strong,
.money-row small {
  display: block;
}

.money-row em {
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.money-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.money-row:hover .money-row-actions,
.money-row:focus-within .money-row-actions {
  opacity: 1;
}

.money-row-actions .icon-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
}

.status-badge {
  min-width: 52px;
  padding: 5px 9px;
  border-radius: 999px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.status-paid {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.status-due {
  color: var(--amber-strong);
  background: rgba(245, 195, 77, 0.16);
}

.invoice-side-panel {
  background:
    linear-gradient(150deg, rgba(26, 106, 255, 0.08), transparent 42%),
    var(--panel);
}

.finance-hub {
  display: grid;
  gap: 18px;
  width: 100%;
}

.finance-hub > * {
  min-width: 0;
}

.finance-titlebar,
.finance-command-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.finance-title-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.finance-title-control h2 {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
}

.finance-period-picker select,
.finance-search-field,
.finance-select-group select {
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text);
  box-shadow: none;
}

.finance-period-picker select {
  min-height: 42px;
  max-width: 180px;
  padding: 0 36px 0 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
}

.finance-add-transaction {
  min-height: 42px;
}

.finance-command-row {
  align-items: stretch;
}

.finance-search-field {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  min-width: min(280px, 100%);
  padding: 0 14px;
  border-radius: 999px;
}

.finance-search-field svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.finance-search-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-weight: 750;
}

.finance-search-field input::placeholder {
  color: var(--muted);
}

.finance-hub-head {
  align-items: flex-start;
  gap: 16px;
}

.finance-tab-strip {
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  overflow-x: auto;
  scrollbar-width: thin;
}

.finance-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.finance-tab svg {
  width: 16px;
  height: 16px;
}

.finance-tab:hover,
.finance-tab.is-active {
  color: var(--blue);
  border-color: rgba(26, 106, 255, 0.28);
  background: rgba(26, 106, 255, 0.09);
}

.finance-tab.is-active {
  box-shadow: inset 0 0 0 1px rgba(26, 106, 255, 0.08);
}

.finance-dashboard-grid,
.bills-layout,
.budget-board,
.tax-layout,
.finance-invoice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.finance-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-lower-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}

.finance-side-card,
.bill-table-card,
.finance-trend-card,
.finance-donut-card,
.finance-ledger-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.055), transparent 48%),
    var(--panel-strong);
}

.finance-side-card h2 {
  margin: 4px 0 8px;
  font-family: var(--display-font);
  font-size: clamp(22px, 2.2vw, 30px);
}

.finance-trend-card,
.finance-donut-card,
.finance-ledger-card {
  display: grid;
  gap: 14px;
  margin: 0;
}

.finance-donut-wrap {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 228px;
}

.finance-donut-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 214px;
  height: 214px;
  margin: 0 auto;
}

.finance-donut-svg {
  width: 214px;
  height: 214px;
  overflow: visible;
}

.finance-donut-track,
.finance-donut-empty,
.finance-donut-segment {
  fill: none;
  stroke-width: 16;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}

.finance-donut-track {
  stroke: rgba(26, 106, 255, 0.10);
}

.finance-donut-empty {
  stroke: rgba(26, 106, 255, 0.18);
}

.finance-donut-segment {
  stroke: var(--segment-color, var(--blue));
  cursor: help;
  transition: filter 0.16s ease, opacity 0.16s ease, stroke-width 0.16s ease;
}

.finance-donut-segment:hover,
.finance-donut-segment:focus {
  filter: drop-shadow(0 8px 14px rgba(26, 106, 255, 0.18));
  opacity: 0.92;
  outline: none;
  stroke-width: 18;
}

.finance-donut-center {
  position: absolute;
  inset: 50%;
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  padding: 10px;
  border-radius: 50%;
  background: var(--panel-strong);
  color: var(--text);
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 0 1px rgba(13, 22, 38, 0.08),
    0 10px 28px rgba(13, 22, 38, 0.08);
}

.finance-donut-center strong {
  font-family: var(--display-font);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
}

.finance-donut-center small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.finance-donut-tooltip {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 3px;
  min-width: 150px;
  max-width: 210px;
  padding: 10px 12px;
  border: 1px solid rgba(26, 106, 255, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--text);
  box-shadow: 0 16px 38px rgba(13, 22, 38, 0.18);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}

.finance-donut-tooltip[hidden] {
  display: none;
}

.finance-donut-tooltip strong {
  font-size: 12px;
  font-weight: 950;
}

.finance-donut-tooltip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.finance-donut-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-content: center;
}

.finance-donut-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finance-donut-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--legend-color, var(--blue));
}

.finance-select-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.finance-select-group label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-select-group select {
  min-height: 38px;
  min-width: 150px;
  padding: 0 34px 0 11px;
  border-radius: 10px;
  font-weight: 850;
  text-transform: none;
}

.finance-single-ledger {
  display: grid;
  gap: 0;
}

.compact-bill-timeline {
  margin: 10px 0 12px;
}

.compact-ledger .money-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.compact-ledger .money-row-actions {
  display: none;
}

.bill-mini-metrics,
.monthly-bill-summary,
.tax-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.bill-mini-metrics span,
.monthly-bill-summary span,
.tax-result-grid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--list-bg);
}

.bill-mini-metrics small,
.monthly-bill-summary small,
.tax-result-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.bill-mini-metrics strong,
.monthly-bill-summary strong,
.tax-result-grid strong {
  font-family: var(--display-font);
  font-size: 18px;
}

.bill-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.bill-metric-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(140deg, rgba(26, 106, 255, 0.1), transparent 62%),
    var(--list-bg);
}

.bill-metric-card > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 13px;
  color: var(--blue);
  background: rgba(26, 106, 255, 0.12);
}

.bill-metric-card svg {
  width: 18px;
  height: 18px;
}

.bill-metric-card p,
.bill-metric-card small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.bill-metric-card strong {
  display: block;
  margin: 3px 0;
  font-family: var(--display-font);
  font-size: 23px;
  line-height: 1.05;
}

.bill-metric-card.tone-danger > span,
.bill-metric-card.tone-warning > span {
  color: var(--rose);
  background: rgba(239, 68, 68, 0.12);
}

.bill-metric-card.tone-paid > span,
.bill-metric-card.tone-calm > span {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.finance-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pill-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-filter-group .chip {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel);
  font-weight: 800;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.pill-filter-group .chip:hover,
.pill-filter-group .chip.active {
  color: var(--blue);
  border-color: rgba(26, 106, 255, 0.34);
  background: rgba(26, 106, 255, 0.1);
}

.bill-table-card {
  padding: 10px;
}

.bill-table-head,
.bill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 86px 104px 86px;
  align-items: center;
  gap: 12px;
}

.bill-table-head {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.bill-row {
  padding: 12px;
  border-top: 1px solid var(--line);
}

.bill-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bill-name-cell strong,
.bill-name-cell small {
  display: block;
}

.bill-name-cell small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.bill-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 13px;
  color: var(--bill-color, var(--blue));
  background: color-mix(in srgb, var(--bill-color, var(--blue)) 14%, transparent);
}

.bill-icon svg {
  width: 18px;
  height: 18px;
}

.bill-amount {
  white-space: nowrap;
}

.bill-status {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.bill-status.status-paid {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.bill-status.status-due-today {
  color: var(--amber-strong);
  background: rgba(245, 195, 77, 0.18);
}

.bill-status.status-upcoming {
  color: var(--blue);
  background: rgba(26, 106, 255, 0.11);
}

.bill-status.status-overdue {
  color: var(--rose);
  background: rgba(239, 68, 68, 0.12);
}

.bill-timeline {
  display: grid;
}

.bill-timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.bill-timeline-item i {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--bill-color, var(--blue));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bill-color, var(--blue)) 13%, transparent);
}

.bill-timeline-item strong,
.bill-timeline-item small {
  display: block;
}

.bill-timeline-item small {
  color: var(--muted);
}

.budget-row-list {
  display: grid;
  gap: 12px;
}

.budget-row {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--list-bg);
}

.budget-row-head,
.budget-row-numbers,
.finance-goal-numbers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.budget-row-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.budget-row-head i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--budget-color, var(--blue));
}

.budget-row-head em {
  font-style: normal;
  font-weight: 900;
  color: var(--muted);
}

.budget-progress,
.finance-goal-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.budget-progress i,
.finance-goal-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--budget-color, var(--goal-color, var(--blue)));
}

.budget-row-numbers {
  color: var(--muted);
  font-size: 12px;
}

.budget-row-numbers label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.budget-row-numbers input {
  width: 104px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
}

.budget-insight-card {
  display: grid;
  justify-items: center;
  text-align: center;
}

.budget-ring {
  display: grid;
  place-items: center;
  width: 158px;
  height: 158px;
  margin-top: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--panel) 0 56%, transparent 57%),
    conic-gradient(var(--blue) var(--budget-progress, 0%), rgba(26, 106, 255, 0.12) 0);
}

.budget-ring strong {
  font-family: var(--display-font);
  font-size: 34px;
}

.budget-ring small {
  margin-top: -52px;
  color: var(--muted);
  font-weight: 800;
}

.bir-deadline-list {
  display: grid;
  gap: 10px;
}

.bir-deadline-list article {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--list-bg);
}

.bir-deadline-list span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 12px;
  color: var(--blue);
  background: rgba(26, 106, 255, 0.1);
}

.finance-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.finance-goal-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--goal-color, var(--blue)) 24%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--goal-color, var(--blue)) 10%, transparent), transparent 60%),
    var(--panel-strong);
}

.finance-goal-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .finance-dashboard-grid,
  .finance-chart-grid,
  .finance-lower-grid,
  .bills-layout,
  .budget-board,
  .tax-layout,
  .finance-invoice-layout,
  .finance-goal-grid {
    grid-template-columns: 1fr;
  }

  .bill-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bill-table-head {
    display: none;
  }

  .bill-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }

  .bill-row > span:not(.bill-icon),
  .bill-row > em {
    justify-self: start;
  }

  .bill-row .secondary-action {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

@media (max-width: 768px) {
  .finance-hub {
    gap: 14px;
  }

  .finance-titlebar,
  .finance-command-row {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-title-control {
    justify-content: space-between;
    width: 100%;
  }

  .finance-period-picker select {
    max-width: 150px;
  }

  .finance-add-transaction,
  .finance-search-field {
    width: 100%;
  }

  .finance-hub-head {
    align-items: stretch;
  }

  .finance-hub-head .button-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .finance-hub-head .button-row .compact {
    min-width: 0;
    padding-inline: 8px;
  }

  .finance-tab-strip {
    scroll-snap-type: x mandatory;
    padding: 6px;
    border-radius: 15px;
  }

  .finance-tab {
    flex: 0 0 auto;
    min-width: 132px;
    scroll-snap-align: start;
  }

  .bill-metric-grid,
  .finance-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .bill-metric-card,
  .finance-stat-card {
    padding: 12px;
  }

  .bill-metric-card strong,
  .finance-stat-card strong {
    font-size: 20px;
  }

  .finance-filter-row,
  .budget-row-numbers {
    align-items: stretch;
    flex-direction: column;
  }

  .pill-filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .bill-mini-metrics,
  .monthly-bill-summary,
  .tax-result-grid {
    grid-template-columns: 1fr;
  }

  .finance-columns {
    grid-template-columns: 1fr;
  }

  .finance-donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .finance-select-group {
    width: 100%;
  }

  .finance-select-group label,
  .finance-select-group select {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .bill-metric-grid,
  .finance-stat-grid {
    grid-template-columns: 1fr;
  }

  .finance-hub-head .button-row {
    grid-template-columns: 1fr;
  }

  .bill-row {
    grid-template-columns: 1fr;
  }

  .bill-row .secondary-action {
    grid-column: auto;
    grid-row: auto;
  }

  .budget-row-head,
  .finance-goal-numbers {
    align-items: flex-start;
    flex-direction: column;
  }
}

.invoice-list,
.invoice-empty-state {
  margin-top: 14px;
}

.invoice-empty-state {
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--list-bg);
  font-size: 13px;
  line-height: 1.45;
}

.invoice-list {
  display: grid;
  gap: 10px;
}

.invoice-list-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--list-bg);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.invoice-list-card:hover {
  border-color: rgba(26, 106, 255, 0.34);
  box-shadow: 0 10px 28px rgba(13, 22, 38, 0.08);
  transform: translateY(-1px);
}

.invoice-list-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  color: var(--text);
  text-align: left;
}

.invoice-list-main span,
.invoice-list-main small {
  display: block;
  min-width: 0;
}

.invoice-list-main strong {
  font-size: 15px;
  font-weight: 900;
}

.invoice-list-main small,
.invoice-list-meta small {
  color: var(--muted);
  font-size: 11px;
}

.invoice-list-main em {
  flex-shrink: 0;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.invoice-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.invoice-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-draft {
  color: var(--blue);
  background: rgba(26, 106, 255, 0.12);
}

.status-overdue {
  color: var(--rose);
  background: rgba(239, 68, 68, 0.12);
}

.invoice-row-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.invoice-row-actions .icon-button {
  min-width: 0;
  padding: 0 8px;
}

.danger-action {
  color: var(--rose);
}

.danger-action:hover {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.08);
}

.invoice-mini-card {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.invoice-mini-card span,
.invoice-mini-card small {
  color: var(--muted);
  font-size: 12px;
}

.invoice-mini-card strong {
  font-size: 22px;
}

.positive {
  color: var(--green);
}

.negative {
  color: var(--rose);
}

.habits-panel {
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.08), transparent 36%),
    var(--panel);
}

.habit-progress-hero {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--list-bg) 0%, var(--panel) 100%);
  position: relative;
  overflow: hidden;
}

.habit-progress-hero::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.habit-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 5px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--habit-progress) * 1%), var(--line) 0);
  box-shadow: 0 0 0 3px var(--panel), 0 0 16px rgba(16, 185, 129, 0.25);
  text-align: center;
  transition: background 0.6s ease;
}

.habit-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--panel);
  z-index: 0;
}

.habit-ring strong,
.habit-ring span {
  position: relative;
  z-index: 1;
}

.habit-ring strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
}

.habit-ring span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.habit-progress-hero h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.habit-progress-hero p {
  margin: 0;
}

.habit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.habit-row small,
.habit-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.habit-row.is-done {
  background: var(--accent-bg);
  border-color: rgba(34, 197, 94, 0.35);
}

.habit-row.is-selected {
  border-color: rgba(26, 106, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(26, 106, 255, 0.18);
}

.habit-select-area {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.habit-select-area strong {
  display: block;
}

.habit-row-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--green);
  background: rgba(34, 197, 94, 0.11);
}

.habit-row-meta {
  display: grid;
  gap: 3px;
  text-align: right;
}

.habit-row-streak {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 82px;
}

.habit-streak-fire {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.habit-streak-fire.is-hot {
  color: #ff6b35;
}

.habit-streak-fire.is-blazing {
  color: #ff3366;
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.4);
}

.habit-week-mini {
  display: flex;
  gap: 2px;
}

.habit-week-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}

.habit-week-dot.done {
  background: var(--green);
}

.habit-sticker-earned {
  font-size: 18px;
  line-height: 1;
  animation: sticker-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sticker-pop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-15deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.habit-check-button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.habit-check-button.is-on {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
}

.habit-detail-panel h2 {
  margin-bottom: 8px;
}

.habit-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.habit-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 16px 0;
}

.habit-day {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 12px;
}

.habit-day strong {
  color: var(--text);
  font-size: 17px;
}

.habit-day.is-done {
  color: #fff;
  border-color: var(--green);
  background: linear-gradient(180deg, var(--green), #16a34a);
}

.habit-day.is-done strong {
  color: #fff;
}

.habit-day.is-today {
  box-shadow: inset 0 0 0 2px rgba(245, 195, 77, 0.55);
}

.habit-note-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.habit-note-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.streak-milestone-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  color: #07100f;
  font-size: 13px;
  font-weight: 700;
  animation: slide-up-fade 0.5s ease;
}

.streak-milestone-badge.bronze {
  background: #cd7f32;
}

.streak-milestone-badge.silver {
  background: #a8a9ad;
}

.streak-milestone-badge.gold {
  background: #ffd700;
}

.streak-milestone-badge.platinum {
  background: #e5e4e2;
}

.streak-milestone-badge.legend {
  background: linear-gradient(135deg, #b9f2ff, #7de8ff);
  box-shadow: 0 0 16px rgba(185, 242, 255, 0.6);
}

@keyframes slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.habit-note-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.habit-note-entry {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--list-bg);
}

.habit-note-date {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.habit-note-text {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.habit-note-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.habit-note-entry:hover .habit-note-actions {
  opacity: 1;
}

.habit-note-edit-btn,
.habit-note-delete-btn {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.habit-note-edit-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.habit-note-delete-btn:hover {
  color: var(--rose);
  border-color: var(--rose);
}

.habit-progression-section {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.habit-progression-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.sticker-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 8px 0;
}

.sticker-shelf-empty {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.sticker-item {
  position: relative;
  font-size: 22px;
  line-height: 1;
  cursor: default;
  transition: transform 0.2s ease;
}

.sticker-item:hover {
  transform: scale(1.3);
}

.sticker-item[data-label]::after {
  content: attr(data-label);
  position: absolute;
  bottom: 110%;
  left: 50%;
  z-index: 4;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.15s ease;
}

.sticker-item:hover[data-label]::after {
  opacity: 1;
}

.habit-streak-to-next {
  margin-top: 8px;
}

.habit-streak-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.habit-streak-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.habit-streak-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width 0.6s ease;
}

.habit-motivation-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), rgba(34, 197, 94, 0.08)),
    var(--panel);
}

.habit-motivation-card blockquote {
  display: grid;
  gap: 6px;
  margin: 0;
}

.habit-motivation-card blockquote p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.habit-motivation-card blockquote footer {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.habit-motivation-action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.habit-motivation-action svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--green);
}

.habit-insight-card {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(26, 106, 255, 0.24);
  border-radius: var(--radius);
  background: var(--accent-bg);
}

.habit-insight-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.journal-form,
.chat-form {
  display: grid;
  gap: 12px;
}

.journal-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.journal-field-grid,
.journal-detail-grid {
  display: grid;
  gap: 12px;
}

.journal-field-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journal-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.input-row {
  display: grid;
  grid-template-columns: 220px;
  gap: 12px;
}

select,
textarea,
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  outline: 2px solid transparent;
}

select:focus,
textarea:focus,
input:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(26, 106, 255, 0.12);
}

textarea::placeholder,
input::placeholder {
  color: var(--faint);
}

select,
input {
  min-height: 42px;
  padding: 0 12px;
}

textarea {
  resize: vertical;
  padding: 12px;
  line-height: 1.55;
}

.entry-card {
  padding: 13px;
  border-radius: var(--radius);
  background: var(--list-bg);
}

.entry-card span {
  color: var(--blue-light);
  font-size: 12px;
  font-weight: 800;
}

.entry-card h3 {
  margin: 5px 0 0;
  font-size: 15px;
}

.entry-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.entry-detail-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.entry-detail-list small {
  display: grid;
  gap: 2px;
  color: var(--muted);
  line-height: 1.45;
}

.entry-detail-list strong {
  color: var(--text);
  font-size: 11px;
  text-transform: uppercase;
}

.entry-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.entry-meta-row em {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  background: var(--panel);
}

.journal-calendar-panel {
  align-self: start;
}

.journal-calendar {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.calendar-toolbar strong {
  text-align: center;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.calendar-weekdays span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
}

.calendar-day.is-empty {
  border-color: transparent;
  background: transparent;
}

.calendar-day.has-entry {
  border-color: rgba(26, 106, 255, 0.35);
  background: var(--accent-bg);
}

.calendar-day.is-selected {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.calendar-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 2px rgba(245, 195, 77, 0.55);
}

.calendar-day small {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--blue);
  font-size: 8px;
  line-height: 1;
}

.calendar-day.is-selected small {
  color: var(--blue);
}

.selected-entry-summary {
  display: grid;
  gap: 3px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-bg);
}

.selected-entry-summary span {
  color: var(--muted);
  font-size: 12px;
}

.job-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--list-bg);
}

.job-card-copy {
  min-width: 0;
}

.job-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.job-card-head strong {
  flex-shrink: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.job-card p,
.plugin-card p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.job-alert-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.job-filter-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.job-filter-search-wrap svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.job-filter-search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-weight: 750;
}

.job-filter-summary {
  min-height: 42px;
}

.job-filter-summary span {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-filter-summary strong {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  color: white;
  background: var(--blue);
  font-size: 11px;
}

.job-card h3 {
  font-size: 15px;
}

.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.job-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(26, 106, 255, 0.14);
  border-radius: 999px;
  color: var(--text);
  background: rgba(26, 106, 255, 0.07);
  font-size: 11px;
  font-weight: 850;
}

.job-card-meta svg {
  width: 13px;
  height: 13px;
  color: var(--blue);
}

.job-card-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  gap: 7px;
}

.source-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  color: var(--blue-light);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  background: var(--accent-bg);
}

.job-score {
  justify-self: end;
  text-align: right;
}

.job-score span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
  font-size: 11px;
  font-weight: 800;
}

.connect-socials-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.09), transparent 46%),
    var(--list-bg);
}

.connect-socials-banner strong,
.connect-socials-banner span {
  display: block;
}

.connect-socials-banner span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.job-email-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), rgba(32, 196, 232, 0.04)),
    rgba(255, 255, 255, 0.7);
}

.job-email-action-card strong,
.job-email-action-card span {
  display: block;
}

.job-email-action-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.job-email-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.job-email-actions label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.job-email-actions select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--text);
  font-weight: 750;
}

.connected-accounts-panel {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.connected-accounts-panel.is-highlighted {
  border-color: rgba(26, 106, 255, 0.56);
  box-shadow: 0 0 0 4px rgba(26, 106, 255, 0.12), var(--shadow);
  transform: translateY(-2px);
}

.jobs-settings-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.jobs-panel-head {
  display: grid;
  gap: 4px;
}

.jobs-panel-head h2 {
  font-size: 20px;
}

.jobs-panel-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.mini-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.mini-section-heading small {
  color: var(--muted);
  font-size: 12px;
}

.account-list,
.notification-list {
  display: grid;
  gap: 8px;
}

.account-row,
.notification-row,
.quiet-hours-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--list-bg);
}

.quiet-hours-row {
  grid-template-columns: 1fr;
}

.account-row {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
}

.account-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.platform-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.platform-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--blue);
  background: var(--accent-bg);
  font-size: 12px;
  font-weight: 900;
}

.platform-mark.tone-green {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.platform-mark.tone-blue {
  color: var(--blue);
  background: rgba(26, 106, 255, 0.12);
}

.platform-mark.tone-navy {
  color: var(--text);
  background: var(--control-bg);
}

.platform-mark.tone-cyan {
  color: var(--cyan);
  background: rgba(23, 201, 195, 0.12);
}

.platform-mark.tone-amber {
  color: var(--amber-strong);
  background: rgba(245, 195, 77, 0.14);
}

.platform-lockup strong,
.platform-lockup small,
.platform-lockup em,
.notification-row strong,
.notification-row small,
.quiet-hours-row strong,
.quiet-hours-row small {
  display: block;
}

.platform-lockup small,
.notification-row small,
.quiet-hours-row small {
  color: var(--muted);
  font-size: 12px;
}

.platform-lockup small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.platform-lockup em {
  margin-top: 2px;
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.platform-lockup small i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}

.platform-lockup small.is-connected i {
  background: var(--green);
}

.account-link-control {
  display: grid;
  gap: 6px;
}

.account-link-control > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.account-link-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.account-link-entry input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--control-bg);
  color: var(--text);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-link-entry input:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 4px var(--accent-bg);
}

.text-link {
  color: var(--blue-light);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.text-link:hover {
  color: var(--blue);
}

.notification-row select {
  width: 142px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

.quiet-time-inputs {
  display: flex;
  gap: 8px;
}

.quiet-time-inputs label {
  flex: 1;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.quiet-time-inputs input {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  font-size: 12px;
}

.job-source-form,
.job-draft-form {
  display: grid;
  gap: 10px;
}

.job-source-list {
  display: grid;
  gap: 8px;
}

.job-source-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--list-bg);
}

.job-source-row strong,
.job-source-row small {
  display: block;
}

.job-source-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-draft-output {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.55;
  background: var(--control-bg);
}

.required {
  color: #ef4444;
}

.job-draft-subject {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.07);
}

.job-draft-subject span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-draft-subject strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.job-draft-upload-field {
  align-content: start;
}

.job-draft-upload-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.job-draft-upload-control:hover,
.job-draft-upload-control:focus-within {
  border-color: rgba(26, 106, 255, 0.4);
  background: var(--panel);
  box-shadow: 0 0 0 4px var(--accent-bg);
  transform: translateY(-1px);
}

.job-draft-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(26, 106, 255, 0.22);
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.job-draft-upload-button svg {
  width: 15px;
  height: 15px;
}

.job-draft-upload-status {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-draft-file-list {
  display: grid;
  gap: 7px;
}

.job-draft-file-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(26, 106, 255, 0.12);
  border-radius: 12px;
  background: rgba(26, 106, 255, 0.05);
}

.job-draft-file-list article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--blue);
  background: rgba(26, 106, 255, 0.1);
}

.job-draft-file-list strong,
.job-draft-file-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-draft-file-list small {
  color: var(--muted);
  font-size: 11px;
}

.interview-panel {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 0;
}

.interview-hero {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 0 24px;
  text-align: center;
}

.interview-hero-icon {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 16px;
  color: var(--blue);
  background: rgba(37, 99, 235, 0.08);
}

.interview-hero h3 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.15;
}

.interview-setup-form {
  display: grid;
  gap: 12px;
}

.interview-tips-before {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--list-bg);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.interview-tips-before ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.interview-tips-before li {
  margin: 3px 0;
}

.interview-active {
  text-align: center;
}

.interview-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 12px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  color: var(--text);
  font-size: 13px;
}

.live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  animation: interview-pulse 1.4s ease-in-out infinite;
}

@keyframes interview-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}

.interview-filoo-visual {
  display: grid;
  min-height: 190px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 52%, rgba(34, 211, 238, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(15, 23, 42, 0.02));
}

.interview-filoo-gif {
  display: block;
  width: 170px;
  height: 170px;
  object-fit: contain;
  object-position: center bottom;
}

.interview-instructions {
  display: grid;
  gap: 4px;
  margin-bottom: 20px;
}

.interview-instructions p {
  margin: 0;
}

.interview-controls {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.interview-note {
  margin-top: 14px;
  text-align: center;
}

.feedback-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.feedback-score {
  display: flex;
  width: 82px;
  height: 82px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--score-color, var(--blue));
  border-radius: 50%;
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

.feedback-score strong {
  color: var(--score-color, var(--blue));
  font-size: 24px;
  line-height: 1;
}

.feedback-score span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.feedback-header h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
}

.feedback-section {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--list-bg);
}

.feedback-section h4 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 14px;
}

.feedback-section ul,
.feedback-section ol {
  margin: 0;
  padding-left: 20px;
}

.feedback-section li {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.feedback-encouragement {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 22px 0;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.07);
}

.feedback-encouragement img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: contain;
}

.feedback-encouragement p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
}

.interview-loading {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 260px;
  align-content: center;
  text-align: center;
}

.interview-loading p {
  margin: 0;
}

.health-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent 48%),
    var(--list-bg);
}

.health-hero h3 {
  margin: 4px 0 7px;
  font-size: 22px;
}

.health-ring {
  width: 96px;
  height: 96px;
}

.health-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.health-metric-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.health-metric-card > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.health-metric-card em,
.health-metric-card small,
.health-metric-card strong {
  display: block;
}

.health-metric-card em {
  margin-top: 4px;
  font-style: normal;
  font-size: 22px;
  font-weight: 900;
}

.health-metric-card small {
  color: var(--muted);
  font-size: 12px;
}

.health-section-stack {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.health-section-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.health-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.health-card-heading h3 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.15;
}

.health-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 13px;
  color: var(--blue);
  background: rgba(26, 106, 255, 0.1);
}

.health-card-icon svg {
  width: 18px;
  height: 18px;
}

.health-inline-form {
  display: grid;
  gap: 12px;
}

.health-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.health-input-grid label,
.health-inline-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.health-input-combo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 8px;
}

.health-input-grid input,
.health-input-grid select,
.meal-log-row input,
.meal-log-row select {
  min-width: 0;
}

.health-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.health-card-footer small {
  color: var(--muted);
  font-size: 12px;
}

.health-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.health-badge.tone-good {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
}

.health-badge.tone-watch {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.health-badge.tone-high {
  background: rgba(239, 68, 68, 0.12);
  color: var(--rose);
}

.health-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.health-choice-button,
.health-choice-label {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.health-choice-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.health-choice-button.is-selected,
.health-choice-label.is-selected {
  border-color: rgba(26, 106, 255, 0.5);
  background: var(--blue);
  color: #fff;
}

.health-result-line {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.sleep-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
}

.sleep-bars span {
  min-height: 6px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, var(--blue), rgba(77, 143, 255, 0.45));
}

.meal-log-list {
  display: grid;
  gap: 8px;
}

.meal-log-row {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.meal-log-row summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.meal-log-row summary::-webkit-details-marker {
  display: none;
}

.meal-log-row summary strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.meal-log-row summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.meal-log-status {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.06);
}

.meal-log-status.is-done {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.meal-log-status svg {
  width: 14px;
  height: 14px;
}

.meal-log-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 8px;
  margin-top: 8px;
}

.health-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}

.health-quick-stats article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--list-bg);
}

.health-quick-stats span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.health-quick-stats strong {
  font-size: 16px;
}

.health-plan-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.health-plan-list article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.health-plan-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.health-plan-mindful-card {
  border-color: rgba(23, 201, 195, 0.28) !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(23, 201, 195, 0.12), transparent 34%),
    var(--list-bg) !important;
}

.health-plan-mindful-card.is-active {
  border-color: rgba(26, 106, 255, 0.32) !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(26, 106, 255, 0.13), transparent 36%),
    linear-gradient(135deg, rgba(23, 201, 195, 0.08), rgba(26, 106, 255, 0.06)),
    var(--list-bg) !important;
}

.mobility-session-card.is-active {
  gap: 12px;
  border-color: rgba(34, 197, 94, 0.34);
  background:
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(26, 106, 255, 0.09), rgba(34, 197, 94, 0.08)),
    var(--list-bg);
}

.mobility-session-card[data-mobility-phase-state="recovery"] {
  border-color: rgba(77, 143, 255, 0.32);
  background:
    radial-gradient(circle at 12% 18%, rgba(77, 143, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(77, 143, 255, 0.1), rgba(143, 155, 189, 0.08)),
    var(--list-bg);
}

.mobility-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mobility-session-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mobility-countdown {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: var(--green);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.mobility-session-body {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.mobility-session-body p {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.mobility-session-body small {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted);
  font-weight: 800;
}

.mobility-filoo-preview {
  width: 78px !important;
  max-width: 78px;
  aspect-ratio: 640 / 854;
  overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.16));
}

.mobility-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.mobility-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #2563eb);
  transition: width 0.4s ease;
}

.meet-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}

.meet-code-zone {
  display: grid;
  gap: 12px;
  min-height: 210px;
  align-content: center;
  padding: 18px;
  border: 1px dashed rgba(26, 106, 255, 0.32);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.1), rgba(34, 197, 94, 0.08)),
    var(--list-bg);
}

.meet-code-zone strong {
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: 0.08em;
  line-height: 1;
}

.meet-code-zone small {
  color: var(--muted);
  line-height: 1.5;
}

.meet-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meet-profile {
  min-width: 0;
}

.meet-rules {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.meet-rules span,
.connect-productivity-note {
  display: flex;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--list-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.meet-rules svg {
  width: 15px;
  height: 15px;
  color: var(--blue);
}

.badge-profile h2 {
  margin: 0 0 8px;
}

.badge-tagline {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.badge-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--accent-bg);
  border: 1px solid rgba(26, 106, 255, 0.22);
  color: var(--text);
  font-size: 13px;
}

.badge-level-icon svg {
  width: 15px;
  height: 15px;
  color: var(--blue);
}

.badge-rank {
  color: var(--muted);
  font-size: 12px;
}

.connect-layout {
  grid-template-columns: minmax(0, 1.1fr) 360px;
}

.connect-right-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: 420px;
}

.connect-productivity-note {
  display: grid;
  gap: 3px;
}

.connect-productivity-note strong {
  color: var(--text);
}

.connect-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--panel-alt);
}

.connect-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.connect-tab-btn svg {
  width: 15px;
  height: 15px;
}

.connect-tab-btn.is-active {
  background: var(--panel-strong);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(13, 22, 38, 0.1);
}

.connect-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--line-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.connect-tab-badge.tone-blue {
  background: var(--blue);
  color: #fff;
}

.bluetooth-pair-card {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(26, 106, 255, 0.08), rgba(31, 209, 196, 0.08));
}

.bluetooth-pair-card.is-paired {
  border-color: rgba(34, 197, 94, 0.24);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(31, 209, 196, 0.08));
}

.bluetooth-pair-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--panel-strong);
  color: var(--blue);
  box-shadow: 0 8px 22px rgba(26, 106, 255, 0.12);
}

.bluetooth-pair-card.is-paired .bluetooth-pair-icon {
  color: var(--success);
}

.bluetooth-pair-icon svg {
  width: 18px;
  height: 18px;
}

.bluetooth-pair-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.bluetooth-pair-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.bluetooth-pair-copy small,
.bluetooth-pair-copy em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.bluetooth-pair-copy em {
  color: var(--danger);
  font-weight: 750;
}

.bluetooth-pair-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.connect-tab-panel {
  display: none;
  min-height: 0;
  overflow-y: auto;
}

.connect-tab-panel.is-active {
  display: block;
}

.connect-search-wrap {
  margin-bottom: 12px;
}

.connect-search-input {
  width: 100%;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 13px;
}

.connect-list-label {
  margin: 0 0 6px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.connect-list-label-spaced {
  margin-top: 16px;
}

.friends-list,
.dm-thread-list {
  display: grid;
  gap: 2px;
}

.connect-empty {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 24px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.connect-empty svg {
  width: 26px;
  height: 26px;
}

.connect-empty p {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.connect-empty small {
  max-width: 220px;
  font-size: 12px;
  line-height: 1.45;
}

.friend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px;
  border-radius: 12px;
  background: transparent;
  transition: background 0.15s ease;
}

.friend-row:hover {
  background: var(--control-hover);
}

.friend-profile-trigger,
.dm-thread-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.friend-avatar-wrap,
.friend-avatar-mini {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.friend-avatar,
.friend-avatar-mini {
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-bg);
  border: 2px solid var(--line);
}

.friend-avatar img,
.friend-avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.friend-online-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--faint);
}

.friend-online-dot.is-online {
  background: var(--green);
}

.friend-info,
.dm-thread-copy {
  min-width: 0;
}

.friend-info strong,
.dm-thread-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-info small,
.dm-thread-copy small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.friend-row:hover .friend-actions {
  opacity: 1;
}

.friend-msg-btn:hover {
  color: var(--blue);
}

.dm-thread-row {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 7px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.dm-thread-row:hover,
.dm-thread-row.is-active {
  background: var(--control-hover);
}

.dm-thread-row em {
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.friend-profile-modal .modal-body {
  gap: 14px;
}

.friend-profile-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--list-bg);
}

.friend-profile-avatar-wrap {
  flex-shrink: 0;
  text-align: center;
}

.friend-profile-avatar {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--avatar-bg);
}

.friend-profile-avatar img,
.friend-filoo-tag img,
.friend-companion-avatar img,
.dm-avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.friend-profile-online {
  display: block;
  margin-top: 6px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
}

.friend-profile-online.is-online {
  color: var(--green);
}

.friend-profile-info h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.friend-profile-tagline {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.friend-profile-location {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.friend-profile-location svg {
  width: 14px;
  height: 14px;
}

.friend-level-card {
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.22);
  border-radius: var(--radius);
  background: var(--accent-bg);
}

.friend-level-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.friend-level-badge {
  width: 44px;
  height: 44px;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.friend-level-top strong {
  display: block;
  font-size: 15px;
}

.friend-level-top small,
.friend-level-card > small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.friend-filoo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  font-size: 12px;
  font-weight: 800;
}

.friend-filoo-tag img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.friend-xp-bar {
  height: 7px;
  overflow: hidden;
  margin-bottom: 6px;
  border-radius: 999px;
  background: rgba(26, 106, 255, 0.12);
}

.friend-xp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--amber));
}

.friend-skill-label {
  margin-bottom: 8px;
}

.friend-companion-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.friend-companion-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.friend-companion-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.friend-companion-avatar img {
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--avatar-bg);
}

.friend-costume-badge {
  position: absolute;
  right: -12px;
  bottom: -4px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  font-size: 9px;
  font-weight: 900;
}

.dm-modal {
  width: min(520px, 100%) !important;
  height: min(620px, 90vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
}

.dm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.dm-header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dm-header-user strong {
  display: block;
  font-size: 14px;
}

.dm-header-user small {
  color: var(--muted);
  font-size: 12px;
}

.dm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dm-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 18px 16px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--panel), var(--list-bg));
}

.dm-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  margin: auto;
  color: var(--muted);
  text-align: center;
}

.dm-empty svg {
  width: 34px;
  height: 34px;
}

.dm-empty p {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.dm-message {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 88%;
}

.dm-from-me {
  align-self: flex-end;
}

.dm-from-them {
  align-self: flex-start;
}

.dm-avatar-mini {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--avatar-bg);
}

.dm-bubble {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
  box-shadow: 0 8px 20px rgba(13, 22, 38, 0.06);
}

.dm-from-me .dm-bubble {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.dm-from-them .dm-bubble {
  border-bottom-left-radius: 6px;
}

.dm-bubble p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.dm-bubble small {
  display: block;
  margin-top: 4px;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.62;
}

.dm-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.dm-text-input {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text);
}

.dm-send-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
}

.skill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.skill-row span {
  padding: 6px 9px;
}

.plugin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plugin-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 150px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--list-bg);
}

.plugin-card.is-enabled {
  border-color: rgba(26, 106, 255, 0.3);
  background: var(--accent-bg);
}

.productivity-tools-panel .tool-intro {
  margin-bottom: 16px;
}

.productivity-tool-card {
  min-height: 238px;
}

.tool-card-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.tool-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.tool-output {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.tool-output span {
  color: var(--blue-light);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.tool-output strong {
  font-size: 24px;
}

.tool-output small {
  color: var(--muted);
  line-height: 1.45;
}

.tool-output.is-live {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.08);
}

.focus-cycle-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 13, 26, 0.72);
  backdrop-filter: blur(10px);
}

.focus-cycle-card {
  width: min(620px, 100%);
  min-height: min(720px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr) auto auto auto auto;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 28%, rgba(26, 106, 255, 0.28), transparent 34%),
    linear-gradient(180deg, rgba(18, 30, 58, 0.94), rgba(7, 13, 26, 0.96));
  color: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  animation: focus-cycle-enter 0.36s ease both;
}

.focus-cycle-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.focus-cycle-meta span,
.focus-cycle-meta strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.focus-cycle-meta strong {
  background: rgba(26, 106, 255, 0.9);
  color: #fff;
}

.focus-cycle-filoo-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 58%, rgba(98, 233, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.focus-cycle-filoo-frame::before {
  content: "";
  position: absolute;
  inset: 16% 18% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 236, 255, 0.24), transparent 64%);
  filter: blur(12px);
}

.focus-cycle-filoo {
  position: relative;
  z-index: 1;
  width: min(76vw, 330px);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(20, 45, 92, 0.22));
  mix-blend-mode: normal;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.focus-cycle-filoo-frame.is-swapping .focus-cycle-filoo {
  opacity: 0;
  transform: scale(0.96);
}

.focus-cycle-copy {
  text-align: center;
}

.focus-cycle-copy .microcopy {
  color: #67e8f9;
}

.focus-cycle-copy h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.02;
  letter-spacing: 0;
}

.focus-cycle-copy p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.55;
}

.focus-cycle-timer {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.focus-cycle-timer strong {
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1;
  letter-spacing: 0;
}

.focus-cycle-timer span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 800;
}

.focus-cycle-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.focus-cycle-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #67e8f9);
  transition: width 0.4s ease;
}

.focus-cycle-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.focus-cycle-actions .secondary-action {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.focus-cycle-overlay[data-phase="break"] .focus-cycle-meta strong {
  background: rgba(34, 197, 94, 0.88);
}

.focus-cycle-overlay[data-phase="complete"] .focus-cycle-meta strong {
  background: rgba(245, 195, 77, 0.95);
  color: #111827;
}

.mobility-cycle-card {
  background:
    radial-gradient(circle at 50% 28%, rgba(34, 197, 94, 0.25), transparent 34%),
    linear-gradient(180deg, rgba(14, 44, 53, 0.95), rgba(7, 13, 26, 0.97));
}

.mobility-cycle-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(34, 197, 94, 0.14), transparent 30%),
    #07101f;
  backdrop-filter: none;
}

.mobility-cycle-overlay .focus-cycle-meta strong {
  background: rgba(34, 197, 94, 0.92);
}

.mobility-cycle-overlay .focus-cycle-copy .microcopy {
  color: #86efac;
}

.mobility-cycle-overlay .focus-cycle-progress span {
  background: linear-gradient(90deg, #22c55e, #67e8f9);
}

.mobility-cycle-overlay[data-phase="break"] .focus-cycle-meta strong {
  background: rgba(20, 184, 166, 0.92);
}

.mobility-cycle-filoo-frame {
  background:
    radial-gradient(circle at 50% 58%, rgba(34, 197, 94, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.mobility-cycle-filoo {
  width: min(76vw, 340px);
}

.mindful-cycle-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(125, 211, 252, 0.12), transparent 32%),
    rgba(7, 13, 26, 0.78);
}

.mindful-cycle-card {
  background:
    radial-gradient(circle at 50% 28%, rgba(45, 212, 191, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(15, 37, 52, 0.96), rgba(7, 13, 26, 0.98));
}

.mindful-cycle-overlay .focus-cycle-meta strong {
  background: rgba(20, 184, 166, 0.9);
}

.mindful-cycle-overlay[data-phase="complete"] .focus-cycle-meta strong {
  background: rgba(125, 211, 252, 0.96);
  color: #07101f;
}

.mindful-cycle-copy .microcopy {
  color: #99f6e4;
}

.mindful-cycle-filoo-frame {
  min-height: 300px;
  background:
    radial-gradient(circle at 50% 58%, rgba(45, 212, 191, 0.24), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
}

.mindful-cycle-filoo-frame::before {
  background: radial-gradient(circle, rgba(125, 211, 252, 0.24), transparent 64%);
}

.mindful-cycle-filoo {
  width: min(76vw, 320px);
}

.mindful-cycle-progress span {
  background: linear-gradient(90deg, #14b8a6, #7dd3fc);
}

.mindful-breath-orb {
  position: absolute;
  right: 28px;
  bottom: 26px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
  border: 1px solid rgba(153, 246, 228, 0.42);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(153, 246, 228, 0.28), rgba(20, 184, 166, 0.08) 58%, rgba(15, 37, 52, 0.18));
  box-shadow:
    0 0 0 10px rgba(20, 184, 166, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.24);
  color: #ecfeff;
  font-size: 13px;
  font-weight: 900;
  animation: mindful-breathe 16s ease-in-out infinite;
}

.mindful-breath-orb::before,
.mindful-breath-orb::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(236, 254, 255, 0.22);
  border-radius: inherit;
}

.mindful-breath-orb::after {
  inset: 24px;
  border-color: rgba(153, 246, 228, 0.26);
}

.mindful-breath-orb[data-breath-phase="inhale"] {
  transform: scale(1.08);
}

.mindful-breath-orb[data-breath-phase="hold"] {
  transform: scale(1.08);
}

.mindful-breath-orb[data-breath-phase="exhale"],
.mindful-breath-orb[data-breath-phase="rest"] {
  transform: scale(0.86);
}

.mindful-breath-orb[data-breath-phase="complete"] {
  animation: none;
  transform: scale(0.96);
}

.mindful-cycle-timer {
  background: rgba(236, 254, 255, 0.075);
}

.mindful-cycle-actions .primary-action {
  background: linear-gradient(135deg, #14b8a6, #2563eb);
  box-shadow: 0 8px 0 rgba(15, 118, 110, 0.74);
}

@keyframes mindful-breathe {
  0%,
  100% {
    transform: scale(0.86);
  }
  25%,
  50% {
    transform: scale(1.08);
  }
  87% {
    transform: scale(0.86);
  }
}

@keyframes focus-cycle-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.focus-cycle-task-list {
  display: grid;
  gap: 10px;
  max-height: min(430px, 56vh);
  overflow: auto;
  padding-right: 2px;
}

.focus-cycle-task-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.focus-cycle-task-option:hover {
  border-color: rgba(26, 106, 255, 0.38);
  background: var(--accent-bg);
  transform: translateY(-1px);
}

.focus-cycle-task-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.focus-cycle-task-main strong,
.focus-cycle-task-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-cycle-task-main strong {
  font-size: 14px;
  font-weight: 900;
}

.focus-cycle-task-main small {
  color: var(--muted);
  font-size: 12px;
}

.focus-cycle-task-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.focus-cycle-task-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--blue);
  background: var(--panel-strong);
}

.focus-cycle-task-arrow svg {
  width: 15px;
  height: 15px;
}

.tool-status-card {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid rgba(26, 106, 255, 0.25);
  border-radius: var(--radius);
  background: var(--accent-bg);
  margin-bottom: 14px;
}

.tool-status-card span,
.tool-status-card small {
  color: var(--muted);
  font-size: 12px;
}

.tool-status-card strong {
  font-size: 28px;
  line-height: 1;
}

.tool-privacy-note {
  margin-top: 14px;
  font-size: 12px;
}

.toggle {
  width: 48px;
  height: 28px;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 999px;
  background: var(--line-strong);
}

.toggle span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.18s ease, background 0.18s ease;
}

.toggle[aria-pressed="true"] {
  background: rgba(26, 106, 255, 0.34);
}

.toggle[aria-pressed="true"] span {
  transform: translateX(20px);
  background: var(--blue);
}

.companion-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 320px;
  align-items: start;
  gap: 18px;
  min-height: 0;
}

.chat-history-panel {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 14px;
  min-width: 0;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.chat-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.chat-history-head-actions {
  display: inline-flex;
  gap: 8px;
}

.mobile-chat-topbar,
.chat-history-scrim,
.chat-history-close,
.chat-disclaimer {
  display: none;
}

.chat-history-head h2 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chat-history-list {
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - 170px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}

.chat-history-date-label {
  margin: 8px 0 1px;
  padding: 6px 10px 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-history-date-label:first-child {
  margin-top: 0;
}

.chat-history-empty {
  display: grid;
  gap: 4px;
  padding: 12px 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.chat-history-empty strong {
  color: var(--text);
  font-size: 13px;
}

.chat-history-empty small {
  color: var(--muted);
  font-size: 11px;
}

.chat-history-item {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  transition: background 0.15s ease;
}

.chat-history-item:hover {
  background: var(--control-hover);
  transform: none;
  box-shadow: none;
}

.chat-history-item.is-active {
  border: none;
  background: var(--accent-bg);
  box-shadow: none;
}

.chat-history-select {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  text-align: left;
}

.chat-history-item strong {
  display: block;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

.chat-history-item small {
  display: none;
}

.chat-history-item em {
  flex-shrink: 0;
  margin-left: 8px;
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chat-history-item:hover em,
.chat-history-item.is-active em {
  opacity: 1;
}

.chat-history-delete {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chat-history-item:hover .chat-history-delete,
.chat-history-item.is-active .chat-history-delete,
.chat-history-delete:focus-visible {
  opacity: 1;
}

.chat-history-delete:hover,
.chat-history-delete:focus-visible {
  background: var(--control-hover);
  color: var(--rose);
}

.chat-history-delete:active {
  transform: translateY(1px);
}

.chat-history-delete svg {
  width: 13px;
  height: 13px;
}

.chat-panel {
  height: clamp(620px, calc(100vh - 132px), 760px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  overscroll-behavior: contain;
}

.auto-emotion-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(26, 106, 255, 0.28);
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--blue-light);
  font-size: 13px;
  font-weight: 800;
}

.companion-status-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ai-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(245, 195, 77, 0.38);
  border-radius: 999px;
  background: rgba(245, 195, 77, 0.13);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.ai-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.ai-status-pill.is-live {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
}

.ai-provider-card,
.ai-settings-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent 42%),
    var(--list-bg);
}

.ai-provider-card h2,
.ai-settings-card h3 {
  margin: 0;
}

.ai-settings-card .primary-action {
  justify-self: start;
}

.ai-error-text {
  margin: 0;
  color: var(--rose);
  font-size: 12px;
  line-height: 1.5;
}

.ai-provider-card.is-live {
  border-color: rgba(26, 106, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.11), transparent 44%),
    var(--list-bg);
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--list-bg);
}

.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  max-width: 76%;
  animation: messagePop 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chat-message img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--avatar-bg);
}

.chat-bubble {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--control-bg);
  line-height: 1.5;
}

.chat-bubble p {
  margin: 0;
}

.chat-bubble p + p {
  margin-top: 0.65em;
}

.from-user {
  align-self: flex-end;
}

.from-filoo {
  align-self: flex-start;
}

.from-user .chat-bubble {
  background: rgba(26, 106, 255, 0.16);
}

.chat-form {
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 12px;
  flex-shrink: 0;
}

.chat-voice-button {
  min-width: 46px;
  border-color: rgba(26, 106, 255, 0.2);
  background: var(--panel-strong);
}

.chat-voice-button.is-listening {
  color: #fff;
  border-color: var(--rose);
  background: var(--rose);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
  animation: voiceListenPulse 1.2s ease-in-out infinite;
}

@keyframes voiceListenPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.voice-panel {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.22);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(23, 201, 195, 0.14), transparent 38%),
    var(--list-bg);
}

.voice-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.voice-panel h3 {
  margin: 0;
  font-size: 16px;
}

.voice-state-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}

.voice-state-dot.is-live {
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.14);
}

/* Filoo speaking animation */
.filoo-speaking-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  margin-left: 6px;
  margin-bottom: 4px;
}

.filoo-speaking-bars .bar {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--blue);
  transform-origin: bottom;
  animation: filooSoundBar 0.8s ease-in-out infinite;
}

.filoo-speaking-bars .bar:nth-child(2),
.filoo-speaking-bars .bar:nth-child(4) {
  animation-delay: 0.15s;
}

.filoo-speaking-bars .bar:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes filooSoundBar {
  0%,
  100% {
    height: 4px;
    opacity: 0.5;
  }
  50% {
    height: 18px;
    opacity: 1;
  }
}

[data-filoo-state="speaking"] .chat-message.from-filoo img {
  animation: filooAvatarPulse 1.2s ease-out infinite;
}

@keyframes filooAvatarPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.voice-state-dot.is-speaking {
  background: var(--green) !important;
  animation: filooDotPulse 1s ease-in-out infinite;
}

@keyframes filooDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

[data-filoo-state="speaking"] .chat-voice-button,
[data-filoo-state="listening"] .chat-voice-button {
  color: var(--blue);
  animation: filooMicRipple 1.4s ease-in-out infinite;
}

@keyframes filooMicRipple {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.75;
  }
}

.voice-panel-head h3 {
  transition: opacity 0.3s ease;
}

@media (max-width: 760px) {
  body,
  .main-panel,
  .view-shell,
  .productivity-board-shell,
  .kanban,
  .work-filter-panel,
  .more-nav-content {
    scrollbar-width: none;
  }

  body::-webkit-scrollbar,
  .main-panel::-webkit-scrollbar,
  .view-shell::-webkit-scrollbar,
  .productivity-board-shell::-webkit-scrollbar,
  .kanban::-webkit-scrollbar,
  .work-filter-panel::-webkit-scrollbar,
  .more-nav-content::-webkit-scrollbar {
    display: none;
  }

  .main-panel {
    padding: 12px 12px 10px;
  }

  .view-shell {
    padding-bottom: 108px;
  }

  .topbar {
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .topbar-title {
    flex: 1;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
  }

  .topbar-title > div {
    min-width: 0;
  }

  .topbar h1 {
    max-width: 100%;
    overflow: hidden;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.08;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .topbar-title .microcopy {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .mobile-avatar-button {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .avatar-access-actions {
    display: none !important;
  }

  .topbar-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .topbar-actions .theme-toggle,
  .topbar-actions > .icon-button,
  .topbar-actions .auth-logout {
    display: none;
  }

  .topbar-actions .primary-action {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 13px;
    font-size: 0;
  }

  .section-heading h2,
  .detail-panel h2 {
    font-size: 20px;
    line-height: 1.12;
  }

  .app-shell:not(.view-dashboard) .topbar {
    margin-bottom: 8px;
  }

  .hero-panel {
    min-height: 0;
  }

  .metric-card[data-view]::before {
    content: "›";
    position: absolute;
    top: 12px;
    right: 14px;
    color: var(--metric-color, var(--blue));
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .metric-card-link {
    font-size: 10px;
  }

  .task-card.is-completed .task-card-actions {
    margin-top: -2px;
  }

  .work-filter-panel {
    display: flex;
    gap: 6px;
    margin: 10px 0 12px;
    padding: 8px;
    overflow-x: auto;
    border-radius: 14px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .work-filter-panel > div {
    display: contents;
  }

  .work-filter-panel > div > .microcopy {
    display: none;
  }

  .work-filter-row {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 0;
  }

  .kanban-mobile-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
  }

  .kanban-mobile-hint strong {
    color: var(--blue);
    font-size: 11px;
  }

  .kanban {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin: 0;
    padding: 0 2px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column {
    flex: 0 0 min(100%, calc(100vw - 56px));
    min-height: 450px;
    max-height: min(590px, calc(100dvh - 300px));
    overflow-y: auto;
    scroll-snap-align: start;
  }

  .productivity-board-shell {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .work-calendar-day {
    min-height: 50px;
  }

  .work-calendar-stickers i {
    min-width: 13px;
    height: 13px;
    font-size: 8px;
  }

  .finance-panel > .section-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10px;
  }

  .finance-panel > .section-heading > div,
  .finance-panel > .section-heading .month-navigator {
    grid-column: 1 / -1;
  }

  .finance-panel > .section-heading .secondary-action {
    width: 100%;
    min-height: 38px;
  }

  .month-navigator .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .finance-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
  }

  .finance-stat-card {
    display: grid;
    gap: 3px;
    min-height: 78px;
    padding: 10px 8px;
  }

  .finance-stat-icon {
    display: none;
  }

  .finance-stat-card p,
  .finance-stat-card small {
    font-size: 10px;
    line-height: 1.2;
  }

  .finance-stat-card strong {
    margin: 2px 0;
    font-size: 15px;
    line-height: 1.1;
    word-break: normal;
  }

  .breakdown-legend {
    flex-direction: row;
    align-items: center;
    color: #374151;
    font-size: 13px;
  }

  .money-row-actions .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .habit-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    min-height: 0;
    padding: 10px;
  }

  .habit-select-area {
    min-width: 0;
  }

  .habit-row-streak {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
  }

  .habit-check-button {
    justify-self: end;
    width: auto;
    max-width: 112px;
    min-width: 92px;
    min-height: 34px;
    padding: 0 12px;
  }

  .more-nav-sheet {
    justify-content: stretch;
  }

  .more-nav-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 22, 38, 0.42);
  }

  .more-nav-content {
    position: relative;
    z-index: 1;
    flex: 1;
    max-height: none !important;
    padding: calc(18px + env(safe-area-inset-top)) 0 calc(96px + env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .bottom-nav button {
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

  .bottom-nav button.is-active {
    background: rgba(26, 106, 255, 0.12);
    transform: translateY(-1px);
  }

  .companion-dock {
    bottom: 88px;
  }

  .chat-disclaimer {
    display: none;
  }

  .settings-grid input,
  .settings-grid select,
  .settings-grid textarea,
  .settings-section input,
  .settings-section select,
  .settings-section textarea {
    border-color: #9ca3af;
    border-width: 1.5px;
  }
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .hero-panel {
    margin-bottom: 16px;
  }

  .app-shell.view-dashboard .hero-avatar-stage {
    min-height: 88px;
    height: 118px;
    margin: 0 16px 8px;
    padding: 14px 14px 14px 16px;
    overflow: hidden;
  }

  .app-shell.view-dashboard .avatar-hero-bubble {
    max-width: 60%;
    padding-right: 12px;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 90px;
    height: 90px;
    aspect-ratio: 1;
    align-self: flex-end;
  }

  .app-shell.view-dashboard .hero-avatar-stage img {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 90px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .app-shell.view-dashboard .metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
  }

  .app-shell.view-dashboard .metric-card {
    min-height: 90px;
    height: auto;
    padding: 12px 14px;
    border-top-width: 2px;
    border-radius: 16px;
  }

  .app-shell.view-dashboard .metric-card::after {
    inset: auto 14px 0;
    height: 3px;
  }

  .app-shell.view-dashboard .metric-topline {
    gap: 6px;
    min-width: 0;
  }

  .app-shell.view-dashboard .metric-icon {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    flex: 0 0 auto;
  }

  .app-shell.view-dashboard .metric-icon svg {
    width: 12px;
    height: 12px;
  }

  .app-shell.view-dashboard .metric-card p {
    min-width: 0;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shell.view-dashboard .metric-card strong {
    margin: 6px 0 2px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .app-shell.view-dashboard .metric-card > span {
    display: block;
    color: #888;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shell.view-dashboard .metric-card-link {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    width: 14px;
    height: 14px;
    overflow: hidden;
    color: var(--metric-color, var(--blue));
    font-size: 0;
  }

  .app-shell.view-dashboard .metric-card-link svg {
    width: 14px;
    height: 14px;
  }

  .app-shell.view-dashboard .metric-progress {
    height: 3px;
    margin-top: auto;
    border-radius: 2px;
  }
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .hero-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 0 16px;
    overflow: hidden;
  }

  .app-shell.view-dashboard .hero-copy {
    display: grid;
    gap: 0;
    padding: 0 16px;
    align-self: start;
  }

  .app-shell.view-dashboard .hero-copy > .microcopy {
    margin: 0 0 6px;
  }

  .app-shell.view-dashboard .hero-copy h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
  }

  .app-shell.view-dashboard .motivation-widget {
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .app-shell.view-dashboard .motivation-widget-head {
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    gap: 8px;
    padding-bottom: 10px;
  }

  .app-shell.view-dashboard .motivation-mark,
  .app-shell.view-dashboard .quote-wand-button {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border-radius: 7px;
  }

  .app-shell.view-dashboard .motivation-mark svg,
  .app-shell.view-dashboard .quote-wand-button svg {
    width: 13px;
    height: 13px;
  }

  .app-shell.view-dashboard .motivation-widget-head strong {
    font-size: 13px;
    font-weight: 600;
  }

  .app-shell.view-dashboard .motivation-widget blockquote {
    display: block;
  }

  .app-shell.view-dashboard .motivation-widget blockquote p {
    min-height: 0;
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.4;
  }

  .app-shell.view-dashboard .motivation-widget blockquote footer {
    margin: 0 0 10px;
    font-size: 12px;
  }

  .app-shell.view-dashboard .motivation-prompt {
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .app-shell.view-dashboard .motivation-prompt svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 1px;
  }

  .app-shell.view-dashboard .motivation-prompt small {
    font-size: 12px;
    line-height: 1.4;
  }

  .app-shell.view-dashboard .focus-readout {
    justify-self: start;
    margin: 16px 0 10px;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
  }

  .app-shell.view-dashboard .focus-readout strong {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .app-shell.view-dashboard .focus-readout span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.2;
  }

  .app-shell.view-dashboard .hero-actions {
    display: flex;
    width: 100%;
    gap: 10px;
    margin: 0 0 16px;
    flex-wrap: nowrap;
  }

  .app-shell.view-dashboard .hero-actions .primary-action,
  .app-shell.view-dashboard .hero-actions .secondary-action {
    height: 48px;
    min-height: 48px;
    border-radius: 12px;
    white-space: nowrap;
  }

  .app-shell.view-dashboard .hero-actions .primary-action {
    flex: 1.5 1 0;
    font-size: 15px;
    font-weight: 600;
    background: #2563eb;
    color: #fff;
  }

  .app-shell.view-dashboard .hero-actions .secondary-action {
    flex: 1 1 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }

  .app-shell.view-dashboard .hero-avatar-stage {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 90px;
    height: 112px;
    margin: 0 16px 8px;
    padding: 14px 14px 14px 16px;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
  }

  .app-shell.view-dashboard .avatar-hero-bubble {
    position: relative;
    inset: auto;
    z-index: 4;
    flex: 1 1 auto;
    width: auto;
    max-width: 65%;
    padding: 0 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    opacity: 1;
    transform: none;
    backdrop-filter: none;
    animation: none;
  }

  .app-shell.view-dashboard .avatar-hero-bubble p {
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
  }

  .app-shell.view-dashboard .avatar-hero-bubble::after {
    display: none;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 80px;
    height: 80px;
    aspect-ratio: 1;
  }

  .app-shell.view-dashboard .hero-avatar-stage img {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

  .app-shell.view-dashboard .avatar-glow,
  .app-shell.view-dashboard .avatar-accessory,
  .app-shell.view-dashboard .mood-pill {
    display: none;
  }
}

.topbar-title-mobile,
.habit-row-chevron,
.habit-tip-toggle,
.habit-tip-summary {
  display: none;
}

@media (max-width: 768px) {
  .topbar-title-mobile {
    display: none;
  }

  .app-shell.view-work .topbar-title-full {
    display: none;
  }

  .app-shell.view-work .topbar-title-mobile {
    display: inline;
  }

  .app-shell.view-work .topbar h1 {
    white-space: nowrap;
  }

  .app-shell.view-work .topbar .primary-action {
    min-height: 40px;
    padding: 6px 12px;
  }

  .app-shell.view-work .topbar-actions .primary-action {
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  .daily-quest-strip {
    display: grid;
    grid-template-columns: auto minmax(68px, 1fr) auto auto;
    min-height: 40px;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    cursor: pointer;
    transition: max-height 200ms ease, opacity 200ms ease, padding 200ms ease;
  }

  .daily-quest-label,
  .daily-quest-count,
  .daily-quest-xp {
    align-self: center;
  }

  .daily-quest-text {
    grid-column: 1 / -1;
    order: 5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 12px;
    transition: max-height 200ms ease, opacity 200ms ease;
  }

  .daily-quest-strip.is-expanded .daily-quest-text {
    max-height: 44px;
    opacity: 1;
  }

  .daily-quest-bar-wrap {
    width: auto;
    min-width: 68px;
  }

  .hero-panel {
    overflow: hidden;
  }

  .avatar-stage,
  .hero-avatar-stage {
    max-width: 100%;
    overflow: hidden;
  }

  .hero-avatar-stage .filoo-hero-video-wrap,
  .hero-avatar-stage img {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .avatar-hero-bubble {
    max-width: calc(100% - 80px);
    left: 12px;
    right: auto;
  }

  .mood-pill {
    right: 12px;
    bottom: 8px;
    max-width: calc(100% - 24px);
    min-height: 44px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .habit-progress-hero {
    transition: max-height 200ms ease, opacity 200ms ease, padding 200ms ease;
  }

  .habit-progress-hero.is-collapsed {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 40px;
    max-height: 52px;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    cursor: pointer;
  }

  .habit-progress-hero.is-collapsed .habit-ring,
  .habit-progress-hero.is-collapsed .habit-tip-detail,
  .habit-progress-hero.is-collapsed h3 {
    display: none;
  }

  .habit-progress-hero.is-collapsed .habit-tip-summary {
    display: block;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .habit-progress-hero.is-collapsed .microcopy {
    margin: 0 0 2px;
  }

  .habit-tip-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--control-bg);
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
    transform: translateY(-50%);
  }

  .habit-progress-hero.is-expanded .habit-tip-toggle {
    top: 10px;
    transform: none;
  }

  .habit-tip-summary {
    display: block;
    margin: 0 0 4px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
  }

  .habit-list {
    display: grid;
    gap: 8px;
  }

  .habit-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 58px;
    max-height: 64px;
    gap: 8px;
    overflow: hidden;
    padding: 8px 10px;
    transition: max-height 200ms ease, opacity 200ms ease, border-color 0.18s ease, background 0.18s ease;
  }

  .habit-row.is-mobile-expanded {
    max-height: 138px;
    align-items: start;
  }

  .habit-select-area {
    min-height: 44px;
  }

  .habit-select-area span:last-child {
    min-width: 0;
  }

  .habit-select-area strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .habit-select-area small,
  .habit-week-mini,
  .habit-check-button {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 200ms ease, opacity 200ms ease;
  }

  .habit-row.is-mobile-expanded .habit-select-area small,
  .habit-row.is-mobile-expanded .habit-week-mini,
  .habit-row.is-mobile-expanded .habit-check-button,
  .habit-row.is-done .habit-check-button {
    max-height: 44px;
    opacity: 1;
    pointer-events: auto;
  }

  .habit-row-streak {
    grid-column: auto;
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .habit-streak-fire {
    max-width: 96px;
    overflow: hidden;
    white-space: nowrap;
  }

  .habit-row.is-mobile-expanded .habit-row-streak {
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
  }

  .habit-check-button {
    grid-column: 2 / -1;
    justify-self: end;
    min-width: 112px;
    min-height: 44px;
  }

  .habit-row.is-done:not(.is-mobile-expanded) .habit-check-button {
    grid-column: 2;
    min-width: 64px;
    min-height: 34px;
    padding: 0 10px;
  }

  .habit-row-chevron {
    display: grid;
    place-items: center;
    align-self: center;
    width: 28px;
    height: 44px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 900;
  }

  .habit-row.is-mobile-expanded .habit-row-chevron {
    position: absolute;
    right: 10px;
    top: 8px;
  }

  .finance-columns {
    gap: 12px;
  }

  .money-ledger {
    display: grid;
    gap: 8px;
  }

  .money-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 60px;
    gap: 3px 10px;
    overflow: hidden;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--entry-accent, var(--blue));
    border-radius: 12px;
    background: var(--panel);
    transform: none;
    transition: padding-right 220ms cubic-bezier(0.22, 1, 0.36, 1), background 0.15s ease;
  }

  .money-row:hover {
    transform: none;
  }

  .money-row > span:first-child {
    grid-row: 1 / 3;
    min-width: 0;
  }

  .money-row strong,
  .money-row small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .money-row em {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 14px;
  }

  .money-row .status-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    min-width: 48px;
    padding: 3px 7px;
    font-size: 10px;
  }

  .money-row-actions {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 3;
    display: grid;
    grid-template-columns: 64px 64px;
    width: 128px;
    opacity: 1;
    background: var(--panel-strong);
    box-shadow: -12px 0 26px rgba(13, 22, 38, 0.12);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .money-row.is-swiped {
    padding-right: 140px;
  }

  .money-row.is-swiped .money-row-actions {
    transform: translateX(0);
  }

  .money-row-actions .icon-button {
    width: 64px;
    min-width: 64px;
    height: 100%;
    min-height: 60px;
    border-radius: 0;
  }

  .more-nav-content {
    display: grid;
    gap: 12px;
    padding-inline: 16px;
  }

  .more-nav-group {
    display: grid;
    gap: 4px;
  }

  .more-nav-heading {
    margin: 8px 2px 4px;
    color: var(--faint);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .more-nav-item {
    min-height: 56px;
    padding: 0 10px;
    border-radius: 14px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .more-nav-item svg {
    width: 24px;
    height: 24px;
  }

  .more-nav-item span {
    font-weight: 750;
  }

  .more-nav-item em {
    color: var(--muted);
    font-style: normal;
    font-size: 22px;
    line-height: 1;
  }

  .more-nav-group.tone-wellness .more-nav-item svg {
    color: var(--green);
  }

  .more-nav-group.tone-career .more-nav-item svg {
    color: var(--blue);
  }

  .more-nav-group.tone-tools .more-nav-item svg {
    color: var(--amber-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .filoo-speaking-bars .bar,
  .voice-state-dot.is-speaking,
  [data-filoo-state="speaking"] .chat-message.from-filoo img,
  [data-filoo-state="speaking"] .chat-voice-button,
  [data-filoo-state="listening"] .chat-voice-button {
    animation: none;
  }
}

.voice-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.voice-toggle-row input {
  width: 16px;
  min-height: 16px;
}

.voice-mode-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-alt);
}

.voice-mode-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.voice-mode-option svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.voice-mode-option:hover {
  background: var(--control-hover);
  color: var(--text);
}

.voice-mode-option.is-active {
  border-color: rgba(26, 106, 255, 0.3);
  background: var(--panel-strong);
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(13, 22, 38, 0.08);
}

.voice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-transcript,
.voice-error {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.voice-error {
  color: var(--rose);
  font-weight: 800;
}

.chat-input-shell {
  min-width: 0;
}

.companion-message-ai h2,
.companion-message-ai h3 {
  margin: 0.5em 0 0.25em;
  color: inherit;
  font-size: 1em;
  font-weight: 800;
  line-height: 1.25;
}

.companion-message-ai h2:first-child,
.companion-message-ai h3:first-child {
  margin-top: 0;
}

.companion-message-ai ul {
  margin: 0.35em 0;
  padding-left: 1.25em;
}

.companion-message-ai li {
  margin-bottom: 0.22em;
}

.companion-message-ai hr {
  margin: 0.65em 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.companion-message-ai strong {
  font-weight: 800;
}

.companion-message-ai em {
  font-style: italic;
}

.chat-bubble.message-action-card {
  max-width: 100%;
  border: 1px solid rgba(34, 197, 94, 0.34);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.13), rgba(23, 201, 195, 0.08)),
    var(--panel-strong);
  color: #166534;
}

:root[data-theme="night"] .chat-bubble.message-action-card {
  border-color: rgba(115, 224, 138, 0.28);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(23, 201, 195, 0.08)),
    var(--control-bg);
  color: var(--text);
}

.chat-bubble.message-action-card strong {
  color: #15803d;
}

:root[data-theme="night"] .chat-bubble.message-action-card strong {
  color: var(--mint);
}

/* Night-mode contrast repair for AI, Academy, Jobs, and Home cards */
:root[data-theme="night"] select,
:root[data-theme="night"] option,
:root[data-theme="night"] optgroup {
  background-color: #14223a;
  color: #f6f9ff;
}

:root[data-theme="night"] select {
  border-color: rgba(125, 170, 255, 0.34);
}

:root[data-theme="night"] select:focus,
:root[data-theme="night"] select:focus-visible {
  border-color: rgba(96, 165, 250, 0.86);
  box-shadow: 0 0 0 4px rgba(26, 106, 255, 0.16);
}

:root[data-theme="night"] .chat-history-item {
  color: #edf4ff;
}

:root[data-theme="night"] .chat-history-item:hover {
  background: rgba(125, 170, 255, 0.13);
}

:root[data-theme="night"] .chat-history-item.is-active {
  background: rgba(59, 130, 246, 0.22);
  box-shadow: inset 0 0 0 1px rgba(125, 170, 255, 0.18);
}

:root[data-theme="night"] .chat-history-item strong {
  color: #f7fbff;
}

:root[data-theme="night"] .chat-history-item em {
  color: #b7c8ec;
}

:root[data-theme="night"] .chat-history-delete {
  color: #c8d8f5;
}

:root[data-theme="night"] .chat-history-delete:hover,
:root[data-theme="night"] .chat-history-delete:focus-visible {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

:root[data-theme="night"] .voice-panel {
  border-color: rgba(96, 165, 250, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(23, 201, 195, 0.16), transparent 40%),
    rgba(17, 35, 61, 0.88);
  color: #f6f9ff;
}

:root[data-theme="night"] .voice-panel h3,
:root[data-theme="night"] .voice-panel strong {
  color: #f8fbff;
}

:root[data-theme="night"] .voice-panel p,
:root[data-theme="night"] .voice-panel small,
:root[data-theme="night"] .voice-transcript {
  color: #c6d6f2;
}

:root[data-theme="night"] .voice-visualizer {
  border-color: rgba(125, 170, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(36, 50, 88, 0.96), rgba(18, 35, 61, 0.94)),
    var(--panel-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

:root[data-theme="night"] .voice-visualizer small {
  color: #c8d8f5;
}

:root[data-theme="night"] .voice-mode-picker {
  background: rgba(11, 22, 40, 0.7);
  border-color: rgba(125, 170, 255, 0.22);
}

:root[data-theme="night"] .voice-mode-option {
  color: #c8d8f5;
}

:root[data-theme="night"] .voice-mode-option.is-active {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(96, 165, 250, 0.38);
  color: #f8fbff;
}

:root[data-theme="night"] .jobs-tab-row {
  border: 1px solid rgba(125, 170, 255, 0.18);
  background: rgba(8, 18, 34, 0.48);
}

:root[data-theme="night"] .jobs-tab-row button {
  color: #c6d6f2;
}

:root[data-theme="night"] .jobs-tab-row button:hover {
  background: rgba(125, 170, 255, 0.12);
  color: #f6f9ff;
}

:root[data-theme="night"] .jobs-tab-row button.is-active {
  background: #edf4ff;
  color: #0e1c32;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

:root[data-theme="night"] .pipeline-stage-pill {
  border-color: rgba(125, 170, 255, 0.26);
  background: rgba(17, 35, 61, 0.86);
  color: #dbe8ff;
}

:root[data-theme="night"] .pipeline-stage-pill strong {
  color: #72a8ff;
}

:root[data-theme="night"] .pipeline-column {
  border-color: rgba(125, 170, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.07), rgba(23, 201, 195, 0.035)),
    rgba(15, 29, 52, 0.92);
  color: #f6f9ff;
}

:root[data-theme="night"] .pipeline-column-head strong,
:root[data-theme="night"] .pipeline-column h3 {
  color: #f8fbff;
}

:root[data-theme="night"] .pipeline-card {
  border-color: rgba(125, 170, 255, 0.24);
  background: rgba(20, 38, 65, 0.92);
  color: #eef5ff;
}

:root[data-theme="night"] .pipeline-card p,
:root[data-theme="night"] .pipeline-card small {
  color: #c6d6f2;
}

:root[data-theme="night"] .pipeline-card .ghost-card,
:root[data-theme="night"] .pipeline-column .empty-card,
:root[data-theme="night"] .pipeline-column [class*="empty"] {
  color: #c6d6f2;
}

:root[data-theme="night"] .job-filter-search-wrap,
:root[data-theme="night"] .job-email-action-card,
:root[data-theme="night"] .connect-socials-banner {
  border-color: rgba(125, 170, 255, 0.24);
  background: rgba(17, 35, 61, 0.88);
  color: #f6f9ff;
}

:root[data-theme="night"] .job-filter-search-wrap input {
  color: #f6f9ff;
}

:root[data-theme="night"] .job-filter-search-wrap input::placeholder {
  color: #8fa5cb;
}

:root[data-theme="night"] .academy-module-card,
:root[data-theme="night"] .academy-resource-card,
:root[data-theme="night"] .academy-lesson-row,
:root[data-theme="night"] .academy-progress-card,
:root[data-theme="night"] .academy-detail-meter {
  border-color: rgba(125, 170, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.07), rgba(23, 201, 195, 0.035)),
    rgba(16, 31, 55, 0.92);
  color: #f6f9ff;
}

:root[data-theme="night"] .academy-module-card:hover,
:root[data-theme="night"] .academy-resource-card:hover {
  border-color: rgba(96, 165, 250, 0.48);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

:root[data-theme="night"] .academy-module-card.is-active {
  border-color: rgba(96, 165, 250, 0.72);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.18), rgba(23, 201, 195, 0.06)),
    rgba(18, 36, 64, 0.96);
}

:root[data-theme="night"] .academy-module-card strong,
:root[data-theme="night"] .academy-resource-card strong,
:root[data-theme="night"] .academy-lesson-row strong,
:root[data-theme="night"] .academy-progress-card strong,
:root[data-theme="night"] .academy-detail-meter strong {
  color: #f8fbff;
}

:root[data-theme="night"] .academy-module-card small,
:root[data-theme="night"] .academy-card-meta,
:root[data-theme="night"] .academy-resource-card small,
:root[data-theme="night"] .academy-progress-card span,
:root[data-theme="night"] .academy-detail-meter span {
  color: #c6d6f2;
}

:root[data-theme="night"] .academy-card-bar {
  background: rgba(125, 170, 255, 0.18);
}

:root[data-theme="night"] .quote-wand-button {
  border: 1px solid rgba(125, 170, 255, 0.36);
  background: rgba(12, 24, 43, 0.72);
  color: #dbeafe;
  opacity: 1;
}

:root[data-theme="night"] .quote-wand-button:hover,
:root[data-theme="night"] .quote-wand-button:focus-visible {
  background: rgba(59, 130, 246, 0.22);
  color: #ffffff;
}

.chat-form button:disabled,
.chat-form input:disabled {
  cursor: wait;
  opacity: 0.68;
}

.prompt-list {
  margin-top: 16px;
}

.prompt-button {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: left;
}

.prompt-heading {
  margin-top: 18px;
}

.emotion-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.22);
  border-radius: var(--radius);
  background: var(--accent-bg);
}

.emotion-panel.is-compact {
  margin-top: 14px;
}

.emotion-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.emotion-panel-head h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 22px;
}

.emotion-score {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel-strong);
  color: var(--blue-light);
  font-weight: 900;
}

.emotion-current-bar,
.emotion-meter-row div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-alt);
}

.emotion-current-bar span,
.emotion-meter-row div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.28s ease;
}

.emotion-summary,
.emotion-next {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 12px;
}

.emotion-meters {
  display: grid;
  gap: 9px;
}

.emotion-meter-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
}

.emotion-meter-row.is-current {
  color: var(--text);
  font-weight: 800;
}

.emotion-meter-row strong {
  text-align: right;
  font-size: 12px;
}

.emotion-driver-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.emotion-driver-list span {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
}

.emotion-next {
  color: var(--blue-light);
  font-weight: 800;
}

.world-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.world-clocks-panel,
.world-news-panel,
.market-panel {
  min-width: 0;
}

.world-clock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.world-clock-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.world-clock-card.is-home {
  border-color: rgba(26, 106, 255, 0.34);
  background: var(--accent-bg);
}

.world-flag {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--panel-strong);
  font-size: 22px;
}

.world-clock-card strong,
.world-clock-card small,
.world-clock-card em {
  display: block;
}

.world-clock-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.world-clock-card em {
  grid-column: 1 / -1;
  color: var(--blue-light);
  font-style: normal;
  font-size: 20px;
  font-weight: 900;
}

.world-news-panel {
  display: grid;
  gap: 14px;
}

.world-news-source {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.world-news-source .status-dot {
  margin: 0;
}

.world-news-source.secondary {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.world-news-source a,
.market-source a {
  color: var(--blue-light);
  font-weight: 800;
}

.world-news-widget {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.06), rgba(34, 197, 94, 0.04)),
    var(--list-bg);
}

.world-news-widget iframe {
  display: block;
  width: 100%;
  min-height: 425px;
  border: 0;
  background: transparent;
}

.world-news-list {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.world-news-card,
.world-news-empty {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--list-bg);
}

.world-news-card a {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  text-decoration: none;
}

.world-news-card a:hover {
  color: var(--blue-light);
}

.local-news-panel {
  min-height: min(680px, calc(100dvh - 220px));
}

.local-news-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.local-news-quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--blue-light);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.local-news-list {
  max-height: 520px;
}

.world-news-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.world-news-card div span,
.world-news-card time {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.world-news-card.is-loading {
  min-height: 76px;
}

.world-news-card.is-loading span,
.world-news-card.is-loading strong,
.world-news-card.is-loading small {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--panel), var(--panel-alt), var(--panel));
  animation: shimmer 1.2s linear infinite;
  color: transparent;
}

.world-news-card.is-loading strong {
  width: 82%;
}

.world-news-card.is-loading small {
  width: 48%;
}

@keyframes shimmer {
  from { background-position: -120px 0; }
  to { background-position: 120px 0; }
}

.world-news-empty {
  color: var(--muted);
  line-height: 1.5;
}

.market-panel {
  display: grid;
  gap: 10px;
}

.market-subtitle,
.market-source {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.market-widget-frame {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.market-widget-frame .tradingview-widget-container__widget,
.market-widget-frame iframe {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100% !important;
  min-height: 390px;
}

.market-widget-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 0;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(26, 106, 255, 0.1), transparent 38%),
    var(--list-bg);
  color: var(--muted);
  text-align: center;
}

.market-widget-fallback[hidden] {
  display: none;
}

.market-widget-fallback svg {
  width: 34px;
  height: 34px;
  color: var(--blue-light);
}

.market-widget-fallback p {
  margin: 0;
}

.market-symbol-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  max-width: 420px;
}

.market-symbol-chips span,
.market-symbol-chips a {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.market-symbol-chips a:hover {
  color: var(--blue-light);
  border-color: rgba(26, 106, 255, 0.35);
}

.market-widget-fallback p {
  display: grid;
  gap: 4px;
}

.market-widget-fallback p strong {
  display: none;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.market-widget-fallback.is-slow p strong {
  display: block;
}

.weather-panel {
  display: grid;
  gap: 16px;
}

.weather-empty,
.weather-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.weather-empty {
  justify-items: start;
  color: var(--muted);
  line-height: 1.5;
}

.weather-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weather-icon-large {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--panel-strong);
  font-size: 38px;
}

.weather-city-name,
.weather-desc {
  margin: 0;
  color: var(--muted);
}

.weather-temp {
  display: block;
  margin: 2px 0;
  font-size: 38px;
  line-height: 1;
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.weather-details div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.weather-details span,
.weather-details strong {
  display: block;
}

.weather-details span {
  color: var(--muted);
  font-size: 11px;
}

.weather-details strong {
  margin-top: 4px;
  font-size: 13px;
}

.weather-city-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.weather-city-btn {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 13px;
}

.weather-city-btn.is-active {
  border-color: var(--blue);
  background: var(--accent-bg);
}

.weather-source {
  font-size: 12px;
}

/* =============================================
   World page tabs and mobile carousel
   ============================================= */

.world-dashboard {
  display: block;
}

.world-tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 6px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
  scrollbar-width: none;
}

.world-tab-bar::-webkit-scrollbar {
  display: none;
}

.world-tab-btn {
  flex-shrink: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.world-tab-btn svg {
  width: 16px;
  height: 16px;
}

.world-tab-btn:hover {
  background: var(--control-hover);
  color: var(--text);
}

.world-tab-btn.is-active {
  border-color: var(--blue-dark);
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 3px 0 var(--blue-dark);
}

.world-tab-btn .tab-dot {
  display: none;
}

.world-tab-btn.is-active .tab-dot {
  display: none;
}

.world-tab-panels {
  position: relative;
  min-height: 480px;
}

.world-tab-panel {
  display: none;
  animation: worldPanelIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.world-tab-panel.is-active {
  display: block;
}

@keyframes worldPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
  }

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

.world-clocks-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.world-clock-card-lg {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.world-clock-card-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 22, 38, 0.1);
}

.world-clock-card-lg.is-home {
  border-color: rgba(26, 106, 255, 0.38);
  background: var(--accent-bg);
}

.world-clock-card-lg .flag {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-strong);
  font-size: 26px;
}

.world-clock-card-lg strong,
.world-clock-card-lg small,
.world-clock-card-lg em {
  display: block;
}

.world-clock-card-lg strong {
  font-size: 15px;
}

.world-clock-card-lg small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.world-clock-card-lg em {
  margin-top: 6px;
  color: var(--blue);
  font-style: normal;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.world-news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.world-news-feed-panel {
  display: grid;
  gap: 12px;
}

.world-news-list {
  max-height: none;
  overflow: visible;
  display: grid;
  gap: 10px;
  padding: 0;
}

.world-news-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: transform 0.15s ease;
}

.world-news-item:hover {
  transform: translateX(3px);
}

.world-news-item a {
  color: var(--text);
  text-decoration: none;
}

.world-news-item a:hover {
  color: var(--blue-light);
}

.world-news-item h3 {
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.35;
}

.world-news-item small {
  color: var(--muted);
  font-size: 11px;
}

.world-news-helper {
  display: block;
  max-width: 720px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.news-source-tag {
  max-width: 140px;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--blue-light);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-news-embed {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.world-news-embed iframe {
  display: block;
  width: 100%;
  min-height: 460px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.world-news-item.is-loading h3,
.world-news-item.is-loading small,
.world-news-item.is-loading .news-source-tag {
  display: block;
  overflow: hidden;
  color: transparent;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--panel), var(--panel-alt), var(--panel));
  animation: shimmer 1.2s linear infinite;
}

.world-news-item.is-loading h3 {
  width: 82%;
  height: 14px;
}

.world-news-item.is-loading small {
  width: 48%;
  height: 12px;
}

.market-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.market-panel-header h2 {
  margin: 0;
  font-size: 26px;
}

.market-panel-header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.market-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
}

.market-live-dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: livePulse 1.4s ease infinite;
}

@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}

.world-market-panel .market-widget-frame {
  min-height: 480px;
}

.world-market-panel .market-widget-frame .tradingview-widget-container__widget,
.world-market-panel .market-widget-frame iframe {
  min-height: 480px;
}

.market-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.market-quote-card {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgba(26, 106, 255, 0.14);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.market-quote-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--surface-shadow-hover);
  transform: translateY(-1px);
}

.market-quote-card small {
  color: var(--blue-light);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

.market-quote-card strong {
  min-height: 2.5em;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

.market-quote-price {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.market-quote-card em {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.market-quote-card em.is-up {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
}

.market-quote-card em.is-down {
  background: rgba(255, 76, 92, 0.12);
  color: var(--red);
}

.market-quote-card.is-unavailable {
  border-style: dashed;
}

.market-quote-card.is-unavailable .market-quote-price {
  color: var(--muted);
  font-size: 14px;
}

.market-quote-card.is-loading small,
.market-quote-card.is-loading strong,
.market-quote-card.is-loading span {
  display: block;
  overflow: hidden;
  color: transparent;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--panel), var(--panel-alt), var(--panel));
  animation: shimmer 1.2s linear infinite;
}

.market-quote-card.is-loading small {
  width: 42%;
  height: 12px;
}

.market-quote-card.is-loading strong {
  width: 78%;
  min-height: 14px;
}

.market-quote-card.is-loading span {
  width: 58%;
  height: 18px;
}

.world-weather-layout {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.weather-city-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.weather-hero-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), transparent 50%),
    var(--panel);
  text-align: center;
}

.weather-hero-icon {
  display: grid;
  place-items: center;
  min-height: 76px;
  font-size: 72px;
  line-height: 1;
}

.weather-hero-icon svg {
  width: 58px;
  height: 58px;
  color: var(--blue-light);
}

.weather-hero-temp {
  color: var(--text);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.weather-hero-city {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.weather-hero-desc {
  margin: 0 0 10px;
  font-weight: 800;
}

.weather-stat-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.weather-stat-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--list-bg);
  text-align: center;
}

.weather-stat-card span,
.weather-stat-card strong {
  display: block;
}

.weather-stat-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.weather-stat-card strong {
  margin-top: 4px;
  font-size: 18px;
}

.world-carousel-wrap {
  display: none;
}

.avatar-info-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.avatar-preview-stage {
  position: relative;
  min-height: 320px;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 40%, rgba(77, 143, 255, 0.2), transparent 13rem),
    var(--avatar-bg);
}

.avatar-preview-stage.bg-space {
  background:
    radial-gradient(circle at 22% 18%, rgba(245, 195, 77, 0.35), transparent 4rem),
    radial-gradient(circle at 74% 28%, rgba(139, 124, 255, 0.35), transparent 5rem),
    linear-gradient(145deg, var(--navy), var(--navy-s2));
}

.avatar-preview-stage.bg-city {
  background:
    linear-gradient(transparent 52%, rgba(13, 22, 38, 0.44) 52%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 18px, transparent 18px 34px),
    var(--navy-s2);
}

.avatar-preview-img {
  width: min(310px, 86%);
  filter: drop-shadow(var(--avatar-shadow));
}

.avatar-preview-loop {
  width: min(270px, 76%);
  aspect-ratio: 0.75;
  filter: drop-shadow(var(--avatar-shadow));
}

.avatar-preview-item,
.avatar-mood-tag {
  position: absolute;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.item-head {
  top: 18px;
  left: 18px;
}

.item-body {
  right: 18px;
  top: 18px;
}

.item-accessory {
  left: 18px;
  bottom: 18px;
}

.avatar-mood-tag {
  right: 18px;
  bottom: 18px;
  color: var(--blue-light);
}

.avatar-stats,
.achievement-list,
.avatar-customize,
.customize-section {
  display: grid;
  gap: 12px;
}

.avatar-equipped-list {
  display: none !important;
}

.avatar-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.avatar-stat-row span {
  color: var(--muted);
}

.xp-bar-shell {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-alt);
}

.xp-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold));
}

.avatar-tab-switcher {
  display: flex;
  gap: 8px;
}

.avatar-tab-switcher .is-active,
.wardrobe-item.is-selected {
  border-color: var(--blue);
  background: var(--accent-bg);
}

.wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wardrobe-item {
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.wardrobe-item.is-locked {
  cursor: not-allowed;
  opacity: 0.52;
}

.wardrobe-coming-soon {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  align-items: stretch;
}

.wardrobe-soon-card {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(26, 106, 255, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), rgba(34, 197, 94, 0.08)),
    var(--panel);
}

.wardrobe-soon-card h3 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0;
}

.wardrobe-soon-card .muted {
  margin: 0;
  line-height: 1.6;
}

.wardrobe-soon-list {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.achievement-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.achievement-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--control-bg);
  color: var(--blue-light);
}

.achievement-row strong,
.achievement-row small {
  display: block;
}

.achievement-row small,
.achievement-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.achievement-row.is-locked {
  opacity: 0.68;
}

.badge-book-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.badge-stat {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--list-bg);
}

.badge-stat span,
.badge-stat strong {
  display: block;
}

.badge-stat span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge-stat strong {
  margin-top: 2px;
  font-size: 18px;
}

.badge-achievement-row {
  border-color: color-mix(in srgb, var(--badge-color) 34%, var(--line));
}

.badge-achievement-row.is-unlocked {
  background:
    radial-gradient(circle at 12% 18%, var(--badge-glow), transparent 42%),
    var(--list-bg);
}

.badge-achievement-icon {
  background: color-mix(in srgb, var(--badge-color) 18%, var(--control-bg));
  color: var(--badge-color);
  box-shadow: 0 0 16px var(--badge-glow);
}

.badge-achievement-row em {
  color: var(--badge-color);
  font-weight: 800;
}

.badge-achievement-row.is-locked .badge-achievement-icon {
  filter: grayscale(1);
  opacity: 0.6;
  box-shadow: none;
}

.academy-layout {
  align-items: start;
}

.academy-panel {
  background:
    radial-gradient(circle at 85% 10%, rgba(26, 106, 255, 0.1), transparent 28%),
    var(--panel);
}

.academy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-bg), var(--panel));
}

.academy-hero h3 {
  margin: 0 0 8px;
  font-size: 24px;
}

.academy-progress-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.2);
  border-radius: 14px;
  background: var(--panel-strong);
}

.academy-progress-card strong {
  font-size: 28px;
  line-height: 1;
}

.academy-progress-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.academy-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.academy-module-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.academy-module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(13, 22, 38, 0.08);
}

.academy-module-card.is-active {
  border-color: rgba(26, 106, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(26, 106, 255, 0.14);
}

.academy-module-card.is-complete {
  border-color: rgba(34, 197, 94, 0.38);
}

.academy-module-card > button {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 168px;
  padding: 14px;
  color: var(--text);
  text-align: left;
}

.academy-track {
  color: var(--blue-light);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.academy-module-card strong {
  font-size: 16px;
}

.academy-module-card small,
.academy-card-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.academy-card-meta {
  font-weight: 800;
}

.academy-card-bar {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.academy-card-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.academy-detail-panel {
  position: sticky;
  top: 24px;
}

.academy-detail-meter {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--list-bg);
}

.academy-detail-meter strong {
  font-size: 30px;
  line-height: 1;
}

.academy-detail-meter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.academy-lesson-list {
  display: grid;
  gap: 8px;
}

.academy-lesson-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}

.academy-lesson-row span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
}

.academy-lesson-row svg {
  width: 15px;
  height: 15px;
}

.academy-lesson-row.is-done {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.academy-lesson-row.is-done span {
  background: var(--green);
  color: #fff;
}

.academy-resource-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(26, 106, 255, 0.035);
}

.compact-heading {
  margin-bottom: 0;
}

.compact-heading h3 {
  margin: 0;
  font-size: 15px;
}

.academy-resource-grid {
  display: grid;
  gap: 10px;
}

.academy-resource-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.academy-resource-card:hover {
  border-color: rgba(26, 106, 255, 0.45);
  box-shadow: 0 10px 26px rgba(13, 22, 38, 0.08);
  transform: translateY(-1px);
}

.academy-resource-card strong {
  font-size: 14px;
}

.academy-resource-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.academy-resource-card .skill-row {
  margin-top: 2px;
}

.academy-resource-card .skill-row em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.academy-lesson-viewer {
  display: grid;
  gap: 14px;
}

.lesson-content {
  display: grid;
  gap: 12px;
}

.lesson-content p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}

.lesson-takeaway,
.lesson-error,
.lesson-loading,
.lesson-quiz,
.quiz-passed,
.quiz-failed {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--list-bg);
}

.lesson-takeaway {
  color: var(--text);
  line-height: 1.5;
}

.lesson-video-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #06122a;
  aspect-ratio: 16 / 9;
}

.lesson-video-wrap iframe {
  width: 100%;
  height: 100%;
}

.lesson-quiz {
  display: grid;
  gap: 12px;
}

.quiz-question {
  display: grid;
  gap: 8px;
}

.quiz-question p,
.quiz-explanation {
  margin: 0;
}

.quiz-options {
  display: grid;
  gap: 8px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.quiz-option.is-answer {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.settings-form,
.settings-grid {
  display: grid;
  gap: 12px;
}

.settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.settings-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
}

.settings-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-check input {
  width: 18px;
  min-height: 18px;
}

.ai-settings-card {
  margin-top: 6px;
}

.ai-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-preview .skill-row {
  margin-top: 16px;
}

.companion-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 10px 12px;
  overflow: visible;
  isolation: isolate;
  translate: 0 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: dockFloat 4.8s ease-in-out infinite;
}

.companion-dock::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border: 1px solid rgba(26, 106, 255, 0.24);
  border-radius: inherit;
  opacity: 0;
  animation: dockPulse 2.8s ease-out infinite;
}

.companion-dock:hover {
  transform: translateY(-3px);
}

.companion-dock.is-open {
  border-color: rgba(26, 106, 255, 0.4);
  box-shadow: 0 18px 54px rgba(26, 106, 255, 0.18);
}

.companion-dock img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--avatar-bg);
}

.quick-chat-panel {
  position: fixed;
  top: 92px;
  right: 24px;
  bottom: 94px;
  z-index: 70;
  width: min(390px, calc(100vw - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(26, 106, 255, 0.22);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 26px 70px rgba(13, 22, 38, 0.18);
  backdrop-filter: blur(18px);
  animation: quickChatIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes quickChatIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

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

.quick-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(26, 106, 255, 0.08), transparent 58%);
}

.quick-chat-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-chat-title img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--avatar-bg);
}

.quick-chat-title strong,
.quick-chat-title span {
  display: block;
}

.quick-chat-title strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.quick-chat-title span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.quick-chat-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-chat-actions .ghost-action {
  min-height: 34px;
  padding: 0 10px;
}

.quick-chat-voice-button.is-listening,
.quick-chat-voice-button.is-speaking {
  border-color: rgba(37, 99, 235, 0.34);
  color: var(--blue);
  background: rgba(37, 99, 235, 0.1);
  animation: voiceListenPulse 1.2s ease-in-out infinite;
}

.quick-chat-voice-button.is-speaking {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.quick-chat-log {
  margin: 12px;
  border: 1px solid var(--line);
  background: rgba(244, 247, 252, 0.52);
}

:root[data-theme="night"] .quick-chat-log {
  background: rgba(255, 255, 255, 0.035);
}

.quick-chat-panel .chat-message {
  max-width: 88%;
}

.quick-chat-panel .chat-message img {
  width: 30px;
  height: 30px;
}

.quick-chat-panel .chat-bubble {
  padding: 10px 12px;
  font-size: 13px;
}

.quick-chat-input-shell {
  padding: 0 12px 12px;
}

.quick-chat-form {
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  margin-top: 0;
}

.quick-chat-form input {
  min-height: 44px;
  border-radius: 999px;
  background: var(--control-bg);
}

.quick-chat-form .primary-action {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.quick-chat-input-shell .chat-disclaimer {
  margin: 7px 0 0;
  color: var(--faint);
  font-size: 11px;
  text-align: center;
}

.bottom-nav {
  display: none;
}

#filoo-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--navy);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  white-space: nowrap;
}

#filoo-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.more-nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.more-nav-overlay {
  flex: 1;
  background: rgba(13, 22, 38, 0.3);
}

.more-nav-content {
  background: var(--panel-strong);
  border-radius: 16px 16px 0 0;
  padding: 20px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow);
}

.more-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  width: 100%;
  background: transparent;
}

.more-nav-item svg {
  width: 20px;
  height: 20px;
}

.more-nav-item.is-active {
  color: var(--blue);
}

.filoo-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 22, 38, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.oauth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 22, 38, 0.34);
}

.oauth-modal {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(360px, 100%);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  text-align: center;
}

.oauth-modal h2 {
  margin: 0 0 6px;
}

.oauth-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
}

.oauth-status.is-complete {
  color: var(--green);
  background: rgba(34, 197, 94, 0.12);
}

.oauth-status.is-waiting {
  color: var(--amber-strong);
  background: rgba(245, 195, 77, 0.14);
}

.oauth-missing-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: var(--control-bg);
}

.oauth-missing-list code {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--panel);
  font-size: 11px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes messagePop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

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

@keyframes dockFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -5px;
  }
}

@keyframes dockPulse {
  0% {
    opacity: 0.4;
    transform: scale(0.94);
  }

  72%,
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

.modal-overlay,
.invoice-overlay {
  position: fixed;
  inset: 0;
  z-index: 1120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 22, 38, 0.42);
  backdrop-filter: blur(8px);
}

.entry-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.modal-body {
  display: grid;
  gap: 12px;
  padding: 4px 0;
}

.modal-summary-card,
.modal-detail-card,
.modal-field-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--list-bg);
}

.modal-summary-card strong {
  color: var(--text);
  font-size: 18px;
}

.modal-summary-card span,
.modal-detail-card p,
.modal-field-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.modal-detail-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.modal-field-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-field-list strong {
  color: var(--text);
}

.confirm-delete-overlay {
  z-index: 1500;
}

.confirm-delete-modal {
  gap: 16px;
}

.delete-warning-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.09), transparent 56%),
    var(--list-bg);
}

.delete-warning-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.12);
  color: var(--rose);
}

.delete-warning-card svg {
  width: 22px;
  height: 22px;
}

.delete-warning-card strong,
.delete-warning-card p {
  margin: 0;
}

.delete-warning-card strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.delete-warning-card p {
  margin-top: 6px;
  color: var(--rose);
  font-size: 13px;
  font-weight: 800;
}

.task-add-modal,
.task-detail-modal {
  width: min(680px, 100%) !important;
}

.task-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.task-title-field {
  grid-column: 1 / -1;
}

.task-title-input.has-error {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.task-modal-title-area {
  margin-top: -2px;
}

.task-modal-title-area p {
  margin: 0;
}

.task-modal-tabs {
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 12px;
  background: var(--panel-alt);
}

.task-tab-btn {
  flex: 1;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.task-tab-btn:hover {
  background: var(--control-bg);
  color: var(--text);
}

.task-tab-btn.is-active {
  background: var(--panel-strong);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(13, 22, 38, 0.12);
}

.task-tab-count {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.task-tab-panels {
  min-height: 250px;
}

.task-tab-panel {
  display: none;
  animation: worldPanelIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.task-tab-panel.is-active {
  display: grid;
  gap: 14px;
}

.task-overview-grid {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.task-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--list-bg);
}

.task-edit-grid .settings-label {
  min-width: 0;
}

.task-edit-grid select,
.task-edit-grid input {
  min-height: 42px;
  background: var(--panel);
}

.task-drawer-overlay {
  place-items: center;
  padding: 24px;
}

.task-drawer-overlay .task-detail-modal {
  width: min(760px, calc(100vw - 48px)) !important;
  max-height: min(86vh, 860px);
  border-radius: 20px;
  animation: modalPopIn 0.2s ease-out both;
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

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

.task-subtask-list,
.task-time-log-list {
  display: grid;
  gap: 8px;
}

.task-subtask-row,
.task-time-log-list article,
.task-time-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--list-bg);
}

.task-subtask-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.task-subtask-row span {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.task-subtask-row.is-done span {
  color: var(--muted);
  text-decoration: line-through;
}

.task-add-subtask-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.task-add-subtask-form input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
}

.task-time-summary {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
}

.task-time-summary strong {
  color: var(--text);
  font-size: 24px;
}

.task-time-summary span,
.task-time-log-list article span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.task-time-log-list article {
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
}

.task-time-log-list article strong {
  color: var(--blue);
  font-size: 14px;
}

.task-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
}

.task-field-row strong {
  color: var(--text);
}

.task-field-row .work-tag {
  flex-shrink: 0;
}

.task-description-editor {
  margin-top: 2px;
}

.task-attachments-list,
.task-links-list {
  display: grid;
  gap: 8px;
  min-height: 42px;
}

.task-empty-state {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--list-bg);
  color: var(--muted);
  text-align: center;
}

.task-empty-state > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--panel);
  color: var(--blue);
}

.task-empty-state svg {
  width: 22px;
  height: 22px;
}

.task-empty-state p,
.task-empty-state small {
  margin: 0;
}

.task-empty-state p {
  color: var(--text);
  font-weight: 800;
}

.task-upload-zone {
  min-height: 158px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 20px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--list-bg);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.task-upload-zone:hover,
.task-upload-zone.is-dragging {
  border-color: var(--blue);
  background: var(--accent-bg);
  color: var(--blue);
  transform: translateY(-1px);
}

.task-upload-zone svg {
  width: 30px;
  height: 30px;
}

.task-upload-zone strong {
  color: var(--text);
  font-size: 14px;
}

.task-upload-zone small {
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.task-attachment-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: background 0.15s ease, transform 0.15s ease;
}

.task-attachment-item:hover {
  background: var(--list-bg);
  transform: translateY(-1px);
}

.task-att-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--panel-alt);
  color: var(--blue);
}

.task-att-icon svg {
  width: 20px;
  height: 20px;
}

.task-att-info {
  min-width: 0;
}

.task-att-info strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-att-info small {
  color: var(--muted);
  font-size: 11px;
}

.task-att-actions {
  display: flex;
  gap: 4px;
}

.task-link-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.task-link-item > svg {
  width: 17px;
  height: 17px;
  color: var(--blue);
}

.task-link-url {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-add-link-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.task-notes-textarea {
  min-height: 240px;
  resize: vertical;
}

.task-notes-footer {
  min-height: 18px;
}

.task-notes-saved-label {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.task-modal-action-spacer {
  flex: 1;
}

.task-attachment-preview {
  display: block;
  max-width: 100%;
  max-height: min(70vh, 680px);
  margin: 0 auto;
  border-radius: var(--radius);
  object-fit: contain;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

.tag-dropdown {
  position: fixed;
  z-index: 1300;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.tag-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.tag-dropdown-option:hover {
  background: var(--control-bg);
}

.tag-dropdown-option.is-selected {
  background: var(--accent-bg);
  color: var(--blue);
}

.kanban-column.drag-over {
  border: 2px dashed var(--blue);
  background: var(--accent-bg);
}

.task-card[draggable="true"] {
  cursor: grab;
}

.task-card[draggable="true"]:active,
.task-card.is-dragging {
  cursor: grabbing;
  opacity: 0.7;
}

.kanban-settings-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.settings-section-head,
.kanban-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kanban-settings-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  text-transform: uppercase;
}

.settings-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.kanban-settings-list {
  display: grid;
  gap: 8px;
}

.kanban-setting-row {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--control-bg);
}

.kanban-setting-row .settings-label {
  flex: 1;
}

.compact-setting input {
  background: var(--control-bg);
}

.color-setting {
  max-width: 86px;
}

.color-setting input[type="color"] {
  width: 100%;
  min-height: 38px;
  padding: 3px;
}

.tag-settings-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workspace-settings-carousel {
  --settings-slide-index: 0;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.workspace-settings-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--list-bg);
  scrollbar-width: none;
}

.workspace-settings-tabs::-webkit-scrollbar {
  display: none;
}

.workspace-settings-tab {
  min-height: 38px;
  min-width: 112px;
  flex: 1 0 112px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.workspace-settings-tab.is-active,
.workspace-settings-tab:hover {
  border-color: rgba(26, 106, 255, 0.26);
  background: rgba(26, 106, 255, 0.1);
  color: var(--blue);
}

.workspace-settings-window {
  overflow: hidden;
  min-width: 0;
}

.workspace-settings-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  transform: translateX(calc(var(--settings-slide-index, 0) * -100%));
  transition: transform 0.28s ease;
}

.workspace-settings-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.07), transparent 58%),
    var(--panel-strong);
}

.workspace-settings-slide[aria-hidden="true"] {
  pointer-events: none;
}

.workspace-settings-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-settings-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.workspace-settings-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.workspace-settings-dots button.is-active {
  width: 22px;
  background: var(--blue);
}

:root[data-theme="night"] .workspace-settings-tabs,
:root[data-theme="night"] .workspace-settings-slide,
:root[data-theme="night"] .kanban-setting-row {
  border-color: rgba(113, 157, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.045);
}

:root[data-theme="night"] .workspace-settings-tab.is-active,
:root[data-theme="night"] .workspace-settings-tab:hover {
  color: #ffffff;
  border-color: rgba(113, 157, 255, 0.42);
  background: rgba(26, 106, 255, 0.32);
}

@media (max-width: 768px) {
  .workspace-settings-carousel {
    gap: 12px;
  }

  .workspace-settings-tabs {
    scroll-snap-type: x mandatory;
  }

  .workspace-settings-tab {
    flex-basis: 42%;
    scroll-snap-align: start;
  }

  .workspace-settings-slide {
    padding: 12px;
    border-radius: 16px;
  }

  .workspace-settings-slide .settings-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-settings-slide .settings-section-head .ghost-action {
    width: 100%;
  }

  .kanban-setting-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .kanban-setting-row .settings-label {
    min-width: 0;
    flex: 1 1 100%;
  }

  .kanban-setting-row .color-setting {
    flex: 1 1 calc(100% - 48px);
    max-width: none;
  }

  .kanban-setting-row > .icon-button {
    align-self: end;
  }

  .workspace-settings-carousel-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .workspace-settings-carousel-footer .secondary-action {
    min-width: 0;
    padding-inline: 10px;
  }
}

.modal-head,
.invoice-modal-head,
.invoice-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.invoice-overlay {
  align-items: stretch;
}

.invoice-modal {
  width: min(1280px, calc(100vw - 48px));
  height: min(900px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.invoice-modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
}

.invoice-modal-head h2 {
  margin-top: 6px;
}

.invoice-head-balance {
  display: inline-flex;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.invoice-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.invoice-workbench {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(520px, 0.95fr) minmax(480px, 1.05fr);
  gap: 16px;
  overflow: hidden;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.05), transparent 34%),
    var(--bg);
}

.invoice-form-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 2px 4px 2px 0;
}

.invoice-editor-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
  box-shadow: 0 12px 34px rgba(13, 22, 38, 0.06);
}

.invoice-section-title {
  display: grid;
  gap: 3px;
}

.invoice-section-title strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.invoice-section-title small {
  color: var(--muted);
  font-size: 12px;
}

.logo-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 82px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  color: var(--blue);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.06), rgba(34, 197, 94, 0.04)),
    var(--list-bg);
  cursor: pointer;
  overflow: hidden;
}

.logo-upload span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.logo-upload img {
  max-width: 180px;
  max-height: 72px;
  object-fit: contain;
}

.logo-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.invoice-form-grid,
.invoice-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.invoice-lines {
  display: grid;
  gap: 10px;
}

.invoice-line-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
}

.invoice-line-header,
.invoice-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 104px 112px 36px;
  gap: 8px;
  align-items: center;
}

.invoice-line-header {
  padding: 10px 12px;
  color: var(--muted);
  background: var(--panel-alt);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-line-row {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.invoice-line-row input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border-radius: 10px;
}

.invoice-line-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 13px;
}

.invoice-form-totals {
  display: grid;
  gap: 10px;
}

.invoice-total-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  color: var(--white);
  background: var(--blue);
}

.invoice-total-chip span {
  font-size: 12px;
  font-weight: 800;
}

.invoice-total-chip strong {
  font-size: 20px;
}

.invoice-preview-panel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 2px 2px 2px 4px;
}

.invoice-preview-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-preview-toolbar strong {
  color: var(--blue);
}

.invoice-preview-paper {
  width: min(100%, 690px);
  min-height: 920px;
  margin: 0 auto;
  padding: 40px;
  color: #0d1626;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(13, 22, 38, 0.20);
}

.invoice-paper-head,
.invoice-address-grid,
.invoice-paper-meta,
.invoice-preview-head,
.invoice-preview-row,
.invoice-paper-totals span {
  display: grid;
}

.invoice-paper-head {
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  margin-bottom: 38px;
}

.invoice-paper-head h2 {
  margin: 0;
  font-size: 40px;
  letter-spacing: 0.08em;
}

.invoice-paper-head > div:last-child {
  text-align: right;
}

.invoice-logo-preview {
  display: grid;
  place-items: center;
  width: 150px;
  min-height: 76px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #2563eb;
  background: #f8fafc;
  font-weight: 900;
}

.invoice-logo-preview img {
  max-width: 130px;
  max-height: 62px;
  object-fit: contain;
}

.invoice-address-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.invoice-address-grid p,
.invoice-paper-meta small,
.invoice-paper-totals small,
.invoice-paper-footer strong {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-preview-paper address {
  display: grid;
  gap: 3px;
  color: #0f172a;
  font-style: normal;
  line-height: 1.45;
}

.invoice-paper-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
}

.invoice-paper-meta span {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.invoice-preview-table {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.invoice-preview-head,
.invoice-preview-row {
  grid-template-columns: minmax(0, 1.5fr) 70px 110px 120px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.invoice-preview-head {
  color: #475569;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.invoice-preview-row {
  border-top: 1px solid #e2e8f0;
}

.invoice-preview-row span,
.invoice-preview-row strong {
  overflow-wrap: anywhere;
}

.invoice-paper-totals {
  width: min(320px, 100%);
  display: grid;
  gap: 9px;
  margin: 26px 0 28px auto;
}

.invoice-paper-totals span {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}

.invoice-paper-totals .balance-due {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 2px solid #0d1626;
}

.invoice-paper-totals .balance-due strong {
  color: #2563eb;
  font-size: 22px;
}

.invoice-paper-footer {
  display: grid;
  gap: 16px;
  color: #334155;
  font-size: 13px;
}

.filoo-drawer {
  background: var(--panel-strong);
  border-radius: var(--radius);
  width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filoo-drawer-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.filoo-drawer-header h2 {
  margin: 0;
  font-family: "Sora", sans-serif;
}

.filoo-drawer-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.filoo-drawer-avatar img {
  width: 100%;
  border-radius: 50%;
  background: var(--avatar-bg);
}

.filoo-costume-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 18px;
  line-height: 1;
}

.filoo-drawer-section h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin: 0 0 12px;
}

.costume-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.costume-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 82px;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.costume-card span:first-child {
  font-size: 22px;
}

.costume-card small {
  font-size: 10px;
  color: var(--faint);
  text-align: center;
}

.costume-card.is-active {
  border-color: var(--blue);
  background: var(--accent-bg);
}

.costume-card.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.lock-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 9px;
  background: var(--navy);
  color: var(--white);
  border-radius: 4px;
  padding: 1px 3px;
}

.skill-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-row-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.skill-row-card > span:first-child {
  font-size: 20px;
}

.skill-row-card div {
  flex: 1;
}

.skill-row-card strong {
  font-size: 13px;
}

.skill-row-card small {
  font-size: 11px;
  color: var(--faint);
  display: block;
}

.skill-row-card.is-unlocked {
  border-color: var(--green);
}

.badge-check {
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
}

.xp-bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.xp-bar span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.sidebar-xp {
  padding: 10px 12px;
  margin: 0 0 8px;
}

.sidebar-xp-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.sidebar-xp-label span:first-child {
  color: var(--amber);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-xp-label span:last-child {
  color: rgba(168, 180, 208, 0.7);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.sidebar-xp-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sidebar-xp-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--amber));
  animation: fillBar 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-quest-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid rgba(26, 106, 255, 0.28);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(26, 106, 255, 0.12) 0%, rgba(245, 195, 77, 0.08) 100%);
  overflow: hidden;
  position: relative;
}

.daily-quest-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(26, 106, 255, 0.06) 50%, transparent 100%);
  animation: questShimmer 3s ease-in-out infinite;
}

@keyframes questShimmer {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.daily-quest-label,
.daily-quest-text,
.daily-quest-count,
.daily-quest-bar-wrap,
.daily-quest-xp {
  position: relative;
  z-index: 1;
}

.daily-quest-label {
  color: var(--amber-strong);
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.daily-quest-label::before {
  content: "⚡ ";
}

.daily-quest-text {
  flex: 1;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.daily-quest-count {
  color: var(--blue);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.daily-quest-bar-wrap {
  width: 100px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--panel-alt);
  overflow: hidden;
}

.daily-quest-bar-wrap i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--amber));
  animation: fillBar 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.3s;
}

.daily-quest-xp {
  color: var(--gold-strong);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

:root[data-theme="night"] .daily-quest-label,
:root[data-theme="night"] .daily-quest-xp {
  color: var(--amber);
}

.nudge-strip {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.proactive-nudge-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(26, 106, 255, 0.24);
  border-left: 4px solid var(--blue);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), rgba(23, 201, 195, 0.05)),
    var(--panel);
  box-shadow: 0 10px 26px rgba(13, 22, 38, 0.07);
}

.proactive-nudge-card[data-priority="high"] {
  border-left-color: var(--amber-strong);
  background:
    linear-gradient(135deg, rgba(245, 195, 77, 0.16), rgba(26, 106, 255, 0.05)),
    var(--panel);
}

.nudge-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.proactive-nudge-card[data-priority="high"] .nudge-icon {
  background: rgba(245, 195, 77, 0.2);
  color: var(--amber-strong);
}

.nudge-text {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.nudge-text p {
  margin: 0;
}

.nudge-text strong {
  font-weight: 900;
}

.nudge-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nudge-act-btn,
.nudge-dismiss-btn {
  min-height: 32px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}

.nudge-act-btn {
  padding: 0 10px;
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 3px 0 var(--blue-dark);
}

.nudge-act-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.nudge-dismiss-btn {
  width: 32px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--control-bg);
  color: var(--muted);
}

.nudge-dismiss-btn svg {
  width: 15px;
  height: 15px;
}

:root[data-theme="night"] .proactive-nudge-card {
  background:
    linear-gradient(135deg, rgba(77, 143, 255, 0.13), rgba(23, 201, 195, 0.06)),
    var(--panel);
}

:root[data-theme="night"] .sidebar {
  border-right-color: rgba(77, 143, 255, 0.1);
  background: #070e1c;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .hero-panel {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .split-layout,
  .work-layout,
  .world-dashboard {
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .task-strip,
  .journal-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .companion-layout {
    grid-template-columns: 1fr;
  }

  .chat-history-panel {
    position: static;
    max-height: none;
  }

  .chat-history-list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    max-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 4px 0 0;
  }
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .brand-lockup > span:last-child,
  .nav-item span,
  .sidebar-xp,
  .privacy-note {
    display: none;
  }

  .nav-item {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .focus-cycle-overlay {
    padding: 12px;
  }

  .focus-cycle-card {
    min-height: calc(100vh - 24px);
    padding: 16px;
    border-radius: 22px;
    grid-template-rows: auto minmax(220px, 1fr) auto auto auto auto;
  }

  .focus-cycle-filoo-frame {
    min-height: 250px;
  }

  .focus-cycle-filoo {
    width: min(88vw, 300px);
  }

  .mindful-cycle-filoo-frame {
    min-height: 265px;
  }

  .mindful-cycle-filoo {
    width: min(84vw, 280px);
  }

  .mindful-breath-orb {
    right: 14px;
    bottom: 14px;
    width: 92px;
    height: 92px;
    font-size: 11px;
  }

  .focus-cycle-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .focus-cycle-actions .primary-action,
  .focus-cycle-actions .secondary-action {
    width: 100%;
  }

  .focus-cycle-task-option {
    grid-template-columns: minmax(0, 1fr) 28px;
    min-height: 0;
  }

  .focus-cycle-task-tags {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body {
    background: linear-gradient(180deg, var(--bg), var(--bg-soft));
  }

  .auth-shell {
    align-items: stretch;
    padding: 18px;
  }

  .auth-card {
    align-self: center;
    padding: 20px;
    border-radius: 20px;
  }

  .auth-brand h1 {
    font-size: 25px;
  }

  .app-shell {
    display: block;
    padding-bottom: 86px;
  }

  .sidebar {
    display: none;
  }

  .main-panel {
    padding: 18px 14px 10px;
  }

  .topbar {
    align-items: flex-start;
    gap: 12px;
  }

  .topbar h1 {
    font-size: 23px;
  }

  .topbar-title {
    flex: 1;
    flex-wrap: wrap;
  }

  .topbar-center {
    display: none;
  }

  .topbar-title > div {
    min-width: 0;
  }

  .topbar-actions {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .auth-user-chip {
    display: none;
  }

  .auth-logout {
    width: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 0;
  }

  .auth-logout svg {
    display: block;
  }

  .mobile-avatar-button {
    display: block;
  }

  .avatar-access-actions {
    order: 3;
    display: flex;
    width: 100%;
    padding-left: 60px;
  }

  .avatar-access-button {
    flex: 0 1 auto;
  }

  .topbar-actions .primary-action {
    min-width: 42px;
    padding: 0 10px;
    font-size: 0;
  }

  .topbar-actions .primary-action svg {
    display: block;
  }

  .theme-toggle {
    width: 44px;
    padding: 0;
  }

  .theme-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hero-panel {
    position: relative;
    grid-template-columns: 1fr;
    min-height: 0;
    padding-right: 0;
  }

  .daily-quest-strip {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .daily-quest-text {
    flex: 1 0 100%;
    order: 2;
  }

  .daily-quest-bar-wrap {
    flex: 1;
    min-width: 120px;
  }

  .hero-copy {
    padding: 22px;
  }

  .hero-copy h2 {
    font-size: 30px;
  }

  .motivation-widget {
    margin: 14px 0;
    padding: 13px;
  }

  .motivation-widget-head {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .motivation-widget-head .ghost-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .motivation-widget-head .quote-wand-button {
    width: 38px;
    height: 38px;
  }

  .motivation-widget blockquote p {
    font-size: 17px;
  }

  .avatar-stage {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height: 154px;
    min-height: 0;
    margin: 0 16px 16px;
    border-radius: 18px;
  }

  .avatar-stage img {
    position: absolute;
    right: 8px;
    bottom: 0;
    width: 126px;
    height: 126px;
    object-fit: contain;
  }

  .filoo-hero-video-wrap {
    position: absolute;
    right: 2px;
    bottom: 0;
    width: 118px;
    height: auto;
    aspect-ratio: 640 / 854;
  }

  .avatar-stage .filoo-loop-fallback,
  .avatar-stage .filoo-loop-gif {
    inset: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
  }

  .hero-avatar-stage {
    border-left: 0;
  }

  .avatar-stage-actions {
    display: none;
  }

  .avatar-hero-bubble {
    top: 16px;
    left: 14px;
    right: 112px;
    width: auto;
    padding: 10px 12px;
    border-radius: 14px 14px 4px 14px;
    text-align: left;
  }

  .avatar-hero-bubble p {
    font-size: 12px;
    line-height: 1.4;
  }

  .avatar-hero-bubble::after {
    top: auto;
    right: -7px;
    bottom: 18px;
    left: auto;
    border: 0;
    border-right: 1px solid rgba(26, 106, 255, 0.22);
    border-top: 1px solid rgba(26, 106, 255, 0.22);
  }

  .avatar-glow,
  .avatar-accessory {
    display: none;
  }

  .mood-pill {
    right: 10px;
    bottom: 8px;
    font-size: 10px;
    padding: 2px 6px;
  }

  .metric-grid,
  .task-strip,
  .finance-stat-grid,
  .finance-columns,
  .health-card-grid,
  .plugin-grid,
  .goal-pulse-chart,
  .journal-detail-grid,
  .world-clock-grid,
  .avatar-info-layout,
  .wardrobe-coming-soon,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .journal-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .world-clock-card {
    min-height: 80px;
  }

  .work-tag-row {
    gap: 5px;
  }

  .work-filter-chip,
  .work-tag {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .health-hero {
    grid-template-columns: 1fr;
  }

  .health-ring {
    width: 82px;
    height: 82px;
  }

  .health-input-grid,
  .health-quick-stats {
    grid-template-columns: 1fr;
  }

  .health-card-footer {
    align-items: stretch;
  }

  .health-card-footer .secondary-action,
  .health-card-footer .primary-action {
    width: 100%;
  }

  .meal-log-row {
    padding: 8px;
  }

  .meal-log-fields {
    grid-template-columns: 1fr;
  }

  .job-card {
    grid-template-columns: 1fr;
  }

  .job-card .button-row {
    justify-content: flex-start;
  }

  .weather-details,
  .pulse-bars,
  .weather-city-grid,
  .wardrobe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .line-chart {
    min-height: 180px;
  }

  .pulse-bar {
    min-height: 128px;
  }

  .avatar-preview-stage {
    min-height: 260px;
    height: auto;
  }

  .more-nav-content {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .panel,
  .metric-card {
    padding: 16px;
  }

  .kanban {
    grid-template-columns: repeat(3, 218px);
    margin: 0 -16px;
    padding: 0 16px 8px;
    scroll-snap-type: x mandatory;
  }

  .productivity-board-shell {
    max-height: min(620px, calc(100dvh - 285px));
    margin-right: -4px;
  }

  .kanban-column {
    scroll-snap-align: start;
  }

  .work-filter-panel {
    gap: 14px;
    margin-top: 12px;
  }

  .work-filter-chip,
  .work-tag {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .work-calendar {
    padding: 12px;
  }

  .work-calendar-day {
    min-height: 48px;
    padding: 6px;
    border-radius: 10px;
  }

  .work-day-task-row,
  .work-day-schedule-choice {
    grid-template-columns: 1fr;
  }

  .job-card {
    grid-template-columns: 1fr;
  }

  .month-navigator {
    width: 100%;
  }

  .month-navigator h2 {
    min-width: 0;
    flex: 1;
    text-align: center;
  }

  .breakdown-legend,
  .invoice-modal-head {
    align-items: stretch;
    flex-direction: column;
  }

  .money-row {
    grid-template-columns: 1fr auto;
  }

  .money-row em {
    grid-column: 1;
  }

  .money-row-actions {
    grid-column: 2;
    opacity: 1;
  }

  .modal-overlay,
  .invoice-overlay {
    align-items: flex-end;
    padding: 10px;
  }

  .entry-modal {
    width: 100% !important;
    max-height: calc(100vh - 40px);
    border-radius: 16px 16px 0 0;
  }

  .task-drawer-overlay .task-detail-modal {
    width: 100% !important;
    max-height: calc(100dvh - 20px);
    border-radius: 16px 16px 0 0;
  }

  .task-form-grid,
  .task-edit-grid,
  .task-add-link-form {
    grid-template-columns: 1fr;
  }

  .task-modal-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .task-modal-tabs::-webkit-scrollbar {
    display: none;
  }

  .task-tab-btn {
    min-width: 92px;
    flex: 0 0 auto;
  }

  .task-field-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-attachment-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .task-att-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .invoice-modal {
    width: 100%;
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }

  .invoice-modal-head {
    position: relative;
    padding-right: 76px;
  }

  .invoice-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  }

  .invoice-actions .icon-button {
    position: absolute;
    top: 18px;
    right: 18px;
  }

  .invoice-workbench {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding: 12px;
  }

  .invoice-form-panel,
  .invoice-preview-panel {
    overflow: visible;
    padding: 0;
  }

  .invoice-form-panel {
    display: contents;
  }

  .invoice-form-grid,
  .invoice-meta-grid,
  .invoice-address-grid,
  .invoice-paper-meta {
    grid-template-columns: 1fr;
  }

  .invoice-line-table {
    overflow: visible;
  }

  .invoice-line-header {
    display: none;
  }

  .invoice-line-row {
    min-width: 0;
    grid-template-columns: 1fr 1fr 40px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--list-bg);
  }

  .invoice-line-row input:first-child {
    grid-column: 1 / -1;
  }

  .invoice-line-row strong {
    grid-column: 1 / 3;
    text-align: left;
  }

  .invoice-preview-paper {
    width: 100%;
    min-height: auto;
    padding: 24px;
  }

  .invoice-preview-toolbar {
    font-size: 10px;
    text-transform: none;
  }

  .invoice-preview-toolbar strong {
    white-space: nowrap;
  }

  .invoice-paper-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }

  .invoice-paper-head > div:last-child {
    text-align: left;
  }

  .invoice-paper-head h2 {
    font-size: 34px;
  }

  .invoice-preview-head,
  .invoice-preview-row {
    grid-template-columns: minmax(0, 1.2fr) 46px 84px 92px;
    gap: 8px;
    font-size: 12px;
  }

  .connect-socials-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .connect-socials-banner .button-row {
    justify-content: space-between;
  }

  .account-row,
  .notification-row,
  .quiet-hours-row {
    grid-template-columns: 1fr;
  }

  .account-link-entry {
    grid-template-columns: 1fr;
  }

  .account-link-entry .secondary-action,
  .notification-row select {
    width: 100%;
  }

  .meet-card {
    grid-template-columns: 1fr;
  }

  .bluetooth-pair-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bluetooth-pair-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .bluetooth-pair-actions .primary-action,
  .bluetooth-pair-actions .secondary-action {
    flex: 1;
  }

  .meet-code-zone {
    min-height: 180px;
  }

  .connect-right-panel {
    min-height: auto;
  }

  .friend-actions {
    opacity: 1;
  }

  .friend-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dm-modal {
    width: 100% !important;
    height: min(680px, 92vh);
    border-radius: 18px 18px 0 0;
  }

  .habit-progress-hero {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .habit-ring {
    width: 76px;
    height: 76px;
    gap: 3px;
  }

  .habit-ring strong {
    font-size: 15px;
  }

  .habit-ring span {
    font-size: 8px;
  }

  .habit-row {
    grid-template-columns: 1fr;
  }

  .habit-row-meta {
    text-align: left;
  }

  .habit-row-streak {
    align-items: flex-start;
  }

  .habit-note-actions {
    opacity: 1;
  }

  .academy-hero,
  .academy-module-grid {
    grid-template-columns: 1fr;
  }

  .academy-detail-panel {
    position: static;
  }

  .habit-week-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .habit-day {
    min-height: 48px;
    gap: 2px;
  }

  .habit-day strong {
    font-size: 14px;
  }

  .app-shell.view-companion {
    padding-bottom: 86px;
  }

  .app-shell.view-companion .main-panel {
    min-height: calc(100dvh - 86px);
    padding: 0;
  }

  .app-shell.view-companion .topbar,
  .app-shell.view-companion .companion-dock {
    display: none !important;
  }

  .app-shell.view-companion .view-shell {
    max-width: none;
    min-height: calc(100dvh - 86px);
  }

  .app-shell.view-companion .view-shell > *,
  .app-shell.view-companion .companion-layout > * {
    animation: none;
  }

  .companion-layout {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    height: calc(100dvh - 86px);
    min-height: calc(100dvh - 86px);
    overflow: hidden;
    background:
      radial-gradient(circle at 20% 0%, rgba(26, 106, 255, 0.09), transparent 28%),
      var(--bg);
  }

  .mobile-chat-topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(18px);
  }

  .mobile-chat-topbar .icon-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .mobile-chat-title {
    min-width: 0;
    text-align: center;
  }

  .mobile-chat-title strong,
  .mobile-chat-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chat-title strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
  }

  .mobile-chat-title span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }

  .chat-history-scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(13, 22, 38, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .companion-layout.is-history-open .chat-history-scrim {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .chat-history-panel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 55;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(330px, 86vw);
    max-width: calc(100vw - 28px);
    min-width: 0;
    max-height: none;
    padding: calc(18px + env(safe-area-inset-top)) 14px 18px;
    border-radius: 0 22px 22px 0;
    overflow: hidden;
    transform: translateX(-106%);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .chat-history-panel.is-open {
    transform: translateX(0);
  }

  .chat-history-close {
    display: inline-flex;
  }

  .chat-history-head h2 {
    font-size: 13px;
  }

  .chat-history-list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    width: 100%;
    min-width: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 4px 0 0;
    scrollbar-width: none;
  }

  .chat-history-list::-webkit-scrollbar {
    display: none;
  }

  .chat-history-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
  }

  .chat-history-select {
    min-width: 0;
    max-width: 100%;
  }

  .chat-history-item strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-history-item.is-active {
    background: var(--accent-bg);
  }

  .chat-panel {
    display: grid;
    grid-row: 2;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .desktop-chat-heading,
  .app-shell.view-companion .companion-layout > .detail-panel {
    display: none;
  }

  .companion-status-row,
  .ai-settings-head {
    justify-content: flex-start;
  }

  .chat-log {
    min-height: 0;
    padding: 18px 14px 18px;
    border-radius: 0;
    background: transparent;
  }

  .chat-message {
    max-width: 90%;
  }

  .chat-message img {
    width: 30px;
    height: 30px;
  }

  .chat-bubble {
    padding: 11px 14px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(13, 22, 38, 0.06);
  }

  .from-user .chat-bubble {
    border-radius: 20px 20px 4px 20px;
    background: var(--blue);
    color: var(--white);
  }

  .from-filoo .chat-bubble {
    border: 1px solid var(--line);
    border-radius: 20px 20px 20px 4px;
    background: var(--panel-strong);
  }

  .chat-input-shell {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter: blur(18px);
  }

  .chat-form {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 8px;
    margin-top: 0;
  }

  .chat-form input {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--control-bg);
  }

  .chat-form .primary-action {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    gap: 0;
    box-shadow: none;
  }

  .chat-form .primary-action svg {
    width: 20px;
    height: 20px;
  }

  .chat-voice-button {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
  }

  .chat-disclaimer {
    display: block;
    margin: 8px 0 0;
    color: var(--faint);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
  }

  .companion-dock {
    display: flex !important;
    right: 14px;
    bottom: 76px;
    min-width: 0;
    padding: 6px 10px 6px 8px;
    gap: 6px;
    border-radius: 999px;
  }

  .companion-dock span {
    display: none;
  }

  .companion-dock img {
    width: 28px;
    height: 28px;
  }

  .quick-chat-panel {
    display: none;
  }

  .bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--glass);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
  }

  .bottom-nav button {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 54px;
    border-radius: 12px;
    color: var(--muted);
    background: transparent;
    font-size: 11px;
  }

  .filoo-drawer-overlay {
    padding: 10px;
  }

  .filoo-drawer {
    width: 100%;
    max-height: calc(100vh - 112px);
  }

  .costume-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .journal-field-grid,
  .work-filter-panel {
    grid-template-columns: 1fr;
  }

  .kanban {
    grid-template-columns: repeat(3, 190px);
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .world-clocks-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .world-news-layout,
  .world-weather-layout {
    grid-template-columns: 1fr;
  }

  .world-news-embed {
    display: none;
  }
}

@media (max-width: 760px) {
  .world-tab-bar {
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 0;
    padding: 4px;
    overflow-x: auto;
    border-radius: 12px;
  }

  .world-tab-btn {
    min-height: 36px;
    gap: 5px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 12px;
  }

  .world-tab-btn .tab-label {
    display: none;
  }

  .world-tab-panels {
    display: none;
  }

  .world-carousel-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 12px -14px 0;
  }

  .world-carousel-track {
    display: flex;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .world-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 14px;
  }

  .world-carousel-slide .world-tab-panel {
    display: block;
  }

  .world-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
  }

  .world-carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line-strong);
    transition: background 0.2s ease, width 0.2s ease;
  }

  .world-carousel-dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: var(--blue);
  }

  .world-carousel-prev,
  .world-carousel-next {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--glass);
    color: var(--text);
    backdrop-filter: blur(8px);
    transform: translateY(-50%);
  }

  .world-carousel-prev {
    left: 4px;
  }

  .world-carousel-next {
    right: 4px;
  }

  .world-carousel-prev svg,
  .world-carousel-next svg {
    width: 16px;
    height: 16px;
  }

  .world-clocks-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .world-clock-card-lg {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .world-clock-card-lg .flag {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .world-clock-card-lg em {
    font-size: 22px;
  }

  .world-news-layout,
  .world-weather-layout {
    grid-template-columns: 1fr;
  }

  .world-news-embed {
    display: none;
  }

  .world-market-panel .market-widget-frame,
  .world-market-panel .market-widget-frame .tradingview-widget-container__widget,
  .world-market-panel .market-widget-frame iframe {
    min-height: 360px;
  }

  .market-quote-grid {
    grid-template-columns: 1fr;
  }

  .market-panel-header {
    align-items: flex-start;
  }

  .market-panel-header h2 {
    font-size: 22px;
  }

  .weather-hero-temp {
    font-size: 44px;
  }

  .weather-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .weather-city-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .world-clocks-layout,
  .weather-city-selector {
    grid-template-columns: 1fr;
  }

  .weather-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@page {
  size: A4;
  margin: 14mm;
}

@media print {
  html,
  body {
    background: #fff !important;
  }

  body.is-printing-invoice .sidebar,
  body.is-printing-invoice .topbar,
  body.is-printing-invoice .view-shell,
  body.is-printing-invoice .bottom-nav,
  body.is-printing-invoice .companion-dock,
  body.is-printing-invoice #filoo-toast,
  body.is-printing-invoice .invoice-modal-head,
  body.is-printing-invoice .invoice-form-panel,
  body.is-printing-invoice .invoice-preview-toolbar {
    display: none !important;
  }

  body.is-printing-invoice .app-shell,
  body.is-printing-invoice .main-panel,
  body.is-printing-invoice .invoice-overlay,
  body.is-printing-invoice .invoice-modal,
  body.is-printing-invoice .invoice-workbench,
  body.is-printing-invoice .invoice-preview-panel {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.is-printing-invoice .invoice-preview-paper {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #0d1626 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 10.5pt !important;
  }

  body.is-printing-invoice .invoice-paper-head,
  body.is-printing-invoice .invoice-address-grid,
  body.is-printing-invoice .invoice-paper-meta,
  body.is-printing-invoice .invoice-preview-table,
  body.is-printing-invoice .invoice-preview-row,
  body.is-printing-invoice .invoice-paper-totals,
  body.is-printing-invoice .invoice-paper-footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.is-printing-invoice .invoice-paper-head {
    margin-bottom: 24px !important;
  }

  body.is-printing-invoice .invoice-paper-head h2 {
    font-size: 30pt !important;
  }

  body.is-printing-invoice .invoice-paper-meta {
    margin-bottom: 20px !important;
  }

  body.is-printing-invoice .invoice-paper-totals {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Mobile QA final overrides - keep after legacy responsive rules. */
@media (max-width: 760px) {
  body,
  .main-panel,
  .view-shell,
  .productivity-board-shell,
  .kanban,
  .work-filter-panel,
  .more-nav-content {
    scrollbar-width: none;
  }

  body::-webkit-scrollbar,
  .main-panel::-webkit-scrollbar,
  .view-shell::-webkit-scrollbar,
  .productivity-board-shell::-webkit-scrollbar,
  .kanban::-webkit-scrollbar,
  .work-filter-panel::-webkit-scrollbar,
  .more-nav-content::-webkit-scrollbar {
    display: none;
  }

  .main-panel {
    padding: 12px 12px 10px;
  }

  .view-shell {
    padding-bottom: 108px;
  }

  .topbar {
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .topbar-title {
    flex: 1;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
  }

  .topbar-title > div {
    min-width: 0;
  }

  .topbar h1 {
    max-width: 100%;
    overflow: hidden;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.08;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .topbar-title .microcopy {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .mobile-avatar-button {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .avatar-access-actions {
    display: none !important;
  }

  .topbar-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .topbar-actions .theme-toggle,
  .topbar-actions > .icon-button,
  .topbar-actions .auth-logout {
    display: none;
  }

  .topbar-actions .primary-action {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 13px;
    font-size: 0;
  }

  .section-heading h2,
  .detail-panel h2 {
    font-size: 20px;
    line-height: 1.12;
  }

  .app-shell:not(.view-dashboard) .topbar {
    margin-bottom: 8px;
  }

  .metric-card[data-view]::before {
    content: ">";
    position: absolute;
    top: 12px;
    right: 14px;
    color: var(--metric-color, var(--blue));
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .metric-card-link {
    font-size: 10px;
  }

  .work-filter-panel {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    margin: 10px 0 12px;
    padding: 8px;
    overflow-x: auto;
    border-radius: 14px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .work-filter-panel > div {
    display: contents;
  }

  .work-filter-panel > div > .microcopy {
    display: none;
  }

  .work-filter-row {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 0;
  }

  .kanban-mobile-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
  }

  .kanban-mobile-hint strong {
    color: var(--blue);
    font-size: 11px;
  }

  .kanban {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin: 0;
    padding: 0 2px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column {
    flex: 0 0 min(100%, calc(100vw - 56px));
    min-height: 450px;
    max-height: min(590px, calc(100dvh - 300px));
    overflow-y: auto;
    scroll-snap-align: start;
  }

  .productivity-board-shell {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .work-calendar-day {
    min-height: 50px;
  }

  .work-calendar-stickers i {
    min-width: 13px;
    height: 13px;
    font-size: 8px;
  }

  .finance-panel > .section-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10px;
  }

  .finance-panel > .section-heading > div,
  .finance-panel > .section-heading .month-navigator {
    grid-column: 1 / -1;
  }

  .finance-panel > .section-heading .secondary-action {
    width: 100%;
    min-height: 38px;
  }

  .month-navigator .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .finance-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
  }

  .finance-stat-card {
    display: grid;
    gap: 3px;
    min-height: 78px;
    padding: 10px 8px;
  }

  .finance-stat-icon {
    display: none;
  }

  .finance-stat-card p,
  .finance-stat-card small {
    font-size: 10px;
    line-height: 1.2;
  }

  .finance-stat-card strong {
    margin: 2px 0;
    font-size: 15px;
    line-height: 1.1;
    word-break: normal;
  }

  .breakdown-legend {
    flex-direction: row;
    align-items: center;
    color: #374151;
    font-size: 13px;
  }

  .money-row-actions .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .habit-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    min-height: 0;
    padding: 10px;
  }

  .habit-row-streak {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
  }

  .habit-check-button {
    justify-self: end;
    width: auto;
    max-width: 112px;
    min-width: 92px;
    min-height: 34px;
    padding: 0 12px;
  }

  .more-nav-sheet {
    justify-content: stretch;
  }

  .more-nav-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 22, 38, 0.42);
  }

  .more-nav-content {
    position: relative;
    z-index: 1;
    flex: 1;
    max-height: none !important;
    padding: calc(18px + env(safe-area-inset-top)) 0 calc(96px + env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .bottom-nav button {
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

  .bottom-nav button.is-active {
    background: rgba(26, 106, 255, 0.12);
    transform: translateY(-1px);
  }

  .companion-dock {
    bottom: 88px;
  }

  .chat-disclaimer {
    display: none;
  }

  .settings-grid input,
  .settings-grid select,
  .settings-grid textarea,
  .settings-section input,
  .settings-section select,
  .settings-section textarea {
    border-color: #9ca3af;
    border-width: 1.5px;
  }
}
/* mobile dashboard final sizing override */
@media (max-width: 768px) {
  .app-shell.view-dashboard .hero-panel {
    margin-bottom: 16px;
  }

  .app-shell.view-dashboard .hero-avatar-stage {
    min-height: 88px;
    height: 118px;
    margin: 0 16px 8px;
    padding: 14px 14px 14px 16px;
    overflow: hidden;
  }

  .app-shell.view-dashboard .avatar-hero-bubble {
    max-width: 60%;
    padding-right: 12px;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 90px;
    height: 90px;
    aspect-ratio: 1;
    align-self: flex-end;
  }

  .app-shell.view-dashboard .hero-avatar-stage img {
    position: absolute;
    right: 14px;
    bottom: -14px;
    width: 90px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .app-shell.view-dashboard .metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
  }

  .app-shell.view-dashboard .metric-card {
    min-height: 90px;
    height: auto;
    padding: 12px 14px;
    border-top-width: 2px;
    border-radius: 16px;
  }

  .app-shell.view-dashboard .metric-card::after {
    inset: auto 14px 0;
    height: 3px;
  }

  .app-shell.view-dashboard .metric-topline {
    gap: 6px;
    min-width: 0;
  }

  .app-shell.view-dashboard .metric-icon {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    flex: 0 0 auto;
  }

  .app-shell.view-dashboard .metric-icon svg {
    width: 12px;
    height: 12px;
  }

  .app-shell.view-dashboard .metric-card p {
    min-width: 0;
    color: #666;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shell.view-dashboard .metric-card strong {
    margin: 6px 0 2px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .app-shell.view-dashboard .metric-card > span {
    display: block;
    color: #888;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-shell.view-dashboard .metric-card-link {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    width: 14px;
    height: 14px;
    overflow: hidden;
    color: var(--metric-color, var(--blue));
    font-size: 0;
  }

  .app-shell.view-dashboard .metric-card-link svg {
    width: 14px;
    height: 14px;
  }

  .app-shell.view-dashboard .metric-progress {
    height: 3px;
    margin-top: auto;
    border-radius: 2px;
  }
}

/* === compact jobs alert UI final override === */
@media (max-width: 768px) {
  .jobs-main-panel .section-heading {
    margin-bottom: 10px;
  }

  .job-list {
    gap: 8px;
  }

  .job-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 10px;
  }

  .job-card-head {
    gap: 8px;
  }

  .job-card h3 {
    font-size: 14px;
  }

  .job-card p {
    font-size: 12px;
    line-height: 1.35;
  }

  .job-score {
    justify-self: start;
    text-align: left;
  }

  .job-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .job-card-actions .compact {
    min-height: 34px;
    padding: 0 8px;
    font-size: 11px;
  }

  .connected-accounts-panel {
    gap: 10px;
  }

  .jobs-settings-section {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
  }

  .job-source-form .settings-grid.two,
  .job-draft-form .settings-grid.two {
    grid-template-columns: 1fr;
  }
}

/* === final mobile Filoo mascot visibility fix === */
@media (max-width: 768px) {
  .app-shell.view-dashboard .hero-avatar-stage {
    height: 160px;
    overflow: visible;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap,
  .app-shell.view-dashboard .hero-avatar-stage img {
    right: 10px;
    bottom: 0;
    width: 140px;
    height: 140px;
    overflow: visible;
    object-fit: contain;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .app-shell.view-dashboard .hero-avatar-stage {
    height: 150px;
  }

  .app-shell.view-dashboard .hero-avatar-stage .filoo-hero-video-wrap,
  .app-shell.view-dashboard .hero-avatar-stage img {
    width: 130px;
    height: 130px;
  }
}

/* === final mobile productivity board optimization (wins cascade) === */
@media (max-width: 768px) {
  body,
  #filoo-root,
  .app-shell,
  .main-content {
    max-width: 100%;
    overflow-x: hidden;
  }

  .work-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .board-panel {
    padding: 12px;
  }

  .board-panel .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .board-panel .section-heading > div,
  .board-panel,
  .work-organizer-panel,
  .productivity-board-shell,
  .kanban,
  .kanban-column,
  .kanban .task-card {
    min-width: 0;
    max-width: 100%;
  }

  .board-panel .section-heading h2 {
    overflow: hidden;
    font-size: 22px;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .board-panel .section-heading .primary-action.compact {
    min-width: 92px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .board-panel .section-heading .icon-button {
    width: 38px;
    height: 38px;
  }

  .work-filter-panel {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 10px;
  }

  .work-filter-row {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .work-filter-row::-webkit-scrollbar {
    display: none;
  }

  .work-filter-chip {
    flex: 0 0 auto;
    min-height: 32px;
    max-width: 140px;
    padding: 0 10px;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .productivity-board-shell {
    max-height: min(62vh, 620px);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 2px 4px 0;
    scroll-snap-type: none;
  }

  .kanban-mobile-hint {
    display: flex;
    justify-content: space-between;
    margin: 0 0 8px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--control-bg);
    color: var(--muted);
    font-size: 11px;
  }

  .kanban {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .kanban-column {
    width: 100%;
    min-width: 0;
    max-height: none;
    gap: 8px;
    padding: 10px;
    overflow: visible;
    scroll-snap-align: none;
    border-radius: 12px;
  }

  .column-title,
  .kanban .work-tag-row,
  .kanban .task-card-actions {
    min-width: 0;
  }

  .column-title span,
  .kanban .task-card .microcopy,
  .task-card-actions .ghost-action {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .kanban .task-card {
    gap: 8px;
    min-height: 0;
    padding: 10px;
    border-radius: 12px;
  }

  .kanban .task-card h3 {
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .kanban .task-card .microcopy,
  .kanban .task-meta {
    font-size: 10px;
  }

  .kanban .task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .kanban .task-meta span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kanban .work-tag {
    max-width: 136px;
    min-height: 26px;
    padding: 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .task-resource-row {
    flex-wrap: wrap;
    margin-top: 0;
  }

  .task-resource-row span {
    min-width: 0;
    max-width: 100%;
  }

  .task-resource-row em {
    max-width: 170px;
  }

  .task-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .task-card-actions .ghost-action,
  .task-card-actions .task-complete-btn,
  .task-card-actions .task-undo-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .add-task-row {
    min-height: 36px;
  }

  .work-organizer-panel {
    gap: 12px;
    padding: 12px;
  }

  .work-calendar {
    padding: 10px;
  }

  .work-calendar-grid {
    gap: 5px;
  }

  .work-calendar-day {
    min-height: 44px;
    padding: 5px;
    border-radius: 10px;
  }

  .completed-task-item {
    grid-template-columns: 1fr;
  }
}

/* === final mobile app-wide overflow guard (wins cascade) === */
@media (max-width: 768px) {
  .panel,
  .metric-card,
  .task-card,
  .job-card,
  .finance-stat-card,
  .habit-row,
  .entry-modal,
  .chat-panel,
  .detail-panel,
  .world-tab-panel,
  .world-carousel-slide,
  .settings-section,
  .invoice-paper,
  .plugin-card {
    min-width: 0;
    max-width: 100%;
  }

  .section-heading,
  .button-row,
  .task-card-actions,
  .hero-actions,
  .voice-actions,
  .finance-entry-actions {
    min-width: 0;
  }

  .section-heading h2,
  .panel h2,
  .task-card h3,
  .job-card h3,
  .habit-row strong,
  .journal-entry h3,
  .plugin-card h3 {
    overflow-wrap: anywhere;
  }

img,
  video,
  iframe,
  canvas {
    max-width: 100%;
  }
}

/* === Productivity calendar readability pass === */
.work-calendar {
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(244, 247, 252, 0.86)),
    var(--list-bg);
}

.work-calendar .calendar-toolbar {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
}

.work-calendar .calendar-toolbar strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.work-calendar .calendar-toolbar .icon-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
}

.work-calendar .calendar-weekdays {
  gap: 4px;
  padding: 0 2px;
}

.work-calendar .calendar-weekdays span {
  overflow: hidden;
  color: var(--faint);
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.work-calendar-grid {
  gap: 5px;
}

.work-calendar-day {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(9px, 1fr) auto;
  align-items: start;
  gap: 3px;
  padding: 6px;
  border-radius: 13px;
}

.work-calendar-day::before {
  inset: auto 7px 5px;
  height: 2px;
}

.work-calendar-day > span:first-child {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  line-height: 1;
  text-align: left;
}

.work-calendar-day small {
  position: static;
  grid-column: 2;
  grid-row: 1;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  align-self: start;
  justify-self: end;
  font-size: 9px;
  font-weight: 900;
}

.work-calendar-stickers {
  position: static;
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  max-width: 100%;
  min-height: 8px;
  overflow: hidden;
}

.work-calendar-stickers i {
  width: 7px;
  height: 7px;
  min-width: 7px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.52);
  font-size: 0;
  box-shadow: 0 0 0 1px rgba(13, 22, 38, 0.04);
}

.work-calendar-day.has-task {
  padding-bottom: 9px;
}

.work-calendar-day.has-task:not(.is-selected) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 252, 0.92)),
    var(--panel);
}

.work-calendar-day.is-selected {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.18), transparent 42%),
    var(--blue);
}

.work-calendar-day.is-selected .work-calendar-stickers i {
  border-color: rgba(255, 255, 255, 0.58);
}

.work-calendar-day.is-empty:not(.has-task) {
  background: rgba(255, 255, 255, 0.56);
}

.work-calendar-help {
  gap: 8px 10px;
  padding-top: 2px;
  font-size: 10px;
}

@media (max-width: 768px) {
  .work-calendar {
    padding: 10px;
  }

  .work-calendar-grid {
    gap: 4px;
  }

  .work-calendar-day {
    min-height: 48px;
    padding: 5px;
    border-radius: 11px;
    font-size: 11px;
  }

  .work-calendar-day small {
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 8px;
  }

  .work-calendar-stickers i {
    width: 6px;
    height: 6px;
    min-width: 6px;
  }
}

/* === Home Filoo character stage, decoration-ready === */
.home-filoo-frame-shell {
  --filoo-frame-image: none;
  --filoo-frame-inset: 14px;
  --filoo-stage-radius: 24px;
  padding: var(--filoo-frame-inset);
}

.home-filoo-frame-surface {
  inset: 0;
  border-radius: var(--filoo-stage-radius);
  background:
    var(--filoo-frame-image),
    radial-gradient(circle at 50% 43%, var(--glow-color), transparent 44%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03));
  background-size: cover;
  background-position: center;
}

@media (min-width: 769px) {
  .app-shell.view-dashboard .home-filoo-frame-shell {
    --filoo-frame-inset: 0px;
    --filoo-stage-radius: 0 20px 20px 0;
  }

  .app-shell.view-dashboard .home-filoo-frame-surface,
  .app-shell.view-dashboard .home-filoo-stage {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

.home-filoo-stage {
  width: 100%;
  height: 100%;
  min-height: clamp(430px, 46vw, 570px);
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  place-items: stretch;
  gap: 14px;
  margin: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 0;
  border-radius: calc(var(--filoo-stage-radius) - 4px);
  background: transparent !important;
  text-align: center;
  isolation: isolate;
}

.home-filoo-bubble-lane {
  position: relative;
  z-index: 6;
  min-height: 76px;
  display: grid;
  align-items: start;
  padding: 0 4px;
}

.home-filoo-stage .avatar-hero-bubble {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 350px);
  max-width: 100%;
  justify-self: center;
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  border-color: rgba(77, 143, 255, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(13, 22, 38, 0.14);
  text-align: center;
  transform: none;
}

.home-filoo-stage .avatar-hero-bubble p {
  font-size: 13px;
  line-height: 1.45;
}

.home-filoo-stage .avatar-hero-bubble::after {
  top: auto;
  right: auto;
  bottom: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 0;
  border-right: 1px solid rgba(77, 143, 255, 0.22);
  border-bottom: 1px solid rgba(77, 143, 255, 0.22);
  transform: translateX(-50%) rotate(45deg);
}

.home-filoo-robot-lane {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}

.home-filoo-stage .filoo-hero-video-wrap {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  width: min(278px, 76%, calc(100% - 26px)) !important;
  height: auto !important;
  margin: 0 auto;
  aspect-ratio: 640 / 854;
  align-self: center;
}

.home-filoo-stage .filoo-hero-video-wrap img,
.home-filoo-stage .filoo-loop-gif {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.home-filoo-stage .avatar-glow {
  display: block;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(240px, 76%);
  height: min(240px, 76%);
  transform: translate(-50%, -50%);
}

.home-filoo-stage .avatar-accessory {
  top: 10px;
  right: 10px;
  z-index: 4;
}

.home-filoo-footer {
  position: relative;
  z-index: 6;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-filoo-footer .avatar-stage-actions {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.home-filoo-footer .mood-pill {
  position: static;
  flex: 0 0 auto;
  padding: 8px 12px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .home-filoo-container {
    min-height: 310px;
    margin: 0 16px 12px;
  }

  .app-shell.view-dashboard .home-filoo-frame-shell {
    min-height: 310px;
    padding: 10px;
    border-left: 0;
  }

  .app-shell.view-dashboard .home-filoo-stage {
    min-height: 290px;
    height: auto;
    grid-template-rows: auto minmax(150px, 1fr) auto;
    gap: 10px;
    padding: 12px !important;
    border-radius: 18px;
  }

  .app-shell.view-dashboard .home-filoo-bubble-lane {
    min-height: auto;
    padding: 0;
  }

  .app-shell.view-dashboard .home-filoo-stage .avatar-hero-bubble {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 15px;
    text-align: center;
  }

  .app-shell.view-dashboard .home-filoo-stage .avatar-hero-bubble::after {
    display: block;
    right: auto;
    bottom: -7px;
    left: 50%;
  }

  .app-shell.view-dashboard .home-filoo-stage .filoo-hero-video-wrap {
    width: min(190px, 70vw, 74%) !important;
  }

  .app-shell.view-dashboard .home-filoo-stage .avatar-glow {
    display: block;
    width: min(190px, 72%);
    height: min(190px, 72%);
  }

  .app-shell.view-dashboard .home-filoo-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .app-shell.view-dashboard .home-filoo-footer .avatar-stage-actions {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-shell.view-dashboard .home-filoo-footer .avatar-stage-actions::-webkit-scrollbar {
    display: none;
  }

  .app-shell.view-dashboard .home-filoo-footer .avatar-stage-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
  }

  .app-shell.view-dashboard .home-filoo-footer .mood-pill {
    display: inline-flex;
    font-size: 10px;
    padding: 7px 10px;
  }

  .app-shell.view-dashboard .home-filoo-stage .avatar-accessory {
    display: none;
  }
}

/* Final pass: decoration-ready Filoo frame + compact calendar cells */
.home-filoo-frame-shell {
  position: relative;
  isolation: isolate;
}

.home-filoo-frame-shell::before {
  content: "";
  position: absolute;
  inset: var(--filoo-frame-inset, 14px);
  z-index: 1;
  border-radius: calc(var(--filoo-stage-radius, 24px) - 4px);
  pointer-events: none;
}

.home-filoo-frame-surface {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.home-filoo-stage {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 18px 16px !important;
  overflow: hidden !important;
}

.home-filoo-bubble-lane {
  z-index: 5;
  width: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 0;
}

.home-filoo-stage .avatar-hero-bubble {
  z-index: 5;
  width: auto;
  max-width: 82%;
  margin: 0 0 8px;
  padding: 12px 16px;
  border-radius: 16px;
}

.home-filoo-stage .avatar-hero-bubble::after {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 0;
  border-width: 10px 8px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.94) transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(13, 22, 38, 0.08));
  transform: translateX(-50%);
}

.home-filoo-robot-lane {
  z-index: 3;
  flex: 1 1 auto;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 260px;
}

.home-filoo-stage .filoo-hero-video-wrap {
  z-index: 3;
  width: min(310px, 86%, calc(100% - 16px)) !important;
}

.home-filoo-stage .avatar-glow {
  z-index: 1;
}

.home-filoo-footer {
  z-index: 6;
  width: 100%;
}

.home-filoo-stage .avatar-accessory {
  display: none !important;
}

.work-calendar,
.work-calendar .calendar-weekdays,
.work-calendar-grid {
  width: 100%;
}

.work-calendar .calendar-weekdays,
.work-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.work-calendar-day {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 60px;
  padding: 6px 2px 8px;
  text-align: center;
}

.work-calendar-day > span:first-child {
  width: 100%;
  min-width: 0;
  line-height: 1.15;
}

.work-calendar-day small {
  display: none !important;
}

.work-calendar-stickers {
  position: static;
  display: flex;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  min-height: 7px;
  margin-top: auto;
  overflow: hidden;
}

.work-calendar-stickers i {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 999px;
  color: transparent !important;
  font-size: 0;
  line-height: 0;
}

.work-calendar-day::before {
  inset: auto 9px 4px;
  height: 2px;
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .home-filoo-stage {
    padding: 14px 12px 12px !important;
    gap: 10px;
  }

  .app-shell.view-dashboard .home-filoo-stage .avatar-hero-bubble {
    max-width: 88%;
    width: auto;
  }

  .app-shell.view-dashboard .home-filoo-robot-lane {
    min-height: 178px;
  }

  .app-shell.view-dashboard .home-filoo-stage .filoo-hero-video-wrap {
    width: min(220px, 80vw, 82%) !important;
  }

  .work-calendar {
    padding: 12px;
  }

  .work-calendar-grid {
    gap: 5px;
  }

  .work-calendar-day {
    min-height: 52px;
  }
}

/* Keep Filoo's character frame stable across taps, hover, and mood changes. */
.home-filoo-stage:hover .filoo-hero-video-wrap,
.home-filoo-stage:focus-visible .filoo-hero-video-wrap,
.home-filoo-stage.is-tapped .filoo-hero-video-wrap,
.home-filoo-stage:not(.is-tapped):not(:hover):not(:focus-visible) .filoo-hero-video-wrap,
.home-filoo-stage:hover .filoo-loop-gif,
.home-filoo-stage:focus-visible .filoo-loop-gif,
.home-filoo-stage.is-tapped .filoo-loop-gif,
.home-filoo-stage:not(.is-tapped):not(:hover):not(:focus-visible) .filoo-loop-gif {
  animation: none !important;
  transform: none !important;
}

.home-filoo-stage .filoo-hero-video-wrap,
.home-filoo-stage .filoo-loop-gif {
  transition: opacity 0.18s ease !important;
  will-change: opacity;
}

/* Mobile crop guard: the Home Filoo frame replaced the old small mascot card,
   so cancel the legacy fixed 1:1 hero-avatar sizing on this specific stage. */
@media (max-width: 768px) {
  .app-shell.view-dashboard .home-filoo-container {
    min-height: clamp(420px, 112vw, 460px) !important;
    margin: 0 16px 14px;
  }

  .app-shell.view-dashboard .home-filoo-frame-shell {
    min-height: clamp(420px, 112vw, 460px) !important;
    padding: 10px;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage {
    height: auto !important;
    min-height: clamp(400px, 106vw, 440px) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden !important;
  }

  .app-shell.view-dashboard .home-filoo-bubble-lane {
    min-height: 0 !important;
  }

  .app-shell.view-dashboard .home-filoo-robot-lane {
    flex: 1 1 auto;
    min-height: clamp(292px, 78vw, 324px) !important;
    overflow: visible !important;
  }

  .app-shell.view-dashboard .home-filoo-stage .filoo-hero-video-wrap {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(224px, 66vw, calc(100% - 18px)) !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 640 / 854 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    align-self: center !important;
  }

  .app-shell.view-dashboard .home-filoo-stage .filoo-loop-gif,
  .app-shell.view-dashboard .home-filoo-stage .filoo-hero-video-wrap img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* Lock the Home Filoo character to a fixed stage. Speech bubbles and mood
   changes should never resize or push the robot around. */
.home-filoo-stage {
  --filoo-stage-character-width: min(278px, 76%, calc(100% - 26px));
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch;
  justify-items: center;
}

.home-filoo-bubble-lane {
  position: absolute !important;
  top: 18px;
  right: 18px;
  left: 18px;
  z-index: 8;
  width: auto !important;
  min-height: 0 !important;
  pointer-events: none;
}

.home-filoo-stage .avatar-hero-bubble {
  max-width: min(350px, 88%) !important;
  margin: 0 auto !important;
}

.home-filoo-robot-lane {
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 54px 0 8px;
  place-items: center;
  overflow: visible !important;
}

.home-filoo-footer {
  grid-row: 2;
}

.home-filoo-stage .filoo-hero-video-wrap {
  width: var(--filoo-stage-character-width) !important;
  height: auto !important;
  aspect-ratio: 640 / 854 !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
}

.home-filoo-stage .filoo-loop-gif,
.home-filoo-stage .filoo-hero-video-wrap img {
  transform-origin: center center !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  backface-visibility: visible !important;
  contain: none !important;
  transform-style: flat !important;
  will-change: auto !important;
}

.home-filoo-stage.is-tapped .avatar-glow,
.home-filoo-stage .avatar-glow {
  animation: none !important;
}

.home-filoo-stage .filoo-loop-gif[data-filoo-action="idle"] { --filoo-gif-scale: 1.06; --filoo-gif-x: 1.3%; --filoo-gif-y: 0.8%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="greeting"] { --filoo-gif-scale: 1.02; --filoo-gif-x: 4.9%; --filoo-gif-y: 0.1%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="happy"],
.home-filoo-stage .filoo-loop-gif[data-filoo-action="love"] { --filoo-gif-scale: 1.01; --filoo-gif-x: -3.4%; --filoo-gif-y: 0.2%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="thinking"] { --filoo-gif-scale: 1.04; --filoo-gif-x: -1.2%; --filoo-gif-y: 0.3%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="talking"] { --filoo-gif-scale: 1.06; --filoo-gif-x: 1.3%; --filoo-gif-y: 0.8%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="laughing"] { --filoo-gif-scale: 1; --filoo-gif-x: -1.6%; --filoo-gif-y: 0.2%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="joking"] { --filoo-gif-scale: 0.95; --filoo-gif-x: -3.4%; --filoo-gif-y: -0.9%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="dancing"] { --filoo-gif-scale: 0.97; --filoo-gif-x: -1.9%; --filoo-gif-y: 2.6%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="congrats"],
.home-filoo-stage .filoo-loop-gif[data-filoo-action="excited"] { --filoo-gif-scale: 1; --filoo-gif-x: 0.9%; --filoo-gif-y: 0.9%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="backToWork"] { --filoo-gif-scale: 1.02; --filoo-gif-x: 0.9%; --filoo-gif-y: -0.4%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="takeBreak"] { --filoo-gif-scale: 0.97; --filoo-gif-x: -5.3%; --filoo-gif-y: 0.7%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="crying"] { --filoo-gif-scale: 1.01; --filoo-gif-x: 1.6%; --filoo-gif-y: -0.1%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="humming"] { --filoo-gif-scale: 0.96; --filoo-gif-x: -0.9%; --filoo-gif-y: 0.7%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="sleepy"] { --filoo-gif-scale: 1.02; --filoo-gif-x: 2.7%; --filoo-gif-y: 0.1%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="focus"] { --filoo-gif-scale: 0.91; --filoo-gif-x: 0.1%; --filoo-gif-y: 0; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="jogging"],
.home-filoo-stage .filoo-loop-gif[data-filoo-action="exercise"] { --filoo-gif-scale: 1.04; --filoo-gif-x: 2.5%; --filoo-gif-y: 0.8%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="meditate"] { --filoo-gif-scale: 1; --filoo-gif-x: -0.5%; --filoo-gif-y: 1.8%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="productivityReminder"] { --filoo-gif-scale: 0.95; --filoo-gif-x: 4.7%; --filoo-gif-y: -0.6%; }
.home-filoo-stage .filoo-loop-gif[data-filoo-action="angry"] { --filoo-gif-scale: 0.97; --filoo-gif-x: 1.2%; --filoo-gif-y: 0.3%; }

@media (max-width: 768px) {
  .app-shell.view-dashboard .home-filoo-stage {
    --filoo-stage-character-width: min(224px, 66vw, calc(100% - 18px));
  }

  .app-shell.view-dashboard .home-filoo-bubble-lane {
    top: 14px;
    right: 14px;
    left: 14px;
  }

  .app-shell.view-dashboard .home-filoo-robot-lane {
    padding: 46px 0 4px;
  }

  .app-shell.view-dashboard .home-filoo-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
  }

  .app-shell.view-dashboard .home-filoo-footer .avatar-stage-actions {
    flex: 0 1 auto;
    max-width: 100%;
    padding-right: 0;
  }

  .app-shell.view-dashboard .home-filoo-footer .mood-pill {
    display: none !important;
  }
}

/* Premium Home speech bubble: readable, cyan-accented, and overlay-only so it
   does not move the character stage. */
.home-filoo-stage .avatar-hero-bubble {
  position: relative !important;
  width: auto !important;
  max-width: min(91%, 360px) !important;
  margin: 0 auto !important;
  padding: 15px 20px !important;
  border: 1.5px solid rgba(32, 196, 232, 0.28) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 5px rgba(32, 196, 232, 0.07),
    0 12px 48px rgba(0, 10, 30, 0.28),
    0 3px 10px rgba(32, 196, 232, 0.10) !important;
  text-align: center;
  backdrop-filter: none;
}

.home-filoo-stage .avatar-hero-bubble p {
  margin: 0;
  color: #08111f !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.home-filoo-stage .avatar-hero-bubble::before {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  z-index: -1;
  width: 0;
  height: 0;
  padding: 0;
  border-top: 13px solid rgba(32, 196, 232, 0.28);
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
}

.home-filoo-stage .avatar-hero-bubble::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 0;
  height: 0;
  padding: 0;
  border-top: 11px solid #ffffff !important;
  border-right: 11px solid transparent !important;
  border-bottom: 0 !important;
  border-left: 11px solid transparent !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  filter: none;
  transform: translateX(-50%) !important;
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .home-filoo-bubble-lane {
    min-height: 100px !important;
    padding: 0 10px 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .app-shell.view-dashboard .home-filoo-stage .avatar-hero-bubble {
    max-width: 91% !important;
    padding: 14px 16px !important;
  }
}

/* Final Home Filoo geometry lock: the character column, rows, and robot frame
   stay fixed so speech bubbles and action GIF swaps cannot resize the robot. */
.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage {
  --filoo-stage-column-width: min(295px, calc(100% - 36px));
  --filoo-stage-wrap-width: 240px;
  --filoo-stage-wrap-height: 320px;
  display: grid !important;
  grid-template-columns: var(--filoo-stage-column-width) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  justify-content: center !important;
  justify-items: center !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-bubble-lane {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-robot-lane {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: end center !important;
  overflow: visible !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .filoo-hero-video-wrap {
  width: var(--filoo-stage-wrap-width) !important;
  height: var(--filoo-stage-wrap-height) !important;
  aspect-ratio: unset !important;
  flex-shrink: 0 !important;
  align-self: end !important;
  justify-self: center !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .filoo-loop-gif,
.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .filoo-hero-video-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  --filoo-gif-scale: 1 !important;
  --filoo-gif-x: 0 !important;
  --filoo-gif-y: 0 !important;
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage {
    --filoo-stage-column-width: min(295px, calc(100% - 24px));
    --filoo-stage-wrap-width: clamp(200px, 58vw, 224px);
    --filoo-stage-wrap-height: clamp(267px, 77vw, 299px);
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 44px !important;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer .avatar-stage-actions {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 68px) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer .mood-pill {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 54px !important;
    max-width: 88px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin-left: auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 10px 24px rgba(13, 22, 38, 0.14) !important;
    color: var(--text) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .board-panel .section-heading .board-focus-cycle-control {
    min-width: 104px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* QA stabilization pass: keep mobile chrome compact, let Filoo's frame own
   its space, and avoid downloading/painting pressure from oversized controls. */
@media (max-width: 768px) {
  .mobile-avatar-button {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    overflow: hidden !important;
  }

  .mobile-avatar-button [data-filoo-live-label] {
    display: none !important;
  }

  .app-shell.view-dashboard .home-filoo-container,
  .app-shell.view-dashboard .home-filoo-frame-shell {
    min-height: clamp(360px, 94vw, 410px) !important;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage {
    --filoo-stage-wrap-width: clamp(184px, 52vw, 208px) !important;
    --filoo-stage-wrap-height: clamp(245px, 69vw, 278px) !important;
    min-height: clamp(340px, 88vw, 388px) !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage:has(.avatar-hero-bubble:not([hidden])) {
    min-height: clamp(404px, 104vw, 438px) !important;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-bubble-lane {
    min-height: 0 !important;
    padding: 0 !important;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-bubble-lane:has(.avatar-hero-bubble[hidden]) {
    display: none !important;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-bubble-lane:has(.avatar-hero-bubble:not([hidden])) {
    min-height: 76px !important;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer {
    min-height: 38px !important;
  }

  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer .avatar-stage-action,
  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer .mood-pill {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .app-shell.view-plugins .toolkit-hero,
  .app-shell.view-plugins .tools-hero,
  .app-shell.view-plugins .plugin-intro {
    padding: 14px !important;
  }

  .app-shell.view-plugins .plugin-card,
  .app-shell.view-plugins .productivity-tool-card {
    min-height: auto !important;
    padding: 14px !important;
  }

  .app-shell.view-plugins .tool-card-main {
    gap: 10px !important;
  }

  .app-shell.view-plugins .plugin-card h3 {
    font-size: 17px !important;
    line-height: 1.18 !important;
  }

  .app-shell.view-plugins .plugin-card p {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .app-shell.view-health .health-grid,
  .app-shell.view-health .health-main,
  .app-shell.view-health .health-sidebar {
    gap: 12px !important;
  }

  .app-shell.view-health .health-panel,
  .app-shell.view-health .health-card,
  .app-shell.view-health .body-profile-card,
  .app-shell.view-health .food-log-card,
  .app-shell.view-health .sleep-tracker-card {
    padding: 14px !important;
  }
}

.companion-dock {
  box-sizing: border-box;
  min-width: 220px;
  overflow: hidden !important;
}

.companion-dock strong,
.companion-dock span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .companion-dock {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
  }

  .companion-dock strong,
  .companion-dock small,
  .companion-dock span:not(.companion-dock-icon) {
    display: none !important;
  }
}

/* === My Workspace board refresh === */
.workspace-board-panel {
  --workspace-bg: #1f201f;
  --workspace-card: #2b2c2a;
  --workspace-line: rgba(255, 255, 255, 0.14);
  --workspace-text: #e7e2dc;
  --workspace-muted: #a9a59e;
  --workspace-faint: #77736c;
  color: var(--workspace-text);
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.07), transparent 30%),
    var(--workspace-bg);
  box-shadow: 0 22px 70px rgba(13, 22, 38, 0.16);
}

.workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.workspace-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}

.workspace-title-row h2 {
  margin: 0;
  color: var(--workspace-text);
  font-size: 22px;
  line-height: 1.1;
  white-space: nowrap;
}

.workspace-title-row span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 10px;
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 800;
}

.workspace-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-view-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 9px;
}

.workspace-view-toggle button,
.workspace-add-task {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.workspace-view-toggle button + button {
  border-left: 1px solid var(--workspace-line);
}

.workspace-view-toggle button.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--workspace-text);
}

.workspace-view-toggle svg,
.workspace-add-task svg {
  width: 15px;
  height: 15px;
}

.workspace-add-task {
  border: 1px solid var(--workspace-line);
  border-radius: 9px;
  color: var(--workspace-text);
}

.workspace-settings {
  border-color: var(--workspace-line);
  background: transparent;
  color: var(--workspace-muted);
}

.workspace-board-panel .board-focus-cycle-control {
  border: 1px solid rgba(55, 138, 221, 0.42);
  background: rgba(55, 138, 221, 0.14);
  color: #9fcbff;
}

.workspace-filter-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.workspace-filter-row {
  margin: 0;
  gap: 8px;
}

.workspace-filter-mobile-trigger {
  display: none;
}

.workspace-chip {
  min-height: 36px;
  padding: 0 16px;
  border-color: var(--workspace-line);
  border-radius: 8px;
  background: transparent;
  color: var(--workspace-muted);
  font-size: 13px;
}

.workspace-filter-toggle {
  gap: 7px;
}

.workspace-filter-toggle svg {
  width: 14px;
  height: 14px;
}

.workspace-chip.is-active,
.workspace-chip:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: var(--workspace-text);
}

.workspace-search {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  color: var(--workspace-muted);
  background: rgba(0, 0, 0, 0.14);
}

.workspace-search svg {
  width: 14px;
  height: 14px;
}

.workspace-search input {
  width: 150px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--workspace-text);
  font-size: 12px;
  font-weight: 700;
}

.workspace-search input::placeholder {
  color: var(--workspace-faint);
}

.workspace-filter-sections {
  display: grid;
  gap: 16px;
}

.workspace-filter-sheet {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(26, 106, 255, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(13, 22, 38, 0.18);
}

.workspace-filter-section {
  display: grid;
  gap: 8px;
}

.workspace-filter-section p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.workspace-filter-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.workspace-sheet-filter {
  min-height: 40px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.80);
  color: var(--text);
  font-weight: 850;
}

.workspace-sheet-filter.is-active {
  border-color: rgba(26, 106, 255, 0.45);
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(26, 106, 255, 0.16);
}

.workspace-filter-sheet-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.workspace-sheet-completed {
  padding: 0 14px;
}

.workspace-board-panel .productivity-board-shell {
  max-height: clamp(500px, calc(100vh - 308px), 760px);
  padding-right: 0;
}

.workspace-kanban {
  grid-template-columns: repeat(var(--workspace-column-count, 3), minmax(150px, 1fr));
  gap: 10px;
}

.workspace-archive-view {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(29, 158, 117, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(29, 158, 117, 0.08), transparent 55%),
    rgba(255, 255, 255, 0.72);
}

.workspace-archive-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.workspace-archive-head h3,
.workspace-archive-head p {
  margin: 0;
}

.workspace-archive-head h3 {
  font-family: var(--display-font);
  font-size: 22px;
}

.workspace-archive-head p {
  margin-top: 4px;
  max-width: 640px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.workspace-archive-head > span {
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 999px;
  color: #0f7b5c;
  background: rgba(29, 158, 117, 0.12);
  font-size: 12px;
  font-weight: 900;
}

.workspace-archive-view .completed-task-list {
  max-height: none;
  overflow: visible;
}

.workspace-archive-view .completed-task-item {
  padding: 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.workspace-archive-view .completed-task-actions {
  justify-content: flex-end;
}

.completed-task-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.completed-task-pagination span {
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.completed-task-pagination .ghost-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.workspace-column {
  min-height: 410px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.workspace-column .column-title {
  margin-bottom: 10px;
  color: var(--workspace-muted);
  font-size: 12px;
  text-transform: none;
}

.workspace-column .column-title > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--workspace-muted);
}

.workspace-column .column-title > span i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--column-color);
}

.workspace-column .column-title-actions strong {
  min-width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--workspace-faint);
  font-size: 11px;
}

.workspace-column .column-add-btn {
  width: 38px;
  height: 38px;
  border-color: var(--workspace-line);
  border-radius: 8px;
  background: transparent;
  color: var(--workspace-text);
}

.workspace-archive-chip {
  border-color: rgba(29, 158, 117, 0.34);
  color: #0f7b5c;
  background: rgba(29, 158, 117, 0.08);
}

.workspace-archive-chip:hover {
  border-color: rgba(29, 158, 117, 0.5);
  background: rgba(29, 158, 117, 0.13);
}

.workspace-task-card {
  position: relative;
  gap: 9px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: var(--workspace-card);
  color: var(--workspace-text);
  box-shadow: none;
}

.workspace-task-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
  background: transparent;
}

.workspace-task-card.category-design .workspace-category-pill {
  --pill-bg: #d7e6ef;
  --pill-text: #0c447c;
}

.workspace-task-card.category-dev .workspace-category-pill {
  --pill-bg: #f2e3c7;
  --pill-text: #633806;
}

.workspace-task-card.category-content .workspace-category-pill {
  --pill-bg: #dfead5;
  --pill-text: #27500a;
}

.workspace-task-card.is-completed h3 {
  color: var(--workspace-faint);
  text-decoration: line-through;
}

.workspace-column.tone-blocked .workspace-task-card::before {
  background: #e24b4a;
}

.workspace-category-pill {
  width: fit-content;
  margin: 0 0 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pill-bg, #d7e6ef);
  color: var(--pill-text, #0c447c);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.workspace-task-card h3 {
  color: var(--workspace-text);
  font-size: 14px;
  line-height: 1.26;
}

:root[data-theme="night"] .workspace-board-panel {
  --workspace-bg: #111d33;
  --workspace-card: rgba(18, 31, 58, 0.96);
  --workspace-line: rgba(113, 157, 255, 0.28);
  --workspace-text: #f6f9ff;
  --workspace-muted: #c3d0ee;
  --workspace-faint: #8ea2cb;
  border-color: rgba(113, 157, 255, 0.28);
  background:
    radial-gradient(circle at 78% 8%, rgba(32, 196, 232, 0.16), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(26, 106, 255, 0.22), transparent 34%),
    var(--workspace-bg);
}

:root[data-theme="night"] .workspace-board-panel .workspace-filter-panel,
:root[data-theme="night"] .workspace-board-panel .productivity-board-shell {
  color: var(--workspace-text);
}

:root[data-theme="night"] .workspace-board-panel .empty-state {
  color: var(--workspace-muted);
  border-color: rgba(113, 157, 255, 0.2);
  background: rgba(255, 255, 255, 0.035);
}

:root[data-theme="night"] .workspace-task-card {
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.08), transparent 58%),
    var(--workspace-card);
}

:root[data-theme="night"] .workspace-archive-view,
:root[data-theme="night"] .workspace-list-view,
:root[data-theme="night"] .workspace-calendar-view {
  border-color: rgba(113, 157, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.1), transparent 54%),
    rgba(18, 31, 58, 0.9);
  color: var(--workspace-text);
}

:root[data-theme="night"] .workspace-archive-head p,
:root[data-theme="night"] .workspace-list-row small,
:root[data-theme="night"] .workspace-calendar-legend {
  color: var(--workspace-muted);
}

:root[data-theme="night"] .workspace-archive-view .completed-task-item,
:root[data-theme="night"] .workspace-list-row,
:root[data-theme="night"] .workspace-calendar-task,
:root[data-theme="night"] .workspace-calendar-day {
  border-color: rgba(113, 157, 255, 0.2);
  background: rgba(255, 255, 255, 0.045);
  color: var(--workspace-text);
}

.workspace-task-detail {
  margin: -2px 0 0;
  color: var(--workspace-faint);
  font-size: 12px;
  font-weight: 800;
}

.workspace-progress-line {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}

.workspace-progress-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--column-color, #1d9e75);
}

.workspace-task-card .task-due-row,
.workspace-task-card .task-meta,
.workspace-task-card .task-resource-row {
  color: var(--workspace-muted);
}

.workspace-card-avatar,
.workspace-avatar {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(55, 138, 221, 0.32);
  color: #b7d9ff;
  font-size: 10px;
  font-weight: 900;
}

.workspace-column .add-task-row {
  min-height: 40px;
  border-color: var(--workspace-line);
  border-style: solid;
  border-radius: 8px;
  color: var(--workspace-muted);
}

.workspace-column .empty-state {
  border: 1px dashed var(--workspace-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--workspace-faint);
}

.workspace-list-view {
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
}

.workspace-list-head,
.workspace-list-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) 120px 100px 78px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}

.workspace-list-head {
  background: rgba(255, 255, 255, 0.05);
  color: var(--workspace-faint);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.workspace-list-row {
  border-top: 1px solid var(--workspace-line);
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.workspace-list-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.workspace-list-task {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.workspace-list-task strong,
.workspace-list-task small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-list-task strong {
  color: var(--workspace-text);
  font-size: 13px;
}

.workspace-list-task small {
  color: var(--workspace-faint);
  font-size: 11px;
}

.workspace-list-row.is-completed .workspace-list-task strong {
  color: var(--workspace-faint);
  text-decoration: line-through;
}

.workspace-priority-dot {
  grid-row: 1 / span 2;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #378add;
}

.workspace-priority-dot.priority-high {
  background: #e24b4a;
}

.workspace-priority-dot.priority-medium {
  background: #ef9f27;
}

.workspace-priority-dot.priority-low {
  background: #378add;
}

.workspace-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.workspace-status-pill.status-to-do {
  background: rgba(55, 138, 221, 0.16);
  color: #9fcbff;
}

.workspace-status-pill.status-in-progress {
  background: rgba(239, 159, 39, 0.16);
  color: #f2bd68;
}

.workspace-status-pill.status-done {
  background: rgba(29, 158, 117, 0.18);
  color: #72d3b2;
}

.workspace-status-pill.status-blocked {
  background: rgba(226, 75, 74, 0.18);
  color: #ff9a9a;
}

@media (max-width: 1180px) {
  .workspace-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .workspace-kanban {
    grid-template-columns: repeat(var(--workspace-column-count, 3), minmax(140px, 1fr));
  }
}

@media (max-width: 768px) {
  .workspace-board-panel {
    padding: 12px;
  }

  .workspace-title-row {
    width: 100%;
    justify-content: space-between;
  }

  .workspace-title-row h2 {
    font-size: 21px;
  }

  .workspace-actions,
  .workspace-view-toggle,
  .workspace-add-task,
  .workspace-board-panel .board-focus-cycle-control {
    width: 100%;
  }

  .workspace-view-toggle button {
    flex: 1;
  }

  .workspace-filter-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .workspace-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .workspace-chip {
    flex: 0 0 auto;
  }

  .workspace-search,
  .workspace-search input {
    width: 100%;
  }

  .workspace-board-panel .productivity-board-shell {
    max-height: none;
    overflow: visible;
  }

  .workspace-kanban {
    grid-template-columns: 1fr;
  }

  .workspace-column {
    min-height: 0;
  }

  .workspace-list-view {
    overflow-x: auto;
  }

  .workspace-list-head,
  .workspace-list-row {
    min-width: 680px;
  }
}

/* === My Workspace brand alignment + calendar view === */
.workspace-board-panel {
  --workspace-bg: #ffffff;
  --workspace-card: rgba(255, 255, 255, 0.96);
  --workspace-line: rgba(26, 106, 255, 0.16);
  --workspace-text: var(--text);
  --workspace-muted: var(--muted);
  --workspace-faint: var(--faint);
  color: var(--workspace-text);
  border-color: rgba(26, 106, 255, 0.18);
  background:
    radial-gradient(circle at 10% 0%, rgba(26, 106, 255, 0.10), transparent 30%),
    radial-gradient(circle at 100% 6%, rgba(23, 201, 195, 0.10), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 252, 0.92));
  box-shadow: 0 22px 70px rgba(26, 106, 255, 0.10);
}

.workspace-title-row h2 {
  color: var(--text);
  letter-spacing: 0;
}

.workspace-title-row span {
  border-color: rgba(26, 106, 255, 0.18);
  background: rgba(26, 106, 255, 0.06);
  color: var(--muted);
}

.workspace-view-toggle {
  border-color: rgba(26, 106, 255, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.workspace-view-toggle button,
.workspace-add-task {
  color: var(--muted);
}

.workspace-view-toggle button + button {
  border-left-color: rgba(26, 106, 255, 0.12);
}

.workspace-view-toggle button.is-active {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(26, 106, 255, 0.22);
}

.workspace-add-task {
  border-color: rgba(26, 106, 255, 0.22);
  background: linear-gradient(180deg, #ffffff, #f7faff);
  color: var(--blue-dark);
}

.workspace-add-task:hover,
.workspace-settings:hover,
.workspace-column .column-add-btn:hover,
.workspace-column .add-task-row:hover {
  border-color: rgba(26, 106, 255, 0.36);
  background: rgba(26, 106, 255, 0.08);
  color: var(--blue-dark);
}

.workspace-settings {
  border-color: rgba(26, 106, 255, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
}

.workspace-board-panel .board-focus-cycle-control {
  border: 0;
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(26, 106, 255, 0.24);
}

.workspace-chip {
  border-color: rgba(26, 106, 255, 0.18);
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
}

.workspace-chip.is-active,
.workspace-chip:hover {
  border-color: rgba(26, 106, 255, 0.34);
  background: var(--blue-muted);
  color: var(--blue-dark);
}

.workspace-search {
  border-color: rgba(26, 106, 255, 0.18);
  background: #ffffff;
  color: var(--muted);
  box-shadow: 0 8px 20px rgba(26, 106, 255, 0.06);
}

.workspace-search input {
  color: var(--text);
}

.workspace-search input::placeholder {
  color: var(--faint);
}

.workspace-column {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 249, 255, 0.72));
  border-radius: 16px;
  padding: 10px;
}

.workspace-column .column-title {
  color: var(--muted);
}

.workspace-column .column-title > span,
.workspace-column .column-title-actions strong {
  color: var(--muted);
}

.workspace-column .column-title-actions strong {
  background: rgba(26, 106, 255, 0.08);
}

.workspace-column .column-add-btn {
  border-color: rgba(26, 106, 255, 0.18);
  background: #ffffff;
  color: var(--blue-dark);
}

.workspace-task-card {
  border-color: rgba(26, 106, 255, 0.13);
  background: var(--workspace-card);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(13, 22, 38, 0.07);
}

.workspace-task-card:hover {
  border-color: rgba(26, 106, 255, 0.26);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(26, 106, 255, 0.12);
}

.workspace-task-card h3 {
  color: var(--text);
  letter-spacing: 0;
}

.workspace-task-detail,
.workspace-task-card .task-due-row,
.workspace-task-card .task-meta,
.workspace-task-card .task-resource-row {
  color: var(--muted);
}

.workspace-progress-line {
  background: rgba(26, 106, 255, 0.10);
}

.workspace-progress-line i {
  background: linear-gradient(90deg, var(--column-color, var(--blue)), var(--cyan));
}

.workspace-card-avatar,
.workspace-avatar {
  background: var(--blue-muted);
  color: var(--blue-dark);
}

.workspace-column .add-task-row {
  border-color: rgba(26, 106, 255, 0.18);
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
}

.workspace-column .empty-state,
.workspace-list-empty {
  border-color: rgba(26, 106, 255, 0.18);
  background: rgba(255, 255, 255, 0.62);
  color: var(--faint);
}

.workspace-list-view,
.workspace-calendar-view {
  overflow: hidden;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 42px rgba(26, 106, 255, 0.08);
}

.workspace-list-head {
  background: rgba(26, 106, 255, 0.06);
  color: var(--muted);
}

.workspace-list-row {
  border-top-color: rgba(26, 106, 255, 0.12);
  color: var(--muted);
}

.workspace-list-row:hover {
  background: rgba(26, 106, 255, 0.05);
}

.workspace-list-task strong {
  color: var(--text);
}

.workspace-list-task small,
.workspace-list-row.is-completed .workspace-list-task strong {
  color: var(--faint);
}

.workspace-status-pill.status-to-do {
  background: rgba(26, 106, 255, 0.12);
  color: var(--blue-dark);
}

.workspace-status-pill.status-in-progress {
  background: rgba(245, 158, 11, 0.15);
  color: #9a5c00;
}

.workspace-status-pill.status-done {
  background: rgba(34, 197, 94, 0.14);
  color: #116b35;
}

.workspace-status-pill.status-blocked {
  background: rgba(239, 68, 68, 0.14);
  color: #a51919;
}

.workspace-calendar-view {
  padding: 14px;
}

.workspace-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.workspace-calendar-toolbar h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.workspace-calendar-weekdays,
.workspace-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.workspace-calendar-weekdays {
  margin-bottom: 8px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.workspace-calendar-day {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(26, 106, 255, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.workspace-calendar-day.is-outside {
  opacity: 0.54;
  background: rgba(248, 250, 255, 0.82);
}

.workspace-calendar-day.is-selected {
  border-color: rgba(26, 106, 255, 0.48);
  box-shadow: 0 0 0 3px rgba(26, 106, 255, 0.10);
}

.workspace-calendar-day.is-today .workspace-calendar-date span {
  background: var(--blue);
  color: #ffffff;
}

.workspace-calendar-date {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.workspace-calendar-date span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.workspace-calendar-date strong {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue-muted);
  color: var(--blue-dark);
  font-size: 10px;
}

.workspace-calendar-flags,
.workspace-calendar-legend {
  display: flex;
  align-items: center;
  gap: 5px;
}

.workspace-calendar-flags {
  min-height: 5px;
}

.workspace-calendar-flags i,
.workspace-calendar-legend i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.flag-priority {
  background: #ef4444;
}

.flag-blocked {
  background: #f59e0b;
}

.flag-done {
  background: #22c55e;
}

.workspace-calendar-task-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.workspace-calendar-task,
.workspace-calendar-more {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 6px 7px;
  border: 1px solid rgba(26, 106, 255, 0.10);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: rgba(26, 106, 255, 0.04);
  color: var(--text);
  text-align: left;
}

.workspace-calendar-task.tone-progress {
  border-left-color: #f59e0b;
}

.workspace-calendar-task.tone-done {
  border-left-color: #22c55e;
}

.workspace-calendar-task.tone-blocked {
  border-left-color: #ef4444;
}

.workspace-calendar-task span,
.workspace-calendar-task small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-calendar-task span {
  font-size: 11px;
  font-weight: 900;
}

.workspace-calendar-task small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.workspace-calendar-task.is-completed span {
  color: var(--faint);
  text-decoration: line-through;
}

.workspace-calendar-more {
  border-style: dashed;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.workspace-calendar-legend {
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

:root[data-theme="night"] .workspace-board-panel {
  --workspace-bg: #111d33;
  --workspace-card: rgba(18, 31, 58, 0.96);
  --workspace-line: rgba(113, 157, 255, 0.28);
  --workspace-text: #f6f9ff;
  --workspace-muted: #c3d0ee;
  --workspace-faint: #8ea2cb;
  color: var(--workspace-text);
  border-color: rgba(113, 157, 255, 0.28);
  background:
    radial-gradient(circle at 78% 8%, rgba(32, 196, 232, 0.16), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(26, 106, 255, 0.22), transparent 34%),
    var(--workspace-bg);
}

:root[data-theme="night"] .workspace-title-row h2,
:root[data-theme="night"] .workspace-task-card h3,
:root[data-theme="night"] .workspace-list-task strong,
:root[data-theme="night"] .workspace-calendar-toolbar h3,
:root[data-theme="night"] .workspace-calendar-date,
:root[data-theme="night"] .workspace-calendar-task,
:root[data-theme="night"] .workspace-calendar-more {
  color: var(--workspace-text);
}

:root[data-theme="night"] .workspace-view-toggle,
:root[data-theme="night"] .workspace-search,
:root[data-theme="night"] .workspace-filter-mobile-trigger,
:root[data-theme="night"] .workspace-settings,
:root[data-theme="night"] .workspace-column .column-add-btn,
:root[data-theme="night"] .workspace-column .add-task-row,
:root[data-theme="night"] .workspace-mobile-carousel-controls {
  border-color: var(--workspace-line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--workspace-muted);
  box-shadow: none;
}

:root[data-theme="night"] .workspace-view-toggle button,
:root[data-theme="night"] .workspace-add-task,
:root[data-theme="night"] .workspace-chip {
  color: var(--workspace-muted);
}

:root[data-theme="night"] .workspace-filter-mobile-trigger strong {
  color: #f6f9ff;
}

:root[data-theme="night"] .workspace-add-task,
:root[data-theme="night"] .workspace-chip {
  border-color: var(--workspace-line);
  background: rgba(255, 255, 255, 0.055);
}

:root[data-theme="night"] .workspace-view-toggle button.is-active,
:root[data-theme="night"] .workspace-chip.is-active,
:root[data-theme="night"] .workspace-chip:hover {
  border-color: rgba(113, 157, 255, 0.46);
  background: rgba(26, 106, 255, 0.34);
  color: #ffffff;
}

:root[data-theme="night"] .workspace-filter-sheet {
  border-color: rgba(113, 157, 255, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(26, 106, 255, 0.24), transparent 34%),
    #111d33;
}

:root[data-theme="night"] .workspace-sheet-filter {
  border-color: rgba(113, 157, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: #d9e4ff;
}

:root[data-theme="night"] .workspace-sheet-filter.is-active {
  border-color: rgba(113, 157, 255, 0.50);
  background: var(--blue);
  color: #ffffff;
}

:root[data-theme="night"] .workspace-column {
  background: rgba(255, 255, 255, 0.035);
}

:root[data-theme="night"] .workspace-task-card,
:root[data-theme="night"] .workspace-list-view,
:root[data-theme="night"] .workspace-calendar-view,
:root[data-theme="night"] .workspace-archive-view {
  border-color: rgba(113, 157, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.1), transparent 54%),
    rgba(18, 31, 58, 0.9);
  color: var(--workspace-text);
}

:root[data-theme="night"] .workspace-calendar-day,
:root[data-theme="night"] .workspace-calendar-task,
:root[data-theme="night"] .workspace-calendar-more,
:root[data-theme="night"] .workspace-list-row,
:root[data-theme="night"] .workspace-archive-view .completed-task-item,
:root[data-theme="night"] .task-comment-row {
  border-color: rgba(113, 157, 255, 0.2);
  background: rgba(255, 255, 255, 0.045);
  color: var(--workspace-text);
  box-shadow: none;
}

:root[data-theme="night"] .workspace-calendar-day.is-outside {
  background: rgba(255, 255, 255, 0.025);
}

:root[data-theme="night"] .workspace-list-head {
  background: rgba(26, 106, 255, 0.16);
  color: var(--workspace-muted);
}

:root[data-theme="night"] .workspace-task-detail,
:root[data-theme="night"] .workspace-task-card .task-due-row,
:root[data-theme="night"] .workspace-task-card .task-meta,
:root[data-theme="night"] .workspace-task-card .task-resource-row,
:root[data-theme="night"] .workspace-list-task small,
:root[data-theme="night"] .workspace-archive-head p,
:root[data-theme="night"] .workspace-calendar-legend,
:root[data-theme="night"] .workspace-calendar-weekdays,
:root[data-theme="night"] .workspace-calendar-task small {
  color: var(--workspace-muted);
}

.task-comments-list {
  display: grid;
  gap: 10px;
}

.task-comment-row {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(26, 106, 255, 0.14);
  border-radius: 14px;
  background: rgba(244, 247, 252, 0.72);
}

.task-comment-row > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-comment-row > div strong {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue-muted);
  color: var(--blue-dark);
  font-size: 10px;
}

.task-comment-row > div span,
.task-comment-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.task-comment-row p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.task-add-comment-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.task-add-comment-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  color: var(--text);
  font: inherit;
}

@media (max-width: 1180px) {
  .workspace-calendar-day {
    min-height: 118px;
  }

  .workspace-filter-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .workspace-chip {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .job-pagination {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .job-pagination span {
    order: -1;
    text-align: center;
  }

  .job-alert-toolbar,
  .job-email-action-card,
  .job-email-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .job-filter-summary {
    justify-content: center;
  }

  .job-card-meta {
    gap: 5px;
  }

  .workspace-board-panel .workspace-filter-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .workspace-filter-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(26, 106, 255, 0.20);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--text);
    box-shadow: 0 10px 26px rgba(26, 106, 255, 0.08);
  }

  .workspace-filter-mobile-trigger span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .workspace-filter-mobile-trigger svg {
    width: 16px;
    height: 16px;
    color: var(--blue);
  }

  .workspace-filter-mobile-trigger strong,
  .workspace-filter-mobile-trigger em {
    overflow: hidden;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-filter-mobile-trigger em {
    color: var(--blue);
    font-style: normal;
  }

  .workspace-board-panel .workspace-filter-row {
    display: none;
  }

  .workspace-board-panel .workspace-chip {
    width: 100%;
    max-width: none;
    min-height: 36px;
    padding: 0 10px;
    white-space: normal;
    text-overflow: clip;
  }

  .workspace-board-panel .workspace-search {
    width: 100%;
  }

  .workspace-filter-sheet-overlay {
    align-items: flex-end;
    padding: 12px;
  }

  .workspace-filter-sheet {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid rgba(26, 106, 255, 0.18);
    border-radius: 22px;
    background:
      radial-gradient(circle at 0% 0%, rgba(26, 106, 255, 0.12), transparent 30%),
      rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 70px rgba(13, 22, 38, 0.22);
  }

  .workspace-filter-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .workspace-filter-sheet-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .workspace-sheet-filter {
    min-height: 44px;
    border: 1px solid rgba(26, 106, 255, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.80);
    color: var(--text);
    font-weight: 900;
  }

  .workspace-sheet-filter.is-active {
    border-color: rgba(26, 106, 255, 0.45);
    background: var(--blue);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(26, 106, 255, 0.20);
  }

  .workspace-view-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .workspace-view-toggle button + button {
    border-left: 1px solid rgba(26, 106, 255, 0.12);
  }

  .workspace-calendar-view {
    padding: 10px;
    overflow-x: auto;
  }

  .workspace-calendar-weekdays,
  .workspace-calendar-grid {
    min-width: 720px;
  }

  .workspace-calendar-day {
    min-height: 118px;
  }
}

.workspace-mobile-carousel-controls,
.workspace-mobile-dots {
  display: none;
}

@media (max-width: 768px) {
  .workspace-mobile-carousel-controls {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin: 4px 0 10px;
    padding: 10px;
    border: 1px solid rgba(26, 106, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(26, 106, 255, 0.07);
  }

  .workspace-mobile-carousel-controls .icon-button {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: var(--blue-dark);
    background: rgba(26, 106, 255, 0.08);
  }

  .workspace-mobile-carousel-controls .icon-button:disabled {
    opacity: 0.42;
    pointer-events: none;
  }

  .workspace-mobile-carousel-controls > div {
    min-width: 0;
    display: grid;
    gap: 2px;
    text-align: center;
  }

  .workspace-mobile-carousel-controls span,
  .workspace-mobile-carousel-controls small {
    color: var(--faint);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .workspace-mobile-carousel-controls strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-mobile-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 0 0 12px;
  }

  .workspace-mobile-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(26, 106, 255, 0.22);
    transition: width 0.18s ease, background 0.18s ease;
  }

  .workspace-mobile-dots button.is-active {
    width: 22px;
    background: var(--blue);
  }

  .workspace-kanban {
    display: block;
    overflow: hidden;
    touch-action: pan-y;
  }

  .workspace-column {
    display: none;
    width: 100%;
    min-height: 360px;
  }

  .workspace-column.is-mobile-active {
    display: block;
    animation: workspaceColumnIn 0.2s ease;
  }

  .workspace-column .column-title {
    min-height: 44px;
    align-items: center;
  }

  .workspace-column .add-task-row,
  .workspace-column .empty-state {
    width: 100%;
  }

  .workspace-list-view {
    overflow-x: hidden;
  }

  .workspace-archive-view {
    padding: 14px;
  }

  .workspace-archive-head {
    flex-direction: column;
    gap: 10px;
  }

  .workspace-archive-head > span {
    align-self: flex-start;
  }

  .completed-task-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .completed-task-pagination .ghost-action {
    justify-content: center;
  }

  .workspace-list-head {
    display: none;
  }

  .workspace-list-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .workspace-calendar-view {
    overflow-x: hidden;
  }

  .workspace-calendar-toolbar {
    align-items: flex-start;
  }

  .workspace-calendar-toolbar h3 {
    font-size: 18px;
  }

  .workspace-calendar-weekdays,
  .workspace-calendar-grid {
    min-width: 0;
    gap: 4px;
  }

  .workspace-calendar-weekdays {
    font-size: 8px;
  }

  .workspace-calendar-day {
    position: relative;
    min-height: 76px;
    gap: 3px;
    padding: 4px;
    border-radius: 10px;
  }

  .workspace-calendar-date {
    min-height: 22px;
    justify-content: center;
  }

  .workspace-calendar-date span {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .workspace-calendar-date strong {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    font-size: 8px;
  }

  .workspace-calendar-flags {
    justify-content: center;
    gap: 3px;
    min-height: 6px;
  }

  .workspace-calendar-task-list {
    gap: 3px;
  }

  .workspace-calendar-task {
    min-height: 18px;
    padding: 3px 4px;
    border-left-width: 2px;
    border-radius: 6px;
  }

  .workspace-calendar-task span {
    font-size: 8px;
  }

  .workspace-calendar-task small,
  .workspace-calendar-task-list .workspace-calendar-task:nth-of-type(n+2),
  .workspace-calendar-more {
    display: none;
  }

  .workspace-calendar-legend {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 10px;
  }
}

@keyframes workspaceColumnIn {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

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

/* Final Finance responsive guardrails - keep after legacy mobile rules. */
@media (max-width: 768px) {
  .finance-titlebar,
  .finance-command-row {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-stat-grid,
  .bill-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .finance-chart-grid,
  .finance-lower-grid,
  .finance-dashboard-grid,
  .budget-board,
  .tax-layout,
  .finance-invoice-layout {
    grid-template-columns: 1fr;
  }

  .finance-tab-strip {
    overflow-x: auto;
  }

  .finance-tab {
    flex: 0 0 auto;
  }

  .finance-search-field,
  .finance-add-transaction {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .finance-stat-grid,
  .bill-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* Finance refresh - aligned with the lighter My Workspace visual language. */
.finance-panel.finance-hub {
  border-color: rgba(26, 106, 255, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(26, 106, 255, 0.10), transparent 30%),
    radial-gradient(circle at 100% 6%, rgba(23, 201, 195, 0.10), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 252, 0.92));
  box-shadow: 0 22px 70px rgba(26, 106, 255, 0.10);
}

.finance-titlebar {
  align-items: flex-start;
}

.finance-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.finance-settings-trigger {
  border-color: rgba(26, 106, 255, 0.20);
  background: rgba(255, 255, 255, 0.86);
  color: var(--blue);
}

.finance-title-control {
  align-items: flex-start;
  flex-wrap: wrap;
}

.finance-title-control h2 {
  color: var(--text);
  letter-spacing: 0;
}

.finance-period-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.finance-period-stepper,
.finance-period-mode-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(26, 106, 255, 0.18);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.finance-period-stepper {
  min-height: 42px;
  overflow: hidden;
  border-radius: 12px;
}

.finance-period-stepper .icon-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.finance-period-stepper .icon-button:hover {
  background: rgba(26, 106, 255, 0.08);
  color: var(--blue-dark);
}

.finance-period-display {
  min-width: 132px;
  min-height: 40px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid rgba(26, 106, 255, 0.12);
  border-right: 1px solid rgba(26, 106, 255, 0.12);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.finance-period-display strong {
  font-size: 14px;
  line-height: 1.1;
}

.finance-period-display span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.finance-period-mode-toggle {
  min-height: 42px;
  padding: 4px;
  border-radius: 12px;
}

.finance-period-mode-toggle button {
  min-height: 32px;
  min-width: 70px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.finance-period-mode-toggle button.is-active {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(26, 106, 255, 0.22);
}

.finance-command-row {
  justify-content: flex-start;
}

.finance-tab-strip {
  flex: 1 1 auto;
  border-color: rgba(26, 106, 255, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.finance-tab {
  color: var(--muted);
}

.finance-tab.is-active {
  border-color: transparent;
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(26, 106, 255, 0.22);
}

.finance-stat-card,
.finance-side-card,
.bill-table-card,
.finance-trend-card,
.finance-donut-card,
.finance-ledger-card,
.finance-goal-card {
  border-color: rgba(26, 106, 255, 0.13);
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.045), transparent 58%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(13, 22, 38, 0.06);
}

.finance-stat-card {
  border-radius: 16px;
}

.finance-chart-grid .finance-trend-card,
.finance-chart-grid .finance-donut-card {
  min-height: 288px;
  border-radius: 16px;
}

.finance-stat-card p,
.finance-stat-card small,
.finance-donut-legend span,
.bill-timeline-item small {
  color: var(--muted);
}

.finance-stat-icon,
.bill-metric-card > span {
  background: color-mix(in srgb, var(--stat-color, var(--blue)) 12%, #ffffff);
}

.finance-add-transaction {
  border-color: rgba(26, 106, 255, 0.24);
  box-shadow: 0 12px 26px rgba(26, 106, 255, 0.18);
}

.finance-settings-modal {
  width: min(920px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
  overflow: hidden;
}

.finance-settings-carousel {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.finance-settings-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}

.finance-settings-tab {
  display: grid;
  gap: 2px;
  min-width: 146px;
  padding: 10px 12px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.finance-settings-tab strong {
  font-size: 13px;
  font-weight: 950;
}

.finance-settings-tab small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.finance-settings-tab.is-active {
  border-color: rgba(26, 106, 255, 0.34);
  background: rgba(26, 106, 255, 0.10);
  color: var(--blue);
}

.finance-settings-window {
  overflow: hidden;
  min-height: 0;
}

.finance-settings-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 100%));
  transform: translateX(calc(var(--finance-settings-slide, 0) * -100%));
  transition: transform 0.24s ease;
}

.finance-settings-slide {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  max-height: min(560px, calc(100vh - 250px));
  overflow-y: auto;
  padding: 2px 2px 8px;
}

.finance-settings-slide[aria-hidden="true"] {
  pointer-events: none;
}

.finance-settings-list,
.finance-category-editor,
.finance-goal-editor {
  display: grid;
  gap: 10px;
}

.finance-setting-row,
.finance-category-row,
.finance-goal-editor-row,
.finance-budget-setting-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(26, 106, 255, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.70);
}

.finance-setting-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(26, 106, 255, 0.10);
  color: var(--blue);
}

.finance-visible-check {
  min-width: 128px;
  align-self: center;
}

.finance-category-row {
  grid-template-columns: minmax(190px, 1fr) 84px minmax(130px, 0.6fr) auto;
}

.finance-budget-setting-row {
  grid-template-columns: 10px minmax(0, 1fr);
}

.finance-budget-setting-row > span {
  width: 10px;
  height: 40px;
  border-radius: 999px;
  background: var(--budget-color, var(--blue));
}

.finance-settings-grid.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.75fr);
  gap: 14px;
  align-items: stretch;
}

.finance-settings-summary {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.14);
  border-radius: 16px;
  background: rgba(26, 106, 255, 0.07);
}

.finance-settings-summary small,
.finance-settings-summary span {
  color: var(--muted);
  font-weight: 800;
}

.finance-settings-summary strong {
  font-family: var(--display-font);
  font-size: 24px;
  font-weight: 950;
}

.finance-goal-editor-row {
  grid-template-columns: minmax(180px, 1fr) 120px 120px 82px auto;
}

.finance-goal-note {
  grid-column: 1 / -2;
}

.color-label input[type="color"] {
  min-width: 64px;
  padding: 4px;
}

.finance-donut-legend {
  align-self: center;
}

.finance-donut-legend span strong {
  color: var(--text);
  font-size: inherit;
}

.exchange-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.exchange-control-card,
.exchange-platform-card {
  display: grid;
  gap: 16px;
}

.exchange-amount-field input {
  min-height: 46px;
  border-radius: 14px;
  font-family: var(--display-font);
  font-size: 24px;
  font-weight: 900;
}

.exchange-currency-grid {
  display: grid;
  gap: 14px;
}

.exchange-chip-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.exchange-chip-heading strong {
  font-size: 13px;
}

.exchange-chip-heading small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.exchange-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.exchange-currency-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.exchange-currency-chip:hover {
  border-color: rgba(26, 106, 255, 0.34);
  transform: translateY(-1px);
}

.exchange-currency-chip.is-active {
  border-color: var(--blue);
  background: rgba(26, 106, 255, 0.12);
  color: var(--blue-dark);
}

.exchange-currency-chip strong {
  font-size: 12px;
  font-weight: 950;
}

.exchange-currency-chip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.exchange-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.exchange-disclaimer {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(26, 106, 255, 0.12);
  border-radius: 14px;
  background: rgba(26, 106, 255, 0.05);
}

.exchange-platform-list {
  display: grid;
  gap: 10px;
}

.exchange-platform-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.exchange-platform-row.is-reference {
  border-color: rgba(20, 184, 166, 0.28);
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.10), transparent 62%),
    rgba(255, 255, 255, 0.78);
}

.exchange-platform-row strong,
.exchange-platform-row small,
.exchange-platform-row em {
  display: block;
}

.exchange-platform-row strong {
  margin-top: 5px;
  font-size: 15px;
}

.exchange-platform-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.exchange-platform-row em {
  font-style: normal;
  font-family: var(--display-font);
  font-size: 18px;
  font-weight: 950;
  text-align: right;
  color: var(--text);
}

.exchange-platform-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(26, 106, 255, 0.10);
  color: var(--blue);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.bill-row-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 4px;
}

.bill-row-actions .icon-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
}

.success-action {
  color: var(--green);
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.10);
}

.bill-table-head,
.bill-row {
  grid-template-columns: minmax(0, 1fr) 110px 86px 104px 110px;
}

:root[data-theme="night"] .finance-panel.finance-hub {
  border-color: rgba(113, 157, 255, 0.28);
  background:
    radial-gradient(circle at 78% 8%, rgba(32, 196, 232, 0.16), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(26, 106, 255, 0.22), transparent 34%),
    #111d33;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
}

:root[data-theme="night"] .finance-period-stepper,
:root[data-theme="night"] .finance-period-mode-toggle,
:root[data-theme="night"] .finance-tab-strip,
:root[data-theme="night"] .finance-settings-trigger,
:root[data-theme="night"] .finance-settings-tab,
:root[data-theme="night"] .finance-setting-row,
:root[data-theme="night"] .finance-category-row,
:root[data-theme="night"] .finance-goal-editor-row,
:root[data-theme="night"] .finance-budget-setting-row,
:root[data-theme="night"] .finance-settings-summary {
  border-color: rgba(113, 157, 255, 0.26);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

:root[data-theme="night"] .finance-period-display {
  color: #f6f9ff;
  border-color: rgba(113, 157, 255, 0.18);
}

:root[data-theme="night"] .finance-period-stepper .icon-button,
:root[data-theme="night"] .finance-period-display span,
:root[data-theme="night"] .finance-period-mode-toggle button,
:root[data-theme="night"] .finance-tab,
:root[data-theme="night"] .finance-settings-tab small {
  color: #c3d0ee;
}

:root[data-theme="night"] .finance-settings-tab.is-active {
  border-color: rgba(113, 157, 255, 0.46);
  background: rgba(26, 106, 255, 0.22);
  color: #f6f9ff;
}

:root[data-theme="night"] .finance-stat-card,
:root[data-theme="night"] .finance-side-card,
:root[data-theme="night"] .bill-table-card,
:root[data-theme="night"] .finance-trend-card,
:root[data-theme="night"] .finance-donut-card,
:root[data-theme="night"] .finance-ledger-card,
:root[data-theme="night"] .finance-goal-card {
  border-color: rgba(113, 157, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.09), transparent 58%),
    rgba(18, 31, 58, 0.92);
  box-shadow: none;
}

:root[data-theme="night"] .finance-donut-center {
  background: #111d33;
}

:root[data-theme="night"] .finance-donut-track {
  stroke: rgba(226, 232, 240, 0.09);
}

:root[data-theme="night"] .finance-donut-center,
:root[data-theme="night"] .finance-donut-tooltip {
  border-color: rgba(113, 157, 255, 0.22);
  background: rgba(17, 29, 51, 0.98);
}

:root[data-theme="night"] .finance-donut-tooltip {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

:root[data-theme="night"] .finance-donut-tooltip strong,
:root[data-theme="night"] .finance-donut-legend span strong {
  color: #f6f9ff;
}

:root[data-theme="night"] .exchange-currency-chip,
:root[data-theme="night"] .exchange-platform-row {
  border-color: rgba(113, 157, 255, 0.20);
  background: rgba(255, 255, 255, 0.055);
}

:root[data-theme="night"] .exchange-currency-chip.is-active {
  border-color: rgba(113, 157, 255, 0.46);
  background: rgba(26, 106, 255, 0.22);
  color: #f6f9ff;
}

:root[data-theme="night"] .exchange-platform-row.is-reference {
  border-color: rgba(32, 196, 232, 0.30);
  background:
    linear-gradient(135deg, rgba(32, 196, 232, 0.10), transparent 62%),
    rgba(255, 255, 255, 0.055);
}

:root[data-theme="night"] .exchange-disclaimer {
  border-color: rgba(113, 157, 255, 0.20);
  background: rgba(255, 255, 255, 0.045);
}

@media (max-width: 1024px) {
  .bill-row-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

@media (max-width: 768px) {
  .finance-titlebar {
    gap: 14px;
  }

  .finance-title-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .finance-settings-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .finance-settings-slide {
    max-height: calc(100vh - 270px);
  }

  .finance-setting-row,
  .finance-category-row,
  .finance-goal-editor-row,
  .finance-budget-setting-row,
  .finance-settings-grid.two {
    grid-template-columns: 1fr;
  }

  .finance-setting-icon,
  .finance-visible-check,
  .finance-goal-note {
    grid-column: auto;
  }

  .finance-settings-tab {
    min-width: 154px;
  }

  .finance-title-control,
  .finance-period-control,
  .finance-period-stepper,
  .finance-period-mode-toggle {
    width: 100%;
  }

  .finance-period-display {
    flex: 1;
  }

  .finance-period-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .finance-command-row {
    display: block;
  }

  .exchange-layout {
    grid-template-columns: 1fr;
  }

  .exchange-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .exchange-currency-chip {
    flex: 0 0 auto;
  }

  .exchange-platform-row {
    grid-template-columns: 1fr;
  }

  .exchange-platform-row em {
    text-align: left;
  }

  .bill-row-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* === Global workspace-aligned visual refresh === */
:root {
  --display-font: "Sora", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-font: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-strong: #ffffff;
  --panel-alt: rgba(244, 247, 252, 0.82);
  --line: rgba(26, 106, 255, 0.16);
  --line-strong: rgba(26, 106, 255, 0.26);
  --muted: #55617e;
  --faint: #9aa7c4;
  --control-bg: rgba(255, 255, 255, 0.78);
  --control-hover: rgba(26, 106, 255, 0.08);
  --list-bg: rgba(246, 249, 255, 0.70);
  --shadow: 0 18px 46px rgba(26, 106, 255, 0.08);
  --surface-shadow: 0 16px 40px rgba(13, 22, 38, 0.06);
  --surface-shadow-hover: 0 20px 46px rgba(26, 106, 255, 0.11);
  --soft-surface-bg:
    radial-gradient(circle at 8% 0%, rgba(26, 106, 255, 0.08), transparent 32%),
    radial-gradient(circle at 100% 8%, rgba(23, 201, 195, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.90));
  --card-bg: rgba(255, 255, 255, 0.86);
  --btn-shadow-blue: 0 10px 22px rgba(26, 106, 255, 0.22);
  --btn-shadow-green: 0 10px 22px rgba(34, 197, 94, 0.18);
  --btn-shadow-amber: 0 10px 22px rgba(245, 195, 77, 0.18);
  --btn-shadow-rose: 0 10px 22px rgba(239, 68, 68, 0.16);
}

:root[data-theme="night"] {
  --bg: #0b1424;
  --bg-soft: #101c32;
  --panel: rgba(18, 31, 58, 0.86);
  --panel-strong: #12203a;
  --panel-alt: rgba(255, 255, 255, 0.055);
  --line: rgba(113, 157, 255, 0.24);
  --line-strong: rgba(113, 157, 255, 0.36);
  --text: #f6f9ff;
  --muted: #c2cce3;
  --faint: #8fa2ca;
  --control-bg: rgba(255, 255, 255, 0.06);
  --control-hover: rgba(26, 106, 255, 0.18);
  --list-bg: rgba(255, 255, 255, 0.045);
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
  --surface-shadow: 0 16px 40px rgba(0, 0, 0, 0.20);
  --surface-shadow-hover: 0 22px 52px rgba(0, 0, 0, 0.28);
  --soft-surface-bg:
    radial-gradient(circle at 12% 0%, rgba(26, 106, 255, 0.18), transparent 34%),
    radial-gradient(circle at 100% 8%, rgba(23, 201, 195, 0.12), transparent 34%),
    rgba(17, 29, 51, 0.96);
  --card-bg: rgba(18, 31, 58, 0.88);
}

body {
  font-family: var(--body-font);
  font-weight: 500;
  letter-spacing: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(26, 106, 255, 0.10), transparent 30rem),
    radial-gradient(circle at 92% 8%, rgba(23, 201, 195, 0.08), transparent 28rem),
    linear-gradient(145deg, #ffffff 0%, #f7faff 56%, #eef4ff 100%);
}

:root[data-theme="night"] body {
  background:
    radial-gradient(circle at 18% 0%, rgba(26, 106, 255, 0.16), transparent 30rem),
    radial-gradient(circle at 88% 6%, rgba(23, 201, 195, 0.10), transparent 28rem),
    linear-gradient(145deg, #081120 0%, #0d1a30 54%, #091426 100%);
}

body::before {
  opacity: 0.65;
}

.main-panel {
  padding: 26px 30px 38px;
}

.topbar {
  margin-bottom: 24px;
}

.topbar h1,
.hero-panel h2,
.section-heading h2,
.detail-panel h2,
.connect-panel h2,
.chat-panel h2,
.jobs-panel-head h2,
.finance-title-control h2,
.health-hero h3,
.academy-hero h3,
.settings-section h2,
.entry-modal h2,
.invoice-modal-head h2,
.filoo-drawer-header h2 {
  font-family: var(--display-font);
  font-weight: 800;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: clamp(28px, 3vw, 36px);
}

.section-heading h2,
.detail-panel h2,
.connect-panel h2,
.chat-panel h2,
.jobs-panel-head h2,
.finance-title-control h2 {
  font-size: clamp(22px, 2vw, 28px);
}

.microcopy,
.section-heading small,
.finance-tab,
.workspace-chip,
.work-filter-chip,
.work-tag,
.task-tab-btn,
.jobs-tab-row button,
.settings-label,
.health-card-heading span,
.finance-settings-tab strong,
.world-tab-btn,
.academy-card-meta {
  font-weight: 800;
  letter-spacing: 0;
}

.brand-lockup strong,
.companion-dock strong {
  font-family: var(--display-font);
  font-weight: 800;
  letter-spacing: 0;
}

.sidebar {
  border-right-color: rgba(77, 143, 255, 0.14);
  background:
    radial-gradient(circle at 28% 0%, rgba(26, 106, 255, 0.18), transparent 34%),
    #0b1424;
}

.nav-list {
  gap: 6px;
}

.nav-item {
  min-height: 44px;
  border-radius: 12px;
  color: rgba(205, 216, 240, 0.82);
  font-weight: 650;
}

.nav-item.is-active {
  padding-left: 10px;
  border-left-width: 3px;
  background: rgba(26, 106, 255, 0.22);
  color: #ffffff;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(77, 143, 255, 0.08);
}

.nav-item:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.075);
  transform: translateX(1px);
}

/* Sidebar scale refinement: calmer nav labels and icons. */
.sidebar .brand-lockup {
  gap: 10px;
  padding: 5px 6px;
}

.sidebar .brand-lockup strong {
  font-size: 15px;
  line-height: 1.08;
}

.sidebar .brand-lockup small {
  font-size: 11px;
}

.sidebar .brand-orb {
  width: 40px;
  height: 40px;
}

.sidebar .nav-list {
  gap: 4px;
}

.sidebar .nav-item {
  min-height: 40px;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 600;
}

.sidebar .nav-item svg {
  width: 16px;
  height: 16px;
}

.sidebar .nav-item.is-active {
  padding-left: 9px;
  font-weight: 750;
}

.sidebar .sidebar-signout-action {
  margin-top: 4px;
}

.mnl-clock-chip,
.auth-user-chip,
.avatar-access-button,
.quick-chat-panel,
.jobs-tab-row,
.workspace-view-toggle,
.finance-period-stepper,
.finance-period-mode-toggle,
.finance-tab-strip,
.task-modal-tabs,
.auth-mode-tabs {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.60);
}

:root[data-theme="night"] .mnl-clock-chip,
:root[data-theme="night"] .auth-user-chip,
:root[data-theme="night"] .avatar-access-button,
:root[data-theme="night"] .quick-chat-panel,
:root[data-theme="night"] .jobs-tab-row,
:root[data-theme="night"] .workspace-view-toggle,
:root[data-theme="night"] .finance-period-stepper,
:root[data-theme="night"] .finance-period-mode-toggle,
:root[data-theme="night"] .finance-tab-strip,
:root[data-theme="night"] .task-modal-tabs,
:root[data-theme="night"] .auth-mode-tabs {
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

.primary-action,
.secondary-action,
.ghost-action,
.icon-button,
.theme-toggle,
.compact,
.workspace-add-task,
.workspace-settings,
.workspace-chip,
.finance-tab,
.finance-settings-trigger,
.finance-add-transaction,
.health-choice-button,
.health-choice-label,
.job-card-actions .compact,
.avatar-stage-action {
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.primary-action {
  border: 1px solid rgba(26, 106, 255, 0.18);
  background: linear-gradient(180deg, #2474ff, var(--blue));
  box-shadow: var(--btn-shadow-blue);
}

.primary-action:hover,
.workspace-board-panel .board-focus-cycle-control:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(26, 106, 255, 0.24);
}

.primary-action:active,
.secondary-action:active,
.ghost-action:active,
.icon-button:active,
.theme-toggle:active {
  transform: translateY(0);
  box-shadow: none;
}

.secondary-action,
.icon-button,
.theme-toggle,
.workspace-settings,
.finance-settings-trigger {
  border: 1px solid var(--line);
  background: var(--control-bg);
  color: var(--text);
  box-shadow: none;
}

.secondary-action:hover,
.ghost-action:hover,
.icon-button:hover,
.theme-toggle:hover,
.workspace-add-task:hover,
.workspace-settings:hover,
.finance-settings-trigger:hover {
  border-color: var(--line-strong);
  background: var(--control-hover);
}

.ghost-action {
  color: var(--blue);
  background: rgba(26, 106, 255, 0.08);
}

input,
select,
textarea,
.settings-grid input,
.settings-grid select,
.settings-grid textarea,
.settings-section input,
.settings-section select,
.settings-section textarea,
.auth-form input,
.task-add-subtask-form input,
.exchange-amount-field input,
.budget-row-numbers input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

textarea {
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: rgba(26, 106, 255, 0.42);
  outline: 2px solid rgba(26, 106, 255, 0.16);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(26, 106, 255, 0.08);
}

:root[data-theme="night"] input,
:root[data-theme="night"] select,
:root[data-theme="night"] textarea,
:root[data-theme="night"] .settings-grid input,
:root[data-theme="night"] .settings-grid select,
:root[data-theme="night"] .settings-grid textarea,
:root[data-theme="night"] .settings-section input,
:root[data-theme="night"] .settings-section select,
:root[data-theme="night"] .settings-section textarea,
:root[data-theme="night"] .auth-form input,
:root[data-theme="night"] .task-add-subtask-form input,
:root[data-theme="night"] .exchange-amount-field input,
:root[data-theme="night"] .budget-row-numbers input {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  box-shadow: none;
}

.hero-panel,
.panel,
.metric-card,
.companion-dock,
.auth-card,
.finance-panel.finance-hub,
.finance-stat-card,
.finance-side-card,
.bill-table-card,
.finance-trend-card,
.finance-donut-card,
.finance-ledger-card,
.finance-goal-card,
.exchange-control-card,
.exchange-platform-card,
.habit-row,
.habits-panel,
.habit-detail-panel,
.habit-motivation-card,
.habit-insight-card,
.health-hero,
.health-metric-card,
.health-section-card,
.mobility-session-card,
.journal-calendar-panel,
.entry-card,
.journal-reflection-card,
.job-card,
.connected-accounts-panel,
.jobs-settings-section,
.interview-panel,
.academy-panel,
.academy-hero,
.academy-progress-card,
.academy-module-card,
.academy-detail-panel,
.world-tab-panel,
.world-clock-card,
.world-clock-card-lg,
.world-news-feed-panel,
.world-news-item,
.world-news-empty,
.settings-section,
.ai-settings-card,
.avatar-preview-card,
.wardrobe-card,
.entry-modal,
.task-add-modal,
.task-detail-modal,
.invoice-modal,
.filoo-drawer,
.oauth-modal,
.confirm-delete-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft-surface-bg);
  box-shadow: var(--surface-shadow);
}

.metric-card,
.finance-stat-card,
.bill-metric-card,
.health-metric-card,
.academy-module-card,
.job-card,
.entry-card,
.workspace-task-card,
.invoice-list-card,
.invoice-mini-card,
.world-news-item,
.world-clock-card,
.world-clock-card-lg,
.exchange-platform-row,
.bill-row,
.budget-row,
.finance-setting-row,
.finance-category-row,
.finance-goal-editor-row,
.finance-budget-setting-row,
.task-comment-row,
.task-subtask-row,
.task-time-log-list article,
.modal-summary-card,
.modal-detail-card,
.modal-field-list {
  border-color: rgba(26, 106, 255, 0.13);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: none;
}

.metric-card:hover,
.academy-module-card:hover,
.job-card:hover,
.entry-card:hover,
.workspace-task-card:hover,
.invoice-list-card:hover,
.world-news-item:hover,
.world-clock-card-lg:hover,
.exchange-platform-row:hover {
  border-color: var(--line-strong);
  box-shadow: var(--surface-shadow-hover);
  transform: translateY(-1px);
}

:root[data-theme="night"] .hero-panel,
:root[data-theme="night"] .panel,
:root[data-theme="night"] .metric-card,
:root[data-theme="night"] .companion-dock,
:root[data-theme="night"] .auth-card,
:root[data-theme="night"] .finance-panel.finance-hub,
:root[data-theme="night"] .finance-stat-card,
:root[data-theme="night"] .finance-side-card,
:root[data-theme="night"] .bill-table-card,
:root[data-theme="night"] .finance-trend-card,
:root[data-theme="night"] .finance-donut-card,
:root[data-theme="night"] .finance-ledger-card,
:root[data-theme="night"] .finance-goal-card,
:root[data-theme="night"] .exchange-control-card,
:root[data-theme="night"] .exchange-platform-card,
:root[data-theme="night"] .habit-row,
:root[data-theme="night"] .habits-panel,
:root[data-theme="night"] .habit-detail-panel,
:root[data-theme="night"] .habit-motivation-card,
:root[data-theme="night"] .habit-insight-card,
:root[data-theme="night"] .health-hero,
:root[data-theme="night"] .health-metric-card,
:root[data-theme="night"] .health-section-card,
:root[data-theme="night"] .mobility-session-card,
:root[data-theme="night"] .journal-calendar-panel,
:root[data-theme="night"] .entry-card,
:root[data-theme="night"] .journal-reflection-card,
:root[data-theme="night"] .job-card,
:root[data-theme="night"] .connected-accounts-panel,
:root[data-theme="night"] .jobs-settings-section,
:root[data-theme="night"] .interview-panel,
:root[data-theme="night"] .academy-panel,
:root[data-theme="night"] .academy-hero,
:root[data-theme="night"] .academy-progress-card,
:root[data-theme="night"] .academy-module-card,
:root[data-theme="night"] .academy-detail-panel,
:root[data-theme="night"] .world-tab-panel,
:root[data-theme="night"] .world-clock-card,
:root[data-theme="night"] .world-clock-card-lg,
:root[data-theme="night"] .world-news-feed-panel,
:root[data-theme="night"] .world-news-item,
:root[data-theme="night"] .world-news-empty,
:root[data-theme="night"] .settings-section,
:root[data-theme="night"] .ai-settings-card,
:root[data-theme="night"] .avatar-preview-card,
:root[data-theme="night"] .wardrobe-card,
:root[data-theme="night"] .entry-modal,
:root[data-theme="night"] .task-add-modal,
:root[data-theme="night"] .task-detail-modal,
:root[data-theme="night"] .invoice-modal,
:root[data-theme="night"] .filoo-drawer,
:root[data-theme="night"] .oauth-modal,
:root[data-theme="night"] .confirm-delete-modal {
  border-color: var(--line);
  background: var(--soft-surface-bg);
  color: var(--text);
  box-shadow: var(--surface-shadow);
}

:root[data-theme="night"] .metric-card,
:root[data-theme="night"] .finance-stat-card,
:root[data-theme="night"] .bill-metric-card,
:root[data-theme="night"] .health-metric-card,
:root[data-theme="night"] .academy-module-card,
:root[data-theme="night"] .job-card,
:root[data-theme="night"] .entry-card,
:root[data-theme="night"] .workspace-task-card,
:root[data-theme="night"] .invoice-list-card,
:root[data-theme="night"] .invoice-mini-card,
:root[data-theme="night"] .world-news-item,
:root[data-theme="night"] .world-clock-card,
:root[data-theme="night"] .world-clock-card-lg,
:root[data-theme="night"] .exchange-platform-row,
:root[data-theme="night"] .bill-row,
:root[data-theme="night"] .budget-row,
:root[data-theme="night"] .finance-setting-row,
:root[data-theme="night"] .finance-category-row,
:root[data-theme="night"] .finance-goal-editor-row,
:root[data-theme="night"] .finance-budget-setting-row,
:root[data-theme="night"] .task-comment-row,
:root[data-theme="night"] .task-subtask-row,
:root[data-theme="night"] .task-time-log-list article,
:root[data-theme="night"] .modal-summary-card,
:root[data-theme="night"] .modal-detail-card,
:root[data-theme="night"] .modal-field-list {
  border-color: rgba(113, 157, 255, 0.20);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  box-shadow: none;
}

.hero-panel {
  border-color: rgba(77, 143, 255, 0.24);
  box-shadow: 0 22px 70px rgba(26, 106, 255, 0.12);
}

.hero-copy h2 {
  font-weight: 800;
  letter-spacing: 0;
}

.motivation-widget,
.filoo-live-update,
.avatar-stage,
.hero-avatar-stage,
.home-filoo-stage,
.focus-readout,
.daily-quest-strip,
.work-filter-panel,
.productivity-board-shell,
.kanban-column,
.workspace-column,
.workspace-list-view,
.workspace-calendar-view,
.workspace-archive-view,
.finance-settings-modal,
.finance-settings-slide,
.finance-settings-summary,
.bill-timeline,
.compact-bill-timeline,
.budget-insight-card,
.health-quick-stats article,
.health-plan-list article,
.selected-entry-summary,
.pipeline-column,
.pipeline-card,
.directory-panel,
.directory-card,
.world-news-embed,
.academy-lesson-row {
  border-color: rgba(26, 106, 255, 0.14);
  border-radius: var(--radius);
  box-shadow: none;
}

.task-card h3,
.job-card h3,
.plugin-card h3,
.metric-card strong,
.finance-stat-card strong,
.bill-metric-card strong,
.health-metric-card em,
.health-metric-card strong,
.academy-module-card strong,
.world-clock-card strong,
.world-clock-card-lg strong,
.entry-card h3,
.modal-summary-card strong,
.task-time-summary strong {
  font-weight: 850;
  letter-spacing: 0;
}

.metric-card p,
.metric-card span,
.finance-stat-card p,
.finance-stat-card small,
.bill-metric-card p,
.bill-metric-card small,
.job-card p,
.plugin-card p,
.health-metric-card small,
.academy-module-card small,
.world-clock-card small,
.world-clock-card-lg small,
.entry-card span,
.entry-card p,
.modal-detail-card p,
.modal-field-list span,
.task-time-summary span,
.task-time-log-list article span {
  color: var(--muted);
  font-weight: 650;
}

.job-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(26, 106, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.job-pagination span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.job-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

:root[data-theme="night"] .job-pagination {
  border-color: rgba(113, 157, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

:root[data-theme="night"] .job-filter-search-wrap,
:root[data-theme="night"] .job-email-action-card,
:root[data-theme="night"] .job-draft-file-list article {
  border-color: rgba(113, 157, 255, 0.22);
  background: rgba(255, 255, 255, 0.055);
}

:root[data-theme="night"] .job-card-meta span {
  border-color: rgba(113, 157, 255, 0.22);
  background: rgba(113, 157, 255, 0.1);
  color: var(--text);
}

.task-card,
.kanban .task-card {
  border-color: rgba(26, 106, 255, 0.13);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--surface-shadow);
}

:root[data-theme="night"] .task-card,
:root[data-theme="night"] .kanban .task-card {
  border-color: rgba(113, 157, 255, 0.20);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  box-shadow: none;
}

.modal-overlay,
.invoice-overlay,
.task-drawer-overlay,
.filoo-drawer-overlay,
.oauth-overlay,
.confirm-delete-overlay {
  background: rgba(13, 22, 38, 0.38);
  backdrop-filter: blur(10px);
}

.entry-modal,
.task-add-modal,
.task-detail-modal,
.invoice-modal,
.filoo-drawer,
.oauth-modal,
.confirm-delete-modal {
  border-radius: var(--radius-lg);
}

.bottom-nav {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 -18px 44px rgba(26, 106, 255, 0.08);
  backdrop-filter: blur(18px);
}

:root[data-theme="night"] .bottom-nav {
  background: rgba(11, 20, 36, 0.92);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.22);
}

.bottom-nav button,
.bottom-nav .nav-item {
  font-weight: 750;
}

.bottom-nav .is-active {
  background: rgba(26, 106, 255, 0.12);
  color: var(--blue);
}

@media (max-width: 1100px) {
  .main-panel {
    padding: 24px 24px 36px;
  }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 20% 0%, rgba(26, 106, 255, 0.10), transparent 20rem),
      linear-gradient(180deg, #ffffff, #f4f8ff 64%, #eef4ff);
  }

  :root[data-theme="night"] body {
    background:
      radial-gradient(circle at 20% 0%, rgba(26, 106, 255, 0.15), transparent 20rem),
      linear-gradient(180deg, #081120, #0d1a30 62%, #091426);
  }

  .main-panel {
    padding: 18px 14px 12px;
  }

  .topbar {
    margin-bottom: 16px;
  }

  .topbar h1 {
    font-size: clamp(24px, 7vw, 30px);
  }

  .topbar-actions {
    gap: 7px;
  }

  .primary-action,
  .secondary-action,
  .ghost-action,
  .icon-button,
  .theme-toggle,
  .compact {
    min-height: 40px;
    border-radius: 12px;
  }

  .hero-panel,
  .panel,
  .metric-card,
  .companion-dock,
  .auth-card,
  .finance-panel.finance-hub,
  .finance-stat-card,
  .finance-side-card,
  .bill-table-card,
  .finance-trend-card,
  .finance-donut-card,
  .finance-ledger-card,
  .finance-goal-card,
  .exchange-control-card,
  .exchange-platform-card,
  .habits-panel,
  .habit-detail-panel,
  .health-hero,
  .health-section-card,
  .journal-calendar-panel,
  .job-card,
  .connected-accounts-panel,
  .jobs-settings-section,
  .interview-panel,
  .academy-panel,
  .academy-hero,
  .academy-detail-panel,
  .world-tab-panel,
  .settings-section,
  .ai-settings-card,
  .workspace-board-panel {
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(26, 106, 255, 0.06);
  }

  .panel,
  .metric-card,
  .finance-stat-card,
  .bill-metric-card,
  .health-section-card,
  .job-card,
  .settings-section {
    padding: 14px;
  }

  .metric-card,
  .finance-stat-card,
  .bill-metric-card,
  .health-metric-card,
  .academy-module-card,
  .job-card,
  .entry-card,
  .task-card,
  .kanban .task-card,
  .workspace-task-card {
    border-radius: 16px;
  }

  .modal-overlay,
  .invoice-overlay,
  .task-drawer-overlay,
  .filoo-drawer-overlay,
  .oauth-overlay,
  .confirm-delete-overlay {
    padding: 10px;
  }

  .entry-modal,
  .task-add-modal,
  .task-detail-modal,
  .task-drawer-overlay .task-detail-modal,
  .invoice-modal,
  .filoo-drawer,
  .oauth-modal,
  .confirm-delete-modal {
    border-radius: 20px 20px 0 0;
  }
}

/* Keep the dashboard hero branded while using the lighter surface system elsewhere. */
.app-shell.view-dashboard .hero-panel,
.hero-panel {
  color: #f4f7fc;
  border-color: rgba(112, 166, 255, 0.24);
  background-color: #172a63;
  background-image:
    radial-gradient(circle at 86% 18%, rgba(23, 201, 195, 0.18), transparent 24rem),
    radial-gradient(circle at 12% 0%, rgba(77, 143, 255, 0.20), transparent 28rem),
    linear-gradient(135deg, #101f49 0%, #1a3275 58%, #10264e 100%);
  box-shadow: 0 22px 70px rgba(16, 31, 73, 0.16);
}

.app-shell.view-dashboard .hero-copy h2,
.hero-copy h2 {
  color: #ffffff;
}

.app-shell.view-dashboard .hero-copy p,
.hero-copy p {
  color: rgba(244, 247, 252, 0.78);
}

.app-shell.view-dashboard .hero-panel .microcopy,
.hero-panel .microcopy {
  color: #64a0ff;
}

:root[data-theme="night"] .app-shell.view-dashboard .hero-panel,
:root[data-theme="night"] .hero-panel {
  border-color: rgba(113, 157, 255, 0.28);
  background-color: #111f4e;
  background-image:
    radial-gradient(circle at 86% 18%, rgba(23, 201, 195, 0.16), transparent 24rem),
    radial-gradient(circle at 12% 0%, rgba(77, 143, 255, 0.18), transparent 28rem),
    linear-gradient(135deg, #081637 0%, #132967 58%, #0a1c3e 100%);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.metric-card.tone-blue,
.metric-card.tone-green,
.metric-card.tone-amber,
.metric-card.tone-rose {
  box-shadow: var(--surface-shadow);
}

.metric-card.tone-blue {
  border-color: rgba(26, 106, 255, 0.16);
  border-top-color: rgba(26, 106, 255, 0.72);
}

.metric-card.tone-green {
  border-color: rgba(34, 197, 94, 0.16);
  border-top-color: rgba(34, 197, 94, 0.72);
}

.metric-card.tone-amber {
  border-color: rgba(245, 195, 77, 0.18);
  border-top-color: rgba(245, 195, 77, 0.78);
}

.metric-card.tone-rose {
  border-color: rgba(239, 68, 68, 0.16);
  border-top-color: rgba(239, 68, 68, 0.72);
}

/* Clean bill reminder timeline: keep status accents subtle, never flood rows. */
.bill-reminder-card {
  overflow: hidden;
}

.bill-reminder-card .mini-section-heading {
  align-items: baseline;
}

.bill-reminder-card .bill-mini-metrics {
  gap: 10px;
  margin: 14px 0 12px;
}

.bill-reminder-card .bill-mini-metrics span {
  min-height: 68px;
  padding: 13px 14px;
  border-color: rgba(26, 106, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(26, 106, 255, 0.035), transparent 62%),
    rgba(255, 255, 255, 0.66);
  box-shadow: none;
}

.bill-reminder-card .bill-mini-metrics small {
  color: var(--muted);
  letter-spacing: 0;
}

.bill-reminder-card .bill-mini-metrics strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.05;
}

.bill-reminder-card .compact-bill-timeline {
  display: grid;
  gap: 8px;
  margin: 12px 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.bill-reminder-card .bill-timeline-item,
.bill-reminder-card .bill-timeline-item.status-overdue,
.bill-reminder-card .bill-timeline-item.status-due,
.bill-reminder-card .bill-timeline-item.status-due-today,
.bill-reminder-card .bill-timeline-item.status-upcoming,
.bill-reminder-card .bill-timeline-item.status-paid {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid rgba(26, 106, 255, 0.11);
  border-left: 3px solid color-mix(in srgb, var(--bill-color, var(--blue)) 72%, white);
  border-radius: 14px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bill-color, var(--blue)) 7%, transparent), transparent 44%),
    rgba(255, 255, 255, 0.74);
  color: var(--text);
  box-shadow: none;
}

.bill-reminder-card .bill-timeline-item i {
  width: 9px;
  height: 9px;
  margin-top: 0;
  border-radius: 999px;
  background: var(--bill-color, var(--blue));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bill-color, var(--blue)) 12%, transparent);
}

.bill-reminder-card .bill-timeline-item strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

.bill-reminder-card .bill-timeline-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.bill-reminder-card .bill-timeline-item.status-overdue {
  border-color: rgba(239, 68, 68, 0.12);
  border-left-color: rgba(239, 68, 68, 0.70);
}

.bill-reminder-card .bill-timeline-item.status-overdue i {
  background: var(--rose);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}

.bill-reminder-card .bill-timeline-item.status-paid {
  border-color: rgba(34, 197, 94, 0.14);
  border-left-color: rgba(34, 197, 94, 0.70);
}

.bill-reminder-card .bill-timeline-item.status-paid i {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10);
}

.bill-reminder-card .secondary-action.full-width {
  margin-top: 2px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="night"] .bill-reminder-card .bill-mini-metrics span,
:root[data-theme="night"] .bill-reminder-card .bill-timeline-item,
:root[data-theme="night"] .bill-reminder-card .bill-timeline-item.status-overdue,
:root[data-theme="night"] .bill-reminder-card .bill-timeline-item.status-due,
:root[data-theme="night"] .bill-reminder-card .bill-timeline-item.status-due-today,
:root[data-theme="night"] .bill-reminder-card .bill-timeline-item.status-upcoming,
:root[data-theme="night"] .bill-reminder-card .bill-timeline-item.status-paid {
  border-color: rgba(113, 157, 255, 0.18);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bill-color, var(--blue)) 10%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.045);
  color: var(--text);
}

:root[data-theme="night"] .bill-reminder-card .bill-timeline-item.status-overdue {
  border-left-color: rgba(248, 113, 113, 0.74);
}

:root[data-theme="night"] .bill-reminder-card .bill-timeline-item.status-paid {
  border-left-color: rgba(74, 222, 128, 0.74);
}

:root[data-theme="night"] .bill-reminder-card .secondary-action.full-width {
  background: rgba(255, 255, 255, 0.055);
}

/* Bills timeline cleanup: status should accent rows, not flood the card. */
.finance-side-card.bill-timeline-card {
  overflow: hidden;
}

.finance-side-card.bill-timeline-card .bill-timeline {
  display: grid;
  gap: 8px;
  padding: 2px 0 0;
}

.finance-side-card.bill-timeline-card .bill-timeline-item,
.finance-side-card.bill-timeline-card .bill-timeline-item.status-overdue,
.finance-side-card.bill-timeline-card .bill-timeline-item.status-due,
.finance-side-card.bill-timeline-card .bill-timeline-item.status-due-today,
.finance-side-card.bill-timeline-card .bill-timeline-item.status-upcoming,
.finance-side-card.bill-timeline-card .bill-timeline-item.status-paid {
  align-items: center;
  min-height: 56px;
  padding: 11px 12px;
  border: 1px solid rgba(26, 106, 255, 0.11);
  border-left: 3px solid color-mix(in srgb, var(--bill-color, var(--blue)) 70%, white);
  border-radius: 14px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bill-color, var(--blue)) 6%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.72);
  color: var(--text);
  box-shadow: none;
}

.finance-side-card.bill-timeline-card .bill-timeline-item i {
  width: 9px;
  height: 9px;
  margin-top: 0;
  background: var(--bill-color, var(--blue));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bill-color, var(--blue)) 11%, transparent);
}

.finance-side-card.bill-timeline-card .bill-timeline-item strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

.finance-side-card.bill-timeline-card .bill-timeline-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.finance-side-card.bill-timeline-card .bill-timeline-item.status-overdue {
  border-color: rgba(239, 68, 68, 0.12);
  border-left-color: rgba(239, 68, 68, 0.68);
}

.finance-side-card.bill-timeline-card .bill-timeline-item.status-overdue i {
  background: var(--rose);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10);
}

.finance-side-card.bill-timeline-card .bill-timeline-item.status-paid {
  border-color: rgba(34, 197, 94, 0.14);
  border-left-color: rgba(34, 197, 94, 0.68);
}

.finance-side-card.bill-timeline-card .bill-timeline-item.status-paid i {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10);
}

:root[data-theme="night"] .finance-side-card.bill-timeline-card .bill-timeline-item,
:root[data-theme="night"] .finance-side-card.bill-timeline-card .bill-timeline-item.status-overdue,
:root[data-theme="night"] .finance-side-card.bill-timeline-card .bill-timeline-item.status-due,
:root[data-theme="night"] .finance-side-card.bill-timeline-card .bill-timeline-item.status-due-today,
:root[data-theme="night"] .finance-side-card.bill-timeline-card .bill-timeline-item.status-upcoming,
:root[data-theme="night"] .finance-side-card.bill-timeline-card .bill-timeline-item.status-paid {
  border-color: rgba(113, 157, 255, 0.18);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bill-color, var(--blue)) 9%, transparent), transparent 48%),
    rgba(255, 255, 255, 0.045);
  color: var(--text);
}

:root[data-theme="night"] .finance-side-card.bill-timeline-card .bill-timeline-item.status-overdue {
  border-left-color: rgba(248, 113, 113, 0.72);
}

:root[data-theme="night"] .finance-side-card.bill-timeline-card .bill-timeline-item.status-paid {
  border-left-color: rgba(74, 222, 128, 0.72);
}

/* Morning priority prompt: modal instead of a large Home page card. */
.morning-priority-overlay {
  z-index: 1180;
}

.entry-modal.morning-priority-modal {
  width: min(500px, calc(100vw - 32px));
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 78% 18%, rgba(23, 201, 195, 0.12), transparent 15rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
  box-shadow: 0 24px 70px rgba(13, 22, 38, 0.22);
}

.morning-priority-modal .modal-head {
  align-items: flex-start;
}

.morning-priority-modal h2 {
  margin-top: 2px;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: 0;
}

.morning-priority-modal-body {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.morning-priority-avatar {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  overflow: hidden;
  border: 1px solid rgba(26, 106, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 54%, rgba(23, 201, 195, 0.18), transparent 4.5rem),
    linear-gradient(180deg, rgba(26, 106, 255, 0.08), rgba(13, 22, 38, 0.04));
}

.morning-priority-avatar img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  object-position: center bottom;
}

.morning-priority-copy {
  display: grid;
  gap: 12px;
}

.morning-priority-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.morning-priority-copy input {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-weight: 750;
}

.morning-priority-actions {
  justify-content: flex-end;
  margin-top: 0;
}

:root[data-theme="night"] .entry-modal.morning-priority-modal {
  border-color: rgba(113, 157, 255, 0.22);
  background:
    radial-gradient(circle at 78% 18%, rgba(23, 201, 195, 0.16), transparent 15rem),
    linear-gradient(180deg, rgba(14, 28, 52, 0.98), rgba(8, 17, 32, 0.98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.45);
}

:root[data-theme="night"] .morning-priority-avatar {
  border-color: rgba(113, 157, 255, 0.20);
  background:
    radial-gradient(circle at 50% 54%, rgba(23, 201, 195, 0.18), transparent 4.5rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
}

@media (max-width: 620px) {
  .entry-modal.morning-priority-modal {
    align-self: end;
    width: min(100%, calc(100vw - 20px));
    padding: 18px;
    border-radius: 22px;
  }

  .morning-priority-modal-body {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .morning-priority-avatar {
    width: 104px;
    height: 104px;
    margin: 0 auto;
  }

  .morning-priority-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Mobile Workspace polish: top settings, no duplicate chat CTA, centered Ask Filoo dock. */
@media (max-width: 768px) {
  .app-shell.view-work .topbar-actions .primary-action {
    display: none !important;
  }

  .app-shell.view-work .workspace-board-panel {
    position: relative;
    padding-top: 14px;
  }

  .app-shell.view-work .workspace-header {
    padding-right: 54px;
  }

  .app-shell.view-work .workspace-title-row {
    min-height: 44px;
  }

  .app-shell.view-work .workspace-settings {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 24px rgba(26, 106, 255, 0.08);
  }

  .app-shell.view-work .workspace-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .app-shell.view-work .companion-dock {
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 48px;
    justify-content: center;
    gap: 0;
    padding: 0 !important;
    border-radius: 999px;
  }

  .app-shell.view-work .companion-dock img {
    width: 30px;
    height: 30px;
    margin: 0;
  }
}

:root[data-theme="night"] .app-shell.view-work .workspace-settings {
  background: rgba(255, 255, 255, 0.065);
  box-shadow: none;
}

/* Workspace search: one clean focus ring and no full-page refresh while typing. */
.workspace-search:focus-within {
  border-color: rgba(26, 106, 255, 0.38);
  box-shadow: 0 0 0 4px rgba(26, 106, 255, 0.08);
}

.workspace-search input,
.workspace-search input:focus,
.workspace-search input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.workspace-task-card.is-search-hidden {
  display: none !important;
}

/* Finance settings modal repair: one active section, no squeezed side-by-side columns. */
.finance-settings-modal {
  width: min(920px, calc(100vw - 28px)) !important;
  max-height: min(820px, calc(100vh - 28px)) !important;
  overflow: hidden !important;
  padding: 22px !important;
}

.finance-settings-carousel {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 16px !important;
}

.finance-settings-tabs {
  display: flex !important;
  gap: 10px !important;
  max-width: 100% !important;
  padding: 2px 2px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

.finance-settings-tab {
  flex: 1 0 150px !important;
  min-width: 150px !important;
  max-width: 190px !important;
  min-height: 54px !important;
}

.finance-settings-window {
  min-height: 0 !important;
  max-height: min(560px, calc(100vh - 250px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 4px 4px 0 !important;
}

.finance-settings-track {
  display: block !important;
  width: 100% !important;
  transform: none !important;
  transition: none !important;
}

.finance-settings-slide {
  width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.finance-settings-slide[aria-hidden="true"] {
  display: none !important;
}

.finance-setting-row {
  grid-template-columns: 40px minmax(0, 1fr) minmax(142px, auto) !important;
  align-items: center !important;
}

.finance-category-row {
  grid-template-columns: minmax(220px, 1fr) 86px minmax(136px, 0.65fr) auto !important;
}

.finance-goal-editor-row {
  grid-template-columns: minmax(180px, 1.2fr) 112px 112px 78px auto !important;
}

.finance-budget-setting-row {
  grid-template-columns: 12px minmax(0, 1fr) !important;
  align-items: center !important;
}

.finance-settings-grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr) !important;
}

.finance-settings-modal > .button-row {
  padding-top: 14px !important;
  border-top: 1px solid rgba(26, 106, 255, 0.12);
}

@media (max-width: 860px) {
  .finance-settings-modal {
    width: calc(100vw - 20px) !important;
    padding: 18px !important;
  }

  .finance-settings-window {
    max-height: calc(100vh - 250px) !important;
  }

  .finance-setting-row,
  .finance-category-row,
  .finance-goal-editor-row,
  .finance-budget-setting-row,
  .finance-settings-grid.two {
    grid-template-columns: 1fr !important;
  }

  .finance-setting-icon,
  .finance-visible-check,
  .finance-goal-note {
    grid-column: auto !important;
  }

  .finance-settings-tab {
    flex-basis: 160px !important;
  }
}

/* Interview setup polish: keep the bordered card from colliding with form fields. */
.jobs-view .interview-panel,
.interview-panel {
  width: min(680px, 100%);
  max-width: 680px;
  padding: 28px;
  border: 1px solid rgba(26, 106, 255, 0.20);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 12%, rgba(23, 201, 195, 0.10), transparent 16rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.92));
  box-shadow: 0 18px 42px rgba(26, 106, 255, 0.08);
}

.interview-hero {
  padding: 4px 10px 22px;
}

.interview-hero .muted {
  max-width: 540px;
  margin: 0 auto;
}

.interview-setup-form {
  gap: 14px;
}

.interview-setup-form .settings-label {
  gap: 7px;
}

.interview-setup-form input,
.interview-setup-form select,
.interview-setup-form textarea {
  width: 100%;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.interview-job-picker small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.interview-phase-plan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.interview-phase-plan span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 14px;
  background: rgba(26, 106, 255, 0.06);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.interview-phase-plan strong {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
}

.interview-tips-before {
  border-radius: 16px;
  background: rgba(244, 247, 252, 0.78);
}

.interview-setup-form > .primary-action {
  width: 100%;
  min-height: 46px;
  margin-top: 0;
  border-radius: 14px;
}

.interview-browser-mode {
  display: grid;
  gap: 12px;
  width: 100%;
}

.interview-mode-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 14px;
  background: rgba(26, 106, 255, 0.07);
  color: #405173;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.interview-question-card {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), transparent 52%),
    rgba(255, 255, 255, 0.82);
}

.interview-question-card span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.interview-question-card p {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.interview-answer-field textarea {
  min-height: 104px;
  resize: vertical;
}

.interview-answer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.interview-answer-actions .primary-action,
.interview-answer-actions .secondary-action {
  flex: 1 1 170px;
  justify-content: center;
}

.interview-answer-actions .is-listening {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.10);
  color: #b42318;
}

.interview-widget-shell {
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 4px 0 14px;
  padding: 14px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 80% 8%, rgba(23, 201, 195, 0.12), transparent 18rem),
    rgba(255, 255, 255, 0.76);
}

.practice-convai-wrapper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(26, 106, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.interview-widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
  text-align: left;
}

.interview-widget-head strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.interview-widget-head small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.practice-convai-wrapper elevenlabs-convai,
.interview-widget-shell elevenlabs-convai {
  display: block;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: inherit;
}

.interview-widget-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.interview-agent-live-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 4px 0 14px;
  padding: 18px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 82% 0%, rgba(23, 201, 195, 0.16), transparent 18rem),
    rgba(255, 255, 255, 0.78);
}

.interview-agent-live-card strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 15px;
}

.interview-agent-live-card p {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.interview-agent-live-card small {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.interview-agent-orb {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  border-radius: 50%;
  background: rgba(26, 106, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(26, 106, 255, 0.18);
}

.interview-agent-orb span {
  display: block;
  width: 5px;
  height: 22px;
  border-radius: 99px;
  background: var(--blue);
  animation: voice-live-bar 0.9s ease-in-out infinite;
}

.interview-agent-orb span:nth-child(2) {
  height: 30px;
  animation-delay: 0.12s;
}

.interview-agent-orb span:nth-child(3) {
  height: 16px;
  animation-delay: 0.24s;
}

@keyframes voice-live-bar {
  0%, 100% { transform: scaleY(0.55); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}

.feedback-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.10);
  color: #8a4b00;
  font-size: 13px;
  font-weight: 800;
}

.feedback-rubric-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feedback-rubric-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(26, 106, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.feedback-rubric-item > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.feedback-rubric-item .mini-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(26, 106, 255, 0.12);
}

.feedback-rubric-item .mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.feedback-rubric-item strong,
.feedback-rubric-item span {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.feedback-rubric-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

:root[data-theme="night"] .interview-panel {
  border-color: rgba(113, 157, 255, 0.22);
  background:
    radial-gradient(circle at 80% 12%, rgba(23, 201, 195, 0.14), transparent 16rem),
    linear-gradient(180deg, rgba(14, 28, 52, 0.96), rgba(8, 17, 32, 0.94));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
}

:root[data-theme="night"] .interview-setup-form input,
:root[data-theme="night"] .interview-setup-form select,
:root[data-theme="night"] .interview-setup-form textarea,
:root[data-theme="night"] .interview-tips-before {
  background: rgba(255, 255, 255, 0.055);
}

:root[data-theme="night"] .interview-phase-plan span {
  border-color: rgba(147, 197, 253, 0.20);
  background: rgba(96, 165, 250, 0.09);
}

:root[data-theme="night"] .interview-mode-note {
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(147, 197, 253, 0.22);
  color: #c7d8ff;
}

:root[data-theme="night"] .interview-question-card {
  border-color: rgba(147, 197, 253, 0.22);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.15), transparent 52%),
    rgba(255, 255, 255, 0.06);
}

:root[data-theme="night"] .interview-question-card p {
  color: #f6f9ff;
}

:root[data-theme="night"] .interview-widget-shell {
  border-color: rgba(147, 197, 253, 0.22);
  background:
    radial-gradient(circle at 80% 8%, rgba(23, 201, 195, 0.14), transparent 18rem),
    rgba(255, 255, 255, 0.055);
}

:root[data-theme="night"] .interview-agent-live-card,
:root[data-theme="night"] .feedback-rubric-item {
  border-color: rgba(147, 197, 253, 0.22);
  background:
    radial-gradient(circle at 82% 0%, rgba(23, 201, 195, 0.12), transparent 18rem),
    rgba(255, 255, 255, 0.06);
}

:root[data-theme="night"] .feedback-alert {
  color: #ffe4b5;
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.10);
}

@media (max-width: 768px) {
  .jobs-view .interview-panel,
  .interview-panel {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
  }

  .interview-hero {
    padding: 2px 2px 18px;
  }

  .interview-phase-plan {
    grid-template-columns: 1fr;
  }

  .interview-answer-actions {
    flex-direction: column;
  }

  .interview-answer-actions .primary-action,
  .interview-answer-actions .secondary-action {
    flex: 0 0 auto;
    width: 100%;
  }

  .interview-widget-shell {
    padding: 10px;
    border-radius: 18px;
  }

  .interview-widget-shell elevenlabs-convai {
    min-height: 520px;
    border-radius: 16px;
  }

  .interview-widget-actions .secondary-action {
    width: 100%;
    justify-content: center;
  }

  .interview-agent-live-card {
    align-items: flex-start;
    padding: 14px;
  }

  .feedback-rubric-grid {
    grid-template-columns: 1fr;
  }
}

/* Home hero readability and Filoo footer collision fix. */
.app-shell.view-dashboard .motivation-widget {
  color: var(--text) !important;
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), transparent 42%),
    linear-gradient(315deg, rgba(23, 201, 195, 0.11), transparent 36%),
    rgba(255, 255, 255, 0.84) !important;
}

.app-shell.view-dashboard .motivation-widget-head strong,
.app-shell.view-dashboard .motivation-widget blockquote p {
  color: #111827 !important;
}

.app-shell.view-dashboard .motivation-prompt small {
  color: #3a4565 !important;
}

.app-shell.view-dashboard .motivation-widget blockquote footer {
  color: var(--blue) !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage {
  --filoo-stage-column-width: min(330px, calc(100% - 26px));
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer .avatar-stage-actions {
  display: flex !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer .avatar-stage-action {
  min-width: 0 !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .home-filoo-footer .mood-pill {
  position: static !important;
  inset: auto !important;
  max-width: 92px !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:root[data-theme="night"] .app-shell.view-dashboard .motivation-widget {
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.10), transparent 42%),
    linear-gradient(315deg, rgba(23, 201, 195, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.88) !important;
}

@media (max-width: 768px) {
  .app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage {
    --filoo-stage-column-width: min(295px, calc(100% - 24px));
  }
}

/* Chrome transparent-GIF stabilization: Filoo's action GIFs use alpha plus
   GIF disposal frames. Chrome can briefly clear promoted opacity/isolation
   layers to black while those GIFs decode or loop, so the home avatar keeps
   the image in the normal paint path instead of an opacity-composited layer. */
.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .filoo-loop-video-wrap,
.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .filoo-hero-video-wrap {
  isolation: auto !important;
  contain: none !important;
  will-change: auto !important;
  transition: none !important;
  background: transparent !important;
}

.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .filoo-loop-gif,
.app-shell.view-dashboard .home-filoo-stage.hero-avatar-stage .filoo-hero-video-wrap img {
  opacity: 1 !important;
  transition: none !important;
  will-change: auto !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

/* QA enhancement pack: global search, list sorting, and compact mobile controls. */
.global-search-trigger {
  gap: 8px;
}

.global-search-trigger kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 999px;
  background: rgba(26, 106, 255, 0.07);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.global-search-overlay {
  align-items: flex-start !important;
  padding: min(9vh, 76px) 18px 18px !important;
}

.global-search-modal {
  display: grid !important;
  gap: 12px !important;
  width: min(720px, calc(100vw - 32px)) !important;
  max-height: min(76vh, 720px) !important;
  padding: 12px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

.global-search-input-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 7px 8px 7px 14px;
  border: 1px solid rgba(26, 106, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.global-search-input-row > svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.global-search-input-row input,
.global-search-input-row input:focus,
.global-search-input-row input:focus-visible {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.global-search-results {
  display: grid;
  gap: 12px;
  max-height: calc(min(76vh, 720px) - 80px);
  overflow: auto;
  padding: 2px 4px 4px;
}

.global-search-section {
  display: grid;
  gap: 6px;
}

.global-search-section > p {
  margin: 0 0 2px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.global-search-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon meta";
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(26, 106, 255, 0.12);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.88);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.global-search-result:hover,
.global-search-result:focus-visible {
  border-color: rgba(26, 106, 255, 0.35);
  background: rgba(26, 106, 255, 0.08);
  outline: 0;
}

.global-search-result > span {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(26, 106, 255, 0.10);
  color: var(--blue);
}

.global-search-result > span svg {
  width: 17px;
  height: 17px;
}

.global-search-result strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result small {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-empty {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 20px;
  border: 1px dashed rgba(26, 106, 255, 0.22);
  border-radius: 18px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.workspace-list-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

.workspace-list-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px 6px 14px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.workspace-list-toolbar select {
  min-height: 30px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-weight: 950;
}

.finance-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

:root[data-theme="night"] .global-search-trigger kbd,
:root[data-theme="night"] .global-search-input-row,
:root[data-theme="night"] .workspace-list-toolbar label {
  border-color: rgba(147, 197, 253, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

:root[data-theme="night"] .global-search-result {
  border-color: rgba(147, 197, 253, 0.14);
  background: rgba(255, 255, 255, 0.055);
}

:root[data-theme="night"] .global-search-result:hover,
:root[data-theme="night"] .global-search-result:focus-visible {
  border-color: rgba(147, 197, 253, 0.32);
  background: rgba(96, 165, 250, 0.12);
}

:root[data-theme="night"] .global-search-empty {
  border-color: rgba(147, 197, 253, 0.22);
}

@media (max-width: 860px) {
  .global-search-trigger {
    display: none !important;
  }

  .global-search-overlay {
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .global-search-modal {
    width: 100% !important;
    max-height: calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 20px !important;
  }

  .global-search-results {
    max-height: calc(100vh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .finance-row-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .finance-row-actions .primary-action,
  .finance-row-actions .secondary-action {
    width: 100%;
    justify-content: center;
  }

  .workspace-list-toolbar {
    justify-content: stretch;
  }

  .workspace-list-toolbar label {
    width: 100%;
    justify-content: space-between;
  }

  .workspace-list-toolbar select {
    max-width: 56%;
    text-align: right;
  }
}

@media (max-width: 520px) {
  .global-search-input-row {
    min-height: 50px;
    border-radius: 16px;
  }

  .global-search-input-row input {
    font-size: 14px;
  }

  .global-search-result {
    min-height: 56px;
    border-radius: 14px;
  }

  .finance-settings-modal {
    padding: 16px !important;
  }

  .finance-settings-carousel {
    position: relative;
  }

  .finance-settings-carousel::after {
    content: "Swipe settings";
    justify-self: center;
    margin-top: -6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(26, 106, 255, 0.08);
    color: var(--blue);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .finance-settings-tabs {
    scroll-snap-type: x mandatory;
  }

  .finance-settings-tab {
    scroll-snap-align: start;
  }
}

/* Jobs pipeline card actions and direct job links. */
.pipeline-card {
  cursor: pointer;
}

.pipeline-card:hover,
.pipeline-card:focus-visible {
  border-color: rgba(26, 106, 255, 0.32);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.045), transparent 58%),
    rgba(255, 255, 255, 0.96);
  outline: 0;
}

.pipeline-card-note {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pipeline-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pipeline-tag-row span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(26, 106, 255, 0.16);
  border-radius: 999px;
  background: rgba(26, 106, 255, 0.07);
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
}

.pipeline-link {
  text-decoration: none;
}

.pipeline-card .button-row {
  align-items: center;
}

.pipeline-card .danger-action {
  border-color: rgba(239, 68, 68, 0.18);
  color: #dc2626;
}

:root[data-theme="night"] .pipeline-card:hover,
:root[data-theme="night"] .pipeline-card:focus-visible {
  border-color: rgba(147, 197, 253, 0.32);
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.10), transparent 58%),
    rgba(255, 255, 255, 0.07);
}

:root[data-theme="night"] .pipeline-tag-row span {
  border-color: rgba(147, 197, 253, 0.18);
  background: rgba(96, 165, 250, 0.10);
}

@media (max-width: 768px) {
  .pipeline-card {
    min-height: auto;
  }

  .pipeline-card .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pipeline-card .button-row > * {
    width: 100%;
    justify-content: center;
  }
}

.habit-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
}

.habit-manage-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.habit-manage-actions .icon-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

@media (max-width: 768px) {
  .habit-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .habit-manage-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 200ms ease, opacity 200ms ease;
  }

  .habit-row.is-mobile-expanded {
    max-height: 184px;
  }

  .habit-row.is-mobile-expanded .habit-manage-actions {
    max-height: 44px;
    opacity: 1;
    pointer-events: auto;
  }

  .habit-row-chevron {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Final night-mode contrast guard: placed last so page-specific rules cannot wash these out. */
:root[data-theme="night"] .chat-history-item.is-active,
:root[data-theme="night"] .chat-history-item:hover {
  background: rgba(59, 130, 246, 0.22);
}

:root[data-theme="night"] .chat-history-item strong,
:root[data-theme="night"] .chat-history-select {
  color: #f8fbff;
}

:root[data-theme="night"] .chat-history-item em {
  color: #c7d7f4;
}

:root[data-theme="night"] .voice-panel,
:root[data-theme="night"] .voice-visualizer,
:root[data-theme="night"] .job-filter-search-wrap,
:root[data-theme="night"] .job-email-action-card,
:root[data-theme="night"] .connect-socials-banner {
  border-color: rgba(125, 170, 255, 0.30);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.08), rgba(23, 201, 195, 0.035)),
    rgba(17, 35, 61, 0.94);
  color: #f8fbff;
}

:root[data-theme="night"] .voice-panel p,
:root[data-theme="night"] .voice-panel small,
:root[data-theme="night"] .voice-transcript,
:root[data-theme="night"] .voice-visualizer small {
  color: #c9d9f4;
}

:root[data-theme="night"] .jobs-tab-row button {
  color: #c9d9f4;
}

:root[data-theme="night"] .jobs-tab-row button.is-active {
  background: #f1f6ff;
  color: #0d1b30;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
}

:root[data-theme="night"] .pipeline-stage-pill,
:root[data-theme="night"] .pipeline-column,
:root[data-theme="night"] .pipeline-card,
:root[data-theme="night"] .academy-module-card,
:root[data-theme="night"] .academy-resource-card,
:root[data-theme="night"] .academy-lesson-row,
:root[data-theme="night"] .academy-progress-card,
:root[data-theme="night"] .academy-detail-meter {
  border-color: rgba(125, 170, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.075), rgba(23, 201, 195, 0.035)),
    rgba(16, 31, 55, 0.94);
  color: #f8fbff;
}

:root[data-theme="night"] .pipeline-card:hover,
:root[data-theme="night"] .pipeline-card:focus-visible,
:root[data-theme="night"] .academy-module-card:hover,
:root[data-theme="night"] .academy-resource-card:hover,
:root[data-theme="night"] .academy-module-card.is-active {
  border-color: rgba(96, 165, 250, 0.58);
  background:
    linear-gradient(135deg, rgba(26, 106, 255, 0.16), rgba(23, 201, 195, 0.045)),
    rgba(18, 36, 64, 0.98);
}

:root[data-theme="night"] .pipeline-column-head strong,
:root[data-theme="night"] .pipeline-column h3,
:root[data-theme="night"] .pipeline-card h3,
:root[data-theme="night"] .academy-module-card strong,
:root[data-theme="night"] .academy-resource-card strong,
:root[data-theme="night"] .academy-lesson-row strong,
:root[data-theme="night"] .academy-progress-card strong,
:root[data-theme="night"] .academy-detail-meter strong {
  color: #ffffff;
}

:root[data-theme="night"] .pipeline-card p,
:root[data-theme="night"] .pipeline-card small,
:root[data-theme="night"] .pipeline-card-note,
:root[data-theme="night"] .academy-module-card small,
:root[data-theme="night"] .academy-card-meta,
:root[data-theme="night"] .academy-resource-card small,
:root[data-theme="night"] .academy-progress-card span,
:root[data-theme="night"] .academy-detail-meter span {
  color: #c9d9f4;
}

:root[data-theme="night"] .pipeline-column [class*="empty"] {
  color: #c9d9f4;
}

:root[data-theme="night"] select,
:root[data-theme="night"] option,
:root[data-theme="night"] optgroup {
  background-color: #14243d;
  color: #f8fbff;
}

:root[data-theme="night"] .quote-wand-button {
  border-color: rgba(125, 170, 255, 0.38);
  background: rgba(12, 24, 43, 0.76);
  color: #e0ecff;
  opacity: 1;
}