/* ATLAS Visual Identity v3
   Direction: Obsidian Brief
   Goal: premium dark career command center with daily briefing hierarchy, refined surfaces,
   disciplined action styling, and clear system trust states.
   Red is reserved for danger/error only.
*/

:root {
  --bg: #05060a;
  --bg2: #090b12;
  --panel: rgba(15,17,24,.88);
  --panel2: rgba(8,10,16,.96);
  --panel3: rgba(23,25,35,.68);
  --line: rgba(239,232,219,.085);
  --line2: rgba(139,149,255,.30);
  --shadow: 0 30px 90px rgba(0,0,0,.66);

  --text: #f3efe7;
  --muted: #aaa4af;
  --muted2: #746f7c;

  --obsidian: #05060a;
  --ink: #090b12;
  --graphite: #141821;
  --graphite2: #1c2230;
  --bone: #f3efe7;
  --bone2: #d7d0c2;
  --indigo: #8b95ff;
  --indigo2: #5551e8;
  --gold: #d9ad63;
  --gold2: #a8792e;
  --violet: #ac5cff;
  --violet2: #7c2ee8;
  --emerald: #36d99a;
  --emerald2: #0e9f6e;
  --slate: #aeb8c9;
  --danger: #f05265;

  --sky: #aeb8c9;
  --amber: #d9ad63;
  --rose: #f05265;
  --orange: #c48745;
  --green: #36d99a;
  --cyan: #8b95ff;
  --red: #f05265;
  --blue: #aeb8c9;
  --purple: #ac5cff;
  --brand: #d9ad63;

  --atlas-radius-lg: 24px;
  --atlas-radius-md: 18px;
  --atlas-radius-sm: 13px;
  --atlas-focus: 0 0 0 4px rgba(139,149,255,.14);
  --atlas-card-shadow: 0 22px 70px rgba(0,0,0,.50);
  --atlas-premium-border: rgba(239,232,219,.105);
}

body {
  background:
    radial-gradient(1000px 700px at 82% -12%, rgba(139,149,255,.115), transparent 62%),
    radial-gradient(760px 540px at -8% 84%, rgba(217,173,99,.078), transparent 66%),
    radial-gradient(560px 420px at 45% 112%, rgba(172,92,255,.045), transparent 70%),
    linear-gradient(155deg, #05060a 0%, #0b0d14 48%, #040407 100%) !important;
  color: var(--text) !important;
  text-rendering: geometricPrecision;
}

body::before {
  opacity: .095 !important;
  background-image:
    linear-gradient(rgba(139,149,255,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,173,99,.032) 1px, transparent 1px) !important;
}

body::after { display:none !important; }

.sidebar,
.mobile-top,
.mobile-bottom,
.card,
.modal,
.settings-modal,
.output-box,
.quick-panel,
.qc-panel,
.atlas-update-banner,
.atlas-conflict-box,
.atlas-sync-box,
.atlas-sync-float,
.atlas-device-sync-card,
.atlas-push-settings,
.atlas-daily-briefing {
  background:
    linear-gradient(145deg, rgba(18,20,29,.94), rgba(8,10,15,.95)) !important;
  border-color: var(--atlas-premium-border) !important;
  box-shadow: var(--atlas-card-shadow) !important;
}

.card,
.modal,
.settings-modal,
.output-box,
.quick-panel,
.qc-panel,
.atlas-device-sync-card,
.atlas-push-settings,
.atlas-daily-briefing {
  border-radius: var(--atlas-radius-lg) !important;
}

.card,
.output-box,
.callout,
.atlas-device-sync-card,
.atlas-push-settings {
  position: relative;
  overflow: hidden;
}

.card::after,
.atlas-daily-briefing::after,
.atlas-device-sync-card::after,
.atlas-push-settings::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.030), transparent 34%);
  opacity: .9;
}

.card:hover,
.action-btn:hover,
.nav-btn:hover,
.nav-item:hover,
.mobile-bottom button:hover,
button:hover {
  border-color: rgba(139,149,255,.38) !important;
}

.brand,
.hero,
.command-card,
.connection-pack,
.job-paste-fallback,
.atlas-daily-briefing,
.atlas-today-top-mission,
.atlas-best-next-card {
  background:
    linear-gradient(145deg, rgba(217,173,99,.105), rgba(14,16,22,.82) 48%, rgba(139,149,255,.082)) !important;
  border-color: rgba(217,173,99,.24) !important;
}

.brand h1,
.hero h2,
.section-header h2,
.card h3,
.card h4,
.modal h3,
.mobile-current-title {
  color: var(--text) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.38) !important;
}

.section-header h2,
.hero h2,
.atlas-brief-title,
.atlas-daily-briefing h3 {
  letter-spacing: -.035em !important;
}

.brand h1,
.logo-text,
.hero strong,
.eyebrow,
.mobile-kicker,
.atlas-brief-kicker,
.atlas-device-kicker {
  color: var(--gold) !important;
}

.eyebrow,
.mobile-kicker,
.stat-label,
.form-label,
.nav-ia-title small,
.connection-cell small,
.atlas-brief-kicker,
.atlas-device-kicker,
.atlas-status-label {
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

p,
.small,
.card p,
.section-header p,
.hero .lead,
.item,
.check-row,
.job-card p {
  color: var(--muted) !important;
}

.nav-btn,
.nav-item,
.nav-ia-item,
.mobile-bottom button,
.mobile-menu-items button {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.nav-btn.active,
.nav-item.active,
.nav-ia-item.active,
.mobile-bottom button.active,
.mobile-menu-items button.active {
  background: linear-gradient(135deg, rgba(139,149,255,.22), rgba(85,81,232,.16)) !important;
  border-color: rgba(139,149,255,.52) !important;
  color: var(--text) !important;
  box-shadow: inset 3px 0 0 var(--gold), 0 10px 34px rgba(139,149,255,.14) !important;
}

button,
.action-btn,
.primary-btn,
.mobile-menu-btn,
.mobile-sync-btn,
.mobile-ai-key-btn,
.atlas-update-actions button,
.atlas-conflict-actions button,
.atlas-sync-actions button,
.atlas-device-actions button,
.atlas-push-actions button {
  background: linear-gradient(180deg, rgba(25,28,38,.91), rgba(11,13,19,.96)) !important;
  border-color: rgba(239,232,219,.12) !important;
  color: var(--text) !important;
  border-radius: var(--atlas-radius-sm) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.26) !important;
}

.action-btn.primary,
.primary-btn,
button.primary,
#genMockBtn,
#saveCloudBtn,
#atlasSaveCloud,
#atlasUpdateNow,
#atlasConflictSaveFirst,
[data-atlas-sync-now],
[data-atlas-test-push] {
  background: linear-gradient(180deg, rgba(139,149,255,.94), rgba(85,81,232,.94)) !important;
  border-color: rgba(139,149,255,.72) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 36px rgba(139,149,255,.20) !important;
}

.action-btn.danger,
button.danger,
.clear-btn,
#clearSyncSettingsBtn,
#atlasClearSync {
  background: rgba(240,82,101,.10) !important;
  border-color: rgba(240,82,101,.42) !important;
  color: #ffbdc5 !important;
}

button:focus-visible,
.action-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.nav-btn:focus-visible,
.mobile-bottom button:focus-visible {
  outline: none !important;
  box-shadow: var(--atlas-focus) !important;
}

.tag,
.ai-badge,
.badge,
.pill,
.atlas-sync-pill,
.atlas-push-pill,
.atlas-device-pill,
.atlas-brief-chip {
  background: rgba(139,149,255,.105) !important;
  border-color: rgba(139,149,255,.30) !important;
  color: #d0d4ff !important;
  border-radius: 999px !important;
}

.ai-badge,
.tag.purple,
.tag.violet,
.atlas-ai-label {
  background: rgba(172,92,255,.12) !important;
  border-color: rgba(172,92,255,.32) !important;
  color: #e0bdff !important;
}

.tag.amber,
.warn,
.callout.warn,
.tag.brand,
.atlas-warning-state {
  color: #efd39f !important;
  border-color: rgba(217,173,99,.36) !important;
  background: rgba(217,173,99,.10) !important;
}

.tag.green,
.good,
.item.check::before,
.check-row input:checked,
.status-good,
.atlas-healthy-state {
  color: var(--emerald) !important;
  border-color: rgba(54,217,154,.42) !important;
}

input,
textarea,
select {
  background: rgba(5,6,10,.66) !important;
  border-color: rgba(239,232,219,.105) !important;
  color: var(--text) !important;
  border-radius: var(--atlas-radius-sm) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(139,149,255,.56) !important;
  box-shadow: var(--atlas-focus) !important;
}

.progress > span,
.bar-fill,
.progress-fill,
.ring-progress,
.meter-fill,
.bar span {
  background: linear-gradient(90deg, var(--indigo2), var(--indigo), var(--gold)) !important;
}

.progress-ring,
.score-circle,
.circle-score,
.score-ring-mini {
  filter: drop-shadow(0 0 18px rgba(139,149,255,.14)) !important;
}

.metric .value,
.stat-value,
.progress-ring b,
.score-circle span,
.digest-stat-value {
  color: var(--text) !important;
}

.chart-line,
.sparkline path,
svg path[stroke='var(--cyan)'],
svg path[stroke='#00e5ff'] {
  stroke: var(--indigo) !important;
}

.card::before,
.atlas-daily-briefing::before,
.atlas-device-sync-card::before {
  background: linear-gradient(90deg, transparent, rgba(139,149,255,.16), transparent) !important;
}

.callout,
.output-box {
  border-color: rgba(239,232,219,.10) !important;
}

.output-box {
  background:
    linear-gradient(145deg, rgba(12,14,21,.95), rgba(6,7,11,.96)) !important;
  color: var(--bone2) !important;
}

.callout.good {
  border-color: rgba(54,217,154,.36) !important;
  background: rgba(54,217,154,.08) !important;
}

.callout.danger {
  border-color: rgba(240,82,101,.44) !important;
  background: rgba(240,82,101,.08) !important;
}

.mobile-bottom {
  background: rgba(5,6,10,.93) !important;
  border-color: rgba(239,232,219,.10) !important;
  backdrop-filter: blur(18px);
}

.mobile-bottom button b,
.mobile-bottom button.active b {
  color: var(--gold) !important;
}

#qcContainer .qc-toggle,
.qc-toggle,
.quick-fab,
.fab {
  background: linear-gradient(180deg, rgba(139,149,255,.98), rgba(85,81,232,.98)) !important;
  color: white !important;
  box-shadow: 0 18px 48px rgba(139,149,255,.25) !important;
}

.hero::after,
.brand::after {
  opacity: .16 !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(139,149,255,.44) !important;
  border-radius: 999px;
}

/* Phase 3E hierarchy refinements */
.digest-card,
.atlas-daily-briefing,
.progress-intel-card {
  border-width: 1px !important;
}

.digest-grid,
.score-grid,
.atlas-brief-grid,
.atlas-device-grid {
  gap: 12px !important;
}

.digest-stat,
.score-card,
.connection-cell,
.atlas-brief-mini-card,
.atlas-device-cell {
  background: rgba(5,6,10,.38) !important;
  border-color: rgba(239,232,219,.085) !important;
  border-radius: var(--atlas-radius-md) !important;
}

.job-card,
.resume-version-card,
.project-card,
.flashcard-card,
.weak-topic-card {
  border-color: rgba(239,232,219,.09) !important;
}

.job-card:hover,
.resume-version-card:hover,
.project-card:hover,
.flashcard-card:hover,
.weak-topic-card:hover,
.digest-stat:hover,
.score-card:hover {
  border-color: rgba(217,173,99,.24) !important;
}

/* AI surfaces should feel saved and intentional */
[id*='AiOut'],
[id*='AIOut'],
.output-box:has(+ .btn-row),
.ai-output,
.saved-ai-mini {
  border-color: rgba(172,92,255,.22) !important;
  background:
    linear-gradient(145deg, rgba(172,92,255,.055), rgba(7,8,13,.92)) !important;
}

.saved-ai-mini {
  border-radius: var(--atlas-radius-md) !important;
}

/* System trust states */
[data-state='saved'],
[data-state='synced'],
[data-state='on'],
[data-status='healthy'] {
  border-color: rgba(54,217,154,.34) !important;
}

[data-state='dirty'],
[data-state='checking'],
[data-state='warning'],
[data-status='attention'] {
  border-color: rgba(217,173,99,.34) !important;
}

[data-state='failed'],
[data-state='conflict'],
[data-status='danger'] {
  border-color: rgba(240,82,101,.42) !important;
}

@media (max-width: 760px) {
  :root {
    --atlas-radius-lg: 20px;
    --atlas-radius-md: 16px;
  }
  .section-header h2 { font-size: 28px !important; }
  .card { border-radius: var(--atlas-radius-lg) !important; }
  .mobile-top { border-bottom-color: rgba(217,173,99,.18) !important; }
  .btn-row,
  .atlas-device-actions,
  .atlas-push-actions {
    gap: 8px !important;
  }
  button,
  .action-btn {
    min-height: 42px;
  }
}