/* SAUD AI 3.0 — unified aesthetic polish. Structural layout stays in structural-round1.css. */
:root {
  --v3-glass: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  --v3-glass-soft: color-mix(in srgb, var(--surface) 86%, transparent);
  --v3-line: color-mix(in srgb, var(--surface-border) 82%, rgba(120,190,255,.18));
  --v3-line-strong: color-mix(in srgb, var(--accent) 30%, var(--surface-border));
  --v3-shadow: 0 18px 55px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
  --v3-shadow-soft: 0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
  --v3-radius: 22px;
  --v3-radius-sm: 15px;
}

/* Global rhythm */
#app .workspace-content { padding-inline: clamp(14px, 2.2vw, 30px); }
#app .page { padding-inline: clamp(2px, .7vw, 8px); }
#app .card,
#app .panel,
#app .settings-card {
  border-color: var(--v3-line);
  box-shadow: var(--v3-shadow-soft);
}
.app-topbar,
#chatView .view-header {
  min-height: 72px;
  border-bottom: 1px solid var(--v3-line);
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.app-topbar .page-title,
#chatView .view-header { letter-spacing: -.01em; }
button, .header-link, .chat-icon-btn, .settings-tab { transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
button:active, .header-link:active { transform: scale(.98); }

/* Main chat */
#chatView .chat-pane {
  background:
    radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
    radial-gradient(circle at 8% 96%, rgba(94,92,230,.08), transparent 34%);
}
#chatView .chat-thread-inner { padding-block: 18px 8px; }
#chatView .chat-bubble {
  line-height: 1.72;
  font-size: 15px;
}
#chatView .chat-bubble.assistant {
  width: min(92%, 920px) !important;
  max-width: 920px !important;
  padding: 17px 19px !important;
  border: 1px solid color-mix(in srgb, var(--surface-border) 88%, rgba(110,180,255,.16));
  border-radius: 22px 22px 22px 8px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel2) 94%, #183052 6%), color-mix(in srgb, var(--panel) 96%, transparent));
  box-shadow: var(--v3-shadow-soft);
}
#chatView .chat-bubble.user {
  border-radius: 19px 19px 7px 19px;
  padding: 11px 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 94%, #48b5ff 6%), color-mix(in srgb, var(--accent) 82%, #074f9e 18%));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.16);
}
#chatView .chat-bubble.assistant p { margin-block: .36em; }
#chatView .chat-bubble.assistant ul,
#chatView .chat-bubble.assistant ol { margin-block: .6em; }
#chatView .chat-bubble.assistant li { margin-block: .27em; }
#chatView .chat-bubble-copy {
  opacity: .72;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-input) 84%, transparent);
}
#chatView .chat-input-bar {
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 24px !important;
  padding: 7px 8px !important;
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
}
#chatView .chat-input-row { min-height: 48px; gap: 8px; }
#chatView #ci {
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.55;
}
#chatView #ci:focus { box-shadow: none; }
#chatView .chat-input-row > button:not(.chat-icon-btn) {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 14px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
#chatView .chat-input-row .chat-icon-btn { width: 42px; height: 42px; border-radius: 14px; }
#chatView .chat-shortcuts {
  gap: 7px;
  padding: 2px 4px 3px;
  justify-content: flex-start;
}
#chatView .chat-shortcuts button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface-input));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--surface-border));
  color: color-mix(in srgb, var(--fg) 86%, var(--muted));
  box-shadow: none;
  font-size: 12px;
}
#chatView .chat-sidebar {
  border-inline-start: 1px solid var(--v3-line);
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
#chatView .chat-session-item {
  border-radius: 15px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--surface-input) 54%, transparent);
}
#chatView .chat-session-item:hover { border-color: var(--v3-line); background: color-mix(in srgb, var(--panel2) 72%, transparent); }
#chatView .chat-session-item.active,
#chatView .chat-session-item[aria-current="true"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--surface-border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 70%, var(--panel2)), color-mix(in srgb, var(--panel2) 88%, transparent));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
#chatView .chat-session-menu-btn { border-radius: 11px; opacity: .72; }
#chatView .chat-sidebar-project { border-top-color: var(--v3-line); background: color-mix(in srgb, var(--surface) 58%, transparent); }

/* Shared routed-page hero language */
#p-tech .tech-hub-hero,
#p-life .life-hero,
#p-email .email-hero,
#p-needme .needme-hero {
  padding: 18px 20px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 90%, rgba(10,132,255,.06)), color-mix(in srgb, var(--surface-strong) 82%, transparent));
  box-shadow: var(--v3-shadow-soft);
}
#p-tech h2, #p-life h2, #p-email h2, #p-needme h2 { margin-block: 3px 6px; font-size: clamp(1.55rem, 2.3vw, 2rem); letter-spacing: -.025em; }
#p-tech .sub, #p-life .sub, #p-email .sub, #p-needme .sub,
#p-tech p, #p-life p, #p-email p, #p-needme p { color: color-mix(in srgb, var(--muted) 92%, var(--fg)); }

/* Tech Hub */
#p-tech.tech-hub-page { gap: 16px; }
#p-tech .tech-pulse-card {
  min-width: 176px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface-input));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--surface-border));
  box-shadow: none;
}
#p-tech .tech-tabs {
  padding: 5px;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  gap: 5px;
}
#p-tech .tech-tabs button,
#p-tech .tech-filter-chips button {
  border-radius: 13px;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
#p-tech .tech-tabs button.active,
#p-tech .tech-tabs button[aria-selected="true"],
#p-tech .tech-filter-chips button.active {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--panel2));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--surface-border));
}
#p-tech .tech-section-head { padding: 4px 2px; }
#p-tech .tech-live-item,
#p-tech .tech-workbench,
#p-tech .tech-source-card,
#p-tech .tech-watch-item {
  border-style: solid !important;
  border-color: var(--v3-line) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-strong) 78%, transparent));
  box-shadow: var(--v3-shadow-soft);
}
#p-tech .tech-live-item { padding: 17px 18px !important; }
#p-tech .tech-live-item strong { font-size: 15px; line-height: 1.55; }
#p-tech .tech-live-item p { line-height: 1.68; }
#p-tech .tech-post-actions button,
#p-tech .header-link { min-height: 34px; border-radius: 12px; }
#p-tech .tech-news-badges { color: var(--muted); font-size: 12px; }
#p-tech .tech-chat-thread .tech-message { border-radius: 17px; padding: 12px 14px; line-height: 1.65; }
#p-tech .tech-composer { padding-top: 10px; }

/* Life Finance */
#p-life .life-shell { display: grid; gap: 16px; }
#p-life .life-privacy {
  align-self: center;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, #ff9f0a 28%, var(--surface-border));
  border-radius: 999px;
  background: color-mix(in srgb, rgba(255,159,10,.12) 70%, var(--surface-input));
  color: color-mix(in srgb, #ffcf87 75%, var(--fg));
  font-size: 11px;
}
#p-life .life-tabs,
#p-life .life-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--v3-line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}
#p-life .life-tabs button,
#p-life .life-segments button { border-radius: 12px; background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
#p-life .life-tabs button.active,
#p-life .life-segments button.active { color: var(--fg); background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel2)); border-color: color-mix(in srgb, var(--accent) 32%, var(--surface-border)); }
#p-life .life-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
#p-life .life-stat,
#p-life .life-card {
  border: 1px solid var(--v3-line);
  border-radius: 19px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-strong) 78%, transparent));
  box-shadow: var(--v3-shadow-soft);
}
#p-life .life-stat { min-height: 118px; padding: 16px; display: grid; align-content: center; gap: 5px; }
#p-life .life-stat strong { font-size: clamp(1.25rem, 2vw, 1.65rem); color: color-mix(in srgb, var(--accent) 78%, var(--fg)); }
#p-life .life-stat small, #p-life .life-stat span { color: var(--muted); }
#p-life .life-card { padding: 17px; }
#p-life .life-section-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
#p-life .life-list { display: grid; gap: 8px; }
#p-life .life-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--surface-border) 75%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-input) 65%, transparent);
}
#p-life .life-row > div:first-child { display: grid; gap: 4px; }
#p-life .life-row small { color: var(--muted); }
#p-life .life-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
#p-life .life-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
#p-life .life-form textarea, #p-life .life-form button { grid-column: 1 / -1; }
#p-life .life-form :is(input,select,textarea) { border-radius: 13px; background: color-mix(in srgb, var(--surface-input) 88%, transparent); }
#p-life .life-empty, #p-life .life-loading { padding: 24px; text-align: center; color: var(--muted); border: 1px dashed var(--v3-line); border-radius: 16px; }
#p-life .life-impact-result { display: grid; gap: 5px; margin-top: 12px; }

/* Unified Inbox */
#p-email { display: grid; gap: 15px; }
#p-email .email-tabs {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--v3-line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}
#p-email .email-tabs button { flex: 0 0 auto; border-radius: 12px; background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
#p-email .email-tabs button.active { color: var(--fg); background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel2)); border-color: color-mix(in srgb, var(--accent) 32%, var(--surface-border)); }
#p-email .email-account-filter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
#p-email .email-filter { min-height: 34px; border-radius: 999px; padding: 7px 12px; background: var(--surface-input); border-color: var(--v3-line); color: var(--muted); box-shadow: none; }
#p-email .email-filter.active { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border)); background: var(--accent-soft); }
#p-email .email-list, #p-email .email-accounts { display: grid; gap: 10px; }
#p-email .email-item,
#p-email .email-account-card,
#p-email .email-add-form {
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  padding: 15px 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-strong) 78%, transparent));
  box-shadow: var(--v3-shadow-soft);
}
#p-email .email-item.urgency-high { border-inline-start: 3px solid #ff9f0a; }
#p-email .email-item-top, #p-email .email-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
#p-email .email-item h3 { margin: 7px 0 4px; }
#p-email .email-from { color: color-mix(in srgb, var(--accent) 72%, var(--fg)); font-size: 12px; }
#p-email .email-meta b { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 55%, transparent); color: var(--fg); }
#p-email .email-account-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
#p-email .email-account-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--muted); }
#p-email .email-add-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#p-email .email-add-form h3, #p-email .email-add-form button { grid-column: 1 / -1; }
#p-email .email-empty { padding: 28px; border: 1px dashed var(--v3-line); border-radius: 17px; text-align: center; color: var(--muted); }

/* Need Me */
#p-needme.active { display: grid; gap: 15px; }
#p-needme .needme-hero-count { min-width: 92px; display: grid; place-items: center; padding: 10px 15px; border-radius: 17px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-input)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--surface-border)); }
#p-needme .needme-hero-count strong { font-size: 1.7rem; }
#p-needme .needme-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--v3-line); border-radius: 16px; background: color-mix(in srgb, var(--surface-strong) 72%, transparent); }
#p-needme .needme-toggle, #p-needme .needme-select { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
#p-needme .needme-list, #p-needme .needme-feed { display: grid; gap: 10px; }
#p-needme .needme-item {
  padding: 15px 16px;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-strong) 78%, transparent));
  box-shadow: var(--v3-shadow-soft);
}
#p-needme .needme-item.severity-critical { border-inline-start: 3px solid #ff453a; }
#p-needme .needme-item.severity-important { border-inline-start: 3px solid #ff9f0a; }
#p-needme .needme-item-head { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
#p-needme .needme-severity { padding: 3px 7px; border-radius: 999px; background: var(--surface-input); font-size: 11px; }
#p-needme .needme-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
#p-needme .needme-section-title { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-top: 6px; }
#p-needme .needme-empty { padding: 28px; text-align: center; border: 1px dashed var(--v3-line); border-radius: 17px; color: var(--muted); }

/* Settings */
.settings-tabs {
  padding: 5px !important;
  gap: 5px !important;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}
.settings-tab { border-radius: 13px !important; border-color: transparent !important; background: transparent !important; color: var(--muted) !important; box-shadow: none !important; }
.settings-tab.active { color: var(--fg) !important; background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel2)) !important; border-color: color-mix(in srgb, var(--accent) 32%, var(--surface-border)) !important; }
.settings-section, .settings-card { border-radius: 20px; }

/* Mobile / tablet */
@media (max-width: 900px) {
  #chatView .chat-bubble.assistant { width: min(96%, 820px) !important; }
  #p-tech .tech-hub-hero, #p-life .life-hero, #p-email .email-hero, #p-needme .needme-hero { padding: 15px; }
  #p-life .life-form, #p-email .email-add-form { grid-template-columns: 1fr; }
  #p-life .life-form > *, #p-email .email-add-form > * { grid-column: 1 !important; }
}
@media (max-width: 600px) {
  #chatView .chat-bubble.assistant { width: 96% !important; padding: 14px 15px !important; border-radius: 18px 18px 18px 7px; }
  #chatView .chat-bubble.user { max-width: 88% !important; }
  #chatView .chat-input-bar { border-radius: 20px !important; }
  #chatView .chat-shortcuts { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #chatView .chat-shortcuts::-webkit-scrollbar { display: none; }
  #p-life .life-row, #p-email .email-account-card { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  #p-life .life-row-actions { justify-content: flex-start; }
  #p-email .email-account-card > button { width: 100%; }
}