:root {
  --bg: #060b16;
  --bg-soft: #0a1122;
  --surface: rgba(13, 23, 44, 0.92);
  --surface-2: #111d36;
  --surface-3: #172542;
  --line: rgba(148, 169, 211, 0.16);
  --line-strong: rgba(148, 169, 211, 0.28);
  --text: #eef4ff;
  --muted: #93a4c7;
  --muted-2: #6f82a8;
  --blue: #365cc9;
  --blue-bright: #5b82ff;
  --blue-soft: #203b86;
  --green: #2cc98f;
  --green-dark: #137153;
  --red: #ff6b7a;
  --red-dark: #812d3b;
  --amber: #f4b84b;
  --purple: #8a6cff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 85% -10%, rgba(58, 81, 162, 0.22), transparent 36%),
    radial-gradient(circle at 5% 100%, rgba(34, 76, 145, 0.14), transparent 32%),
    linear-gradient(145deg, #050a14, #0a1020 52%, #080d18);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
a { color: #b7c9ff; text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.025em; }
h1 { font-size: clamp(1.75rem, 2.7vw, 2.6rem); margin-bottom: 0; }
h2 { font-size: clamp(1.35rem, 2vw, 1.85rem); margin-bottom: 10px; }
h3 { font-size: 1.05rem; margin-bottom: 8px; }
small { color: var(--muted); }

.eyebrow {
  color: #8ea9f7;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.muted { color: var(--muted); }
.small { font-size: 0.78rem; }
.nowrap { white-space: nowrap; }
.danger-text { color: #ff94a0; }

.button,
button.button {
  border: 0;
  border-radius: 11px;
  padding: 11px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  font-weight: 800;
  cursor: pointer;
  background: var(--surface-3);
  box-shadow: none;
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.button:hover { transform: translateY(-1px); filter: brightness(1.08); color: white; }
.button.primary { background: linear-gradient(135deg, #2f58c6, #5d75ff); }
.button.secondary { background: #1b2b4d; border: 1px solid var(--line-strong); }
.button.ghost { background: transparent; border: 1px solid var(--line); color: #c0cbea; }
.button.success { background: linear-gradient(135deg, #157453, #2bc992); }
.button.danger { background: linear-gradient(135deg, #78283a, #bd4055); }
.button.full { width: 100%; }
.button.large { min-height: 52px; font-size: 0.98rem; }
.button.compact { padding: 8px 11px; border-radius: 9px; font-size: 0.8rem; }
.text-link { color: #9db6ff; font-size: 0.86rem; font-weight: 700; }
.text-danger { background: none; border: 0; color: #ff8c98; cursor: pointer; padding: 0; font-weight: 700; }
.back-link { display: inline-block; color: var(--muted); margin-bottom: 18px; font-size: 0.88rem; }

.field { display: grid; gap: 7px; }
.field label, form > label {
  font-size: 0.82rem;
  color: #dbe5ff;
  font-weight: 750;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: #091329;
  color: var(--text);
  border-radius: 11px;
  padding: 12px 13px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
input::placeholder, textarea::placeholder { color: #607297; }
input:focus, select:focus, textarea:focus {
  border-color: #5f83ec;
  box-shadow: 0 0 0 4px rgba(74, 111, 222, 0.16);
  background: #0b1730;
}
textarea { resize: vertical; }
select { color-scheme: dark; }
.form-stack { display: grid; gap: 16px; }
.field-help { font-size: 0.73rem; color: var(--muted-2); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 66px; }
.password-wrap button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #9db2e7;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 7px;
}

.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 18px;
  background: rgba(20, 30, 52, 0.94);
  color: #dce6ff;
  font-size: 0.88rem;
}
.flash-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #86a5ff; box-shadow: 0 0 0 5px rgba(134,165,255,.1); }
.flash.success { border-color: rgba(44, 201, 143, 0.42); background: rgba(19, 91, 67, 0.22); }
.flash.success .flash-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(44,201,143,.1); }
.flash.error { border-color: rgba(255, 107, 122, 0.42); background: rgba(112, 34, 47, 0.23); }
.flash.error .flash-dot { background: var(--red); box-shadow: 0 0 0 5px rgba(255,107,122,.1); }
.flash.warning { border-color: rgba(244, 184, 75, 0.42); background: rgba(118, 80, 21, 0.24); }
.flash.warning .flash-dot { background: var(--amber); box-shadow: 0 0 0 5px rgba(244,184,75,.1); }

/* Login */
.login-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background:
    linear-gradient(110deg, rgba(5, 9, 21, .88), rgba(8, 15, 34, .72)),
    radial-gradient(circle at 25% 15%, rgba(56, 90, 191, .28), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(46, 70, 147, .18), transparent 30%);
}
.login-page::before {
  content: "";
  position: absolute;
  width: min(46vw, 700px);
  height: min(46vw, 700px);
  left: -8vw;
  bottom: -12vw;
  background: url('/logo.png') center/contain no-repeat;
  opacity: 0.035;
  filter: grayscale(1);
  pointer-events: none;
}
.login-ambient { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .28; pointer-events: none; }
.login-ambient-one { width: 420px; height: 420px; background: #2e58c8; top: -220px; right: 8%; }
.login-ambient-two { width: 360px; height: 360px; background: #253d8e; bottom: -220px; left: 35%; }
.login-layout {
  width: min(1180px, 100%);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(36px, 7vw, 100px);
  align-items: center;
}
.login-story { padding: 20px 0; }
.login-logo { width: 190px; height: 90px; object-fit: contain; object-position: left center; margin-bottom: 42px; }
.login-story h1 { font-size: clamp(2.7rem, 5vw, 5.2rem); line-height: 0.98; max-width: 780px; margin-bottom: 24px; }
.login-story h1 span { color: #7593ee; }
.login-story > p { color: #a8b6d5; font-size: 1.05rem; line-height: 1.75; max-width: 680px; }
.security-points { display: grid; gap: 14px; margin-top: 34px; max-width: 650px; }
.security-points > div { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.security-points > div > span { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; background: rgba(70, 101, 195, .16); color: #8da7f6; display: grid; place-items: center; font-size: .72rem; font-weight: 900; }
.security-points strong { font-size: .94rem; }
.security-points small { display: block; margin-top: 4px; line-height: 1.5; }
.login-card {
  background: rgba(12, 22, 43, 0.88);
  border: 1px solid rgba(136, 158, 211, 0.22);
  border-radius: 24px;
  padding: clamp(26px, 4vw, 42px);
  box-shadow: 0 40px 110px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(24px);
}
.login-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.login-card-head h2 { margin: 0; }
.secure-icon { width: 45px; height: 45px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #2a52bd, #667dff); font-weight: 900; box-shadow: 0 12px 30px rgba(64, 94, 206, .28); }
.login-card > .muted { line-height: 1.65; margin-bottom: 24px; }
.login-security-note { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 19px; }
.login-security-note p { color: var(--muted); font-size: .77rem; line-height: 1.55; margin: 0; }
.login-security-note strong { color: #c8d5f5; }
.status-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(44,201,143,.1); flex: 0 0 auto; margin-top: 5px; }

/* App shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 20px;
  background: rgba(5, 11, 23, 0.94);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 40;
  backdrop-filter: blur(20px);
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 5px 6px 22px; border-bottom: 1px solid var(--line); color: white; }
.sidebar-brand img { width: 54px; height: 42px; object-fit: contain; }
.sidebar-brand div { display: grid; gap: 2px; }
.sidebar-brand strong { font-size: .95rem; letter-spacing: .05em; }
.sidebar-brand span { color: var(--muted); font-size: .7rem; }
.nav { display: grid; gap: 6px; margin-top: 24px; }
.nav a { display: flex; align-items: center; gap: 12px; color: #8798bb; padding: 11px 12px; border: 1px solid transparent; border-radius: 11px; font-size: .86rem; font-weight: 700; transition: .18s ease; }
.nav a:hover { background: rgba(66, 91, 155, .12); color: #dbe5ff; }
.nav a.active { background: linear-gradient(135deg, rgba(49, 85, 183, .28), rgba(81, 91, 190, .14)); color: white; border-color: rgba(103, 131, 218, .26); box-shadow: inset 3px 0 0 #6586ef; }
.nav-icon { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: #101c35; color: #6f88cd; font-size: .62rem; letter-spacing: .04em; }
.nav a.active .nav-icon { background: #23428f; color: white; }
.sidebar-status { margin-top: auto; border: 1px solid var(--line); background: #09152b; padding: 13px; border-radius: 12px; display: flex; gap: 11px; align-items: flex-start; }
.sidebar-status div { display: grid; gap: 3px; }
.sidebar-status strong { font-size: .76rem; }
.sidebar-status span:last-child { color: var(--muted-2); font-size: .65rem; line-height: 1.45; }
.sidebar-footer { padding: 18px 8px 0; display: grid; gap: 4px; }
.sidebar-footer span { color: var(--muted-2); font-size: .67rem; }
.sidebar-footer strong { color: #aebde1; font-size: .73rem; }
.main-content { min-width: 0; width: 100%; max-width: 1680px; padding: 28px clamp(20px, 3vw, 44px) 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title h1 { font-size: clamp(1.65rem, 2.4vw, 2.35rem); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.identity-pill { display: flex; align-items: center; gap: 10px; padding: 7px 11px 7px 7px; border: 1px solid var(--line); border-radius: 13px; background: rgba(13, 23, 44, .72); }
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #284fae, #5e79e9); font-weight: 900; }
.identity-pill div { display: grid; gap: 1px; }
.identity-pill strong { font-size: .78rem; }
.identity-pill span:last-child { color: var(--muted); font-size: .67rem; }
.menu-button { display: none; width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 10px; background: #0d192f; color: white; cursor: pointer; }
.sidebar-backdrop { display: none; }

.hero-panel {
  border: 1px solid rgba(105, 132, 211, .24);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background:
    linear-gradient(120deg, rgba(22, 42, 92, .72), rgba(14, 24, 46, .76)),
    radial-gradient(circle at 80% 30%, rgba(105, 116, 246, .26), transparent 30%);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.hero-panel::after { content: "DRD"; position: absolute; right: 2%; bottom: -34px; font-size: 8rem; font-weight: 950; color: rgba(255,255,255,.025); letter-spacing: -.08em; }
.hero-panel > div:first-child { position: relative; z-index: 1; max-width: 840px; }
.hero-panel h2 { font-size: clamp(1.6rem, 3vw, 2.65rem); max-width: 780px; }
.hero-panel p { color: #aebbd7; line-height: 1.65; margin-bottom: 0; max-width: 790px; }
.hero-security { flex: 0 0 250px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(111, 143, 232, .24); background: rgba(7, 15, 33, .58); padding: 15px; border-radius: 14px; position: relative; z-index: 1; }
.hero-security div { display: grid; gap: 3px; }
.hero-security strong { font-size: .82rem; }
.hero-security span:last-child { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.hero-lock { width: 37px; height: 37px; border-radius: 11px; display: grid; place-items: center; background: rgba(45, 201, 143, .15); color: #5be3b2; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 18px 0; }
.metric-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 19px; display: grid; gap: 5px; box-shadow: 0 12px 35px rgba(0,0,0,.14); }
.metric-label { color: #91a2c6; font-size: .76rem; font-weight: 750; }
.metric-card strong { font-size: 2rem; letter-spacing: -.04em; }
.metric-card small { font-size: .68rem; }

.panel, .product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(0,0,0,.17);
}
.panel { padding: clamp(18px, 2.4vw, 26px); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { margin-bottom: 0; }
.step-pill { color: #a9bcf3; border: 1px solid var(--line); background: #111f3c; border-radius: 999px; padding: 6px 10px; font-size: .68rem; font-weight: 800; white-space: nowrap; }

.product-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 26px; padding: 25px; margin-bottom: 18px; }
.product-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-right: 1px solid var(--line); padding-right: 25px; }
.qr-frame { width: 164px; height: 164px; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.qr-frame img { width: 100%; height: 100%; object-fit: contain; }
.product-qr > span { color: #8394b8; font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.product-main { min-width: 0; }
.detail-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); align-items: center; }
.detail-row > span { color: var(--muted); font-size: .75rem; }
.detail-row code, .detail-row a { overflow-wrap: anywhere; font-size: .82rem; }
.detail-row code { color: #b8c9f6; }
.product-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 15px 0 20px; }
.product-meta div { background: #0a152a; border: 1px solid var(--line); border-radius: 11px; padding: 11px; display: grid; gap: 4px; }
.product-meta span { color: var(--muted-2); font-size: .66rem; }
.product-meta strong { font-size: .76rem; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; }

.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 9px; font-size: .66rem; font-weight: 850; white-space: nowrap; border: 1px solid transparent; }
.badge.live, .badge.approved { color: #75e6ba; background: rgba(44, 201, 143, .12); border-color: rgba(44,201,143,.22); }
.badge.pending, .badge.warning { color: #ffd17a; background: rgba(244, 184, 75, .12); border-color: rgba(244,184,75,.22); }
.badge.rejected { color: #ff9ca6; background: rgba(255, 107, 122, .12); border-color: rgba(255,107,122,.22); }
.badge.cancelled, .badge.superseded { color: #a9b6d6; background: rgba(132, 148, 188, .12); border-color: rgba(132,148,188,.2); }
.badge.role { color: #a8bdf7; background: rgba(74, 105, 197, .15); border-color: rgba(100,129,216,.2); }

.content-grid { display: grid; gap: 18px; }
.employee-grid { grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); }
.boss-grid { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); }
.team-grid { grid-template-columns: minmax(320px, .65fr) minmax(0, 1.35fr); }
.profile-grid { grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); max-width: 1100px; }
.request-list { display: grid; gap: 11px; }
.request-item { background: #0a1529; border: 1px solid var(--line); border-radius: 13px; padding: 14px; }
.request-top, .request-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.request-item p { color: var(--muted); font-size: .78rem; margin: 9px 0; line-height: 1.5; }
.request-foot { font-size: .7rem; color: var(--muted-2); }
/* Destination URLs wrap rather than truncate. `nowrap` + ellipsis hid the tail
   of every URL on the dashboard, which is where two candidates differ — and the
   class name is now a lie, so it keeps its name only because changing it would
   touch templates for no behavioural gain. `anywhere` rather than
   `break-word`: a URL has no spaces, so it is one unbreakable word and only
   `anywhere` will break inside it. */
.truncate-link { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: .77rem; margin-top: 7px; line-height: 1.45; }
.empty-state { min-height: 100px; border: 1px dashed var(--line-strong); border-radius: 13px; display: grid; place-items: center; padding: 22px; color: var(--muted); text-align: center; }
.empty-state.large { min-height: 220px; align-content: center; gap: 6px; }
.empty-state.large strong { color: var(--text); font-size: 1.2rem; }
.approval-queue { display: grid; gap: 12px; }
.approval-item { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--line); background: #0a152a; border-radius: 14px; padding: 14px; }
.requester-avatar, .member-avatar { width: 43px; height: 43px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, #24499f, #5d72dc); }
.approval-body { min-width: 0; }
.approval-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.approval-title strong { font-size: .86rem; }
.approval-title span, .approval-title time { color: var(--muted-2); font-size: .67rem; }
.approval-product { color: #9fb4ed; font-size: .7rem; margin-top: 5px; font-weight: 750; }
.approval-body p { color: var(--muted); font-size: .75rem; margin: 8px 0 0; }
.timeline { display: grid; }
.timeline-item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-item > span { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: #5d7fe5; box-shadow: 0 0 0 4px rgba(93,127,229,.12); }
.timeline-item strong { font-size: .76rem; }
.timeline-item p { color: var(--muted-2); font-size: .66rem; margin: 4px 0 0; }

/* Review */
.review-header { max-width: 850px; margin-bottom: 20px; }
.review-header p { color: var(--muted); line-height: 1.65; }
.review-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: 18px; }
.evidence-list { margin: 0; display: grid; }
.evidence-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); }
.evidence-list dt { color: var(--muted); font-size: .75rem; }
.evidence-list dd { margin: 0; font-size: .84rem; display: grid; gap: 3px; }
.evidence-list dd span { color: var(--muted-2); font-size: .7rem; }
.url-comparison { margin-top: 18px; }
.url-comparison > div:not(.arrow-down) { border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: #091429; display: grid; gap: 7px; }
.url-comparison span { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.url-comparison a { overflow-wrap: anywhere; font-size: .82rem; }
.url-comparison .new-url { border-color: rgba(76, 120, 224, .38); background: rgba(23, 47, 102, .25); }
.arrow-down { color: #7088c8; text-align: center; padding: 7px; }
.warning-box { margin-top: 17px; border: 1px solid rgba(244,184,75,.24); background: rgba(112,74,18,.14); border-radius: 12px; padding: 13px; display: grid; gap: 4px; }
.warning-box strong { color: #ffd187; font-size: .79rem; }
.warning-box span { color: #b7a98b; font-size: .72rem; line-height: 1.5; }
.method-selector { display: grid; gap: 9px; }
.method-selector label { display: flex; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #0a152a; cursor: pointer; }
.method-selector input { width: auto; margin-top: 3px; accent-color: var(--blue-bright); }
.method-selector span { display: grid; gap: 3px; }
.method-selector strong { font-size: .8rem; }
.method-selector small { font-size: .68rem; line-height: 1.4; }
.otp-input { text-align: center; letter-spacing: .45em; font-size: 1.4rem; font-weight: 900; }
.email-otp-form { margin-top: 10px; }
.rejection-panel { margin-top: 18px; display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr); gap: 24px; align-items: end; }
.rejection-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

/* Tables and filters */
.filter-panel { margin-bottom: 18px; }
.filter-form { display: flex; align-items: end; gap: 11px; flex-wrap: wrap; }
.filter-form .field { flex: 1 1 190px; }
.filter-form .field:first-child { flex: 2 1 260px; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.data-table th { text-align: left; padding: 11px 12px; color: #778aaf; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--line-strong); }
.data-table td { padding: 13px 12px; vertical-align: top; border-bottom: 1px solid var(--line); color: #c6d1e9; font-size: .76rem; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td strong { display: block; color: #edf3ff; font-size: .78rem; margin-bottom: 4px; }
.data-table td small { display: block; font-size: .66rem; line-height: 1.45; max-width: 260px; }
/* Same change as .truncate-link, and this is the one the history table uses:
   every row showed `https://shop.exa…` and stopped. The max-width stays so the
   column keeps its shape; the URL now uses as many lines inside it as it needs. */
.table-url { display: block; max-width: 330px; overflow-wrap: anywhere; font-size: .7rem; margin-top: 4px; line-height: 1.45; }
.reason-cell { max-width: 280px; line-height: 1.45; }
.event-action { color: #b3c4f2; background: #111f3a; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; display: inline-flex; white-space: nowrap; }
details summary { cursor: pointer; color: #94aceb; font-weight: 700; font-size: .72rem; }
details pre { max-width: 620px; white-space: pre-wrap; overflow-wrap: anywhere; background: #071126; border: 1px solid var(--line); border-radius: 10px; padding: 12px; color: #aebcda; font-size: .68rem; line-height: 1.5; }
.audit-summary { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(18, 38, 82, .72), rgba(12, 23, 43, .88)); padding: 24px; display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 18px; }
.audit-summary p { color: var(--muted); line-height: 1.6; margin-bottom: 0; max-width: 850px; }

/* Team */
.team-list { display: grid; gap: 11px; }
.team-member { border: 1px solid var(--line); background: #09152a; border-radius: 14px; padding: 14px; display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; gap: 13px; align-items: center; }
.team-member.disabled { opacity: .65; }
.member-info { min-width: 0; }
.member-info > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.member-info strong { font-size: .86rem; }
.member-info p { color: var(--muted); font-size: .7rem; margin: 5px 0; }
.member-info small { font-size: .65rem; }
.member-actions { grid-column: 2 / 4; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.credential-panel { border: 1px solid rgba(244,184,75,.36); border-radius: 15px; background: rgba(91,62,18,.24); padding: 17px; margin-bottom: 18px; display: grid; grid-template-columns: 1fr minmax(320px, 1fr) auto; gap: 16px; align-items: center; }
.credential-panel h3 { margin-bottom: 4px; }
.credential-panel p { margin-bottom: 0; font-size: .73rem; }
.credential-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.credential-grid div { background: #0b1528; border: 1px solid var(--line); border-radius: 10px; padding: 9px; display: grid; gap: 4px; }
.credential-grid span { color: var(--muted-2); font-size: .61rem; }
.credential-grid strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; overflow-wrap: anywhere; }

/* Profile */
.profile-card { text-align: center; }
.profile-avatar { width: 86px; height: 86px; border-radius: 24px; margin: 0 auto 18px; display: grid; place-items: center; font-size: 2rem; font-weight: 950; background: linear-gradient(135deg, #254aa7, #6d78e9); box-shadow: 0 16px 40px rgba(45,75,166,.3); }
.profile-details { margin: 22px 0 0; display: grid; text-align: left; }
.profile-details > div { display: grid; grid-template-columns: 100px 1fr; padding: 12px 0; border-top: 1px solid var(--line); }
.profile-details dt { color: var(--muted); font-size: .72rem; }
.profile-details dd { margin: 0; font-size: .78rem; overflow-wrap: anywhere; }
.password-rules { display: flex; flex-wrap: wrap; gap: 7px; }
.password-rules span { color: #8fa2ca; background: #0b172d; border: 1px solid var(--line); padding: 5px 8px; border-radius: 999px; font-size: .65rem; }
.mandatory-banner { border: 1px solid rgba(244,184,75,.35); background: rgba(112,74,18,.22); border-radius: 14px; padding: 14px 17px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.mandatory-banner strong { color: #ffd17c; }
.mandatory-banner span { color: #bba98b; font-size: .78rem; }

.page-footer { margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: #607399; font-size: .65rem; }

/* Error */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.error-card { width: min(520px, 100%); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: 38px; text-align: center; box-shadow: var(--shadow); }
.error-card img { width: 150px; height: 80px; object-fit: contain; margin-bottom: 18px; }
.error-code { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin: 0 auto 18px; background: rgba(255,107,122,.14); color: #ff9ca6; font-weight: 950; font-size: 1.5rem; }
.error-card p { color: var(--muted); line-height: 1.65; margin-bottom: 24px; }

@media (max-width: 1180px) {
  .login-layout { grid-template-columns: 1fr 420px; gap: 40px; }
  .login-story h1 { font-size: 3.5rem; }
  .product-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .boss-grid, .review-grid, .team-grid { grid-template-columns: 1fr; }
  .credential-panel { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .login-layout { grid-template-columns: 1fr; max-width: 560px; }
  .login-story { text-align: center; }
  .login-logo { object-position: center; margin-bottom: 25px; }
  .login-story h1 { font-size: clamp(2.4rem, 9vw, 4.2rem); }
  .security-points { text-align: left; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-105%); transition: transform .22s ease; width: 270px; box-shadow: 30px 0 70px rgba(0,0,0,.45); }
  body.menu-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 35; }
  body.menu-open .sidebar-backdrop { display: block; }
  .menu-button { display: grid; place-items: center; }
  .main-content { max-width: none; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .employee-grid, .profile-grid { grid-template-columns: 1fr; }
  .hero-panel { align-items: flex-start; flex-direction: column; }
  .hero-security { flex-basis: auto; width: 100%; }
  .product-card { grid-template-columns: 1fr; }
  .product-qr { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 22px; }
  .audit-summary { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .login-page { padding: 20px 14px; align-items: start; }
  .login-story { padding-top: 10px; }
  .login-story > p, .security-points { display: none; }
  .login-logo { width: 150px; height: 70px; margin-bottom: 15px; }
  .login-story h1 { font-size: 2.45rem; margin-bottom: 10px; }
  .login-card { border-radius: 18px; }
  .main-content { padding: 20px 14px; }
  .topbar { align-items: flex-start; }
  .topbar-actions { gap: 6px; }
  .identity-pill div { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { padding: 15px; }
  .metric-card strong { font-size: 1.55rem; }
  .product-card, .panel { padding: 17px; }
  .detail-row { grid-template-columns: 1fr; gap: 5px; }
  .product-meta { grid-template-columns: 1fr 1fr; }
  .approval-item { grid-template-columns: 40px minmax(0,1fr); }
  .approval-item > .button { grid-column: 1 / 3; width: 100%; }
  .rejection-panel { grid-template-columns: 1fr; }
  .rejection-form { grid-template-columns: 1fr; }
  .filter-form { display: grid; grid-template-columns: 1fr; }
  .filter-form .field { width: 100%; }
  .team-member { grid-template-columns: 43px 1fr; }
  .member-status { grid-column: 2; }
  .member-actions { grid-column: 1 / 3; justify-content: stretch; }
  .member-actions form { flex: 1; }
  .member-actions .button { width: 100%; }
  .credential-grid { grid-template-columns: 1fr; }
  .evidence-list > div { grid-template-columns: 1fr; gap: 5px; }
  .page-footer { flex-direction: column; gap: 5px; }
  .hero-panel::after { font-size: 5rem; }
  .mandatory-banner { align-items: flex-start; flex-direction: column; }
}

.version-history { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; }
.version-history summary { cursor: pointer; color: #9eb4ed; font-size: .76rem; font-weight: 800; }
.version-history > p { color: var(--muted); font-size: .72rem; margin: 12px 0 0; }
.version-item { margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #091429; display: grid; gap: 5px; }
.version-item span, .version-item small { color: var(--muted-2); font-size: .66rem; }
.version-item a { font-size: .74rem; overflow-wrap: anywhere; }

/* ============================================================
   Scan analytics — charts are server-rendered SVG, so these
   styles only handle framing, legend and layout.
   ============================================================ */
.chart-panel { display: grid; gap: 14px; }
.chart-frame { width: 100%; overflow-x: auto; }
.chart-frame svg { display: block; min-width: 280px; }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.chart-legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 700; color: #93a4c7;
  white-space: nowrap;
}
/* The swatch carries identity; the label text stays in the muted ink token
   rather than taking the series colour. */
.legend-item .swatch { width: 16px; height: 3px; border-radius: 2px; flex: none; }
.legend-item .swatch.solid { background: #5b82ff; }
.legend-item .swatch.dashed {
  background: repeating-linear-gradient(90deg, #1fa878 0 4px, transparent 4px 7px);
}

.metric-card .metric-small { font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.3; }
.muted.small { font-size: .74rem; color: #8496ba; margin: 0; }

@media (max-width: 700px) {
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
}