@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --ink:       #0D1B2A;
  --ink-80:    #1A2E42;
  --ink-60:    #2A4560;
  --ink-40:    #3E607F;
  --ink-20:    #6B8FAB;
  --teal:      #00B4A6;
  --teal-dark: #009088;
  --teal-light:#E0F7F6;
  --teal-mid:  #B2EAE7;
  --sky:       #3B9EE8;
  --sky-bg:    #EBF5FD;
  --green:     #22C55E;
  --green-bg:  #F0FDF4;
  --amber:     #F59E0B;
  --amber-bg:  #FFFBEB;
  --red:       #EF4444;
  --red-bg:    #FFF1F1;
  --slate:     #64748B;
  --border:    #E4ECF2;
  --border-2:  #D0DCE8;
  --bg:        #F4F7FA;
  --bg-2:      #EDF2F7;
  --white:     #FFFFFF;
  --text:      #0D1B2A;
  --text-2:    #374151;
  --text-3:    #6B7280;
  --text-4:    #9CA3AF;
  --shadow-sm: 0 1px 3px rgba(13,27,42,.08), 0 1px 2px rgba(13,27,42,.04);
  --shadow:    0 4px 12px rgba(13,27,42,.1), 0 2px 6px rgba(13,27,42,.06);
  --shadow-lg: 0 12px 32px rgba(13,27,42,.14), 0 4px 12px rgba(13,27,42,.08);
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --font: 'Pretendard', 'Noto Sans KR', sans-serif;
  --sidebar-w: 232px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; font-size:13px; }
button { font-family:var(--font); cursor:pointer; }
input, select, textarea { font-family:var(--font); }
a { text-decoration:none; color:inherit; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:3px; }

/* ─────────────────── APP SHELL ────────────────────────── */
.shell { display:flex; height:100vh; overflow:hidden; }

/* ─────────────────── SIDEBAR ──────────────────────────── */
.sb {
  width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg,var(--ink) 0%,#0B1825 100%);
  display:flex; flex-direction:column; overflow:hidden;
  border-right:1px solid rgba(255,255,255,.04);
}
.sb-logo {
  padding:20px 16px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px;
}
.sb-logo-icon {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),#00D4C8);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; box-shadow:0 4px 12px rgba(0,180,166,.35);
}
.sb-logo-text { color:#fff; font-size:13px; font-weight:700; line-height:1.3; }
.sb-logo-sub { color:rgba(255,255,255,.38); font-size:10px; margin-top:1px; }
.sb-scroll { flex:1; overflow-y:auto; padding:8px 0; }
.sb-scroll::-webkit-scrollbar { width:0; }
.sb-section { margin-bottom:4px; }
.sb-section-label {
  padding:8px 18px 4px;
  font-size:9.5px; font-weight:700; letter-spacing:1.4px;
  color:rgba(255,255,255,.22); text-transform:uppercase;
}
.sb-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 12px 8px 14px; margin:0 8px 1px;
  border-radius:8px; cursor:pointer;
  color:rgba(255,255,255,.52); font-size:12.5px; font-weight:500;
  transition:all .15s; position:relative; text-decoration:none;
}
.sb-item:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.82); }
.sb-item.on {
  background:linear-gradient(90deg,rgba(0,180,166,.22),rgba(0,180,166,.08));
  color:#4DD9D0;
}
.sb-item.on::before {
  content:''; position:absolute; left:0; top:20%; height:60%;
  width:3px; background:var(--teal); border-radius:0 3px 3px 0;
}
.sb-item-icon { font-size:14px; width:18px; text-align:center; flex-shrink:0; }
.sb-item-label { flex:1; }
.sb-badge {
  background:var(--red); color:#fff;
  font-size:9px; font-weight:800;
  padding:1px 5px; border-radius:8px; line-height:1.6;
}
.sb-badge.g { background:var(--teal); }
.sb-badge.y { background:var(--amber); }
.sb-footer { border-top:1px solid rgba(255,255,255,.06); padding:12px; }
.sb-user {
  display:flex; align-items:center; gap:9px; padding:8px;
  border-radius:8px; cursor:pointer; transition:background .15s; text-decoration:none;
}
.sb-user:hover { background:rgba(255,255,255,.06); }
.sb-user-av {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--green));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700;
}
.sb-user-name { color:#fff; font-size:12px; font-weight:600; }
.sb-user-role { color:rgba(255,255,255,.38); font-size:10px; margin-top:1px; }

/* ─────────────────── MAIN ──────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar {
  height:56px; background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0;
  position:sticky; top:0; z-index:40;
}
.tb-breadcrumb { display:flex; align-items:center; gap:6px; flex:1; }
.tb-bc-home { color:var(--text-4); font-size:12px; cursor:pointer; text-decoration:none; }
.tb-bc-home:hover { color:var(--teal); }
.tb-bc-sep { color:var(--border-2); font-size:12px; }
.tb-bc-cur { color:var(--text); font-size:13px; font-weight:700; }
.tb-right { display:flex; align-items:center; gap:8px; }
.tb-date {
  font-size:11px; color:var(--text-3);
  background:var(--bg); border:1px solid var(--border);
  padding:5px 10px; border-radius:6px; font-weight:500;
}
.tb-icon-btn {
  width:34px; height:34px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; position:relative; transition:all .15s;
}
.tb-icon-btn:hover { border-color:var(--teal); background:var(--teal-light); }
.tb-notif-dot {
  position:absolute; top:5px; right:5px;
  width:7px; height:7px; background:var(--red);
  border-radius:50%; border:1.5px solid var(--white);
}
.tb-avatar {
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,var(--ink),var(--ink-60));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700;
  border:2px solid var(--border); text-decoration:none;
}
.content { flex:1; overflow-y:auto; padding:20px; }

/* ─────────────────── PAGE HEADER ──────────────────────── */
.ph { margin-bottom:20px; }
.ph-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ph-title { font-size:20px; font-weight:800; color:var(--text); line-height:1.2; }
.ph-sub { font-size:12px; color:var(--text-3); margin-top:3px; font-weight:400; }
.ph-actions { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }

/* ─────────────────── BUTTONS ───────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 16px; border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:600; border:none;
  transition:all .15s; white-space:nowrap; line-height:1; cursor:pointer;
}
.btn-xs { padding:5px 10px; font-size:11px; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-lg { padding:11px 22px; font-size:14px; }
.btn-p  { background:var(--teal); color:#fff; }
.btn-p:hover { background:var(--teal-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,180,166,.3); }
.btn-o  { background:var(--white); color:var(--text-2); border:1.5px solid var(--border); }
.btn-o:hover { border-color:var(--teal); color:var(--teal); }
.btn-danger  { background:var(--red-bg); color:var(--red); border:1.5px solid #FFD5D5; }
.btn-danger:hover { background:#FFECEC; }
.btn-success { background:var(--green-bg); color:#16A34A; border:1.5px solid #BBF7D0; }
.btn-warn    { background:var(--amber-bg); color:#D97706; border:1.5px solid #FDE68A; }
.btn-ghost   { background:transparent; color:var(--text-3); }
.btn-ghost:hover { background:var(--bg); color:var(--text); }
.btn-ink     { background:var(--ink); color:#fff; }
.btn-ink:hover { background:var(--ink-80); }
.btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* ─────────────────── CARD ──────────────────────────────── */
.card {
  background:var(--white); border-radius:var(--radius-lg);
  border:1px solid var(--border); overflow:hidden;
}
.card-pad { padding:18px 20px; }
.card-header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.card-title { font-size:13.5px; font-weight:700; color:var(--text); }
.card-sub   { font-size:11px; color:var(--text-4); margin-top:2px; }
.card-body  { padding:18px; }
.card-footer {
  padding:12px 18px; border-top:1px solid var(--border);
  background:var(--bg); display:flex; align-items:center; justify-content:space-between;
}

/* ─────────────────── STAT CARD ─────────────────────────── */
.stat {
  background:var(--white); border-radius:var(--radius-lg);
  border:1px solid var(--border); padding:16px 18px;
  position:relative; overflow:hidden; transition:box-shadow .2s;
}
.stat:hover { box-shadow:var(--shadow); }
.stat-accent {
  position:absolute; top:0; left:0; width:3px; height:100%;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}
.stat-icon {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; margin-bottom:10px;
}
.stat-val   { font-size:24px; font-weight:800; color:var(--text); line-height:1; margin-bottom:3px; }
.stat-label { font-size:11.5px; color:var(--text-3); font-weight:500; }
.stat-change { font-size:11px; font-weight:600; margin-top:7px; display:flex; align-items:center; gap:3px; }
.chg-up  { color:var(--green); }
.chg-dn  { color:var(--red); }
.chg-neu { color:var(--text-4); }

/* ─────────────────── BADGE ─────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.b-green { background:#DCFCE7; color:#16A34A; }
.b-blue  { background:#DBEAFE; color:#1D4ED8; }
.b-teal  { background:var(--teal-light); color:var(--teal-dark); }
.b-amber { background:#FEF3C7; color:#B45309; }
.b-red   { background:#FEE2E2; color:#DC2626; }
.b-gray  { background:var(--bg-2); color:var(--slate); border:1px solid var(--border); }
.b-ink   { background:var(--ink); color:#fff; }
.b-sky   { background:var(--sky-bg); color:var(--sky); }

/* ─────────────────── TABLE ─────────────────────────────── */
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th {
  padding:9px 14px; text-align:left;
  font-size:11px; font-weight:700; color:var(--text-4);
  background:var(--bg); border-bottom:2px solid var(--border);
  white-space:nowrap; letter-spacing:.4px;
  position:sticky; top:0; z-index:1;
}
.tbl td {
  padding:11px 14px; font-size:12.5px; color:var(--text-2);
  border-bottom:1px solid var(--border); vertical-align:middle;
}
.tbl tr:hover td { background:#FAFCFE; }
.tbl tr:last-child td { border-bottom:none; }
.tbl-mono { font-family:'SF Mono','Consolas',monospace; font-size:11.5px; color:var(--teal-dark); font-weight:600; }

/* ─────────────────── FORM ──────────────────────────────── */
.fl { margin-bottom:14px; }
.fl-label { display:block; font-size:11.5px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.fl-req { color:var(--red); }
.fl-input {
  width:100%; padding:9px 11px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:13px; color:var(--text);
  outline:none; transition:border .15s, box-shadow .15s;
  background:var(--white); font-family:var(--font);
}
.fl-input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,180,166,.12); }
.fl-input::placeholder { color:var(--text-4); }
.fl-input[readonly] { background:var(--bg); color:var(--text-3); }
.fl-select {
  width:100%; padding:9px 11px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:13px; color:var(--text);
  outline:none; background:var(--white); font-family:var(--font); transition:border .15s;
}
.fl-select:focus { border-color:var(--teal); }
.fl-textarea {
  width:100%; padding:9px 11px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:13px; color:var(--text);
  outline:none; resize:vertical; min-height:80px; font-family:var(--font); transition:border .15s;
}
.fl-textarea:focus { border-color:var(--teal); }
.fl-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fl-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.fl-hint  { font-size:11px; color:var(--text-4); margin-top:4px; }
.fl-error { font-size:11px; color:var(--red); margin-top:4px; }

/* ─────────────────── TABS ──────────────────────────────── */
.tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:18px; gap:0; overflow-x:auto; }
.tab-item {
  padding:9px 18px; font-size:12.5px; font-weight:600; color:var(--text-3);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:all .15s; white-space:nowrap; text-decoration:none;
}
.tab-item:hover { color:var(--text); }
.tab-item.on { color:var(--teal); border-bottom-color:var(--teal); }

/* ─────────────────── GRID ──────────────────────────────── */
.g2  { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.g3  { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.g4  { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.g21 { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.g12 { display:grid; grid-template-columns:1fr 2fr; gap:16px; }
.mb8  { margin-bottom:8px; }
.mb12 { margin-bottom:12px; }
.mb16 { margin-bottom:16px; }
.mb20 { margin-bottom:20px; }
.mt8  { margin-top:8px; }
.mt12 { margin-top:12px; }
.mt16 { margin-top:16px; }

/* ─────────────────── PROGRESS ─────────────────────────── */
.prog { height:6px; background:var(--bg-2); border-radius:3px; overflow:hidden; }
.prog-fill { height:100%; border-radius:3px; }

/* ─────────────────── TOGGLE ────────────────────────────── */
.toggle-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; }
.toggle {
  width:36px; height:20px; border-radius:10px;
  position:relative; transition:background .2s; flex-shrink:0; cursor:pointer;
}
.toggle.on  { background:var(--teal); }
.toggle.off { background:var(--border-2); }
.toggle-dot {
  position:absolute; top:2px; width:16px; height:16px;
  background:#fff; border-radius:50%; transition:left .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle.on  .toggle-dot { left:18px; }
.toggle.off .toggle-dot { left:2px; }
.toggle-label { font-size:12.5px; font-weight:500; color:var(--text-2); }

/* ─────────────────── ALERT ─────────────────────────────── */
.alert {
  padding:11px 14px; border-radius:var(--radius-sm);
  font-size:12px; line-height:1.5; border:1px solid;
  display:flex; gap:8px; align-items:flex-start;
}
.alert-info    { background:var(--sky-bg); border-color:#BFDBFE; color:#1E40AF; }
.alert-success { background:var(--green-bg); border-color:#BBF7D0; color:#166534; }
.alert-warn    { background:var(--amber-bg); border-color:#FDE68A; color:#92400E; }
.alert-danger  { background:var(--red-bg); border-color:#FEE2E2; color:#991B1B; }

/* ─────────────────── SEARCH ────────────────────────────── */
.search-wrap  { position:relative; }
.search-icon  { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-4); font-size:13px; pointer-events:none; }
.search-input {
  width:100%; padding:8px 10px 8px 32px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:12.5px; outline:none; font-family:var(--font); transition:border .15s;
  background:var(--white);
}
.search-input:focus { border-color:var(--teal); }

/* ─────────────────── MODAL ─────────────────────────────── */
.overlay {
  position:fixed; inset:0; background:rgba(13,27,42,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:200; backdrop-filter:blur(3px); animation:fadeIn .2s;
}
.modal {
  background:var(--white); border-radius:var(--radius-xl);
  width:520px; max-width:90vw; max-height:88vh; overflow:hidden;
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; animation:slideUp .2s;
}
.modal-lg { width:720px; }
.modal-xl { width:900px; }
.modal-header {
  padding:18px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.modal-title { font-size:15px; font-weight:800; }
.modal-body  { padding:20px 22px; overflow-y:auto; flex:1; }
.modal-footer {
  padding:14px 22px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px; background:var(--bg); flex-shrink:0;
}
.modal-close {
  width:28px; height:28px; border-radius:6px;
  background:var(--bg); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-3); font-size:15px;
}
.modal-close:hover { background:var(--red-bg); color:var(--red); }

/* ─────────────────── PAGINATION ────────────────────────── */
.pagination { display:flex; align-items:center; gap:4px; }
.pg-btn {
  width:30px; height:30px; border-radius:6px; border:1.5px solid var(--border);
  background:var(--white); cursor:pointer; font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center; color:var(--text-2); transition:all .15s;
}
.pg-btn:hover { border-color:var(--teal); color:var(--teal); }
.pg-btn.on    { background:var(--teal); border-color:var(--teal); color:#fff; }
.pg-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ─────────────────── STATUS DOT ────────────────────────── */
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-green { background:var(--green); }
.dot-red   { background:var(--red); }
.dot-amber { background:var(--amber); }
.dot-teal  { background:var(--teal); }
.dot-gray  { background:var(--text-4); }

/* ─────────────────── INFO ROW ──────────────────────────── */
.info-r { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.info-r:last-child { border-bottom:none; }
.info-k { font-size:12px; color:var(--text-3); font-weight:500; }
.info-v { font-size:12.5px; color:var(--text); font-weight:600; }

/* ─────────────────── DIVIDER ───────────────────────────── */
.div { height:1px; background:var(--border); margin:14px 0; }

/* ─────────────────── EMPTY STATE ──────────────────────── */
.empty { display:flex; flex-direction:column; align-items:center; padding:48px 24px; text-align:center; }
.empty-icon  { font-size:40px; margin-bottom:12px; opacity:.6; }
.empty-title { font-size:15px; font-weight:700; color:var(--text-3); margin-bottom:4px; }
.empty-sub   { font-size:12px; color:var(--text-4); }

/* ─────────────────── DROPDOWN ──────────────────────────── */
.dropdown-menu {
  position:absolute; right:0; top:calc(100% + 6px);
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  z-index:100; min-width:260px; overflow:hidden; animation:fadeDown .15s;
}
.dd-header  { padding:12px 14px; border-bottom:1px solid var(--border); }
.dd-item { padding:9px 14px; display:flex; align-items:center; gap:9px; cursor:pointer; transition:background .1s; font-size:12.5px; }
.dd-item:hover { background:var(--bg); }
.dd-item.unread { background:#F8FDFC; }

/* ─────────────────── STOCK BAR ─────────────────────────── */
.stock-bar  { height:8px; border-radius:4px; background:var(--border); overflow:hidden; width:80px; }
.stock-fill { height:100%; border-radius:4px; }

/* ─────────────────── CHECK ITEM ────────────────────────── */
.check-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:6px; transition:all .15s; cursor:pointer;
}
.check-item:hover   { border-color:var(--teal-mid); }
.check-item.checked { border-color:var(--green); background:var(--green-bg); }
.check-item.issue   { border-color:var(--red); background:var(--red-bg); }
.check-box {
  width:18px; height:18px; border-radius:4px; flex-shrink:0;
  border:2px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; transition:all .15s;
}
.check-item.checked .check-box { background:var(--green); border-color:var(--green); color:#fff; }
.check-item.issue   .check-box { background:var(--red);   border-color:var(--red);   color:#fff; }

/* ─────────────────── CHIP ──────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600;
  background:var(--bg-2); color:var(--slate); border:1px solid var(--border); cursor:pointer; transition:all .15s;
}
.chip:hover { border-color:var(--teal); color:var(--teal); background:var(--teal-light); }
.chip.on    { background:var(--teal-light); color:var(--teal-dark); border-color:var(--teal-mid); }

/* ─────────────────── WEEKLY MENU GRID ──────────────────── */
.menu-grid { display:grid; grid-template-columns:70px repeat(5,1fr); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.mg-head   { background:var(--ink); color:#fff; text-align:center; padding:10px 6px; font-size:11.5px; font-weight:700; }
.mg-meal   { background:var(--bg); text-align:center; padding:9px 4px; font-size:11px; font-weight:700; color:var(--text-2); border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.mg-cell   { padding:8px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-height:72px; font-size:11px; transition:background .15s; cursor:pointer; }
.mg-cell:hover { background:var(--teal-light); }
.mg-menu-item      { background:var(--white); border:1px solid var(--border); border-radius:4px; padding:3px 5px; margin-bottom:3px; font-size:10.5px; color:var(--text-2); }
.mg-menu-item.main { border-color:var(--teal-mid); background:var(--teal-light); color:var(--teal-dark); font-weight:600; }

/* ─────────────────── NOTIFICATION ──────────────────────── */
.notif-ch { border:2px solid var(--border); border-radius:var(--radius-lg); padding:18px; cursor:pointer; transition:all .2s; position:relative; }
.notif-ch:hover { border-color:var(--teal-mid); }
.notif-ch.on    { border-color:var(--teal); background:var(--teal-light); }

/* ─────────────────── LANDING ───────────────────────────── */
.land { min-height:100vh; overflow-y:auto; background:radial-gradient(ellipse at 20% 50%,#0F2744 0%,#0D1B2A 50%,#071320 100%); }
.land-nav {
  padding:18px 48px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:10;
  background:rgba(13,27,42,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.land-hero  { padding:80px 48px 64px; max-width:1100px; margin:0 auto; }
.land-tag   { display:inline-flex; align-items:center; gap:6px; background:rgba(0,180,166,.15); color:var(--teal); font-size:11.5px; font-weight:700; padding:5px 14px; border-radius:20px; border:1px solid rgba(0,180,166,.25); margin-bottom:22px; letter-spacing:.8px; }
.land-h1    { font-size:52px; font-weight:900; color:#fff; line-height:1.12; margin-bottom:18px; }
.land-h1 span { color:var(--teal); }
.land-desc  { font-size:16px; color:rgba(255,255,255,.6); line-height:1.75; max-width:580px; margin-bottom:36px; }
.land-btns  { display:flex; gap:12px; flex-wrap:wrap; }
.land-btn-p { background:var(--teal); color:#fff; padding:13px 30px; border-radius:9px; font-size:14px; font-weight:700; border:none; cursor:pointer; transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; }
.land-btn-p:hover { background:var(--teal-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,180,166,.35); }
.land-btn-o { background:transparent; color:#fff; padding:13px 30px; border-radius:9px; font-size:14px; font-weight:700; border:2px solid rgba(255,255,255,.2); cursor:pointer; transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; }
.land-btn-o:hover { border-color:rgba(255,255,255,.5); }
.land-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 48px 48px; max-width:1100px; margin:0 auto; }
.land-feat  { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); padding:22px; transition:all .2s; }
.land-feat:hover { background:rgba(0,180,166,.06); border-color:rgba(0,180,166,.2); }
.land-feat-icon  { font-size:26px; margin-bottom:10px; }
.land-feat-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:6px; }
.land-feat-desc  { font-size:12px; color:rgba(255,255,255,.48); line-height:1.65; }
.land-stats      { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); margin:0 48px 64px; max-width:1100px; overflow:hidden; }
.land-stat       { padding:28px 24px; text-align:center; border-right:1px solid rgba(255,255,255,.08); }
.land-stat:last-child { border-right:none; }
.land-stat-val   { font-size:32px; font-weight:900; color:var(--teal); margin-bottom:4px; }
.land-stat-label { font-size:12px; color:rgba(255,255,255,.45); font-weight:500; }

/* ─────────────────── LOGIN ─────────────────────────────── */
.login-wrap { min-height:100vh; background:radial-gradient(ellipse at 30% 50%,#0F2744 0%,#0D1B2A 60%,#071320 100%); display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { background:var(--white); border-radius:var(--radius-xl); border:1px solid var(--border); width:100%; max-width:420px; box-shadow:var(--shadow-lg); overflow:hidden; }
.login-header { background:var(--ink); padding:28px 28px 24px; text-align:center; }
.login-body   { padding:28px; }

/* ─────────────────── REGISTER ──────────────────────────── */
.reg-wrap   { min-height:100vh; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; }
.reg-card   { background:var(--white); border-radius:var(--radius-xl); border:1px solid var(--border); width:100%; max-width:700px; box-shadow:var(--shadow-lg); overflow:hidden; }
.reg-header { background:var(--ink); padding:24px 28px; }
.reg-steps  { display:flex; align-items:center; margin-top:18px; }
.rsc-done { background:var(--teal); color:#fff; }
.rsc-cur  { background:#fff; color:var(--ink); }
.rsc-fut  { background:rgba(255,255,255,.12); color:rgba(255,255,255,.3); }
.reg-step-circle { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; transition:all .3s; }
.reg-step-line   { flex:1; height:2px; margin:0 6px; transition:background .3s; }
.rsl-done { background:var(--teal); }
.rsl-fut  { background:rgba(255,255,255,.15); }
.reg-body { padding:26px 28px; }

/* ─────────────────── ANIMATIONS ────────────────────────── */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.anim-in { animation:slideIn .25s ease; }
.pulse   { animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ─────────────────── RESPONSIVE ────────────────────────── */
@media (max-width:1024px) {
  .g4 { grid-template-columns:repeat(2,1fr); }
  .g3 { grid-template-columns:repeat(2,1fr); }
  .g21,.g12 { grid-template-columns:1fr; }
  .land-feats { grid-template-columns:repeat(2,1fr); }
  .land-stats { grid-template-columns:repeat(2,1fr); }
  .land-h1 { font-size:38px; }
  .land-hero { padding:50px 24px 40px; }
  .land-nav  { padding:16px 24px; }
}
@media (max-width:640px) {
  .sb { display:none; }
  .g2,.g3,.g4 { grid-template-columns:1fr; }
  .fl-row-2,.fl-row-3 { grid-template-columns:1fr; }
  .land-feats { grid-template-columns:1fr; }
  .land-stats { grid-template-columns:repeat(2,1fr); }
  .land-h1 { font-size:28px; }
  .ph-top { flex-direction:column; }
}

/* ─────────────────── UTIL ──────────────────────────────── */
.flex { display:flex; }
.flex-center { display:flex; align-items:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-4  { gap:4px; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.fw-500 { font-weight:500; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.fw-800 { font-weight:800; }
.fs-11  { font-size:11px; }
.fs-12  { font-size:12px; }
.fs-13  { font-size:13px; }
.text-3 { color:var(--text-3); }
.text-4 { color:var(--text-4); }
.text-teal { color:var(--teal); }
.text-red  { color:var(--red); }
.text-green { color:var(--green); }
.text-amber { color:var(--amber); }
.text-sm { font-size:12px; }
.text-xs { font-size:10.5px; }
.text-2xl { font-size:20px; }
.text-lg { font-size:15px; }
.text-center { text-align:center; }
.text-right  { text-align:right; }
.w-full { width:100%; }
.w-100  { width:100%; }
.mt-1 { margin-top:4px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; }
.mb-1 { margin-bottom:4px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }
.mb-4 { margin-bottom:16px; }
.mb-5 { margin-bottom:20px; }
.mb-6 { margin-bottom:24px; }
.ml-4 { margin-left:16px; }
.py-4  { padding-top:16px; padding-bottom:16px; }
.py-6  { padding-top:24px; padding-bottom:24px; }
.py-8  { padding-top:32px; padding-bottom:32px; }

/* ━━━━━ LAYOUT ALIASES (sidebar / topbar templates) ━━━━━ */
.sidebar { width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg,var(--ink) 0%,#0B1825 100%);
  display:flex; flex-direction:column; overflow:hidden;
  border-right:1px solid rgba(255,255,255,.04);
  transition:transform .25s; }
.sidebar-brand {
  padding:20px 16px 16px; border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px; text-decoration:none; }
.sidebar-brand .brand-icon { font-size:20px; }
.sidebar-brand .brand-text { color:#fff; font-size:14px; font-weight:700; }
.sidebar-company { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; border-bottom:1px solid rgba(255,255,255,.06); }
.company-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--green)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:700; flex-shrink:0; }
.sidebar-badge { margin:8px 16px 0; background:rgba(0,180,166,.2); color:var(--teal); font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block; }
.sidebar-nav { flex:1; overflow-y:auto; padding:8px 0; }
.sidebar-nav::-webkit-scrollbar { width:0; }
.sidebar-footer { border-top:1px solid rgba(255,255,255,.06); padding:8px 0; }
.nav-item { display:flex; align-items:center; gap:9px;
  padding:8px 12px 8px 14px; margin:0 8px 1px; border-radius:8px;
  color:rgba(255,255,255,.52); font-size:12.5px; font-weight:500;
  transition:all .15s; text-decoration:none; }
.nav-item:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.82); }
.nav-item.on { background:linear-gradient(90deg,rgba(0,180,166,.22),rgba(0,180,166,.08)); color:#4DD9D0; position:relative; }
.nav-item.on::before { content:''; position:absolute; left:0; top:20%; height:60%; width:3px; background:var(--teal); border-radius:0 3px 3px 0; }
.nav-icon  { font-size:14px; width:18px; text-align:center; flex-shrink:0; }
.nav-label { flex:1; }
.nav-group-label { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.28); padding:12px 14px 3px 26px; }
.layout-bg-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:98; }
.layout-bg-overlay.active { display:block; }
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.content { flex:1; overflow-y:auto; padding:20px; }

/* ━━━━━ TOPBAR ALIASES ━━━━━ */
.topbar { height:60px; background:var(--white); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; }
.topbar-title { flex:1; }
.topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.topbar-date { font-size:11.5px; color:var(--text-3); background:var(--bg); border:1px solid var(--border); padding:5px 10px; border-radius:6px; }
.page-heading { font-size:18px; font-weight:800; color:var(--text); }
.sidebar-toggle { background:none; border:none; padding:6px; cursor:pointer; display:none; flex-direction:column; gap:4px; }
.sidebar-toggle span { display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; }
.icon-btn { width:36px; height:36px; border-radius:8px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; position:relative; }
.icon-btn:hover { border-color:var(--teal); background:var(--teal-light); }
.user-info { display:flex; align-items:center; gap:8px; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--ink),var(--ink-60)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.user-meta { display:flex; flex-direction:column; }

/* ━━━━━ BREADCRUMB ━━━━━ */
.breadcrumb { display:flex; align-items:center; gap:5px; margin-bottom:2px; }
.bc-sep { color:var(--border-2); }
.bc-link { font-size:11.5px; color:var(--text-4); }
.bc-link:hover { color:var(--teal); }
.bc-current { font-size:11.5px; color:var(--text-3); }

/* ━━━━━ BUTTON ALIASES ━━━━━ */
.btn-primary   { background:var(--teal); color:#fff; }
.btn-primary:hover { background:var(--teal-dark); box-shadow:0 4px 12px rgba(0,180,166,.3); }
.btn-outline-navy { background:var(--white); color:var(--text-2); border:1.5px solid var(--border); }
.btn-outline-navy:hover { border-color:var(--teal); color:var(--teal); }
.btn-outline-white { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); }
.btn-outline-white:hover { background:rgba(255,255,255,.12); }
.btn-ghost    { background:transparent; color:var(--text-3); border:none; }
.btn-ghost:hover { background:var(--bg); color:var(--text); }
.btn-teal     { background:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--teal-dark); }
.btn-blue     { background:#3B82F6; color:#fff; }
.btn-blue:hover { background:#2563EB; }
.btn-amber    { background:var(--amber-bg); color:#B45309; border:1.5px solid #FDE68A; }
.btn-white    { background:#fff; color:var(--ink); }
.btn-white:hover { background:var(--bg); }

/* ━━━━━ BADGE ALIASES ━━━━━ */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; background:var(--bg-2); color:var(--slate); }
.badge-teal   { background:var(--teal-light); color:var(--teal-dark); }
.badge-green  { background:#DCFCE7; color:#16A34A; }
.badge-blue   { background:#DBEAFE; color:#1D4ED8; }
.badge-amber  { background:#FEF3C7; color:#B45309; }
.badge-red    { background:#FEE2E2; color:#DC2626; }
.badge-purple { background:#F3E8FF; color:#7C3AED; }
.badge-orange { background:#FEF0E7; color:#C2410C; }
.badge-navy   { background:var(--ink); color:#fff; }
.text-red     { color:var(--red); }

/* ━━━━━ FORM ALIASES ━━━━━ */
.fl-input { display:block; width:100%; padding:8px 11px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:12.5px; color:var(--text); background:var(--white); transition:border-color .15s; }
.fl-input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,180,166,.1); }
.fl-select { display:block; width:100%; padding:8px 11px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:12.5px; color:var(--text); background:var(--white); }
.fl-select:focus { outline:none; border-color:var(--teal); }
.fl-label { display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.fl-group { margin-bottom:14px; }
.fl-check-label { display:flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; }
.fl-input.w-full, .fl-select.w-full { width:100%; }

/* ━━━━━ CARD / STAT ALIASES ━━━━━ */
.stat-card { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--border); padding:16px 18px; display:flex; align-items:center; gap:14px; }
.stat-card:hover { box-shadow:var(--shadow-sm); }
.stat-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.stat-val  { font-size:20px; font-weight:800; color:var(--text); line-height:1.1; }
.stat-lbl  { font-size:11.5px; color:var(--text-3); font-weight:500; }
.bg-teal-light   { background:var(--teal-light); }
.bg-blue-light   { background:var(--sky-bg); }
.bg-green-light  { background:var(--green-bg); }
.bg-amber-light  { background:var(--amber-bg); }
.bg-red-light    { background:#FEE2E2; }
.bg-purple-light { background:#F3E8FF; }
.bg-pink-light   { background:#FCE7F3; }
.bg-orange-light { background:#FEF0E7; }
.bg-light        { background:var(--bg); }

/* ━━━━━ TABLE ━━━━━ */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { background:var(--bg); font-size:11.5px; font-weight:700; color:var(--text-3); padding:10px 14px; text-align:left; border-bottom:2px solid var(--border); white-space:nowrap; }
.tbl td { padding:11px 14px; font-size:12.5px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--bg); }
.tbl tfoot td, .tbl tfoot th { border-top:2px solid var(--border); font-weight:700; }

/* ━━━━━ SEARCH ROW ━━━━━ */
.search-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.search-row .fl-input, .search-row .fl-select { margin-bottom:0; width:auto; }

/* ━━━━━ FLEX UTILITIES ━━━━━ */
.flex { display:flex; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.gap { gap:8px; }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ━━━━━ GRID ━━━━━ */
.g2  { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.g3  { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.g4  { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.g21 { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.g12 { display:grid; grid-template-columns:1fr 2fr; gap:14px; }

/* ━━━━━ MODAL / OVERLAY ━━━━━ */
.overlay { position:fixed; inset:0; background:rgba(13,27,42,.55); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); width:100%; max-height:90vh; overflow-y:auto; display:flex; flex-direction:column; }
.modal-header { padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.modal-title  { font-size:15px; font-weight:800; }
.modal-close  { background:none; border:none; font-size:16px; color:var(--text-3); cursor:pointer; }
.modal-close:hover { color:var(--text); }
.modal-body   { padding:20px; flex:1; }
.modal-footer { padding:16px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

/* ━━━━━ ALERT ━━━━━ */
.alert { padding:11px 14px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:500; margin-bottom:12px; }
.alert-danger  { background:#FEE2E2; color:#9B1C1C; border:1px solid #FECACA; }
.alert-success { background:#DCFCE7; color:#14532D; border:1px solid #86EFAC; }
.alert-info    { background:var(--sky-bg); color:#1E3A5F; border:1px solid #BAE0FF; }
.alert-warning { background:var(--amber-bg); color:#78350F; border:1px solid #FDE68A; }

/* ━━━━━ PAGINATION ━━━━━ */
.pag { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pag-btn { min-width:30px; height:30px; padding:0 8px; border:1.5px solid var(--border); border-radius:6px; background:var(--white); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pag-btn:hover { border-color:var(--teal); color:var(--teal); }
.pag-btn.on { background:var(--teal); color:#fff; border-color:var(--teal); }
.pag-btn.disabled { opacity:.4; pointer-events:none; }

/* ━━━━━ NOTIFICATION ━━━━━ */
.notif-wrap { position:relative; }
.notif-badge { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; background:var(--red); color:#fff; border-radius:8px; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.notif-dropdown { position:absolute; right:0; top:calc(100% + 8px); width:320px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:100; }
.notif-header { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.notif-item { display:block; padding:12px 16px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; }
.notif-item:hover { background:var(--bg); }
.notif-item.unread { background:var(--teal-light); }
.notif-title { font-weight:700; font-size:12.5px; }
.notif-msg   { margin-top:2px; }
.notif-time  { margin-top:4px; }
.notif-empty { padding:24px 16px; text-align:center; color:var(--text-3); font-size:12.5px; }
.notif-footer { padding:10px 16px; text-align:center; border-top:1px solid var(--border); }
.notif-footer a { color:var(--teal); font-size:12.5px; font-weight:600; }

/* ━━━━━ FLASH ━━━━━ */
#flash-msg { margin:0 20px 16px; }

/* ━━━━━ INFO-DL ━━━━━ */
.info-dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:12.5px; }
.info-dl dt { color:var(--text-3); font-weight:600; white-space:nowrap; padding:4px 0; }
.info-dl dd { color:var(--text); padding:4px 0; border-bottom:1px solid var(--border); }

/* ━━━━━ TIMELINE ━━━━━ */
.timeline { padding:16px 20px; }
.timeline-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }
.timeline-item:not(:last-child) .timeline-dot::after {
  content:''; position:absolute; left:7px; top:18px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-dot { width:16px; height:16px; border-radius:50%; border:2px solid var(--border); background:var(--white); flex-shrink:0; margin-top:3px; position:relative; z-index:1; }
.timeline-item.done .timeline-dot { background:var(--teal); border-color:var(--teal); }
.timeline-item.rejected .timeline-dot { background:var(--red); border-color:var(--red); }
.timeline-body { flex:1; }

/* ━━━━━ CHART BARS ━━━━━ */
.chart-bars { display:flex; align-items:flex-end; gap:10px; height:160px; padding-top:24px; }
.chart-bar-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.chart-bar-val { font-size:10px; color:var(--text-3); white-space:nowrap; text-align:center; }
.chart-bar-bg { flex:1; width:100%; background:var(--bg-2); border-radius:4px; display:flex; align-items:flex-end; overflow:hidden; min-height:8px; }
.chart-bar-fill { width:100%; background:linear-gradient(180deg,var(--teal),var(--teal-dark)); border-radius:4px; transition:height .4s ease; }
.chart-bar-fill.bg-teal { background:linear-gradient(180deg,var(--teal),var(--teal-dark)); }
.chart-bar-lbl { font-size:10.5px; color:var(--text-3); text-align:center; }

/* ━━━━━ STOCK BAR ━━━━━ */
.stock-bar-bg { height:6px; background:var(--bg-2); border-radius:3px; overflow:hidden; }
.stock-bar { height:100%; border-radius:3px; transition:width .3s; }
.bar-normal   { background:var(--teal); }
.bar-low      { background:var(--amber); }
.bar-critical { background:var(--red); }
.bar-excess   { background:var(--sky); }

/* ━━━━━ ORDER TOTAL ROW ━━━━━ */
.order-total-row { display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:12px 16px; background:var(--bg); border-radius:var(--radius); font-size:13px; flex-wrap:wrap; }

/* ━━━━━ SUPPLIER AVATAR ━━━━━ */
.supplier-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--green)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:700; margin:0 auto; }

/* ━━━━━ STEP INDICATOR ━━━━━ */
.step-indicator { display:flex; align-items:center; justify-content:center; gap:0; margin:20px 0 28px; }
.step-node { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:60px; }
.step-circle { width:30px; height:30px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text-4); background:var(--white); }
.step-node.on .step-circle { border-color:var(--teal); background:var(--teal); color:#fff; }
.step-node.done .step-circle { border-color:var(--teal); background:var(--teal-light); color:var(--teal); }
.step-label { font-size:10px; color:var(--text-3); text-align:center; white-space:nowrap; }
.step-node.on .step-label { color:var(--teal); font-weight:700; }
.step-line { flex:1; height:2px; background:var(--border); min-width:20px; }
.step-line.done { background:var(--teal); }

/* ━━━━━ REGISTRATION TYPE CARDS ━━━━━ */
.reg-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0; }
.reg-type-card { border:2px solid var(--border); border-radius:var(--radius-lg); padding:20px; cursor:pointer; text-align:center; transition:all .15s; }
.reg-type-card:hover { border-color:var(--teal); }
.reg-type-card input[type=radio] { display:none; }
.reg-type-card:has(input:checked) { border-color:var(--teal); background:var(--teal-light); }
.reg-type-icon { font-size:32px; margin-bottom:10px; }

/* ━━━━━ TERMS BOX ━━━━━ */
.terms-box { border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
.terms-title { font-size:12.5px; font-weight:700; margin-bottom:6px; }
.terms-content { font-size:11.5px; color:var(--text-3); line-height:1.7; max-height:80px; overflow-y:auto; background:var(--bg); border-radius:5px; padding:8px 10px; }

/* ━━━━━ AUTH PAGES ━━━━━ */
.auth-bg { background:var(--bg); display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.auth-wrap { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:36px 40px; width:100%; max-width:440px; }
.reg-wrap { max-width:560px; }
.auth-brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; color:var(--ink); text-decoration:none; margin-bottom:16px; }
.auth-brand .brand-icon { font-size:20px; }
.auth-title { font-size:20px; font-weight:800; margin-bottom:4px; }
.auth-sub   { font-size:12.5px; color:var(--text-3); margin-bottom:24px; }
.auth-form  { margin-bottom:16px; }
.auth-footer { text-align:center; font-size:12.5px; color:var(--text-3); margin-top:16px; }

/* ━━━━━ LANDING PAGE ━━━━━ */
.lp-nav { position:sticky; top:0; z-index:100; background:rgba(13,27,42,.96); padding:0 24px; display:flex; align-items:center; height:60px; }
.lp-nav-inner { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1100px; margin:0 auto; }
.lp-brand { display:flex; align-items:center; gap:8px; color:#fff; font-size:16px; font-weight:800; text-decoration:none; }
.lp-brand .brand-icon { font-size:18px; }
.lp-nav-links { display:flex; align-items:center; gap:20px; }
.lp-nav-links a { color:rgba(255,255,255,.7); font-size:13px; text-decoration:none; }
.lp-nav-links a:hover { color:#fff; }
.lp-hero { background:linear-gradient(135deg,var(--ink) 0%,#0B2535 50%,#0D3040 100%); padding:80px 24px; text-align:center; }
.lp-hero-inner { max-width:700px; margin:0 auto; }
.lp-hero-badge { display:inline-block; background:rgba(0,180,166,.2); color:var(--teal); border:1px solid rgba(0,180,166,.3); padding:5px 14px; border-radius:20px; font-size:12.5px; font-weight:700; margin-bottom:20px; }
.lp-hero-title { font-size:44px; font-weight:900; color:#fff; line-height:1.15; margin-bottom:18px; }
.lp-hero-sub { font-size:16px; color:rgba(255,255,255,.65); margin-bottom:32px; line-height:1.7; }
.lp-hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.lp-stats { display:grid; grid-template-columns:repeat(4,1fr); background:var(--teal); padding:28px 24px; }
.lp-stat { text-align:center; }
.lp-stat-val { font-size:28px; font-weight:900; color:#fff; }
.lp-stat-lbl { font-size:12px; color:rgba(255,255,255,.75); margin-top:4px; }
.lp-features { max-width:1100px; margin:0 auto; padding:60px 24px; text-align:center; }
.lp-section-label { color:var(--teal); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.lp-section-title { font-size:28px; font-weight:800; margin-bottom:36px; }
.lp-features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
.lp-feature-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; transition:box-shadow .2s; }
.lp-feature-card:hover { box-shadow:var(--shadow); }
.lp-feature-icon { font-size:28px; margin-bottom:12px; }
.lp-feature-card h3 { font-size:14px; font-weight:700; margin-bottom:8px; }
.lp-feature-card p  { font-size:12.5px; color:var(--text-3); line-height:1.7; }
.lp-cta { background:var(--ink); padding:56px 24px; text-align:center; }
.lp-cta h2 { font-size:28px; font-weight:800; color:#fff; margin-bottom:12px; }
.lp-cta p  { font-size:14px; color:rgba(255,255,255,.65); margin-bottom:28px; }
.lp-footer { background:var(--ink-80); padding:20px 24px; text-align:center; color:rgba(255,255,255,.4); font-size:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.lp-footer-links a { color:rgba(255,255,255,.5); font-size:12px; }
.lp-footer-links a:hover { color:#fff; }

/* ━━━━━ BORDER HELPERS ━━━━━ */
.border-left-red { border-left:4px solid var(--red); }

/* ━━━━━ RESPONSIVE ━━━━━ */
@media (max-width:1024px) {
  .sidebar { position:fixed; left:0; top:0; height:100%; z-index:99; transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-toggle { display:flex !important; }
  .main { overflow:hidden; }
  .g4 { grid-template-columns:repeat(2,1fr); }
  .g21, .g12 { grid-template-columns:1fr; }
  .lp-features-grid { grid-template-columns:1fr 1fr; }
  .lp-stats { grid-template-columns:repeat(2,1fr); }
  .lp-hero-title { font-size:32px; }
}
@media (max-width:640px) {
  .g2,  .g3, .g4  { grid-template-columns:1fr; }
  .reg-type-grid   { grid-template-columns:1fr; }
  .auth-wrap       { padding:24px 20px; }
  .lp-features-grid { grid-template-columns:1fr; }
  .lp-hero-title  { font-size:26px; }
  .lp-stats { grid-template-columns:1fr 1fr; }
  .search-row      { flex-direction:column; align-items:stretch; }
  .search-row .fl-input, .search-row .fl-select { width:100%; }
  .topbar-date { display:none; }
}

/* ━━━━━ COMPAT ALIASES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* form-group / form-control / form-label → fl-* 계열 매핑 */
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:11.5px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.form-control { width:100%; border:1.5px solid var(--border); border-radius:var(--radius); padding:8px 11px; font-size:13px; color:var(--text); background:var(--white); outline:none; transition:border .15s; font-family:inherit; }
.form-control:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,180,166,.12); outline:none; }
.form-control::placeholder { color:var(--text-4); }
.form-control[readonly],
.form-control:disabled { background:var(--bg); color:var(--text-3); cursor:not-allowed; }
.form-select { width:100%; border:1.5px solid var(--border); border-radius:var(--radius); padding:8px 11px; font-size:13px; color:var(--text); background:var(--white); outline:none; transition:border .15s; font-family:inherit; cursor:pointer; }
.form-select:focus { border-color:var(--teal); outline:none; }
.form-textarea { width:100%; border:1.5px solid var(--border); border-radius:var(--radius); padding:8px 11px; font-size:13px; color:var(--text); background:var(--white); outline:none; resize:vertical; min-height:80px; font-family:inherit; }
.form-textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,180,166,.12); outline:none; }
.form-check { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.form-check input[type=checkbox] { width:16px; height:16px; cursor:pointer; accent-color:var(--teal); }

/* auth-page / auth-card / auth-container → login-* 계열 매핑 */
.auth-page, body.auth-page { min-height:100vh; background:radial-gradient(ellipse at 30% 50%,#0F2744 0%,#0D1B2A 60%,#071320 100%); display:flex; align-items:center; justify-content:center; padding:24px; margin:0; }
.auth-container { display:flex; align-items:center; justify-content:center; width:100%; }
.auth-card { background:var(--white); border-radius:var(--radius-xl); border:1px solid var(--border); width:100%; max-width:440px; box-shadow:var(--shadow-lg); overflow:hidden; padding:28px; }
.auth-logo { margin-bottom:20px; }
.auth-logo h2 { font-size:18px; font-weight:800; color:var(--ink); margin-top:6px; }

/* 기타 유틸리티 alias */
.ml-2  { margin-left:8px; }
.mr-2  { margin-right:8px; }
.gap-3 { gap:12px; }
.gap-4 { gap:16px; }
.flex  { display:flex; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.justify-center { justify-content:center; }
.items-center   { align-items:center; }
.btn-lg { padding:11px 22px; font-size:14px; }