:root {
  --ink: #26352f;
  --muted: #6f7d73;
  --paper: rgba(255, 252, 238, 0.94);
  --line: #d9c996;
  --green: #4f8a63;
  --blue: #628fa5;
  --sun: #e7aa4f;
  --red: #b9574d;
  --shadow: 0 16px 40px rgba(70, 83, 61, 0.16);
}
* { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  padding-bottom: 38px;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 225, 142, .6), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(142, 199, 186, .46), transparent 26rem),
    linear-gradient(180deg, #cee5dc 0%, #f7ecd0 50%, #dce7c4 100%);
  letter-spacing: 0;
}
body.theme-twilight {
  --ink: #221f3f;
  --muted: #716b9d;
  --paper: rgba(248, 246, 255, .9);
  --line: #c4b9ef;
  --green: #6254c7;
  --blue: #7e8ce8;
  --sun: #d9c6ff;
  --red: #c05e8f;
  --shadow: 0 18px 46px rgba(42, 35, 96, .24);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.62), transparent 10rem),
    radial-gradient(circle at 72% 34%, rgba(177,170,255,.44), transparent 20rem),
    linear-gradient(180deg, #756fd0 0%, #a29bed 48%, #edf0ff 100%);
}
body.theme-candy {
  --ink: #3d2c38;
  --muted: #8a6e7d;
  --paper: rgba(255, 250, 253, .94);
  --line: #f0bfd0;
  --green: #ec7fa2;
  --blue: #77b7df;
  --sun: #f5c58f;
  --red: #d95f86;
  --shadow: 0 16px 36px rgba(203, 103, 143, .18);
  background:
    radial-gradient(circle, rgba(241, 153, 180, .22) 0 5px, transparent 6px) 0 0 / 34px 34px,
    radial-gradient(circle at 75% 16%, rgba(119,183,223,.36), transparent 18rem),
    linear-gradient(180deg, #fffafd 0%, #ffeef5 48%, #fff9ea 100%);
}
body.theme-sakura {
  --ink: #26352f;
  --muted: #6f7d73;
  --paper: rgba(255, 252, 238, 0.94);
  --line: #d9c996;
  --green: #4f8a63;
  --blue: #628fa5;
  --sun: #e7aa4f;
  --red: #b9574d;
  --shadow: 0 16px 40px rgba(70, 83, 61, 0.16);
}
.wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .82;
  background:
    radial-gradient(ellipse at 8% 16%, rgba(255,255,255,.38) 0 2.2rem, transparent 2.35rem),
    radial-gradient(ellipse at 12% 18%, rgba(255,255,255,.32) 0 3.6rem, transparent 3.8rem),
    radial-gradient(ellipse at 19% 15%, rgba(255,255,255,.28) 0 2.7rem, transparent 2.9rem),
    radial-gradient(ellipse at 66% 12%, rgba(255,255,255,.26) 0 4.2rem, transparent 4.45rem),
    radial-gradient(ellipse at 73% 10%, rgba(255,255,255,.34) 0 2.7rem, transparent 2.95rem),
    radial-gradient(ellipse at 82% 14%, rgba(255,255,255,.22) 0 3.5rem, transparent 3.75rem),
    radial-gradient(ellipse at 28% 74%, rgba(255,255,255,.22) 0 3rem, transparent 3.25rem),
    radial-gradient(ellipse at 35% 72%, rgba(255,255,255,.3) 0 4.6rem, transparent 4.9rem),
    radial-gradient(ellipse at 45% 76%, rgba(255,255,255,.22) 0 3.4rem, transparent 3.7rem),
    radial-gradient(ellipse at 88% 82%, rgba(255,255,255,.3) 0 4rem, transparent 4.3rem);
}
body.theme-twilight .wash {
  opacity: .72;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(242,239,255,.38) 0 3.4rem, transparent 3.7rem),
    radial-gradient(ellipse at 18% 18%, rgba(255,255,255,.26) 0 2.2rem, transparent 2.5rem),
    radial-gradient(ellipse at 58% 12%, rgba(255,255,255,.36) 0 3.8rem, transparent 4.1rem),
    radial-gradient(ellipse at 66% 15%, rgba(229,225,255,.28) 0 5.6rem, transparent 6rem),
    radial-gradient(ellipse at 78% 10%, rgba(255,255,255,.22) 0 2.9rem, transparent 3.2rem),
    radial-gradient(ellipse at 18% 72%, rgba(242,239,255,.2) 0 4.5rem, transparent 4.9rem),
    radial-gradient(ellipse at 31% 76%, rgba(255,255,255,.2) 0 3.2rem, transparent 3.55rem),
    radial-gradient(ellipse at 82% 78%, rgba(242,239,255,.22) 0 5rem, transparent 5.35rem);
}
body.theme-candy .wash {
  opacity: .78;
  background:
    radial-gradient(ellipse at 7% 15%, rgba(255,255,255,.5) 0 2.5rem, transparent 2.8rem),
    radial-gradient(ellipse at 14% 14%, rgba(255,232,241,.45) 0 4.2rem, transparent 4.55rem),
    radial-gradient(ellipse at 23% 17%, rgba(255,255,255,.36) 0 2.8rem, transparent 3.1rem),
    radial-gradient(ellipse at 68% 16%, rgba(255,235,243,.42) 0 5.2rem, transparent 5.55rem),
    radial-gradient(ellipse at 78% 14%, rgba(255,255,255,.34) 0 3.1rem, transparent 3.4rem),
    radial-gradient(ellipse at 17% 76%, rgba(255,255,255,.34) 0 4.8rem, transparent 5.15rem),
    radial-gradient(ellipse at 29% 78%, rgba(255,225,236,.38) 0 3.4rem, transparent 3.7rem),
    radial-gradient(ellipse at 83% 82%, rgba(255,255,255,.42) 0 5rem, transparent 5.35rem);
}
body.theme-sakura .wash {
  opacity: .82;
  background:
    radial-gradient(ellipse at 8% 14%, rgba(255,255,255,.42) 0 3.4rem, transparent 3.7rem),
    radial-gradient(ellipse at 16% 16%, rgba(255,221,232,.38) 0 4.8rem, transparent 5.15rem),
    radial-gradient(ellipse at 27% 13%, rgba(255,255,255,.3) 0 2.8rem, transparent 3.1rem),
    radial-gradient(ellipse at 70% 12%, rgba(255,255,255,.32) 0 5.2rem, transparent 5.55rem),
    radial-gradient(ellipse at 80% 16%, rgba(217,242,255,.32) 0 3.5rem, transparent 3.85rem),
    radial-gradient(ellipse at 23% 78%, rgba(255,255,255,.26) 0 3.7rem, transparent 4rem),
    radial-gradient(ellipse at 36% 80%, rgba(255,222,232,.28) 0 5.4rem, transparent 5.75rem),
    radial-gradient(ellipse at 88% 78%, rgba(255,255,255,.32) 0 4.8rem, transparent 5.15rem);
}
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  position: relative;
  z-index: 1;
}
.login-card {
  width: min(430px, 100%);
  background: var(--paper);
  border: 2px solid rgba(217, 201, 150, .9);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 24px;
}
.login-card h1 { margin: 0 0 8px; font-size: 26px; }
.login-card p { margin: 0 0 20px; color: var(--muted); }
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 246px 1fr;
  min-height: 100vh;
  max-width: 100%;
  min-width: 0;
}
.sidebar {
  margin: 18px 0 18px 18px;
  padding: 18px 14px;
  height: calc(100vh - 36px);
  position: sticky;
  top: 18px;
  background: rgba(61, 92, 68, .92);
  color: #fffdf0;
  border: 2px solid rgba(255, 253, 239, .58);
  border-radius: 22px;
  box-shadow: var(--shadow);
  max-width: 100%;
  min-width: 0;
}
.brand { padding: 8px 10px 18px; border-bottom: 1px dashed rgba(255,253,239,.45); }
.brand h1 { margin: 0 0 8px; font-size: 22px; }
.brand p { margin: 0; font-size: 12px; color: rgba(255,253,239,.78); }
.nav { display: grid; gap: 8px; margin-top: 16px; }
.nav button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 15px;
  background: transparent;
  color: rgba(255,253,239,.8);
  text-align: left;
}
.nav button.active { background: #fff7cf; color: #36513c; box-shadow: inset 0 -2px 0 rgba(178,137,55,.28); }
body.theme-twilight .sidebar { background: rgba(47, 42, 116, .9); }
body.theme-twilight .nav button.active { background: #f1edff; color: #332b8f; }
body.theme-candy .sidebar { background: rgba(231, 117, 154, .92); }
body.theme-candy .nav button.active { background: #fff9fd; color: #b84f76; }
body.theme-sakura .sidebar { background: rgba(70, 118, 92, .9); }
.main { padding: 22px; min-width: 0; max-width: 100%; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.topbar h2 { margin: 0 0 6px; font-size: 26px; }
.topbar p { margin: 0; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 14px;
  background: #f5e8b8;
  border: 1px solid #d8bd77;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
  white-space: nowrap;
}
.btn.primary { background: var(--green); border-color: #3f714f; color: white; }
.btn.danger { background: #f5d4cc; border-color: #d89b90; color: var(--red); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(69, 83, 61, .14); filter: brightness(1.02); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { cursor: not-allowed; opacity: .62; transform: none; box-shadow: none; }
body.theme-twilight .btn { background: #eeeaff; border-color: #b9acef; }
body.theme-twilight .btn.primary { background: linear-gradient(135deg, #5146bd, #8277ec); border-color: #5146bd; color: #fff; }
body.theme-twilight .btn.danger { background: #ffe4f0; border-color: #d98ab0; color: #9e3f72; }
body.theme-candy .btn { background: #fff2f6; border-color: #efb8cc; }
body.theme-candy .btn.primary { background: linear-gradient(135deg, #ec7fa2, #f3a9be); border-color: #d96b90; color: #fff; }
body.theme-candy .btn.danger { background: #fff0e7; border-color: #f1b58b; color: #c85b70; }
body.theme-sakura .btn.primary { background: linear-gradient(135deg, #4f8a63, #77a98a); }
.panel, .card {
  background: var(--paper);
  border: 2px solid rgba(217,201,150,.9);
  border-radius: 20px;
  box-shadow: var(--shadow);
  max-width: 100%;
  min-width: 0;
}
body.theme-twilight .panel, body.theme-twilight .card, body.theme-twilight .login-card {
  border-color: rgba(196,185,239,.88);
  backdrop-filter: blur(10px);
}
body.theme-candy .panel, body.theme-candy .card, body.theme-candy .login-card {
  border-color: rgba(240,191,208,.9);
}
body.theme-sakura .panel, body.theme-sakura .card, body.theme-sakura .login-card {
  border-color: rgba(217,201,150,.9);
}
.panel { padding: 16px; }
.grid { display: grid; gap: 14px; }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 14px; }
.metric { padding: 16px; }
.metric span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 9px; }
.metric strong { font-size: 27px; }
.metric p { color: var(--muted); line-height: 1.7; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.section-title h3 { margin: 0; font-size: 17px; }
.member-search { margin-bottom: 14px; }
.report-filter { margin-bottom: 14px; }
.search-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}
.search-row label { margin: 0; }
.seat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.seat {
  min-height: 122px;
  padding: 13px;
  border: 2px solid #d9c895;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf0, #f7edc8);
  display: grid;
  align-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.seat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(70,83,61,.16); }
.seat.occupied { background: linear-gradient(180deg, #ecf6d7, #d7ebc5); border-color: #91b779; }
.seat.reserved { background: linear-gradient(180deg, #fff1c4, #f5daa0); border-color: #dbb569; }
.seat.maintenance { background: linear-gradient(180deg, #f7d7d0, #efc0b6); border-color: #ce8e82; }
.seat-head, .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.seat-name { font-weight: 700; }
.tag {
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #efe7c5;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.tag.green { background: #ddefce; color: #3f714f; }
.tag.blue { background: #d9edf1; color: #447e92; }
.tag.amber { background: #f6e0a7; color: #875f1e; }
.tag.red { background: #f5d5cd; color: #9d493f; }
body.theme-twilight .tag { background: #eeeaff; color: #716b9d; }
body.theme-twilight .tag.green { background: #e7e4ff; color: #5146bd; }
body.theme-twilight .tag.blue { background: #e5efff; color: #5f70c9; }
body.theme-twilight .tag.amber { background: #f2e8ff; color: #7c58b5; }
body.theme-candy .tag { background: #fff0f5; color: #9a6a7c; }
body.theme-candy .tag.green { background: #ffe2ec; color: #c85d83; }
body.theme-candy .tag.blue { background: #e5f4ff; color: #4f8ab3; }
body.theme-candy .tag.amber { background: #fff0d8; color: #b8773e; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 10px; border-bottom: 1px dashed var(--line); text-align: left; font-size: 14px; vertical-align: middle; }
th { color: var(--muted); font-weight: 700; background: rgba(255,247,207,.52); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
input, select, textarea {
  min-height: 39px;
  border: 1px solid #ceb97c;
  border-radius: 13px;
  background: #fffdf0;
  color: var(--ink);
  padding: 8px 10px;
}
body.theme-twilight input, body.theme-twilight select, body.theme-twilight textarea {
  border-color: #b9acef;
  background: #fbfaff;
}
body.theme-candy input, body.theme-candy select, body.theme-candy textarea {
  border-color: #efb8cc;
  background: #fffafd;
}
body.theme-twilight .seat { border-color: #b9acef; background: linear-gradient(180deg, #fbfaff, #eeeaff); }
body.theme-twilight .seat.occupied { background: linear-gradient(180deg, #ebe8ff, #ddd8ff); border-color: #8f84e4; }
body.theme-twilight .seat.reserved { background: linear-gradient(180deg, #f4edff, #e7d8ff); border-color: #b291e2; }
body.theme-candy .seat { border-color: #efb8cc; background: linear-gradient(180deg, #fffafd, #fff0f5); }
body.theme-candy .seat.occupied { background: linear-gradient(180deg, #ffe7ef, #ffd7e5); border-color: #ec7fa2; }
body.theme-candy .seat.reserved { background: linear-gradient(180deg, #fff2df, #ffe2bd); border-color: #f5c58f; }
textarea { min-height: 78px; resize: vertical; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(49, 67, 54, .48);
  display: grid;
  place-items: center;
  padding: 18px;
}
.modal {
  width: min(780px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fffaf0;
  border: 2px solid #f8e8ad;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(48,62,47,.28);
}
.modal header, .modal footer {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px dashed var(--line);
}
.modal footer { border-top: 1px dashed var(--line); border-bottom: 0; justify-content: flex-end; }
.modal h3 { margin: 0; }
.modal .body { padding: 16px; }
.perm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 12px;
}
.perm-grid label {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d8bd77;
  border-radius: 14px;
  background: #fffdf0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.perm-grid input {
  min-height: auto;
}
.theme-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.theme-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.theme-choice {
  min-height: 48px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.theme-choice:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(69, 83, 61, .12); }
.theme-choice.active {
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 8px 22px rgba(69,83,61,.14);
  color: var(--ink);
  font-weight: 700;
}
.theme-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.82);
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.theme-dot.twilight { background: linear-gradient(135deg, #5146bd, #d9c6ff); }
.theme-dot.candy { background: linear-gradient(135deg, #ec7fa2, #77b7df); }
.theme-dot.sakura { background: linear-gradient(135deg, #f3a5bd, #8fc7e9); }
.notice {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #e0c577;
  background: rgba(255,244,202,.82);
  color: #70541f;
}
.empty { padding: 22px; text-align: center; color: var(--muted); }
.error { color: var(--red); min-height: 22px; }
.site-copyright {
  position: fixed;
  left: 50%;
  bottom: 8px;
  z-index: 20;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 252, 238, .72);
  border: 1px solid rgba(217, 201, 150, .72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(70, 83, 61, .12);
  backdrop-filter: blur(8px);
}
@media (max-width: 920px) {
  .app { display: block; }
  .sidebar { position: static; height: auto; margin: 10px; width: calc(100% - 20px); }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding: 12px; overflow-x: hidden; }
  .panel { padding: 12px; border-radius: 18px; overflow-x: auto; }
  .card { overflow-x: hidden; }
  .topbar, .split { display: grid; grid-template-columns: 1fr; }
  .cols-4, .cols-3, .cols-2, .form-grid, .theme-switch, .search-row { grid-template-columns: 1fr; }
  .perm-grid { grid-template-columns: 1fr; }
  .site-copyright { white-space: normal; width: calc(100vw - 24px); }
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  th, td { padding: 10px 8px; }
}

/* V2 经营工作台 */
body.theme-pixel {
  --ink: #2b2541;
  --muted: #776d91;
  --paper: rgba(255, 255, 255, .96);
  --line: #e4d8ff;
  --green: #7657d6;
  --blue: #5f9ee8;
  --sun: #ffc857;
  --red: #d95f7f;
  --shadow: 0 14px 36px rgba(72, 52, 128, .15);
  background:
    linear-gradient(rgba(118,87,214,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,87,214,.045) 1px, transparent 1px),
    linear-gradient(180deg, #faf8ff 0%, #fff8fc 52%, #f4f8ff 100%);
  background-size: 18px 18px, 18px 18px, auto;
}
body.theme-pixel .wash { opacity: .3; }
body.theme-pixel .btn { background: #f4efff; border-color: #d8c8ff; border-radius: 9px; }
body.theme-pixel .btn.primary { background: #7657d6; border-color: #6245c2; }
body.theme-pixel .panel,
body.theme-pixel .card { border-radius: 12px; }
.theme-dot.pixel { background: linear-gradient(135deg, #7657d6 0 48%, #ffc857 48% 72%, #ef7caa 72%); }
.workspace-shell .theme-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.workspace-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-width: 0;
}
.workspace-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  background: rgba(255, 253, 247, .94);
  border-bottom: 1px solid rgba(201, 184, 139, .66);
  box-shadow: 0 8px 24px rgba(59, 66, 54, .09);
  backdrop-filter: blur(14px);
}
.workspace-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  text-align: left;
  min-width: 0;
}
.workspace-brand > span:last-child { display: grid; min-width: 0; }
.workspace-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-brand small { color: var(--muted); margin-top: 2px; }
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--green), var(--blue));
  box-shadow: 0 7px 16px rgba(79, 138, 99, .22);
}
.workspace-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.workspace-tabs button,
.mobile-drawer button {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}
.workspace-tabs button.active,
.mobile-drawer button.active {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, white);
  font-weight: 700;
}
.nav-badge {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 11px;
}
.workspace-user { display: flex; align-items: center; justify-content: flex-end; gap: 7px; white-space: nowrap; }
.workspace-user > span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.workspace-main { width: min(1540px, 100%); margin: 0 auto; padding: 22px; min-width: 0; }
.mobile-menu-btn,
.mobile-drawer { display: none; }
.page-heading { align-items: center; }
.operation-kpis { margin-bottom: 14px; }
.operation-kpis .metric { min-height: 104px; border-top: 4px solid color-mix(in srgb, var(--green) 75%, white); }
.operation-kpis .metric strong { font-size: 28px; }

.station-filter,
.report-filter,
.member-search { margin-bottom: 14px; }
.filter-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filter-group + .filter-group { margin-top: 10px; }
.filter-group > b { min-width: 40px; color: var(--muted); font-size: 13px; }
.filter-chip {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: var(--muted);
}
.filter-chip.active { color: #fff; background: var(--green); border-color: var(--green); }
.station-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; }
.station-card {
  position: relative;
  min-height: 216px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 17px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 22px rgba(59, 70, 57, .08);
}
.station-card.occupied { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 7%, white); }
.station-card.reserved { border-left-color: var(--sun); background: color-mix(in srgb, var(--sun) 9%, white); }
.station-card.maintenance { border-left-color: var(--red); opacity: .86; }
.station-card-head,
.deposit-card > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.station-card-head strong { font-size: 20px; }
.station-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 12px; }
.station-meta span { padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.7); }
.station-clock { font-size: 27px; line-height: 1; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.station-money { color: var(--red); font-weight: 800; }
.station-customer { color: var(--muted); font-size: 13px; }
.station-idle { flex: 1; display: grid; place-items: center; color: var(--muted); }
.station-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

.seg-tabs,
.settings-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.52);
  overflow-x: auto;
}
.seg-tabs { margin-bottom: 12px; }
.settings-tabs { width: fit-content; max-width: 100%; margin: 0 0 14px; }
.seg-tabs button,
.settings-tabs button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}
.seg-tabs button.active,
.settings-tabs button.active { background: var(--green); color: #fff; font-weight: 700; }
.order-workbench { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.order-list-panel { padding: 12px; }
.order-list { display: grid; gap: 7px; max-height: calc(100vh - 225px); overflow: auto; }
.order-list-item {
  width: 100%;
  min-height: 66px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255,255,255,.52);
  text-align: left;
}
.order-list-item > span { display: grid; gap: 5px; }
.order-list-item > span:last-child { text-align: right; }
.order-list-item small { color: var(--muted); }
.order-list-item.active { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, white); }
.order-detail { min-height: 440px; }
.order-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin: 14px 0; }
.order-summary-grid > div { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.56); }
.order-summary-grid span { color: var(--muted); font-size: 12px; }
.payment-summary { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 9%, white); color: var(--muted); }
.checkout-total { margin-bottom: 14px; padding: 16px; border-radius: 13px; background: color-mix(in srgb, var(--green) 10%, white); text-align: center; }
.checkout-total strong { display: block; margin-top: 4px; font-size: 28px; color: var(--red); }

.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.rank-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px dashed var(--line); }
.rank-row:last-child { border-bottom: 0; }
.hour-chart { height: 175px; display: flex; align-items: flex-end; gap: 8px; padding-top: 24px; overflow-x: auto; }
.hour-chart > div { min-width: 44px; flex: 1; display: grid; justify-items: center; align-items: end; gap: 4px; }
.hour-chart > div > span { width: min(30px, 80%); min-height: 4px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, var(--blue), var(--green)); }
.hour-chart small { color: var(--muted); }
.hour-chart b { font-size: 11px; color: var(--muted); }

.deposit-grid,
.goods-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.deposit-card,
.goods-card { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.67); }
.deposit-card h3,
.goods-card h3 { margin: 14px 0 7px; }
.deposit-card p,
.goods-card p { margin: 7px 0; color: var(--muted); }
.deposit-images { display: flex; gap: 6px; margin: 10px 0; overflow-x: auto; }
.deposit-images img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }
.goods-thumb { height: 110px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #f6f2ff; color: var(--muted); font-size: 34px; }
.goods-thumb img,
.goods-thumb span { width: 100%; height: 100%; object-fit: cover; }
.goods-card > strong { color: var(--red); font-size: 18px; }
.goods-card .actions { margin-top: 12px; justify-content: flex-start; }
.check-label { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.check-label input { width: 18px; min-height: 18px; }

.receipt { width: min(360px, 100%); margin: 0 auto; padding: 18px; color: #171717; background: #fff; font-family: ui-monospace, Consolas, monospace; }
.receipt h2,
.receipt p { text-align: center; }
.receipt > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.receipt .receipt-total { padding-top: 10px; font-size: 20px; }

@media (max-width: 1280px) {
  .workspace-nav { grid-template-columns: 210px minmax(0,1fr) auto; padding-inline: 12px; gap: 8px; }
  .workspace-tabs button { padding-inline: 7px; font-size: 12px; }
  .workspace-user > span { display: none; }
  .station-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
}

@media (max-width: 920px) {
  .workspace-nav { grid-template-columns: auto minmax(0,1fr) auto; min-height: 60px; }
  .workspace-tabs { display: none; }
  .mobile-menu-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
  .workspace-brand small,
  .workspace-user > span,
  .workspace-user [data-open="password"] { display: none; }
  .workspace-user .btn { min-height: 34px; padding-inline: 9px; }
  .mobile-drawer {
    position: fixed;
    z-index: 39;
    top: 60px;
    left: 0;
    bottom: 0;
    width: min(290px, 84vw);
    display: grid;
    align-content: start;
    gap: 5px;
    padding: 12px;
    overflow-y: auto;
    background: rgba(255,253,247,.98);
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 40px rgba(47, 51, 45, .18);
    transform: translateX(-105%);
    transition: transform .18s ease;
  }
  .mobile-drawer.open { transform: translateX(0); }
  .mobile-drawer button { justify-content: flex-start; width: 100%; padding-inline: 14px; }
  .workspace-main { padding: 14px 10px 48px; }
  .page-heading { display: grid; grid-template-columns: 1fr; }
  .page-heading .actions { justify-content: flex-start; }
  .station-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .order-workbench,
  .report-grid { grid-template-columns: 1fr; }
  .order-list { max-height: 280px; }
  .order-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .deposit-grid,
  .goods-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workspace-shell .theme-switch { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .workspace-brand strong { font-size: 14px; }
  .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .station-grid,
  .deposit-grid,
  .goods-grid { grid-template-columns: 1fr; }
  .station-card { min-height: 196px; }
  .order-summary-grid { grid-template-columns: 1fr 1fr; }
  .operation-kpis { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .operation-kpis .metric { min-height: 88px; }
  .operation-kpis .metric strong { font-size: 22px; }
}

@media print {
  body * { visibility: hidden !important; }
  .receipt,
  .receipt * { visibility: visible !important; }
  .receipt { position: absolute; left: 0; top: 0; width: 80mm; padding: 4mm; }
  .site-copyright { display: none !important; }
}

/* Studio UI refresh: original bead-workshop visual system */
:root {
  --ink: #182236;
  --muted: #6d7789;
  --paper: #ffffff;
  --surface: #f5f7fb;
  --line: #dce2ec;
  --green: #168b85;
  --blue: #3976b8;
  --sun: #e7a83f;
  --red: #cf4b5d;
  --berry: #d93869;
  --berry-dark: #b92856;
  --shadow: 0 10px 28px rgba(24,34,54,.08);
}
html { background: var(--surface); }
body,
body.theme-sakura,
body.theme-candy,
body.theme-twilight,
body.theme-pixel {
  color: var(--ink);
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(31,55,82,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,55,82,.025) 1px, transparent 1px);
  background-size: 24px 24px;
}
body.theme-twilight { --berry: #4f63bb; --berry-dark: #36499d; --green: #287e9d; --blue: #5877c8; --surface: #f3f5fc; --line: #d9def0; }
body.theme-candy { --berry: #d04d79; --berry-dark: #ae385f; --green: #238d91; --blue: #5289bb; --surface: #fbf6f8; --line: #eadbe2; }
body.theme-pixel { --berry: #7657b8; --berry-dark: #5f429f; --green: #228b7b; --blue: #4d79b4; --surface: #f4f5fa; --line: #dce0ea; }
.wash { opacity: .38; background:
  radial-gradient(circle, rgba(217,56,105,.13) 0 3px, transparent 4px) 24px 20px / 96px 96px,
  radial-gradient(circle, rgba(22,139,133,.1) 0 2px, transparent 3px) 0 0 / 72px 72px;
}
body.theme-twilight .wash,
body.theme-candy .wash,
body.theme-pixel .wash { opacity: .26; }

button, input, select, textarea { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
button { letter-spacing: 0; }
.workspace-shell { min-height: 100vh; }
.workspace-nav {
  min-height: 72px;
  padding: 10px clamp(14px, 2.5vw, 36px);
  grid-template-columns: minmax(220px, 280px) minmax(0,1fr) auto;
  gap: 22px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 5px 18px rgba(24,34,54,.06);
  backdrop-filter: blur(16px);
}
.workspace-brand { gap: 11px; }
.workspace-brand strong { color: var(--ink); font-size: 16px; font-weight: 800; }
.workspace-brand small { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.brand-mark {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  box-shadow: 4px 4px 0 var(--berry);
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: 6px;
  top: 6px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: -9px 0 0 var(--green), 0 9px 0 var(--blue);
}
.workspace-tabs { justify-content: flex-start; gap: 2px; }
.workspace-tabs button,
.mobile-drawer button {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  transition: color .15s ease, background .15s ease;
}
.workspace-tabs button:hover,
.mobile-drawer button:hover { color: var(--ink); background: #f2f4f8; }
.workspace-tabs button.active,
.mobile-drawer button.active {
  color: var(--berry);
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--berry);
}
.workspace-tabs button > span { font-size: 16px; color: currentColor; }
.workspace-user { gap: 8px; }
.workspace-user > span { color: var(--muted); font-size: 12px; }
.workspace-user .btn { min-height: 34px; }
.workspace-main { width: min(1500px, 100%); padding: 28px clamp(12px, 3vw, 42px) 56px; }
.topbar.page-heading {
  min-height: 108px;
  align-items: center;
  margin-bottom: 18px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--berry);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}
.topbar.page-heading h2 { margin: 0 0 7px; color: var(--ink); font-size: clamp(24px, 2vw, 31px); letter-spacing: -.03em; }
.topbar.page-heading p { color: var(--muted); font-size: 13px; }
.actions { gap: 8px; }
.btn {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(24,34,54,.1); filter: none; }
.btn.primary { border-color: var(--berry); background: var(--berry); color: #fff; box-shadow: 0 6px 14px rgba(217,56,105,.2); }
.btn.primary:hover { background: var(--berry-dark); }
.btn.danger { border-color: #efc7ce; background: #fff5f6; color: var(--red); }
.btn:disabled { box-shadow: none; }
.panel, .card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}
.panel { padding: 18px; }
.card { overflow: hidden; }
.metric { min-height: 112px; padding: 18px; position: relative; }
.metric::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--berry); }
.metric span { color: var(--muted); font-size: 12px; font-weight: 700; }
.metric strong { display: block; margin-top: 10px; color: var(--ink); font-size: 29px; letter-spacing: -.03em; }
.operation-kpis .metric strong { color: var(--ink); }
.section-title { margin-bottom: 14px; }
.section-title h3 { color: var(--ink); font-size: 16px; }
.station-filter, .report-filter, .member-search { border-radius: 10px; background: #fbfcfe; }
.filter-group > b { color: var(--ink); }
.filter-chip { border-color: var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; }
.filter-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tag { min-height: 23px; padding: 3px 8px; border-radius: 5px; background: #eef1f6; color: var(--muted); font-weight: 700; }
.tag.green { background: #e5f5ef; color: #137663; }
.tag.blue { background: #e8f0fb; color: #356ca6; }
.tag.amber { background: #fff4d7; color: #996716; }
.tag.red { background: #fff0f1; color: #b23d4c; }

.station-grid { grid-template-columns: repeat(4, minmax(220px,1fr)); gap: 16px; }
.station-card {
  min-height: 220px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-left: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(24,34,54,.06);
}
.station-card.occupied { border-top-color: var(--green); background: #fbfffe; }
.station-card.reserved { border-top-color: var(--sun); background: #fffdf7; }
.station-card.maintenance { border-top-color: var(--red); background: #fffafb; }
.station-card-head strong { color: var(--ink); font-size: 18px; }
.station-meta span { border-radius: 4px; background: #f1f4f8; color: var(--muted); }
.station-clock { color: var(--ink); font-size: 28px; letter-spacing: 0; }
.station-money { color: var(--berry); font-weight: 800; }
.station-actions .btn { min-height: 34px; padding-inline: 11px; }

.order-workbench { grid-template-columns: minmax(300px, 370px) minmax(0,1fr); gap: 18px; }
.order-list-panel, .order-detail { border-radius: 12px; }
.seg-tabs, .settings-tabs { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc; }
.seg-tabs button, .settings-tabs button { min-height: 35px; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.seg-tabs button.active, .settings-tabs button.active { background: var(--ink); color: #fff; }
.order-list-item { min-height: 70px; padding: 12px; border: 1px solid transparent; border-radius: 8px; background: #f8fafc; }
.order-list-item.active { border-color: var(--berry); background: #fff5f8; box-shadow: inset 3px 0 0 var(--berry); }
.order-list-item b { color: var(--ink); }
.order-summary-grid > div { border: 1px solid var(--line); border-radius: 8px; background: #f9fafc; }
.payment-summary { border-radius: 8px; background: #edf7f6; color: #266d6b; }
.checkout-total { border-radius: 8px; background: #fff4f7; }
.checkout-total strong { color: var(--berry); }
.report-grid { gap: 16px; }
.rank-row { border-bottom: 1px solid #edf0f4; }
.hour-chart > div > span { border-radius: 4px 4px 0 0; background: var(--berry); }
.deposit-card, .goods-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 6px 16px rgba(24,34,54,.05); }
.deposit-card h3, .goods-card h3 { color: var(--ink); }
.goods-thumb { border-radius: 8px; background: #f2f5f8; }

table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th, td { border-bottom: 1px solid #edf0f4; }
th { background: #f7f9fc; color: var(--muted); font-size: 12px; }
tbody tr:hover { background: #fbfcfe; }
.form-grid { gap: 14px; }
label { color: var(--muted); font-weight: 650; }
input, select, textarea {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfe;
  color: var(--ink);
  padding: 9px 11px;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(217,56,105,.12); border-color: var(--berry); background: #fff; }
.notice { border: 1px solid #f1dca3; border-radius: 8px; background: #fff9e9; color: #805f20; }
.empty { padding: 42px 22px; color: var(--muted); }

.modal-backdrop { z-index: 60; background: rgba(16,24,38,.54); backdrop-filter: blur(6px); }
.modal {
  width: min(780px, 100%);
  max-height: min(90vh, 760px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(13,24,44,.25);
}
.modal header, .modal footer { padding: 18px 22px; border-color: #edf0f4; }
.modal header { background: #fbfcfe; }
.modal h3 { color: var(--ink); font-size: 18px; }
.modal .body { padding: 22px; }
.modal footer { background: #fbfcfe; }
.modal footer .btn.primary { min-width: 132px; }
.modal .btn[data-close] { min-width: 72px; }
.perm-grid label { border-color: var(--line); border-radius: 7px; background: #f8fafc; }
.theme-choice { border-radius: 8px; }
.theme-choice.active { border-color: var(--berry); box-shadow: inset 0 0 0 2px rgba(217,56,105,.12); }
.site-copyright { position: static; transform: none; width: fit-content; max-width: calc(100% - 24px); margin: 0 auto 12px; padding: 4px 8px; border: 0; background: transparent; box-shadow: none; color: #98a1b0; font-size: 11px; }

.login-wrap {
  min-height: 100vh;
  padding: 26px;
  background: var(--surface);
}
.login-wrap::before {
  content: "WORKSHOP / 01";
  position: absolute;
  left: clamp(24px, 8vw, 140px);
  top: clamp(34px, 10vh, 110px);
  color: var(--muted);
  font: 800 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
  opacity: .72;
}
.login-wrap::after {
  content: "";
  position: absolute;
  right: clamp(24px, 9vw, 160px);
  bottom: clamp(34px, 10vh, 110px);
  width: 160px;
  height: 160px;
  opacity: .72;
  background-image: radial-gradient(var(--berry) 2px, transparent 2px);
  background-size: 16px 16px;
}
.login-card {
  position: relative;
  width: min(460px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--berry);
  border-radius: 14px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 60px rgba(24,34,54,.12);
}
.login-card::before {
  content: "豆";
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--berry);
}
.login-card h1 { margin: 0 0 8px; color: var(--ink); font-size: 30px; letter-spacing: -.05em; }
.login-card p { color: var(--muted); font-size: 13px; }
.login-card label { margin-top: 18px; }
.login-card input { min-height: 46px; background: #fbfcfe; }
.login-card .btn.primary { min-height: 46px; margin-top: 8px; width: 100% !important; }

/* Platform admin follows the same studio system without sharing store navigation. */
.platform-shell { min-height: 100vh; padding: 28px clamp(12px, 3vw, 42px) 56px; }
.platform-main { width: min(1320px,100%); }
.platform-tabs { gap: 5px; margin: 18px 0; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #f7f9fc; width: fit-content; }
.platform-tabs button { min-height: 37px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 700; }
.platform-tabs button.active { background: var(--ink); border-color: var(--ink); color: #fff; }

@media (max-width: 1280px) {
  .workspace-nav { grid-template-columns: 210px minmax(0,1fr) auto; gap: 10px; }
  .workspace-tabs button { padding-inline: 8px; }
  .station-grid { grid-template-columns: repeat(3, minmax(210px,1fr)); }
}
@media (max-width: 920px) {
  .workspace-nav { min-height: 62px; grid-template-columns: auto minmax(0,1fr) auto; padding-inline: 12px; }
  .workspace-brand small, .workspace-user > span, .workspace-user [data-open="password"] { display: none; }
  .mobile-drawer { top: 62px; background: rgba(255,255,255,.98); border-right: 1px solid var(--line); }
  .workspace-main { padding: 16px 10px 48px; }
  .topbar.page-heading { align-items: flex-start; min-height: 0; padding: 19px 18px; }
  .topbar.page-heading .actions { justify-content: flex-start; }
  .station-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .order-workbench, .report-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .login-wrap { padding: 16px; }
  .login-wrap::before, .login-wrap::after { display: none; }
  .login-card { padding: 26px 20px; }
  .login-card h1 { font-size: 25px; }
  .station-grid, .deposit-grid, .goods-grid { grid-template-columns: 1fr; }
  .operation-kpis { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .operation-kpis .metric { min-height: 94px; padding: 14px; }
  .operation-kpis .metric strong { font-size: 23px; }
}

/* Keep legacy theme selectors from overriding the studio component system. */
body.theme-sakura .btn,
body.theme-candy .btn,
body.theme-twilight .btn,
body.theme-pixel .btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
body.theme-sakura .btn.primary,
body.theme-candy .btn.primary,
body.theme-twilight .btn.primary,
body.theme-pixel .btn.primary {
  border-color: var(--berry);
  background: var(--berry);
  color: #fff;
}
body.theme-sakura .btn.primary:hover,
body.theme-candy .btn.primary:hover,
body.theme-twilight .btn.primary:hover,
body.theme-pixel .btn.primary:hover { background: var(--berry-dark); }
body.theme-sakura .btn.danger,
body.theme-candy .btn.danger,
body.theme-twilight .btn.danger,
body.theme-pixel .btn.danger {
  border-color: #efc7ce;
  background: #fff5f6;
  color: var(--red);
}
body.theme-sakura .panel,
body.theme-sakura .card,
body.theme-sakura .login-card,
body.theme-candy .panel,
body.theme-candy .card,
body.theme-candy .login-card,
body.theme-twilight .panel,
body.theme-twilight .card,
body.theme-twilight .login-card,
body.theme-pixel .panel,
body.theme-pixel .card,
body.theme-pixel .login-card {
  border-color: var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
}
body.theme-sakura .login-card,
body.theme-candy .login-card,
body.theme-twilight .login-card,
body.theme-pixel .login-card { border-radius: 14px; }
body.theme-sakura input,
body.theme-sakura select,
body.theme-sakura textarea,
body.theme-candy input,
body.theme-candy select,
body.theme-candy textarea,
body.theme-twilight input,
body.theme-twilight select,
body.theme-twilight textarea,
body.theme-pixel input,
body.theme-pixel select,
body.theme-pixel textarea {
  border-color: var(--line);
  border-radius: 7px;
  background: #fbfcfe;
  color: var(--ink);
}
body.theme-sakura input:focus,
body.theme-sakura select:focus,
body.theme-sakura textarea:focus,
body.theme-candy input:focus,
body.theme-candy select:focus,
body.theme-candy textarea:focus,
body.theme-twilight input:focus,
body.theme-twilight select:focus,
body.theme-twilight textarea:focus,
body.theme-pixel input:focus,
body.theme-pixel select:focus,
body.theme-pixel textarea:focus {
  border-color: var(--berry);
  background: #fff;
}

/* V2.2 Bead Studio cockpit — implemented from approved UI boards. */
:root {
  --navy: #10233f;
  --navy-2: #15345d;
  --navy-soft: #214f83;
  --canvas: #f2f6fb;
  --berry: #e83167;
  --berry-dark: #c82355;
  --teal: #18a88e;
  --functional-blue: #247be5;
  --gold: #e9ae36;
  --danger: #eb4d5c;
  --text: #17263d;
  --subtext: #748198;
  --border: #dce5f0;
  --soft-shadow: 0 8px 24px rgba(25,52,87,.07);
}

body,
body.theme-sakura,
body.theme-candy,
body.theme-twilight,
body.theme-pixel {
  margin: 0;
  padding-bottom: 0;
  color: var(--text);
  background: var(--canvas);
}

body.theme-twilight { --navy: #17234b; --navy-2: #263b78; --functional-blue: #5978d7; --berry: #7859c4; --berry-dark: #6042a9; }
body.theme-candy { --navy: #25304b; --navy-2: #3b4b70; --functional-blue: #4a8fd0; --berry: #d94577; --berry-dark: #b93262; }
body.theme-pixel { --navy: #262242; --navy-2: #42376c; --functional-blue: #6577d6; --berry: #7657b8; --berry-dark: #5f429f; }

.workspace-shell {
  display: grid;
  grid-template-columns: 236px minmax(0,1fr);
  min-height: 100vh;
  background: var(--canvas);
}
.workspace-stage { min-width: 0; min-height: 100vh; }
.workspace-sidebar {
  position: sticky;
  top: 0;
  z-index: 45;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 15% 94%, rgba(232,49,103,.2) 0 3px, transparent 4px) 0 0 / 21px 21px,
    linear-gradient(155deg, var(--navy-2), var(--navy) 45%, #0c1d35);
  border-right: 1px solid rgba(255,255,255,.07);
  box-shadow: 10px 0 30px rgba(16,35,63,.08);
  transition: width .2s ease;
}
.sidebar-brand-row {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.workspace-brand {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: #fff;
  text-align: left;
  background: transparent;
}
.workspace-brand .brand-mark {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 10px;
  color: var(--navy);
  background:
    radial-gradient(circle at 30% 30%, var(--navy) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, var(--functional-blue) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 70%, var(--berry) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 70%, var(--gold) 0 3px, transparent 4px),
    #fff;
  font-size: 0;
  box-shadow: none;
}
.workspace-brand .brand-mark::after { display: none; }
.workspace-brand strong { display: block; color: #fff; font-size: 20px; line-height: 1.1; letter-spacing: .05em; }
.workspace-brand small { display: block; margin-top: 4px; color: rgba(255,255,255,.52); font: 700 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .13em; }
.sidebar-collapse {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  font-size: 20px;
}
.workspace-tabs {
  display: grid;
  gap: 5px;
  padding: 15px 12px;
}
.workspace-tabs button {
  position: relative;
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: rgba(239,246,255,.72);
  background: transparent;
  text-align: left;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.workspace-tabs button > span { display: grid; place-items: center; color: rgba(255,255,255,.62); font-size: 16px; }
.workspace-tabs button > b { overflow: hidden; font-size: 13px; font-weight: 650; white-space: nowrap; }
.workspace-tabs button:hover { color: #fff; background: rgba(255,255,255,.07); transform: translateX(2px); }
.workspace-tabs button.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(36,123,229,.9), rgba(39,104,178,.78));
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(3,22,46,.2), inset 3px 0 0 #71b6ff;
}
.workspace-tabs button.active > span { color: #fff; }
.nav-badge {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--berry);
  color: #fff;
  font-size: 10px;
  font-style: normal;
}
.sidebar-beads { flex: 1; min-height: 40px; opacity: .5; }
.sidebar-user {
  min-height: 72px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 32px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.09);
  background: rgba(5,20,39,.26);
}
.user-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--functional-blue), var(--berry));
  font-size: 13px;
  font-weight: 800;
}
.sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: #fff; font-size: 12px; }
.sidebar-user small { margin-top: 3px; color: rgba(255,255,255,.54); font-size: 10px; }
.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font-weight: 800;
}
.icon-btn:hover { border-color: #b8c9de; background: #f7faff; }
.icon-btn.light { border-color: rgba(255,255,255,.11); color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); }
.icon-btn.light:hover { color: #fff; background: rgba(255,255,255,.12); }

.sidebar-collapsed { grid-template-columns: 78px minmax(0,1fr); }
.sidebar-collapsed .workspace-brand > span:last-child,
.sidebar-collapsed .workspace-tabs button > b,
.sidebar-collapsed .workspace-tabs .nav-badge,
.sidebar-collapsed .sidebar-user > span:nth-child(2) { display: none; }
.sidebar-collapsed .sidebar-brand-row { padding-inline: 17px; }
.sidebar-collapsed .workspace-brand .brand-mark { width: 42px; flex-basis: 42px; }
.sidebar-collapsed .sidebar-collapse { position: absolute; top: 70px; right: -12px; z-index: 2; color: var(--navy); background: #fff; box-shadow: var(--soft-shadow); transform: rotate(180deg); }
.sidebar-collapsed .workspace-tabs { padding-inline: 10px; }
.sidebar-collapsed .workspace-tabs button { grid-template-columns: 1fr; justify-items: center; padding: 0; }
.sidebar-collapsed .sidebar-user { grid-template-columns: 1fr; justify-items: center; padding-inline: 10px; }
.sidebar-collapsed .sidebar-user .icon-btn { display: none; }

.workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 8px clamp(14px,2.2vw,32px);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 16px rgba(25,52,87,.04);
  backdrop-filter: blur(16px);
}
.workspace-location, .workspace-date { display: flex; align-items: center; gap: 10px; color: var(--subtext); }
.workspace-location { min-width: 220px; }
.workspace-location > span, .workspace-date > span { color: var(--teal); font-size: 17px; }
.workspace-location strong, .workspace-location small { display: block; }
.workspace-location strong { color: var(--text); font-size: 13px; }
.workspace-location small { margin-top: 2px; font-size: 10px; }
.workspace-date { padding-left: 20px; border-left: 1px solid var(--border); }
.workspace-date strong { color: #45546a; font-size: 12px; }
.workspace-top-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.top-user-btn { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; border-radius: 9px; background: transparent; text-align: left; }
.top-user-btn:hover { background: #f3f7fc; }
.top-user-btn b, .top-user-btn small { display: block; }
.top-user-btn b { color: var(--text); font-size: 12px; }
.top-user-btn small { color: var(--subtext); font-size: 10px; }
.notice-wrap { position: relative; }
.notice-btn em { position: absolute; right: -5px; top: -5px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 10px; color: #fff; background: var(--berry); font-size: 9px; font-style: normal; }
.notice-btn.active { border-color: #a9c9ed; color: var(--functional-blue); background: #edf5ff; }
.notice-btn { font-size: 0; }
.notice-btn::before { content: "\1F514 "; font-size: 19px; line-height: 1; }
.announcement-btn::before { content: "\1F4E2 "; font-size: 18px; line-height: 1; }
.billing-settings-panel { min-width: 0; overflow: hidden; }
.billing-settings-panel table { width: 100%; min-width: 0; table-layout: fixed; }
.billing-settings-panel th,
.billing-settings-panel td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-settings-panel th:last-child,
.billing-settings-panel td:last-child { width: 150px; }
@media (max-width: 700px) {
  .billing-settings-panel table { min-width: 620px; }
  .billing-settings-panel { overflow-x: auto; }
}
.notice-popover { position: absolute; right: -90px; top: 46px; width: min(350px,calc(100vw - 28px)); z-index: 60; }
.notice-popover .activity-panel { max-height: min(72vh,620px); overflow-y: auto; box-shadow: 0 24px 60px rgba(16,35,63,.2); }
.announcement-modal { padding: 8px 2px; color: var(--ink); line-height: 1.8; }
.announcement-modal p { margin: 0 0 12px; white-space: normal; word-break: break-word; }
.announcement-modal small { color: var(--muted); }
.announcement-preview { padding: 18px; border: 1px solid #e5eaf1; border-radius: 10px; background: #fbfcfe; }
.announcement-preview h3 { margin: 0 0 10px; color: var(--ink); }
.announcement-preview p { margin: 0 0 12px; line-height: 1.8; white-space: normal; word-break: break-word; }
.mobile-menu-btn { display: none; }
.mobile-sidebar-mask { display: none; }

.workspace-main { width: 100%; max-width: 1660px; margin: 0 auto; padding: 26px clamp(14px,2.4vw,34px) 52px; }
.topbar.page-heading {
  min-height: 72px;
  align-items: flex-end;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-title-block { min-width: 0; }
.page-eyebrow, .panel-kicker { display: block; margin-bottom: 5px; color: var(--functional-blue); font: 800 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .14em; }
.topbar.page-heading h2 { margin: 0 0 5px; color: var(--text); font-size: clamp(24px,2.1vw,32px); letter-spacing: -.04em; }
.topbar.page-heading p { margin: 0; color: var(--subtext); font-size: 12px; }

.btn,
body.theme-sakura .btn,
body.theme-candy .btn,
body.theme-twilight .btn,
body.theme-pixel .btn {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #cad7e6;
  border-radius: 7px;
  color: #34465e;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); border-color: #aebfd3; background: #f9fbfe; box-shadow: 0 5px 12px rgba(25,52,87,.08); }
.btn:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(25,52,87,.08); }
.btn:focus-visible, .icon-btn:focus-visible, .workspace-tabs button:focus-visible, .filter-chip:focus-visible { outline: 3px solid rgba(36,123,229,.2); outline-offset: 2px; }
.btn.primary,
body.theme-sakura .btn.primary,
body.theme-candy .btn.primary,
body.theme-twilight .btn.primary,
body.theme-pixel .btn.primary { border-color: var(--berry); color: #fff; background: linear-gradient(180deg, #ef3b73, var(--berry)); box-shadow: 0 6px 14px rgba(232,49,103,.18); }
.btn.primary:hover { border-color: var(--berry-dark); background: var(--berry-dark); }
.btn.danger,
body.theme-sakura .btn.danger,
body.theme-candy .btn.danger,
body.theme-twilight .btn.danger,
body.theme-pixel .btn.danger { border-color: #f2c8cf; color: #cc3448; background: #fff5f6; }
.btn.danger.solid { border-color: var(--danger); color: #fff; background: var(--danger); }
.btn:disabled, .btn.is-loading { opacity: .62; cursor: wait; transform: none; box-shadow: none; }
.btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.panel, .card,
body.theme-sakura .panel, body.theme-sakura .card,
body.theme-candy .panel, body.theme-candy .card,
body.theme-twilight .panel, body.theme-twilight .card,
body.theme-pixel .panel, body.theme-pixel .card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}
.panel { padding: 16px; }
.section-title { align-items: center; }
.section-title h3 { margin: 0; color: var(--text); font-size: 15px; }
.section-hint { color: var(--subtext); font-size: 11px; }

.dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
.dashboard-core { min-width: 0; display: grid; gap: 14px; }
.operation-kpis { gap: 12px; margin-bottom: 0; }
.operation-kpis .metric { min-height: 106px; padding: 15px 16px; border-top: 3px solid var(--functional-blue); overflow: hidden; }
.operation-kpis .metric::before { left: auto; right: -16px; top: -16px; width: 66px; height: 66px; border-radius: 50%; opacity: .08; background: currentColor; }
.operation-kpis .metric.teal { border-top-color: var(--teal); }
.operation-kpis .metric.blue { border-top-color: var(--functional-blue); }
.operation-kpis .metric.amber { border-top-color: var(--gold); }
.operation-kpis .metric.berry { border-top-color: var(--berry); }
.operation-kpis .metric span { color: var(--subtext); }
.operation-kpis .metric strong { margin-top: 7px; color: var(--text); font-size: 27px; }
.operation-kpis .metric small { display: block; margin-top: 5px; color: #9aa6b7; font-size: 10px; }
.station-filter { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; }
.filter-group { gap: 7px; }
.filter-group > b { margin-right: 3px; color: #4a5a70; font-size: 11px; }
.filter-chip { min-height: 30px; padding: 0 11px; border: 1px solid #d4dfec; border-radius: 6px; color: #65748a; background: #fff; font-size: 11px; font-weight: 700; }
.filter-chip:hover { border-color: #9fb8d5; color: var(--functional-blue); }
.filter-chip.active { border-color: var(--functional-blue); color: #fff; background: var(--functional-blue); }
.station-panel { padding: 14px; }
.station-grid { grid-template-columns: repeat(3,minmax(190px,1fr)); gap: 11px; }
.station-card {
  min-height: 184px;
  padding: 14px;
  border: 1px solid #cbd9e8;
  border-top: 3px solid var(--functional-blue);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(25,52,87,.045);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.station-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(25,52,87,.1); }
.station-card.occupied { border-top-color: var(--teal); background: #fbfffe; }
.station-card.reserved { border-top-color: var(--gold); background: #fffdf8; }
.station-card.maintenance { border-top-color: var(--danger); background: #fffafb; }
.station-card-head strong { font-size: 17px; }
.station-meta span { border: 0; border-radius: 4px; background: #f0f4f9; font-size: 10px; }
.station-clock { margin: 14px 0 4px; color: var(--text); font-size: 25px; font-variant-numeric: tabular-nums; }
.station-money { color: var(--teal); }
.station-idle { min-height: 67px; display: grid; place-items: center; color: #9aa6b7; font-size: 12px; }
.station-actions { margin-top: auto; padding-top: 10px; border-top: 1px solid #eef2f6; }
.station-actions .btn { min-height: 32px; padding-inline: 10px; }

.activity-panel { position: sticky; top: 80px; padding: 15px; }
.activity-panel .section-title { margin-bottom: 5px; }
.activity-group { padding: 13px 0; border-top: 1px solid #edf1f6; }
.activity-group:first-of-type { border-top: 0; }
.activity-heading { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; margin-bottom: 8px; }
.activity-heading b { color: #35465d; font-size: 12px; }
.activity-heading em { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 10px; color: #63758d; background: #edf3fa; font-size: 10px; font-style: normal; }
.activity-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 11px; font-weight: 900; }
.activity-icon.blue { color: #1264b9; background: #e4f1ff; }
.activity-icon.amber { color: #9c6a08; background: #fff2cf; }
.activity-icon.green { color: #087d67; background: #dff6ef; }
.activity-row { width: 100%; min-height: 46px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px dashed #edf1f5; color: inherit; background: transparent; text-align: left; }
.activity-row:hover { background: #f8fbff; }
.activity-row span { min-width: 0; }
.activity-row strong, .activity-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-row strong { color: #405169; font-size: 11px; }
.activity-row small { margin-top: 3px; color: #94a0b1; font-size: 9px; }
.activity-row > b { flex: 0 0 auto; color: #263c58; font-size: 11px; }
.activity-row i { color: var(--functional-blue); font-size: 10px; font-style: normal; }
.activity-empty { margin: 9px 0 2px; color: #a1adbc; font-size: 10px; text-align: center; }
.activity-panel.compact { position: static; border: 0; box-shadow: none; }
.activity-panel.compact .section-title { display: none; }

.dashboard-order-strip { margin-top: 16px; }
.dashboard-order-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(230px,.7fr); gap: 14px; }
.mini-order-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.mini-order-list button { min-height: 60px; display: flex; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid #e3eaf3; border-radius: 8px; color: inherit; background: #f9fbfe; text-align: left; }
.mini-order-list button:hover { border-color: #b8cde4; background: #fff; }
.mini-order-list span:last-child { text-align: right; }
.mini-order-list b, .mini-order-list strong, .mini-order-list small { display: block; }
.mini-order-list b { font-size: 11px; }
.mini-order-list strong { color: var(--text); font-size: 13px; }
.mini-order-list small { margin-top: 4px; color: var(--subtext); font-size: 9px; }
.mini-order-list .tag { display: inline-flex; margin-top: 4px; }
.mini-payment-card { padding: 14px; border-radius: 8px; color: #fff; background: linear-gradient(145deg,var(--navy-2),var(--navy)); }
.mini-payment-card span { color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .1em; }
.mini-payment-card strong { display: block; margin: 8px 0; font-size: 17px; }
.mini-payment-card p { color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.6; }
.mini-payment-card .btn { margin-top: 8px; }

.inventory-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 15px; align-items: start; }
.inventory-main { overflow-x: auto; }
.warning-row { background: #fff9f5; }
.warning-row:hover { background: #fff4ed; }
.inventory-side { display: grid; gap: 14px; }
.inventory-goods-list { display: grid; }
.inventory-goods-list > button { min-height: 58px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 3px; border-top: 1px solid #eef2f6; color: inherit; background: transparent; text-align: left; }
.goods-color { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #e0e7f0; border-radius: 7px; color: #8d9aab; background: #f1f4f8; }
.inventory-goods-list b, .inventory-goods-list small { display: block; }
.inventory-goods-list b { color: #3a4b62; font-size: 11px; }
.inventory-goods-list small { margin-top: 3px; color: #95a1b1; font-size: 9px; }
.inventory-goods-list strong { color: var(--teal); font-size: 13px; }
.inventory-goods-list .low, .inventory-log .low { color: var(--danger); }
.inventory-log { padding-top: 12px; border-top: 1px solid var(--border); }
.inventory-log h4 { margin: 0 0 8px; font-size: 12px; }
.inventory-log > div { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px dashed #edf1f5; }
.inventory-log b, .inventory-log small { display: block; }
.inventory-log b { font-size: 10px; }
.inventory-log small { color: #98a4b3; font-size: 9px; }

.order-workbench { grid-template-columns: minmax(280px,340px) minmax(0,1fr); }
.order-list-panel { padding: 12px; }
.order-list-item { min-height: 66px; }
.order-list-item.active { border-color: var(--functional-blue); background: #edf5ff; box-shadow: inset 3px 0 0 var(--functional-blue); }
.order-detail { min-height: 420px; }
.seg-tabs, .settings-tabs { border-radius: 7px; }
.seg-tabs button.active, .settings-tabs button.active { background: var(--functional-blue); }

table { border-color: var(--border); border-radius: 8px; }
th { color: #68778d; background: #f5f8fc; }
th, td { border-bottom-style: solid; border-bottom-color: #edf1f6; font-size: 12px; }
tbody tr:hover { background: #f9fbfe; }
td small { color: #95a1b1; }

.modal-backdrop { z-index: 90; background: rgba(8,22,40,.55); }
.modal { border-radius: 12px; box-shadow: 0 30px 80px rgba(8,22,40,.28); }
.modal header { background: #f7f9fc; }
.modal header h3::before { content: ""; display: inline-block; width: 3px; height: 17px; margin-right: 8px; border-radius: 2px; background: var(--berry); vertical-align: -3px; }
.modal footer { justify-content: flex-end; }
input, select, textarea,
body.theme-sakura input, body.theme-sakura select, body.theme-sakura textarea,
body.theme-candy input, body.theme-candy select, body.theme-candy textarea,
body.theme-twilight input, body.theme-twilight select, body.theme-twilight textarea,
body.theme-pixel input, body.theme-pixel select, body.theme-pixel textarea { border-color: #ced9e7; border-radius: 6px; background: #fbfcfe; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(36,123,229,.13); border-color: var(--functional-blue); }

.toast-stack { position: fixed; z-index: 130; top: 76px; right: 18px; width: min(360px,calc(100vw - 28px)); display: grid; gap: 9px; pointer-events: none; }
.app-toast { min-height: 50px; display: grid; grid-template-columns: 25px minmax(0,1fr) 24px; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #cfe7de; border-left: 4px solid var(--teal); border-radius: 8px; color: #2a534a; background: #f0fbf7; box-shadow: 0 14px 34px rgba(16,35,63,.15); pointer-events: auto; animation: toast-in .18s ease both; }
.app-toast.warning { border-color: #f0dfae; border-left-color: var(--gold); color: #72561c; background: #fffaeb; }
.app-toast.error { border-color: #f1c8ce; border-left-color: var(--danger); color: #87313c; background: #fff5f6; }
.app-toast.info { border-color: #c8ddf4; border-left-color: var(--functional-blue); color: #315d8a; background: #f1f7ff; }
.app-toast > span:nth-child(2) { font-size: 12px; font-weight: 650; }
.toast-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); font-weight: 900; }
.app-toast.warning .toast-icon { background: var(--gold); }
.app-toast.error .toast-icon { background: var(--danger); }
.app-toast.info .toast-icon { background: var(--functional-blue); }
.app-toast button { padding: 0; color: currentColor; background: transparent; font-size: 18px; opacity: .6; }
.app-toast.leaving { opacity: 0; transform: translateX(18px); transition: .18s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px); } }

.confirm-backdrop { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 18px; background: rgba(8,22,40,.58); backdrop-filter: blur(5px); }
.confirm-dialog { width: min(430px,100%); display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 28px 80px rgba(8,22,40,.3); }
.confirm-symbol { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--gold); font-size: 21px; font-weight: 900; }
.confirm-symbol.danger { background: var(--danger); }
.confirm-dialog h3 { margin: 2px 0 7px; font-size: 17px; }
.confirm-dialog p { margin: 0; color: var(--subtext); font-size: 12px; line-height: 1.65; }
.confirm-dialog footer { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid #edf1f5; }

.login-wrap { grid-template-columns: minmax(280px,1fr) minmax(420px,42%); padding: 0; background: var(--canvas); }
.login-wrap::before { content: ""; inset: 0 42% 0 0; position: absolute; z-index: -1; background: radial-gradient(circle at 24% 76%, rgba(232,49,103,.22) 0 3px, transparent 4px) 0 0 / 24px 24px, linear-gradient(145deg,var(--navy-2),var(--navy)); opacity: 1; }
.login-wrap::after { right: auto; left: 9%; bottom: 13%; width: 210px; height: 210px; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.7) 2px, transparent 3px); background-size: 18px 18px; }
.login-card, body.theme-sakura .login-card, body.theme-candy .login-card, body.theme-twilight .login-card, body.theme-pixel .login-card { grid-column: 2; width: min(430px,calc(100% - 36px)); padding: 34px; border: 1px solid var(--border); border-top: 0; border-radius: 12px; background: #fff; }
.login-card::before { display: none; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.login-brand .brand-mark { width: 44px; height: 44px; flex: 0 0 44px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { color: var(--text); font-size: 20px; }
.login-brand small { margin-top: 3px; color: var(--subtext); font: 700 9px/1.2 ui-monospace,Consolas,monospace; letter-spacing: .14em; }
.login-card h1 { font-size: 27px; }
.password-field { position: relative; }
.password-field input { width: 100%; padding-right: 54px; }
.password-field button { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); padding: 5px 7px; border-radius: 5px; color: var(--functional-blue); background: transparent; font-size: 11px; }
.password-field button:hover { background: #edf5ff; }
.login-submit { width: 100%; min-height: 44px; margin-top: 8px; }

@media (max-width: 1280px) {
  .workspace-shell { grid-template-columns: 86px minmax(0,1fr); }
  .workspace-sidebar .workspace-brand > span:last-child,
  .workspace-sidebar .workspace-tabs button > b,
  .workspace-sidebar .workspace-tabs .nav-badge,
  .workspace-sidebar .sidebar-user > span:nth-child(2) { display: none; }
  .workspace-sidebar .sidebar-brand-row { padding-inline: 21px; }
  .workspace-sidebar .sidebar-collapse { display: none; }
  .workspace-sidebar .workspace-tabs { padding-inline: 11px; }
  .workspace-sidebar .workspace-tabs button { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .workspace-sidebar .sidebar-user { grid-template-columns: 1fr; justify-items: center; }
  .workspace-sidebar .sidebar-user .icon-btn { display: none; }
  .dashboard-layout { grid-template-columns: minmax(0,1fr) 270px; }
  .station-grid { grid-template-columns: repeat(2,minmax(190px,1fr)); }
}
@media (max-width: 1040px) {
  .dashboard-layout, .inventory-layout { grid-template-columns: 1fr; }
  .activity-panel { position: static; }
  .activity-panel:not(.compact) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .activity-panel:not(.compact) .section-title { grid-column: 1/-1; }
  .activity-panel:not(.compact) .activity-group { border-top: 1px solid #edf1f6; }
}
@media (max-width: 920px) {
  .workspace-shell, .sidebar-collapsed { display: block; }
  .workspace-sidebar {
    position: fixed;
    left: 0;
    width: min(270px,84vw);
    transform: translateX(-105%);
    transition: transform .18s ease;
  }
  .workspace-sidebar.mobile-open { transform: translateX(0); }
  .workspace-sidebar .workspace-brand > span:last-child,
  .workspace-sidebar .workspace-tabs button > b,
  .workspace-sidebar .workspace-tabs .nav-badge,
  .workspace-sidebar .sidebar-user > span:nth-child(2) { display: block; }
  .workspace-sidebar .sidebar-brand-row { padding: 16px 14px 14px 18px; }
  .workspace-sidebar .workspace-tabs { padding-inline: 12px; }
  .workspace-sidebar .workspace-tabs button { grid-template-columns: 30px minmax(0,1fr) auto; justify-items: stretch; padding-inline: 13px; }
  .workspace-sidebar .sidebar-user { grid-template-columns: 36px minmax(0,1fr) 32px; justify-items: stretch; }
  .workspace-sidebar .sidebar-user .icon-btn { display: grid; }
  .mobile-sidebar-mask { position: fixed; inset: 0; z-index: 40; border: 0; background: rgba(8,22,40,.45); }
  .mobile-sidebar-mask.show { display: block; }
  .mobile-menu-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: #fff; }
  .workspace-location { min-width: 0; }
  .workspace-location small, .workspace-date { display: none; }
  .top-user-btn > span:last-child { display: none; }
  .workspace-main { padding: 18px 11px 44px; }
  .topbar.page-heading { align-items: flex-start; }
  .station-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-order-grid, .order-workbench, .report-grid { grid-template-columns: 1fr; }
  .inventory-main { overflow-x: auto; }
}
@media (max-width: 640px) {
  .workspace-topbar { gap: 9px; padding-inline: 10px; }
  .workspace-location strong { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-top-actions { gap: 5px; }
  .workspace-top-actions > .icon-btn:last-child { display: none; }
  .notice-popover { position: fixed; left: 8px; right: 8px; top: 64px; width: auto; }
  .topbar.page-heading { display: grid; grid-template-columns: 1fr; }
  .topbar.page-heading .actions { justify-content: flex-start; }
  .operation-kpis { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .operation-kpis .metric { min-height: 94px; }
  .station-filter { display: grid; justify-content: stretch; overflow: hidden; }
  .filter-group { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .filter-chip { flex: 0 0 auto; }
  .station-grid, .deposit-grid, .goods-grid { grid-template-columns: 1fr; }
  .activity-panel:not(.compact) { grid-template-columns: 1fr; }
  .activity-panel:not(.compact) .section-title { grid-column: auto; }
  .mini-order-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .modal { align-self: end; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .modal-backdrop { padding: 0; place-items: end center; }
  .confirm-dialog { padding: 18px; }
  .login-wrap { display: grid; grid-template-columns: 1fr; padding: 18px; }
  .login-wrap::before, .login-wrap::after { display: none; }
  .login-card, body.theme-sakura .login-card, body.theme-candy .login-card, body.theme-twilight .login-card, body.theme-pixel .login-card { grid-column: 1; width: 100%; padding: 28px 20px; }
}

/* V2.2.1 pixel-match pass for the three approved UI boards. */
@media (min-width: 1281px) {
  .workspace-shell { grid-template-columns: clamp(246px,17vw,300px) minmax(0,1fr); }
  .sidebar-collapsed { grid-template-columns: 78px minmax(0,1fr); }
}
.workspace-topbar { min-height: 76px; padding-inline: 30px; }
.workspace-main { max-width: none; padding: 30px 28px 58px; }
.topbar.page-heading { min-height: 90px; align-items: center; margin-bottom: 22px; padding-bottom: 20px; }
.topbar.page-heading h2 { font-size: 34px; }
.topbar.page-heading p { font-size: 14px; }
.topbar.page-heading .actions .btn { min-height: 46px; padding-inline: 20px; font-size: 14px; }
.workspace-tabs { padding-top: 22px; gap: 8px; }
.workspace-tabs button { min-height: 54px; border-radius: 10px; font-size: 15px; }
.workspace-tabs button > b { font-size: 15px; }
.workspace-tabs button.active { background: linear-gradient(90deg,#2169ad,#2d78bb); box-shadow: 0 10px 24px rgba(3,22,46,.24); }
.sidebar-beads { position: relative; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 24px 32px; overflow: hidden; }
.sidebar-beads > div { position: absolute; left: 28px; bottom: 136px; width: 138px; height: 138px; opacity: .72; background-image: radial-gradient(circle,var(--functional-blue) 0 5px,transparent 6px),radial-gradient(circle,var(--berry) 0 5px,transparent 6px),radial-gradient(circle,var(--gold) 0 4px,transparent 5px),radial-gradient(circle,var(--teal) 0 4px,transparent 5px); background-position: 0 0,14px 14px,28px 0,42px 14px; background-size: 56px 28px; transform: rotate(-8deg); mask-image: linear-gradient(135deg,transparent 5%,#000 40%,transparent 90%); }
.sidebar-beads p { position: relative; margin: 0; color: rgba(255,255,255,.53); font-size: 14px; line-height: 1.8; }
.sidebar-beads p::after { content:""; display:block; width:36px; height:2px; margin-top:15px; background:rgba(255,255,255,.38); }
.sidebar-user { display: none; }

.dashboard-layout { grid-template-columns: minmax(0,1fr) 330px; gap: 20px; }
.operation-kpis { gap: 16px; }
.operation-kpis .metric { min-height: 135px; padding: 22px 20px; border-width: 1px; border-top-width: 1px; border-left: 3px solid var(--functional-blue); }
.operation-kpis .metric.teal { border-left-color: var(--teal); background: linear-gradient(135deg,#fff,#f3fffb); }
.operation-kpis .metric.blue { border-left-color: var(--functional-blue); background: linear-gradient(135deg,#fff,#f3f8ff); }
.operation-kpis .metric.amber { border-left-color: var(--gold); background: linear-gradient(135deg,#fff,#fffaf0); }
.operation-kpis .metric.berry { border-left-color: #7758df; background: linear-gradient(135deg,#fff,#f7f4ff); }
.operation-kpis .metric::after { content:""; position:absolute; left:18px; top:19px; width:30px; height:30px; border-radius:8px; background:rgba(36,123,229,.13); }
.operation-kpis .metric.teal::after { background:rgba(24,168,142,.16); }
.operation-kpis .metric.amber::after { background:rgba(233,174,54,.19); }
.operation-kpis .metric.berry::after { background:rgba(119,88,223,.15); }
.operation-kpis .metric span { padding-left:40px; font-size:14px; }
.operation-kpis .metric strong { margin-top:13px; font-size:32px; }
.operation-kpis .metric small { margin-top:8px; font-size:11px; }
.station-filter { min-height:54px; margin-top:2px; padding:10px 2px; border:0; background:transparent; box-shadow:none; }
.filter-group > b { font-size:14px; }
.filter-chip { min-height:38px; padding-inline:18px; border-radius:9px; font-size:13px; }
.station-panel { padding:0; border:0; background:transparent; box-shadow:none; }
.station-panel > .section-title { display:none; }
.station-grid { grid-template-columns:repeat(3,minmax(210px,1fr)); gap:16px; }
.station-card { position:relative; min-height:190px; padding:18px 18px 16px; border-width:2px; border-top-width:2px; border-color:#68b6f2; border-radius:11px; background:#fff; overflow:visible; }
.station-card.occupied { border-color:#3ac1a2; background:linear-gradient(145deg,#fff,#f7fffc); }
.station-card.paused { border-color:#e9ae36; background:linear-gradient(145deg,#fff,#fffcf2); }
.station-card.reserved { border-color:#e9ae36; background:linear-gradient(145deg,#fff,#fffcf2); }
.station-card.maintenance { border-color:#f05a71; background:linear-gradient(145deg,#fff,#fff8fa); }
.station-card-head { display:flex; justify-content:space-between; align-items:flex-start; }
.station-card-head > div { display:flex; align-items:baseline; gap:10px; }
.station-card-head strong { color:#132645; font-size:20px; }
.station-card-head > div > span { color:#8492a6; font-size:13px; font-weight:700; }
.station-card-head .tag { min-height:25px; padding:3px 11px; border-radius:12px; }
.station-quick { display:flex; justify-content:space-between; align-items:center; margin-top:20px; color:#8b99ad; font-size:13px; }
.station-quick strong { color:#40536d; font-size:14px; }
.station-time { display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:5px; min-height:35px; margin-top:6px; }
.station-time span { color:#7e8ba0; }
.station-time b { color:#253a58; font-size:15px; font-variant-numeric:tabular-nums; }
.station-time em { color:#9db4ca; font-size:13px; font-style:normal; }
.station-card.occupied .station-time em,.station-card.occupied .station-quick strong { color:var(--teal); }
.station-card.paused .station-time em,.station-card.reserved .station-time em { color:var(--gold); }
.station-card.maintenance .station-time em,.station-card.maintenance .station-quick strong { color:var(--danger); }
.station-actions { display:grid; grid-template-columns:1fr 1fr 50px; gap:10px; padding-top:13px; }
.station-actions .btn { width:100%; min-height:39px; border-radius:8px; font-size:13px; }
.btn.frequent { border-color:#247be5; color:#fff; background:linear-gradient(180deg,#2f89ec,#2474ca); box-shadow:0 5px 12px rgba(36,123,229,.18); }
.btn.frequent:hover { border-color:#1d65b3; color:#fff; background:#1f6fbe; }
.btn.icon-only { padding:0; letter-spacing:2px; }
.station-more-menu { position:absolute; z-index:20; right:15px; bottom:58px; width:145px; display:grid; padding:6px; border:1px solid var(--border); border-radius:9px; background:#fff; box-shadow:0 16px 34px rgba(16,35,63,.18); }
.station-more-menu button { min-height:34px; padding:0 10px; border-radius:6px; color:#42546c; background:transparent; text-align:left; font-size:12px; }
.station-more-menu button:hover { color:var(--functional-blue); background:#edf5ff; }

.activity-panel { top:96px; padding:22px 20px; border-radius:12px; }
.activity-panel .section-title h3 { font-size:19px; }
.activity-group { padding:20px 0; }
.activity-heading b { font-size:14px; }
.activity-row { min-height:58px; padding:9px 4px; }
.activity-row strong { font-size:13px; }
.activity-row small { font-size:11px; }
.activity-row > b { font-size:13px; }

.dashboard-order-strip { margin-top:22px; padding:18px 20px 20px; }
.dashboard-order-strip > .section-title { margin-bottom:14px; }
.dashboard-order-strip > .section-title > div { display:flex; align-items:center; gap:8px; }
.dashboard-order-strip > .section-title h3 { font-size:17px; }
.order-section-icon { color:var(--teal); font-size:17px; }
.order-link { color:#4d79a6; background:transparent; font-size:12px; }
.dashboard-order-grid { grid-template-columns:minmax(0,1.55fr) minmax(230px,.74fr) minmax(250px,.78fr); gap:18px; }
.preview-order-list,.preview-order-detail,.preview-payment { min-width:0; padding:14px; border:1px solid #e5ebf3; border-radius:9px; background:#fff; }
.preview-tabs { display:flex; align-items:center; gap:13px; padding-bottom:10px; border-bottom:1px solid #edf1f6; }
.preview-tabs b { margin-right:auto; font-size:12px; }
.preview-tabs button { padding:4px 0; color:#8b98aa; background:transparent; font-size:11px; }
.preview-tabs button.active { color:var(--functional-blue); box-shadow:inset 0 -2px 0 var(--functional-blue); }
.preview-table-head,.preview-table-row { display:grid; grid-template-columns:1.4fr .8fr .55fr .5fr .7fr .75fr; align-items:center; gap:7px; }
.preview-table-head { min-height:34px; color:#8996a8; font-size:10px; }
.preview-table-row { width:100%; min-height:42px; border-top:1px solid #f0f3f7; color:#506078; background:transparent; text-align:left; font-size:10px; }
.preview-table-row:hover { background:#f8fbff; }
.preview-table-row strong { color:#1f3554; }
.preview-table-row em { justify-self:start; font-style:normal; }
.preview-block-title { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid #edf1f6; }
.preview-block-title b { font-size:13px; }
.preview-block-title span { color:#8c99aa; font-size:10px; }
.preview-product { display:grid; grid-template-columns:35px minmax(0,1fr) auto; align-items:center; gap:9px; padding:11px 0; border-bottom:1px solid #f0f3f7; }
.product-thumb { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:#c58b16; background:#fff2cf; }
.preview-product b,.preview-product small { display:block; }
.preview-product b { font-size:11px; }
.preview-product small { margin-top:3px; color:#98a4b4; font-size:9px; }
.preview-product strong { font-size:11px; }
.preview-total { display:flex; justify-content:space-between; padding-top:12px; font-size:13px; }
.preview-pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.preview-pay-grid button { min-height:39px; border:1px solid #d7e0ec; border-radius:7px; color:#718096; background:#fff; font-size:11px; }
.preview-pay-grid button.selected { border-color:var(--functional-blue); color:#fff; background:var(--functional-blue); }
.preview-checkout { width:100%; min-height:43px; }

.report-filter-row { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:end; gap:10px; }
.report-filter-row .seg-tabs { margin-right:auto; }
.report-filter-row label { width:180px; margin:0; }
.report-custom-range { display:flex; align-items:end; gap:8px; }
.report-custom-range label { width:155px; }
.report-custom-range > span { padding-bottom:11px; color:#7f8da0; font-size:11px; }
.report-dashboard { display:grid; grid-template-columns:1.25fr .8fr .8fr; gap:15px; margin-top:15px; }
.payment-chart-wrap { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:20px; min-height:230px; }
.payment-donut { width:170px; height:170px; display:grid; place-items:center; border-radius:50%; }
.payment-donut > div { width:105px; height:105px; display:grid; place-content:center; border-radius:50%; background:#fff; text-align:center; }
.payment-donut strong,.payment-donut small { display:block; }
.payment-donut strong { color:#1c3555; font-size:20px; }
.payment-donut small { margin-top:5px; color:#8a98a9; font-size:10px; }
.payment-legend { display:grid; gap:12px; }
.payment-legend > div { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:8px; font-size:11px; }
.payment-legend i { width:8px; height:8px; border-radius:50%; }
.rank-row { min-height:40px; display:grid; grid-template-columns:24px 1fr auto; align-items:center; }
.rank-row em { color:#e5a51f; font-style:normal; font-weight:900; }
.report-trend { margin-top:15px; }
.report-trend .hour-chart { height:210px; }

@media (max-width:920px) {
  .report-filter-row { align-items:stretch; flex-direction:column; }
  .report-filter-row .seg-tabs { width:100%; margin-right:0; overflow-x:auto; }
  .report-range-label { order:2; }
  .report-custom-range { width:100%; }
}

.booking-board { padding:18px; }
.booking-toolbar { display:flex; justify-content:space-between; align-items:end; gap:12px; }
.booking-toolbar label { width:210px; margin:0; }
.booking-times { display:flex; gap:10px; margin:16px 0; overflow-x:auto; }
.booking-times button { min-width:74px; min-height:38px; border:1px solid #dbe4ef; border-radius:7px; color:#728197; background:#fff; }
.booking-times button.active { border-color:var(--berry); color:#fff; background:var(--berry); }
.booking-summary { display:flex; justify-content:center; gap:70px; margin-top:15px; padding-top:15px; border-top:1px solid #edf1f5; color:#7d8a9e; font-size:12px; }
.booking-summary b { display:block; margin-top:5px; color:#203957; font-size:18px; text-align:center; }

.deposit-panel { padding:18px; }
.deposit-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.deposit-toolbar > span { color:#8b98aa; font-size:11px; }
.deposit-list { display:grid; gap:12px; }
.deposit-card { min-height:118px; display:grid; grid-template-columns:120px minmax(0,1fr) auto; align-items:center; gap:18px; padding:12px; border:1px solid #dce5ef; border-radius:9px; background:#fff; box-shadow:none; }
.deposit-cover { position:relative; width:110px; height:92px; display:grid; place-items:center; overflow:hidden; border-radius:8px; color:#8190a4; background:#eef3f8; }
.deposit-cover img { width:100%; height:100%; object-fit:cover; }
.deposit-cover em { position:absolute; left:6px; bottom:6px; padding:3px 7px; border-radius:5px; color:#fff; background:rgba(16,35,63,.75); font-size:10px; font-style:normal; }
.deposit-info > div { display:flex; align-items:center; gap:10px; }
.deposit-info h3 { margin:0; color:#243b59; font-size:15px; }
.deposit-info h3 small { color:#8794a6; font-size:11px; }
.deposit-info p { margin:8px 0 0; color:#7c899b; font-size:11px; }
.deposit-info p b { color:#52647b; }
.deposit-actions { display:grid; gap:8px; min-width:92px; }

.member-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:15px; align-items:start; }
.member-table-panel { overflow-x:auto; }
.member-side { display:grid; gap:14px; }
.member-gold-card { min-height:180px; padding:24px; border-radius:13px; color:#6f4c0e; background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.8),transparent 26%),linear-gradient(135deg,#ffe89d,#e9b94c); box-shadow:0 14px 28px rgba(184,130,25,.18); }
.member-gold-card span { font-size:13px; font-weight:800; }
.member-gold-card strong { display:block; margin-top:23px; font-size:24px; }
.member-gold-card p { font-size:11px; }
.member-gold-card em { display:block; margin-top:25px; font:700 9px/1.2 ui-monospace,Consolas,monospace; letter-spacing:.13em; opacity:.65; }
.member-side-stats h3 { margin:0 0 10px; font-size:15px; }
.member-side-stats > div { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid #edf1f5; color:#718096; font-size:11px; }
.member-side-stats b { color:#263c58; }

.settings-tabs { margin-bottom:15px; }
.settings-tabs button { min-height:42px; padding-inline:20px; }
.goods-card { border-radius:9px; }

/* Order checkout: permanent three-column layout from the approved all-pages board. */
.exact-order-layout { grid-template-columns:minmax(260px,310px) minmax(520px,1fr) minmax(260px,300px); gap:15px; align-items:stretch; }
.exact-order-layout > .panel { min-width:0; border-radius:10px; box-shadow:0 8px 24px rgba(17,45,78,.06); }
.order-list-panel { display:flex; min-height:640px; flex-direction:column; padding:16px; }
.order-list-panel { max-height:calc(100vh - 170px); }
.order-list-heading,.order-detail-head,.order-items-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.order-list-heading { margin-bottom:13px; }
.order-list-heading h3,.order-payment-side h3,.order-items-heading h4 { margin:3px 0 0; color:#173454; }
.order-list-heading h3,.order-payment-side h3 { font-size:17px; }
.order-list-heading > span { color:#8b98aa; font-size:11px; }
.order-status-tabs { width:100%; margin-bottom:12px; }
.order-status-tabs button { flex:1; }
.order-status-tabs b { display:inline-grid; min-width:19px; height:19px; place-items:center; margin-left:4px; border-radius:10px; color:inherit; background:rgba(36,123,229,.1); font-size:9px; }
.order-status-tabs button.active b { background:rgba(255,255,255,.22); }
.order-list { flex:1; max-height:none; gap:8px; padding-right:2px; }
.order-list-item { min-height:86px; padding:12px 11px; border-color:#e5ebf2; border-radius:8px; background:#fff; }
.order-list-item:hover { border-color:#aacdf4; background:#f8fbff; }
.order-list-item.active { border-color:#74adeb; background:#eef6ff; box-shadow:inset 3px 0 0 var(--functional-blue); }
.order-list-main { min-width:0; }
.order-list-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.order-list-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.order-list-main em { color:#a2adba; font-size:9px; font-style:normal; }
.order-list-value { align-content:start; justify-items:end; }
.order-list-value > b { color:#243c5a; font-size:13px; }
.order-list-value .tag { min-height:21px; padding:2px 7px; font-size:9px; }
.order-empty { margin:auto 0; }

.order-detail { min-height:640px; padding:18px; }
.order-detail-head { padding-bottom:15px; border-bottom:1px solid #edf1f5; }
.order-title-line { display:flex; align-items:center; gap:9px; margin-top:3px; }
.order-title-line h3 { margin:0; color:#173454; font-size:19px; }
.order-detail-head p { margin:6px 0 0; color:#94a0b0; font-size:10px; }
.order-head-actions { display:flex; align-items:center; gap:7px; }
.order-head-actions .btn { min-height:34px; }
.order-head-actions .icon-btn { width:34px; height:34px; }
.order-summary-grid { gap:8px; margin:15px 0 18px; }
.order-summary-grid > div { min-height:68px; padding:11px 12px; border-color:#e5ebf2; border-radius:7px; background:#f8fafc; }
.order-summary-grid span { font-size:10px; }
.order-summary-grid strong { color:#223b59; font-size:13px; }
.order-summary-grid > div:last-child { background:#fff5f8; }
.order-summary-grid > div:last-child strong { color:var(--berry); font-size:16px; }
.order-items-heading { margin-bottom:10px; }
.order-items-heading h4 { font-size:14px; }
.order-items-heading .btn { min-height:34px; }
.order-table-wrap { overflow:auto; border:1px solid #e4ebf3; border-radius:8px; }
.order-items-table { min-width:560px; border:0; border-radius:0; }
.order-items-table th { height:38px; padding:9px 10px; font-size:10px; }
.order-items-table td { height:52px; padding:9px 10px; font-size:11px; }
.order-items-table td:first-child { min-width:150px; }
.order-product-icon { width:30px; height:30px; display:inline-grid; place-items:center; margin-right:8px; border-radius:7px; color:#ce9a28; background:#fff3d6; vertical-align:middle; }
.order-items-table tr:nth-child(even) .order-product-icon { color:#2f9f8d; background:#e8faf5; }
.danger-icon { border-color:#f6ccd4; color:var(--danger); background:#fff3f5; }
.order-detail-footer { display:flex; justify-content:space-between; align-items:center; min-height:62px; padding:10px 2px; border-bottom:1px solid #edf1f5; color:#8996a7; font-size:10px; }
.order-detail-footer > div { display:flex; align-items:baseline; gap:12px; }
.order-detail-footer strong { color:#203a59; font-size:21px; }
.order-secondary-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:15px; }
.order-secondary-actions .btn { min-height:36px; }
.payment-summary { display:flex; flex-wrap:wrap; gap:8px; padding:14px; }
.payment-summary span { padding:6px 9px; border-radius:6px; background:#fff; }

.order-payment-side { min-height:640px; padding:18px; }
.payment-side-head { padding-bottom:15px; border-bottom:1px solid #edf1f5; }
.payment-side-head p { margin:7px 0 0; color:#8a98aa; font-size:10px; line-height:1.6; }
.payment-amount-card { margin:15px 0; padding:17px 15px; border:1px solid #f3d6df; border-radius:9px; background:linear-gradient(145deg,#fff,#fff4f7); }
.payment-amount-card > span,.payment-amount-card > small { display:block; color:#8c98a9; font-size:10px; }
.payment-amount-card strong { display:block; margin:7px 0; color:var(--berry); font-size:27px; }
.payment-amount-card.completed { border-color:#bee8de; background:linear-gradient(145deg,#fff,#effbf8); }
.payment-amount-card.completed strong { color:var(--teal); }
.payment-method-title { margin-bottom:9px; color:#344b67; font-size:11px; font-weight:800; }
.order-pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.order-pay-grid button { min-height:60px; display:flex; align-items:center; gap:8px; padding:9px; border:1px solid #dce5ef; border-radius:7px; color:#6f7f94; background:#fff; text-align:left; font-size:10px; }
.order-pay-grid button:hover { border-color:#8ebced; background:#f7fbff; }
.order-pay-grid button.selected { border-color:#438fe0; color:#1f6dbb; background:#edf6ff; box-shadow:inset 0 0 0 1px #8abcf0; }
.order-pay-grid i { width:27px; height:27px; display:grid; place-items:center; flex:0 0 auto; border-radius:7px; color:#fff; background:#3d91df; font-size:10px; font-style:normal; font-weight:900; }
.order-pay-grid button:nth-child(2) i { background:#247be5; }
.order-pay-grid button:nth-child(3) i { background:#e2a524; }
.order-pay-grid button:nth-child(4) i { background:#18a88e; }
.payment-tip { display:grid; gap:4px; margin:15px 0; padding:11px; border-radius:7px; color:#758399; background:#f4f7fa; }
.payment-tip b { color:#43566f; font-size:10px; }
.payment-tip span { font-size:9px; line-height:1.55; }
.order-checkout-main { width:100%; min-height:47px; margin-top:5px; border-radius:7px; }
.order-refund-main { width:100%; min-height:39px; margin-top:9px; }
.paid-method-list { display:grid; margin:4px 0 15px; }
.paid-method-list > div { display:flex; justify-content:space-between; padding:11px 2px; border-bottom:1px solid #edf1f5; color:#758399; font-size:11px; }
.paid-method-list b { color:#29415d; }

@media (max-width: 1450px) {
  .dashboard-layout { grid-template-columns:minmax(0,1fr) 290px; }
  .dashboard-order-grid { grid-template-columns:minmax(0,1.35fr) minmax(210px,.7fr) minmax(230px,.75fr); gap:12px; }
  .preview-table-head,.preview-table-row { grid-template-columns:1.3fr .7fr .5fr .45fr .65fr .7fr; }
  .exact-order-layout { grid-template-columns:minmax(240px,280px) minmax(470px,1fr) 260px; gap:12px; }
}
@media (max-width: 1280px) {
  .workspace-topbar { min-height:68px; }
  .workspace-main { padding:22px 18px 50px; }
  .dashboard-layout { grid-template-columns:1fr; }
  .activity-panel:not(.compact) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:static; }
  .activity-panel:not(.compact) .section-title { grid-column:1/-1; }
  .dashboard-order-grid { grid-template-columns:1fr 1fr; }
  .preview-order-list { grid-column:1/-1; }
  .report-dashboard { grid-template-columns:1.2fr 1fr; }
  .report-dashboard > :last-child { grid-column:1/-1; }
  .exact-order-layout { grid-template-columns:280px minmax(0,1fr); }
  .order-payment-side { grid-column:1/-1; min-height:0; }
  .order-payment-side { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .payment-side-head,.order-checkout-main,.order-refund-main { grid-column:1/-1; }
  .payment-amount-card { margin:0; }
  .payment-tip { margin:0; }
}
@media (max-width: 920px) {
  .topbar.page-heading h2 { font-size:27px; }
  .station-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-order-grid,.report-dashboard,.member-layout,.exact-order-layout { grid-template-columns:1fr; }
  .preview-order-list { grid-column:auto; }
  .report-dashboard > :last-child { grid-column:auto; }
  .payment-chart-wrap { grid-template-columns:150px 1fr; }
  .payment-donut { width:145px; height:145px; }
  .order-list-panel,.order-detail,.order-payment-side { min-height:0; }
  .order-list { max-height:420px; }
}
@media (max-width: 640px) {
  .workspace-main { padding:16px 10px 40px; }
  .topbar.page-heading { min-height:0; }
  .topbar.page-heading .actions .btn { min-height:38px; padding-inline:13px; font-size:12px; }
  .operation-kpis .metric { min-height:112px; padding:16px 14px; }
  .operation-kpis .metric span { padding-left:0; }
  .operation-kpis .metric::after { display:none; }
  .station-grid { grid-template-columns:1fr; }
  .station-card { min-height:188px; }
  .activity-panel:not(.compact) { grid-template-columns:1fr; }
  .activity-panel:not(.compact) .section-title { grid-column:auto; }
  .preview-table-head { display:none; }
  .preview-table-row { grid-template-columns:1fr auto; gap:4px; padding:9px; border:1px solid #edf1f5; border-radius:7px; }
  .preview-table-row span:nth-child(2),.preview-table-row span:nth-child(3),.preview-table-row span:nth-child(4) { display:none; }
  .payment-chart-wrap { grid-template-columns:1fr; justify-items:center; }
  .booking-toolbar { align-items:stretch; flex-direction:column; }
  .booking-toolbar label { width:100%; }
  .booking-summary { gap:28px; }
  .deposit-card { grid-template-columns:82px minmax(0,1fr); gap:11px; }
  .deposit-cover { width:78px; height:78px; }
  .deposit-actions { grid-column:1/-1; display:flex; }
  .deposit-actions .btn { flex:1; }
  .order-payment-side { display:block; }
  .payment-amount-card { margin:14px 0; }
  .payment-tip { margin:14px 0; }
  .order-summary-grid { grid-template-columns:1fr 1fr; }
  .order-detail-head { align-items:flex-start; }
  .order-head-actions { flex-wrap:wrap; justify-content:flex-end; }
  .order-secondary-actions { justify-content:stretch; }
  .order-secondary-actions .btn { flex:1; padding-inline:8px; }
}

/* V2.2.2 interaction, navigation and compact seat-board fixes. */
body.theme-sakura { --canvas:#f3f6fb; --seat-board-bg:#edf3f9; }
body.theme-candy { --canvas:#fff5f9; --seat-board-bg:#fcebf2; }
body.theme-twilight { --canvas:#eef0fb; --seat-board-bg:#e5e8f8; }
body.theme-pixel { --canvas:#f3f1fa; --seat-board-bg:#eae6f6; }

* { scrollbar-width:thin; scrollbar-color:#afbed0 transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { border-radius:8px; background:transparent; }
*::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:8px; background:#afbed0; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:#8296ad; background-clip:padding-box; }

.workspace-shell { --sidebar-width:clamp(246px,17vw,300px); grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.workspace-shell.sidebar-collapsed { --sidebar-width:78px; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.workspace-sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); height:100dvh; align-self:start; }
.workspace-stage { grid-column:2; }
.workspace-tabs { min-height:0; flex:1; align-content:start; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:rgba(255,255,255,.28) transparent; }
.workspace-tabs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.28); background-clip:padding-box; }
.sidebar-beads { flex:0 1 190px; }

.dashboard-overview-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; margin-top:16px; align-items:start; }
.dashboard-seat-overview { min-height:100%; }
.seat-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.seat-overview-grid > button { min-height:86px; display:grid; grid-template-columns:13px minmax(0,1fr) auto; align-items:center; gap:11px; padding:13px 15px; border:1px solid var(--border); border-radius:9px; color:inherit; background:#fff; text-align:left; transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease; }
.seat-overview-grid > button:hover { border-color:#9fc2e7; transform:translateY(-1px); box-shadow:0 8px 18px rgba(25,52,87,.08); }
.seat-overview-grid b,.seat-overview-grid small { display:block; }
.seat-overview-grid b { color:#2b405c; font-size:13px; }
.seat-overview-grid small { margin-top:5px; color:#96a2b1; font-size:10px; }
.seat-overview-grid strong { color:#1f3858; font-size:25px; }
.seat-overview-dot { width:10px; height:10px; border-radius:50%; background:#9baabd; }
.seat-overview-dot.green { background:var(--teal); }
.seat-overview-dot.blue { background:var(--functional-blue); }
.seat-overview-dot.amber { background:var(--gold); }
.seat-overview-dot.red { background:var(--danger); }
.seat-overview-dot.purple { background:#7b61d1; }

.seat-board-page { display:grid; gap:12px; }
.station-board-surface { min-height:calc(100vh - 245px); padding:16px; border:1px solid color-mix(in srgb,var(--functional-blue) 10%,var(--border)); border-radius:12px; background:var(--seat-board-bg); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.station-board-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.station-board-head h3 { margin:0; color:var(--text); font-size:17px; }
.station-board-surface .station-grid { grid-template-columns:repeat(auto-fill,minmax(172px,190px)); justify-content:start; gap:11px; }
.station-board-surface .station-card { width:100%; min-height:0; aspect-ratio:1 / 1; padding:11px; border-width:1px; border-top-width:2px; border-radius:9px; }
.station-board-surface .station-card-head strong { font-size:16px; }
.station-board-surface .station-card-head > div { gap:6px; }
.station-board-surface .station-card-head > div > span { font-size:10px; }
.station-board-surface .station-card-head .tag { min-height:22px; padding:2px 7px; font-size:9px; }
.station-board-surface .station-quick { margin-top:11px; font-size:10px; }
.station-board-surface .station-quick strong { font-size:11px; }
.station-board-surface .station-time { min-height:28px; margin-top:3px; grid-template-columns:15px 1fr auto; }
.station-board-surface .station-time b { font-size:13px; }
.station-board-surface .station-time em { font-size:10px; }
.station-board-surface .station-actions { grid-template-columns:1fr 1fr 36px; gap:5px; padding-top:8px; }
.station-board-surface .station-actions .btn { min-height:31px; padding-inline:6px; font-size:10px; }
.station-board-surface .station-more-menu { right:9px; bottom:48px; }

.report-range-label,.booking-range-hint { color:#7f8da0; font-size:10px; }
.booking-range-hint { margin:10px 0 -4px; }
.deposit-detail > div { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; padding:15px; border-radius:9px; color:#68788e; background:#edf5ff; }
.deposit-detail > div strong { color:var(--functional-blue); font-size:25px; letter-spacing:.16em; }
.deposit-detail dl { display:grid; grid-template-columns:90px minmax(0,1fr); margin:0; }
.deposit-detail dt,.deposit-detail dd { margin:0; padding:10px 0; border-bottom:1px solid #edf1f5; font-size:12px; }
.deposit-detail dt { color:#8a97a8; }
.deposit-detail dd { color:#354b67; }
label small { display:block; margin-top:5px; color:#96a2b2; font-size:9px; line-height:1.5; }

@media (max-width:1280px) {
  .dashboard-overview-layout { grid-template-columns:1fr; }
  .dashboard-overview-layout > .activity-panel { position:static; }
}
@media (max-width:920px) {
  .workspace-shell,.workspace-shell.sidebar-collapsed { display:block; }
  .workspace-stage { grid-column:auto; }
  .workspace-sidebar { width:min(270px,84vw); }
  .sidebar-beads { flex:1; }
  .station-board-surface .station-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}
@media (max-width:640px) {
  .seat-overview-grid { grid-template-columns:1fr 1fr; }
  .seat-overview-grid > button { min-height:76px; padding:10px; grid-template-columns:9px minmax(0,1fr) auto; gap:7px; }
  .seat-overview-grid small { display:none; }
  .seat-overview-grid strong { font-size:20px; }
  .station-board-surface { padding:9px; }
  .station-board-surface .station-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .station-board-surface .station-card { aspect-ratio:1 / 1; padding:8px; }
  .station-board-surface .station-card-head > div > span { display:none; }
  .station-board-surface .station-quick { margin-top:8px; }
  .station-board-surface .station-time em { display:none; }
  .station-board-surface .station-actions { grid-template-columns:1fr 1fr 30px; gap:4px; }
  .station-board-surface .station-actions .btn { min-height:29px; padding-inline:3px; font-size:9px; }
  .report-filter-row label,.report-custom-range label { width:100%; }
  .report-custom-range { align-items:center; width:100%; }
  .report-custom-range > span { flex:0 0 auto; padding:20px 0 0; }
}

/* V2.2.5 button containment and soft seat states.  The free state and the
   approved light-card visual language remain unchanged. */
.actions, .topbar.page-heading .actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-width:0; }
.actions .btn, .topbar.page-heading .actions .btn { max-width:100%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.station-more-menu { max-width:calc(100% - 18px); overflow:hidden; }
.station-more-menu button { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.station-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px; min-width:0; }
.station-actions .btn { min-width:0; max-width:100%; padding-inline:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.station-card.soon { border-color:#e9ae36 !important; background:linear-gradient(145deg,#fff,#fffaf0) !important; color:#253a58; }
.station-card.overdue { border-color:#e68a98 !important; background:linear-gradient(145deg,#fff,#fff5f7) !important; color:#253a58; }
.station-card.occupied { border-color:#3ac1a2 !important; background:linear-gradient(145deg,#fff,#f7fffc) !important; color:#253a58; }
.station-card.paused { border-color:#9a83dc !important; background:linear-gradient(145deg,#fff,#f8f5ff) !important; color:#253a58; }
.station-card.reserved { border-color:#6aa9df !important; background:linear-gradient(145deg,#fff,#f4f9ff) !important; color:#253a58; }
.station-card.maintenance { border-color:#9ba7b6 !important; background:linear-gradient(145deg,#fff,#f5f7fa) !important; color:#253a58; }
.station-card.soon .station-card-head strong,.station-card.overdue .station-card-head strong,.station-card.occupied .station-card-head strong,.station-card.paused .station-card-head strong,.station-card.reserved .station-card-head strong,.station-card.maintenance .station-card-head strong,
.station-card.soon .station-card-head > div > span,.station-card.overdue .station-card-head > div > span,.station-card.occupied .station-card-head > div > span,.station-card.paused .station-card-head > div > span,.station-card.reserved .station-card-head > div > span,.station-card.maintenance .station-card-head > div > span { color:#132645 !important; }
.station-card.soon .station-quick,.station-card.overdue .station-quick,.station-card.occupied .station-quick,.station-card.paused .station-quick,.station-card.reserved .station-quick,.station-card.maintenance .station-quick,
.station-card.soon .station-time,.station-card.overdue .station-time,.station-card.occupied .station-time,.station-card.paused .station-time,.station-card.reserved .station-time,.station-card.maintenance .station-time { color:#8b99ad !important; }
.station-card.soon .station-time b,.station-card.overdue .station-time b,.station-card.occupied .station-time b,.station-card.paused .station-time b,.station-card.reserved .station-time b,.station-card.maintenance .station-time b { color:#253a58 !important; }
.station-card.soon .station-time em,.station-card.soon .station-quick strong { color:#b67b11 !important; }
.station-card.overdue .station-time em,.station-card.overdue .station-quick strong { color:#c13e59 !important; }
.station-card.occupied .station-time em,.station-card.occupied .station-quick strong { color:var(--teal) !important; }
.station-card.paused .station-time em,.station-card.paused .station-quick strong { color:#7758c9 !important; }
.station-card.reserved .station-time em,.station-card.reserved .station-quick strong { color:#347bb6 !important; }
.station-card.maintenance .station-time em,.station-card.maintenance .station-quick strong { color:#687789 !important; }
.station-card.soon .station-actions,.station-card.overdue .station-actions,.station-card.occupied .station-actions,.station-card.paused .station-actions,.station-card.reserved .station-actions,.station-card.maintenance .station-actions { border-top-color:#e6edf4; }
.station-card.soon .station-actions .btn,.station-card.overdue .station-actions .btn,.station-card.occupied .station-actions .btn,.station-card.paused .station-actions .btn,.station-card.reserved .station-actions .btn,.station-card.maintenance .station-actions .btn { border-color:#cad7e6 !important; color:#34465e !important; background:#fff !important; box-shadow:none !important; }
.station-card.soon .station-actions .btn.frequent,.station-card.overdue .station-actions .btn.frequent,.station-card.occupied .station-actions .btn.frequent,.station-card.paused .station-actions .btn.frequent,.station-card.reserved .station-actions .btn.frequent,.station-card.maintenance .station-actions .btn.frequent { border-color:#247be5 !important; color:#fff !important; background:linear-gradient(180deg,#2f89ec,#2474ca) !important; }
.station-card.soon .tag,.station-card.overdue .tag,.station-card.occupied .tag,.station-card.paused .tag,.station-card.reserved .tag,.station-card.maintenance .tag { border:1px solid #d8e2ee; color:#53657c !important; background:#f2f6fa !important; }
.station-card .station-card-head .tag { min-height:25px; padding:3px 11px; border-radius:12px; font-weight:800; }
.station-card.occupied .station-card-head .tag { border-color:#075c50 !important; color:#fff !important; background:#087f6e !important; }
.station-card.reserved .station-card-head .tag { border-color:#6b3d24 !important; color:#fff !important; background:#7b4528 !important; }
.station-card.soon .station-card-head .tag { border-color:#a76400 !important; color:#fff !important; background:#c47c08 !important; }
.station-card.overdue .station-card-head .tag { border-color:#7b1f35 !important; color:#fff !important; background:#a92d49 !important; }
.station-card.paused .station-card-head .tag { border-color:#44318f !important; color:#fff !important; background:#5b4bb7 !important; }
.station-card.maintenance .station-card-head .tag { border-color:#303b49 !important; color:#fff !important; background:#475569 !important; }

/* V2.2.3 order filters, member details and responsive table fixes. */
.workspace-shell.sidebar-collapsed { --sidebar-width:96px; }
.sidebar-collapsed .workspace-tabs { padding-inline:12px; }
.sidebar-collapsed .workspace-tabs button { width:68px; min-height:52px; margin:4px auto; padding:0; border-radius:12px; display:grid; grid-template-columns:1fr; justify-items:center; align-content:center; gap:4px; }
.sidebar-collapsed .workspace-tabs button > span { display:grid; place-items:center; width:28px; height:28px; font-size:21px; line-height:1; }
.sidebar-collapsed .workspace-tabs button.active { box-shadow:0 8px 18px rgba(20,42,72,.2); }
.sidebar-collapsed .workspace-brand .brand-mark { width:48px; height:48px; flex-basis:48px; font-size:20px; }
.sidebar-collapsed .sidebar-user { padding-inline:14px; }
.sidebar-collapsed .sidebar-user .user-avatar { width:42px; height:42px; font-size:16px; }
@media (min-width:921px) and (max-width:1280px) {
  .workspace-shell.sidebar-collapsed { grid-template-columns:96px minmax(0,1fr); }
}
.order-history-filter { display:grid; gap:7px; margin:10px 0 12px; padding:10px; border:1px solid #e3eaf2; border-radius:8px; background:#f8fafc; }
.order-history-filter label { display:grid; gap:5px; color:#7c8a9d; font-size:10px; }
.order-history-filter select,.order-history-filter input { min-height:34px; font-size:11px; }
.order-history-filter > div { display:flex; align-items:center; gap:6px; }
.order-history-filter > div input { flex:1; min-width:0; }
.order-history-filter small { color:#96a2b2; font-size:10px; }
.member-row-button { display:grid; gap:3px; padding:0; color:inherit; background:transparent; text-align:left; }
.member-row-button small { color:#96a2b2; font-size:10px; }
#memberGrid tbody tr.selected { background:#edf5ff; box-shadow:inset 3px 0 0 var(--functional-blue); }
.member-level-card { min-height:180px; padding:24px; border-radius:13px; color:#6f4c0e; background:linear-gradient(135deg,#ffe89d,#e9b94c); box-shadow:0 14px 28px rgba(184,130,25,.18); }
.member-level-card.normal { color:#fff; background:linear-gradient(135deg,#4b9cf0,#2465c7); box-shadow:0 14px 28px rgba(36,101,199,.24); }
.member-level-card.gold { background:radial-gradient(circle at 85% 18%,rgba(255,255,255,.85),transparent 24%),linear-gradient(135deg,#ffe89d,#e3ae32); }
.member-level-card.silver { color:#455264; background:linear-gradient(135deg,#f5f7fa,#aeb9c6); box-shadow:0 14px 28px rgba(103,119,138,.2); }
.member-level-card.diamond { color:#fff; background:radial-gradient(circle at 75% 20%,rgba(255,255,255,.9),transparent 13%),linear-gradient(135deg,#5c78e9,#bd52cf 54%,#f4b8ff); box-shadow:0 14px 34px rgba(103,82,214,.28); }
.member-level-card span { font-size:13px; font-weight:800; }
.member-level-card strong { display:block; margin-top:23px; font-size:24px; }
.member-level-card p { font-size:11px; }
.member-level-card em { display:block; margin-top:25px; font:700 9px/1.2 ui-monospace,Consolas,monospace; letter-spacing:.13em; opacity:.65; }
.member-detail-panel { display:grid; gap:12px; }
.member-detail-list { display:grid; }
.member-detail-list > div { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid #edf1f5; color:#7b899b; font-size:11px; }
.member-detail-list b { color:#29415d; text-align:right; }
.member-detail-actions { display:flex; gap:8px; }
.member-detail-actions .btn { flex:1; }
.billing-rule-inline { display:flex; align-items:center; gap:15px; margin:0 0 12px; padding:10px 12px; border-radius:8px; color:#758399; background:#f4f8fc; font-size:11px; }
.billing-rule-inline b { color:#26415f; }
.billing-rule-inline .btn { margin-left:auto; min-height:30px; }
table { min-width:680px; }
.member-table-panel table { min-width:820px; }
.inventory-main table { min-width:760px; }
.booking-board table { min-width:900px; }
.settings-tabs,.seg-tabs,.filter-group,.booking-times { scrollbar-width:thin; }
@media (max-width:920px) {
  .member-layout { grid-template-columns:1fr; }
  .member-side { grid-template-columns:1fr 1fr; }
  .member-side > :last-child { grid-column:1/-1; }
  .member-table-panel { overflow-x:auto; }
  .order-list-panel { min-height:0; max-height:none; }
}
@media (max-width:640px) {
  .member-side { grid-template-columns:1fr; }
  .member-side > :last-child { grid-column:auto; }
  .billing-rule-inline { align-items:flex-start; flex-wrap:wrap; gap:7px 12px; }
  .billing-rule-inline .btn { margin-left:0; }
  .order-history-filter > div { flex-wrap:wrap; }
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* V2.2.6 mobile detail overflow containment.  Keep horizontal scrolling on
   the table/detail surface itself instead of allowing a wide child to create
   a blank page area to the right of the phone or tablet viewport. */
@media (max-width:920px) {
  html,
  body,
  #app {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .workspace-shell,
  .workspace-stage,
  .workspace-main,
  .order-workbench,
  .exact-order-layout,
  .member-layout,
  .inventory-layout,
  .workspace-topbar {
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .workspace-stage,
  .workspace-main {
    overflow-x:hidden;
  }

  .exact-order-layout > .panel,
  .order-list-panel,
  .order-detail,
  .order-payment-side,
  .member-table-panel,
  .inventory-main,
  .booking-board {
    width:100%;
    min-width:0;
    max-width:100%;
  }

  /* Stack payment controls on tablets as well; the desktop two-column
     payment grid otherwise leaves a wide, visually empty second track. */
  .order-payment-side {
    display:block;
  }

  .order-detail-head > div:first-child,
  .order-title-line,
  .order-items-heading,
  .order-detail-footer,
  .payment-side-head,
  .order-secondary-actions {
    min-width:0;
    max-width:100%;
  }

  .order-detail-head > div:first-child {
    flex:1 1 auto;
    overflow:hidden;
  }

  .order-title-line h3,
  .order-detail-head p,
  .order-items-heading h4 {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .order-head-actions,
  .order-secondary-actions {
    flex-wrap:wrap;
  }

  .order-table-wrap,
  .member-table-panel,
  .inventory-main,
  .booking-board {
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* The outer wrappers own horizontal scrolling. Keeping the table as a
     table avoids an extra nested scroller and the white strip it can expose. */
  .order-table-wrap table,
  .member-table-panel table,
  .inventory-main table,
  .booking-board table {
    display:table;
    width:max-content;
    max-width:none;
  }

  .order-table-wrap table { min-width:560px; }
  .member-table-panel table { min-width:820px; }
  .inventory-main table { min-width:760px; }
  .booking-board table { min-width:900px; }

  .modal-backdrop {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .modal,
  .modal form,
  .modal header,
  .modal footer {
    min-width:0;
    max-width:100%;
  }

  .modal .body {
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:640px) {
  .workspace-main { padding-inline:10px; }
  .order-summary-grid { grid-template-columns:1fr; }
  .order-head-actions .btn,
  .order-secondary-actions .btn {
    min-width:0;
    max-width:100%;
  }
  .order-detail-footer {
    align-items:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }
  .modal { width:100%; max-height:92vh; }
}

/* V2.2.9 order opening form: separate guest/member controls and pricing
   mode-specific options. */
.order-open-form .order-member-picker { min-width:0; }
.order-member-picker input[list] { width:100%; }
.order-open-form > label { min-width:0; }
.order-open-form > label > input,
.order-open-form > label > select,
.order-open-form .order-member-picker input[list] { width:100%; min-width:0; }
.order-open-form .order-member-picker { align-content:start; }
.order-member-picker small { display:block; margin-top:5px; color:#8b98aa; font-size:10px; line-height:1.4; }
.order-pricing-option { align-content:start; }
.order-billing-link { grid-column:1/-1; justify-self:start; min-height:30px; padding-inline:10px; color:var(--functional-blue); }
.order-pricing-option[hidden] { display:none !important; }
table td.actions { min-width:0; max-width:100%; white-space:normal; }
table td.actions .btn { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.settings-tabs + section.panel table td:last-child { width:1%; white-space:nowrap; }
.grid.cols-2 .panel table td:last-child { width:1%; white-space:nowrap; }
.grid.cols-2 .panel table { width:100%; min-width:0; table-layout:fixed; }
.grid.cols-2 .panel table td { overflow:hidden; text-overflow:ellipsis; }
.grid.cols-2 .panel table td.actions { width:auto; white-space:normal; }
.grid.cols-2 .panel table td.actions .btn { display:inline-flex; align-items:center; justify-content:center; margin:2px 0; }
/* Keep table actions on one line. The last-cell rule also covers legacy
   rows that did not yet include the actions class. */
table td.actions,
table td:last-child:has(.btn) { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:6px; width:auto !important; min-width:max-content; white-space:nowrap !important; }
table td.actions .btn,
table td:last-child:has(.btn) .btn { display:inline-flex; flex:0 0 auto; margin:0; }
/* Settings tables have a narrow operation column; force its controls into a
   single horizontal action row. */
.settings-tabs + section.panel table td.actions,
.grid.cols-2 .panel table td.actions,
.inventory-main table td.actions { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center; justify-content:flex-start; gap:6px; width:auto !important; min-width:max-content; white-space:nowrap !important; }
.settings-tabs + section.panel table td.actions .btn,
.grid.cols-2 .panel table td.actions .btn,
.inventory-main table td.actions .btn { display:inline-flex !important; flex:0 0 auto; margin:0 !important; }
.booking-status-filter { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:10px 0; padding:8px 10px; border:1px solid #e3eaf2; border-radius:8px; background:#f8fafc; }
.booking-status-filter b { margin-right:4px; color:#53657c; font-size:11px; }
.inventory-filter-buttons { display:flex; gap:5px; margin-left:8px; }
.inventory-filter-buttons .filter-chip { min-height:26px; padding-inline:9px; font-size:10px; }
.package-type-manager { display:grid; gap:10px; margin:12px 0 15px; padding:11px 12px; border:1px solid #e1e9f2; border-radius:8px; background:#f8fafc; }
.package-type-manager > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.package-type-manager small { color:#8b98aa; font-size:10px; }
.package-type-list { display:flex; flex-wrap:wrap; gap:7px; }
.package-type-chip { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:0 6px 0 10px; border:1px solid #d8e2ee; border-radius:6px; color:#40536d; background:#fff; font-size:11px; }
.package-type-chip button { min-height:22px; padding:0 5px; border-radius:4px; color:#247be5; background:#edf5ff; font-size:10px; }
.package-type-chip button:last-child { color:#c13e59; background:#fff0f1; }
.material-log-form label { min-width:0; }
.material-log-form input[list] { width:100%; min-width:0; }
.material-log-form small { display:block; margin-top:5px; color:#8b98aa; font-size:10px; }
@media (max-width:640px) {
  .order-open-form { grid-template-columns:1fr; }
  .order-billing-link { width:100%; }
}

/* V2.2.15 unified navigation behavior across desktop, tablets and phone
   orientations. The sidebar is full-label on pointer devices and becomes a
   consistent drawer on touch widths. */
@media (min-width:921px) {
  .workspace-shell { --sidebar-width:clamp(232px,22vw,286px); grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-shell.sidebar-collapsed { --sidebar-width:88px; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-sidebar { width:var(--sidebar-width); }
  .workspace-sidebar .workspace-brand > span:last-child,
  .workspace-sidebar .workspace-tabs button > b,
  .workspace-sidebar .workspace-tabs .nav-badge,
  .workspace-sidebar .sidebar-user > span:nth-child(2) { display:block; }
  .workspace-tabs { padding-inline:12px; }
  .workspace-tabs button { grid-template-columns:30px minmax(0,1fr) auto; justify-items:stretch; padding-inline:13px; }
  .sidebar-collapsed .workspace-brand > span:last-child,
  .sidebar-collapsed .workspace-tabs button > b,
  .sidebar-collapsed .workspace-tabs .nav-badge,
  .sidebar-collapsed .sidebar-user > span:nth-child(2) { display:none; }
  .sidebar-collapsed .workspace-tabs button { width:68px; grid-template-columns:1fr; justify-items:center; padding:0; margin:4px auto; }
  .sidebar-collapsed .workspace-tabs button > span { width:28px; height:28px; font-size:21px; }
}
@media (max-width:920px) {
  .workspace-shell,
  .workspace-shell.sidebar-collapsed { display:block; min-height:100dvh; }
  .workspace-stage { width:100%; min-width:0; }
  .workspace-sidebar { width:min(300px,86vw); height:100dvh; position:fixed; transform:translateX(-105%); transition:transform .22s ease; }
  .workspace-sidebar.mobile-open { transform:translateX(0); }
  .workspace-tabs { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px; }
  .workspace-tabs button { grid-template-columns:30px minmax(0,1fr) auto; min-height:44px; padding-inline:12px; }
  .workspace-sidebar .workspace-brand > span:last-child,
  .workspace-sidebar .workspace-tabs button > b,
  .workspace-sidebar .workspace-tabs .nav-badge,
  .workspace-sidebar .sidebar-user > span:nth-child(2) { display:block; }
  .workspace-topbar { width:100%; min-width:0; gap:clamp(7px,2vw,14px); padding-inline:clamp(10px,3vw,22px); }
  .workspace-location { min-width:0; flex:1 1 auto; }
  .workspace-location strong,.workspace-location small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .workspace-date { flex:0 1 auto; min-width:0; padding-left:clamp(8px,2vw,20px); }
  .workspace-date strong { white-space:nowrap; }
  .workspace-top-actions { flex:0 0 auto; gap:6px; }
  .top-user-btn > span:last-child { display:none; }
}
@media (max-width:640px) {
  .workspace-topbar { min-height:58px; }
  .workspace-location > span,.workspace-date > span { font-size:15px; }
  .workspace-date { display:none; }
  .workspace-top-actions .icon-btn { width:34px; height:34px; }
}
@media (orientation:landscape) and (max-width:920px) and (max-height:620px) {
  .workspace-sidebar { width:min(280px,48vw); }
  .workspace-topbar { min-height:54px; }
  .workspace-main { padding-top:16px; }
}

/* V2.2.16 navigation width and responsive spacing refinement.
   Keep the menu content aligned with the drawer edge so the right side of
   the navigation does not become an unused blank column. */
.workspace-sidebar,
.workspace-tabs,
.workspace-tabs button { box-sizing:border-box; }
.workspace-tabs { width:100%; }
.workspace-tabs button { width:100%; min-width:0; }

@media (min-width:921px) {
  .workspace-shell { --sidebar-width:clamp(208px,20vw,260px); grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-shell.sidebar-collapsed { --sidebar-width:84px; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-sidebar { width:var(--sidebar-width); }
  .sidebar-brand-row { gap:6px; padding-inline:clamp(10px,1.3vw,18px); }
  .workspace-brand { gap:clamp(8px,1vw,12px); }
  .sidebar-collapse { width:30px; height:30px; flex-basis:30px; }
  .workspace-tabs { padding-inline:clamp(9px,1.1vw,14px); }
  .workspace-tabs button { padding-inline:clamp(10px,1.15vw,14px); }
  .sidebar-collapsed .workspace-tabs { padding-inline:8px; }
  .sidebar-collapsed .workspace-tabs button { width:68px; margin-inline:auto; }
}

@media (max-width:920px) {
  .workspace-sidebar { width:min(260px,82vw); }
  .sidebar-brand-row { padding-inline:clamp(12px,4vw,18px); }
  .workspace-tabs { padding-inline:clamp(10px,3.5vw,14px); }
  .workspace-tabs button { width:100%; padding-inline:clamp(11px,3.5vw,14px); }
  .mobile-sidebar-mask { backdrop-filter:blur(1px); }
}

@media (max-width:640px) {
  .workspace-sidebar { width:min(236px,84vw); }
  .workspace-tabs { padding-inline:10px; gap:5px; }
  .workspace-tabs button { min-height:46px; padding-inline:11px; }
  .sidebar-brand-row { min-height:70px; padding-block:12px; }
  .workspace-brand .brand-mark { width:40px; height:40px; flex-basis:40px; }
  .workspace-brand strong { font-size:18px; }
  .workspace-brand small { font-size:8px; }
  .sidebar-collapse { width:29px; height:29px; flex-basis:29px; }
}

@media (orientation:landscape) and (max-width:920px) and (max-height:620px) {
  .workspace-sidebar { width:min(248px,62vw); }
  .workspace-tabs { padding-block:9px; gap:4px; }
  .workspace-tabs button { min-height:42px; }
}

/* V2.2.17 compact navigation rail: the sidebar ends immediately after the
   menu controls instead of reserving a wide empty right column. */
@media (min-width:921px) {
  .workspace-shell { --sidebar-width:clamp(212px,18vw,236px); grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-shell.sidebar-collapsed { --sidebar-width:84px; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-sidebar { width:var(--sidebar-width); max-width:236px; }
  .sidebar-brand-row { padding-inline:10px; }
  .workspace-tabs { padding-inline:9px; }
  .workspace-tabs button { padding-inline:10px; }
}

@media (max-width:920px) {
  .workspace-sidebar { width:min(220px,88vw); max-width:220px; }
  .sidebar-brand-row { padding-inline:9px; }
  .workspace-tabs { padding-inline:9px; }
  .workspace-tabs button { padding-inline:10px; }
}

@media (max-width:640px) {
  .workspace-sidebar { width:min(220px,88vw); }
  .sidebar-brand-row { min-height:68px; padding-inline:8px; }
  .workspace-brand { gap:7px; }
  .workspace-brand .brand-mark { width:38px; height:38px; flex-basis:38px; }
  .workspace-brand strong { font-size:17px; }
  .sidebar-collapse { width:28px; height:28px; flex-basis:28px; }
  .workspace-tabs { padding-inline:8px; gap:4px; }
  .workspace-tabs button { min-height:45px; padding-inline:10px; }
}

@media (orientation:landscape) and (max-width:920px) and (max-height:620px) {
  .workspace-sidebar { width:min(220px,58vw); }
  .workspace-tabs { padding-block:8px; }
  .workspace-tabs button { min-height:41px; }
}

/* V2.2.18 sidebar container fit. The rail itself, rather than only its
   buttons, is sized to the content; the only intentional right-side space is
   the scrollbar gutter. */
@media (min-width:921px) {
  .workspace-shell { --sidebar-width:clamp(204px,16vw,228px); grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-shell.sidebar-collapsed { --sidebar-width:84px; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-sidebar { width:var(--sidebar-width); max-width:228px; }
  .workspace-tabs { width:100%; padding-left:8px; padding-right:0; scrollbar-gutter:stable; }
  .workspace-tabs button { width:100%; }
  .sidebar-brand-row { padding-left:9px; padding-right:5px; }
}

@media (max-width:920px) {
  .workspace-sidebar { width:clamp(196px,64vw,214px); max-width:214px; }
  .workspace-tabs { width:100%; padding-left:8px; padding-right:0; scrollbar-gutter:stable; }
  .workspace-tabs button { width:100%; }
  .sidebar-brand-row { padding-left:8px; padding-right:4px; }
}

@media (max-width:640px) {
  .workspace-sidebar { width:clamp(196px,64vw,210px); }
  .workspace-tabs { padding-left:7px; padding-right:0; }
  .sidebar-brand-row { padding-left:7px; padding-right:3px; }
}

@media (orientation:landscape) and (max-width:920px) and (max-height:620px) {
  .workspace-sidebar { width:clamp(196px,52vw,212px); }
  .workspace-tabs { padding-left:7px; padding-right:0; }
}

/* V2.2.19 mobile navigation direction. A desktop-collapsed preference may
   remain in localStorage, but small screens must always show the drawer with
   icon-left/text-right menu rows like the approved compact layout. */
@media (max-width:920px) {
  .workspace-shell.sidebar-collapsed .workspace-sidebar { width:clamp(196px,64vw,214px); }
  .workspace-shell.sidebar-collapsed .workspace-brand > span:last-child,
  .workspace-shell.sidebar-collapsed .workspace-tabs button > b,
  .workspace-shell.sidebar-collapsed .workspace-tabs .nav-badge,
  .workspace-shell.sidebar-collapsed .sidebar-user > span:nth-child(2) { display:block; }
  .workspace-shell.sidebar-collapsed .sidebar-brand-row { padding-inline:8px 4px; }
  .workspace-shell.sidebar-collapsed .workspace-tabs { padding-inline:8px 0; }
  .workspace-shell.sidebar-collapsed .workspace-tabs button {
    width:100%;
    min-height:44px;
    display:grid;
    grid-template-columns:30px minmax(0,1fr) auto;
    align-items:center;
    justify-items:stretch;
    gap:8px;
    margin:0;
    padding-inline:10px;
    border-radius:9px;
  }
  .workspace-shell.sidebar-collapsed .workspace-tabs button > span {
    width:auto;
    height:auto;
    display:grid;
    place-items:center;
    font-size:16px;
    line-height:1;
  }
  .workspace-shell.sidebar-collapsed .sidebar-user {
    grid-template-columns:36px minmax(0,1fr) 32px;
    justify-items:stretch;
    padding-inline:8px 4px;
  }
  .workspace-shell.sidebar-collapsed .sidebar-user .icon-btn { display:grid; }
}

@media (max-width:640px) {
  .workspace-shell.sidebar-collapsed .workspace-sidebar { width:clamp(196px,64vw,210px); }
  .workspace-shell.sidebar-collapsed .workspace-tabs { gap:4px; }
  .workspace-shell.sidebar-collapsed .workspace-tabs button { min-height:45px; padding-inline:10px; }
}

@media (orientation:landscape) and (max-width:920px) and (max-height:620px) {
  .workspace-shell.sidebar-collapsed .workspace-sidebar { width:clamp(196px,52vw,212px); }
  .workspace-shell.sidebar-collapsed .workspace-tabs button { min-height:41px; }
}

/* V2.2.22 checkout fee adjustment panel. */
.checkout-adjustment { margin:12px 0; border:1px solid var(--line); border-radius:10px; background:#f8fafc; overflow:hidden; }
.checkout-adjustment summary { padding:11px 13px; cursor:pointer; color:var(--ink); font-size:12px; font-weight:800; list-style-position:inside; }
.checkout-adjustment summary::marker { color:var(--berry); }
.checkout-adjustment[open] summary { border-bottom:1px solid var(--line); background:#f3f7fc; }
.checkout-adjustment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px 13px 0; }
.checkout-adjustment-grid label { min-width:0; }
.checkout-adjustment .notice { margin:8px 13px 12px; font-size:10px; line-height:1.6; }
.checkout-total small { display:block; margin-top:6px; color:var(--muted); font-size:10px; line-height:1.5; }
.package-member-prices { grid-column:1/-1; margin-top:2px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; overflow:hidden; }
.package-member-prices summary { padding:11px 13px; cursor:pointer; font-size:12px; font-weight:800; color:var(--ink); list-style-position:inside; }
.package-member-prices summary::marker { color:var(--berry); }
.package-member-prices[open] summary { border-bottom:1px solid var(--line); background:#f3f7fc; }
.package-member-price-grid { padding:12px 13px 0; }
.package-member-prices .notice { margin:8px 13px 12px; font-size:10px; line-height:1.6; }
.checkout-member-card { margin:12px 0; padding:12px 13px; border:1px solid var(--line); border-color:color-mix(in srgb,var(--berry) 28%,var(--line)); border-radius:10px; background:#fffafd; background:color-mix(in srgb,var(--berry) 5%,#fff); }
.checkout-member-card label { display:grid; gap:7px; color:var(--ink); font-size:12px; font-weight:800; }
.checkout-member-card select { width:100%; min-width:0; }
.checkout-member-card small { display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.5; }
.checkout-member-card > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.checkout-card-manage { flex:none; margin-top:7px; padding:6px 9px; font-size:10px; }
.checkout-products { margin:12px 0; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; }
.checkout-products summary { padding:11px 13px; cursor:pointer; font-size:12px; font-weight:800; list-style-position:inside; }
.checkout-products[open] summary { border-bottom:1px solid var(--line); background:#f8fafc; }
.checkout-product-list { width:100%; min-width:0; max-width:100%; }
.checkout-product-row {
  width:100%;
  min-width:0;
  max-width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(58px,76px) 36px;
  align-items:end;
  gap:7px;
  padding:10px 13px 0;
}
.checkout-product-row label { min-width:0; max-width:100%; margin:0; }
.checkout-product-row input,.checkout-product-row select { width:100%; min-width:0; max-width:100%; }
.checkout-product-row .icon-btn {
  width:36px;
  min-width:36px;
  max-width:36px;
  height:39px;
  min-height:39px;
  align-self:end;
  margin:0;
}
@media (max-width:480px) {
  .checkout-product-row { grid-template-columns:minmax(0,1fr) 58px 36px; gap:5px; padding-inline:9px; }
}
.checkout-existing-products { margin:10px 13px 0; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.checkout-existing-products > b { display:block; margin-bottom:5px; font-size:11px; }
.checkout-existing-products > div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; padding:5px 0; border-top:1px dashed var(--line); font-size:10px; }
.checkout-existing-products > div:first-of-type { border-top:0; }
.checkout-existing-products em { color:var(--berry); font-style:normal; font-weight:800; }
.checkout-existing-products.empty { color:var(--muted); font-size:10px; }
.checkout-add-product { margin:10px 13px 0; }
.checkout-products small { display:block; padding:8px 13px 12px; color:var(--muted); font-size:10px; }
.package-filter-row { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.package-filter-row select { width:auto; min-width:150px; }
.package-category-manager { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 12px; }
.goods-grid { grid-template-columns:repeat(auto-fill,minmax(172px,190px)); justify-content:start; gap:11px; }
.goods-card { width:100%; min-height:0; aspect-ratio:1 / 1; padding:11px; overflow:hidden; }
.goods-card .goods-thumb { height:58px; }
.goods-card h3 { margin:8px 0 4px; font-size:15px; }
.goods-card p { margin:4px 0; font-size:11px; }
.goods-card .actions { margin-top:7px; gap:5px; flex-wrap:wrap; }
.goods-card .actions .btn { padding:5px 7px; font-size:10px; }
@media (max-width:920px) {
  .goods-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}
@media (max-width:640px) {
  .goods-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .goods-card {
    min-width:0;
    min-height:0;
    height:auto;
    aspect-ratio:auto;
    padding:8px;
    overflow:hidden;
  }
  .goods-card .actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:center;
    min-width:0;
    width:100%;
    gap:5px;
  }
  .goods-card .actions .tag {
    grid-column:1/-1;
    justify-self:start;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .goods-card .actions .btn {
    width:100%;
    min-width:0;
    max-width:100%;
    padding-inline:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
@media (max-width:560px) { .checkout-member-card > div { align-items:stretch; flex-direction:column; } .checkout-card-manage { width:100%; } }
@media (max-width:560px) {
  .checkout-adjustment-grid { grid-template-columns:1fr; }
}

/* V2.2.21 fixed horizontal rows for every responsive breakpoint. Below
   1280px the menu always keeps icon-left/text-right rows, even if an older
   desktop collapsed preference is present. */
@media (max-width:1280px) {
  .workspace-shell.sidebar-collapsed { --sidebar-width:clamp(196px,16vw,228px); grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
  .workspace-shell.sidebar-collapsed .workspace-sidebar { width:var(--sidebar-width); max-width:228px; }
  .workspace-shell .workspace-tabs { width:100%; padding-left:8px; padding-right:0; }
  .workspace-shell .workspace-tabs button,
  .workspace-shell.sidebar-collapsed .workspace-tabs button {
    width:100% !important;
    min-height:44px;
    display:grid !important;
    grid-template-columns:30px minmax(0,1fr) auto !important;
    align-items:center;
    justify-items:stretch !important;
    gap:8px;
    margin:0;
    padding-inline:10px;
    border-radius:9px;
  }
  .workspace-shell .workspace-tabs button > span,
  .workspace-shell.sidebar-collapsed .workspace-tabs button > span {
    width:auto !important;
    height:auto !important;
    display:grid !important;
    place-items:center;
    font-size:16px;
    line-height:1;
  }
  .workspace-shell .workspace-tabs button > b,
  .workspace-shell.sidebar-collapsed .workspace-tabs button > b,
  .workspace-shell.sidebar-collapsed .workspace-tabs .nav-badge { display:block !important; }
}

@media (max-width:640px) {
  .workspace-shell.sidebar-collapsed { --sidebar-width:clamp(196px,64vw,210px); }
  .workspace-shell.sidebar-collapsed .workspace-sidebar { width:var(--sidebar-width); }
  .workspace-shell .workspace-tabs button { min-height:45px; }
}