:root {
  --ink: #181512;
  --muted: #716a62;
  --paper: #f6f2eb;
  --surface: #fffdf9;
  --line: #ded6cb;
  --wine: #702d3d;
  --wine-deep: #4e1827;
  --rose: #c9878e;
  --sage: #758774;
  --gold: #b48942;
  --danger: #9f342f;
  --shadow: 0 18px 50px rgba(40, 29, 22, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(360px, .85fr);
  background: var(--surface);
}
.auth-brand {
  padding: clamp(48px, 9vw, 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 80% 15%, rgba(201,135,142,.32), transparent 30%),
    linear-gradient(145deg, #4c1725, #742e40 64%, #a7666e);
  color: white;
  position: relative;
  overflow: hidden;
}
.auth-brand::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  right: -220px; bottom: -120px;
  box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
}
.brand-mark {
  width: 72px; height: 72px;
  border-radius: 22px;
  display: grid; place-items: center;
  font: 600 28px/1 Georgia, serif;
  letter-spacing: -.08em;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  margin-bottom: 48px;
}
.brand-mark.small { width: 42px; height: 42px; border-radius: 13px; margin: 0; font-size: 18px; }
.auth-brand h1 { font: 500 clamp(42px, 5vw, 78px)/.98 Georgia, serif; max-width: 720px; margin: 12px 0 28px; letter-spacing: -.035em; }
.auth-intro { max-width: 600px; color: rgba(255,255,255,.74); font-size: 18px; line-height: 1.7; }
.security-note { margin-top: 48px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.72); font-size: 13px; }
.status-dot { width: 8px; height: 8px; background: #a8c9a8; border-radius: 50%; box-shadow: 0 0 0 5px rgba(168,201,168,.12); }
.auth-card { align-self: center; width: min(430px, calc(100% - 64px)); justify-self: center; }
.auth-card h2 { font: 500 38px/1.1 Georgia, serif; margin: 8px 0 12px; }

.eyebrow { margin: 0; color: var(--wine); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; }
.auth-brand .eyebrow { color: rgba(255,255,255,.67); }
.muted { color: var(--muted); line-height: 1.55; }
label { display: grid; gap: 8px; font-size: 13px; font-weight: 720; color: #443d37; }
form { display: grid; gap: 18px; margin-top: 30px; }
input, textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); padding: 12px 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 92px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(112,45,61,.11); }
.optional { color: var(--muted); font-weight: 500; }
.checkbox { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--wine); }
.button { border: 0; border-radius: 10px; padding: 11px 15px; font-weight: 760; color: var(--ink); background: #ede7df; }
.button:hover { filter: brightness(.97); }
.button:disabled { opacity: .55; cursor: wait; }
.button.primary { background: var(--wine); color: #fff; }
.button.secondary { background: transparent; border: 1px solid var(--line); }
.button.danger { background: var(--danger); color: #fff; }
.button.text { background: transparent; color: var(--muted); }
.button.ghost { color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.button.full { width: 100%; }
.form-error { color: var(--danger); min-height: 20px; font-size: 13px; }
.mfa-qr { display: block; width: 210px; height: 210px; margin: 22px auto; padding: 10px; background: white; border: 1px solid var(--line); }
.secret-box { margin: 18px 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 6px; }
.secret-box span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.secret-box code { overflow-wrap: anywhere; }

.portal { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { background: #251c1c; color: white; min-height: 100vh; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 34px; }
.sidebar-brand div:last-child { display: grid; gap: 3px; }
.sidebar-brand strong { font: 500 20px Georgia, serif; }
.sidebar-brand span { color: #9d908c; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }
nav { display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; color: #bdb1ad; display: grid; grid-template-columns: 30px 1fr; text-align: left; gap: 7px; border-radius: 9px; padding: 12px 11px; font-size: 13px; }
.nav-item span { color: #726763; font: 600 10px ui-monospace, monospace; padding-top: 2px; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.075); color: white; }
.nav-item.active span { color: #d09ca2; }
.sidebar-footer { margin-top: auto; display: grid; gap: 14px; }
.environment-badge { color: #bbaaa7; font: 700 9px ui-monospace, monospace; letter-spacing: .16em; text-align: center; }
.workspace { min-width: 0; }
.topbar { min-height: 104px; background: rgba(246,242,235,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(22px, 4vw, 56px); position: sticky; top: 0; z-index: 5; }
.topbar h1 { font: 500 30px Georgia, serif; margin: 5px 0 0; }
.admin-identity { display: flex; align-items: center; gap: 12px; }
.admin-identity > span { font: 800 9px ui-monospace, monospace; letter-spacing: .13em; color: var(--wine); border: 1px solid rgba(112,45,61,.25); border-radius: 99px; padding: 6px 8px; }
.admin-identity div { display: grid; gap: 2px; text-align: right; }
.admin-identity strong { font-size: 13px; }
.admin-identity small { color: var(--muted); }
.menu-toggle { display: none; }
.workspace-content { padding: 32px clamp(22px, 4vw, 56px) 64px; max-width: 1600px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; animation: enter .2s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }
.notice { padding: 15px 18px; border: 1px solid var(--line); border-left: 4px solid var(--sage); border-radius: 9px; background: var(--surface); color: #514b45; font-size: 13px; line-height: 1.55; margin-bottom: 22px; }
.notice strong { color: var(--ink); margin-right: 5px; }
.notice.warning { border-left-color: var(--gold); }
.notice.danger { border-left-color: var(--danger); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 22px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 20px; min-height: 128px; box-shadow: 0 8px 25px rgba(40,29,22,.035); }
.metric span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 750; }
.metric strong { display: block; font: 500 34px Georgia, serif; margin: 18px 0 2px; }
.metric small { color: var(--muted); }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 22px; box-shadow: 0 8px 28px rgba(40,29,22,.035); min-width: 0; }
.panel h2, .panel h3 { font: 500 24px Georgia, serif; margin: 6px 0 16px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading h2 { margin-bottom: 0; }
.section-intro { display: flex; justify-content: space-between; gap: 36px; align-items: end; margin: 8px 0 26px; }
.section-intro h2 { font: 500 38px Georgia, serif; margin: 7px 0 0; }
.section-intro > p { color: var(--muted); max-width: 620px; line-height: 1.55; font-size: 14px; margin: 0; }
.stack-form { margin-top: 24px; }
.filter-row { display: grid; grid-template-columns: repeat(4, minmax(120px,1fr)) auto; align-items: end; margin: 0; }
.data-list { display: grid; }
.data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid #ebe5dd; }
.data-row:last-child { border-bottom: 0; }
.data-row strong, .data-row span { overflow-wrap: anywhere; }
.data-row small { color: var(--muted); display: block; margin-top: 4px; }
.empty-state { color: var(--muted); padding: 24px 4px; font-size: 13px; }
.result-stack { display: grid; gap: 14px; margin-top: 20px; }
.chat-card, .memory-card { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 20px; }
.chat-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font-size: 12px; margin: 8px 0 18px; }
.message { border-left: 3px solid var(--line); padding: 9px 12px; margin: 7px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; }
.message.user { border-left-color: var(--wine); }
.message.assistant { border-left-color: var(--sage); }
.memory-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 15px; }
.json-summary { font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 620px; overflow: auto; }
.result-panel { margin-top: 20px; background: #f0ebe3; border: 1px solid var(--line); border-radius: 12px; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.compliance-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; margin-bottom: 20px; }
.compliance-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.compliance-card header { display: flex; justify-content: space-between; gap: 10px; }
.compliance-card h3 { font: 500 19px Georgia, serif; margin: 0; }
.compliance-card p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 13px 0 0; }
.status { border-radius: 99px; padding: 5px 8px; font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.status.partial { color: #6c531e; background: #f3e8c9; }
.status.open { color: #8c2d2a; background: #f4dddd; }
.status.draft { color: #3f5e70; background: #dfeaf0; }
.release-gates ol { color: var(--muted); line-height: 1.7; padding-left: 22px; }
.release-gates code { color: var(--wine); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 420px; padding: 14px 17px; background: #251c1c; color: white; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }
.toast.error { background: var(--danger); }

@media (max-width: 1080px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .compliance-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { min-height: 42vh; padding: 48px 28px; }
  .auth-brand h1 { font-size: 44px; }
  .brand-mark { margin-bottom: 28px; }
  .auth-card { padding: 48px 0; width: min(430px, calc(100% - 44px)); }
  .portal { display: block; }
  .sidebar { position: fixed; left: -270px; z-index: 10; width: 252px; transition: left .2s; }
  .sidebar.open { left: 0; box-shadow: 18px 0 60px rgba(0,0,0,.26); }
  .menu-toggle { display: block; border: 0; background: transparent; font-size: 22px; }
  .topbar { gap: 14px; }
  .topbar > div:nth-child(2) { flex: 1; }
  .topbar h1 { font-size: 22px; }
  .admin-identity div { display: none; }
  .two-column, .compliance-grid { grid-template-columns: 1fr; }
  .section-intro { display: block; }
  .section-intro > p { margin-top: 12px; }
}
@media (max-width: 520px) {
  .metric-grid, .filter-row { grid-template-columns: 1fr; }
  .workspace-content { padding-inline: 14px; }
  .topbar { padding-inline: 16px; }
  .panel { padding: 18px; }
}