/* ============================================================
   TWEAK THEMES — applied via body[data-mood], [data-surface], [data-energy]
   Three orthogonal axes reshape the feel of the entire app.
   ============================================================ */

/* ============================================================
   MOOD · BLUEPRINT
   Cool cyan accents, deep navy bg, prominent grid pattern (blueprint feel)
   ============================================================ */
body[data-mood="blueprint"] { background: #060E1F; }
body[data-mood="blueprint"] .bg-blob-1 { background: #06B6D4; opacity: 0.4; }
body[data-mood="blueprint"] .bg-blob-2 { background: #6366F1; opacity: 0.35; }
body[data-mood="blueprint"] .bg-blob-3 { background: #8B5CF6; opacity: 0.3; }
body[data-mood="blueprint"] .bg-grid {
  background-image:
    linear-gradient(rgba(103, 232, 249, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 249, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 1;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
}
body[data-mood="blueprint"] .topbar {
  background: rgba(6, 14, 31, 0.7);
  border-bottom-color: rgba(6, 182, 212, 0.12);
}
body[data-mood="blueprint"] .brand-title {
  background: linear-gradient(135deg, #A5F3FC, #06B6D4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body[data-mood="blueprint"] .brand-mark { box-shadow: 0 8px 24px rgba(6, 182, 212, 0.2); }
body[data-mood="blueprint"] .page-eyebrow { color: #67E8F9; }
body[data-mood="blueprint"] .hero-amount {
  background: linear-gradient(135deg, #A5F3FC, #06B6D4 60%, #0891B2);
  -webkit-background-clip: text; background-clip: text;
}
body[data-mood="blueprint"] .hero-card::before {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.18), transparent 70%);
}
body[data-mood="blueprint"] .tab.active { background: rgba(6, 182, 212, 0.14); }
body[data-mood="blueprint"] .tab-glow {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body[data-mood="blueprint"] .avatar {
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: #ECFEFF;
  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.35);
}
body[data-mood="blueprint"] .step-num {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.3);
  color: #67E8F9;
}
body[data-mood="blueprint"] .submit-btn {
  background: linear-gradient(135deg, #A5F3FC, #06B6D4 60%, #0891B2);
  color: #042F36;
  box-shadow: 0 12px 32px -8px rgba(6, 182, 212, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
body[data-mood="blueprint"] .submit-btn:hover:not(:disabled) {
  box-shadow: 0 16px 40px -8px rgba(6, 182, 212, 0.6);
}
body[data-mood="blueprint"] .btn-primary {
  background: linear-gradient(135deg, #67E8F9, #06B6D4);
  color: #042F36;
  box-shadow: 0 8px 24px -6px rgba(6, 182, 212, 0.45);
}
body[data-mood="blueprint"] .btn-primary:hover {
  box-shadow: 0 12px 32px -6px rgba(6, 182, 212, 0.6);
}
body[data-mood="blueprint"] .qs-value,
body[data-mood="blueprint"] .ot-preview-amount,
body[data-mood="blueprint"] .ot-amount-value,
body[data-mood="blueprint"] .cs-amount { color: #67E8F9; }
body[data-mood="blueprint"] .ot-amount-box {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.2);
}
body[data-mood="blueprint"] .ot-form-card {
  border-color: rgba(6, 182, 212, 0.2);
  box-shadow: 0 20px 60px -20px rgba(6, 182, 212, 0.28);
}
body[data-mood="blueprint"] .craft-pick.active {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.5);
  color: #67E8F9;
}
body[data-mood="blueprint"] .text-input:focus,
body[data-mood="blueprint"] .date-input:focus,
body[data-mood="blueprint"] select.text-input:focus { border-color: #06B6D4; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); }
body[data-mood="blueprint"] .num-input:focus-within { border-color: #06B6D4; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); }
body[data-mood="blueprint"] .num-input button:hover { background: rgba(6, 182, 212, 0.15); color: #67E8F9; }
body[data-mood="blueprint"] .cs-bar-fill {
  background: linear-gradient(90deg, #A5F3FC, #06B6D4);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}
body[data-mood="blueprint"] .budget-state {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(6, 182, 212, 0.02));
  border-color: rgba(6, 182, 212, 0.15);
}
body[data-mood="blueprint"] .ot-stat.pending .ot-stat-icon { background: rgba(6, 182, 212, 0.15); color: #67E8F9; border-color: rgba(6, 182, 212, 0.3); }
body[data-mood="blueprint"] .ot-status-pill.status-pending { background: rgba(6, 182, 212, 0.15); color: #67E8F9; border-color: rgba(6, 182, 212, 0.3); }
body[data-mood="blueprint"] .toast { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(6, 182, 212, 0.18); }
body[data-mood="blueprint"] .filter-chips button.active,
body[data-mood="blueprint"] .seg-control button.active { background: var(--cat-color, #06B6D4); }

/* Blueprint signature: technical drawing crosshairs at corners of hero */
body[data-mood="blueprint"] .hero-card {
  border-color: rgba(6, 182, 212, 0.15);
}
body[data-mood="blueprint"] .hero-card::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(103, 232, 249, 0.15);
  border-radius: 18px;
  pointer-events: none;
}

/* ============================================================
   MOOD · PAPER
   Light cream "blueprint paper" with construction red accents
   ============================================================ */
body[data-mood="paper"] { background: #EFEAE0; color: #1F2937; }
body[data-mood="paper"] .bg-blob-1 { background: #DC2626; opacity: 0.18; }
body[data-mood="paper"] .bg-blob-2 { background: #F59E0B; opacity: 0.2; }
body[data-mood="paper"] .bg-blob-3 { background: #1F2937; opacity: 0.08; }
body[data-mood="paper"] .bg-grid {
  background-image:
    linear-gradient(rgba(31, 41, 55, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 41, 55, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 1;
}
body[data-mood="paper"] .bg-noise { opacity: 0.7; mix-blend-mode: multiply; }
body[data-mood="paper"] .topbar {
  background: rgba(239, 234, 224, 0.85);
  border-bottom-color: rgba(31, 41, 55, 0.1);
}
body[data-mood="paper"] .brand-mark { background: rgba(31, 41, 55, 0.04); border-color: rgba(31, 41, 55, 0.1); box-shadow: 0 4px 16px rgba(220, 38, 38, 0.1); }
body[data-mood="paper"] .brand-title {
  background: linear-gradient(135deg, #DC2626, #991B1B);
  -webkit-background-clip: text; background-clip: text;
}
body[data-mood="paper"] .brand-sub { color: #6B7280; }
body[data-mood="paper"] .tab { color: #6B7280; }
body[data-mood="paper"] .tab:hover { color: #1F2937; background: rgba(31, 41, 55, 0.05); }
body[data-mood="paper"] .tab.active { background: rgba(220, 38, 38, 0.1); color: #1F2937; }
body[data-mood="paper"] .tab-glow { border-color: rgba(220, 38, 38, 0.4); box-shadow: 0 0 24px rgba(220, 38, 38, 0.18); }
body[data-mood="paper"] .meta-pill {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(31, 41, 55, 0.1);
  color: #374151;
}
body[data-mood="paper"] .avatar {
  background: linear-gradient(135deg, #DC2626, #991B1B);
  color: white;
}
body[data-mood="paper"] .page-eyebrow { color: #DC2626; }
body[data-mood="paper"] .page-title { color: #0F172A; }
body[data-mood="paper"] .page-sub { color: #6B7280; }
body[data-mood="paper"] .head-stat-label { color: #6B7280; }
body[data-mood="paper"] .head-stat-suffix { color: #6B7280; }

body[data-mood="paper"] .hero-card,
body[data-mood="paper"] .activity-card,
body[data-mood="paper"] .cat-card,
body[data-mood="paper"] .form-panel,
body[data-mood="paper"] .preview-panel,
body[data-mood="paper"] .entries-table,
body[data-mood="paper"] .ot-stat,
body[data-mood="paper"] .ot-card,
body[data-mood="paper"] .ot-form-card,
body[data-mood="paper"] .craft-summary-card,
body[data-mood="paper"] .movement-card,
body[data-mood="paper"] .tl-card {
  background: rgba(255, 253, 248, 0.85);
  border-color: rgba(31, 41, 55, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 24px -8px rgba(31, 41, 55, 0.08);
}
body[data-mood="paper"] .hero-card {
  background: linear-gradient(135deg, rgba(255, 253, 248, 0.95), rgba(245, 241, 232, 0.85));
  box-shadow: 0 20px 60px rgba(31, 41, 55, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
body[data-mood="paper"] .hero-label,
body[data-mood="paper"] .meta-key,
body[data-mood="paper"] .donut-label,
body[data-mood="paper"] .preview-label,
body[data-mood="paper"] .panel-label,
body[data-mood="paper"] .filter-label,
body[data-mood="paper"] .qs-label,
body[data-mood="paper"] .ot-reason-label,
body[data-mood="paper"] .ot-amount-label,
body[data-mood="paper"] .cs-meta,
body[data-mood="paper"] .foot-label { color: #6B7280; }
body[data-mood="paper"] .meta-val,
body[data-mood="paper"] .donut-pct,
body[data-mood="paper"] .head-stat-value,
body[data-mood="paper"] .cat-name,
body[data-mood="paper"] .cat-row-value,
body[data-mood="paper"] .act-time-h,
body[data-mood="paper"] .act-craft,
body[data-mood="paper"] .tl-date,
body[data-mood="paper"] .cs-name,
body[data-mood="paper"] .cs-num,
body[data-mood="paper"] .ot-stat-num,
body[data-mood="paper"] .foot-num,
body[data-mood="paper"] .td-workers,
body[data-mood="paper"] .td-amount,
body[data-mood="paper"] .calc-val,
body[data-mood="paper"] .bs-row strong,
body[data-mood="paper"] .ot-form-head,
body[data-mood="paper"] .ot-card-head strong,
body[data-mood="paper"] .ot-detail-row strong,
body[data-mood="paper"] .mc-total,
body[data-mood="paper"] .section-head h2 { color: #0F172A; }
body[data-mood="paper"] .hero-amount {
  background: linear-gradient(135deg, #DC2626, #991B1B 60%, #7F1D1D);
  -webkit-background-clip: text; background-clip: text;
}
body[data-mood="paper"] .donut-pct span { color: #6B7280; }
body[data-mood="paper"] .progress-track { background: rgba(31, 41, 55, 0.06); border-color: rgba(31, 41, 55, 0.06); }
body[data-mood="paper"] .progress-meta { color: #6B7280; }
body[data-mood="paper"] .cat-divider,
body[data-mood="paper"] .meta-divider,
body[data-mood="paper"] .cat-footer { border-color: rgba(31, 41, 55, 0.08); }
body[data-mood="paper"] .cat-id { color: #9CA3AF; }
body[data-mood="paper"] .step-num { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.25); color: #DC2626; }
body[data-mood="paper"] .submit-btn {
  background: linear-gradient(135deg, #EF4444, #DC2626 60%, #991B1B);
  color: white;
  box-shadow: 0 12px 32px -8px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
body[data-mood="paper"] .btn-primary {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  color: white;
  box-shadow: 0 8px 24px -6px rgba(220, 38, 38, 0.4);
}
body[data-mood="paper"] .text-input,
body[data-mood="paper"] .date-input,
body[data-mood="paper"] select.text-input,
body[data-mood="paper"] .num-input {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(31, 41, 55, 0.12);
  color: #0F172A;
}
body[data-mood="paper"] .num-input button { background: rgba(31, 41, 55, 0.04); color: #374151; }
body[data-mood="paper"] .num-input button:hover { background: rgba(220, 38, 38, 0.1); color: #DC2626; }
body[data-mood="paper"] .num-input input { color: #0F172A; }
body[data-mood="paper"] .text-input:focus,
body[data-mood="paper"] .date-input:focus,
body[data-mood="paper"] select.text-input:focus,
body[data-mood="paper"] .num-input:focus-within {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
body[data-mood="paper"] .seg-control,
body[data-mood="paper"] .filter-chips {
  background: rgba(31, 41, 55, 0.04);
  border-color: rgba(31, 41, 55, 0.08);
}
body[data-mood="paper"] .seg-control button,
body[data-mood="paper"] .filter-chips button { color: #6B7280; }
body[data-mood="paper"] .seg-control button:hover,
body[data-mood="paper"] .filter-chips button:hover { color: #1F2937; }
body[data-mood="paper"] .craft-pick {
  background: rgba(31, 41, 55, 0.03);
  border-color: rgba(31, 41, 55, 0.1);
  color: #374151;
}
body[data-mood="paper"] .craft-pick:hover { background: rgba(31, 41, 55, 0.06); border-color: rgba(31, 41, 55, 0.18); }
body[data-mood="paper"] .craft-pick.active { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.4); color: #DC2626; }
body[data-mood="paper"] .cat-pick {
  background: rgba(31, 41, 55, 0.03);
  border-color: rgba(31, 41, 55, 0.1);
}
body[data-mood="paper"] .cat-pick-name { color: #0F172A; }
body[data-mood="paper"] .cat-pick-remain { color: #6B7280; }
body[data-mood="paper"] .qs-item, body[data-mood="paper"] .calc-display { background: rgba(31, 41, 55, 0.03); border-color: rgba(31, 41, 55, 0.08); }
body[data-mood="paper"] .qs-value, body[data-mood="paper"] .ot-preview-amount, body[data-mood="paper"] .ot-amount-value, body[data-mood="paper"] .cs-amount { color: #DC2626; }
body[data-mood="paper"] .budget-state { background: linear-gradient(135deg, rgba(220, 38, 38, 0.06), rgba(220, 38, 38, 0.02)); border-color: rgba(220, 38, 38, 0.18); }
body[data-mood="paper"] .bs-row { color: #4B5563; }
body[data-mood="paper"] .bs-row.after strong { color: #047857; }
body[data-mood="paper"] .bs-row.after strong.danger { color: #B91C1C; }
body[data-mood="paper"] .ot-amount-box { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.2); }
body[data-mood="paper"] .ot-form-card { border-color: rgba(220, 38, 38, 0.25); box-shadow: 0 20px 60px -20px rgba(220, 38, 38, 0.2); }
body[data-mood="paper"] .ot-stat.pending .ot-stat-icon { background: rgba(220, 38, 38, 0.12); color: #DC2626; border-color: rgba(220, 38, 38, 0.3); }
body[data-mood="paper"] .ot-status-pill.status-pending { background: rgba(220, 38, 38, 0.12); color: #DC2626; border-color: rgba(220, 38, 38, 0.3); }
body[data-mood="paper"] .ot-card-side { opacity: 0.85; }
body[data-mood="paper"] .ot-stat-label, body[data-mood="paper"] .cs-num span { color: #6B7280; }
body[data-mood="paper"] .table-head { background: rgba(31, 41, 55, 0.04); color: #6B7280; border-bottom-color: rgba(31, 41, 55, 0.08); }
body[data-mood="paper"] .table-row { color: #374151; border-bottom-color: rgba(31, 41, 55, 0.06); }
body[data-mood="paper"] .table-row:hover { background: rgba(31, 41, 55, 0.025); }
body[data-mood="paper"] .td-note { color: #6B7280; }
body[data-mood="paper"] .act-note, body[data-mood="paper"] .act-count { color: #6B7280; }
body[data-mood="paper"] .act-time-d, body[data-mood="paper"] .tl-time, body[data-mood="paper"] .tl-bot, body[data-mood="paper"] .tl-note, body[data-mood="paper"] .tl-workers { color: #6B7280; }
body[data-mood="paper"] .act-amount, body[data-mood="paper"] .tl-amount { color: #B91C1C; }
body[data-mood="paper"] .activity-row { border-bottom-color: rgba(31, 41, 55, 0.06); }
body[data-mood="paper"] .activity-row:hover { background: rgba(31, 41, 55, 0.025); }
body[data-mood="paper"] .panel-section { border-color: rgba(31, 41, 55, 0.08); }
body[data-mood="paper"] .ot-card:hover, body[data-mood="paper"] .tl-card:hover { border-color: rgba(31, 41, 55, 0.18); }
body[data-mood="paper"] .ot-actions { border-top-color: rgba(31, 41, 55, 0.08); }
body[data-mood="paper"] .ot-form-foot { border-top-color: rgba(31, 41, 55, 0.08); }
body[data-mood="paper"] .ot-reason-text { color: #374151; }
body[data-mood="paper"] .btn-ghost { background: rgba(255, 255, 255, 0.6); border-color: rgba(31, 41, 55, 0.12); color: #374151; }
body[data-mood="paper"] .donut svg circle:first-of-type { stroke: rgba(31, 41, 55, 0.06); }
body[data-mood="paper"] .mc-bar { background: rgba(31, 41, 55, 0.03); }
body[data-mood="paper"] .mc-date, body[data-mood="paper"] .movement-legend { color: #6B7280; }
body[data-mood="paper"] .cs-bar { background: rgba(31, 41, 55, 0.06); }
body[data-mood="paper"] .cs-bar-fill { background: linear-gradient(90deg, #EF4444, #DC2626); box-shadow: 0 0 12px rgba(220, 38, 38, 0.3); }
body[data-mood="paper"] .calc-key, body[data-mood="paper"] .progress-meta, body[data-mood="paper"] .form-field label, body[data-mood="paper"] .field-suffix { color: #6B7280; }
body[data-mood="paper"] .ot-detail-row span { color: #6B7280; }
body[data-mood="paper"] .tl-line { background: linear-gradient(180deg, rgba(31, 41, 55, 0.18), rgba(31, 41, 55, 0.05)); }
body[data-mood="paper"] .tl-marker { border-color: #EFEAE0; }
body[data-mood="paper"] .toast {
  background: rgba(255, 253, 248, 0.95);
  border-color: rgba(31, 41, 55, 0.1);
  color: #1F2937;
  box-shadow: 0 24px 60px rgba(31, 41, 55, 0.15), 0 0 40px rgba(220, 38, 38, 0.1);
}
body[data-mood="paper"] .toast-msg { color: #1F2937; }

/* Paper signature: subtle paper texture via radial dots */
body[data-mood="paper"]::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(31, 41, 55, 0.04) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none;
}

/* ============================================================
   SURFACE · SOLID
   Flat opaque cards, crisp edges, strong shadows
   ============================================================ */
body[data-surface="solid"] .topbar,
body[data-surface="solid"] .hero-card,
body[data-surface="solid"] .activity-card,
body[data-surface="solid"] .cat-card,
body[data-surface="solid"] .form-panel,
body[data-surface="solid"] .preview-panel,
body[data-surface="solid"] .entries-table,
body[data-surface="solid"] .ot-stat,
body[data-surface="solid"] .ot-card,
body[data-surface="solid"] .ot-form-card,
body[data-surface="solid"] .craft-summary-card,
body[data-surface="solid"] .movement-card,
body[data-surface="solid"] .tl-card,
body[data-surface="solid"] .toast {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-surface="solid"][data-mood="industrial"] .hero-card,
body[data-surface="solid"][data-mood="industrial"] .activity-card,
body[data-surface="solid"][data-mood="industrial"] .cat-card,
body[data-surface="solid"][data-mood="industrial"] .form-panel,
body[data-surface="solid"][data-mood="industrial"] .preview-panel,
body[data-surface="solid"][data-mood="industrial"] .entries-table,
body[data-surface="solid"][data-mood="industrial"] .ot-stat,
body[data-surface="solid"][data-mood="industrial"] .ot-card,
body[data-surface="solid"][data-mood="industrial"] .ot-form-card,
body[data-surface="solid"][data-mood="industrial"] .craft-summary-card,
body[data-surface="solid"][data-mood="industrial"] .movement-card,
body[data-surface="solid"][data-mood="industrial"] .tl-card { background: #11151F; }
body[data-surface="solid"][data-mood="blueprint"] .hero-card,
body[data-surface="solid"][data-mood="blueprint"] .activity-card,
body[data-surface="solid"][data-mood="blueprint"] .cat-card,
body[data-surface="solid"][data-mood="blueprint"] .form-panel,
body[data-surface="solid"][data-mood="blueprint"] .preview-panel,
body[data-surface="solid"][data-mood="blueprint"] .entries-table,
body[data-surface="solid"][data-mood="blueprint"] .ot-stat,
body[data-surface="solid"][data-mood="blueprint"] .ot-card,
body[data-surface="solid"][data-mood="blueprint"] .ot-form-card,
body[data-surface="solid"][data-mood="blueprint"] .craft-summary-card,
body[data-surface="solid"][data-mood="blueprint"] .movement-card,
body[data-surface="solid"][data-mood="blueprint"] .tl-card { background: #0D1830; }
body[data-surface="solid"][data-mood="paper"] .hero-card,
body[data-surface="solid"][data-mood="paper"] .activity-card,
body[data-surface="solid"][data-mood="paper"] .cat-card,
body[data-surface="solid"][data-mood="paper"] .form-panel,
body[data-surface="solid"][data-mood="paper"] .preview-panel,
body[data-surface="solid"][data-mood="paper"] .entries-table,
body[data-surface="solid"][data-mood="paper"] .ot-stat,
body[data-surface="solid"][data-mood="paper"] .ot-card,
body[data-surface="solid"][data-mood="paper"] .ot-form-card,
body[data-surface="solid"][data-mood="paper"] .craft-summary-card,
body[data-surface="solid"][data-mood="paper"] .movement-card,
body[data-surface="solid"][data-mood="paper"] .tl-card { background: #FFFDF8; }
body[data-surface="solid"] .topbar { background: rgba(11, 14, 22, 0.98); }
body[data-surface="solid"][data-mood="blueprint"] .topbar { background: rgba(6, 14, 31, 0.98); }
body[data-surface="solid"][data-mood="paper"] .topbar { background: rgba(239, 234, 224, 0.98); }
body[data-surface="solid"] .hero-card,
body[data-surface="solid"] .cat-card,
body[data-surface="solid"] .form-panel,
body[data-surface="solid"] .preview-panel,
body[data-surface="solid"] .ot-form-card {
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
}
body[data-surface="solid"][data-mood="paper"] .hero-card,
body[data-surface="solid"][data-mood="paper"] .cat-card,
body[data-surface="solid"][data-mood="paper"] .form-panel,
body[data-surface="solid"][data-mood="paper"] .preview-panel,
body[data-surface="solid"][data-mood="paper"] .ot-form-card {
  box-shadow: 0 16px 32px -12px rgba(31, 41, 55, 0.15), 0 2px 0 rgba(255, 255, 255, 0.6) inset;
}

/* ============================================================
   SURFACE · OUTLINED
   Transparent backgrounds, strong borders, minimal — feels like blueprints
   ============================================================ */
body[data-surface="outlined"] .topbar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-surface="outlined"] .hero-card,
body[data-surface="outlined"] .activity-card,
body[data-surface="outlined"] .cat-card,
body[data-surface="outlined"] .form-panel,
body[data-surface="outlined"] .preview-panel,
body[data-surface="outlined"] .entries-table,
body[data-surface="outlined"] .ot-stat,
body[data-surface="outlined"] .ot-card,
body[data-surface="outlined"] .ot-form-card,
body[data-surface="outlined"] .craft-summary-card,
body[data-surface="outlined"] .movement-card,
body[data-surface="outlined"] .tl-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-width: 1px;
  box-shadow: none;
}
body[data-surface="outlined"] .hero-card,
body[data-surface="outlined"] .cat-card,
body[data-surface="outlined"] .form-panel,
body[data-surface="outlined"] .preview-panel,
body[data-surface="outlined"] .ot-card,
body[data-surface="outlined"] .ot-form-card,
body[data-surface="outlined"] .craft-summary-card,
body[data-surface="outlined"] .movement-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
}
body[data-surface="outlined"][data-mood="paper"] .hero-card,
body[data-surface="outlined"][data-mood="paper"] .cat-card,
body[data-surface="outlined"][data-mood="paper"] .form-panel,
body[data-surface="outlined"][data-mood="paper"] .preview-panel,
body[data-surface="outlined"][data-mood="paper"] .ot-card,
body[data-surface="outlined"][data-mood="paper"] .ot-form-card,
body[data-surface="outlined"][data-mood="paper"] .craft-summary-card,
body[data-surface="outlined"][data-mood="paper"] .movement-card,
body[data-surface="outlined"][data-mood="paper"] .activity-card,
body[data-surface="outlined"][data-mood="paper"] .entries-table,
body[data-surface="outlined"][data-mood="paper"] .tl-card,
body[data-surface="outlined"][data-mood="paper"] .ot-stat {
  border-color: rgba(31, 41, 55, 0.18);
}
body[data-surface="outlined"][data-mood="blueprint"] .hero-card,
body[data-surface="outlined"][data-mood="blueprint"] .cat-card,
body[data-surface="outlined"][data-mood="blueprint"] .form-panel,
body[data-surface="outlined"][data-mood="blueprint"] .preview-panel,
body[data-surface="outlined"][data-mood="blueprint"] .ot-card,
body[data-surface="outlined"][data-mood="blueprint"] .ot-form-card,
body[data-surface="outlined"][data-mood="blueprint"] .craft-summary-card,
body[data-surface="outlined"][data-mood="blueprint"] .movement-card {
  border-color: rgba(6, 182, 212, 0.25);
}
body[data-surface="outlined"] .topbar { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
body[data-surface="outlined"][data-mood="paper"] .topbar { border-bottom-color: rgba(31, 41, 55, 0.15); }

/* ============================================================
   ENERGY · CALM
   Disable shimmer / blob float / pulse — quiet, calm interface
   ============================================================ */
body[data-energy="calm"] .bg-blob { animation: none !important; opacity: 0.2; }
body[data-energy="calm"] .progress-shine { display: none; }
body[data-energy="calm"] .meta-dot { animation: none !important; box-shadow: 0 0 4px currentColor; }
body[data-energy="calm"] .badge-danger .badge-dot { animation: none !important; }
body[data-energy="calm"] .status-dot.pulse { animation: none !important; box-shadow: 0 0 4px currentColor; }
body[data-energy="calm"] .cat-card:hover,
body[data-energy="calm"] .ot-card:hover,
body[data-energy="calm"] .tl-card:hover,
body[data-energy="calm"] .craft-summary-card:hover { transform: none; }
body[data-energy="calm"] .cat-icon,
body[data-energy="calm"] .act-cat,
body[data-energy="calm"] .preview-cat-icon { box-shadow: none !important; }
body[data-energy="calm"] .progress-fill { box-shadow: none !important; }
body[data-energy="calm"] .cs-bar-fill { box-shadow: none !important; }
body[data-energy="calm"] .mc-bar-seg { box-shadow: none !important; }
body[data-energy="calm"] .tl-marker { box-shadow: none !important; }
body[data-energy="calm"] .submit-btn,
body[data-energy="calm"] .btn-primary { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; }
body[data-energy="calm"] .submit-btn::before { display: none; }
body[data-energy="calm"] .toast { animation: fadeIn 0.2s ease both; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }

/* ============================================================
   ENERGY · HYPE
   Glowing text, animated borders, scan lines, exaggerated motion
   ============================================================ */
body[data-energy="hype"] .bg-blob { animation-duration: 10s; opacity: 0.5; }
body[data-energy="hype"] .progress-shine { animation-duration: 1.4s; width: 120px; }

body[data-energy="hype"] .hero-amount {
  filter: drop-shadow(0 0 24px rgba(245, 158, 11, 0.5));
}
body[data-energy="hype"][data-mood="blueprint"] .hero-amount { filter: drop-shadow(0 0 24px rgba(6, 182, 212, 0.55)); }
body[data-energy="hype"][data-mood="paper"] .hero-amount { filter: drop-shadow(0 0 16px rgba(220, 38, 38, 0.4)); }
body[data-energy="hype"] .donut-pct { text-shadow: 0 0 18px rgba(245, 158, 11, 0.4); }
body[data-energy="hype"][data-mood="blueprint"] .donut-pct { text-shadow: 0 0 18px rgba(6, 182, 212, 0.45); }
body[data-energy="hype"][data-mood="paper"] .donut-pct { text-shadow: 0 0 12px rgba(220, 38, 38, 0.3); }

/* Animated conic glow border on category cards */
body[data-energy="hype"] .cat-card {
  position: relative;
}
body[data-energy="hype"] .cat-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from var(--ang, 0deg), transparent 40%, var(--cat-color) 50%, transparent 60%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1.5px;
  pointer-events: none;
  animation: hypeRing 4s linear infinite;
  opacity: 0.7;
}
@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes hypeRing {
  to { --ang: 360deg; }
}

body[data-energy="hype"] .submit-btn,
body[data-energy="hype"] .btn-primary {
  animation: hypePulse 2.2s ease-in-out infinite;
}
@keyframes hypePulse {
  0%, 100% { box-shadow: 0 12px 32px -8px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 12px 48px -4px rgba(245, 158, 11, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 24px rgba(245, 158, 11, 0.4); }
}
body[data-energy="hype"][data-mood="blueprint"] .submit-btn,
body[data-energy="hype"][data-mood="blueprint"] .btn-primary {
  animation: hypePulseBlue 2.2s ease-in-out infinite;
}
@keyframes hypePulseBlue {
  0%, 100% { box-shadow: 0 12px 32px -8px rgba(6, 182, 212, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 12px 48px -4px rgba(6, 182, 212, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 24px rgba(6, 182, 212, 0.45); }
}
body[data-energy="hype"][data-mood="paper"] .submit-btn,
body[data-energy="hype"][data-mood="paper"] .btn-primary {
  animation: hypePulseRed 2.2s ease-in-out infinite;
}
@keyframes hypePulseRed {
  0%, 100% { box-shadow: 0 12px 32px -8px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 12px 48px -4px rgba(220, 38, 38, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 24px rgba(220, 38, 38, 0.35); }
}

body[data-energy="hype"] .progress-fill { filter: brightness(1.1); }
body[data-energy="hype"] .qs-value,
body[data-energy="hype"] .ot-preview-amount,
body[data-energy="hype"] .ot-amount-value,
body[data-energy="hype"] .cs-amount { text-shadow: 0 0 12px currentColor; }
body[data-energy="hype"] .ot-stat-num,
body[data-energy="hype"] .cs-num,
body[data-energy="hype"] .head-stat-value { text-shadow: 0 0 16px rgba(255, 255, 255, 0.15); }
body[data-energy="hype"] .cat-icon,
body[data-energy="hype"] .act-cat,
body[data-energy="hype"] .preview-cat-icon { filter: brightness(1.1) saturate(1.15); }

/* Hype scanline overlay across the entire page */
body[data-energy="hype"]::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
body[data-energy="hype"][data-mood="paper"]::after {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(31, 41, 55, 0.025) 3px,
    rgba(31, 41, 55, 0.025) 4px
  );
  mix-blend-mode: multiply;
}

/* Hype hover boost */
body[data-energy="hype"] .cat-card:hover { transform: translateY(-6px) scale(1.01); }
body[data-energy="hype"] .ot-stat:hover { transform: translateY(-4px) scale(1.02); }
body[data-energy="hype"] .craft-summary-card:hover { transform: translateY(-5px) scale(1.02); }

/* Hype: stronger toast aura */
body[data-energy="hype"] .toast {
  animation: toastIn 0.4s cubic-bezier(.2, 1.2, .4, 1) both, hypeToast 2.4s ease-in-out infinite 0.4s;
}
@keyframes hypeToast {
  0%, 100% { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 158, 11, 0.18); }
  50% { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(245, 158, 11, 0.3); }
}