/* ============================================================
   TEAM FALCON — TERMINAL OPS  (Design A: Mission Control)
   ============================================================ */
:root {
  --bg: #0a0e17; --panel: #121826; --panel-2: #0e1420; --panel-3: #1b2334;
  --border: rgba(148,163,184,0.12); --border-strong: rgba(148,163,184,0.24);
  --border-dashed: rgba(148,163,184,0.20);
  --text: #E8EDF5; --text-2: #C3CDDE; --muted: #8B99B0; --faint: #5D6B82;
  --accent: #6366F1; --accent-text: #A5B4FC; --accent-soft: rgba(99,102,241,0.16);
  --blue: #3B82F6; --blue-hover: #2563EB; --blue-soft: rgba(59,130,246,0.16);
  --gold: #93C5FD; --amber: #F0A54A; --amber-soft: rgba(240,165,74,0.10);
  --red-text: #FF8272; --red-soft: rgba(255,130,114,0.14);
  --red-border: rgba(255,130,114,0.32);
  --chip-red-bg: rgba(255,130,114,0.14); --chip-red-border: rgba(255,130,114,0.32);
  --tab-active: #A5B4FC;
  --shadow-paper: 0 10px 30px rgba(0,0,0,0.85);
  --shadow-modal: 0 30px 70px rgba(0,0,0,0.6);
  --input-focus: rgba(99,102,241,0.30);
}
body.theme-light {
  --bg: #f2f4f8; --panel: #ffffff; --panel-2: #f7f9fc; --panel-3: #eceff5;
  --border: rgba(15,23,42,0.09); --border-strong: rgba(15,23,42,0.17);
  --border-dashed: rgba(15,23,42,0.15);
  --text: #0f172a; --text-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --accent: #4f46e5; --accent-text: #4338ca; --accent-soft: rgba(79,70,229,0.08);
  --blue: #2563eb; --blue-hover: #1d4ed8; --blue-soft: rgba(37,99,235,0.10);
  --gold: #4f46e5; --amber: #d97706; --amber-soft: rgba(217,119,6,0.10);
  --red-text: #c0392b; --red-soft: rgba(192,57,43,0.10);
  --red-border: rgba(192,57,43,0.28);
  --chip-red-bg: rgba(192,57,43,0.10); --chip-red-border: rgba(192,57,43,0.28);
  --tab-active: #4f46e5;
  --shadow-paper: 0 10px 30px rgba(15,23,42,0.10);
  --shadow-modal: 0 30px 70px rgba(15,23,42,0.16);
  --input-focus: rgba(79,70,229,0.18);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}
#sidebar, .workflow-panel, .td-panel, .modal-card, .login-card, .card-chrome,
.dropzone, .gate-drop, .cs-eml-tile, input, textarea, select, .admin-user-item {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
/* ===== LOGIN ===== */
#loginOverlay { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.login-card { background: var(--panel); border: 1px solid var(--border); padding: 44px; border-radius: 18px; width: 100%; max-width: 400px; box-shadow: var(--shadow-modal); text-align: center; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.login-logo { width: 60px; height: 60px; background: var(--accent-soft); border: 1px solid rgba(45,212,191,.55); color: var(--accent-text); font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; border-radius: 14px; margin: 0 auto 16px; }
.login-card h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; }
.login-card p { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
.login-form { display: flex; flex-direction: column; gap: 18px; text-align: left; }
.login-form label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.modal-card .field label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.modal-card .field input::placeholder { color: var(--faint); }
.pw-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.pw-wrap input { padding-right: 40px !important; }
.pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: transparent; border: none; border-radius: 6px; color: var(--muted); cursor: pointer; padding: 0; transition: color .2s, background .2s; outline: none; }
.pw-toggle:hover { color: var(--text); background: var(--border); }
.login-btn { background: var(--blue); color: #FFF; border: none; padding: 14px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: 0.2s; margin-top: 6px; }
.login-btn:hover { background: var(--blue-hover); }
#loginError { color: var(--red-text); background: var(--red-soft); border: 1px solid var(--red-border); padding: 12px; border-radius: 8px; font-size: 13px; font-weight: 600; display: none; margin-bottom: 18px; }
/* ===== SIDEBAR ===== */
#sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 9000; background: var(--panel); border-right: 1px solid var(--border); display: none; flex-direction: column; padding: 20px 14px; }
.sb-brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 20px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.sb-brand-mark { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: var(--accent-soft); border: 1px solid rgba(45,212,191,.55); color: var(--accent-text); font-weight: 800; font-size: 14px; letter-spacing: .5px; display: flex; align-items: center; justify-content: center; }
.sb-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
.sb-brand-sub { font-size: 11px; color: var(--faint); font-weight: 500; letter-spacing: .4px; text-transform: uppercase; }
.sb-nav { flex: 1; overflow-y: auto; }
.sb-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--faint); text-transform: uppercase; padding: 14px 12px 8px; }
.sb-item + .sb-label { border-top: 1px solid var(--border-strong); margin: 10px 4px 0; padding-top: 16px; }
.sb-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: 13.5px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); transition: all .15s; user-select: none; }
.sb-item:hover { background: var(--panel-2); color: var(--text); }
.sb-item.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.sb-item .ico { width: 18px; text-align: center; font-size: 14px; }
.sb-lock { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 99px; background: rgba(129,140,248,.1); color: var(--gold); border: 1px solid rgba(129,140,248,.3); }
.sb-foot { padding-top: 14px; border-top: 1px solid var(--border); }
.sb-theme { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; margin-bottom: 12px; border-radius: 10px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; transition: all .15s; }
.sb-theme:hover { color: var(--text); border-color: var(--border-strong); }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.sb-user:hover { background: var(--panel-2); }
.sb-avatar { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(145deg, #3B82F6, #1E40AF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.sb-user-info { min-width: 0; }
.sb-user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-desig { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-timer { font-size: 10.5px; font-weight: 700; color: var(--amber); margin-top: 2px; white-space: nowrap; letter-spacing: .01em; }
.sb-user-timer:empty { display: none; }
.sb-user-timer.urgent { color: var(--red-text); }
.ov-del-btn { background: none; border: 1px solid transparent; color: var(--faint); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 5px; line-height: 1; }
.ov-del-btn:hover { color: var(--red-text); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }
/* ===== TOAST ===== */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--panel); border: 1px solid var(--amber); color: var(--amber); padding: 12px 24px; border-radius: 6px; font-size: 10.5pt; font-weight: 700; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 11000; transform: translateY(10px); box-shadow: var(--shadow-modal); display: flex; align-items: center; gap: 12px; }
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast-undo { background: var(--amber); color: #000; border: none; padding: 4px 10px; border-radius: 4px; font-weight: 800; cursor: pointer; font-size: 11px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* ===== TRANSFER DESK ===== */
#appTD { display: none; background: var(--bg); color: var(--text); padding: 28px 36px 60px; margin-left: 280px; min-height: 100vh; }
#appTD .td-container { max-width: none; width: 100%; margin: 0 auto 40px; }
#appTD .td-switcher { display: none; }
#appTD .td-panel { display: none; background: var(--panel); border-radius: 14px; border: 1px solid var(--border); padding: 32px; animation: fadeIn 0.3s ease-out; }
#appTD .td-panel.active { display: block; }
#appTD .td-panel-intro { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
#appTD .td-panel-intro h2 { font-size: 19px; margin: 0; font-weight: 800; }
#appTD .td-form-row { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 22px; flex-wrap: wrap; }
#appTD .td-form-group { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 240px; }
#appTD .td-form-group label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
#appTD .td-form-group textarea, #appTD .td-form-group input, #appTD .td-form-group select {
  font: inherit; font-size: 14px; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); transition: 0.2s; width: 100%;
}
#appTD .td-form-group textarea:focus, #appTD .td-form-group input:focus, #appTD .td-form-group select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--input-focus); }
#appTD .td-form-group textarea { min-height: 150px; font-family: ui-monospace, monospace; font-size: 13px; resize: vertical; }
#appTD .td-btn-primary { background: var(--blue); color: #FFF; border: none; padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; }
#appTD .td-btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); }
#appTD .td-btn-secondary { background: var(--panel); border: 1.5px solid var(--border); color: var(--text); padding: 11px 20px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; }
#appTD .td-btn-secondary:hover { background: var(--panel-3); border-color: var(--border-strong); }
#appTD .td-toolbar { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border-strong); flex-wrap: wrap; }
#appTD .td-table-section { background: var(--panel-2); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; display: none; padding-bottom: 24px; margin-top: 24px; }
#appTD .td-table-header { padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap; gap: 12px; }
#appTD .td-counter { font-weight: 700; font-size: 11pt; color: var(--amber); letter-spacing: 0.5px; }
#appTD .td-table-wrap { overflow: auto; max-height: 80vh; width: 210mm; max-width: 100%; margin: 24px auto 0; padding: 12mm 8mm; background: #fff; color: #262626; border-radius: 3px; box-shadow: var(--shadow-paper); }
#appTD table { width: 100%; border-collapse: collapse; font-size: var(--sheetFontSize, 12pt); color: #262626; font-family: var(--sheetFontFamily, 'Arial Narrow', Arial, sans-serif); }
#appTD th, #appTD td { padding: 5px 6px; text-align: center; border: 1px solid #7f7f7f; white-space: nowrap; }
#appTD th { background-color: #000; color: #fff; font-weight: 700; position: sticky; top: 0; border: 1px solid #222; z-index: 10; }
#appTD tr:nth-child(even) { background-color: #f9fbfd; }
#appTD tr:hover { background-color: #eef4fa; }
#appTD .cs-spacer td { height: 7px; padding: 0 !important; border-left: none; border-right: none; border-top: none; background: #fff; }
#appTD .cs-bold td { font-weight: 700; }
#appTD .cs-grow td:first-child { border-left: 3px solid #333; }
#appTD .cs-grow td:last-child { border-right: 3px solid #333; }
#appTD .cs-gtop td { border-top: 3px solid #333; }
#appTD .cs-gbot td { border-bottom: 3px solid #333; }
#appTD .cs-subtotal td { background: #eef3f9; padding: 4px 10px !important; text-align: left; white-space: normal; border-left: 3px solid #333; border-right: 3px solid #333; }
#appTD .cs-summary { display: flex; flex-wrap: wrap; margin: 0 0 12px; border: 1.5px solid #8a8a8a; border-radius: 8px; background: #f8fafc; overflow: hidden; }
#appTD .cs-stat { flex: 1; min-width: 110px; padding: 8px 12px; text-align: center; }
#appTD .cs-stat:not(:last-child) { border-right: 1.5px solid #c4c4c4; }
#appTD .cs-stat .n { font-size: 16pt; font-weight: 800; line-height: 1; }
#appTD .cs-stat .l { font-size: 10pt; color: #555; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
#appTD .cs-stat.mis .n { color: #c0392b; }
#appTD .cs-stat.suff .n { color: #1a7f4b; }
/* Connection Summary — Shortcon threshold slider */
#appTD .cs-thr-slider-wrap { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; }
#appTD .cs-thr-label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
#appTD .cs-thr-slider-wrap input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
#appTD .cs-thr-val { font-size: 14px; font-weight: 800; color: var(--accent-text); min-width: 58px; text-align: right; }
#appTD .cs-stat.fast .n, #appTD .cs-stat.gate .n { color: #333; }
#appTD .cs-stat.total .n { color: #000; }
#appTD .cs-chip { display: inline-block; font-weight: 700; margin-right: 16px; }
#appTD .cs-chip.mis { color: #c0392b; }
#appTD .cs-chip.fast, #appTD .cs-chip.gate { color: #333; }
#appTD .cs-chip.suff { color: #1a7f4b; }
#appTD .ft-report-title { text-align: center; font-weight: 800; color: #000; font-size: 13pt; padding: 2px 0 7px; }
#appTD .ft-report-title .cs-gen { font-weight: 500; font-size: 8.5pt; color: #777; }
#appTD .cs-table th, #appTD .cs-table td { padding: 3px 4px; }
#appTD .cs-table th { padding-top: 3px; padding-bottom: 3px; line-height: 1.1; color: var(--csHeadTxt, #fff); background: var(--csHeadBg, #000); }
#appTD #resultTable th { background: var(--tdHeadBg, #000); color: var(--tdHeadTxt, #fff); }
#appTD .cs-table td.cs-cnx-low { color: #c0392b; font-weight: 800; }
#appTD .cs-table td.cs-dcode { color: #c0392b; font-weight: 700; }
#appTD .cs-table .cs-x { color: #c0392b; font-weight: 800; }
#appTD .ft-table td.tot, #appTD .ft-table th.tot { font-weight: 800; }
#appTD table.bw-plain th { background: #fff !important; color: #000 !important; border-color: #555 !important; font-weight: 400 !important; }
#appTD table.bw-plain tr, #appTD table.bw-plain tr:nth-child(even), #appTD table.bw-plain tr:hover { background-color: #fff; }
#appTD table.bw-plain td { color: #000; border-color: #555; }
#appTD #resultTable th { font-size: 13px !important; }
#appTD #resultTable td { font-size: calc(var(--sheetFontSize, 14px) * var(--fontScale, 1)) !important; }
#appTD #csTable th { font-size: 13px !important; }
#appTD #csTable td { font-size: calc(var(--sheetFontSize, 14px) * var(--fontScale, 1)) !important; }
/* ===== MODALS ===== */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-modal); animation: slideUp 0.35s cubic-bezier(0.16,1,0.3,1); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.modal-close { background: transparent; border: none; color: var(--muted); font-size: 24px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.modal-close:hover { color: var(--text); background: var(--panel-3); }
.modal-body { padding: 24px 26px; }
.pf-hero { display: flex; align-items: center; gap: 16px; padding: 18px; margin-bottom: 20px; background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 14px; }
.pf-hero .pf-avatar { width: 56px; height: 56px; font-size: 23px; border-radius: 14px; background: linear-gradient(145deg, #3B82F6, #1E40AF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.pf-hero-info strong { display: block; font-size: 18px; font-weight: 800; }
.pf-hero-info .pm-desig { display: inline-block; font-size: 11px; color: var(--gold); font-weight: 700; margin: 4px 0 2px; padding: 2px 9px; border: 1px solid rgba(129,140,248,.35); background: rgba(129,140,248,.08); border-radius: 999px; }
.pf-hero-info > span:last-child { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.pf-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.pf-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pf-card-head h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 800; }
.pf-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(13,148,136,.15); color: #2DD4BF; border: 1px solid rgba(13,148,136,.3); }
.pf-quota-num { font-size: 22px; font-weight: 800; color: var(--blue); }
.pf-quota-sub { font-size: 11px; color: var(--muted); margin: 3px 0 10px; }
.pf-quota-track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.pf-quota-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3B82F6, #2DD4BF); transition: width .4s ease; }
.pf-mini-btn { padding: 5px 12px; font-size: 11px; }
.field-grid { display: grid; gap: 14px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.form-msg { display: none; padding: 10px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-top: 4px; }
.form-msg.ok { display: block; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent); }
.form-msg.err { display: block; color: var(--red-text); background: var(--red-soft); border: 1px solid var(--red-border); }
.btn-primary { background: var(--blue); color: #FFF; border: none; padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); }
.btn-secondary { background: var(--panel); border: 1.5px solid var(--border); color: var(--text); padding: 11px 20px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; }
.btn-secondary:hover { background: var(--panel-3); border-color: var(--border-strong); }
.admin-user-item { display: flex; justify-content: space-between; align-items: center; background: var(--panel); padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.desig-select { padding: 4px 6px; font-size: 11px; border-radius: 6px; background: var(--panel); color: var(--gold); border: 1px solid var(--gold); outline: none; cursor: pointer; font-family: inherit; max-width: 160px; }
/* ===== OVERVIEW ===== */
#appOV { display: none; padding: 28px 36px 60px; margin-left: 280px; min-height: 100vh; }
#appOV .ov-container { max-width: none; width: 100%; margin: 0 auto; }
#appOV .ov-head { margin-bottom: 20px; }
#appOV .ov-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
#appOV .ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
#appOV .ov-stat { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
#appOV .ov-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#appOV .ov-label { font-size: 12px; font-weight: 600; color: var(--muted); }
#appOV .ov-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--accent-soft); }
#appOV .ov-val { font-size: 27px; font-weight: 800; font-family: 'JetBrains Mono', ui-monospace, monospace; }
#appOV .ov-val-text { font-size: 19px; font-family: inherit; }
#appOV .ov-sub { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
#appOV .ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
#appOV .ov-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
#appOV .ov-grid .ov-card { margin-bottom: 0; }
#appOV .ov-card h3 { font-size: 13px; font-weight: 700; margin: 0 0 16px; }
#appOV .ov-empty { color: var(--faint); font-size: 12.5px; text-align: center; padding: 16px; }
#appOV .ov-bar-row { margin-bottom: 14px; }
#appOV .ov-bar-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
#appOV .ov-bar-track { height: 7px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
#appOV .ov-bar-fill { height: 100%; border-radius: 99px; background: var(--accent); }
#appOV .ov-user-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
#appOV .ov-user-row:last-child { border-bottom: none; }
#appOV .ov-user-ava { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(145deg, #3B82F6, #1E40AF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
#appOV .ov-user-name { font-size: 13px; font-weight: 600; }
#appOV .ov-user-desig { font-size: 11px; color: var(--faint); }
#appOV .ov-user-cnt { margin-left: auto; font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; color: var(--accent-text); }
#appOV .ov-table { width: 100%; border-collapse: collapse; }
#appOV .ov-table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--border); }
#appOV .ov-table td { padding: 9px 10px; font-size: 12.5px; border-bottom: 1px solid var(--border); color: var(--text-2); }
#appOV .ov-table tr:last-child td { border-bottom: none; }
#appOV .ov-table td.t { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--muted); }
#appOV .ov-action-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; background: var(--blue-soft); color: var(--blue); }
/* ===== USER MATRIX (ADMIN) ===== */
#appAdmin {
  display: none; margin-left: 280px; min-height: 100vh;
  padding: 30px 36px 96px; background: var(--bg); color: var(--text);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  box-sizing: border-box; overflow-x: hidden;
  background-image:
    radial-gradient(1200px 400px at 80% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px);
  background-size: auto, 100% 46px;
}
#appAdmin *, #appAdmin *::before, #appAdmin *::after { box-sizing: border-box; }
#appAdmin.is-fullscreen { margin-left: 0; overflow-y: auto; }
.admin-container { width: 100%; max-width: none; margin: 0 auto; }
.cyber-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 18px; margin-bottom: 26px; position: relative;
}
.cyber-header::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 160px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 60%, transparent);
}
.cyber-header-main { min-width: 0; }
.glitch-text {
  font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 800; margin: 0; letter-spacing: 2px;
  color: var(--text);
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 45%, transparent);
}
.cyber-sub { color: var(--accent-text); font-size: 13px; margin: 6px 0 0; text-transform: uppercase; letter-spacing: 2px; }
.cyber-header-tools { display: flex; gap: 10px; flex-shrink: 0; }
.cy-tool-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text-2);
  padding: 9px 14px; border-radius: 10px; font: 600 13px 'Space Grotesk', sans-serif; transition: .18s;
}
.cy-tool-btn svg { width: 17px; height: 17px; }
.cy-tool-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.cy-tool-btn .fs-ico-close { display: none; }
#adminFsBtn.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
#adminFsBtn.on .fs-ico-open { display: none; }
#adminFsBtn.on .fs-ico-close { display: inline; }
.cyber-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cyber-card {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px; box-shadow: var(--shadow-paper);
}
.cyber-card::before, .cyber-card::after {
  content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
}
.cyber-card::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: 14px; }
.cyber-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: 14px; }
.cyber-card.full-width { grid-column: span 2; }
.cyber-card-title {
  font: 800 12px 'JetBrains Mono', monospace; color: var(--muted); letter-spacing: 2px;
  border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: center; text-transform: uppercase;
}
.cyber-form-row { display: grid; grid-template-columns: 2fr 2fr 2fr 1fr auto; gap: 12px; align-items: center; }
.cyber-input, .cyber-select, .cyber-input-small {
  background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text);
  padding: 11px 14px; border-radius: 10px; font: 500 14px 'Space Grotesk', sans-serif;
  width: 100%; min-width: 0; box-sizing: border-box; outline: none; transition: .18s;
}
.cyber-input-small { text-align: center; }
.cyber-input:focus, .cyber-select:focus, .cyber-input-small:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--input-focus); }
.cyber-btn {
  background: linear-gradient(145deg, var(--gold), var(--accent)); border: none; color: #ffffff;
  padding: 11px 22px; border-radius: 10px; font: 800 13px 'Space Grotesk', sans-serif; cursor: pointer;
  text-transform: uppercase; letter-spacing: 1px; transition: .18s;
}
.cyber-btn:hover { filter: brightness(1.06); }
.cyber-btn-small {
  background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text-2);
  padding: 5px 12px; border-radius: 8px; font: 700 11px 'JetBrains Mono', monospace; cursor: pointer; letter-spacing: 1px;
}
.cyber-btn-small:hover { border-color: var(--accent); color: var(--accent-text); }
.cyber-user-list { display: flex; flex-direction: column; gap: 12px; }
.cu-empty { color: var(--muted); font-size: 13px; padding: 18px 4px; }
.cu-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: 12px; padding: 16px 18px; transition: .18s;
}
.cu-row:hover { border-left-color: var(--accent); }
.cu-row.dirty { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--panel-2)); }
.cu-id { display: flex; flex-direction: column; gap: 6px; flex: 1 1 190px; min-width: 0; }
.cu-name { font: 700 15px 'Space Grotesk', sans-serif; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cu-role { font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); background: var(--panel-3); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; }
.cu-role.admin { color: var(--accent-text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.cu-you { font: 800 9px 'JetBrains Mono', monospace; color: #ffffff; background: linear-gradient(145deg, var(--gold), var(--accent)); border-radius: 4px; padding: 2px 6px; }
.cu-usage { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.cu-usage i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.cu-usage i.online { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.cu-last { font-size: 11px; color: var(--muted); letter-spacing: .2px; }
.cu-controls { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; min-width: 0; }
.cu-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cu-group-sm { max-width: 96px; }
.cu-group label { font: 700 10px 'JetBrains Mono', monospace; color: var(--faint); letter-spacing: 1px; text-transform: uppercase; }
.cy-select, .cy-num {
  background: var(--panel); border: 1px solid var(--border-strong); color: var(--text);
  padding: 8px 10px; border-radius: 8px; font: 600 12px 'Space Grotesk', sans-serif;
  outline: none; cursor: pointer; transition: .16s; min-width: 0; max-width: 100%; box-sizing: border-box;
}
.cy-num { width: 72px; text-align: center; }
.cy-select:focus, .cy-num:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--input-focus); }
.cy-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border-strong); color: var(--muted);
  padding: 7px 12px; border-radius: 8px; font: 700 12px 'Space Grotesk', sans-serif; transition: .16s;
}
.cy-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); transition: .16s; }
.cy-toggle.on { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.cy-toggle.on .cy-toggle-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.cu-actions { display: flex; gap: 8px; padding-bottom: 1px; }
.cy-icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border-strong); color: var(--text-2); border-radius: 9px; transition: .16s;
}
.cy-icon-btn svg { width: 17px; height: 17px; }
.cy-icon-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.cy-icon-btn.danger:hover { border-color: var(--red-border); color: var(--red-text); background: var(--red-soft); }
.cyber-logs { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 6px; }
.cyber-log-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; border-bottom: 1px dashed var(--border); padding: 9px 2px; color: var(--muted); }
.cyber-log-item b { color: var(--accent-text); }
.cyber-log-item.alert b { color: var(--red-text); }
.cyber-logs::-webkit-scrollbar { width: 5px; }
.cyber-logs::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 99px; }
.admin-save-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 130%);
  z-index: 9700; display: flex; align-items: center; gap: 16px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border-strong));
  border-radius: 14px; padding: 12px 14px 12px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s;
  max-width: calc(100vw - 28px);
}
.admin-save-bar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.asb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); animation: asbPulse 1.4s ease-in-out infinite; }
@keyframes asbPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.asb-count { font: 600 13px 'Space Grotesk', sans-serif; color: var(--text); white-space: nowrap; }
.asb-actions { display: flex; gap: 8px; }
.asb-discard { background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); padding: 9px 16px; border-radius: 9px; font: 600 13px 'Space Grotesk', sans-serif; cursor: pointer; }
.asb-discard:hover { border-color: var(--red-border); color: var(--red-text); }
.asb-save { background: linear-gradient(145deg, var(--gold), var(--accent)); border: none; color: #ffffff; padding: 9px 20px; border-radius: 9px; font: 800 13px 'Space Grotesk', sans-serif; cursor: pointer; }
.asb-save:hover { filter: brightness(1.06); }
.asb-save:disabled { opacity: .6; cursor: default; }
/* ===== MISC ===== */
.pi-sub { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.btn-generate { padding: 12px 22px; font-size: 14px; }
.uni-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-ico { appearance: none; background: var(--panel-3); color: var(--text-2); border: 1px solid var(--border-strong); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.btn-ico:hover { color: var(--accent-text); border-color: var(--accent); }
.btn-ico svg { width: 15px; height: 15px; }
/* Print button — larger + highlighted, consistent across every module.
   --accent resolves to gold in the dark theme and blue in the light theme. */
.btn-ico[onclick^="print"] {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-ico[onclick^="print"] svg { width: 22px; height: 22px; }
.btn-ico[onclick^="print"]:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  transform: translateY(-1px);
}
.btn-ico[onclick^="print"]:active { transform: translateY(0); }
.btn-more { min-width: 36px; justify-content: center; font-weight: 800; letter-spacing: 1px; }
.uni-menu { position: fixed; z-index: 9990; min-width: 230px; display: none; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-modal); padding: 5px; }
.uni-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: 600 12.5px 'Inter', sans-serif; cursor: pointer; }
.uni-menu button:hover { background: var(--panel-3); color: var(--text); }
.uni-menu .more-danger { color: var(--red-text); }
.uni-menu .more-danger:hover { background: var(--red-soft); }
.uni-menu .menu-sep { height: 1px; background: var(--border); margin: 5px 8px; }
#fileStatus.file-badge { display: none !important; }
.aocc-status { display: none !important; }
.cs-hide-link { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--muted); font: 600 11px 'Inter', sans-serif; padding: 2px 4px; }
.cs-hide-link:hover { color: var(--text); }
.hero-drop { margin: 12px 0 4px; background: var(--panel); border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 16px 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hero-drop:hover, .hero-drop.over { border-color: var(--accent); background: var(--panel-3); }
.hero-drop .hd-ico { width: 18px; height: 18px; color: var(--accent-text); flex-shrink: 0; }
.hero-drop h3 { margin: 0; font-size: 13.5px; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--text); }
.hero-drop .hd-browse { font-size: 13px; font-weight: 700; color: var(--accent-text); text-decoration: underline; }
.airside-top { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; }
.file-chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 2px; min-height: 4px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-3); border: 1px solid rgba(95,191,143,.4); border-radius: 9px; padding: 7px 12px; font-size: 11.5px; }
.file-chip svg { width: 13px; height: 13px; color: #5fbf8f; flex: none; }
.file-chip b { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.file-chip span { color: var(--muted); font-size: 10.5px; }
.opts-box { margin: 14px 0 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); overflow: hidden; }
.opts-row + .opts-row { border-top: 1px solid var(--border); }
.opts-head { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: 0; color: var(--text); font: 600 12.5px 'Inter', sans-serif; padding: 12px 14px; cursor: pointer; text-align: left; }
.opts-head:hover { background: var(--panel-3); }
.opts-head .opts-count { margin-left: auto; font: 500 10px 'JetBrains Mono', monospace; color: var(--muted); }
.opts-head .chev { color: var(--faint); font-size: 11px; }
.opts-head .chev.tile-open { transform: rotate(180deg); display: inline-block; }
.opts-body { padding: 2px 14px 14px; }
.opts-body textarea { width: 100%; }
.badge-n { font: 800 9.5px 'Inter', sans-serif; background: var(--amber); color: #000; border-radius: 99px; padding: 1.5px 6.5px; margin-left: 6px; }
#airsideOptsBtn.open { border-color: var(--accent); color: var(--accent-text); }
/* ===== FONT / COLOR POPOVER (ported from working reference — the Fonts & Colors
   pickers are built dynamically with these classes; without them the panel has
   no position/background and appears unstyled at the bottom of the page) ===== */
.cpop-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:12000; }
.cpop { display:none; position:fixed; z-index:12001; top:50%; left:50%; transform:translate(-50%,-50%); width:min(430px,92vw); max-height:88vh; overflow:auto; background:var(--panel,#111); color:var(--text,#fff); border:1px solid var(--border); border-radius:14px; padding:18px 18px 14px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.cpop-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cpop-head span { font-size:15px; font-weight:800; }
.cpop-x { background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1; padding:2px 6px; }
.cpop-x:hover { color:var(--text); }
.cpop-lbl { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--faint); margin:12px 0 6px; }
.cpop-sel { width:100%; padding:10px 12px; font-size:13px; border-radius:8px; background:var(--bg,#000); color:var(--text,#fff); border:1.5px solid var(--border); outline:none; cursor:pointer; }
.cpop-grid { display:flex; flex-wrap:wrap; gap:8px; }
.cpop-sw { width:26px; height:26px; border-radius:50%; border:2px solid rgba(128,128,128,0.45); cursor:pointer; padding:0; transition:transform .12s ease; }
.cpop-sw.font-btn { width:auto; min-width:80px; height:32px; border-radius:6px; font-size:12px; font-weight:600; background:var(--panel-3); color:var(--text); padding:0 10px; }
.cpop-sw.font-btn:hover { transform:scale(1.04); }
.cpop-sw.font-btn.on { outline:2px solid var(--accent); outline-offset:2px; }
.cpop-sw:hover { transform:scale(1.16); }
.cpop-sw.on { outline:2px solid var(--accent); outline-offset:2px; }
.cpop-foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:10px; }
.cpop-reset { background:none; border:none; color:var(--faint); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; text-decoration:underline; cursor:pointer; }
.cpop-reset:hover { color:var(--accent-text); }
.cpop-done { background:var(--accent,#2563eb); color:#fff; border:none; border-radius:8px; padding:8px 18px; font-size:13px; font-weight:700; cursor:pointer; }
/* ===== INPUT FIELD THEMING (ported from working reference — these scoped
   inputs had no rules in this build and fell back to unstyled white boxes.
   All vars used here already exist in :root, so padding/margins/colors now
   match the reference exactly.) ===== */
/* Amend Rows panel (OAL landside) — box padding/margins + input theme */
.oal-amend-box { margin-top:14px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.oal-amend-title { font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--muted); margin-bottom:12px; }
.oal-amend-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.oal-amend-box input { width:100%; padding:9px 11px; background:var(--panel-2); border:1.5px solid var(--border); border-radius:8px; color:var(--text); font-family:inherit; font-size:13px; text-transform:uppercase; }
.oal-amend-box input::placeholder { text-transform:none; }
.oal-amend-box input:focus { outline:none; border-color:var(--gold); }
.oal-amend-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.oal-amend-status { font-size:12px; color:var(--muted); margin-top:8px; min-height:16px; }
.oal-amend-status:empty { display:none; margin:0; min-height:0; }
@media (max-width:640px) {
.oal-amend-grid { grid-template-columns:repeat(2,1fr); }
}
/* Duplicate-handling radio options */
.dup-option input[type="radio"] { display: none; }
.dup-option:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.dup-option:has(input:checked)::after { content: '\2713'; position: absolute; right: 14px; color: var(--blue); font-size: 16px; font-weight: 900; }
/* Gate chip inputs */
.gate-chip input { width: 46px; padding: 2px 4px; font-size: 9pt; text-align: center; text-transform: uppercase; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 4px; color: var(--amber); font-weight: 800; }
/* OCM report add-row + inline inputs */
.ocm-add-row input { flex: 1; padding: 9px 12px; font-size: 13px; background: var(--panel); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; text-transform: uppercase; }
.ocm-add-row input:focus { outline: none; border-color: var(--blue); }
.ocm-add-row input[type="number"] { flex: 0 0 80px; text-transform: none; }
.ocm-inline-row input[type="number"] { width: 110px; padding: 9px 12px; font-size: 14px; font-weight: 800; background: var(--panel); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; }
.ocm-inline-row input:focus { outline: none; border-color: var(--gold); }
/* ===== PRINT ===== */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4 portrait; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  #appMCS { padding: 0 !important; margin: 0 !important; }
  #loginOverlay, #sidebar, #appOV, #appAdmin, .toast, #profileModal, #bugModal, .dashboard-header, .switcher-wrapper, .workflow-panel, .sheet-colorbar, .sc-openbar, .cpop, .cpop-backdrop { display: none !important; }
  #ocmReportSection, .ocm-enable-bar, .ocm-enable-btn, .cs-more-wrap { display: none !important; }

  body.mode-mcs #appTD { display: none !important; }
  body.mode-mcs #appMCS .app-container { display: none !important; }
  body.mode-mcs #appMCS #missingGatesPanel { display: none !important; }
  body.mode-mcs #appMCS #sheetWrap { margin: 0 !important; padding: 0 !important; gap: 0 !important; width: 100% !important; display: block !important; overflow: visible !important; }

  body.mode-mcs #appMCS .sheet {
    box-shadow: none !important; border: none !important;
    page-break-after: always !important; page-break-inside: avoid !important;
    width: 198mm !important; height: 285mm !important; min-height: 0 !important; max-height: 285mm !important;
    margin: 6mm auto 0 !important;
    padding: 0 !important; /* even 6mm on all four sides: 198mm centered = 6mm L/R; 6mm top + 285mm = 6mm bottom */
    box-sizing: border-box !important; overflow: hidden !important; display: flex !important;
  }
  body.mode-mcs #appMCS .cols > div { display: flex !important; flex-direction: column !important; }
  body.mode-mcs #appMCS .cols > div > table { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
  body.mode-mcs #appMCS .cols > div > .sp { flex: none !important; }
  body.mode-mcs #appMCS .sheet:last-child { page-break-after: auto !important; }

  /* OAL / EY are single tables that can flow onto further pages — let them
     fill the page and take the even per-page inset from @page (6mm, set in
     printEY/printOAL), instead of a fixed width that overflows the print area */
  body.mode-mcs #appMCS .sheet.oal-sheet,
  body.mode-mcs #appMCS .sheet.ey-sheet {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important; display: block !important;
    box-shadow: none !important; border: none !important;
    page-break-inside: auto !important; page-break-after: auto !important;
  }
  body.mode-mcs #appMCS table.ey-table thead,
  body.mode-mcs #appMCS table.oal-table thead { display: table-header-group !important; }
  body.mode-mcs #appMCS table.ey-table tr,
  body.mode-mcs #appMCS table.oal-table tr { page-break-inside: avoid !important; break-inside: avoid !important; }

  body.mode-td #appMCS { display: none !important; }
  body.mode-td #appTD { background: white !important; color: #000 !important; padding: 0; margin: 0 !important; }
  body.mode-td #appTD .td-header, body.mode-td #appTD .td-switcher, body.mode-td #appTD .td-panel-intro,
  body.mode-td #appTD .td-form-row, body.mode-td #appTD .td-form-group, body.mode-td #appTD .td-toolbar,
  body.mode-td #appTD .td-table-header, body.mode-td #appTD .gate-ocr-card,
  body.mode-td #appTD .gate-drop, body.mode-td #appTD .gate-preview, body.mode-td #appTD .gate-manual,
  body.mode-td #appTD .gate-hint, body.mode-td #appTD .help-text { display: none !important; }
  body.mode-td #appTD .td-container { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body.mode-td #appTD .td-panel { background: white !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
  body.mode-td #appTD .td-table-section { border: none !important; box-shadow: none !important; background: white !important; display: block !important; margin: 0 !important; padding: 0 !important; }
  body.mode-td #appTD .td-table-wrap { max-height: none !important; overflow: hidden !important; width: 210mm !important; padding: 2mm 2mm !important; margin: 0 auto !important; box-shadow: none !important; border: none !important; box-sizing: border-box !important; }
  body.mode-td #appTD table { width: 100% !important; font-size: 11pt !important; color: #000 !important; }
  body.mode-td #appTD td { padding: 4px 5px !important; border: 1px solid #555 !important; color: #000 !important; }
  body.mode-td #appTD th { padding: 4px 5px !important; border: 1px solid #555 !important; color: #fff !important; }
  body.mode-td #appTD .cs-table { table-layout: fixed !important; width: 100% !important; margin: 0 auto !important; border-collapse: collapse !important; }
  body.mode-td #appTD .cs-table th, body.mode-td #appTD .cs-table td { white-space: nowrap !important; font-size: 9.5pt !important; padding: 2px 2px !important; overflow: hidden !important; }
  body.mode-td #appTD .cs-table th.cs-narrow { white-space: normal !important; }
  body.mode-td #appTD .cs-table .cs-subtotal td { white-space: normal !important; }
  body.mode-td #appTD .cs-table td.cs-cnx-low, body.mode-td #appTD .cs-table td.cs-dcode, body.mode-td #appTD .cs-table .cs-x { color: #c0392b !important; font-weight: 800 !important; }

  /* ===== PRINT (mode-td): hide source tabs, print-friendly threshold line ===== */
body.mode-td #appTD .cs-src-tabs { display: none !important; }
body.mode-td #appTD .cs-thr-slider-wrap {
  background: #fff !important; border: none !important; box-shadow: none !important;
  padding: 2px 0 6px !important; margin: 0 auto 4px !important; width: 210mm;
}
body.mode-td #appTD .cs-thr-slider-wrap input[type="range"] { display: none !important; }
body.mode-td #appTD .cs-thr-label { color: #000 !important; font-size: 10pt; }
body.mode-td #appTD .cs-thr-val { color: #000 !important; font-size: 10.5pt; }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  #sidebar { width: 72px; padding: 16px 8px; }
  #sidebar .sb-brand-name, #sidebar .sb-brand-sub, #sidebar .sb-label,
  #sidebar .sb-item .sb-txt, #sidebar .sb-lock, #sidebar .sb-user-info, #sidebar .sb-theme .th-txt { display: none; }
  #sidebar .sb-brand { justify-content: center; padding-bottom: 14px; }
  #sidebar .sb-item { justify-content: center; padding: 10px; }
  #sidebar .sb-item .ico { width: auto; font-size: 17px; }
  #appMCS, #appTD, #appOV, #appAdmin { margin-left: 72px; padding: 20px 16px 60px; }
  #appOV .ov-stats, #appOV .ov-grid { grid-template-columns: 1fr; }
  .cyber-grid { grid-template-columns: 1fr; }
  .cyber-card.full-width { grid-column: span 1; }
  .cyber-form-row { grid-template-columns: 1fr 1fr; }
  .cyber-form-row .cyber-input:first-child, .cyber-form-row .cyber-btn { grid-column: span 2; }
}
/* ===== PREMIUM LAYER ===== */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 420px at 8% -12%, var(--accent-soft), transparent 70%),
    radial-gradient(560px 380px at 92% -8%, rgba(120,170,255,.10), transparent 72%);
}
.login-card h2, .sb-brand-name, .panel-intro h2, .td-panel-intro h2,
.ov-head h1, .ov-container h1, .modal-head h2 { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.015em; }
.login-logo, .sb-brand-mark { background: linear-gradient(145deg, var(--gold), var(--accent)) !important; border: none !important; color: #ffffff !important; box-shadow: 0 8px 22px rgba(99,102,241,.35); }
.sb-avatar { background: linear-gradient(145deg, var(--gold), var(--accent)) !important; color: #ffffff !important; }
.sb-item.active { box-shadow: 0 0 0 1px rgba(129,140,248,.35), 0 8px 24px rgba(129,140,248,.12); }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--input-focus); }
.sb-item .ico { display: flex; align-items: center; justify-content: center; }
.sb-item .ico svg { width: 17px; height: 17px; }
.td-switch-btn svg, .switch-btn svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.sb-item:hover { box-shadow: 0 0 0 1px rgba(129,140,248,.20), 0 6px 18px rgba(129,140,248,.10); }
.sb-item.active { box-shadow: 0 0 0 1px rgba(129,140,248,.42), 0 10px 28px rgba(129,140,248,.20); }
:root { --aze-logo: url("aze-logo.jpg"); }
.login-logo, .sb-brand-mark {
  background: #0a0c13 var(--aze-logo) center/cover no-repeat !important;
  border: 1px solid rgba(129,140,248,.5) !important;
  color: transparent !important; font-size: 0 !important;
  box-shadow: 0 0 0 1px rgba(129,140,248,.28), 0 6px 22px rgba(129,140,248,.30) !important;
}
/* ===== MOBILE ===== */
#mobileBar, #mobileModules { display: none; }
@media (max-width: 900px) {
#sidebar { display: none !important; }
#mobileBar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 9600; padding: 0 14px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--border);
  }
.mb-brand { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; }
.mb-mark { width: 30px; height: 30px; border-radius: 9px; background: #0a0c13 var(--aze-logo) center/cover no-repeat; }
.mb-actions { display: flex; align-items: center; gap: 9px; }
.mb-ic { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.mb-avatar { width: 38px; height: 38px; border-radius: 50%; border: none; font-weight: 800; font-size: 15px; color: #ffffff; background: linear-gradient(145deg, var(--gold), var(--accent)); }
#mobileModules {
    display: flex; gap: 8px; align-items: center; position: fixed; top: 56px; left: 0; right: 0; z-index: 9590;
    padding: 9px 12px; overflow-x: auto;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
  }
#mobileModules::-webkit-scrollbar { display: none; }
.mm-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font: 600 13px inherit; white-space: nowrap; }
.mm-pill svg { width: 16px; height: 16px; }
.mm-pill.active { background: linear-gradient(145deg, var(--gold), var(--accent)); color: #ffffff; border-color: transparent; }
}
@media print {
#mobileBar, #mobileModules { display: none !important; }
}
/* ===== BUTTON ICONS ===== */
.bic { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.btn-secondary:hover, .td-btn-secondary:hover, #moreOptsBtn:hover,
.more-wrap>.btn-secondary:hover, .ho-add-btn:hover, .ho-clear-btn:hover {
  border-color: rgba(129,140,248,.55) !important;
  box-shadow: 0 0 0 1px rgba(129,140,248,.20), 0 6px 18px rgba(129,140,248,.16) !important;
  color: var(--gold) !important;
}
/* ===== TCC embedded tools (Hand Baggage + Delay Reports) ===== */
#appCBP { margin-left:280px; height:100vh; box-sizing:border-box; }
#appCBP .tcc-container { height:100%; display:flex; flex-direction:column; }
#appCBP iframe { width:100%; height:100%; border:0; display:block; background:var(--bg,#f2f4f8); }
#appCBP .view { display:flex; flex:1; min-height:0; }
#appCBP .frame-view { padding:0; }
@media (max-width:900px) {
#appCBP { margin-left:0 !important; height:100dvh; padding-top:122px; padding-bottom:120px; }
}
#appTCC { margin-left:280px; height:100vh; box-sizing:border-box; }
#appTCC .tcc-container { height:100%; display:flex; flex-direction:column; }
#appTCC .view { display:none; flex:1; min-height:0; }
#appTCC .view.active { display:flex; flex-direction:column; }
#appTCC .frame-view { padding:0; }
#appTCC .frame-view iframe { width:100%; height:100%; border:0; display:block; background:var(--bg,#0a0e17); }
@media (max-width: 900px) {
#appTCC { margin-left:0 !important; height:100dvh; padding-top:122px; }
}
/* ===== User Matrix — multi-select Areas control ===== */
.cu-group.cu-areas { flex: 1 1 260px; min-width: 220px; }
.area-chips { display:flex; flex-wrap:wrap; gap:6px; }
.area-chip {
  font: inherit; font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:6px 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border,#243044); background:transparent; color:var(--muted,#7d8aa3);
  transition: all .12s ease;
}
.area-chip:hover { border-color:#3B82F6; color:#cfe0ff; }
.area-chip.on { background:linear-gradient(90deg,#2563eb,#2DD4BF); border-color:transparent; color:#fff; }
.area-chip:disabled { opacity:.5; cursor:not-allowed; }
.cu-areas-empty { font-size:11px; color:#d97706; }
/* ===== No-access screen (no modules assigned) ===== */
#appNoAccess { display:none; margin-left:280px; min-height:100vh; align-items:center; justify-content:center; padding:40px; }
#appNoAccess .na-card { max-width:440px; width:100%; text-align:center; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:40px 32px; }
#appNoAccess .na-ico { width:56px; height:56px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--panel-3); color:var(--muted); }
#appNoAccess .na-ico svg { width:26px; height:26px; }
#appNoAccess .na-card h2 { margin:0 0 10px; font-size:20px; font-weight:800; color:var(--text); }
#appNoAccess .na-card p { margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.6; }
#appNoAccess .na-logout { background:var(--panel-3); border:1px solid var(--border); color:var(--text); padding:11px 22px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; }
#appNoAccess .na-logout:hover { background:var(--panel-2); }
@media (max-width:900px) {
#appNoAccess { margin-left:0; padding:122px 16px 40px; }
}
/* ===== Connection Summary — source tabs (old vs new paste) ===== */
.cs-src-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.cs-src-tab {
  font: inherit; font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:8px 16px; border-radius:9px; cursor:pointer;
  border:1px solid var(--border); background:transparent; color:var(--muted);
  transition: all .12s ease;
}
.cs-src-tab:hover { color:var(--text); border-color:var(--accent); }
.cs-src-tab.active { background:var(--accent); border-color:transparent; color:var(--accent-text,#0b0e14); }
/* ============ CBP ALLOCATION MODULE (native, scoped) ============ */
#appCBP {box-sizing:border-box;
--cbp-bg:#f2f4f8;--cbp-card:#ffffff;--cbp-ink:#0f172a;--cbp-muted:#64748b;--cbp-line:rgba(15,23,42,0.12);--cbp-blue:#4f46e5;--cbp-blue2:rgba(79,70,229,0.10);--cbp-field:#f7f9fc;--cbp-ok:#1a7f4b}
body:not(.theme-light) #appCBP {--cbp-bg:#0a0e17;--cbp-card:#121826;--cbp-ink:#e8edf5;--cbp-muted:#8b99b0;--cbp-line:rgba(148,163,184,0.20);--cbp-blue:#6366f1;--cbp-blue2:rgba(99,102,241,0.14);--cbp-field:#0e1420;--cbp-ok:#4cc38a}#appCBP *,#appCBP *:before,#appCBP *:after {box-sizing:border-box}
#appCBP {overflow-y:auto;background:var(--cbp-bg);color:var(--cbp-ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:120px}
#appCBP header {background:var(--cbp-blue);color:#fff;padding:18px 16px 16px}
#appCBP header h1 {margin:0;font-size:20px;font-weight:700}
#appCBP header p {margin:4px 0 0;opacity:.85;font-size:13px}
#appCBP main {max-width:640px;margin:0 auto;padding:12px}
#appCBP .card {background:var(--cbp-card);border:1px solid var(--cbp-line);border-radius:12px;margin:0 0 12px;overflow:hidden}
#appCBP .card h2 {margin:0;padding:9px 12px;font-size:14px;font-weight:600;background:var(--cbp-blue2);color:var(--cbp-ink);display:flex;justify-content:space-between;align-items:center}
#appCBP .card h2 small {font-weight:400;color:var(--cbp-muted);font-size:12px}
#appCBP .body {padding:10px 12px;display:grid;gap:8px}
#appCBP .grid2 {grid-template-columns:1fr 1fr}
#appCBP .row {display:flex;gap:8px;align-items:center}
#appCBP .num {font-family:ui-monospace,monospace;font-size:12px;color:var(--cbp-muted);width:20px;text-align:right;flex:none}
#appCBP input,#appCBP select {font:inherit;color:var(--cbp-ink);background:var(--cbp-field);border:1px solid var(--cbp-line);border-radius:8px;padding:9px 10px;width:100%;min-width:0;font-size:16px}
#appCBP input:focus {outline:2px solid var(--cbp-blue);outline-offset:-1px}
#appCBP .flight {flex:0 0 118px;text-transform:uppercase}
#appCBP .role {flex:0 0 72px;text-align:center;text-transform:uppercase}
#appCBP .seg {display:flex;border:1px solid var(--cbp-line);border-radius:8px;overflow:hidden}
#appCBP .seg button {flex:1;border:0;background:var(--cbp-field);color:var(--cbp-ink);font:inherit;padding:9px;font-weight:600}
#appCBP .seg button.on {background:var(--cbp-blue);color:#fff}
#appCBP label.lbl {font-size:12px;color:var(--cbp-muted);display:block;margin-bottom:3px}
#appCBP .fname {font-family:ui-monospace,monospace;font-size:13px;background:var(--cbp-blue2);padding:8px 10px;border-radius:8px;overflow-x:auto;white-space:nowrap}
#appCBP .tools {display:flex;gap:8px;flex-wrap:wrap}
#appCBP .btn {border:1px solid var(--cbp-line);background:var(--cbp-card);color:var(--cbp-ink);font:inherit;font-size:14px;padding:9px 12px;border-radius:8px;font-weight:500}
#appCBP .bar {position:fixed;left:0;right:0;bottom:0;background:var(--cbp-card);border-top:1px solid var(--cbp-line);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;justify-content:center}
#appCBP .bar .inner {display:flex;gap:8px;width:100%;max-width:640px}
#appCBP .main {flex:1;background:var(--cbp-blue);color:#fff;border:0;border-radius:10px;font:inherit;font-weight:700;font-size:16px;padding:13px}
#appCBP .main:disabled,#appCBP .alt:disabled {opacity:.6}
#appCBP .alt {flex:1;background:#1f9d55;color:#fff;border:0;border-radius:10px;font:inherit;font-weight:700;font-size:16px;padding:13px}
#appCBP #prev {width:100%;border:1px solid var(--cbp-line);border-radius:10px;display:block;background:#fff}
#appCBP #msg {font-size:13px;text-align:center;min-height:18px;color:var(--cbp-ok);margin:4px 0 0}
#appCBP #msg.err {color:#c0392b}
#appCBP .hide {display:none}
/* ===== SIDEBAR: narrower + compact (no scroll) ===== */
#sidebar { width:232px !important; }
#sidebar .sb-item { padding:7px 12px !important; min-height:0 !important; }
#sidebar .sb-label { margin:6px 4px 0 !important; padding:10px 12px 5px !important; }
#sidebar .sb-brand { padding:10px 12px !important; }
#sidebar .sb-foot { padding-top:8px !important; margin-top:auto; }
#sidebar hr { margin:6px 0 !important; }
/* ===== CBP: remove colored banner, blend with theme ===== */
#appCBP header { background:transparent !important; box-shadow:none !important; border-bottom:1px solid var(--border); padding:14px 24px 10px !important; }
#appCBP header h1 { color:var(--text) !important; font-size:19px !important; }
#appCBP header p, #appCBP header .sub, #appCBP header span { color:var(--muted) !important; }
/* ===== CBP: full module width + print button ===== */
#appCBP main { max-width:1100px !important; padding:16px 24px 96px !important; }
#appCBP .bar .inner { max-width:1100px !important; }
@media (max-width:900px) {
#appCBP main { padding:12px 12px 140px !important; }
}

/* ===== RESTORED ORIGINAL: Gates MCS / Landside OAL / Landside EY ===== */
.login-form input, #appMCS .field input, #adminUserManagement input, #adminUserManagement select,
.modal-card .field input, .modal-card .field select {
  width: 100%; padding: 12px 14px; font-size: 14px; background: var(--panel); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 10px; transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.login-form input:focus, #appMCS .field input:focus, #adminUserManagement input:focus, #adminUserManagement select:focus,
.modal-card .field input:focus, .modal-card .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--input-focus); }
/* ===== MCS ===== */
#appMCS { display: none; padding: 28px 44px 72px; margin-left: 248px; }
#appMCS .app-container { max-width: 1100px; margin: 0 auto 40px; }
#appMCS .switcher-wrapper { display: none; }
#appMCS .workflow-panel { display: none; background: var(--panel); border-radius: 14px; border: 1px solid var(--border); padding: 32px; animation: fadeIn 0.3s ease-out; }
#appMCS .workflow-panel.active { display: block; }
#appMCS .panel-intro { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
#appMCS .panel-intro h2 { font-size: 19px; margin: 0; font-weight: 800; }
#appMCS .form-row { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 22px; flex-wrap: wrap; }
#appMCS .form-group { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 240px; }
#appMCS label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
#appMCS select, #appMCS textarea { font: inherit; font-size: 14px; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); transition: 0.2s; width: 100%; }
#appMCS select:focus, #appMCS textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--input-focus); }
#appMCS textarea { min-height: 150px; font-family: ui-monospace, monospace; font-size: 13px; resize: vertical; }
#appMCS .dropzone { border: 2px dashed var(--border-dashed); border-radius: 14px; background: var(--panel); padding: 48px 20px; text-align: center; cursor: pointer; transition: 0.2s; }
#appMCS .dropzone:hover { background: var(--panel-2); border-color: var(--accent); }
#appMCS .dropzone h3 { font-size: 16px; margin: 0 0 6px; font-weight: 700; }
#appMCS .btn-primary { background: var(--blue); color: #FFF; border: none; padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
#appMCS .btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); }
#appMCS .btn-secondary { background: var(--panel); border: 1.5px solid var(--border); color: var(--text); padding: 11px 20px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; }
#appMCS .btn-secondary:hover { background: var(--panel-3); border-color: var(--border-strong); }
#appMCS .toolbar-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
#appMCS #sheetWrap { display: none; margin: 40px auto; flex-direction: column; align-items: center; gap: 30px; }
#appMCS .empty-state { color: var(--muted); text-align: center; padding: 48px; border: 2px dashed var(--border-dashed); border-radius: 14px; font-weight: 600; background: var(--panel); width: 100%; max-width: 800px; margin: 0 auto; }
#appMCS .excl-bar { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
#appMCS .excl-bar input { flex: 0 0 220px; background: var(--panel); border: 1px solid var(--border); color: var(--text-2); border-radius: 8px; padding: 9px 12px; font-size: 13px; text-transform: uppercase; }
#appMCS .excl-btn { background: var(--panel-3); border: 1px solid var(--border); color: var(--text-2); border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
#appMCS .excl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#appMCS .excl-chip { background: var(--chip-red-bg); border: 1px solid var(--chip-red-border); color: var(--red-text); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
#appMCS .file-badge { display: none; margin-top: 18px; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent); padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 13px; text-align: center; }
#appMCS .ho-grid { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr 34px; gap: 8px; align-items: center; }
#appMCS .ho-grid-head span { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
#appMCS .ho-grid-row { margin-bottom: 8px; }
#appMCS .ho-grid-row input { width: 100%; padding: 9px 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; background: var(--panel-2); border: 1px solid var(--border-dashed); color: var(--text); border-radius: 8px; outline: none; text-align: center; }
#appMCS .ho-del-btn { width: 34px; height: 34px; background: var(--red-soft); color: var(--red-text); border: 1px solid var(--red-border); border-radius: 8px; cursor: pointer; font-size: 12px; }
#appMCS .ho-add-btn { margin-top: 4px; padding: 9px 18px; font-size: 12px; font-weight: 800; background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber); border-radius: 8px; cursor: pointer; }
#appMCS .ho-clear-btn { padding: 8px 14px; font-size: 12px; font-weight: 700; background: var(--red-soft); color: var(--red-text); border: 1px solid var(--red-border); border-radius: 8px; cursor: pointer; }
#appMCS .ho-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
#appMCS .ho-head h3 { margin: 0; color: var(--amber); font-size: 15px; letter-spacing: 2px; }
#appMCS .ho-tile { border-color: rgba(99,102,241,.45); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
/* ===== SHEET PAPER ===== */
#appMCS .sheet { background: #fff; box-shadow: var(--shadow-paper); font-family: var(--sheetFontFamily, 'Arial Narrow', Arial, sans-serif); font-size: var(--sheetFontSize, 12px); width: 210mm; min-height: 297mm; display: flex; flex-direction: column; border: 1px solid #CCC; padding: 4mm; }
#appMCS .top-bar { display: flex; align-items: center; justify-content: space-between; background: var(--asTopBg, #000); color: var(--asTopTxt, #fff); border-bottom: 2px solid #818CF8; min-height: 4mm; padding: 0.6mm 3mm; flex: none; }
#appMCS .top-bar .breakdown { font-weight: 800; font-size: 11.5px; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#appMCS .top-bar .meta { background: var(--asMetaBg, #111); color: var(--asMetaTxt, #fff); padding: 1px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; border: 1px solid rgba(255,255,255,0.15); white-space: nowrap; display: inline-block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: none; max-width: 45%; }
/* FIX: Table height set to auto, flex set to 0 0 auto to completely disable browser table-stretching */
#appMCS .cols { display: grid; grid-template-columns: 1fr 3px 1fr; flex: 1 1 100%; margin-top: 1mm; width: 100%; height: 100%; }
#appMCS .cols > div { display: flex; flex-direction: column; height: 100%; }
#appMCS .gap { background: #000; width: 2px; margin: 0 auto; opacity: 0.4; }
#appMCS table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--sheetFontFamily, 'Arial Narrow', Arial, sans-serif); font-size: var(--sheetFontSize, 12px); height: auto !important; }
#appMCS .cols > div > table { flex: 0 0 auto; height: auto !important; min-height: 0; }
#appMCS .sheet.mcs-measure { height: auto !important; min-height: 0 !important; max-height: none !important; }
#appMCS .sheet.mcs-measure .cols { height: auto !important; flex: none !important; }
#appMCS .sheet.mcs-measure .cols > div { height: auto !important; }
#appMCS .sheet.mcs-measure .cols > div > table { flex: none !important; height: auto !important; }
#appMCS .sheet.mcs-measure tr.d { height: auto !important; }
#appMCS td { line-height: 0.95 !important; overflow: hidden; padding: 0 3px !important; text-align: center; vertical-align: middle; }
#appMCS tr { page-break-inside: avoid !important; break-inside: avoid !important; }
/* FIX: Headers locked directly to auto height with padding, no flex stretch allowed to ruin them */
#appMCS .ghead { height: auto; }
#appMCS .ghead td { color: #fff; font-weight: 800; font-size: var(--fGroup, 12px); text-align: center; border: 1px solid #000; border-bottom: none; letter-spacing: 1px; height: auto; padding: 2px 0; }
#appMCS .ghead-inner { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 6px; height: 100%; box-sizing: border-box; }
#appMCS .ghead-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Adjusted Pier breakdown tile size to fit cleanly inside fixed row */
#appMCS .ghead-tile { max-width: 72%; font-size: 0.72em; padding: 1px 4px; line-height: 1.2; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 3px; font-weight: 800; letter-spacing: 0.3px; }
#appMCS tr.gsub { height: auto; }
#appMCS tr.gsub td { color: inherit; font-weight: 800; font-size: var(--fHead, 9.5px); border: 1px solid #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; height: auto; }
#appMCS tr.d { height: var(--rowH); }
#appMCS tbody td { border: 1px solid #000; font-size: var(--sheetFontSize, 14px); font-weight: 700; color: #111; }
/* Row height follows --rowH (computed from flight count so the page fills but
   never overflows). Data-cell content sits in a fixed-height inner box that
   clips, so the font renders at exactly the selected size and can NEVER stretch
   a row — if a row is shorter than the text, the text just clips. No overflow
   or positioning on the td itself, so border-collapse borders stay clean. */
#appMCS tr.d td { height: var(--rowH); padding: 0 !important; text-align: center !important; vertical-align: middle !important; font-size: var(--sheetFontSize, 14px) !important; }
#appMCS tr.d td:not(.nt) span.cell-text { display: block; height: var(--rowH); line-height: var(--rowH); overflow: hidden; padding: 0 3px; box-sizing: border-box; white-space: nowrap; transform: none; letter-spacing: 0.3px; }
#appMCS td.nt { background: #fff; }
#appMCS tr.d td.nt span.cell-text { display: inline-block; max-height: var(--rowH); overflow: hidden; transform: none; }
#appMCS tr.d.alt td:not(.nt) { background: #F6F8FC; }
#appMCS tr.d.hl td:not(.nt) { color: #C53030; }
#appMCS .sp { height: calc(var(--rowH) * 0.5); width: 100%; background: #fff; border: none; flex: none; }
@media screen {
#appMCS .ghead-tile { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), 0 0 10px var(--accent-soft); }
}
#appMCS .ghead-total { font-size: 1em; font-weight: 900; line-height: 1; vertical-align: middle; margin-right: 5px; }
#appMCS tr.d.ho td:not(.nt) { background: #FFF3CD; }
#appMCS tr.d.ho.alt td:not(.nt) { background: #FFECB5; }
#appMCS td.nt .ho-tag { color: #8A6D00; font-weight: 900; font-size: 0.85em; float: right; margin-right: 4px; }
#appMCS td.nt .mcs-note { float: right; margin-right: 4px; font-size: 0.78em; font-weight: 600; color: #333; transform: none; }
/* OAL sheet — 4mm margin on all sides */
#appMCS .sheet.oal-sheet { font-family: 'Arial', sans-serif; height: auto !important; }
#appMCS .oal-title-bar { background: var(--oalHead, #1E3A2F); color: var(--oalHeadTxt, #FFF); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border: 2px solid #000; border-bottom: none; }
#appMCS .oal-title-bar h1 { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0; font-weight: 800; }
#appMCS .oal-title-bar .oal-badges { display: flex; gap: 12px; align-items: center; }
#appMCS .oal-badge-date { font-size: 13px !important; color: #E8F0EB; font-weight: bold; }
#appMCS .oal-badge-shift { font-size: 12px !important; font-weight: 900; padding: 5px 12px; border-radius: 4px; color: var(--oalShiftTxt, #fff); }
#appMCS .oal-badge-shift.night { background: var(--oalShiftBg, #1E3060); border: 1px solid #4B6396; }
#appMCS .oal-badge-shift.day { background: var(--oalShiftBg, #8B3A3A); border: 1px solid #B65858; }
#appMCS .oal-stats-bar { background: var(--oalSub, #F7F5F1); color: var(--oalSubTxt, #111); font-weight: 800; font-size: 13px !important; text-align: center; padding: 8px; border: 2px solid #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#appMCS table.oal-table { width: 100%; height: auto !important; border-collapse: collapse; border: 2px solid #000; margin-top: 6px; }
#appMCS table.oal-table th { background: var(--oalHead, #243B30); color: var(--oalHeadTxt, #FFF); font-size: 12px !important; font-weight: 800; padding: 5px 6px !important; line-height: 1.15 !important; border: 1px solid #000; }
#appMCS table.oal-table td { font-size: calc(12px * var(--fontScale, 1)) !important; padding: 3px 6px !important; line-height: 1.15 !important; border: 1px solid #000; color: #000; height: 19px !important; }
#appMCS tr.oal-row-3l.odd td { background: #FFF0F0; }
#appMCS tr.oal-row-3l.even td { background: #FFE5E5; }
#appMCS tr.oal-row-3l td.flt { color: #D31117; font-weight: 900; font-size: 13px !important; }
#appMCS tr.oal-row-6e.odd td { background: #F0F5FF; }
#appMCS tr.oal-row-6e.even td { background: #E2ECFF; }
#appMCS tr.oal-row-6e td.flt { color: #0044CC; font-weight: 900; font-size: 13px !important; }
#appMCS tr.oal-row-oal.odd td { background: #FFFFFF; }
#appMCS tr.oal-row-oal.even td { background: #F3F4F6; }
#appMCS tr.oal-row-oal td.flt { color: #0F172A; font-weight: 800; }
#appMCS tr.oal-row-empty td { background: #FAFAFA; color: #999; border: 1px solid #000; }
/* EY sheet — 4mm margin on all sides */
#appMCS .sheet.ey-sheet { font-family: 'Arial', sans-serif; height: auto !important; }
#appMCS .ey-title-bar { background: var(--eyHead, #8b641e); color: var(--eyHeadTxt, #FFF); padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; border: 2px solid #000; border-bottom: none; }
#appMCS .ey-title-bar h1 { margin: 0; font-size: 14px !important; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#appMCS .ey-title-bar .ey-meta { background: var(--eyMetaBg, rgba(0,0,0,0.35)); color: var(--eyMetaTxt, inherit); padding: 3px 10px; border-radius: 4px; font-size: 11px !important; font-weight: 800; border: 1px solid rgba(255,255,255,0.25); white-space: nowrap; }
#appMCS .ey-sub-bar { background: var(--eySub, #b98c32); color: var(--eySubTxt, #FFF); font-weight: 800; font-style: italic; font-size: 13px !important; text-align: center; padding: 5px; border: 2px solid #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#appMCS table.ey-table { width: 100%; height: auto !important; border-collapse: collapse; border: 2px solid #000; margin-top: 5px; }
#appMCS table.ey-table th { background: var(--eyHead, #8b641e); color: var(--eyHeadTxt, #FFF); font-size: 11px !important; font-weight: 800; padding: 5px 3px !important; line-height: 1.1 !important; border: 1px solid #000 !important; }
#appMCS table.ey-table td { font-size: calc(var(--eyFSize, 10px) * var(--fontScale, 1)) !important; padding: 0 3px !important; line-height: 1 !important; border: 1px solid #000 !important; color: #000; height: var(--eyRowH, 4.3mm) !important; box-sizing: border-box !important; vertical-align: middle !important; }
#appMCS tr.ey-row.odd td { background: #FFFFFF; }
#appMCS tr.ey-row.even td { background: #FAFAFA; }
#appMCS tr.ey-row td.neg-avail { color: #B40000 !important; font-weight: bold !important; }
#appMCS tr.ey-row td.muted-cell { color: #444; }
/* MCS sheet type-toggle checkbox */
#appMCS .mcs-type-toggle input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; }
/* Focus highlight missing on already-themed inputs */
#appMCS .excl-bar input:focus { outline: none; border-color: var(--accent); }
#appMCS .ho-grid-row input:focus { border-color: var(--amber); }
#appMCS .btn-primary, .modal-card .btn-primary, .btn-primary, .td-btn-primary, .login-btn {
  background: linear-gradient(145deg, var(--gold), var(--accent)) !important;
  color: #ffffff !important; border: none !important;
  box-shadow: 0 8px 20px rgba(99,102,241,.28);
}
#appMCS .btn-primary:hover, .modal-card .btn-primary:hover, .btn-primary:hover,
.td-btn-primary:hover, .login-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.login-card, .modal-card, #appMCS .workflow-panel {
  background: linear-gradient(var(--panel),var(--panel)) padding-box,
              linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 46%) border-box !important;
  border: 1px solid transparent !important;
}
body.theme-light .login-card, body.theme-light .modal-card, body.theme-light #appMCS .workflow-panel {
  background: linear-gradient(var(--panel),var(--panel)) padding-box,
              linear-gradient(150deg,rgba(0,0,0,.09),rgba(0,0,0,.01) 46%) border-box !important;
}
.pf-card:hover, .gate-ocr-card:hover, .td-table-section:hover, #appMCS .dropzone:hover {
  border-color: rgba(129,140,248,.45) !important;
  box-shadow: 0 0 0 1px rgba(129,140,248,.20), 0 16px 44px rgba(0,0,0,.55);
}
@media (max-width: 900px) {
#appMCS, #appTD, #appOV, #appAdmin { margin-left: 0 !important; padding: 122px 14px 60px !important; }
#appMCS .workflow-panel, #appTD .td-panel { padding: 18px 16px !important; }
}
@media print {
#appMCS, #appTD, #appOV, #appAdmin { padding: 0 !important; margin: 0 !important; }
}
.btn-secondary .bic, .td-btn-secondary .bic, .cs-more-toggle .bic,
#appMCS .switch-btn .bic { color: var(--gold); filter: drop-shadow(0 0 3px rgba(129,140,248,.5)); }
/* FIX: Ensure table stretch is restored, but block the headers entirely by mathematically calculating their exact height footprint */
#appMCS .cols { display: grid; grid-template-columns: 1fr 3px 1fr; flex: 1 1 100%; margin-top: 1mm; width: 100%; height: 100%; }
#appMCS .cols > div { display: flex; flex-direction: column; height: 100%; }
#appMCS .gap { background: #000; width: 2px; margin: 0 auto; opacity: 0.4; }
#appMCS table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--sheetFontFamily, 'Arial Narrow', Arial, sans-serif); font-size: var(--sheetFontSize, 12px); }
#appMCS .cols > div > table { flex: 1 1 auto; height: 100%; min-height: 0; }
#appMCS .sheet.mcs-measure { height: auto !important; min-height: 0 !important; max-height: none !important; }
#appMCS .sheet.mcs-measure .cols { height: auto !important; flex: none !important; }
#appMCS .sheet.mcs-measure .cols > div { height: auto !important; }
#appMCS .sheet.mcs-measure .cols > div > table { flex: none !important; height: auto !important; }
#appMCS .sheet.mcs-measure tr.d { height: auto !important; }
/* FIX: Lock the header heights to exactly 1px so the browser is FORCED to dump all available table stretch space strictly into the tr.d flight rows */
#appMCS .ghead, #appMCS tr.gsub { height: 1px !important; }
#appMCS .ghead td { color: #fff; font-weight: 800; font-size: var(--fGroup, 12px); text-align: center; border: 1px solid #000; border-bottom: none; letter-spacing: 1px; height: 1px !important; padding: 2px 0; }
#appMCS .ghead-inner { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 6px; height: 100%; box-sizing: border-box; }
#appMCS .ghead-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#appMCS .ghead-tile { max-width: 72%; font-size: 0.72em; padding: 1px 4px; line-height: 1.2; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 3px; font-weight: 800; letter-spacing: 0.3px; }
#appMCS tr.gsub td { color: inherit; font-weight: 800; font-size: var(--fHead, 9.5px); border: 1px solid #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; height: 1px !important; }
@media (max-width:900px){ #appMCS{ margin-left:0 !important; } }

/* ===== PRINT: restore reference layout — only fix pane offset + sheet font ===== */
@media print {
  #appMCS, #appTD, #appOV, #appAdmin, #appTCC, #appCBP { margin-left: 0 !important; margin-right: 0 !important; }
  body.mode-mcs #appMCS .sheet { --sheetFontSize: 12px !important; --fHead: 11px !important; --fGroup: 12px !important; }
}


/* ============================================================================
   TEAM FALCON — DESIGN V2 "AURORA" (Professional UI refresh)
   - Screen-only layer: everything here is wrapped in @media screen so PRINT
     sheets and exported outputs keep the exact original layout & sizing.
   - Larger, readable typography (nothing important below 12px).
   - New tiles, buttons, sidebar, cards, inputs, tables, modals, toasts.
   ============================================================================ */

@media screen {

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --bg: #0B1120; --panel: #111A2E; --panel-2: #0D1526; --panel-3: #1A2540;
  --border: rgba(148,163,184,0.14); --border-strong: rgba(148,163,184,0.28);
  --border-dashed: rgba(148,163,184,0.24);
  --text: #EEF2F9; --text-2: #C9D4E6; --muted: #93A1B8; --faint: #66748C;
  --accent: #3B82F6; --accent-text: #7DB4FF; --accent-soft: rgba(59,130,246,0.15);
  --blue: #2F7CF6; --blue-hover: #5A97FF; --blue-soft: rgba(59,130,246,0.16);
  --gold: #93C5FD; --amber: #F5B04C; --amber-soft: rgba(245,176,76,0.12);
  --red-text: #FF8A7A; --red-soft: rgba(255,138,122,0.14);
  --red-border: rgba(255,138,122,0.34);
  --chip-red-bg: rgba(255,138,122,0.14); --chip-red-border: rgba(255,138,122,0.34);
  --tab-active: #7DB4FF;
  --shadow-paper: 0 8px 28px rgba(2,6,17,0.55);
  --shadow-modal: 0 32px 80px rgba(2,6,17,0.65);
  --input-focus: rgba(59,130,246,0.32);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
}
body.theme-light {
  --bg: #EEF1F6; --panel: #FFFFFF; --panel-2: #F6F8FB; --panel-3: #E9EDF4;
  --border: rgba(15,23,42,0.10); --border-strong: rgba(15,23,42,0.20);
  --border-dashed: rgba(15,23,42,0.18);
  --text: #101A2C; --text-2: #33415C; --muted: #5B6B84; --faint: #8B99AE;
  --accent: #2563EB; --accent-text: #1D4ED8; --accent-soft: rgba(37,99,235,0.10);
  --blue: #2563EB; --blue-hover: #1D4ED8; --blue-soft: rgba(37,99,235,0.10);
  --gold: #2563EB; --amber: #D97706; --amber-soft: rgba(217,119,6,0.10);
  --red-text: #C2410C; --red-soft: rgba(194,65,12,0.10);
  --red-border: rgba(194,65,12,0.30);
  --chip-red-bg: rgba(194,65,12,0.10); --chip-red-border: rgba(194,65,12,0.30);
  --tab-active: #2563EB;
  --shadow-paper: 0 8px 26px rgba(15,23,42,0.08);
  --shadow-modal: 0 32px 80px rgba(15,23,42,0.18);
  --input-focus: rgba(37,99,235,0.16);
}

/* ---------- 2. BASE TYPE SCALE (nothing tiny) ---------- */
html, body { font-size: 16px; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
p, li, td, th, label, input, select, textarea, button, a { line-height: 1.45; }

/* Scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ---------- 3. SIDEBAR — clean, spacious nav ---------- */
#sidebar { width: 292px; padding: 22px 16px; background: var(--panel-2); border-right: 1px solid var(--border); }
.sb-brand { padding: 6px 12px 22px; margin-bottom: 14px; }
.sb-brand-mark { width: 44px; height: 44px; border-radius: 13px; font-size: 15px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), #7C3AED); color: #fff;
  box-shadow: 0 6px 16px rgba(59,130,246,0.35); }
.sb-brand-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.sb-brand-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.sb-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--faint); padding: 16px 12px 8px; }
.sb-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 5px;
  border-radius: var(--r-md); border: 1px solid transparent; background: transparent;
  color: var(--text-2); font-size: 15px; font-weight: 600; position: relative; }
.sb-item:hover { background: var(--panel-3); color: var(--text); border-color: var(--border); transform: none; }
.sb-item.active { background: var(--accent-soft); color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 700; }
.sb-item.active::before { content: ''; position: absolute; left: -16px; top: 20%; bottom: 20%;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
#sidebar .sb-item .ico { width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: var(--panel-3); display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); }
#sidebar .sb-item .ico svg { width: 19px; height: 19px; }
.sb-item.active .ico { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-text); }
.sb-item:hover .ico { color: var(--text); }
.sb-txt { flex: 1; }
.sb-lock { font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; padding: 3px 8px;
  border-radius: 99px; background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }

/* Mobile bar */
#mobileBar { background: var(--panel-2); border-bottom: 1px solid var(--border); }
.mb-brand { font-size: 16px; font-weight: 800; }
.mb-mark { width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #7C3AED); }
.mb-avatar { width: 38px; height: 38px; font-size: 15px; font-weight: 800;
  background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--border-strong); }

/* ---------- 4. BUTTONS — one consistent system ---------- */
.btn-primary, .td-btn-primary, .login-btn, .btn-generate {
  background: linear-gradient(180deg, #3D8BFF, #2563EB); color: #FFF;
  border: none; padding: 14px 26px; border-radius: 12px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 4px 14px rgba(37,99,235,0.38), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  min-height: 46px;
}
.btn-primary:hover, .td-btn-primary:hover, .login-btn:hover, .btn-generate:hover {
  filter: brightness(1.07); transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:active, .td-btn-primary:active, .login-btn:active, .btn-generate:active {
  transform: translateY(0); filter: brightness(0.97); }
.btn-generate { padding: 15px 30px; font-size: 15.5px;
  background: linear-gradient(135deg, #4F46E5, #2563EB 55%, #0EA5E9);
  box-shadow: 0 6px 20px rgba(79,70,229,0.42), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn-generate .bic { width: 19px; height: 19px; }
.btn-secondary, .td-btn-secondary {
  background: var(--panel); border: 1.5px solid var(--border-strong); color: var(--text);
  padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 14.5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .15s ease; min-height: 44px;
}
.btn-secondary:hover, .td-btn-secondary:hover {
  border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.15); }
.btn-ico, .btn-more {
  width: 42px; height: 42px; border-radius: 12px; background: var(--panel);
  border: 1.5px solid var(--border-strong); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: all .15s ease;
}
.btn-ico:hover, .btn-more:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); transform: translateY(-1px); }
.btn-more { font-size: 20px; font-weight: 700; }
.cy-tool-btn { border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--panel);
  color: var(--text-2); font-weight: 600; font-size: 14px; padding: 10px 16px; min-height: 42px;
  display: inline-flex; align-items: center; gap: 8px; transition: all .15s ease; }
.cy-tool-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.login-btn { width: 100%; font-size: 16px; padding: 15px; margin-top: 10px; }
button:disabled, .btn-primary:disabled, .btn-secondary:disabled, .td-btn-primary:disabled, .td-btn-secondary:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- 5. TILES & CARDS ---------- */
/* Remove the corner "bracket" decorations for a clean professional look */
.cyber-card::before, .cyber-card::after { display: none !important; }
.cyber-card { border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-paper);
  border: 1px solid var(--border); }
.cyber-card-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.ov-stat { border-radius: var(--r-lg); padding: 22px 24px; border: 1px solid var(--border);
  box-shadow: var(--shadow-paper); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ov-click { cursor: pointer; }
.ov-click:hover { transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(37,99,235,0.22); }
.ov-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ov-val { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; }
.ov-sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.ov-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft);
  color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; }
.ov-detail { font-size: 14px; }
.ov-card { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-paper); }
.cs-eml-tile { border-radius: var(--r-md); border: 1px solid var(--border-strong); padding: 16px 18px; }
.cs-eml-tile:hover { border-color: var(--accent); }
.gate-preview { border-radius: var(--r-md); }
.ocm-list-box { border-radius: var(--r-md); border: 1px solid var(--border); }
.admin-user-item { border-radius: var(--r-md); border: 1px solid var(--border); padding: 16px 18px; }
.admin-user-item:hover { border-color: var(--border-strong); }

/* Panels */
.td-panel, .workflow-panel, .card, .card-chrome { border-radius: var(--r-lg); padding: 34px;
  border: 1px solid var(--border); box-shadow: var(--shadow-paper); }
.panel-intro, .td-panel-intro { font-size: 14.5px; color: var(--muted); }

/* Dropzones */
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r-lg); padding: 56px 24px;
  background: var(--panel); transition: all .2s ease; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); transform: none; }
.hero-drop { border: 2px dashed var(--border-strong); border-radius: var(--r-md); padding: 20px 22px;
  background: var(--panel-2); font-size: 15px; font-weight: 600; color: var(--text-2);
  transition: all .2s ease; }
.hero-drop:hover, .hero-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.hd-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center; }
.hd-browse { font-size: 15px; }

/* File chips */
.file-chip, .file-chip-row > * { border-radius: 99px; }
.file-chip-row { gap: 10px; }

/* ---------- 6. FORMS & INPUTS (bigger, clearer) ---------- */
.workflow-panel input:not([type=checkbox]):not([type=radio]),
.workflow-panel select, .workflow-panel textarea,
.td-panel input:not([type=checkbox]):not([type=radio]),
.td-panel select, .td-panel textarea,
.modal-card input:not([type=checkbox]):not([type=radio]),
.modal-card select, .modal-card textarea,
.login-card input, .cyber-card input:not([type=checkbox]):not([type=radio]),
.cyber-card select, .cyber-card textarea,
.cpop input:not([type=checkbox]):not([type=radio]), .cpop select,
.field input, .field select, .td-form-group input, .td-form-group select,
.cyber-input, .ocm-add-row input, .ocm-add-row select, .ocm-list-box input {
  font-size: 15px; font-weight: 500; color: var(--text);
  background: var(--panel-2); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 12px 14px; min-height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height: 90px; }
input::placeholder, textarea::placeholder { color: var(--faint); font-weight: 400; }
input:focus, select:focus, textarea:focus, .cyber-input:focus {
  outline: none !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--input-focus) !important; background: var(--panel) !important; }
select { cursor: pointer; }
.login-card input { width: 100%; }
.login-form label, .lbl, .field label, .td-form-group label {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 6px; }
.pw-toggle { width: 42px; height: 42px; color: var(--muted); }
.pw-toggle:hover { color: var(--accent-text); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
input[type=range] { accent-color: var(--accent); height: 28px; }

/* Sliders / small controls floor */
.opts-count, .help-text, .gd-status, .gate-hint { font-size: 13px !important; }

/* ---------- 7. TABLES (app screens only — print untouched) ---------- */
.td-table-wrap table { border-collapse: separate; border-spacing: 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border); font-size: 14.5px; }
#appTD table td, .td-table-wrap td { font-size: 14.5px !important; padding: 12px 14px !important; }
#appTD table th, .td-table-wrap th { font-size: 12.5px !important; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 13px 14px !important; background: var(--panel-3) !important; color: var(--text-2) !important; }
#appTD table tbody tr:nth-child(even) td, .td-table-wrap tbody tr:nth-child(even) td { background: var(--panel-2); }
#appTD table tbody tr:hover td, .td-table-wrap tbody tr:hover td { background: var(--accent-soft); }
.cs-table th.cs-narrow { font-size: 12px !important; }
.ft-table { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.ft-table th, .ft-table td { padding: 12px 14px !important; font-size: 14.5px; }
.ft-table th { background: var(--panel-3); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.td-table-header { margin-bottom: 10px; }
.td-counter { font-size: 13px; font-weight: 700; color: var(--muted); }
.td-toolbar { gap: 10px; }

/* ---------- 8. TABS, CHIPS, BADGES ---------- */
.cs-src-tab, [class*="tab"] { font-size: 14px; }
.cs-src-tab { padding: 10px 20px; border-radius: 12px 12px 0 0; font-weight: 600; }
.cs-src-tab.active { color: var(--tab-active); font-weight: 700; }
.badge-n { font: 800 11px 'Inter', sans-serif; padding: 3px 9px; margin-left: 8px;
  background: var(--amber); color: #1a1000; box-shadow: 0 2px 8px rgba(245,176,76,0.4); }
.gate-chips input { font-size: 14px !important; min-height: 40px !important; border-radius: 9px !important; }
.aocc-status { border-radius: var(--r-md); font-size: 14px; }
.file-badge { border-radius: 99px; font-size: 13px; font-weight: 600; }

/* ---------- 9. MODALS, LOGIN, TOASTS ---------- */
.modal-overlay { background: rgba(4,8,18,0.66); backdrop-filter: blur(4px); }
.modal-card { border-radius: 20px; border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-modal); padding: 34px; }
.modal-card h3, .modal-card h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
#loginOverlay { background:
  radial-gradient(1000px 600px at 20% -10%, rgba(59,130,246,0.16), transparent 60%),
  radial-gradient(800px 500px at 90% 110%, rgba(124,58,237,0.14), transparent 60%), var(--bg); }
.login-card { border-radius: 22px; padding: 48px 44px; max-width: 430px; border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-modal); }
.login-logo { width: 68px; height: 68px; border-radius: 19px; font-size: 17px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), #7C3AED); color: #fff;
  box-shadow: 0 10px 26px rgba(59,130,246,0.40); }
.login-card h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 18px 0 2px; }
.login-card > p { font-size: 15px; color: var(--muted); margin-bottom: 26px; }
#loginError { border-radius: var(--r-sm); }
.toast { border-radius: 14px; padding: 16px 26px; font-size: 15px; font-weight: 600;
  border: 1px solid var(--amber); box-shadow: var(--shadow-modal); }

/* ---------- 10. MISC FLOORS (keep nothing microscopic) ---------- */
.muted, .help, small { font-size: 13px; }
.ov-empty { font-size: 15px; }
.ft-report-title { font-size: 17px; font-weight: 800; }
.cs-summary { border-radius: var(--r-lg); font-size: 15px; }
.td-form-row { gap: 14px; }
.field-grid { gap: 16px; }
.opts-head { font-size: 14px; font-weight: 700; }
.opts-body { font-size: 14px; }
.ocm-admin-badge { font-size: 11.5px; font-weight: 800; border-radius: 99px; padding: 4px 10px; }
.sb-item + .sb-label { margin: 14px 4px 0; padding-top: 18px; }

/* Print toolbar buttons keep working, just prettier */
.print-btn, [class*="print"] button { border-radius: 12px; }

} /* end @media screen — print & export styles above remain fully intact */


/* ============================================================================
   TEAM FALCON — DESIGN V3 "NOVA" (Total visual replacement)
   Replaces V2 "Aurora". Screen-only: wrapped in @media screen, so ALL print
   sheets, A4 layouts and exported outputs remain byte-for-byte identical.
   New identity: charcoal-violet dark theme / clean white-violet light theme,
   Sora display font + Manrope UI font, pill buttons, gradient tiles, glass.
   ============================================================================ */

@media screen {

/* ---------- 1. NOVA TOKENS (all-new palette) ---------- */
:root {
  --bg: #0C0A14; --panel: #151022; --panel-2: #100C1C; --panel-3: #1E1832;
  --border: rgba(167,139,250,0.14); --border-strong: rgba(167,139,250,0.30);
  --border-dashed: rgba(167,139,250,0.26);
  --text: #F3F0FF; --text-2: #CFC8E8; --muted: #9A91B8; --faint: #6E6589;
  --accent: #8B5CF6; --accent-text: #B79CFF; --accent-soft: rgba(139,92,246,0.16);
  --blue: #8B5CF6; --blue-hover: #A78BFA; --blue-soft: rgba(139,92,246,0.16);
  --gold: #22D3EE; --amber: #FBBF24; --amber-soft: rgba(251,191,36,0.12);
  --red-text: #FB7185; --red-soft: rgba(251,113,133,0.14);
  --red-border: rgba(251,113,133,0.36);
  --chip-red-bg: rgba(251,113,133,0.14); --chip-red-border: rgba(251,113,133,0.36);
  --tab-active: #B79CFF;
  --shadow-paper: 0 12px 32px rgba(5,2,15,0.55);
  --shadow-modal: 0 36px 90px rgba(5,2,15,0.70);
  --input-focus: rgba(139,92,246,0.32);
  --grad: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 55%, #4F46E5 100%);
  --grad-hot: linear-gradient(135deg, #A78BFA, #8B5CF6 50%, #6366F1);
}
body.theme-light {
  --bg: #F4F3FA; --panel: #FFFFFF; --panel-2: #FAF9FE; --panel-3: #ECE9F7;
  --border: rgba(76,29,149,0.10); --border-strong: rgba(76,29,149,0.22);
  --border-dashed: rgba(76,29,149,0.20);
  --text: #1B1430; --text-2: #3D3358; --muted: #6B6186; --faint: #978BAD;
  --accent: #7C3AED; --accent-text: #6D28D9; --accent-soft: rgba(124,58,237,0.10);
  --blue: #7C3AED; --blue-hover: #6D28D9; --blue-soft: rgba(124,58,237,0.10);
  --gold: #0891B2; --amber: #B45309; --amber-soft: rgba(180,83,9,0.10);
  --red-text: #BE123C; --red-soft: rgba(190,18,60,0.08);
  --red-border: rgba(190,18,60,0.30);
  --chip-red-bg: rgba(190,18,60,0.08); --chip-red-border: rgba(190,18,60,0.30);
  --tab-active: #7C3AED;
  --shadow-paper: 0 12px 30px rgba(76,29,149,0.10);
  --shadow-modal: 0 36px 90px rgba(76,29,149,0.20);
  --input-focus: rgba(124,58,237,0.16);
  --grad: linear-gradient(135deg, #7C3AED 0%, #6D28D9 55%, #4F46E5 100%);
  --grad-hot: linear-gradient(135deg, #8B5CF6, #7C3AED 50%, #4F46E5);
}

/* ---------- 2. NOVA TYPOGRAPHY (new fonts entirely) ---------- */
body, input, select, textarea, button, td, th, label, p, li, a, span, div {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3, h4, .sb-brand-name, .cyber-card-title, .ft-report-title,
.ov-val, .login-card h2, .mb-brand, .td-panel-intro, .panel-intro {
  font-family: 'Sora', 'Manrope', sans-serif; }
html, body { font-size: 16px; }
h2 { letter-spacing: -0.02em; } h3 { letter-spacing: -0.01em; }

/* Scrollbars — violet */
::-webkit-scrollbar-thumb { background: #3A2D5C; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
body.theme-light ::-webkit-scrollbar-thumb { background: #D8D2EC; }

/* ---------- 3. SIDEBAR — dark glass rail, solid active pill ---------- */
#sidebar { width: 296px; padding: 24px 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--bg)); }
.sb-brand { border-bottom: none; padding: 8px 12px 26px; }
.sb-brand-mark { width: 46px; height: 46px; border-radius: 15px; font-family: 'Sora', sans-serif;
  font-size: 15px; background: var(--grad); box-shadow: 0 8px 22px rgba(139,92,246,0.45); }
.sb-brand-name { font-size: 18px; font-weight: 800; }
.sb-brand-sub { font-size: 12.5px; color: var(--muted); }
.sb-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint);
  padding: 18px 14px 8px; display: flex; align-items: center; gap: 8px; }
.sb-label::before { content: ''; width: 6px; height: 6px; border-radius: 99px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.sb-item { padding: 12px 14px; margin-bottom: 6px; border-radius: 14px;
  font-size: 15px; font-weight: 600; color: var(--muted); border: 1px solid transparent; }
.sb-item:hover { background: var(--panel-3); color: var(--text); border-color: var(--border);
  transform: translateX(3px); }
.sb-item.active { background: var(--grad); color: #fff; border-color: transparent;
  font-weight: 700; box-shadow: 0 8px 20px rgba(139,92,246,0.40); }
.sb-item.active::before { display: none; }
.sb-item.active .ico { background: rgba(255,255,255,0.18); color: #fff; }
.sb-item.active:hover { transform: none; }
#sidebar .sb-item .ico { width: 36px; height: 36px; border-radius: 11px; }
.sb-lock { background: rgba(251,191,36,0.16); color: var(--amber); }
.sb-item.active .sb-lock { background: rgba(255,255,255,0.18); color: #fff; }

/* ---------- 4. PILL BUTTONS (shape change = instant new identity) ---------- */
.btn-primary, .td-btn-primary, .login-btn, .btn-generate {
  background: var(--grad); border: none; border-radius: 999px;
  padding: 14px 30px; font-size: 15px; font-weight: 800; min-height: 48px;
  box-shadow: 0 8px 22px rgba(139,92,246,0.42), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover, .td-btn-primary:hover, .login-btn:hover, .btn-generate:hover {
  filter: brightness(1.1); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(139,92,246,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-generate { padding: 16px 34px; font-size: 16px;
  background: var(--grad-hot); box-shadow: 0 10px 28px rgba(139,92,246,0.50), inset 0 1px 0 rgba(255,255,255,0.28); }
.btn-secondary, .td-btn-secondary { border-radius: 999px; background: var(--panel);
  border: 1.5px solid var(--border-strong); font-size: 14.5px; font-weight: 700;
  min-height: 46px; padding: 12px 24px; }
.btn-secondary:hover, .td-btn-secondary:hover { background: var(--accent-soft);
  border-color: var(--accent); color: var(--accent-text); box-shadow: 0 6px 16px rgba(139,92,246,0.20); }
.btn-ico, .btn-more { border-radius: 999px; width: 44px; height: 44px;
  background: var(--panel); border: 1.5px solid var(--border-strong); }
.btn-ico:hover, .btn-more:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.cy-tool-btn { border-radius: 999px; font-weight: 700; }
.login-btn { width: 100%; font-size: 16px; padding: 16px; }

/* ---------- 5. GRADIENT TILES (no borders, glow + elevation) ---------- */
.ov-stat { border: none; border-radius: 20px; padding: 24px 26px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
    var(--panel);
  box-shadow: var(--shadow-paper); position: relative; overflow: hidden; }
.ov-stat::after { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 3px;
  border-radius: 0 0 4px 4px; background: var(--grad); opacity: 0.85; }
.ov-click:hover { transform: translateY(-4px) scale(1.01); border: none;
  box-shadow: 0 18px 44px rgba(139,92,246,0.30); }
.ov-val { font-size: 32px; font-weight: 800; background: var(--grad-hot);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ov-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--grad);
  color: #fff; box-shadow: 0 6px 16px rgba(139,92,246,0.38); }
.ov-label { font-size: 12.5px; letter-spacing: 0.08em; }

.cyber-card, .ov-card, .card { border: none; border-radius: 22px;
  box-shadow: var(--shadow-paper); background: var(--panel); }
.cyber-card { background:
    radial-gradient(130% 150% at 100% 0%, var(--accent-soft) 0%, transparent 50%), var(--panel); }
.td-panel, .workflow-panel { border: none; border-radius: 24px; padding: 38px;
  box-shadow: var(--shadow-paper); background:
    radial-gradient(120% 130% at 100% 0%, var(--accent-soft) 0%, transparent 45%), var(--panel); }
.cs-eml-tile { border-radius: 16px; border: none; background: var(--panel-3);
  box-shadow: 0 4px 14px rgba(5,2,15,0.35); }
.cs-eml-tile:hover { background: var(--accent-soft); }
.admin-user-item, .ocm-list-box { border-radius: 16px; border: none; background: var(--panel-2);
  box-shadow: 0 4px 14px rgba(5,2,15,0.30); }
.gate-preview { border-radius: 16px; }

/* Dropzones — dashed violet, glowing hover */
.dropzone { border: 2px dashed var(--border-strong); border-radius: 22px; background: var(--panel-2); }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 5px var(--input-focus), 0 12px 30px rgba(139,92,246,0.25); }
.hero-drop { border: 2px dashed var(--border-strong); border-radius: 16px; background: var(--panel-2); }
.hero-drop:hover, .hero-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.hd-ico { background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(139,92,246,0.38); }

/* ---------- 6. FORMS — violet focus glow ---------- */
.workflow-panel input:not([type=checkbox]):not([type=radio]),
.workflow-panel select, .workflow-panel textarea,
.td-panel input:not([type=checkbox]):not([type=radio]),
.td-panel select, .td-panel textarea,
.modal-card input:not([type=checkbox]):not([type=radio]),
.modal-card select, .modal-card textarea,
.login-card input, .cyber-card input:not([type=checkbox]):not([type=radio]),
.cyber-card select, .cyber-card textarea,
.cpop input:not([type=checkbox]):not([type=radio]), .cpop select,
.field input, .field select, .td-form-group input, .td-form-group select,
.cyber-input, .ocm-add-row input, .ocm-add-row select, .ocm-list-box input {
  background: var(--panel-2); border: 1.5px solid var(--border-strong);
  border-radius: 14px; padding: 13px 16px; min-height: 48px; font-size: 15px; font-weight: 600; }
input:focus, select:focus, textarea:focus, .cyber-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 5px var(--input-focus), 0 4px 14px rgba(139,92,246,0.18) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=range] { accent-color: var(--accent); }
.login-form label, .lbl, .field label, .td-form-group label {
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; }

/* ---------- 7. TABLES — violet headers, rounded, hover glow ---------- */
#appTD table th, .td-table-wrap th, .ft-table th {
  background: var(--panel-3) !important; color: var(--accent-text) !important;
  font-size: 12.5px !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 14px 16px !important; }
#appTD table td, .td-table-wrap td, .ft-table td {
  font-size: 14.5px !important; padding: 13px 16px !important; }
#appTD table tbody tr:hover td, .td-table-wrap tbody tr:hover td { background: var(--accent-soft); }
.td-table-wrap table, .ft-table { border: none; box-shadow: var(--shadow-paper); }

/* ---------- 8. CHIPS / BADGES / TABS ---------- */
.badge-n { background: var(--amber); border-radius: 99px; font-size: 11px; padding: 3px 9px; }
.cs-src-tab { font-size: 14px; font-weight: 700; border-radius: 12px 12px 0 0; }
.cs-src-tab.active { color: var(--accent-text); }
.gate-chips input { font-size: 14px !important; }
.file-badge { border-radius: 99px; }
.ocm-admin-badge { background: var(--accent-soft); color: var(--accent-text); border-radius: 99px; }

/* ---------- 9. GLASS LOGIN + MODALS ---------- */
#loginOverlay { background:
  radial-gradient(900px 600px at 15% 10%, rgba(139,92,246,0.30), transparent 55%),
  radial-gradient(700px 500px at 85% 90%, rgba(34,211,238,0.14), transparent 55%),
  radial-gradient(600px 400px at 90% 10%, rgba(236,72,153,0.12), transparent 55%), var(--bg); }
.login-card { border-radius: 26px; padding: 52px 46px; max-width: 440px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong); }
.login-logo { width: 72px; height: 72px; border-radius: 22px; font-family: 'Sora', sans-serif;
  font-size: 18px; background: var(--grad); box-shadow: 0 14px 34px rgba(139,92,246,0.50); }
.login-card h2 { font-size: 28px; }
.modal-overlay { background: rgba(8,4,20,0.70); backdrop-filter: blur(6px); }
.modal-card { border-radius: 24px; padding: 36px; border: 1px solid var(--border-strong);
  background: var(--panel); box-shadow: var(--shadow-modal); }
.toast { border-radius: 16px; background: var(--panel); border-color: var(--amber);
  font-size: 15px; font-weight: 700; box-shadow: var(--shadow-modal); }

/* ---------- 10. MOBILE BAR ---------- */
#mobileBar { background: color-mix(in srgb, var(--panel) 85%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.mb-mark { background: var(--grad); border-radius: 9px; }
.mb-avatar { background: var(--grad); color: #fff; border: none; }

} /* end @media screen — print/export outputs above remain fully intact */


/* ============================================================================
   TEAM FALCON — DESIGN V4 "PROFESSIONAL" (Structural redesign)
   - Light theme only (dark removed).
   - Left vertical sidebar REMOVED → clean TOP navigation bar.
   - Flat, modern SaaS look: white cards, gray borders, blue accent, no
     gradients, no glows, no decorations.
   - Screen-only: @media screen wrapper keeps every print sheet & export
     byte-for-byte identical.
   ============================================================================ */

@media screen {

/* ---------- 1. LIGHT-ONLY TOKENS (dark theme removed) ---------- */
:root, body.theme-light {
  --bg: #F4F6F9; --panel: #FFFFFF; --panel-2: #F8FAFC; --panel-3: #EFF2F7;
  --border: #E4E8EF; --border-strong: #CBD5E1; --border-dashed: #D3DAE4;
  --text: #0F172A; --text-2: #334155; --muted: #64748B; --faint: #94A3B8;
  --accent: #2563EB; --accent-text: #1D4ED8; --accent-soft: #EFF4FF;
  --blue: #2563EB; --blue-hover: #1D4ED8; --blue-soft: #EFF4FF;
  --gold: #2563EB; --amber: #B45309; --amber-soft: #FEF3E2;
  --red-text: #DC2626; --red-soft: #FEF1F1;
  --red-border: #F3C1C1;
  --chip-red-bg: #FEF1F1; --chip-red-border: #F3C1C1;
  --tab-active: #2563EB;
  --shadow-paper: 0 1px 3px rgba(15,23,42,0.07);
  --shadow-modal: 0 24px 60px rgba(15,23,42,0.18);
  --input-focus: rgba(37,99,235,0.14);
}
body { background: var(--bg) !important; color: var(--text); }

/* ---------- 2. TOP NAVIGATION BAR (replaces left sidebar) ---------- */
#sidebar {
  position: fixed; top: 0; left: 0; right: 0; bottom: auto;
  width: 100% !important; height: 62px; z-index: 9000;
  flex-direction: row; align-items: center; flex-wrap: nowrap;
  padding: 0 28px; gap: 10px;
  background: #FFFFFF; border-right: none; border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
  display: none;
}
body > #sidebar { display: flex; }
.sb-brand { padding: 0 24px 0 0; margin: 0; border-bottom: none; flex: none; }
.sb-brand-mark { width: 36px; height: 36px; border-radius: 9px; font-family: 'Sora', sans-serif;
  font-size: 13px; font-weight: 800; background: var(--accent); color: #fff;
  box-shadow: none; }
.sb-brand-name { font-size: 16.5px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.sb-brand-sub { display: none; }
.sb-nav { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 2px;
  overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-label { display: none; }
.sb-item { flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 15px; margin: 0; border-radius: 8px;
  border: none; background: transparent;
  color: #475569; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.sb-item:hover { background: #F1F5F9; color: var(--text); transform: none; }
.sb-item.active { background: var(--accent-soft); color: var(--accent-text);
  font-weight: 700; box-shadow: none; }
.sb-item.active::before { display: none; }
#sidebar .sb-item .ico { width: 30px; height: 30px; border-radius: 8px;
  background: transparent; color: #64748B; }
.sb-item.active .ico { background: transparent; color: var(--accent-text); }
.sb-item:hover .ico { color: var(--text); }
.sb-item svg { width: 17px; height: 17px; }
.sb-lock { font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 99px; background: #FEF3E2; color: var(--amber);
  border: 1px solid #F3DFC0; }
.sb-item.active .sb-lock { background: #DBEAFE; color: #1D4ED8; border-color: #BFDBFE; }
.sb-item + .sb-label { display: none; }

/* Sidebar footer → right side of top bar */
.sb-foot { margin-left: auto; flex: none; display: flex; flex-direction: row;
  align-items: center; gap: 14px; padding: 0; border-top: none; }
.sb-theme { display: none; }  /* dark mode removed */
.sb-user { display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 5px 10px 5px 5px; border-radius: 99px; border: 1px solid transparent; transition: all .15s; }
.sb-user:hover { background: #F1F5F9; border-color: var(--border); }
.sb-avatar { width: 34px; height: 34px; border-radius: 99px; background: var(--accent);
  color: #fff; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sb-user-info { line-height: 1.2; }
.sb-user-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.sb-user-desig { font-size: 11.5px; color: var(--muted); }
.sb-user-timer { display: none; }

/* Mobile bar gone — the top bar carries mobile too */
#mobileBar, #mobileModules { display: none !important; }

/* ---------- 3. CONTENT OFFSETS (was margin-left:280px for sidebar) ---------- */
#appMCS, #appTD, #appOV, #appAdmin, #appCBP, #appTCC, #appNoAccess {
  margin-left: 0 !important; padding-top: 86px !important; }
#appMCS .app-container { max-width: 1080px; }
@media (max-width: 900px) {
  #sidebar { display: flex !important; height: 56px; padding: 0 14px; }
  .sb-brand-name { display: none; }
  .sb-user-info { display: none; }
  #appMCS, #appTD, #appOV, #appAdmin, #appCBP, #appTCC, #appNoAccess { padding-top: 74px !important; }
}

/* ---------- 4. FLAT PROFESSIONAL BUTTONS ---------- */
.btn-primary, .td-btn-primary, .login-btn, .btn-generate {
  background: var(--accent); border: none; border-radius: 8px;
  padding: 13px 26px; font-size: 14.5px; font-weight: 700; min-height: 46px;
  box-shadow: none; color: #fff;
}
.btn-primary:hover, .td-btn-primary:hover, .login-btn:hover, .btn-generate:hover {
  background: var(--blue-hover); filter: none; transform: none;
  box-shadow: none; }
.btn-generate { padding: 14px 30px; font-size: 15px; }
.btn-secondary, .td-btn-secondary { background: #FFFFFF; border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text-2); font-size: 14px; font-weight: 600;
  min-height: 44px; padding: 11px 20px; box-shadow: none; }
.btn-secondary:hover, .td-btn-secondary:hover { background: #F8FAFC; border-color: #94A3B8;
  color: var(--text); transform: none; box-shadow: none; }
.btn-ico, .btn-more { width: 40px; height: 40px; border-radius: 8px; background: #fff;
  border: 1px solid var(--border-strong); color: var(--text-2); box-shadow: none; }
.btn-ico:hover, .btn-more:hover { background: #F8FAFC; border-color: #94A3B8; color: var(--text); transform: none; }
.cy-tool-btn { border-radius: 8px; background: #fff; border: 1px solid var(--border-strong);
  color: var(--text-2); font-weight: 600; box-shadow: none; }
.cy-tool-btn:hover { background: #F8FAFC; border-color: #94A3B8; color: var(--text); }
.login-btn { width: 100%; font-size: 15.5px; }

/* ---------- 5. COMPLETELY NEW TILES ---------- */
/* Stat band: one connected white strip with dividers (modern SaaS metrics) */
.ov-stats { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-paper); overflow: hidden; margin-bottom: 20px; }
.ov-stat { flex: 1; min-width: 0; border-radius: 0; border: none; box-shadow: none;
  padding: 22px 26px; background: transparent; position: static; }
.ov-stat::after { display: none; }
.ov-stat + .ov-stat { border-left: 1px solid var(--border); }
.ov-click:hover { transform: none; box-shadow: none; background: #F8FAFC; }
.ov-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-label { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); }
.ov-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--panel-3);
  color: var(--muted); box-shadow: none; font-size: 16px; }
.ov-click:hover .ov-ico { background: var(--accent-soft); color: var(--accent-text); }
.ov-val { font-size: 28px; font-weight: 800; color: var(--text); margin-top: 10px;
  background: none; -webkit-text-fill-color: currentColor; letter-spacing: -0.02em; }
.ov-val-text { font-size: 22px; }
.ov-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ov-detail { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }

/* Cards: flat white, thin border, small shadow */
.ov-card, .cyber-card, .card { background: #fff; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-paper); }
.ov-card { padding: 24px 26px; }
.ov-card h3 { font-size: 16px; font-weight: 800; margin: 0 0 16px; color: var(--text); }
.cyber-card::before, .cyber-card::after { display: none !important; }
.cyber-card { padding: 24px; }
.td-panel, .workflow-panel { background: #fff; border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-paper); padding: 34px; }
.panel-intro, .td-panel-intro { border-bottom: 1px solid var(--border); }
.panel-intro h2, .td-panel-intro h2 { font-size: 20px; font-weight: 800; }

/* Dropzones: clean dashed */
.dropzone { border: 2px dashed var(--border-strong); border-radius: 14px; background: #fff; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft);
  box-shadow: none; transform: none; }
.hero-drop { border: 1.5px dashed var(--border-strong); border-radius: 12px;
  background: var(--panel-2); font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.hero-drop:hover, .hero-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.hd-ico { background: var(--panel-3); color: var(--muted); box-shadow: none; border-radius: 9px; }
.hero-drop:hover .hd-ico { background: var(--accent-soft); color: var(--accent-text); }
.cs-eml-tile { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
.cs-eml-tile:hover { border-color: var(--border-strong); background: var(--panel-2); }
.admin-user-item, .ocm-list-box { background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: none; }

/* ---------- 6. FORM CONTROLS ---------- */
.workflow-panel input:not([type=checkbox]):not([type=radio]),
.workflow-panel select, .workflow-panel textarea,
.td-panel input:not([type=checkbox]):not([type=radio]),
.td-panel select, .td-panel textarea,
.modal-card input:not([type=checkbox]):not([type=radio]),
.modal-card select, .modal-card textarea,
.login-card input, .cyber-card input:not([type=checkbox]):not([type=radio]),
.cyber-card select, .cyber-card textarea,
.cpop input:not([type=checkbox]):not([type=radio]), .cpop select,
.field input, .field select, .td-form-group input, .td-form-group select,
.cyber-input, .ocm-add-row input, .ocm-add-row select, .ocm-list-box input {
  background: #fff; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 12px 14px; min-height: 46px; font-size: 15px; font-weight: 500; color: var(--text); }
input:focus, select:focus, textarea:focus, .cyber-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--input-focus) !important; background: #fff !important; }
input::placeholder, textarea::placeholder { color: var(--faint); }
.login-form label, .lbl, .field label, .td-form-group label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=range] { accent-color: var(--accent); }

/* ---------- 7. TABLES (app screens) ---------- */
#appTD table th, .td-table-wrap th, .ft-table th {
  background: var(--panel-3) !important; color: var(--text-2) !important;
  font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 12px 14px !important; border-bottom: 1px solid var(--border-strong); }
#appTD table td, .td-table-wrap td, .ft-table td {
  font-size: 14.5px !important; padding: 12px 14px !important;
  border-bottom: 1px solid var(--border); color: var(--text-2); }
#appTD table tbody tr:nth-child(even) td, .td-table-wrap tbody tr:nth-child(even) td { background: var(--panel-2); }
#appTD table tbody tr:hover td, .td-table-wrap tbody tr:hover td { background: var(--accent-soft); }
.td-table-wrap table, .ft-table { border: 1px solid var(--border); box-shadow: var(--shadow-paper); }

/* ---------- 8. MISC PROFESSIONAL ---------- */
.badge-n { background: var(--amber); color: #451A03; border-radius: 99px; font-size: 11px; }
.cs-src-tab { font-size: 14px; font-weight: 600; color: var(--muted); }
.cs-src-tab.active { color: var(--accent-text); font-weight: 700; }
.file-badge { border-radius: 8px; background: var(--accent-soft) !important; color: var(--accent-text) !important; border: 1px solid #BFDBFE !important; }
.ocm-admin-badge { background: var(--accent-soft); color: var(--accent-text); border-radius: 99px; }
.gate-chips input { font-size: 14px !important; }
.opts-count, .help-text, .gd-status, .gate-hint { font-size: 13px !important; color: var(--muted); }

/* ---------- 9. LIGHT MINIMAL LOGIN & MODALS ---------- */
#loginOverlay { background: var(--bg); }
.login-card { background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 44px 40px; max-width: 420px; box-shadow: var(--shadow-modal);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.login-logo { width: 52px; height: 52px; border-radius: 13px; font-family: 'Sora', sans-serif;
  font-size: 15px; background: var(--accent); color: #fff; box-shadow: none; margin: 0 auto; }
.login-card h2 { font-size: 24px; margin: 16px 0 2px; }
.login-card > p { font-size: 14.5px; }
#loginError { background: #FEF1F1; color: var(--red-text); border: 1px solid var(--red-border); }
.modal-overlay { background: rgba(15,23,42,0.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal-card { background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 32px; box-shadow: var(--shadow-modal); }
.toast { background: #fff; border: 1px solid var(--amber); color: var(--amber);
  border-radius: 10px; box-shadow: var(--shadow-modal); font-size: 14.5px; font-weight: 600; }

/* Scrollbars — light gray */
::-webkit-scrollbar-thumb { background: #CBD5E1; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

} /* end @media screen — print/export outputs remain fully intact */


/* ============================================================================
   TEAM FALCON — DESIGN V5 "UNIFIED PREMIUM"
   - Unifies ALL modules under one design system: MCS, TD, Overview, Admin,
     CBP (its own scoped vars overridden) and TCC (light vars injected into
     the embedded srcdoc tools).
   - Premium light SaaS look: accent top bar, blue-pill active nav, tinted
     icon tiles, gradient module headers, split-screen login.
   - Screen-only: @media screen keeps print sheets & exports identical.
   ============================================================================ */

@media screen {

/* ---------- 1. TOKENS ---------- */
:root, body.theme-light {
  --bg: #F5F6FA; --panel: #FFFFFF; --panel-2: #F9FAFD; --panel-3: #EEF1F7;
  --border: #E5E9F0; --border-strong: #C9D2E0; --border-dashed: #D5DCE7;
  --text: #0E1B33; --text-2: #3B4763; --muted: #67739B; --faint: #9AA3C0;
  --accent: #2E6BFF; --accent-text: #1E56E8; --accent-soft: #EBF1FF;
  --blue: #2E6BFF; --blue-hover: #1E56E8; --blue-soft: #EBF1FF;
  --gold: #2E6BFF; --amber: #C77414; --amber-soft: #FDF3E3;
  --red-text: #DE3B3B; --red-soft: #FDECEC;
  --red-border: #F5C8C8;
  --chip-red-bg: #FDECEC; --chip-red-border: #F5C8C8;
  --tab-active: #1E56E8;
  --shadow-paper: 0 1px 2px rgba(14,27,51,0.05), 0 4px 16px rgba(14,27,51,0.05);
  --shadow-lift: 0 12px 32px rgba(14,27,51,0.12);
  --shadow-modal: 0 32px 80px rgba(14,27,51,0.22);
  --input-focus: rgba(46,107,255,0.16);
  --grad: linear-gradient(120deg, #2E6BFF 0%, #5A3DF5 60%, #8B5CF6 100%);
  --grad-soft: linear-gradient(120deg, #EBF1FF 0%, #F3EEFF 100%);
}
body { background: var(--bg) !important; }

/* Signature accent line across the very top of the app */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad); z-index: 10001; pointer-events: none; }

/* ---------- 2. TOP NAV (kept) + premium active pill ---------- */
#sidebar { height: 64px; padding: 0 30px; background: #FFFFFF;
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 12px rgba(14,27,51,0.05); }
.sb-brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--grad);
  font-family: 'Sora', sans-serif; font-size: 13.5px; box-shadow: 0 4px 12px rgba(46,107,255,0.30); }
.sb-item { font-size: 14.5px; font-weight: 600; color: #55617F; border-radius: 10px; padding: 9px 16px; }
.sb-item:hover { background: #F1F4FA; color: var(--text); }
.sb-item.active { background: var(--accent); color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(46,107,255,0.35); }
.sb-item.active .ico, .sb-item.active .sb-lock { color: #fff; background: rgba(255,255,255,0.18); }
.sb-item.active .sb-lock { border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.16); color:#fff; }
#sidebar .sb-item .ico { width: 28px; height: 28px; border-radius: 8px; }
.sb-avatar { background: var(--grad); box-shadow: 0 3px 10px rgba(46,107,255,0.30); }

/* ---------- 3. MODULE HEADERS — gradient banner per panel ---------- */
.panel-intro, .td-panel-intro { background: var(--grad-soft); border: 1px solid #E2E9FB;
  border-radius: 14px; padding: 20px 24px !important; margin-bottom: 26px !important; }
.panel-intro h2, .td-panel-intro h2 { font-size: 21px !important; font-weight: 800; color: var(--text); }
.panel-intro p, .td-panel-intro p { color: var(--muted); font-size: 14.5px; margin: 4px 0 0; }

/* ---------- 4. PREMIUM TILES ---------- */
.ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  border: none; background: transparent; box-shadow: none; overflow: visible; }
.ov-stat { border: 1px solid var(--border); border-radius: 18px; background: #fff;
  box-shadow: var(--shadow-paper); padding: 24px 26px; position: relative; overflow: hidden; }
.ov-stat::after { display: none; }
.ov-stat + .ov-stat { border-left: 1px solid var(--border); }
.ov-click { transition: transform .18s ease, box-shadow .18s ease; }
.ov-click:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); background: #fff; }
.ov-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.ov-ico { width: 44px; height: 44px; border-radius: 13px; font-size: 20px;
  background: var(--accent-soft); color: var(--accent-text); }
.ov-stat:nth-child(2) .ov-ico { background: #FDF3E3; color: var(--amber); }
.ov-stat:nth-child(3) .ov-ico { background: #E6F8EF; color: #1D9E57; }
.ov-val { font-size: 32px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-top: 12px; }
.ov-sub { font-size: 13.5px; color: var(--muted); }

/* Cards & panels */
.ov-card, .cyber-card, .card { background: #fff; border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-paper); transition: box-shadow .18s ease; }
.ov-card:hover, .cyber-card:hover { box-shadow: var(--shadow-lift); }
.ov-card h3 { font-size: 16.5px; font-weight: 800; }
.td-panel, .workflow-panel { background: #fff; border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--shadow-paper); padding: 36px; }
.cyber-card::before, .cyber-card::after { display: none !important; }

/* Dropzones */
.dropzone { border: 2px dashed #C4CEE4; border-radius: 18px; background: var(--panel-2); }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 5px var(--input-focus); }
.hero-drop { border: 1.5px dashed #C4CEE4; border-radius: 14px; background: var(--panel-2); }
.hero-drop:hover, .hero-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.hd-ico { background: var(--accent-soft); color: var(--accent-text); border-radius: 11px; }

/* ---------- 5. BUTTONS ---------- */
.btn-primary, .td-btn-primary, .login-btn, .btn-generate {
  background: var(--accent); border: none; border-radius: 11px;
  padding: 13px 26px; font-size: 14.5px; font-weight: 700; min-height: 46px;
  box-shadow: 0 4px 14px rgba(46,107,255,0.32);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary:hover, .td-btn-primary:hover, .login-btn:hover, .btn-generate:hover {
  background: var(--blue-hover); transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(46,107,255,0.42); }
.btn-generate { padding: 15px 32px; font-size: 15.5px; background: var(--grad);
  box-shadow: 0 6px 18px rgba(94,77,245,0.40); }
.btn-secondary, .td-btn-secondary { background: #fff; border: 1.5px solid var(--border-strong);
  border-radius: 11px; color: var(--text-2); font-size: 14px; font-weight: 600; min-height: 44px; }
.btn-secondary:hover, .td-btn-secondary:hover { background: var(--panel-2); border-color: #A9B6CC; color: var(--text); transform: translateY(-1px); }
.btn-ico, .btn-more { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1.5px solid var(--border-strong); }
.btn-ico:hover, .btn-more:hover { background: var(--panel-2); border-color: #A9B6CC; color: var(--text); transform: translateY(-1px); }

/* ---------- 6. FORMS ---------- */
.workflow-panel input:not([type=checkbox]):not([type=radio]),
.workflow-panel select, .workflow-panel textarea,
.td-panel input:not([type=checkbox]):not([type=radio]),
.td-panel select, .td-panel textarea,
.modal-card input:not([type=checkbox]):not([type=radio]),
.modal-card select, .modal-card textarea,
.login-card input, .cyber-card input:not([type=checkbox]):not([type=radio]),
.cyber-card select, .cyber-card textarea,
.cpop input:not([type=checkbox]):not([type=radio]), .cpop select,
.field input, .field select, .td-form-group input, .td-form-group select,
.cyber-input, .ocm-add-row input, .ocm-add-row select, .ocm-list-box input {
  background: var(--panel-2); border: 1.5px solid var(--border); border-radius: 11px;
  padding: 12px 15px; min-height: 46px; font-size: 15px; font-weight: 500; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus, .cyber-input:focus {
  border-color: var(--accent) !important; background: #fff !important;
  box-shadow: 0 0 0 4px var(--input-focus) !important; }
.login-form label, .lbl, .field label, .td-form-group label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }

/* ---------- 7. TABLES ---------- */
#appTD table th, .td-table-wrap th, .ft-table th {
  background: #fff !important; color: var(--muted) !important;
  font-size: 11.5px !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 13px 15px !important; border-bottom: 2px solid var(--border-strong) !important; }
#appTD table td, .td-table-wrap td, .ft-table td {
  font-size: 14.5px !important; padding: 13px 15px !important;
  border-bottom: 1px solid var(--border) !important; color: var(--text-2); }
#appTD table tbody tr:hover td, .td-table-wrap tbody tr:hover td { background: var(--accent-soft) !important; }
.td-table-wrap table, .ft-table { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-paper); overflow: hidden; }

/* ---------- 8. CBP MODULE — pulled into the design system ---------- */
#appCBP, body:not(.theme-light) #appCBP {
  --cbp-bg: var(--bg); --cbp-card: #ffffff; --cbp-ink: #0E1B33; --cbp-muted: #67739B;
  --cbp-line: #E5E9F0; --cbp-blue: #2E6BFF; --cbp-blue2: #EBF1FF; --cbp-field: #F9FAFD; --cbp-ok: #1D9E57; }
#appCBP { font-family: 'Manrope', sans-serif; }
#appCBP header { background: #fff; color: var(--text); border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(14,27,51,0.05); }
#appCBP header h1 { color: var(--text); font-family: 'Sora', sans-serif; font-size: 21px; font-weight: 800; }
#appCBP header p { color: var(--muted); }
#appCBP .card { border-radius: 16px; box-shadow: var(--shadow-paper); border: 1px solid var(--border); }
#appCBP .card h2 { font-family: 'Sora', sans-serif; }
#appCBP input, #appCBP select { border: 1.5px solid var(--border); }
#appCBP .seg button.on { background: var(--accent); }
#appCBP .btn { border-radius: 10px; font-weight: 700; }
#appCBP .bar { background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(14,27,51,0.06); }
#appCBP .area-chip.on { background: var(--accent); }
#appCBP iframe, #appTCC iframe { border-radius: 18px; border: 1px solid var(--border) !important;
  background: #fff; box-shadow: var(--shadow-paper); }

/* ---------- 9. SPLIT-SCREEN LOGIN ---------- */
#loginOverlay { background: var(--bg); display: flex; align-items: center; justify-content: flex-end; }
#loginOverlay::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 46%;
  background: var(--grad); }
#loginOverlay::after { content: 'TEAM FALCON'; position: absolute; left: 8%; top: 38%;
  font-family: 'Sora', sans-serif; font-size: 42px; font-weight: 800; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.95); }
.login-card { position: relative; z-index: 2; margin-right: 8%; background: #fff;
  border: 1px solid var(--border); border-radius: 22px; padding: 46px 44px; max-width: 430px;
  box-shadow: var(--shadow-modal); }
.login-logo { background: var(--grad); box-shadow: 0 8px 20px rgba(46,107,255,0.35); }
.login-btn { background: var(--grad); box-shadow: 0 6px 18px rgba(94,77,245,0.38); }
@media (max-width: 900px) {
  #loginOverlay { justify-content: center; }
  #loginOverlay::before { width: 100%; opacity: 0.9; }
  #loginOverlay::after { display: none; }
  .login-card { margin-right: 0; }
}

/* Modals & toasts */
.modal-overlay { background: rgba(14,27,51,0.48); backdrop-filter: blur(3px); }
.modal-card { background: #fff; border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-modal); }
.toast { background: #fff; border: 1px solid var(--amber); color: var(--amber); border-radius: 12px;
  box-shadow: var(--shadow-modal); font-size: 14.5px; font-weight: 700; }
.badge-n { background: var(--amber); color: #451A03; }
.file-badge { background: var(--accent-soft) !important; color: var(--accent-text) !important; border: 1px solid #C7D8FF !important; }
.cs-src-tab { font-weight: 600; color: var(--muted); }
.cs-src-tab.active { color: var(--accent-text); font-weight: 700; }

} /* end @media screen — print/export outputs remain fully intact */


/* ============================================================================
   TEAM FALCON — DESIGN V6 "NOIR" (Premium dark monochrome, per reference)
   - Near-black background, bento cards (24px radius), giant Sora display type,
     inverted white/black buttons, minimal top bar, monochrome chrome with
     amber/red reserved for status only.
   - Screen-only: @media screen keeps print sheets & exports identical.
   ============================================================================ */

@media screen {

/* ---------- 1. NOIR TOKENS ---------- */
:root, body.theme-light {
  --bg: #08080B; --panel: #0F0F13; --panel-2: #0B0B0F; --panel-3: #17171D;
  --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.15);
  --border-dashed: rgba(255,255,255,0.11);
  --text: #F4F4F6; --text-2: #C9C9D1; --muted: #8B8B96; --faint: #5C5C66;
  --accent: #FFFFFF; --accent-text: #EDEDF0; --accent-soft: rgba(255,255,255,0.07);
  --blue: #FFFFFF; --blue-hover: #D9D9DE; --blue-soft: rgba(255,255,255,0.07);
  --gold: #D4D4D8; --amber: #F5B04C; --amber-soft: rgba(245,176,76,0.10);
  --red-text: #F87171; --red-soft: rgba(248,113,113,0.10);
  --red-border: rgba(248,113,113,0.30);
  --chip-red-bg: rgba(248,113,113,0.10); --chip-red-border: rgba(248,113,113,0.30);
  --tab-active: #FFFFFF;
  --shadow-paper: 0 10px 34px rgba(0,0,0,0.45);
  --shadow-lift: 0 18px 48px rgba(0,0,0,0.60);
  --shadow-modal: 0 40px 100px rgba(0,0,0,0.70);
  --input-focus: rgba(255,255,255,0.14);
}
body { background:
  radial-gradient(1100px 560px at 85% -10%, rgba(255,255,255,0.045), transparent 60%),
  radial-gradient(800px 500px at -10% 110%, rgba(255,255,255,0.03), transparent 55%),
  var(--bg) !important; }
body::before { display: none !important; }  /* remove colored accent bar — pure noir */

/* ---------- 2. TOP BAR — minimal, translucent ---------- */
#sidebar { height: 66px; padding: 0 32px;
  background: rgba(8,8,11,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); box-shadow: none; }
.sb-brand-name { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.sb-brand-mark { background: #fff; color: #0A0A0C; box-shadow: none; border-radius: 12px; }
.sb-item { font-size: 14.5px; font-weight: 600; color: #8B8B96; border-radius: 99px; padding: 9px 17px; }
.sb-item:hover { background: rgba(255,255,255,0.06); color: #F4F4F6; }
.sb-item.active { background: #fff; color: #0A0A0C; font-weight: 700; box-shadow: none; }
.sb-item.active .ico { color: #0A0A0C; background: transparent; }
.sb-item.active .sb-lock { background: rgba(10,10,12,0.08); color: #6B6B76; border-color: rgba(10,10,12,0.12); }
#sidebar .sb-item .ico { width: 26px; height: 26px; }
.sb-avatar { background: #fff; color: #0A0A0C; box-shadow: none; }
.sb-user:hover { background: rgba(255,255,255,0.06); border-color: var(--border); }

/* ---------- 3. GIANT DISPLAY TYPE ---------- */
.ov-head h1 { font-family: 'Sora', sans-serif; font-size: 46px; font-weight: 800;
  letter-spacing: -0.035em; color: #fff; margin: 6px 0 26px; }
.panel-intro, .td-panel-intro { background: transparent !important; border: none !important;
  padding: 6px 0 4px !important; margin-bottom: 30px !important; }
.panel-intro h2, .td-panel-intro h2 { font-family: 'Sora', sans-serif; font-size: 38px !important;
  font-weight: 800; letter-spacing: -0.035em; color: #fff; }
.panel-intro p, .td-panel-intro p { color: var(--muted); font-size: 15px; }

/* ---------- 4. BENTO TILES & CARDS ---------- */
.ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.ov-stat { background: var(--panel); border: 1px solid var(--border); border-radius: 24px;
  padding: 30px 30px 28px; box-shadow: none; }
.ov-stat + .ov-stat { border-left: 1px solid var(--border); }
.ov-click { transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, background .22s ease; }
.ov-click:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.16);
  background: #121218; box-shadow: var(--shadow-lift); }
.ov-ico { width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,0.06);
  color: #EDEDF0; font-size: 20px; }
.ov-stat:nth-child(2) .ov-ico, .ov-stat:nth-child(3) .ov-ico { background: rgba(255,255,255,0.06); color: #EDEDF0; }
.ov-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #71717A; }
.ov-val { font-size: 38px; font-weight: 800; color: #fff; letter-spacing: -0.035em; margin-top: 14px; }
.ov-val-text { font-size: 26px; letter-spacing: -0.02em; }
.ov-sub { font-size: 13.5px; color: #71717A; }
.ov-detail { border-top-color: var(--border); }

.ov-card, .cyber-card, .card { background: var(--panel); border: 1px solid var(--border);
  border-radius: 24px; box-shadow: none; }
.ov-card { padding: 28px 30px; }
.ov-card h3 { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.td-panel, .workflow-panel { background: var(--panel); border: 1px solid var(--border);
  border-radius: 26px; box-shadow: none; padding: 40px; }
.cs-eml-tile, .admin-user-item, .ocm-list-box { background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 18px; }
.cs-eml-tile:hover { background: #141419; border-color: var(--border-strong); }

/* Dropzones */
.dropzone { border: 1.5px dashed rgba(255,255,255,0.16); border-radius: 24px; background: var(--panel-2); }
.dropzone:hover, .dropzone.over { border-color: #fff; background: rgba(255,255,255,0.04); box-shadow: none; }
.hero-drop { border: 1.5px dashed rgba(255,255,255,0.16); border-radius: 18px; background: var(--panel-2);
  color: #C9C9D1; }
.hero-drop:hover, .hero-drop.over { border-color: #fff; background: rgba(255,255,255,0.05); color: #fff; }
.hd-ico { background: rgba(255,255,255,0.07); color: #EDEDF0; border-radius: 13px; }

/* ---------- 5. INVERTED BUTTONS (white on black, per reference) ---------- */
.btn-primary, .td-btn-primary, .login-btn, .btn-generate {
  background: #fff; color: #0A0A0C; border: none; border-radius: 14px;
  padding: 14px 28px; font-size: 14.5px; font-weight: 700; min-height: 48px;
  box-shadow: none; transition: transform .18s ease, background .18s ease; }
.btn-primary:hover, .td-btn-primary:hover, .login-btn:hover, .btn-generate:hover {
  background: #D9D9DE; transform: translateY(-1px); box-shadow: none; }
.btn-generate { padding: 16px 34px; font-size: 15.5px; }
.btn-secondary, .td-btn-secondary { background: transparent; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px; color: #EDEDF0; font-size: 14px; font-weight: 600; min-height: 46px; }
.btn-secondary:hover, .td-btn-secondary:hover { background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.30); color: #fff; transform: translateY(-1px); }
.btn-ico, .btn-more { background: transparent; border: 1px solid rgba(255,255,255,0.14); color: #C9C9D1; }
.btn-ico:hover, .btn-more:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); color: #fff; }
.cy-tool-btn { background: transparent; border: 1px solid rgba(255,255,255,0.14); color: #C9C9D1; }
.cy-tool-btn:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.28); color: #fff; }

/* ---------- 6. FORMS ---------- */
.workflow-panel input:not([type=checkbox]):not([type=radio]),
.workflow-panel select, .workflow-panel textarea,
.td-panel input:not([type=checkbox]):not([type=radio]),
.td-panel select, .td-panel textarea,
.modal-card input:not([type=checkbox]):not([type=radio]),
.modal-card select, .modal-card textarea,
.login-card input, .cyber-card input:not([type=checkbox]):not([type=radio]),
.cyber-card select, .cyber-card textarea,
.cpop input:not([type=checkbox]):not([type=radio]), .cpop select,
.field input, .field select, .td-form-group input, .td-form-group select,
.cyber-input, .ocm-add-row input, .ocm-add-row select, .ocm-list-box input {
  background: var(--panel-2); border: 1px solid rgba(255,255,255,0.11); border-radius: 14px;
  padding: 13px 16px; min-height: 48px; font-size: 15px; font-weight: 500; color: #F4F4F6; }
input:focus, select:focus, textarea:focus, .cyber-input:focus {
  border-color: rgba(255,255,255,0.42) !important; background: var(--panel) !important;
  box-shadow: 0 0 0 4px var(--input-focus) !important; }
input::placeholder, textarea::placeholder { color: #5C5C66; }
.login-form label, .lbl, .field label, .td-form-group label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #71717A; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: #fff; }

/* ---------- 7. TABLES — borderless noir ---------- */
.td-table-wrap table, .ft-table { border: 1px solid var(--border); border-radius: 18px;
  box-shadow: none; background: var(--panel); }
#appTD table th, .td-table-wrap th, .ft-table th {
  background: transparent !important; color: #71717A !important;
  font-size: 11px !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 15px 16px !important; border-bottom: 1px solid var(--border-strong) !important; }
#appTD table td, .td-table-wrap td, .ft-table td {
  font-size: 14.5px !important; padding: 14px 16px !important;
  border-bottom: 1px solid var(--border) !important; color: #C9C9D1; background: transparent !important; }
#appTD table tbody tr:hover td, .td-table-wrap tbody tr:hover td { background: rgba(255,255,255,0.04) !important; }
#appTD table tbody tr:nth-child(even) td, .td-table-wrap tbody tr:nth-child(even) td { background: transparent; }

/* ---------- 8. CBP MODULE — noir ---------- */
#appCBP, body:not(.theme-light) #appCBP {
  --cbp-bg: #08080B; --cbp-card: #0F0F13; --cbp-ink: #F4F4F6; --cbp-muted: #8B8B96;
  --cbp-line: rgba(255,255,255,0.11); --cbp-blue: #FFFFFF; --cbp-blue2: rgba(255,255,255,0.06);
  --cbp-field: #0B0B0F; --cbp-ok: #4ADE80; }
#appCBP header { background: rgba(8,8,11,0.85); color: #fff; border-bottom: 1px solid var(--border);
  box-shadow: none; backdrop-filter: blur(12px); }
#appCBP header h1 { color: #fff; }
#appCBP header p { color: #71717A; }
#appCBP .card { border-radius: 20px; box-shadow: none; border-color: var(--border); background: var(--panel); }
#appCBP .card h2 { background: transparent; border-bottom: 1px solid var(--border); }
#appCBP .seg button.on { background: #fff; color: #0A0A0C; }
#appCBP .area-chip.on { background: #fff; color: #0A0A0C; }
#appCBP .fname { background: rgba(255,255,255,0.06); }
#appCBP .bar { background: rgba(10,10,14,0.92); border-top: 1px solid var(--border); box-shadow: none; backdrop-filter: blur(12px); }
#appCBP input:focus { outline-color: #fff; }
#appCBP iframe, #appTCC iframe { border-radius: 22px; border: 1px solid var(--border) !important;
  background: #0B0B0F; box-shadow: none; }

/* ---------- 9. SPLIT LOGIN — noir, giant brand type ---------- */
#loginOverlay { background: #08080B; justify-content: flex-end; }
#loginOverlay::before { background:
  radial-gradient(700px 500px at 30% 30%, rgba(255,255,255,0.05), transparent 60%), #050507; width: 48%; }
#loginOverlay::after { content: 'TEAM FALCON'; left: 6.5%; top: 34%;
  font-family: 'Sora', sans-serif; font-size: 58px; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; white-space: nowrap; }
.login-card { margin-right: 7%; background: var(--panel); border: 1px solid var(--border);
  border-radius: 28px; padding: 50px 46px; box-shadow: var(--shadow-modal); }
.login-logo { background: #fff; color: #0A0A0C; box-shadow: none; }
.login-card h2 { color: #fff; font-size: 26px; }
.login-card > p { color: #71717A; }
.login-btn { background: #fff; color: #0A0A0C; }
.login-btn:hover { background: #D9D9DE; }
#loginError { background: var(--red-soft); border-color: var(--red-border); }
@media (max-width: 900px) {
  #loginOverlay { justify-content: center; }
  #loginOverlay::before { width: 100%; }
  #loginOverlay::after { display: none; }
  .login-card { margin-right: 0; }
}

/* ---------- 10. MISC ---------- */
.modal-overlay { background: rgba(0,0,0,0.60); backdrop-filter: blur(4px); }
.modal-card { background: var(--panel); border: 1px solid var(--border-strong); border-radius: 24px;
  box-shadow: var(--shadow-modal); }
.toast { background: var(--panel); border-color: var(--amber); color: var(--amber); border-radius: 14px; }
.badge-n { background: var(--amber); color: #1a1000; }
.file-badge { background: rgba(255,255,255,0.07) !important; color: #EDEDF0 !important; border: 1px solid rgba(255,255,255,0.16) !important; }
.cs-src-tab { color: #71717A; font-weight: 600; }
.cs-src-tab.active { color: #fff; font-weight: 700; }
.ocm-admin-badge { background: rgba(255,255,255,0.07); color: #C9C9D1; }
.opts-count, .help-text, .gd-status, .gate-hint { color: #71717A !important; }
::-webkit-scrollbar-thumb { background: #26262C; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3A3A42; }

} /* end @media screen — print/export outputs remain fully intact */


/* ============================================================================
   TEAM FALCON — DESIGN V7 "NOIR REFINEMENT"
   - Nav: text-only items (no icons, no boxes/tiles), active = white text +
     underline indicator.
   - Fix: last nav items were unreachable, hidden behind the user profile —
     nav now shrinks and scrolls properly (min-width:0), profile stays put.
   - Contrast rule enforced: light surfaces get dark text, dark surfaces get
     light text across tiles, buttons, chips and nav.
   - Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* ---------- 1. NAV ITEMS — minimal text links, no tile boxes ---------- */
#sidebar .sb-item .ico { display: none !important; }
#sidebar .sb-item .sb-lock { display: none !important; }
.sb-item { background: transparent; border: none; box-shadow: none; border-radius: 0;
  padding: 12px 15px; position: relative; font-size: 14.5px; font-weight: 600; color: #8B8B96; }
.sb-item:hover { background: transparent; }
.sb-item:hover .sb-txt { color: #F4F4F6; }
.sb-item.active { background: transparent; box-shadow: none; }
.sb-item.active .sb-txt { color: #fff; font-weight: 700; }
.sb-item::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 6px;
  height: 2px; border-radius: 2px; background: #fff; opacity: 0; transform: scaleX(0.4);
  transition: opacity .18s ease, transform .18s ease; }
.sb-item.active::after { opacity: 1; transform: scaleX(1); }
.sb-item.active:hover { background: transparent; }

/* ---------- 2. FIX: nav items hidden behind user profile ---------- */
.sb-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-brand { flex: none; position: relative; z-index: 2; }
.sb-foot { flex: none; margin-left: auto; position: relative; z-index: 2; }

/* ---------- 3. CONTRAST RULE — light surface → dark text, dark → light ---------- */
/* Active/hover states that sit on WHITE surfaces must flip to dark */
.sb-item.active, .sb-item.active .sb-txt { color: #fff; }
.btn-primary, .td-btn-primary, .login-btn, .btn-generate,
.btn-generate .bic { color: #0A0A0C !important; }
.btn-primary svg, .td-btn-primary svg, .btn-generate svg { color: #0A0A0C; }
.btn-generate:hover, .btn-primary:hover, .td-btn-primary:hover, .login-btn:hover { color: #0A0A0C; }
/* Anything on a dark surface keeps light text */
.ov-stat, .ov-card, .cyber-card, .td-panel, .workflow-panel,
.dropzone, .hero-drop, .cs-eml-tile, .modal-card { color: #F4F4F6; }
/* Hover lift keeps text light on the darkened tile */
.ov-click:hover .ov-val, .ov-click:hover .ov-label, .ov-click:hover .ov-sub { color: #fff; }
.ov-click:hover .ov-label, .ov-click:hover .ov-sub { color: #A1A1AA; }
/* Status chips keep their own readable pairs */
.badge-n { color: #1a1000; }
.file-badge { color: #EDEDF0 !important; }
.toast { color: var(--amber); }

} /* end @media screen — print/export outputs remain fully intact */


/* ============================================================================
   TEAM FALCON — DESIGN V8 (Noir contrast fixes)
   - CBP bottom bar matches noir theme; inverted text fixed (was white-on-white).
   - Connection Summary active tab: white tile → dark text.
   - Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* CBP bottom action bar — noir */
#appCBP .main { background: #fff !important; color: #0A0A0C !important; border-radius: 12px; }
#appCBP .main:hover { background: #D9D9DE !important; }
#appCBP .alt { background: transparent !important; color: #EDEDF0 !important;
  border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 12px; }
#appCBP .alt:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.32) !important; }

/* Connection Summary source tabs — active tile inverts properly */
.cs-src-tab { background: transparent; border: 1px solid var(--border); color: #8B8B96;
  border-radius: 10px; font-size: 13px; font-weight: 600; padding: 9px 18px; }
.cs-src-tab:hover { color: #F4F4F6; border-color: rgba(255,255,255,0.28); }
.cs-src-tab.active { background: #fff !important; border-color: #fff !important; color: #0A0A0C !important; font-weight: 700; }

/* Safety net: any active/hover element sitting on a WHITE surface gets dark text */
[class*="active"], button:hover { }
.sb-item.active, .cs-src-tab.active, .btn-primary, .btn-generate, .td-btn-primary, .login-btn { -webkit-text-fill-color: currentColor; }

} /* end @media screen */


/* ============================================================================
   TEAM FALCON — DESIGN V9 "NOIR UNIFORM"
   1. Uniform module sizing (equal grids, equal tile dimensions).
   2. Unified typography & design tokens across every module (incl. Admin,
      CBP, and the embedded TCC tools).
   3. Branding = AZE logo only (Team Falcon text removed; login split panel
      and giant wordmark removed).
   4. Tiles are real interactive cards again (visible bg/border/padding).
   5. Clear hover + distinct selected/active states.
   6. Full mobile responsiveness (stacking, no overflow, touch-friendly).
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* ---------- 3. BRANDING: AZE LOGO ONLY ---------- */
#loginOverlay { justify-content: center; }
#loginOverlay::before, #loginOverlay::after { display: none !important; }
.login-card { margin-right: 0; }
.login-logo { width: 76px; height: 76px; border-radius: 22px; font-size: 20px;
  margin-bottom: 8px; }
.sb-brand { padding-right: 20px; }
.sb-brand-mark { width: 40px; height: 40px; }
.ov-head h1 { display: none; }  /* page wordmark removed; module titles lead */

/* ---------- 4 & 5. NAV TILES — visible cards with hover + active states ---------- */
.sb-nav { gap: 6px; mask-image: none; padding: 8px 4px; }
.sb-item { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 10px 18px; margin: 0; font-size: 14px; font-weight: 600;
  color: #A1A1AA; transition: background .16s ease, border-color .16s ease,
  color .16s ease, transform .16s ease, box-shadow .16s ease; }
.sb-item:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22);
  color: #fff; transform: translateY(-1px); }
.sb-item.active { background: #fff; border-color: #fff; color: #0A0A0C; font-weight: 700;
  transform: none; box-shadow: 0 4px 14px rgba(255,255,255,0.18); }
.sb-item.active:hover { background: #fff; color: #0A0A0C; border-color: #fff; }
.sb-item::after { display: none; }

/* Overview tiles: same card language as nav */
.ov-stat { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px; box-shadow: none; }
.ov-stat + .ov-stat { border-left: 1px solid rgba(255,255,255,0.09); }
.ov-click:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22);
  box-shadow: none; }

/* ---------- 1. UNIFORM MODULE SIZING ---------- */
.ov-stats { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 1fr; align-items: stretch; }
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; grid-auto-rows: 1fr; align-items: stretch; }
.ov-card, .cyber-card, .card, .td-panel, .workflow-panel { width: 100%; box-sizing: border-box; }
.cs-eml-tile, .admin-user-item { min-height: 72px; box-sizing: border-box; }
.field-grid { grid-auto-rows: 1fr; align-items: stretch; }

/* ---------- 2. UNIFIED TYPOGRAPHY ---------- */
#appAdmin, #appAdmin * { font-family: 'Manrope', 'Inter', sans-serif; }
h1, h2, h3, h4 { font-family: 'Sora', 'Manrope', sans-serif; letter-spacing: -0.02em; }
.panel-intro h2, .td-panel-intro h2 { font-size: 30px !important; font-weight: 800; color: #fff; }
.cyber-card-title, .ov-card h3, .ft-report-title { font-size: 16px !important; font-weight: 800; color: #fff; }
.td-panel-intro, .panel-intro p { font-size: 14.5px; }
.ov-val { font-size: 34px; font-weight: 800; }
.ov-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #71717A; }
.ov-sub, .ov-detail, .help-text { font-size: 13.5px; }
td, th, p, li, label, input, select, textarea, button { font-size: 15px; }
.td-table-wrap td, #appTD table td, .ft-table td { font-size: 14.5px !important; }
.td-table-wrap th, #appTD table th, .ft-table th { font-size: 11px !important; }
.lbl, .field label, .td-form-group label, .login-form label { font-size: 11.5px !important; }

/* ---------- 6. MOBILE RESPONSIVENESS ---------- */
body { overflow-x: hidden; }
.td-table-wrap, .ft-table { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media screen and (max-width: 900px) {
  #sidebar { height: 60px; padding: 0 14px; }
  .sb-brand { padding-right: 12px; }
  .sb-item { padding: 9px 14px; font-size: 13.5px; }
  .ov-stats { grid-template-columns: 1fr !important; }
  .ov-stat + .ov-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.09); }
  .ov-grid { grid-template-columns: 1fr !important; }
  .panel-intro h2, .td-panel-intro h2 { font-size: 25px !important; }
  .td-panel, .workflow-panel { padding: 24px 20px !important; border-radius: 20px; }
  .ov-stat { padding: 22px 24px; }
  .ov-val { font-size: 28px; }
  .field-grid { grid-template-columns: 1fr !important; }
  .form-row, .td-form-row { flex-direction: column !important; align-items: stretch !important; gap: 12px; }
  .form-row > *, .td-form-row > * { width: 100% !important; }
  #appMCS, #appTD, #appOV, #appAdmin, #appCBP, #appTCC, #appNoAccess {
    padding-left: 16px !important; padding-right: 16px !important; }
  .login-card { padding: 36px 26px; max-width: 92vw; }
}
@media screen and (max-width: 560px) {
  .toolbar-actions, .td-toolbar { flex-direction: column; align-items: stretch !important; }
  .toolbar-actions > *, .td-toolbar > * { width: 100%; }
  .btn-primary, .td-btn-primary, .btn-generate, .btn-secondary, .td-btn-secondary { width: 100%; min-height: 50px; }
  .btn-ico, .btn-more { width: 100%; }
  #appCBP .bar .inner { max-width: none; flex-direction: column; }
  .cyber-card, .ov-card { padding: 20px; }
}

} /* end @media screen — print/export outputs remain fully intact */


/* ============================================================================
   TEAM FALCON — DESIGN V10
   - CBP action bar (Save Excel / Screenshot / Print) moved from bottom to top,
     directly under the nav bar like every other module's toolbar.
   - Catch-all: any selectable tile that turns white flips its text to dark.
   - Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* CBP action bar → top toolbar */
#appCBP .bar { position: fixed; top: 66px; bottom: auto; left: 0; right: 0;
  background: rgba(8,8,11,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: none; border-bottom: 1px solid var(--border); }
#appCBP { padding-top: 150px !important; padding-bottom: 24px !important; }

/* Selected/white tiles must show dark text */
.cs-eml-tile.sel, .cs-eml-tile.selected, .cs-eml-tile.active, .cs-eml-tile.on,
.td-switch-btn.active, .switch-btn.active, .tile.active, .tile.selected, .tile.on,
[class*="tile"].active, [class*="tile"].selected, [class*="chip"].on {
  color: #0A0A0C !important; }
.cs-eml-tile.sel *, .cs-eml-tile.selected *, .cs-eml-tile.active *,
.td-switch-btn.active *, .switch-btn.active * { color: #0A0A0C !important; }

}
@media screen and (max-width: 900px) {
  #appCBP .bar { top: 60px; }
  #appCBP { padding-top: 140px !important; }
}


/* ============================================================================
   TEAM FALCON — DESIGN V11
   - Nav tiles: no more hard cut against the profile — restored edge fade and
     spacing so the scroll boundary reads intentionally.
   - CBP toolbar: compact professional buttons (no more huge tiles).
   - Uniform module width: Gates MCS, Landside OAL/EY, TD, Overview, Admin,
     CBP all share the same 1120px content column.
   - Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* --- Uniform content width across ALL modules --- */
#appMCS .app-container, .td-panel, .workflow-panel,
.ov-stats, .ov-grid, .ov-card,
#appAdmin > *, #appCBP header .inner, #appCBP main {
  max-width: 1120px; margin-left: auto; margin-right: auto; }

/* --- Nav: intentional scroll edge instead of a hard cut --- */
.sb-nav { mask-image: linear-gradient(90deg, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
  padding-right: 28px; }

/* --- CBP toolbar: compact buttons, right-aligned like other modules --- */
#appCBP { padding-top: 122px !important; }
#appCBP .bar .inner { display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: flex-end; align-items: center; max-width: none;
  padding: 10px 28px; box-sizing: border-box; }
#appCBP .bar .btn { flex: none; width: auto; min-height: 40px;
  padding: 9px 22px; font-size: 13.5px; font-weight: 700; border-radius: 10px; }

}
@media screen and (max-width: 900px) {
  #appCBP { padding-top: 112px !important; }
  #appCBP .bar .inner { justify-content: center; padding: 8px 14px; }
}


/* ============================================================================
   TEAM FALCON — DESIGN V12 (targeted corrections)
   1. Active nav tile: white text on white bg — .sb-txt was pinned white by an
      older rule; now forced dark on the white active tile.
   2. Nav/profile boundary: opaque separation + fade instead of tiles
      visually colliding with the avatar.
   3. CBP toolbar: buttons are .main/.alt (not .btn) — previous compact rules
      matched nothing; now the real buttons are compact.
   4. Uniform module width enforced with !important.
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* 1 — Active nav tile text must be dark on white */
.sb-item.active, .sb-item.active .sb-txt, .sb-item.active:hover, .sb-item.active:hover .sb-txt {
  color: #0A0A0C !important; }

/* 2 — Clean boundary between nav and profile (no more cut-tile look) */
.sb-foot { background: #0B0B0F; padding-left: 18px;
  box-shadow: -18px 0 22px 10px #0B0B0F; }
.sb-nav { mask-image: linear-gradient(90deg, #000 88%, transparent) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent) !important; }

/* 3 — CBP action buttons: compact (they use .main/.alt, not .btn) */
#appCBP .bar .inner { width: auto; max-width: none !important; justify-content: flex-end; }
#appCBP .bar .main, #appCBP .bar .alt {
  flex: 0 0 auto !important; width: auto !important; min-height: 38px !important;
  padding: 9px 22px !important; font-size: 13.5px !important; font-weight: 700 !important;
  border-radius: 10px !important; }

/* 4 — Uniform 1120px module width, enforced */
#appMCS .app-container, .td-panel, .workflow-panel,
.ov-stats, .ov-grid, .ov-card,
#appAdmin > *, #appCBP main, #appCBP header .inner {
  max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; }

}


/* ============================================================================
   TEAM FALCON — DESIGN V13
   - AZE logo removed (nav + login); nav re-padded.
   - Gates MCS / Landside OAL / Landside EY (operations modules) stretch
     full-width edge-to-edge like before; other modules keep the 1120 column.
   - Selected/active tile text forced black with maximum specificity.
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* Ops modules (Gates MCS, Landside OAL, Landside EY) stretch to the edges */
#appMCS .app-container, #appMCS .workflow-panel { max-width: none !important; }
#appMCS .app-container { width: 100%; }

/* Nav: compensate for removed logo */
.sb-nav { padding-left: 10px; }

/* Selected/active tile text — black, cannot be overridden */
.sb-item.active, .sb-item.active .sb-txt,
.sb-item.active:hover, .sb-item.active:hover .sb-txt,
.sb-item.active * { color: #0A0A0C !important; -webkit-text-fill-color: #0A0A0C !important; }

}


/* ============================================================================
   TEAM FALCON — DESIGN V14
   - ALL modules stretch edge-to-edge (no max-width column anywhere).
   - CBP header title no longer clipped by the fixed action bar.
   - Top nav = proper scrollable strip (snap + grab cursor + edge fades).
   - Profile block restyled as a nav tile (same card language as modules).
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* 1 — Full-width everywhere */
#appMCS .app-container, .td-panel, .workflow-panel,
.ov-stats, .ov-grid, .ov-card,
#appAdmin > *, #appCBP main, #appCBP header .inner {
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* 2 — CBP title clearance under the fixed toolbar */
#appCBP { padding-top: 168px !important; }

/* 3 — Scrollable nav strip */
.sb-nav { scroll-snap-type: x proximity; cursor: grab; padding: 8px 30px 8px 10px;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 88%, transparent) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 88%, transparent) !important; }
.sb-nav:active { cursor: grabbing; }
.sb-item { scroll-snap-align: start; }
.sb-item:last-child { margin-right: 24px; }

/* 4 — Profile as a tile */
.sb-user { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 7px 16px 7px 8px; gap: 10px; }
.sb-user:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
.sb-avatar { width: 30px; height: 30px; font-size: 12.5px; border-radius: 9px; }
.sb-user-name { font-size: 13.5px; font-weight: 700; color: #F4F4F6; }
.sb-user-desig { font-size: 11.5px; color: #8B8B96; }

}
@media screen and (max-width: 900px) {
  #appCBP { padding-top: 152px !important; }
  .sb-user-info { display: none; }
  .sb-user { padding: 7px 8px; }
}


/* ============================================================================
   TEAM FALCON — DESIGN V15
   - Profile tile is now 100% identical in metrics to the module nav tiles
     (same padding, radius, border, font size/weight, colors, hover behavior).
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

.sb-user { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 10px 18px; gap: 9px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.sb-user:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
.sb-avatar { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; font-weight: 800;
  background: #fff; color: #0A0A0C; flex: none; }
.sb-user-name { font-size: 14px; font-weight: 600; color: #A1A1AA; line-height: 1.2; }
.sb-user:hover .sb-user-name { color: #fff; }
.sb-user-desig { display: none; }
.sb-user:active { transform: translateY(-1px); }

}
@media screen and (max-width: 900px) {
  .sb-user { padding: 10px 14px; }
}


/* ============================================================================
   TEAM FALCON — DESIGN V16 (corrections after inspection)
   - Root cause 1 (profile "outline"): .sb-foot had an opaque background +
     box-shadow with 10px spread → a solid halo around the profile tile and a
     different backdrop tint vs the module tiles. Removed — the profile tile
     now sits on the same bar background as every module tile.
   - Root cause 2 (first tiles not visible): the nav mask faded the LEFT edge
     too, hiding Overview/User Matrix at scroll start. Fade is right-edge only.
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* Profile area: no opaque block, no halo — same backdrop as module tiles */
.sb-foot { background: transparent !important; box-shadow: none !important;
  padding-left: 0 !important; }

/* Right-edge-only fade so the first tiles are fully visible at scroll start */
.sb-nav { mask-image: linear-gradient(90deg, #000 92%, transparent) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent) !important; }

}


/* ============================================================================
   TEAM FALCON — DESIGN V17
   - Profile moved INTO the nav strip as the last tile, directly after
     "CBP Allocation", and styled EXACTLY like a module tile (same padding,
     radius, border, background, font size/weight/color, hover flip).
   - Text-only like the module tiles (avatar + role subtitle hidden).
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

.sb-nav .sb-user { display: flex; align-items: center; flex: none;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 10px 18px; margin: 0 24px 0 6px;
  font-size: 14px; font-weight: 600; color: #A1A1AA; cursor: pointer;
  scroll-snap-align: start; user-select: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.sb-nav .sb-user:hover { background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22); color: #fff; transform: translateY(-1px); }
.sb-nav .sb-avatar, .sb-nav .sb-user-desig, .sb-nav .sb-user-timer { display: none !important; }
.sb-nav .sb-user-info { display: contents; }
.sb-nav .sb-user-name { font-size: 14px; font-weight: 600; color: inherit; }

/* old footer area gone */
.sb-foot { display: none !important; }

}


/* ============================================================================
   TEAM FALCON — DESIGN V18 (mobile tile fix)
   - Removed the stale mobile rule that hid the profile tile's text (tile
     rendered as an empty rectangle).
   - Removed the nav fade-mask on small screens: webkit mobile can clip the
     tiles' text when a mask is combined with horizontal scroll.
   - Comfortable mobile touch targets for every tile.
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen and (max-width: 900px) {

.sb-nav { mask-image: none !important; -webkit-mask-image: none !important;
  padding-right: 12px; }
.sb-item { font-size: 14px; font-weight: 600; padding: 11px 16px; min-height: 42px; }
.sb-nav .sb-user { padding: 11px 16px !important; min-height: 42px; margin-right: 16px; }
.sb-nav .sb-user-info { display: contents !important; }
.sb-nav .sb-user-name { font-size: 14px; }
.sb-nav .sb-avatar { display: none !important; }

}


/* ============================================================================
   TEAM FALCON — DESIGN V19 (mobile empty-tile fix — root cause)
   The app's ORIGINAL mobile stylesheet (icon-only rail) hid the nav text via
   `#sidebar .sb-item .sb-txt { display:none }` and centered the items. That
   rule was never overridden, so on phones every module tile rendered as an
   empty rectangle (the profile tile survived because its label isn't .sb-txt).
   These overrides beat the original mobile rules by specificity + order.
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen and (max-width: 900px) {

#sidebar { width: 100% !important; padding: 0 12px !important; }
#sidebar .sb-item { justify-content: flex-start !important; padding: 11px 16px !important; }
#sidebar .sb-item .sb-txt { display: inline !important; font-size: 14px; }
#sidebar .sb-item .ico { display: none !important; }
#sidebar .sb-label { display: none !important; }

}


/* ============================================================================
   TEAM FALCON — DESIGN V20 (button text visibility — root cause)
   Original CSS set -webkit-text-fill-color on gradient buttons; that property
   overrides `color`, so white text persisted on the now-white buttons.
   Reset the fill to follow `color` on all button classes, and pin dark text
   on every white-background button.
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* Fill follows color everywhere in the UI chrome */
button, .btn-primary, .btn-secondary, .btn-generate, .td-btn-primary, .td-btn-secondary,
.btn-ico, .btn-more, .cy-tool-btn, .login-btn, .ho-add-btn,
#appCBP .bar .main, #appCBP .bar .alt,
.sb-item, .sb-nav .sb-user, .cs-src-tab, .file-badge {
  -webkit-text-fill-color: currentColor !important; }

/* White-background buttons: dark text, guaranteed */
.btn-primary, .td-btn-primary, .login-btn, .btn-generate, #appCBP .bar .main {
  color: #0A0A0C !important; }
.btn-primary *, .td-btn-primary *, .login-btn *, .btn-generate *, #appCBP .bar .main * {
  color: #0A0A0C !important; }
.btn-generate { background-image: none; }

/* Any other button the modules may style as primary on their own */
button[class*="primary"], button[class*="Primary"], button.main {
  -webkit-text-fill-color: currentColor !important; }

}


/* ============================================================================
   TEAM FALCON — DESIGN V21 (definitive button-text fix)
   Root causes found in the legacy stylesheet:
   a) `#appMCS .btn-primary, .modal-card .btn-primary, ... { color:#ffffff
      !important }` — higher specificity than all previous fixes.
   b) `.cyber-btn` (EXECUTE etc.) had a light-gray→white gradient background
      with white text — never restyled by any redesign layer.
   Both beaten below with matching/exceeding specificity + !important.
   Screen-only: print/export outputs untouched.
   ============================================================================ */

@media screen {

/* Mirror the legacy selector list exactly — same specificity, later wins */
#appMCS .btn-primary, .modal-card .btn-primary, .btn-primary, .td-btn-primary, .login-btn {
  background: #fff !important; color: #0A0A0C !important;
  -webkit-text-fill-color: #0A0A0C !important; }
#appMCS .btn-primary *, .modal-card .btn-primary *, .btn-primary *,
.td-btn-primary *, .login-btn * { color: #0A0A0C !important; }

/* Cyber buttons (EXECUTE etc.): flat white, dark text */
.cyber-btn { background: #fff !important; background-image: none !important;
  color: #0A0A0C !important; -webkit-text-fill-color: #0A0A0C !important;
  border-radius: 12px; }
.cyber-btn:hover { background: #D9D9DE !important; color: #0A0A0C !important; }
.cyber-btn * { color: #0A0A0C !important; -webkit-text-fill-color: #0A0A0C !important; }

/* Small mono cyber buttons stay ghost-style (readable on dark) */
.cyber-btn-small { background: transparent !important; color: #C9C9D1 !important;
  border: 1px solid rgba(255,255,255,0.16) !important; -webkit-text-fill-color: currentColor !important; }

}