:root {
  --primary: #246bfe;
  --primary-strong: #1656d9;
  --primary-deep: #0a1f44;
  --primary-soft: #edf4ff;
  --cyan: #08b9d9;
  --cyan-soft: #e7faff;
  --violet: #7758f6;
  --violet-soft: #f1edff;
  --success: #0f9f6e;
  --success-soft: #e8f8f2;
  --warning: #d97706;
  --warning-soft: #fff5e5;
  --danger: #e5484d;
  --danger-soft: #fff0f1;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f4f7fb;
  --surface-subtle: #f8fafc;
  --surface-blue: #f5f9ff;
  --border: #e2e9f2;
  --border-strong: #cfd9e6;
  --text: #111c2f;
  --text-muted: #637188;
  --text-soft: #8c98aa;
  --sidebar: #07172e;
  --sidebar-raised: #0c2140;
  --sidebar-text: #c8d4e7;
  --sidebar-muted: #7f91ab;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 8px 24px rgba(33, 52, 80, .06);
  --shadow-md: 0 18px 48px rgba(24, 43, 70, .10);
  --shadow-lg: 0 30px 80px rgba(7, 23, 46, .18);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --sidebar-width: 264px;
  --topbar-height: 76px;
  --transition: 180ms cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"] {
  --surface: #0d182a;
  --surface-raised: #111f33;
  --surface-muted: #081321;
  --surface-subtle: #0a1728;
  --surface-blue: #10233c;
  --border: #23354c;
  --border-strong: #31465f;
  --text: #eef4ff;
  --text-muted: #9dadc2;
  --text-soft: #78889e;
  --primary-soft: #112c58;
  --cyan-soft: #0d3440;
  --violet-soft: #261f50;
  --success-soft: #12392d;
  --warning-soft: #3a2b14;
  --danger-soft: #3b1d25;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .20);
  --shadow-sm: 0 12px 28px rgba(0, 0, 0, .20);
  --shadow-md: 0 20px 52px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
}

html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Noto Sans Thai", "Leelawadee UI", Inter, "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 85% -10%, rgba(36,107,254,.08), transparent 24rem),
    var(--surface-muted);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
a { color: inherit; }

button, input, select, textarea, a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(36,107,254,.25);
  outline-offset: 2px;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-icon.sm { width: 16px; height: 16px; }
.ui-icon.lg { width: 24px; height: 24px; }
.ui-icon.xl { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   Shared components
   -------------------------------------------------------------------------- */

.brand-lockup {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-logo-image {
  display: block;
  width: 150px;
  height: 77px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

.brand-mark {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.02)),
    linear-gradient(145deg, #37a7ff, #246bfe 58%, #6746ee);
  box-shadow: 0 14px 32px rgba(12, 74, 207, .28), inset 0 1px 0 rgba(255,255,255,.35);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.brand-mark::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  right: -18px;
  bottom: -18px;
  border: 8px solid rgba(255,255,255,.18);
  border-radius: 50%;
}

.brand-mark > span { position: relative; z-index: 1; }
.brand-title { font-size: 19px; font-weight: 850; letter-spacing: -.025em; }
.brand-subtitle { margin-top: 1px; font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; opacity: .66; }

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 760;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #2f7cff, #1e5fea 66%, #5744e8);
  box-shadow: 0 10px 24px rgba(36,107,254,.24), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(36,107,254,.30); }
.btn-secondary {
  color: var(--text);
  background: var(--surface-raised);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.btn-ghost { color: var(--text-muted); background: transparent; border-color: transparent; }
.btn-ghost:hover { color: var(--text); background: var(--surface-subtle); }
.btn-danger { color: var(--danger); background: var(--danger-soft); border-color: rgba(229,72,77,.22); }
.btn-block { width: 100%; min-height: 50px; }
.btn-sm { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 12px; }

.icon-button,
.icon-button-inline,
.mini-action {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  color: var(--text-muted);
  background: transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.icon-button:hover,
.icon-button-inline:hover,
.mini-action:hover {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: rgba(36,107,254,.12);
}

.icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.icon-button-inline {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border-radius: 10px;
}

.icon-button .dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface-raised);
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(229,72,77,.12);
}

.badge {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}
.badge-blue { color: #1557c7; background: var(--primary-soft); border-color: rgba(36,107,254,.10); }
.badge-red { color: #c52f3a; background: var(--danger-soft); border-color: rgba(229,72,77,.12); }
.badge-orange { color: #a35a05; background: var(--warning-soft); border-color: rgba(217,119,6,.12); }
.badge-green { color: #087e57; background: var(--success-soft); border-color: rgba(15,159,110,.12); }
.badge-gray { color: var(--text-muted); background: var(--surface-subtle); border-color: var(--border); }
.badge-violet { color: #6242da; background: var(--violet-soft); border-color: rgba(119,88,246,.12); }

html[data-theme="dark"] .badge-blue { color: #8db7ff; }
html[data-theme="dark"] .badge-red { color: #ff9ba0; }
html[data-theme="dark"] .badge-orange { color: #ffc16c; }
html[data-theme="dark"] .badge-green { color: #76e0b6; }
html[data-theme="dark"] .badge-violet { color: #b9a7ff; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  color: var(--primary);
  background: transparent;
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}
.text-link:hover { color: var(--primary-strong); text-decoration: none; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr);
  background: var(--surface);
}

.login-visual {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px clamp(42px, 5vw, 78px);
  color: #fff;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 15%, rgba(39,155,255,.35), transparent 28rem),
    radial-gradient(circle at 78% 72%, rgba(106,82,255,.28), transparent 26rem),
    linear-gradient(145deg, #061326 0%, #0b2346 46%, #123b75 100%);
}

.login-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .20;
  background-image:
    linear-gradient(rgba(142,190,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142,190,255,.18) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 94%);
}

.login-visual::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  left: 50%;
  top: 51%;
  z-index: -1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(111,184,255,.20);
  border-radius: 50%;
  box-shadow:
    0 0 0 74px rgba(41,124,255,.025),
    0 0 0 148px rgba(41,124,255,.018);
}

.login-visual .brand-title { color: #fff; }
.login-visual .brand-subtitle { color: #a8bee0; opacity: 1; }

.login-visual-copy {
  position: relative;
  z-index: 1;
  max-width: 690px;
  margin: 42px 0 28px;
}

.login-visual-copy .eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(123,197,255,.24);
  border-radius: 999px;
  color: #c8e8ff;
  background: rgba(40,116,198,.14);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .03em;
}

.live-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #45e0aa;
  box-shadow: 0 0 0 5px rgba(69,224,170,.12), 0 0 22px rgba(69,224,170,.65);
}

.login-visual-copy h1 {
  max-width: 690px;
  margin: 24px 0 18px;
  font-size: clamp(42px, 5vw, 70px);
  line-height: 1.05;
  letter-spacing: -.055em;
}

.login-visual-copy h1 span {
  color: #8dccff;
  background: linear-gradient(90deg, #9ddcff, #a8a2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-visual-copy > p {
  max-width: 610px;
  margin: 0;
  color: rgba(226,238,255,.74);
  font-size: 17px;
  line-height: 1.8;
}

.visual-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 34px;
}

.visual-feature {
  min-height: 118px;
  padding: 16px;
  border: 1px solid rgba(146,198,255,.15);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.visual-feature-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #a9d7ff;
  background: rgba(77,153,255,.14);
}

.visual-feature strong { display: block; margin-top: 13px; font-size: 13px; }
.visual-feature span { display: block; margin-top: 5px; color: rgba(221,235,255,.62); font-size: 11px; line-height: 1.5; }

.login-preview {
  position: absolute;
  right: -110px;
  bottom: 92px;
  width: 390px;
  height: 260px;
  z-index: 0;
  padding: 18px;
  border: 1px solid rgba(166,207,255,.16);
  border-radius: 26px;
  transform: perspective(900px) rotateY(-13deg) rotateX(4deg);
  background: linear-gradient(145deg, rgba(16,50,93,.72), rgba(7,27,55,.78));
  backdrop-filter: blur(14px);
  box-shadow: 0 34px 80px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: .62;
  pointer-events: none;
}

.login-preview-head { display: flex; align-items: center; justify-content: space-between; }
.login-preview-dot { width: 7px; height: 7px; border-radius: 50%; background: #42d9a0; box-shadow: 0 0 14px rgba(66,217,160,.7); }
.login-preview-line { height: 8px; border-radius: 999px; background: rgba(191,220,255,.16); }
.login-preview-line.w1 { width: 92px; }
.login-preview-line.w2 { width: 48px; }
.login-preview-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 20px; }
.login-preview-metric { height: 68px; border: 1px solid rgba(167,207,255,.10); border-radius: 13px; background: rgba(255,255,255,.04); }
.login-preview-chart { position: relative; height: 102px; margin-top: 12px; border: 1px solid rgba(167,207,255,.10); border-radius: 14px; background: rgba(255,255,255,.035); }
.login-preview-chart::before {
  content: "";
  position: absolute;
  inset: 22px 16px 17px;
  background: linear-gradient(135deg, transparent 0 18%, rgba(77,174,255,.7) 18% 21%, transparent 21% 38%, rgba(77,174,255,.7) 38% 41%, transparent 41% 58%, rgba(161,124,255,.7) 58% 61%, transparent 61% 76%, rgba(69,224,170,.7) 76% 79%, transparent 79%);
  filter: drop-shadow(0 0 8px rgba(77,174,255,.55));
}

.visual-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: rgba(201,220,245,.52);
  font-size: 11px;
}

.visual-footer .secure-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(205,232,255,.72);
}

.login-panel {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px;
  overflow: hidden;
  background: var(--surface);
}

.login-panel::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -180px;
  top: -160px;
  border-radius: 50%;
  background: rgba(36,107,254,.07);
  filter: blur(1px);
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(430px,100%);
}

.mobile-brand { display: none; margin-bottom: 34px; }
.mobile-brand .brand-logo-image { width: 160px; height: 119px; }
.mobile-brand .brand-title { color: var(--text); }
.mobile-brand .brand-subtitle { color: var(--text-muted); opacity: 1; }

.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.login-card h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -.04em;
}

.login-card > p {
  margin: 11px 0 30px;
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 14px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

.input-wrap { position: relative; }
.input-wrap .leading-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}

.input-wrap input,
.form-grid input,
.form-grid select,
.form-grid textarea,
.filter-select {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  outline: none;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.input-wrap input {
  height: 50px;
  padding: 0 48px 0 44px;
}

.input-wrap input::placeholder,
.form-grid input::placeholder,
.form-grid textarea::placeholder { color: var(--text-soft); }

.input-wrap input:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.filter-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(36,107,254,.12);
}

.login-error {
  display: none;
  margin: 0 0 17px;
  padding: 13px 14px;
  border: 1px solid rgba(229,72,77,.25);
  border-radius: 12px;
  color: #b82c35;
  background: var(--danger-soft);
  font-size: 12px;
  line-height: 1.6;
}
.login-error.show { display: block; }

.security-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 21px;
  padding: 14px;
  border: 1px solid rgba(36,107,254,.14);
  border-radius: 13px;
  color: var(--text-muted);
  background: var(--surface-blue);
  font-size: 11px;
  line-height: 1.6;
}
.security-note .ui-icon { color: var(--primary); margin-top: 1px; }

.login-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--text-soft);
  font-size: 10.5px;
}

/* --------------------------------------------------------------------------
   App shell / navigation
   -------------------------------------------------------------------------- */

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  color: var(--sidebar-text);
  background:
    radial-gradient(circle at 12% 0%, rgba(41,126,255,.16), transparent 18rem),
    linear-gradient(180deg, #07182f 0%, #061326 100%);
  border-right: 1px solid rgba(130,168,216,.10);
  box-shadow: 12px 0 40px rgba(5,17,35,.06);
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(96,150,218,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(96,150,218,.09) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 60%);
}

.sidebar > * { position: relative; z-index: 1; }

.sidebar-brand {
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(135,170,218,.11);
}
.sidebar-brand .brand-logo-image { width: 76px; height: 56px; object-position: left center; }
.sidebar-brand .brand-mark { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 10px 26px rgba(21,85,195,.30); }
.sidebar-brand .brand-title { color: #f4f8ff; font-size: 17px; }
.sidebar-brand .brand-subtitle { color: #8296b2; opacity: 1; }

.workspace-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 13px 4px;
  padding: 11px 12px;
  border: 1px solid rgba(128,177,239,.12);
  border-radius: 13px;
  background: rgba(38,86,147,.16);
}
.workspace-pill-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #85c8ff;
  background: rgba(40,127,255,.16);
}
.workspace-pill strong { display: block; color: #e6f0ff; font-size: 11.5px; }
.workspace-pill span { display: block; margin-top: 2px; color: #7f95b3; font-size: 9.5px; }

.nav-area {
  flex: 1;
  overflow-y: auto;
  padding: 8px 11px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(146,176,216,.20) transparent;
}

.nav-section-label {
  padding: 18px 12px 8px;
  color: #657b98;
  font-size: 9.5px;
  font-weight: 820;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.nav-button {
  position: relative;
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 3px 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #a9bad1;
  background: transparent;
  text-align: left;
  font-size: 12.5px;
  font-weight: 650;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.nav-button:hover {
  color: #eff6ff;
  background: rgba(69,116,177,.12);
  transform: translateX(1px);
}

.nav-button.active {
  color: #fff;
  border-color: rgba(114,178,255,.15);
  background: linear-gradient(90deg, rgba(37,111,235,.30), rgba(45,112,208,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.nav-button.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(#65c6ff,#526bff);
  box-shadow: 0 0 14px rgba(65,164,255,.70);
}

.nav-icon {
  width: 23px;
  display: grid;
  place-items: center;
  color: #7890ad;
}
.nav-button:hover .nav-icon,
.nav-button.active .nav-icon { color: #83caff; }
.nav-label { flex: 1; }

.nav-badge {
  min-width: 23px;
  height: 21px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg,#f05b63,#da3943);
  box-shadow: 0 5px 14px rgba(218,57,67,.28);
  font-size: 9.5px;
  font-weight: 850;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(135,170,218,.11);
}

.pilot-card {
  position: relative;
  overflow: hidden;
  padding: 13px;
  border: 1px solid rgba(115,180,255,.13);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(31,85,153,.25), rgba(22,53,93,.28));
}
.pilot-card::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  right: -30px;
  top: -30px;
  border-radius: 50%;
  background: rgba(59,138,255,.17);
}
.pilot-card strong { display: flex; align-items: center; gap: 7px; color: #dcecff; font-size: 11px; }
.pilot-card span { display: block; margin-top: 6px; color: #7890ad; font-size: 9.5px; line-height: 1.55; }

.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-width);
  z-index: 40;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 87%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
}

.mobile-menu-button { display: none; }

.global-search {
  position: relative;
  width: min(650px, 52vw);
}
.global-search input {
  width: 100%;
  height: 44px;
  padding: 0 84px 0 44px;
  border: 1px solid var(--border);
  border-radius: 13px;
  outline: none;
  color: var(--text);
  background: var(--surface-subtle);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.global-search input::placeholder { color: var(--text-soft); }
.global-search input:focus {
  border-color: rgba(36,107,254,.60);
  background: var(--surface-raised);
  box-shadow: 0 0 0 4px rgba(36,107,254,.10), var(--shadow-sm);
}
.global-search .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
.search-shortcut {
  position: absolute;
  right: 10px;
  top: 9px;
  min-width: 57px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  font-size: 9.5px;
  font-weight: 720;
}
.global-search-results {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 0;
  width: min(620px, calc(100vw - 28px));
  max-height: min(520px, 68vh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}
.global-search-result {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.global-search-result:hover,.global-search-result:focus-visible { background: var(--primary-soft); outline: none; }
.global-search-result-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.global-search-result span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.global-search-result strong,.global-search-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result strong { font-size: 11px; }
.global-search-result small,.global-search-state { color: var(--text-muted); font-size: 9.5px; }
.global-search-state { padding: 20px 12px; text-align: center; }

.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }

.theme-button .theme-sun { display: none; }
html[data-theme="dark"] .theme-button .theme-moon { display: none; }
html[data-theme="dark"] .theme-button .theme-sun { display: block; }

.profile-chip {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
  padding: 4px 7px 4px 4px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text);
  background: transparent;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
.profile-chip:hover { border-color: var(--border); background: var(--surface-subtle); }

.avatar {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(36,107,254,.15);
  border-radius: 13px;
  color: #1557c7;
  background: linear-gradient(145deg,#edf5ff,#e7eeff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 850;
}
html[data-theme="dark"] .avatar { color: #a8c8ff; background: #172b47; box-shadow: none; }
.profile-name { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 760; }
.profile-role { margin-top: 2px; color: var(--text-muted); font-size: 9.5px; }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  border: 0;
  background: rgba(3,13,28,.48);
  backdrop-filter: blur(3px);
}

/* --------------------------------------------------------------------------
   Main workspace
   -------------------------------------------------------------------------- */

.main-content {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 25px) clamp(18px,2.2vw,32px) 36px;
}

.content-container { max-width: 1540px; margin: 0 auto; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.page-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg,var(--primary),var(--cyan));
}

.page-header h1 {
  margin: 0;
  font-size: clamp(24px,2.2vw,31px);
  line-height: 1.25;
  letter-spacing: -.04em;
}

.page-subtitle {
  max-width: 680px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.65;
}

.user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.meta-chip {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  font-size: 10px;
  font-weight: 620;
}
.meta-chip .ui-icon { width: 14px; height: 14px; color: var(--primary); }

.page-actions { display: flex; align-items: center; gap: 10px; }
.last-refresh { color: var(--text-soft); font-size: 10.5px; white-space: nowrap; }

.forced-pin-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(217,119,6,.20);
  border-radius: 13px;
  color: #94520a;
  background: var(--warning-soft);
  font-size: 11.5px;
}
html[data-theme="dark"] .forced-pin-banner { color: #ffc56f; }

.future-hero {
  position: relative;
  min-height: 264px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(300px,.78fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding: clamp(24px,3vw,38px);
  border: 1px solid rgba(121,176,255,.16);
  border-radius: var(--radius-xl);
  color: #fff;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 0%, rgba(59,159,255,.34), transparent 25rem),
    radial-gradient(circle at 80% 100%, rgba(115,88,246,.28), transparent 25rem),
    linear-gradient(135deg,#081b39 0%,#0b2d5a 54%,#123d75 100%);
  box-shadow: 0 22px 54px rgba(11,39,82,.18), inset 0 1px 0 rgba(255,255,255,.08);
}

.future-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .16;
  background-image: linear-gradient(rgba(146,197,255,.20) 1px, transparent 1px), linear-gradient(90deg, rgba(146,197,255,.20) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(100deg,#000,transparent 82%);
}

.future-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -135px;
  top: -118px;
  z-index: -1;
  border: 1px solid rgba(148,210,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(73,148,255,.035), 0 0 0 108px rgba(73,148,255,.02);
}

.hero-eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid rgba(134,205,255,.18);
  border-radius: 999px;
  color: #bfe4ff;
  background: rgba(44,119,205,.14);
  font-size: 10.5px;
  font-weight: 760;
}

.hero-copy h2 {
  max-width: 680px;
  margin: 16px 0 10px;
  font-size: clamp(28px,3vw,42px);
  line-height: 1.18;
  letter-spacing: -.045em;
}

.hero-copy > p {
  max-width: 670px;
  margin: 0;
  color: rgba(223,237,255,.70);
  font-size: 13px;
  line-height: 1.75;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 16px;
  color: rgba(198,221,250,.65);
  font-size: 10.5px;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .ui-icon { width: 15px; height: 15px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-primary {
  color: #0b2b58;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.hero-primary:hover { background: #eef7ff; }
.hero-secondary {
  color: #e7f3ff;
  border-color: rgba(177,216,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.hero-secondary:hover { border-color: rgba(177,216,255,.32); background: rgba(255,255,255,.13); }

.hero-command {
  position: relative;
  z-index: 1;
  width: min(355px,100%);
  justify-self: end;
  padding: 18px;
  border: 1px solid rgba(153,205,255,.16);
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 42px rgba(0,0,0,.12);
}

.hero-command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(225,240,255,.74);
  font-size: 10.5px;
}
.hero-command-status { display: inline-flex; align-items: center; gap: 7px; }
.hero-command-status .live-dot { width: 6px; height: 6px; box-shadow: 0 0 0 4px rgba(69,224,170,.11); }

.hero-command-core {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(154,208,255,.12);
  border-radius: 16px;
  background: rgba(4,24,52,.24);
}

.orbital-logo {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(134,207,255,.26);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 28%,#6dc7ff,#286fff 58%,#5e49e8);
  box-shadow: 0 0 0 8px rgba(60,136,255,.08), 0 0 34px rgba(58,147,255,.40);
  font-size: 18px;
  font-weight: 900;
}
.orbital-logo::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px dashed rgba(156,210,255,.24);
  border-radius: 50%;
  animation: orbitSpin 18s linear infinite;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.hero-command-value { font-size: 29px; font-weight: 880; letter-spacing: -.04em; }
.hero-command-value small { margin-left: 4px; color: rgba(208,228,251,.60); font-size: 10px; font-weight: 650; }
.hero-command-label { margin-top: 3px; color: rgba(207,228,251,.60); font-size: 10px; }

.hero-mini-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 10px; }
.hero-mini-card {
  padding: 11px 12px;
  border: 1px solid rgba(155,209,255,.10);
  border-radius: 13px;
  background: rgba(4,24,52,.20);
}
.hero-mini-card span { display: block; color: rgba(207,228,251,.55); font-size: 9.5px; }
.hero-mini-card strong { display: block; margin-top: 5px; font-size: 15px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  text-align: left;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.metric-card::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  right: -38px;
  top: -42px;
  border-radius: 50%;
  opacity: .45;
  background: var(--metric-soft,var(--primary-soft));
}

.metric-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb,var(--metric,var(--primary)) 30%,var(--border));
  box-shadow: var(--shadow-md);
}

.metric-card.blue { --metric: var(--primary); --metric-soft: var(--primary-soft); }
.metric-card.red { --metric: var(--danger); --metric-soft: var(--danger-soft); }
.metric-card.orange { --metric: var(--warning); --metric-soft: var(--warning-soft); }
.metric-card.violet { --metric: var(--violet); --metric-soft: var(--violet-soft); }

.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metric-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb,var(--metric,var(--primary)) 14%,transparent);
  border-radius: 13px;
  color: var(--metric,var(--primary));
  background: var(--metric-soft,var(--primary-soft));
}
.metric-arrow { color: var(--text-soft); transition: transform var(--transition), color var(--transition); }
.metric-card:hover .metric-arrow { color: var(--metric,var(--primary)); transform: translate(2px,-2px); }
.metric-label { margin-top: 13px; color: var(--text-muted); font-size: 11px; font-weight: 720; }
.metric-value-row { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
.metric-value { font-size: 31px; font-weight: 880; letter-spacing: -.045em; }
.metric-value small { color: var(--text-soft); font-size: 10px; font-weight: 650; }
.metric-caption { margin-top: 8px; color: var(--text-soft); font-size: 9.5px; line-height: 1.45; }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0,1.62fr) minmax(350px,.88fr);
  gap: 18px;
  align-items: start;
}

.insight-grid {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(320px,.85fr);
  gap: 18px;
  margin-top: 18px;
}

.stack { display: grid; gap: 18px; }

.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
}

.panel-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg,color-mix(in srgb,var(--surface-raised) 92%,#fff),var(--surface-raised));
}

.panel-heading { display: flex; align-items: center; gap: 12px; }
.panel-heading-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36,107,254,.12);
  border-radius: 10px;
  color: var(--primary);
  background: var(--primary-soft);
}
.panel-title { margin: 0; font-size: 14px; letter-spacing: -.015em; }
.panel-subtitle { margin-top: 4px; color: var(--text-muted); font-size: 10.5px; line-height: 1.45; }

.task-table-wrap { overflow-x: auto; }
.task-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.task-table th {
  padding: 10px 14px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .02em;
  text-align: left;
  white-space: nowrap;
}
.task-table td {
  padding: 13px 14px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10.5px;
  vertical-align: middle;
}
.task-table tbody tr { transition: background var(--transition); }
.task-table tbody tr:hover { background: color-mix(in srgb,var(--primary-soft) 36%,transparent); }
.task-title-cell { min-width: 275px; }
.task-title-row { display: flex; align-items: flex-start; gap: 10px; }
.priority-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; }
.priority-dot.URGENT,.priority-dot.HIGH { background: var(--danger); box-shadow: 0 0 0 4px rgba(229,72,77,.10); }
.priority-dot.MEDIUM { background: var(--warning); box-shadow: 0 0 0 4px rgba(217,119,6,.10); }
.priority-dot.LOW { background: var(--primary); box-shadow: 0 0 0 4px rgba(36,107,254,.10); }
.task-name { color: var(--text); font-size: 11.5px; font-weight: 730; }
.task-reference { margin-top: 4px; color: var(--text-soft); font-size: 9.5px; }
.task-actions { display: flex; justify-content: flex-end; gap: 6px; }
.mini-action { width: 32px; height: 32px; border-color: var(--border); border-radius: 9px; background: var(--surface-raised); }

.app-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
  padding: 15px;
}

.app-card {
  --app-accent: var(--primary);
  --app-soft: var(--primary-soft);
  position: relative;
  min-height: 164px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--text);
  background: var(--surface-raised);
  text-align: left;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.app-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -48px;
  bottom: -52px;
  border-radius: 50%;
  background: var(--app-soft);
  opacity: .55;
}
.app-card.tone-cyan { --app-accent: var(--cyan); --app-soft: var(--cyan-soft); }
.app-card.tone-violet { --app-accent: var(--violet); --app-soft: var(--violet-soft); }
.app-card.tone-amber { --app-accent: var(--warning); --app-soft: var(--warning-soft); }
.app-card.tone-green { --app-accent: var(--success); --app-soft: var(--success-soft); }
.app-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb,var(--app-accent) 28%,var(--border));
  background: color-mix(in srgb,var(--app-soft) 24%,var(--surface-raised));
  box-shadow: var(--shadow-md);
}
.app-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb,var(--app-accent) 14%,transparent);
  border-radius: 13px;
  color: var(--app-accent);
  background: var(--app-soft);
  font-size: 17px;
  font-weight: 850;
}
.app-open-icon { color: var(--text-soft); transition: color var(--transition), transform var(--transition); }
.app-card:hover .app-open-icon { color: var(--app-accent); transform: translate(2px,-2px); }
.app-category { margin-top: 13px; color: var(--app-accent); font-size: 8.5px; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; }
.app-name { margin-top: 4px; color: var(--text); font-size: 12.5px; font-weight: 790; line-height: 1.35; }
.app-description { min-height: 30px; margin-top: 5px; color: var(--text-muted); font-size: 9.5px; line-height: 1.55; }
.app-card-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.app-launch-label { color: var(--text-soft); font-size: 9px; font-weight: 700; }

.announcement-list { padding: 3px 17px 8px; }
.announcement-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.announcement-item:last-child { border-bottom: 0; }
.announcement-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36,107,254,.12);
  border-radius: 11px;
  color: var(--primary);
  background: var(--primary-soft);
}
.announcement-icon.warning { color: var(--warning); background: var(--warning-soft); border-color: rgba(217,119,6,.14); }
.announcement-title { color: var(--text); font-size: 11.5px; font-weight: 760; line-height: 1.5; }
.announcement-body { margin-top: 4px; color: var(--text-muted); font-size: 9.5px; line-height: 1.6; }
.announcement-date { color: var(--text-soft); font-size: 9px; white-space: nowrap; }

.status-list { padding: 3px 17px 10px; }
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.status-row:last-child { border-bottom: 0; }
.status-info { min-width: 0; display: flex; align-items: center; gap: 10px; }
.status-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 10px;
  font-weight: 850;
}
.status-name { color: var(--text); font-size: 10.5px; font-weight: 710; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-description { margin-top: 2px; color: var(--text-soft); font-size: 8.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty-state {
  padding: 38px 18px;
  color: var(--text-muted);
  text-align: center;
  font-size: 11.5px;
}
.empty-state .empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 11px;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--text-soft);
  background: var(--surface-subtle);
  font-size: 20px;
}

.full-panel-body { padding: 18px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-select { width: auto; min-width: 160px; min-height: 38px; padding: 0 34px 0 11px; color: var(--text); }

.profile-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 18px; }
.profile-card { padding: 26px; text-align: center; }
.profile-card .avatar { width: 86px; height: 86px; margin: 0 auto; border-radius: 24px; font-size: 26px; }
.profile-card h2 { margin: 16px 0 5px; font-size: 20px; }
.profile-card p { margin: 0; color: var(--text-muted); font-size: 11px; }
.profile-facts { margin-top: 21px; text-align: left; }
.profile-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 10.5px; }
.profile-fact span:first-child { color: var(--text-muted); }
.settings-card { padding: 23px; }
.settings-card h3 { margin: 0 0 16px; font-size: 14px; }

.department-layout-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.department-layout-summary > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-subtle); }
.department-layout-summary strong { color: var(--text); font-size: 20px; line-height: 1; }
.department-layout-summary span { color: var(--text-soft); font-size: 9px; }
.department-user-groups { display: grid; gap: 16px; }
.department-user-group { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: 0 3px 12px rgba(25,52,93,.04); }
.department-group-header { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg,var(--surface-subtle),var(--surface)); }
.department-group-header h3 { margin: 0; color: var(--text); font-size: 13px; }
.department-group-header span { display: block; margin-top: 3px; color: var(--text-soft); font-size: 8.5px; }
.department-group-header > strong { min-width: 48px; padding: 6px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; text-align: center; }
.department-group-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); }
.department-tone-admin { border-color: color-mix(in srgb,var(--primary) 34%,var(--border)); }
.department-tone-admin .department-group-header { background: linear-gradient(90deg,var(--primary-soft),var(--surface)); }
.department-tone-warning { border-color: color-mix(in srgb,#d97706 38%,var(--border)); }
.department-team-list { display: grid; gap: 12px; padding: 12px; }
.team-user-group { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.team-group-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); background: var(--surface-subtle); font-size: 9px; }
.team-group-header span { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.team-group-header strong { color: var(--text-soft); font-size: 8.5px; }
.team-empty,.department-empty { padding: 14px 16px; color: var(--text-soft); font-size: 9px; text-align: center; }
.team-user-group .admin-table-wrap { border: 0; border-radius: 0; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; }
.admin-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.admin-table th { padding: 11px 13px; color: var(--text-soft); background: var(--surface-subtle); font-size: 9.5px; text-align: left; }
.admin-table td { padding: 12px 13px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell .avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }
.user-email { margin-top: 3px; color: var(--text-soft); font-size: 8.8px; }

/* --------------------------------------------------------------------------
   Modals and utilities
   -------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4,15,32,.58);
  backdrop-filter: blur(7px);
}
.modal {
  width: min(690px,100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); background: var(--surface-subtle); }
.modal-body { padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.form-field.full { grid-column: 1/-1; }
.form-field label { display: block; margin-bottom: 7px; font-size: 10.5px; font-weight: 730; }
.form-field input,.form-field select { height: 42px; padding: 0 12px; }
.form-field textarea { min-height: 86px; padding: 11px 12px; resize: vertical; }
.form-hint { margin-top: 5px; color: var(--text-muted); font-size: 9px; line-height: 1.5; }

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter: blur(6px);
}
.loader-card {
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 19px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  font-size: 11.5px;
  font-weight: 730;
}
.spinner {
  width: 23px;
  height: 23px;
  border: 3px solid var(--primary-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 220;
  width: min(380px,calc(100vw - 40px));
  display: grid;
  gap: 10px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  font-size: 10.5px;
  line-height: 1.55;
  animation: toastIn .2s ease-out;
}
.toast.success { border-color: rgba(15,159,110,.26); }
.toast.error { border-color: rgba(229,72,77,.28); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

.placeholder-view {
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
}
.placeholder-view .big-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border: 1px solid rgba(36,107,254,.14);
  border-radius: 24px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 34px;
}
.placeholder-view h2 { margin: 17px 0 8px; }
.placeholder-view p { max-width: 560px; margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.7; }

.workspace-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 0 3px;
  color: var(--text-soft);
  font-size: 9px;
}
.workspace-footer span { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1260px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid,.insight-grid { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1020px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .mobile-brand { display: flex; }
  .login-panel { min-height: 100vh; }

  .sidebar {
    transform: translateX(-103%);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 24px 0 70px rgba(2,12,27,.30);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open + .sidebar-overlay { display: block; }
  .topbar { left: 0; padding: 0 14px; }
  .main-content { margin-left: 0; padding-left: 17px; padding-right: 17px; }
  .mobile-menu-button { display: grid; }
  .global-search { width: min(520px,58vw); }
  .profile-copy { display: none; }
  .profile-layout { grid-template-columns: 1fr; }
}

@media (max-width: 790px) {
  .page-header { flex-direction: column; }
  .page-actions { width: 100%; justify-content: space-between; }
  .future-hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-command { width: 100%; justify-self: stretch; }
  .app-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topbar { gap: 7px; }
  .global-search { flex: 1; width: auto; }
  .search-shortcut { display: none; }
  .global-search input { padding-right: 12px; }
  .topbar-actions .help-button { display: none; }
  .main-content { padding-top: calc(var(--topbar-height) + 18px); }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .forced-pin-banner { align-items: flex-start; flex-direction: column; }
  .announcement-item { grid-template-columns: 36px minmax(0,1fr); }
  .announcement-date { grid-column: 2; }
  .workspace-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  :root { --topbar-height: 68px; }
  .login-panel { padding: 28px 20px; }
  .login-card h2 { font-size: 29px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 132px; }
  .app-grid { grid-template-columns: 1fr; }
  .future-hero { padding: 22px; border-radius: 22px; }
  .hero-copy h2 { font-size: 27px; }
  .hero-actions .btn { width: 100%; }
  .hero-command-core { align-items: flex-start; }
  .orbital-logo { width: 58px; height: 58px; }
  .page-header h1 { font-size: 24px; }
  .theme-button { display: none; }
  .profile-chip { margin-left: 0; }
  .topbar { padding: 0 10px; }
  .main-content { padding-left: 12px; padding-right: 12px; }
  .panel-header { align-items: flex-start; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-group { align-items: stretch; }
  .filter-select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
  

/* ==========================================================================
   Workspace v3 — Google Workspace inspired, EasyPay branded
   ========================================================================== */
:root {
  --primary: #0b57d0;
  --primary-strong: #0842a0;
  --primary-deep: #062e6f;
  --primary-soft: #eaf2ff;
  --surface-muted: #f8fafd;
  --surface-subtle: #f6f8fc;
  --border: #e1e6ef;
  --border-strong: #c7d0df;
  --text: #1f1f1f;
  --text-muted: #5f6368;
  --text-soft: #80868b;
  --sidebar-width: 246px;
  --topbar-height: 72px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(60,64,67,.08), 0 2px 6px rgba(60,64,67,.05);
  --shadow-md: 0 4px 12px rgba(60,64,67,.12), 0 8px 28px rgba(60,64,67,.08);
}

html[data-theme="dark"] {
  --surface: #1f1f1f;
  --surface-raised: #242424;
  --surface-muted: #111315;
  --surface-subtle: #202124;
  --border: #3c4043;
  --border-strong: #5f6368;
  --text: #e8eaed;
  --text-muted: #bdc1c6;
  --text-soft: #9aa0a6;
  --primary-soft: #1b3155;
}

body { background: var(--surface-muted); color: var(--text); }
.sidebar {
  color: var(--text);
  border-right: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}
html[data-theme="dark"] .sidebar { background: var(--surface); color: var(--text); }
.sidebar::before,.sidebar::after { display:none; }
.sidebar-brand { border-bottom: 0; padding-top: 18px; padding-bottom: 12px; }
.sidebar .brand-title { color: var(--text); }
.sidebar .brand-subtitle { color: var(--text-muted); }
.sidebar .brand-mark {
  border: 0;
  background: linear-gradient(145deg,#0b57d0,#4285f4);
  box-shadow: 0 4px 12px rgba(11,87,208,.22);
}
.workspace-pill {
  margin: 5px 14px 10px;
  border: 1px solid #d3e3fd;
  color: #0842a0;
  background: #edf4ff;
  box-shadow: none;
}
html[data-theme="dark"] .workspace-pill { border-color:#3c5f94; color:#a8c7fa; background:#172b4d; }
.workspace-pill span { color: #5f6368; }
html[data-theme="dark"] .workspace-pill span { color:#bdc1c6; }
.workspace-pill-icon { color:#0b57d0; background:#d3e3fd; }
.nav-area { padding-left: 10px; padding-right: 10px; }
.nav-section-label { color: var(--text-soft); letter-spacing: .06em; }
.nav-button { color: var(--text-muted); border-radius: 999px; }
.nav-button:hover { color: var(--text); background:#f1f3f4; transform:none; }
.nav-button.active { color:#041e49; background:#d3e3fd; box-shadow:none; }
.nav-button.active::before { display:none; }
html[data-theme="dark"] .nav-button { color:var(--text-muted); }
html[data-theme="dark"] .nav-button:hover { color:var(--text); background:#303134; }
html[data-theme="dark"] .nav-button.active { color:#d3e3fd; background:#1b3155; }
.nav-badge { color:#0842a0; background:#fff; }
.sidebar-footer { border-top:0; }
.pilot-card { border:1px solid var(--border); color:var(--text-muted); background:var(--surface-subtle); }
.pilot-card strong { color:var(--text); }

.topbar {
  left: var(--sidebar-width);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow: none;
}
.global-search {
  max-width: 720px;
  border: 1px solid transparent;
  border-radius: 28px;
  background: #eef3f8;
  box-shadow: none;
}
.global-search:focus-within { border-color:#a8c7fa; background:var(--surface); box-shadow:0 1px 2px rgba(60,64,67,.1),0 2px 8px rgba(60,64,67,.08); }
html[data-theme="dark"] .global-search { background:#303134; }
.profile-chip { border:0; background:transparent; box-shadow:none; }
.profile-chip:hover,.icon-button:hover { background:#eef0f3; }
html[data-theme="dark"] .profile-chip:hover,html[data-theme="dark"] .icon-button:hover { background:#303134; }
.workspace-connection-dot { position:absolute; right:5px; bottom:5px; width:8px; height:8px; border:2px solid var(--surface); border-radius:50%; background:#1e8e3e; }
.workspace-connection-dot.partial { background:#f9ab00; }
.icon-button { position:relative; }
.main-content { background:var(--surface-muted); }
.content-container { max-width: 1480px; }
.page-kicker { color:#0b57d0; }
.page-kicker::before { background:#0b57d0; }

.workspace-google-button { margin-top:12px; border:1px solid var(--border-strong); color:var(--text); background:var(--surface); }
.workspace-google-button:hover { background:var(--surface-subtle); }
.workspace-google-g { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#0b57d0; background:#eaf2ff; font-weight:850; }

.workspace-welcome {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.78fr);
  gap:20px;
  margin-bottom:18px;
  padding:28px 30px;
  border:1px solid #d3e3fd;
  border-radius:24px;
  background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 60%,#e9f2ff 100%);
  box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] .workspace-welcome { border-color:#38537a; background:linear-gradient(135deg,#1c2635,#16283f); }
.workspace-eyebrow { display:inline-flex; align-items:center; gap:8px; color:#0b57d0; font-size:11px; font-weight:750; }
html[data-theme="dark"] .workspace-eyebrow { color:#a8c7fa; }
.workspace-welcome h2 { margin:10px 0 8px; font-size:clamp(28px,3vw,40px); letter-spacing:-.04em; }
.workspace-welcome p { max-width:680px; margin:0; color:var(--text-muted); font-size:13px; line-height:1.7; }
.workspace-welcome-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.workspace-focus-card { align-self:stretch; padding:18px; border:1px solid rgba(11,87,208,.14); border-radius:18px; background:rgba(255,255,255,.82); }
html[data-theme="dark"] .workspace-focus-card { border-color:#3c5f94; background:rgba(31,31,31,.72); }
.workspace-focus-head { display:flex; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--border); color:var(--text-muted); font-size:10.5px; }
.workspace-focus-row { display:flex; align-items:center; gap:12px; padding-top:14px; }
.workspace-focus-row + .workspace-focus-row { margin-top:12px; border-top:1px solid var(--border); }
.workspace-focus-row div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.workspace-focus-row strong { font-size:12.5px; }
.workspace-focus-row small { color:var(--text-muted); font-size:10.5px; line-height:1.45; }
.focus-icon { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; }
.focus-icon.urgent { color:#b3261e; background:#fce8e6; }
.focus-icon.approval { color:#b06000; background:#fef7e0; }

.workspace-quick-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.workspace-quick-card { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:14px; border:1px solid var(--border); border-radius:16px; text-align:left; color:var(--text); background:var(--surface); box-shadow:var(--shadow-xs); cursor:pointer; transition:.18s ease; }
.workspace-quick-card:hover { border-color:#a8c7fa; box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.workspace-quick-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#0b57d0; background:#eaf2ff; }
.workspace-quick-card.green .workspace-quick-icon { color:#137333; background:#e6f4ea; }
.workspace-quick-card.violet .workspace-quick-icon { color:#6b39a8; background:#f3e8fd; }
.workspace-quick-card.orange .workspace-quick-icon { color:#b06000; background:#fef7e0; }
.workspace-quick-card > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:3px; }
.workspace-quick-card strong { font-size:11.5px; }
.workspace-quick-card small { overflow:hidden; color:var(--text-muted); font-size:9.5px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.workspace-quick-arrow { color:var(--text-soft); }

.workspace-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.workspace-main-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(340px,.65fr); gap:18px; margin-bottom:18px; }
.workspace-content-grid,.workspace-bottom-grid,.workspace-governance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.panel { border-color:var(--border); box-shadow:var(--shadow-xs); }

.workspace-event-list { display:flex; flex-direction:column; }
.workspace-event-item { display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--border); }
.workspace-event-item:last-child { border-bottom:0; }
.workspace-event-date { width:43px; height:48px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #d3e3fd; border-radius:12px; color:#0b57d0; background:#f6f9ff; }
html[data-theme="dark"] .workspace-event-date { border-color:#3c5f94; background:#1b3155; color:#a8c7fa; }
.workspace-event-date strong { font-size:17px; line-height:1; }
.workspace-event-date span { margin-top:4px; font-size:9px; }
.workspace-event-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.workspace-event-copy strong { overflow:hidden; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.workspace-event-copy span { color:var(--text-muted); font-size:9.5px; }

.workspace-resource-list { display:flex; flex-direction:column; }
.workspace-resource-row { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:11px; padding:11px 0; border:0; border-bottom:1px solid var(--border); text-align:left; color:var(--text); background:transparent; cursor:pointer; }
.workspace-resource-row:last-child { border-bottom:0; }
.workspace-resource-row:hover strong { color:#0b57d0; }
.workspace-resource-icon,.resource-card-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; }
.workspace-resource-icon.drive,.resource-card-icon.drive { color:#137333; background:#e6f4ea; }
.workspace-resource-icon.doc,.resource-card-icon.doc { color:#0b57d0; background:#eaf2ff; }
.workspace-resource-icon.sheet,.resource-card-icon.sheet { color:#137333; background:#e6f4ea; }
.workspace-resource-icon.slide,.resource-card-icon.slide { color:#b06000; background:#fef7e0; }
.workspace-resource-icon.form,.resource-card-icon.form { color:#6b39a8; background:#f3e8fd; }
.workspace-resource-icon.calendar,.resource-card-icon.calendar { color:#b3261e; background:#fce8e6; }
.workspace-resource-icon.link,.resource-card-icon.link { color:#5f6368; background:#f1f3f4; }
.workspace-resource-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.workspace-resource-copy strong { overflow:hidden; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.workspace-resource-copy small { overflow:hidden; color:var(--text-muted); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.workspace-capability-note,.workspace-form-note,.resource-overview-banner { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #d3e3fd; border-radius:14px; color:#0842a0; background:#f1f6ff; font-size:10.5px; line-height:1.5; }
html[data-theme="dark"] .workspace-capability-note,html[data-theme="dark"] .workspace-form-note,html[data-theme="dark"] .resource-overview-banner { border-color:#3c5f94; color:#a8c7fa; background:#172b4d; }

.workspace-service-compact-list { display:flex; flex-direction:column; }
.workspace-service-compact { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:9px 0; border:0; border-bottom:1px solid var(--border); text-align:left; color:var(--text); background:transparent; cursor:pointer; }
.workspace-service-compact:last-child { border-bottom:0; }
.workspace-service-compact > span:nth-child(2) { display:flex; flex-direction:column; gap:3px; }
.workspace-service-compact strong { font-size:11px; }
.workspace-service-compact small { color:var(--text-muted); font-size:9px; }
.workspace-service-glyph { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; font-size:11px; font-weight:850; }
.workspace-service-glyph.large { width:48px; height:48px; border-radius:14px; font-size:15px; }
.service-drive { color:#137333; background:#e6f4ea; }
.service-calendar { color:#0b57d0; background:#eaf2ff; }
.service-forms { color:#6b39a8; background:#f3e8fd; }
.service-gmail { color:#b3261e; background:#fce8e6; }
.service-chat { color:#137333; background:#e6f4ea; }
.service-meet { color:#6b39a8; background:#f3e8fd; }
.service-dot { width:8px; height:8px; border-radius:50%; }
.service-dot.connected { background:#1e8e3e; }
.service-dot.setup { background:#f9ab00; }

.workspace-summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; margin-bottom:18px; border:1px solid var(--border); border-radius:18px; background:var(--border); }
.workspace-summary-strip > div { display:flex; flex-direction:column; gap:5px; padding:16px 18px; background:var(--surface); }
.workspace-summary-strip span { color:var(--text-muted); font-size:9.5px; }
.workspace-summary-strip strong { font-size:22px; letter-spacing:-.04em; }
.request-table .request-primary,.request-table .request-user { display:flex; align-items:center; gap:8px; }
.request-table .request-primary { flex-direction:column; align-items:flex-start; gap:3px; }
.request-table .request-primary strong { font-size:11px; }
.request-table .request-primary span { color:var(--text-muted); font-size:9px; }
.request-user span:last-child { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; }
.avatar.tiny { width:26px; height:26px; font-size:8px; }
.table-actions { display:flex; justify-content:flex-end; gap:6px; }
.btn-xs { min-height:28px; padding:0 9px; border-radius:8px; font-size:9px; }
.btn-success { color:#fff; border-color:#137333; background:#137333; }
.btn-danger-soft { color:#b3261e; border-color:#f3b7b1; background:#fce8e6; }
.table-icon-button { width:29px; height:29px; display:inline-grid; place-items:center; border:1px solid var(--border); border-radius:8px; color:var(--text-muted); background:var(--surface); cursor:pointer; }
.table-icon-button.danger { color:#b3261e; }
.muted-dash { color:var(--text-soft); }

.workspace-modal { width:min(680px,calc(100vw - 28px)); }
.form-grid.two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field textarea,.field select { width:100%; border:1px solid var(--border-strong); border-radius:11px; color:var(--text); background:var(--surface); font:inherit; }
.field textarea { padding:12px; resize:vertical; }
.field select { min-height:42px; padding:0 11px; }

.resource-overview-banner { margin-bottom:22px; }
.resource-overview-icon { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:13px; background:#d3e3fd; }
.resource-overview-banner > div:last-child { display:flex; flex-direction:column; gap:3px; }
.resource-overview-banner strong { color:var(--text); font-size:12px; }
.resource-overview-banner span { color:var(--text-muted); }
.resource-section { margin-bottom:22px; }
.resource-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.resource-section-head h2 { margin:0; font-size:15px; }
.resource-section-head span { color:var(--text-muted); font-size:10px; }
.resource-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.resource-card { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:16px; border:1px solid var(--border); border-radius:16px; text-align:left; color:var(--text); background:var(--surface); box-shadow:var(--shadow-xs); cursor:pointer; }
.resource-card:hover { border-color:#a8c7fa; box-shadow:var(--shadow-sm); }
.resource-card-body { min-width:0; display:flex; flex-direction:column; gap:5px; }
.resource-card-meta { color:#0b57d0; font-size:8.5px; font-weight:700; text-transform:uppercase; }
.resource-card-body strong { font-size:11.5px; }
.resource-card-body small { overflow:hidden; color:var(--text-muted); font-size:9.5px; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.resource-card-arrow { color:var(--text-soft); }

.calendar-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; margin-bottom:18px; padding:18px 20px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.calendar-hero-date { width:68px; height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border:1px solid #d3e3fd; border-radius:15px; color:#0b57d0; background:#f6f9ff; }
html[data-theme="dark"] .calendar-hero-date { border-color:#3c5f94; color:#a8c7fa; background:#1b3155; }
.calendar-hero-date span { font-size:10px; }
.calendar-hero-date strong { font-size:29px; line-height:1.15; }
.calendar-hero h2 { margin:0 0 5px; font-size:18px; }
.calendar-hero p { margin:0; color:var(--text-muted); font-size:10.5px; }
.calendar-full-panel .workspace-event-item { padding:15px 0; }
.calendar-source-strip { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:-8px 0 18px; }
.calendar-source-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-muted); background:var(--surface); font-size:8.8px; }
.calendar-source-chip strong { color:var(--text); font-weight:700; }
.calendar-source-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#0b57d0; }
.calendar-source-dot.tone-1 { background:#0b57d0; }
.calendar-source-dot.tone-2 { background:#137333; }
.calendar-source-dot.tone-3 { background:#6b39a8; }
.calendar-source-dot.tone-4 { background:#b06000; }
.calendar-source-dot.tone-5 { background:#b3261e; }
.calendar-calendar-warning { display:flex; align-items:flex-start; gap:8px; margin:-8px 0 18px; padding:10px 12px; border:1px solid #f9d57e; border-radius:12px; color:#7a4d00; background:#fff9e8; font-size:9px; line-height:1.5; }
html[data-theme="dark"] .calendar-calendar-warning { border-color:#765a1e; color:#fdd663; background:#30280f; }

.calendar-page-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.calendar-sync-note { display:flex; align-items:center; gap:7px; color:var(--text-muted); font-size:9.5px; }
.calendar-sync-note .live-dot { width:7px; height:7px; }
.calendar-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }
.calendar-month-card,.calendar-agenda-card { min-width:0; }
.calendar-month-card { overflow:hidden; padding:0; }
.calendar-month-toolbar { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border); }
.calendar-month-heading { min-width:0; display:flex; align-items:center; gap:12px; }
.calendar-month-heading h2 { margin:0; font-size:17px; letter-spacing:-.02em; }
.calendar-month-heading p { margin:3px 0 0; color:var(--text-muted); font-size:9.5px; }
.calendar-nav-group { display:flex; align-items:center; gap:6px; }
.calendar-nav-button { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; color:var(--text-muted); background:var(--surface); }
.calendar-nav-button:hover { color:var(--primary); border-color:#a8c7fa; background:var(--primary-soft); }
.calendar-month-scroll { overflow-x:auto; overscroll-behavior-inline:contain; }
.calendar-month-inner { min-width:760px; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-weekdays { border-bottom:1px solid var(--border); background:var(--surface-subtle); }
.calendar-weekday { padding:10px 8px; color:var(--text-muted); font-size:9px; font-weight:760; text-align:center; }
.calendar-grid { background:var(--border); gap:1px; }
.calendar-day { position:relative; min-height:118px; overflow:hidden; background:var(--surface); }
.calendar-day.is-outside { background:var(--surface-subtle); }
.calendar-day.is-selected { box-shadow:inset 0 0 0 2px var(--primary); z-index:1; }
.calendar-day.is-today .calendar-day-number { color:#fff; background:var(--primary); }
.calendar-day-select { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 9px 5px; border:0; color:var(--text); background:transparent; }
.calendar-day-select:hover { color:var(--primary); }
.calendar-day-number { min-width:26px; height:26px; display:grid; place-items:center; border-radius:999px; font-size:10px; font-weight:780; }
.calendar-day-month { color:var(--text-soft); font-size:8px; }
.calendar-day-events { display:flex; flex-direction:column; gap:4px; padding:0 6px 8px; }
.calendar-event-chip { width:100%; min-width:0; display:flex; align-items:center; gap:6px; padding:5px 7px; border:0; border-radius:7px; text-align:left; color:#0842a0; background:#eaf2ff; }
.calendar-event-chip:hover { filter:brightness(.97); transform:translateY(-1px); }
.calendar-event-chip::before { content:""; width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:currentColor; }
.calendar-event-chip span { min-width:0; overflow:hidden; font-size:8.5px; font-weight:680; text-overflow:ellipsis; white-space:nowrap; }
.calendar-event-chip.tone-1 { color:#0b57d0; background:#eaf2ff; }
.calendar-event-chip.tone-2 { color:#137333; background:#e6f4ea; }
.calendar-event-chip.tone-3 { color:#6b39a8; background:#f3e8fd; }
.calendar-event-chip.tone-4 { color:#b06000; background:#fef7e0; }
.calendar-event-chip.tone-5 { color:#b3261e; background:#fce8e6; }
html[data-theme="dark"] .calendar-event-chip.tone-1 { color:#a8c7fa; background:#19345f; }
html[data-theme="dark"] .calendar-event-chip.tone-2 { color:#81c995; background:#173b2a; }
html[data-theme="dark"] .calendar-event-chip.tone-3 { color:#d7aefb; background:#352151; }
html[data-theme="dark"] .calendar-event-chip.tone-4 { color:#fdd663; background:#44340e; }
html[data-theme="dark"] .calendar-event-chip.tone-5 { color:#f28b82; background:#4a2023; }
.calendar-more-button { width:100%; padding:3px 7px; border:0; color:var(--primary); background:transparent; font-size:8.5px; font-weight:720; text-align:left; }
.calendar-loading-row { display:flex; align-items:center; justify-content:center; gap:9px; min-height:62px; border-top:1px solid var(--border); color:var(--text-muted); font-size:10px; }
.calendar-agenda-card { position:sticky; top:calc(var(--topbar-height) + 18px); overflow:hidden; }
.calendar-agenda-head { padding:17px 18px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--surface-blue),var(--surface)); }
.calendar-agenda-head span { color:var(--primary); font-size:8.5px; font-weight:760; letter-spacing:.06em; text-transform:uppercase; }
.calendar-agenda-head h2 { margin:5px 0 0; font-size:16px; }
.calendar-agenda-head p { margin:5px 0 0; color:var(--text-muted); font-size:9.5px; }
.calendar-agenda-list { display:flex; flex-direction:column; max-height:620px; overflow:auto; }
.calendar-agenda-item { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:14px 16px; border:0; border-bottom:1px solid var(--border); text-align:left; color:var(--text); background:var(--surface); }
.calendar-agenda-item:hover { background:var(--surface-subtle); }
.calendar-agenda-item:last-child { border-bottom:0; }
.calendar-agenda-time { min-width:48px; padding-top:2px; color:var(--primary); font-size:9px; font-weight:760; }
.calendar-agenda-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.calendar-agenda-copy strong { font-size:10.5px; line-height:1.45; }
.calendar-agenda-copy small { color:var(--text-muted); font-size:8.5px; line-height:1.45; }
.calendar-agenda-empty { padding:30px 18px; }
.calendar-event-modal { width:min(620px,calc(100vw - 28px)); }
.calendar-event-modal-header { display:flex; align-items:flex-start; gap:13px; }
.calendar-event-modal-icon { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; color:#0b57d0; background:#eaf2ff; }
.calendar-event-meta { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 14px; margin-top:18px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface-subtle); }
.calendar-event-meta dt { color:var(--text-muted); font-size:9px; }
.calendar-event-meta dd { margin:0; font-size:10px; line-height:1.55; overflow-wrap:anywhere; }
.calendar-event-description { margin-top:14px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; color:var(--text-muted); background:var(--surface); font-size:10px; line-height:1.7; white-space:pre-wrap; }

.workspace-account-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; margin-bottom:18px; padding:22px; border:1px solid #d3e3fd; border-radius:20px; background:linear-gradient(135deg,#f7fbff,#eef5ff); }
html[data-theme="dark"] .workspace-account-card { border-color:#3c5f94; background:linear-gradient(135deg,#1c2635,#172b4d); }
.workspace-account-icon { width:60px; height:60px; display:grid; place-items:center; border-radius:18px; color:#0b57d0; background:#d3e3fd; }
.workspace-account-copy span { color:#0b57d0; font-size:9px; font-weight:750; text-transform:uppercase; }
.workspace-account-copy h2 { margin:4px 0 5px; font-size:20px; }
.workspace-account-copy p { margin:0; color:var(--text-muted); font-size:10.5px; line-height:1.5; }
.workspace-account-score { display:flex; flex-direction:column; align-items:flex-end; }
.workspace-account-score strong { font-size:28px; letter-spacing:-.05em; }
.workspace-account-score span { color:var(--text-muted); font-size:9.5px; }
.workspace-service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:18px; }
.workspace-service-card { min-height:190px; display:flex; flex-direction:column; align-items:flex-start; padding:18px; border:1px solid var(--border); border-radius:18px; text-align:left; color:var(--text); background:var(--surface); box-shadow:var(--shadow-xs); cursor:pointer; }
.workspace-service-card:hover { border-color:#a8c7fa; box-shadow:var(--shadow-sm); }
.workspace-service-card-top { width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.workspace-service-card h3 { margin:18px 0 6px; font-size:14px; }
.workspace-service-card p { margin:0; color:var(--text-muted); font-size:10px; line-height:1.45; }
.workspace-service-open { display:flex; align-items:center; gap:5px; margin-top:auto; padding-top:18px; color:#0b57d0; font-size:10px; font-weight:700; }
.managed-workspace-roadmap { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:22px; align-items:center; margin-bottom:18px; padding:22px; border:1px solid #f9d57e; border-radius:20px; background:#fff9e8; }
html[data-theme="dark"] .managed-workspace-roadmap { border-color:#765a1e; background:#30280f; }
.managed-workspace-roadmap h2 { margin:4px 0 6px; font-size:18px; }
.managed-workspace-roadmap p { margin:0; color:var(--text-muted); font-size:10.5px; line-height:1.55; }
.roadmap-steps { display:flex; flex-direction:column; gap:8px; }
.roadmap-steps span { display:flex; align-items:center; gap:9px; color:var(--text-muted); font-size:10px; }
.roadmap-steps b { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#b06000; }
.migration-readiness-panel { margin-bottom:18px; padding:20px; }
.migration-progress { height:8px; margin:4px 0 16px; overflow:hidden; border-radius:99px; background:var(--surface-soft); }
.migration-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#0b57d0,#1aa260); }
.migration-phase-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.migration-phase-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; border:1px solid var(--border); border-radius:13px; background:var(--surface-soft); }
.migration-phase-row strong { display:block; font-size:10.5px; }
.migration-phase-row small { display:block; margin-top:3px; color:var(--text-muted); font-size:9px; line-height:1.4; }
.governance-list { margin:12px 0 0; padding-left:18px; color:var(--text-muted); font-size:10.5px; line-height:1.9; }

.launcher-backdrop { position:fixed; inset:0; z-index:100; display:flex; justify-content:flex-end; align-items:flex-start; padding:76px 80px 20px 20px; background:rgba(32,33,36,.18); }
.app-launcher { width:min(420px,calc(100vw - 32px)); max-height:calc(100vh - 100px); overflow:auto; padding:18px; border:1px solid var(--border); border-radius:24px; background:var(--surface); box-shadow:var(--shadow-md); }
.app-launcher-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.app-launcher-head > div { display:flex; flex-direction:column; gap:2px; }
.app-launcher-head strong { font-size:14px; }
.app-launcher-head span { color:var(--text-muted); font-size:9.5px; }
.app-launcher-section { padding-top:15px; }
.app-launcher-section h3 { margin:0 0 10px; color:var(--text-muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.app-launcher-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.app-launcher-grid button { min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 4px; border:0; border-radius:12px; color:var(--text); background:transparent; cursor:pointer; }
.app-launcher-grid button:hover { background:var(--surface-subtle); }
.app-launcher-grid strong { max-width:100%; overflow:hidden; font-size:8.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.app-launcher-easypay { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#fff; background:#0b57d0; font-size:9px; font-weight:850; }

@media (max-width:1080px) {
  .topbar { left:0; }
}
@media (max-width:1200px) {
  .workspace-quick-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .workspace-service-grid,.resource-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .department-layout-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calendar-layout { grid-template-columns:1fr; }
  .calendar-agenda-card { position:static; }
  .workspace-welcome,.workspace-main-grid,.workspace-content-grid,.workspace-bottom-grid,.workspace-governance-grid,.managed-workspace-roadmap,.migration-phase-list { grid-template-columns:1fr; }
  .workspace-quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace-metrics,.workspace-summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .launcher-backdrop { padding-right:20px; }
}
@media (max-width:680px) {
  .department-layout-summary { grid-template-columns:1fr; }
  .department-group-header { grid-template-columns:34px minmax(0,1fr) auto; padding:12px; }
  .department-team-list { padding:8px; }
  .calendar-month-toolbar { align-items:flex-start; flex-direction:column; }
  .calendar-page-actions { width:100%; justify-content:flex-start; }
  .calendar-hero { grid-template-columns:auto minmax(0,1fr); }
  .calendar-hero > .badge { grid-column:1/-1; }
  .workspace-welcome { padding:20px; }
  .workspace-quick-actions,.workspace-service-grid,.resource-card-grid,.workspace-metrics,.workspace-summary-strip { grid-template-columns:1fr; }
  .workspace-quick-card small { white-space:normal; }
  .workspace-account-card { grid-template-columns:auto minmax(0,1fr); }
  .workspace-account-score { grid-column:1/-1; align-items:flex-start; }
  .form-grid.two { grid-template-columns:1fr; }
  .request-table-wrap { overflow-x:auto; }
  .request-table { min-width:860px; }
  .app-launcher-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}


.role-chip-list{display:flex;flex-wrap:wrap;gap:6px}

/* User editor — enterprise access-management surface */
.user-editor-backdrop{padding:16px;background:rgba(4,15,32,.66);backdrop-filter:blur(10px)}
.user-editor-modal{width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:var(--surface-subtle);box-shadow:0 28px 80px rgba(4,15,32,.34)}
.user-editor-header{flex:0 0 auto;padding:18px 22px;background:var(--surface-raised)}
.user-editor-heading{min-width:0;display:flex;align-items:center;gap:13px}
.user-editor-heading-icon{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,var(--primary),#164fcf);box-shadow:0 8px 18px rgba(36,107,254,.22)}
.user-editor-heading-icon .ui-icon{width:20px;height:20px}
.user-editor-eyebrow{margin-bottom:2px;color:var(--primary);font-size:8px;font-weight:820;letter-spacing:.11em}
.user-editor-header h3{font-size:17px;line-height:1.3}
.user-editor-header p{max-width:620px;margin:3px 0 0;color:var(--text-soft);font-size:9.5px;line-height:1.5;overflow-wrap:anywhere}
.user-editor-scroll{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:18px 22px 22px;scrollbar-gutter:stable}
.user-editor-section{margin-bottom:14px;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface-raised);box-shadow:0 4px 14px rgba(12,35,64,.035)}
.user-editor-section:last-child{margin-bottom:0}
.user-editor-section-head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--surface-raised),var(--surface))}
.user-editor-section-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:11px;color:var(--primary);background:var(--primary-soft)}
.user-editor-section-icon .ui-icon{width:17px;height:17px}
.user-editor-section-head h4{margin:0;color:var(--text);font-size:11.5px;line-height:1.35}
.user-editor-section-head p{margin:3px 0 0;color:var(--text-soft);font-size:8.7px;line-height:1.5}
.section-step{align-self:start;padding:4px 7px;border:1px solid var(--border);border-radius:999px;color:var(--text-soft);background:var(--surface-subtle);font-size:7.5px;font-weight:800;letter-spacing:.08em}
.user-editor-section-body{padding:16px}
.user-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 16px}
.user-editor-section .form-field{min-width:0}
.user-editor-section .form-field label{margin-bottom:6px;color:var(--text-muted);font-size:9.5px;font-weight:740}
.user-editor-section .form-field input,.user-editor-section .form-field select{width:100%;height:44px;border-color:var(--border-strong);border-radius:11px;background:var(--surface-raised);font-size:10.5px;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}
.user-editor-section .form-field input:focus,.user-editor-section .form-field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent);outline:0}
.user-editor-section .form-field input[readonly],.user-editor-section .form-field select:disabled{color:var(--text-soft);background:var(--surface-subtle);cursor:not-allowed}
.user-editor-section .form-hint{margin-top:5px;font-size:8.4px;line-height:1.5}
.required-mark{color:#d93025;font-size:10px}
.user-access-guidance{min-height:16px;margin-top:6px;padding-left:15px;position:relative;color:var(--text-soft);font-size:8.4px;line-height:1.5}
.user-access-guidance:before{content:'✓';position:absolute;left:0;top:0;color:#188038;font-weight:850}
.user-access-guidance.admin-scope{color:#a15c00}
.user-access-guidance.admin-scope:before{content:'!';width:11px;height:11px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#d97706;font-size:7px}
.role-security-note{display:flex;align-items:center;gap:7px;margin-bottom:12px;padding:9px 11px;border:1px solid #d3e3fd;border-radius:10px;color:#174ea6;background:#f4f8ff;font-size:8.7px;line-height:1.5}
.role-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.role-option{min-height:68px;display:grid;grid-template-columns:18px minmax(0,1fr) 22px;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);cursor:pointer;transition:transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
.role-option:hover{transform:translateY(-1px);border-color:#9bbcf7;background:#f8fbff;box-shadow:0 6px 14px rgba(36,107,254,.07)}
.role-option:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--primary) 20%,transparent);outline-offset:1px}
.role-option:has(input:checked){border-color:#7aa7f8;background:#f0f6ff;box-shadow:inset 3px 0 0 var(--primary)}
.role-option input{width:18px;height:18px;min-width:18px;margin:0;accent-color:var(--primary);cursor:pointer}
.role-option-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.role-option-copy strong{color:var(--text);font-size:9.5px;line-height:1.4}
.role-option-copy small{color:var(--text-soft);font-size:7.5px;line-height:1.35;overflow-wrap:anywhere}
.role-option-check{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:transparent;background:var(--surface-subtle);transition:color var(--transition),background var(--transition)}
.role-option-check .ui-icon{width:12px;height:12px}
.role-option:has(input:checked) .role-option-check{color:#fff;background:var(--primary)}
.user-editor-footer{position:sticky;bottom:0;z-index:2;flex:0 0 auto;align-items:center;justify-content:space-between;padding:13px 22px;background:color-mix(in srgb,var(--surface-raised) 94%,transparent);backdrop-filter:blur(12px);box-shadow:0 -8px 20px rgba(12,35,64,.04)}
.user-editor-footer-note{display:flex;align-items:center;gap:7px;color:var(--text-soft);font-size:8.5px}
.user-editor-footer-actions{display:flex;align-items:center;gap:9px}
.user-editor-footer .btn{min-width:104px;height:40px}
.user-editor-footer .btn-primary{min-width:176px}
html[data-theme="dark"] .role-security-note{border-color:#315a8f;color:#aecbfa;background:#172b4d}
html[data-theme="dark"] .role-option:hover,html[data-theme="dark"] .role-option:has(input:checked){background:#172b4d}
@media(max-width:820px){.role-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .user-editor-backdrop{padding:8px;place-items:stretch}
  .user-editor-modal{width:100%;max-height:calc(100dvh - 16px);margin:auto;border-radius:17px}
  .user-editor-header{padding:14px}
  .user-editor-heading-icon{width:38px;height:38px;border-radius:11px}
  .user-editor-eyebrow{display:none}
  .user-editor-header h3{font-size:15px}
  .user-editor-header p{font-size:8.5px}
  .user-editor-scroll{padding:12px}
  .user-editor-section-head{grid-template-columns:34px minmax(0,1fr) auto;padding:12px;gap:9px}
  .user-editor-section-icon{width:32px;height:32px}
  .user-editor-section-body{padding:13px}
  .user-editor-grid,.role-option-grid{grid-template-columns:1fr}
  .role-option{min-height:62px}
  .user-editor-footer{padding:11px 12px;gap:8px}
  .user-editor-footer-note{display:none}
  .user-editor-footer-actions{width:100%}
  .user-editor-footer-actions .btn{flex:1;min-width:0}
  .user-editor-footer .btn-primary{min-width:0}
}

/* User-account lifecycle actions */
.user-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}
.user-row-actions .btn-danger{border-color:rgba(229,72,77,.18)}
.delete-user-backdrop{padding:18px;background:rgba(19,10,17,.68);backdrop-filter:blur(10px)}
.delete-user-modal{width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 36px);overflow:hidden;border:1px solid color-mix(in srgb,var(--danger) 22%,var(--border));border-radius:22px;background:var(--surface-raised);box-shadow:0 30px 90px rgba(20,8,15,.30)}
.delete-user-header{display:grid;grid-template-columns:48px minmax(0,1fr) 40px;align-items:start;gap:13px;padding:20px 22px;border-bottom:1px solid var(--border)}
.delete-user-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:var(--danger);background:var(--danger-soft)}
.delete-user-icon .ui-icon{width:22px;height:22px}
.delete-user-eyebrow{margin:1px 0 3px;color:var(--danger);font-size:8px;font-weight:850;letter-spacing:.13em}
.delete-user-header h3{margin:0;font-size:18px;line-height:1.35}
.delete-user-header p{margin:4px 0 0;color:var(--text-muted);font-size:10px;line-height:1.55}
.delete-user-body{padding:20px 22px}
.delete-user-account{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface-subtle)}
.delete-user-account strong,.delete-user-account span{display:block}
.delete-user-account strong{font-size:11px}
.delete-user-account span{margin-top:2px;color:var(--text-muted);font-size:9px;overflow-wrap:anywhere}
.delete-user-warning{margin:14px 0;padding:13px 14px;border:1px solid rgba(229,72,77,.20);border-radius:13px;color:var(--text-muted);background:var(--danger-soft);font-size:9.5px;line-height:1.65}
.delete-user-warning>strong{color:var(--danger);font-size:10.5px}
.delete-user-warning ul{margin:7px 0;padding-left:19px}
.delete-user-warning p{margin:7px 0 0;color:var(--danger);font-weight:750}
.delete-user-body .form-field label{display:block;margin-bottom:7px;color:var(--text-muted);font-size:9.5px;line-height:1.55}
.delete-user-body .form-field label strong{color:var(--text);overflow-wrap:anywhere}
.delete-user-body .form-field input{width:100%;height:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:11px;color:var(--text);background:var(--surface-raised);font-size:10.5px;outline:0}
.delete-user-body .form-field input:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(229,72,77,.11)}
.delete-user-footer{display:flex;justify-content:flex-end;gap:9px;padding:14px 22px;background:var(--surface-subtle)}
.delete-user-footer .btn{min-width:116px}
.delete-user-footer .btn-danger{min-width:160px;color:#fff;background:linear-gradient(135deg,#e5484d,#c92f3b);box-shadow:0 9px 22px rgba(229,72,77,.20)}
.delete-user-footer .btn-danger:disabled{color:var(--text-soft);border-color:var(--border);background:var(--surface-muted);box-shadow:none}
@media(max-width:640px){
  .user-row-actions{align-items:stretch;flex-direction:column}
  .delete-user-backdrop{padding:8px}
  .delete-user-modal{width:100%;margin:auto;border-radius:17px}
  .delete-user-header{grid-template-columns:42px minmax(0,1fr) 36px;padding:16px;gap:10px}
  .delete-user-icon{width:40px;height:40px}
  .delete-user-body{padding:16px}
  .delete-user-footer{padding:12px 16px}
  .delete-user-footer .btn{flex:1;min-width:0}
}

.team-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.team-member-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.team-member-card{padding:16px;border:1px solid var(--border);border-radius:15px;background:var(--surface);display:flex;flex-direction:column;gap:12px}
.team-member-head{display:flex;align-items:center;gap:10px}.team-member-copy{min-width:0}.team-member-copy strong{display:block;font-size:11px;color:var(--text)}.team-member-copy span{display:block;margin-top:3px;color:var(--text-soft);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-member-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.team-member-stats div{padding:9px;border-radius:10px;background:var(--surface-subtle)}.team-member-stats span{display:block;color:var(--text-soft);font-size:8px}.team-member-stats strong{display:block;margin-top:3px;font-size:13px;color:var(--text)}
.access-level-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:8.5px;font-weight:750;background:var(--primary-soft);color:var(--primary)}
.form-section-title{grid-column:1/-1;margin-top:5px;padding-top:12px;border-top:1px solid var(--border);font-size:10px;font-weight:800;color:var(--text)}
@media(max-width:980px){.team-member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.role-option-grid,.team-member-grid,.team-metric-grid{grid-template-columns:1fr}}

/* =========================================================
   EasyPay Staff Hub — Home Dashboard v5
   ========================================================= */
.home-dashboard-v5 {
  --ep-primary: #246BFE; --ep-primary-dark: #1656D9; --ep-navy: #0A1F44;
  --ep-blue-soft: #EDF4FF; --ep-background: #F6F8FC; --ep-surface: #FFFFFF;
  --ep-border: #E1E7F0; --ep-text: #172033; --ep-text-muted: #667085;
  --ep-success: #159A68; --ep-warning: #D97706; --ep-danger: #E5484D; --ep-violet: #7655E8;
  color: var(--ep-text);
  font-family: "Noto Sans Thai", "Leelawadee UI", "Segoe UI", Tahoma, Arial, sans-serif;
}
.home-dashboard-v5 .page-header { margin-bottom: 14px; padding-bottom: 14px; }
.home-dashboard-v5 .page-header h1 { font-size: clamp(28px, 2vw, 32px); }
.home-dashboard-v5 .page-subtitle { max-width: 720px; }
.home-dashboard-v5 .home-hero {
  position: relative; min-height: 214px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(150px, .45fr) minmax(280px, .82fr);
  align-items: stretch; overflow: hidden; margin-bottom: 12px; border: 1px solid #d7e5fb; border-radius: 18px;
  background: linear-gradient(112deg, #fff 0%, #f7faff 48%, #edf4ff 100%); box-shadow: 0 8px 24px rgba(31, 75, 140, .05);
}
.home-dashboard-v5 .home-hero-copy { position: relative; z-index: 2; align-self: center; padding: 24px 8px 24px 28px; }
.home-dashboard-v5 .home-hero-eyebrow { margin-bottom: 7px; color: var(--ep-primary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.home-dashboard-v5 .home-hero h2 { margin: 0; color: var(--ep-navy); font-size: clamp(30px, 2.3vw, 38px); line-height: 1.2; letter-spacing: -.035em; }
.home-dashboard-v5 .home-hero p { margin: 8px 0 16px; color: var(--ep-text-muted); font-size: 12.5px; line-height: 1.65; }
.home-dashboard-v5 .home-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-dashboard-v5 .home-hero-actions .btn { min-height: 38px; padding-inline: 14px; border-radius: 10px; font-size: 12px; }
.home-dashboard-v5 .home-hero-art { position: relative; min-width: 0; }
.home-dashboard-v5 .home-art-cube { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%,-50%) rotate(30deg) skew(-3deg); border-radius: 19px; background: linear-gradient(145deg,#dceaff,#7aa8ff); box-shadow: -14px 16px 34px rgba(36,107,254,.17), inset 0 1px 1px rgba(255,255,255,.8); }
.home-dashboard-v5 .home-art-cube::before, .home-dashboard-v5 .home-art-cube::after { content:""; position:absolute; inset:11px; border:1px solid rgba(255,255,255,.75); border-radius:13px; }
.home-dashboard-v5 .home-art-cube::after { inset:25px; background:#fff; border:0; box-shadow:0 4px 14px rgba(36,107,254,.2); }
.home-dashboard-v5 .home-art-orbit { position: absolute; left:50%; top:50%; border:1px solid rgba(36,107,254,.20); border-radius:50%; transform:translate(-50%,-50%); }
.home-dashboard-v5 .orbit-one { width:150px; height:92px; transform:translate(-50%,-50%) rotate(-18deg); }
.home-dashboard-v5 .orbit-two { width:112px; height:156px; transform:translate(-50%,-50%) rotate(24deg); }
.home-dashboard-v5 .home-art-node { position:absolute; width:10px; height:10px; border:3px solid #fff; border-radius:50%; background:var(--ep-primary); box-shadow:0 3px 10px rgba(36,107,254,.3); }
.home-dashboard-v5 .node-one { left:17%; top:31%; } .home-dashboard-v5 .node-two { right:14%; top:28%; background:var(--ep-violet); } .home-dashboard-v5 .node-three { left:24%; bottom:22%; background:var(--ep-success); }
.home-dashboard-v5 .home-focus-card { position:relative; z-index:2; margin:12px; padding:15px 16px; border:1px solid rgba(36,107,254,.14); border-radius:15px; background:rgba(255,255,255,.92); box-shadow:0 8px 24px rgba(31,75,140,.06); }
.home-dashboard-v5 .home-focus-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-bottom:8px; }
.home-dashboard-v5 .home-focus-head strong { font-size:13px; } .home-dashboard-v5 .home-focus-head span { color:var(--ep-text-muted); font-size:9px; text-align:right; }
.home-dashboard-v5 .home-focus-row { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:9px; padding:8px 0; border-top:1px solid var(--ep-border); }
.home-dashboard-v5 .home-focus-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--ep-primary); background:var(--ep-blue-soft); }
.home-dashboard-v5 .home-focus-icon.danger { color:var(--ep-danger); background:#fff0f1; } .home-dashboard-v5 .home-focus-icon.warning { color:var(--ep-warning); background:#fff5e8; }
.home-dashboard-v5 .home-focus-copy { min-width:0; } .home-dashboard-v5 .home-focus-copy strong { display:block; overflow:hidden; color:var(--ep-text); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.home-dashboard-v5 .home-focus-copy strong b { margin-right:3px; font-size:17px; } .home-dashboard-v5 .home-focus-copy small { display:block; color:var(--ep-text-muted); font-size:9.5px; }
.home-dashboard-v5 .home-quick-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.home-dashboard-v5 .home-quick-card { min-width:0; min-height:68px; display:grid; grid-template-columns:38px minmax(0,1fr) 16px; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--ep-border); border-radius:14px; color:var(--ep-text); background:var(--ep-surface); text-align:left; box-shadow:0 1px 2px rgba(16,24,40,.025); transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease; }
.home-dashboard-v5 .home-quick-card:hover { transform:translateY(-2px); border-color:#b8d2ff; box-shadow:0 7px 18px rgba(31,75,140,.07); }
.home-dashboard-v5 .home-quick-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:var(--ep-primary); background:var(--ep-blue-soft); }
.home-dashboard-v5 .home-quick-card.green .home-quick-icon { color:var(--ep-success); background:#eaf8f3; } .home-dashboard-v5 .home-quick-card.violet .home-quick-icon { color:var(--ep-violet); background:#f1edff; } .home-dashboard-v5 .home-quick-card.orange .home-quick-icon { color:var(--ep-warning); background:#fff5e8; }
.home-dashboard-v5 .home-quick-copy { min-width:0; } .home-dashboard-v5 .home-quick-copy strong,.home-dashboard-v5 .home-quick-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-dashboard-v5 .home-quick-copy strong { font-size:12px; } .home-dashboard-v5 .home-quick-copy small { margin-top:2px; color:var(--ep-text-muted); font-size:9.5px; } .home-dashboard-v5 .home-quick-arrow { color:#98a2b3; }
.home-dashboard-v5 .home-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.home-dashboard-v5 .home-kpi-card { position:relative; min-width:0; min-height:114px; display:grid; grid-template-columns:38px minmax(0,1fr) 18px; align-items:start; gap:10px; padding:15px; overflow:hidden; border:1px solid var(--ep-border); border-radius:15px; color:var(--ep-text); background:var(--ep-surface); text-align:left; transition:transform 160ms ease,border-color 160ms ease; }
.home-dashboard-v5 .home-kpi-card:hover { transform:translateY(-2px); border-color:#b8d2ff; }
.home-dashboard-v5 .home-kpi-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--ep-primary); }
.home-dashboard-v5 .home-kpi-card.red::before { background:var(--ep-danger); } .home-dashboard-v5 .home-kpi-card.orange::before { background:var(--ep-warning); } .home-dashboard-v5 .home-kpi-card.violet::before { background:var(--ep-violet); }
.home-dashboard-v5 .home-kpi-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--ep-primary); background:var(--ep-blue-soft); }
.home-dashboard-v5 .home-kpi-card.red .home-kpi-icon { color:var(--ep-danger); background:#fff0f1; } .home-dashboard-v5 .home-kpi-card.orange .home-kpi-icon { color:var(--ep-warning); background:#fff5e8; } .home-dashboard-v5 .home-kpi-card.violet .home-kpi-icon { color:var(--ep-violet); background:#f1edff; }
.home-dashboard-v5 .home-kpi-copy span { display:block; } .home-dashboard-v5 .home-kpi-label { min-height:30px; color:var(--ep-text-muted); font-size:11px; font-weight:700; line-height:1.35; }
.home-dashboard-v5 .home-kpi-value { margin-top:2px; font-size:27px; font-weight:850; line-height:1; letter-spacing:-.035em; } .home-dashboard-v5 .home-kpi-value small { color:var(--ep-text-muted); font-size:9px; font-weight:650; letter-spacing:0; }
.home-dashboard-v5 .home-kpi-caption { margin-top:6px; overflow:hidden; color:var(--ep-text-muted); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; } .home-dashboard-v5 .home-kpi-arrow { color:#98a2b3; }
.home-dashboard-v5 .home-operational-grid,.home-dashboard-v5 .home-secondary-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.home-dashboard-v5 .home-panel { min-width:0; overflow:hidden; border:1px solid var(--ep-border); border-radius:16px; background:var(--ep-surface); box-shadow:0 2px 8px rgba(16,24,40,.025); }
.home-dashboard-v5 .home-panel-tasks { grid-column:span 6; } .home-dashboard-v5 .home-panel-calendar,.home-dashboard-v5 .home-panel-workspace { grid-column:span 3; }
.home-dashboard-v5 .home-panel-apps { grid-column:span 5; } .home-dashboard-v5 .home-panel-resources { grid-column:span 4; } .home-dashboard-v5 .home-panel-announcements { grid-column:span 3; }
.home-dashboard-v5 .home-panel-header { min-height:61px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--ep-border); }
.home-dashboard-v5 .home-panel-heading { min-width:0; display:flex; align-items:center; gap:9px; } .home-dashboard-v5 .home-panel-heading>span { width:31px; height:31px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; color:var(--ep-primary); background:var(--ep-blue-soft); }
.home-dashboard-v5 .home-panel-heading h2 { margin:0; font-size:13px; line-height:1.3; } .home-dashboard-v5 .home-panel-heading p { margin:2px 0 0; overflow:hidden; color:var(--ep-text-muted); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.home-dashboard-v5 .home-panel-link { flex:0 0 auto; display:flex; align-items:center; gap:4px; padding:5px; border:0; color:var(--ep-primary); background:transparent; font-size:10px; font-weight:750; }
.home-dashboard-v5 .home-panel-body { min-height:0; }
.home-dashboard-v5 .home-empty-state { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px; text-align:center; }
.home-dashboard-v5 .home-empty-state>span { width:42px; height:42px; display:grid; place-items:center; margin-bottom:9px; border-radius:13px; color:var(--ep-primary); background:var(--ep-blue-soft); }
.home-dashboard-v5 .home-empty-state strong { font-size:12px; } .home-dashboard-v5 .home-empty-state small { margin-top:4px; color:var(--ep-text-muted); font-size:10px; }
.home-dashboard-v5 .home-task-wrap { overflow:auto; }
.home-dashboard-v5 .home-task-table { width:100%; min-width:660px; border-collapse:collapse; font-size:10px; } .home-dashboard-v5 .home-task-table th { padding:9px 10px; color:var(--ep-text-muted); background:#fafbfd; font-size:9px; text-align:left; white-space:nowrap; }
.home-dashboard-v5 .home-task-table td { padding:9px 10px; border-top:1px solid var(--ep-border); white-space:nowrap; } .home-dashboard-v5 .home-task-table tbody tr:hover { background:#fafcff; }
.home-dashboard-v5 .home-task-name { display:flex; align-items:center; gap:8px; min-width:180px; } .home-dashboard-v5 .home-task-name strong,.home-dashboard-v5 .home-task-name small { display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-dashboard-v5 .home-task-name strong { font-size:10.5px; } .home-dashboard-v5 .home-task-name small { margin-top:2px; color:var(--ep-text-muted); font-size:8.5px; }
.home-dashboard-v5 .home-row-action { width:29px; height:29px; display:grid; place-items:center; border:1px solid var(--ep-border); border-radius:8px; color:var(--ep-primary); background:var(--ep-surface); }
.home-dashboard-v5 .home-mini-calendar { padding:11px 12px 8px; } .home-dashboard-v5 .home-mini-month { margin-bottom:7px; color:var(--ep-navy); font-size:11px; font-weight:800; text-align:center; }
.home-dashboard-v5 .home-mini-week,.home-dashboard-v5 .home-mini-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; } .home-dashboard-v5 .home-mini-week span { color:var(--ep-text-muted); font-size:8px; font-weight:700; }
.home-dashboard-v5 .home-mini-days span { position:relative; height:23px; display:grid; place-items:center; border-radius:7px; font-size:8.5px; } .home-dashboard-v5 .home-mini-days .today { color:#fff; background:var(--ep-primary); font-weight:800; } .home-dashboard-v5 .home-mini-days .has-event:not(.today)::after { content:""; position:absolute; bottom:2px; width:3px; height:3px; border-radius:50%; background:var(--ep-primary); }
.home-dashboard-v5 .home-next-event { margin:0 12px 12px; padding:10px; border-left:3px solid var(--ep-primary); border-radius:8px; background:var(--ep-blue-soft); } .home-dashboard-v5 .home-next-event span,.home-dashboard-v5 .home-next-event strong,.home-dashboard-v5 .home-next-event small { display:block; }
.home-dashboard-v5 .home-event-date { color:var(--ep-primary); font-size:8px; font-weight:750; } .home-dashboard-v5 .home-next-event strong { margin-top:2px; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .home-dashboard-v5 .home-next-event small { margin-top:2px; color:var(--ep-text-muted); font-size:8.5px; }
.home-dashboard-v5 .home-service-row,.home-dashboard-v5 .home-app-row,.home-dashboard-v5 .home-resource-row { width:100%; min-width:0; display:grid; align-items:center; gap:9px; padding:9px 12px; border:0; border-top:1px solid var(--ep-border); color:var(--ep-text); background:transparent; text-align:left; }
.home-dashboard-v5 .home-service-row:first-child,.home-dashboard-v5 .home-app-row:first-child,.home-dashboard-v5 .home-resource-row:first-child { border-top:0; } .home-dashboard-v5 .home-service-row:hover,.home-dashboard-v5 .home-app-row:hover,.home-dashboard-v5 .home-resource-row:hover { background:#f8fbff; }
.home-dashboard-v5 .home-service-row { grid-template-columns:31px minmax(0,1fr) auto; } .home-dashboard-v5 .home-service-glyph { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:var(--ep-primary); background:var(--ep-blue-soft); font-size:10px; font-weight:850; }
.home-dashboard-v5 .home-service-row strong,.home-dashboard-v5 .home-service-row small,.home-dashboard-v5 .home-app-row strong,.home-dashboard-v5 .home-app-row small,.home-dashboard-v5 .home-resource-row strong,.home-dashboard-v5 .home-resource-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-dashboard-v5 .home-service-row strong,.home-dashboard-v5 .home-app-row strong,.home-dashboard-v5 .home-resource-row strong { font-size:10.5px; } .home-dashboard-v5 .home-service-row small,.home-dashboard-v5 .home-app-row small,.home-dashboard-v5 .home-resource-row small { margin-top:2px; color:var(--ep-text-muted); font-size:8.5px; }
.home-dashboard-v5 .home-service-status { display:flex; align-items:center; gap:5px; color:var(--ep-text-muted); font-size:8.5px; } .home-dashboard-v5 .home-service-status i { width:7px; height:7px; border-radius:50%; background:var(--ep-warning); } .home-dashboard-v5 .home-service-status i.connected { background:var(--ep-success); }
.home-dashboard-v5 .home-app-row { grid-template-columns:34px minmax(0,1fr) auto auto; } .home-dashboard-v5 .home-app-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--ep-primary); background:var(--ep-blue-soft); font-size:10px; font-weight:850; }
.home-dashboard-v5 .home-open-label { display:flex; align-items:center; gap:3px; color:var(--ep-primary); font-size:9px; font-weight:750; }
.home-dashboard-v5 .home-resource-row { grid-template-columns:31px minmax(0,1fr) 16px; } .home-dashboard-v5 .home-resource-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:var(--ep-primary); background:var(--ep-blue-soft); }
.home-dashboard-v5 .home-announcement-row { padding:10px 12px; border-top:1px solid var(--ep-border); } .home-dashboard-v5 .home-announcement-row:first-child { border-top:0; } .home-dashboard-v5 .home-announcement-row>div { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.home-dashboard-v5 .home-announcement-row time { color:var(--ep-text-muted); font-size:8px; } .home-dashboard-v5 .home-announcement-row strong { display:block; margin-top:5px; overflow:hidden; font-size:10.5px; text-overflow:ellipsis; white-space:nowrap; } .home-dashboard-v5 .home-announcement-row p { display:-webkit-box; margin:3px 0 0; overflow:hidden; color:var(--ep-text-muted); font-size:8.8px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.home-dashboard-v5 .home-capability-note { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--ep-border); border-radius:11px; color:var(--ep-text-muted); background:var(--ep-surface); font-size:9.5px; }
.home-dashboard-v5 :is(button,a):focus-visible { outline:3px solid rgba(36,107,254,.25); outline-offset:2px; }
html[data-theme="dark"] .home-dashboard-v5 { --ep-background:#071426; --ep-surface:#0E1D31; --ep-border:#263A53; --ep-text:#EDF3FF; --ep-text-muted:#A5B4C8; --ep-blue-soft:#142D50; --ep-navy:#F2F6FF; }
html[data-theme="dark"] .home-dashboard-v5 .home-hero { border-color:#29466d; background:linear-gradient(120deg,#10233d 0%,#0a1f44 58%,#122b4e 100%); }
html[data-theme="dark"] .home-dashboard-v5 .home-focus-card { border-color:#2b4668; background:rgba(14,29,49,.94); } html[data-theme="dark"] .home-dashboard-v5 .home-art-cube { background:linear-gradient(145deg,#284f85,#345fa8); }
html[data-theme="dark"] .home-dashboard-v5 .home-quick-card,html[data-theme="dark"] .home-dashboard-v5 .home-kpi-card,html[data-theme="dark"] .home-dashboard-v5 .home-panel,html[data-theme="dark"] .home-dashboard-v5 .home-row-action,html[data-theme="dark"] .home-dashboard-v5 .home-capability-note { background:var(--ep-surface); }
html[data-theme="dark"] .home-dashboard-v5 .home-task-table th { background:#0a192b; } html[data-theme="dark"] .home-dashboard-v5 .home-task-table tbody tr:hover,html[data-theme="dark"] .home-dashboard-v5 .home-service-row:hover,html[data-theme="dark"] .home-dashboard-v5 .home-app-row:hover,html[data-theme="dark"] .home-dashboard-v5 .home-resource-row:hover { background:#122641; }
html[data-theme="dark"] .home-dashboard-v5 .home-next-event { background:#142d50; }
@media (max-width: 1279px) {
  .home-dashboard-v5 .home-hero { grid-template-columns:minmax(0,1fr) 130px minmax(260px,.7fr); }
  .home-dashboard-v5 .home-quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-dashboard-v5 .home-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-dashboard-v5 .home-operational-grid { grid-template-columns:1fr; } .home-dashboard-v5 .home-operational-grid .home-panel { grid-column:1; }
  .home-dashboard-v5 .home-secondary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-dashboard-v5 .home-secondary-grid .home-panel { grid-column:span 1; } .home-dashboard-v5 .home-panel-announcements { grid-column:1/-1!important; }
}
@media (max-width: 767px) {
  .home-dashboard-v5 .page-header { align-items:flex-start; } .home-dashboard-v5 .page-actions { align-items:flex-start; }
  .home-dashboard-v5 .home-hero { min-height:0; grid-template-columns:1fr; } .home-dashboard-v5 .home-hero-copy { padding:22px 18px 12px; } .home-dashboard-v5 .home-hero h2 { font-size:29px; }
  .home-dashboard-v5 .home-hero-art { display:none; } .home-dashboard-v5 .home-focus-card { margin:8px 12px 12px; }
  .home-dashboard-v5 .home-quick-grid,.home-dashboard-v5 .home-kpi-grid,.home-dashboard-v5 .home-secondary-grid { grid-template-columns:1fr; }
  .home-dashboard-v5 .home-secondary-grid .home-panel { grid-column:1; } .home-dashboard-v5 .home-quick-card { min-height:66px; }
  .home-dashboard-v5 .home-kpi-card { min-height:105px; } .home-dashboard-v5 .home-panel-header { align-items:flex-start; } .home-dashboard-v5 .home-panel-heading p { white-space:normal; }
  .home-dashboard-v5 .home-app-row { grid-template-columns:34px minmax(0,1fr) auto; } .home-dashboard-v5 .home-app-row .badge { display:none; } .home-dashboard-v5 .home-desktop-break { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-dashboard-v5 * { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

/* Request creation — enterprise workflow modal */
.request-editor-backdrop { padding:16px; background:rgba(4,15,32,.68); backdrop-filter:blur(10px); }
.request-editor-modal { width:min(860px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; border-radius:22px; background:var(--surface-subtle); box-shadow:0 30px 90px rgba(4,15,32,.38); }
.request-editor-modal > form { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; }
.request-editor-header { flex:0 0 auto; padding:19px 22px; background:var(--surface-raised); }
.request-editor-heading { min-width:0; display:flex; align-items:center; gap:14px; }
.request-editor-heading-icon { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(145deg,var(--primary),#164fcf); box-shadow:0 9px 20px rgba(36,107,254,.24); }
.request-editor-heading-icon .ui-icon { width:21px; height:21px; }
.request-editor-eyebrow { margin-bottom:2px; color:var(--primary); font-size:8px; font-weight:820; letter-spacing:.13em; }
.request-editor-header h2 { margin:0; color:var(--text); font-size:19px; line-height:1.3; letter-spacing:-.015em; }
.request-editor-header p { max-width:620px; margin:3px 0 0; color:var(--text-soft); font-size:9.8px; line-height:1.5; }
.request-editor-scroll { min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:18px 22px 22px; scrollbar-gutter:stable; }
.request-editor-section { margin-bottom:14px; overflow:hidden; border:1px solid var(--border); border-radius:17px; background:var(--surface-raised); box-shadow:0 4px 16px rgba(12,35,64,.04); }
.request-editor-section:last-child { margin-bottom:0; }
.request-editor-section-head { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--surface-raised),var(--surface)); }
.request-editor-section-icon { width:36px; height:36px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border)); border-radius:11px; color:var(--primary); background:var(--primary-soft); }
.request-editor-section-icon .ui-icon { width:17px; height:17px; }
.request-editor-section-head h3 { margin:0; color:var(--text); font-size:11.8px; line-height:1.35; }
.request-editor-section-head p { margin:3px 0 0; color:var(--text-soft); font-size:8.8px; line-height:1.5; }
.request-editor-section-head .section-step { color:var(--primary); font-size:8.5px; font-weight:820; letter-spacing:.08em; }
.request-editor-section-body { padding:16px; }
.request-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 16px; }
.request-field { min-width:0; }
.request-field-wide { grid-column:1/-1; }
.request-field label { display:block; margin-bottom:7px; color:var(--text); font-size:10px; font-weight:760; line-height:1.4; }
.request-required { color:#d93025; font-weight:850; }
.request-field :is(input,select,textarea) { width:100%; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:11px; color:var(--text); background:var(--surface); font:inherit; font-size:11px; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.request-field :is(input,select) { min-height:44px; padding:0 12px; }
.request-field select { padding-right:34px; }
.request-field textarea { min-height:112px; padding:12px 13px; line-height:1.6; resize:vertical; }
.request-field :is(input,select,textarea)::placeholder { color:var(--text-soft); opacity:.92; }
.request-field :is(input,select,textarea):hover { border-color:color-mix(in srgb,var(--primary) 40%,var(--border-strong)); }
.request-field :is(input,select,textarea):focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(36,107,254,.12); }
.request-field small { display:block; margin-top:6px; color:var(--text-soft); font-size:8.6px; line-height:1.45; }
.request-input-with-icon { position:relative; }
.request-input-with-icon > .ui-icon { position:absolute; z-index:1; left:12px; top:50%; transform:translateY(-50%); color:var(--text-soft); pointer-events:none; }
.request-input-with-icon input { padding-left:37px; }
.request-security-note { display:flex; align-items:flex-start; gap:10px; padding:12px 13px; border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border)); border-radius:12px; color:var(--primary); background:color-mix(in srgb,var(--primary-soft) 72%,var(--surface)); }
.request-security-note .ui-icon { flex:0 0 auto; margin-top:1px; }
.request-security-note div { display:flex; flex-direction:column; gap:2px; }
.request-security-note strong { color:var(--text); font-size:9.5px; }
.request-security-note span { color:var(--text-muted); font-size:8.7px; line-height:1.5; }
.request-editor-footer { flex:0 0 auto; align-items:center; justify-content:space-between; padding:14px 22px; background:var(--surface-raised); box-shadow:0 -8px 22px rgba(12,35,64,.035); }
.request-editor-mobile-summary { color:var(--text-muted); font-size:9px; }
.request-editor-actions { display:flex; align-items:center; gap:9px; }
.request-editor-actions .btn { min-width:100px; }
.request-editor-actions .btn-primary { min-width:132px; }
html[data-theme="dark"] .request-editor-section { box-shadow:none; }
html[data-theme="dark"] .request-editor-heading-icon { box-shadow:0 9px 22px rgba(0,0,0,.28); }

@media (max-width:680px) {
  .request-editor-backdrop { align-items:end; padding:0; }
  .request-editor-modal { width:100%; max-height:94dvh; border-radius:22px 22px 0 0; }
  .request-editor-header { padding:16px; }
  .request-editor-heading { gap:11px; }
  .request-editor-heading-icon { width:40px; height:40px; border-radius:12px; }
  .request-editor-header h2 { font-size:17px; }
  .request-editor-header p { font-size:9px; }
  .request-editor-scroll { padding:14px; scrollbar-gutter:auto; }
  .request-editor-section-head { grid-template-columns:34px minmax(0,1fr) auto; gap:10px; padding:12px; }
  .request-editor-section-icon { width:32px; height:32px; }
  .request-editor-section-body { padding:13px; }
  .request-editor-grid { grid-template-columns:1fr; gap:14px; }
  .request-field-wide { grid-column:auto; }
  .request-editor-footer { padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .request-editor-mobile-summary { display:none; }
  .request-editor-actions { width:100%; }
  .request-editor-actions .btn { flex:1 1 0; min-width:0; }
}
@media (max-width:420px) {
  .request-editor-heading-icon { display:none; }
  .request-editor-section-head p { display:none; }
  .request-editor-section-head .section-step { align-self:start; padding-top:4px; }
  .request-editor-actions .btn { padding-inline:12px; }
}

/* Hierarchical task assignment */
.task-assignment-modal { width:min(680px,calc(100vw - 32px)); max-height:min(820px,calc(100vh - 32px)); overflow:auto; }
.task-assignment-modal .modal-header { align-items:flex-start; }
.task-assignment-modal .modal-header h3 { margin:3px 0 5px; }
.task-assignment-modal .modal-header p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.task-assignment-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:22px 24px; }
.task-assignment-body .form-field { width:100%; min-width:0; }
.task-assignment-body :is(input,select,textarea) { width:100%; box-sizing:border-box; }
.task-assignment-wide { grid-column:1/-1; }
.task-assignment-body textarea { resize:vertical; min-height:96px; }
.task-assignment-security { display:flex; align-items:center; gap:7px; color:var(--text-muted); font-size:12px; }
.task-person { display:flex; min-width:130px; flex-direction:column; gap:3px; }
.task-person strong { max-width:190px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.task-person small { color:var(--text-muted); font-size:10px; }
html[data-theme="dark"] .task-assignment-modal { background:var(--surface); }
@media (max-width:680px) {
  .task-assignment-modal { width:calc(100vw - 18px); max-height:calc(100vh - 18px); }
  .task-assignment-body { grid-template-columns:1fr; padding:18px; }
  .task-assignment-wide { grid-column:1; }
  .task-assignment-modal .modal-footer { align-items:stretch; flex-direction:column; }
  .task-assignment-modal .modal-footer>div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

  .home-task-wrap,.request-table-wrap,.task-table-wrap,.admin-table-wrap { overflow:visible; }
  :is(.home-task-table,.request-table,.task-table,.admin-table):has(.mobile-data-card) { min-width:0; width:100%; display:block; }
  :is(.home-task-table,.request-table,.task-table,.admin-table):has(.mobile-data-card) thead { display:none; }
  :is(.home-task-table,.request-table,.task-table,.admin-table):has(.mobile-data-card) tbody { display:grid; gap:10px; }
  :is(.home-task-table,.request-table,.task-table,.admin-table) .mobile-data-card {
    display:block;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-raised);
    box-shadow:var(--shadow-xs);
  }
  :is(.home-task-table,.request-table,.task-table,.admin-table) .mobile-data-card td {
    width:auto;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(88px,34%) minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:0;
    border-top:1px solid var(--border);
    text-align:left!important;
    white-space:normal;
  }
  :is(.home-task-table,.request-table,.task-table,.admin-table) .mobile-data-card td:first-child { display:block; border-top:0; background:var(--surface-subtle); }
  :is(.home-task-table,.request-table,.task-table,.admin-table) .mobile-data-card td:not(:first-child)::before { color:var(--text-soft); font-size:9px; font-weight:720; }
  .home-task-table .mobile-data-card td:nth-child(2)::before { content:'ระบบต้นทาง'; }
  .home-task-table .mobile-data-card td:nth-child(3)::before { content:'กำหนดเสร็จ'; }
  .home-task-table .mobile-data-card td:nth-child(4)::before { content:'ความสำคัญ'; }
  .home-task-table .mobile-data-card td:nth-child(5)::before { content:'สถานะ'; }
  .home-task-table .mobile-data-card td:nth-child(6)::before { content:'ดำเนินการ'; }
  .request-table .mobile-data-card td:nth-child(2)::before { content:'ผู้ขอ'; }
  .request-table .mobile-data-card td:nth-child(3)::before { content:'ความสำคัญ'; }
  .request-table .mobile-data-card td:nth-child(4)::before { content:'สถานะ'; }
  .request-table .mobile-data-card td:nth-child(5)::before { content:'อัปเดต'; }
  .request-table .mobile-data-card td:nth-child(6)::before { content:'ดำเนินการ'; }
  .task-table .mobile-data-card td:nth-child(2)::before { content:'ผู้รับผิดชอบ'; }
  .task-table .mobile-data-card td:nth-child(3)::before { content:'ผู้มอบหมาย'; }
  .task-table .mobile-data-card td:nth-child(4)::before { content:'กำหนดเสร็จ'; }
  .task-table .mobile-data-card td:nth-child(5)::before { content:'ความสำคัญ'; }
  .task-table .mobile-data-card td:nth-child(6)::before { content:'สถานะ'; }
  .task-table .mobile-data-card td:nth-child(7)::before { content:'ดำเนินการ'; }
  .admin-table .mobile-data-card td:nth-child(2)::before { content:'ระดับสิทธิ์'; }
  .admin-table .mobile-data-card td:nth-child(3)::before { content:'หน้าที่งาน'; }
  .admin-table .mobile-data-card td:nth-child(4)::before { content:'ขอบเขต'; }
  .admin-table .mobile-data-card td:nth-child(5)::before { content:'สถานะ'; }
  .admin-table .mobile-data-card td:nth-child(6)::before { content:'เข้าใช้ล่าสุด'; }
  .admin-table .mobile-data-card td:nth-child(7)::before { content:'ดำเนินการ'; }
  .mobile-data-card .task-actions,.mobile-data-card .request-actions { justify-content:flex-start; }
}

/* ==========================================================================
   EasyPay Green–Blue Brand Theme — 2026-08-17
   Corporate palette sampled from the EasyPay logo. Presentation only.
   ========================================================================== */
:root {
  --brand-blue: #0b5ea8;
  --brand-blue-strong: #084b87;
  --brand-green: #00a651;
  --brand-green-strong: #008b45;
  --brand-navy: #052f5f;
  --brand-mint: #e9f8f0;
  --brand-sky: #eaf4fc;
  --brand-gradient: linear-gradient(135deg, var(--brand-blue), var(--brand-green));

  --primary: var(--brand-blue);
  --primary-strong: var(--brand-blue-strong);
  --primary-deep: var(--brand-navy);
  --primary-soft: var(--brand-sky);
  --cyan: #148f9b;
  --cyan-soft: #e8f7f7;
  --violet: var(--brand-green);
  --violet-soft: var(--brand-mint);
  --success: var(--brand-green);
  --success-soft: var(--brand-mint);
  --surface-blue: #f3f9fd;
  --sidebar: var(--brand-navy);
  --sidebar-raised: #073b72;
}

html[data-theme="dark"] {
  --primary: #55a9ed;
  --primary-strong: #82c3f5;
  --primary-soft: #0d3558;
  --cyan: #4cc4c0;
  --cyan-soft: #103b3d;
  --violet: #48d28b;
  --violet-soft: #103b2c;
  --success: #48d28b;
  --success-soft: #103b2c;
  --surface-blue: #0c2742;
}

body {
  background:
    radial-gradient(circle at 92% -8%, rgba(11,94,168,.10), transparent 26rem),
    radial-gradient(circle at 68% 105%, rgba(0,166,81,.055), transparent 24rem),
    var(--surface-muted);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline-color: color-mix(in srgb, var(--brand-green) 38%, transparent);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-green));
  box-shadow: 0 10px 24px rgba(5,75,126,.20), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(0,132,86,.24); }

.brand-mark,
.user-editor-heading-icon,
.request-editor-heading-icon,
.app-launcher-easypay {
  background: var(--brand-gradient);
  box-shadow: 0 10px 24px rgba(5,75,126,.20);
}

.login-visual {
  background:
    radial-gradient(circle at 14% 12%, rgba(26,134,213,.34), transparent 28rem),
    radial-gradient(circle at 82% 76%, rgba(0,166,81,.25), transparent 28rem),
    linear-gradient(145deg, #031d3b 0%, var(--brand-navy) 48%, #075b74 100%);
}
.login-visual::before {
  background-image:
    linear-gradient(rgba(106,189,224,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73,190,145,.11) 1px, transparent 1px);
}
.login-visual::after {
  border-color: rgba(63,188,158,.22);
  box-shadow: 0 0 0 74px rgba(11,94,168,.035), 0 0 0 148px rgba(0,166,81,.022);
}
.login-visual-copy .eyebrow {
  border-color: rgba(75,216,157,.28);
  color: #d5ffea;
  background: rgba(0,131,78,.16);
}
.login-visual-copy h1 span {
  color: #78d7b0;
  background: linear-gradient(90deg, #8ed1ff 0%, #68ddb0 58%, #b8f0d2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.visual-feature { border-color: rgba(88,201,163,.18); }
.visual-feature-icon { color: #90e5bd; background: rgba(0,166,81,.15); }
.login-preview { border-color: rgba(85,213,165,.18); background: linear-gradient(145deg, rgba(7,70,112,.78), rgba(3,45,64,.82)); }
.login-preview-chart::before {
  background: linear-gradient(135deg, transparent 0 18%, rgba(63,169,235,.78) 18% 21%, transparent 21% 38%, rgba(63,169,235,.78) 38% 41%, transparent 41% 58%, rgba(49,204,132,.78) 58% 61%, transparent 61% 76%, rgba(49,204,132,.78) 76% 79%, transparent 79%);
  filter: drop-shadow(0 0 8px rgba(48,199,132,.48));
}
.login-panel::before {
  width: 360px;
  height: 360px;
  right: -190px;
  top: -190px;
  background: linear-gradient(145deg, rgba(11,94,168,.09), rgba(0,166,81,.075));
}
.login-kicker { color: var(--brand-blue); }
.input-wrap input:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.filter-select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(0,166,81,.10);
}
.security-note {
  border-color: rgba(11,94,168,.16);
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-mint));
}
.security-note .ui-icon { color: var(--brand-green-strong); }

.sidebar,
html[data-theme="dark"] .sidebar {
  color: #d8e7f2;
  border-right-color: rgba(113,204,169,.15);
  background:
    radial-gradient(circle at 10% 0%, rgba(21,126,193,.26), transparent 18rem),
    radial-gradient(circle at 110% 82%, rgba(0,166,81,.20), transparent 18rem),
    linear-gradient(180deg, #04274f 0%, #03203f 58%, #032b3f 100%);
  box-shadow: 12px 0 40px rgba(3,32,63,.08);
}
.sidebar-brand { border-bottom: 1px solid rgba(160,216,198,.12); }
.workspace-pill,
html[data-theme="dark"] .workspace-pill {
  border-color: rgba(82,210,157,.20);
  color: #ecfff5;
  background: linear-gradient(135deg, rgba(20,112,177,.30), rgba(0,153,82,.20));
}
.workspace-pill strong { color: #f3fff8; }
.workspace-pill span,
html[data-theme="dark"] .workspace-pill span { color: #9fc5c1; }
.workspace-pill-icon { color: #83e4b4; background: rgba(0,166,81,.20); }
.nav-section-label { color: #769bad; }
.nav-button,
html[data-theme="dark"] .nav-button { color: #b6cad7; }
.nav-button:hover,
html[data-theme="dark"] .nav-button:hover { color: #fff; background: rgba(49,143,177,.16); }
.nav-button.active,
html[data-theme="dark"] .nav-button.active {
  color: #fff;
  border: 1px solid rgba(91,221,167,.20);
  background: linear-gradient(90deg, rgba(11,94,168,.58), rgba(0,166,81,.30));
}
.nav-button.active::before {
  display: block;
  background: linear-gradient(#7ed4ff, #56df9c);
  box-shadow: 0 0 14px rgba(70,215,151,.52);
}
.nav-icon,
.nav-button:hover .nav-icon,
.nav-button.active .nav-icon { color: #78d7b0; }
.sidebar-footer { border-top: 1px solid rgba(160,216,198,.12); }
.pilot-card,
html[data-theme="dark"] .pilot-card {
  border-color: rgba(86,208,158,.18);
  color: #b7d6d2;
  background: linear-gradient(145deg, rgba(13,83,133,.30), rgba(0,137,76,.16));
}
.pilot-card strong { color: #effff6; }
.pilot-card span { color: #88aaa9; }

.topbar { border-top: 3px solid transparent; border-image: var(--brand-gradient) 1; }
.page-kicker,
.workspace-eyebrow,
.resource-card-meta,
.workspace-service-open { color: var(--brand-blue); }
.page-kicker::before { background: var(--brand-gradient); }
.avatar {
  color: var(--brand-navy);
  border-color: rgba(0,166,81,.18);
  background: linear-gradient(145deg, var(--brand-sky), var(--brand-mint));
}
.workspace-connection-dot,
.service-dot.connected { background: var(--brand-green); }

.workspace-welcome,
.workspace-account-card {
  border-color: #cfe7e0;
  background: linear-gradient(135deg,#fafdff 0%,#eff7fc 52%,#edf9f2 100%);
}
.workspace-focus-card { border-color: rgba(0,166,81,.17); }
.workspace-quick-card:hover,
.resource-card:hover,
.workspace-service-card:hover { border-color: #85cdb0; }
.workspace-quick-card.violet .workspace-quick-icon,
.workspace-quick-card.green .workspace-quick-icon,
.service-forms,
.service-meet,
.resource-card-icon.form,
.workspace-resource-icon.form {
  color: var(--brand-green-strong);
  background: var(--brand-mint);
}
.badge-violet { color: var(--brand-green-strong); background: var(--brand-mint); border-color: rgba(0,166,81,.14); }

.home-dashboard-v5 {
  --ep-primary: var(--brand-blue);
  --ep-primary-dark: var(--brand-blue-strong);
  --ep-navy: var(--brand-navy);
  --ep-blue-soft: var(--brand-sky);
  --ep-success: var(--brand-green);
  --ep-violet: var(--brand-green);
}
.home-dashboard-v5 .home-hero {
  border-color: #cfe7e0;
  background: linear-gradient(112deg,#fff 0%,#f1f8fc 52%,#ecf9f2 100%);
}
.home-dashboard-v5 .home-art-cube {
  background: linear-gradient(145deg,#d8ecfb,#57bb91);
  box-shadow: -14px 16px 34px rgba(6,93,125,.16), inset 0 1px 1px rgba(255,255,255,.8);
}
.home-dashboard-v5 .node-two { background: var(--brand-green); }
.home-dashboard-v5 .home-quick-card.violet .home-quick-icon,
.home-dashboard-v5 .home-kpi-card.violet .home-kpi-icon { color: var(--brand-green-strong); background: var(--brand-mint); }
.home-dashboard-v5 .home-kpi-card.violet::before { background: var(--brand-green); }
.home-dashboard-v5 :is(button,a):focus-visible { outline-color: rgba(0,166,81,.28); }

html[data-theme="dark"] .workspace-welcome,
html[data-theme="dark"] .workspace-account-card { border-color: #245c58; background: linear-gradient(135deg,#102b45,#0c3038); }
html[data-theme="dark"] .home-dashboard-v5 .home-hero { border-color:#245c58; background:linear-gradient(120deg,#102b45 0%,#08294a 58%,#0b3a3d 100%); }

@media (max-width: 680px) {
  .login-panel { background: linear-gradient(180deg, #f9fcff 0%, #f3faf6 100%); }
  html[data-theme="dark"] .login-panel { background: var(--surface); }
  .mobile-brand { padding: 8px 0 2px; }
  .topbar { border-top-width: 2px; }
}

/* ========================================================================== 
   EasyPay Logo Clarity Treatment — EasyPay Thailand exact supplied artwork
   ========================================================================== */
.login-visual .brand-logo-image {
  width: 210px;
  height: 108px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 38px rgba(2,24,51,.24), inset 0 1px 0 rgba(255,255,255,.9);
  filter: drop-shadow(0 3px 4px rgba(5,47,95,.10));
  object-fit: contain;
  object-position: center;
}

.sidebar-brand {
  min-height: 78px;
  justify-content: flex-start;
}
.sidebar-brand .brand-logo-image {
  width: 118px;
  height: 61px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 13px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(2,24,51,.22);
  filter: drop-shadow(0 2px 3px rgba(5,47,95,.10));
  object-fit: contain;
  object-position: center;
}

.mobile-brand .brand-logo-image {
  width: 188px;
  height: 96px;
  padding: 6px 8px;
  border: 1px solid rgba(11,94,168,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 28px rgba(5,47,95,.09);
  filter: drop-shadow(0 2px 3px rgba(5,47,95,.08));
  object-fit: contain;
}

@media (max-height: 760px) and (min-width: 961px) {
  .login-visual { padding-top: 30px; padding-bottom: 30px; }
  .login-visual .brand-logo-image { width: 176px; height: 90px; padding: 7px 9px; border-radius: 15px; }
  .login-visual-copy { margin-top: 18px; margin-bottom: 16px; }
  .visual-features { margin-top: 22px; }
}

@media (max-width: 960px) {
  .mobile-brand { justify-content: center; margin-bottom: 22px; }
  .mobile-brand .brand-logo-image { width: 180px; height: 92px; }
}

@media (max-width: 420px) {
  .mobile-brand .brand-logo-image { width: 168px; height: 86px; padding: 5px 7px; border-radius: 14px; }
}

/* ==========================================================================
   EasyPay Team KPI Cards — Premium Enterprise
   Scoped to "ทีมของฉัน" so other dashboard cards keep their own contract.
   ========================================================================== */
.team-metric-grid {
  gap: 16px;
  margin-bottom: 22px;
}

.team-metric-grid .home-kpi-card {
  --team-accent: var(--brand-blue);
  --team-soft: var(--brand-sky);
  position: relative;
  min-width: 0;
  min-height: 156px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 34px;
  align-items: start;
  gap: 14px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--team-accent) 15%, var(--border));
  border-radius: 18px;
  color: var(--text);
  background: linear-gradient(155deg, var(--surface-raised) 0%, color-mix(in srgb, var(--team-soft) 34%, var(--surface-raised)) 100%);
  box-shadow: 0 8px 26px rgba(5,47,95,.065), inset 0 1px 0 rgba(255,255,255,.74);
  text-align: left;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.team-metric-grid .home-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--team-accent), color-mix(in srgb, var(--team-accent) 55%, var(--brand-green)));
}

.team-metric-grid .home-kpi-card::after {
  content: "";
  position: absolute;
  width: 112px;
  height: 112px;
  right: -54px;
  bottom: -64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--team-accent) 8%, transparent);
  pointer-events: none;
}

.team-metric-grid .home-kpi-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--team-accent) 34%, var(--border));
  box-shadow: 0 16px 36px rgba(5,47,95,.12), inset 0 1px 0 rgba(255,255,255,.84);
}

.team-metric-grid .home-kpi-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--team-accent) 24%, transparent);
  outline-offset: 3px;
}

.team-metric-grid .home-kpi-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--team-accent) 16%, transparent);
  border-radius: 14px;
  color: var(--team-accent);
  background: var(--team-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.team-metric-grid .home-kpi-icon .ui-icon { width: 22px; height: 22px; }

.team-metric-grid .home-kpi-copy { min-width: 0; }
.team-metric-grid .home-kpi-copy > span { display: block; }
.team-metric-grid .home-kpi-label {
  min-height: 20px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}
.team-metric-grid .home-kpi-value {
  margin-top: 7px;
  color: var(--primary-deep);
  font-size: 32px;
  font-weight: 880;
  line-height: 1;
  letter-spacing: -.04em;
}
.team-metric-grid .home-kpi-value small {
  margin-left: 3px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 680;
  letter-spacing: 0;
}
.team-metric-grid .home-kpi-caption {
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.55;
}

.team-metric-grid .home-kpi-arrow {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--team-accent) 13%, var(--border));
  border-radius: 11px;
  color: var(--team-accent);
  background: color-mix(in srgb, var(--team-soft) 64%, var(--surface-raised));
  transition: transform var(--transition), background var(--transition);
}
.team-metric-grid .home-kpi-card:hover .home-kpi-arrow {
  transform: translate(2px,-2px);
  background: var(--team-soft);
}

.team-metric-grid .home-kpi-card.blue { --team-accent: var(--brand-blue); --team-soft: var(--brand-sky); }
.team-metric-grid .home-kpi-card.orange { --team-accent: #c97a08; --team-soft: #fff5e6; }
.team-metric-grid .home-kpi-card.red { --team-accent: #d84a55; --team-soft: #fff0f1; }
.team-metric-grid .home-kpi-card.green { --team-accent: var(--brand-green-strong); --team-soft: var(--brand-mint); }

html[data-theme="dark"] .team-metric-grid .home-kpi-card {
  background: linear-gradient(155deg, var(--surface-raised), color-mix(in srgb, var(--team-soft) 24%, var(--surface-raised)));
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
html[data-theme="dark"] .team-metric-grid .home-kpi-value { color: var(--text); }
html[data-theme="dark"] .team-metric-grid .home-kpi-icon,
html[data-theme="dark"] .team-metric-grid .home-kpi-arrow { background: color-mix(in srgb, var(--team-soft) 48%, var(--surface-raised)); }

@media (max-width: 1180px) {
  .team-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .team-metric-grid { grid-template-columns: 1fr; gap: 12px; }
  .team-metric-grid .home-kpi-card { min-height: 142px; padding: 17px; grid-template-columns: 44px minmax(0,1fr) 32px; gap: 12px; }
  .team-metric-grid .home-kpi-icon { width: 44px; height: 44px; border-radius: 13px; }
  .team-metric-grid .home-kpi-arrow { width: 32px; height: 32px; }
  .team-metric-grid .home-kpi-value { font-size: 29px; }
}