:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg0: #090b10;
  --bg1: #0f1420;
  --panel: rgba(255, 255, 255, 0.06);
  --panel2: rgba(255, 255, 255, 0.09);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.68);
  --border: rgba(255, 255, 255, 0.12);
  --accent: #4dd4a5;
  --accent2: #9ae6b4;
  --danger: #ff6b6b;
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.55);

  --radius: 18px;
  --radius-sm: 12px;

  --bg-glow1: rgba(77, 212, 165, 0.12);
  --bg-glow2: rgba(154, 230, 180, 0.10);

  --topbar-bg: rgba(9, 11, 16, 0.72);

  --nav-hover-bg: rgba(255, 255, 255, 0.04);
  --nav-hover-border: rgba(255, 255, 255, 0.10);
  --nav-active-bg: rgba(255, 255, 255, 0.06);
  --nav-active-border: rgba(255, 255, 255, 0.12);

  --brandmark-bg: rgba(255, 255, 255, 0.04);
  --brandmark-border: rgba(255, 255, 255, 0.12);

  --code-bg: rgba(255, 255, 255, 0.08);
  --code-border: rgba(255, 255, 255, 0.12);

  --card-flat-bg: rgba(255, 255, 255, 0.045);

  --step-border: rgba(255, 255, 255, 0.10);
  --step-bg: rgba(255, 255, 255, 0.05);

  --btn-border: rgba(255, 255, 255, 0.14);
  --btn-grad-1: rgba(77, 212, 165, 0.16);
  --btn-grad-2: rgba(154, 230, 180, 0.10);
  --ghost-bg: rgba(255, 255, 255, 0.04);

  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-bg: rgba(15, 20, 32, 0.92);
  --glass-bg2: rgba(15, 20, 32, 0.96);

  --row-border: rgba(255, 255, 255, 0.08);
  --row-bg: rgba(255, 255, 255, 0.03);

  --accent-border: rgba(77, 212, 165, 0.35);

  --overlay-bg: rgba(0, 0, 0, 0.62);
  --modal-bg: rgba(15, 20, 32, 0.92);
  --modal-border: rgba(255, 255, 255, 0.10);

  --tcard-border: rgba(255, 255, 255, 0.10);
  --tcard-bg: rgba(255, 255, 255, 0.04);
  --tcard-bg-open: rgba(255, 255, 255, 0.05);
  --tcard-body-bg: rgba(255, 255, 255, 0.02);

  --table-border: rgba(255, 255, 255, 0.10);
  --tablewrap-bg: rgba(255, 255, 255, 0.02);

  --azbar-item-border: rgba(255, 255, 255, 0.10);
  --azbar-item-bg: rgba(255, 255, 255, 0.03);

  --control-border: rgba(255, 255, 255, 0.14);
  --control-bg: rgba(255, 255, 255, 0.05);
  --control-border-focus: rgba(77, 212, 165, 0.55);
  --control-ring: rgba(77, 212, 165, 0.12);

  --card-border: rgba(255, 255, 255, 0.10);
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-hover-bg: rgba(255, 255, 255, 0.06);

  --iconbtn-border: rgba(255, 255, 255, 0.12);
  --iconbtn-bg: rgba(255, 255, 255, 0.04);
  --iconbtn-hover-bg: rgba(255, 255, 255, 0.06);

  --tooltip-border: rgba(255, 255, 255, 0.12);
  --tooltip-bg: rgba(15, 20, 32, 0.96);

  --popup-border: rgba(255, 255, 255, 0.12);
  --popup-bg: rgba(15, 20, 32, 0.96);
  --popup-sep: rgba(255, 255, 255, 0.10);

  --pill-border: rgba(255, 255, 255, 0.14);
  --pill-bg: rgba(255, 255, 255, 0.04);
  --pill-ok-border: rgba(77, 212, 165, 0.40);
  --pill-ok-bg: rgba(77, 212, 165, 0.10);
  --pill-no-border: rgba(255, 107, 107, 0.35);
  --pill-no-bg: rgba(255, 107, 107, 0.10);
}

html[data-theme="dwa"] {
  --font-sans: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg0: #f7f7f4;
  --bg1: #efefeb;
  --panel: rgba(255, 255, 255, 0.92);
  --panel2: rgba(255, 255, 255, 0.98);
  --text: #2b2f34;
  --muted: rgba(43, 47, 52, 0.70);
  --border: rgba(0, 0, 0, 0.12);
  --accent: #017eba;
  --accent2: #0199c7;
  --danger: #c62828;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.14);

  --bg-glow1: rgba(1, 126, 186, 0.10);
  --bg-glow2: rgba(1, 153, 199, 0.08);

  --topbar-bg: rgba(255, 255, 255, 0.90);

  --nav-hover-bg: rgba(1, 126, 186, 0.08);
  --nav-hover-border: rgba(1, 126, 186, 0.14);
  --nav-active-bg: rgba(1, 126, 186, 0.12);
  --nav-active-border: rgba(1, 126, 186, 0.22);

  --brandmark-bg: rgba(1, 126, 186, 0.08);
  --brandmark-border: rgba(1, 126, 186, 0.20);

  --code-bg: rgba(1, 126, 186, 0.10);
  --code-border: rgba(1, 126, 186, 0.20);

  --card-flat-bg: rgba(255, 255, 255, 0.70);

  --step-border: rgba(0, 0, 0, 0.10);
  --step-bg: rgba(255, 255, 255, 0.85);

  --btn-border: rgba(1, 126, 186, 0.22);
  --btn-grad-1: rgba(1, 126, 186, 0.16);
  --btn-grad-2: rgba(1, 153, 199, 0.10);
  --ghost-bg: rgba(0, 0, 0, 0.03);

  --glass-border: rgba(0, 0, 0, 0.10);
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-bg2: rgba(255, 255, 255, 0.94);

  --row-border: rgba(0, 0, 0, 0.06);
  --row-bg: rgba(255, 255, 255, 0.80);

  --accent-border: rgba(1, 126, 186, 0.35);

  --overlay-bg: rgba(0, 0, 0, 0.40);
  --modal-bg: rgba(255, 255, 255, 0.98);
  --modal-border: rgba(0, 0, 0, 0.12);

  --tcard-border: rgba(0, 0, 0, 0.10);
  --tcard-bg: rgba(255, 255, 255, 0.80);
  --tcard-bg-open: rgba(255, 255, 255, 0.92);
  --tcard-body-bg: rgba(0, 0, 0, 0.02);

  --table-border: rgba(0, 0, 0, 0.10);
  --tablewrap-bg: rgba(255, 255, 255, 0.72);

  --azbar-item-border: rgba(0, 0, 0, 0.08);
  --azbar-item-bg: rgba(0, 0, 0, 0.02);

  --control-border: rgba(0, 0, 0, 0.18);
  --control-bg: rgba(255, 255, 255, 0.96);
  --control-border-focus: rgba(1, 126, 186, 0.62);
  --control-ring: rgba(1, 126, 186, 0.18);

  --card-border: rgba(0, 0, 0, 0.10);
  --card-bg: rgba(255, 255, 255, 0.86);
  --card-hover-bg: rgba(255, 255, 255, 0.96);

  --iconbtn-border: rgba(0, 0, 0, 0.14);
  --iconbtn-bg: rgba(255, 255, 255, 0.82);
  --iconbtn-hover-bg: rgba(1, 126, 186, 0.10);

  --tooltip-border: rgba(0, 0, 0, 0.12);
  --tooltip-bg: rgba(255, 255, 255, 0.98);

  --popup-border: rgba(0, 0, 0, 0.12);
  --popup-bg: rgba(255, 255, 255, 0.98);
  --popup-sep: rgba(0, 0, 0, 0.10);

  --pill-border: rgba(0, 0, 0, 0.18);
  --pill-bg: rgba(255, 255, 255, 0.80);
  --pill-ok-border: rgba(46, 125, 50, 0.35);
  --pill-ok-bg: rgba(46, 125, 50, 0.10);
  --pill-no-border: rgba(198, 40, 40, 0.30);
  --pill-no-bg: rgba(198, 40, 40, 0.08);
}

/* DWA classic: flat blue/white with hard edges (closer to the public site) */
html[data-theme="dwa-classic"] {
  --font-sans: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg0: #efefeb;
  --bg1: #efefeb;
  --panel: #ffffff;
  --panel2: #ffffff;
  --text: #4d4d4d;
  --muted: #808080;
  --border: #ebebeb;
  --accent: #017eba;
  --accent2: #017eba;
  --danger: #c62828;
  --shadow: 0 10px 22px rgba(0, 0, 0, 0.10);

  --bg-glow1: transparent;
  --bg-glow2: transparent;

  --topbar-bg: #017eba;

  --nav-hover-bg: rgba(255, 255, 255, 0.14);
  --nav-hover-border: rgba(255, 255, 255, 0.30);
  --nav-active-bg: rgba(255, 255, 255, 0.20);
  --nav-active-border: rgba(255, 255, 255, 0.45);

  --brandmark-bg: #ffffff;
  --brandmark-border: rgba(255, 255, 255, 0.85);

  --code-bg: rgba(1, 126, 186, 0.10);
  --code-border: rgba(1, 126, 186, 0.22);

  --card-flat-bg: #ffffff;

  --step-border: #ebebeb;
  --step-bg: #ffffff;

  --btn-border: rgba(1, 126, 186, 0.40);
  --btn-grad-1: #017eba;
  --btn-grad-2: #017eba;
  --ghost-bg: transparent;

  --glass-border: #ebebeb;
  --glass-bg: #ffffff;
  --glass-bg2: #ffffff;

  --row-border: #ebebeb;
  --row-bg: #ffffff;

  --accent-border: rgba(1, 126, 186, 0.55);

  --overlay-bg: rgba(0, 0, 0, 0.40);
  --modal-bg: #ffffff;
  --modal-border: #ebebeb;

  --tcard-border: #ebebeb;
  --tcard-bg: #ffffff;
  --tcard-bg-open: #ffffff;
  --tcard-body-bg: #ffffff;

  --table-border: #ebebeb;
  --tablewrap-bg: #ffffff;

  --azbar-item-border: #ebebeb;
  --azbar-item-bg: #ffffff;

  --control-border: #ebebeb;
  --control-bg: #ffffff;
  --control-border-focus: rgba(1, 126, 186, 0.80);
  --control-ring: rgba(1, 126, 186, 0.18);

  --card-border: #ebebeb;
  --card-bg: #ffffff;
  --card-hover-bg: #ffffff;

  --iconbtn-border: rgba(255, 255, 255, 0.30);
  --iconbtn-bg: rgba(255, 255, 255, 0.14);
  --iconbtn-hover-bg: rgba(255, 255, 255, 0.20);

  --tooltip-border: rgba(0, 0, 0, 0.12);
  --tooltip-bg: #ffffff;

  --popup-border: rgba(0, 0, 0, 0.12);
  --popup-bg: #ffffff;
  --popup-sep: #ebebeb;

  --pill-border: #ebebeb;
  --pill-bg: #ffffff;
  --pill-ok-border: rgba(46, 125, 50, 0.40);
  --pill-ok-bg: rgba(46, 125, 50, 0.10);
  --pill-no-border: rgba(198, 40, 40, 0.35);
  --pill-no-bg: rgba(198, 40, 40, 0.08);
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
}

html {
  background:
    radial-gradient(1200px 800px at 10% 10%, var(--bg-glow1), transparent 45%),
    radial-gradient(900px 700px at 80% 30%, var(--bg-glow2), transparent 50%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

body {
  margin: 0;
  color: var(--text);
  font: 16px/1.55 var(--font-sans);
  background: transparent;
}

.container {
  width: 90vw;
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

html[data-theme="dwa-classic"] .topbar {
  backdrop-filter: none;
}

html[data-theme="dwa-classic"] .brand__name,
html[data-theme="dwa-classic"] .brand__sub,
html[data-theme="dwa-classic"] .nav__link,
html[data-theme="dwa-classic"] .nav__link:hover,
html[data-theme="dwa-classic"] .nav__link.is-active {
  color: rgba(255, 255, 255, 0.94);
}

html[data-theme="dwa-classic"] .brand__sub {
  color: rgba(255, 255, 255, 0.84);
}

html[data-theme="dwa-classic"] .syncdot {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dwa-classic"] .syncdot--ok {
  background: #35d07f;
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: 0 0 0 3px rgba(53, 208, 127, 0.30);
}

html[data-theme="dwa-classic"] .syncdot--bad {
  background: #ff6b6b;
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22);
}

html[data-theme="dwa-classic"] .profile__badge {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.94);
}

html[data-theme="dwa-classic"] .profile__badgeText {
  color: rgba(255, 255, 255, 0.94);
}

html[data-theme="dwa-classic"] .btn {
  color: #ffffff;
}

html[data-theme="dwa-classic"] .btn--ghost {
  color: #017eba;
  background: rgba(1, 126, 186, 0.10);
  border-color: rgba(1, 126, 186, 0.28);
}

html[data-theme="dwa-classic"] .wkgroup__head {
  border: 1px solid rgba(1, 126, 186, 0.35);
  background: rgba(1, 126, 186, 0.10);
  box-shadow: none;
}

html[data-theme="dwa-classic"] .wkgroup__head::before {
  background: rgba(1, 126, 186, 0.92);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__icon {
  display: inline-grid;
  place-items: center;
}

.nav__icon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 720px) {
  .topbar__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .brand { order: 1; }
  .brand__sub { display: none; }
  .brand__text { display: none; }
  .nav {
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
    padding-bottom: 0;
  }
  .topbar__right {
    order: 3;
    margin-left: auto;
  }
  .nav__link {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
  }
  .nav__label { display: none; }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
}

.nav__link:hover {
  color: var(--text);
  background: var(--nav-hover-bg);
  border-color: var(--nav-hover-border);
}

.nav__link.is-active {
  color: var(--text);
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
}

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

.syncdot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.syncdot--ok {
  border-color: rgba(77, 212, 165, 0.55);
  background: rgba(77, 212, 165, 0.55);
  box-shadow: 0 0 0 3px rgba(77, 212, 165, 0.12);
}

.syncdot--bad {
  border-color: rgba(255, 107, 107, 0.55);
  background: rgba(255, 107, 107, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);
}

.brand__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brandmark-bg);
  border: 1px solid var(--brandmark-border);
  text-decoration: none;
}

.brand__img {
  width: 26px;
  height: 26px;
  display: block;
  image-rendering: auto;
}

.brand__name {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.brand__sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: -2px;
}

.card {
  margin: 26px 0;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.card--flat {
  margin: 0;
  box-shadow: none;
  background: var(--card-flat-bg);
}

.h1 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.15;
}

.muted { color: var(--muted); margin: 0 0 14px; }

code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  padding: 2px 8px;
  border-radius: 999px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--muted);
  margin: 6px 0 18px;
}

.status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--danger);
}

.status[data-state="ok"]::before { background: var(--accent); }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 860px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

.step {
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--step-border);
  background: var(--step-bg);
}

.step__kicker {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.step__title {
  font-size: 18px;
  font-weight: 700;
  margin: 6px 0;
}

.step__body {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--btn-border);
  background: linear-gradient(135deg, var(--btn-grad-1), var(--btn-grad-2));
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .topbar__right {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .topbar__right .btn {
    width: auto;
  }
}

.btn--sm {
  width: auto;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 650;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--ghost {
  background: var(--ghost-bg);
}

.link {
  color: var(--accent2);
  text-decoration: none;
}

.link:hover { text-decoration: underline; }

.row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.row--between {
  justify-content: space-between;
}

.row--wrap {
  flex-wrap: wrap;
}

.form {
  display: grid;
  gap: 10px;
  max-width: 440px;
}

.form--row {
  grid-template-columns: 1fr auto;
  align-items: end;
}

@media (max-width: 520px) {
  .form--row {
    grid-template-columns: 1fr;
  }
}

.hero {
  position: relative;
  margin: 26px 0;
}

.hero__bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(1000px 450px at 15% 10%, var(--bg-glow1), transparent 55%),
    radial-gradient(900px 480px at 85% 40%, var(--bg-glow2), transparent 60%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

.hero__inner {
  position: relative;
  padding: 26px;
}

.hero__title {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.08;
}

.hero__lead {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 70ch;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.2fr 0.8fr; }
}

.label {
  color: var(--muted);
  font-size: 13px;
}

.input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  outline: none;
}

.input:focus {
  border-color: var(--control-border-focus);
  box-shadow: 0 0 0 3px var(--control-ring);
}

.alert {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  margin: 12px 0;
}

.alert--danger {
  border-color: rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.10);
}

.list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  text-decoration: none;
  color: var(--text);
}

.list__title {
  font-weight: 700;
}

.list__item:hover {
  background: var(--card-hover-bg);
}

.list__meta { color: var(--muted); font-size: 13px; }

.wkgroup {
  margin-top: 16px;
}

.wkgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(77, 212, 165, 0.24);
  background: rgba(77, 212, 165, 0.10);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}

.wkgroup__head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(77, 212, 165, 0.78);
}

.wkgroup__title {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.wkgroup__meta {
  color: var(--muted);
  font-size: 13px;
}

.wkc {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.wkc__card {
  display: block;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  text-decoration: none;
  color: var(--text);
}

.wkc__card:hover {
  background: var(--card-hover-bg);
}

.wkc__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wkc__title {
  font-weight: 800;
}

.wkc__badges {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wkc__meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.wkc__sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  .tcard__sum {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "status ticket"
      "name name"
      "company company";
    align-items: start;
  }
  .tcard__status { grid-area: status; }
  .tcard__ticket { grid-area: ticket; justify-self: end; }
  .tcard__name { grid-area: name; }
  .tcard__company { grid-area: company; margin-left: 0; }
}

@media (max-width: 720px) {
  .wkgroup__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .wkc__top {
    flex-direction: column;
  }
  .wkc__badges {
    justify-content: flex-start;
  }
}

.tlist {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.tgroup {
  position: sticky;
  top: 36px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  font-weight: 900;
}

.tcard {
  border: 1px solid var(--tcard-border);
  border-radius: 14px;
  background: var(--tcard-bg);
  overflow: clip;
}

.tcard__sum {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.tcard__sum::-webkit-details-marker { display: none; }

.tcard__name {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.tcard__company {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  margin-left: 2px;
}

.tcard[open] {
  background: var(--tcard-bg-open);
}

.tcard__body {
  border-top: 1px solid var(--tcard-border);
  padding: 12px;
  background: var(--tcard-body-bg);
}

.tform__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 920px) {
  .tcard__sum {
    grid-template-columns:
      max-content
      fit-content(140px)
      24px
      minmax(220px, 1fr)
      minmax(260px, 1.3fr);
    gap: 12px;
  }

  /* Desktop check-in list: table-like columns
     status | ticket | gender | name | company */
  .tcard__status {
    grid-column: 1;
    grid-row: 1;
  }

  .tcard__ticket {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  .tcard__name {
    display: contents;
  }

  .tcard__name .gender {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
  }

  .tcard__name > span:last-child {
    grid-column: 4;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tcard__company {
    grid-column: 5;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tform__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.table {
  margin-top: 16px;
  border: 1px solid var(--table-border);
  border-radius: 14px;
  overflow: hidden;
}

.tablewrap {
  margin-top: 16px;
  border: 1px solid var(--table-border);
  border-radius: 14px;
  overflow: auto;
  max-height: calc(100vh - 240px);
  background: var(--tablewrap-bg);
}

.tablewrap .table {
  margin-top: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.azbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
}

.azbar__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--azbar-item-border);
  background: var(--azbar-item-bg);
  font-weight: 800;
  font-size: 12px;
}

.azbar__item:hover {
  color: var(--text);
  border-color: var(--accent-border);
}

.table__row {
  display: grid;
  grid-template-columns: 50px 140px 1fr 90px 120px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--row-border);
  background: var(--row-bg);
}

.tablewrap .table__head {
  position: sticky;
  top: var(--azbar-h, 0px);
  z-index: 2;
  background: var(--glass-bg2);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
}

.table--checkin {
  min-width: 1180px;
}

.table--checkin .table__row {
  grid-template-columns: 80px 1.3fr 90px 1.4fr 1.3fr 150px 150px 180px;
  align-items: center;
}

.table__group {
  background: rgba(255, 255, 255, 0.05);
}

.table__groupcell {
  grid-column: 1 / -1;
  padding: 6px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.namecell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gender {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  flex: 0 0 auto;
}

.gender--m {
  background: rgba(77, 212, 165, 0.14);
  border-color: rgba(77, 212, 165, 0.35);
  color: rgba(77, 212, 165, 0.95);
}

.gender--f {
  background: rgba(255, 105, 180, 0.14);
  border-color: rgba(255, 105, 180, 0.40);
  color: rgba(255, 105, 180, 0.98);
}

.gender--x {
  color: var(--muted);
}

.gender--m::after { content: "M"; }
.gender--f::after { content: "F"; }
.gender--x::after { content: "-"; }

.input--sm {
  padding: 8px 10px;
  border-radius: 10px;
}

.iconbtn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--iconbtn-border);
  background: var(--iconbtn-bg);
  color: var(--text);
  cursor: pointer;
}

.iconbtn[data-tip] {
  position: relative;
}

.iconbtn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--tooltip-border);
  background: var(--tooltip-bg);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  z-index: 10;
}

/* In the sticky topbar, show tooltips below so they don't clip */
.topbar .iconbtn[data-tip]::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

.topbar .iconbtn:hover::after,
.topbar .iconbtn:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

.iconbtn:hover::after,
.iconbtn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (hover: none) {
  .iconbtn[data-tip]::after {
    display: none;
  }
}

.iconbtn:hover {
  border-color: var(--accent-border);
  background: var(--iconbtn-hover-bg);
}

.iconbtn--danger {
  border-color: rgba(255, 107, 107, 0.35);
}

.iconbtn--danger:hover {
  border-color: rgba(255, 107, 107, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.10);
}

.iconbtn svg {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.iconbtn[data-copied="1"] {
  border-color: rgba(77, 212, 165, 0.55);
  box-shadow: 0 0 0 3px rgba(77, 212, 165, 0.12);
}

.table--rooms .table__row {
  grid-template-columns: 110px 1.3fr 1fr 140px 120px 320px 240px;
}

.room-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.kv__k {
  display: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.kv__v {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.table__row:first-child { border-top: none; }

.table__head {
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.pill--wide {
  min-width: 170px;
}

.countcircle {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.countcircle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(rgba(77, 212, 165, 0.95) var(--p, 0%), rgba(255, 255, 255, 0.10) 0);
}

.countcircle::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: rgba(15, 20, 32, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

html[data-theme="dwa"] .countcircle,
html[data-theme="dwa-classic"] .countcircle {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.85);
}

html[data-theme="dwa"] .countcircle::after,
html[data-theme="dwa-classic"] .countcircle::after {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.12);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  color: var(--text);
  white-space: nowrap;
}

.pill--ok {
  border-color: var(--pill-ok-border);
  background: var(--pill-ok-bg);
}

.pill--no {
  border-color: var(--pill-no-border);
  background: var(--pill-no-bg);
}

.pill--click {
  cursor: pointer;
}

.pill__info {
  color: var(--muted);
  font-weight: 700;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(10px);
}

.modal__card {
  position: relative;
  width: min(980px, 92vw);
  max-height: min(84vh, 820px);
  overflow: auto;
  margin: 7vh auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--modal-bg);
  box-shadow: var(--shadow);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--modal-border);
}

.modal__title {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.modal__body {
  padding: 14px 16px 16px;
}

.modal__foot {
  display: none;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--modal-border);
}

.modal[data-mode="confirm"] .modal__foot,
.modal[data-mode="prompt_join"] .modal__foot {
  display: flex;
}

.btn--danger {
  border-color: rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.10);
}

.btn--danger:hover {
  border-color: rgba(255, 107, 107, 0.55);
  background: rgba(255, 107, 107, 0.14);
}

.roominfo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 860px) {
  .roominfo__grid {
    grid-template-columns: 1fr 1fr;
  }
  .roominfo__block--wide {
    grid-column: 1 / -1;
  }
}

.roominfo__block {
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.roominfo__lines {
  display: grid;
  gap: 8px;
}

.roominfo__line {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
}

.roominfo__l {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.roominfo__val {
  min-width: 0;
  word-break: break-word;
}

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

.roominfo__k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  font-weight: 900;
  margin-bottom: 10px;
}

.roominfo__k::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--control-ring);
  flex: 0 0 auto;
}

.roominfo__hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.attlist {
  display: grid;
  gap: 10px;
}

.attrow {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card-flat-bg);
}

.attrow__name {
  font-weight: 800;
  margin-bottom: 8px;
}

.attrow__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 720px) {
  .table__row {
    grid-template-columns: 40px 110px 1fr 70px 110px;
  }

  .tablewrap {
    max-height: none;
  }

  .table--rooms .table__head,
  .table--checkin .table__head {
    display: none;
  }

  .table--rooms,
  .table--checkin {
    min-width: 0;
  }

  .table--rooms .table__row,
  .table--checkin .table__row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    border-top: none;
  }

  .table--rooms .table__row {
    padding: 12px;
  }

  .table--checkin .table__row {
    padding: 12px;
  }

  .table__group {
    margin: 14px 10px 6px;
    border: none;
    background: transparent;
    padding: 0;
  }

  .table__groupcell {
    padding: 0;
  }

  .kv__k {
    display: block;
  }

  .kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }

  .kv__v {
    justify-content: flex-end;
    text-align: right;
    flex-wrap: wrap;
  }

  .kv .input {
    width: min(320px, 100%);
  }

  .kv input[type="date"].input {
    width: min(360px, 100%);
  }
}

.profile {
  position: relative;
}

.profile__summary {
  list-style: none;
  cursor: pointer;
}

.profile__summary::-webkit-details-marker { display: none; }

.profile__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text);
  font-weight: 700;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile__icon {
  display: none;
  align-items: center;
  justify-content: center;
}

.profile__icon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 720px) {
  .profile__badge {
    max-width: 44px;
    padding: 0;
    width: 44px;
  }
  .profile__badgeText { display: none; }
  .profile__icon { display: inline-flex; }
}

.profile[open] .profile__badge {
  border-color: var(--control-border-focus);
  box-shadow: 0 0 0 3px var(--control-ring);
}

.profile__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 260px;
  border-radius: 14px;
  border: 1px solid var(--popup-border);
  background: var(--popup-bg);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 10px;
}

.profile__meta {
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--popup-sep);
  margin-bottom: 8px;
}

.profile__name {
  font-weight: 800;
}

.profile__role {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.whoami {
  font-weight: 750;
  color: var(--text);
}

.whoami__role {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--muted);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.check input {
  width: 18px;
  height: 18px;
}

.table--users .table__row {
  grid-template-columns: 110px 200px 1fr 80px 64px;
}

.profile__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.profile__item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}

.profile__item--danger {
  color: rgba(255, 107, 107, 0.95);
}