/* Shared frosted surfaces. Keep application geometry and semantic states intact. */
:root {
  --frost-surface: rgba(255, 255, 255, .74);
  --frost-border: rgba(255, 255, 255, .94);
  --frost-shadow: 0 10px 30px rgba(36, 60, 89, .045), inset 0 1px 0 rgba(255, 255, 255, .9);
  --frost-background: radial-gradient(ellipse at 5% 0%, #dce9f2 0, transparent 38%),
    radial-gradient(ellipse at 95% 26%, #e9e7f3 0, transparent 38%),
    radial-gradient(ellipse at 70% 90%, #e5f0ed 0, transparent 36%), #f0f3f7;
}

.public-home, .account-page, .owner-shell, .role-shell {
  background: var(--frost-background);
  background-attachment: fixed;
}
.public-home {
  --public-accent: #355ab6;
  --public-accent-strong: #294899;
  --public-accent-soft: #e7edfc;
  --public-muted: #64728a;
  --public-border: #d9e2ef;
}

.public-home .public-nav,
.account-page .account-header, .owner-topbar, .role-shell .topbar {
  background: rgba(250, 252, 255, .8);
  border-bottom: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 3px 20px rgba(41, 66, 108, .04);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}
.public-brand .brand-mark {
  background: linear-gradient(145deg, #5279d1, #3456aa);
  box-shadow: 0 5px 16px #3456aa26, inset 0 1px 0 #ffffff40;
}
.public-home .public-nav nav { gap: 4px; align-items: center; }
.public-home .public-nav nav a { padding: 8px 15px; border: 0; border-radius: 9px; font-size: 13px; color: var(--public-muted); font-weight: 500; }
.public-home .public-nav nav a::after { content: none; }
.public-home .public-nav nav a:hover { background: #e9eff870; }
.public-home .public-nav nav a[aria-current] { background: #e6edf9; color: #375b96; font-weight: 500; }
.public-home :is(.hero-login, .public-services, .pro-card, .guarantee-section, .help-section,
  .public-admission-entry) {
  border: 1px solid var(--frost-border);
  border-radius: 18px;
  background: var(--frost-surface);
  box-shadow: var(--frost-shadow);
}
/* Blur the main surfaces once; nested rows keep their lighter, inexpensive fill. */
.public-home :is(.hero-login, .public-services, .public-admission-entry,
  .guarantee-section, .help-section) {
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
}
.public-home .public-admission-entry {
  gap: 18px;
  padding: 22px 26px;
  background: linear-gradient(110deg, #ffffffc7, #e7edf5a8 60%, #ebe7f3b8);
}
.admission-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 1px solid #fff;
  border-radius: 15px;
  background: linear-gradient(145deg, #eef2fb, #e2e7f5);
  color: #6175a6;
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px #314d7c08;
}
.public-home .public-admission-entry > div { flex: 1; }
.public-home .public-admission-entry strong { font-size: 17px; }
.public-home .public-admission-entry p { margin-bottom: 0; }
.public-home .public-admission-button {
  border: 1px solid #fff;
  background: #ffffffb8;
  box-shadow: 0 5px 14px #3456aa0a, inset 0 1px 0 #fff;
}
.public-home :is(.login-submit, .nav-login-link, .pro-button.primary) {
  border-radius: 10px;
  background: linear-gradient(125deg, #466bc4, #3457b3);
  box-shadow: 0 6px 16px #3457b326, inset 0 1px 0 #ffffff30;
}
.public-home :is(.login-submit, .nav-login-link, .pro-button.primary):hover {
  background: linear-gradient(125deg, #355ab3, #294899);
}
.public-home :is(.login-logo, .guarantee-icon) {
  border: 1px solid #ffffffd9;
  background: linear-gradient(135deg, #e9f1ff, #e6e8fa);
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px #3457b308;
}

/* Official Delta Force artwork, reused locally from the existing game asset.
   Source: https://game.gtimg.cn/images/dfm/cp/a20240906main/p8_img.jpg */
.public-home .hero-banner {
  isolation: isolate;
  display: block;
  min-height: 418px;
  border: 1px solid #244052;
  border-radius: 22px;
  background: #112738;
  box-shadow: 0 16px 35px #18374b24, inset 0 1px 0 #ffffff24;
}
.public-home .hero-banner::before { content: none; }
.public-home .hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(#ffffff3d .6px, transparent .6px);
  background-size: 5px 5px;
  opacity: .15;
  pointer-events: none;
}
.public-home .hero-copy { z-index: 2; width: 63%; max-width: 550px; padding: 42px 0 38px 42px; }
.hero-copy h1 { margin: 22px 0 18px; font-size: clamp(32px, 2.8vw, 42px); line-height: 1.35; color: #f6fbff; letter-spacing: .3px; }
.hero-copy em { color: #a5dce9; }
.hero-copy p { color: #bacbd7; font-size: 13px; line-height: 1.9; }
.banner-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #abc6d733; border-radius: 999px; background: #edf6ff0b; color: #bfd9e7; font-size: 10px; letter-spacing: 1px; }
.banner-kicker::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #a5dce9; box-shadow: 0 0 8px #a5dce95e; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.public-home .hero-browse {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #d8f1f7;
  border-radius: 9px;
  background: linear-gradient(120deg, #e0f5fa, #bcdfe9);
  color: #173c50;
  box-shadow: 0 6px 20px #08192533, inset 0 1px 0 #fff;
  font-size: 13px;
}
.public-home .hero-browse:hover { background: #e8f9ff; }
.hero-dispatch { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 13px; border: 1px solid #ccdfef40; border-radius: 9px; background: #edf7ff0d; color: #e2edf5; font-size: 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-dispatch:hover { background: #edf7ff20; border-color: #ccdfef70; }
.hero-tags { margin-top: 26px; gap: 8px 18px; color: #aebfcd; font-size: 10px; }
.hero-tags svg { color: #7aa3b6; }
.hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  min-width: 0;
  margin: 0;
  pointer-events: none;
}
.hero-visual img {
  position: absolute;
  right: 0;
  top: 0;
  width: 76%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
}
.hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #112738 0%, #112738f2 30%, #112738d4 43%, #11273826 76%), linear-gradient(0deg, #0b203e73, transparent 40%); }
.hero-visual-status, .hero-visual-caption {
  position: absolute;
  z-index: 1;
  display: flex;
  border: 1px solid #ffffff26;
  background: #e8f6ff0e;
  color: #f5fbff;
  box-shadow: inset 0 1px 0 #ffffff14;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero-visual-status {
  top: 24px;
  right: 24px;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.4px;
}
.hero-visual-status i { width: 5px; height: 5px; border-radius: 50%; background: #90d7e2; }
.hero-visual-caption {
  bottom: 26px;
  right: 24px;
  flex-direction: column;
  gap: 3px;
  padding: 13px 17px;
  border-radius: 13px;
}
.hero-visual-caption small { font-size: 10px; color: #b9e1ed; letter-spacing: 2px; }
.hero-visual-caption strong { font-size: 16px; letter-spacing: .5px; }
.hero-visual-caption > span { font-size: 10px; color: #d8e5ee; }

.public-home .hero-login { padding: 28px; border-radius: 22px; background: linear-gradient(150deg, #ffffffe6, #f4f7fcc7); }
.hero-login .login-card-head { margin-bottom: 22px; }
.hero-login .login-card-head .login-logo { width: 46px; height: 46px; border-radius: 14px; }
.hero-login .login-benefits { display: grid; gap: 14px; margin-bottom: 22px; }
.hero-login .login-benefits li svg { color: #7388ac; }
.hero-hall-link { display: flex; align-items: center; gap: 12px; margin: auto 0 16px; padding: 14px; border: 1px solid #dce6f1; border-radius: 12px; background: linear-gradient(120deg, #e9f0fa8c, #f2effba8); color: #526d96; }
.hero-hall-link > span { display: grid; gap: 3px; flex: 1; }
.hero-hall-link strong { font-size: 13px; color: #384e72; }
.hero-hall-link small { font-size: 10px; color: #6f7f98; }
.hero-hall-link:hover { border-color: #b2c5e0; background: #edf3fb; }
.public-home .hero-login-trigger { margin-top: 0; }

.public-home .public-services { padding: 26px; }
.public-services-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.public-home .public-services-heading { margin-bottom: 0; }
.public-home .public-service-filters { justify-self: end; margin-bottom: 0; padding: 4px; border: 1px solid #e0e7f0; border-radius: 9px; background: #e8eef670; }
.public-home .public-service-filters button { border: 0; background: transparent; }
.public-home .public-service-filters button[aria-pressed=true] { background: #fff; box-shadow: 0 2px 6px #273f6610; }
.public-home .public-service-list { gap: 12px; border-top: 0; }
.public-service-list { grid-column: 1 / -1; }
.public-home .public-service-item,
.public-home .public-service-item:nth-child(even) {
  position: relative;
  padding: 22px;
  border: 1px solid #dce6f0b8;
  border-radius: 14px;
  background: linear-gradient(120deg, #ffffffc7, #edf3fb8c);
}
.public-service-item::before { content: ''; position: absolute; width: 3px; height: 24px; left: 0; top: 25px; border-radius: 0 3px 3px 0; background: #6e95ad; }
.public-service-item:nth-child(even)::before { background: #8c8eb6; }
.public-home .public-service-item h3 { font-size: 18px; color: #25384c; }
.public-home .public-service-action strong { color: #4b667f; font-size: 18px; }
.public-home .public-service-action button { min-height: 34px; padding: 7px 12px; border: 1px solid #d4e0ee; border-radius: 8px; background: #ffffffb8; font-size: 12px; }
.public-home .public-service-action button:hover { text-decoration: none; border-color: #aebfd8; background: #f1f6fc; }
.public-home .public-service-filters button,
.public-home :is(.pro-search, .filter-button, .pro-filter) {
  border-color: #dce4f0;
  background: #ffffffa8;
  box-shadow: inset 0 1px 0 #fff;
}
.public-home .pro-card { transition: transform .18s ease, box-shadow .18s ease; }
.public-home .pro-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px #294f8117, inset 0 1px 0 #fff;
}
.public-home .pro-directory-heading { margin-bottom: 22px; }
.public-home .pro-eyebrow { color: #5f7897; font-size: 10px; }
.public-home:has(.public-hero:not([hidden])) .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-home:has(.public-hero:not([hidden])) .pro-card-open { display: grid; grid-template-columns: 142px minmax(0, 1fr); }
.public-home:has(.public-hero:not([hidden])) .pro-cover { aspect-ratio: 1; }
.public-home:has(.public-hero:not([hidden])) .pro-card-info { padding: 20px; align-self: center; }
.public-home:has(.public-hero:not([hidden])) .pro-card-info h3 { font-size: 18px; }
.public-home:has(.public-hero:not([hidden])) .pro-card-info p { min-height: 0; margin-bottom: 0; }
.public-home:has(.public-hero:not([hidden])) .pro-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-top: 1px solid #dfe7f170; background: #f9fbff61; }
.public-home:has(.public-hero:not([hidden])) .pro-card-price { flex: 1; margin: 0; }
.public-home:has(.public-hero:not([hidden])) .pro-card-actions { display: flex; gap: 8px; }
.public-home:has(.public-hero:not([hidden])) .pro-card-actions .pro-button { min-width: 80px; }
.public-home .guarantee-item {
  border: 1px solid #ffffffc7;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffffb8, #eef3fa8c);
}
.public-home .guarantee-icon.green { background: linear-gradient(135deg, #eef9f4, #e1f0eb); color: #4c907a; }
.public-home .guarantee-icon.orange { background: linear-gradient(135deg, #fff9ef, #f4e9d7); color: #ac8853; }
.public-home .guarantee-icon.pink { background: linear-gradient(135deg, #fcf2f7, #f0e3ed); color: #a97798; }
.public-home .public-footer { background: #ffffff70; border-color: #ffffffb8; }
.public-home :is(.auth-dialog, .public-account-menu), .dh-confirm-dialog {
  border: 1px solid #fff;
  border-radius: 18px;
  background: rgba(248, 251, 255, .94);
  box-shadow: 0 24px 80px #1e385d33, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.auth-dialog::backdrop, .dh-confirm-dialog::backdrop {
  background: #142c4966;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* The dispatch workspace keeps its independent scroll areas and mobile drawers. */
.dispatch-hall {
  --dh-main: #ffffff9e;
  --dh-panel: #f3f7fcc9;
  --dh-rail: #e6edf8b8;
  --dh-dock: #eaf0fbe6;
  --dh-field: #eef3fbd9;
  --dh-border: #d9e2ef;
  --dh-accent-soft: #e2eaf9;
  --dh-muted: #64728a;
  background: radial-gradient(ellipse at 42% 5%, #d6e8f4, transparent 55%),
    radial-gradient(ellipse at 80% 85%, #e2e1f5, transparent 55%), #edf2f8;
}
.dh-sidebar, .dh-inspector {
  background: var(--dh-panel);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.dh-server-rail { background: var(--dh-rail); }
.dh-workspace { background: var(--dh-main); }
.dh-workspace-header { background: #ffffff70; }
.dh-server-banner {
  background: linear-gradient(100deg, #193a52e8, #23476088), url('/src/delta-force-operator.jpg') 58% 35% / cover;
  border-bottom-color: #ffffff40;
}
.dh-server-banner > span { color: #f4faff; }
.dh-server-banner small { color: #c2dfef; }
.dh-server-banner::after { opacity: .22; }
.dh-welcome-icon {
  border: 1px solid #fff;
  border-radius: 22px;
  background: linear-gradient(135deg, #e9f1ff, #e1e8f7);
  color: var(--dh-link);
  box-shadow: 0 8px 24px #3457b310, inset 0 1px 0 #fff;
}
.dh-start-guide > div, .dh-seat, .dh-lobby-composer, .dh-chat form {
  border: 1px solid #fffffff0;
  border-radius: 12px;
  background: linear-gradient(125deg, #ffffffb8, #eef3fb99);
  box-shadow: 0 5px 18px #294f8107, inset 0 1px 0 #fff;
}
.public-home .dh-button { border-radius: 8px; }
.public-home .dh-primary {
  background: linear-gradient(125deg, #466bc4, #3457b3);
  box-shadow: 0 5px 14px #3457b31a, inset 0 1px 0 #ffffff30;
}
.dh-voice-dock, .dh-self { background: var(--dh-dock); }
.dh-voice-dock {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 -5px 20px #294f8108;
}

/* Account and staff surfaces reuse the treatment without changing their layouts. */
.account-page, .personal-center { --pc-accent: #355ab6; }
.account-page .account-sidebar,
.account-page .personal-center :is(.pc-card, .pc-metric),
.owner-content :is(.owner-panel, .panel),
.role-shell .content :is(.panel, .stat-card) {
  border: 1px solid var(--frost-border);
  background: var(--frost-surface);
  box-shadow: var(--frost-shadow);
}
.owner-main { background: transparent; }
.owner-content :is(.owner-metric, .owner-rank-card, .owner-task-card) {
  border: 1px solid #ffffffeb;
  background: linear-gradient(135deg, #ffffffb8, #eef3fba8);
  box-shadow: inset 0 1px 0 #fff, 0 5px 18px #294f8107;
}
.owner-sidebar { background: linear-gradient(165deg, #203449, #202d42 70%, #29344e); }

@media (min-width: 761px) and (max-width: 1100px) {
  .public-home .public-hero { grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; }
  .public-home .hero-copy { width: 70%; padding: 36px 0 36px 30px; }
  .hero-copy h1 { font-size: 32px; }
  .hero-visual-caption { padding: 10px 14px; right: 20px; bottom: 20px; }
  .hero-visual-caption strong { font-size: 15px; }
  .hero-visual-caption > span { display: none; }
  .hero-tags { gap: 12px; }
  .public-home .hero-login { padding: 24px; }
  .public-home .hero-login h2 { font-size: 19px; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-open { grid-template-columns: 120px minmax(0, 1fr); }
  .public-home:has(.public-hero:not([hidden])) .pro-card-bottom { padding: 15px; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-actions .pro-button { min-width: 64px; }
}
@media (max-width: 1100px) {
  .dh-inspector { background: rgba(245, 248, 253, .96); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .public-home .public-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .public-home .hero-login:has(.hero-hall-link) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 20px 24px; }
  .hero-login:has(.hero-hall-link) .login-card-head { grid-column: 1; margin-bottom: 0; }
  .hero-login:has(.hero-hall-link) :is(h2, .login-subtitle, .login-benefits, .hero-hall-link) { display: none; }
  .public-home .hero-login:has(.hero-hall-link) .hero-login-trigger { grid-column: 2; grid-row: 1; align-self: center; width: auto; margin: 0; min-height: 40px; padding: 10px 15px; font-size: 12px; }
}
@media (max-width: 760px) {
  .public-home .hero-banner { min-height: 390px; }
  .public-home .hero-copy { width: 70%; padding: 34px 0 34px 28px; }
  .hero-copy h1 { font-size: 33px; }
  .hero-visual-caption { right: 20px; bottom: 20px; }
  .hero-visual-caption > span { display: none; }
  .public-home .public-admission-entry { gap: 14px; padding: 20px; }
  .admission-mark { display: none; }
  .public-home:has(.public-hero:not([hidden])) .pro-grid { grid-template-columns: minmax(0, 1fr); }
  .public-home:has(.public-hero:not([hidden])) .pro-card-open { grid-template-columns: 112px minmax(0, 1fr); }
  .public-home:has(.public-hero:not([hidden])) .pro-card-info { padding: 16px; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-info h3 { font-size: 16px; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-bottom { padding: 12px 16px; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-price { flex-direction: row; align-items: center; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-actions .pro-button { min-width: 68px; }
}
@media (max-width: 720px) {
  .dh-sidebar { background: rgba(245, 248, 253, .96); }
}
@media (max-width: 520px) {
  .public-home .public-nav nav { gap: 4px; padding-bottom: 8px; }
  .public-home .public-nav nav a { padding: 6px 12px; font-size: 12px; }
  .public-home .hero-banner { min-height: 555px; border-radius: 18px; }
  .public-home .hero-copy { width: 100%; max-width: none; padding: 28px 22px 250px; }
  .hero-copy h1 { margin-top: 18px; font-size: 30px; }
  .hero-copy p { margin-bottom: 18px; }
  .hero-actions { gap: 8px; }
  .public-home .hero-browse { min-height: 40px; padding: 9px 12px; font-size: 12px; gap: 9px; }
  .hero-dispatch { min-height: 40px; padding: 9px 10px; font-size: 11px; }
  .hero-tags { margin-top: 18px; }
  .hero-visual img { top: auto; bottom: 0; width: 100%; height: 310px; object-position: 56% center; }
  .hero-visual::after { background: linear-gradient(180deg, #112738 0%, #112738 40%, #112738cf 56%, transparent 80%), linear-gradient(0deg, #0b203e70, transparent 26%); }
  .hero-visual-status { top: auto; bottom: 24px; left: 20px; right: auto; padding: 6px 9px; font-size: 8px; }
  .hero-visual-caption { right: 20px; bottom: 20px; padding: 10px 12px; }
  .hero-visual-caption strong { font-size: 16px; }
  .public-home .hero-login:has(.hero-hall-link) { padding: 18px; gap: 8px; }
  .hero-login:has(.hero-hall-link) .login-card-head { gap: 9px; }
  .hero-login:has(.hero-hall-link) .login-logo { width: 34px; height: 34px; border-radius: 10px; }
  .hero-login:has(.hero-hall-link) .login-card-head strong { font-size: 12px; }
  .hero-login:has(.hero-hall-link) .login-card-head small { font-size: 9px; }
  .public-home .hero-login:has(.hero-hall-link) .hero-login-trigger { padding: 9px 11px; gap: 5px; font-size: 11px; }
  .public-services-inner { gap: 16px 8px; }
  .public-home .public-service-filters { padding: 3px; }
  .public-home .public-service-filters button { padding: 6px 9px; font-size: 10px; }
  .public-home .public-service-item, .public-home .public-service-item:nth-child(even) { padding: 16px; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-bottom { flex-wrap: wrap; gap: 10px; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-price { min-width: 150px; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-actions { flex: 1; justify-content: flex-end; }
  .public-home:has(.public-hero:not([hidden])) .pro-card-actions .pro-button { flex: 1; max-width: 120px; min-width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-home .pro-card { transition: none; }
  .public-home .pro-card:hover { transform: none; }
}