/* MyCitadel Design System */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Primary — electric cyan from logo .ai accent */
  --blue: #00b8e8; --blue-light: #e0f7ff; --blue-border: #80d8f0; --blue-dark: #0090c0;
  /* Blue-border variant */
  --blue-border-2: #40c8f0;

  /* Page backgrounds */
  --bg: #f0f4f8; --surface: #ffffff; --surface-2: #f6fafc;

  /* Borders */
  --border: #ccd8e4; --border-soft: #eaf0f6;

  /* Text scale */
  --text-1: #0e1a2a; --text-2: #3a5068; --text-3: #7a9ab8; --text-4: #a8c0d0;

  /* Sidebar — matches logo dark navy */
  --sidebar-bg: #0a0e1a; --sidebar-border: #141e30;
  --sidebar-hover: #111a2e; --sidebar-active-bg: #0d2040; --sidebar-active-border: #00b8e8;

  /* Status colors */
  --green: #1a9a60; --green-light: #e4f7ee; --green-border: #90d8b0;
  --amber: #c88a10; --amber-light: #fdf4e0; --amber-border: #e8c870;
  --red: #b83030; --red-light: #fdeaea; --red-border: #e8a0a0;
  --purple: #7050b8;

  /* Radii */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px;

  /* Layout */
  --sidebar-w: 58px; --topbar-h: 56px;
}

body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text-1); font-size: 14px; line-height: 1.5; }

/* Layout */
.app-layout { display: flex; min-height: 100vh; }

.mc-sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; padding: 12px 0; }
.sidebar-brand { display: flex; justify-content: center; padding: 4px 0 14px; border-bottom: 1px solid var(--sidebar-border); margin-bottom: 8px; }
.brand-icon-link { display: flex; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.sidebar-footer { padding: 8px; border-top: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: 2px; }

.nav-item { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: #3a5a7a; text-decoration: none; transition: all 0.15s; border: 1px solid transparent; }
.nav-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { background: var(--sidebar-hover); color: #00c8ff; }
.nav-item.active { background: var(--sidebar-active-bg); border-color: var(--sidebar-active-border); color: #00c8ff; }
.nav-btn { background: none; cursor: pointer; font-family: inherit; }

.mc-main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; }
.mc-topbar { height: var(--topbar-h); background: #0d1628; border-bottom: 1px solid #1a2a40; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; }
.topbar-left { display: flex; align-items: center; gap: 8px; }
.wordmark { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }
.wm-my { color: #7aaccc; font-weight: 300; }
.wm-citadel { color: #e8f4ff; }
.wm-ai { color: #00c8ff; font-size: 12px; font-weight: 400; letter-spacing: 0; vertical-align: baseline; margin-left: 1px; }
.topbar-sep { color: #1e3a50; }
.topbar-page { font-size: 13px; color: #4a7a9b; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-date { font-size: 12px; color: #4a7a9b; }
.notif-bell { position: relative; color: var(--text-3); cursor: pointer; display: flex; }
.notif-count { position: absolute; top: -6px; right: -8px; background: var(--red); color: #fff; font-size: 9px; font-weight: 500; min-width: 16px; height: 16px; border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: #0d2040; border: 1px solid #00b8e8; color: #00c8ff; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-content { padding: 24px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.card-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-4); font-weight: 500; margin-bottom: 12px; }

/* Dashboard */
.dash-today { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.today-pill { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 12px; cursor: pointer; transition: border-color 0.15s; }
.today-pill:hover { border-color: var(--blue-border); }
.today-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.today-metric-label { color: var(--text-3); }
.today-metric-val { color: var(--text-1); font-weight: 500; }
.today-metric-empty { color: var(--text-4); }
.dash-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.dash-col-left { display: flex; flex-direction: column; gap: 14px; }
.dash-col-right { display: flex; flex-direction: column; gap: 14px; }

/* Oracle */
.oracle-card { background: var(--blue-light); border: 1px solid var(--blue-border); border-radius: var(--radius-lg); padding: 16px 18px; }
.oracle-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.oracle-avatar { width: 28px; height: 28px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oracle-avatar svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.5; }
.oracle-name { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--blue); font-weight: 500; }
.oracle-text { font-size: 13px; color: #2a3a5a; line-height: 1.65; margin-bottom: 12px; font-weight: 300; }
.oracle-input-row { display: flex; gap: 6px; }
.oracle-input { flex: 1; background: var(--surface); border: 1px solid var(--blue-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; color: var(--text-1); outline: none; font-family: 'DM Sans', sans-serif; transition: border-color 0.15s; }
.oracle-input:focus { border-color: var(--blue); }
.oracle-send { background: var(--blue); border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-size: 12px; color: #fff; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 500; white-space: nowrap; transition: background 0.15s; }
.oracle-send:hover { background: var(--blue-dark); }

/* People */
.people-list { display: flex; flex-direction: column; }
.person-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: inherit; transition: background 0.1s; }
.person-row:last-child { border-bottom: none; }
.person-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; }
.p-info { flex: 1; min-width: 0; }
.p-name { font-size: 13px; font-weight: 500; color: var(--text-1); }
.p-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.health-badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.h-thriving { background: var(--green-light); color: #2a7a4a; border: 1px solid var(--green-border); }
.h-drifting  { background: var(--amber-light); color: #8a6010; border: 1px solid var(--amber-border); }
.h-neglected { background: var(--red-light);   color: #a03030; border: 1px solid var(--red-border); }
.p-last { font-size: 10px; color: var(--text-4); }

/* Goals */
.goals-list { display: flex; flex-direction: column; }
.goal-row { padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.goal-row:last-child { border-bottom: none; }
.goal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; gap: 8px; }
.goal-name { font-size: 12px; font-weight: 500; color: var(--text-1); }
.goal-pct  { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.progress-rail { height: 5px; background: #e4eaf4; border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.progress-fill { height: 100%; border-radius: 3px; }
.goal-meta { font-size: 10px; color: var(--text-4); }

/* Notifications */
.notif-list { display: flex; flex-direction: column; }
.notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.notif-row:last-child { border-bottom: none; }
.notif-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.notif-icon svg { width: 13px; height: 13px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.notif-body { flex: 1; }
.notif-title { font-size: 12px; font-weight: 500; color: var(--text-1); margin-bottom: 1px; }
.notif-sub   { font-size: 11px; color: var(--text-3); line-height: 1.4; }
.notif-time  { font-size: 10px; color: var(--text-4); white-space: nowrap; }

/* Streaks */
.streaks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.streak-tile { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px 12px; }
.streak-num { font-size: 24px; font-weight: 500; color: var(--text-1); letter-spacing: -0.5px; line-height: 1; margin-bottom: 1px; }
.streak-unit { font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: 1px; }
.streak-label { font-size: 11px; color: var(--blue); margin-top: 4px; }

/* Attributes */
.attr-list { display: flex; flex-direction: column; gap: 8px; }
.attr-row { display: flex; align-items: center; gap: 8px; }
.attr-name  { font-size: 11px; color: var(--text-3); width: 70px; flex-shrink: 0; }
.attr-rail  { flex: 1; height: 4px; background: #e4eaf4; border-radius: 2px; overflow: hidden; }
.attr-bar   { height: 100%; border-radius: 2px; }
.attr-score { font-size: 11px; color: var(--text-3); width: 20px; text-align: right; font-weight: 500; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; text-decoration: none; transition: all 0.15s; border: 1px solid transparent; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-secondary { background: var(--surface); color: var(--text-1); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* Forms */
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], textarea, select { width: 100%; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--text-1); outline: none; transition: border-color 0.15s; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); }
label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; }
.form-group { margin-bottom: 14px; }

/* Utilities */
.flex { display: flex; } .flex-center { display: flex; align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.text-muted { color: var(--text-3); } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .w-full { width: 100%; }
.empty-state { text-align: center; padding: 32px 16px; color: var(--text-3); font-size: 13px; }

@media (max-width: 900px) { .dash-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .mc-content { padding: 16px; } .mc-topbar { padding: 0 16px; } }

/* ---- Phase 2: Goals, Tracking, Dashboard ---- */

/* Page header */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-size: 20px; font-weight: 500; color: var(--text-1); letter-spacing: -0.3px; }
.page-subtitle { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* Flash messages */
.flash { padding: 10px 14px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 16px; }
.flash-success { background: var(--green-light); border: 1px solid var(--green-border); color: #2a7a4a; }
.flash-error   { background: var(--red-light);   border: 1px solid var(--red-border);   color: #a03030; }

/* Empty states */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--text-4); }
.empty-title { font-size: 15px; font-weight: 500; color: var(--text-1); margin-bottom: 6px; }
.empty-sub { font-size: 13px; color: var(--text-3); margin-bottom: 20px; }

/* Buttons */
.btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius-md); padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; font-family: inherit; transition: background 0.15s; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-secondary { display: inline-flex; align-items: center; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 14px; font-size: 13px; cursor: pointer; text-decoration: none; font-family: inherit; transition: border-color 0.15s; }
.btn-secondary:hover { border-color: var(--blue-border); color: var(--blue); }
.btn-text { background: none; border: none; color: var(--blue); font-size: 13px; cursor: pointer; font-family: inherit; padding: 0; text-decoration: underline; }
.btn-icon { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 16px; padding: 4px; border-radius: var(--radius-sm); transition: background 0.15s; }
.btn-icon:hover { background: var(--surface); }

/* Card extras */
.card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-link { font-size: 12px; color: var(--blue); text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card-empty { padding: 16px 0; text-align: center; }

/* Goals grid */
.goals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; }
.goals-grid--completed { opacity: 0.7; }
.goal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; position: relative; }
.goal-card--completed { background: var(--surface); }
.goal-card-header { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.goal-category-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.goal-category-label { font-size: 11px; color: var(--text-3); flex: 1; }
.goal-complete-badge { font-size: 10px; background: var(--green-light); color: #2a7a4a; border: 1px solid var(--green-border); border-radius: 20px; padding: 2px 8px; }
.goal-title { font-size: 14px; font-weight: 500; color: var(--text-1); margin-bottom: 6px; line-height: 1.4; }
.goal-desc { font-size: 12px; color: var(--text-2); margin-bottom: 8px; line-height: 1.5; }
.goal-due { font-size: 11px; color: var(--text-4); margin-bottom: 10px; }
.goal-progress-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.goal-progress-bar { flex: 1; height: 5px; background: var(--border-soft); border-radius: 3px; overflow: hidden; }
.goal-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.goal-progress-label { font-size: 11px; color: var(--text-3); min-width: 28px; text-align: right; }
.milestones-list { display: flex; flex-direction: column; gap: 4px; }
.milestone-row { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; }
.milestone-row input { flex-shrink: 0; accent-color: var(--blue); }
.milestone-label { font-size: 12px; color: var(--text-2); }
.milestone-row--done .milestone-label { text-decoration: line-through; color: var(--text-4); }
.goal-no-milestones { font-size: 12px; color: var(--text-4); margin-top: 8px; }
.goal-no-milestones a { color: var(--blue); }
.goal-actions-menu { position: relative; }
.goal-menu-dropdown { position: absolute; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 140px; z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.menu-item { display: block; width: 100%; text-align: left; padding: 8px 12px; font-size: 12px; color: var(--text-1); background: none; border: none; cursor: pointer; font-family: inherit; transition: background 0.1s; }
.menu-item:hover { background: var(--surface); }
.menu-item--danger { color: var(--red); }
.hidden { display: none !important; }
.section-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; }
.section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.section-divider span { font-size: 11px; color: var(--text-4); text-transform: uppercase; letter-spacing: 1px; }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(26,32,48,0.4); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--radius-xl); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal--sm { max-width: 360px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 0; }
.modal-title { font-size: 16px; font-weight: 500; color: var(--text-1); }
.modal-form { padding: 16px 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }

/* Form elements */
.form-group { margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; }
.form-optional { font-weight: 400; color: var(--text-4); }
.form-input { width: 100%; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; color: var(--text-1); font-family: inherit; outline: none; transition: border-color 0.15s; }
.form-input:focus { border-color: var(--blue); }
.form-input--milestone { margin-bottom: 6px; }
.form-select { width: 100%; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; color: var(--text-1); font-family: inherit; outline: none; }
.form-textarea { width: 100%; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; color: var(--text-1); font-family: inherit; outline: none; resize: vertical; }

/* Tracking */
.tracking-layout { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
.tracking-col-main { display: flex; flex-direction: column; gap: 14px; }
.tracking-col-side { display: flex; flex-direction: column; gap: 14px; }
.tracking-domain-card { }
.tracking-domain-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.domain-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.metric-log-grid { display: flex; flex-direction: column; gap: 2px; }
.metric-log-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-md); transition: background 0.1s; }
.metric-log-item:hover { background: var(--surface); }
.metric-log-item--logged { background: var(--surface); }
.metric-log-info { flex: 1; }
.metric-log-label { font-size: 13px; color: var(--text-1); }
.metric-log-goal { display: block; font-size: 11px; color: var(--text-4); }
.metric-logged-val { display: flex; align-items: center; gap: 5px; }
.metric-val-num { font-size: 14px; font-weight: 500; color: var(--text-1); }
.metric-val-unit { font-size: 11px; color: var(--text-3); }
.btn-log-metric { background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm); padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.btn-log-metric:hover { background: var(--blue-dark); }
.btn-edit-metric { background: none; border: none; color: var(--text-4); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.log-input-row { display: flex; align-items: center; gap: 8px; }
.log-unit { font-size: 13px; color: var(--text-3); white-space: nowrap; }

/* Streaks */
.streaks-list { display: flex; flex-direction: column; gap: 0; }
.streak-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.streak-row:last-child { border-bottom: none; }
.streak-info { flex: 1; }
.streak-label { font-size: 13px; color: var(--text-1); font-weight: 500; display: block; }
.streak-status { font-size: 11px; color: var(--text-3); }
.streak-status--strong   { color: #2a7a4a; }
.streak-status--building { color: var(--blue); }
.streak-status--growing  { color: #8a60c0; }
.streak-count { text-align: right; }
.streak-num { font-size: 22px; font-weight: 500; color: var(--text-1); letter-spacing: -0.5px; line-height: 1; }
.streak-days-label { font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: 1px; }

/* Weekly summary */
.weekly-list { display: flex; flex-direction: column; gap: 0; }
.weekly-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.weekly-row:last-child { border-bottom: none; }
.weekly-info { flex: 1; }
.weekly-label { font-size: 12px; color: var(--text-1); font-weight: 500; }
.weekly-days { font-size: 10px; color: var(--text-4); }
.weekly-goal-bar { width: 50px; height: 4px; background: var(--border-soft); border-radius: 2px; overflow: hidden; }
.weekly-goal-fill { height: 100%; border-radius: 2px; }
.weekly-pct { font-size: 11px; color: var(--text-3); min-width: 28px; text-align: right; }
.weekly-avg { font-size: 11px; color: var(--text-3); }

/* Dashboard people */
.people-list { display: flex; flex-direction: column; }
.person-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); text-decoration: none; transition: background 0.1s; border-radius: var(--radius-sm); }
.person-row:last-child { border-bottom: none; }
.person-row:hover { background: var(--surface); }
.p-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0; }
.p-info { flex: 1; }
.p-name { font-size: 13px; font-weight: 500; color: var(--text-1); }
.p-rel { font-weight: 400; color: var(--text-3); }
.p-sub { font-size: 11px; color: var(--text-3); }
.health-badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.health-badge--thriving { background: var(--green-light); color: #2a7a4a; border: 1px solid var(--green-border); }
.health-badge--drifting  { background: var(--amber-light); color: #8a6010; border: 1px solid var(--amber-border); }
.health-badge--neglected { background: var(--red-light);   color: #a03030; border: 1px solid var(--red-border); }

/* Dashboard notifications */
.notif-list { display: flex; flex-direction: column; }
.notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.notif-row:last-child { border-bottom: none; }
.notif-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-body { flex: 1; }
.notif-title { font-size: 12px; font-weight: 500; color: var(--text-1); }
.notif-sub { font-size: 11px; color: var(--text-3); }

/* Dashboard goals */
.goals-list { display: flex; flex-direction: column; gap: 0; }
.goal-row { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.goal-row:last-child { border-bottom: none; }
.goal-row-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.goal-row-name { font-size: 12px; font-weight: 500; color: var(--text-1); }
.goal-row-pct { font-size: 11px; color: var(--text-3); }
.goal-rail { height: 5px; background: var(--border-soft); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.goal-fill { height: 100%; border-radius: 3px; }
.goal-row-meta { font-size: 10px; color: var(--text-4); }

/* Dashboard streaks grid */
.streaks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.streak-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px 12px; }
.streak-card .streak-num { font-size: 22px; font-weight: 500; color: var(--text-1); letter-spacing: -0.5px; line-height: 1; margin-bottom: 1px; }
.streak-card .streak-days-label { font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: 1px; }
.streak-card-label { font-size: 11px; color: var(--blue); margin-top: 4px; }

/* Today pill for CTA */
.today-pill--cta { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue); font-weight: 500; }

@media (max-width: 900px) {
  .dash-layout, .tracking-layout { grid-template-columns: 1fr; }
  .goals-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Phase 2 — Goals, Tracking, Dashboard
   ============================================================ */

/* Page header */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.page-title   { font-size:20px; font-weight:500; color:var(--text-1); letter-spacing:-0.3px; }
.page-subtitle { font-size:13px; color:var(--text-3); margin-top:2px; }

/* Buttons */
.btn-primary   { display:inline-flex; align-items:center; gap:6px; background:var(--blue); color:#fff; border:none; border-radius:var(--radius-md); padding:8px 16px; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; font-family:inherit; transition:background .15s; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-secondary { display:inline-flex; align-items:center; background:var(--surface); color:var(--text-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:8px 14px; font-size:13px; cursor:pointer; text-decoration:none; font-family:inherit; transition:border-color .15s; }
.btn-secondary:hover { border-color:var(--blue-border); color:var(--blue); }
.btn-text  { background:none; border:none; color:var(--blue); font-size:13px; cursor:pointer; font-family:inherit; padding:0; text-decoration:underline; }
.btn-icon  { background:none; border:none; cursor:pointer; color:var(--text-3); font-size:16px; padding:4px; border-radius:var(--radius-sm); transition:background .15s; }
.btn-icon:hover { background:var(--surface); }
.hidden    { display:none !important; }

/* Card extras */
.card-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-link  { font-size:12px; color:var(--blue); text-decoration:none; }
.card-link:hover { text-decoration:underline; }
.card-empty { padding:16px 0; text-align:center; }

/* Flash */
.flash { padding:10px 14px; border-radius:var(--radius-md); font-size:13px; margin-bottom:16px; }
.flash--success { background:var(--green-light); border:1px solid var(--green-border); color:#2a7a4a; }
.flash--error   { background:var(--red-light);   border:1px solid var(--red-border);   color:#a03030; }

/* Empty state */
.empty-state  { text-align:center; padding:48px 24px; }
.empty-icon   { width:56px; height:56px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--text-4); }
.empty-title  { font-size:15px; font-weight:500; color:var(--text-1); margin-bottom:6px; }
.empty-sub    { font-size:13px; color:var(--text-3); margin-bottom:20px; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(26,32,48,.45); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal         { background:var(--surface); border-radius:var(--radius-xl); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; }
.modal--sm     { max-width:360px; }
.modal-header  { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 0; }
.modal-title   { font-size:16px; font-weight:500; color:var(--text-1); }
.modal-form    { padding:16px 20px; }
.modal-footer  { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-soft); }

/* Forms */
.form-group     { margin-bottom:14px; }
.form-row       { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-label     { display:block; font-size:12px; font-weight:500; color:var(--text-2); margin-bottom:5px; }
.form-optional  { font-weight:400; color:var(--text-4); }
.form-input     { width:100%; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); font-size:13px; color:var(--text-1); font-family:inherit; outline:none; transition:border-color .15s; }
.form-input:focus { border-color:var(--blue); }
.form-input--milestone { margin-bottom:6px; }
.form-select    { width:100%; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); font-size:13px; color:var(--text-1); font-family:inherit; outline:none; }
.form-textarea  { width:100%; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); font-size:13px; color:var(--text-1); font-family:inherit; outline:none; resize:vertical; }

/* Goals grid */
.goals-grid            { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:8px; }
.goals-grid--completed { opacity:.7; }
.goal-card             { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; }
.goal-card-header      { display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.goal-category-dot     { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.goal-category-label   { font-size:11px; color:var(--text-3); flex:1; }
.goal-complete-badge   { font-size:10px; background:var(--green-light); color:#2a7a4a; border:1px solid var(--green-border); border-radius:20px; padding:2px 8px; }
.goal-title            { font-size:14px; font-weight:500; color:var(--text-1); margin-bottom:6px; line-height:1.4; }
.goal-title--done      { text-decoration:line-through; opacity:.6; }
.goal-desc             { font-size:12px; color:var(--text-2); margin-bottom:8px; line-height:1.5; }
.goal-due              { font-size:11px; color:var(--text-4); margin-bottom:10px; }
.goal-progress-wrap    { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.goal-progress-bar     { flex:1; height:5px; background:var(--border-soft); border-radius:3px; overflow:hidden; }
.goal-progress-fill    { height:100%; border-radius:3px; transition:width .3s; }
.goal-progress-label   { font-size:11px; color:var(--text-3); min-width:28px; text-align:right; }
.milestones-list       { display:flex; flex-direction:column; gap:4px; }
.milestone-row         { display:flex; align-items:center; gap:8px; cursor:pointer; padding:3px 0; }
.milestone-row input   { flex-shrink:0; accent-color:var(--blue); }
.milestone-label       { font-size:12px; color:var(--text-2); }
.milestone-row--done .milestone-label { text-decoration:line-through; color:var(--text-4); }
.goal-no-milestones    { font-size:12px; color:var(--text-4); margin-top:8px; line-height:1.5; }
.goal-actions-menu     { position:relative; }
.goal-menu-dropdown    { position:absolute; right:0; top:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); min-width:140px; z-index:20; }
.menu-item             { display:block; width:100%; text-align:left; padding:8px 12px; font-size:12px; color:var(--text-1); background:none; border:none; cursor:pointer; font-family:inherit; }
.menu-item:hover       { background:var(--surface); color:var(--blue); }
.menu-item--danger     { color:var(--red); }
.section-divider       { display:flex; align-items:center; gap:12px; margin:24px 0 16px; }
.section-divider::before,.section-divider::after { content:''; flex:1; height:1px; background:var(--border-soft); }
.section-divider span  { font-size:11px; color:var(--text-4); text-transform:uppercase; letter-spacing:1px; }

/* Dashboard goal list (sidebar) */
.goals-list     { display:flex; flex-direction:column; }
.goal-row       { padding:8px 0; border-bottom:1px solid var(--border-soft); }
.goal-row:last-child { border-bottom:none; }
.goal-row-header { display:flex; justify-content:space-between; margin-bottom:5px; }
.goal-row-name  { font-size:12px; font-weight:500; color:var(--text-1); }
.goal-row-pct   { font-size:11px; color:var(--text-3); }
.goal-rail      { height:5px; background:var(--border-soft); border-radius:3px; overflow:hidden; margin-bottom:3px; }
.goal-fill      { height:100%; border-radius:3px; }
.goal-row-meta  { font-size:10px; color:var(--text-4); }

/* Tracking layout */
.tracking-layout      { display:grid; grid-template-columns:1fr 260px; gap:16px; }
.tracking-col-main    { display:flex; flex-direction:column; gap:14px; }
.tracking-col-side    { display:flex; flex-direction:column; gap:14px; }
.tracking-domain-card { }
.tracking-domain-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.domain-dot            { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.metric-log-grid       { display:flex; flex-direction:column; }
.metric-log-item       { display:flex; align-items:center; justify-content:space-between; padding:8px 6px; border-radius:var(--radius-md); transition:background .1s; }
.metric-log-item:hover { background:var(--surface); }
.metric-log-item--logged { background:#fafcff; }
.metric-log-info       { flex:1; }
.metric-log-label      { font-size:13px; color:var(--text-1); }
.metric-log-goal       { display:block; font-size:11px; color:var(--text-4); }
.metric-logged-val     { display:flex; align-items:center; gap:5px; }
.metric-val-num        { font-size:14px; font-weight:500; color:var(--text-1); }
.metric-val-unit       { font-size:11px; color:var(--text-3); }
.btn-log-metric        { background:var(--blue); color:#fff; border:none; border-radius:var(--radius-sm); padding:5px 12px; font-size:12px; cursor:pointer; font-family:inherit; }
.btn-log-metric:hover  { background:var(--blue-dark); }
.btn-edit-metric       { background:none; border:none; color:var(--text-4); cursor:pointer; font-size:13px; padding:2px 4px; }
.log-input-row         { display:flex; align-items:center; gap:8px; }
.log-unit              { font-size:13px; color:var(--text-3); white-space:nowrap; }

/* Streaks */
.streaks-list  { display:flex; flex-direction:column; }
.streak-row    { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.streak-row:last-child { border-bottom:none; }
.streak-info   { flex:1; }
.streak-label  { font-size:13px; color:var(--text-1); font-weight:500; display:block; }
.streak-status { font-size:11px; color:var(--text-3); }
.streak-status--strong   { color:#2a7a4a; }
.streak-status--building { color:var(--blue); }
.streak-status--growing  { color:var(--purple); }
.streak-count  { text-align:right; }
.streak-num    { font-size:22px; font-weight:500; color:var(--text-1); letter-spacing:-0.5px; line-height:1; }
.streak-days-label { font-size:10px; color:var(--text-4); text-transform:uppercase; letter-spacing:1px; }

/* Weekly summary */
.weekly-list  { display:flex; flex-direction:column; }
.weekly-row   { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border-soft); }
.weekly-row:last-child { border-bottom:none; }
.weekly-info  { flex:1; }
.weekly-label { font-size:12px; color:var(--text-1); font-weight:500; display:block; }
.weekly-days  { font-size:10px; color:var(--text-4); }
.weekly-goal-bar  { width:50px; height:4px; background:var(--border-soft); border-radius:2px; overflow:hidden; }
.weekly-goal-fill { height:100%; border-radius:2px; }
.weekly-pct   { font-size:11px; color:var(--text-3); min-width:28px; text-align:right; }
.weekly-avg   { font-size:11px; color:var(--text-3); }

/* Dashboard people */
.people-list  { display:flex; flex-direction:column; }
.person-row   { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); text-decoration:none; border-radius:var(--radius-sm); transition:background .1s; }
.person-row:last-child { border-bottom:none; }
.person-row:hover { background:var(--surface); }
.p-avatar     { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; flex-shrink:0; }
.p-info       { flex:1; }
.p-name       { font-size:13px; font-weight:500; color:var(--text-1); }
.p-rel        { font-weight:400; color:var(--text-3); }
.p-sub        { font-size:11px; color:var(--text-3); }
.health-badge { font-size:10px; padding:2px 8px; border-radius:20px; font-weight:500; white-space:nowrap; flex-shrink:0; }
.health-badge--thriving { background:var(--green-light); color:#2a7a4a; border:1px solid var(--green-border); }
.health-badge--drifting  { background:var(--amber-light); color:#8a6010; border:1px solid var(--amber-border); }
.health-badge--neglected { background:var(--red-light);   color:#a03030; border:1px solid var(--red-border); }

/* Dashboard notifications */
.notif-list   { display:flex; flex-direction:column; }
.notif-row    { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-soft); }
.notif-row:last-child { border-bottom:none; }
.notif-icon   { width:28px; height:28px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-body   { flex:1; }
.notif-title  { font-size:12px; font-weight:500; color:var(--text-1); }
.notif-sub    { font-size:11px; color:var(--text-3); }

/* Dashboard streaks grid */
.streaks-grid     { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.streak-card      { background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:10px 12px; }
.streak-card .streak-num { font-size:22px; font-weight:500; color:var(--text-1); letter-spacing:-0.5px; line-height:1; margin-bottom:1px; }
.streak-card .streak-days-label { font-size:10px; color:var(--text-4); text-transform:uppercase; letter-spacing:1px; }
.streak-card-label { font-size:11px; color:var(--blue); margin-top:4px; }
.today-pill--cta   { background:var(--blue-light); border-color:var(--blue-border); color:var(--blue); font-weight:500; }

/* Tracking setup */
.setup-domain-card    { margin-bottom:14px; }
.setup-domain-header  { margin-bottom:10px; }
.setup-domain-title   { font-size:14px; font-weight:500; color:var(--text-1); }
.setup-metrics-grid   { display:flex; flex-direction:column; gap:2px; }
.setup-metric-row     { display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:var(--radius-md); transition:background .1s; cursor:pointer; }
.setup-metric-row:hover          { background:var(--surface); }
.setup-metric-row--active        { background:#f4f8ff; }
.setup-metric-check-wrap         { flex-shrink:0; }
.setup-metric-check-wrap input   { accent-color:var(--blue); width:15px; height:15px; cursor:pointer; }
.setup-metric-info    { flex:1; display:flex; align-items:center; gap:6px; }
.setup-metric-label   { font-size:13px; color:var(--text-1); }
.setup-metric-unit    { font-size:11px; color:var(--text-3); }
.setup-goal-wrap      { display:flex; align-items:center; gap:5px; }
.setup-goal-input     { width:80px; padding:4px 8px; font-size:12px; }
.setup-goal-unit      { font-size:11px; color:var(--text-3); white-space:nowrap; }
.setup-footer         { display:flex; justify-content:flex-end; gap:10px; padding:20px 0 0; }

/* Responsive */
@media (max-width:900px) {
  .dash-layout, .tracking-layout { grid-template-columns:1fr; }
  .goals-grid  { grid-template-columns:1fr; }
  .form-row    { grid-template-columns:1fr; }
  .streaks-grid { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   Phase 3a — People / Contacts
   ============================================================ */

/* Filters bar */
.people-filters { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.filter-search  { flex:1; min-width:180px; max-width:280px; }
.filter-select  { width:auto; }
.filter-clear   { white-space:nowrap; }

/* Health summary chips */
.health-summary { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.health-chip    { font-size:12px; font-weight:500; padding:3px 10px; border-radius:20px; }
.health-chip--thriving  { background:var(--green-light); color:#2a7a4a; border:1px solid var(--green-border); }
.health-chip--drifting  { background:var(--amber-light); color:#8a6010; border:1px solid var(--amber-border); }
.health-chip--neglected { background:var(--red-light);   color:#a03030; border:1px solid var(--red-border); }

/* Contact cards grid */
.people-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }

.contact-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s; }
.contact-card:hover { border-color:var(--blue-border); box-shadow:0 2px 8px rgba(58,106,191,.08); }

.contact-card-top { display:flex; align-items:flex-start; justify-content:space-between; }

.contact-avatar-lg { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:500; flex-shrink:0; overflow:hidden; }
.contact-avatar-lg img { width:100%; height:100%; object-fit:cover; }

.contact-card-body { flex:1; }
.contact-name { font-size:14px; font-weight:500; color:var(--text-1); margin-bottom:2px; }
.contact-rel  { font-size:12px; color:var(--text-3); margin-bottom:4px; }
.contact-meta { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-4); }
.contact-meta svg { flex-shrink:0; }

.contact-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid var(--border-soft); }
.contact-last { font-size:11px; color:var(--text-3); }
.contact-last--old { color:var(--red); }
.contact-count { font-size:11px; color:var(--text-4); }

/* Add / Edit form page */
.form-page { max-width:640px; }
.form-card { padding:24px; }
.form-section { margin-bottom:4px; }
.form-section-title { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-4); font-weight:500; margin-bottom:14px; }
.form-divider { height:1px; background:var(--border-soft); margin:20px 0; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:16px; border-top:1px solid var(--border-soft); margin-top:4px; }
.form-required { color:var(--red); }

/* Profile page */
.profile-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.profile-field  { display:flex; flex-direction:column; gap:3px; }
.profile-field--full { grid-column:1/-1; }
.profile-field-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-4); font-weight:500; }
.profile-field-value { font-size:13px; color:var(--text-1); line-height:1.5; }

.profile-coming-soon { padding:20px 0; color:var(--text-3); font-size:13px; }

/* Danger button */
.btn-danger { display:inline-flex; align-items:center; background:var(--red-light); color:var(--red); border:1px solid var(--red-border); border-radius:var(--radius-md); padding:8px 14px; font-size:13px; cursor:pointer; text-decoration:none; font-family:inherit; transition:background .15s; }
.btn-danger:hover { background:#f9dada; }

@media (max-width:700px) {
  .people-grid { grid-template-columns:1fr; }
  .profile-fields { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
}

/* ============================================================
   Phase 3b — Contact Profile Page
   ============================================================ */

/* Profile header */
.profile-header       { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:14px; }
.profile-header-left  { display:flex; align-items:flex-start; gap:14px; }
.profile-header-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.contact-avatar-xl { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:500; flex-shrink:0; overflow:hidden; }
.contact-avatar-xl img { width:100%; height:100%; object-fit:cover; }

.profile-name     { font-size:22px; font-weight:500; color:var(--text-1); letter-spacing:-0.3px; margin-bottom:3px; }
.profile-rel      { font-size:13px; color:var(--text-3); margin-bottom:6px; }
.profile-meta-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.profile-meta-item { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-3); }
.profile-last-contact { font-size:12px; color:var(--text-3); }

.btn-oracle { display:inline-flex; align-items:center; gap:6px; background:var(--blue-light); color:var(--blue); border:1px solid var(--blue-border); border-radius:var(--radius-md); padding:8px 14px; font-size:13px; font-weight:500; text-decoration:none; transition:background .15s; }
.btn-oracle:hover { background:#dce8fb; }

/* Profile two-column layout */
.profile-layout    { display:grid; grid-template-columns:1fr 280px; gap:16px; align-items:start; }
.profile-col-main  { display:flex; flex-direction:column; gap:14px; }
.profile-col-side  { display:flex; flex-direction:column; gap:14px; }

.profile-section-card { }

/* Profile fields grid */
.profile-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:12px; }
.profile-field       { display:flex; flex-direction:column; gap:3px; }
.profile-field-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-4); font-weight:500; }
.profile-field-value { font-size:13px; color:var(--text-1); }

.profile-notes      { margin-top:12px; border-top:1px solid var(--border-soft); padding-top:12px; }
.profile-notes-text { font-size:13px; color:var(--text-2); line-height:1.6; margin-top:4px; }

/* Coming soon placeholders */
.profile-coming      { }
.profile-coming-text { font-size:13px; color:var(--text-3); margin-bottom:10px; }

/* Health score widget */
.health-score-display { display:flex; align-items:baseline; gap:6px; margin-bottom:8px; }
.health-score-num     { font-size:36px; font-weight:500; letter-spacing:-1px; line-height:1; }
.health-score-label   { font-size:12px; color:var(--text-4); }
.health-score-bar     { height:6px; background:var(--border-soft); border-radius:3px; overflow:hidden; margin-bottom:8px; }
.health-score-fill    { height:100%; border-radius:3px; transition:width .4s; }
.health-score-hint    { font-size:12px; color:var(--text-3); line-height:1.5; }

/* Quick facts */
.quick-facts     { display:flex; flex-direction:column; gap:0; }
.quick-fact      { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--border-soft); }
.quick-fact:last-child { border-bottom:none; }
.quick-fact-label { font-size:12px; color:var(--text-3); }
.quick-fact-value { font-size:12px; color:var(--text-1); font-weight:500; display:flex; align-items:center; gap:6px; }
.quick-fact-badge { font-size:10px; padding:1px 7px; border-radius:20px; font-weight:500; }
.quick-fact-badge--soon { background:var(--blue-light); color:var(--blue); border:1px solid var(--blue-border); }

/* Compact Oracle card */
.oracle-card--compact { padding:14px 16px; }
.oracle-text--sm      { font-size:12px; color:#2a3a5a; line-height:1.5; margin-bottom:0; font-weight:300; font-style:italic; }

/* Danger zone */
.danger-zone    { border-color:var(--red-border) !important; }
.danger-text    { font-size:13px; color:var(--text-2); margin-bottom:12px; line-height:1.5; }

@media (max-width:860px) {
  .profile-layout { grid-template-columns:1fr; }
  .profile-fields-grid { grid-template-columns:1fr; }
  .profile-header { flex-direction:column; }
  .profile-header-right { flex-wrap:wrap; }
}

/* ============================================================
   Phase 3c — Contact Attributes
   ============================================================ */

.attr-card-header   { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.attr-empty         { padding:8px 0 4px; }
.attr-empty p       { font-size:13px; color:var(--text-3); line-height:1.6; }

.attr-groups        { display:flex; flex-direction:column; gap:14px; }
.attr-group         { }
.attr-group-label   { font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-4); font-weight:500; margin-bottom:6px; }
.attr-list          { display:flex; flex-direction:column; gap:0; }

.attr-row           { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-soft); }
.attr-row:last-child { border-bottom:none; }
.attr-key           { font-size:12px; color:var(--text-3); min-width:140px; flex-shrink:0; }
.attr-val           { flex:1; font-size:13px; color:var(--text-1); font-weight:500; }
.attr-edit-btn, .attr-del-btn { opacity:0; transition:opacity .15s; font-size:13px; }
.attr-row:hover .attr-edit-btn,
.attr-row:hover .attr-del-btn { opacity:1; }
.attr-del-btn       { color:var(--red); }

.attr-suggestions   { display:flex; flex-wrap:wrap; gap:6px; }
.attr-chip          { font-size:11px; padding:3px 10px; background:var(--surface); border:1px solid var(--border); border-radius:20px; cursor:pointer; font-family:inherit; color:var(--text-2); transition:border-color .15s, background .15s; }
.attr-chip:hover    { border-color:var(--blue-border); background:var(--blue-light); color:var(--blue); }

/* ============================================================
   Phase 3d — Interaction Log
   ============================================================ */

.interaction-list   { display:flex; flex-direction:column; gap:0; }

.interaction-row    { display:flex; align-items:flex-start; gap:10px; padding:10px 0;
                      border-bottom:1px solid var(--border-soft); transition:background .1s; }
.interaction-row:last-child { border-bottom:none; }
.interaction-row:hover { background:var(--surface); border-radius:var(--radius-sm); }

.ix-icon-wrap       { width:28px; height:28px; border-radius:50%; background:var(--surface);
                      border:1px solid var(--border); display:flex; align-items:center;
                      justify-content:center; flex-shrink:0; margin-top:2px; }
.ix-type-icon       { font-size:13px; line-height:1; }

.ix-body            { flex:1; }
.ix-header          { display:flex; align-items:center; gap:8px; margin-bottom:3px; flex-wrap:wrap; }
.ix-type            { font-size:13px; font-weight:500; color:var(--text-1); }
.ix-quality         { font-size:11px; font-weight:500; }
.ix-duration        { font-size:11px; color:var(--text-4);
                      background:var(--surface); border:1px solid var(--border-soft);
                      border-radius:20px; padding:1px 7px; }
.ix-notes           { font-size:12px; color:var(--text-2); line-height:1.5; margin-bottom:3px; }
.ix-date            { font-size:11px; color:var(--text-4); }

.ix-del-btn         { opacity:0; transition:opacity .15s; color:var(--red); flex-shrink:0; }
.interaction-row:hover .ix-del-btn { opacity:1; }

/* ============================================================
   Phase 3e — Memories
   ============================================================ */

.memory-list      { display:flex; flex-direction:column; gap:0; }

.memory-row       { display:flex; align-items:flex-start; gap:12px; padding:14px 0;
                    border-bottom:1px solid var(--border-soft); }
.memory-row:last-child { border-bottom:none; }

.mem-type-tag     { font-size:11px; font-weight:500; padding:3px 9px; border-radius:20px;
                    white-space:nowrap; flex-shrink:0; margin-top:2px; }

.mem-body         { flex:1; }
.mem-title        { font-size:13px; font-weight:500; color:var(--text-1); margin-bottom:4px; }
.mem-text         { font-size:13px; color:var(--text-2); line-height:1.65; margin-bottom:6px; }
.mem-footer       { display:flex; align-items:center; gap:10px; }
.mem-date         { font-size:11px; color:var(--text-4); }
.mem-private      { font-size:10px; color:var(--text-4); background:var(--surface);
                    border:1px solid var(--border-soft); border-radius:20px; padding:1px 7px; }

.mem-del-btn      { opacity:0; transition:opacity .15s; color:var(--red); flex-shrink:0; }
.memory-row:hover .mem-del-btn { opacity:1; }

.mem-private-label { display:flex; align-items:center; gap:8px; font-size:13px;
                     color:var(--text-2); cursor:pointer; }
.mem-private-label input { accent-color:var(--blue); }

/* ============================================================
   Phase 4 — Oracle Chat
   ============================================================ */

/* Full-page oracle layout */
.oracle-page        { display:grid; grid-template-columns:240px 1fr; height:calc(100vh - var(--topbar-h)); overflow:hidden; margin:-24px; }

/* Sidebar */
.oracle-sidebar         { background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.oracle-sidebar-header  { display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px; border-bottom:1px solid var(--border-soft); flex-shrink:0; }
.oracle-sidebar-title   { font-size:12px; font-weight:500; color:var(--text-2); text-transform:uppercase; letter-spacing:1px; }
.oracle-sidebar-empty   { padding:16px 14px; font-size:12px; color:var(--text-4); }
.oracle-conv-list       { flex:1; overflow-y:auto; padding:6px; }
.oracle-conv-item       { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding:8px 10px; border-radius:var(--radius-md); text-decoration:none; margin-bottom:2px; transition:background .1s; }
.oracle-conv-item:hover { background:var(--surface); }
.oracle-conv-item--active { background:var(--blue-light); }
.oracle-conv-title      { font-size:12px; color:var(--text-1); line-height:1.4; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.oracle-conv-item--active .oracle-conv-title { color:var(--blue); }
.oracle-conv-date       { font-size:10px; color:var(--text-4); white-space:nowrap; margin-top:2px; }

/* Main chat area */
.oracle-main            { display:flex; flex-direction:column; overflow:hidden; }
.oracle-chat-header     { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; }
.oracle-chat-identity   { display:flex; align-items:center; gap:10px; }
.oracle-avatar--lg      { width:36px; height:36px; background:var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.oracle-avatar--lg svg  { width:16px; height:16px; }
.oracle-chat-name       { font-size:14px; font-weight:500; color:var(--text-1); }
.oracle-chat-sub        { font-size:11px; color:var(--text-3); }

/* Messages */
.oracle-messages        { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }

.oracle-welcome         { text-align:center; padding:40px 20px; max-width:480px; margin:0 auto; }
.oracle-welcome-icon    { width:56px; height:56px; background:var(--blue-light); border:1px solid var(--blue-border); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--blue); }
.oracle-welcome-title   { font-size:18px; font-weight:500; color:var(--text-1); margin-bottom:8px; }
.oracle-welcome-sub     { font-size:13px; color:var(--text-3); line-height:1.6; margin-bottom:20px; }

.oracle-suggestions     { display:flex; flex-direction:column; gap:8px; }
.oracle-suggestion-chip { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 14px; font-size:13px; color:var(--text-2); text-align:left; cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s; }
.oracle-suggestion-chip:hover { border-color:var(--blue-border); background:var(--blue-light); color:var(--blue); }

/* Message bubbles */
.oracle-msg             { display:flex; align-items:flex-start; gap:10px; max-width:78%; }
.oracle-msg--user       { align-self:flex-end; flex-direction:row-reverse; }
.oracle-msg--assistant  { align-self:flex-start; }

.oracle-msg-avatar      { width:28px; height:28px; background:var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.oracle-msg-avatar svg  { width:13px; height:13px; }

.oracle-msg-bubble      { padding:10px 14px; border-radius:var(--radius-lg); font-size:13px; line-height:1.65; }
.oracle-msg--assistant .oracle-msg-bubble { background:var(--blue-light); border:1px solid var(--blue-border); color:#1a2030; border-top-left-radius:4px; }
.oracle-msg--user .oracle-msg-bubble      { background:var(--blue); color:#fff; border-top-right-radius:4px; }

/* Typing indicator */
.oracle-typing          { display:flex; align-items:center; gap:10px; }
.oracle-typing-dots     { display:flex; gap:4px; padding:10px 14px; background:var(--blue-light); border:1px solid var(--blue-border); border-radius:var(--radius-lg); border-top-left-radius:4px; }
.oracle-typing-dots span { width:6px; height:6px; background:var(--blue); border-radius:50%; animation:typingBounce 1.2s infinite; }
.oracle-typing-dots span:nth-child(2) { animation-delay:.2s; }
.oracle-typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

/* Input area */
.oracle-input-area      { border-top:1px solid var(--border); padding:14px 20px; background:var(--surface); flex-shrink:0; }
.oracle-context-pill    { display:inline-flex; align-items:center; gap:5px; background:var(--blue-light); border:1px solid var(--blue-border); border-radius:20px; padding:3px 10px; font-size:11px; color:var(--blue); margin-bottom:8px; }
.oracle-context-clear   { color:var(--blue); text-decoration:none; margin-left:2px; opacity:.7; }
.oracle-context-clear:hover { opacity:1; }
.oracle-input-row       { display:flex; align-items:flex-end; gap:8px; }
.oracle-textarea        { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:10px 14px; font-size:13px; color:var(--text-1); font-family:inherit; outline:none; resize:none; max-height:160px; line-height:1.5; transition:border-color .15s; }
.oracle-textarea:focus  { border-color:var(--blue); }
.oracle-send-btn        { width:38px; height:38px; background:var(--blue); border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .15s; color:#fff; }
.oracle-send-btn:hover  { background:var(--blue-dark); }
.oracle-send-btn:disabled { opacity:.5; cursor:default; }

.oracle-limit-banner    { padding:16px 20px; background:var(--red-light); border-top:1px solid var(--red-border); font-size:13px; color:#a03030; text-align:center; }
.oracle-limit-banner a  { color:#a03030; font-weight:500; }

@media (max-width:860px) {
  .oracle-page           { grid-template-columns:1fr; }
  .oracle-sidebar        { display:none; }
}

/* ============================================================
   Phase 5 — Notifications
   ============================================================ */

/* Bell in topbar */
.notif-bell-link    { position:relative; color:#4a7a9b; display:flex; align-items:center; text-decoration:none; transition:color .15s; }
.notif-bell-link:hover { color:#00c8ff; }
.notif-badge        { position:absolute; top:-7px; right:-9px; background:var(--red); color:#fff;
                      font-size:9px; font-weight:500; min-width:16px; height:16px; border-radius:20px;
                      display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* Notification page */
.notif-page-list    { padding:0; overflow:hidden; }
.notif-group-label  { font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-4);
                      font-weight:500; padding:12px 16px 6px; background:var(--surface); }
.notif-group-label:first-child { padding-top:16px; }

.notif-page-row     { display:flex; align-items:flex-start; gap:12px; padding:12px 16px;
                      border-bottom:1px solid var(--border-soft); background:#fff; transition:background .1s; }
.notif-page-row:last-child  { border-bottom:none; }
.notif-page-row:hover       { background:var(--surface); }
.notif-page-row--read       { opacity:.65; }

.notif-page-icon    { width:34px; height:34px; border-radius:var(--radius-md); display:flex;
                      align-items:center; justify-content:center; flex-shrink:0; }
.notif-page-body    { flex:1; }
.notif-page-title   { font-size:13px; font-weight:500; color:var(--text-1); margin-bottom:2px; }
.notif-page-sub     { font-size:12px; color:var(--text-2); line-height:1.5; margin-bottom:3px; }
.notif-page-time    { font-size:11px; color:var(--text-4); }
.notif-page-action  { flex-shrink:0; align-self:center; font-size:12px; padding:5px 10px; }

/* ============================================================
   Phase 6 — Settings
   ============================================================ */

.settings-layout        { display:grid; grid-template-columns:1fr 280px; gap:16px; align-items:start; }
.settings-col-main      { display:flex; flex-direction:column; gap:14px; }
.settings-col-side      { display:flex; flex-direction:column; gap:14px; }
.settings-card          { }
.settings-actions       { display:flex; justify-content:flex-end; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); }

/* Avatar row */
.settings-avatar-row    { display:flex; align-items:center; gap:14px; margin-bottom:4px; }
.settings-avatar        { width:52px; height:52px; border-radius:50%; background:var(--blue-light); border:1px solid var(--blue-border); color:var(--blue); font-size:17px; font-weight:500; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.settings-avatar img    { width:100%; height:100%; object-fit:cover; }
.settings-avatar-name   { font-size:15px; font-weight:500; color:var(--text-1); }
.settings-avatar-email  { font-size:13px; color:var(--text-3); }
.settings-avatar-provider { font-size:11px; color:var(--text-4); margin-top:2px; }

/* Notification prefs */
.settings-pref-list     { display:flex; flex-direction:column; gap:0; }
.settings-pref-row      { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border-soft); cursor:pointer; }
.settings-pref-row:last-child { border-bottom:none; }
.settings-pref-info     { flex:1; }
.settings-pref-title    { font-size:13px; font-weight:500; color:var(--text-1); display:block; }
.settings-pref-sub      { font-size:12px; color:var(--text-3); }
.settings-toggle        { width:36px; height:20px; appearance:none; background:var(--border); border-radius:20px; cursor:pointer; position:relative; flex-shrink:0; transition:background .2s; }
.settings-toggle::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .2s; }
.settings-toggle:checked { background:var(--blue); }
.settings-toggle:checked::after { left:18px; }

/* Data rows */
.settings-data-row      { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 0; }
.settings-data-title    { font-size:13px; font-weight:500; color:var(--text-1); margin-bottom:3px; }
.settings-data-sub      { font-size:12px; color:var(--text-3); line-height:1.5; max-width:360px; }

/* Plan card */
.plan-name              { font-size:20px; font-weight:500; color:var(--text-1); margin-bottom:3px; }
.plan-renews            { font-size:12px; color:var(--text-3); margin-bottom:14px; }
.plan-usage-list        { display:flex; flex-direction:column; gap:0; }
.plan-usage-row         { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--border-soft); }
.plan-usage-row:last-child { border-bottom:none; }
.plan-usage-label       { font-size:12px; color:var(--text-3); }
.plan-usage-val         { font-size:12px; font-weight:500; color:var(--text-1); display:flex; align-items:center; gap:4px; }
.plan-unlimited         { font-size:10px; color:var(--blue); background:var(--blue-light); border:1px solid var(--blue-border); border-radius:20px; padding:1px 7px; font-weight:500; }
.plan-upgrade-pitch     { font-size:12px; color:var(--text-2); line-height:1.6; }

@media (max-width:860px) {
  .settings-layout { grid-template-columns:1fr; }
}

/* ============================================================
   Phase 8 — Mini Games
   ============================================================ */

.games-grid         { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:24px; }

.game-card          { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; display:flex; flex-direction:column; gap:14px; }
.game-card-icon     { width:52px; height:52px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.game-card-body     { flex:1; }
.game-card-name     { font-size:15px; font-weight:500; color:var(--text-1); margin-bottom:4px; }
.game-card-desc     { font-size:12px; color:var(--text-3); line-height:1.5; margin-bottom:8px; }
.game-card-meta     { display:flex; align-items:center; gap:10px; }
.game-best          { font-size:11px; color:var(--blue); font-weight:500; }
.game-plays         { font-size:11px; color:var(--text-4); }
.game-new           { font-size:11px; background:var(--green-light); color:#2a7a4a; border:1px solid var(--green-border); border-radius:20px; padding:1px 8px; font-weight:500; }
.game-play-btn      { align-self:flex-start; }

/* Sessions list */
.sessions-list      { display:flex; flex-direction:column; gap:0; }
.session-row        { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.session-row:last-child { border-bottom:none; }
.session-game       { flex:1; color:var(--text-1); font-weight:500; }
.session-score      { color:var(--blue); font-weight:500; min-width:40px; text-align:right; }
.session-date       { color:var(--text-4); font-size:11px; min-width:40px; text-align:right; }

/* Game shell */
.game-shell         { max-width:520px; margin:0 auto; }
.game-screen        { display:flex; flex-direction:column; align-items:center; gap:20px; padding:32px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); text-align:center; }

.game-intro-icon    { width:72px; height:72px; border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center; }
.game-intro-title   { font-size:22px; font-weight:500; color:var(--text-1); }
.game-intro-desc    { font-size:14px; color:var(--text-3); line-height:1.6; max-width:360px; }
.game-big-btn       { font-size:15px; padding:12px 36px; }

/* HUD */
.game-hud           { display:flex; gap:32px; justify-content:center; width:100%; padding-bottom:16px; border-bottom:1px solid var(--border-soft); }
.game-hud-item      { text-align:center; }
.game-hud-val       { font-size:32px; font-weight:500; color:var(--text-1); letter-spacing:-1px; line-height:1; }
.game-hud-label     { font-size:11px; color:var(--text-4); text-transform:uppercase; letter-spacing:1px; margin-top:3px; }

/* Quick math */
.math-question      { font-size:42px; font-weight:500; color:var(--text-1); letter-spacing:-1px; margin:8px 0; }
.math-input-row     { display:flex; gap:8px; width:100%; max-width:240px; }
.math-input         { flex:1; font-size:24px; text-align:center; padding:10px; }
.math-feedback      { font-size:18px; font-weight:500; height:28px; }
.math-feedback--correct { color:var(--green); }
.math-feedback--wrong   { color:var(--red); }

/* Quiz / Recall */
.quiz-progress-bar  { width:100%; height:4px; background:var(--border-soft); border-radius:2px; overflow:hidden; }
.quiz-progress-fill { height:100%; background:var(--blue); border-radius:2px; transition:width .3s; }
.quiz-question      { font-size:18px; font-weight:500; color:var(--text-1); line-height:1.4; max-width:400px; }
.quiz-input-row     { display:flex; gap:8px; width:100%; }
.quiz-input         { flex:1; font-size:15px; }
.quiz-feedback      { font-size:14px; font-weight:500; height:24px; }
.quiz-feedback--correct { color:var(--green); }
.quiz-feedback--wrong   { color:var(--red); }
.recall-hint        { font-size:12px; color:var(--text-4); }

/* Results */
.game-result-score  { font-size:72px; font-weight:500; color:var(--blue); letter-spacing:-2px; line-height:1; }
.game-result-label  { font-size:14px; color:var(--text-3); }
.game-result-msg    { font-size:16px; font-weight:500; color:var(--text-1); }
.game-result-xp     { font-size:14px; color:var(--blue); font-weight:500; background:var(--blue-light); border:1px solid var(--blue-border); border-radius:20px; padding:4px 16px; }

@media (max-width:600px) {
  .games-grid { grid-template-columns:1fr; }
  .math-question { font-size:32px; }
  .game-result-score { font-size:56px; }
}

/* Missing utility classes */
.profile-header-info { flex: 1; }
.settings-sub        { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.milestone-check     { flex-shrink: 0; accent-color: var(--blue); width: 15px; height: 15px; cursor: pointer; }

/* Oracle data save confirmations */
.oracle-saves        { display:flex; flex-direction:column; gap:4px; margin:4px 0 8px 46px; }
.oracle-save-item    { font-size:12px; color:#1a9a60; background:#e4f7ee; border:1px solid #90d8b0;
                       border-radius:6px; padding:5px 10px; display:inline-block; }

.oracle-pending      { background:var(--blue-light); border:1px solid var(--blue-border);
                       border-radius:var(--radius-lg); padding:12px 14px; margin:4px 0 8px 46px;
                       max-width:78%; }
.oracle-pending-text { font-size:13px; color:var(--text-1); margin-bottom:8px; line-height:1.5; }
.oracle-pending-actions { display:flex; gap:8px; }
.oracle-confirm-btn  { background:var(--blue); color:#fff; border:none; border-radius:6px;
                       padding:5px 12px; font-size:12px; cursor:pointer; font-family:inherit;
                       transition:background .15s; }
.oracle-confirm-btn:hover { background:var(--blue-dark); }
.oracle-confirm-btn:disabled { opacity:.6; cursor:default; }
.oracle-dismiss-btn  { background:none; color:var(--text-3); border:1px solid var(--border);
                       border-radius:6px; padding:5px 12px; font-size:12px; cursor:pointer;
                       font-family:inherit; transition:border-color .15s; }
.oracle-dismiss-btn:hover { border-color:var(--blue-border); color:var(--blue); }

/* ============================================================
   Me Page
   ============================================================ */
.me-tabs         { display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.me-tab          { padding:8px 16px; font-size:13px; color:var(--text-3); text-decoration:none;
                   border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s; }
.me-tab:hover    { color:var(--text-1); }
.me-tab--active  { color:var(--blue); border-bottom-color:var(--blue); font-weight:500; }

.me-grid         { max-width:640px; display:flex; flex-direction:column; gap:14px; }

.me-avatar-row   { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.me-avatar       { width:56px; height:56px; border-radius:50%; background:var(--blue-light);
                   border:1px solid var(--blue-border); color:var(--blue); font-size:18px;
                   font-weight:500; display:flex; align-items:center; justify-content:center;
                   overflow:hidden; flex-shrink:0; }
.me-avatar img   { width:100%; height:100%; object-fit:cover; }
.me-name         { font-size:16px; font-weight:500; color:var(--text-1); }
.me-email        { font-size:13px; color:var(--text-3); margin-top:2px; }

.me-fact-group       { margin-bottom:16px; }
.me-fact-group-label { font-size:10px; text-transform:uppercase; letter-spacing:1.2px;
                       color:var(--text-4); font-weight:500; margin-bottom:6px; }
.me-fact-row         { display:flex; align-items:center; gap:10px; padding:7px 0;
                       border-bottom:1px solid var(--border-soft); }
.me-fact-row:last-child { border-bottom:none; }
.me-fact-key         { font-size:12px; color:var(--text-3); min-width:140px; }
.me-fact-value       { flex:1; font-size:13px; color:var(--text-1); font-weight:500; }
.me-fact-del         { opacity:0; font-size:12px; color:var(--red); transition:opacity .15s; }
.me-fact-row:hover .me-fact-del { opacity:1; }

.me-add-fact     { margin-top:20px; padding-top:20px; border-top:1px solid var(--border-soft); }

.me-stats-grid       { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.me-stat-card        { background:var(--surface-2); border:1px solid var(--border-soft);
                       border-radius:var(--radius-md); padding:14px 16px; }
.me-stat-card--wide  { grid-column:span 2; }
.me-stat-num         { font-size:28px; font-weight:500; color:var(--text-1); letter-spacing:-0.5px;
                       line-height:1; margin-bottom:4px; }
.me-stat-label       { font-size:11px; color:var(--text-4); text-transform:uppercase; letter-spacing:1px; }

@media (max-width:600px) {
  .me-stats-grid { grid-template-columns:1fr 1fr; }
  .me-stat-card--wide { grid-column:span 2; }
}