/* DMC Wizard UI Theme - Option C (Logo-based / Cinematic / Elegant) */

:root{
  --bg: #0B1220;
  --surface: #111C2F;
  --surface2: #0E1728;

  --text: #EAF0FF;
  --muted: #A9B6D1;

  --border: #22314E;

  --primary: #1F5BFF;
  --primaryHover: #2E6BFF;
  --accent: #41D6FF;

  --danger: #FF3B5C;
  --success: #28D17C;

  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --radius: 18px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(65,214,255,.12), transparent 55%),
    radial-gradient(900px 500px at 80% 20%, rgba(31,91,255,.10), transparent 55%),
    var(--bg);
}

.brand__logo{
  position:fixed;
  top:18px;
  left:18px;
  height:34px;
  z-index:50;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

input, select, textarea{
  width:100%;
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:14px;
  padding:12px;
  outline:none;
}

input:focus, select:focus, textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(65,214,255,.2);
}

button{
  background:linear-gradient(180deg, var(--primary), #1748cc);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:11px 14px;
  color:white;
  cursor:pointer;
  font-weight:600;
  transition:.15s ease;
}

button:hover{
  background:linear-gradient(180deg, var(--primaryHover), #1A52E0);
  transform:translateY(-1px);
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

table{
  width:100%;
  border-collapse:collapse;
  background:rgba(0,0,0,.2);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}

th, td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

th{
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.03);
}

/* =========================
   DMC Wizard — Admin UI skin
   (append-only override)
   ========================= */

/* Page base */
.page{
  min-height:100vh;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(70,140,255,.18), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(0,220,255,.10), transparent 55%),
    linear-gradient(180deg, #07101d 0%, #050b14 100%);
  color: rgba(255,255,255,.92);
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px;
  background: rgba(10,16,28,.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.topbar__left, .topbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.topbar__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.topbar__logo{
  width: 110px;           /* <<< manji logo */
  height: auto;
  display:block;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
  opacity: .98;
}

/* Shell */
.shell{
  width: min(1120px, 92vw);
  margin: 22px auto 46px;
}

/* Card */
.card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Titles */
.title{
  margin: 0 0 6px;
  font-size: 26px;
  letter-spacing: .2px;
}
.subtitle{
  margin: 0 0 18px;
  color: rgba(255,255,255,.70);
}

/* Buttons (keep existing class names, just make them nicer) */
.btn{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.btn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
}

.btn--ghost:hover{
  background: rgba(255,255,255,.08);
}

/* Admin content area placeholder */
#adminContent.muted{
  color: rgba(255,255,255,.72);
}

/* Responsive */
@media (max-width: 520px){
  .topbar{ padding: 12px 12px; }
  .topbar__logo{ width: 92px; }
  .shell{ width: min(960px, 94vw); }
  .card{ padding: 18px 16px; border-radius: 16px; }
}


/* ===== Admin layout additions (pro) ===== */
.shell--wide{ max-width: 1200px; }
.grid2{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items:start; }
@media (max-width: 980px){ .grid2{ grid-template-columns: 1fr; } }

.topbar__meta{ display:flex; flex-direction:column; line-height:1.1; }
.topbar__title{ font-weight:700; }
.topbar__sub{ font-size: 12px; }

.topbar__logo{ width: 140px; height:auto; display:block; }
@media (max-width: 520px){ .topbar__logo{ width: 110px; } }

.tableWrap{ overflow:auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); }
.table{ width:100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td{ padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align:top; }
.table thead th{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.table tr.row{ cursor:pointer; }
.table tr.row:hover{ background: rgba(255,255,255,.04); }

.toolbar{ display:flex; gap: 10px; margin: 10px 0 12px; }
.input{ width:100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: inherit; outline:none; }
.input:focus{ border-color: rgba(255,255,255,.25); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }

.sectionHead{ display:flex; justify-content:space-between; align-items:baseline; gap: 10px; margin-bottom: 6px; }
.rowActions{ display:flex; gap: 10px; align-items:center; }
.hr{ border:0; height:1px; background: rgba(255,255,255,.10); margin: 14px 0; }

.details.is-empty .formGrid,
.details.is-empty .actions,
.details.is-empty #usersBox,
.details.is-empty .hr{ display:none; }

.formGrid{ display:grid; gap: 10px; }
.label{ display:grid; gap: 6px; font-size: 12px; color: rgba(255,255,255,.75); }
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px){ .row2{ grid-template-columns:1fr; } }

.check{ display:flex; align-items:center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(0,0,0,.14); }

.actions{ display:flex; justify-content:flex-end; margin-top: 10px; }

.status{ margin: 10px 0 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); }
.status--muted{ color: rgba(255,255,255,.75); background: rgba(0,0,0,.12); }
.status--ok{ background: rgba(40,180,120,.12); border-color: rgba(40,180,120,.25); color: rgba(210,255,235,.95); }
.status--err{ background: rgba(220,80,90,.12); border-color: rgba(220,80,90,.25); color: rgba(255,220,223,.95); }

.pill{ display:inline-flex; align-items:center; padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid rgba(255,255,255,.14); }
.pill--on{ background: rgba(40,180,120,.18); border-color: rgba(40,180,120,.28); }
.pill--off{ background: rgba(220,80,90,.14); border-color: rgba(220,80,90,.22); }

.note{ font-size: 12px; color: rgba(255,255,255,.72); margin: 8px 0 0; }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }

/* Collapsible advanced box */
.detailsBox{ margin-top: 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(0,0,0,.10); }
.detailsBox__sum{ cursor:pointer; padding: 10px 12px; color: rgba(255,255,255,.78); font-size: 12px; }
.detailsBox__body{ padding: 10px 12px 12px; display:grid; gap: 10px; }
.detailsBox[open] .detailsBox__sum{ color: rgba(255,255,255,.92); }


/* --- Admin dashboard utilities --- */
.topbar__brand { display:flex; align-items:center; gap:12px; }
.topbar__logo { width: 120px; height:auto; display:block; opacity:.95; }

.topbar__title { font-weight: 700; opacity: .9; }

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

.panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; }
.h2 { font-size: 16px; margin: 0 0 10px; opacity: .95; }
.h3 { font-size: 15px; margin: 0 0 6px; opacity: .95; }

.list { display:flex; flex-direction:column; gap: 10px; }
.list__item { text-align:left; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.12); cursor:pointer; }
.list__item:hover { border-color: rgba(255,255,255,.18); background: rgba(0,0,0,.18); }
.list__item.is-active { border-color: rgba(255,255,255,.28); background: rgba(0,0,0,.24); }

.list__title { font-weight: 700; }
.list__meta { font-size: 12px; opacity: .7; margin-top: 4px; }

.row--wrap { flex-wrap: wrap; }
.row--end { display:flex; align-items:flex-end; justify-content:flex-end; }
.row--gap { gap: 10px; }
.row--spread { display:flex; align-items:center; justify-content:space-between; gap: 12px; }

.stack { display:flex; flex-direction:column; gap: 12px; }
.hr { height: 1px; background: rgba(255,255,255,.10); margin: 8px 0; border-radius: 999px; }

.label { font-size: 12px; opacity: .75; margin-bottom: 6px; }

.toggle { display:flex; align-items:center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(0,0,0,.12); }
.toggle input { width: 16px; height: 16px; }

/* Runtime system banner (maintenance/idempotency UX) */
.system-banner{
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: min(680px, 92vw);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,180,90,.40);
  background: rgba(35,20,6,.90);
  color: #ffe7c4;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* ===== LOGIN TOPBAR (SMALL, IN-PAGE) ===== */
.topbar--login{
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(10,16,26,.75), rgba(10,16,26,0));
  backdrop-filter: blur(8px);
}
.topbar--login .topbar__brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.topbar--login .topbar__logo{
  width: 140px;
  max-width: 34vw;
  height: auto;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
  opacity: .95;
}

/* ===== REMOVE BIG HERO LOGO / BLUR PANEL IF PRESENT ===== */
/* ako postoji stari veliki brand blok */
.brand,
.brand-top,
.brand__logo,
.brand-top__logo{
  display:none !important;
}

/* ako postoji neki "hero blur panel" iza loga */
.hero,
.hero__panel,
.logo-panel,
.brand-panel,
.login-hero,
.login-hero__panel{
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ===== Billing UX hardening ===== */
.panel--inset{
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 12px;
}

.kv-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.kv-list li{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.limitsWrap{
  margin-top: 14px;
}
.usageRow{
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.usageRow__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.usageBar{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.usageBar span{
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #36c8ff, #2a67ff);
}
.usageBar--unlimited span{
  background: linear-gradient(90deg, #2cc98c, #2ca2c9);
}
.usageRow.is-over .usageBar span{
  background: linear-gradient(90deg, #f78d3d, #d34a4a);
}
.pill--warn{
  background: rgba(247,141,61,.18);
  border-color: rgba(247,141,61,.35);
  color: #ffd9bf;
}

/* ===== Root login hardening (small top-right logo + success state) ===== */
.page--login .top-logo{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  text-decoration: none;
}
.page--login .top-logo img{
  height: 28px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

.page--login .card--login{
  transition: transform .3s ease, opacity .3s ease;
}
.page--login .card--login.is-success{
  transform: scale(0.99);
  opacity: 0.98;
}

.page--login #loginError{
  display: none;
  margin-top: 10px;
  color: #ffd1d8;
  font-size: 13px;
}
.page--login #loginError.is-visible{
  display: block;
}

.page--login .success-pop{
  margin-top: 10px;
  color: #c4ffe4;
  font-size: 13px;
  opacity: 0;
  transform: translateY(6px);
  transition: all .25s ease;
  pointer-events: none;
}
.page--login .card--login.is-success .success-pop{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Corporate Login Redesign (Scoped) ===== */
.page--login{
  --corp-bg-1:#0d1624;
  --corp-bg-2:#132338;
  --corp-surface:#ffffff;
  --corp-surface-2:#f4f7fb;
  --corp-text:#132033;
  --corp-muted:#5d6b80;
  --corp-border:#d9e2ef;
  --corp-primary:#1f4e8c;
  --corp-primary-hover:#173d6f;
  --corp-danger:#b4233a;

  background:
    radial-gradient(1200px 620px at 85% -5%, rgba(58,104,168,.24), transparent 55%),
    radial-gradient(900px 540px at -10% 110%, rgba(31,78,140,.22), transparent 60%),
    linear-gradient(160deg, var(--corp-bg-1) 0%, var(--corp-bg-2) 100%);
  color: var(--corp-text);
}

.page--login .shell{
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  align-items: center;
  justify-items: center;
  width: min(1120px, 92vw);
  padding: 88px 16px 34px;
}

.page--login .card--login{
  width: min(460px, 100%);
  background: linear-gradient(180deg, var(--corp-surface) 0%, var(--corp-surface-2) 100%);
  color: var(--corp-text);
  border: 1px solid var(--corp-border);
  box-shadow: 0 32px 80px rgba(6, 18, 35, .42);
  border-radius: 16px;
  padding: 28px 28px 24px;
}

.page--login .title{
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--corp-text);
  text-align: center;
}

.page--login .subtitle{
  margin: 6px 0 20px;
  color: var(--corp-muted);
  font-size: 14px;
  text-align: center;
}

.page--login .label{
  margin: 0 0 7px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #56647a;
}

.page--login .input{
  border: 1px solid var(--corp-border);
  background: #fff;
  color: var(--corp-text);
  border-radius: 10px;
  padding: 11px 12px;
  height: 44px;
}

.page--login .input:focus{
  border-color: #3a68a8;
  box-shadow: 0 0 0 3px rgba(58,104,168,.18);
}

.page--login .btn{
  width: 100%;
  margin-top: 14px;
  border-radius: 10px;
  height: 44px;
  border: 1px solid #173d6f;
  background: linear-gradient(180deg, var(--corp-primary), #1a447a);
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
}

.page--login .btn:hover{
  background: linear-gradient(180deg, #285b9c, var(--corp-primary-hover));
}

.page--login #loginError{
  color: var(--corp-danger);
  font-weight: 600;
}

.page--login .success-pop{
  color: #1d6a42;
  font-weight: 600;
}

.page--login .top-logo{
  top: 18px;
  right: 18px;
  background: transparent;
}

.page--login .top-logo img{
  height: 26px;
  filter: drop-shadow(0 8px 16px rgba(7,20,38,.45));
  opacity: .95;
}

@media (max-width: 560px){
  .page--login .shell{ padding-top: 72px; }
  .page--login .card--login{ padding: 24px 18px 20px; border-radius: 14px; }
  .page--login .title{ font-size: 26px; }
}

/* ===== Topbar size lock (avoid oversized header/logo across pages) ===== */
.topbar{
  padding: 10px 14px;
}

.topbar .topbar__logo{
  width: 92px;
  height: auto;
}

@media (max-width: 520px){
  .topbar{
    padding: 9px 10px;
  }
  .topbar .topbar__logo{
    width: 84px;
  }
}

/* ===== Light UI Refresh (global override) ===== */
:root{
  --font: "Avenir Next", "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
  --bg: #eef4ff;
  --surface: #ffffff;
  --surface2: #f7faff;
  --text: #14233a;
  --muted: #5b6b84;
  --border: #d6e0f2;
  --primary: #1d5fd8;
  --primaryHover: #194fb2;
  --accent: #3aa7ff;
}

body,
.page{
  color: var(--text);
  background:
    radial-gradient(1100px 560px at 15% -5%, rgba(58,167,255,.18), transparent 58%),
    radial-gradient(920px 520px at 92% 15%, rgba(89,129,255,.16), transparent 54%),
    linear-gradient(180deg, #f7faff 0%, #edf3ff 100%);
}

.topbar{
  background: rgba(255,255,255,.84);
  border-bottom: 1px solid #dbe4f4;
  box-shadow: 0 10px 26px rgba(27,55,104,.08);
}

.shell .card,
.card,
.panel{
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 16px 42px rgba(17,50,104,.12);
}

.title,
.h2,
.h3,
.topbar__title,
.list__title{
  color: #112747;
}

.subtitle,
.muted,
.list__meta,
.note,
.label{
  color: #5d6e89 !important;
}

.input,
input,
select,
textarea{
  background: #fff;
  border: 1px solid #ccd8ee;
  color: #152949;
}

.input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: #5ca9ff;
  box-shadow: 0 0 0 3px rgba(92,169,255,.2);
}

.btn{
  color: #183152;
  background: #f1f6ff;
  border: 1px solid #c8d8f4;
}

.btn:hover{
  background: #e6f0ff;
  border-color: #b8cdef;
}

.btn.btn--primary,
button.btn--primary,
button{
  color: #fff;
  background: linear-gradient(180deg, #2f74ea, #1d5fd8);
  border: 1px solid #1b56c3;
}

.btn.btn--primary:hover,
button.btn--primary:hover,
button:hover{
  background: linear-gradient(180deg, #3d83f3, #245fca);
}

.btn--ghost{
  background: rgba(255,255,255,.9);
  color: #1e3a63;
}

.tableWrap,
table{
  background: #fff;
  border: 1px solid #d4def1;
}

th{
  color: #4f5f7b;
  background: #eef4ff;
  border-bottom: 1px solid #d7e1f3;
}

td{
  color: #1d3153;
  border-bottom: 1px solid #e5ecf8;
}

.list__item{
  background: #f8fbff;
  border: 1px solid #d8e2f3;
}

.list__item:hover{
  background: #f0f6ff;
  border-color: #bdd1f0;
}

.list__item.is-active{
  background: #e9f3ff;
  border-color: #9fc0ec;
}

.status--muted{
  background: #f2f6ff;
  border-color: #d7e2f5;
  color: #5a6c87;
}

.status--ok{
  background: #e9f9f1;
  border-color: #bfe9d1;
  color: #1f6f48;
}

.status--err{
  background: #ffeef1;
  border-color: #f6c4cd;
  color: #9e2a43;
}

.page--login{
  background:
    radial-gradient(980px 560px at 90% -10%, rgba(90,132,255,.18), transparent 56%),
    radial-gradient(900px 520px at -8% 108%, rgba(58,167,255,.16), transparent 58%),
    linear-gradient(160deg, #f4f8ff 0%, #e9f1ff 100%);
}

/* ===== Professional UI Refinement (v20260304-5) ===== */
:root{
  --font: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;
  --pro-bg: #f3f6fb;
  --pro-surface: #ffffff;
  --pro-surface-soft: #f8fbff;
  --pro-text: #16263e;
  --pro-muted: #667791;
  --pro-border: #d8e1ee;
  --pro-primary: #1f5fbf;
  --pro-primary-hover: #174b98;
}

body,
.page{
  font-family: var(--font);
  color: var(--pro-text);
  background:
    linear-gradient(180deg, #f7f9fd 0%, var(--pro-bg) 100%);
}

.topbar{
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--pro-border);
  box-shadow: 0 8px 22px rgba(16,42,84,.06);
}

.topbar__title{
  color: #1c2f4d;
  font-weight: 700;
  letter-spacing: .01em;
}

.card,
.panel{
  background: linear-gradient(180deg, var(--pro-surface) 0%, var(--pro-surface-soft) 100%);
  border: 1px solid var(--pro-border);
  box-shadow: 0 10px 28px rgba(18,48,94,.08);
  border-radius: 14px;
}

.title{
  font-size: 28px;
  letter-spacing: .005em;
  color: #132949;
}

.h2{
  font-size: 17px;
  color: #173255;
}

.subtitle,
.muted,
.note,
.list__meta{
  color: var(--pro-muted) !important;
}

.input,
input,
select,
textarea{
  background: #fff;
  border: 1px solid #ced9ea;
  color: #162944;
  border-radius: 10px;
}

.input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: #77a5e8;
  box-shadow: 0 0 0 3px rgba(119,165,232,.18);
}

.btn{
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #1f3a63;
  background: #f0f5fc;
  border: 1px solid #cad8ee;
}

.btn:hover{
  background: #e7effb;
  border-color: #b7cae8;
}

.btn--primary,
button.btn--primary{
  color: #fff;
  background: linear-gradient(180deg, #2a6fd0 0%, var(--pro-primary) 100%);
  border: 1px solid #1d54a8;
}

.btn--primary:hover,
button.btn--primary:hover{
  background: linear-gradient(180deg, #3478d8 0%, var(--pro-primary-hover) 100%);
}

table,
.tableWrap{
  background: #fff;
  border: 1px solid var(--pro-border);
}

th{
  background: #f1f5fb;
  color: #5e708b;
  border-bottom: 1px solid #d7e1ef;
}

td{
  color: #1e3456;
  border-bottom: 1px solid #e4ebf6;
}

.list__item{
  background: #f9fbff;
  border: 1px solid #d8e2f1;
}

.list__item:hover{
  background: #f2f7ff;
  border-color: #bfd1ea;
}

.list__item.is-active{
  background: #eaf2ff;
  border-color: #a4c1e9;
}

.page--login{
  background:
    linear-gradient(150deg, #f5f8fd 0%, #eaf1fb 55%, #e4ecf9 100%);
}

.page--login .card--login{
  box-shadow: 0 18px 42px rgba(18,44,89,.12);
}

/* ===== Mobile Optimization Pack (v20260305-7) ===== */
@media (max-width: 900px){
  .shell{
    width: min(100%, 96vw);
    margin: 14px auto 28px;
  }

  .topbar{
    position: sticky;
    top: 0;
    padding: 10px 10px;
  }

  .topbar__right{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .topbar__right .btn{
    padding: 8px 10px;
    font-size: 12px;
  }

  .grid--2,
  .grid2,
  .row2{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px){
  .shell{
    width: 100%;
    padding: 0 10px;
  }

  .card,
  .panel{
    padding: 14px;
    border-radius: 12px;
  }

  .title{
    font-size: 22px;
  }

  .h2{
    font-size: 15px;
  }

  .row,
  .row--spread,
  .row--gap{
    gap: 8px;
  }

  .row--spread{
    flex-direction: column;
    align-items: stretch;
  }

  .input,
  input,
  select,
  textarea{
    min-height: 40px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .btn{
    min-height: 40px;
    font-size: 13px;
  }

  .tableWrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table{
    min-width: 740px;
    font-size: 12px;
  }

  .topbar__logo{
    width: 86px !important;
  }

  .page--login .top-logo{
    top: 10px;
    right: 10px;
  }

  .page--login .top-logo img{
    height: 22px;
  }

  .page--login .shell{
    min-height: auto;
    padding: 70px 10px 20px;
  }

  .page--login .card--login{
    width: 100%;
    padding: 18px 14px;
    border-radius: 12px;
  }
}

@media (max-width: 420px){
  .topbar{
    padding: 8px 8px;
  }

  .topbar__right{
    gap: 5px;
  }

  .topbar__right .btn{
    padding: 7px 8px;
    font-size: 11px;
  }

  .card,
  .panel{
    padding: 12px;
  }
}

/* ===== Turquoise Accent + Agency Grid (v20260305-7) ===== */
.list--agencies{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px){
  .list--agencies{
    grid-template-columns: 1fr;
  }
}

body,
.page{
  background:
    radial-gradient(900px 420px at 8% -5%, rgba(83,224,232,.16), transparent 58%),
    radial-gradient(840px 380px at 95% 12%, rgba(48,178,224,.14), transparent 55%),
    linear-gradient(180deg, #f7f9fd 0%, #f2f7fd 100%);
}

.topbar{
  border-bottom: 1px solid rgba(48,178,224,.28);
  box-shadow: 0 8px 22px rgba(16,42,84,.06), inset 0 -1px 0 rgba(83,224,232,.22);
}

.btn--primary,
button.btn--primary{
  background: linear-gradient(180deg, #2aa9ce 0%, #1f6fc2 100%);
  border: 1px solid #1c64ae;
}

.btn--primary:hover,
button.btn--primary:hover{
  background: linear-gradient(180deg, #34b9da 0%, #246fbe 100%);
}

.input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: #47c7da;
  box-shadow: 0 0 0 3px rgba(71,199,218,.2);
}

.list__item.is-active{
  background: #e8fbff;
  border-color: rgba(48,178,224,.5);
}

/* ===== Light Professional Turquoise Layer (v20260305-7) ===== */
body,
.page{
  color: #0e223f;
  background:
    radial-gradient(1100px 520px at 6% -8%, rgba(83,224,232,.22), transparent 60%),
    radial-gradient(900px 480px at 94% 10%, rgba(60,190,232,.18), transparent 58%),
    linear-gradient(180deg, #fbfdff 0%, #f3f9ff 100%);
}

.topbar{
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(64,181,219,.34);
  box-shadow: 0 10px 26px rgba(13,55,92,.08);
}

.topbar__title,
.title,
.h2,
.h3{
  color: #153055;
}

.subtitle,
.muted,
.list__meta{
  color: #547195 !important;
}

.card,
.panel,
.list__item{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(70,162,206,.28);
  box-shadow: 0 16px 38px rgba(14,60,102,.08);
}

.list__item:hover{
  background: #f2fcff;
  border-color: rgba(54,170,212,.46);
}

.tableWrap,
table{
  background: rgba(255,255,255,.82);
  border-color: rgba(72,167,207,.26);
}

.table thead th,
th{
  color: #4c6f96;
  background: rgba(89,201,230,.1);
}

.table th,
.table td,
th,
td{
  border-bottom: 1px solid rgba(79,174,213,.22);
  color: #1b3a60;
}

.input,
input,
select,
textarea{
  color: #143456;
  background: #ffffff;
  border: 1px solid rgba(77,172,211,.34);
}

.btn{
  color: #0e2e50;
  background: #f5fcff;
  border: 1px solid rgba(77,172,211,.34);
}

.btn:hover{
  background: #eaf8ff;
  border-color: rgba(57,163,205,.48);
}

.btn--primary,
button.btn--primary{
  color: #fff;
  background: linear-gradient(180deg, #33c9df 0%, #218fcd 100%);
  border: 1px solid #1f83bc;
  box-shadow: 0 8px 18px rgba(23,134,182,.24);
}

.btn--primary:hover,
button.btn--primary:hover{
  background: linear-gradient(180deg, #46d3e6 0%, #2a9dd4 100%);
}

/* ===== Turquoise Fine Tune Layer (v20260305-7) ===== */
:root{
  --tq-100: #eefbff;
  --tq-200: #dff6fc;
  --tq-300: #bfeef7;
  --tq-500: #3cb8d6;
  --tq-700: #267ea9;
  --ink-700: #173a5f;
  --ink-500: #507197;
}

body,
.page{
  color: var(--ink-700);
  background:
    radial-gradient(1200px 560px at 8% -8%, rgba(70,198,221,.18), transparent 62%),
    radial-gradient(980px 520px at 92% 8%, rgba(77,173,223,.15), transparent 60%),
    linear-gradient(180deg, #fcfeff 0%, #f5fbff 100%);
}

.topbar{
  background: rgba(255,255,255,.93);
  border-bottom: 1px solid rgba(60,170,210,.3);
  box-shadow: 0 8px 22px rgba(14,60,102,.07);
}

.subtitle,
.muted,
.list__meta{
  color: var(--ink-500) !important;
}

.card,
.panel,
.list__item{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(60,170,210,.24);
  box-shadow: 0 14px 30px rgba(14,60,102,.07);
}

.list__item:hover{
  background: var(--tq-100);
  border-color: rgba(60,170,210,.44);
}

.list__item.is-active{
  background: var(--tq-200);
  border-color: rgba(60,170,210,.5);
}

.tableWrap,
table{
  background: rgba(255,255,255,.9);
  border-color: rgba(60,170,210,.24);
}

.table thead th,
th{
  color: #4b6e93;
  background: rgba(191,238,247,.42);
}

.input,
input,
select,
textarea{
  background: #fff;
  border: 1px solid rgba(60,170,210,.32);
}

.input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: var(--tq-500);
  box-shadow: 0 0 0 3px rgba(60,184,214,.16);
}

.btn{
  color: #133b60;
  background: #f7fcff;
  border: 1px solid rgba(60,170,210,.3);
}

.btn:hover{
  background: #edf9ff;
  border-color: rgba(60,170,210,.44);
}

.btn--primary,
button.btn--primary{
  color: #fff;
  background: linear-gradient(180deg, #44c5de 0%, #2f96c2 100%);
  border: 1px solid #2a8bb6;
  box-shadow: 0 8px 16px rgba(47,150,194,.2);
}

.btn--primary:hover,
button.btn--primary:hover{
  background: linear-gradient(180deg, #56cee4 0%, #39a3cc 100%);
}

@media (max-width: 520px){
  .card,
  .panel,
  .list__item{
    background: rgba(255,255,255,.95);
    box-shadow: 0 10px 20px rgba(14,60,102,.06);
  }
}

/* ===== Agency Profile Stabilization (v20260305-7) ===== */
.page--agency-profile{
  color: #173a5f;
  background:
    radial-gradient(1100px 480px at 12% -6%, rgba(71,201,224,.24), transparent 62%),
    radial-gradient(960px 520px at 92% 4%, rgba(58,132,219,.16), transparent 60%),
    linear-gradient(180deg, #f4fbff 0%, #edf6ff 100%);
}

.page--agency-profile .title,
.page--agency-profile .h2,
.page--agency-profile .h3,
.page--agency-profile th,
.page--agency-profile td{
  color: #173a5f;
}

.page--agency-profile .subtitle,
.page--agency-profile .muted{
  color: #4f7198 !important;
}

.page--agency-profile .row{
  display: flex;
  align-items: center;
}

.page--agency-profile .card{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(59,156,214,.30);
  box-shadow: 0 18px 38px rgba(32,93,151,.10);
}

.page--agency-profile .h2{
  color: #1a3f68;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.page--agency-profile .tableWrap{
  border-radius: 14px;
  border: 1px solid rgba(68,167,214,.34);
  overflow-x: auto;
  background: rgba(255,255,255,.94);
}

.page--agency-profile .table{
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.page--agency-profile .table th,
.page--agency-profile .table td{
  white-space: normal;
  word-break: break-word;
  vertical-align: middle;
}

.page--agency-profile .table thead th{
  background: linear-gradient(180deg, rgba(175,236,248,.78), rgba(153,217,241,.62));
  color: #285277;
}

.page--agency-profile .table td:last-child{
  min-width: 180px;
}

.page--agency-profile .status{
  border-width: 1px;
}

.page--agency-profile .check{
  background: linear-gradient(180deg, #f7fdff 0%, #ecf8ff 100%);
  border: 1px solid rgba(76,178,219,.34);
}

.page--agency-profile input[type="checkbox"]{
  width: auto !important;
  min-width: 16px;
  height: 16px;
  accent-color: #31b3d3;
}

.page--agency-profile .btn--primary,
.page--agency-profile button.btn--primary{
  background: linear-gradient(180deg, #38c5e0 0%, #3577cf 100%);
  border: 1px solid rgba(42,113,178,.75);
}

.page--agency-profile .btn--primary:hover,
.page--agency-profile button.btn--primary:hover{
  background: linear-gradient(180deg, #4ad0e8 0%, #3e84d8 100%);
}

@media (max-width: 720px){
  .page--agency-profile .shell{
    width: min(1100px, 95vw);
  }

  .page--agency-profile .row.row--spread{
    align-items: stretch;
  }
}

.page--agency-profile .agency-card--users .h2,
.page--agency-profile .agency-card--itineraries .h2{
  margin: 0 0 10px;
}

.page--agency-profile .agency-table{
  table-layout: fixed;
  min-width: 100%;
}

.page--agency-profile .agency-table th,
.page--agency-profile .agency-table td{
  text-align: left;
  line-height: 1.35;
  padding-top: 11px;
  padding-bottom: 11px;
}

.page--agency-profile .agency-table td{
  vertical-align: top;
}

.page--agency-profile .agency-table td .row{
  align-items: center;
  justify-content: flex-start;
}

/* ===== Admin Blue Shadow + Bigger Logo (v20260305-7) ===== */
.page--admin .topbar__logo{
  width: 178px !important;
  filter: drop-shadow(0 8px 16px rgba(43,121,194,.28));
  display: block;
}

.page--admin .topbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 8px;
  box-shadow:
    0 10px 24px rgba(37,103,168,.14),
    inset 0 -1px 0 rgba(94,187,230,.26);
}

.page--admin .topbar__brand{
  line-height: 0;
}

.page--admin .topbar__left{ justify-self: start; }
.page--admin .topbar__center{ justify-self: center; }
.page--admin .topbar__right{ justify-self: end; }

.page--admin .card{
  box-shadow:
    0 20px 42px rgba(37,103,168,.12),
    0 2px 0 rgba(255,255,255,.65) inset;
}

.page--admin .tableWrap{
  box-shadow: 0 10px 24px rgba(52,118,189,.10);
}

@media (max-width: 900px){
  .page--admin .topbar__logo{
    width: 142px !important;
  }
  .page--admin .topbar{
    padding: 0 6px;
  }
}

/* ===== Centered Large Login Logo (v20260305-7) ===== */
.page--login .top-logo{
  position: fixed;
  top: 24px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 25;
  background: transparent;
  pointer-events: none;
}

.page--login .top-logo img{
  height: 420px;
  width: auto;
  opacity: .98;
  filter: drop-shadow(0 14px 26px rgba(17,66,120,.30));
}

.page--login .shell{
  padding-top: 346px;
}

@media (max-width: 560px){
  .page--login .top-logo{
    top: 16px;
  }
  .page--login .top-logo img{
    height: 220px;
  }
  .page--login .shell{
    padding-top: 214px;
  }
}

/* ===== Itinerary editor: expanded content input (v20260305-9) ===== */
.page--itinerary-editor textarea[data-json]{
  min-height: 128px;
  resize: vertical;
  transition: min-height .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.page--itinerary-editor textarea[data-json].input--expanded{
  min-height: 360px;
  border-color: #2f9cc8;
  box-shadow: 0 0 0 4px rgba(56,188,224,.18);
}

@media (max-width: 900px){
  .page--itinerary-editor textarea[data-json].input--expanded{
    min-height: 56vh;
  }
}

/* ===== Imota-aligned workspace UI (v20260421-1) ===== */
.page--portal-ui,
.page--workspace-client,
.page--workspace-admin{
  color:#eff6ff;
  background:
    radial-gradient(circle at 16% 14%, rgba(43,183,255,.18), transparent 18rem),
    radial-gradient(circle at 84% 18%, rgba(244,195,71,.10), transparent 20rem),
    radial-gradient(circle at 52% 84%, rgba(112,167,255,.10), transparent 18rem),
    linear-gradient(180deg, #081220 0%, #09182b 48%, #07111f 100%);
}

.page--portal-ui::before,
.page--workspace-client::before,
.page--workspace-admin::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.18;
  background:
    linear-gradient(rgba(157,193,236,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,193,236,.08) 1px, transparent 1px);
  background-size:34px 34px;
}

.page--portal-ui > *,
.page--workspace-client > *,
.page--workspace-admin > *{
  position:relative;
  z-index:1;
}

.page--workspace-client .topbar,
.page--workspace-admin .topbar{
  position:sticky;
  top:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  width:min(1280px, calc(100vw - 1.5rem));
  margin:0.75rem auto 0;
  padding:0.9rem 1.1rem;
  border:1px solid rgba(155,201,255,.12);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(11,23,45,.84), rgba(10,22,41,.68)),
    rgba(7,17,31,.74);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 52px rgba(2,8,18,.24);
}

.page--workspace-client .topbar__left,
.page--workspace-client .topbar__right,
.page--workspace-admin .topbar__left,
.page--workspace-admin .topbar__right{
  display:flex;
  align-items:center;
  gap:0.65rem;
}

.page--workspace-client .topbar__right,
.page--workspace-admin .topbar__right{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.page--workspace-client .topbar__brand,
.page--workspace-admin .topbar__brand{
  display:inline-flex;
  align-items:center;
  gap:0.8rem;
}

.page--workspace-client .topbar__logo,
.page--workspace-admin .topbar__logo{
  width:132px !important;
  opacity:1;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));
}

.page--workspace-client .topbar__title,
.page--workspace-admin .topbar__title{
  color:#f6fbff;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.88rem;
}

.page--workspace-client .shell,
.page--workspace-admin .shell{
  width:min(1280px, calc(100vw - 1.5rem));
  margin:1rem auto 3rem;
}

.page--workspace-client .card,
.page--workspace-admin .card,
.page--workspace-client .panel,
.page--workspace-admin .panel{
  border:1px solid rgba(168,208,255,.12);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    rgba(7,17,31,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 54px rgba(2,8,18,.24);
}

.page--workspace-client .panel--inset,
.page--workspace-admin .panel--inset{
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(11,23,45,.55);
}

.page--workspace-client .title,
.page--workspace-admin .title,
.page--workspace-client .h2,
.page--workspace-admin .h2,
.page--workspace-client .h3,
.page--workspace-admin .h3{
  color:#f5f9ff;
}

.page--workspace-client .subtitle,
.page--workspace-admin .subtitle,
.page--workspace-client .muted,
.page--workspace-admin .muted,
.page--workspace-client .note,
.page--workspace-admin .note,
.page--workspace-client .status--muted,
.page--workspace-admin .status--muted{
  color:rgba(225,236,252,.72);
}

.page--workspace-client .label,
.page--workspace-admin .label,
.page--workspace-client .check span,
.page--workspace-admin .check span{
  color:#eef5ff;
  font-weight:700;
}

.page--workspace-client .input,
.page--workspace-admin .input,
.page--workspace-client input,
.page--workspace-admin input,
.page--workspace-client select,
.page--workspace-admin select,
.page--workspace-client textarea,
.page--workspace-admin textarea{
  border:1px solid rgba(162,206,255,.14);
  border-radius:16px;
  background:rgba(4,10,22,.34);
  color:#f4f8ff;
  box-shadow:none;
}

.page--workspace-client .input::placeholder,
.page--workspace-admin .input::placeholder,
.page--workspace-client input::placeholder,
.page--workspace-admin input::placeholder,
.page--workspace-client textarea::placeholder,
.page--workspace-admin textarea::placeholder{
  color:rgba(214,228,248,.44);
}

.page--workspace-client .input:focus,
.page--workspace-admin .input:focus,
.page--workspace-client input:focus,
.page--workspace-admin input:focus,
.page--workspace-client select:focus,
.page--workspace-admin select:focus,
.page--workspace-client textarea:focus,
.page--workspace-admin textarea:focus{
  border-color:rgba(65,214,255,.6);
  box-shadow:0 0 0 4px rgba(65,214,255,.12);
}

.page--workspace-client .btn,
.page--workspace-admin .btn,
.page--workspace-client button,
.page--workspace-admin button{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(11,23,45,.48);
  color:#f4f8ff;
  box-shadow:none;
}

.page--workspace-client .btn:hover,
.page--workspace-admin .btn:hover,
.page--workspace-client button:hover,
.page--workspace-admin button:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    rgba(11,23,45,.58);
}

.page--workspace-client .btn--primary,
.page--workspace-admin .btn--primary{
  background:
    linear-gradient(180deg, #2bb7ff, #167de8),
    #1f5bff;
  color:white;
  box-shadow:0 14px 28px rgba(31,91,255,.24);
}

.page--workspace-client .btn--primary:hover,
.page--workspace-admin .btn--primary:hover{
  background:
    linear-gradient(180deg, #43c2ff, #2389f0),
    #2b68ff;
}

.page--workspace-client .btn--ghost,
.page--workspace-admin .btn--ghost{
  background:rgba(255,255,255,.02);
}

.page--workspace-client .tableWrap,
.page--workspace-admin .tableWrap{
  border:1px solid rgba(162,206,255,.12);
  border-radius:18px;
  background:rgba(6,14,28,.36);
  overflow:auto;
}

.page--workspace-client .table,
.page--workspace-admin .table,
.page--workspace-client table,
.page--workspace-admin table{
  background:transparent;
  border:0;
}

.page--workspace-client .table th,
.page--workspace-client .table td,
.page--workspace-admin .table th,
.page--workspace-admin .table td,
.page--workspace-client th,
.page--workspace-client td,
.page--workspace-admin th,
.page--workspace-admin td{
  border-bottom:1px solid rgba(255,255,255,.06);
}

.page--workspace-client .table thead th,
.page--workspace-admin .table thead th,
.page--workspace-client th,
.page--workspace-admin th{
  background:rgba(255,255,255,.04);
  color:rgba(222,234,250,.74);
}

.page--workspace-client .table td,
.page--workspace-admin .table td{
  color:#f3f8ff;
}

.page--workspace-client .status,
.page--workspace-admin .status{
  border-radius:16px;
  border:1px solid rgba(162,206,255,.1);
  background:rgba(255,255,255,.04);
}

.page--portal-ui{
  display:grid;
  place-items:center;
  padding:2rem 1rem 3rem;
}

.page--portal-ui .top-logo{
  top:1.35rem;
}

.page--portal-ui .top-logo img{
  width:min(240px, 52vw);
  height:auto;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.24));
}

.page--portal-ui .shell{
  width:min(100%, 520px);
  padding-top:5.25rem;
  margin:0 auto;
}

.page--portal-ui .card--login{
  border-radius:28px;
  padding:2rem 2rem 1.6rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    rgba(7,17,31,.58);
  border:1px solid rgba(168,208,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 26px 62px rgba(2,8,18,.28);
}

.page--portal-ui .title{
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:clamp(2rem, 5vw, 2.7rem);
  line-height:1.02;
  letter-spacing:-.04em;
  color:#f6fbff;
}

.page--portal-ui .subtitle{
  color:rgba(231,240,252,.72);
}

.page--portal-ui .label{
  color:#eef5ff;
  font-weight:700;
}

.page--portal-ui .input{
  border-radius:16px;
  border:1px solid rgba(162,206,255,.14);
  background:rgba(4,10,22,.36);
  color:#f4f8ff;
}

.page--portal-ui .input:focus{
  border-color:rgba(65,214,255,.6);
  box-shadow:0 0 0 4px rgba(65,214,255,.12);
}

.page--portal-ui .btn{
  min-height:3.25rem;
  border-radius:16px;
  background:
    linear-gradient(180deg, #2bb7ff, #167de8),
    #1f5bff;
  color:white;
  box-shadow:0 14px 28px rgba(31,91,255,.24);
}

.page--portal-ui #loginError{
  color:#ffb2bf;
}

.page--portal-ui .success-pop{
  color:#91f0bd;
}

@media (max-width: 980px){
  .page--workspace-client .topbar,
  .page--workspace-admin .topbar{
    grid-template-columns:1fr;
    justify-items:start;
  }

  .page--workspace-client .topbar__right,
  .page--workspace-admin .topbar__right{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .page--workspace-client .shell,
  .page--workspace-admin .shell{
    width:min(100vw - 1rem, 100%);
  }

  .page--workspace-client .topbar,
  .page--workspace-admin .topbar{
    width:min(100vw - 1rem, 100%);
    padding:0.85rem 0.9rem;
    border-radius:18px;
  }

  .page--workspace-client .card,
  .page--workspace-admin .card{
    border-radius:20px;
    padding:1rem;
  }

  .page--portal-ui .card--login{
    padding:1.5rem 1.1rem 1.2rem;
    border-radius:22px;
  }
}

/* ===== DMC Wizard x Monarch22 Global Theme ===== */
:root{
  --font: "Arsenal", "Segoe UI", Arial, sans-serif;
  --bg: #eef3f5;
  --surface: #ffffff;
  --surface2: #f5f9fa;
  --text: #1f2e37;
  --muted: #50606a;
  --border: #cdd8de;
  --primary: #345c72;
  --primaryHover: #25485d;
  --accent: #de7b3e;
  --accentHover: #c7692f;
}

body,
.page{
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, #f9fcfd 0%, var(--bg) 45%, #e4ecef 100%);
}

.topbar{
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(20,39,51,.08);
}

.topbar__title,
.title,
.h2,
.h3,
.list__title{
  color: #25485d;
}

.subtitle,
.muted,
.note,
.label,
.list__meta,
.topbar__sub{
  color: var(--muted) !important;
}

.card,
.panel,
.page--workspace-client .card,
.page--workspace-admin .card,
.page--portal-ui .card--login{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,250,.98)),
    #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(20,39,51,.10);
  color: var(--text);
}

.input,
input,
select,
textarea,
.page--portal-ui .input,
.page--login .input{
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
}

.input:focus,
input:focus,
select:focus,
textarea:focus,
.page--portal-ui .input:focus,
.page--login .input:focus{
  border-color: rgba(52,92,114,.42);
  box-shadow: 0 0 0 3px rgba(52,92,114,.12);
}

.btn{
  color: #25485d;
  background: #f6f9fb;
  border: 1px solid var(--border);
}

.btn:hover{
  background: #edf3f6;
  border-color: #b8c7d0;
}

.btn--primary,
button.btn--primary,
button,
.page--portal-ui .btn,
.page--login .btn{
  color: #ffffff;
  background: linear-gradient(180deg, var(--accent), var(--accentHover));
  border: 1px solid rgba(199,105,47,.45);
  box-shadow: 0 12px 28px rgba(199,105,47,.18);
}

.btn--primary:hover,
button.btn--primary:hover,
button:hover,
.page--portal-ui .btn:hover,
.page--login .btn:hover{
  background: linear-gradient(180deg, #e48a53, var(--accentHover));
}

.btn--ghost{
  background: rgba(255,255,255,.88);
  color: #25485d;
}

.tableWrap,
table,
.page--workspace-client .table,
.page--workspace-admin .table{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
}

th,
.page--workspace-client th,
.page--workspace-admin th{
  background: #edf3f5;
  color: #50606a;
  border-bottom: 1px solid var(--border);
}

td,
.page--workspace-client td,
.page--workspace-admin td{
  color: var(--text);
  border-bottom: 1px solid #dde6ea;
}

.list__item,
.check,
.toggle,
.detailsBox,
.status--muted{
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  color: var(--text);
}

.list__item:hover{
  background: #f2f6f8;
  border-color: #bdcbd3;
}

.list__item.is-active{
  background: #eaf0f3;
  border-color: #aebfc9;
}

.status--ok{
  background: #eef7f1;
  border-color: #c7ddd0;
  color: #305d42;
}

.status--err{
  background: #fff0eb;
  border-color: #f1cbbb;
  color: #9b4a27;
}

.page--login,
.page--portal-ui{
  background:
    radial-gradient(circle at 20% 0%, #f9fcfd 0%, #eef3f5 45%, #e4ecef 100%);
}

.page--portal-ui .title,
.page--login .title{
  color: #25485d;
  font-family: var(--font);
  letter-spacing: -.02em;
}

.page--portal-ui .subtitle,
.page--login .subtitle{
  color: var(--muted) !important;
}