body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0a0a0a}[data-theme=light] body{background:#fafbfc;color:#1a1d26}.gradient-text{background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gradient-border{background:linear-gradient(135deg,#6366f1,#8b5cf6);padding:1px}.gradient-border-inner{background:#0a0a0a}.bar:hover{opacity:.8}.calendar-day:hover{transform:scale(1.05)}.navbar-tab{padding:.5rem .75rem;font-size:.875rem;color:#9ca3af;border-radius:.5rem;transition:all .2s}.navbar-tab:hover{color:#fff;background:#ffffff1a}.navbar-tab.active{color:#fff;background:#fff3}.menu-open .menu-line:nth-child(1){transform:rotate(45deg) translate(4px,4px)}.menu-open .menu-line:nth-child(2){opacity:0}.menu-open .menu-line:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}.sidebar-left{position:fixed;left:0;top:60px;width:176px;bottom:0;background:#020617;border-right:1px solid var(--border);padding:16px 12px;overflow-y:auto;z-index:40}html[data-theme=light] body .sidebar-left{background:#fffffff2}html[data-theme=dark] body .sidebar-left{background:#020617}.sidebar-item{display:block;padding:12px 8px;margin-bottom:8px;background:#ffffff08;border:1px solid transparent;border-radius:10px;text-decoration:none;transition:all .2s;color:var(--text-secondary)}.sidebar-item:hover{background:#6366f126;border-color:#6366f14d;color:var(--text-primary)}.sidebar-item.active{background:#6366f133;border-color:var(--primary);color:var(--text-primary)}.sidebar-icon{font-size:20px;margin-bottom:4px;display:block}.sidebar-title{font-size:12px;font-weight:600;color:inherit;display:block}.sidebar-desc{font-size:10px;color:var(--text-secondary);display:block;margin-top:2px}.sidebar-right{position:fixed;right:0;top:60px;width:200px;bottom:0;background:#020617;z-index:40}[data-theme=light] .sidebar-right{background:#fffffff2}.ad-placeholder{width:100%;height:100%;background:transparent;border-left:1px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary);font-size:11px;text-align:center;opacity:.6}.ad-placeholder .ad-icon{font-size:24px;margin-bottom:8px}.ad-placeholder .ad-size{font-size:9px;color:var(--text-secondary);opacity:.5;margin-top:8px}@media(max-width:640px){main{padding:56px 16px 24px}}@media(max-width:1024px){.sidebar-left,.sidebar-right{display:none}main{margin-left:0!important;margin-right:0!important}}@media(min-width:769px){main{margin-left:176px!important;margin-right:200px!important}main>.max-w-4xl{margin-left:0;margin-right:0;max-width:none!important}}@media(min-width:769px){body{display:flex!important;flex-direction:column!important;min-height:100vh!important;min-height:100dvh!important}footer,.footer{margin-top:auto}}.askintell-footer,footer{background:var(--bg-primary);padding:16px 24px;border-top:1px solid var(--border);text-align:center;color:var(--text-muted);font-size:12px}.footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:6px;list-style:none;padding:0}.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:12px}.footer-links a:hover{color:var(--text-primary)}.footer-copyright{color:#64748b;font-size:12px;margin:0}[data-theme=light] .bg-gray-800{background-color:#e8ecf1}[data-theme=light] .bg-gray-800\/50{background-color:#e8ecf1b3}[data-theme=light] .text-emerald-200{color:#047857}[data-theme=light] .bg-emerald-700{background-color:#059669}[data-theme=light] #calendar .bg-emerald-500\/70{background-color:#10b98166}[data-theme=light] #calendar .bg-emerald-500{background-color:#10b981}[data-theme=light] #calendar .bg-indigo-600\/50{background-color:#4f46e540}[data-theme=light] #calendar .text-gray-500{color:#6b7280}[data-theme=light] #calendar .text-gray-600{color:#4b5563}[data-theme=light] .bg-emerald-500\/80{background-color:#10b98180}[data-theme=light] #btn-week:hover,[data-theme=light] #btn-month:hover,[data-theme=light] #btn-year:hover{background-color:#dde1e7}[data-theme=light] #btn-week:not(.bg-emerald-700):not(.bg-emerald-600),[data-theme=light] #btn-month:not(.bg-emerald-700):not(.bg-emerald-600),[data-theme=light] #btn-year:not(.bg-emerald-700):not(.bg-emerald-600) [data-theme=light] #btn-year:not(.bg-emerald-700):not(.bg-emerald-600){background-color:#f1f3f7;border-color:#e2e6ef}[data-theme=light] #btn-week.bg-emerald-600,[data-theme=light] #btn-month.bg-emerald-600,[data-theme=light] #btn-month.bg-emerald-700,[data-theme=light] #btn-year.bg-emerald-600{background-color:#059669;color:#fff}[data-theme=light] #model-list .bg-gradient-to-r{background-image:linear-gradient(to right,#818cf8,#6366f1)}[data-theme=light] .text-gray-400{color:#64748b}[data-theme=dark] #dashboard-stats>div{background-color:#ffffff14}[data-theme=light] #dashboard-stats>div{background-color:#0000000f}[data-theme=dark] .bg-gray-900\/50{background-color:#111827cc}[data-theme=dark] .bg-gray-800{background-color:#374151}[data-theme=dark] #btn-week:not(.bg-emerald-600):not(.bg-emerald-700),[data-theme=dark] #btn-month:not(.bg-emerald-600):not(.bg-emerald-700),[data-theme=dark] #btn-year:not(.bg-emerald-600):not(.bg-emerald-700){background-color:#334155;border-color:#475569}[data-theme=dark] #btn-week:not(.bg-emerald-600):not(.bg-emerald-700):hover,[data-theme=dark] #btn-month:not(.bg-emerald-600):not(.bg-emerald-700):hover,[data-theme=dark] #btn-year:not(.bg-emerald-600):not(.bg-emerald-700):hover{background-color:#475569}[data-theme=dark] #btn-week.bg-emerald-600,[data-theme=dark] #btn-month.bg-emerald-600,[data-theme=dark] #btn-year.bg-emerald-600{background-color:#059669;color:#fff}[data-theme=dark] #model-list .bg-gradient-to-r{background-image:linear-gradient(to right,#818cf8,#6366f1)}[data-theme=dark] .bg-emerald-500\/80{background-color:#10b981b3}@media(max-width:480px){.dashboard-main-card .text-2xl{font-size:1.3rem!important}#dashboard-stats{gap:.5rem}#dashboard-stats>div{padding:.6rem}#dashboard-stats .text-lg{font-size:.85rem}#dashboard-stats .text-xs{font-size:.65rem}}@media(max-width:400px){#calendar{gap:1px}#calendar .h-9{height:1.75rem;font-size:.6rem}#calendar .text-xs,#calendar-header .text-xs{font-size:.6rem}}#savings-breakdown .from-emerald-500.to-teal-500{background-image:linear-gradient(to right,#10b981,#14b8a6)}#savings-breakdown .from-blue-500.to-indigo-500{background-image:linear-gradient(to right,#3b82f6,#6366f1)}#savings-breakdown .from-purple-500.to-pink-500{background-image:linear-gradient(to right,#a855f7,#ec4899)}#model-list .from-cyan-500.to-blue-500{background-image:linear-gradient(to right,#06b6d4,#3b82f6)}#model-list .from-orange-500.to-yellow-500{background-image:linear-gradient(to right,#f97316,#eab308)}#model-list .from-green-500.to-emerald-500{background-image:linear-gradient(to right,#22c55e,#10b981)}

/* fix0811cssloss: Restored CSS lost during extraction - from dashboard.html backup */

/* 5 missing selectors */
#dashboard-stats > div {padding: 0.6rem !important;}
[data-theme=dark] #dashboard-stats > div {background-color: rgba(255, 255, 255, 0.08) !important;}
[data-theme=light] #btn-year:not(.bg-emerald-700):not(.bg-emerald-600)
[data-theme=light] #btn-year:not(.bg-emerald-700):not(.bg-emerald-600) {background-color: #F1F3F7 !important;
  border-color: #E2E6EF !important;}
[data-theme=light] #dashboard-stats > div {background-color: rgba(0, 0, 0, 0.06) !important;}
main > .max-w-4xl {margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: none !important;}

/* 2 missing @media/@keyframes blocks */
@media (min-width: 769px) {
            main { margin-left: 176px !important; margin-right: 200px !important; }
            main > .max-w-4xl {
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: none !important;
        }
        }
@media (max-width: 480px) {
  
  .dashboard-main-card .text-2xl { font-size: 1.3rem !important; }
  
  #dashboard-stats { gap: 0.5rem !important; }
  #dashboard-stats > div { padding: 0.6rem !important; }
  #dashboard-stats .text-lg { font-size: 0.85rem !important; }
  #dashboard-stats .text-xs { font-size: 0.65rem !important; }
}

/* ===== design0819density: Dashboard Information Density + Visual Hierarchy ===== */

/* Body override — use design tokens instead of Tailwind dark classes */
body {
  background: var(--ai-bg) !important;
  color: var(--ai-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif !important;
}

/* Page header row */
.db-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.db-header-left { flex-shrink: 0; }
.db-page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ai-text);
  margin: 0;
  line-height: 1.2;
}
.db-page-sub {
  font-size: 12px;
  color: var(--ai-text-muted);
  margin: 2px 0 0;
}

/* Period selector — pill style with brand color */
.db-period-bar {
  display: flex;
  gap: 4px;
  background: var(--ai-accent-soft);
  padding: 3px;
  border-radius: 999px;
  flex-shrink: 0;
}
.db-period-btn {
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--ai-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}
.db-period-btn:hover {
  color: var(--ai-text);
}
.db-period-btn.active {
  background: var(--ai-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
html[data-theme="light"] .db-period-btn.active {
  background: #6366f1;
}
html[data-theme="dark"] .db-period-btn.active {
  background: #818cf8;
}

/* Hero Savings Card — gradient, prominent */
.db-hero-card {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.25);
}
.db-hero-card:before {
  content: "";
  position: absolute;
  top: -40%;
  right: -15%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
.db-hero-card:after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  pointer-events: none;
}
.db-hero-top {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}
.db-hero-label {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.db-hero-amount {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}
.db-hero-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.db-trend-up {
  color: #86efac;
  font-size: 13px;
  font-weight: 600;
}
.db-trend-down {
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
}
.db-trend-label {
  font-size: 11px;
  opacity: 0.7;
}

.db-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.db-hero-stat {
  text-align: center;
}
.db-hero-stat-val {
  font-size: 17px;
  font-weight: 700;
}
.db-hero-stat-label {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
}

/* Split row — breakdown + model side by side */
.db-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Standard card */
.db-card {
  background: var(--ai-card);
  border: 1px solid var(--ai-border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.db-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);
}
.db-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.db-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ai-text);
}
.db-card-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--ai-primary);
}
.db-card-sub {
  font-size: 12px;
  color: var(--ai-text-muted);
}

/* Savings breakdown */
.db-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.db-breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
.db-breakdown-info {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1;
}
.db-breakdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-breakdown-name {
  font-size: 13px;
  color: var(--ai-text-secondary);
}
.db-breakdown-bar-wrap {
  height: 6px;
  background: var(--ai-accent-soft);
  border-radius: 3px;
  overflow: hidden;
  grid-column: 1;
  margin-top: 4px;
}
.db-breakdown-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.db-breakdown-figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.db-breakdown-amt {
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-text);
}
.db-breakdown-pct {
  font-size: 11px;
  color: var(--ai-text-muted);
}

/* Model list */
.db-model-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.db-model-row {
  display: grid;
  grid-template-columns: 72px 1fr 36px;
  align-items: center;
  gap: 8px;
}
.db-model-name {
  font-size: 12px;
  color: var(--ai-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-model-bar-wrap {
  height: 8px;
  background: var(--ai-accent-soft);
  border-radius: 4px;
  overflow: hidden;
}
.db-model-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.db-model-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--ai-text);
  text-align: right;
}

/* Quick insights — 3 compact cards */
.db-insights-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.db-insight-card {
  background: var(--ai-card);
  border: 1px solid var(--ai-border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s;
}
.db-insight-card:hover {
  border-color: rgba(99, 102, 241, 0.25);
}
.db-insight-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.db-insight-body {
  min-width: 0;
}
.db-insight-label {
  font-size: 10px;
  color: var(--ai-text-muted);
  margin-bottom: 1px;
}
.db-insight-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Calendar heatmap */
.db-cal-legend {
  display: flex;
  gap: 8px;
}
.db-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--ai-text-muted);
}
.db-cal-cell {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.db-cal-0 {
  background: var(--ai-border);
}
.db-cal-1 {
  background: rgba(99, 102, 241, 0.3);
}
.db-cal-2 {
  background: rgba(99, 102, 241, 0.6);
}
.db-cal-3 {
  background: var(--ai-primary);
}
html[data-theme="dark"] .db-cal-1 {
  background: rgba(129, 140, 248, 0.3);
}
html[data-theme="dark"] .db-cal-2 {
  background: rgba(129, 140, 248, 0.6);
}
html[data-theme="dark"] .db-cal-3 {
  background: #818cf8;
}

.db-cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
}
.db-cal-header > div {
  text-align: center;
  font-size: 10px;
  color: var(--ai-text-muted);
  padding: 2px 0;
}
.db-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.db-cal-day {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: transform 0.15s;
  cursor: default;
  color: var(--ai-text-secondary);
}
.db-cal-day:hover {
  transform: scale(1.08);
}
.db-cal-empty {
  background: transparent;
  cursor: default;
}
.db-cal-today {
  box-shadow: 0 0 0 2px var(--ai-primary);
  font-weight: 700;
  color: var(--ai-text);
}

.db-cal-summary {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ai-border);
  font-size: 12px;
  color: var(--ai-text-secondary);
}
.db-cal-summary strong {
  color: var(--ai-primary);
  font-weight: 700;
}

/* === Mobile Responsive === */
@media (max-width: 768px) {
  .db-split-row {
    grid-template-columns: 1fr;
  }
  .db-insights-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .db-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .db-period-bar {
    width: 100%;
    justify-content: center;
  }
  .db-period-btn {
    flex: 1;
    text-align: center;
  }
  .db-hero-card {
    padding: 14px 16px;
    border-radius: 12px;
  }
  .db-hero-amount {
    font-size: 28px;
  }
  .db-hero-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .db-hero-stat-val {
    font-size: 14px;
  }
  .db-hero-stat-label {
    font-size: 9px;
  }
  .db-card {
    padding: 12px 14px;
    border-radius: 12px;
  }
  .db-insight-card {
    padding: 8px 10px;
  }
  .db-insight-icon {
    font-size: 18px;
  }
  .db-insight-val {
    font-size: 12px;
  }
  .db-cal-day {
    font-size: 10px;
    border-radius: 4px;
  }
  .db-cal-summary {
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 360px) {
  .db-hero-amount {
    font-size: 24px;
  }
  .db-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .db-hero-stat-val {
    font-size: 16px;
  }
  .db-cal-day {
    font-size: 9px;
  }
  .db-cal-grid {
    gap: 2px;
  }
}