:root {
  color-scheme: dark;
  --color-bg: #040912;
  --color-bg-elevated: rgba(8, 18, 30, 0.9);
  --color-bg-muted: rgba(16, 34, 54, 0.76);
  --color-sidebar: #04070d;
  --color-sidebar-soft: rgba(12, 24, 40, 0.94);
  --color-text: #ecf7ff;
  --color-text-muted: #91a8be;
  --color-text-soft: #5f7388;
  --color-border: rgba(91, 229, 255, 0.2);
  --color-border-strong: rgba(91, 229, 255, 0.46);
  --color-primary: #31d9ff;
  --color-primary-hover: #76e9ff;
  --color-secondary: #1f6fff;
  --color-accent: #9b7cff;
  --color-success: #37e6a2;
  --color-danger: #ff5c7a;
  --color-warning: #ffb84a;
  --glow-cyan: 0 0 24px rgba(49, 217, 255, 0.24);
  --glow-violet: 0 0 28px rgba(155, 124, 255, 0.18);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 0 0 1px rgba(91, 229, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 0 0 1px rgba(91, 229, 255, 0.12), 0 16px 40px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 0 0 1px rgba(91, 229, 255, 0.18), 0 24px 48px rgba(0, 0, 0, 0.42);
  --font-sans: "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --text-32: 32px;
  --text-24: 24px;
  --text-20: 20px;
  --text-16: 16px;
  --text-14: 14px;
  --text-12: 12px;
  --leading-32: 40px;
  --leading-24: 32px;
  --leading-20: 28px;
  --leading-16: 24px;
  --leading-14: 20px;
  --leading-12: 16px;
  --transition-fast: 160ms ease;
}

/* welcome overlay clarity pass */
.welcome-overlay.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.welcome-card {
  width: min(680px, calc(100vw - 48px)) !important;
  min-height: 176px !important;
  padding: 36px 48px !important;
  gap: 14px !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.welcome-card span {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.welcome-card strong {
  font-size: 32px !important;
  line-height: 42px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(218, 165, 32, 0.28) !important;
}

.welcome-card p {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  color: rgba(196, 214, 226, 0.96) !important;
  text-shadow: none !important;
}

.welcome-overlay.deputy .welcome-card strong {
  text-shadow: 0 0 10px rgba(255, 75, 95, 0.28) !important;
}

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

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--color-bg);
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  background:
    radial-gradient(circle at 16% 10%, rgba(49, 217, 255, 0.14), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(155, 124, 255, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(91, 229, 255, 0.04), transparent 18%),
    linear-gradient(135deg, #03070d 0%, #07111d 36%, #081624 64%, #03070d 100%);
  font-family: var(--font-sans);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  letter-spacing: 0;
  overflow-x: clip;
}

body.account-commander {
  --color-primary: #daa520;
  --color-primary-hover: #f1c65a;
  --color-secondary: #6b4b12;
  --color-accent: #f6de9a;
  --color-border: rgba(218, 165, 32, 0.22);
  --color-border-strong: rgba(218, 165, 32, 0.54);
  --glow-cyan: 0 0 24px rgba(218, 165, 32, 0.24);
  --glow-violet: 0 0 28px rgba(246, 222, 154, 0.14);
  background:
    radial-gradient(circle at 20% 10%, rgba(218, 165, 32, 0.16), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(218, 165, 32, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(218, 165, 32, 0.04), transparent 20%),
    linear-gradient(135deg, #030303 0%, #0b0905 44%, #111008 62%, #030303 100%);
}

body.account-deputy {
  --color-primary: #ff4b5f;
  --color-primary-hover: #ff7c8b;
  --color-secondary: #7f1630;
  --color-accent: #ff9a3d;
  --color-border: rgba(255, 75, 95, 0.2);
  --color-border-strong: rgba(255, 75, 95, 0.48);
  --glow-cyan: 0 0 24px rgba(255, 75, 95, 0.24);
  --glow-violet: 0 0 28px rgba(255, 154, 61, 0.16);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 75, 95, 0.16), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255, 154, 61, 0.1), transparent 30%),
    linear-gradient(135deg, #0e0305 0%, #21070d 48%, #070203 100%);
}

body.account-logistics {
  --color-primary: #9b5cff;
  --color-primary-hover: #be86ff;
  --color-secondary: #51289f;
  --color-accent: #d7b7ff;
  --color-border: rgba(155, 92, 255, 0.24);
  --color-border-strong: rgba(155, 92, 255, 0.52);
  --glow-cyan: 0 0 24px rgba(155, 92, 255, 0.24);
  --glow-violet: 0 0 28px rgba(215, 183, 255, 0.18);
  background:
    radial-gradient(circle at 16% 10%, rgba(155, 92, 255, 0.16), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(215, 183, 255, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(155, 92, 255, 0.04), transparent 20%),
    linear-gradient(135deg, #06040f 0%, #110926 40%, #170d31 62%, #05040d 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(91, 229, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 229, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 86%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

body.account-commander::after {
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='860' viewBox='0 0 1280 860'%3E%3Cg fill='none' stroke='%23daa520' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M115 548c82-92 170-136 264-132 124 6 188 96 314 80 95-12 126-86 212-128 74-36 142-26 204 28' stroke-width='30' opacity='.13'/%3E%3Cpath d='M124 548c88-104 184-154 288-150 126 5 184 94 304 80 92-11 126-90 214-134 78-39 150-28 218 34' stroke-width='9' opacity='.42'/%3E%3Cpath d='M142 594c102-92 206-128 314-108 92 18 146 82 244 70 90-11 126-72 194-112 68-40 142-46 222-18' stroke-width='4' opacity='.34'/%3E%3Cpath d='M882 348l56-78 28 58 76-28-34 68 84 14-78 36 38 72-84-28-48 72-12-86-82-16 72-44z' stroke-width='8' opacity='.48'/%3E%3Cpath d='M1018 386l96-52 34 34-72 44 80 34-48 32-86-30' stroke-width='7' opacity='.42'/%3E%3Cpath d='M948 354l-64-80m96 60 4-104m48 130 72-82' stroke-width='6' opacity='.38'/%3E%3Cpath d='M932 408c38-10 76-8 114 8m-146 36c60-28 124-30 192-6' stroke-width='4' opacity='.42'/%3E%3Cpath d='M258 450l-76-54m158 18-58-78m146 68-24-96m154 112 18-102m120 102 58-86' stroke-width='7' opacity='.32'/%3E%3Cpath d='M352 520l-82 88m186-68-48 118m210-102 8 128m168-156 54 108' stroke-width='6' opacity='.28'/%3E%3Cpath d='M928 392l28-8 14 16-26 10z' fill='%23daa520' stroke='none' opacity='.34'/%3E%3Cpath d='M244 506c52-34 106-46 162-36m-32-60c-54 8-102 32-144 72m324-16c-46-28-94-42-144-42m232 96c42-4 80-18 114-42' stroke-width='3' opacity='.32'/%3E%3C/g%3E%3Cg fill='%23daa520' opacity='.16'%3E%3Ccircle cx='374' cy='408' r='10'/%3E%3Ccircle cx='426' cy='424' r='8'/%3E%3Ccircle cx='486' cy='456' r='9'/%3E%3Ccircle cx='644' cy='500' r='8'/%3E%3Ccircle cx='756' cy='474' r='9'/%3E%3Ccircle cx='944' cy='388' r='8'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 8%, rgba(218, 165, 32, 0.16), transparent 34%),
    radial-gradient(ellipse at 10% 40%, rgba(218, 165, 32, 0.08), transparent 30%),
    radial-gradient(ellipse at 90% 40%, rgba(218, 165, 32, 0.08), transparent 30%),
    repeating-radial-gradient(ellipse at 50% -12%, transparent 0 34px, rgba(218, 165, 32, 0.12) 36px 38px, transparent 40px 74px),
    linear-gradient(118deg, transparent 0 42%, rgba(218, 165, 32, 0.12) 43%, transparent 45% 55%, rgba(218, 165, 32, 0.12) 57%, transparent 58%),
    linear-gradient(62deg, transparent 0 42%, rgba(218, 165, 32, 0.09) 43%, transparent 45% 55%, rgba(218, 165, 32, 0.09) 57%, transparent 58%);
  background-size: min(1120px, 92vw) auto, auto, auto, auto, 220px 140px, 520px 520px, 520px 520px;
  background-position: center 78px, center top, left center, right center, center top, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.44) 50%, transparent 92%);
}

body.account-deputy::after {
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1180' height='820' viewBox='0 0 1180 820'%3E%3Cg fill='none' stroke='%23ff4b5f' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M590 140c116 0 216 74 260 178 36 84 22 184-40 278-58 88-132 132-220 132s-162-44-220-132c-62-94-76-194-40-278 44-104 144-178 260-178z' stroke-width='10' opacity='.34'/%3E%3Cpath d='M422 290 278 118l34 226-104 68 146 34m404-156 144-172-34 226 104 68-146 34' stroke-width='16' opacity='.28'/%3E%3Cpath d='M426 390c66-44 132-48 198-12m130 12c-66-44-132-48-198-12' stroke-width='12' opacity='.38'/%3E%3Cpath d='M424 412l132 42-120 38m320-80-132 42 120 38' stroke-width='8' opacity='.42'/%3E%3Cpath d='M590 430l-42 92 42 56 42-56z' stroke-width='8' opacity='.42'/%3E%3Cpath d='M486 552c66 34 142 34 208 0m-230 46 72 48m180-48-72 48' stroke-width='8' opacity='.36'/%3E%3Cpath d='M352 584l-148 92m624-92 148 92M398 656l-108 104m492-104 108 104' stroke-width='5' opacity='.28'/%3E%3Cpath d='M478 250l-50-112m224 112 50-112' stroke-width='7' opacity='.32'/%3E%3C/g%3E%3Cg fill='%23ff4b5f'%3E%3Cpath d='M430 390 586 430 444 470z' opacity='.15'/%3E%3Cpath d='M750 390 594 430 736 470z' opacity='.15'/%3E%3Cpath d='M590 454 548 534 590 592 632 534z' opacity='.13'/%3E%3Cpath d='M494 400 566 420 508 438z' opacity='.3'/%3E%3Cpath d='M686 400 614 420 672 438z' opacity='.3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 12%, rgba(255, 75, 95, 0.18), transparent 34%),
    conic-gradient(from 225deg at 20% 18%, transparent 0 18deg, rgba(255, 75, 95, 0.16) 19deg 28deg, transparent 29deg 360deg),
    conic-gradient(from 135deg at 80% 18%, transparent 0 18deg, rgba(255, 75, 95, 0.16) 19deg 28deg, transparent 29deg 360deg),
    linear-gradient(128deg, transparent 0 43%, rgba(255, 75, 95, 0.16) 44%, transparent 46% 54%, rgba(255, 154, 61, 0.1) 56%, transparent 58%),
    linear-gradient(52deg, transparent 0 43%, rgba(255, 75, 95, 0.12) 44%, transparent 46% 54%, rgba(255, 154, 61, 0.08) 56%, transparent 58%),
    repeating-linear-gradient(100deg, transparent 0 30px, rgba(255, 75, 95, 0.08) 32px 34px, transparent 36px 78px);
  background-size: min(1080px, 90vw) auto, auto, 360px 280px, 360px 280px, 460px 460px, 460px 460px, 220px 220px;
  background-position: center 72px, center top, left top, right top, center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.4) 52%, transparent 92%);
}

body.locked .app-shell {
  display: none;
}

body:not(.locked) .login-screen {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  background: rgba(4, 12, 22, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-primary), transparent 84%), var(--glow-cyan);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 16%),
    radial-gradient(circle at 50% 10%, rgba(49, 217, 255, 0.18), transparent 28%),
    radial-gradient(circle at 84% 70%, rgba(155, 124, 255, 0.14), transparent 28%),
    linear-gradient(135deg, #03070d 0%, #06111c 44%, #03070d 100%);
  position: relative;
  overflow: hidden;
}

.login-screen::before,
.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-screen::before {
  background:
    linear-gradient(rgba(91, 229, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 229, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.95), transparent 88%);
}

.login-screen::after {
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(49, 217, 255, 0.08) 15%, transparent 16% 84%, rgba(49, 217, 255, 0.08) 85%, transparent 86%),
    linear-gradient(180deg, transparent 0 10%, rgba(49, 217, 255, 0.06) 11%, transparent 12% 88%, rgba(49, 217, 255, 0.06) 89%, transparent 90%);
  opacity: 0.55;
}

.login-card {
  width: min(760px, 100%);
  display: grid;
  gap: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(10, 22, 36, 0.84), rgba(5, 12, 21, 0.78));
  backdrop-filter: blur(28px) saturate(1.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(49, 217, 255, 0.12);
  position: relative;
  overflow: hidden;
}

.login-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(49, 217, 255, 0.14), transparent 32%);
  opacity: 0.7;
}

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

.login-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: var(--space-4);
}

.login-choice {
  min-height: 100%;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(5, 12, 22, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-sm);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.login-choice:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-md), var(--glow-cyan);
}

.login-choice::after {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(var(--radius-md) - 2px);
  pointer-events: none;
}

.login-choice > span {
  width: fit-content;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  color: var(--color-primary);
  background: rgba(49, 217, 255, 0.08);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
}

.login-choice strong {
  color: var(--color-text);
  font-size: var(--text-20);
  line-height: var(--leading-20);
}

.login-choice p {
  margin: 0;
  color: var(--color-text-muted);
}

.login-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.guest-choice {
  align-content: space-between;
}

.login-disclaimer,
.app-disclaimer {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
}

.login-disclaimer {
  border: 1px solid rgba(255, 184, 74, 0.24);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: rgba(255, 184, 74, 0.08);
}

.app-disclaimer {
  max-width: 760px;
  margin-top: var(--space-2);
}

.login-card::before,
.panel::before,
.task-card::before,
.rule-card::before,
.exchange-card::before,
.activity-item::before,
.metric::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--color-primary), transparent 24%) top left / 100% 1px no-repeat,
    linear-gradient(180deg, var(--color-primary), transparent 28%) top left / 1px 100% no-repeat;
  opacity: 0.32;
}

.login-card label,
.field label,
.form-grid label,
.inline-form label,
.custom-field,
.rule-edit-grid label,
.role-panel label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 700;
}

.login-error {
  min-height: var(--space-6);
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  font-weight: 700;
}

.toast {
  position: fixed;
  left: 50%;
  top: var(--space-8);
  z-index: 20050;
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  background:
    linear-gradient(180deg, rgba(14, 26, 42, 0.98), rgba(6, 12, 22, 0.96));
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(91, 229, 255, 0.22),
    0 20px 48px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(49, 217, 255, 0.2);
  font-size: var(--text-16);
  line-height: var(--leading-16);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-1 * var(--space-3)));
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.toast::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 18%, transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 52%);
  opacity: 0.86;
}

.toast.active {
  opacity: 1;
  transform: translate(-50%, 0);
}

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100%;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  padding: var(--space-6);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(49, 217, 255, 0.18), transparent 36%),
    rgba(2, 8, 14, 0.78);
  backdrop-filter: blur(10px);
  transition: opacity 240ms ease, visibility 240ms ease;
}

.welcome-overlay.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1;
  visibility: visible;
}

.welcome-overlay::backdrop {
  background: transparent;
}

.welcome-center {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  pointer-events: none;
}

body.welcome-active .app-shell {
  filter: blur(2px) saturate(0.92);
}

.welcome-card {
  position: relative;
  width: min(640px, calc(100vw - var(--space-12)));
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  background: linear-gradient(180deg, rgba(12, 25, 40, 0.94), rgba(7, 17, 29, 0.9));
  box-shadow: var(--shadow-lg), var(--glow-cyan);
  transform: translateY(var(--space-4)) scale(0.96);
  animation: welcome-rise 2200ms ease both;
}

.welcome-card span {
  display: block;
  color: var(--color-primary);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.welcome-card strong {
  display: block;
  margin-top: var(--space-3);
  max-width: 100%;
  font-size: var(--text-24);
  line-height: var(--leading-32);
  text-shadow: var(--glow-cyan);
  white-space: normal;
  overflow-wrap: anywhere;
}

.welcome-card p {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.welcome-overlay.commander {
  background:
    radial-gradient(circle at 50% 45%, rgba(218, 165, 32, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.78);
}

.welcome-overlay.commander .welcome-card {
  border-color: rgba(255, 184, 74, 0.5);
  background:
    linear-gradient(135deg, rgba(218, 165, 32, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(16, 13, 7, 0.98), rgba(2, 2, 2, 0.94));
  box-shadow: var(--shadow-lg), 0 0 40px rgba(218, 165, 32, 0.3), 0 0 72px rgba(176, 130, 22, 0.2);
}

.welcome-overlay.commander .welcome-card span,
.welcome-overlay.commander .welcome-card strong {
  color: #daa520;
}

.welcome-overlay.deputy {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 75, 95, 0.18), transparent 34%),
    rgba(18, 0, 4, 0.78);
}

.welcome-overlay.deputy .welcome-card {
  border-color: rgba(255, 75, 95, 0.55);
  background:
    linear-gradient(135deg, rgba(255, 75, 95, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(34, 7, 13, 0.98), rgba(9, 2, 4, 0.94));
  box-shadow: var(--shadow-lg), 0 0 40px rgba(255, 75, 95, 0.32), 0 0 72px rgba(255, 154, 61, 0.14);
}

.welcome-overlay.deputy .welcome-card span,
.welcome-overlay.deputy .welcome-card strong {
  color: #ff6b7b;
}

.welcome-overlay.logistics {
  background:
    radial-gradient(circle at 50% 45%, rgba(155, 92, 255, 0.2), transparent 34%),
    rgba(9, 2, 18, 0.78);
}

.welcome-overlay.logistics .welcome-card {
  border-color: rgba(155, 92, 255, 0.55);
  background:
    linear-gradient(135deg, rgba(155, 92, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(18, 10, 38, 0.98), rgba(8, 4, 16, 0.94));
  box-shadow: var(--shadow-lg), 0 0 40px rgba(155, 92, 255, 0.3), 0 0 72px rgba(215, 183, 255, 0.14);
}

.welcome-overlay.logistics .welcome-card span,
.welcome-overlay.logistics .welcome-card strong {
  color: #b88aff;
}

@keyframes welcome-rise {
  0% {
    opacity: 0;
    transform: translateY(var(--space-6)) scale(0.96);
  }
  16%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(var(--space-3) * -1)) scale(1.02);
  }
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
  isolation: isolate;
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center 96px;
  background-size: min(1180px, 88vw) auto;
}

body.account-commander .app-shell::before {
  opacity: 0.72;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='860' viewBox='0 0 1280 860'%3E%3Cg fill='none' stroke='%23daa520' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M115 548c82-92 170-136 264-132 124 6 188 96 314 80 95-12 126-86 212-128 74-36 142-26 204 28' stroke-width='36' opacity='.2'/%3E%3Cpath d='M124 548c88-104 184-154 288-150 126 5 184 94 304 80 92-11 126-90 214-134 78-39 150-28 218 34' stroke-width='12' opacity='.72'/%3E%3Cpath d='M142 594c102-92 206-128 314-108 92 18 146 82 244 70 90-11 126-72 194-112 68-40 142-46 222-18' stroke-width='6' opacity='.52'/%3E%3Cpath d='M882 348l56-78 28 58 76-28-34 68 84 14-78 36 38 72-84-28-48 72-12-86-82-16 72-44z' stroke-width='11' opacity='.78'/%3E%3Cpath d='M1018 386l96-52 34 34-72 44 80 34-48 32-86-30' stroke-width='9' opacity='.7'/%3E%3Cpath d='M948 354l-64-80m96 60 4-104m48 130 72-82' stroke-width='8' opacity='.58'/%3E%3Cpath d='M932 408c38-10 76-8 114 8m-146 36c60-28 124-30 192-6' stroke-width='6' opacity='.72'/%3E%3Cpath d='M258 450l-76-54m158 18-58-78m146 68-24-96m154 112 18-102m120 102 58-86' stroke-width='9' opacity='.5'/%3E%3Cpath d='M352 520l-82 88m186-68-48 118m210-102 8 128m168-156 54 108' stroke-width='8' opacity='.42'/%3E%3Cpath d='M928 392l28-8 14 16-26 10z' fill='%23daa520' stroke='none' opacity='.78'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 58% 42%, rgba(218, 165, 32, 0.2), transparent 44%);
}

body.account-deputy .app-shell::before {
  opacity: 0.72;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='860' viewBox='0 0 1280 860'%3E%3Cg fill='none' stroke='%23ff4b5f' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M640 132c130 0 244 82 296 196 42 92 26 202-44 306-66 98-150 146-252 146s-186-48-252-146c-70-104-86-214-44-306 52-114 166-196 296-196z' stroke-width='14' opacity='.68'/%3E%3Cpath d='M468 286 292 108l40 238-126 84 168 40m532-184 176-178-40 238 126 84-168 40' stroke-width='20' opacity='.46'/%3E%3Cpath d='M470 394c72-48 144-52 216-12m138 12c-72-48-144-52-216-12' stroke-width='16' opacity='.72'/%3E%3Cpath d='M468 420l146 46-132 42m356-88-146 46 132 42' stroke-width='10' opacity='.78'/%3E%3Cpath d='M640 444l-46 102 46 62 46-62z' stroke-width='10' opacity='.74'/%3E%3Cpath d='M528 584c72 36 152 36 224 0m-248 52 78 52m194-52-78 52' stroke-width='10' opacity='.56'/%3E%3Cpath d='M388 618l-170 102m684-102 170 102M438 692 314 812m528-120 124 120' stroke-width='7' opacity='.42'/%3E%3Cpath d='M520 246l-56-124m248 124 56-124' stroke-width='9' opacity='.48'/%3E%3Cpath d='M356 506h188m376 0h188M640 226v120m0 312v88' stroke-width='6' opacity='.44'/%3E%3Cpath d='M520 322l120 64 120-64' stroke-width='8' opacity='.58'/%3E%3C/g%3E%3Cg fill='%23ff4b5f'%3E%3Cpath d='M474 398 636 444 488 486z' opacity='.28'/%3E%3Cpath d='M806 398 644 444 792 486z' opacity='.28'/%3E%3Cpath d='M640 470 594 558 640 620 686 558z' opacity='.24'/%3E%3Cpath d='M542 408 616 430 556 448z' opacity='.62'/%3E%3Cpath d='M738 408 664 430 724 448z' opacity='.62'/%3E%3Ccircle cx='640' cy='444' r='12' opacity='.74'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 58% 42%, rgba(255, 75, 95, 0.24), transparent 44%),
    radial-gradient(circle at 50% 48%, rgba(255, 120, 136, 0.12), transparent 30%);
}

body.account-logistics .app-shell::before {
  opacity: 0.72;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='860' viewBox='0 0 1280 860'%3E%3Cg fill='none' stroke='%239b5cff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M260 226h224l76 78h164l76-78h220' stroke-width='8' opacity='.44'/%3E%3Cpath d='M198 332h190l84 84h336l84-84h190' stroke-width='10' opacity='.52'/%3E%3Cpath d='M164 476h182l66 66h456l66-66h182' stroke-width='12' opacity='.46'/%3E%3Cpath d='M248 620h194l88 88h220l88-88h194' stroke-width='8' opacity='.42'/%3E%3Cpath d='M388 196v148m504-148v148M312 332v84m656-84v84M286 476v66m708-66v66M414 620v88m452-88v88' stroke-width='6' opacity='.36'/%3E%3Crect x='526' y='274' width='228' height='116' rx='18' stroke-width='10' opacity='.66'/%3E%3Crect x='556' y='302' width='72' height='26' rx='8' stroke-width='6' opacity='.58'/%3E%3Crect x='652' y='302' width='72' height='26' rx='8' stroke-width='6' opacity='.58'/%3E%3Cpath d='M560 350h160M560 372h116' stroke-width='6' opacity='.54'/%3E%3Ccircle cx='318' cy='226' r='18' stroke-width='8' opacity='.62'/%3E%3Ccircle cx='962' cy='226' r='18' stroke-width='8' opacity='.62'/%3E%3Ccircle cx='260' cy='476' r='16' stroke-width='7' opacity='.52'/%3E%3Ccircle cx='1020' cy='476' r='16' stroke-width='7' opacity='.52'/%3E%3Cpath d='M742 520h116l54 54m-564 0 54-54h116' stroke-width='8' opacity='.46'/%3E%3Cpath d='M530 566h220' stroke-width='6' opacity='.42'/%3E%3C/g%3E%3Cg fill='%23d7b7ff'%3E%3Crect x='590' y='318' width='18' height='18' rx='4' opacity='.72'/%3E%3Crect x='672' y='318' width='18' height='18' rx='4' opacity='.72'/%3E%3Ccircle cx='640' cy='548' r='10' opacity='.54'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 40%, rgba(155, 92, 255, 0.24), transparent 42%),
    linear-gradient(120deg, transparent 0 42%, rgba(155, 92, 255, 0.12) 43%, transparent 45% 55%, rgba(215, 183, 255, 0.08) 57%, transparent 58%),
    linear-gradient(60deg, transparent 0 42%, rgba(155, 92, 255, 0.1) 43%, transparent 45% 55%, rgba(215, 183, 255, 0.08) 57%, transparent 58%),
    repeating-radial-gradient(circle at 50% 40%, transparent 0 30px, rgba(155, 92, 255, 0.12) 31px 33px, transparent 34px 72px);
}

.sidebar,
.workspace {
  position: relative;
  z-index: 1;
}

body.account-commander .sidebar {
  background:
    linear-gradient(180deg, rgba(5, 4, 2, 0.88), rgba(14, 11, 5, 0.78)),
    var(--color-sidebar);
}

body.account-commander .workspace {
  background:
    linear-gradient(180deg, rgba(3, 3, 3, 0.56), transparent 18%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.92), rgba(9, 8, 4, 0.86));
}

body.account-commander input,
body.account-commander select,
body.account-commander textarea {
  background: rgba(5, 5, 5, 0.92);
  border-color: rgba(218, 165, 32, 0.34);
  box-shadow: inset 0 0 0 1px rgba(218, 165, 32, 0.05);
}

body.account-commander .metric,
body.account-commander .panel,
body.account-commander .activity-item,
body.account-commander .task-card,
body.account-commander .rule-card,
body.account-commander .exchange-card,
body.account-commander .table-wrap,
body.account-commander .department-legend-item,
body.account-commander .inventory-item,
body.account-commander .reward-manage-item,
body.account-commander .modal-card,
body.account-commander .exchange-balance,
body.account-commander .exchange-notice-scroll,
body.account-commander .attendance-chart,
body.account-commander .department-bars {
  background:
    linear-gradient(180deg, rgba(18, 15, 8, 0.16), transparent 18%),
    linear-gradient(180deg, rgba(3, 3, 3, 0.97), rgba(9, 8, 4, 0.94));
  border-color: rgba(218, 165, 32, 0.3);
}

body.account-commander .metric::after,
body.account-commander .panel::after,
body.account-commander .activity-item::after,
body.account-commander .task-card::after,
body.account-commander .rule-card::after,
body.account-commander .exchange-card::after,
body.account-commander .modal-card::after,
body.account-commander .reward-manage-item::after,
body.account-commander .inventory-item::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(108deg, transparent 0 32%, rgba(255, 255, 255, 0.02) 36%, rgba(255, 232, 164, 0.18) 44%, rgba(218, 165, 32, 0.42) 50%, rgba(255, 235, 168, 0.18) 56%, rgba(255, 255, 255, 0.02) 64%, transparent 68%),
    linear-gradient(180deg, transparent 0 62%, rgba(218, 165, 32, 0.08) 78%, transparent 100%);
  transform: translateX(-62%) skewX(-12deg);
  mix-blend-mode: screen;
  animation: commander-liquid-sheen 6.8s ease-in-out infinite;
}

body.account-commander .panel-heading {
  background:
    linear-gradient(90deg, rgba(218, 165, 32, 0.14), rgba(218, 165, 32, 0.04) 38%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(7, 7, 7, 0.98), rgba(12, 10, 5, 0.96));
  border-bottom-color: rgba(218, 165, 32, 0.24);
}

body.account-commander .panel-heading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 24%, rgba(255, 228, 150, 0.08) 32%, rgba(255, 218, 116, 0.24) 40%, rgba(218, 165, 32, 0.34) 48%, rgba(255, 228, 150, 0.12) 56%, transparent 66%);
  transform: translateX(-50%);
  opacity: 0.72;
  animation: commander-header-flow 5.2s linear infinite;
}

body.account-commander tbody tr:hover,
body.account-commander .task-meta span,
body.account-commander .login-choice > span {
  background: rgba(218, 165, 32, 0.14);
}

body.account-commander .count-pill,
body.account-commander .status-pill,
body.account-commander .delta-pill {
  background: rgba(218, 165, 32, 0.22);
  color: #ffe8a4;
  border: 1px solid rgba(255, 220, 118, 0.44);
  box-shadow: 0 0 18px rgba(218, 165, 32, 0.16);
}

body.account-deputy tbody tr:hover,
body.account-deputy .task-meta span,
body.account-deputy .login-choice > span {
  background: rgba(255, 75, 95, 0.14);
}

body.account-deputy .count-pill,
body.account-deputy .status-pill,
body.account-deputy .delta-pill {
  background: rgba(255, 75, 95, 0.22);
  color: #ffd2d8;
  border: 1px solid rgba(255, 122, 136, 0.44);
  box-shadow: 0 0 18px rgba(255, 75, 95, 0.18);
}

body.account-logistics tbody tr:hover,
body.account-logistics .task-meta span,
body.account-logistics .login-choice > span {
  background: rgba(186, 132, 255, 0.16);
}

body.account-logistics .count-pill,
body.account-logistics .status-pill,
body.account-logistics .delta-pill {
  background: rgba(186, 132, 255, 0.24);
  color: #f1e2ff;
  border: 1px solid rgba(215, 183, 255, 0.4);
  box-shadow: 0 0 18px rgba(155, 92, 255, 0.18);
}

body.account-commander .inventory-bar-track,
body.account-commander .attendance-chart-track,
body.account-commander .exchange-image-wrap,
body.account-commander .sold-out-badge {
  background: rgba(4, 4, 4, 0.92);
}

body.account-commander .segment {
  background: rgba(6, 6, 6, 0.92);
}

body.account-commander .primary-action,
body.account-commander .secondary-action,
body.account-commander .icon-button,
body.account-commander .segment.active,
body.account-commander .nav-tab.active,
body.account-commander .nav-tab:hover {
  position: relative;
  overflow: hidden;
}

body.account-commander .primary-action::after,
body.account-commander .secondary-action::after,
body.account-commander .icon-button::after,
body.account-commander .segment.active::after,
body.account-commander .nav-tab.active::after,
body.account-commander .nav-tab:hover::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 243, 201, 0.08) 40%, rgba(255, 226, 126, 0.42) 48%, rgba(218, 165, 32, 0.72) 52%, rgba(255, 233, 154, 0.28) 58%, transparent 66%);
  transform: translateX(-70%) skewX(-18deg);
  mix-blend-mode: screen;
  animation: commander-button-flow 3.8s ease-in-out infinite;
}

body.account-commander .secondary-action,
body.account-commander .icon-button {
  background: rgba(7, 7, 7, 0.92);
}

body.account-commander .role-panel select,
body.account-commander .exchange-card.sold-out::after {
  background: rgba(7, 7, 7, 0.94);
}

body.account-commander .toast {
  background:
    linear-gradient(180deg, rgba(22, 17, 8, 0.98), rgba(7, 7, 7, 0.96));
  border-color: rgba(218, 165, 32, 0.62);
  box-shadow:
    0 0 0 1px rgba(218, 165, 32, 0.28),
    0 20px 48px rgba(0, 0, 0, 0.46),
    0 0 36px rgba(218, 165, 32, 0.28);
}

body.account-commander .department-bar-track span,
body.account-commander .inventory-bar-track span,
body.account-commander .attendance-chart-track span {
  background:
    linear-gradient(180deg, rgba(255, 242, 194, 0.96), rgba(255, 218, 105, 0.92) 16%, #daa520 46%, #8b6508 100%);
  background-size: 220% 220%;
  animation: commander-metal-flow 4.4s linear infinite;
}

@keyframes commander-liquid-sheen {
  0% {
    transform: translateX(-72%) skewX(-14deg);
    opacity: 0.12;
  }
  22% {
    opacity: 0.34;
  }
  48% {
    opacity: 0.52;
  }
  72% {
    opacity: 0.22;
  }
  100% {
    transform: translateX(72%) skewX(-14deg);
    opacity: 0.08;
  }
}

@keyframes commander-header-flow {
  0% {
    transform: translateX(-62%);
    opacity: 0.14;
  }
  40% {
    opacity: 0.54;
  }
  100% {
    transform: translateX(62%);
    opacity: 0.1;
  }
}

@keyframes commander-button-flow {
  0% {
    transform: translateX(-76%) skewX(-18deg);
    opacity: 0.08;
  }
  50% {
    opacity: 0.56;
  }
  100% {
    transform: translateX(76%) skewX(-18deg);
    opacity: 0.06;
  }
}

@keyframes commander-metal-flow {
  0% {
    background-position: 0% 0%;
    box-shadow: 0 0 14px rgba(218, 165, 32, 0.24);
  }
  50% {
    background-position: 100% 40%;
    box-shadow: 0 0 24px rgba(255, 220, 112, 0.4);
  }
  100% {
    background-position: 0% 0%;
    box-shadow: 0 0 14px rgba(218, 165, 32, 0.24);
  }
}

body.account-deputy .sidebar {
  background:
    linear-gradient(180deg, rgba(15, 2, 5, 0.88), rgba(28, 4, 8, 0.78)),
    var(--color-sidebar);
}

body.account-deputy .workspace {
  background:
    linear-gradient(180deg, rgba(9, 3, 5, 0.58), transparent 18%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.92), rgba(22, 5, 8, 0.88));
}

body.account-deputy input,
body.account-deputy select,
body.account-deputy textarea {
  background: rgba(6, 4, 5, 0.92);
  border-color: rgba(255, 75, 95, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 75, 95, 0.05);
}

body.account-deputy .metric,
body.account-deputy .panel,
body.account-deputy .activity-item,
body.account-deputy .task-card,
body.account-deputy .rule-card,
body.account-deputy .exchange-card,
body.account-deputy .table-wrap,
body.account-deputy .department-legend-item,
body.account-deputy .inventory-item,
body.account-deputy .reward-manage-item,
body.account-deputy .modal-card,
body.account-deputy .exchange-balance,
body.account-deputy .exchange-notice-scroll,
body.account-deputy .attendance-chart,
body.account-deputy .department-bars {
  background:
    linear-gradient(180deg, rgba(36, 10, 16, 0.16), transparent 18%),
    linear-gradient(180deg, rgba(5, 3, 4, 0.97), rgba(14, 5, 8, 0.94));
  border-color: rgba(255, 75, 95, 0.3);
}

body.account-deputy .metric::after,
body.account-deputy .panel::after,
body.account-deputy .activity-item::after,
body.account-deputy .task-card::after,
body.account-deputy .rule-card::after,
body.account-deputy .exchange-card::after,
body.account-deputy .modal-card::after,
body.account-deputy .reward-manage-item::after,
body.account-deputy .inventory-item::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(108deg, transparent 0 32%, rgba(255, 255, 255, 0.02) 36%, rgba(255, 170, 180, 0.16) 44%, rgba(255, 75, 95, 0.42) 50%, rgba(255, 160, 120, 0.16) 56%, rgba(255, 255, 255, 0.02) 64%, transparent 68%),
    linear-gradient(180deg, transparent 0 62%, rgba(255, 75, 95, 0.08) 78%, transparent 100%);
  transform: translateX(-62%) skewX(-12deg);
  mix-blend-mode: screen;
  animation: commander-liquid-sheen 6.8s ease-in-out infinite;
}

body.account-deputy .panel-heading {
  background:
    linear-gradient(90deg, rgba(255, 75, 95, 0.14), rgba(255, 154, 61, 0.06) 38%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(10, 5, 7, 0.98), rgba(18, 6, 9, 0.96));
  border-bottom-color: rgba(255, 75, 95, 0.24);
}

body.account-deputy .panel-heading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 24%, rgba(255, 176, 160, 0.08) 32%, rgba(255, 102, 120, 0.24) 40%, rgba(255, 75, 95, 0.34) 48%, rgba(255, 154, 61, 0.12) 56%, transparent 66%);
  transform: translateX(-50%);
  opacity: 0.72;
  animation: commander-header-flow 5.2s linear infinite;
}

body.account-deputy .inventory-bar-track,
body.account-deputy .attendance-chart-track,
body.account-deputy .exchange-image-wrap,
body.account-deputy .sold-out-badge {
  background: rgba(5, 4, 4, 0.92);
}

body.account-deputy .segment {
  background: rgba(7, 5, 6, 0.92);
}

body.account-deputy .primary-action,
body.account-deputy .secondary-action,
body.account-deputy .icon-button,
body.account-deputy .segment.active,
body.account-deputy .nav-tab.active,
body.account-deputy .nav-tab:hover {
  position: relative;
  overflow: hidden;
}

body.account-deputy .primary-action::after,
body.account-deputy .secondary-action::after,
body.account-deputy .icon-button::after,
body.account-deputy .segment.active::after,
body.account-deputy .nav-tab.active::after,
body.account-deputy .nav-tab:hover::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 226, 210, 0.08) 40%, rgba(255, 126, 138, 0.42) 48%, rgba(255, 75, 95, 0.72) 52%, rgba(255, 154, 61, 0.22) 58%, transparent 66%);
  transform: translateX(-70%) skewX(-18deg);
  mix-blend-mode: screen;
  animation: commander-button-flow 3.8s ease-in-out infinite;
}

body.account-deputy .secondary-action,
body.account-deputy .icon-button,
body.account-deputy .role-panel select,
body.account-deputy .exchange-card.sold-out::after {
  background: rgba(8, 5, 6, 0.94);
}

body.account-deputy .toast {
  background:
    linear-gradient(180deg, rgba(30, 10, 14, 0.98), rgba(8, 4, 5, 0.96));
  border-color: rgba(255, 75, 95, 0.62);
  box-shadow:
    0 0 0 1px rgba(255, 75, 95, 0.28),
    0 20px 48px rgba(0, 0, 0, 0.46),
    0 0 36px rgba(255, 75, 95, 0.28);
}

body.account-deputy .department-bar-track span,
body.account-deputy .inventory-bar-track span,
body.account-deputy .attendance-chart-track span {
  background:
    linear-gradient(180deg, rgba(255, 208, 214, 0.96), rgba(255, 122, 136, 0.92) 16%, #ff4b5f 46%, #7f1630 100%);
  background-size: 220% 220%;
  animation: commander-metal-flow 4.4s linear infinite;
}

body.account-logistics .sidebar {
  background:
    linear-gradient(180deg, rgba(44, 18, 82, 0.92), rgba(29, 12, 58, 0.84)),
    var(--color-sidebar);
}

body.account-logistics .workspace {
  background:
    radial-gradient(circle at top right, rgba(190, 142, 255, 0.2), transparent 26%),
    radial-gradient(circle at bottom left, rgba(123, 67, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(51, 22, 93, 0.26), transparent 18%),
    linear-gradient(135deg, rgba(42, 16, 78, 0.94), rgba(20, 10, 42, 0.88));
}

body.account-logistics input,
body.account-logistics select,
body.account-logistics textarea {
  background: rgba(54, 24, 98, 0.7);
  border-color: rgba(186, 132, 255, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(215, 183, 255, 0.08),
    0 10px 24px rgba(60, 21, 115, 0.16);
}

body.account-logistics .metric,
body.account-logistics .panel,
body.account-logistics .activity-item,
body.account-logistics .task-card,
body.account-logistics .rule-card,
body.account-logistics .exchange-card,
body.account-logistics .table-wrap,
body.account-logistics .department-legend-item,
body.account-logistics .inventory-item,
body.account-logistics .reward-manage-item,
body.account-logistics .modal-card,
body.account-logistics .exchange-balance,
body.account-logistics .exchange-notice-scroll,
body.account-logistics .attendance-chart,
body.account-logistics .department-bars {
  background:
    radial-gradient(circle at top right, rgba(231, 215, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(118, 62, 210, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(74, 31, 133, 0.94), rgba(34, 15, 67, 0.9));
  border-color: rgba(186, 132, 255, 0.36);
  box-shadow:
    0 18px 44px rgba(44, 12, 88, 0.24),
    inset 0 1px 0 rgba(236, 224, 255, 0.08);
}

body.account-logistics .metric::after,
body.account-logistics .panel::after,
body.account-logistics .activity-item::after,
body.account-logistics .task-card::after,
body.account-logistics .rule-card::after,
body.account-logistics .exchange-card::after,
body.account-logistics .modal-card::after,
body.account-logistics .reward-manage-item::after,
body.account-logistics .inventory-item::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(108deg, transparent 0 32%, rgba(255, 255, 255, 0.02) 36%, rgba(210, 188, 255, 0.16) 44%, rgba(155, 92, 255, 0.42) 50%, rgba(215, 183, 255, 0.18) 56%, rgba(255, 255, 255, 0.02) 64%, transparent 68%),
    linear-gradient(180deg, transparent 0 62%, rgba(155, 92, 255, 0.08) 78%, transparent 100%);
  transform: translateX(-62%) skewX(-12deg);
  mix-blend-mode: screen;
  animation: commander-liquid-sheen 6.8s ease-in-out infinite;
}

body.account-logistics .panel-heading {
  background:
    linear-gradient(90deg, rgba(201, 160, 255, 0.2), rgba(215, 183, 255, 0.1) 42%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(74, 31, 133, 0.98), rgba(42, 17, 80, 0.96));
  border-bottom-color: rgba(186, 132, 255, 0.28);
}

body.account-logistics .panel-heading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 24%, rgba(224, 206, 255, 0.08) 32%, rgba(181, 120, 255, 0.24) 40%, rgba(155, 92, 255, 0.34) 48%, rgba(215, 183, 255, 0.12) 56%, transparent 66%);
  transform: translateX(-50%);
  opacity: 0.72;
  animation: commander-header-flow 5.2s linear infinite;
}

body.account-commander .status-approved,
body.account-commander .status-done,
body.account-commander .delta-pill.positive {
  color: #1a1202;
  background: linear-gradient(180deg, #ffe7a0, #daa520 62%, #b98310);
  border-color: rgba(255, 230, 150, 0.7);
  box-shadow: 0 0 22px rgba(218, 165, 32, 0.3);
}

body.account-commander .status-rejected,
body.account-commander .status-receiver_rejected,
body.account-commander .delta-pill.negative {
  color: #fff6f7;
  background: linear-gradient(180deg, #ff9b86, #ff5c7a 62%, #8f2137);
  border-color: rgba(255, 170, 170, 0.58);
  box-shadow: 0 0 22px rgba(255, 92, 122, 0.24);
}

body.account-commander .status-submitted,
body.account-commander .status-pending_acceptance {
  color: #1e1101;
  background: linear-gradient(180deg, #ffe7b4, #ffb84a 62%, #cd7c05);
  border-color: rgba(255, 215, 143, 0.66);
  box-shadow: 0 0 22px rgba(255, 184, 74, 0.26);
}

body.account-deputy .status-approved,
body.account-deputy .status-done,
body.account-deputy .delta-pill.positive {
  color: #2a0509;
  background: linear-gradient(180deg, #ffdfc9, #ff7a88 60%, #d62f48);
  border-color: rgba(255, 188, 196, 0.66);
  box-shadow: 0 0 22px rgba(255, 92, 122, 0.24);
}

body.account-deputy .status-rejected,
body.account-deputy .status-receiver_rejected,
body.account-deputy .delta-pill.negative {
  color: #fff4f6;
  background: linear-gradient(180deg, #ffb0b8, #ff4b5f 58%, #7f1630);
  border-color: rgba(255, 169, 180, 0.64);
  box-shadow: 0 0 22px rgba(255, 75, 95, 0.3);
}

body.account-deputy .status-submitted,
body.account-deputy .status-pending_acceptance {
  color: #2e0b03;
  background: linear-gradient(180deg, #ffd9bf, #ff9a3d 60%, #d45c1a);
  border-color: rgba(255, 196, 146, 0.64);
  box-shadow: 0 0 22px rgba(255, 154, 61, 0.26);
}

body.account-logistics .status-approved,
body.account-logistics .status-done,
body.account-logistics .delta-pill.positive {
  color: #140626;
  background: linear-gradient(180deg, #f1deff, #b88aff 60%, #8244f2);
  border-color: rgba(223, 197, 255, 0.7);
  box-shadow: 0 0 22px rgba(184, 138, 255, 0.28);
}

body.account-logistics .status-rejected,
body.account-logistics .status-receiver_rejected,
body.account-logistics .delta-pill.negative {
  color: #fff5ff;
  background: linear-gradient(180deg, #ffcbef, #da67ff 58%, #7a28bf);
  border-color: rgba(241, 187, 255, 0.66);
  box-shadow: 0 0 22px rgba(218, 103, 255, 0.26);
}

body.account-logistics .status-submitted,
body.account-logistics .status-pending_acceptance {
  color: #241105;
  background: linear-gradient(180deg, #f6dcff, #d49cff 60%, #9b5cff);
  border-color: rgba(228, 194, 255, 0.68);
  box-shadow: 0 0 22px rgba(155, 92, 255, 0.28);
}

body.account-logistics .inventory-bar-track,
body.account-logistics .attendance-chart-track,
body.account-logistics .exchange-image-wrap,
body.account-logistics .sold-out-badge {
  background: rgba(48, 22, 90, 0.78);
}

body.account-logistics .segment {
  background: rgba(60, 27, 110, 0.78);
}

body.account-logistics .primary-action,
body.account-logistics .secondary-action,
body.account-logistics .icon-button,
body.account-logistics .segment.active,
body.account-logistics .nav-tab.active,
body.account-logistics .nav-tab:hover {
  position: relative;
  overflow: hidden;
}

body.account-logistics .primary-action::after,
body.account-logistics .secondary-action::after,
body.account-logistics .icon-button::after,
body.account-logistics .segment.active::after,
body.account-logistics .nav-tab.active::after,
body.account-logistics .nav-tab:hover::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(232, 216, 255, 0.08) 40%, rgba(189, 136, 255, 0.42) 48%, rgba(155, 92, 255, 0.72) 52%, rgba(215, 183, 255, 0.22) 58%, transparent 66%);
  transform: translateX(-70%) skewX(-18deg);
  mix-blend-mode: screen;
  animation: commander-button-flow 3.8s ease-in-out infinite;
}

body.account-logistics .secondary-action,
body.account-logistics .icon-button,
body.account-logistics .role-panel select,
body.account-logistics .exchange-card.sold-out::after {
  background: rgba(55, 24, 102, 0.86);
}

body.account-logistics .toast {
  background:
    linear-gradient(180deg, rgba(92, 40, 158, 0.98), rgba(44, 18, 78, 0.96));
  border-color: rgba(186, 132, 255, 0.64);
  box-shadow:
    0 0 0 1px rgba(186, 132, 255, 0.3),
    0 20px 48px rgba(0, 0, 0, 0.46),
    0 0 36px rgba(186, 132, 255, 0.3);
}

body.account-logistics .department-bar-track span,
body.account-logistics .inventory-bar-track span,
body.account-logistics .attendance-chart-track span {
  background:
    linear-gradient(180deg, rgba(235, 222, 255, 0.96), rgba(190, 142, 255, 0.92) 16%, #9b5cff 46%, #51289f 100%);
  background-size: 220% 220%;
  animation: commander-metal-flow 4.4s linear infinite;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  height: 100vh;
  padding: var(--space-6);
  color: #f7faf6;
  background:
    linear-gradient(180deg, rgba(5, 9, 16, 0.98), rgba(8, 18, 28, 0.94)),
    var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.28);
}

.brand {
  display: grid;
  grid-template-columns: var(--space-12) 1fr;
  align-items: center;
  gap: var(--space-3);
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #031017;
  box-shadow: var(--glow-cyan);
  font-weight: 800;
  overflow: hidden;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #031017;
  font-size: var(--text-20);
  line-height: var(--leading-20);
  font-weight: 900;
}

.brand-mark img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-mark.logo-missing img {
  display: none;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.panel h3,
.activity-item h4,
.task-card h4,
.rule-card h4,
.exchange-card-body h4 {
  margin: 0;
}

.brand h1 {
  font-size: var(--text-16);
  line-height: var(--leading-20);
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 16px color-mix(in srgb, var(--color-primary), transparent 78%);
}

.brand p,
.eyebrow {
  color: var(--color-text-soft);
  font-size: var(--text-12);
  line-height: var(--leading-12);
}

.login-brand p {
  color: var(--color-text-muted);
}

.nav-tabs {
  display: grid;
  gap: var(--space-2);
}

.nav-tab {
  display: grid;
  grid-template-columns: var(--space-8) 1fr;
  align-items: center;
  min-height: var(--space-10);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  color: rgba(232, 247, 255, 0.72);
  background: transparent;
  text-align: left;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.nav-tab:hover,
.nav-tab.active {
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary), transparent 84%), color-mix(in srgb, var(--color-accent), transparent 92%));
  border-color: var(--color-border-strong);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--color-primary), transparent 90%);
}

.role-panel {
  margin-top: auto;
  display: grid;
  gap: var(--space-3);
}

.role-panel label {
  color: rgba(247, 250, 246, 0.68);
}

.role-panel select {
  border-color: var(--color-border);
  background: var(--color-sidebar-soft);
  color: #fff;
}

.role-panel select:disabled {
  opacity: 0.84;
}

.role-panel .secondary-action {
  width: 100%;
}

body.account-guest .role-panel label,
body.account-guest .role-panel select {
  display: none;
}

.workspace {
  min-width: 0;
  padding: var(--space-8);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.topbar .eyebrow {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.topbar h2 {
  font-size: var(--text-32);
  line-height: var(--leading-32);
  font-weight: 800;
  color: var(--color-text);
  text-shadow: var(--glow-cyan);
}

.topbar-actions,
.modal-actions,
.toolbar,
.task-actions,
.rule-edit-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.primary-action,
.secondary-action,
.icon-button,
.segment {
  min-height: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  color: var(--color-text);
  background: rgba(9, 22, 34, 0.78);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  font-weight: 700;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #031017;
  box-shadow: var(--glow-cyan);
}

.primary-action:hover {
  background: linear-gradient(135deg, var(--color-primary-hover), color-mix(in srgb, var(--color-secondary), white 18%));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--glow-cyan);
}

.secondary-action:hover,
.segment:hover,
.icon-button:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm), 0 0 16px color-mix(in srgb, var(--color-primary), transparent 88%);
}

.secondary-action.is-selected {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary), transparent 88%);
  box-shadow: var(--glow-cyan);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--space-10);
  padding: 0;
  font-size: var(--text-20);
  line-height: var(--leading-20);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metrics-grid,
.task-board,
.exchange-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.exchange-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 304px));
  justify-content: start;
}

.task-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(308px, 1fr);
  min-height: 632px;
}

.metrics-grid {
  margin-bottom: var(--space-4);
}

.department-chart-panel {
  margin-bottom: var(--space-4);
}

.department-chart-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(280px, 0.9fr);
  align-items: end;
  gap: var(--space-6);
  padding: var(--space-6);
}

.department-bars {
  min-height: 280px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
  background:
    linear-gradient(color-mix(in srgb, var(--color-primary), transparent 86%) 1px, transparent 1px) 0 0 / 100% 25%,
    rgba(7, 18, 30, 0.64);
  box-shadow:
    inset 0 -18px 34px rgba(0, 0, 0, 0.28),
    var(--shadow-lg);
}

.department-bar-item {
  min-width: 0;
  height: 240px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: var(--space-2);
}

.department-bar-track {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 520px;
}

.department-bar-track span {
  width: min(44px, 72%);
  height: var(--bar-height);
  min-height: 12px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bar-color), white 24%), var(--bar-color));
  box-shadow:
    inset -8px 0 16px rgba(0, 0, 0, 0.24),
    0 0 22px color-mix(in srgb, var(--bar-color), transparent 36%);
  transform: rotateX(8deg);
}

.department-bar-item strong {
  color: var(--color-text);
  font-size: var(--text-14);
  line-height: var(--leading-14);
}

.department-bar-item em {
  max-width: 100%;
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-style: normal;
  text-align: center;
  white-space: nowrap;
}

.department-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.department-legend-item {
  display: grid;
  grid-template-columns: var(--space-4) 1fr;
  gap: var(--space-2);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: rgba(7, 18, 30, 0.64);
}

.department-legend-item span {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: 50%;
  background: var(--legend-color);
  box-shadow: 0 0 16px var(--legend-color);
}

.department-legend-item strong,
.department-legend-item em {
  font-style: normal;
}

.department-legend-item em {
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
}

.attendance-chart {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary), transparent 88%), transparent 42%),
    rgba(4, 12, 22, 0.48);
}

.attendance-chart-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 160px;
  align-items: center;
  gap: var(--space-3);
}

.attendance-chart-row strong {
  overflow: hidden;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-chart-track {
  height: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(4, 12, 22, 0.72);
}

.attendance-chart-track span {
  display: block;
  width: var(--attendance-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  box-shadow: var(--glow-cyan);
}

.attendance-chart-row em {
  color: var(--color-text-muted);
  font-style: normal;
  text-align: right;
}

.metric,
.panel,
.activity-item,
.task-card,
.rule-card,
.exchange-card,
.table-wrap,
.modal-card,
.reward-manage-item,
.inventory-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(12, 25, 40, 0.86), rgba(7, 17, 29, 0.8));
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}

.metric,
.activity-item,
.task-card,
.rule-card {
  padding: var(--space-4);
}

.metric {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.metric:hover,
.activity-item:hover,
.task-card:hover,
.exchange-card:hover,
.rule-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md), 0 0 24px color-mix(in srgb, var(--color-primary), transparent 88%);
}

.metric span {
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 700;
}

.metric strong {
  font-size: var(--text-32);
  line-height: var(--leading-32);
  font-weight: 800;
  color: var(--color-primary);
  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary), transparent 76%);
}

.two-column,
.approval-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: var(--space-4);
}

.panel {
  overflow: hidden;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--space-12);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary), transparent 88%), color-mix(in srgb, var(--color-accent), transparent 94%));
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.panel h3 {
  font-size: var(--text-16);
  line-height: var(--leading-16);
  font-weight: 800;
}

.logistics-notice-panel,
.commander-rules-panel,
.exchange-history-panel,
.department-score-panel,
.dkp-upload-panel {
  margin-top: var(--space-4);
}

.department-score {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-4);
  padding: var(--space-6);
}

.department-score .metric {
  min-height: 96px;
}

.count-pill,
.status-pill,
.delta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-6);
  border-radius: var(--radius-md);
  padding: 0 var(--space-2);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary), transparent 84%), color-mix(in srgb, var(--color-primary), transparent 90%)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 34%);
  color: color-mix(in srgb, var(--color-primary), white 26%);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 12px color-mix(in srgb, var(--color-primary), transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 0 18px color-mix(in srgb, var(--color-primary), transparent 88%);
  backdrop-filter: blur(12px);
}

.delta-pill.positive,
.status-approved,
.status-done {
  color: #031017;
  border-color: rgba(133, 255, 211, 0.42);
  background:
    linear-gradient(180deg, #8effd5, #37e6a2 58%, #158561);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 18px rgba(55, 230, 162, 0.2);
}

.delta-pill.negative,
.status-rejected,
.status-receiver_rejected {
  color: #fff;
  border-color: rgba(255, 176, 188, 0.42);
  background:
    linear-gradient(180deg, #ffb2c1, #ff5c7a 58%, #96253d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 18px rgba(255, 92, 122, 0.22);
}

.status-submitted,
.status-pending_acceptance {
  color: #031017;
  border-color: rgba(255, 214, 142, 0.42);
  background:
    linear-gradient(180deg, #ffe5b0, #ffb84a 58%, #d27d00);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 18px rgba(255, 184, 74, 0.2);
}

.activity-list,
.rules-preview {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.activity-item,
.task-card,
.rule-card {
  display: grid;
  gap: var(--space-3);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.task-card {
  min-height: 308px;
  align-content: start;
}

.activity-item header,
.task-card header,
.rule-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.activity-item h4,
.task-card h4,
.rule-card h4 {
  font-size: var(--text-16);
  line-height: var(--leading-16);
  font-weight: 800;
}

.activity-item p,
.task-card p,
.rule-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toolbar {
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(136px, 0.6fr) minmax(240px, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-4);
}

#personnelLogForm {
  grid-template-columns: minmax(176px, 0.8fr) minmax(220px, 1fr) minmax(144px, 0.7fr) minmax(280px, 1.4fr) auto;
  gap: var(--space-4);
  padding: var(--space-6);
}

#membersView .toolbar {
  align-items: end;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-4);
}

#membersView .table-wrap,
.personnel-log-panel {
  margin-top: var(--space-4);
}

.inline-form.rules-form {
  grid-template-columns: minmax(176px, 1fr) 120px minmax(160px, 0.8fr) minmax(240px, 1.2fr) auto;
}

.custom-field {
  display: none;
}

.custom-field.active {
  display: grid;
}

.compact {
  min-width: 192px;
}

.search-field {
  flex: 1 1 320px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  padding: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary), transparent 88%);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background var(--transition-fast);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary), transparent 92%);
}

.segmented {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.segment {
  flex: 0 0 auto;
}

.segment.active {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary), white 6%), color-mix(in srgb, var(--color-accent), transparent 20%));
  color: #031017;
  box-shadow: var(--glow-cyan);
}

.task-card {
  min-height: 224px;
}

.task-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.task-meta span {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-primary), transparent 92%);
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-actions {
  margin-top: auto;
}

.record-time {
  display: inline-grid;
  gap: 0;
  vertical-align: middle;
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
}

.record-time span {
  display: block;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.panel-footer-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--space-4) var(--space-4);
}

.inventory-chart-panel,
.inventory-form-panel,
.inventory-log-panel {
  margin-top: var(--space-4);
}

.inventory-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.inventory-item {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(72px, 1fr) 56px;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary), transparent 88%), transparent 34%),
    rgba(7, 18, 30, 0.72);
  box-shadow: var(--shadow-sm), inset 0 0 22px color-mix(in srgb, var(--color-primary), transparent 96%);
}

.inventory-item strong,
.inventory-item span,
.inventory-item em {
  display: block;
  min-width: 0;
}

.inventory-item strong,
.inventory-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-item span {
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
}

.inventory-item em {
  color: var(--color-primary);
  font-size: var(--text-20);
  line-height: var(--leading-20);
  font-style: normal;
  font-weight: 800;
  text-shadow: var(--glow-cyan);
  text-align: right;
  justify-self: end;
  min-width: 40px;
}

.inventory-bar-track {
  height: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 18, 0.78);
  overflow: hidden;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.3);
}

.inventory-bar-track span {
  display: block;
  width: var(--stock-width);
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary), transparent 64%);
}

.inventory-form {
  grid-template-columns: minmax(120px, 0.5fr) minmax(220px, 1fr) 120px minmax(180px, 0.8fr) minmax(240px, 1fr) auto;
}

.exchange-balance {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  background: rgba(9, 22, 34, 0.78);
  box-shadow: var(--shadow-sm), inset 0 0 20px color-mix(in srgb, var(--color-primary), transparent 96%);
}

.exchange-balance strong {
  color: var(--color-primary);
}

.exchange-balance span {
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
}

.exchange-card {
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
  max-width: 304px;
}

.exchange-card.sold-out {
  filter: grayscale(0.86);
  opacity: 0.62;
}

.exchange-card.sold-out::after {
  content: "售罄";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  background: rgba(11, 16, 22, 0.86);
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
}

.exchange-image-wrap {
  aspect-ratio: 4 / 3;
  width: 100%;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary), transparent 84%), transparent 55%),
    var(--color-sidebar);
}

.sold-out-badge {
  position: absolute;
  inset: auto var(--space-3) var(--space-3) auto;
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  background: rgba(5, 9, 16, 0.88);
  color: var(--color-text);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
}

.exchange-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

.exchange-card-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.price-editor {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-2);
}

.price-editor label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
}

.reward-form {
  grid-template-columns: repeat(5, minmax(160px, 1fr)) auto;
}

.reward-form label {
  min-width: 0;
}

.reward-manage-list {
  display: grid;
  gap: var(--space-3);
}

.reward-manage-item {
  display: grid;
  grid-template-columns: 88px minmax(180px, 1fr) minmax(140px, 180px) auto;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: rgba(7, 18, 30, 0.72);
  box-shadow: var(--shadow-sm);
}

.reward-manage-item img {
  width: 88px;
  height: 66px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-sidebar);
}

.reward-manage-item h4 {
  margin: 0;
  font-size: var(--text-16);
  line-height: var(--leading-16);
}

.reward-manage-item p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
}

.reward-manage-item label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
}

.reward-manage-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.danger-action {
  border-color: rgba(255, 92, 122, 0.42);
  color: var(--color-danger);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.compact-pagination {
  margin-top: 0;
  padding: 0 var(--space-4) var(--space-4);
}

.exchange-card-body header {
  display: grid;
  gap: var(--space-2);
}

.exchange-card-body h4 {
  min-height: var(--space-12);
  font-size: var(--text-16);
  line-height: var(--leading-16);
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exchange-cost {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-primary);
}

.exchange-cost strong {
  font-size: var(--text-32);
  line-height: var(--leading-32);
  font-weight: 800;
  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary), transparent 76%);
}

.exchange-cost span {
  color: var(--color-text-muted);
  font-weight: 800;
}

.stock-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: 800;
}

.rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.rule-card {
  align-items: start;
}

.rule-card strong {
  color: var(--color-primary);
}

.rule-edit-grid {
  display: grid;
  grid-template-columns: minmax(192px, 1fr) 120px minmax(160px, 0.7fr) minmax(240px, 1.2fr);
  gap: var(--space-3);
  width: 100%;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.rule-edit-grid .wide {
  grid-column: auto;
}

.rule-edit-actions {
  width: 100%;
}

dialog {
  width: min(760px, calc(100vw - 32px));
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
}

dialog::backdrop {
  background: rgba(2, 8, 14, 0.72);
  backdrop-filter: blur(8px);
}

.modal-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(12, 25, 40, 0.96), rgba(7, 17, 29, 0.94));
  box-shadow: var(--shadow-lg), var(--glow-cyan);
}

.modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.modal-heading h3 {
  margin: 0;
  font-size: var(--text-20);
  line-height: var(--leading-20);
}

.exchange-notice-card {
  display: grid;
  gap: var(--space-4);
}

.exchange-notice-scroll {
  max-height: min(280px, 42vh);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary), transparent 88%), transparent 18%),
    rgba(4, 12, 22, 0.68);
  color: var(--color-text-muted);
  outline: none;
  scrollbar-color: var(--color-primary) rgba(255, 255, 255, 0.08);
}

.exchange-notice-scroll:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-primary), transparent 86%), var(--glow-cyan);
}

.exchange-notice-scroll p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-14);
  line-height: var(--leading-14);
}

.exchange-notice-scroll h4,
.exchange-notice-scroll h5 {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.exchange-notice-scroll h4 {
  font-size: var(--text-20);
  line-height: var(--leading-20);
}

.exchange-notice-scroll h5 {
  padding-top: var(--space-2);
  color: var(--color-primary);
  font-size: var(--text-16);
  line-height: var(--leading-16);
}

.exchange-notice-scroll strong {
  color: var(--color-primary);
}

.exchange-notice-scroll p:last-child {
  margin-bottom: 0;
}

.exchange-notice-end {
  color: var(--color-primary);
  font-weight: 800;
}

.exchange-notice-actions {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.form-hint {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-12);
  line-height: var(--leading-12);
}

.modal-actions {
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.empty-state {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 1080px) {
  .two-column,
  .approval-layout,
  .inline-form,
  .inline-form.rules-form,
  #personnelLogForm,
  .inventory-form,
  .rule-edit-grid {
    grid-template-columns: 1fr;
  }

  .rule-edit-grid .wide {
    grid-column: 1;
  }
}

@media (max-width: 920px) {
  .login-choice-grid {
    grid-template-columns: 1fr;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    z-index: 5;
    height: auto;
    padding: var(--space-4);
  }

  .nav-tabs {
    grid-template-columns: repeat(4, 1fr);
  }

  .nav-tab {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: var(--space-12);
    padding: var(--space-1);
    font-size: var(--text-12);
    line-height: var(--leading-12);
  }

  .role-panel {
    display: none;
  }

  .workspace {
    padding: var(--space-4);
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .department-chart-layout {
    grid-template-columns: 1fr;
  }

  .attendance-chart-row {
    grid-template-columns: 1fr;
  }

  .attendance-chart-row em {
    text-align: left;
  }

  .exchange-balance,
  .pagination,
  .topbar-actions,
  .primary-action,
  .secondary-action {
    width: 100%;
  }

  .primary-action,
  .secondary-action {
    justify-content: center;
  }

  .exchange-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .task-board {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(260px, auto);
    min-height: 1096px;
  }

  .task-card {
    min-height: 260px;
  }

  .exchange-card {
    max-width: none;
  }

  .reward-form,
  .reward-manage-item {
    grid-template-columns: 1fr;
  }

  .reward-manage-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .login-card {
    padding: var(--space-6);
  }

  .login-action-row {
    grid-template-columns: 1fr;
  }

  .brand {
    align-items: start;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar h2 {
    font-size: var(--text-24);
    line-height: var(--leading-24);
  }

  .metrics-grid,
  .form-grid,
  .task-meta,
  .price-editor {
    grid-template-columns: 1fr;
  }

  .welcome-card {
    padding: var(--space-6);
  }

  .welcome-card strong {
    font-size: var(--text-24);
    line-height: var(--leading-24);
  }
}