:root {
  --canvas: #f7f1ea;
  --canvas-deep: #f0e5da;
  --surface: #fffdf9;
  --surface-soft: #fcf7f1;
  --ink: #35251d;
  --muted: #806b5e;
  --line: #eaded4;
  --line-strong: #dcc8b8;
  --primary: #a3653d;
  --primary-dark: #78462a;
  --primary-soft: #f2e1d3;
  --cocoa: #5a3421;
  --cocoa-deep: #382219;
  --olive: #858a49;
  --olive-soft: #eef0df;
  --rose: #df9784;
  --rose-soft: #fbe9e3;
  --danger: #b54848;
  --danger-soft: #fce8e8;
  --success: #397247;
  --success-soft: #e9f4ea;
  --warning: #9b681d;
  --warning-soft: #fff2d7;
  --shadow-sm: 0 4px 14px rgba(74, 47, 32, .06);
  --shadow-md: 0 12px 34px rgba(74, 47, 32, .10);
  --shadow-lg: 0 24px 70px rgba(54, 32, 22, .17);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 0%, rgba(223, 151, 132, .12), transparent 28rem),
    var(--canvas);
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary-dark); }
img { max-width: 100%; }
.material-symbols-rounded {
  font-size: 20px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* Admin shell */
.admin-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 18px 18px;
  overflow-y: auto;
  color: #fff;
  background:
    radial-gradient(circle at 0 0, rgba(223, 151, 132, .22), transparent 17rem),
    linear-gradient(175deg, #5c3726 0%, #3d261c 58%, #2e1d16 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 12px 0 34px rgba(47, 28, 20, .08);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 7px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.brand-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  border-radius: 15px 15px 15px 5px;
  color: var(--cocoa);
  background: linear-gradient(145deg, #f4d4c3, #fff2e6);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 28px;
  box-shadow: 0 8px 18px rgba(20, 11, 7, .18);
}
.brand-name {
  color: #fff;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .2px;
}
.brand-caption {
  margin-top: 5px;
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.sidebar-close { display: none; }
.sidebar-nav { flex: 1; padding: 14px 0; }
.nav-label {
  margin: 18px 10px 7px;
  color: rgba(255, 255, 255, .40);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.sidebar-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 45px;
  margin-bottom: 4px;
  padding: 10px 12px;
  overflow: hidden;
  color: rgba(255, 255, 255, .76);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  transition: .2s ease;
}
.sidebar-nav a .material-symbols-rounded { color: rgba(255, 255, 255, .56); }
.sidebar-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
  transform: translateX(2px);
}
.sidebar-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(223, 151, 132, .28), rgba(255, 255, 255, .10));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: inset 3px 0 0 #efb49f;
}
.sidebar-nav a.active .material-symbols-rounded {
  color: #ffd8c8;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 10px 5px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.admin-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--cocoa);
  background: #f2d6c6;
  font-weight: 800;
}
.admin-identity { min-width: 0; }
.admin-identity strong, .admin-identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-identity strong { color: #fff; font-size: 12px; }
.admin-identity span { margin-top: 2px; color: rgba(255, 255, 255, .46); font-size: 10px; }
.sidebar-overlay { display: none; }

.main { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  padding: 15px 30px;
  background: rgba(247, 241, 234, .88);
  border-bottom: 1px solid rgba(218, 199, 184, .70);
  backdrop-filter: blur(16px);
}
.topbar-heading, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar h1 {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 31px);
  font-weight: 400;
  line-height: 1.1;
}
.eyebrow {
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.65px;
  text-transform: uppercase;
}
.menu-toggle, .sidebar-close {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.menu-toggle { display: none; }
.content-wrap { padding: 26px 30px 40px; }

/* Shared surfaces */
.card {
  margin-bottom: 18px;
  padding: 20px;
  background: rgba(255, 253, 249, .96);
  border: 1px solid rgba(228, 212, 201, .86);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 15px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-gap { margin-top: 16px; }
.muted { color: var(--muted); }
small.muted { display: block; margin-top: 6px; font-size: 11px; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) 135px auto auto;
  flex: 1;
  gap: 9px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #8d5231);
  border: 1px solid transparent;
  border-radius: 11px;
  box-shadow: 0 6px 14px rgba(163, 101, 61, .16);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 9px 19px rgba(125, 72, 41, .22); }
.btn .material-symbols-rounded { font-size: 18px; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.btn-outline {
  color: var(--primary-dark);
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn-soft {
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-color: transparent;
  box-shadow: none;
}
.btn-danger { background: linear-gradient(135deg, #c65858, #a63838); box-shadow: none; }
.btn-current { color: #fff; background: var(--muted); box-shadow: none; cursor: default; opacity: .7; }
.btn:disabled { transform: none; cursor: not-allowed; }
.btn + .btn { margin-left: 5px; }

/* Forms */
label {
  display: block;
  margin-bottom: 7px;
  color: #4f382c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15px;
}
input, textarea, select {
  width: 100%;
  padding: 11px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input::placeholder, textarea::placeholder { color: #b09d90; }
input:focus, textarea:focus, select:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(163, 101, 61, .10);
}
input[type="checkbox"] { width: auto; accent-color: var(--primary); }
input[type="file"] {
  padding: 8px;
  color: var(--muted);
  background: var(--surface-soft);
  border-style: dashed;
}
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 10px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}
.checkbox-field { display: flex; align-items: center; padding-top: 24px; }
.checkbox-field label { margin: 0; }

/* Tables */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
}
table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; }
th, td {
  padding: 14px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #f0e8e1;
}
th {
  color: #766156;
  background: #faf5f0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #fffaf6; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); }
.actions { white-space: nowrap; }
.status-actions { min-width: 130px; }
.status-actions form { display: inline-block; margin: 0 3px 5px 0; }
.status-actions .btn { min-height: 32px; padding: 5px 8px; font-size: 10px; }

/* Alerts and badges */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 650;
}
.alert-success { color: #2d623a; background: var(--success-soft); border-color: #cfe7d3; }
.alert-error { color: #8f3232; background: var(--danger-soft); border-color: #f1cccc; }
.alert-warning { color: #7b5617; background: var(--warning-soft); border-color: #f2dda9; }
.alert-list { margin: 6px 0 0; padding-left: 18px; font-weight: 600; }
.alert-list li + li { margin-top: 3px; }
.badge, .status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.status-ok { color: var(--success); background: var(--success-soft); }
.status-draft { color: #7b6559; background: #f0e8e1; }
.status-alert { color: #963d30; background: var(--rose-soft); }

/* Dashboard */
.welcome-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 176px;
  margin-bottom: 19px;
  padding: 28px 31px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 226, 211, .22), transparent 11rem),
    linear-gradient(125deg, #6a412c, #9a6040 68%, #ad7251);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.welcome-panel::after {
  content: "";
  position: absolute;
  right: 70px;
  bottom: -105px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}
.welcome-panel .eyebrow { color: #f8d2c0; }
.welcome-panel h2 {
  max-width: 650px;
  margin: 7px 0 6px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.15;
}
.welcome-panel p { margin: 0; color: rgba(255, 255, 255, .72); }
.welcome-decoration {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  color: #6a412c;
  background: rgba(255, 248, 241, .92);
  border-radius: 30px 30px 30px 8px;
  transform: rotate(6deg);
}
.welcome-decoration .material-symbols-rounded { font-size: 47px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 15px; }
.metric-card {
  position: relative;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 133px;
  padding: 18px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: .2s ease;
}
.metric-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.metric-icon {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 15px;
  font-size: 25px;
}
.metric-card > div span, .metric-card small { display: block; }
.metric-card > div span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.metric-card strong { display: block; margin: 2px 0; font-size: 27px; line-height: 1.1; }
.metric-card small { color: #9d897d; font-size: 9px; }
.metric-arrow { color: #b9a79c; font-size: 17px; }
.metric-olive .metric-icon { color: #666b31; background: var(--olive-soft); }
.metric-cocoa .metric-icon { color: var(--cocoa); background: #eee1d9; }
.metric-rose .metric-icon { color: #9a5142; background: var(--rose-soft); }
.attention-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.attention-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: .2s ease;
}
.attention-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.attention-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--olive);
  background: var(--olive-soft);
  border-radius: 16px;
}
.attention-icon-rose { color: #a85543; background: var(--rose-soft); }
.attention-card div span, .attention-card div strong, .attention-card div small { display: block; }
.attention-card div span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.attention-card div strong { margin: 3px 0; font-size: 14px; }
.attention-card div small { color: #a08d81; font-size: 10px; }
.metric { margin-top: 7px; color: var(--primary-dark); font-size: 30px; font-weight: 800; }
.metric-small { font-size: 20px; }

/* Chat */
.chat-thread {
  max-height: 58vh;
  overflow-y: auto;
  padding: 18px;
  background:
    linear-gradient(rgba(252, 247, 241, .92), rgba(252, 247, 241, .92)),
    radial-gradient(circle, #d8c2b3 1px, transparent 1px);
  background-size: auto, 18px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.chat-row { display: flex; margin-bottom: 11px; }
.chat-admin { justify-content: flex-end; }
.chat-bubble {
  max-width: min(72%, 620px);
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px 15px 15px 15px;
  box-shadow: 0 4px 10px rgba(78, 49, 33, .05);
}
.chat-admin .chat-bubble {
  background: #edf0df;
  border-color: #dfe4c8;
  border-radius: 15px 5px 15px 15px;
}
.chat-bubble small, .chat-bubble time { display: block; color: var(--muted); font-size: 9px; }
.chat-bubble p { margin: 7px 0; white-space: pre-wrap; }
.chat-bubble img { display: block; max-width: 310px; max-height: 250px; margin: 8px 0; border-radius: 10px; }
.chat-reply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px auto;
  align-items: end;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* File previews */
.file-preview {
  margin-top: 10px;
  padding: 11px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.file-preview img { display: block; width: 165px; height: 105px; margin-bottom: 8px; object-fit: cover; border-radius: 9px; }
.file-preview audio { display: block; width: 100%; margin-bottom: 8px; }
.file-preview video { display: block; width: 100%; max-height: 280px; margin-bottom: 8px; border-radius: 9px; background: #140d09; }
.file-preview-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.media-open-link {
  display: inline-flex;
  margin: 0 10px 8px 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}
.field-error {
  display: block;
  margin-top: 5px;
  color: var(--danger);
  font-weight: 750;
}
.selected-file-preview {
  margin-top: 10px;
  padding: 11px;
  color: var(--ink);
  background: #fffaf6;
  border: 1px dashed var(--primary-light);
  border-radius: 11px;
}
.selected-file-preview img {
  display: block;
  width: 165px;
  height: 105px;
  margin-bottom: 8px;
  object-fit: cover;
  border-radius: 9px;
}
.selected-file-preview audio { display: block; width: 100%; margin-bottom: 8px; }
.selected-file-preview video { display: block; width: 100%; max-height: 280px; margin-bottom: 8px; border-radius: 9px; background: #140d09; }
.selected-file-details { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.selected-file-details span { color: var(--muted); white-space: nowrap; }
.selected-file-error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: #e6aaaa;
  font-weight: 750;
}
.upload-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 14px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 1px solid var(--primary-light);
  border-radius: 12px;
}
.upload-status[hidden] { display: none; }
.upload-status strong, .upload-status span { display: block; }
.upload-status span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.upload-spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 3px solid rgba(169, 107, 60, .2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: upload-spin .75s linear infinite;
}
@keyframes upload-spin { to { transform: rotate(360deg); } }
.upload-server-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  color: #735f50;
  background: #fffaf2;
  border: 1px solid #ebddc8;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
}
.upload-server-note .material-symbols-rounded { color: var(--primary); font-size: 18px; }
.material-visibility {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 12px;
}
.material-visibility strong, .material-visibility span { display: block; }
.material-visibility span { margin-top: 2px; font-size: 11px; line-height: 1.5; }
.material-visibility-live {
  color: #2d623a;
  background: var(--success-soft);
  border-color: #cfe7d3;
}
.material-visibility-warning {
  color: #7b5617;
  background: var(--warning-soft);
  border-color: #f2dda9;
}

/* Login */
.auth-body {
  display: grid;
  min-height: 100vh;
  padding: 28px;
  background:
    radial-gradient(circle at 92% 0, rgba(223, 151, 132, .22), transparent 30rem),
    linear-gradient(145deg, #f6eee7, #fbf7f2);
}
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  width: min(1160px, 100%);
  min-height: min(720px, calc(100vh - 56px));
  margin: auto;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(218, 197, 181, .72);
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
}
.auth-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 45px 48px 42px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 10% 0, rgba(241, 184, 159, .34), transparent 20rem),
    linear-gradient(145deg, #72462f, #4c2e21 62%, #362118);
}
.auth-orb { position: absolute; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.auth-orb-one { right: -110px; top: 80px; width: 330px; height: 330px; }
.auth-orb-two { right: 75px; bottom: -150px; width: 285px; height: 285px; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.brand-symbol-light { color: var(--cocoa); background: linear-gradient(145deg, #f6d6c6, #fff6ee); }
.brand-name-light { color: #fff; }
.brand-caption-light { color: rgba(255, 255, 255, .55); }
.auth-copy { position: relative; z-index: 1; max-width: 550px; margin: 80px 0 50px; }
.auth-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 10px;
  color: #f8d2c0;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.auth-copy h1 {
  margin: 0 0 18px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(38px, 4.7vw, 60px);
  font-weight: 400;
  line-height: 1.02;
}
.auth-copy p { max-width: 490px; margin: 0; color: rgba(255, 255, 255, .68); font-size: 14px; line-height: 1.8; }
.auth-features { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.auth-features div {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, .70);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.auth-features .material-symbols-rounded { color: #efb49f; font-size: 17px; }
.auth-form-panel { display: grid; place-items: center; padding: 48px clamp(30px, 5vw, 76px); }
.login-card { width: min(430px, 100%); }
.login-heading { margin-bottom: 30px; }
.login-icon {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  margin-bottom: 18px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 15px;
  font-size: 25px;
}
.login-heading h2 {
  margin: 6px 0 7px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
}
.login-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.input-group { margin-bottom: 17px; }
.input-with-icon { position: relative; }
.input-with-icon > .material-symbols-rounded {
  position: absolute;
  z-index: 1;
  left: 13px;
  top: 50%;
  color: #a68d7e;
  transform: translateY(-50%);
}
.input-with-icon input { min-height: 49px; padding-left: 43px; padding-right: 45px; background: var(--surface-soft); }
.password-toggle {
  position: absolute;
  right: 7px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: #91786a;
  background: transparent;
  border: 0;
  border-radius: 9px;
  transform: translateY(-50%);
  cursor: pointer;
}
.password-toggle:hover { background: var(--primary-soft); }
.btn-login { width: 100%; min-height: 50px; margin-top: 7px; justify-content: space-between; padding-inline: 18px; }
.login-help { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; color: var(--muted); font-size: 9px; }
.login-help .material-symbols-rounded { font-size: 15px; }

/* Responsive */
@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  body.sidebar-open { overflow: hidden; }
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(300px, 88vw);
    transform: translateX(-105%);
    transition: transform .22s ease;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    visibility: hidden;
    background: rgba(38, 23, 16, .48);
    opacity: 0;
    transition: .2s ease;
  }
  body.sidebar-open .sidebar-overlay { visibility: visible; opacity: 1; }
  .sidebar-close { display: inline-flex; margin-left: auto; color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .10); }
  .menu-toggle { display: inline-flex; }
  .topbar { padding-inline: 20px; }
  .content-wrap { padding: 22px 20px 35px; }
  .auth-shell { grid-template-columns: 1fr; width: min(650px, 100%); }
  .auth-visual { min-height: 310px; padding: 34px; }
  .auth-copy { margin: 50px 0 25px; }
  .auth-copy h1 { max-width: 520px; font-size: 42px; }
  .auth-features { display: none; }
}

@media (max-width: 720px) {
  .desktop-only { display: none; }
  .topbar { min-height: 76px; padding: 12px 14px; }
  .topbar-actions .btn { width: 42px; padding: 0; font-size: 0; }
  .topbar-actions .btn .material-symbols-rounded { font-size: 19px; }
  .content-wrap { padding: 16px 13px 28px; }
  .row, .metric-grid, .attention-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar > .btn { align-self: flex-start; }
  .filter-form { grid-template-columns: 1fr; }
  .chat-reply { grid-template-columns: 1fr; }
  .chat-bubble { max-width: 90%; }
  .welcome-panel { min-height: 155px; padding: 22px; }
  .welcome-decoration { display: none; }
  .card { padding: 15px; border-radius: 14px; }
  th, td { padding: 11px 12px; }
  .auth-body { padding: 0; }
  .auth-shell { min-height: 100vh; border: 0; border-radius: 0; }
  .auth-visual { min-height: 250px; padding: 27px 24px; }
  .auth-copy { margin: 36px 0 5px; }
  .auth-copy h1 { margin-bottom: 10px; font-size: 33px; }
  .auth-copy p { font-size: 11px; }
  .auth-form-panel { padding: 36px 24px 42px; }
  .login-heading h2 { font-size: 30px; }
}

@media (max-width: 430px) {
  .brand-caption { letter-spacing: 1px; }
  .topbar h1 { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .metric-card { min-height: 115px; }
}