:root {
  color-scheme: light;
  --bosque: #2e523e;
  --salvia: #73956c;
  --menta: #a9c3a9;
  --arena: #e7e1d1;
  --marfil: #f7f4ef;
  --arcilla: #f3dcd0;
  --marron: #8b6f4e;
  --carbon: #2b2e2b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Montserrat, sans-serif;
  color: var(--carbon);
  background:
    radial-gradient(circle at 16% 18%, rgba(169, 195, 169, .32), transparent 28%),
    radial-gradient(circle at 86% 76%, rgba(243, 220, 208, .52), transparent 32%),
    var(--marfil);
}

.welcome-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}

.welcome-card {
  width: min(620px, 100%);
  padding: 54px clamp(28px, 7vw, 68px);
  text-align: center;
  background: rgba(255, 255, 255, .76);
  border: 1px solid var(--arena);
  border-radius: 32px;
  box-shadow: 0 28px 80px rgba(46, 82, 62, .13);
}

.brand-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--salvia);
  border-radius: 50%;
  font: 500 52px/1 "Cormorant Garamond", serif;
  color: var(--bosque);
  box-shadow: 0 0 0 8px rgba(169, 195, 169, .15);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--bosque);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .32em;
}

h1 {
  margin: 0;
  color: var(--bosque);
  font: 500 clamp(42px, 8vw, 64px)/.95 "Cormorant Garamond", serif;
}

.lead {
  margin: 22px auto 30px;
  color: #626a63;
  font-size: 14px;
  line-height: 1.7;
}

.status-list {
  margin: 0;
  border-top: 1px solid var(--arena);
}

.status-list div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--arena);
  text-align: left;
  font-size: 12px;
}

.status-list dt { color: #747b75; }
.status-list dd { margin: 0; color: var(--bosque); font-weight: 500; text-align: right; }

.footnote {
  margin: 24px 0 0;
  color: var(--marron);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .welcome-card { padding: 40px 24px; border-radius: 24px; }
  .status-list div { display: grid; gap: 6px; }
  .status-list dd { text-align: left; }
}

button, input, textarea { font: inherit; }

.login-page {
  background:
    radial-gradient(circle at 12% 15%, rgba(169, 195, 169, .42), transparent 26%),
    radial-gradient(circle at 88% 84%, rgba(243, 220, 208, .68), transparent 30%),
    var(--marfil);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 520px);
  align-items: stretch;
}

.login-brand { display: grid; place-content: center; justify-items: center; padding: 48px; }
.brand-symbol, .sidebar-symbol {
  display: grid; place-items: center; border: 1px solid var(--salvia); border-radius: 50%;
  color: var(--bosque); font-family: "Cormorant Garamond", serif;
}
.brand-symbol { width: 112px; height: 112px; font-size: 76px; box-shadow: 0 0 0 12px rgba(169,195,169,.15); }
.brand-name { margin: 30px 0 0; color: var(--bosque); font: 500 64px/1 "Cormorant Garamond",serif; letter-spacing: .2em; }
.brand-subtitle { margin: 12px 0 0; color: var(--bosque); font-size: 17px; letter-spacing: .5em; }
.brand-line { width: 48px; height: 1px; background: var(--salvia); margin: 24px 0 15px; }
.brand-motto { color: var(--carbon); font-size: 10px; letter-spacing: .2em; }

.login-panel {
  align-self: center; margin-right: clamp(24px, 6vw, 90px); padding: 54px;
  background: rgba(255,255,255,.88); border: 1px solid var(--arena); border-radius: 30px;
  box-shadow: 0 28px 80px rgba(46,82,62,.14);
}
.section-kicker { margin: 0 0 10px; color: var(--salvia); font-size: 10px; font-weight: 600; letter-spacing: .23em; }
.login-panel h1, .portal-heading h1 { margin: 0; color: var(--bosque); font: 500 54px/1 "Cormorant Garamond",serif; }
.login-copy { margin: 15px 0 28px; color: #6a716b; font-size: 13px; line-height: 1.6; }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 9px; color: var(--bosque); font-size: 11px; font-weight: 600; }
.login-form input { width: 100%; border: 1px solid #d9ddd4; border-radius: 12px; padding: 13px 14px; background: #fff; color: var(--carbon); }
.login-form input:focus { outline: 2px solid rgba(115,149,108,.38); border-color: var(--salvia); }
.login-form button { margin-top: 15px; border: 0; border-radius: 24px; padding: 13px; background: var(--bosque); color: white; cursor: pointer; }
.form-error { margin-bottom: 12px; padding: 11px 13px; border-radius: 10px; background: var(--arcilla); color: #754b3e; font-size: 11px; }
.privacy-note { margin: 22px 0 0; text-align: center; color: #8a8e89; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.dashboard-page { background: var(--marfil); }
.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 225px minmax(0,1fr); }
.sidebar { padding: 28px 22px; display: flex; flex-direction: column; color: #f8f7f4; background: var(--bosque); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.sidebar-symbol { width: 46px; height: 46px; color: #e6ece4; border-color: #a9c3a9; font-size: 32px; }
.sidebar-brand strong { display: block; font: 500 22px/1 "Cormorant Garamond",serif; letter-spacing: .17em; }
.sidebar-brand small { display: block; margin-top: 5px; font-size: 8px; letter-spacing: .32em; }
.sidebar-nav { display: grid; gap: 7px; margin-top: 46px; }
.sidebar-nav a, .sidebar-nav .disabled { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; color: #dbe3db; text-decoration: none; font-size: 11px; }
.sidebar-nav .active { background: var(--marfil); color: var(--bosque); font-weight: 600; }
.sidebar-nav .disabled { opacity: .52; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px; }
.user-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--menta); color: var(--bosque); }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user strong { font-size: 10px; }
.sidebar-user small { margin-top: 3px; color: #bdcbbf; font-size: 8px; }
.logout-button { width: 100%; margin-top: 13px; padding: 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 18px; background: transparent; color: white; font-size: 9px; cursor: pointer; }
.portal-main { padding: 30px clamp(20px,4vw,52px) 48px; background: linear-gradient(135deg,#fbfaf7 0%,var(--marfil) 65%,#f1e7dd 100%); }
.portal-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.portal-heading > div > p:last-child { margin: 9px 0 0; color: #737a74; font-size: 11px; }
.safe-state { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--arena); border-radius: 20px; background: rgba(255,255,255,.75); color: #697069; font-size: 9px; }
.safe-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--salvia); box-shadow: 0 0 0 4px rgba(115,149,108,.13); }
.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 26px; }
.summary-grid article { padding: 17px 19px; border: 1px solid var(--arena); border-radius: 17px; background: rgba(255,255,255,.78); }
.summary-grid strong { display: block; color: var(--bosque); font: 500 30px/1 "Cormorant Garamond",serif; }
.summary-grid span { display: block; margin-top: 6px; color: #747a74; font-size: 9px; }
.demo-warning { margin: 13px 0; padding: 9px 13px; border-radius: 10px; background: #f2e7dc; color: #745f4c; font-size: 9px; }
.workspace { display: grid; grid-template-columns: minmax(250px,.8fr) minmax(390px,1.2fr); gap: 14px; }
.case-list-panel, .case-detail { overflow: hidden; border: 1px solid var(--arena); border-radius: 18px; background: rgba(255,255,255,.9); }
.case-list-panel > header { display: flex; justify-content: space-between; align-items: center; padding: 17px; }
.case-list-panel h2, .case-detail h2 { margin: 0; color: var(--bosque); font: 500 24px/1 "Cormorant Garamond",serif; }
.case-list-panel > header span { color: #7c827d; font-size: 9px; }
.case-list { display: grid; }
.case-row { padding: 14px 17px; border: 0; border-top: 1px solid #eee9df; background: transparent; color: var(--carbon); text-align: left; cursor: pointer; }
.case-row.selected { background: #edf1ea; box-shadow: inset 3px 0 var(--bosque); }
.case-line { display: flex; justify-content: space-between; gap: 10px; }
.case-line strong { font-size: 10px; }
.case-line time { color: #8a8f8a; font-size: 8px; }
.case-preview { display: block; margin: 6px 0 9px; overflow: hidden; color: #707670; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.case-tag { display: inline-flex; padding: 5px 8px; border-radius: 12px; background: #f0e7dc; color: #7d6249; font-size: 8px; }
.case-tag.confirm { background: #f3dcd0; color: #805143; }
.case-tag.manual { background: #e7e1d1; color: #625a48; }
.case-detail { padding: 20px; }
.case-detail header { padding-bottom: 14px; border-bottom: 1px solid #eee9df; }
.case-detail h2 { margin-top: 7px; font-size: 29px; }
.case-detail header p { margin: 6px 0 0; color: #767c76; font-size: 9px; }
.case-detail blockquote { margin: 17px 0; padding: 14px 16px; border-left: 3px solid var(--menta); border-radius: 0 12px 12px 0; background: var(--marfil); color: #505650; font-size: 10px; line-height: 1.65; }
.agent-reading { display: flex; gap: 10px; margin-bottom: 17px; }
.agent-avatar { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--bosque); color: white; font: 500 19px/1 "Cormorant Garamond",serif; }
.agent-reading p { margin: 1px 0 0; color: #626862; font-size: 9px; line-height: 1.55; }
.agent-reading strong, .agent-reading p span { display: block; }
.agent-reading strong { margin-bottom: 3px; color: var(--bosque); font-size: 10px; }
.resolution-box { padding: 14px; border-radius: 14px; background: #edf1ea; }
.resolution-box label { display: block; margin-bottom: 8px; color: var(--bosque); font-size: 9px; font-weight: 600; }
.resolution-box textarea { width: 100%; min-height: 62px; resize: vertical; padding: 10px; border: 1px solid #d7ddd5; border-radius: 10px; background: rgba(255,255,255,.65); color: #737873; font-size: 9px; }
.resolution-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.resolution-actions button { padding: 8px 11px; border: 1px solid #bbc5ba; border-radius: 17px; background: transparent; color: #8a908a; font-size: 8px; }
.resolution-box > p { margin: 9px 0 0; color: #7c827c; font-size: 8px; }

@media (max-width: 850px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { padding: 40px 20px 18px; }
  .brand-symbol { width: 74px; height: 74px; font-size: 50px; }
  .brand-name { margin-top: 18px; font-size: 42px; }
  .login-panel { width: min(520px,calc(100% - 30px)); margin: 18px auto 40px; }
  .portal-shell { grid-template-columns: 74px minmax(0,1fr); }
  .sidebar { padding: 22px 12px; align-items: center; }
  .sidebar-brand > span:last-child, .sidebar-nav a:not(.active), .sidebar-nav .disabled, .sidebar-user > span:last-child, .sidebar form { display: none; }
  .workspace { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .login-panel { padding: 34px 24px; }
  .portal-shell { display: block; }
  .sidebar { display: flex; flex-direction: row; padding: 12px 16px; }
  .sidebar-nav { margin: 0 0 0 auto; }
  .sidebar-nav .active { padding: 9px; }
  .sidebar-user { display: none; }
  .portal-main { padding: 24px 14px 38px; }
  .portal-heading { align-items: flex-start; }
  .safe-state { display: none; }
  .summary-grid { gap: 7px; }
  .summary-grid article { padding: 13px 10px; }
}