/* =========================================================
   Essay System • Global Styles (LIGHT ONLY)
   - White background
   - No dark-mode
   - Link underline removed globally
   - Button/hover/focus UX improvements
   ========================================================= */

/* ---------- Theme Tokens (light) ---------- */


:root {
  --primary: #00166c;
  --primary-600: #00125a;
  --primary-700: #000f4a;

  --bg: #ffffff;
  --card: #ffffff;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;

  --border: rgba(0, 0, 0, .12);
  --hover: #f5f7ff;

  --ring: rgba(0, 22, 108, 0.28);
  --error: #b91c1c;
  --success: #008000;
}

/* ---------- Base + Global link reset ---------- */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
}
img { max-width: 100%; height: auto; }

/* Remove underline from links globally; keep color inherited.
   On hover/focus, nudge to primary for clearer affordance. */
a, a:visited { text-decoration: none; color: inherit; }

/* Strong focus ring for accessibility */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* =========================================================
   NAVBARS (Login + Admin)
   ========================================================= */
.nav-login,
.nav-admin {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-block-size: 56px;
}

.nav-login { padding: .6rem 1rem; }
.nav-login .wrap-login,
.nav-admin .nav-admin__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-login,
.brand-admin {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--text);
  font-weight: 701;
}

/* Logo (bullet-proof sizing) */
.nav-logo {
  display: inline-block;
  inline-size: 50px;
  block-size: 50px;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.brand-login .nav-logo > img,
.brand-admin .nav-logo > img {
  all: unset !important;
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: contain !important;
}
.nav-logo.tight > img { transform: scale(1.06); transform-origin: center; }

/* Menus */
.menu-login,
.nav-admin__menu {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.menu-login a,
.nav-admin__menu a {
  color: var(--text);
  font-weight: 500;
  padding: .55rem .85rem;
  border-radius: 10px;
  font-size: 14px;
}
.menu-login a:hover,
.nav-admin__menu a:hover { background: var(--hover); }

/* CTA in nav: invert on hover for visibility */
.menu-login .cta-login,
.nav-admin__menu .cta {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,22,108,.18);
}
.menu-login .cta-login:hover,
.nav-admin__menu .cta:hover {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
.page-login {
  min-height: calc(100% - 56px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.card-login {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(0,0,0,.08);
  max-width: 900px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
@media (max-width: 800px) {
  .card-login { grid-template-columns: 1fr; }
  .side-login { display: none; }
}
.side-login {
  background: linear-gradient(135deg, var(--primary), #2031a3);
  color: #fff;
  padding: 2rem;
}
.side-login h2 { margin-top: 0; }

.form-login {
  padding: 2rem;
  display: grid;
  gap: 1rem;
}
.form-login h1 { margin: 0; }

.alert-login {
  background: #F8FFF7;
  border: 1px solid rgba(185,28,28,.25);
  color: var(--success);
  padding: .75rem 1rem;
  border-radius: 8px;
}

.field-login { display: flex; flex-direction: column; gap: .35rem; }
.input-login {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .85rem;
  background: var(--card);
}
.input-login input {
  border: 0; outline: 0; flex: 1; font-size: 1rem; background: transparent; color: var(--text);
}
.toggle-login {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
}

/* Login button */
.btn-login {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  font-weight: 701;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(0,22,108,.18);
  transition: transform .06s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn-login:hover { background: var(--primary-600); transform: translateY(-1px); }
.btn-login.secondary-login {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--border);
}

/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */
.admin-shell { max-width: 1100px; margin: 1.2rem auto 2rem; padding: 3rem; }
.admin-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.admin-title { margin: .2rem 0 0; font-size: 1.6rem; }
.admin-sub { color: var(--muted); margin: .2rem 0 0; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 701; padding: .35rem .6rem; border-radius: 999px; font-size: .85rem;
  border: 1px solid var(--border);
}
.badge--open   { color: #05603a; background: #eafff4; border-color: rgba(16,185,129,.25); }
.badge--closed { color: #7f1d1d; background: #fff0f0; border-color: rgba(239,68,68,.25); }


.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 12px 22px rgba(0,22,108,.18); }
.btn--primary:hover { background: var(--primary-600); transform: translateY(-1px); }
.btn--danger  { background: #b91c1c; color: #fff; }
.btn--danger:hover { filter: brightness(1.05); }
.btn--ghost   { background: #fff; color: var(--primary); border: 1px solid var(--border); }
.btn--ghost:hover { background: var(--hover); }
.btn--muted   { background: #eef1f7; color: var(--primary); }
.btn--muted:hover { filter: brightness(1.04); }

/* Cards / grid */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(0,0,0,.08);
  overflow: hidden;
}
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; border-bottom: 1px solid var(--border);
}
.card__title { margin: 0; font-size: 1.05rem; }
.card__body { padding: 1rem; display: grid; gap: .75rem; }

/* Stats row */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(5, 1fr); } }

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem;
}
.stat__label { margin: 0; color: var(--muted); font-size: .85rem; }
.stat__value { margin: .25rem 0 0; font-size: 1.35rem; font-weight: 500; }
.stat--pending  { border-left: 4px solid #f59e0b; }
.stat--approved { border-left: 4px solid #10b981; }
.stat--declined { border-left: 4px solid #ef4444; }
.stat--trashed  { border-left: 4px solid #6b7280; }
.stat--total    { border-left: 4px solid var(--primary); }

/* Links list (cards w/ hover) */
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.list a {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  color: var(--text);
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.list a:hover { background: var(--hover); }

/* Forms reused on dashboard */
.field { display: flex; flex-direction: column; gap: .35rem; }
.input {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .85rem;
  background: var(--card);
}
.input input, .input select {
  border: 0; outline: 0; width: 100%; font-size: 1rem;
  background: transparent; color: var(--text);
}

/* Modal (light-only overlay) */
.modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  padding: 1rem;
}
.modal.is-open { display: flex; }
.modal__dialog {
  width: 100%; max-width: 520px;
  background: var(--card); color: var(--text);
  border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 22px 44px rgba(0,0,0,.18);
  overflow: hidden;
}
.modal__head { padding: 1rem; border-bottom: 1px solid var(--border); font-weight: 701; }
.modal__body { padding: 1rem; display: grid; gap: .75rem; }
.modal__foot { padding: 1rem; display: flex; gap: .5rem; justify-content: flex-end; border-top: 1px solid var(--border); }

/* ======= Table + toolbar ======= */
.table-wrap { width: 100%; overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
}
.table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 701;
  font-size: .92rem;
}
.table thead th.shrink { width: 1%; white-space: nowrap; }
.table tbody td {
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:hover td { background: var(--hover); }
.table .empty { text-align: center; color: var(--muted); padding: 2rem .9rem; }

/* Sort link helper (no underline; primary on hover) */
.th-link { color: inherit; text-decoration: none; }
.th-link:hover { color: var(--primary); }

/* Bulk toolbar (inside card__head) */
.bulk-toolbar { display: flex; gap: .5rem; align-items: center; }
.bulk-toolbar select {
  padding: .5rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

/* Status tags */
.tag {
  display: inline-flex; align-items: center;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 601;
  text-transform: capitalize;
  background: var(--hover);
  border: 1px solid var(--border);
}
.tag--pending  { background: rgba(245,158,11,.12);  color: #b45309; border-color: rgba(245,158,11,.35); }
.tag--approved { background: rgba(16,185,129,.12);  color: #065f46; border-color: rgba(16,185,129,.35); }
.tag--declined { background: rgba(239,68,68,.12);   color: #7f1d1d; border-color: rgba(239,68,68,.35); }
.tag--trashed  { background: rgba(107,114,128,.12); color: #374151; border-color: rgba(107,114,128,.35); }

/* Collapsible filter panel */
.collapsible {
  overflow: hidden;
  transition: max-height .25s ease;
  max-height: 9999px; /* managed via JS */
}
.collapsible.is-collapsed { max-height: 0; }

/* ======= Mobile Nav ======= */

/* Toggle (hamburger) */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Drawer panel */
.nav-drawer {
  display: none;
  position: fixed;
  inset: 56px 0 auto 0; /* below the navbar */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  z-index: 30;
  padding: .5rem;
}
.nav-drawer.open { display: block; }

.nav-drawer__list {
  margin: 0; padding: .25rem; list-style: none;
  display: grid; gap: .35rem;
}
.nav-drawer__list a {
  display: block;
  color: var(--text);
  font-weight: 600;
  padding: .8rem .95rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
}
.nav-drawer__list a:hover { background: var(--hover); }
.nav-drawer__list .cta { background: var(--primary); color: #fff; border-color: transparent; }

/* Responsive visibility */
@media (max-width: 900px) {
  .nav-admin__menu, .menu-login { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 901px) {
  .nav-admin__menu, .menu-login { display: flex; }
  .nav-toggle, .nav-drawer { display: none !important; }
}

/* --- Table row actions popover --- */
.table td.actions-cell { position: relative; }
.row-actions[hidden] { display: none !important; }
.row-actions { top: calc(100% - 2px); right: 0; margin-top: 0; }
.actions-list { list-style: none; margin: 0; padding: .25rem; display: grid; gap: .35rem; }
.actions-list .menu-btn,
.actions-list .menu-link,
.actions-list form button {
  display: block; width: 100%; text-align: left;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .7rem; font-weight: 601; cursor: pointer;
}
.actions-list .menu-btn:hover,
.actions-list .menu-link:hover,
.actions-list form button:hover { background: var(--hover); }
.actions-list .danger { background: #b91c1c; color: #fff; border-color: transparent; }
.actions-list .danger:hover { filter: brightness(1.05); }


/* ========= UI Tuning Overrides (paste at end) ========= */

/* 1) Bold/strong is too heavy */
strong, b { font-weight: 600; }
.table td strong { font-weight: 600; }

/* 2) Table typography: smaller & lighter headers */
.table { font-size: .90rem; }
.table thead th {
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Optional: slightly tighter cell padding (uncomment if you want)
.table tbody td { padding: .65rem .8rem; }
.table thead th { padding: .7rem .8rem; }
*/

/* 3) Checkboxes/radios: force light theme + blue accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);                /* blue ticks */
  background-color: #fff;                      /* ensure light box */
  border: 1px solid var(--border);
}

/* 4) Keep sort links clean, with subtle hover */
.th-link { text-decoration: none; color: inherit; }
.th-link:hover { color: var(--primary); text-decoration: none; }
.table .btn { font-size: .88rem; padding: .6rem .75rem; border-radius: 10px; }


::selection { background: #cfe3ff; color: #0b1020; }
::-moz-selection { background: #cfe3ff; color: #0b1020; }

/* Also improve controls in dark mode environments */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--primary); }

/* Make sure selects remain readable in all schemes */
.input select, checkbox,
.input option {
  background: var(--card);
  color: var(--text);
}

/* Optional: stronger selection in dark mode systems */
@media (prefers-color-scheme: dark) {
  ::selection, ::-moz-selection { background: #3b82f6; color: #fff; }
}


/* Closed select */
select,
.input select,
.bulk-toolbar select {
  background-color: #fff !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,.12);
}

/* Dropdown items (works in some browsers, not all) */
select option,
select optgroup {
  background-color: #fff !important;
  color: #111827 !important;
}


.muted { color: var(--muted); }
    .table td, .table th { padding: .55rem .75rem; font-size: .92rem; vertical-align: top; }
    .table th { font-size: .85rem; letter-spacing: .02em; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

    tr.row-link { cursor: pointer; }
    tr.row-link:hover { background: rgba(0,0,0,.035); }

    .actions { display:flex; gap:.35rem; justify-content:flex-end; }
    .btn-xs {
      padding: .35rem .5rem;
      font-size: .85rem;
      border-radius: 10px;
      line-height: 1;
      display:inline-flex;
      align-items:center;
      gap:.25rem;
      white-space: nowrap;
    }

    .tag {
      display:inline-flex; align-items:center;
      padding:.18rem .5rem; border-radius:999px;
      border:1px solid var(--border);
      font-size:.8rem;
      text-transform: capitalize;
    }
    .tag--provided { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
    .tag--pending  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }

    th.actions-col, td.actions-col { width: 1%; white-space: nowrap; }

    .th-sort { color: inherit; text-decoration: none; }
    .th-sort:hover { text-decoration: underline; }

    .filters { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
    .filters .input { min-width:240px; flex:1; }
    .filters select{
      min-width: 170px;
      padding:.6rem .7rem;
      border:1px solid var(--border);
      border-radius:12px;
      background: transparent;
      color: inherit;
    }

    /* date cells tighter */
    .dt { white-space: nowrap; font-size: .85rem; }

    /* selection column + bulk bar */
    th.sel-col, td.sel-col { width: 1%; white-space: nowrap; }
    .bulkbar {
      display:flex; gap:.5rem; align-items:center; justify-content:space-between;
      padding:.75rem 1rem; border-bottom:1px solid var(--border);
    }
    .bulkbar .left { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
    .bulkbar .right { display:flex; gap:.5rem; align-items:center; }
    .bulkbar select { min-width: 220px; }
    
    
    /* ==== TABLE CARDS: keep inside card + enable horizontal scroll ==== */
.card--table{
  overflow: hidden;            /* keep rounded corners */
}

.card--table .card__body{
  display: block;
  padding: 2rem;
  min-width: 0;
}

.card--table form{
  min-width: 0;                /* prevent form from expanding */
}

.card--table .table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Make table allowed to be wider than wrapper */
.card--table .table{
  width: max-content;
  min-width: 100%;
}


.user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.user-menu__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
}

.user-menu__btn:hover {
  background: var(--hover);
}

.user-menu__btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.user-menu__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 601;
  background: var(--primary);
  color: #fff;
}

.user-menu__name {
  font-size: 14px;
  white-space: nowrap;
}

.user-menu__chev {
  opacity: .8;
}

.user-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  overflow: hidden;
  z-index: 1000;
}

.user-menu__list a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}

.user-menu__list a:hover {
  background: var(--hover);
}

.user-menu__list a.danger {
  color: var(--error);
}

.user-menu__list a.danger:hover {
  background: rgba(185,28,28,.08);
}

/* Compact button layout */
.user-menu__btn--compact{
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
}

/* Arrow sits under avatar */
.user-menu__chev--below{
  opacity: .7;
}

/* Dropdown header (full name) */
.user-menu__header{
  padding: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.container-admin { max-width: 1100px; margin: 1.2rem auto 2rem; padding: 3rem; }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; }
    .crumb a { text-decoration:none; color: var(--text); }
    .crumb a:hover { text-decoration: underline; }
    .hstack { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
    .right { margin-left:auto; }
    .btn { border:0; border-radius:12px; padding:.6rem .9rem; font-weight:701; cursor:pointer; }
    .btn--primary{ background: var(--primary); color:#fff; }
    .btn--danger{ background:#b91c1c; color:#fff; }
    .btn--ghost { background:#fff; border:1px solid var(--border); color: var(--primary); }
    .btn--muted { background:#eef1f7; color: var(--primary); }
    .btn:disabled{ opacity:.6; cursor:not-allowed; }

    .grid { display:grid; gap: 1rem; grid-template-columns: 320px 1fr; }
    @media (max-width: 900px){ .grid { grid-template-columns: 1fr; } }

    .card { background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow-lg); overflow:hidden; }
    .card__head{ display:flex; align-items:center; justify-content:space-between; padding: .85rem 1rem; border-bottom:1px solid var(--border); }
    .card__title{ margin:0; font-size:1.05rem; }
    .card__body{ padding:1rem; display:grid; gap:.6rem; }

    .badge{ display:inline-flex; gap:.4rem; align-items:center; padding:.3rem .6rem; font-weight:701; border-radius:999px; border:1px solid var(--border); }
    .badge--pending  { color:#9a6700; background:#fff7e6; border-color: rgba(247,144,9,.35); }
    .badge--approved { color:#05603a; background:#eafff4; border-color: rgba(16,185,129,.25); }
    .badge--declined { color:#7f1d1d; background:#fff0f0; border-color: rgba(239,68,68,.25); }
    .badge--trashed  { color:#4b5563; background:#f3f4f6; border-color: rgba(0,0,0,.12); }

    .kv { display:grid; grid-template-columns: 130px 1fr; gap:.4rem .75rem; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
    .muted{ color: var(--muted); }

    .essay { border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow: var(--shadow-sm); padding: .85rem; max-height: 540px; overflow:auto; }

    .alert{ background:#fff7f7; border:1px solid rgba(185,28,28,.25); color:#b91c1c; padding:.6rem .8rem; border-radius:10px; }
    .notice{ background:#f0f7ff; border:1px solid rgba(59,130,246,.25); color:#1e40af; padding:.6rem .8rem; border-radius:10px; }

    /* Details modal only (we removed the marking modal entirely) */
    .modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.45); z-index:1000; padding: 1rem; }
    .modal.is-open { display:flex; }
    .modal__dialog { width:100%; max-width:720px; background:#fff; color:#111; border-radius:16px; border:1px solid var(--border); box-shadow: 0 22px 44px rgba(0,0,0,.18); overflow:hidden; }
    .modal__head { padding: 1rem; border-bottom:1px solid var(--border); font-weight:701; display:flex; align-items:center; justify-content:space-between; }
    .modal__body { padding: 1rem; display:grid; gap:.75rem; }
    .modal__foot { padding: 1rem; display:flex; gap:.5rem; justify-content:flex-end; border-top: 1px solid var(--border); }
    
    
      /* Export modal */
    .modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.45); z-index:1000; padding: 1rem; }
    .modal.is-open { display:flex; }
    .modal__dialog { width:100%; max-width:640px; background:#fff; color:#111; border-radius:16px; border:1px solid var(--border); box-shadow: 0 22px 44px rgba(0,0,0,.18); overflow:hidden; }
    .modal__head { padding: 1rem; border-bottom:1px solid var(--border); font-weight:701; display:flex; align-items:center; justify-content:space-between; }
    .modal__body { padding: 1rem; display:grid; gap:.75rem; }
    .modal__foot { padding: 1rem; display:flex; gap:.5rem; justify-content:flex-end; border-top: 1px solid var(--border); }
    .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; }
    @media (max-width: 560px){ .grid-2 { grid-template-columns: 1fr; } }
    .muted { color: var(--muted); }
    
     .container-admin { max-width: 1100px; margin: 1.2rem auto 2rem; padding: 0 1rem; }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; }
    .crumb a { text-decoration:none; color: var(--text); }
    .crumb a:hover { text-decoration: underline; }
    .hstack { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

    .btn { border:0; border-radius:12px; padding:.6rem .9rem; font-weight:701; cursor:pointer; }
    .btn--primary{ background: var(--primary); color:#fff; }
    .btn--ghost { background:#fff; border:1px solid var(--border); color: var(--primary); }
    .btn--muted { background:#eef1f7; color: var(--primary); }
    .btn:disabled{ opacity:.6; cursor:not-allowed; }

    .grid { display:grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
    @media (max-width: 980px){ .grid { grid-template-columns: 1fr; } }

    .card { background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow-lg); overflow:hidden; }
    .card__head{ display:flex; align-items:center; justify-content:space-between; padding: .85rem 1rem; border-bottom:1px solid var(--border); }
    .card__title{ margin:0; font-size:1.05rem; }
    .card__body{ padding:1rem; display:grid; gap:.75rem; }

    .muted{ color: var(--muted); }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

    .essay { border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow: var(--shadow-sm); padding: .85rem; max-height: 70vh; overflow:auto; }

    .alert{ background:#fff7f7; border:1px solid rgba(185,28,28,.25); color:#b91c1c; padding:.6rem .8rem; border-radius:10px; }
    .notice{ background:#f0f7ff; border:1px solid rgba(59,130,246,.25); color:#1e40af; padding:.6rem .8rem; border-radius:10px; }

    /* --- Marking UI (same compact style we used in the modal) --- */
    .mark-row {
      display: grid;
      grid-template-columns: 1fr 120px;
      gap: .6rem .75rem;
      align-items: start;
      padding: .55rem .6rem;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--card);
    }
    @media (max-width: 520px){ .mark-row { grid-template-columns: 1fr; } }

    .mark-main .title { display:block; font-weight:700; margin-bottom:.1rem; }
    .mark-meta { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }

    .chip {
      appearance:none; border:1px solid var(--border); background:#fff; color:var(--primary);
      font-size:.82rem; font-weight:700; padding:.25rem .55rem; border-radius:999px; cursor:pointer;
    }
    .chip:hover { background: var(--hover); }
    .chip[aria-expanded="true"] { background:#eef1f7; }

    .collapse { display:none; margin-top:.45rem; }
    .collapse.open { display:block; }

    .score-box .input input { text-align:center; }

    .total-pill { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border); border-radius:999px; padding:.35rem .6rem; background:#fff; font-weight:701; }
    .total-ok { color:#065f46; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
    .total-warn { color:#7f1d1d; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
    
    :root{
      --surface:#ffffff;
      --surface-2:#f7f8fb;
      --text-1:#0f172a;
      --text-2:#475569;
      --border-1: rgba(15,23,42,.12);
      --shadow-1: 0 10px 25px rgba(15,23,42,.08);
      --shadow-2: 0 22px 44px rgba(0,0,0,.18);
      --radius: 16px;
    }

    .dash{
      max-width: 1200px;
      margin: 1.75rem auto 3rem;
      padding: 0 1rem;
    }
    @media (max-width: 600px){
      .dash{ margin: 1.25rem auto 2.25rem; padding: 0 .9rem; }
    }

    .dash-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 1rem;
      flex-wrap:wrap;
      margin-bottom: 1rem;
    }
    .dash-title{
      margin:0;
      font-size: 1.25rem;
      font-weight: 651;
      color: var(--text-1);
      letter-spacing: .2px;
    }
    .dash-sub{
      margin:.25rem 0 0;
      color: var(--text-2);
      font-size:.95rem;
    }
    .head-right{
      display:flex;
      gap:.5rem;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .65rem;
      font-weight: 750;
      border-radius:999px;
      border:1px solid var(--border-1);
      background: var(--surface);
      color: var(--text-1);
      font-size:.85rem;
      white-space:nowrap;
    }
    .badge--ok{ background:#eafff4; color:#05603a; border-color: rgba(16,185,129,.25); }
    .badge--warn{ background:#fff7e6; color:#9a6700; border-color: rgba(247,144,9,.35); }
    .badge--muted{ background:#f3f4f6; color:#4b5563; border-color: rgba(0,0,0,.10); }

    .btn{
      border: 1px solid var(--border-1);
      background: var(--surface);
      color: var(--text-1);
      border-radius: 12px;
      padding: .6rem .9rem;
      font-weight: 750;
      cursor: pointer;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }
    .btn:hover{ filter: brightness(.99); }
    .btn:active{ transform: translateY(1px); }
    .btn--primary{ background: var(--primary); color:#fff; border-color: rgba(0,0,0,.08); }
    .btn--danger{ background:#b91c1c; color:#fff; border-color: rgba(0,0,0,.08); }
    .btn--ghost{ background: var(--surface); }
    .btn--muted{ background:#eef1f7; color: var(--primary); border-color: rgba(0,0,0,.06); }
    .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

    .notice{
      background:#f0f7ff;
      border:1px solid rgba(59,130,246,.25);
      color:#1e40af;
      padding:.85rem 1rem;
      border-radius: 14px;
      margin: .85rem 0;
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }
    .alert{
      background:#fff7f7;
      border:1px solid rgba(185,28,28,.25);
      color:#b91c1c;
      padding:.85rem 1rem;
      border-radius: 14px;
      margin: .85rem 0;
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }

/* KPI grid: 4-up on desktop, 2-up tablet, 1-up mobile */
.kpis{
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .kpis{ grid-template-columns: 1fr; }
}
/* If there are only 3 KPI cards, use 3 columns */
.kpis:not(:has(:nth-child(4))){
  grid-template-columns: repeat(3, minmax(0, 1fr));
}



    .kpi{
      position: relative;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--border-1);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      padding: 1rem;
      display:grid;
      gap:.6rem;
    }
    .kpi::before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width: 6px;
      background: var(--kpi-accent, rgba(59,130,246,.7));
    }
    .kpi::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(120deg, var(--kpi-tint, rgba(59,130,246,.10)), transparent 60%);
      pointer-events:none;
    }
    .kpi > *{ position: relative; z-index: 1; }

    .kpi--essay { --kpi-accent: rgba(59,130,246,.85);  --kpi-tint: rgba(59,130,246,.14); }
    .kpi--help  { --kpi-accent: rgba(16,185,129,.85); --kpi-tint: rgba(16,185,129,.14); }
    .kpi--join  { --kpi-accent: rgba(245,158,11,.90); --kpi-tint: rgba(245,158,11,.14); }

    .kpi-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.75rem;
    }
    .kpi-title{
      margin:0;
      font-size: 1.05rem;
      font-weight: 751;
      color: var(--text-1);
    }
    .kpi-sub{
      margin:.2rem 0 0;
      color: var(--text-2);
      font-size: .88rem;
    }
    .kpi-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:.75rem;
      margin-top:.25rem;
    }
    @media (max-width: 560px){ .kpi-grid{ grid-template-columns: 1fr; } }

    .kpi-metric{
      background: var(--surface-2);
      border: 1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      padding: .75rem .85rem;
      display:grid;
      gap:.2rem;
    }
    .kpi-metric small{
      color: var(--text-2);
      font-weight: 400;
    }
    .kpi-metric b{
      font-size: 1.35rem;
      color: var(--text-1);
      font-weight: 600;
      line-height: 1.1;
    }

    /* Main layout */
    .layout{
      display:grid;
      grid-template-columns: 320px 1fr;
      gap: 1rem;
      align-items:start;
      padding-bottom: 3rem;
    }
    @media (max-width: 980px){ .layout{ grid-template-columns: 1fr; } }

    .card{
      background: var(--surface);
      border: 1px solid var(--border-1);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      overflow:hidden;
    }
    .card-head{
      padding: .9rem 1rem;
      border-bottom: 1px solid var(--border-1);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      flex-wrap:wrap;
      background: linear-gradient(to bottom, #ffffff, #fbfcff);
    }
    .card-title{
      margin:0;
      font-size: 1.02rem;
      font-weight: 751;
      color: var(--text-1);
    }
    .card-body{
      padding: 1rem;
      display:grid;
      gap: .9rem;
    }

    .navlist{ list-style:none; margin:0; padding:0; }
    .navlist a{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
      padding:.7rem .75rem;
      border-radius: 12px;
      text-decoration:none;
      color: var(--text-1);
      font-weight: 400;
      font-size: 13px;
      border: 1px solid transparent;
    }
    .navlist a:hover{
      background: rgba(0,0,0,.03);
      border-color: rgba(0,0,0,.06);
    }
    .navhint{ color: var(--text-2); font-weight:701; }

    .mini-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:.75rem;
    }
    @media (max-width: 560px){ .mini-grid{ grid-template-columns: 1fr; } }
    .mini{
      padding:.85rem;
      border-radius: 14px;
      background: var(--surface-2);
      border: 1px solid rgba(0,0,0,.06);
      display:grid;
      gap:.15rem;
    }
    .mini small{ color: var(--text-2); font-weight: 601; }
    .mini b{ font-size: 1.25rem; color: var(--text-1); }

    .right-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 1rem;
      align-items:start;
    }
    @media (max-width: 980px){ .right-grid{ grid-template-columns: 1fr; } }

    .kv{
      display:grid;
      grid-template-columns: 150px 1fr;
      gap: .5rem .9rem;
      align-items:start;
    }
    .k{ color: var(--text-2); font-weight: 600; }
    .v{ color: var(--text-1); font-weight: 400; }
    @media (max-width: 640px){
      .kv{ grid-template-columns: 1fr; }
      .v{ padding-bottom:.6rem; border-bottom:1px dashed rgba(0,0,0,.12); }
    }

    /* Modals */
    .modal{
      position: fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(2,6,23,.55);
      z-index: 1000;
      padding: 1rem;
    }
    .modal.is-open{ display:flex; }
    .modal-dialog{
      width: 100%;
      max-width: 720px;
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border-1);
      box-shadow: var(--shadow-2);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      max-height: calc(100vh - 2rem);
    }
    .modal-head{
      padding: 1rem;
      border-bottom: 1px solid var(--border-1);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
    }
    .modal-body{
      padding: 1rem;
      overflow:auto;
      display:grid;
      gap: .85rem;
    }
    .modal-foot{
      padding: 1rem;
      border-top: 1px solid var(--border-1);
      display:flex;
      justify-content:flex-end;
      gap:.5rem;
      background:#fff;
    }
    @media (max-width: 600px){
      .modal{ padding:0; }
      .modal-dialog{
        border-radius: 0;
        height: 100vh;
        max-height: 100vh;
      }
    }

    .form-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: .85rem;
    }
    @media (max-width: 640px){
      .form-grid{ grid-template-columns: 1fr; }
    }

    .field label{
      display:block;
      font-weight: 500;
      color: var(--text-1);
      margin-bottom: .35rem;
      font-size: .92rem;
    }
    .input input{
      width:100%;
      border-radius: 12px;
      font-weight: 500;
      outline: none;
      background: #fff;
    }
    .input input:focus{
      border-color: rgba(59,130,246,.55);
      box-shadow: 0 0 0 4px rgba(59,130,246,.12);
    }
    
    /* Responsive form layout inside cards */
.form-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Optional: allow a field to span full width */
.form-grid .span-2 {
  grid-column: 1 / -1;
}

/* Make sure inputs don’t overflow grid cells */
.field, .input { min-width: 0; }

    
    .container-admin { max-width: 1100px; margin: 1.2rem auto 2rem; padding: 0 1rem; }
  .topbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; }
  .alert { background:#fff7f7; border:1px solid rgba(185,28,28,.25); color:#b91c1c; padding:.6rem .8rem; border-radius:10px; }
  .notice{ background:#f0f7ff; border:1px solid rgba(59,130,246,.25); color:#1e40af; padding:.6rem .8rem; border-radius:10px; }
  .grid { display:grid; gap: 1rem; grid-template-columns: 1fr; }
  .card { background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow-lg); overflow:hidden; }
  .card__head{ display:flex; align-items:center; justify-content:space-between; padding: .85rem 1rem; border-bottom:1px solid var(--border); }
  .card__body{ padding:1rem; display:grid; gap:.6rem; }
  .hstack { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
  .btn { border:0; border-radius:12px; padding:.55rem .9rem; font-weight:701; cursor:pointer; }
  .btn--primary{ background: var(--primary); color:#fff; }
  .btn--danger{ background:#b91c1c; color:#fff; }
  .btn--ghost { background:#fff; border:1px solid var(--border); color: var(--primary); }
  .stat { border:1px solid var(--border); border-radius:12px; padding:.7rem .8rem; }
  .table-wrap{ overflow-x:auto; }
  .table{ width:100%; border-collapse:separate; border-spacing:0; }
  th, td{ padding:.7rem .8rem; border-bottom:1px solid var(--border); text-align:left; }
  th { font-weight:701; }
  .chip { display:inline-flex; gap:.3rem; align-items:center; padding:.2rem .5rem; border:1px solid var(--border); border-radius:999px; font-weight:701; }
  .ok { color:#065f46; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
  .off{ color:#7f1d1d; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
  
   .table td input[type="text"],
    .table td input[type="number"],
    .table td textarea {
      width: 100%;
      background: transparent;
    }
    .pct-cell { width: 120px; }
    .actions-cell { white-space: nowrap; }
    .total-pill {
      display:inline-flex; align-items:center; gap:.5rem;
      border:1px solid var(--border); border-radius:999px; padding:.35rem .6rem;
      background: var(--card); font-weight:701;
    }
    .total-ok { color:#065f46; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
    .total-bad { color:#7f1d1d; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
    .row-handle { cursor: default; opacity:.65; }
    
     .container-admin { max-width: 1100px; margin: 1.2rem auto 2rem; padding: 0 1rem; }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; }
    .crumb a { text-decoration:none; color: var(--text); }
    .crumb a:hover { text-decoration: underline; }
    .hstack { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

    .card { background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow-lg); overflow:hidden; }
    .card__head{ display:flex; align-items:center; justify-content:space-between; padding: .85rem 1rem; border-bottom:1px solid var(--border); }
    .card__title{ margin:0; font-size:1.05rem; }
    .card__body{ padding:1rem; display:grid; gap:.75rem; }

    .btn { border:0; border-radius:12px; padding:.6rem .9rem; font-weight:701; cursor:pointer; }
    .btn--primary{ background: var(--primary); color:#fff; }
    .btn--ghost { background:#fff; border:1px solid var(--border); color: var(--primary); }
    .btn:disabled{ opacity:.6; cursor:not-allowed; }

    .field { display:flex; flex-direction:column; gap:.35rem; }
    .input { display:flex; align-items:center; gap:.5rem; border:1px solid var(--border); border-radius:10px; padding:.55rem .65rem; background:#fff; }
    .input input[type="text"]{ border:0; outline:0; width:100%; background:transparent; color:var(--text); font-size:1rem; }

    .chips { display:flex; gap:.35rem; flex-wrap:wrap; }
    .chip { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .55rem; border:1px solid var(--border); border-radius:999px; background:#fff; font-weight:700; font-size:.82rem; }
    .muted{ color: var(--muted); }

    .alert{ background:#fff7f7; border:1px solid rgba(185,28,28,.25); color:#b91c1c; padding:.6rem .8rem; border-radius:10px; }

    .ck.ck-editor { border:1px solid var(--border); border-radius:12px; box-shadow: 0 6px 14px rgba(0,0,0,.05); }
    .ck.ck-toolbar { border-bottom:1px solid var(--border); border-radius:12px 12px 0 0; }
    .ck.ck-editor__main > .ck-editor__editable {
      min-height: 260px;
      background: var(--card);
      color: var(--text);
      border-radius: 0 0 12px 12px;
    }

    .modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.45); z-index:1000; padding: 1rem; }
    .modal.is-open { display:flex; }
    .modal__dialog { width:100%; max-width:520px; background:#fff; color:#111; border-radius:16px; border:1px solid var(--border); box-shadow: 0 22px 44px rgba(0,0,0,.18); overflow:hidden; }
    .modal__head { padding: 1rem; border-bottom:1px solid var(--border); font-weight:701; display:flex; align-items:center; justify-content:space-between; }
    .modal__body { padding: 1rem; display:grid; gap:.75rem; }
    .modal__foot { padding: 1rem; display:flex; gap:.5rem; justify-content:flex-end; border-top: 1px solid var(--border); }
    
     .truncate { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nowrap { white-space: nowrap; }
    table { width:100%; border-collapse: collapse; }
    th, td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
    th { background: var(--card); position: sticky; top: 0; }
    
    
    .hero{
      border-radius: 1.25rem;
      padding: 1.25rem;
      background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(16,185,129,.14));
      border: 1px solid rgba(0,0,0,.06);
      display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
      margin-bottom: 1rem;
    }
    .hero h1{ margin:0; font-size:1.55rem; }
    .hero p{ margin:.25rem 0 0; opacity:.8; }

    .kpi{
      border-radius: 1.25rem;
      padding: 1rem;
      border: 1px solid rgba(0,0,0,.06);
      background: rgba(255,255,255,.7);
      backdrop-filter: blur(6px);
    }
    .kpi small{ display:block; opacity:.75; }
    .kpi b{ display:block; font-size:1.5rem; margin-top:.15rem; }
    .muted{ opacity:.75; }

    .grid2{ display:grid; grid-template-columns: 1.15fr .85fr; gap:1rem; margin-bottom: 1rem; }
    @media (max-width: 980px){ .grid2{ grid-template-columns: 1fr; } }

    .row{ display:flex; justify-content:space-between; gap:1rem; align-items:center; margin:.85rem 0 .35rem; }
    .bar{ height:10px; border-radius:999px; background: rgba(0,0,0,.06); overflow:hidden; }
    .bar > span{ display:block; height:100%; border-radius:999px; background: rgba(16,185,129,.65); width:0; }
    .bar.amber > span{ background: rgba(245,158,11,.75); }
    .bar.red > span{ background: rgba(239,68,68,.65); }
    .bar.blue > span{ background: rgba(59,130,246,.65); }

    .actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
    
     .page{
      max-width: 1200px;
      margin: 1.25rem auto 2.5rem;
      padding: 0 1rem;
    }

    .page-head{
      display:flex;
      gap: 1rem;
      align-items:flex-start;
      justify-content:space-between;
      flex-wrap:wrap;
      margin-bottom: 1rem;
    }

    .breadcrumb a{
      text-decoration:none;
      color: var(--text-2);
      font-weight: 500;
    }
    .breadcrumb a:hover{ text-decoration: underline; }

    .title-wrap{
      display:grid;
      gap: .35rem;
      min-width: 240px;
    }
    .page-title{
      margin:0;
      font-size: 1.2rem;
      color: var(--text-1);
      letter-spacing: .2px;
    }
    .page-sub{
      color: var(--text-2);
      font-size: .95rem;
      margin:0;
    }

    .head-actions{
      display:flex;
      gap:.5rem;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    /* Buttons */
    .btn{
      border: 1px solid var(--border-1);
      background: var(--surface);
      color: var(--text-1);
      border-radius: 12px;
      padding: .6rem .9rem;
      font-weight: 400;
      cursor: pointer;
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
    }
    .btn:hover{ filter: brightness(.99); }
    .btn:active{ transform: translateY(1px); }
    .btn--primary{
      background: var(--primary);
      color:#fff;
      border-color: rgba(0,0,0,.08);
    }
    .btn--danger{
      background:#b91c1c;
      color:#fff;
      border-color: rgba(0,0,0,.1);
    }
    .btn--muted{
      background:#eef1f7;
      color: var(--primary);
      border-color: rgba(0,0,0,.06);
    }
    .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

    /* Pills / badges */
    .pill-row{
      display:flex;
      gap:.5rem;
      align-items:center;
      flex-wrap:wrap;
      margin-top:.25rem;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .65rem;
      font-weight: 651;
      border-radius: 999px;
      border: 1px solid var(--border-1);
      background: var(--surface);
      color: var(--text-1);
      font-size: .85rem;
      white-space: nowrap;
    }
    .badge--ok{
      background:#eafff4;
      color:#05603a;
      border-color: rgba(16,185,129,.25);
    }
    .badge--warn{
      background:#fff7e6;
      color:#9a6700;
      border-color: rgba(247,144,9,.35);
    }
    .badge--muted{
      background:#f3f4f6;
      color:#4b5563;
      border-color: rgba(0,0,0,.10);
    }

    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
    .muted{ color: var(--text-2); }

    /* Alerts */
    .notice{
      background:#f0f7ff;
      border:1px solid rgba(59,130,246,.25);
      color:#1e40af;
      padding:.85rem 1rem;
      border-radius: 14px;
      margin: .85rem 0;
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }
    .alert{
      background:#fff7f7;
      border:1px solid rgba(185,28,28,.25);
      color:#b91c1c;
      padding:.85rem 1rem;
      border-radius: 14px;
      margin: .85rem 0;
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }

    /* Summary panel */
    .summary{
      background: var(--surface);
      border: 1px solid var(--border-1);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      overflow:hidden;
      margin-bottom: 1rem;
    }
    .summary-inner{
      display:flex;
      gap: 1rem;
      padding: 1rem;
      align-items:center;
      flex-wrap:wrap;
      justify-content:space-between;
    }
    .summary-left{
      display:flex;
      gap: 1rem;
      align-items:center;
      flex-wrap:wrap;
      min-width: 260px;
    }

    .avatar{
      width: 72px;
      height: 72px;
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px solid var(--border-1);
      overflow:hidden;
      flex-shrink:0;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .avatar img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }
    .avatar--empty{
      color: var(--text-2);
      font-weight: 651;
      font-size: .9rem;
    }

    .summary-meta{
      display:grid;
      gap:.2rem;
    }
    .name{
      font-weight: 950;
      color: var(--text-1);
      font-size: 1.05rem;
      line-height: 1.1;
    }
    .meta-line{ color: var(--text-2); font-size: .95rem; }
    .meta-line a{ color: var(--primary); text-decoration:none; font-weight:500; }
    .meta-line a:hover{ text-decoration:underline; }

    /* Main grid */
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items:start;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background: var(--surface);
      border: 1px solid var(--border-1);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      overflow:hidden;
    }
    .card-head{
      padding: .9rem 1rem;
      border-bottom: 1px solid var(--border-1);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      flex-wrap:wrap;
      background: linear-gradient(to bottom, #ffffff, #fbfcff);
    }
    .card-title{
      margin:0;
      font-size: 1.02rem;
      font-weight: 600;
      color: var(--text-1);
    }
    .card-body{
      padding: 1rem;
      display:grid;
      gap: .9rem;
    }

    /* Key/Value list */
    .kv{
      display:grid;
      grid-template-columns: 150px 1fr;
      gap: .5rem .9rem;
      align-items:start;
    }
    .k{ color: var(--text-2); font-weight: 651; }
    .v{ color: var(--text-1); }
    .need-text { white-space: pre-wrap; line-height: 1.5; }

    @media (max-width: 640px){
      .kv{ grid-template-columns: 1fr; gap:.4rem; }
      .k{ margin-top: .45rem; }
      .v{
        padding-bottom: .6rem;
        border-bottom: 1px dashed rgba(0,0,0,.12);
      }
      .v:last-child{ border-bottom:0; }
    }

    /* Modal */
    .modal{
      position: fixed;
      inset: 0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(2,6,23,.55);
      z-index: 1000;
      padding: 1rem;
    }
    .modal.is-open{ display:flex; }

    .modal-dialog{
      width:100%;
      max-width: 920px;
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border-1);
      box-shadow: var(--shadow-2);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      max-height: calc(100vh - 2rem);
    }
    .modal-head{
      padding: 1rem;
      border-bottom: 1px solid var(--border-1);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
    }
    .modal-title{ margin:0; font-weight: 600; color: var(--text-1); }
    .modal-body{
      padding: 1rem;
      overflow:auto;
      display:grid;
      gap: 1rem;
    }
    .modal-foot{
      padding: 1rem;
      border-top: 1px solid var(--border-1);
      display:flex;
      justify-content:flex-end;
      gap:.5rem;
      background: #fff;
    }

    /* Photo modal */
    .img-dialog{
      width:100%;
      max-width: 980px;
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border-1);
      box-shadow: var(--shadow-2);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      max-height: calc(100vh - 2rem);
    }
    .img-body{
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:auto;
      padding: 2rem;
    }
    .img-body img{
      max-width: 100%;
      max-height: 80vh;
      width:auto;
      height:auto;
      display:block;
    }

    @media (max-width: 600px){
      .modal{ padding:0; }
      .modal-dialog,
      .img-dialog{
        border-radius:0;
        height: 100vh;
        max-height: 100vh;
      }
      .img-body img{ max-height: 78vh; }
    }

    /* Clickable photo */
    .photo-btn{
      border:0;
      padding:0;
      background: transparent;
      cursor: zoom-in;
      border-radius: 16px;
      display:block;
    }
    .photo-btn:focus{
      outline: 3px solid rgba(59,130,246,.35);
      outline-offset: 2px;
    }

    /* Small action bar in card */
    .card-actions{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
      align-items:center;
    }
    .divider{
      height: 1px;
      background: rgba(0,0,0,.06);
      margin: .25rem 0;
    }
    
      .page-wrap{ max-width:1100px; margin:1.2rem auto 2rem; padding:0 1rem; }
    .page-head{
      display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
      flex-wrap:wrap; margin-bottom:1rem;
    }
    .page-title{ margin:.2rem 0 0; font-size:1.6rem; }
    .page-sub{ margin:.2rem 0 0; color:var(--muted); }

    /* total pill (reuse your existing classes if present) */
    .total-pill{
      display:inline-flex; align-items:center; gap:.5rem;
      border:1px solid var(--border); border-radius:999px; padding:.35rem .6rem;
      background: var(--card); font-weight:701;
      white-space:nowrap;
    }
    .total-ok{ color:#065f46; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
    .total-bad{ color:#7f1d1d; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }

    /* Criteria list */
    .criteria-list{ display:grid; gap:.75rem; }

    .criterion{
      border:1px solid var(--border);
      background: var(--card);
      border-radius:14px;
      padding:.85rem;
      box-shadow: 0 10px 20px rgba(0,0,0,.04);
    }

    .criterion__header{
      display:flex; align-items:center; justify-content:space-between;
      gap:.75rem; margin-bottom:.65rem;
    }

    .criterion__left{
      display:flex; align-items:center; gap:.6rem;
      min-width: 0;
    }

    .criterion__drag{
      width:32px; height:32px;
      border:1px solid var(--border);
      border-radius:10px;
      display:grid; place-items:center;
      background:#fff;
      color: var(--muted);
      cursor: grab;
      user-select:none;
      flex: 0 0 auto;
    }

    .criterion__meta{
      display:grid;
      gap:.1rem;
      min-width:0;
    }
    .criterion__meta b{
      font-weight:650;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 520px;
      display:block;
    }
    .criterion__meta small{ color: var(--muted); }

    .criterion__actions{
      display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;
    }

    /* Inputs grid */
    .criterion__grid{
      display:grid;
      grid-template-columns: 1fr 140px;
      gap:.75rem;
    }
    @media (max-width: 720px){
      .criterion__grid{ grid-template-columns: 1fr; }
    }

    .field .label{
      display:block;
      font-weight:600;
      font-size:.9rem;
      margin-bottom:.35rem;
      color: var(--text);
    }

    /* Make native inputs match your .input styling without wrapping divs */
    .field input[type="text"],
    .field input[type="number"],
    .field textarea{
      width:100%;
      border:1px solid var(--border);
      border-radius:12px;
      padding:.7rem .75rem;
      background:#fff;
      color: var(--text);
      outline: none;
      font-size: 0.98rem;
    }
    .field textarea{ resize: vertical; }

    .field input:focus,
    .field textarea:focus{
      border-color: rgba(0, 22, 108, 0.35);
      box-shadow: 0 0 0 4px rgba(0, 22, 108, 0.12);
    }

    /* Make description span full width */
    .span-2{ grid-column: 1 / -1; }

    /* Make pct input look more compact */
    .pct input[type="number"]{
      text-align:center;
      font-weight:700;
    }

    /* Card head action group */
    .head-actions{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    
    /* Drag + drop visuals */
.criterion{ position:relative; }
.criterion[draggable="true"]{ cursor: default; }
.criterion.dragging{ opacity:.65; }
.criterion.drop-target{
  outline: 2px solid rgba(0, 22, 108, 0.25);
  outline-offset: 4px;
}
.criterion__drag{ cursor: grab; }
.criterion__drag:active{ cursor: grabbing; }


.nav-admin__menu a{
  position: relative;
  padding: .45rem .65rem;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}

.nav-admin__menu a.is-active{
  background: rgba(59,130,246,.12);
  color: #2563eb;
  font-weight: 600;
}

.nav-admin__menu a.is-active::after{
  content:'';
  position:absolute;
  left:10px;
  right:10px;
  bottom:-6px;
  height:3px;
  border-radius:999px;
  background:#2563eb;
}

/* mobile drawer */
.nav-drawer__list a.is-active{
  background: rgba(59,130,246,.12);
  color:#2563eb;
  font-weight:600;
  border-radius:8px;
}