:root{
  /* ===== Theme surface tokens (Design Tokens) =====
     "الأصلي" below carries the EXACT original colors this project shipped
     with (extracted from this file, unchanged) — every one of these is
     rewritten by theme-picker.js when a person picks a different theme,
     and restored exactly by "إعادة ضبط". No component should ever
     hard-code a color from one of these families — always the variable. */
  --bg0:#050b12;
  --bg1:#071423;
  --card:#0b1f33;
  --card2:#0a1a2c;
  --card3:#050b12;       /* sunken surface: inputs, selects, dropdowns */
  --line:rgba(255,255,255,.08);
  --text:#e8f3ff;
  --muted:color-mix(in srgb, var(--text) 65%, transparent);
  --brand:#35e0c9;
  --brand2:#3aa4ff;
  --text-on-brand:#041015;
  --danger:#ff5673;
  --warn:#ffc14a;
  --ok:#39e27d;
  --shadow: 0 16px 50px rgba(0,0,0,.45);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.55);
  --r:18px;
  --r2:14px;
  --ease: cubic-bezier(.22,.9,.32,1);
  /* "Speed ramping": starts fast, eases into a long smooth finish — used
     for anything that should feel cinematic/deliberate rather than a
     plain linear/basic ease (menus opening, theme switches, modal entry). */
  --ease-cinematic: cubic-bezier(.16,1,.3,1);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial;
  /* Root-cause fix for the "white flash" on native dropdowns/checkboxes:
     this tells the browser to render native form controls (select option
     lists, checkboxes, radio buttons, scrollbar fallback) using their DARK
     variants instead of the default light/white system style. */
  color-scheme: dark;
}

/* Soft, theme-tinted text selection highlight instead of the browser's
   default (often a stark light-blue/white block). */
::selection{
  background: color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--text);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at 80% 10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
              radial-gradient(900px 700px at 10% 30%, color-mix(in srgb, var(--brand2) 10%, transparent), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  font-family:var(--font);
  overflow-x:hidden;
}

/* ---------- intro splash ---------- */
.intro-splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: radial-gradient(1200px 800px at 70% 20%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
              radial-gradient(900px 700px at 20% 60%, color-mix(in srgb, var(--brand2) 14%, transparent), transparent 60%),
              linear-gradient(180deg, #04080f, #071423);
}
.intro-bg{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(600px 420px at 20% 20%, color-mix(in srgb, var(--text) 6%, transparent), transparent 60%),
    radial-gradient(700px 520px at 80% 30%, color-mix(in srgb, var(--text) 5%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 35%, color-mix(in srgb, var(--text) 2%, transparent));
  filter: blur(10px);
  transform: translate3d(0,0,0);
  animation: introFloat 5.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes introFloat{
  0%{ transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  50%{ transform: translate3d(1.2%, 1.4%, 0) scale(1.03); }
  100%{ transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
}

.intro-wrap{ position:relative; width:min(720px, 92vw); padding: 18px; }
.intro-card{
  position:relative;
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 26px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card2) 78%, transparent), color-mix(in srgb, var(--bg1) 78%, transparent));
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  padding: 26px 24px 22px;
  backdrop-filter: blur(14px);
  overflow:hidden;
  transform: translateY(14px) scale(.98);
  opacity: 0;
  animation: introIn .6s ease-out forwards;
}
@keyframes introIn{
  to{ transform: translateY(0) scale(1); opacity:1; }
}

/* subtle "hospital desk" feel */
.intro-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 220px at 50% 8%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%),
    radial-gradient(520px 240px at 65% 28%, color-mix(in srgb, var(--brand2) 10%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 35%),
    linear-gradient(0deg, rgba(0,0,0,.28), transparent 45%);
  pointer-events:none;
}
.intro-card::after{
  content:"";
  position:absolute;
  left:-10%; right:-10%; bottom:-26px;
  height: 120px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 0%, transparent), color-mix(in srgb, var(--card2) 55%, transparent));
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  transform: skewY(-2deg);
  pointer-events:none;
}

.intro-brand{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.intro-logo{
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
  animation: introLogo 2.4s ease-in-out infinite;
}
@keyframes introLogo{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
.intro-title{ font-size: 28px; font-weight: 900; letter-spacing:.2px; }
.intro-sub{ margin-top:4px; color: color-mix(in srgb, var(--text) 74%, transparent); font-size: 14px; }

.intro-doc{
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 2%, transparent));
  overflow:hidden;
  position:relative;
  z-index:1;
  transform: translateY(10px);
  opacity: 0;
  animation: introDocIn .6s ease-out .15s forwards;
}
@keyframes introDocIn{ to{ transform: translateY(0); opacity:1; } }
.doc-top{ display:flex; gap:8px; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.doc-dot{ width: 10px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.doc-body{ padding: 14px; display:flex; flex-direction:column; gap:10px; }
.doc-line{ height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.doc-line.w55{ width:55%; }
.doc-line.w60{ width:60%; }
.doc-line.w70{ width:70%; }
.doc-line.w80{ width:80%; }
.doc-line.w85{ width:85%; }
.doc-line.w90{ width:90%; }

.intro-foot{ margin-top: 14px; color: color-mix(in srgb, var(--text) 65%, transparent); font-size: 12px; position:relative; z-index:1; }

.intro-splash.hide{
  pointer-events:none;
  animation: introOut .45s ease-in forwards;
}
@keyframes introOut{
  to{ opacity:0; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  .intro-bg, .intro-card, .intro-logo, .intro-doc{ animation: none !important; }
}

.bg{
  position:absolute;
  inset:0;
  background: radial-gradient(800px 600px at 60% 30%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 65%),
              radial-gradient(700px 500px at 30% 60%, color-mix(in srgb, var(--brand2) 8%, transparent), transparent 60%);
  pointer-events:none;
}

.view{ display:none; min-height:100vh; }
.view.active{ display:block; }

.login-card{
  position:relative;
  max-width:420px;
  margin: 9vh auto 0;
  padding: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--bg1) 92%, transparent));
  border:1px solid var(--line);
  border-radius: calc(var(--r) + 4px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom: 18px;
}
.brand-icon{
  width:52px; height:52px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand) 25%, transparent), color-mix(in srgb, var(--brand2) 10%, transparent));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.brand-icon img{ width:30px; height:30px; opacity:.95; }
.brand-title{ font-size:22px; font-weight:800; letter-spacing:.2px; }
.brand-sub{ margin-top:2px; color:var(--muted); font-size:13px; }

.field{ display:flex; flex-direction:column; gap:8px; margin: 12px 0; }
label{ color:var(--muted); font-size:13px; }

.field-hint{ margin-top:6px; font-size:12px; color:var(--muted); }
.field-hint.error{ color: color-mix(in srgb, var(--danger) 92%, transparent); }
input, textarea, select{
  width:100%;
  border-radius: 14px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card3) 55%, transparent);
  color:var(--text);
  padding: 12px 12px;
  outline:none;
}
textarea{ min-height:110px; resize:vertical; }
input:focus, textarea:focus, select:focus{
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.btn{
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card2) 85%, transparent);
  color:var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn.primary{
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 95%, transparent), color-mix(in srgb, var(--brand2) 85%, transparent));
  border-color: transparent;
  color: var(--text-on-brand);
  font-weight:800;
}
.btn.danger{
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.btn.tiny{ padding:8px 10px; border-radius: 12px; font-size: 12px; }
.hint{ margin-top:10px; color: var(--muted); font-size:12px; min-height:16px; }

/* ---------- forgot-password: demo-only, resets on refresh ---------- */
.forgot-password-link{
  display:block;
  width:100%;
  margin-top: 10px;
  padding: 6px;
  background: transparent;
  border: none;
  color: var(--brand2);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align:center;
  font-family: inherit;
  transition: color .2s var(--ease);
}
.forgot-password-link:hover{ color: var(--brand); text-decoration: underline; }
.forgot-password-panel{
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--card3);
  animation: modalIn .18s var(--ease);
}
.forgot-password-panel .field{ margin: 0 0 10px; }
.forgot-password-panel .btn{ width:100%; }
@keyframes modalIn{ from{ opacity:0; transform: translateY(22px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } }

.topbar{
  position:sticky; top:0;
  z-index:10;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg1) 78%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}

/* Topbar placement (RTL friendly): put user pill on the visual LEFT */
.topbar-left{ grid-column: 3; justify-self: end; }
.topbar-right{ grid-column: 1; justify-self: start; display:flex; align-items:center; gap:10px; justify-content:flex-start; }
.topbar-title{ font-weight:900; text-align:center; }
.topbar-sub{ color:var(--muted); font-size:12px; text-align:center; margin-top:2px; }

.icon-btn{
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card2) 75%, transparent);
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.icon-btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.icon-btn:active{ transform: translateY(0px); }
.icon-btn-labeled{
  width:auto;
  padding: 0 14px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size: 13px;
  font-weight: 800;
}
#btn-lang-toggle{ font-size: 12px; font-weight: 800; letter-spacing: .3px; }

/* ---------- user-pill: name + role, redesigned ---------- */
.user-pill{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  border:1px solid color-mix(in srgb, var(--brand2) 22%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand2) 7%, var(--card2)), color-mix(in srgb, var(--brand) 5%, var(--card2)));
  max-width: 100%;
  overflow:hidden;
  isolation:isolate;
  box-shadow: 0 6px 18px rgba(6,4,18,.28);
  transform-style: preserve-3d;
  will-change: transform;
  animation: userPillIn .6s var(--ease-cinematic);
}
@keyframes userPillIn{
  from{ opacity:0; transform: translateY(-8px) scale(.92); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
/* slow diagonal light sweep — ambient, not distracting */
.user-pill::after{
  content:"";
  position:absolute;
  inset: -40% -60%;
  background: linear-gradient(75deg, transparent 40%, color-mix(in srgb, var(--brand2) 16%, transparent) 50%, transparent 60%);
  animation: userPillSweep 6s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes userPillSweep{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}
.user-pill-ring{
  position:relative;
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: conic-gradient(from 0deg, var(--brand), var(--brand2), var(--brand));
  animation: userPillRingSpin 5s linear infinite;
  z-index:1;
}
@keyframes userPillRingSpin{ to{ transform: rotate(360deg); } }
.user-pill-avatar{
  width:32px; height:32px;
  border-radius:999px;
  background: var(--card3);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  font-size:14px;
  color: var(--text);
}
.user-pill .dot{
  position:absolute;
  bottom:-1px; inset-inline-end:-1px;
  width:11px; height:11px; border-radius:999px;
  background: var(--ok);
  border: 2px solid var(--card2);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent);
  animation: userPillPulse 2.2s ease-out infinite;
  z-index:2;
}
@keyframes userPillPulse{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%{ box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 0%, transparent); }
  100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); }
}
.user-pill-text{ position:relative; z-index:1; min-width:0; overflow:hidden; }
.user-pill-text .u1{
  font-weight:800; font-size:13.5px; color: var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width: 150px;
}
.u2-wrap{ margin-top:2px; }
.user-pill-text .u2{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.3px;
  padding: 1px 8px;
  border-radius:999px;
  color: var(--text-on-brand);
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.user-pill-ecg{
  display:block;
  width: 70px;
  height: 11px;
  margin-top: 4px;
  overflow: visible;
}
.user-pill-ecg path{
  fill: none;
  stroke: var(--ok);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  opacity: .8;
  animation: userPillEcgDraw 2.6s linear infinite;
}
@keyframes userPillEcgDraw{
  0%{ stroke-dashoffset: 130; }
  60%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -130; }
}
@media (prefers-reduced-motion: reduce){
  .user-pill, .user-pill::after, .user-pill-ring, .user-pill .dot, .user-pill-ecg path{ animation: none; }
}

.main{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 68px);
}
.sidebar{
  border-left:1px solid var(--line);
  padding: 12px;
  background: color-mix(in srgb, var(--bg1) 30%, transparent);
}
.nav-btn{
  width:100%;
  text-align:right;
  margin: 8px 0;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card2) 55%, transparent);
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.nav-btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 35%, transparent); background: color-mix(in srgb, var(--card2) 72%, transparent); }
.nav-btn.active{ border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.nav-btn.danger{ border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 6%, transparent); }

.content{ padding: 16px; }
.panel{ display:none; }
.panel.active{ display:block; }
.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 12px;
}
.panel-head h2{ margin:0; font-size:20px; }
.panel-head p{ margin:8px 0 0; color:var(--muted); font-size:13px; max-width: 55ch; }
.panel-actions{ display:flex; gap:10px; align-items:center; }

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.card{
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border:1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: 0 12px 35px rgba(0,0,0,.30);
}
.card-title{ font-weight:900; margin-bottom: 10px; }

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.card-head .card-title{ margin:0; }
.photo-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* show desktop-only controls only on desktop-like devices */
.desktop-only{ display:none !important; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine){
  .desktop-only{ display:inline-flex !important; }
}

.btn:disabled, .icon-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.btn:disabled:hover, .icon-btn:disabled:hover{ transform:none; }

.muted{ color: var(--muted); font-size: 12px; }
.stats{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.stat{ border:1px solid var(--line); border-radius: 16px; padding: 12px; background: color-mix(in srgb, var(--card2) 50%, transparent); }
.stat-label{ color:var(--muted); font-size:12px; }
.stat-val{ font-size:20px; font-weight:900; margin-top:6px; }

.toolbar{
  display:flex; align-items:center; gap:10px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card2) 40%, transparent);
  margin-bottom: 12px;
}
#candidate-search{ flex: 1 1 220px; min-width: 160px; }

.sorter{ display:flex; align-items:center; gap:8px; }

.spacer{ flex:1; }
.pager{ display:flex; align-items:center; gap:8px; flex-wrap: wrap; justify-content: flex-end; }
.page-jump{ width: 88px; }

.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
/* ============================================================
   Candidate card — "Smart Medical Record" redesign: chamfered
   futuristic shape, glowing status bracket, EKG watermark on
   hover, crosshair vitals grid, segmented LED score bar, shimmer
   primary action. All colors still come from the site's own
   theme tokens (--edge derives from --ok/--warn/--danger) so it
   reskins correctly under any of the 16 themes / custom colors.
   ============================================================ */
.cand-card{
  position: relative;
  padding: 1.5px; /* reveals the gradient "frame" behind the inner layer */
  border-radius: var(--r);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  background: linear-gradient(135deg, color-mix(in srgb, var(--edge) 45%, var(--line)), var(--line));
  transition: transform .45s var(--ease-cinematic), filter .45s var(--ease-cinematic);
}
.cand-card{ --edge: var(--warn); }
.cand-card[data-status="accept"]{ --edge: var(--ok); }
.cand-card[data-status="reject"]{ --edge: var(--danger); }
.cand-card:hover{
  transform: translateY(-6px);
  filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--edge) 40%, transparent));
}
.cand-card-inner{
  position:relative;
  clip-path: polygon(0 0, calc(100% - 24.5px) 0, 100% 24.5px, 100% 100%, 24.5px 100%, 0 calc(100% - 24.5px));
  background: color-mix(in srgb, var(--card) 88%, var(--bg0));
  padding: 16px 26px 16px 16px;
  display:flex; flex-direction:column; gap:12px;
  overflow:hidden;
}
/* faint EKG watermark, only animates while hovered */
.cand-card-inner::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='60' viewBox='0 0 140 60'%3E%3Cpath d='M0,30 L35,30 L42,8 L50,52 L58,30 L140,30' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 140px 60%;
  background-position: 0 65%;
  opacity: 0;
  pointer-events:none;
  transition: opacity .5s var(--ease-cinematic);
}
.cand-card:hover .cand-card-inner::after{
  opacity: .05;
  animation: candEkgDrift 7s linear infinite;
}
@keyframes candEkgDrift{ from{ background-position-x:0; } to{ background-position-x:-280px; } }
/* glowing electronic bracket along the right edge */
.cand-card-inner::before{
  content:"";
  position:absolute;
  top: 16px; bottom:16px; right: 4px;
  width: 10px;
  border: 2px solid var(--edge);
  border-left: none;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 0 14px color-mix(in srgb, var(--edge) 65%, transparent), inset -2px 0 8px color-mix(in srgb, var(--edge) 25%, transparent);
  opacity: .85;
  pointer-events:none;
}

.cand-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; z-index:1; }
.cand-name{ font-weight:900; font-size:16px; }

/* status pill: glass background tinted by --edge, pulsing dot + glow */
.badge{
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  width: max-content;
  color: var(--edge);
  background: color-mix(in srgb, var(--edge) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--edge) 40%, transparent);
  backdrop-filter: blur(6px);
}
.badge-dot{
  width:7px; height:7px; border-radius:999px;
  background: var(--edge);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--edge) 70%, transparent);
  animation: badgePulseDot 1.8s ease-out infinite;
}
@keyframes badgePulseDot{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--edge) 55%, transparent); }
  70%{ box-shadow: 0 0 0 6px color-mix(in srgb, var(--edge) 0%, transparent); }
  100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--edge) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce){
  .cand-card{ transition: none; }
  .badge-dot{ animation: none; }
  .cand-card-inner::after{ transition: none; animation: none !important; }
}

/* 2x2 vitals grid with dashed crosshair divider */
.cand-vitals-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.cand-vitals-grid::after{
  content:"+";
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:12px; font-weight:900;
  color: color-mix(in srgb, var(--edge) 55%, var(--muted));
  pointer-events:none;
}
.vital{
  padding: 9px 12px;
  display:flex; flex-direction:column; gap:3px;
  min-width:0;
}
.vital:nth-child(1){ border-inline-end:1px dashed var(--line); border-block-end:1px dashed var(--line); }
.vital:nth-child(2){ border-block-end:1px dashed var(--line); }
.vital:nth-child(3){ border-inline-end:1px dashed var(--line); }
.vital-icon{ font-size:13px; opacity:.85; line-height:1; }
.vital-label{ font-size:10px; color:var(--muted); font-weight:700; }
.vital-value{ font-size:13px; font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* segmented "LED" score bar */
.cand-score-bar{ display:flex; gap:3px; z-index:1; }
.led-seg{
  flex:1; height:6px; border-radius:2px;
  background: var(--card3);
  transition: background .3s var(--ease-cinematic), box-shadow .3s var(--ease-cinematic);
}
.led-seg.lit{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 0 6px color-mix(in srgb, var(--brand2) 55%, transparent);
}

/* action bar: gradient fade divider + shimmer primary button */
.cand-actions{
  position:relative;
  z-index:1;
  display:flex; gap:8px; flex-wrap:wrap;
  padding-top: 12px;
}
.cand-actions::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 25%, var(--line) 75%, transparent);
}
.cand-actions .btn{ flex:1; min-width: 100px; border-radius: 14px; }
.cand-actions .btn[data-action="details"]{
  position:relative;
  overflow:hidden;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: var(--text-on-brand);
  border:none;
  font-weight:800;
}
.cand-actions .btn[data-action="details"]::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--text) 45%, transparent) 50%, transparent 70%);
  transform: translateX(-130%);
}
.cand-actions .btn[data-action="details"]:hover::after{
  transform: translateX(130%);
  transition: transform .9s var(--ease-cinematic);
}
.cand-actions .btn:not([data-action="details"]){
  background: transparent;
  border: 1.5px solid var(--line);
}
.cand-actions .btn.danger:hover{
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.list{ display:flex; flex-direction:column; gap:10px; }
.row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
  padding: 12px;
  border:1px solid var(--line);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--card2) 45%, transparent);
}
.row-title{ font-weight:900; }
.row-sub{ color: var(--muted); font-size:12px; margin-top:6px; }
.row-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.audit-filters{
  display:flex; align-items:center; gap:10px;
  padding: 10px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card2) 40%, transparent);
  margin-bottom: 12px;
}

.select{
  border-radius: 14px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card3) 55%, transparent);
  color: var(--text);
  padding: 10px 12px;
  min-width: 132px;
  flex-shrink: 0;
}
.sorter{ flex-shrink: 0; }

.input{
  border-radius: 14px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card3) 55%, transparent);
  color: var(--text);
  padding: 10px 12px;
  width: 100%;
  outline: none;
}
.input:focus{
  border-color: color-mix(in srgb, var(--brand2) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand2) 12%, transparent);
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.52);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
  z-index: 50;
}
.modal{
  width:min(980px, 100%);
  max-height: min(88vh, 900px);
  overflow:auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--bg1) 96%, transparent));
  border:1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

/* Wider / full interview modal */
.modal.modal-wide{
  width: min(1600px, 98vw);
  max-height: 94vh;
}
.modal.modal-interview{
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.modal.modal-interview .modal-body{
  flex:1;
  overflow:hidden;
  padding: 12px;
}
.modal.modal-interview .modal-foot{
  flex:0 0 auto;
}
.modal.modal-interview .interview-split{
  height: 100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modal.modal-interview .pane-photo{
  position: sticky;
  top: 0;
  align-self:start;
}
.modal.modal-interview .photo-box.big{
  height: calc(94vh - 220px);
  min-height: 420px;
}
.modal.modal-interview .pane-form{
  overflow:auto;
  max-height: calc(94vh - 220px);
  padding-inline: 4px;
}

/* custom file input */
.file-hidden{ display:none !important; }
.hidden{ display:none !important; }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
}
.modal-title{ font-weight:900; }
.modal-body{ padding: 12px; }
.modal-foot{
  display:flex; gap:10px; justify-content:flex-start;
  padding: 12px;
  border-top: 1px solid var(--line);
}

/* ===== Sub modal (Docs picker inside interview modal) ===== */
.submodal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.58);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  z-index: 65;
}
.submodal-card{
  width: min(980px, 96vw);
  max-height: min(84vh, 820px);
  overflow:auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 98%, transparent), color-mix(in srgb, var(--bg1) 98%, transparent));
  border:1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  animation: subModalIn .16s ease-out;
}
@keyframes subModalIn{
  from{ transform: translateY(10px) scale(.98); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}
.submodal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.submodal-title{ font-weight:900; }
.submodal-body{ padding: 12px; }
.submodal-foot{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  padding: 12px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.doc-actions{ display:flex; align-items:center; gap:8px; }
.doc-actions .icon-btn{ width: 40px; height: 40px; border-radius: 14px; }

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.photo-box{
  border:1px dashed color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card2) 35%, transparent);
  min-height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.photo-box img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.photo-hint{
  position:absolute;
  top:10px; left:10px;
  background: rgba(0,0,0,.35);
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
}

.score-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.score-tile{
  border:1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card2) 45%, transparent);
  padding: 10px;
}
.score-tile .st-title{ font-weight:800; font-size: 13px; margin-bottom:8px;}
.score-tile select{ padding: 10px; border-radius: 14px; }

.toast{
  position:fixed;
  bottom: 14px;
  left: 14px;
  right: 14px;
  margin: 0 auto;
  width: min(520px, 92vw);
  z-index: 60;
  border-radius: 16px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card2) 92%, transparent);
  color: var(--text);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

@media (max-width: 980px){
  .main{ grid-template-columns: 1fr; }
  .sidebar{
    position:fixed;
    inset: 68px 0 auto 0;
    height: calc(100vh - 68px);
    transform: translateX(110%);
    transition: transform .18s ease;
    z-index: 30;
    border-left:none;
    border-top:1px solid var(--line);
    background: color-mix(in srgb, var(--bg1) 94%, transparent);
  }
  body[dir="rtl"] .sidebar{ transform: translateX(-110%); }
  .sidebar.open{ transform: translateX(0%); }
  .content{ padding: 14px; }
  .grid-2{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .score-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 981px){
  #btn-open-menu{ display:none; }
}

select:disabled{ background: color-mix(in srgb, var(--card3) 55%, transparent); color: var(--text); opacity:1; -webkit-text-fill-color: var(--text); }


select, option { background: var(--card3); color: var(--text); }

.score-select { background: var(--card3); color: var(--text); }


/* Mini online indicator (top-right) */
.mini-online{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card2) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: var(--text);
  z-index: 80;
  white-space: nowrap;
}
.mini-online .label{ opacity: .92; }
.mini-online .count{ font-weight: 800; margin-inline-start: 6px; }

.mini-online::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 12%, transparent);
}
.mini-online.on::before{ animation: pulseOnline 1.4s ease-in-out infinite; }
@keyframes pulseOnline{
  0%{ transform: scale(1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 10%, transparent); opacity: .95; }
  60%{ transform: scale(1.08); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 4%, transparent); opacity: 1; }
  100%{ transform: scale(1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 10%, transparent); opacity: .95; }
}

/* Summary links UI (simplified + compact) */
.sl-toolbar{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg1) 55%, transparent);
  backdrop-filter: blur(10px);
}
.sl-list{ display:flex; flex-direction:column; gap:10px; }
.sl-row{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:10px;
  align-items:center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card2) 55%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.sl-actions{ display:flex; flex-direction:column; gap:6px; }
.sl-fields{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sl-label{ min-width: 180px; flex: 1 1 180px; }
.sl-kind{ width: 150px; }
.sl-kindrow{ display:flex; }
.sl-value{ min-width: 260px; flex: 1 1 260px; }
.sl-meta{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; min-width: 190px; }
.sl-vis{ width: 190px; }
.sl-check{ opacity: .95; }
@media (max-width: 980px){
  .sl-row{ grid-template-columns: 1fr; }
  .sl-actions{ flex-direction:row; justify-content:flex-start; }
  .sl-meta{ align-items:flex-start; }
  .sl-vis{ width: 100%; }
  .sl-kind{ width: 100%; }
}

.sl-move{ flex-direction:row; }


/* Summary links (minimal row) */
.sl-toolbar-min{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.sl-row-min{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sl-main{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  width:100%;
}
.sl-map{ min-width: 260px; flex: 2 1 260px; }
.sl-fixed{ min-width: 320px; flex: 3 1 320px; }
.sl-actions-min{ display:flex; flex-direction:row; gap:6px; align-items:center; }
@media (max-width: 980px){
  .sl-row-min{ flex-direction:column; align-items:stretch; }
  .sl-actions-min{ justify-content:flex-start; }
  .sl-vis{ width: 100%; }
  .sl-map{ width: 100%; min-width: 0; }
  .sl-fixed{ width: 100%; min-width: 0; }
}

/* Online badge */
.badge.ok{ border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); }

/* Photo overlay viewer */
.img-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  z-index: 90;
}
.img-overlay img{
  width: min(980px, 95vw);
  height: auto;
  max-height: 86vh;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.18);
}
.img-overlay-close{
  position: fixed;
  top: 14px;
  right: 14px;
}

/* Subtle photo pop animation after upload */
.photo-pop{ animation: photoPop .35s ease-out; }
@keyframes photoPop{
  0%{ transform: scale(.94); }
  100%{ transform: scale(1); }
}

/* Mobile portrait: make cards/buttons less transparent for clarity */
@media (max-width: 980px) and (orientation: portrait){
  .card, .cand-card, .row, .toolbar, .audit-filters, .nav-btn, .user-pill, .stat{
    background: color-mix(in srgb, var(--card) 94%, transparent) !important;
  }
  input, textarea, select{
    background: color-mix(in srgb, var(--card3) 92%, transparent) !important;
  }
  .sidebar{ background: color-mix(in srgb, var(--bg1) 97%, transparent) !important; }
}


/* ===== Interview split layout (photo + questions) ===== */
.interview-split{
  display:grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 12px;
  align-items:start;
}
.pane-photo{
  position: sticky;
  top: 10px;
  align-self:start;
}
.photo-box.big{
  min-height: 380px;
  height: min(62vh, 720px);
}
.photo-box.big img{
  object-fit: contain;
}
@media (max-width: 900px){
  .interview-split{
    grid-template-columns: 1fr;
  }
  .pane-photo{
    position: relative;
    top: auto;
  }
  .photo-box.big{
    height: 320px;
  }
}

/* ===== Details modal (Summary + Results) ===== */
.details-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.details-card{
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card2) 62%, transparent);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.details-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.details-title{
  font-weight: 900;
  letter-spacing: .2px;
}
.summary-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--card3) 28%, transparent);
}
.sr-label{
  font-weight: 900;
  opacity: .95;
}
.sr-val{
  opacity: .92;
  font-weight: 700;
  max-width: 60%;
  text-align:left;
  direction:ltr;
}
.summary-tag{
  padding: 12px;
  border-radius: 14px;
  border:1px dashed color-mix(in srgb, var(--text) 18%, transparent);
  background: color-mix(in srgb, var(--card3) 18%, transparent);
  font-weight: 900;
  text-align:center;
}

.result-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--card3) 22%, transparent);
  border-radius: 14px;
  margin-bottom: 12px;
}
.result-total{
  font-weight: 900;
}
.result-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.res-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--card3) 22%, transparent);
}
.ri-title{
  font-weight: 900;
}
.ri-score{
  font-weight: 900;
  letter-spacing: .4px;
}
.score-red{
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.score-amber{
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.score-green{
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

/* Admin details: questions list */
.details-layout.admin{
  grid-template-columns: 1fr 1fr;
}
.details-layout.admin .qa-card{
  grid-column: 1 / -1;
}
.qa-meta{
  font-weight: 900;
  color: var(--muted);
  font-size: 12px;
  padding-top: 2px;
}
.qa-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 54vh;
  overflow:auto;
  padding: 2px;
}
.qa-row{
  display:grid;
  grid-template-columns: 1fr 1.3fr auto;
  gap: 10px;
  align-items:start;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--card3) 22%, transparent);
}
.qa-label{
  font-weight: 900;
}
.qa-val{
  opacity: .92;
  white-space: pre-wrap;
  line-height: 1.55;
  text-align:left;
  direction: rtl;
}
.qa-tags{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.qa-tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid color-mix(in srgb, var(--text) 16%, transparent);
  background: color-mix(in srgb, var(--card2) 55%, transparent);
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 900px){
  .details-layout{
    grid-template-columns: 1fr;
  }
  .sr-val{
    max-width: 55%;
  }
}


/* Admin details mobile */
@media (max-width: 900px){
  .details-layout.admin{
    grid-template-columns: 1fr;
  }
  .details-layout.admin .qa-card{
    grid-column: auto;
  }
  .qa-row{
    grid-template-columns: 1fr;
  }
  .qa-tags{
    justify-content:flex-start;
  }
  .qa-list{ max-height: 42vh; }
}


/* Hide candidate photo feature on mobile (portrait/landscape) */
@media (max-width: 899px){
  .photo-card{ display:none !important; }
}


/* Hide candidate photo pane on mobile (portrait/landscape) */
@media (max-width: 980px){
  .interview-split{ grid-template-columns: 1fr !important; }
  .pane-photo{ display:none !important; }
}


/* ---------- system banner & lock ---------- */
.system-banner{
  position:fixed;
  top:12px;
  left:12px;
  right:12px;
  z-index:9998;
  background: color-mix(in srgb, var(--card2) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  padding: 10px 12px;
  backdrop-filter: blur(10px);
}
.system-banner .sb-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.system-banner .sb-title{
  font-weight:800;
  font-size:14px;
  margin-bottom:4px;
}
.system-banner .sb-msg{
  font-size:13px;
  color: var(--muted);
  line-height:1.5;
}
.system-banner .sb-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  min-width: 160px;
}
.system-banner .sb-count{
  font-size:12px;
  color: var(--text);
  opacity:.92;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 12px;
  padding:6px 10px;
}
.system-banner .sb-metric{
  font-size:12px;
  color: var(--muted);
}
.system-banner.warn{
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--warn) 12%, transparent);
}
.system-banner.warn .sb-title{ color: var(--warn); }
.system-banner.danger{
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--danger) 14%, transparent);
}
.system-banner.danger .sb-title{ color: var(--danger); }
.system-banner.info .sb-title{ color: var(--brand); }

.lock-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  background: color-mix(in srgb, var(--card3) 72%, transparent);
  backdrop-filter: blur(10px);
}
.lock-card{
  width: min(520px, 96vw);
  background: color-mix(in srgb, var(--card2) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.lock-title{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--danger);
}
.lock-msg{
  font-size: 14px;
  color: var(--text);
  opacity: .95;
  line-height:1.6;
  margin-bottom: 10px;
}
.lock-meta{
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.lock-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.btn.tiny{
  padding: 8px 12px;
  border-radius: 12px;
  font-weight:800;
}
@media (max-width: 520px){
  .system-banner{ top:10px; left:10px; right:10px; }
  .system-banner .sb-actions{ min-width: 140px; }
}


/* Summary mention editor (inside ربط) */
.sl-toolbar-left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sl-mention{
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--bg1) 35%, transparent);
}
.sl-mention-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; }
.sl-mention-input{ flex: 1 1 320px; min-width: 260px; }
.sl-mention-actions{ display:flex; align-items:center; gap:8px; }

/* Temp document boxes (candidate modal) */
.docs-wrap{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: color-mix(in srgb, var(--card2) 55%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.docs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.doc-drop{
  border: 1px dashed color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 16px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg1) 35%, transparent);
  min-height: 150px; /* مستطيلة */
  display:flex;
  flex-direction:column;
  gap: 8px;
  cursor: pointer;
  outline: none;
}
.doc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.doc-label{ font-weight: 900; font-size: 13px; }
.doc-body{
  flex: 1 1 auto;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
}
.doc-empty{
  text-align:center;
  padding: 12px;
  line-height: 1.5;
}
.doc-img{ width:100%; height:100%; object-fit: contain; display:block; }
.docs-note{ margin-top: 10px; font-size: 12px; opacity:.85; }

.doc-remove{ display:none; }
.doc-drop.drag{
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.active-drop{
  border-color: color-mix(in srgb, var(--brand2) 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand2) 12%, transparent);
}
@media (max-width: 980px){
  .docs-grid{ grid-template-columns: 1fr; }
}


/* ---------- in-app confirm modal ---------- */
.confirm-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}
.confirm-modal{
  width: min(440px, calc(100% - 20px));
  background: color-mix(in srgb, var(--card2) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 14px 14px 12px 14px;
  backdrop-filter: blur(6px);
}
.confirm-title{
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
}
.confirm-message{
  font-size: 14px;
  opacity: .92;
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.confirm-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.btn.danger{
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.btn.ghost{
  background: transparent;
}

/* ============================================================
   Below: the "تخصيص" (Customize) panel — 16 preset themes with
   real miniature-UI previews, an "all colors" custom picker, a
   manual per-token color editor, and site-wide smooth theme
   transitions. Ported wholesale from the same design-token
   architecture set up above, so every class it references
   (.card, .cand-card, .row, .toolbar, .badge, .nav-btn, etc.)
   already exists in this file.
   ============================================================ */
/* ---------- theme picker (16 blended, button-free previews) ---------- */
.theme-picker-backdrop{
  position: fixed;
  inset: 0;
  z-index: 120;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 84px 14px 14px;
  background: rgba(6,4,18,.60);
  backdrop-filter: blur(4px);
  animation: backdropFadeIn .35s var(--ease-cinematic);
}
@keyframes backdropFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- first-time medical-rank onboarding modal ---------- */
.rank-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  background: rgba(4,3,10,.72);
  backdrop-filter: blur(10px) saturate(1.2);
  animation: backdropFadeIn .5s var(--ease-cinematic);
}
.rank-modal-backdrop.closing{
  animation: backdropFadeOut .38s var(--ease-cinematic) forwards;
}
@keyframes backdropFadeOut{ to{ opacity:0; } }
.rank-modal-card{
  width: min(640px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px 26px;
  border-radius: 28px;
  text-align:center;
  background: linear-gradient(165deg, color-mix(in srgb, var(--brand2) 8%, var(--card2) 90%), color-mix(in srgb, var(--bg0) 96%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand2) 30%, var(--line));
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent) inset;
  animation: rankModalIn .55s var(--ease-cinematic);
}
.rank-modal-backdrop.closing .rank-modal-card{
  animation: rankModalOut .38s var(--ease-cinematic) forwards;
}
@keyframes rankModalIn{
  from{ opacity:0; transform: translateY(28px) scale(.92); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes rankModalOut{
  to{ opacity:0; transform: translateY(-14px) scale(.94); }
}
.rank-modal-title{
  font-size: 21px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 8px;
}
.rank-modal-title #rank-modal-username{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rank-modal-sub{ color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.rank-modal-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 560px){
  .rank-modal-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.rank-chip{
  padding: 16px 10px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: var(--card3);
  color: var(--text);
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .3s var(--ease-cinematic), transform .3s var(--ease-cinematic), box-shadow .3s var(--ease-cinematic), background .3s var(--ease-cinematic);
}
.rank-chip:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand2) 55%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--brand2) 14%, var(--card3)), var(--card3));
  box-shadow: 0 14px 26px rgba(6,4,18,.35);
}
.rank-chip:active{ transform: translateY(-1px) scale(.98); }
.rank-chip.active{
  border-color: var(--brand2);
  background: linear-gradient(165deg, color-mix(in srgb, var(--brand2) 18%, var(--card3)), var(--card3));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand2) 45%, transparent);
}

/* dashboard-only editable-rank button */
.rank-edit-btn{
  display:inline-flex; align-items:center; gap:8px;
  margin: 4px 0 16px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--brand2) 30%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand2) 8%, var(--card2)), var(--card2));
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: transform .3s var(--ease-cinematic), border-color .3s var(--ease-cinematic), box-shadow .3s var(--ease-cinematic);
}
.rank-edit-btn:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand2) 55%, transparent);
  box-shadow: 0 10px 22px rgba(6,4,18,.3);
}
.theme-picker-card{
  width: min(560px, 94vw);
  max-height: 82vh;
  overflow-y: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 98%, transparent), color-mix(in srgb, var(--bg0) 98%, transparent));
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  padding: 18px;
  animation: modalIn .45s var(--ease-cinematic);
}
.theme-picker-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.theme-picker-title{
  flex: 1;
  min-width: 0;
  font-weight:800;
  font-size:17px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#theme-picker-mute{ font-size: 16px; }
.theme-picker-sub{ margin: 6px 0 16px; }

/* ---------- tabs: presets vs. manual per-token editing ---------- */
.theme-picker-tabs{
  display:flex;
  gap: 6px;
  padding: 4px;
  margin: 14px 0 2px;
  background: var(--card3);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.theme-picker-tab{
  flex:1;
  padding: 9px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.theme-picker-tab.active{
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 20%, var(--card2)), color-mix(in srgb, var(--brand2) 16%, var(--card2)));
  color: var(--text);
}
.theme-panel{ padding-top: 12px; }

/* ---------- font tab: live-preview list, Arabic only ---------- */
.theme-font-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 480px){
  .theme-font-list{ grid-template-columns: 1fr; }
}
.theme-font-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  background: linear-gradient(165deg, color-mix(in srgb, var(--card2) 60%, transparent), var(--card3));
  cursor: pointer;
  text-align: start;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color .5s var(--ease-cinematic), background .5s var(--ease-cinematic), box-shadow .5s var(--ease-cinematic);
}
.theme-font-item::before{
  /* subtle sheen that sweeps with the 3D tilt for a premium, alive feel */
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--brand2) 14%, transparent) 50%, transparent 70%);
  opacity:0;
  transition: opacity .4s var(--ease-cinematic);
  pointer-events:none;
}
.theme-font-item:hover::before{ opacity:1; }
.theme-font-item:hover{
  border-color: color-mix(in srgb, var(--brand2) 45%, var(--line));
  box-shadow: 0 18px 34px rgba(6,4,18,.32);
}
.theme-font-item.active{
  border-color: var(--brand2);
  background: linear-gradient(165deg, color-mix(in srgb, var(--brand2) 14%, var(--card2)), var(--card3));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand2) 55%, transparent);
}
.theme-font-sample{
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
}
.theme-font-name{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .2px;
}
.theme-font-item.active .theme-font-name{ color: var(--brand2); }

/* ---------- manual per-token color editing ---------- */
.theme-manual-rows{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.theme-manual-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background .2s var(--ease);
}
.theme-manual-row:hover{ background: color-mix(in srgb, var(--brand2) 5%, transparent); }
.theme-manual-row-label{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.theme-manual-row-hint{
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}
.theme-manual-row input[type="color"]{
  width: 42px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--card3);
  cursor: pointer;
}

/* ---------- footer action bar ---------- */
.theme-picker-actions{
  display:flex;
  gap: 10px;
  margin-top: 16px;
}
.theme-picker-save{
  flex: 1.4;
  padding: 12px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: var(--text-on-brand);
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .2s var(--ease);
}
.theme-picker-save:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(6,4,18,.35); }
.theme-picker-save.is-saved{ filter: saturate(1.15); }
.theme-picker-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

/* Each tile is a genuine miniature of the theme's own interface — its own
   page background, its own card, its own button gradient, its own text
   and accent tones — so a person can see the *system*, not just a color
   chip, before choosing. Nothing here is Discord's design; it's a small
   render of this site's own components (card + button + text + dot). */
.theme-swatch{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  width:100%;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
  font-family: inherit;
}
.theme-swatch-canvas{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(165deg, var(--sw-bg1), var(--sw-bg0));
  box-shadow: 0 10px 24px rgba(6,4,18,.32);
  transform: scale(1);
  transition: transform .5s var(--ease-cinematic), box-shadow .5s var(--ease-cinematic), filter .5s var(--ease-cinematic);
}
.theme-swatch-canvas{ transform-style: preserve-3d; will-change: transform; }
.theme-swatch:hover .theme-swatch-canvas{
  /* transform itself is now owned by the 3D-tilt JS (see theme-picker.js)
     so it can combine the lift with mouse-driven rotation; this rule keeps
     the depth/glow response */
  box-shadow: 0 18px 36px rgba(6,4,18,.46);
  filter: saturate(1.08) brightness(1.04);
}
.theme-swatch.active .theme-swatch-canvas{
  box-shadow: 0 0 0 2px var(--sw-brand2), 0 18px 36px rgba(6,4,18,.48);
}
.theme-swatch:focus-visible .theme-swatch-canvas{ outline: 2px solid var(--sw-brand2); outline-offset: 3px; }

/* the little card mock inside the tile */
.ts-card{
  position:absolute;
  inset: 16% 13% 16% 13%;
  border-radius: 9px;
  background: var(--sw-card);
  border: 1px solid color-mix(in srgb, var(--sw-brand2) 24%, transparent);
  padding: 12% 10%;
  display:flex;
  flex-direction:column;
  gap: 12%;
  box-shadow: 0 4px 10px rgba(6,4,18,.22);
}
.ts-line{
  height: 9%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sw-brand2) 22%, var(--sw-card2));
}
.ts-line.w70{ width:72%; }
.ts-line.w45{ width:46%; opacity:.85; }
.ts-btn{
  margin-top:auto;
  height: 19%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sw-brand), var(--sw-brand2));
}
.ts-accent-dot{
  position:absolute;
  top:9%;
  inset-inline-start:9%;
  width:11%;
  aspect-ratio:1;
  border-radius:50%;
  background: var(--sw-brand2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-brand2) 30%, transparent);
}
.theme-swatch-dot{
  position:absolute;
  bottom:8%;
  inset-inline-end:9%;
  width:10%;
  aspect-ratio:1;
  border-radius:999px;
  background: var(--sw-brand2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-brand2) 28%, transparent);
  opacity:0;
  transform: scale(.4);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.theme-swatch.active .theme-swatch-dot{ opacity:1; transform: scale(1); }

.ts-name{
  font-size: 11.5px;
  font-weight: 700;
  text-align:center;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.theme-swatch.active .ts-name,
.theme-swatch:hover .ts-name{ color: var(--text); }

/* ---------- "all colors" custom picker tile ---------- */
.theme-custom-input-hidden{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
.theme-swatch.theme-swatch-custom .theme-swatch-canvas{
  background:
    conic-gradient(from 0deg,
      #f0546e, #f2934a, #e3b23c, #7fb84a, #1fcf9e,
      #2bc6bd, #3fa9f5, #4d72ff, #6f7bf5, #9d7bf0, #f0546e);
}
.theme-swatch.theme-swatch-custom .ts-card{
  background: color-mix(in srgb, var(--card3) 55%, transparent);
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  align-items:center;
  justify-content:center;
  gap:0;
}
.theme-swatch.theme-swatch-custom .ts-line,
.theme-swatch.theme-swatch-custom .ts-btn{ display:none; }
.theme-swatch.theme-swatch-custom .ts-plus{
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 2px 6px rgba(6,4,18,.45);
}
.theme-swatch.theme-swatch-custom .ts-accent-dot{ display:none; }
.theme-swatch.theme-swatch-custom.active .theme-swatch-canvas{
  box-shadow: 0 0 0 2px var(--text), 0 18px 36px rgba(6,4,18,.48);
}

.theme-picker-reset{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex: 1;
  padding: 12px;
  border-radius: 16px;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.theme-picker-reset:hover{
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
@media (max-width: 520px){
  .theme-picker-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .theme-picker-backdrop{ padding-top: 74px; }
}


/* ---------- headline text carries the chosen theme's two colors ---------- */
.intro-title,
.brand-title,
.topbar-title,
.panel-head h2,
.modal-title,
.details-title,
.submodal-title{
  background-image: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- smooth, site-wide theme transitions (not just the picker) ---------- */
.card, .cand-card, .row, .toolbar, .audit-filters, .stat, .modal, .submodal-card,
.badge, .nav-btn, .btn, .icon-btn, .user-pill, .topbar, .sidebar, body::before, body{
  transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
}


/* =========================================================================
   Unified, theme-tinted focus/active states — replaces any browser default
   (often a stark white or system-blue ring/highlight) with a soft glow
   derived from the current theme, everywhere an element can be focused,
   hovered-selected, or marked active.
   ========================================================================= */
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-btn:focus-visible,
.theme-picker-reset:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 38%, transparent);
}
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: none;
}
.select:focus, .input:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--brand2) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand2) 16%, transparent);
}

/* ---------- interview modal: toolbar + fullscreen + focus mode ---------- */
.interview-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.interview-toolbar .btn.primary{
  color: var(--text-on-brand);
}

.modal-backdrop.fullscreen-active{ padding: 0; }
.modal.modal-interview.fullscreen{
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  margin: 0;
}
.modal.modal-interview.fullscreen .modal-body{
  padding: 26px clamp(20px, 4vw, 60px);
}
.modal.modal-interview.fullscreen .interview-split{
  grid-template-columns: 0.85fr 1.5fr;
  gap: 30px;
}
.modal.modal-interview.fullscreen .photo-box.big{
  height: calc(100vh - 300px);
  min-height: 460px;
}
.modal.modal-interview.fullscreen .card{ padding: 26px; }
.modal.modal-interview.fullscreen .card-title{ font-size: 18px; }
.modal.modal-interview.fullscreen .score-tile{ padding: 18px; }
.modal.modal-interview.fullscreen .score-tile .st-title{ font-size: 14px; }
.modal.modal-interview.fullscreen #summary-box{ min-height: 170px; }
.modal.modal-interview.fullscreen .field label{ font-size: 14px; }

.modal.modal-interview.focus-mode #status-field-wrap,
.modal.modal-interview.focus-mode .pane-photo,
.modal.modal-interview.focus-mode #summary-section{
  display: none !important;
}
.modal.modal-interview.focus-mode .interview-split{
  grid-template-columns: 1fr;
}
.modal.modal-interview.focus-mode .score-grid{
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.modal.modal-interview.focus-mode.fullscreen .score-grid{
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
@media (max-width: 900px){
  .modal.modal-interview.focus-mode .score-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- score rubric editor (Control panel) ---------- */
.score-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border:1px solid var(--line);
  border-radius: var(--r2);
  background: var(--card2);
  margin-bottom: 14px;
}
.score-editor-step{ font-weight:800; }
.score-editor-total{ font-weight:800; color: var(--brand); }
.score-editor-nav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ============================================================
   Mobile / small-screen pass — covers every component added or
   redesigned in this project (user-pill, rank modal, candidate
   card, toolbar/select). Includes both portrait AND landscape
   phones (short-height landscape needs its own handling — a
   width-only breakpoint misses it entirely).
   ============================================================ */
@media (max-width: 560px){
  .user-pill-text .u1{ max-width: 96px; }
  .topbar-sub{ display:none; }
  .user-pill-ring{ width:32px; height:32px; }
  .user-pill-avatar{ width:27px; height:27px; font-size:12px; }
  .rank-modal-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rank-modal-card{ padding: 22px 16px; }
  .rank-modal-title{ font-size:18px; }
  .cand-card-inner{ padding: 14px 22px 14px 14px; }
  .cand-vitals-grid{ font-size: 12px; }
  .vital{ padding: 8px 9px; }
}
@media (max-width: 360px){
  .rank-modal-grid{ grid-template-columns: 1fr; }
  .cand-vitals-grid{ grid-template-columns: 1fr; }
  .vital:nth-child(1), .vital:nth-child(3){ border-inline-end: none; }
  .vital:nth-child(1), .vital:nth-child(2){ border-block-end: 1px dashed var(--line); }
  .cand-vitals-grid::after{ display:none; }
}
/* short-height landscape phones: modals must stay reachable, not just
   narrow-width — a width breakpoint alone misses this orientation */
@media (max-height: 480px) and (orientation: landscape){
  .rank-modal-backdrop, .theme-picker-backdrop{ align-items: flex-start; padding-top: 10px; }
  .rank-modal-card{ max-height: 94vh; padding: 16px; }
  .rank-modal-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:6px; }
  .rank-chip{ padding: 10px 6px; font-size:12px; }
  .theme-picker-card{ max-height: 94vh; }
}