/* ================================================================
   ATLAS SG7 — COMMAND CENTER DESIGN SYSTEM
   Private founder operating system. Dark. Premium. Strategic.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
  /* Core backgrounds */
  --bg:          #07090F;
  --surface:     #0C1020;
  --surface-2:   #111828;
  --surface-3:   #162033;
  --hover:       #1A2438;

  /* Borders */
  --border:      #1B2538;
  --border-2:    #253050;

  /* Gold accent */
  --gold:        #C49A28;
  --gold-dim:    #8A6C1C;
  --gold-faint:  rgba(196, 154, 40, 0.07);
  --gold-glow:   rgba(196, 154, 40, 0.15);

  /* Steel blue accent */
  --steel:       #4A80A4;
  --steel-faint: rgba(74, 128, 164, 0.08);

  /* Text */
  --text:        #DDE2EC;
  --text-2:      #7A8499;
  --text-3:      #404860;
  --text-gold:   #C49A28;
  --text-steel:  #6A9EC4;

  /* Status */
  --s-active:    #2D9464;
  --s-active-bg: rgba(45, 148, 100, 0.12);
  --s-waiting:   #C49A28;
  --s-waiting-bg:rgba(196, 154, 40, 0.12);
  --s-blocked:   #A84040;
  --s-blocked-bg:rgba(168, 64, 64, 0.12);
  --s-complete:  #4A80A4;
  --s-complete-bg:rgba(74, 128, 164, 0.12);
  --s-scheduled: #7A5EA8;
  --s-scheduled-bg:rgba(122, 94, 168, 0.12);
  --s-draft:     #505870;
  --s-draft-bg:  rgba(80, 88, 112, 0.15);

  /* Danger */
  --danger:      #A84040;
  --danger-bg:   rgba(168, 64, 64, 0.1);

  /* Success */
  --success:     #2D9464;
  --success-bg:  rgba(45, 148, 100, 0.1);

  /* Layout */
  --sidebar-width: 220px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Spacing */
  --radius: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* Transition */
  --t: 0.15s ease;
}

/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; }
button { cursor: pointer; font-family: var(--font); }

/* ================================================================
   LAYOUT
   ================================================================ */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  flex-shrink: 0;
}

.sidebar-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar-logo-main {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold);
}

.sidebar-logo-sub {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-top: 3px;
  text-transform: uppercase;
}

/* Nav groups */
.sidebar-nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}

.nav-group {
  margin-bottom: 6px;
}

.nav-group-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 10px 20px 4px;
}

.sidebar-nav ul {
  padding: 0;
}

.sidebar-nav ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 450;
  color: var(--text-2);
  border-left: 2px solid transparent;
  transition: color var(--t), background var(--t), border-color var(--t);
  white-space: nowrap;
}

.sidebar-nav ul li a:hover {
  color: var(--text);
  background: var(--hover);
  border-left-color: var(--border-2);
}

.sidebar-nav ul li a.active {
  color: var(--gold);
  background: var(--gold-faint);
  border-left-color: var(--gold);
  font-weight: 500;
}

.nav-icon {
  font-size: 12px;
  opacity: 0.7;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-nav ul li a.active .nav-icon {
  opacity: 1;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-3);
  transition: color var(--t);
  padding: 4px 0;
}

.sidebar-footer a:hover {
  color: var(--text-2);
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font);
  transition: color var(--t);
  width: 100%;
  text-align: left;
}

.theme-toggle:hover {
  color: var(--gold);
}

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main-content {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  overflow-y: auto;
}

.page-wrapper {
  padding: 0 0 60px;
  max-width: 1400px;
}

/* ================================================================
   PAGE HEADER
   ================================================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px 20px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.page-subtitle {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.content {
  padding: 28px 40px;
}

/* ================================================================
   MOBILE HEADER
   ================================================================ */
.mobile-header {
  display: none;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.mobile-header-logo {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
}

.mobile-header-logo span {
  color: var(--gold);
}

.hamburger {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text-2);
  transition: var(--t);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 90;
}

/* ================================================================
   FLASH MESSAGES
   ================================================================ */
.flash-messages {
  padding: 16px 40px 0;
}

.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 8px;
  border-left: 3px solid;
}

.flash-success {
  background: var(--success-bg);
  border-color: var(--success);
  color: #6BD4A8;
}

.flash-error {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: #D4806A;
}

.flash-info {
  background: var(--steel-faint);
  border-color: var(--steel);
  color: var(--text-steel);
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--t);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  font-family: var(--font);
}

.btn-primary {
  background: var(--gold-faint);
  border-color: var(--gold-dim);
  color: var(--gold);
}

.btn-primary:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
  color: var(--gold);
}

.btn-secondary {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text-2);
}

.btn-secondary:hover {
  background: var(--hover);
  border-color: var(--border-2);
  color: var(--text);
}

.btn-danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: #D4806A;
}

.btn-danger:hover {
  background: rgba(168, 64, 64, 0.2);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  padding: 6px 10px;
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--hover);
}

/* Sync button */
.btn-sync-railway {
  background: var(--gold-faint);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-sync-railway:hover { background: var(--gold-glow); border-color: var(--gold); }
.btn-sync-railway:disabled { opacity: 0.5; cursor: default; }

.btn-sync {
  background: var(--gold-faint);
  border-color: var(--gold-dim);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.btn-sync:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
}

/* ================================================================
   BADGES
   ================================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: var(--mono);
}

.badge-active    { background: var(--s-active-bg);    color: #5DC498;   border-color: rgba(45,148,100,0.25); }
.badge-inactive,
.badge-archived  { background: var(--s-draft-bg);     color: var(--text-2); border-color: var(--border); }
.badge-draft     { background: var(--s-draft-bg);     color: var(--text-2); border-color: var(--border); }
.badge-in-review { background: var(--steel-faint);    color: var(--text-steel); border-color: rgba(74,128,164,0.25); }
.badge-approved  { background: var(--s-active-bg);    color: #5DC498;   border-color: rgba(45,148,100,0.25); }
.badge-scheduled { background: var(--s-scheduled-bg); color: #A890D4;   border-color: rgba(122,94,168,0.25); }
.badge-published { background: rgba(45,148,100,0.18); color: #4DC490;   border-color: rgba(45,148,100,0.35); }
.badge-complete  { background: var(--s-complete-bg);  color: var(--text-steel); border-color: rgba(74,128,164,0.25); }
.badge-waiting   { background: var(--s-waiting-bg);   color: var(--gold); border-color: rgba(196,154,40,0.25); }
.badge-blocked   { background: var(--s-blocked-bg);   color: #D48080;   border-color: rgba(168,64,64,0.25); }
.badge-in-progress { background: var(--gold-faint);   color: var(--gold); border-color: rgba(196,154,40,0.25); }

/* Status dot */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot-active   { background: var(--s-active); box-shadow: 0 0 6px var(--s-active); }
.status-dot-waiting  { background: var(--s-waiting); }
.status-dot-blocked  { background: var(--s-blocked); }
.status-dot-complete { background: var(--s-complete); }
.status-dot-inactive { background: var(--text-3); }

/* ================================================================
   TAGS
   ================================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  white-space: nowrap;
}

/* ================================================================
   STAT CARDS (Command Header row)
   ================================================================ */
.stats-row {
  display: flex;
  gap: 1px;
  border-bottom: 1px solid var(--border);
  background: var(--border);
}

.stat-card {
  flex: 1;
  padding: 16px 24px;
  background: var(--surface);
  min-width: 0;
}

.stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat-value.accent { color: var(--gold); }
.stat-value.active { color: var(--s-active); }

/* ================================================================
   COMMAND HEADER (Executive Overview specific)
   ================================================================ */
.command-header {
  padding: 20px 40px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--surface);
}

.command-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.command-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  font-family: var(--mono);
}

.command-date {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.06em;
}

.command-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
}

.sync-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s-active);
  box-shadow: 0 0 5px var(--s-active);
  flex-shrink: 0;
}

.sync-indicator.offline { background: var(--s-blocked); box-shadow: none; }
.sync-indicator.syncing { background: var(--gold); animation: pulse 1s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ================================================================
   SECTION HEADERS (within content)
   ================================================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}

.section-action {
  font-size: 11px;
  color: var(--text-3);
  transition: color var(--t);
}

.section-action:hover { color: var(--gold); }

/* ================================================================
   OPERATIONS BOARD (Agent list)
   ================================================================ */
.ops-board {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ops-board-header {
  display: grid;
  grid-template-columns: 1fr 1fr 90px 2fr;
  gap: 0;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ops-col-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}

.ops-row {
  display: grid;
  grid-template-columns: 1fr 1fr 90px 2fr;
  gap: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background var(--t);
  text-decoration: none;
}

.ops-row:last-child { border-bottom: none; }

.ops-row:hover { background: var(--hover); }

.ops-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ops-role {
  font-size: 12px;
  color: var(--text-2);
}

.ops-task {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================================
   LIST ITEMS (outputs, itineraries, diary, content)
   ================================================================ */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 4px;
  text-decoration: none;
  transition: background var(--t), border-color var(--t);
  cursor: pointer;
}

.list-item:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.list-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.list-item-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.list-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

/* ================================================================
   CARD
   ================================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}

.card-action {
  font-size: 11px;
  color: var(--text-3);
  transition: color var(--t);
}

.card-action:hover { color: var(--gold); }

/* ================================================================
   TOOLBAR (search + filters)
   ================================================================ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 180px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text);
  font-family: var(--font);
  transition: border-color var(--t);
  outline: none;
}

.search-input::placeholder { color: var(--text-3); }
.search-input:focus { border-color: var(--gold-dim); }

.filter-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-2);
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  transition: border-color var(--t);
  appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23404860' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.filter-select:focus { border-color: var(--gold-dim); }
.filter-select option { background: var(--surface-2); color: var(--text); }

/* ================================================================
   TABS
   ================================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  background: var(--surface);
  overflow-x: auto;
}

.tab-btn {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  letter-spacing: 0.02em;
  margin-bottom: -1px;
}

.tab-btn:hover { color: var(--text-2); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ================================================================
   FORMS
   ================================================================ */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font);
  transition: border-color var(--t);
  outline: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-3); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold-dim);
  background: var(--surface-3);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23404860' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 28px;
}

.form-select option { background: var(--surface-2); color: var(--text); }

.form-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  font-family: var(--mono);
}

/* Form grid */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

/* ================================================================
   TABLE
   ================================================================ */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 12px 14px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr {
  transition: background var(--t);
  cursor: pointer;
}

tbody tr:hover td { background: var(--hover); }

tbody td a {
  color: var(--text);
  font-weight: 500;
  transition: color var(--t);
}

tbody td a:hover { color: var(--gold); }

/* ================================================================
   CONTENT / MARKDOWN RENDER
   ================================================================ */
.markdown-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  color: var(--text);
  font-weight: 600;
  margin: 24px 0 10px;
  letter-spacing: -0.01em;
}

.markdown-body h1 { font-size: 18px; }
.markdown-body h2 { font-size: 15px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.markdown-body h3 { font-size: 13px; color: var(--text-2); }

.markdown-body p { margin-bottom: 14px; }
.markdown-body ul, .markdown-body ol { padding-left: 20px; margin-bottom: 14px; }
.markdown-body li { margin-bottom: 4px; list-style: disc; }
.markdown-body strong { color: var(--text); font-weight: 600; }
.markdown-body em { color: var(--gold); font-style: italic; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

.markdown-body code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--text-steel);
}

.markdown-body pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  overflow-x: auto;
  margin-bottom: 14px;
}

.markdown-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon {
  font-size: 28px;
  color: var(--text-3);
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.empty-state-text {
  font-size: 12px;
  color: var(--text-3);
  max-width: 320px;
  margin: 0 auto 20px;
}

/* ================================================================
   AGENT AVATAR (legacy support)
   ================================================================ */
.agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
}

/* ================================================================
   DETAIL PAGE
   ================================================================ */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  padding: 28px 40px;
}

.detail-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-meta-item {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
}

.detail-meta-item strong {
  color: var(--text-2);
  font-weight: 500;
}

.detail-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.detail-panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}

.detail-panel-body {
  padding: 16px;
}

/* ================================================================
   COVER IMAGE (content posts)
   ================================================================ */
.cover-image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
  opacity: 0.85;
}

.cover-thumb {
  width: 44px;
  height: 32px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border);
  opacity: 0.8;
}

/* ================================================================
   STATUS WORKFLOW BUTTONS
   ================================================================ */
.workflow-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ================================================================
   ATLAS COMMAND PANEL
   ================================================================ */
.atlas-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.atlas-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.atlas-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}

.atlas-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s-active);
  box-shadow: 0 0 6px var(--s-active);
}

.atlas-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  max-height: 420px;
}

.atlas-message {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 90%;
}

.atlas-message.user { align-self: flex-end; align-items: flex-end; }
.atlas-message.assistant { align-self: flex-start; align-items: flex-start; }

.atlas-message-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--mono);
}

.atlas-message.user .atlas-message-role { color: var(--steel); }
.atlas-message.assistant .atlas-message-role { color: var(--gold); }

.atlas-message-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
}

.atlas-message.user .atlas-message-content {
  background: var(--steel-faint);
  border-color: rgba(74,128,164,0.2);
  color: var(--text);
}

.atlas-message.assistant .atlas-message-content {
  background: var(--gold-faint);
  border-color: rgba(196,154,40,0.15);
}

.atlas-message-time {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--mono);
}

.atlas-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  background: var(--surface-2);
}

.atlas-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font);
  outline: none;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  line-height: 1.5;
  transition: border-color var(--t);
}

.atlas-input::placeholder { color: var(--text-3); }
.atlas-input:focus { border-color: var(--gold-dim); }

.atlas-send-btn {
  padding: 9px 14px;
  background: var(--gold-faint);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  flex-shrink: 0;
}

.atlas-send-btn:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
}

.atlas-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.atlas-mic-btn {
  padding: 9px 10px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: 14px;
  cursor: not-allowed;
  opacity: 0.4;
  flex-shrink: 0;
}

/* Quick commands */
.atlas-quick-commands {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.quick-cmd {
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 10px;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.quick-cmd:hover {
  background: var(--gold-faint);
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* Atlas loading */
.atlas-thinking {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 10px 14px;
  color: var(--text-3);
  font-size: 12px;
  font-family: var(--mono);
}

.atlas-thinking span {
  animation: blink 1.2s infinite;
}
.atlas-thinking span:nth-child(2) { animation-delay: 0.2s; }
.atlas-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* ================================================================
   DASHBOARD — OVERVIEW GRID
   ================================================================ */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  padding: 24px 40px;
}

.overview-main { display: flex; flex-direction: column; gap: 20px; }
.overview-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* Mini stat row on dashboard */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.mini-stat {
  background: var(--surface);
  padding: 12px 14px;
  text-align: center;
}

.mini-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.mini-stat-val.gold { color: var(--gold); }

.mini-stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
  margin-top: 2px;
}

/* ================================================================
   SECTION BLOCKS (reusable within dashboard)
   ================================================================ */
.section-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.section-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.section-block-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}

.section-block-link {
  font-size: 10px;
  color: var(--text-3);
  transition: color var(--t);
  font-family: var(--mono);
}

.section-block-link:hover { color: var(--gold); }

.section-block-body { padding: 0; }

.section-block-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--t);
}

.section-block-item:last-child { border-bottom: none; }
.section-block-item:hover { background: var(--hover); }

.section-block-item-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.section-block-item-meta {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--mono);
  white-space: nowrap;
}

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo-main {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.login-logo-sub {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
}

.login-card .form-group { margin-bottom: 16px; }

.login-submit {
  width: 100%;
  padding: 10px;
  background: var(--gold-faint);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--font);
  letter-spacing: 0.04em;
  margin-top: 8px;
}

.login-submit:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
}

.login-access-label {
  text-align: center;
  font-size: 10px;
  color: var(--text-3);
  margin-bottom: 24px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ================================================================
   UTILITY
   ================================================================ */
.text-gold    { color: var(--gold) !important; }
.text-muted   { color: var(--text-3) !important; }
.text-steel   { color: var(--text-steel) !important; }
.text-mono    { font-family: var(--mono); }
.text-xs      { font-size: 11px; }
.text-sm      { font-size: 12px; }
.text-right   { text-align: right; }
.text-caps    { text-transform: uppercase; letter-spacing: 0.08em; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

.mono { font-family: var(--mono); }

/* Inline code in labels etc */
code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--text-steel);
}

/* ================================================================
   LIGHT MODE
   ================================================================ */
[data-theme="light"] {
  --bg:          #F2F0EB;
  --surface:     #FFFFFF;
  --surface-2:   #F7F5F1;
  --surface-3:   #EDE9E2;
  --hover:       #EAE7E0;

  --border:      #DDD9D0;
  --border-2:    #C8C3B8;

  --gold:        #A87C18;
  --gold-dim:    #8A6410;
  --gold-faint:  rgba(168, 124, 24, 0.08);
  --gold-glow:   rgba(168, 124, 24, 0.16);

  --steel:       #3A6A8A;
  --steel-faint: rgba(58, 106, 138, 0.08);

  --text:        #1A1C24;
  --text-2:      #525A6E;
  --text-3:      #96A0B0;
  --text-gold:   #A87C18;
  --text-steel:  #3A6A8A;

  --s-active:    #1D7A50;
  --s-active-bg: rgba(29, 122, 80, 0.1);
  --s-waiting:   #A87C18;
  --s-waiting-bg:rgba(168, 124, 24, 0.1);
  --s-blocked:   #8A3030;
  --s-blocked-bg:rgba(138, 48, 48, 0.1);
  --s-complete:  #3A6A8A;
  --s-complete-bg:rgba(58, 106, 138, 0.1);
  --s-scheduled: #5A4A88;
  --s-scheduled-bg:rgba(90, 74, 136, 0.1);
  --s-draft:     #7A8090;
  --s-draft-bg:  rgba(122, 128, 144, 0.1);

  --danger:      #8A3030;
  --danger-bg:   rgba(138, 48, 48, 0.08);

  --success:     #1D7A50;
  --success-bg:  rgba(29, 122, 80, 0.08);
}

[data-theme="light"] .sidebar {
  background: #FFFFFF;
  border-right-color: var(--border);
}

[data-theme="light"] .command-header {
  background: #FFFFFF;
}

[data-theme="light"] .section-block-header,
[data-theme="light"] .atlas-panel-header,
[data-theme="light"] .atlas-input-area,
[data-theme="light"] .tab-nav,
[data-theme="light"] .toolbar,
[data-theme="light"] .ops-board-header {
  background: var(--surface-2);
}

[data-theme="light"] .detail-sidebar-panel h3 {
  background: var(--surface-2);
}

[data-theme="light"] .mini-stat {
  background: #FFFFFF;
}

[data-theme="light"] .atlas-input {
  background: var(--surface-2);
}

[data-theme="light"] .atlas-message.user .atlas-message-content {
  background: rgba(58, 106, 138, 0.07);
}

[data-theme="light"] .atlas-message.assistant .atlas-message-content {
  background: rgba(168, 124, 24, 0.06);
}

[data-theme="light"] .login-card {
  background: #FFFFFF;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* ================================================================
   COMPATIBILITY LAYER
   Old class names + CSS variables used by existing detail templates
   ================================================================ */

/* Old CSS variable aliases */
:root {
  --text-primary:    var(--text);
  --text-secondary:  var(--text-2);
  --text-muted:      var(--text-3);
  --surface-raised:  var(--surface-2);
  --accent:          var(--gold);
  --accent-hover:    #B08820;
  --accent-light:    var(--gold-faint);
  --info:            var(--steel);
  --info-light:      var(--steel-faint);
  --radius-md:       5px;
  --radius-lg:       8px;
  --radius-sm:       3px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 40px;
  font-size: 12px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
}

.breadcrumb a { color: var(--text-3); transition: color var(--t); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb-sep { color: var(--text-3); opacity: 0.4; }

/* Page header variants */
.page-header-left h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.page-header-left p {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
}

/* Detail layout (2-column: main + sidebar) */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  padding: 24px 40px;
  align-items: start;
}

.detail-main {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Tab nav (old name) */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  overflow-x: auto;
}

.tab-nav .tab-btn {
  padding: 11px 16px;
}

/* Detail sidebar panel */
.detail-sidebar-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.detail-sidebar-panel h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  margin: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Metadata key-value rows */
.meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex-wrap: wrap;
}

.meta-row:last-child { border-bottom: none; }

.meta-row-stack {
  flex-direction: column;
  gap: 6px;
}

.meta-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
  min-width: 72px;
  padding-top: 1px;
}

.meta-value {
  color: var(--text-2);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* Tags wrapper */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Notes block */
.notes-block {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Danger / delete zone */
.delete-zone {
  background: var(--danger-bg);
  border: 1px solid rgba(168,64,64,0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.delete-zone-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #D48080;
  font-family: var(--mono);
  margin-bottom: 4px;
}

.delete-zone-text {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Small button modifier */
.btn-sm {
  padding: 5px 11px;
  font-size: 11px;
}

/* Status actions bar (content detail) */
.status-actions {
  margin: 0 40px 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.status-actions-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}

/* Approve + publish buttons */
.btn-approve {
  background: var(--gold-faint);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}
.btn-approve:hover { background: var(--gold-glow); }

.btn-publish {
  background: var(--s-active-bg);
  border-color: var(--s-active);
  color: #5DC498;
  font-weight: 600;
}
.btn-publish:hover { background: rgba(45,148,100,0.2); }

/* Keyword chip */
.keyword-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--gold-faint);
  border: 1px solid rgba(196,154,40,0.2);
  color: var(--gold);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 500;
  margin: 2px;
}

/* Cover banner */
.cover-banner {
  width: calc(100% - 80px);
  margin: 0 40px;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-top: 20px;
  border: 1px solid var(--border);
  opacity: 0.9;
}

.cover-banner-placeholder {
  width: calc(100% - 80px);
  margin: 20px 40px 0;
  height: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================================================
   DATABASE TABLE VIEW
   ================================================================ */
.dbtable-page {
  padding: 0 40px 48px;
}

.dbtable-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Toolbar */
.dbtable-toolbar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface-2);
}

.dbtable-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}

.dbtable-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 13px;
  pointer-events: none;
}

.dbtable-search {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px 6px 28px;
  border-radius: var(--radius);
  font-family: var(--font);
  transition: border-color var(--t);
}

.dbtable-search:focus {
  outline: none;
  border-color: var(--border-2);
}

.dbtable-search::placeholder { color: var(--text-3); }

.dbtable-filter {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  padding: 6px 26px 6px 10px;
  border-radius: var(--radius);
  font-family: var(--font);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23404860' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color var(--t), color var(--t);
  min-width: 110px;
}

.dbtable-filter:hover { border-color: var(--border-2); color: var(--text); }
.dbtable-filter:focus { outline: none; border-color: var(--border-2); }

.dbtable-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.dbtable-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

/* Bulk actions bar */
.dbtable-bulk {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: var(--gold-faint);
  border-bottom: 1px solid rgba(196,154,40,0.18);
  font-size: 12px;
}

.dbtable-bulk.visible { display: flex; }

.dbtable-bulk-count {
  font-weight: 600;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.dbtable-bulk-actions {
  display: flex;
  gap: 6px;
}

/* Table */
.dbtable {
  width: 100%;
  border-collapse: collapse;
}

.dbtable thead tr {
  border-bottom: 1px solid var(--border);
}

.dbtable th {
  padding: 9px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
  white-space: nowrap;
  user-select: none;
  background: var(--surface-2);
}

.dbtable th.sortable { cursor: pointer; }
.dbtable th.sortable:hover { color: var(--text-2); }

.sort-icon { display: inline-block; margin-left: 3px; opacity: 0.35; font-style: normal; font-size: 9px; }
.dbtable th.sort-asc  .sort-icon { opacity: 1; color: var(--gold); }
.dbtable th.sort-desc .sort-icon { opacity: 1; color: var(--gold); }

.dbtable th.col-check,
.dbtable td.col-check {
  width: 40px;
  padding-right: 4px;
  text-align: center;
}

.dbtable-checkbox {
  width: 13px;
  height: 13px;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  accent-color: var(--gold);
  vertical-align: middle;
}

.dbtable tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}

.dbtable tbody tr:last-child { border-bottom: none; }
.dbtable tbody tr:hover { background: var(--hover); }
.dbtable tbody tr.selected { background: var(--gold-faint); }
.dbtable tbody tr.selected:hover { background: var(--gold-glow); }

.dbtable td {
  padding: 11px 14px;
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
  line-height: 1.4;
}

.dbtable-cell-primary { font-weight: 500; color: var(--text); font-size: 13px; }
.dbtable-cell-sub { font-size: 11px; color: var(--text-2); margin-top: 1px; }

.dbtable td.col-muted { color: var(--text-2); }
.dbtable td.col-mono  { font-family: var(--mono); font-size: 11px; color: var(--text-2); }

/* Thumbnail in table */
.dbtable-thumb {
  width: 44px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  display: block;
}

.dbtable-thumb-empty {
  width: 44px;
  height: 32px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 12px;
}

/* Row link overlay */
.dbtable-row-link {
  position: absolute;
  inset: 0;
}

.dbtable tbody tr { position: relative; }

/* Actions */
.dbtable td.col-actions { white-space: nowrap; text-align: right; }

.dbtable-action {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-3);
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--t);
  font-family: var(--mono);
  letter-spacing: 0.03em;
  gap: 4px;
}

.dbtable-action:hover {
  color: var(--text-2);
  border-color: var(--border);
  background: var(--surface-3);
}

/* Footer */
.dbtable-footer {
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
}

.dbtable-count {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* Empty state inside table */
.dbtable-empty {
  padding: 64px 20px;
  text-align: center;
}

.dbtable-empty-icon {
  font-size: 26px;
  color: var(--text-3);
  margin-bottom: 14px;
  opacity: 0.45;
}

.dbtable-empty-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
}

.dbtable-empty-text {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 16px;
}

/* ================================================================
   DIARY / NOTES
   ================================================================ */

/* ── List view ── */
.diary-list {
  padding: 0 40px 8px;
}

.diary-list-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--t);
  cursor: pointer;
}

.diary-list-item:hover .diary-list-title { color: var(--gold); }
.diary-list-item:last-child { border-bottom: none; }

.diary-list-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
  padding-top: 2px;
}

.diary-date-day {
  font-size: 22px;
  font-weight: 300;
  color: var(--text-2);
  line-height: 1;
  font-family: var(--mono);
  letter-spacing: -0.02em;
}

.diary-date-mon {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--mono);
  margin-top: 3px;
  letter-spacing: 0.04em;
}

.diary-list-body { flex: 1; min-width: 0; }

.diary-list-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px;
  transition: color var(--t);
}

.diary-list-summary {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 8px;
  max-width: 680px;
}

.diary-list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* Tone pill */
.diary-tone-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 20px;
  border: 1px solid;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.diary-tone-reflective   { color: var(--text-steel); border-color: rgba(74,128,164,0.3); background: var(--steel-faint); }
.diary-tone-strategic    { color: var(--gold); border-color: rgba(196,154,40,0.3); background: var(--gold-faint); }
.diary-tone-emotional    { color: #D48080; border-color: rgba(168,64,64,0.25); background: var(--danger-bg); }
.diary-tone-conflicted   { color: #A890D4; border-color: rgba(122,94,168,0.3); background: var(--s-scheduled-bg); }
.diary-tone-exploratory  { color: #5DC498; border-color: rgba(45,148,100,0.3); background: var(--s-active-bg); }
.diary-tone-frustrated   { color: #D48080; border-color: rgba(168,64,64,0.25); background: var(--danger-bg); }
.diary-tone-decisive     { color: var(--gold); border-color: rgba(196,154,40,0.3); background: var(--gold-faint); }
.diary-tone-anxious      { color: #A890D4; border-color: rgba(122,94,168,0.3); background: var(--s-scheduled-bg); }
.diary-tone-optimistic   { color: #5DC498; border-color: rgba(45,148,100,0.3); background: var(--s-active-bg); }

/* Theme and signal chips */
.diary-theme-chip {
  display: inline-flex;
  padding: 2px 7px;
  font-size: 10px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  word-break: break-word;
  max-width: 100%;
}

.diary-signal-chip {
  display: inline-flex;
  padding: 2px 7px;
  font-size: 10px;
  color: var(--gold);
  background: var(--gold-faint);
  border: 1px solid rgba(196,154,40,0.2);
  border-radius: 2px;
  font-family: var(--mono);
  word-break: break-all;
  max-width: 100%;
}

.diary-followup {
  font-size: 11px;
  color: var(--gold);
  opacity: 0.8;
}

.diary-no-reflection {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--mono);
  opacity: 0.6;
}

/* Empty state */
.diary-empty {
  padding: 80px 0 60px;
  text-align: center;
}

.diary-empty-icon {
  font-size: 28px;
  color: var(--text-3);
  margin-bottom: 16px;
  opacity: 0.35;
}

.diary-empty-title {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-2);
  margin-bottom: 6px;
}

.diary-empty-text {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ── Detail layout ── */
.diary-detail-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 0;
  padding: 0 40px 60px;
  align-items: start;
}

.diary-detail-main {
  padding-right: 40px;
  border-right: 1px solid var(--border);
}

.diary-detail-sidebar {
  padding-left: 32px;
}

/* Original entry block */
.diary-original {
  margin-bottom: 40px;
}

.diary-original-label,
.diary-reflection-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
  margin-bottom: 14px;
}

.diary-original-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  font-weight: 300;
}

/* Reflection block */
.diary-reflection {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}

.diary-reflection-body {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-2);
}

.diary-reflection-body h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
  margin: 24px 0 10px;
}

.diary-reflection-body h1 {
  display: none; /* hide "AI Reflection" h1 — label handles it */
}

.diary-reflection-body p {
  margin-bottom: 12px;
  color: var(--text-2);
}

.diary-reflection-body ul,
.diary-reflection-body ol {
  margin: 8px 0 12px 18px;
  list-style: disc;
}

.diary-reflection-body li {
  margin-bottom: 6px;
  color: var(--text-2);
}

.diary-reflection-empty {
  border-top: 1px solid var(--border);
  padding-top: 28px;
}

/* ── Writing page ── */
.diary-write-page {
  min-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  padding: 0 80px 60px;
  max-width: 800px;
  position: relative;
}

.diary-write-header {
  padding: 24px 0 32px;
}

.diary-write-back {
  font-size: 12px;
  color: var(--text-3);
  text-decoration: none;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  transition: color var(--t);
}

.diary-write-back:hover { color: var(--text-2); }

.diary-write-meta {
  margin-bottom: 8px;
}

.diary-write-date {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.diary-write-date:focus { color: var(--text-2); }

.diary-write-title {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 24px;
  font-weight: 400;
  font-family: var(--font);
  letter-spacing: -0.01em;
  padding: 0 0 16px;
  outline: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.diary-write-title::placeholder { color: var(--text-3); }

.diary-write-body {
  width: 100%;
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 300;
  font-family: var(--font);
  line-height: 1.85;
  resize: none;
  outline: none;
  min-height: 380px;
  padding: 0;
}

.diary-write-body::placeholder { color: var(--text-3); }

.diary-write-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  margin-top: 32px;
}

.diary-write-hint {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.diary-write-submit {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-size: 12px;
  font-family: var(--font);
  padding: 7px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--t);
  letter-spacing: 0.02em;
}

.diary-write-submit:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: var(--gold-faint);
}

.diary-write-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reflecting overlay */
.diary-reflecting-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 15, 0.75);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.diary-reflecting-overlay.visible { display: flex; }

.diary-reflecting-inner { text-align: center; }

.diary-reflecting-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.diary-reflecting-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.3;
  animation: diaryPulse 1.2s ease-in-out infinite;
}

.diary-reflecting-dots span:nth-child(2) { animation-delay: 0.2s; }
.diary-reflecting-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes diaryPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
  40% { opacity: 1; transform: scale(1.1); }
}

.diary-reflecting-label {
  font-size: 13px;
  color: var(--text-2);
  font-family: var(--mono);
  letter-spacing: 0.1em;
}

/* Light mode adjustments */
[data-theme="light"] .diary-reflecting-overlay { background: rgba(242, 240, 235, 0.82); }
[data-theme="light"] .diary-original-body { color: #1A1C24; }

/* Mobile */
@media (max-width: 768px) {
  .diary-list { padding: 0 20px 8px; }
  .diary-detail-layout { grid-template-columns: 1fr; padding: 0 20px 40px; }
  .diary-detail-main { padding-right: 0; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 32px; margin-bottom: 32px; }
  .diary-detail-sidebar { padding-left: 0; }
  .diary-write-page { padding: 0 24px 40px; }
}

/* ================================================================
   DAILY HIGHLIGHT (Dashboard)
   ================================================================ */

.daily-highlight-block {
  display: block;
  padding: 16px 18px 18px;
  text-decoration: none;
  transition: background var(--t);
  border-radius: 0 0 var(--radius) var(--radius);
}
.daily-highlight-block:hover {
  background: var(--hover);
}
.daily-highlight-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  margin-bottom: 10px;
}
.daily-highlight-source {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ================================================================
   READWISE HIGHLIGHTS
   ================================================================ */
.rw-highlight-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 6px;
}

.rw-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.rw-content-flag {
  display: inline-flex;
  padding: 2px 7px;
  font-size: 10px;
  color: var(--gold);
  background: var(--gold-faint);
  border: 1px solid rgba(196,154,40,0.2);
  border-radius: 2px;
  font-family: var(--mono);
  font-style: normal;
}

/* Light-mode specific tweaks for filter chevrons */
[data-theme="light"] .dbtable-filter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2396A0B0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ================================================================
   RESPONSIVE — MOBILE
   ================================================================ */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -240px;
    height: 100vh;
    z-index: 100;
    transition: left 0.25s ease;
    width: 240px;
    min-width: 240px;
  }

  .sidebar.open { left: 0; }

  .sidebar-overlay.visible {
    display: block;
  }

  .mobile-header { display: flex; }

  .main-content { width: 100%; }

  .page-header { padding: 16px 20px; }
  .content { padding: 20px; }
  .toolbar { padding: 12px 20px; }
  .tabs { padding: 0 20px; }

  .overview-grid {
    grid-template-columns: 1fr;
    padding: 16px 20px;
  }

  .mini-stats { grid-template-columns: repeat(3, 1fr); }

  .detail-grid { grid-template-columns: 1fr; padding: 16px 20px; }
  .detail-layout { grid-template-columns: 1fr; padding: 16px 20px; }
  .cover-banner, .cover-banner-placeholder { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; }
  .status-actions { margin: 0 20px; }
  .breadcrumb { padding: 12px 20px; }

  .form-grid-2 { grid-template-columns: 1fr; }

  .ops-board-header,
  .ops-row { grid-template-columns: 1fr 80px; }

  .ops-role, .ops-task { display: none; }

  .flash-messages { padding: 12px 20px 0; }

  .dbtable-page { padding: 0 16px 32px; }
  .dbtable th.col-check, .dbtable td.col-check { display: none; }
  .dbtable th.col-hide-mobile, .dbtable td.col-hide-mobile { display: none; }
  .dbtable-toolbar { flex-wrap: wrap; }
  .dbtable-search-wrap { max-width: 100%; }
  .dbtable-toolbar-right { margin-left: 0; }
}

/* ================================================================
   MOBILE LIGHT THEME
   ================================================================ */
@media (max-width: 768px) {
  :root {
    --bg:          #F5F6F8;
    --surface:     #FFFFFF;
    --surface-2:   #F0F2F5;
    --surface-3:   #E8EBF0;
    --hover:       #EDF0F5;

    --border:      #DDE1EA;
    --border-2:    #C8CDD8;

    --text:        #1A1F2E;
    --text-2:      #4A5268;
    --text-3:      #8A92A8;
    --text-gold:   #9A7420;
    --text-steel:  #3A6A8A;

    --gold:        #9A7420;
    --gold-dim:    #B89030;
    --gold-faint:  rgba(154, 116, 32, 0.08);
    --gold-glow:   rgba(154, 116, 32, 0.15);

    --steel:       #3A6A8A;
    --steel-faint: rgba(58, 106, 138, 0.08);

    --s-active:    #1E7A50;
    --s-active-bg: rgba(30, 122, 80, 0.10);
    --s-waiting:   #9A7420;
    --s-waiting-bg:rgba(154, 116, 32, 0.10);
    --s-blocked:   #8A2020;
    --s-blocked-bg:rgba(138, 32, 32, 0.10);
    --s-complete:  #3A6A8A;
    --s-complete-bg:rgba(58, 106, 138, 0.10);
    --s-draft:     #606878;
    --s-draft-bg:  rgba(96, 104, 120, 0.12);
  }

  /* Sharpen shadows for light mode */
  .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.08); }
  .command-header { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
}