:root {
  --uh-bg: #F6F6F8;
  --uh-surface: #FFFFFF;
  --uh-surface-elevated: #FAFAFA;
  --uh-text-primary: #1C1C1E;
  --uh-text-secondary: #6B6B70;
  --uh-text-tertiary: #9B9BA1;
  --uh-accent: #3D6DF2;
  --uh-divider: #E5E5E8;
  --uh-critical: #E14C4C;
  --uh-warning: #D6902B;
  --uh-success: #34A853;
  --uh-radius-card: 16px;
  --uh-radius-control: 10px;
  --uh-space-xs: 4px;
  --uh-space-sm: 8px;
  --uh-space-md: 12px;
  --uh-space-lg: 20px;
  --uh-space-xl: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --uh-bg: #0B0B0D;
    --uh-surface: #18181B;
    --uh-surface-elevated: #222226;
    --uh-text-primary: #F2F2F3;
    --uh-text-secondary: #9A9AA0;
    --uh-text-tertiary: #6E6E73;
    --uh-divider: #2C2C30;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--uh-bg);
  color: var(--uh-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
}

a { color: inherit; text-decoration: none; }

.uh-shell {
  display: flex;
  min-height: 100vh;
}

.uh-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--uh-surface);
  border-right: 1px solid var(--uh-divider);
  padding: var(--uh-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--uh-space-xs);
}

.uh-sidebar .uh-logo {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: var(--uh-space-lg);
}

.uh-nav-link {
  padding: var(--uh-space-sm) var(--uh-space-md);
  border-radius: var(--uh-radius-control);
  color: var(--uh-text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--uh-space-sm);
}

.uh-nav-link:hover { background: var(--uh-surface-elevated); }
.uh-nav-link.active { background: var(--uh-accent); color: white; }

.uh-main {
  flex: 1;
  padding: var(--uh-space-xl);
  max-width: 900px;
}

.uh-card {
  background: var(--uh-surface);
  border-radius: var(--uh-radius-card);
  padding: var(--uh-space-lg);
  margin-bottom: var(--uh-space-md);
}

.uh-greeting { font-size: 1.8rem; font-weight: 700; margin: 0 0 4px; }
.uh-subtle { color: var(--uh-text-secondary); margin: 0; }

.uh-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uh-text-tertiary);
  margin: var(--uh-space-lg) 0 var(--uh-space-sm);
}

.uh-row {
  display: flex;
  align-items: center;
  gap: var(--uh-space-md);
  padding: var(--uh-space-sm) 0;
  border-bottom: 1px solid var(--uh-divider);
}
.uh-row:last-child { border-bottom: none; }

.uh-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.uh-time { font-variant-numeric: tabular-nums; color: var(--uh-text-secondary); width: 56px; flex-shrink: 0; }

.uh-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  display: inline-block;
}
.uh-badge-warning { background: rgba(214,144,43,0.12); color: var(--uh-warning); }
.uh-badge-critical { background: rgba(225,76,76,0.12); color: var(--uh-critical); }
.uh-badge-neutral { background: rgba(107,107,112,0.12); color: var(--uh-text-secondary); }

.uh-btn {
  background: var(--uh-accent);
  color: white;
  border: none;
  border-radius: var(--uh-radius-control);
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
.uh-btn:hover { opacity: 0.9; }
.uh-btn-secondary { background: var(--uh-surface-elevated); color: var(--uh-text-primary); border: 1px solid var(--uh-divider); }

.uh-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--uh-radius-control);
  border: 1px solid var(--uh-divider);
  background: var(--uh-surface);
  color: var(--uh-text-primary);
  font-size: 0.95rem;
  margin-bottom: var(--uh-space-sm);
}

.uh-auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--uh-bg);
}
.uh-auth-card {
  background: var(--uh-surface);
  border-radius: var(--uh-radius-card);
  padding: var(--uh-space-xl);
  width: 360px;
}

.uh-error { color: var(--uh-critical); font-size: 0.88rem; margin-bottom: var(--uh-space-sm); }

.uh-empty {
  text-align: center;
  padding: var(--uh-space-xl);
  color: var(--uh-text-secondary);
}

.uh-chat-log { display: flex; flex-direction: column; gap: var(--uh-space-md); margin-bottom: var(--uh-space-lg); }
.uh-chat-user {
  align-self: flex-start;
  background: rgba(61,109,242,0.12);
  padding: var(--uh-space-sm) var(--uh-space-md);
  border-radius: var(--uh-radius-control);
  font-weight: 500;
}
.uh-chat-ai { background: var(--uh-surface); padding: var(--uh-space-lg); border-radius: var(--uh-radius-card); }

.uh-composer { display: flex; gap: var(--uh-space-sm); }

.uh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--uh-space-md); }

.uh-module-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }

@media (max-width: 720px) {
  .uh-shell { flex-direction: column; }
  .uh-sidebar { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--uh-divider); }
  .uh-sidebar .uh-logo { display: none; }
  .uh-main { padding: var(--uh-space-md); }
}