:root {
  color-scheme: light;
  --bg: #f6f7f4;
  --ink: #17201c;
  --muted: #66736d;
  --line: #d9dfd7;
  --panel: #ffffff;
  --green: #2f6f55;
  --green-dark: #214f3d;
  --amber: #b56a22;
  --blue: #285c8f;
  --red: #a63d40;
  --shadow: 0 18px 50px rgba(32, 44, 38, 0.11);
  --panel-opacity: 1;
  --login-panel-opacity: 1;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

.icon-sprite {
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(47, 111, 85, 0.08), transparent 32%),
    linear-gradient(315deg, rgba(40, 92, 143, 0.08), transparent 36%),
    var(--bg);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.login-screen {
  display: grid;
  position: relative;
  grid-template-columns: minmax(420px, 730px) minmax(320px, 420px);
  gap: 22px;
  align-content: center;
  justify-content: center;
  min-height: 100vh;
  place-items: center stretch;
  padding: 26px 24px 74px;
  background: transparent;
}

.login-portal {
  display: grid;
  width: min(100%, 730px);
  gap: 18px;
}

.portal-link {
  color: inherit;
  text-decoration: none;
}

.portal-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.portal-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 80px;
  padding: 0 24px 0 30px;
  border: 1px solid rgba(255, 255, 255, calc(var(--login-panel-opacity) * 0.66));
  border-radius: 8px;
  background: rgba(255, 255, 255, calc(var(--login-panel-opacity) * 0.78));
  box-shadow: 0 14px 38px rgba(23, 32, 28, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.portal-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(23, 32, 28, 0.12);
}

.portal-link span:not(.portal-dot) {
  min-width: 0;
  overflow: hidden;
  color: #1e2d48;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-link small {
  color: var(--amber);
  font-size: 20px;
  font-weight: 800;
}

.portal-dot {
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e6a23c;
  box-shadow: 0 0 0 8px rgba(230, 162, 60, 0.16);
}

.portal-link.is-ok .portal-dot {
  background: #30cf78;
  box-shadow: 0 0 0 8px rgba(48, 207, 120, 0.16);
}

.portal-link.is-bad .portal-dot {
  background: #e65353;
  box-shadow: 0 0 0 8px rgba(230, 83, 83, 0.15);
}

.portal-link.is-ok small {
  color: #18a84f;
}

.portal-link.is-bad small {
  color: var(--red);
}

.login-panel {
  display: grid;
  align-self: start;
  width: min(100%, 420px);
  gap: 14px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, calc(var(--login-panel-opacity) * 0.66));
  border-radius: 8px;
  background: rgba(255, 255, 255, calc(var(--login-panel-opacity) * 0.84));
  box-shadow: 0 18px 48px rgba(23, 32, 28, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.login-panel h1 {
  margin-bottom: 4px;
  color: #1e2d48;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
}

.login-panel .primary-button {
  min-height: 54px;
  margin-top: 0;
  font-size: 20px;
}

.login-panel .secondary-button {
  min-height: 54px;
  font-size: 18px;
}

.login-status-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 176px;
  min-height: 18px;
  max-height: 18px;
  overflow: hidden;
  padding: 0 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, calc(var(--login-panel-opacity) * 0.72));
  border-radius: 999px;
  background: rgba(255, 255, 255, calc(var(--login-panel-opacity) * 0.88));
  box-shadow: 0 14px 38px rgba(23, 32, 28, 0.1);
  color: #2e3849;
  font-size: 0;
  font-weight: 700;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: default;
  transition:
    width 0.22s ease,
    min-height 0.22s ease,
    max-height 0.22s ease,
    padding 0.22s ease,
    border-radius 0.22s ease,
    box-shadow 0.22s ease;
}

.login-status-bar::before {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 78px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(47, 111, 85, 0.38);
  content: "";
}

.login-status-bar::after {
  color: #2e3849;
  content: "网站检测状态";
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.login-status-bar span {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}

.login-status-bar:hover,
.login-status-bar:focus,
.login-status-bar:focus-within {
  justify-content: flex-start;
  gap: 16px;
  width: min(1230px, calc(100% - 48px));
  min-height: 54px;
  max-height: 90px;
  padding: 12px 26px;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(23, 32, 28, 0.13);
  font-size: 18px;
}

.login-status-bar:hover::after,
.login-status-bar:focus::after,
.login-status-bar:focus-within::after {
  display: none;
}

.login-status-bar:hover span,
.login-status-bar:focus span,
.login-status-bar:focus-within span {
  opacity: 1;
  transform: none;
}

.login-status-bar strong {
  font-weight: 800;
}

.login-status-bar .status-ok {
  color: #18a84f;
}

.login-status-bar .status-bad {
  color: #e22d47;
}

body.login-typing .portal-link,
body.login-typing .login-panel,
body.login-typing .login-status-bar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.login-typing .login-panel {
  background: rgba(255, 255, 255, calc(var(--login-panel-opacity) * 0.92));
}

.login-note,
.hint,
.form-error {
  margin: 0;
  font-size: 13px;
}

.login-note,
.hint {
  color: var(--muted);
}

.form-error {
  color: var(--red);
  font-weight: 700;
}

.login-converter-button {
  width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}

button,
label.import-button {
  cursor: pointer;
}

.shell {
  width: min(1600px, calc(100% - 20px));
  margin: 0 auto;
  padding: 28px 0;
}

.topbar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(217, 223, 215, calc(var(--panel-opacity) * 0.92));
  border-radius: 8px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.78));
  box-shadow: 0 14px 42px rgba(23, 32, 28, 0.08);
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}

h2 {
  font-size: 18px;
}

.top-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.top-metrics,
.top-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-metrics {
  flex: 1 1 260px;
}

.top-nav {
  flex: 0 0 auto;
  justify-content: flex-end;
}

body.public-converter-mode .top-metrics,
body.public-converter-mode .top-nav .tab-button[data-view="recordsView"],
body.public-converter-mode #adminMenuToggle,
body.public-converter-mode #adminSubmenu,
body.public-converter-mode #inventoryMenuToggle,
body.public-converter-mode #inventorySubmenu,
body.public-converter-mode .top-nav .tab-button[data-view="otherView"],
body.public-converter-mode .top-nav .tab-button[data-view="otherTemplateView"],
body.public-converter-mode .profile-menu {
  display: none;
}

body.public-converter-mode .top-nav {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.top-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 42px;
  min-width: 118px;
  padding: 8px 12px;
  border: 1px solid rgba(217, 223, 215, calc(var(--panel-opacity) * 0.9));
  border-radius: 8px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.68));
}

.top-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.top-metric strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.icon-button,
.text-button,
.primary-button,
.secondary-button,
.danger-button,
.row-button,
.tab-button {
  border: 0;
  border-radius: 8px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, var(--panel-opacity));
  box-shadow: 0 6px 18px rgba(23, 32, 28, 0.08);
  font-weight: 800;
}

.icon-button:hover,
.text-button:hover,
.tab-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(23, 32, 28, 0.11);
}

.account-toggle {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 10px 24px rgba(40, 92, 143, 0.24);
}

.admin-data-toggle {
  color: var(--blue);
  background: rgba(40, 92, 143, calc(var(--panel-opacity) * 0.12));
}

.display-toggle {
  color: var(--green-dark);
  background: rgba(47, 111, 85, calc(var(--panel-opacity) * 0.12));
}

.profile-menu {
  position: relative;
}

.profile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px 6px 7px;
  color: var(--ink);
  background: rgba(255, 255, 255, var(--panel-opacity));
  box-shadow: 0 6px 18px rgba(23, 32, 28, 0.08);
}

.profile-toggle:hover,
.profile-toggle[aria-expanded="true"] {
  box-shadow: 0 10px 24px rgba(23, 32, 28, 0.12);
  transform: translateY(-1px);
}

.profile-avatar {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--blue));
  font-size: 13px;
  font-weight: 900;
}

.profile-meta {
  display: grid;
  min-width: 58px;
  text-align: left;
}

.profile-meta strong {
  max-width: 110px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-meta small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.profile-caret {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  display: grid;
  width: 245px;
  overflow: hidden;
  border: 1px solid rgba(217, 223, 215, calc(var(--panel-opacity) * 0.95));
  border-radius: 8px;
  background: rgba(255, 255, 255, var(--panel-opacity));
  box-shadow: 0 22px 58px rgba(23, 32, 28, 0.18);
  backdrop-filter: blur(12px);
}

.profile-dropdown-head {
  display: grid;
  gap: 4px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.profile-dropdown-head strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dropdown-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  border: 0;
  padding: 0 18px;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}

.menu-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #425049;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.profile-menu-item:hover {
  background: rgba(47, 111, 85, 0.08);
}

.profile-menu-divider {
  border-top: 1px solid var(--line);
}

.profile-menu-item.logout {
  color: var(--red);
  border-top: 1px solid var(--line);
}

.profile-menu-item.logout .menu-icon {
  color: var(--red);
}

.import-button input {
  display: none;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric {
  min-height: 94px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.82));
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  display: block;
  margin-top: 10px;
  font-size: 34px;
  line-height: 1;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.converter-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.entry-panel,
.records-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, var(--panel-opacity));
  box-shadow: var(--shadow);
}

.entry-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.panel-head,
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.converter-input-panel {
  align-content: start;
}

.converter-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.converter-presets button {
  min-height: 40px;
  border: 1px solid rgba(47, 111, 85, 0.16);
  border-radius: 8px;
  color: var(--green-dark);
  background: rgba(47, 111, 85, calc(var(--panel-opacity) * 0.1));
  font-weight: 800;
}

.converter-presets button:hover {
  border-color: rgba(47, 111, 85, 0.32);
  background: rgba(47, 111, 85, calc(var(--panel-opacity) * 0.16));
}

.converter-result-panel {
  min-height: 360px;
}

.converter-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.converter-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
}

.converter-result-card {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 190px;
  padding: 26px;
  border: 1px solid rgba(217, 223, 215, calc(var(--panel-opacity) * 0.9));
  border-radius: 8px;
  background: rgba(251, 252, 250, calc(var(--panel-opacity) * 0.78));
}

.converter-result-card span,
.converter-result-card small {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.converter-result-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--green-dark);
  font-size: 46px;
  line-height: 1.05;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(251, 252, 250, var(--panel-opacity));
  outline: none;
}

select {
  appearance: none;
  padding-right: 48px;
  background-color: rgba(251, 252, 250, var(--panel-opacity));
  background-image:
    linear-gradient(45deg, transparent 50%, var(--green) 50%),
    linear-gradient(135deg, var(--green) 50%, transparent 50%),
    linear-gradient(to right, rgba(47, 111, 85, 0.14), rgba(47, 111, 85, 0.14));
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px,
    calc(100% - 40px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px, 1px 24px;
  font-weight: 700;
}

select:hover {
  border-color: rgba(47, 111, 85, 0.45);
  background-color: rgba(255, 255, 255, var(--panel-opacity));
}

textarea {
  resize: vertical;
}

.scan-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 96px;
  gap: 8px;
}

.scan-input .secondary-button {
  display: inline-grid;
  place-items: center;
  min-height: 46px;
  padding: 10px 12px;
}

.file-select-button {
  cursor: pointer;
  text-align: center;
  user-select: none;
}

.file-input-hidden {
  position: fixed;
  left: -100vw;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-box {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.upload-box span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 111, 85, 0.14);
}

input.duplicate-field {
  border-color: var(--red);
  background: rgba(166, 61, 64, 0.06);
  box-shadow: 0 0 0 3px rgba(166, 61, 64, 0.12);
}

.bg-preview {
  display: grid;
  min-height: 86px;
  place-items: end start;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 28, calc(var(--panel-opacity) * 0.18));
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(rgba(251, 252, 250, calc(var(--panel-opacity) * 0.42)), rgba(251, 252, 250, calc(var(--panel-opacity) * 0.42))),
    rgba(251, 252, 250, calc(var(--panel-opacity) * 0.36));
  background-position: center;
  background-size: cover;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--panel-opacity) * 0.28));
  cursor: zoom-in;
}

.bg-preview.has-image span {
  width: 100%;
  padding: 6px 10px;
  color: rgba(23, 32, 28, 0.88);
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.42));
  backdrop-filter: blur(2px);
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 14, 12, 0.92);
  backdrop-filter: blur(2px);
}

.image-viewer img {
  max-width: min(100%, 1400px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

.image-viewer-nav {
  position: fixed;
  top: 50%;
  z-index: 121;
  width: 48px;
  height: 58px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  font-size: 44px;
  line-height: 1;
  transform: translateY(-50%);
}

.image-viewer-prev {
  left: 18px;
}

.image-viewer-next {
  right: 18px;
}

.image-viewer-nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.image-viewer-count {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 121;
  min-width: 70px;
  border-radius: 999px;
  padding: 8px 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  font-weight: 800;
  text-align: center;
  transform: translateX(-50%);
}

.image-viewer-delete {
  position: fixed;
  top: 16px;
  right: 72px;
  z-index: 121;
  height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  color: #fff;
  background: rgba(220, 38, 38, 0.86);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.image-viewer-delete:hover {
  background: rgba(185, 28, 28, 0.96);
}

.image-viewer-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 121;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  font-size: 30px;
  line-height: 1;
}

.image-viewer-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.account-popover {
  position: fixed;
  inset: 0;
  z-index: 34;
  display: grid;
  place-items: start end;
  padding: 86px max(20px, calc((100vw - 1440px) / 2)) 20px 20px;
  background: rgba(10, 14, 12, 0.24);
  backdrop-filter: blur(5px);
}

.account-card {
  width: min(100%, 460px);
  border-color: rgba(47, 111, 85, 0.2);
  box-shadow: 0 24px 70px rgba(23, 32, 28, 0.22);
}

.admin-data-card {
  width: min(100%, 620px);
  border-color: rgba(40, 92, 143, 0.2);
  box-shadow: 0 24px 70px rgba(23, 32, 28, 0.22);
}

.display-settings-card {
  width: min(100%, 1120px);
  max-height: calc(100vh - 112px);
  overflow: auto;
  border-color: rgba(47, 111, 85, 0.2);
  box-shadow: 0 24px 70px rgba(23, 32, 28, 0.22);
}

#displaySettingsPopover {
  place-items: start center;
}

.section-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.account-close {
  position: static;
  flex: 0 0 auto;
  color: var(--ink);
  background: rgba(23, 32, 28, 0.08);
}

.account-close:hover {
  background: rgba(23, 32, 28, 0.14);
}

.scanner-viewer {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 14, 12, 0.82);
}

.scanner-panel {
  display: grid;
  gap: 12px;
  width: min(100%, 520px);
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

.scanner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scanner-head .image-viewer-close {
  position: static;
  color: var(--ink);
  background: rgba(23, 32, 28, 0.08);
}

.scanner-panel video {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: #111;
  object-fit: cover;
}

.scanner-actions {
  display: grid;
  gap: 8px;
}

.scanner-actions .secondary-button {
  width: 100%;
}

@media (max-width: 720px) {
  .scanner-viewer {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  .scanner-panel {
    width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
}

.scanner-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

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

.form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: stretch;
}

.form-actions .primary-button,
.form-actions .secondary-button {
  width: 100%;
  min-height: 46px;
}

.primary-button {
  min-height: 46px;
  color: #fff;
  background: var(--green);
  font-weight: 800;
}

.primary-button:hover {
  background: var(--green-dark);
}

.secondary-button,
.danger-button {
  min-height: 42px;
  padding: 10px 14px;
  font-weight: 800;
}

.secondary-button {
  color: var(--green-dark);
  background: rgba(47, 111, 85, 0.12);
}

.danger-button {
  color: var(--red);
  background: rgba(166, 61, 64, 0.12);
}

.text-button {
  padding: 8px 10px;
  color: var(--green);
  background: rgba(47, 111, 85, 0.1);
  font-size: 13px;
  font-weight: 800;
}

.tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.82));
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.tab-button.active {
  color: #fff;
  background: var(--green);
}

.public-login-button {
  color: var(--blue);
  background: rgba(40, 92, 143, calc(var(--panel-opacity) * 0.12));
}

.records-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.toolbar {
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.search-box {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(251, 252, 250, var(--panel-opacity));
  padding-left: 12px;
}

.search-box input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.toolbar select {
  min-width: 178px;
  max-width: 220px;
}

.table-wrap {
  flex: 1;
  position: relative;
  min-height: 360px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.92));
}

.pagination-summary {
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
}
.pagination-summary-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.records-money-summary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
}

.records-money-summary span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.records-money-summary strong {
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.records-money-summary strong.is-negative {
  color: #dc2626;
}

.pagination-size,
.pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pagination-size {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.pagination-size select {
  width: 86px;
  height: 44px;
  min-height: 44px;
  border-color: rgba(47, 111, 85, 0.42);
  border-radius: 10px;
  padding: 0 34px 0 16px;
  color: var(--green-dark);
  background-color: rgba(255, 255, 255, var(--panel-opacity));
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px,
    calc(100% - 34px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 22px;
  font-weight: 700;
  line-height: 42px;
  text-align: center;
}

.pagination-button,
.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, var(--panel-opacity));
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
}

.pagination-page {
  border-color: rgba(47, 111, 85, 0.48);
  color: var(--green-dark);
  background: rgba(47, 111, 85, 0.1);
  font-size: 14px;
}

.pagination-button:hover:not(:disabled) {
  border-color: rgba(47, 111, 85, 0.62);
  color: var(--green-dark);
  transform: translateY(-1px);
}

.pagination-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

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

th,
td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: rgba(248, 250, 247, var(--panel-opacity));
  font-size: 12px;
}

th[data-column-key] {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

th[data-column-key]:active,
th[data-column-key].dragging {
  cursor: grabbing;
}

th.dragging {
  opacity: 0.58;
}

th.column-drop-before,
th.column-drop-after {
  color: var(--green-dark);
  background: rgba(47, 111, 85, 0.12);
}

th.column-drop-before {
  box-shadow: inset 3px 0 0 var(--green);
}

th.column-drop-after {
  box-shadow: inset -3px 0 0 var(--green);
}

.column-title {
  vertical-align: middle;
}

.column-sort-indicator {
  display: inline-flex;
  margin-left: 4px;
  color: var(--green-dark);
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
}

.column-drag-icon {
  display: inline-flex;
  margin-left: 6px;
  color: rgba(47, 111, 85, 0.58);
  font-size: 11px;
  vertical-align: middle;
}

th:last-child,
td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: rgba(255, 255, 255, var(--panel-opacity));
}

th:last-child {
  z-index: 3;
  background: rgba(248, 250, 247, var(--panel-opacity));
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(40, 92, 143, 0.1);
  font-weight: 800;
}

.money {
  font-variant-numeric: tabular-nums;
}

.warranty-expire-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.warranty-expire-cell em {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.warranty-expired,
.warranty-expired em {
  color: #c63f3f;
  font-weight: 800;
}

.warranty-expired em {
  background: rgba(198, 63, 63, 0.12);
}

.warranty-active em {
  color: var(--green-dark);
  background: rgba(47, 111, 85, 0.12);
}

.row-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
}

.row-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  width: auto;
  height: 46px;
  padding: 0 15px;
  color: var(--ink);
  background: #eef2ed;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.row-button.edit {
  color: #14281f;
  background: rgba(47, 111, 85, 0.1);
}

.row-button.delete {
  color: #b4232f;
  background: rgba(166, 61, 64, 0.12);
}

.row-button:hover {
  filter: saturate(1.04) brightness(0.98);
}

.link-button {
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--green-dark);
  background: rgba(47, 111, 85, 0.12);
  font-weight: 800;
  cursor: pointer;
}

.image-count-button {
  white-space: nowrap;
}

.empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 100%;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

.empty-state strong {
  color: var(--ink);
}

.hidden {
  display: none !important;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

#siteSettingsForm {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px 18px;
  background:
    linear-gradient(135deg, rgba(40, 92, 143, calc(var(--panel-opacity) * 0.08)), transparent 42%),
    linear-gradient(315deg, rgba(47, 111, 85, calc(var(--panel-opacity) * 0.08)), transparent 38%),
    rgba(255, 255, 255, var(--panel-opacity));
}

#siteSettingsForm .panel-head,
#siteSettingsForm .primary-button {
  grid-column: 1 / -1;
}

#siteSettingsForm .settings-wide {
  grid-column: 1 / -1;
}

.background-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.background-settings-card {
  display: grid;
  grid-template-rows: auto 118px auto auto;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

.background-settings-card.login-background-card {
  background: linear-gradient(145deg, #ffffff 0%, #f0fdfa 100%);
}

.background-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.background-settings-title {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.background-settings-title strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 650;
}

.background-settings-title small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.background-upload-button {
  display: inline-grid;
  min-height: 38px;
  flex: 0 0 auto;
  place-items: center;
  margin: 0;
  padding: 7px 13px;
  white-space: nowrap;
}

#siteSettingsForm .background-settings-card .bg-preview {
  min-height: 118px;
  border-radius: 12px;
  background-color: #f8fafc;
}

#siteSettingsForm .background-settings-card .bg-preview:not(.has-image) {
  place-items: center;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

.background-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.background-range-grid label {
  min-width: 0;
  padding: 11px 12px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.88);
}

.background-range-grid label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #475569;
  font-size: 12px;
}

.background-range-grid label > span strong {
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
}

.background-range-grid input[type="range"] {
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.background-clear-button {
  width: 100%;
  min-height: 42px;
}

@media (max-width: 760px) {
  .background-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .background-settings-head {
    align-items: stretch;
    flex-direction: column;
  }

  .background-upload-button {
    width: 100%;
  }

  .background-range-grid {
    grid-template-columns: 1fr;
  }
}

.admin-panel {
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(47, 111, 85, calc(var(--panel-opacity) * 0.07)), transparent 34%),
    rgba(255, 255, 255, var(--panel-opacity));
}

.admin-head {
  margin-bottom: 16px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.admin-actions .import-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-actions > :is(button, label.import-button) {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.panel-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-log {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 250, 247, var(--panel-opacity));
}

.admin-log span {
  color: var(--muted);
  font-size: 13px;
}

.option-admin {
  margin-top: 16px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(40, 92, 143, calc(var(--panel-opacity) * 0.07)), transparent 38%),
    rgba(255, 255, 255, var(--panel-opacity));
}

.collapsible-admin {
  overflow: hidden;
}

.panel-toggle {
  min-width: 76px;
  min-height: 36px;
  padding: 0 14px;
  color: var(--green-dark);
  background: rgba(47, 111, 85, calc(var(--panel-opacity) * 0.1));
}

.panel-toggle::before {
  content: "▾";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.2s ease;
}

.collapsible-admin.is-collapsed .panel-toggle::before {
  transform: rotate(-90deg);
}

.collapsible-admin.is-collapsed .panel-collapsible {
  display: none;
}

.nav-admin {
  margin-top: 16px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(47, 111, 85, calc(var(--panel-opacity) * 0.07)), transparent 36%),
    linear-gradient(315deg, rgba(40, 92, 143, calc(var(--panel-opacity) * 0.06)), transparent 40%),
    rgba(255, 255, 255, var(--panel-opacity));
}

.nav-manager {
  display: grid;
  gap: 16px;
}

.nav-link-form {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(260px, 1.6fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(47, 111, 85, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.nav-link-form label {
  gap: 6px;
}

.nav-link-form .secondary-button {
  min-width: 82px;
  min-height: 44px;
}

.nav-link-list {
  display: grid;
  gap: 10px;
}

.nav-link-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 12px 14px;
  border-color: rgba(47, 111, 85, 0.13);
  background:
    linear-gradient(90deg, rgba(47, 111, 85, calc(var(--panel-opacity) * 0.08)), transparent 34%),
    rgba(255, 255, 255, calc(var(--panel-opacity) * 0.9));
  box-shadow: 0 8px 22px rgba(23, 32, 28, 0.045);
}

.nav-link-row:hover {
  border-color: rgba(47, 111, 85, 0.26);
  box-shadow: 0 12px 28px rgba(23, 32, 28, 0.07);
}

.nav-link-row .drag-handle {
  width: 34px;
  height: 42px;
  border-color: rgba(47, 111, 85, 0.16);
  background: rgba(47, 111, 85, calc(var(--panel-opacity) * 0.09));
}

.nav-link-main {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.nav-link-title-line {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.nav-link-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--green-dark);
  background: rgba(47, 111, 85, 0.12);
  font-size: 12px;
  font-weight: 800;
}

.nav-link-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.nav-link-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgba(47, 111, 85, 0.1);
  border-radius: 8px;
  background: rgba(248, 250, 247, calc(var(--panel-opacity) * 0.86));
}

.nav-link-chip em {
  flex: 0 0 auto;
  color: var(--green-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.nav-link-chip span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 128px;
  flex-shrink: 0;
}

.nav-link-actions .row-button {
  width: auto;
  min-width: 56px;
  height: 46px;
  border-radius: 8px;
}

.nav-link-row-editing {
  border-color: rgba(40, 92, 143, 0.22);
  background:
    linear-gradient(135deg, rgba(40, 92, 143, calc(var(--panel-opacity) * 0.08)), transparent 40%),
    rgba(255, 255, 255, calc(var(--panel-opacity) * 0.94));
}

.nav-link-row-editing .drag-handle {
  cursor: default;
  opacity: 0.55;
}

.nav-link-edit-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(260px, 1.6fr);
  gap: 10px;
  min-width: 0;
}

.nav-link-edit-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.nav-link-edit-grid span {
  color: var(--muted);
  font-size: 12px;
}

.nav-link-edit-grid input {
  min-width: 0;
}

.option-category-select-wrap {
  display: grid;
  grid-template-columns: auto minmax(220px, 360px);
  margin-bottom: 14px;
  padding: 12px 14px;
  align-items: center;
  justify-content: start;
  gap: 14px;
  border: 1px solid rgba(47, 111, 85, 0.14);
  border-radius: 10px;
  background: rgba(247, 252, 250, calc(var(--panel-opacity) * 0.86));
}

.option-category-select-wrap > span {
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.option-category-select-wrap select {
  min-height: 42px;
  border-color: rgba(20, 184, 166, 0.28);
  color: #0f172a;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96));
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.06);
}

.option-category-select-wrap select:hover,
.option-category-select-wrap select:focus {
  border-color: #14b8a6;
}

.option-grid {
  display: block;
}

.option-category-content .option-card {
  width: 100%;
}

.option-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(251, 252, 250, calc(var(--panel-opacity) * 0.9));
  box-shadow: 0 10px 26px rgba(23, 32, 28, 0.05);
}

.option-card h3 {
  margin: 0;
  font-size: 15px;
}

.option-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.option-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.option-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(56px, auto) minmax(56px, auto);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, var(--panel-opacity));
  cursor: grab;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.option-row.dragging {
  opacity: 0.55;
  cursor: grabbing;
  border-color: rgba(47, 111, 85, 0.55);
  box-shadow: 0 10px 22px rgba(30, 52, 42, 0.12);
}

.option-row.drag-over {
  border-color: rgba(47, 111, 85, 0.78);
  background: rgba(47, 111, 85, 0.14);
}

.option-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drag-handle {
  width: 28px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(47, 111, 85, 0.18);
  border-radius: 8px;
  color: var(--green-dark);
  background: rgba(47, 111, 85, 0.08);
  cursor: grab;
  font-size: 15px;
  line-height: 1;
  touch-action: none;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
  transform: scale(0.98);
}

.row-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
  box-shadow: none;
}

@media (max-width: 920px) {
  .login-screen {
    grid-template-columns: minmax(0, 560px);
    padding-bottom: 24px;
  }

  .login-panel,
  .login-portal {
    width: min(100%, 560px);
  }

  .login-status-bar {
    position: relative;
    left: auto;
    bottom: auto;
    justify-self: center;
    width: 176px;
    transform: none;
  }

  .login-status-bar:hover,
  .login-status-bar:focus,
  .login-status-bar:focus-within,
  .login-status-bar.status-expanded {
    width: min(100%, 560px);
  }

  .summary-grid,
  .workspace,
  .converter-layout,
  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }

  .records-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .login-screen {
    align-content: start;
    padding: 14px;
  }

  .login-panel {
    order: 1;
  }

  .login-portal {
    order: 2;
  }

  .login-status-bar {
    order: 3;
  }

  .login-status-bar:hover,
  .login-status-bar.status-expanded {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    font-size: 15px;
  }

  .portal-link {
    min-height: 62px;
    padding: 0 16px;
    gap: 12px;
  }

  .portal-link span:not(.portal-dot) {
    font-size: 21px;
  }

  .portal-link small {
    font-size: 17px;
  }

  .shell {
    width: min(100% - 20px, 1440px);
    padding: 16px 0;
  }

  .topbar,
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar {
    gap: 10px;
    padding: 10px;
    margin-bottom: 12px;
  }

  .panel-head {
    align-items: center;
    flex-direction: row;
  }

  .panel-head > div {
    min-width: 0;
  }

  .panel-head h2 {
    overflow-wrap: anywhere;
  }

  .top-actions {
    align-self: stretch;
    align-items: stretch;
    gap: 8px;
    justify-content: flex-end;
  }

  .top-metrics,
  .top-nav {
    width: 100%;
  }

  .top-metrics {
    flex: 1 1 100%;
  }

  .top-metric {
    flex: 1 1 0;
    min-width: 0;
  }

  .top-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 48px;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }

  .top-nav .tab-button {
    width: 100%;
    min-width: 0;
    padding: 9px 8px;
    font-size: 14px;
  }

  .profile-menu {
    grid-column: auto;
    width: auto;
    min-width: 0;
  }

  .public-login-button {
    grid-column: 1 / -1;
  }

  .profile-toggle {
    width: 100%;
    height: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 5px;
  }

  .profile-toggle .profile-meta,
  .profile-toggle .profile-caret {
    display: none;
  }

  .profile-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .profile-dropdown {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    left: auto;
    right: 10px;
    width: min(76vw, 238px);
    max-height: calc(100dvh - 96px);
    overflow: auto;
  }

  .profile-dropdown-head {
    gap: 2px;
    padding: 10px 13px 9px;
  }

  .profile-dropdown-head strong {
    font-size: 14px;
  }

  .profile-dropdown-head span {
    font-size: 11px;
  }

  .profile-menu-item {
    min-height: 38px;
    gap: 9px;
    padding: 0 13px;
    font-size: 13px;
  }

  .menu-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .account-popover {
    place-items: start stretch;
    padding: 78px 10px 16px;
  }

  .account-card,
  .admin-data-card,
  .display-settings-card {
    width: 100%;
    max-height: calc(100dvh - 94px);
    overflow: auto;
  }

  .account-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .pagination-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .pagination-summary-group {
    width: 100%;
    align-items: flex-start;
    gap: 8px 12px;
  }

  .records-money-summary {
    max-width: 100%;
    gap: 8px 12px;
    flex-wrap: wrap;
    white-space: normal;
  }

  .pagination-size {
    margin-left: 0;
  }

  .pagination-controls {
    justify-content: flex-end;
  }

  .summary-grid,
  .workspace,
  .converter-layout,
  .admin-grid,
  #siteSettingsForm,
  .two-col {
    grid-template-columns: 1fr;
  }

  .converter-result-grid,
  .converter-presets {
    grid-template-columns: 1fr 1fr;
  }

  .converter-result-grid {
    gap: 12px;
    padding: 16px;
  }

  .converter-result-card {
    min-height: 150px;
    padding: 20px;
  }

  .converter-result-card strong {
    font-size: 34px;
  }

  .scan-input {
    grid-template-columns: 1fr 1fr;
  }

  .scan-input input[type="text"] {
    grid-column: 1 / -1;
  }

  .upload-box {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .upload-box .file-select-button,
  .upload-box span {
    width: 100%;
  }

  .upload-box span {
    white-space: normal;
  }

  .toolbar select {
    width: 100%;
    max-width: none;
  }

  .search-box {
    width: 100%;
    min-width: 0;
  }

  .admin-panel {
    padding: 14px;
  }

  .admin-head {
    margin-bottom: 12px;
  }

  .collapsible-admin .admin-head {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .collapsible-admin .admin-head > h2,
  .collapsible-admin .admin-head > div {
    min-width: 0;
  }

  .panel-actions-right {
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: wrap;
  }

  .panel-toggle {
    width: auto;
    min-width: 78px;
    min-height: 36px;
    padding: 0 13px;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
  }

  .admin-log {
    grid-template-columns: 1fr;
  }

  .option-add-form,
  .nav-link-form {
    grid-template-columns: 1fr;
  }

  .option-category-select-wrap {
    margin-inline: -2px;
    padding: 6px;
  }

  .option-card {
    padding: 12px;
  }

  .option-list {
    max-height: none;
  }

  .option-row {
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    gap: 6px;
    padding: 7px;
  }

  .option-row .row-button {
    min-width: 52px;
    height: 40px;
    padding: 0 10px;
  }

  .nav-link-form {
    padding: 12px;
  }

  .nav-link-form .secondary-button {
    width: 100%;
  }

  .nav-link-row {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
  }

  .nav-link-row .drag-handle {
    justify-self: start;
  }

  .nav-link-main,
  .nav-link-actions {
    grid-column: 2;
  }

  .nav-link-meta {
    grid-template-columns: 1fr;
  }

  .nav-link-actions {
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
    gap: 7px;
  }

  .nav-link-actions .row-button {
    height: 40px;
    min-width: 58px;
  }

  .nav-link-edit-grid {
    grid-template-columns: 1fr;
  }

  .image-viewer {
    padding: 58px 10px 54px;
  }

  .image-viewer img {
    max-height: calc(100dvh - 124px);
  }

  .image-viewer-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }

  .image-viewer-delete {
    top: 10px;
    right: 58px;
    height: 40px;
    padding: 0 12px;
  }

  .image-viewer-nav {
    width: 40px;
    height: 50px;
    font-size: 38px;
  }

  .image-viewer-prev {
    left: 10px;
  }

  .image-viewer-next {
    right: 10px;
  }

  .scanner-viewer {
    padding: 10px;
  }

  .scanner-panel {
    padding: 12px;
  }

  th,
  td {
    padding: 12px 10px;
  }

  .row-actions {
    min-width: 132px;
  }

  .row-button {
    width: auto;
    min-width: 56px;
    padding: 0 10px;
    gap: 4px;
  }
}

@media (max-width: 420px) {
  .shell {
    width: calc(100% - 12px);
    padding: 10px 0;
  }

  .topbar {
    padding: 8px;
  }

  .top-metrics {
    gap: 6px;
  }

  .top-metric {
    min-height: 38px;
    padding: 7px 8px;
  }

  .top-metric span {
    font-size: 11px;
  }

  .top-metric strong {
    font-size: 18px;
  }

  .top-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 42px;
    gap: 6px;
  }

  .top-nav .tab-button {
    min-height: 40px;
    padding: 8px 6px;
    font-size: 13px;
  }

  .profile-toggle {
    min-height: 40px;
    padding: 4px;
  }

  .profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 11px;
  }

  .profile-dropdown {
    top: calc(env(safe-area-inset-top, 0px) + 58px);
    left: auto;
    right: 8px;
    width: min(78vw, 226px);
    max-height: calc(100dvh - 80px);
  }

  .entry-panel,
  .admin-panel,
  .records-panel {
    border-radius: 8px;
  }

  .entry-panel,
  .admin-panel {
    padding: 12px;
  }

  .toolbar {
    padding: 12px;
  }

  .converter-result-grid {
    grid-template-columns: 1fr;
  }

  .converter-result-card {
    min-height: 116px;
    padding: 18px;
  }

  .form-actions,
  .scan-input {
    grid-template-columns: 1fr;
  }

  .option-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .option-row > span {
    align-self: center;
  }

  .option-row .row-button {
    grid-column: 2;
    width: min(100%, 112px);
    justify-self: start;
  }

  .nav-link-row {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 10px;
  }

  .nav-link-row .drag-handle {
    width: 30px;
  }

  .pagination-controls {
    justify-content: space-between;
  }
}

@media (hover: none) {
  .login-status-bar,
  .login-status-bar:hover,
  .login-status-bar:focus,
  .login-status-bar:active,
  .login-status-bar:focus-within {
    justify-content: center;
    gap: 0;
    width: 176px;
    min-height: 18px;
    max-height: 18px;
    overflow: hidden;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 0;
  }

  .login-status-bar::after,
  .login-status-bar:hover::after,
  .login-status-bar:focus::after,
  .login-status-bar:active::after,
  .login-status-bar:focus-within::after {
    display: block;
  }

  .login-status-bar span,
  .login-status-bar:hover span,
  .login-status-bar:focus span,
  .login-status-bar:active span,
  .login-status-bar:focus-within span {
    opacity: 0;
    transform: translateY(6px);
  }

  .login-status-bar.status-expanded {
    justify-content: flex-start;
    gap: 16px;
    width: min(1230px, calc(100% - 48px));
    min-height: 54px;
    max-height: none;
    overflow: visible;
    padding: 12px 26px;
    border-radius: 8px;
    font-size: 18px;
  }

  .login-status-bar.status-expanded::after {
    display: none;
  }

  .login-status-bar.status-expanded span {
    opacity: 1;
    transform: none;
  }
}

@media (hover: none) and (max-width: 920px) {
  .login-status-bar.status-expanded {
    width: min(100%, 560px);
  }
}

/* Sub2API-inspired interface refresh */
:root {
  --bg: #f5f7fa;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --panel: #ffffff;
  --green: #14b8a6;
  --green-dark: #0f766e;
  --amber: #d97706;
  --blue: #0284c7;
  --red: #dc2626;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 30px rgba(15, 23, 42, 0.04);
}

body {
  background:
    radial-gradient(circle at 8% 6%, rgba(20, 184, 166, 0.1), transparent 27%),
    radial-gradient(circle at 92% 2%, rgba(6, 182, 212, 0.08), transparent 24%),
    #f5f7fa;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

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

.brand-logo {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
  box-shadow: 0 9px 22px rgba(13, 148, 136, 0.24);
}

.brand-logo svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.brand-logo.has-custom-image {
  padding: 3px;
  background: rgba(255, 255, 255, 0.96);
}

.brand-logo.has-custom-image svg {
  display: none;
}

.brand-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.brand-copy strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy small {
  overflow: hidden;
  color: #94a3b8;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-screen {
  grid-template-columns: minmax(0, 650px) minmax(340px, 420px);
  gap: 28px;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 92px;
}

.login-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 14% 14%, rgba(20, 184, 166, 0.17), transparent 30%),
    radial-gradient(circle at 84% 8%, rgba(6, 182, 212, 0.13), transparent 26%),
    linear-gradient(rgba(248, 250, 252, 0.72), rgba(248, 250, 252, 0.82));
}

.login-portal,
.login-panel {
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, calc(var(--login-panel-opacity) * 0.94));
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.login-portal {
  align-self: stretch;
  padding: 30px;
}

.login-brand,
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-portal-intro {
  display: grid;
  gap: 5px;
  margin: 42px 0 20px;
}

.login-portal-intro h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.04em;
}

.login-portal-intro p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.portal-links {
  gap: 10px;
}

.portal-link {
  min-height: 68px;
  padding: 0 18px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.88);
  box-shadow: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.portal-link:hover {
  border-color: rgba(20, 184, 166, 0.42);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
  transform: translateY(-2px);
}

.portal-link span:not(.portal-dot) {
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
}

.portal-link small {
  color: #64748b;
  font-size: 12px;
}

.login-panel {
  width: 100%;
  gap: 16px;
  padding: 36px 38px 32px;
}

.login-panel h1 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.login-panel label {
  gap: 8px;
}

.login-panel label > span,
.entry-panel label > span,
.nav-link-form label > span {
  color: #334155;
  font-size: 13px;
  font-weight: 500;
}

input,
select,
textarea {
  border-color: #dbe3ec;
  border-radius: 10px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

input:focus,
select:focus,
textarea:focus {
  border-color: #14b8a6;
  outline: 3px solid rgba(20, 184, 166, 0.12);
  box-shadow: none;
}

.login-panel input {
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 12px;
}

.login-panel .primary-button,
.login-panel .secondary-button {
  border-radius: 12px;
}

.login-panel .hint {
  margin-top: 2px;
  text-align: center;
  line-height: 1.6;
}

.primary-button,
.secondary-button,
.danger-button,
.text-button,
.pagination-button,
.row-button {
  border-radius: 9px;
  font-weight: 500;
}

.primary-button {
  border-color: #0d9488;
  color: #ffffff;
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.18);
}

.primary-button:hover {
  border-color: #0f766e;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.25);
  transform: translateY(-1px);
}

.secondary-button,
.pagination-button {
  border-color: #dbe3ec;
  color: #334155;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.secondary-button:hover,
.pagination-button:hover:not(:disabled) {
  border-color: rgba(20, 184, 166, 0.45);
  color: #0f766e;
  background: #f0fdfa;
}

.login-status-bar {
  border-color: rgba(226, 232, 240, 0.88);
  color: #475569;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.shell {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 0 0 252px;
}

.topbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: 252px;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: visible;
  border: 0;
  border-right: 1px solid #e2e8f0;
  border-radius: 0;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98));
  box-shadow: 4px 0 22px rgba(15, 23, 42, 0.035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.sidebar-brand {
  min-height: 78px;
  padding: 17px 18px;
  border-bottom: 1px solid #edf1f5;
}

.top-actions {
  display: flex;
  flex: 1;
  min-width: 0;
  padding: 18px 12px 14px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.sidebar-section-label {
  display: block;
  padding: 4px 10px 6px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar-section-label-data {
  margin-top: 12px;
}

.top-nav {
  display: grid;
  width: 100%;
  gap: 5px;
}

.top-nav .tab-button {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #64748b;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

.top-nav .tab-button:hover {
  border-color: #e2e8f0;
  color: #0f172a;
  background: #f8fafc;
  transform: none;
}

.top-nav .tab-button.active {
  border-color: rgba(20, 184, 166, 0.16);
  color: #0f766e;
  background: linear-gradient(90deg, #f0fdfa 0%, #ecfeff 100%);
  box-shadow: inset 3px 0 0 #14b8a6;
}

:is(.admin-menu-toggle, .inventory-menu-toggle) .sidebar-menu-caret {
  margin-left: auto;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.18s ease;
}

:is(.admin-menu-toggle, .inventory-menu-toggle)[aria-expanded="true"] .sidebar-menu-caret {
  transform: rotate(180deg);
}

.sidebar-submenu {
  display: grid;
  width: calc(100% - 24px);
  margin: 0 0 4px 24px;
  padding: 3px 0 3px 12px;
  gap: 2px;
  border-left: 1px solid #dbe3ec;
}

.sidebar-submenu-button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 11px;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  border: 0;
  border-radius: 9px;
  color: #64748b;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  box-shadow: none;
}

.sidebar-submenu-button .nav-icon {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.sidebar-submenu-button:hover {
  color: #0f172a;
  background: #f8fafc;
  transform: none;
}

.sidebar-submenu-button.active {
  color: #0f766e;
  background: #f0fdfa;
}

.nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.top-metrics {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.top-metric {
  display: grid;
  min-width: 0;
  min-height: 72px;
  padding: 11px 12px;
  align-content: center;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #f8fafc;
  box-shadow: none;
}

.top-metric span {
  color: #64748b;
  font-size: 10px;
  white-space: nowrap;
}

.top-metric strong {
  color: #0f172a;
  font-size: 21px;
  letter-spacing: -0.04em;
}

.sidebar-account {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #edf1f5;
}

.profile-menu {
  width: 100%;
}

.profile-toggle {
  width: 100%;
  min-height: 52px;
  justify-content: flex-start;
  padding: 7px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #334155;
  background: #f8fafc;
}

.profile-toggle:hover {
  border-color: rgba(20, 184, 166, 0.34);
  background: #f0fdfa;
}

.profile-avatar {
  border-radius: 10px;
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  box-shadow: none;
}

.profile-meta strong {
  font-weight: 600;
}

.profile-dropdown {
  top: auto;
  right: auto;
  bottom: 0;
  left: calc(100% + 12px);
  width: 232px;
  border-color: #e2e8f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
}

.profile-menu-item:hover {
  color: #0f766e;
  background: #f0fdfa;
}

.view {
  width: 100%;
  max-width: 1660px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 30px 34px 48px;
}

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

.page-header h1 {
  margin: 3px 0 5px;
  color: #0f172a;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.045em;
}

.page-header p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.section-kicker {
  color: #0d9488;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-status {
  display: inline-flex;
  min-height: 34px;
  padding: 0 12px;
  align-items: center;
  gap: 7px;
  border: 1px solid #d1fae5;
  border-radius: 999px;
  color: #047857;
  background: #ecfdf5;
  font-size: 12px;
  white-space: nowrap;
}

.page-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.workspace {
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  gap: 18px;
}

.converter-layout {
  gap: 18px;
}

.blank-view-panel {
  min-height: calc(100vh - 78px);
  min-height: calc(100dvh - 78px);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.97));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.entry-panel,
.records-panel,
.admin-panel,
.account-card,
.admin-data-card,
.display-settings-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.97));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.entry-panel,
.admin-panel {
  padding: 20px;
}

.records-panel {
  overflow: hidden;
}

.panel-head {
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f5;
}

.panel-head h2 {
  color: #0f172a;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.converter-input-panel .panel-head,
.admin-panel > .panel-head {
  margin-bottom: 18px;
}

.converter-result-head {
  padding: 19px 20px 15px;
  border-bottom: 1px solid #edf1f5;
}

.converter-result-head h2 {
  color: #0f172a;
  font-size: 18px;
}

.converter-result-grid {
  gap: 12px;
  padding: 18px;
}

.converter-result-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(240, 253, 250, 0.94), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: none;
}

.converter-result-card:nth-child(2) {
  background: linear-gradient(145deg, rgba(236, 254, 255, 0.94), rgba(255, 255, 255, 0.98));
}

.converter-result-card:nth-child(3) {
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.converter-result-value {
  color: #0f766e;
}

.converter-presets button {
  border-color: #dbe3ec;
  color: #475569;
  background: #f8fafc;
}

.toolbar {
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: rgba(248, 250, 252, 0.84);
}

.search-box input,
.toolbar select {
  min-height: 40px;
  background-color: #ffffff;
}

.table-wrap {
  min-height: 420px;
  background: rgba(255, 255, 255, 0.78);
}

table {
  color: #334155;
}

thead {
  background: #f8fafc;
}

th {
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.035em;
}

th,
td {
  border-bottom-color: #edf1f5;
}

tbody tr {
  transition: background 0.18s ease;
}

tbody tr:hover {
  background: #f8fffe;
}

td {
  color: #334155;
  font-size: 13px;
}

.empty-state {
  color: #94a3b8;
}

.pagination-bar {
  padding: 13px 16px;
  border-top: 1px solid #edf1f5;
  background: #ffffff;
}

.pagination-summary,
.pagination-size {
  color: #64748b;
  font-size: 12px;
}

.badge {
  border-color: #ccfbf1;
  color: #0f766e;
  background: #f0fdfa;
}

.row-button {
  border-color: #dbe3ec;
  color: #475569;
  background: #ffffff;
  box-shadow: none;
}

.row-button:hover {
  border-color: rgba(20, 184, 166, 0.4);
  color: #0f766e;
  background: #f0fdfa;
}

.row-button.danger,
.danger-button {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff7f7;
  box-shadow: none;
}

.row-button.danger:hover,
.danger-button:hover {
  border-color: #fca5a5;
  color: #991b1b;
  background: #fef2f2;
}

.admin-panel {
  margin-bottom: 18px;
}

.option-grid {
  gap: 12px;
}

.option-card,
.nav-link-form,
.nav-link-row {
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #f8fafc;
  box-shadow: none;
}

.option-card h3 {
  color: #1e293b;
  font-weight: 600;
}

.option-row {
  border-color: #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}

.option-row:hover,
.nav-link-row:hover {
  border-color: rgba(20, 184, 166, 0.34);
}

.drag-handle {
  border-color: #ccfbf1;
  color: #0f766e;
  background: #f0fdfa;
}

.admin-log {
  border-color: #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.account-popover {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.account-card,
.admin-data-card,
.display-settings-card {
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.2);
}

.profile-dropdown-head {
  border-bottom-color: #edf1f5;
  background: #f8fafc;
}

.image-viewer-close {
  border-color: #e2e8f0;
  color: #475569;
  background: rgba(255, 255, 255, 0.96);
}

.upload-box {
  border-color: #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  background: #f8fafc;
}

.upload-box:hover {
  border-color: #14b8a6;
  color: #0f766e;
  background: #f0fdfa;
}

.bg-preview {
  border-color: #dbe3ec;
  border-radius: 12px;
  background-color: #f8fafc;
}

.view:not(.hidden) .page-header,
.view:not(.hidden) > section {
  animation: sub2FadeUp 0.28s ease-out both;
}

.view:not(.hidden) > section {
  animation-delay: 0.04s;
}

@keyframes sub2FadeUp {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .shell {
    padding-left: 224px;
  }

  .topbar {
    width: 224px;
  }

  .sidebar-brand {
    padding-inline: 14px;
  }

  .top-actions {
    padding-inline: 10px;
  }

  .view {
    padding-inline: 24px;
  }

  .workspace,
  .converter-layout {
    grid-template-columns: 1fr;
  }

  .records-panel {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  body {
    background: #f5f7fa;
  }

  .shell {
    width: 100%;
    padding: 0 0 82px;
  }

  .topbar {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    min-height: 70px;
    padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.08);
  }

  .sidebar-brand,
  .sidebar-section-label,
  .top-metrics {
    display: none;
  }

  .top-actions {
    display: grid;
    width: 100%;
    padding: 0;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: stretch;
    gap: 7px;
  }

  .top-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .top-nav .tab-button {
    display: grid;
    min-height: 54px;
    padding: 5px 3px;
    place-items: center;
    align-content: center;
    gap: 2px;
    border-radius: 10px;
    font-size: 10px;
  }

  .top-nav .tab-button.active {
    box-shadow: inset 0 3px 0 #14b8a6;
  }

  .nav-icon {
    width: 19px;
    height: 19px;
  }

  .public-login-button {
    grid-column: 1 / -1;
  }

  .sidebar-account {
    width: 48px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .profile-toggle {
    min-height: 54px;
    padding: 5px;
    justify-content: center;
  }

  .profile-toggle .profile-meta,
  .profile-toggle .profile-caret {
    display: none;
  }

  .profile-avatar {
    width: 34px;
    height: 34px;
  }

  .profile-dropdown {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: auto;
    width: min(78vw, 238px);
    max-height: calc(100dvh - 106px);
    overflow: auto;
  }

  .view {
    min-height: auto;
    padding: 18px 12px 28px;
  }

  .page-header {
    margin-bottom: 16px;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .page-header h1 {
    font-size: 27px;
  }

  .page-header p {
    font-size: 13px;
    line-height: 1.6;
  }

  .page-status {
    min-height: 30px;
  }

  .entry-panel,
  .admin-panel {
    padding: 14px;
  }

  .entry-panel,
  .records-panel,
  .admin-panel {
    border-radius: 13px;
  }

  .toolbar {
    padding: 12px;
  }

  .table-wrap {
    min-height: 330px;
  }

  .pagination-bar {
    padding: 12px;
  }

  .login-screen {
    display: grid;
    width: min(100% - 28px, 430px);
    min-height: 100dvh;
    padding: 20px 0 42px;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 14px;
  }

  .login-panel {
    order: 1;
    gap: 14px;
    padding: 30px 24px 26px;
  }

  .login-portal {
    order: 2;
    padding: 20px;
  }

  .login-status-bar {
    order: 3;
  }

  .login-portal,
  .login-panel {
    width: 100%;
    border-radius: 18px;
  }

  .login-portal-intro {
    margin: 24px 0 15px;
  }

  .login-portal-intro h2 {
    font-size: 24px;
  }

  .login-panel h1 {
    margin-bottom: 10px;
    font-size: 29px;
  }

  .portal-link span:not(.portal-dot) {
    font-size: 15px;
  }

  .portal-link small {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .login-screen {
    width: min(100% - 20px, 390px);
    padding-top: 10px;
  }

  .login-panel {
    padding: 27px 18px 22px;
    border-radius: 18px;
  }

  .login-panel h1 {
    margin-bottom: 8px;
    font-size: 27px;
  }

  .login-panel input {
    min-height: 48px;
  }

  .login-panel .primary-button,
  .login-panel .secondary-button {
    min-height: 50px;
    font-size: 17px;
  }

  .shell {
    width: 100%;
    padding-bottom: 78px;
  }

  .topbar {
    padding-inline: 6px;
  }

  .top-actions {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 4px;
  }

  .top-nav {
    gap: 3px;
  }

  .top-nav .tab-button {
    min-height: 52px;
    padding-inline: 1px;
    font-size: 9px;
  }

  .sidebar-account {
    width: 44px;
  }

  .profile-toggle {
    min-height: 52px;
  }

  .profile-avatar {
    width: 31px;
    height: 31px;
  }

  .view {
    padding-inline: 8px;
  }

  .page-header {
    padding-inline: 4px;
  }

  .page-header h1 {
    font-size: 25px;
  }

  .login-screen {
    width: calc(100% - 16px);
    padding-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view:not(.hidden) .page-header,
  .view:not(.hidden) > section {
    animation: none;
  }
}

/* Screenshot review fixes */
.topbar {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

.top-actions {
  width: 100%;
  min-height: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.top-nav {
  flex: 0 0 auto;
  align-items: stretch;
  justify-content: stretch;
}

.top-metrics {
  flex: 0 0 auto;
}

.sidebar-account {
  flex: 0 0 auto;
}

.view {
  max-width: 1540px;
  margin-right: auto;
  margin-left: 0;
}

.converter-layout {
  align-items: start;
}

.converter-result-panel {
  min-height: 0;
  align-self: start;
}

.converter-result-card {
  min-height: 154px;
  padding: 24px;
}

@media (max-width: 1180px) {
  .view {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .topbar {
    flex-direction: row;
    align-items: stretch;
  }

  .top-actions {
    flex-wrap: initial;
  }

  .converter-result-panel {
    width: 100%;
  }
}

/* Login navigation cleanup and visible website check summary */
.login-portal {
  width: 100%;
  align-content: start;
  gap: 14px;
}

.login-portal .portal-links {
  margin: 0;
}

.login-portal .login-status-bar:hover,
.login-portal .login-status-bar:focus,
.login-portal .login-status-bar:focus-within,
.login-portal .login-status-bar.status-expanded {
  position: static;
  display: grid;
  width: 100%;
  min-height: 54px;
  max-height: none;
  margin: 0;
  padding: 12px 16px;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  overflow: visible;
  transform: none;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  color: #64748b;
  background: rgba(248, 250, 252, 0.94);
  box-shadow: none;
  font-size: 12px;
  cursor: default;
}

.login-portal .login-status-bar {
  position: static;
  display: flex;
  width: 132px;
  min-height: 28px;
  max-height: 28px;
  margin: 0 auto;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  transform: none;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  color: #64748b;
  background: rgba(248, 250, 252, 0.94);
  box-shadow: none;
  font-size: 0;
  cursor: pointer;
  transition: width 0.2s ease, min-height 0.2s ease, padding 0.2s ease, border-radius 0.2s ease;
}

.login-portal .login-status-bar::before {
  display: none;
}

.login-portal .login-status-bar::after {
  display: block;
  color: #64748b;
  content: "网站检测状态";
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.login-portal .login-status-bar:hover::after,
.login-portal .login-status-bar:focus::after,
.login-portal .login-status-bar:focus-within::after,
.login-portal .login-status-bar.status-expanded::after {
  display: none;
}

.login-portal .login-status-bar span,
.login-portal .login-status-bar:hover span,
.login-portal .login-status-bar:focus span,
.login-portal .login-status-bar:focus-within span,
.login-portal .login-status-bar.status-expanded span {
  opacity: 1;
  transform: none;
  white-space: nowrap;
}

.login-portal .login-status-bar .status-ok,
.login-portal .login-status-bar .status-bad {
  display: inline-flex;
  min-height: 30px;
  padding: 0 10px;
  align-items: center;
  border-radius: 999px;
}

.login-portal .login-status-bar .status-ok {
  color: #047857;
  background: #ecfdf5;
}

.login-portal .login-status-bar .status-bad {
  color: #b91c1c;
  background: #fef2f2;
}

.login-recheck-button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  color: #0f766e;
  background: #f0fdfa;
  font-size: 12px;
  font-weight: 600;
}

.login-recheck-button:hover:not(:disabled) {
  border-color: #2dd4bf;
  background: #ccfbf1;
}

.login-recheck-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.login-portal .login-status-bar:not(:hover):not(:focus):not(:focus-within):not(.status-expanded) > span,
.login-portal .login-status-bar:not(:hover):not(:focus):not(:focus-within):not(.status-expanded) > .login-recheck-button {
  display: none;
}

@media (max-width: 760px) {
  .login-portal .login-status-bar:hover,
  .login-portal .login-status-bar:focus,
  .login-portal .login-status-bar:focus-within,
  .login-portal .login-status-bar.status-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 11px;
  }

  .login-portal .login-status-bar > span:first-child {
    grid-column: 1 / -1;
  }

  .login-portal .login-status-bar .status-ok,
  .login-portal .login-status-bar .status-bad {
    justify-content: center;
  }

  .login-recheck-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .blank-view-panel {
    min-height: calc(100dvh - 110px);
  }
}

/* Hidden purchase-entry modal */
body.record-form-open {
  overflow: hidden;
}

.records-workspace {
  display: block;
}

.view:not(.hidden) > .records-workspace {
  animation: none;
}

.records-workspace > .records-panel {
  width: 100%;
  min-height: calc(100vh - 164px);
  min-height: calc(100dvh - 164px);
}

.record-form-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.record-form-dialog {
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
  animation: recordFormIn 180ms ease-out;
}

.record-form-dialog > .panel-head,
.record-form-dialog > .record-form-wide,
.record-form-dialog > .form-actions {
  grid-column: 1 / -1;
}

.record-form-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.record-form-close {
  display: grid;
  width: 36px;
  height: 36px;
  min-height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid #dbe3ec;
  border-radius: 9px;
  color: #64748b;
  background: #f8fafc;
  font-size: 23px;
  line-height: 1;
}

.record-form-close:hover {
  border-color: rgba(20, 184, 166, 0.45);
  color: #0f766e;
  background: #ecfdf5;
}

.toolbar-add-button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 15px;
  white-space: nowrap;
}

.toolbar-add-button span {
  font-size: 18px;
  line-height: 1;
}

@keyframes recordFormIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .record-form-modal {
    place-items: stretch;
    padding: 0;
  }

  .record-form-dialog {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    padding: 16px;
    border: 0;
    border-radius: 0;
  }

  .record-form-dialog > .panel-head,
  .record-form-dialog > .record-form-wide,
  .record-form-dialog > .form-actions {
    grid-column: auto;
  }

  .record-form-dialog label,
  .record-form-dialog .two-col,
  .record-form-dialog .scan-input,
  .record-form-dialog .upload-box,
  .record-form-dialog .form-actions {
    width: 100%;
    min-width: 0;
  }

  .record-form-dialog input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .record-form-dialog select,
  .record-form-dialog textarea,
  .record-form-dialog button,
  .record-form-dialog .secondary-button,
  .record-form-dialog .file-select-button {
    width: 100%;
    max-width: none;
  }

  .toolbar-add-button {
    width: 100%;
  }
}

/* Mobile basic-data list readability */
@media (max-width: 760px) {
  .option-admin .option-grid {
    grid-template-columns: 1fr;
  }

  .option-admin .option-list {
    max-height: none;
  }

  .option-admin .option-list > .option-row {
    grid-template-columns: 28px repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 7px 8px;
    padding: 10px;
  }

  .option-admin .option-list > .option-row > .drag-handle {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .option-admin .option-list > .option-row > span {
    grid-column: 2 / -1;
    grid-row: 1;
    align-self: center;
    overflow: visible;
    padding: 5px 2px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .option-admin .option-list > .option-row > .row-button {
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 38px;
    justify-self: stretch;
  }

  .option-admin .option-list > .option-row > .row-button.edit {
    grid-column: 2;
  }

  .option-admin .option-list > .option-row > .row-button.delete {
    grid-column: 3;
  }
}

/* Editable sidebar brand image */
.settings-logo-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 150px;
  align-items: center;
  gap: 12px 16px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #f8fafc;
}

.settings-logo-copy {
  display: grid;
  gap: 5px;
  color: #1e293b;
}

.settings-logo-copy > span {
  font-size: 14px;
  font-weight: 650;
}

.settings-logo-copy small {
  color: #64748b;
  line-height: 1.5;
}

.settings-logo-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.settings-logo-actions .file-select-button,
.settings-logo-actions .danger-button {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  margin: 0;
  padding: 8px 14px;
}

#siteSettingsForm .brand-logo-preview {
  grid-column: auto;
  width: 150px;
  min-height: 76px;
  height: 76px;
  justify-self: end;
  place-items: center;
  border-radius: 11px;
  color: #94a3b8;
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 900px) {
  .settings-logo-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #siteSettingsForm .brand-logo-preview {
    grid-column: 1 / -1;
    width: 170px;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .settings-logo-control {
    grid-template-columns: 1fr;
    padding: 13px;
  }

  .settings-logo-actions {
    justify-content: stretch;
  }

  .settings-logo-actions .file-select-button,
  .settings-logo-actions .danger-button {
    flex: 1 1 0;
  }

  #siteSettingsForm .brand-logo-preview {
    width: 100%;
    max-width: 180px;
    min-height: 78px;
    height: 78px;
  }
}

/* Sub2API-style mobile header and navigation drawer */
.mobile-app-header,
.mobile-nav-backdrop,
.mobile-drawer-collapse {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .shell {
    padding: calc(68px + env(safe-area-inset-top)) 0 0;
  }

  .mobile-app-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 44;
    display: flex;
    min-height: calc(64px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mobile-menu-toggle,
  .mobile-account-toggle {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    color: #475569;
    background: #f8fafc;
    box-shadow: none;
  }

  .mobile-menu-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
  }

  .mobile-menu-toggle[aria-expanded="true"],
  .mobile-account-toggle[aria-expanded="true"],
  .mobile-menu-toggle:hover,
  .mobile-account-toggle:hover {
    border-color: rgba(20, 184, 166, 0.4);
    color: #0f766e;
    background: #f0fdfa;
    transform: none;
  }

  .mobile-header-brand {
    display: none;
  }

  .mobile-header-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .mobile-header-brand > strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-account-toggle .profile-avatar {
    width: 34px;
    height: 34px;
  }

  body.public-converter-mode .mobile-account-toggle {
    visibility: hidden;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 46;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 23, 42, 0.34);
    box-shadow: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .mobile-nav-backdrop:hover {
    transform: none;
  }

  .topbar {
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    width: min(82vw, 340px);
    max-width: calc(100vw - 44px);
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overscroll-behavior: contain;
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 18px 0 55px rgba(15, 23, 42, 0.16);
    transform: translateX(-104%);
    transition: transform 220ms ease;
  }

  body.mobile-nav-open .topbar {
    transform: translateX(0);
  }

  .sidebar-brand {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: calc(88px + env(safe-area-inset-top));
    flex: 0 0 auto;
    padding: calc(18px + env(safe-area-inset-top)) 20px 16px;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #edf1f5;
  }

  .sidebar-brand .brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .sidebar-brand .brand-copy {
    gap: 5px;
  }

  .sidebar-brand .brand-copy strong {
    font-size: 20px;
    line-height: 1.1;
  }

  .sidebar-brand .brand-copy small {
    display: inline-flex;
    width: max-content;
    max-width: 190px;
    min-height: 24px;
    align-items: center;
    overflow: hidden;
    padding: 3px 9px;
    border-radius: 7px;
    color: #a16207;
    background: #fef3c7;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    padding: 18px 14px calc(16px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .top-nav {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .top-nav .tab-button {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 15px;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #475569;
    background: transparent;
    font-size: 16px;
    box-shadow: none;
  }

  .top-nav .tab-button:hover {
    border-color: #e2e8f0;
    color: #0f172a;
    background: #f8fafc;
  }

  .top-nav .tab-button.active {
    border-color: rgba(20, 184, 166, 0.18);
    color: #0f766e;
    background: linear-gradient(90deg, #f0fdfa 0%, #ecfeff 100%);
    box-shadow: inset 3px 0 0 #14b8a6;
  }

  .top-nav .nav-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .public-login-button {
    grid-column: auto;
  }

  .sidebar-account {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top));
    right: 12px;
    z-index: 62;
    display: block;
    width: min(210px, calc(100vw - 28px));
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
  }

  .sidebar-account .profile-menu {
    width: 100%;
    pointer-events: auto;
  }

  .sidebar-account .profile-toggle {
    display: none;
  }

  .sidebar-account .profile-dropdown {
    position: static;
    width: 100%;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top));
    overflow: auto;
    border-radius: 15px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
  }

  .mobile-drawer-collapse {
    display: flex;
    width: 100%;
    min-height: 50px;
    margin-top: 8px;
    padding: 0 14px;
    align-items: center;
    gap: 13px;
    border: 0;
    border-top: 1px solid #edf1f5;
    border-radius: 0;
    color: #475569;
    background: transparent;
    font-size: 15px;
    box-shadow: none;
  }

  .mobile-drawer-collapse span:first-child {
    font-size: 27px;
    line-height: 1;
  }

  .mobile-drawer-collapse:hover {
    color: #0f766e;
    background: #f0fdfa;
    transform: none;
  }

  .view {
    padding: 18px 12px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar {
    transition: none;
  }
}

/* Desktop top strip and account menu */
@media (min-width: 761px) {
  .shell::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 252px;
    z-index: 40;
    height: 74px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
    pointer-events: none;
  }

  .view {
    position: relative;
    z-index: auto;
    padding-top: 102px;
  }

  .topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sidebar-account {
    position: fixed;
    top: 14px;
    right: 24px;
    z-index: 45;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .sidebar-account .profile-menu {
    width: auto;
  }

  .sidebar-account .profile-toggle {
    width: auto;
    min-width: 132px;
    min-height: 46px;
    padding: 6px 8px 6px 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
  }

  .sidebar-account .profile-toggle:hover,
  .sidebar-account .profile-toggle[aria-expanded="true"] {
    background: rgba(15, 118, 110, 0.055);
    box-shadow: none;
    transform: none;
  }

  .sidebar-account .profile-dropdown {
    top: calc(100% + 10px);
    right: 0;
    bottom: auto;
    left: auto;
    width: 245px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .shell::before {
    left: 224px;
  }
}


@media (min-width: 761px) {
  .sidebar-brand {
    min-height: 74px;
    padding-top: 13px;
    padding-bottom: 13px;
  }
}


/* Unified white-surface opacity */
.entry-panel,
.records-panel,
.admin-panel,
.account-card,
.admin-data-card,
.display-settings-card,
.record-form-dialog,
.option-category-select-wrap,
.option-card,
.option-row,
.nav-link-row,
.converter-card,
.converter-result-card,
.table-wrap,
.pagination-bar,
.toolbar,
.profile-dropdown,
.profile-dropdown-head,
.scanner-panel,
.background-settings-panel,
.background-control-card,
.background-preview-card {
  background-color: rgba(255, 255, 255, var(--panel-opacity));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.converter-result-card {
  background: linear-gradient(145deg, rgba(240, 253, 250, calc(var(--panel-opacity) * 0.94)), rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)));
}

.converter-result-card:nth-child(2) {
  background: linear-gradient(145deg, rgba(236, 254, 255, calc(var(--panel-opacity) * 0.94)), rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)));
}

.converter-result-card:nth-child(3) {
  background: linear-gradient(145deg, rgba(248, 250, 252, calc(var(--panel-opacity) * 0.98)), rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)));
}

.table-wrap {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.78));
}

.pagination-bar,
.option-row {
  background: rgba(255, 255, 255, var(--panel-opacity));
}

.profile-dropdown,
.scanner-panel,
.record-form-dialog {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98));
}

.topbar,
.mobile-app-header {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96));
}

.profile-dropdown-head,
.option-category-select-wrap,
.toolbar {
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.9));
}

@media (max-width: 760px) {
  .mobile-app-header,
  .topbar {
    background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96));
  }
}

@media (min-width: 761px) {
  .shell::before {
    background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96));
  }
}


/* Keep body content beneath the strip while fixed page titles stay above it */
@media (min-width: 761px) {
  .shell::before {
    isolation: isolate;
  }

  .view {
    z-index: auto;
  }
}

@media (max-width: 760px) {
  .mobile-app-header {
    isolation: isolate;
    overflow: hidden;
  }

  .view {
    position: relative;
    z-index: 1;
  }
}


/* Desktop page titles live inside the fixed white top strip */
@media (min-width: 761px) {
  body:not(.login-mode) .view > .page-header {
    position: fixed;
    top: 0;
    right: 190px;
    left: 286px;
    z-index: 41;
    height: 74px;
    min-height: 74px;
    margin: 0;
    padding: 8px 0;
    align-items: center;
    --top-title-scale: 1;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  body:not(.login-mode) .view > .page-header > div {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  body:not(.login-mode) .view > .page-header .section-kicker {
    display: none !important;
    margin-bottom: 4px !important;
    overflow: hidden;
    font-size: calc(10px * var(--top-title-scale)) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.14em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.login-mode) .view > .page-header h1 {
    margin: 0 0 4px !important;
    overflow: hidden;
    font-size: calc(24px * var(--top-title-scale)) !important;
    font-weight: 650 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.login-mode) .view > .page-header p {
    margin: 0 !important;
    overflow: hidden;
    font-size: calc(12px * var(--top-title-scale)) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body:not(.login-mode) .view > .page-header {
    left: 246px;
  }
}


@media (min-width: 761px) {
  body:not(.login-mode) #adminView.view > .page-header .section-kicker,
  body:not(.login-mode) #adminView.view > .page-header h1,
  body:not(.login-mode) #adminView.view > .page-header p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }
}


/* Desktop and mobile responsive audit fixes */
body.public-converter-mode .top-nav {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

body.public-converter-mode .top-nav .tab-button {
  flex: 0 0 auto;
  min-height: 44px;
}

body.public-converter-mode .top-nav .public-login-button {
  margin-top: auto;
}

.page-header > div {
  min-width: 0;
  max-width: 980px;
}

.page-header p {
  overflow-wrap: anywhere;
}

.converter-layout > *,
.workspace > *,
.admin-grid > * {
  min-width: 0;
}

@media (min-width: 1181px) {
  .converter-layout {
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  }

  .converter-input-panel {
    width: 100%;
  }

  .converter-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .view {
    padding-right: 22px;
    padding-left: 22px;
  }

  .converter-layout,
  .workspace,
  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .converter-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .shell {
    min-width: 0;
  }

  .view {
    width: 100%;
    max-width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    overflow-x: clip;
  }

  .page-header {
    width: 100%;
  }

  .page-header > div {
    width: 100%;
  }

  .converter-layout,
  .workspace,
  .admin-grid,
  #siteSettingsForm {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel {
    min-width: 0;
    max-width: 100%;
  }

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

  .converter-result-card {
    min-width: 0;
  }

  .option-category-select-wrap {
    max-width: 100%;
    overscroll-behavior-x: contain;
  }

  body.public-converter-mode .top-nav .public-login-button {
    margin-top: auto;
  }
}

@media (max-width: 380px) {
  .view {
    padding-right: 8px;
    padding-left: 8px;
  }

  .converter-result-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .mobile-menu-toggle,
  .mobile-account-toggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }
}

@media (max-width: 640px) {
  .option-category-select-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 11px;
  }

  .option-category-select-wrap select {
    width: 100%;
    max-width: none;
  }
}


/* Compact filter-style option category dropdown */
.option-category-select-wrap {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.option-category-select-wrap select {
  width: 190px;
  min-width: 190px;
  min-height: 42px;
  padding-left: 14px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  color: #334155;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98));
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  font-size: 14px;
  font-weight: 500;
}

.option-category-select-wrap select:hover {
  border-color: rgba(20, 184, 166, 0.48);
}

.option-category-select-wrap select:focus {
  border-color: #14b8a6;
  outline: 3px solid rgba(20, 184, 166, 0.12);
  box-shadow: 0 3px 12px rgba(15, 118, 110, 0.1);
}

.option-category-select-wrap option {
  color: #334155;
  background: #ffffff;
}

@media (max-width: 640px) {
  .option-category-select-wrap {
    width: 100%;
    margin-bottom: 12px;
    padding: 0;
  }

  .option-category-select-wrap select {
    width: 100%;
    min-width: 0;
  }
}


/* Softer administration typography and option records */
#adminView .page-header .section-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
}

#adminView .page-header h1 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
}

#adminView .page-header p {
  max-width: 900px;
  color: #64748b;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}

#adminView .admin-panel > .panel-head h2,
#adminView .option-card h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

#adminView .option-category-select-wrap select {
  color: #475569;
  font-weight: 400;
}

#adminView .option-row {
  min-height: 52px;
  padding: 9px 10px;
  border-color: rgba(203, 213, 225, 0.72);
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.76));
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.025);
}

#adminView .option-row:hover {
  border-color: rgba(20, 184, 166, 0.25);
  background: rgba(248, 253, 252, calc(var(--panel-opacity) * 0.88));
  box-shadow: 0 5px 14px rgba(15, 118, 110, 0.055);
}

#adminView .option-row > span {
  color: #334155;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

#adminView .drag-handle {
  color: #0f8b82;
  background: rgba(20, 184, 166, 0.065);
}

#adminView .option-row .row-button {
  min-width: 54px;
  font-size: 13px;
  font-weight: 400;
}

#adminView .option-row .row-button.edit {
  color: #3f5f57;
  background: rgba(15, 118, 110, 0.075);
}

#adminView .option-row .row-button.delete {
  color: #b4535c;
  background: rgba(190, 24, 93, 0.065);
}

@media (max-width: 640px) {
  #adminView .page-header h1 {
    font-size: 27px;
    font-weight: 500;
  }

  #adminView .page-header p {
    font-size: 13px;
  }

  #adminView .option-row {
    padding: 9px;
  }
}


@media (max-width: 420px) {
  #adminView .page-header h1 {
    font-size: 25px;
  }
}


/* Custom option category dropdown without native black frame */
.option-category-dropdown {
  position: relative;
  width: 190px;
  max-width: 100%;
}

.option-category-toggle {
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: 0 13px 0 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  color: #334155;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98));
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  outline: none;
}

.option-category-toggle:hover {
  border-color: rgba(20, 184, 166, 0.48);
  background: rgba(248, 253, 252, calc(var(--panel-opacity) * 0.98));
}

.option-category-toggle:focus-visible,
.option-category-toggle[aria-expanded="true"] {
  border-color: #14b8a6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12), 0 5px 15px rgba(15, 118, 110, 0.1);
}

.option-category-arrow {
  color: #0f8b82;
  font-size: 17px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.option-category-toggle[aria-expanded="true"] .option-category-arrow {
  transform: rotate(180deg);
}

.option-category-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 80;
  display: grid;
  width: 100%;
  padding: 6px;
  gap: 2px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.option-category-menu button {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  color: #475569;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  outline: none;
}

.option-category-menu button:hover,
.option-category-menu button:focus-visible {
  color: #0f766e;
  background: #f0fdfa;
  outline: none;
}

.option-category-menu button.active {
  color: #0f766e;
  background: linear-gradient(90deg, #ecfdf5, #f0fdfa);
}

@media (max-width: 640px) {
  .option-category-dropdown {
    width: 100%;
  }
}


/* Keep the custom parameter dropdown fully visible */
#adminBasicPanel {
  overflow: visible;
}

#adminBasicPanel .option-category-select-wrap,
#adminBasicPanel .option-category-dropdown {
  position: relative;
  z-index: 90;
  overflow: visible;
}

#adminBasicPanel .option-category-menu {
  z-index: 120;
  max-height: min(360px, calc(100vh - 220px));
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* Lightweight profile dropdown inspired by compact account menus */
.profile-dropdown {
  width: 218px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 10px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.99));
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(14px);
}

.profile-dropdown-head {
  gap: 2px;
  padding: 13px 15px 11px;
  border-bottom: 1px solid #eef2f6;
  background: transparent;
}

.profile-dropdown-head strong,
.profile-meta strong {
  color: #1e293b;
  font-weight: 400;
}

.profile-dropdown-head strong {
  font-size: 14px;
  line-height: 1.35;
}

.profile-dropdown-head span,
.profile-meta small {
  color: #64748b;
  font-weight: 400;
}

.profile-dropdown-head span {
  font-size: 12px;
  line-height: 1.35;
}

.profile-menu-item {
  min-height: 42px;
  gap: 11px;
  padding: 0 15px;
  color: #334155;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
}

.profile-menu-item .menu-icon {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
  color: #475569;
  stroke-width: 1.65;
}

.profile-menu-item:hover {
  color: #0f766e;
  background: #f8fafc;
}

.profile-menu-divider,
.profile-menu-item.logout {
  border-top-color: #eef2f6;
}

.profile-menu-item.logout {
  color: #ef3340;
}

.profile-menu-item.logout .menu-icon {
  color: #ef3340;
}

@media (max-width: 760px) {
  .sidebar-account {
    width: min(218px, calc(100vw - 24px));
  }

  .sidebar-account .profile-dropdown {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  }
}

@media (min-width: 761px) {
  .sidebar-account .profile-dropdown {
    width: 218px;
  }
}


/* Optional sidebar subtitle: empty by default, plain text when provided */
.sidebar-brand .brand-copy small,
.sidebar-brand .brand-copy small:not(.hidden) {
  display: block;
  width: auto;
  max-width: 190px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: #64748b;
  background: transparent;
  font-size: 11px;
  line-height: 1.35;
}

.sidebar-brand .brand-copy small.hidden,
.sidebar-brand .brand-copy small:empty {
  display: none;
}


/* Visible feedback while a full-site backup is being restored */
.import-button.is-busy {
  opacity: 0.62;
  cursor: wait;
  pointer-events: none;
}

.cabinet-info-host {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.72));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.cabinet-info-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(620px, calc(100dvh - 136px), 1100px);
  min-height: 0;
  border: 0;
  background: transparent;
}

body.cabinet-record-form-open,
body.cabinet-booking-form-open,
body.cabinet-voyage-form-open,
body.cabinet-fcl-quote-form-open,
body.cabinet-payment-form-open,
body.cabinet-payment-detail-open {
  overflow: hidden;
}

.cabinet-record-form-modal,
.cabinet-booking-form-modal,
.cabinet-voyage-form-modal,
.cabinet-fcl-quote-form-modal,
.cabinet-payment-form-modal,
.cabinet-payment-detail-modal {
  z-index: 260;
  padding: 0;
  overflow: hidden;
}

.cabinet-record-form-modal.is-preparing,
.cabinet-booking-form-modal.is-preparing,
.cabinet-voyage-form-modal.is-preparing,
.cabinet-fcl-quote-form-modal.is-preparing,
.cabinet-payment-form-modal.is-preparing,
.cabinet-payment-detail-modal.is-preparing {
  visibility: hidden;
}

.cabinet-record-dialog-frame,
.cabinet-booking-dialog-frame,
.cabinet-voyage-dialog-frame,
.cabinet-fcl-quote-dialog-frame,
.cabinet-payment-dialog-frame,
.cabinet-payment-detail-dialog-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

@media (max-width: 760px) {
  body .record-form-modal.cabinet-record-form-modal:not(.hidden),
  body .record-form-modal.cabinet-booking-form-modal:not(.hidden),
  body .record-form-modal.cabinet-voyage-form-modal:not(.hidden),
  body .record-form-modal.cabinet-fcl-quote-form-modal:not(.hidden),
  body .record-form-modal.cabinet-payment-form-modal:not(.hidden),
  body .record-form-modal.cabinet-payment-detail-modal:not(.hidden) {
    display: grid !important;
    height: 100dvh !important;
    padding: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .cabinet-info-frame {
    height: clamp(560px, calc(100dvh - 140px), 900px);
  }
}

@media (max-width: 760px) {
  #wholeCabinetView,
  #wholeCabinetView .page-header,
  #wholeCabinetView .cabinet-info-host {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .cabinet-info-host {
    contain: inline-size;
  }

  .cabinet-info-frame {
    height: clamp(440px, calc(100dvh - 152px), 760px);
    min-height: 0;
  }
}

.admin-action-tile.is-busy {
  opacity: 0.72;
  cursor: wait;
}

.admin-action-tile.is-busy > .menu-icon {
  animation: adminBackupPulse 0.9s ease-in-out infinite alternate;
}

.admin-action-tile.is-success {
  border-color: rgba(16, 185, 129, 0.48);
  background: rgba(236, 253, 245, calc(0.72 + var(--panel-opacity) * 0.2));
}

@keyframes adminBackupPulse {
  from { transform: translateY(0); opacity: 0.56; }
  to { transform: translateY(2px); opacity: 1; }
}

body.backup-restore-busy,
body.backup-restore-busy * {
  cursor: wait !important;
}


/* Full-site base opacity: every light surface follows the same desktop/mobile setting */
body:not(.login-mode) :where(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea
) {
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .blank-view-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .scanner-panel,
  .record-form-dialog,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card
) {
  background-color: rgba(255, 255, 255, var(--panel-opacity)) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body:not(.login-mode) :where(
  .secondary-button,
  .file-select-button,
  .converter-presets button,
  .row-button:not(.danger),
  .drag-handle,
  .option-category-toggle,
  .option-category-menu button,
  .image-action-button,
  .pagination-button
) {
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.94)) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body:not(.login-mode) table thead,
body:not(.login-mode) table thead tr,
body:not(.login-mode) table th {
  background-color: rgba(248, 250, 252, calc(var(--panel-opacity) * 0.96)) !important;
}

body:not(.login-mode) table tbody tr {
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.38)) !important;
}

body:not(.login-mode) table tbody tr:hover {
  background-color: rgba(240, 253, 250, calc(var(--panel-opacity) * 0.72)) !important;
}

body:not(.login-mode) :where(.row-button.danger, .danger-button) {
  background-color: rgba(255, 247, 247, calc(var(--panel-opacity) * 0.9)) !important;
}

body:not(.login-mode) :where(.badge, .warranty-active, .image-count-button) {
  background-color: rgba(240, 253, 250, calc(var(--panel-opacity) * 0.88)) !important;
}

body:not(.login-mode) .upload-box {
  border-radius: 8px;
  border-color: rgba(203, 213, 225, calc(var(--panel-opacity) * 0.78));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--panel-opacity) * 0.45));
}

body:not(.login-mode) .upload-box span {
  color: rgba(71, 85, 105, calc(0.62 + var(--panel-opacity) * 0.28));
}

body.panel-opacity-zero:not(.login-mode) :where(
  .upload-box,
  .upload-box .file-select-button,
  .upload-box span
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  body:not(.login-mode) :where(
    .topbar,
    .mobile-app-header,
    .sidebar-brand,
    .top-actions,
    .mobile-drawer-collapse
  ) {
    background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96)) !important;
  }
}

@media (min-width: 761px) {
  body:not(.login-mode) .shell::before {
    background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96)) !important;
  }
}


/* At exactly 0% opacity, surfaces become clear glass without any frosted blur */
body.panel-opacity-zero:not(.login-mode) *,
body.panel-opacity-zero:not(.login-mode) *::before,
body.panel-opacity-zero:not(.login-mode) *::after,
body.panel-opacity-zero:not(.login-mode) .shell::before {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* End-of-file opacity parity: final winner for all desktop/mobile surfaces */
body:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count
) {
  border-color: rgba(226, 232, 240, calc(0.36 + var(--panel-opacity) * 0.24)) !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.42)),
    0 16px 40px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.05)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
  backdrop-filter: blur(8px) saturate(1.02) !important;
}

body:not(.login-mode) :where(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .secondary-button,
  .file-select-button,
  .background-upload-button,
  .row-button:not(.danger),
  .option-category-toggle,
  .option-category-menu button,
  .image-action-button,
  .pagination-button,
  .image-viewer-close,
  .image-viewer-nav
) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.48)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.48)) !important;
}

/* Last-rule opacity parity: every desktop/mobile window matches converter transparency */
body:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count
) {
  border-color: rgba(226, 232, 240, calc(0.36 + var(--panel-opacity) * 0.24)) !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.42)),
    0 16px 40px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.05)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
  backdrop-filter: blur(8px) saturate(1.02) !important;
}

body:not(.login-mode) :where(
  .record-form-modal,
  .scanner-modal,
  .image-viewer,
  .account-overlay
) {
  background: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.18)) !important;
  background-color: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.18)) !important;
}

body:not(.login-mode) :where(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .secondary-button,
  .file-select-button,
  .background-upload-button,
  .converter-presets button,
  .row-button:not(.danger),
  .drag-handle,
  .option-category-toggle,
  .option-category-menu button,
  .image-action-button,
  .pagination-button,
  .image-viewer-close,
  .image-viewer-nav
) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.48)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.48)) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
  backdrop-filter: blur(6px) saturate(1.02) !important;
}

body:not(.login-mode) :where(
  .option-grid,
  .nav-manager,
  .settings-grid,
  .records-body-mobile,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list
) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.34)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.34)) !important;
}

body:not(.login-mode) :where(table thead, table thead tr, table th, table tbody tr, .mobile-record-card) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.24)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.24)) !important;
}

body:not(.login-mode) :where(table tbody tr:hover, table tbody tr.surface-row-selected, .mobile-record-card:hover, .mobile-record-card.surface-row-selected, .option-row:hover, .nav-link-row:hover) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.62)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.62)) !important;
}

body.panel-opacity-zero:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count,
  .record-form-modal,
  .scanner-modal,
  .image-viewer,
  .account-overlay,
  .option-grid,
  .nav-manager,
  .settings-grid,
  .records-body-mobile,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list,
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea
) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Ultimate opacity parity: keep every app surface aligned after all overrides */
body:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count
) {
  border-color: rgba(226, 232, 240, calc(0.36 + var(--panel-opacity) * 0.24)) !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.42)),
    0 16px 40px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.05)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
  backdrop-filter: blur(8px) saturate(1.02) !important;
}

body:not(.login-mode) :where(
  .record-form-modal,
  .scanner-modal,
  .image-viewer,
  .account-overlay
) {
  background: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.18)) !important;
  background-color: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.18)) !important;
}

body:not(.login-mode) :where(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .secondary-button,
  .file-select-button,
  .background-upload-button,
  .converter-presets button,
  .row-button:not(.danger),
  .drag-handle,
  .option-category-toggle,
  .option-category-menu button,
  .image-action-button,
  .pagination-button,
  .image-viewer-close,
  .image-viewer-nav
) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.48)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.48)) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
  backdrop-filter: blur(6px) saturate(1.02) !important;
}

body:not(.login-mode) :where(
  .option-grid,
  .nav-manager,
  .settings-grid,
  .records-body-mobile,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list
) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.34)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.34)) !important;
}

body:not(.login-mode) :where(table thead, table thead tr, table th, table tbody tr, .mobile-record-card) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.24)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.24)) !important;
}

body:not(.login-mode) :where(table tbody tr:hover, table tbody tr.surface-row-selected, .mobile-record-card:hover, .mobile-record-card.surface-row-selected, .option-row:hover, .nav-link-row:hover) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.62)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.62)) !important;
}

body.panel-opacity-zero:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count,
  .record-form-modal,
  .scanner-modal,
  .image-viewer,
  .account-overlay,
  .option-grid,
  .nav-manager,
  .settings-grid,
  .records-body-mobile,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list,
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea
) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Final audited surface opacity: desktop and mobile use one converter-like layer */
body:not(.login-mode) {
  --surface-glass-opacity: calc(var(--panel-opacity) * 0.56);
  --surface-field-opacity: calc(var(--panel-opacity) * 0.48);
  --surface-soft-opacity: calc(var(--panel-opacity) * 0.34);
  --surface-row-opacity: calc(var(--panel-opacity) * 0.24);
  --surface-active-opacity: calc(var(--panel-opacity) * 0.62);
}

body:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count
) {
  border-color: rgba(226, 232, 240, calc(0.36 + var(--panel-opacity) * 0.24)) !important;
  background: rgba(255, 255, 255, var(--surface-glass-opacity)) !important;
  background-color: rgba(255, 255, 255, var(--surface-glass-opacity)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.42)),
    0 16px 40px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.05)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
  backdrop-filter: blur(8px) saturate(1.02) !important;
}

body:not(.login-mode) :where(
  .record-form-modal,
  .scanner-modal,
  .image-viewer,
  .account-overlay
) {
  background: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.18)) !important;
  background-color: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.18)) !important;
}

body:not(.login-mode) :where(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .secondary-button,
  .file-select-button,
  .background-upload-button,
  .converter-presets button,
  .row-button:not(.danger),
  .drag-handle,
  .option-category-toggle,
  .option-category-menu button,
  .image-action-button,
  .pagination-button,
  .image-viewer-close,
  .image-viewer-nav
) {
  background: rgba(255, 255, 255, var(--surface-field-opacity)) !important;
  background-color: rgba(255, 255, 255, var(--surface-field-opacity)) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
  backdrop-filter: blur(6px) saturate(1.02) !important;
}

body:not(.login-mode) :where(
  .option-grid,
  .nav-manager,
  .settings-grid,
  .records-body-mobile,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list
) {
  background: rgba(255, 255, 255, var(--surface-soft-opacity)) !important;
  background-color: rgba(255, 255, 255, var(--surface-soft-opacity)) !important;
}

body:not(.login-mode) :where(table thead, table thead tr, table th, table tbody tr, .mobile-record-card) {
  background: rgba(255, 255, 255, var(--surface-row-opacity)) !important;
  background-color: rgba(255, 255, 255, var(--surface-row-opacity)) !important;
}

body:not(.login-mode) :where(table tbody tr:hover, table tbody tr.surface-row-selected, .mobile-record-card:hover, .mobile-record-card.surface-row-selected, .option-row:hover, .nav-link-row:hover) {
  background: rgba(255, 255, 255, var(--surface-active-opacity)) !important;
  background-color: rgba(255, 255, 255, var(--surface-active-opacity)) !important;
}

body.panel-opacity-zero:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count,
  .record-form-modal,
  .scanner-modal,
  .image-viewer,
  .account-overlay,
  .option-grid,
  .nav-manager,
  .settings-grid,
  .records-body-mobile,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list,
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea
) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.login-mode.login-panel-opacity-zero .login-screen *,
body.login-mode.login-panel-opacity-zero .login-screen *::before,
body.login-mode.login-panel-opacity-zero .login-screen *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* Unified row interaction: hover, focus and click reveal a clean white frame */
body:not(.login-mode) :where(#recordsBody tr, .option-row, .nav-link-row) {
  transition: background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body:not(.login-mode) :where(#recordsBody tr, .option-row, .nav-link-row):is(:hover, :focus-within, .surface-row-selected) {
  border-color: rgba(203, 213, 225, var(--panel-opacity)) !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.94)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--panel-opacity) * 0.76)), 0 5px 16px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.08)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.login-mode) :where(.option-row, .nav-link-row):is(:hover, :focus-within, .surface-row-selected) {
  border-radius: 10px;
}

body:not(.login-mode) #recordsBody tr.surface-row-selected td,
body:not(.login-mode) #recordsBody tr:hover td,
body:not(.login-mode) #recordsBody tr:focus-within td {
  background: transparent !important;
}

@media (max-width: 760px) {
  body:not(.login-mode) :where(#recordsBody tr, .option-row, .nav-link-row):is(:hover, :focus-within, .surface-row-selected) {
    background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--panel-opacity) * 0.82)), 0 4px 12px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.07)) !important;
  }
}


/* Reliable purchase-row highlight for border-collapse tables */
body:not(.login-mode) #recordsBody tr:is(:hover, :focus, :focus-within, .surface-row-selected) > td {
  border-top: 2px solid rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)) !important;
  border-bottom: 2px solid rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)) !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96)) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.07)) !important;
}

body:not(.login-mode) #recordsBody tr:is(:hover, :focus, :focus-within, .surface-row-selected) > td:first-child {
  border-left: 2px solid rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)) !important;
  border-radius: 10px 0 0 10px;
}

body:not(.login-mode) #recordsBody tr:is(:hover, :focus, :focus-within, .surface-row-selected) > td:last-child {
  border-right: 2px solid rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)) !important;
  border-radius: 0 10px 10px 0;
}

body:not(.login-mode) #recordsBody tr:focus {
  outline: none;
}

body:not(.login-mode) #recordsBody tr.surface-row-selected > td {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)) !important;
}

@media (max-width: 760px) {
  body:not(.login-mode) #recordsBody tr:is(:hover, :focus, :focus-within, .surface-row-selected) > td {
    background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98)) !important;
  }
}


/* Zero panel opacity must stay fully transparent on desktop and mobile */
body.panel-opacity-zero:not(.login-mode) :where(
  #recordsBody tr,
  #recordsBody td,
  .option-row,
  .nav-link-row
):is(:hover, :focus, :focus-within, .surface-row-selected),
body.panel-opacity-zero:not(.login-mode) #recordsBody tr:is(:hover, :focus, :focus-within, .surface-row-selected) > td {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* Keep all white-strip headings clipped inside their own bars */
body:not(.login-mode) .view > .page-header {
  contain: layout paint;
  clip-path: inset(0);
}

.panel-head {
  min-width: 0;
  overflow: hidden;
}

.panel-head > :first-child,
.panel-head h2 {
  min-width: 0;
  max-width: 100%;
}

.panel-head h2 {
  overflow: hidden;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-form-dialog > .panel-head {
  position: sticky;
  top: -22px;
  z-index: 8;
  margin: -22px -22px 2px;
  padding: 15px 22px 13px;
  overflow: hidden;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.98));
  box-shadow: 0 1px 0 rgba(226, 232, 240, calc(var(--panel-opacity) * 0.92));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  contain: layout paint;
}

.record-form-dialog > .panel-head #formTitle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-form-dialog > .panel-head .record-form-head-actions {
  flex: 0 0 auto;
  min-width: 0;
}

@media (max-width: 760px) {
  .record-form-dialog > .panel-head {
    top: -16px;
    margin: -16px -16px 2px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  }
}


/* Login transparency must include the background veil and every inner white surface */
.login-screen::before {
  background:
    radial-gradient(circle at 14% 14%, rgba(20, 184, 166, calc(var(--login-bg-overlay) * 0.17)), transparent 30%),
    radial-gradient(circle at 84% 8%, rgba(6, 182, 212, calc(var(--login-bg-overlay) * 0.13)), transparent 26%),
    linear-gradient(
      rgba(248, 250, 252, calc(var(--login-bg-overlay) * 0.72)),
      rgba(248, 250, 252, calc(var(--login-bg-overlay) * 0.82))
    );
}

body.login-mode :where(
  .login-portal,
  .login-panel,
  .portal-link,
  .login-panel input,
  .login-panel .secondary-button,
  .login-status-bar,
  .login-portal .login-status-bar,
  .login-portal .login-status-bar:hover,
  .login-portal .login-status-bar:focus,
  .login-portal .login-status-bar:focus-within,
  .login-portal .login-status-bar.status-expanded
) {
  background: rgba(255, 255, 255, var(--login-panel-opacity)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.login-mode .portal-link:hover,
body.login-mode .login-panel .secondary-button:hover {
  background: rgba(255, 255, 255, var(--login-panel-opacity)) !important;
}

body.login-mode.login-panel-opacity-zero :where(
  .login-portal,
  .login-panel,
  .portal-link,
  .login-panel input,
  .login-panel .secondary-button,
  .login-status-bar,
  .login-portal .login-status-bar
) {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.login-mode.login-panel-opacity-zero .login-screen::before {
  background: transparent !important;
}


/* Mobile record actions stay in the true final column and never overlap data */
@media (max-width: 760px) {
  #recordsTable th:last-child,
  #recordsTable td:last-child,
  #recordsTable .action-column {
    position: static !important;
    right: auto !important;
    z-index: auto !important;
    min-width: 150px;
    width: 150px;
    background: transparent !important;
  }

  #recordsTable .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(60px, 1fr));
    width: 138px;
    min-width: 138px;
    gap: 8px;
    justify-content: stretch;
  }

  #recordsTable .row-button {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    white-space: nowrap;
  }

  #recordsTable th.action-column {
    text-align: center;
  }
}

/* Basic-data rows keep actions clear of the right scrollbar */
#adminView .option-list {
  padding-right: 18px;
  scrollbar-gutter: stable;
}

#adminView .option-row {
  grid-template-columns: 32px minmax(0, 1fr) 64px 64px;
  column-gap: 12px;
}

#adminView .option-row .row-button {
  width: 64px;
  justify-self: stretch;
}

@media (max-width: 760px) {
  #adminView .option-list {
    padding-right: 12px;
    max-height: min(62vh, 560px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  #adminView .option-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  #adminView .option-row > .drag-handle {
    grid-column: 1;
    grid-row: 1;
  }

  #adminView .option-row > span {
    grid-column: 2;
    grid-row: 1;
    min-height: 38px;
    display: flex;
    align-items: center;
  }

  #adminView .option-row > .row-button {
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 40px;
  }

  #adminView .option-row > .row-button.edit {
    grid-column: 1 / 2;
  }

  #adminView .option-row > .row-button.delete {
    grid-column: 2 / 3;
  }
}

/* Mobile purchase dialog: equal widths and true shared opacity */
.record-form-dialog,
.record-form-dialog * {
  box-sizing: border-box;
}

body:not(.login-mode) .record-form-dialog :where(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .secondary-button,
  .file-select-button,
  .upload-box
) {
  background: rgba(255, 255, 255, var(--panel-opacity)) !important;
  background-color: rgba(255, 255, 255, var(--panel-opacity)) !important;
}

body:not(.login-mode) .record-form-dialog .upload-box span {
  background: transparent !important;
  background-color: transparent !important;
}

@media (max-width: 760px) {
  .record-form-dialog {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  .record-form-dialog :where(
    label,
    .record-form-wide,
    .two-col,
    .scan-input,
    .upload-box,
    .form-actions
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .record-form-dialog .two-col,
  .record-form-dialog .scan-input,
  .record-form-dialog .upload-box,
  .record-form-dialog .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .record-form-dialog :where(
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea,
    button,
    .secondary-button,
    .file-select-button,
    .primary-button
  ) {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .record-form-dialog input[type="date"],
  .record-form-dialog input[type="number"],
  .record-form-dialog select {
    -webkit-appearance: none;
    appearance: none;
  }

  .record-form-dialog .upload-box {
    gap: 8px;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .record-form-dialog .upload-box .file-select-button {
    min-height: 52px;
    justify-content: center;
    align-items: center;
  }

  .record-form-dialog .upload-box span {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0 2px;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
}

body.panel-opacity-zero:not(.login-mode) .record-form-dialog :where(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .secondary-button,
  .file-select-button,
  .upload-box,
  .upload-box span
) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Fresh glass palette after opacity tuning */
body:not(.login-mode) :where(.account-modal, #displaySettingsPopover, .record-form-modal) {
  background:
    radial-gradient(circle at 14% 10%, rgba(45, 212, 191, 0.08), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(186, 230, 253, 0.10), transparent 32%),
    rgba(241, 248, 247, 0.14) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.04) brightness(1.03);
  backdrop-filter: blur(7px) saturate(1.04) brightness(1.03);
}

body:not(.login-mode) :where(
  .display-settings-card,
  .account-card,
  .admin-data-card,
  .record-form-dialog
) {
  border-color: rgba(255, 255, 255, calc(0.58 + var(--panel-opacity) * 0.30)) !important;
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, calc(var(--panel-opacity) * 0.96)),
      rgba(250, 255, 253, calc(var(--panel-opacity) * 0.86)) 48%,
      rgba(239, 253, 250, calc(var(--panel-opacity) * 0.76))
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.88)),
    0 22px 62px rgba(15, 23, 42, calc(0.07 + var(--panel-opacity) * 0.06)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.06) brightness(1.04);
  backdrop-filter: blur(16px) saturate(1.06) brightness(1.04);
}

body:not(.login-mode) :where(
  .background-settings-card,
  .display-settings-card input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .display-settings-card select,
  .display-settings-card textarea,
  .display-settings-card .file-select-button,
  .display-settings-card .secondary-button,
  .record-form-dialog input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .record-form-dialog select,
  .record-form-dialog textarea,
  .record-form-dialog .secondary-button,
  .record-form-dialog .file-select-button
) {
  border-color: rgba(226, 240, 238, calc(0.50 + var(--panel-opacity) * 0.24)) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, calc(var(--panel-opacity) * 0.94)),
      rgba(250, 255, 253, calc(var(--panel-opacity) * 0.80))
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.82)),
    0 7px 18px rgba(15, 118, 110, calc(var(--panel-opacity) * 0.025)) !important;
}

body:not(.login-mode) :where(.display-settings-card .primary-button, .record-form-dialog .primary-button) {
  background: linear-gradient(135deg, #14b8a6, #0f9f97) !important;
  box-shadow: 0 14px 26px rgba(15, 159, 151, 0.18) !important;
}

body.panel-opacity-zero:not(.login-mode) :where(
  .display-settings-card,
  .account-card,
  .admin-data-card,
  .record-form-dialog,
  .background-settings-card
) {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Final unified page-heading rule for desktop, tablet and mobile */
body:not(.login-mode) .view > .page-header .section-kicker {
  display: none !important;
}

/* Keep compact selects and pagination controls readable on every client */
body:not(.login-mode) :where(select, .pagination-button, .pagination-page) {
  line-height: normal !important;
}

body:not(.login-mode) select {
  overflow: visible !important;
  text-overflow: clip !important;
}

body:not(.login-mode) .pagination-size select,
body:not(.login-mode) #pageSizeSelect {
  box-sizing: border-box !important;
  width: 86px !important;
  min-width: 86px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 34px 0 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  text-align: center !important;
}

body:not(.login-mode) .pagination-button,
body:not(.login-mode) .pagination-page {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

body:not(.login-mode) .view > .page-header h1,
body:not(.login-mode) #adminView.view > .page-header h1 {
  margin: 0 0 8px !important;
  color: #0f172a !important;
  font-family: inherit !important;
  font-size: clamp(24px, 2.4vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
}

body:not(.login-mode) .view > .page-header p,
body:not(.login-mode) #adminView.view > .page-header p {
  max-width: 980px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-family: inherit !important;
  font-size: clamp(13px, 1.25vw, 14px) !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
}

@media (min-width: 761px) {
  body:not(.login-mode) .view > .page-header h1,
  body:not(.login-mode) #adminView.view > .page-header h1 {
    margin-bottom: 5px !important;
    font-size: clamp(22px, 1.8vw, 26px) !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  body:not(.login-mode) .view > .page-header p,
  body:not(.login-mode) #adminView.view > .page-header p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) {
  body:not(.login-mode) .view > .page-header,
  body:not(.login-mode) #adminView.view > .page-header {
    padding-top: 18px !important;
  }

  body:not(.login-mode) .view > .page-header h1,
  body:not(.login-mode) #adminView.view > .page-header h1 {
    font-size: clamp(24px, 7vw, 28px) !important;
    font-weight: 600 !important;
    line-height: 1.14 !important;
  }

  body:not(.login-mode) .view > .page-header p,
  body:not(.login-mode) #adminView.view > .page-header p {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.62 !important;
  }
}


/* Final unified glass opacity: match converter panels across every window */
body:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .blank-view-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .scanner-panel,
  .record-form-dialog,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list
) {
  border-color: rgba(226, 232, 240, calc(0.36 + var(--panel-opacity) * 0.24)) !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.42)),
    0 16px 40px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.05)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
  backdrop-filter: blur(8px) saturate(1.02) !important;
}

body:not(.login-mode) :where(
  .record-form-modal,
  .scanner-modal,
  .image-viewer,
  .account-overlay
) {
  background: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.18)) !important;
  background-color: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.18)) !important;
}

body:not(.login-mode) :where(
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .secondary-button,
  .file-select-button,
  .converter-presets button,
  .row-button:not(.danger),
  .drag-handle,
  .option-category-toggle,
  .option-category-menu button,
  .image-action-button,
  .pagination-button,
  .background-upload-button,
  .image-viewer-close,
  .image-viewer-nav
) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.48)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.48)) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
  backdrop-filter: blur(6px) saturate(1.02) !important;
}

body:not(.login-mode) :where(table thead, table thead tr, table th, table tbody tr, .option-grid, .nav-manager, .settings-grid, .records-body-mobile) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.24)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.24)) !important;
}

body:not(.login-mode) :where(table tbody tr:hover, table tbody tr.surface-row-selected, .mobile-record-card:hover, .mobile-record-card.surface-row-selected, .option-row:hover, .nav-link-row:hover) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.62)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.62)) !important;
}

body.panel-opacity-zero:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .blank-view-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .scanner-panel,
  .record-form-dialog,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list,
  .record-form-modal,
  .scanner-modal,
  .image-viewer,
  .account-overlay,
  .option-grid,
  .nav-manager,
  .settings-grid,
  .records-body-mobile,
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea
) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Final no-frost surfaces: all app windows keep opacity without blur */
body:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list,
  .option-grid,
  .nav-manager,
  .settings-grid,
  .records-body-mobile,
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .secondary-button,
  .file-select-button,
  .background-upload-button,
  .row-button:not(.danger),
  .option-category-toggle,
  .option-category-menu button,
  .image-action-button,
  .pagination-button,
  .image-viewer-close,
  .image-viewer-nav
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.login-mode) :where(
  .entry-panel,
  .records-panel,
  .admin-panel,
  .converter-input-panel,
  .converter-result-panel,
  .converter-result-card,
  .display-settings-card,
  .background-settings-card,
  .account-card,
  .admin-data-card,
  .blank-view-panel,
  .record-form-dialog,
  .scanner-panel,
  .profile-dropdown,
  .profile-dropdown-head,
  .toolbar,
  .table-wrap,
  .pagination-bar,
  .option-card,
  .option-row,
  .nav-link-form,
  .nav-link-row,
  .option-category-select-wrap,
  .option-category-menu,
  .upload-box,
  .bg-preview,
  .brand-logo-preview,
  .image-viewer-count,
  .mobile-record-card,
  .asset-image-preview,
  .upload-preview-list
) {
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.56)) !important;
}


/* Final dropdown popup frost: only opened dropdown content layers are frosted */
body:not(.login-mode) :where(
  .option-category-menu,
  .profile-menu,
  .dropdown-menu,
  [role="listbox"],
  [role="menu"]
) {
  border-color: rgba(45, 212, 191, calc(0.18 + var(--panel-opacity) * 0.22)) !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.58)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.58)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.52)),
    0 18px 42px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.08)),
    0 14px 34px rgba(20, 184, 166, calc(var(--panel-opacity) * 0.10)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) brightness(1.04) !important;
  backdrop-filter: blur(14px) saturate(1.08) brightness(1.04) !important;
}

body:not(.login-mode) :where(
  .option-category-menu button,
  .profile-menu-item,
  .sidebar-submenu-button,
  [role="option"],
  [role="menuitem"]
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.panel-opacity-zero:not(.login-mode) :where(
  .option-category-menu,
  .profile-menu,
  .dropdown-menu,
  [role="listbox"],
  [role="menu"]
) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Final exact dropdown behavior: trigger stays transparent, opened content is frosted */
body:not(.login-mode) :where(
  #profileMenuToggle,
  #optionCategoryToggle,
  .admin-menu-toggle,
  .option-category-toggle,
  .sidebar-submenu-button
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.login-mode) :where(
  #profileDropdown:not(.hidden),
  #profileDropdown[aria-hidden="false"],
  .profile-dropdown:not(.hidden),
  .profile-menu:not(.hidden),
  #optionCategoryMenu:not(.hidden),
  #optionCategoryMenu[aria-hidden="false"],
  .option-category-menu:not(.hidden),
  .dropdown-menu:not(.hidden),
  [role="listbox"]:not(.hidden),
  [role="listbox"][aria-hidden="false"],
  [role="menu"]:not(.hidden),
  [role="menu"][aria-hidden="false"]
) {
  border-color: rgba(45, 212, 191, calc(0.18 + var(--panel-opacity) * 0.22)) !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.58)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.58)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--panel-opacity) * 0.52)),
    0 18px 42px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.08)),
    0 14px 34px rgba(20, 184, 166, calc(var(--panel-opacity) * 0.10)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) brightness(1.04) !important;
  backdrop-filter: blur(14px) saturate(1.08) brightness(1.04) !important;
}

body:not(.login-mode) :where(
  #profileDropdown.hidden,
  #profileDropdown[aria-hidden="true"],
  .profile-dropdown.hidden,
  .profile-menu.hidden,
  #adminSubmenu.hidden,
  .sidebar-submenu.hidden,
  #optionCategoryMenu.hidden,
  #optionCategoryMenu[aria-hidden="true"],
  .option-category-menu.hidden,
  .dropdown-menu.hidden
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.panel-opacity-zero:not(.login-mode) :where(
  #profileDropdown,
  .profile-dropdown,
  .profile-menu,
  #optionCategoryMenu,
  .option-category-menu,
  .dropdown-menu,
  [role="listbox"],
  [role="menu"]
) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Sidebar submenu is part of navigation, keep it transparent instead of frosted */
body:not(.login-mode) :where(
  #adminSubmenu,
  .sidebar-submenu,
  #mobileNavigationDrawer .top-actions,
  .sidebar .top-actions
) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Final embedded navigation/profile: no raised cards in sidebar or top account */
body:not(.login-mode) :where(
  #profileMenuToggle,
  .profile-toggle,
  .sidebar-account .profile-toggle
) {
  outline: 0 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.login-mode) :where(
  #profileMenuToggle:hover,
  #profileMenuToggle[aria-expanded="true"],
  #profileMenuToggle:focus,
  #profileMenuToggle:focus-visible,
  #profileMenuToggle:active,
  .profile-toggle:hover,
  .profile-toggle[aria-expanded="true"],
  .profile-toggle:focus,
  .profile-toggle:focus-visible,
  .profile-toggle:active,
  .sidebar-account .profile-toggle:hover,
  .sidebar-account .profile-toggle[aria-expanded="true"],
  .sidebar-account .profile-toggle:focus,
  .sidebar-account .profile-toggle:focus-visible,
  .sidebar-account .profile-toggle:active
) {
  outline: 0 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body:not(.login-mode) :where(
  #adminSubmenu .sidebar-submenu-button,
  .sidebar-submenu .sidebar-submenu-button
) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body:not(.login-mode) :where(
  #adminSubmenu .sidebar-submenu-button:hover,
  #adminSubmenu .sidebar-submenu-button.active,
  .sidebar-submenu .sidebar-submenu-button:hover,
  .sidebar-submenu .sidebar-submenu-button.active
) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (min-width: 761px) {
  body:not(.login-mode) .sidebar-account {
    position: fixed !important;
    top: 0 !important;
    right: 24px !important;
    z-index: 41 !important;
    display: flex !important;
    width: auto !important;
    height: 74px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.login-mode) .sidebar-account .profile-menu {
    display: flex !important;
    width: auto !important;
    height: 100% !important;
    align-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.login-mode) .sidebar-account .profile-toggle {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 46px !important;
    padding: 0 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

body:not(.login-mode) #profileMenu,
body:not(.login-mode) #profileMenu:hover,
body:not(.login-mode) #profileMenu:focus,
body:not(.login-mode) #profileMenu:focus-within {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.login-mode) #profileMenu::before,
body:not(.login-mode) #profileMenu::after {
  display: none !important;
  content: none !important;
}

/* Final login status interaction: expand only after click, never from hover/focus */
.login-portal .login-status-bar:not(.status-expanded),
.login-portal .login-status-bar:not(.status-expanded):hover,
.login-portal .login-status-bar:not(.status-expanded):focus,
.login-portal .login-status-bar:not(.status-expanded):focus-within,
.login-portal .login-status-bar:not(.status-expanded):active {
  display: flex !important;
  width: 132px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 12px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transform: none !important;
}

.login-portal .login-status-bar:not(.status-expanded)::after,
.login-portal .login-status-bar:not(.status-expanded):hover::after,
.login-portal .login-status-bar:not(.status-expanded):focus::after,
.login-portal .login-status-bar:not(.status-expanded):focus-within::after,
.login-portal .login-status-bar:not(.status-expanded):active::after {
  display: block !important;
}

.login-portal .login-status-bar:not(.status-expanded) > span,
.login-portal .login-status-bar:not(.status-expanded) > .login-recheck-button {
  display: none !important;
}

.login-portal .login-status-bar.status-expanded {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  min-height: 54px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
  transform: none !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

.login-portal .login-status-bar.status-expanded::after {
  display: none !important;
}

.login-portal .login-status-bar.status-expanded > span,
.login-portal .login-status-bar.status-expanded > .login-recheck-button {
  display: inline-flex !important;
}

@media (max-width: 760px) {
  .login-portal .login-status-bar.status-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .login-portal .login-status-bar.status-expanded > span:first-child,
  .login-portal .login-status-bar.status-expanded > .login-recheck-button {
    grid-column: 1 / -1 !important;
  }
}

/* Final cross-client parameter dropdown consistency */
body:not(.login-mode) #adminBasicPanel .option-category-select-wrap {
  display: flex !important;
  width: min(220px, 100%) !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.login-mode) #adminBasicPanel .option-category-dropdown {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
}

body:not(.login-mode) #optionCategoryToggle {
  display: flex !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border: 1px solid rgba(203, 213, 225, 0.92) !important;
  border-radius: 11px !important;
  outline: 0 !important;
  color: #334155 !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.52)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.52)) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: left !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.login-mode) #optionCategoryToggle:hover,
body:not(.login-mode) #optionCategoryToggle:focus,
body:not(.login-mode) #optionCategoryToggle:focus-visible,
body:not(.login-mode) #optionCategoryToggle[aria-expanded="true"] {
  border-color: rgba(20, 184, 166, 0.72) !important;
  outline: 0 !important;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.58)) !important;
  background-color: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.58)) !important;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.08) !important;
  transform: none !important;
}

body:not(.login-mode) #optionCategoryToggle .option-category-arrow {
  flex: 0 0 auto !important;
  color: #0f8b82 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

body:not(.login-mode) #optionCategoryMenu {
  top: calc(100% + 7px) !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-height: min(360px, calc(100dvh - 220px)) !important;
  padding: 6px !important;
  gap: 2px !important;
  overflow-y: auto !important;
  border-radius: 11px !important;
}

body:not(.login-mode) #optionCategoryMenu button {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  body:not(.login-mode) #adminBasicPanel .option-category-select-wrap {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  body:not(.login-mode) #optionCategoryToggle {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  body:not(.login-mode) #optionCategoryMenu button {
    min-height: 42px !important;
    font-size: 14px !important;
  }
}

body.panel-opacity-zero:not(.login-mode) #optionCategoryToggle {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* Final fresh mobile drawer palette */
@media (max-width: 760px) {
  body:not(.login-mode) .mobile-nav-backdrop {
    background: rgba(30, 41, 59, 0.16) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer.topbar {
    width: min(80vw, 328px) !important;
    max-width: calc(100vw - 52px) !important;
    border-right: 1px solid rgba(15, 118, 110, calc(var(--panel-opacity) * 0.14)) !important;
    background:
      linear-gradient(
        180deg,
        rgba(252, 255, 254, calc(var(--panel-opacity) * 0.96)) 0%,
        rgba(247, 251, 251, calc(var(--panel-opacity) * 0.94)) 58%,
        rgba(243, 249, 249, calc(var(--panel-opacity) * 0.92)) 100%
      ) !important;
    background-color: rgba(248, 252, 251, calc(var(--panel-opacity) * 0.94)) !important;
    box-shadow: 14px 0 42px rgba(15, 23, 42, 0.10) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .sidebar-brand {
    min-height: calc(86px + env(safe-area-inset-top)) !important;
    padding: calc(17px + env(safe-area-inset-top)) 18px 15px !important;
    border-bottom: 1px solid rgba(15, 118, 110, calc(var(--panel-opacity) * 0.10)) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .sidebar-brand .brand-logo {
    border-radius: 15px !important;
    box-shadow: 0 10px 24px rgba(13, 148, 136, 0.16) !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .sidebar-brand .brand-copy strong {
    color: #162033 !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .top-actions {
    padding: 16px 12px calc(14px + env(safe-area-inset-bottom)) !important;
    gap: 7px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .top-nav {
    gap: 5px !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .top-nav .tab-button {
    min-height: 50px !important;
    padding: 0 14px !important;
    gap: 12px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: #536176 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 450 !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .top-nav .tab-button:hover {
    border-color: rgba(15, 118, 110, calc(var(--panel-opacity) * 0.10)) !important;
    color: #176b66 !important;
    background: rgba(240, 253, 250, calc(var(--panel-opacity) * 0.48)) !important;
    background-color: rgba(240, 253, 250, calc(var(--panel-opacity) * 0.48)) !important;
    transform: none !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .top-nav .tab-button.active {
    border-color: rgba(20, 184, 166, calc(var(--panel-opacity) * 0.18)) !important;
    color: #0f766e !important;
    background:
      linear-gradient(
        90deg,
        rgba(236, 253, 250, calc(var(--panel-opacity) * 0.74)),
        rgba(240, 253, 250, calc(var(--panel-opacity) * 0.52))
      ) !important;
    background-color: rgba(236, 253, 250, calc(var(--panel-opacity) * 0.66)) !important;
    box-shadow: inset 3px 0 0 rgba(20, 184, 166, calc(var(--panel-opacity) * 0.86)) !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .top-nav .tab-button .nav-icon {
    color: currentColor !important;
    opacity: 0.88 !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .sidebar-submenu {
    margin: 0 0 3px 24px !important;
    padding: 2px 0 2px 10px !important;
    gap: 1px !important;
    border-left: 1px solid rgba(15, 118, 110, calc(var(--panel-opacity) * 0.12)) !important;
    background: transparent !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .sidebar-submenu-button {
    min-height: 42px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    color: #66758a !important;
    font-size: 14px !important;
    font-weight: 450 !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .sidebar-submenu-button:hover,
  body:not(.login-mode) #mobileNavigationDrawer .sidebar-submenu-button.active {
    color: #0f766e !important;
    background: rgba(236, 253, 250, calc(var(--panel-opacity) * 0.42)) !important;
    background-color: rgba(236, 253, 250, calc(var(--panel-opacity) * 0.42)) !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .mobile-drawer-collapse {
    min-height: 48px !important;
    margin-top: auto !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-top: 1px solid rgba(15, 118, 110, calc(var(--panel-opacity) * 0.10)) !important;
    border-radius: 0 !important;
    color: #64748b !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 15px !important;
  }

  body:not(.login-mode) #mobileNavigationDrawer .mobile-drawer-collapse:hover {
    color: #0f766e !important;
    background: rgba(240, 253, 250, calc(var(--panel-opacity) * 0.36)) !important;
    background-color: rgba(240, 253, 250, calc(var(--panel-opacity) * 0.36)) !important;
  }

  body.panel-opacity-zero:not(.login-mode) .mobile-nav-backdrop,
  body.panel-opacity-zero:not(.login-mode) #mobileNavigationDrawer.topbar,
  body.panel-opacity-zero:not(.login-mode) #mobileNavigationDrawer .tab-button,
  body.panel-opacity-zero:not(.login-mode) #mobileNavigationDrawer .sidebar-submenu-button,
  body.panel-opacity-zero:not(.login-mode) #mobileNavigationDrawer .mobile-drawer-collapse {
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}



/* Responsive sidebar frost: desktop stays clear, tablet/mobile get subtle glass */
@media (min-width: 761px) and (max-width: 1180px) {
  body:not(.login-mode):not(.panel-opacity-zero) #mobileNavigationDrawer.topbar {
    background: rgba(249, 253, 252, calc(var(--panel-opacity) * 0.88)) !important;
    background-color: rgba(249, 253, 252, calc(var(--panel-opacity) * 0.88)) !important;
    -webkit-backdrop-filter: blur(9px) saturate(1.04) !important;
    backdrop-filter: blur(9px) saturate(1.04) !important;
  }
}

@media (max-width: 760px) {
  body:not(.login-mode):not(.panel-opacity-zero) #mobileNavigationDrawer.topbar {
    background:
      linear-gradient(
        180deg,
        rgba(252, 255, 254, calc(var(--panel-opacity) * 0.88)) 0%,
        rgba(247, 252, 251, calc(var(--panel-opacity) * 0.84)) 58%,
        rgba(243, 250, 249, calc(var(--panel-opacity) * 0.82)) 100%
      ) !important;
    background-color: rgba(248, 252, 251, calc(var(--panel-opacity) * 0.84)) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.06) !important;
    backdrop-filter: blur(12px) saturate(1.06) !important;
  }

  body:not(.login-mode):not(.panel-opacity-zero) .mobile-nav-backdrop {
    background: rgba(30, 41, 59, 0.13) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    backdrop-filter: blur(1.5px) !important;
  }
}

@media (min-width: 1181px) {
  body:not(.login-mode) #mobileNavigationDrawer.topbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Unified button typography for native buttons and label-based controls */
.primary-button,
.secondary-button,
.danger-button,
label.primary-button,
label.secondary-button,
label.danger-button {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

label.import-button,
label.file-select-button,
label.background-upload-button {
  font-family: inherit;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 760px) {
  .primary-button,
  .secondary-button,
  .danger-button,
  label.primary-button,
  label.secondary-button,
  label.danger-button {
    font-size: 15px;
    line-height: 1.25;
  }
}

/* Operation log page */
.operation-log-panel { padding:18px; border:1px solid rgba(226,232,240,calc(var(--panel-opacity)*.72)); border-radius:16px; background:rgba(255,255,255,calc(var(--panel-opacity)*.5)); }
.operation-log-toolbar { display:grid; gap:12px; margin-bottom:16px; }
.operation-log-toolbar-group { display:grid; gap:10px; align-items:end; padding:12px; border:1px solid rgba(226,232,240,calc(var(--panel-opacity)*.62)); border-radius:13px; background:rgba(248,250,252,calc(var(--panel-opacity)*.34)); }
.operation-log-inline-group { grid-template-columns:minmax(280px,2.2fr) minmax(130px,.9fr) minmax(78px,.55fr) minmax(78px,.55fr) minmax(110px,.72fr) minmax(130px,.85fr); gap:10px; padding:8px; align-items:center; }
.operation-log-inline-group label { display:block; }
.operation-log-inline-group label > span:first-child:not(.site-select-shell) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.operation-log-inline-group :is(input,select,button) { min-height:38px; height:38px; padding-top:6px; padding-bottom:6px; }
.operation-log-toolbar label { display:grid; gap:6px; min-width:0; font-size:12px; font-weight:500; }
.operation-log-toolbar input,.operation-log-toolbar select,.operation-log-toolbar button { width:100%; min-width:0; min-height:42px; }
.operation-log-toolbar button { white-space:nowrap; }
.operation-log-table-wrap { width:100%; overflow:auto; border:1px solid rgba(226,232,240,calc(var(--panel-opacity)*.8)); border-radius:12px; background:rgba(255,255,255,calc(var(--panel-opacity)*.38)); }
.operation-log-table { width:max-content; min-width:100%; border-collapse:collapse; table-layout:auto; font-size:13px; }
.operation-log-table th,.operation-log-table td { width:auto; min-width:110px; max-width:360px; padding:10px 12px; border-right:1px solid rgba(226,232,240,.72); border-bottom:1px solid rgba(226,232,240,.72); text-align:left; vertical-align:middle; white-space:nowrap; }
.operation-log-table th { position:sticky; top:0; z-index:1; color:#64748b; background:rgba(241,245,249,.96); font-size:11px; font-weight:650; line-height:1.25; letter-spacing:.035em; cursor:grab; user-select:none; touch-action:none; transition:background-color .18s ease,box-shadow .18s ease,opacity .18s ease; }
.operation-log-table th:active { cursor:grabbing; }
.operation-log-th-content { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.operation-log-column-handle { flex:0 0 auto; color:#14b8a6; font-size:17px; font-weight:400; line-height:1; opacity:.75; }
.operation-log-table th:hover { background:rgba(226,245,241,.98); }
.operation-log-table th.is-dragging { opacity:.46; background:rgba(204,251,241,.9); }
.operation-log-table th.is-drag-over { box-shadow:inset 3px 0 0 #14b8a6; background:rgba(204,251,241,.96); }
.operation-log-table td:last-child,.operation-log-table th:last-child { border-right:0; }
.operation-log-table tbody tr:hover,.operation-log-table tbody tr.is-selected { background:rgba(255,255,255,calc(.34 + var(--panel-opacity)*.52)); box-shadow:inset 3px 0 0 rgba(20,184,166,.72); }
.operation-log-type { display:inline-flex; min-width:52px; justify-content:center; padding:4px 9px; border-radius:999px; color:#0f766e; background:rgba(204,251,241,.7); font-size:12px; }
.operation-log-empty { padding:34px 16px; color:#94a3b8; text-align:center; }
.operation-log-footer { display:flex; justify-content:space-between; gap:12px; margin-top:10px; color:#64748b; font-size:12px; }
.operation-log-pagination { margin-top:10px; border:1px solid rgba(226,232,240,calc(var(--panel-opacity)*.8)); border-radius:12px; overflow:visible; }
.operation-log-page-size-dropdown { width:108px; }
.operation-log-page-size-dropdown .option-category-toggle { min-height:44px; height:44px; padding:0 12px; border-color:rgba(47,111,85,.42); border-radius:10px; color:var(--green-dark); font-weight:700; text-align:center; }
.operation-log-page-size-dropdown .option-category-toggle > span:first-child { flex:1; text-align:center; }
.operation-log-page-size-dropdown .option-category-menu { top:auto; right:0; bottom:calc(100% + 7px); left:auto; width:108px; padding:7px; border-color:rgba(45,212,191,.3); border-radius:12px; background:rgba(255,255,255,.78); box-shadow:0 16px 38px rgba(15,23,42,.16); -webkit-backdrop-filter:blur(16px) saturate(135%); backdrop-filter:blur(16px) saturate(135%); }
.operation-log-page-size-dropdown .option-category-menu button { min-height:38px; border-radius:8px; text-align:center; font-weight:600; }
.operation-log-page-size-dropdown .option-category-menu button.active { color:#0f766e; background:linear-gradient(135deg,rgba(204,251,241,.88),rgba(240,253,250,.74)); }
@media (max-width:600px) { .operation-log-page-size-dropdown { width:100%; } .operation-log-page-size-dropdown .option-category-menu { width:100%; } }
.operation-log-table :is(th,td)[data-log-column="sequence"] { min-width:100px; }
.operation-log-table :is(th,td)[data-log-column="username"] { min-width:120px; }
.operation-log-table :is(th,td)[data-log-column="type"] { min-width:110px; }
.operation-log-table :is(th,td)[data-log-column="createdAt"] { min-width:180px; }
.operation-log-table :is(th,td)[data-log-column="ip"] { min-width:140px; }
.operation-log-table :is(th,td)[data-log-column="description"] { min-width:420px; max-width:900px; white-space:normal; line-height:1.65; overflow-wrap:anywhere; }
body.panel-opacity-zero:not(.login-mode) :where(.operation-log-panel,.operation-log-table-wrap,.operation-log-toolbar-group) { border-color:transparent!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; }
@media (max-width:1100px) { .operation-log-inline-group { grid-template-columns:minmax(220px,2fr) minmax(130px,1fr) repeat(2,minmax(80px,.7fr)) minmax(110px,.8fr) minmax(120px,.9fr); gap:8px; } }
@media (max-width:900px) { .operation-log-inline-group { grid-template-columns:repeat(3,minmax(0,1fr)); } .operation-log-search-control { grid-column:span 2; } }
@media (max-width:600px) { .operation-log-panel { padding:12px; } .operation-log-inline-group { grid-template-columns:repeat(2,minmax(0,1fr)); } .operation-log-search-control { grid-column:1/-1; } .operation-log-table { width:max-content; min-width:100%; font-size:12px; } .operation-log-table th,.operation-log-table td { min-width:100px; padding:9px 10px; } .operation-log-footer { flex-direction:column; gap:4px; } }

.log-clear-password-card { width:min(100%,430px); }
.log-clear-password-description { margin:0 0 14px; color:#64748b; font-size:13px; line-height:1.6; }
.log-clear-password-card .form-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.log-clear-password-card .form-actions button { width:100%; min-height:44px; }
@media (max-width:600px) { .log-clear-password-card { width:100%; } .log-clear-password-card .form-actions { grid-template-columns:1fr; } }

.operation-log-restore-head,.operation-log-restore-cell { min-width:96px!important; width:96px!important; text-align:center!important; white-space:nowrap!important; }
.operation-log-restore-head { cursor:default!important; }
.operation-log-restore-button { min-height:30px; padding:5px 10px; border:1px solid rgba(20,184,166,.34); border-radius:9px; color:#0f766e; background:rgba(240,253,250,.88); font:inherit; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; }
.operation-log-restore-button:hover { border-color:rgba(13,148,136,.62); background:rgba(204,251,241,.94); }
@media (max-width:600px) { .operation-log-restore-head,.operation-log-restore-cell { min-width:90px!important; width:90px!important; } }

/* Stable mini website-status control */
.login-portal .login-status-bar,
.login-portal .login-status-bar:hover,
.login-portal .login-status-bar:focus,
.login-portal .login-status-bar:focus-within,
.login-portal .login-status-bar.status-expanded {
  position:relative!important;
  display:flex!important;
  width:100%!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12px!important;
  cursor:default!important;
  transition:none!important;
}
.login-portal .login-status-bar::before,.login-portal .login-status-bar::after { display:none!important; content:none!important; }
.login-status-mini-toggle {
  display:grid!important;
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  padding:0!important;
  place-items:center!important;
  border:1px solid rgba(20,184,166,.3)!important;
  border-radius:999px!important;
  color:#14b8a6!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 4px 12px rgba(15,118,110,.1)!important;
  font-size:9px!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease!important;
}
.login-status-mini-toggle:hover,.login-status-mini-toggle[aria-expanded="true"] { transform:scale(1.08); border-color:rgba(13,148,136,.62)!important; background:rgba(240,253,250,.94)!important; }
.login-status-details {
  position:absolute!important;
  z-index:30!important;
  left:50%!important;
  top:34px!important;
  display:none!important;
  width:min(720px,calc(100vw - 32px))!important;
  min-height:52px!important;
  padding:10px 12px!important;
  grid-template-columns:minmax(0,1fr) auto auto auto!important;
  align-items:center!important;
  gap:10px!important;
  transform:translateX(-50%)!important;
  border:1px solid rgba(203,213,225,.82)!important;
  border-radius:12px!important;
  color:#64748b!important;
  background:rgba(248,250,252,.96)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.14)!important;
  backdrop-filter:blur(10px)!important;
}
.login-status-bar.status-expanded .login-status-details { display:grid!important; }
.login-status-details > span { display:inline-flex!important; opacity:1!important; transform:none!important; white-space:nowrap!important; }
.login-status-details .status-ok,.login-status-details .status-bad { min-height:30px!important; padding:0 10px!important; align-items:center!important; border-radius:999px!important; }
@media (max-width:600px) {
  .login-status-details { width:min(360px,calc(100vw - 24px))!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; }
  .login-status-details > span:first-child,.login-status-details > .login-recheck-button { grid-column:1/-1!important; justify-content:center!important; }
  .login-status-details .status-ok,.login-status-details .status-bad { justify-content:center!important; }
}

/* Always-visible website-status mini control */
.login-status-mini-toggle {
  display:inline-flex!important;
  width:auto!important;
  min-width:86px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 11px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  color:#0f766e!important;
  background:rgba(255,255,255,.82)!important;
  font-size:11px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
.login-status-mini-dot { width:7px; height:7px; flex:0 0 7px; border-radius:999px; background:#2dd4bf; box-shadow:0 0 0 4px rgba(45,212,191,.14); }
.login-status-details { top:auto!important; bottom:36px!important; }
@media (max-width:600px) { .login-status-mini-toggle { min-width:82px!important; } .login-status-details { bottom:35px!important; } }

/* Align website-status details inside the navigation card */
.login-status-details {
  right:0!important;
  left:0!important;
  width:100%!important;
  max-width:none!important;
  grid-template-columns:minmax(0,1.45fr) minmax(108px,.8fr) minmax(128px,.9fr) auto!important;
  justify-content:stretch!important;
  transform:none!important;
}
.login-status-details > span { min-width:0!important; justify-content:center!important; text-align:center!important; }
.login-status-details > span:first-child { justify-content:flex-start!important; padding-left:4px!important; }
.login-status-details .login-recheck-button { min-width:86px!important; justify-self:end!important; }
@media (max-width:600px) {
  .login-status-details { right:0!important; left:0!important; width:100%!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .login-status-details > span:first-child { justify-content:center!important; padding-left:0!important; }
  .login-status-details .login-recheck-button { width:100%!important; justify-self:stretch!important; }
}

/* Keep website-status control inside the navigation card bottom */
.login-portal { position:relative!important; padding-bottom:70px!important; }
.login-portal .login-status-bar,
.login-portal .login-status-bar:hover,
.login-portal .login-status-bar:focus,
.login-portal .login-status-bar:focus-within,
.login-portal .login-status-bar.status-expanded {
  position:absolute!important;
  right:24px!important;
  bottom:20px!important;
  left:24px!important;
  width:auto!important;
  margin:0!important;
}
@media (max-width:760px) {
  .login-portal { padding-bottom:62px!important; }
  .login-portal .login-status-bar,
  .login-portal .login-status-bar:hover,
  .login-portal .login-status-bar:focus,
  .login-portal .login-status-bar:focus-within,
  .login-portal .login-status-bar.status-expanded { right:16px!important; bottom:14px!important; left:16px!important; }
}

/* Center status control and reserve non-overlapping expanded space */
.login-status-mini-toggle { margin:0 auto!important; }
.login-portal:has(.login-status-bar.status-expanded) { padding-bottom:132px!important; }
@media (max-width:600px) {
  .login-portal:has(.login-status-bar.status-expanded) { padding-bottom:210px!important; }
}

/* Bottom-center half-hidden website-status trigger */
.login-portal { padding-bottom:48px!important; overflow:visible!important; }
.login-portal .login-status-bar,
.login-portal .login-status-bar:hover,
.login-portal .login-status-bar:focus,
.login-portal .login-status-bar:focus-within,
.login-portal .login-status-bar.status-expanded {
  right:20px!important;
  bottom:0!important;
  left:20px!important;
  overflow:visible!important;
}
.login-status-mini-toggle {
  position:absolute!important;
  bottom:0!important;
  left:50%!important;
  margin:0!important;
  transform:translate(-50%,55%)!important;
  transition:transform .2s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.login-status-mini-toggle:hover,
.login-status-mini-toggle:focus-visible,
.login-status-mini-toggle[aria-expanded="true"] {
  transform:translate(-50%,0)!important;
}
.login-status-details { bottom:38px!important; }
.login-portal:has(.login-status-bar.status-expanded) { padding-bottom:132px!important; }
@media (max-width:600px) {
  .login-portal { padding-bottom:44px!important; }
  .login-portal .login-status-bar,
  .login-portal .login-status-bar:hover,
  .login-portal .login-status-bar:focus,
  .login-portal .login-status-bar:focus-within,
  .login-portal .login-status-bar.status-expanded { right:14px!important; bottom:0!important; left:14px!important; }
  .login-portal:has(.login-status-bar.status-expanded) { padding-bottom:210px!important; }
}

/* Final centered full website-status trigger */
.login-portal { padding-bottom:70px!important; overflow:visible!important; }
.login-portal .login-status-bar,
.login-portal .login-status-bar:hover,
.login-portal .login-status-bar:focus,
.login-portal .login-status-bar:focus-within,
.login-portal .login-status-bar.status-expanded {
  position:absolute!important;
  right:24px!important;
  bottom:18px!important;
  left:24px!important;
  display:grid!important;
  width:auto!important;
  margin:0!important;
  place-items:center!important;
  overflow:visible!important;
}
.login-status-mini-toggle,
.login-status-mini-toggle:hover,
.login-status-mini-toggle:focus-visible,
.login-status-mini-toggle[aria-expanded="true"] {
  position:static!important;
  inset:auto!important;
  margin:0 auto!important;
  transform:none!important;
}
.login-status-details { bottom:38px!important; }
.login-portal:has(.login-status-bar.status-expanded) { padding-bottom:132px!important; }
@media (max-width:600px) {
  .login-portal { padding-bottom:62px!important; }
  .login-portal .login-status-bar,
  .login-portal .login-status-bar:hover,
  .login-portal .login-status-bar:focus,
  .login-portal .login-status-bar:focus-within,
  .login-portal .login-status-bar.status-expanded { right:16px!important; bottom:14px!important; left:16px!important; }
  .login-portal:has(.login-status-bar.status-expanded) { padding-bottom:210px!important; }
}

/* Explicitly center the full status-bar container */
.login-portal .login-status-bar,
.login-portal .login-status-bar:hover,
.login-portal .login-status-bar:focus,
.login-portal .login-status-bar:focus-within,
.login-portal .login-status-bar.status-expanded {
  right:auto!important;
  left:50%!important;
  width:calc(100% - 48px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translateX(-50%)!important;
}
.login-status-mini-toggle,
.login-status-mini-toggle:hover,
.login-status-mini-toggle:focus-visible,
.login-status-mini-toggle[aria-expanded="true"] {
  flex:0 0 auto!important;
  margin:0!important;
  transform:none!important;
}
@media (max-width:600px) {
  .login-portal .login-status-bar,
  .login-portal .login-status-bar:hover,
  .login-portal .login-status-bar:focus,
  .login-portal .login-status-bar:focus-within,
  .login-portal .login-status-bar.status-expanded { width:calc(100% - 32px)!important; }
}

/* Simple reliable centered website-status layout */
.login-portal { position:relative!important; padding-bottom:24px!important; overflow:visible!important; }
.login-portal .login-status-bar,
.login-portal .login-status-bar:hover,
.login-portal .login-status-bar:focus,
.login-portal .login-status-bar:focus-within,
.login-portal .login-status-bar.status-expanded {
  position:static!important;
  inset:auto!important;
  display:flex!important;
  width:100%!important;
  min-height:30px!important;
  max-height:none!important;
  margin:10px 0 0!important;
  padding:0!important;
  flex-direction:column-reverse!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  overflow:visible!important;
  transform:none!important;
}
.login-status-mini-toggle,
.login-status-mini-toggle:hover,
.login-status-mini-toggle:focus-visible,
.login-status-mini-toggle[aria-expanded="true"] {
  position:static!important;
  inset:auto!important;
  flex:0 0 auto!important;
  margin:0 auto!important;
  transform:none!important;
}
.login-status-details {
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
}
.login-portal:has(.login-status-bar.status-expanded) { padding-bottom:24px!important; }
@media (max-width:600px) {
  .login-portal { padding-bottom:20px!important; }
  .login-portal:has(.login-status-bar.status-expanded) { padding-bottom:20px!important; }
}

/* Dedicated three-column centering row for status trigger */
.login-status-trigger-row {
  display:grid!important;
  width:100%!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
}
.login-status-trigger-row > #loginStatusToggle {
  grid-column:2!important;
  justify-self:center!important;
  margin:0!important;
}

/* Pin status trigger to the exact bottom-center of navigation card */
.login-portal { position:relative!important; padding-bottom:72px!important; }
.login-portal > .login-status-bar > .login-status-trigger-row {
  position:absolute!important;
  right:0!important;
  bottom:18px!important;
  left:0!important;
  display:flex!important;
  width:100%!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
}
.login-portal > .login-status-bar > .login-status-trigger-row > #loginStatusToggle {
  position:static!important;
  inset:auto!important;
  margin:0!important;
  transform:none!important;
}
.login-portal:has(.login-status-bar.status-expanded) { padding-bottom:132px!important; }
@media (max-width:600px) {
  .login-portal { padding-bottom:64px!important; }
  .login-portal > .login-status-bar > .login-status-trigger-row { bottom:14px!important; }
  .login-portal:has(.login-status-bar.status-expanded) { padding-bottom:210px!important; }
}

/* Decouple trigger from expandable status container */
.login-portal > .login-status-trigger-row {
  position:absolute!important;
  right:0!important;
  bottom:18px!important;
  left:0!important;
  z-index:5!important;
  display:flex!important;
  width:100%!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
}
.login-portal > .login-status-trigger-row > #loginStatusToggle,
.login-portal > .login-status-trigger-row > #loginStatusToggle:hover,
.login-portal > .login-status-trigger-row > #loginStatusToggle:focus-visible,
.login-portal > .login-status-trigger-row > #loginStatusToggle[aria-expanded="true"] {
  position:static!important;
  inset:auto!important;
  margin:0!important;
  transform:none!important;
}
.login-portal > .login-status-bar,
.login-portal > .login-status-bar:hover,
.login-portal > .login-status-bar:focus,
.login-portal > .login-status-bar:focus-within,
.login-portal > .login-status-bar.status-expanded {
  position:static!important;
  inset:auto!important;
  width:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  transform:none!important;
}
.login-portal > .login-status-bar:not(.status-expanded) { display:none!important; height:0!important; border:0!important; box-shadow:none!important; background:transparent!important; }
.login-portal > .login-status-bar.status-expanded { display:block!important; height:auto!important; margin-top:10px!important; }
@media (max-width:600px) { .login-portal > .login-status-trigger-row { bottom:14px!important; } }

/* Compact expanded website-status spacing */
.login-portal,
.login-portal:has(.login-status-bar.status-expanded) { padding-bottom:68px!important; }
.login-portal > .login-status-bar.status-expanded { margin-top:8px!important; }
.login-status-details { min-height:48px!important; padding:8px 10px!important; }
@media (max-width:600px) {
  .login-portal,
  .login-portal:has(.login-status-bar.status-expanded) { padding-bottom:60px!important; }
  .login-portal > .login-status-bar.status-expanded { margin-top:8px!important; }
  .login-status-details { padding:8px!important; }
}

/* Centered status trigger remains fully visible */
.login-portal { overflow:visible!important; }
.login-portal > .login-status-trigger-row { bottom:0!important; overflow:visible!important; }
.login-portal > .login-status-trigger-row > #loginStatusToggle,
.login-portal > .login-status-trigger-row > #loginStatusToggle:hover,
.login-portal > .login-status-trigger-row > #loginStatusToggle:focus-visible,
.login-portal > .login-status-trigger-row > #loginStatusToggle[aria-expanded="true"] {
  transform:none!important;
}
@media (max-width:600px) { .login-portal > .login-status-trigger-row { bottom:0!important; } }

/* Purchase-record standard mobile cards for operation logs */
.operation-log-mobile-list { display:none; }
@media (max-width:600px) {
  .operation-log-panel { padding:10px!important; }
  .operation-log-toolbar { margin-bottom:10px!important; }
  .operation-log-inline-group { gap:8px!important; padding:8px!important; }
  .operation-log-inline-group :is(input,select,button) { min-height:40px!important; height:40px!important; }
  .operation-log-table-wrap { display:none!important; }
  .operation-log-mobile-list { display:grid; gap:10px; }
  .operation-log-mobile-card {
    display:grid;
    gap:11px;
    width:100%;
    min-width:0;
    padding:13px;
    overflow:hidden;
    border:1px solid rgba(226,232,240,calc(.4 + var(--panel-opacity)*.25));
    border-radius:13px;
    background:rgba(255,255,255,calc(var(--panel-opacity)*.5));
    box-shadow:0 10px 28px rgba(15,23,42,calc(var(--panel-opacity)*.045));
  }
  .operation-log-mobile-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
  .operation-log-mobile-head time { min-width:0; color:#64748b; font-size:12px; text-align:right; white-space:nowrap; }
  .operation-log-mobile-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .operation-log-mobile-meta > span { display:grid; gap:3px; min-width:0; padding:8px 9px; border-radius:9px; background:rgba(248,250,252,calc(var(--panel-opacity)*.58)); }
  .operation-log-mobile-meta > span:last-child { grid-column:1/-1; }
  .operation-log-mobile-meta small,.operation-log-mobile-detail small { color:#94a3b8; font-size:11px; font-weight:500; }
  .operation-log-mobile-meta strong { min-width:0; overflow:hidden; color:#334155; font-size:13px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
  .operation-log-mobile-detail { display:grid; gap:6px; min-width:0; padding:10px; border-radius:10px; background:rgba(248,250,252,calc(var(--panel-opacity)*.48)); }
  .operation-log-mobile-detail p { width:100%; min-width:0; margin:0; color:#334155; font-size:13px; font-weight:400; line-height:1.65; overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; }
  .operation-log-mobile-actions { display:flex; justify-content:flex-end; padding-top:1px; }
  .operation-log-mobile-actions .operation-log-restore-button { min-width:104px; min-height:38px; }
  .operation-log-footer { margin-top:12px!important; padding:0 2px; line-height:1.5; }
  body.panel-opacity-zero:not(.login-mode) .operation-log-mobile-card,
  body.panel-opacity-zero:not(.login-mode) .operation-log-mobile-meta > span,
  body.panel-opacity-zero:not(.login-mode) .operation-log-mobile-detail { border-color:transparent!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; }
}


/* Inventory management 20260723 */
.inventory-dashboard {
  display: grid;
  gap: 16px;
}

.inventory-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.inventory-summary-card,
.inventory-list-panel {
  border: 1px solid rgba(226, 232, 240, calc(0.46 + var(--panel-opacity) * 0.28));
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.86));
  box-shadow: 0 18px 42px rgba(15, 23, 42, calc(var(--panel-opacity) * 0.07));
}

.inventory-summary-card {
  position: relative;
  min-height: 138px;
  padding: 20px;
  overflow: hidden;
  border-radius: 18px;
}

.inventory-summary-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -32px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(32, 196, 178, 0.1);
}

.inventory-summary-card > span,
.inventory-summary-card > small {
  position: relative;
  z-index: 1;
  display: block;
  color: #64748b;
}

.inventory-summary-card > span { font-size: 13px; }
.inventory-summary-card > strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 12px 0 8px;
  color: #123047;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
}
.inventory-summary-card > small { font-size: 12px; }
.inventory-summary-cost::after { background: rgba(14, 165, 233, 0.1); }
.inventory-summary-warranty::after { background: rgba(34, 197, 94, 0.11); }
.inventory-summary-outbound::after { background: rgba(249, 115, 22, 0.11); }
.inventory-summary-types::after { background: rgba(139, 92, 246, 0.09); }

.inventory-list-panel {
  min-width: 0;
  padding: 18px;
  border-radius: 18px;
}

.inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) repeat(4, minmax(112px, 0.72fr)) auto;
  gap: 10px;
  align-items: end;
}

.inventory-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.inventory-toolbar label > span {
  color: #64748b;
  font-size: 12px;
}

.inventory-toolbar input,
.inventory-toolbar select {
  width: 100%;
  height: 42px;
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 11px;
  background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.72));
  color: #213547;
  font: inherit;
}

.inventory-toolbar input { padding: 0 13px; }
.inventory-toolbar select { padding: 0 36px 0 12px; }
.inventory-refresh-button { min-height: 42px; white-space: nowrap; }

.inventory-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 2px 12px;
}

.inventory-list-head h2 {
  margin: 3px 0 0;
  color: #16324a;
  font-size: 18px;
}

.inventory-list-head > span {
  color: #64748b;
  font-size: 13px;
}

.inventory-table-wrap {
  overflow: auto;
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 14px;
}

.inventory-table {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
}

.inventory-table th,
.inventory-table td {
  padding: 12px 13px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

.inventory-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(244, 249, 249, 0.96);
  color: #536779;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.inventory-table tbody tr:last-child td { border-bottom: 0; }
.inventory-table tbody tr:hover { background: rgba(32, 196, 178, 0.045); }

.inventory-warranty {
  display: inline-grid;
  gap: 2px;
  min-width: 68px;
  padding: 6px 9px;
  border-radius: 10px;
  text-align: center;
}

.inventory-warranty strong { font-size: 12px; font-weight: 600; }
.inventory-warranty small { font-size: 10px; opacity: 0.78; }
.inventory-warranty-active { background: rgba(34, 197, 94, 0.11); color: #16824b; }
.inventory-warranty-expired { background: rgba(239, 68, 68, 0.1); color: #c43d3d; }
.inventory-warranty-unset { background: rgba(100, 116, 139, 0.1); color: #64748b; }

.inventory-stock-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
}

.inventory-stock-status-in {
  background: rgba(32, 196, 178, 0.12);
  color: #0f8f82;
}

.inventory-stock-status-out {
  background: rgba(249, 115, 22, 0.12);
  color: #d35f16;
}

.inventory-row-actions,
.inventory-mobile-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.inventory-row-actions { white-space: nowrap; }
.inventory-outbound-button {
  border-color: rgba(249, 115, 22, 0.28) !important;
  background: rgba(255, 247, 237, calc(var(--panel-opacity) * 0.88)) !important;
  color: #c85a12 !important;
}

.inventory-mobile-list { display: none; }

@media (max-width: 1100px) {
  .inventory-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-search-control { grid-column: 1 / -1; }
  .inventory-refresh-button { width: 100%; }
}

@media (max-width: 760px) {
  .inventory-dashboard { gap: 12px; }
  .inventory-summary-grid { gap: 10px; }
  .inventory-summary-card { min-height: 118px; padding: 16px; border-radius: 15px; }
  .inventory-summary-card > strong { margin: 10px 0 7px; font-size: 27px; }
  .inventory-list-panel { padding: 13px; border-radius: 15px; }
  .inventory-toolbar { grid-template-columns: 1fr; }
  .inventory-search-control { grid-column: auto; }
  .inventory-list-head { align-items: center; margin-top: 18px; }
  .inventory-table-wrap { display: none; }
  .inventory-mobile-list { display: grid; gap: 10px; }
  .inventory-mobile-card {
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.82);
    border-radius: 14px;
    background: rgba(255, 255, 255, calc(var(--panel-opacity) * 0.62));
  }
  .inventory-mobile-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
  .inventory-mobile-card-head > div { display: grid; gap: 4px; min-width: 0; }
  .inventory-mobile-card-head > div span { color: #20a99b; font-size: 12px; }
  .inventory-mobile-card-head > div strong { overflow-wrap: anywhere; color: #16324a; font-size: 15px; }
  .inventory-mobile-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 13px 0; }
  .inventory-mobile-card dl > div { min-width: 0; padding: 9px; border-radius: 10px; background: rgba(241, 245, 249, 0.58); }
  .inventory-mobile-card dt { color: #8493a2; font-size: 10px; }
  .inventory-mobile-card dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #334155; font-size: 12px; }
  .inventory-mobile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-mobile-actions > button { width: 100%; }
}

@media (max-width: 430px) {
  .inventory-summary-grid { grid-template-columns: 1fr; }
  .inventory-summary-card { min-height: 108px; }
  .inventory-mobile-card dl { grid-template-columns: 1fr; }
}


/* Unified parent-menu caret alignment 20260723 */
#mobileNavigationDrawer .top-nav :is(.admin-menu-toggle, .inventory-menu-toggle) {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#mobileNavigationDrawer .top-nav :is(.admin-menu-toggle, .inventory-menu-toggle) > .nav-icon {
  flex: 0 0 auto !important;
}

#mobileNavigationDrawer .top-nav :is(.admin-menu-toggle, .inventory-menu-toggle) > span:not(.sidebar-menu-caret) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#mobileNavigationDrawer .top-nav :is(.admin-menu-toggle, .inventory-menu-toggle) > .sidebar-menu-caret {
  width: 22px !important;
  min-width: 22px !important;
  margin-left: auto !important;
  flex: 0 0 22px !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  #mobileNavigationDrawer .top-nav :is(.admin-menu-toggle, .inventory-menu-toggle) {
    min-height: 52px !important;
    padding: 0 15px !important;
    gap: 13px !important;
  }
}



/* Inventory pagination 20260723 */
.inventory-pagination {
  margin-top: 14px;
  border: 1px solid rgba(226, 232, 240, calc(var(--panel-opacity) * 0.82));
  border-radius: 14px;
  overflow: visible;
}

@media (max-width: 760px) {
  .inventory-pagination {
    gap: 10px;
    margin-top: 12px;
    padding: 12px !important;
  }

  .inventory-pagination .pagination-size,
  .inventory-pagination .pagination-controls {
    width: 100%;
    justify-content: space-between;
  }

  .inventory-pagination .pagination-size select {
    flex: 1 1 auto;
  }
}


/* Independent mobile record form bar 20260723 */
.mobile-record-form-bar { display: none; }
@media (max-width: 760px) {
  .record-form-modal { z-index: 240 !important; display: flex !important; height: 100vh !important; height: 100dvh !important; padding: calc(70px + env(safe-area-inset-top)) 0 0 !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; }
  .record-form-modal.hidden { display: none !important; }
  .mobile-record-form-bar { position: relative !important; z-index: 5 !important; display: flex !important; width: 100% !important; min-height: 58px !important; padding: 9px 14px !important; flex: 0 0 58px !important; align-items: center !important; justify-content: space-between !important; color: #0f172a !important; background: rgba(255,255,255,.98) !important; border-bottom: 1px solid rgba(203,213,225,.9) !important; box-shadow: 0 8px 18px rgba(15,23,42,.12) !important; }
  .mobile-record-form-bar strong { display: block !important; font-size: 18px !important; font-weight: 650 !important; }
  .mobile-record-form-bar button { display: grid !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; place-items: center !important; border: 1px solid #cbd5e1 !important; border-radius: 10px !important; color: #334155 !important; background: #f8fafc !important; font-size: 24px !important; line-height: 1 !important; }
  .record-form-dialog { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 16px !important; flex: 1 1 auto !important; overflow-y: auto !important; }
  .record-form-dialog > .panel-head { display: none !important; }
}


/* Purchase barcode order groups 20260723 */
.purchase-group-row td { padding: 0 !important; background: rgba(236, 253, 250, calc(var(--panel-opacity) * 0.72)) !important; }
.purchase-group-toggle { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 14px; padding: 12px 16px; border: 0; color: #334155; background: transparent; text-align: left; }
.purchase-group-toggle strong { color: #0f766e; font-size: 14px; }
.purchase-group-toggle span:not(.purchase-group-caret) { color: #64748b; font-size: 12px; }
.purchase-group-caret { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #20c4b2, #0f9f97); font-size: 18px; }
.purchase-order-child-row td:first-child { padding-left: 30px; }
.purchase-order-child-row { background: rgba(248, 250, 252, calc(var(--panel-opacity) * 0.68)) !important; }
@media (max-width: 760px) {
  .purchase-group-toggle { min-width: 720px; gap: 10px; padding: 11px 12px; }
  .purchase-group-toggle span:not(.purchase-group-caret) { white-space: nowrap; }
  .purchase-order-child-row td:first-child { padding-left: 20px; }
}


/* Compact purchase table rows 20260723 */
#recordsTable { width: max-content; min-width: 1780px; table-layout: auto; }
#recordsTable th,
#recordsTable td { height: 62px; padding: 10px 12px; vertical-align: middle; white-space: nowrap; }
#recordsTable .action-column { min-width: 218px; }
#recordsTable .row-actions { min-width: 206px; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
#recordsTable .row-button { min-width: auto; height: 36px; padding: 0 10px; white-space: nowrap; font-size: 13px; font-weight: 500; }
#recordsTable .purchase-group-row td { height: auto; }
#recordsTable .purchase-group-toggle { white-space: nowrap; }
@media (max-width: 760px) {
  #recordsTable { min-width: 1680px; }
  #recordsTable th,
  #recordsTable td { height: 56px; padding: 8px 10px; }
  #recordsTable .row-button { height: 34px; padding: 0 9px; }
}


/* Existing order linker 20260723 */
.existing-order-link-modal { position: fixed; inset: 0; z-index: 280; display: grid; place-items: center; padding: 24px; background: rgba(15,23,42,.48); }
.existing-order-link-modal.hidden { display: none !important; }
.existing-order-link-card { display: flex; width: min(760px, calc(100vw - 48px)); max-height: min(760px, calc(100dvh - 48px)); flex-direction: column; overflow: hidden; padding: 20px; border: 1px solid rgba(226,232,240,.9); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 30px 90px rgba(15,23,42,.28); }
.existing-order-link-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #e2e8f0; }
.existing-order-link-head h2 { margin: 3px 0 4px; color: #0f172a; font-size: 20px; }
.existing-order-link-head p { margin: 0; color: #64748b; font-size: 13px; }
.existing-order-link-head button { display: grid; width: 40px; min-width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid #cbd5e1; border-radius: 10px; color: #475569; background: #f8fafc; font-size: 24px; }
.existing-order-link-search { display: grid; gap: 7px; margin: 14px 0; color: #475569; font-size: 12px; }
.existing-order-link-search input { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid #cbd5e1; border-radius: 11px; }
.existing-order-link-list { display: grid; gap: 10px; overflow-y: auto; padding-right: 4px; }
.existing-order-link-item { display: grid; grid-template-columns: minmax(150px,1fr) minmax(300px,2fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid rgba(226,232,240,.9); border-radius: 14px; background: rgba(248,250,252,.92); }
.existing-order-link-item-main { display: grid; gap: 5px; min-width: 0; }
.existing-order-link-item-main strong { overflow-wrap: anywhere; color: #0f766e; }
.existing-order-link-item-main span { color: #64748b; font-size: 12px; overflow-wrap: anywhere; }
.existing-order-link-item dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; }
.existing-order-link-item dl div { min-width: 0; }
.existing-order-link-item dt { color: #94a3b8; font-size: 10px; }
.existing-order-link-item dd { margin: 3px 0 0; color: #334155; font-size: 12px; overflow-wrap: anywhere; }
.existing-order-link-item button { white-space: nowrap; }
.existing-order-link-empty { padding: 34px 16px; color: #94a3b8; text-align: center; }
.existing-order-link-panel { display:grid; min-height:0; gap:10px; padding:10px; border:1px solid rgba(45,212,191,.52); border-radius:14px; background:linear-gradient(145deg,rgba(240,253,250,calc(.54 + var(--panel-opacity)*.24)),rgba(248,250,252,calc(.46 + var(--panel-opacity)*.22))); box-shadow:0 8px 24px rgba(15,118,110,.07); }
.existing-order-link-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px; }
.existing-order-link-panel-head strong { color:#334155; font-size:14px; font-weight:650; }
.existing-order-link-panel-head span { padding:3px 8px; border-radius:999px; color:#0f766e; background:rgba(204,251,241,.78); font-size:11px; }
.existing-order-link-panel .existing-order-link-list { display:grid; max-height:430px; gap:6px; overflow:auto; padding:6px; border:1px solid rgba(94,234,212,.72); border-radius:11px; background:rgba(255,255,255,calc(.64 + var(--panel-opacity)*.26)); }
.existing-order-link-panel .existing-order-link-item { display:grid; grid-template-columns:22px minmax(145px,.8fr) minmax(300px,1.6fr); min-height:64px; align-items:center; gap:10px; padding:9px 11px; border:1px solid transparent; border-radius:10px; color:#334155; background:rgba(248,250,252,.58); cursor:pointer; }
.existing-order-link-panel .existing-order-link-item:hover { border-color:rgba(94,234,212,.72); background:rgba(240,253,250,.84); }
.existing-order-link-panel .existing-order-link-item:has(.existing-order-link-check:checked) { border-color:#2dd4bf; background:rgba(204,251,241,.76); }
.existing-order-link-check { width:18px !important; height:18px !important; min-height:18px !important; margin:0; accent-color:#0f9f91; }
.existing-order-link-panel .existing-order-link-item-main strong,.existing-order-link-panel .existing-order-link-item-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.existing-order-link-panel .existing-order-link-item-main strong { color:#0f172a; font-size:12px; }
.existing-order-link-panel .existing-order-link-item-main span { color:#64748b; font-size:12px; }
.existing-order-link-panel .existing-order-link-item dl { grid-template-columns:repeat(4,minmax(0,1fr)); }
.existing-order-link-submit { width:100%; min-height:42px; }
.existing-order-link-submit:disabled { opacity:.5; cursor:not-allowed; }
#recordsTable { min-width: 1900px; }
#recordsTable .action-column { min-width: 310px; }
#recordsTable .row-actions { min-width: 298px; }
@media (max-width: 760px) {
  .existing-order-link-modal { place-items: stretch; padding: 70px 0 0; }
  .existing-order-link-card { width: 100%; max-height: calc(100dvh - 70px); padding: 14px; border: 0; border-radius: 0; }
  .existing-order-link-item { grid-template-columns: 1fr; gap: 10px; }
  .existing-order-link-item dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .existing-order-link-item button { width: 100%; }
  .existing-order-link-panel { padding:8px; }
  .existing-order-link-panel .existing-order-link-list { max-height:46dvh; }
  .existing-order-link-panel .existing-order-link-item { grid-template-columns:22px minmax(0,1fr); gap:8px; }
  .existing-order-link-panel .existing-order-link-item dl { grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #recordsTable { min-width: 1810px; }
}


/* Inventory product groups 20260723 */
.inventory-group-row td { padding: 0 !important; background: rgba(236,253,250,calc(var(--panel-opacity) * .72)) !important; }
.inventory-group-toggle { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 14px; padding: 12px 16px; border: 0; color: #334155; background: transparent; text-align: left; white-space: nowrap; }
.inventory-group-toggle strong { color: #0f766e; font-size: 14px; }
.inventory-group-toggle span:not(.inventory-group-caret) { color: #64748b; font-size: 12px; }
.inventory-group-caret { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#20c4b2,#0f9f97); font-size: 19px; }
.inventory-order-child-row td:first-child { padding-left: 30px; }
.inventory-order-child-row { background: rgba(248,250,252,calc(var(--panel-opacity) * .68)) !important; }
.inventory-mobile-group { border: 1px solid rgba(153,246,228,.8); border-radius: 14px; overflow: hidden; background: rgba(240,253,250,calc(var(--panel-opacity) * .86)); }
.inventory-mobile-group-toggle { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px; border: 0; color: #334155; background: transparent; text-align: left; }
.inventory-mobile-group-toggle > div { display: grid; min-width: 0; gap: 4px; }
.inventory-mobile-group-toggle strong { color: #0f766e; overflow-wrap: anywhere; }
.inventory-mobile-group-toggle span { color: #475569; font-size: 12px; }
.inventory-mobile-group-toggle small { color: #64748b; font-size: 11px; overflow-wrap: anywhere; }
.inventory-order-child-card { margin-left: 12px; border-left: 3px solid rgba(20,184,166,.35) !important; }
@media (max-width:760px) {
  .inventory-mobile-group-toggle { padding: 13px; }
  .inventory-order-child-card { margin-left: 8px; }
}


/* Linked barcode summary 20260723 */
.linked-barcode-summary { display: flex; width: 100%; align-items: flex-start; gap: 10px; margin-top: 9px; padding: 10px 12px; border: 1px solid rgba(20,184,166,.24); border-radius: 11px; background: rgba(240,253,250,calc(var(--panel-opacity) * .76)); }
.linked-barcode-summary.hidden { display: none !important; }
.linked-barcode-summary > span { flex: 0 0 auto; padding-top: 5px; color: #64748b; font-size: 12px; }
.linked-barcode-summary > div { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
.linked-barcode-chip { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 10px; border-radius: 999px; color: #0f766e; background: rgba(204,251,241,.9); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width:760px) { .linked-barcode-summary { flex-direction: column; gap: 6px; } .linked-barcode-summary > span { padding-top: 0; } }


/* Purchase relation row distinction 20260723 */
#recordsTable .purchase-order-primary-row { background: rgba(240,253,250,calc(var(--panel-opacity) * .82)) !important; }
#recordsTable .purchase-order-linked-row { background: rgba(248,250,252,calc(var(--panel-opacity) * .9)) !important; }
#recordsTable .purchase-order-primary-row td:first-child { border-left: 4px solid #14b8a6; }
#recordsTable .purchase-order-linked-row td:first-child { border-left: 4px solid #94a3b8; padding-left: 26px; }
#recordsTable .purchase-order-primary-row td { border-bottom-color: rgba(153,246,228,.7); }
#recordsTable .purchase-order-linked-row td { border-bottom-color: rgba(203,213,225,.8); }
.purchase-order-relation-badge { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-size: 11px; font-weight: 650; }
.purchase-order-relation-badge.primary { color: #0f766e; background: rgba(204,251,241,.95); }
.purchase-order-relation-badge.linked { color: #475569; background: rgba(226,232,240,.95); }
#recordsTable .purchase-order-child-row:hover { filter: brightness(.99); }
@media (max-width:760px) {
  #recordsTable .purchase-order-linked-row td:first-child { padding-left: 20px; }
  .purchase-order-relation-badge { min-height: 24px; padding: 2px 7px; font-size: 10px; }
}


/* Purchase commercial form layout 20260723 */
.purchase-commercial-section { display: grid; gap: 12px; padding: 15px; border: 1px solid rgba(203,213,225,calc(var(--panel-opacity) * .74)); border-radius: 15px; background: rgba(248,250,252,calc(var(--panel-opacity) * .68)); }
.purchase-commercial-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(226,232,240,.86); }
.purchase-commercial-heading span { color: #0f766e; font-size: 13px; font-weight: 650; }
.purchase-commercial-heading small { color: #94a3b8; font-size: 11px; text-align: right; }
.purchase-commercial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px 14px; align-items: start; }
.purchase-commercial-grid label { display: grid !important; width: 100% !important; min-width: 0 !important; gap: 7px !important; align-content: start !important; }
.purchase-commercial-grid label > span { min-height: 18px; color: #475569; font-size: 12px; line-height: 18px; }
.purchase-commercial-grid :is(input,select) { width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-radius: 11px !important; line-height: 48px !important; box-sizing: border-box !important; }
.purchase-commercial-grid select { padding-right: 38px !important; }
@media (max-width:980px) { .purchase-commercial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .purchase-commercial-section { padding: 13px; gap: 10px; }
  .purchase-commercial-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .purchase-commercial-heading small { text-align: left; }
  .purchase-commercial-grid { grid-template-columns: 1fr; gap: 11px; }
  .purchase-commercial-grid :is(input,select) { height: 48px !important; min-height: 48px !important; max-height: 48px !important; }
}


/* Product group primary category 20260723 */
.product-group-category { display: inline-flex !important; min-height: 28px; align-items: center; padding: 4px 10px; border: 1px solid rgba(20,184,166,.2); border-radius: 999px; color: #0f766e !important; background: rgba(204,251,241,.86); font-size: 12px !important; font-weight: 650; white-space: nowrap; }
.inventory-mobile-group-toggle .product-group-category { width: max-content; min-height: 24px; padding: 3px 9px; font-size: 11px !important; }
@media (max-width:760px) { .purchase-group-toggle .product-group-category, .inventory-group-toggle .product-group-category { min-height: 26px; padding: 3px 8px; } }


/* Inline primary order groups 20260723 */
#recordsTable .purchase-group-main-row { background: rgba(240,253,250,calc(var(--panel-opacity) * .82)) !important; }
#recordsTable .purchase-group-main-row td:first-child { border-left: 4px solid #14b8a6; }
.purchase-inline-group-toggle,
.inventory-inline-group-toggle { display: inline-flex; min-width: 0; align-items: center; gap: 9px; padding: 0; border: 0; color: inherit; background: transparent; white-space: nowrap; }
.purchase-inline-group-toggle > span,
.inventory-inline-group-toggle > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#20c4b2,#0f9f97); font-size: 18px; line-height: 1; }
.purchase-inline-group-toggle strong,
.inventory-inline-group-toggle strong { color: #0f766e; font-size: inherit; }
#recordsTable .purchase-order-linked-row { background: rgba(248,250,252,calc(var(--panel-opacity) * .9)) !important; }
#recordsTable .purchase-order-linked-row td:first-child { border-left: 4px solid #cbd5e1; padding-left: 28px; }
.inventory-table .inventory-order-child-row { background: rgba(248,250,252,calc(var(--panel-opacity) * .9)) !important; }
.inventory-table .inventory-order-child-row td:first-child { border-left: 4px solid #cbd5e1; padding-left: 28px; }
.inventory-inline-group-toggle { width: 100%; }
.inventory-mobile-inline-toggle { display: grid; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin-bottom: 5px; padding: 0 !important; place-items: center; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#20c4b2,#0f9f97); font-size: 18px; }
.inventory-mobile-card:not(.inventory-order-child-card):has(.inventory-mobile-inline-toggle) { border-color: rgba(45,212,191,.5); background: rgba(240,253,250,calc(var(--panel-opacity) * .82)); }
.inventory-order-child-card { margin-left: 10px; border-left: 4px solid #cbd5e1 !important; background: rgba(248,250,252,calc(var(--panel-opacity) * .9)) !important; }
@media (max-width:760px) {
  .purchase-inline-group-toggle > span,
  .inventory-inline-group-toggle > span { width: 28px; height: 28px; flex-basis: 28px; }
  #recordsTable .purchase-order-linked-row td:first-child,
  .inventory-table .inventory-order-child-row td:first-child { padding-left: 20px; }
}


/* Record form relation actions 20260723 */
.record-form-relation-actions { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid rgba(20,184,166,.26); border-radius: 13px; background: linear-gradient(135deg,rgba(240,253,250,.94),rgba(248,250,252,.92)); }
.record-form-relation-actions.hidden { display: none !important; }
.record-form-relation-actions > div:first-child { display: grid; gap: 4px; min-width: 0; }
.record-form-relation-actions > div:first-child strong { color: #0f766e; font-size: 14px; }
.record-form-relation-actions > div:first-child span { color: #64748b; font-size: 12px; line-height: 1.45; }
.record-form-relation-buttons { display: flex; flex: 0 0 auto; gap: 8px; }
.record-form-relation-buttons button { width: auto !important; min-width: 100px; height: 40px; min-height: 40px; padding: 0 14px; white-space: nowrap; }
@media (max-width:760px) {
  .record-form-relation-actions { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px; }
  .record-form-relation-buttons { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .record-form-relation-buttons button { width: 100% !important; min-width: 0; }
}
@media (max-width:380px) { .record-form-relation-buttons { grid-template-columns: 1fr; } }


/* Linked barcode remove action 20260723 */
.linked-barcode-chip { gap: 7px; padding: 3px 4px 3px 10px; }
.linked-barcode-chip > span { min-width: 0; overflow-wrap: anywhere; }
.linked-barcode-chip > button { display: grid; width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; padding: 0 !important; flex: 0 0 22px; place-items: center; border: 0; border-radius: 50%; color: #64748b; background: rgba(255,255,255,.82); font-size: 16px; line-height: 1; }
.linked-barcode-chip > button:hover { color: #dc2626; background: #fee2e2; }
.linked-barcode-chip > button:disabled { opacity: .45; cursor: wait; }
@media (max-width:760px) { .linked-barcode-chip > button { width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; flex-basis: 26px; } }
/* Linked barcode full-row display 20260727 */
.linked-barcode-summary { display:grid; gap:8px; }
.linked-barcode-summary > span { padding-top:0; }
.linked-barcode-summary > div { display:grid; width:100%; gap:7px; }
.linked-barcode-chip { display:grid; width:100%; min-height:38px; grid-template-columns:minmax(0,1fr) auto 28px; align-items:center; gap:10px; padding:6px 7px 6px 11px; border:1px solid rgba(45,212,191,.42); border-radius:10px; color:#0f766e; background:rgba(204,251,241,.78); font-size:12px; font-weight:400; }
.linked-barcode-name { min-width:0; overflow:hidden; color:#115e59; text-overflow:ellipsis; white-space:nowrap; }
.linked-barcode-value { color:#64748b; font-size:11px; white-space:nowrap; }
.linked-barcode-chip > button { width:26px !important; min-width:26px !important; max-width:26px !important; height:26px !important; min-height:26px !important; flex-basis:26px; }
@media (max-width:520px) {
  .linked-barcode-chip { grid-template-columns:minmax(0,1fr) 28px; gap:3px 8px; }
  .linked-barcode-value { grid-column:1; grid-row:2; overflow:hidden; text-overflow:ellipsis; }
  .linked-barcode-chip > button { grid-column:2; grid-row:1/3; }
}


/* Calculation records 20260723 */
.calculation-dashboard { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:18px; }
.calculation-panel,.calculation-product-admin { padding:18px; border:1px solid rgba(226,232,240,.85); border-radius:18px; background:rgba(255,255,255,calc(var(--panel-opacity)*.9)); box-shadow:0 18px 45px rgba(15,23,42,.08); }
.calculation-panel-head,.calculation-admin-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.calculation-product-list,.calculation-history-list,.calculation-product-admin-list { display:grid; gap:9px; }
.calculation-product-row { display:grid; grid-template-columns:minmax(110px,.7fr) minmax(190px,1.3fr) 110px 120px 110px; gap:10px; align-items:center; padding:10px 12px; border:1px solid #e2e8f0; border-radius:12px; background:rgba(248,250,252,.86); }
.calculation-product-row input { height:40px; }
.calculation-product-row .calculation-actual-name { min-width:0; padding:0 12px; text-align:left; }
.calculation-product-row .calculation-price, .calculation-product-row .calculation-quantity { text-align:center; }
.calculation-product-row em { color:#0f766e; font-style:normal; font-weight:650; text-align:right; }
.calculation-total-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:14px; border-radius:14px; background:rgba(204,251,241,.65); }
.calculation-total-bar div { display:grid; gap:3px; }.calculation-total-bar strong{font-size:24px;color:#0f766e;}
.calculation-history-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:12px; border:1px solid #e2e8f0; border-radius:12px; }
.calculation-history-item div { display:grid; gap:4px; min-width:0; }.calculation-history-item span{color:#64748b;font-size:12px;overflow-wrap:anywhere;}.calculation-history-item b{color:#0f766e;}.calculation-history-item button{border:0;color:#dc2626;background:transparent;}
.calculation-product-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; margin-bottom:14px; }.calculation-product-form label{display:grid;gap:6px;}.calculation-product-form input{height:44px;}
.calculation-empty { padding:30px 14px; color:#94a3b8; text-align:center; }
@media(max-width:980px){.calculation-dashboard{grid-template-columns:1fr}.calculation-product-row{grid-template-columns:minmax(90px,.6fr) minmax(160px,1.2fr) 90px 110px 100px}}
@media(max-width:760px){.calculation-panel,.calculation-product-admin{padding:13px;border-radius:14px}.calculation-product-row{grid-template-columns:1fr 1fr}.calculation-product-row .calculation-actual-name{grid-column:1/-1}.calculation-product-row input,.calculation-product-row em{width:100%;text-align:left}.calculation-product-row .calculation-price,.calculation-product-row .calculation-quantity{text-align:center}.calculation-total-bar{align-items:stretch;flex-direction:column}.calculation-total-bar button{width:100%}.calculation-history-item{grid-template-columns:1fr auto}.calculation-history-item button{grid-column:1/-1}.calculation-product-form{grid-template-columns:1fr}.calculation-product-form button{width:100%}}


/* Compact purchase action column 20260723 */
#recordsTable {
  min-width: 1720px !important;
}

#recordsTable .action-column {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
  text-align: center;
}

#recordsTable .row-actions {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
}

#recordsTable .row-button {
  height: 34px !important;
  min-width: 48px !important;
  padding: 0 8px !important;
}

@media (max-width: 760px) {
  #recordsTable {
    min-width: 1640px !important;
  }

  #recordsTable .action-column {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }

  #recordsTable .row-button {
    min-width: 44px !important;
    padding: 0 6px !important;
  }
}


/* Compact purchase quantity column 20260723 */
#recordsTable th[data-column-key="quantity"],
#recordsTable td.money:nth-child(n) {
  white-space: nowrap;
}
#recordsTable th[data-column-key="quantity"] {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
}

.calculation-admin-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid #e2e8f0; border-radius:12px; }


/* Calculation history modal 20260724 */
.calculation-dashboard { grid-template-columns:minmax(0,1fr); }
.calculation-head-actions { display:flex; align-items:center; gap:8px; }
.calculation-history-modal { position:fixed; inset:0; z-index:290; display:grid; place-items:center; padding:24px; background:rgba(15,23,42,.46); }
.calculation-history-modal.hidden { display:none !important; }
.calculation-history-panel { width:min(680px,calc(100vw - 48px)); max-height:min(760px,calc(100dvh - 48px)); display:flex; flex-direction:column; overflow:hidden; padding:20px; background:rgba(255,255,255,.98); box-shadow:0 30px 90px rgba(15,23,42,.28); }
.calculation-history-panel .calculation-panel-head > div { display:flex; align-items:center; gap:12px; }
.calculation-history-close { display:grid; width:40px; min-width:40px; height:40px; padding:0; place-items:center; border:1px solid #cbd5e1; border-radius:10px; color:#475569; background:#f8fafc; font-size:24px; line-height:1; }
.calculation-history-list { overflow-y:auto; padding-right:4px; }
body.calculation-history-open { overflow:hidden; }
@media(max-width:760px){.calculation-panel-head{align-items:flex-start}.calculation-head-actions{gap:6px}.calculation-head-actions button{padding-left:10px;padding-right:10px}.calculation-history-modal{place-items:stretch;padding:64px 0 0}.calculation-history-panel{width:100%;max-height:calc(100dvh - 64px);padding:14px;border-radius:16px 16px 0 0}.calculation-history-panel .calculation-panel-head{align-items:center}.calculation-history-panel .calculation-panel-head > div{align-items:flex-start;flex-direction:column;gap:3px}}


/* Calculation column header 20260724 */
.calculation-column-head { display:grid; grid-template-columns:minmax(110px,.7fr) minmax(190px,1.3fr) 110px 120px 110px; gap:10px; align-items:center; margin-bottom:9px; padding:0 12px; color:#64748b; font-size:12px; }
.calculation-column-head span:nth-child(3), .calculation-column-head span:nth-child(4) { text-align:center; }
.calculation-column-head span:last-child { text-align:right; }
@media(max-width:980px) and (min-width:761px){.calculation-column-head{grid-template-columns:minmax(90px,.6fr) minmax(160px,1.2fr) 90px 110px 100px}}
@media(max-width:760px){.calculation-column-head{display:none}}


/* Calculation inventory-table style 20260724 */
@media(min-width:761px){
  .calculation-panel { padding:18px 20px 20px; }
  .calculation-panel-head { margin-bottom:14px; }
  .calculation-column-head { min-height:44px; margin-bottom:0; padding:0 14px; border:1px solid #dbe4ee; border-radius:12px 12px 0 0; background:rgba(248,250,252,.94); color:#53657a; font-weight:600; }
  .calculation-product-list { display:block; overflow:hidden; border:1px solid #dbe4ee; border-top:0; border-radius:0 0 12px 12px; background:rgba(255,255,255,.7); }
  .calculation-product-row { min-height:62px; padding:9px 14px; border:0; border-top:1px solid #e5ebf2; border-radius:0; background:transparent; }
  .calculation-product-row:first-child { border-top:0; }
  .calculation-product-row:hover { background:rgba(240,253,250,.66); }
  .calculation-product-row input { height:38px; border-color:#d7e0ea; border-radius:9px; background:rgba(255,255,255,.86); box-shadow:none; }
  .calculation-product-row > span { color:#334155; font-weight:550; }
  .calculation-product-row em { color:#087f73; font-weight:650; }
  .calculation-total-bar { margin-top:12px; border:1px solid rgba(153,246,228,.72); box-shadow:none; }
}
@media(max-width:760px){
  .calculation-product-list { display:grid; gap:9px; border:0; background:transparent; }
  .calculation-product-row { border:1px solid #e2e8f0; border-radius:12px; background:rgba(248,250,252,.86); }
}


/* Unified purchase-table calculation style 20260724 */
@media(min-width:761px){
  .calculation-dashboard { gap:0 !important; }
  .calculation-panel:not(.calculation-history-panel) { overflow:hidden; padding:0 !important; border:1px solid rgba(226,232,240,.9) !important; border-radius:16px !important; background:rgba(255,255,255,calc(var(--panel-opacity)*.92)) !important; box-shadow:0 16px 38px rgba(15,23,42,.07) !important; }
  .calculation-panel:not(.calculation-history-panel) > .calculation-panel-head { min-height:66px; margin:0 !important; padding:14px 18px !important; border-bottom:1px solid #e2e8f0; background:rgba(255,255,255,.78); }
  .calculation-column-head { min-height:46px !important; margin:0 !important; padding:0 16px !important; border:0 !important; border-bottom:1px solid #dfe7ef !important; border-radius:0 !important; background:rgba(248,250,252,.96) !important; }
  .calculation-product-list { display:block !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; background:rgba(255,255,255,.72) !important; }
  .calculation-product-row { min-height:62px !important; margin:0 !important; padding:9px 16px !important; border:0 !important; border-bottom:1px solid #e5ebf2 !important; border-radius:0 !important; background:rgba(255,255,255,.5) !important; box-shadow:none !important; }
  .calculation-product-row:first-child { border-top:0 !important; }
  .calculation-product-row:last-child { border-bottom:0 !important; }
  .calculation-product-row:hover { background:rgba(240,253,250,.72) !important; }
  .calculation-product-row input { height:38px !important; border:1px solid #d9e2ec !important; border-radius:8px !important; background:rgba(255,255,255,.92) !important; box-shadow:none !important; }
  .calculation-total-bar { min-height:76px; margin:0 !important; padding:14px 18px !important; border:0 !important; border-top:1px solid #d7eee9 !important; border-radius:0 !important; background:rgba(236,253,250,.82) !important; box-shadow:none !important; }
}


/* Calculation toolbar primary buttons 20260724 */
.calculation-toolbar-head { justify-content:flex-end !important; }
.calculation-toolbar-head .calculation-head-actions { margin-left:auto; }
#calculationHistoryToggle,
#calculationClear { min-height:40px; color:#fff !important; border-color:transparent !important; background:linear-gradient(135deg,#19b7aa,#07998f) !important; box-shadow:0 8px 18px rgba(13,148,136,.18) !important; }
#calculationHistoryToggle:hover,
#calculationClear:hover { background:linear-gradient(135deg,#16a99e,#07877f) !important; box-shadow:0 10px 22px rgba(13,148,136,.24) !important; }
@media(max-width:760px){.calculation-toolbar-head{min-height:58px!important;align-items:center!important}.calculation-toolbar-head .calculation-head-actions{width:100%;justify-content:flex-end}.calculation-toolbar-head .calculation-head-actions button{width:auto}}


/* Cross-view responsive safeguards 20260724 */
.view,
.records-panel,
.admin-panel,
.inventory-dashboard,
.calculation-dashboard,
.calculation-panel,
.converter-shell { min-width:0; max-width:100%; box-sizing:border-box; }
.page-header > div,
.calculation-product-row > *,
.inventory-filter-grid > *,
.records-toolbar > * { min-width:0; }
@media(max-width:760px){
  .view { width:100%; overflow-x:hidden; }
  button,
  .primary-button,
  .secondary-button,
  .row-button { min-height:40px; }
  input,
  select,
  textarea { max-width:100%; box-sizing:border-box; }
  .page-header h1,
  .page-header p,
  .calculation-history-item span,
  .inventory-mobile-card dd { overflow-wrap:anywhere; }
}


/* Calculation history restore and export 20260724 */
.calculation-history-head-actions { display:flex; align-items:center; gap:8px; }
#calculationHistoryExport { min-height:40px; white-space:nowrap; }
.calculation-history-item-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.calculation-history-item-actions button { min-height:34px; padding:0 10px; border:1px solid transparent; border-radius:8px; white-space:nowrap; }
.calculation-history-item-actions button[data-calculation-history-edit] { color:#087f73; border-color:#99f6e4; background:#ecfdf5; }
.calculation-history-item-actions button[data-calculation-history-edit]:hover { color:#fff; background:#0f9f97; }
.calculation-history-item-actions button[data-calculation-history-delete] { color:#dc2626; background:#fff7f7; }
@media(max-width:760px){.calculation-history-head-actions{gap:6px}.calculation-history-head-actions #calculationHistoryExport{padding:0 10px}.calculation-history-item{grid-template-columns:1fr auto}.calculation-history-item-actions{grid-column:1/-1;justify-content:stretch}.calculation-history-item-actions button{flex:1;min-height:40px}}


/* Mobile basic-data action alignment 20260724 */
@media(max-width:760px){
  #adminView .option-admin .option-list > .option-row { grid-template-columns:40px minmax(0,1fr) 54px 54px !important; grid-template-rows:minmax(44px,auto) !important; align-items:center !important; gap:6px !important; padding:7px 8px !important; }
  #adminView .option-admin .option-list > .option-row > .drag-handle { grid-column:1 !important; grid-row:1 !important; align-self:center !important; width:34px !important; height:40px !important; }
  #adminView .option-admin .option-list > .option-row > span { grid-column:2 !important; grid-row:1 !important; align-self:center !important; padding:4px 2px !important; }
  #adminView .option-admin .option-list > .option-row > .row-button { grid-row:1 !important; width:54px !important; min-width:54px !important; height:40px !important; min-height:40px !important; padding:0 6px !important; justify-self:end !important; opacity:1 !important; visibility:visible !important; }
  #adminView .option-admin .option-list > .option-row > .row-button.edit { grid-column:3 !important; }
  #adminView .option-admin .option-list > .option-row > .row-button.delete { grid-column:4 !important; }
}
@media(max-width:380px){
  #adminView .option-admin .option-list > .option-row { grid-template-columns:40px minmax(0,1fr) minmax(54px,1fr) !important; grid-template-rows:minmax(44px,auto) 40px !important; }
  #adminView .option-admin .option-list > .option-row > span { grid-column:2 / -1 !important; }
  #adminView .option-admin .option-list > .option-row > .row-button { grid-row:2 !important; width:100% !important; }
  #adminView .option-admin .option-list > .option-row > .row-button.edit { grid-column:2 !important; }
  #adminView .option-admin .option-list > .option-row > .row-button.delete { grid-column:3 !important; }
}


/* Calculation and inventory draggable columns 20260724 */
.calculation-column-head > [data-calculation-column-key] {
  display:flex;
  align-items:center;
  min-width:0;
  cursor:grab;
  user-select:none;
}
.calculation-column-head > [data-calculation-column-key]:active,
.calculation-column-head > [data-calculation-column-key].dragging { cursor:grabbing; }
.calculation-column-head > .dragging { opacity:.58; }
.calculation-column-head > .column-drop-before,
.calculation-column-head > .column-drop-after { color:var(--green-dark); background:rgba(47,111,85,.1); border-radius:7px; }
.calculation-column-head > .column-drop-before { box-shadow:inset 3px 0 0 var(--green); }
.calculation-column-head > .column-drop-after { box-shadow:inset -3px 0 0 var(--green); }
.inventory-table th[data-inventory-column-key][draggable="true"] { cursor:grab; user-select:none; }
.inventory-table th[data-inventory-column-key][draggable="true"]:active,
.inventory-table th[data-inventory-column-key].dragging { cursor:grabbing; }
.inventory-table th.column-drop-before,
.inventory-table th.column-drop-after { color:var(--green-dark); background:rgba(47,111,85,.12); }
.inventory-table th.column-drop-before { box-shadow:inset 3px 0 0 var(--green); }
.inventory-table th.column-drop-after { box-shadow:inset -3px 0 0 var(--green); }
@media(max-width:760px){
  .calculation-column-head { display:none !important; }
  .inventory-table-wrap { display:none; }
}


/* Calculation transparency aligned with purchase records 20260724 */
body:not(.login-mode) .calculation-panel:not(.calculation-history-panel) {
  border-color:rgba(226,232,240,calc(var(--panel-opacity)*.72)) !important;
  background:rgba(255,255,255,calc(var(--panel-opacity)*.42)) !important;
  box-shadow:0 12px 30px rgba(15,23,42,calc(var(--panel-opacity)*.045)) !important;
}
body:not(.login-mode) .calculation-panel:not(.calculation-history-panel) > .calculation-panel-head {
  border-color:rgba(226,232,240,calc(var(--panel-opacity)*.7)) !important;
  background:rgba(255,255,255,calc(var(--panel-opacity)*.26)) !important;
}
body:not(.login-mode) .calculation-column-head {
  border-color:rgba(223,231,239,calc(var(--panel-opacity)*.72)) !important;
  background:rgba(248,250,252,calc(var(--panel-opacity)*.34)) !important;
}
body:not(.login-mode) .calculation-product-list {
  background:rgba(255,255,255,calc(var(--panel-opacity)*.16)) !important;
}
body:not(.login-mode) .calculation-product-row {
  border-color:rgba(226,232,240,calc(var(--panel-opacity)*.75)) !important;
  background:rgba(255,255,255,calc(var(--panel-opacity)*.12)) !important;
}
body:not(.login-mode) .calculation-product-row:hover {
  background:rgba(240,253,250,calc(var(--panel-opacity)*.48)) !important;
}
body:not(.login-mode) .calculation-product-row input {
  border-color:rgba(203,213,225,calc(.5 + var(--panel-opacity)*.4)) !important;
  background:rgba(255,255,255,calc(.18 + var(--panel-opacity)*.42)) !important;
}
body:not(.login-mode) .calculation-total-bar {
  border-color:rgba(153,246,228,calc(var(--panel-opacity)*.72)) !important;
  background:rgba(236,253,250,calc(var(--panel-opacity)*.36)) !important;
}
body.panel-opacity-zero:not(.login-mode) :where(
  .calculation-panel:not(.calculation-history-panel),
  .calculation-panel:not(.calculation-history-panel) > .calculation-panel-head,
  .calculation-column-head,
  .calculation-product-list,
  .calculation-product-row,
  .calculation-product-row input,
  .calculation-total-bar
) { border-color:transparent !important; background:transparent !important; box-shadow:none !important; }
@media(max-width:760px){
  body:not(.login-mode) .calculation-product-row { background:rgba(255,255,255,calc(var(--panel-opacity)*.34)) !important; }
  body:not(.login-mode) .calculation-product-row input { background:rgba(255,255,255,calc(.2 + var(--panel-opacity)*.44)) !important; }
}


/* Desktop table columns centered 20260724 */
@media(min-width:761px){
  #recordsTable th,
  #recordsTable td,
  .inventory-table th,
  .inventory-table td { text-align:center !important; vertical-align:middle !important; }
  #recordsTable th .column-title,
  .inventory-table th .column-title { display:inline-block; text-align:center; }
  #recordsTable .purchase-group-toggle,
  .inventory-table .inventory-group-toggle { justify-content:center !important; text-align:center !important; }
  #recordsTable .action-column,
  .inventory-table .action-column,
  #recordsTable .row-actions,
  .inventory-table .inventory-row-actions { justify-content:center !important; text-align:center !important; }
  .calculation-column-head > [data-calculation-column-key] { justify-content:center !important; text-align:center !important; }
  .calculation-product-row > span,
  .calculation-product-row > em { display:flex; align-items:center; justify-content:center; text-align:center !important; }
  .calculation-product-row input,
  .calculation-product-row .calculation-actual-name,
  .calculation-product-row .calculation-quantity,
  .calculation-product-row .calculation-price { text-align:center !important; }
  .calculation-product-row input::placeholder { text-align:center; }
}


/* All-device centered content 20260724 */
.calculation-product-row > span,
.calculation-product-row > em { display:flex; align-items:center; justify-content:center; text-align:center !important; }
.calculation-product-row input,
.calculation-product-row .calculation-actual-name,
.calculation-product-row .calculation-quantity,
.calculation-product-row .calculation-price,
.calculation-product-row input::placeholder { text-align:center !important; }
@media(max-width:760px){
  .mobile-record-card,
  .mobile-record-card :where(h3,h4,p,span,strong,dt,dd) { text-align:center !important; }
  .mobile-record-card :where(.row-actions,.mobile-record-actions,.record-card-actions) { justify-content:center !important; }
  .inventory-mobile-card,
  .inventory-mobile-card-head,
  .inventory-mobile-card-head > div,
  .inventory-mobile-card dt,
  .inventory-mobile-card dd { text-align:center !important; }
  .inventory-mobile-card-head { align-items:center !important; justify-content:center !important; flex-direction:column !important; }
  .inventory-mobile-card-head > div { justify-items:center !important; width:100%; }
  .inventory-mobile-card dl > div { text-align:center !important; }
  .inventory-mobile-actions { justify-content:center !important; }
  .calculation-product-row > span,
  .calculation-product-row > em,
  .calculation-product-row input { text-align:center !important; justify-content:center !important; }
}


/* Compact calculation columns 20260724 */
@media(min-width:1181px){
  .calculation-column-head,
  .calculation-product-row {
    grid-template-columns:170px minmax(320px,520px) 96px 132px 110px !important;
    justify-content:center !important;
    column-gap:12px !important;
  }
  .calculation-product-row { min-height:58px !important; padding-left:18px !important; padding-right:18px !important; }
  .calculation-product-row input { height:42px !important; }
}
@media(min-width:761px) and (max-width:1180px){
  .calculation-column-head,
  .calculation-product-row {
    grid-template-columns:140px minmax(220px,1fr) 86px 112px 96px !important;
    column-gap:9px !important;
  }
}


/* Optimized purchase order 20260724 */
.optimized-order-modal { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px; background:rgba(15,23,42,.46); }
.optimized-order-modal.hidden { display:none !important; }
.optimized-order-card { width:min(940px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); overflow:auto; border:1px solid rgba(204,251,241,.9); border-radius:20px; background:rgba(255,255,255,.98); box-shadow:0 30px 90px rgba(15,23,42,.28); }
.optimized-order-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 24px; border-bottom:1px solid #dff3ef; background:linear-gradient(135deg,#f0fdfa,#ffffff); }
.optimized-order-head > div { display:grid; gap:5px; }
.optimized-order-head span { color:#0f9f97; font-size:12px; letter-spacing:.12em; }
.optimized-order-head h2 { margin:0; color:#16324a; font-size:24px; }
.optimized-order-head p { margin:0; color:#64748b; font-size:12px; }
.optimized-order-head > button { width:40px; height:40px; flex:0 0 40px; border:1px solid #cbd5e1; border-radius:12px; color:#475569; background:#fff; font-size:24px; line-height:1; }
.optimized-order-table-wrap { overflow:auto; padding:20px 24px 0; }
.optimized-order-table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid #dbe7e5; border-radius:14px; }
.optimized-order-table th,.optimized-order-table td { padding:13px 12px; border-bottom:1px solid #e5edec; text-align:center; white-space:nowrap; }
.optimized-order-table th { color:#0f766e; background:#f0fdfa; font-size:12px; }
.optimized-order-table td { color:#334155; background:#fff; font-size:13px; }
.optimized-order-table tbody tr:last-child td { border-bottom:0; }
.optimized-order-table th:nth-child(3),.optimized-order-table td:nth-child(3) { min-width:220px; white-space:normal; }
.optimized-order-summary { display:flex; align-items:center; justify-content:flex-end; gap:22px; margin:18px 24px 0; padding:16px 18px; border:1px solid #bbf7d0; border-radius:14px; background:#f0fdfa; }
.optimized-order-summary span { color:#475569; }
.optimized-order-summary strong { color:#087f73; font-size:26px; }
.optimized-order-actions { display:flex; justify-content:flex-end; gap:10px; padding:18px 24px 24px; }
.calculation-history-item-actions button[data-calculation-history-order] { color:#075985; border-color:#bae6fd; background:#f0f9ff; }
.calculation-history-item-actions button[data-calculation-history-order]:hover { color:#fff; background:#0284c7; }
@media(max-width:760px){
  .optimized-order-modal { place-items:stretch; padding:56px 0 0; }
  .optimized-order-card { width:100%; max-height:calc(100dvh - 56px); border-radius:18px 18px 0 0; }
  .optimized-order-head { padding:16px; }
  .optimized-order-head h2 { font-size:21px; }
  .optimized-order-table-wrap { padding:14px 12px 0; }
  .optimized-order-table { min-width:700px; }
  .optimized-order-summary { justify-content:space-between; margin:14px 12px 0; }
  .optimized-order-actions { display:grid; grid-template-columns:1fr 1fr; padding:14px 12px 18px; }
  .optimized-order-actions #optimizedOrderDone { grid-column:1/-1; }
  .optimized-order-actions button { width:100%; min-height:44px; }
}


/* Purchase order price visibility 20260724 */
.optimized-order-price-toggle[aria-pressed="true"] { color:#9a3412 !important; border-color:#fed7aa !important; background:#fff7ed !important; }
.optimized-order-price-toggle[aria-pressed="false"] { color:#087f73 !important; border-color:#99f6e4 !important; background:#ecfdf5 !important; }
@media(max-width:760px){
  .optimized-order-actions #optimizedOrderDone { grid-column:auto; }
}


/* Final calculation transparency match 20260724 */
body:not(.login-mode) .calculation-panel:not(.calculation-history-panel) {
  background:rgba(255,255,255,calc(var(--panel-opacity)*.14)) !important;
  box-shadow:0 10px 26px rgba(15,23,42,calc(var(--panel-opacity)*.035)) !important;
  backdrop-filter:none !important;
}
body:not(.login-mode) .calculation-panel:not(.calculation-history-panel) > .calculation-panel-head {
  background:rgba(255,255,255,calc(var(--panel-opacity)*.08)) !important;
}
body:not(.login-mode) .calculation-column-head {
  background:rgba(248,250,252,calc(var(--panel-opacity)*.14)) !important;
}
body:not(.login-mode) .calculation-product-list,
body:not(.login-mode) .calculation-product-row {
  background:transparent !important;
  backdrop-filter:none !important;
}
body:not(.login-mode) .calculation-product-row:hover {
  background:rgba(240,253,250,calc(var(--panel-opacity)*.28)) !important;
}
body:not(.login-mode) .calculation-product-row input {
  background:rgba(255,255,255,calc(.08 + var(--panel-opacity)*.30)) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
body:not(.login-mode) .calculation-total-bar {
  background:rgba(236,253,250,calc(var(--panel-opacity)*.24)) !important;
}
@media(max-width:760px){
  body:not(.login-mode) .calculation-product-row { background:rgba(255,255,255,calc(var(--panel-opacity)*.16)) !important; }
  body:not(.login-mode) .calculation-product-row input { background:rgba(255,255,255,calc(.1 + var(--panel-opacity)*.28)) !important; }
}


/* Hard reset calculation white overlays 20260724 */
body:not(.login-mode) #calculationView :where(
  .calculation-dashboard,
  .calculation-panel:not(.calculation-history-panel),
  .calculation-panel:not(.calculation-history-panel) > .calculation-panel-head,
  .calculation-column-head,
  .calculation-product-list,
  .calculation-product-row
) {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body:not(.login-mode) #calculationView .calculation-panel:not(.calculation-history-panel)::before,
body:not(.login-mode) #calculationView .calculation-panel:not(.calculation-history-panel)::after,
body:not(.login-mode) #calculationView .calculation-product-list::before,
body:not(.login-mode) #calculationView .calculation-product-list::after {
  content:none !important;
  display:none !important;
  background:none !important;
}
body:not(.login-mode) #calculationView .calculation-product-row input {
  background:rgba(255,255,255,calc(var(--panel-opacity)*.30)) !important;
  background-color:rgba(255,255,255,calc(var(--panel-opacity)*.30)) !important;
  background-image:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body:not(.login-mode) #calculationView .calculation-total-bar {
  background:rgba(204,251,241,calc(var(--panel-opacity)*.22)) !important;
  background-color:rgba(204,251,241,calc(var(--panel-opacity)*.22)) !important;
  background-image:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.panel-opacity-zero:not(.login-mode) #calculationView :where(.calculation-product-row input,.calculation-total-bar) {
  background:transparent !important;
  background-color:transparent !important;
}


/* Calculation uses global base transparency 20260724 */
body:not(.login-mode) #calculationView :where(
  .calculation-panel:not(.calculation-history-panel),
  .calculation-panel:not(.calculation-history-panel) > .calculation-panel-head,
  .calculation-product-list,
  .calculation-total-bar
) {
  border-color:rgba(226,232,240,calc(.36 + var(--panel-opacity)*.24)) !important;
  background:rgba(255,255,255,calc(var(--panel-opacity)*.56)) !important;
  background-color:rgba(255,255,255,calc(var(--panel-opacity)*.56)) !important;
  background-image:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body:not(.login-mode) #calculationView :where(
  .calculation-column-head,
  .calculation-product-row
) {
  background:rgba(255,255,255,calc(var(--panel-opacity)*.24)) !important;
  background-color:rgba(255,255,255,calc(var(--panel-opacity)*.24)) !important;
  background-image:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body:not(.login-mode) #calculationView .calculation-product-row input {
  background:rgba(255,255,255,calc(var(--panel-opacity)*.48)) !important;
  background-color:rgba(255,255,255,calc(var(--panel-opacity)*.48)) !important;
  background-image:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body:not(.login-mode) #calculationView .calculation-product-row:hover {
  background:rgba(255,255,255,calc(var(--panel-opacity)*.62)) !important;
  background-color:rgba(255,255,255,calc(var(--panel-opacity)*.62)) !important;
}
body.panel-opacity-zero:not(.login-mode) #calculationView :where(
  .calculation-panel:not(.calculation-history-panel),
  .calculation-panel:not(.calculation-history-panel) > .calculation-panel-head,
  .calculation-column-head,
  .calculation-product-list,
  .calculation-product-row,
  .calculation-product-row input,
  .calculation-total-bar
) {
  border-color:transparent !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}


/* Calculation header matches purchase table 20260724 */
@media(min-width:761px){
  body:not(.login-mode) #calculationView .calculation-column-head {
    min-height:54px !important;
    padding:0 14px !important;
    border:0 !important;
    border-bottom:1px solid var(--line) !important;
    border-radius:0 !important;
    color:var(--muted) !important;
    background:rgba(255,255,255,calc(var(--panel-opacity)*.24)) !important;
    background-color:rgba(255,255,255,calc(var(--panel-opacity)*.24)) !important;
    font-size:12px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
  }
  body:not(.login-mode) #calculationView .calculation-column-head > [data-calculation-column-key] {
    min-height:54px;
    padding:14px 10px;
    box-sizing:border-box;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    line-height:1.2;
  }
  body:not(.login-mode) #calculationView .calculation-column-head .column-drag-icon {
    margin-left:6px;
    color:rgba(47,111,85,.58);
    font-size:11px;
  }
}


/* Real purchase-table header for calculation 20260724 */
.calculation-column-head-wrap { width:100%; overflow:hidden; border-bottom:1px solid var(--line); background:rgba(255,255,255,calc(var(--panel-opacity)*.24)); }
.calculation-header-table { display:block; width:100%; min-width:0 !important; table-layout:fixed; border-collapse:collapse; background:transparent !important; }
.calculation-header-table .calculation-column-head { display:block !important; min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
.calculation-header-table .calculation-column-head > tr { display:grid; grid-template-columns:17fr 51fr 10fr 12fr 10fr; align-items:stretch; width:100%; min-height:54px; padding:0 16px; box-sizing:border-box; background:transparent !important; }
.calculation-header-table .calculation-column-head th { position:relative; top:auto; right:auto; z-index:1; display:flex; align-items:center; justify-content:center; min-width:0; min-height:54px; padding:14px 10px; border:0; color:var(--muted); background:transparent !important; font-size:12px; font-weight:500; letter-spacing:0; text-align:center; white-space:nowrap; cursor:grab; user-select:none; }
.calculation-header-table .calculation-column-head th:active,
.calculation-header-table .calculation-column-head th.dragging { cursor:grabbing; }
.calculation-header-table .calculation-column-head th.dragging { opacity:.58; }
.calculation-header-table .calculation-column-head th.column-drop-before { box-shadow:inset 3px 0 0 var(--green); }
.calculation-header-table .calculation-column-head th.column-drop-after { box-shadow:inset -3px 0 0 var(--green); }
@media(min-width:761px){
  .calculation-product-row { grid-template-columns:17fr 51fr 10fr 12fr 10fr !important; column-gap:10px !important; }
}
@media(max-width:760px){
  .calculation-column-head-wrap { display:none !important; }
  .calculation-product-row { grid-template-columns:1fr 1fr !important; }
}


/* Fix calculation header full-width grid 20260724 */
@media(min-width:761px){
  .calculation-column-head-wrap,
  .calculation-header-table,
  .calculation-header-table .calculation-column-head { display:block !important; width:100% !important; min-width:100% !important; max-width:none !important; box-sizing:border-box !important; }
  .calculation-header-table .calculation-column-head > tr {
    display:grid !important;
    grid-template-columns:minmax(0,17fr) minmax(0,51fr) minmax(0,10fr) minmax(0,12fr) minmax(0,10fr) !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
  }
  .calculation-header-table .calculation-column-head > tr > th {
    display:flex !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }
  .calculation-product-row {
    grid-template-columns:minmax(0,17fr) minmax(0,51fr) minmax(0,10fr) minmax(0,12fr) minmax(0,10fr) !important;
  }
}


/* Exact header-to-row grid alignment 20260724 */
@media(min-width:761px){
  .calculation-column-head-wrap {
    display:grid !important;
    grid-template-columns:minmax(0,17fr) minmax(0,51fr) minmax(0,10fr) minmax(0,12fr) minmax(0,10fr) !important;
    column-gap:10px !important;
    align-items:stretch !important;
    width:100% !important;
    min-height:54px !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
  }
  .calculation-header-table,
  .calculation-header-table .calculation-column-head,
  .calculation-header-table .calculation-column-head > tr {
    display:contents !important;
  }
  .calculation-header-table .calculation-column-head > tr > th {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    min-height:54px !important;
    margin:0 !important;
    padding:14px 10px !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
  .calculation-product-row {
    grid-template-columns:minmax(0,17fr) minmax(0,51fr) minmax(0,10fr) minmax(0,12fr) minmax(0,10fr) !important;
    column-gap:10px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* Stable exact calculation header alignment 20260724 */
@media(min-width:761px){
  body:not(.login-mode) #calculationView .calculation-column-head {
    display:grid !important;
    grid-template-columns:minmax(0,17fr) minmax(0,51fr) minmax(0,10fr) minmax(0,12fr) minmax(0,10fr) !important;
    column-gap:10px !important;
    align-items:stretch !important;
    width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
    margin:0 !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
    border:0 !important;
    border-bottom:1px solid var(--line) !important;
    border-radius:0 !important;
    background:rgba(255,255,255,calc(var(--panel-opacity)*.24)) !important;
  }
  body:not(.login-mode) #calculationView .calculation-column-head > [data-calculation-column-key] {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    min-height:54px !important;
    margin:0 !important;
    padding:14px 10px !important;
    box-sizing:border-box !important;
    color:var(--muted) !important;
    font-size:12px !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  body:not(.login-mode) #calculationView .calculation-column-head > [data-calculation-column-key] .column-title {
    display:inline !important;
    white-space:nowrap !important;
  }
  body:not(.login-mode) #calculationView .calculation-product-row {
    grid-template-columns:minmax(0,17fr) minmax(0,51fr) minmax(0,10fr) minmax(0,12fr) minmax(0,10fr) !important;
    column-gap:10px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}
@media(max-width:760px){
  .calculation-column-head { display:none !important; }
}


/* Calculation header typography matches purchase records 20260724 */
@media(min-width:761px){
  body:not(.login-mode) #calculationView .calculation-column-head > [data-calculation-column-key],
  body:not(.login-mode) #calculationView .calculation-column-head > [data-calculation-column-key] .column-title {
    color:#64748b !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:650 !important;
    line-height:1.25 !important;
    letter-spacing:.035em !important;
  }
  body:not(.login-mode) #calculationView .calculation-column-head .column-drag-icon {
    margin-left:6px !important;
    color:rgba(47,111,85,.58) !important;
    font-size:11px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
}


/* Compact calculation header height 20260724 */
@media(min-width:761px){
  body:not(.login-mode) #calculationView .calculation-column-head,
  body:not(.login-mode) #calculationView .calculation-column-head > [data-calculation-column-key] {
    min-height:44px !important;
    height:44px !important;
  }
  body:not(.login-mode) #calculationView .calculation-column-head > [data-calculation-column-key] {
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}


/* Record relation actions responsive refinement 20260726 */
.record-form-dialog > .record-form-relation-actions {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: auto !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
  isolation: isolate;
}
.record-form-relation-actions > div:first-child {
  position: static !important;
  display: grid !important;
  min-width: 0 !important;
  gap: 5px !important;
  margin: 0 !important;
  transform: none !important;
}
.record-form-relation-actions > div:first-child span {
  overflow-wrap: anywhere;
}
.record-form-relation-buttons {
  position: static !important;
  display: grid !important;
  width: auto !important;
  grid-template-columns: repeat(2, minmax(104px, auto)) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  transform: none !important;
}
.record-form-relation-buttons button {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 104px !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
}
#addRelatedFromForm::before { content: none !important; }
#linkExistingFromForm::before { content: none !important; }
@media (max-width: 760px) {
  .record-form-dialog > .record-form-relation-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .record-form-relation-actions > div:first-child {
    padding-bottom: 11px !important;
    border-bottom: 1px solid rgba(20, 184, 166, .18) !important;
  }
  .record-form-relation-actions > div:first-child strong { font-size: 15px !important; }
  .record-form-relation-actions > div:first-child span { font-size: 12px !important; line-height: 1.55 !important; }
  .record-form-relation-buttons {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .record-form-relation-buttons button {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 10px !important;
  }
}
@media (max-width: 340px) {
  .record-form-relation-buttons { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Mobile record relation content-height safeguard 20260726 */
@media (max-width: 760px) {
  #assetForm.record-form-dialog > #recordFormRelationActions.record-form-relation-actions:not(.hidden) {
    display: grid !important;
    height: max-content !important;
    min-height: 154px !important;
    max-height: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    align-items: stretch !important;
    overflow: visible !important;
    contain: none !important;
  }

  #recordFormRelationActions > div:first-child,
  #recordFormRelationActions > .record-form-relation-buttons {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #recordFormRelationActions > div:first-child > strong,
  #recordFormRelationActions > div:first-child > span,
  #recordFormRelationActions .record-form-relation-buttons > button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* Record relation hidden-state priority fix 20260726 */
#assetForm.record-form-dialog > #recordFormRelationActions.record-form-relation-actions.hidden {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Purchase and inventory viewport-width adaptation 20260726 */
@media (min-width: 761px) {
  #recordsView .records-panel,
  #recordsView .table-wrap,
  #otherView .inventory-list-panel,
  #otherView .inventory-table-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #recordsTable {
    width: 100% !important;
    min-width: 1720px !important;
  }

  #otherView .inventory-table {
    width: 100% !important;
    min-width: 1320px !important;
  }
}

@media (min-width: 1720px) {
  #recordsTable th,
  #recordsTable td {
    padding-right: clamp(10px, 0.72vw, 18px) !important;
    padding-left: clamp(10px, 0.72vw, 18px) !important;
  }
}

@media (min-width: 1320px) {
  #otherView .inventory-table th,
  #otherView .inventory-table td {
    padding-right: clamp(10px, 0.8vw, 18px) !important;
    padding-left: clamp(10px, 0.8vw, 18px) !important;
  }
}

/* Relation action copy removal 20260727 */
#assetForm.record-form-dialog > #recordFormRelationActions.record-form-relation-actions:not(.hidden) {
  min-height: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  padding: 12px !important;
}

#recordFormRelationActions > div:first-child {
  display: none !important;
}

#recordFormRelationActions > .record-form-relation-buttons {
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Repair records page 20260727 */
.repair-dashboard { display:grid; gap:14px; min-height:calc(100dvh - 164px); padding:16px; border:1px solid rgba(226,232,240,.78); border-radius:18px; background:rgba(255,255,255,calc(var(--panel-opacity)*.78)); box-shadow:0 18px 48px rgba(15,23,42,.07); }
.repair-toolbar { display:grid; grid-template-columns:minmax(320px,1fr) minmax(160px,220px) auto; gap:10px; align-items:end; }
.repair-toolbar label { display:grid; gap:6px; min-width:0; }
.repair-toolbar label > span { color:#64748b; font-size:12px; }
.repair-toolbar input,.repair-toolbar select,.repair-toolbar button { height:44px; }
.repair-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px; color:#64748b; font-size:13px; }
.repair-summary strong { color:#0f766e; font-size:14px; }
.repair-table-wrap { min-width:0; overflow:auto; border:1px solid rgba(226,232,240,.76); border-radius:14px; }
.repair-table { width:100%; min-width:1600px; border-collapse:collapse; }
.repair-table th,.repair-table td { height:56px; padding:10px 12px; border-bottom:1px solid rgba(226,232,240,.72); text-align:center; vertical-align:middle; font-size:13px; }
.repair-table th { position:sticky; top:0; z-index:1; color:#64748b; background:rgba(244,249,249,.96); font-size:11px; font-weight:650; letter-spacing:.035em; white-space:nowrap; }
.repair-table tbody tr:last-child td { border-bottom:0; }
.repair-table tbody tr:hover { background:rgba(20,184,166,.045); }
.repair-wrap-cell { min-width:180px; max-width:260px; white-space:normal; overflow-wrap:anywhere; line-height:1.45; }
.repair-status { display:inline-flex; min-height:28px; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; font-size:12px; white-space:nowrap; }
.repair-status.pending { color:#b45309; background:#fef3c7; }
.repair-status.working { color:#1d4ed8; background:#dbeafe; }
.repair-status.completed { color:#047857; background:#d1fae5; }
.repair-status.failed { color:#b91c1c; background:#fee2e2; }
.repair-row-actions { display:flex; align-items:center; justify-content:center; gap:6px; }
.repair-row-actions button { min-width:48px; height:34px; padding:0 9px; border:0; border-radius:9px; color:#0f766e; background:rgba(204,251,241,.72); }
.repair-row-actions button.delete { color:#dc2626; background:rgba(254,226,226,.72); }
.repair-mobile-list { display:none; }
.repair-empty { padding:46px 16px; color:#94a3b8; text-align:center; }
.repair-form-modal { position:fixed; inset:0; z-index:270; display:grid; place-items:center; padding:24px; background:rgba(15,23,42,.48); }
.repair-form-modal.hidden { display:none !important; }
.repair-form-card { display:grid; width:min(820px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; overflow:auto; padding:20px; border:1px solid rgba(226,232,240,.88); border-radius:18px; background:rgba(255,255,255,calc(.72 + var(--panel-opacity)*.28)); box-shadow:0 30px 90px rgba(15,23,42,.24); }
.repair-form-head,.repair-form-wide,.repair-form-actions { grid-column:1/-1; }
.repair-form-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.repair-form-head h2 { margin:0; font-size:20px; }
.repair-form-head button { display:grid; width:38px; min-width:38px; height:38px; min-height:38px; padding:0; place-items:center; border:1px solid #cbd5e1; border-radius:10px; color:#475569; background:#f8fafc; font-size:23px; }
.repair-form-card label { display:grid; gap:6px; min-width:0; color:#475569; font-size:13px; }
.repair-form-card input,.repair-form-card select,.repair-form-card textarea { width:100%; min-width:0; }
.repair-form-card input,.repair-form-card select { height:44px; }
.repair-form-card textarea { resize:vertical; }
.repair-parts-field { display:grid; gap:7px; min-width:0; color:#475569; font-size:13px; }
.repair-parts-panel { display:grid; gap:9px; padding:10px; border:1px solid rgba(45,212,191,.52); border-radius:14px; background:linear-gradient(145deg,rgba(240,253,250,calc(.54 + var(--panel-opacity)*.24)),rgba(248,250,252,calc(.46 + var(--panel-opacity)*.22))); box-shadow:0 8px 24px rgba(15,118,110,.07); }
.repair-parts-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px; }
.repair-parts-panel-head strong { color:#334155; font-size:14px; font-weight:650; }
.repair-parts-panel-head span { padding:3px 8px; border-radius:999px; color:#0f766e; background:rgba(204,251,241,.78); font-size:11px; }
.repair-part-choices { display:grid; max-height:190px; gap:5px; overflow:auto; padding:6px; border:1px solid rgba(94,234,212,.72); border-radius:11px; background:rgba(255,255,255,calc(.64 + var(--panel-opacity)*.26)); }
.repair-part-choice { display:grid !important; grid-template-columns:22px minmax(0,1fr); min-height:46px; align-items:center; gap:8px !important; padding:7px 9px; border:1px solid transparent; border-radius:9px; color:#334155 !important; background:rgba(248,250,252,.54); cursor:pointer; }
.repair-part-choice:hover { border-color:rgba(94,234,212,.72); background:rgba(240,253,250,.84); }
.repair-part-choice:has(input:checked) { border-color:#2dd4bf; background:rgba(204,251,241,.76); }
.repair-part-choice input { width:18px !important; height:18px !important; min-height:18px !important; margin:0; accent-color:#0f9f91; }
.repair-part-choice > span { display:grid; min-width:0; gap:2px; }
.repair-part-choice strong,.repair-part-choice small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.repair-part-choice strong { color:#0f172a; font-size:12px; font-weight:650; }
.repair-part-choice small { color:#64748b; font-size:12px; }
.repair-part-no-result { padding:28px 10px; color:#94a3b8; text-align:center; }
.repair-parts-add { width:100%; min-height:40px; color:#0f766e; border-color:rgba(45,212,191,.7); background:rgba(204,251,241,.66); }
.repair-parts-list { display:flex; min-height:44px; flex-wrap:wrap; align-items:center; gap:8px; padding:8px; border:1px dashed rgba(94,234,212,.68); border-radius:11px; background:rgba(255,255,255,calc(.42 + var(--panel-opacity)*.24)); }
.repair-parts-empty { color:#94a3b8; }
.repair-part-chip { display:grid; grid-template-columns:minmax(0,1fr) auto; position:relative; min-width:170px; max-width:100%; gap:1px 8px; padding:7px 34px 7px 10px; border:1px solid rgba(153,246,228,.9); border-radius:10px; color:#115e59; background:rgba(204,251,241,.72); }
.repair-part-chip span,.repair-part-chip small { overflow-wrap:anywhere; }
.repair-part-chip small { color:#64748b; font-size:11px; }
.repair-part-chip button { position:absolute; top:50%; right:7px; width:24px; min-width:24px; height:24px; min-height:24px; padding:0; transform:translateY(-50%); border:0; border-radius:50%; color:#0f766e; background:rgba(255,255,255,.72); font-size:17px; line-height:1; }
.repair-parts-cell { min-width:230px; }
.repair-form-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:4px; }
.repair-form-actions button { min-width:120px; }

@media (max-width:980px) {
  .repair-toolbar { grid-template-columns:minmax(0,1fr) minmax(150px,200px); }
  .repair-toolbar #openRepairForm { grid-column:1/-1; width:100%; }
}
@media (max-width:760px) {
  .repair-dashboard { min-height:auto; gap:12px; padding:12px; border-radius:15px; }
  .repair-toolbar { grid-template-columns:1fr; }
  .repair-toolbar #openRepairForm { grid-column:auto; }
  .repair-summary { align-items:flex-start; flex-direction:column; gap:4px; }
  .repair-table-wrap { display:none; }
  .repair-mobile-list { display:grid; gap:10px; }
  .repair-mobile-card { display:grid; gap:12px; padding:14px; border:1px solid rgba(226,232,240,.78); border-radius:14px; background:rgba(255,255,255,calc(var(--panel-opacity)*.72)); }
  .repair-mobile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .repair-mobile-head > div { display:grid; gap:4px; min-width:0; }
  .repair-mobile-head strong,.repair-mobile-head span { overflow-wrap:anywhere; }
  .repair-mobile-head > div > span { color:#64748b; font-size:12px; }
  .repair-mobile-card dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }
  .repair-mobile-card dl > div { display:grid; gap:3px; min-width:0; padding:9px; border-radius:10px; background:rgba(248,250,252,.66); text-align:center; }
  .repair-mobile-card dl > div.wide { grid-column:1/-1; }
  .repair-mobile-card dt { color:#94a3b8; font-size:11px; }
  .repair-mobile-card dd { margin:0; color:#334155; font-size:13px; overflow-wrap:anywhere; }
  .repair-row-actions button { flex:1; min-height:40px; }
  .repair-form-modal { place-items:stretch; padding:70px 0 0; }
  .repair-form-card { width:100%; max-height:calc(100dvh - 70px); grid-template-columns:1fr; gap:12px; padding:16px; border:0; border-radius:0; }
  .repair-form-head,.repair-form-wide,.repair-form-actions { grid-column:auto; }
  .repair-form-head { position:sticky; top:-16px; z-index:3; margin:-16px -16px 0; padding:14px 16px; background:rgba(255,255,255,.98); border-bottom:1px solid #e2e8f0; }
  .repair-form-actions { display:grid; grid-template-columns:1fr 1fr; position:sticky; bottom:-16px; margin:0 -16px -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.98); border-top:1px solid #e2e8f0; }
  .repair-form-actions button { width:100%; min-width:0; }
  .repair-part-chip { width:100%; min-width:0; }
}

/* Global button content centering 20260727 */
button,
.primary-button,
.secondary-button,
.danger-button,
.row-button,
.tab-button,
.pagination-button,
.file-select-button,
label.import-button {
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.2 !important;
}
button,
.primary-button,
.secondary-button,
.danger-button,
.row-button,
.tab-button,
.pagination-button { display:inline-flex; }

/* Mobile navigation keeps left alignment 20260727 */
@media (max-width:760px) {
  body:not(.login-mode) #mobileNavigationDrawer .top-nav .tab-button,
  body:not(.login-mode) #mobileNavigationDrawer .sidebar-submenu-button,
  body:not(.login-mode) #mobileNavigationDrawer .mobile-drawer-collapse {
    justify-content:flex-start !important;
    text-align:left !important;
  }
}

/* Repair desktop compact purchase-style layout 20260727 */
.repair-dashboard { min-height:0; align-content:start; gap:10px; padding:14px; }
.repair-table-wrap { align-self:start; }
.repair-summary { order:10; min-height:38px; padding:5px 4px 0; border-top:1px solid rgba(226,232,240,.68); }
@media (min-width:761px) {
  .repair-toolbar { grid-template-columns:minmax(360px,1fr) minmax(180px,220px) minmax(130px,160px); align-items:center; }
  .repair-toolbar label { gap:0; }
  .repair-toolbar label > span { display:none; }
  .repair-toolbar input,.repair-toolbar select,.repair-toolbar button { height:42px; min-height:42px; }
  .repair-table th,.repair-table td { height:52px; padding:8px 11px; }
  .repair-empty { padding:26px 16px; }
}

#repairPartList[hidden] {
  display: none !important;
}

/* Navigation content left alignment on every viewport 20260727 */
body:not(.login-mode) #mobileNavigationDrawer .top-nav .tab-button,
body:not(.login-mode) #mobileNavigationDrawer .sidebar-submenu-button,
body:not(.login-mode) #mobileNavigationDrawer .mobile-drawer-collapse {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Selected repair parts use linked-barcode row layout 20260727 */
#addRepairPart[hidden] {
  display: none !important;
}
.repair-parts-list {
  display: grid;
  min-height: 0;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 11px;
  background: rgba(240, 253, 250, calc(var(--panel-opacity) * .76));
}
.repair-parts-list.hidden {
  display: none !important;
}
.repair-parts-selected-title {
  color: #64748b;
  font-size: 12px;
}
.repair-part-chip {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 38px;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  position: static;
  align-items: center;
  gap: 10px;
  padding: 6px 7px 6px 11px;
  border: 1px solid rgba(45, 212, 191, .42);
  border-radius: 10px;
  color: #0f766e;
  background: rgba(204, 251, 241, .78);
  font-size: 12px;
  font-weight: 400;
}
.repair-part-chip > span {
  min-width: 0;
  overflow: hidden;
  color: #115e59;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repair-part-chip > small {
  color: #64748b;
  font-size: 11px;
  white-space: nowrap;
}
.repair-part-chip > button {
  display: grid;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  position: static;
  transform: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #64748b;
  background: rgba(255, 255, 255, .82);
  font-size: 16px;
  line-height: 1;
}
.repair-part-chip > button:hover {
  color: #dc2626;
  background: #fee2e2;
}
@media (max-width: 760px) {
  .repair-part-chip {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 3px 8px;
  }
  .repair-part-chip > small {
    grid-column: 1;
    grid-row: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .repair-part-chip > button {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}


/* Linked order rows open the related purchase editor 20260727 */
.linked-barcode-chip[data-edit-related-id] {
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.linked-barcode-chip[data-edit-related-id]:hover,
.linked-barcode-chip[data-edit-related-id]:focus-visible {
  border-color: rgba(13, 148, 136, .68);
  background: rgba(153, 246, 228, .76);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .14);
  outline: none;
}

/* Unified custom select controls 20260727 */
.site-select-shell {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  height: var(--site-select-height, 44px);
}
.site-select-native {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: 50% auto auto 10px;
  opacity: 0 !important;
  pointer-events: none;
}
.site-select-button {
  display: grid !important;
  width: 100%;
  height: 100%;
  min-height: var(--site-select-height, 44px);
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px;
  padding: 0 13px !important;
  border: 1px solid rgba(203, 213, 225, .92);
  border-radius: 11px;
  color: #0f172a;
  background: rgba(255, 255, 255, calc(.72 + var(--panel-opacity) * .28));
  box-shadow: 0 5px 14px rgba(15, 23, 42, .035);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left !important;
}
.site-select-button:hover,
.site-select-button:focus-visible,
.site-select-button[aria-expanded="true"] {
  border-color: rgba(20, 184, 166, .58);
  background: rgba(240, 253, 250, calc(.68 + var(--panel-opacity) * .3));
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .12), 0 8px 20px rgba(15, 118, 110, .07);
  outline: none;
  transform: none;
}
.site-select-button:disabled {
  cursor: not-allowed;
  opacity: .58;
}
.site-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-select-button.is-placeholder .site-select-value {
  color: #64748b;
}
.site-select-arrow {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #64748b;
  font-size: 16px;
  transition: transform .16s ease;
}
.site-select-button[aria-expanded="true"] .site-select-arrow {
  transform: rotate(180deg);
}
.site-select-popover {
  position: fixed;
  z-index: 10050;
  display: grid;
  max-height: min(292px, calc(100dvh - 24px));
  gap: 5px;
  padding: 7px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 13px;
  background: rgba(248, 250, 252, calc(.8 + var(--panel-opacity) * .2));
  box-shadow: 0 18px 48px rgba(15, 23, 42, .2);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
.site-select-popover.hidden {
  display: none !important;
}
.site-select-option {
  display: grid !important;
  width: 100%;
  min-height: 40px;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px;
  padding: 8px 10px !important;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #334155;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 400;
  text-align: left !important;
}
.site-select-option > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.site-select-check {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #0f9f91;
  font-size: 15px;
  font-weight: 700;
}
.site-select-option:hover,
.site-select-option:focus-visible {
  border-color: rgba(94, 234, 212, .6);
  color: #0f766e;
  background: rgba(240, 253, 250, .9);
  outline: none;
  transform: none;
}
.site-select-option.selected {
  border-color: rgba(45, 212, 191, .48);
  color: #0f766e;
  background: rgba(204, 251, 241, .72);
  font-weight: 600;
}
.site-select-option:disabled {
  opacity: .42;
  cursor: not-allowed;
}
@media (max-width: 760px) {
  .site-select-popover {
    max-height: min(340px, calc(100dvh - 20px));
    padding: 8px;
    border-radius: 14px;
  }
  .site-select-option {
    min-height: 46px;
    padding: 10px 11px !important;
    font-size: 14px;
  }
}


/* Financial intelligence dashboard 20260727 */
.finance-dashboard {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 22px;
  background: rgba(255, 255, 255, calc(.48 + var(--panel-opacity) * .35));
  box-shadow: 0 22px 55px rgba(15, 23, 42, .08);
  overflow: hidden;
}
.finance-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(135px, 1fr)) auto;
  align-items: end;
  gap: 12px;
}
.finance-toolbar > label,
.finance-custom-range label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.finance-toolbar label > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.finance-toolbar input,
.finance-toolbar select {
  width: 100%;
  min-height: 44px;
}
.finance-custom-range {
  display: contents;
}
.finance-custom-range.hidden {
  display: none;
}
.finance-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.finance-toolbar-actions button { white-space: nowrap; }
.finance-range-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(45, 212, 191, .22);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(20, 184, 166, .09), rgba(56, 189, 248, .045));
  color: #64748b;
  font-size: 12px;
}
.finance-range-strip strong { color: #0f766e; font-size: 13px; }
.finance-range-strip em { margin-left: auto; color: #475569; font-style: normal; }
.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.finance-kpi {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(241,245,249,.62));
  box-shadow: 0 12px 30px rgba(15,23,42,.055);
}
.finance-kpi::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -34px;
  top: -34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.2), transparent 70%);
}
.finance-kpi-sale::after { background: radial-gradient(circle, rgba(56,189,248,.22), transparent 70%); }
.finance-kpi-profit::after { background: radial-gradient(circle, rgba(99,102,241,.2), transparent 70%); }
.finance-kpi span { color: #64748b; font-size: 12px; }
.finance-kpi strong { color: #0f172a; font-size: clamp(20px, 1.8vw, 29px); letter-spacing: -.035em; }
.finance-kpi small { align-self: end; color: #94a3b8; font-size: 11px; }
.finance-chart-card,
.finance-ranking-card,
.finance-detail-card {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 18px;
  background: rgba(255,255,255,calc(.62 + var(--panel-opacity) * .28));
  box-shadow: 0 14px 34px rgba(15,23,42,.055);
}
.finance-chart-card,
.finance-ranking-card { padding: 17px; }
.finance-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.finance-card-head span { color: #14b8a6; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.finance-card-head h2 { margin: 3px 0 0; color: #0f172a; font-size: 15px; }
.finance-chart-legend { display: flex; gap: 15px; }
.finance-chart-legend span { display: flex; align-items: center; gap: 6px; color: #64748b; letter-spacing: 0; text-transform: none; }
.finance-chart-legend i { width: 18px; height: 3px; border-radius: 99px; background: #14b8a6; box-shadow: 0 0 9px rgba(20,184,166,.7); }
.finance-chart-legend i.sale { background: #38bdf8; box-shadow: 0 0 9px rgba(56,189,248,.7); }
.finance-chart-stage { position: relative; min-height: 315px; }
#financeTrendChart { display: block; width: 100%; height: 315px; }
.finance-chart-empty { display: grid; min-height: 315px; place-items: center; color: #94a3b8; }
.finance-analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.finance-ranking-list { display: grid; gap: 11px; }
.finance-rank-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.finance-rank-index { color: #94a3b8; font-size: 10px; font-variant-numeric: tabular-nums; }
.finance-rank-row > div { display: grid; gap: 6px; min-width: 0; }
.finance-rank-row strong { overflow: hidden; color: #334155; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.finance-rank-row i { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(203,213,225,.42); }
.finance-rank-row i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14b8a6, #38bdf8); box-shadow: 0 0 9px rgba(20,184,166,.45); }
.finance-rank-row em { color: #0f766e; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.finance-detail-card { overflow: hidden; }
.finance-detail-card > .finance-card-head { padding: 17px 17px 0; }
.finance-table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
.finance-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; }
.finance-table th { height: 46px; padding: 0 12px; border-bottom: 1px solid rgba(148,163,184,.2); color: #64748b; background: rgba(241,245,249,.68); font-weight: 500; text-align: center; white-space: nowrap; }
.finance-table td { padding: 12px; border-bottom: 1px solid rgba(226,232,240,.75); color: #334155; text-align: center; }
.finance-table tbody tr:hover { background: rgba(240,253,250,.55); }
.finance-table-empty { height: 130px; color: #94a3b8 !important; }
.finance-mobile-list { display: none; }
.finance-no-data { display: grid; min-height: 90px; place-items: center; color: #94a3b8; font-size: 12px; }
@media (max-width: 1180px) {
  .finance-toolbar { grid-template-columns: repeat(4, minmax(125px, 1fr)); }
  .finance-toolbar-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .finance-toolbar-actions button { min-width: 128px; }
  .finance-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .finance-dashboard { gap: 13px; padding: 12px; border-radius: 16px; }
  .finance-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .finance-custom-range { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .finance-custom-range.hidden { display: none; }
  .finance-toolbar-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-range-strip { align-items: flex-start; flex-wrap: wrap; }
  .finance-range-strip em { width: 100%; margin-left: 0; }
  .finance-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .finance-kpi { min-height: 112px; padding: 13px; }
  .finance-kpi strong { font-size: 20px; }
  .finance-kpi-profit { grid-column: 1 / -1; }
  .finance-card-head { align-items: flex-start; flex-direction: column; }
  .finance-chart-legend { width: 100%; justify-content: flex-start; }
  .finance-chart-stage, #financeTrendChart, .finance-chart-empty { min-height: 260px; height: 260px; }
  .finance-analysis-grid { grid-template-columns: 1fr; }
  .finance-table-wrap { display: none; }
  .finance-mobile-list { display: grid; gap: 10px; padding: 0 12px 12px; }
  .finance-mobile-card { display: grid; gap: 9px; padding: 13px; border: 1px solid rgba(148,163,184,.2); border-radius: 13px; background: rgba(248,250,252,.7); }
  .finance-mobile-card > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .finance-mobile-card strong { color: #0f172a; font-size: 13px; }
  .finance-mobile-card span, .finance-mobile-card p { color: #64748b; font-size: 11px; }
  .finance-mobile-card p { margin: 0; overflow-wrap: anywhere; }
  .finance-mobile-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .finance-mobile-card dl div { display: grid; gap: 3px; padding: 7px; border-radius: 9px; background: rgba(255,255,255,.74); text-align: center; }
  .finance-mobile-card dt { color: #94a3b8; font-size: 9px; }
  .finance-mobile-card dd { margin: 0; color: #0f766e; font-size: 11px; font-weight: 600; }
}
@media (max-width: 460px) {
  .finance-toolbar { grid-template-columns: 1fr; }
  .finance-custom-range { grid-template-columns: 1fr; }
  .finance-toolbar-actions { grid-column: auto; }
  .finance-kpi-grid { grid-template-columns: 1fr; }
  .finance-kpi-profit { grid-column: auto; }
}


/* Shared business period filters 20260727 */
.business-period-control {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.business-period-control > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.business-period-control input,
.business-period-control select {
  width: 100%;
  min-width: 0;
  height: 42px;
}
#recordsView .toolbar {
  grid-template-columns: minmax(180px, 1.15fr) repeat(5, minmax(118px, .78fr)) auto;
  align-items: end;
}
#recordsView .toolbar .business-period-control { align-self: stretch; }
.inventory-toolbar {
  grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(120px, .72fr));
}
.inventory-toolbar .inventory-refresh-button { justify-self: stretch; width: 100%; }
.repair-toolbar {
  grid-template-columns: minmax(250px, 1.4fr) repeat(3, minmax(130px, .72fr)) auto;
  align-items: end;
}
@media (min-width: 761px) {
  .repair-toolbar { grid-template-columns: minmax(250px, 1.4fr) repeat(3, minmax(130px, .72fr)) auto; align-items: end; }
  .repair-toolbar label { gap: 6px; }
  .repair-toolbar label > span { display: block; }
}
@media (max-width: 1180px) and (min-width: 761px) {
  #recordsView .toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #recordsView .toolbar .search-box { grid-column: span 2; }
  #recordsView .toolbar .toolbar-add-button { width: 100%; }
  .inventory-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-toolbar .inventory-search-control { grid-column: span 2; }
  .repair-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .repair-toolbar .repair-search { grid-column: span 2; }
  .repair-toolbar #openRepairForm { grid-column: auto; width: 100%; }
}
@media (max-width: 760px) {
  #recordsView .toolbar,
  .inventory-toolbar,
  .repair-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #recordsView .toolbar .search-box,
  .inventory-toolbar .inventory-search-control,
  .repair-toolbar .repair-search { grid-column: 1 / -1; }
  #recordsView .toolbar .toolbar-add-button,
  .inventory-toolbar .inventory-refresh-button,
  .repair-toolbar #openRepairForm { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 460px) {
  #recordsView .toolbar,
  .inventory-toolbar,
  .repair-toolbar { grid-template-columns: 1fr; }
  #recordsView .toolbar .search-box,
  .inventory-toolbar .inventory-search-control,
  .repair-toolbar .repair-search,
  #recordsView .toolbar .toolbar-add-button,
  .inventory-toolbar .inventory-refresh-button,
  .repair-toolbar #openRepairForm { grid-column: auto; }
}


/* Repair draggable table columns 20260727 */
.repair-table th[data-repair-column-key] {
  user-select: none;
}
.repair-table th[data-repair-column-key][draggable="true"] {
  cursor: grab;
}
.repair-table th[data-repair-column-key][draggable="true"]:active {
  cursor: grabbing;
}
.repair-table th[data-repair-column-key] .column-title,
.repair-table th[data-repair-column-key] .column-drag-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.repair-table th[data-repair-column-key] .column-drag-icon {
  margin-left: 7px;
  color: rgba(15, 118, 110, .62);
  font-size: 11px;
}
.repair-table th.dragging { opacity: .46; }
.repair-table th.column-drop-before { box-shadow: inset 3px 0 0 #14b8a6; }
.repair-table th.column-drop-after { box-shadow: inset -3px 0 0 #14b8a6; }


/* Final automatic toolbar ordering 20260727 */
#recordsView .toolbar,
.inventory-toolbar,
.repair-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  align-items: end;
  gap: 10px;
}
#recordsView .toolbar > *,
.inventory-toolbar > *,
.repair-toolbar > * {
  min-width: 0;
}
#recordsView .toolbar .search-box,
.inventory-toolbar .inventory-search-control,
.repair-toolbar .repair-search {
  grid-column: span 2;
}
#recordsView .toolbar > select,
#recordsView .toolbar .search-box,
#recordsView .toolbar .toolbar-add-button,
.inventory-toolbar .inventory-refresh-button,
.repair-toolbar #openRepairForm {
  align-self: end;
}
#recordsView .toolbar .toolbar-add-button,
.inventory-toolbar .inventory-refresh-button,
.repair-toolbar #openRepairForm {
  width: 100%;
}
.business-period-control > span {
  min-height: 16px;
  white-space: nowrap;
}
.business-period-control .site-select-shell,
.business-period-control input {
  min-width: 0;
}
@media (max-width: 760px) {
  #recordsView .toolbar,
  .inventory-toolbar,
  .repair-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #recordsView .toolbar .search-box,
  .inventory-toolbar .inventory-search-control,
  .repair-toolbar .repair-search {
    grid-column: 1 / -1;
  }
}
@media (max-width: 460px) {
  #recordsView .toolbar,
  .inventory-toolbar,
  .repair-toolbar {
    grid-template-columns: 1fr;
  }
  #recordsView .toolbar .search-box,
  .inventory-toolbar .inventory-search-control,
  .repair-toolbar .repair-search {
    grid-column: auto;
  }
}


/* Unified date input appearance 20260727 */
input:is([type="date"],[type="datetime-local"],[type="month"]) {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 42px 0 13px !important;
  border: 1px solid rgba(203, 213, 225, .88) !important;
  border-radius: 11px !important;
  color: #1e293b !important;
  background-color: rgba(255, 255, 255, calc(.72 + var(--panel-opacity) * .24)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17.5h.01M12 17.5h.01'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 17px 17px !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .035);
  font: inherit;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  color-scheme: light;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
input:is([type="date"],[type="datetime-local"],[type="month"]):hover {
  border-color: rgba(20, 184, 166, .48) !important;
  background-color: rgba(248, 255, 253, calc(.78 + var(--panel-opacity) * .2)) !important;
}
input:is([type="date"],[type="datetime-local"],[type="month"]):focus,
input:is([type="date"],[type="datetime-local"],[type="month"]):focus-visible {
  border-color: rgba(13, 148, 136, .72) !important;
  background-color: rgba(248, 255, 253, calc(.82 + var(--panel-opacity) * .16)) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .14), 0 8px 20px rgba(15, 118, 110, .07) !important;
  outline: none !important;
}
input:is([type="date"],[type="datetime-local"],[type="month"])::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0 0 0 auto;
  width: 40px;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}
input:is([type="date"],[type="datetime-local"],[type="month"])::-webkit-datetime-edit {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
input:is([type="date"],[type="datetime-local"],[type="month"])::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input:is([type="date"],[type="datetime-local"],[type="month"])::-webkit-datetime-edit-text { padding: 0 2px; color: #64748b; }
input:is([type="date"],[type="datetime-local"],[type="month"])::-webkit-datetime-edit-year-field,
input:is([type="date"],[type="datetime-local"],[type="month"])::-webkit-datetime-edit-month-field,
input:is([type="date"],[type="datetime-local"],[type="month"])::-webkit-datetime-edit-day-field { color: #1e293b; }
input:is([type="date"],[type="datetime-local"],[type="month"]):disabled {
  cursor: not-allowed;
  opacity: .58;
}
@media (max-width: 760px) {
  input:is([type="date"],[type="datetime-local"],[type="month"]) {
    min-height: 46px;
    padding-right: 44px !important;
    background-position: right 12px center !important;
    font-size: 14px !important;
  }
  input:is([type="date"],[type="datetime-local"],[type="month"])::-webkit-calendar-picker-indicator { width: 44px; }
}


/* Repair header matches calculation records 20260727 */
@media (min-width:761px) {
  .repair-table thead,
  .repair-table thead tr {
    height:44px;
    min-height:44px;
    background:rgba(255,255,255,calc(var(--panel-opacity)*.24));
  }
  .repair-table th,
  .repair-table th[data-repair-column-key] {
    height:44px !important;
    min-height:44px !important;
    padding:0 10px !important;
    color:#64748b !important;
    background:rgba(255,255,255,calc(var(--panel-opacity)*.24)) !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:650 !important;
    line-height:1.25 !important;
    letter-spacing:.035em !important;
    text-align:center !important;
    vertical-align:middle !important;
    white-space:nowrap !important;
  }
  .repair-table th[data-repair-column-key] .column-title {
    color:#64748b !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:650 !important;
    line-height:1.25 !important;
    letter-spacing:.035em !important;
  }
  .repair-table th[data-repair-column-key] .column-drag-icon {
    margin-left:6px !important;
    color:rgba(47,111,85,.58) !important;
    font-size:11px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
}


/* Repair image upload 20260727 */
.repair-upload-box { width:100%; min-width:0; }
.repair-upload-box .file-select-button { flex:0 0 auto; }
.repair-upload-box #repairImageStatus { min-width:0; overflow-wrap:anywhere; }
@media (max-width:760px) { .repair-upload-box { align-items:stretch; } .repair-upload-box .file-select-button { width:100%; justify-content:center; } }


/* Editable repair barcode combobox 20260727 */
.repair-barcode-combobox { position:relative; width:100%; min-width:0; }
.repair-barcode-combobox > input { width:100%; padding-right:44px !important; }
.repair-barcode-toggle { position:absolute; z-index:2; top:0; right:0; width:42px; height:100%; min-height:0; border:0; border-left:1px solid rgba(203,213,225,.58); border-radius:0 12px 12px 0; color:#64748b; background:transparent; font-size:16px; box-shadow:none; }
.repair-barcode-toggle[aria-expanded="true"] { transform:rotate(180deg); }
.repair-barcode-menu { position:absolute; z-index:10060; top:calc(100% + 7px); left:0; right:0; display:grid; max-height:min(320px,42dvh); gap:4px; overflow-y:auto; overscroll-behavior:contain; padding:8px; border:1px solid rgba(148,163,184,.34); border-radius:14px; background:rgba(255,255,255,.97); box-shadow:0 18px 44px rgba(15,23,42,.18); }
.repair-barcode-menu.hidden { display:none !important; }
.repair-barcode-option { display:grid !important; width:100%; min-height:48px; grid-template-columns:minmax(0,1fr) 20px; align-items:center; gap:8px; padding:7px 10px; border:1px solid transparent; border-radius:10px; color:#334155; background:transparent; text-align:left !important; box-shadow:none; }
.repair-barcode-option > span { display:grid; min-width:0; grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:10px; }
.repair-barcode-option strong { overflow-wrap:anywhere; font-size:13px; font-weight:500; }
.repair-barcode-option small { min-width:0; overflow:hidden; color:#475569; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.repair-barcode-option small::before { content:"?"; margin-right:10px; color:#14b8a6; }
.repair-barcode-option i { color:#0f9f91; font-size:17px; font-style:normal; text-align:center; }
.repair-barcode-option:hover,.repair-barcode-option:focus-visible { border-color:rgba(94,234,212,.65); color:#0f766e; background:rgba(240,253,250,.92); outline:none; }
.repair-barcode-option.selected { border-color:rgba(45,212,191,.5); color:#0f766e; background:rgba(204,251,241,.72); }
.repair-barcode-empty { padding:14px 10px; color:#64748b; font-size:13px; text-align:center; }
@media(max-width:760px){ .repair-barcode-menu { position:fixed; top:auto; right:12px; bottom:12px; left:12px; max-height:46dvh; border-radius:16px; } .repair-barcode-option > span { grid-template-columns:1fr; gap:2px; } .repair-barcode-option small::before { content:""; margin:0; } }


/* Unified site date picker 20260727 */
input[data-site-date-enhanced="true"] { cursor:text; }
input[data-site-date-enhanced="true"]:read-only { cursor:default; }
.site-date-popover { position:fixed; z-index:10120; display:grid; width:312px; gap:10px; padding:12px; border:1px solid rgba(148,163,184,.32); border-radius:16px; background:rgba(255,255,255,.98); box-shadow:0 22px 58px rgba(15,23,42,.2); backdrop-filter:blur(18px) saturate(1.08); -webkit-backdrop-filter:blur(18px) saturate(1.08); }
.site-date-popover.hidden { display:none !important; }
.site-date-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 4px; }
.site-date-head strong { color:#0f172a; font-size:14px; font-weight:650; }
.site-date-head > div { display:flex; gap:6px; }
.site-date-head button { display:grid; width:34px; height:34px; min-height:34px; place-items:center; padding:0; border:1px solid rgba(203,213,225,.72); border-radius:10px; color:#475569; background:rgba(248,250,252,.86); font-size:17px; box-shadow:none; }
.site-date-head button:hover { border-color:rgba(45,212,191,.55); color:#0f766e; background:#f0fdfa; }
.site-date-week,.site-date-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.site-date-week span { display:grid; height:24px; place-items:center; color:#64748b; font-size:11px; font-weight:600; }
.site-date-day { display:grid !important; width:100%; min-width:0; height:34px; min-height:34px; place-items:center; padding:0 !important; border:1px solid transparent; border-radius:9px; color:#334155; background:transparent; font-size:12px; font-weight:500; box-shadow:none; }
.site-date-day.outside { color:#a1aab8; }
.site-date-day:hover,.site-date-day:focus-visible { border-color:rgba(94,234,212,.62); color:#0f766e; background:rgba(240,253,250,.94); outline:none; }
.site-date-day.today { border-color:rgba(20,184,166,.38); color:#0f766e; }
.site-date-day.selected { border-color:#14b8a6; color:#fff; background:linear-gradient(135deg,#14b8a6,#0f9f91); box-shadow:0 6px 14px rgba(13,148,136,.22); }
.site-date-foot { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid rgba(226,232,240,.82); }
.site-date-foot button { min-height:34px; padding:6px 10px; border:0; border-radius:9px; color:#0f766e; background:transparent; font-size:12px; font-weight:600; box-shadow:none; }
.site-date-foot button:hover { background:#f0fdfa; }
.site-date-foot button:disabled { color:#cbd5e1; background:transparent; }
@media(max-width:760px){ .site-date-popover { top:auto !important; right:12px; bottom:12px; left:12px !important; width:auto !important; max-height:calc(100dvh - 24px); padding:14px; border-radius:18px; } .site-date-day { height:38px; min-height:38px; font-size:13px; } }


/* Enhanced date input frame 20260727 */
input[data-site-date-enhanced="true"] { position:relative; width:100%; min-width:0; min-height:44px; padding:0 42px 0 13px !important; border:1px solid rgba(203,213,225,.88) !important; border-radius:11px !important; color:#1e293b !important; background-color:rgba(255,255,255,calc(.72 + var(--panel-opacity) * .24)) !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17.5h.01M12 17.5h.01'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:17px 17px !important; box-shadow:0 5px 14px rgba(15,23,42,.035); font:inherit; font-size:13px !important; font-weight:500 !important; font-variant-numeric:tabular-nums; letter-spacing:0; line-height:1; transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease; }
input[data-site-date-enhanced="true"]:hover { border-color:rgba(20,184,166,.48) !important; background-color:rgba(248,255,253,calc(.78 + var(--panel-opacity) * .2)) !important; }
input[data-site-date-enhanced="true"]:focus,input[data-site-date-enhanced="true"][aria-expanded="true"] { border-color:rgba(13,148,136,.72) !important; background-color:rgba(248,255,253,calc(.82 + var(--panel-opacity) * .16)) !important; box-shadow:0 0 0 3px rgba(45,212,191,.14),0 8px 20px rgba(15,118,110,.07) !important; outline:none !important; }
@media(max-width:760px){ input[data-site-date-enhanced="true"] { min-height:46px; padding-right:44px !important; background-position:right 12px center !important; font-size:14px !important; } }


/* Repair upload height matches purchase form 20260727 */
.repair-form-card .repair-upload-box { min-height:44px; grid-template-columns:116px minmax(0,1fr); align-items:center; gap:10px; }
.repair-form-card .repair-upload-box .file-select-button { display:flex !important; width:116px !important; min-width:116px !important; height:44px !important; min-height:44px !important; padding:0 12px !important; align-items:center !important; justify-content:center !important; white-space:nowrap; }
.repair-form-card .repair-upload-box #repairImageStatus { display:block; line-height:1.35; white-space:nowrap; }
@media(max-width:760px){ .repair-form-card .repair-upload-box { grid-template-columns:1fr; gap:8px; padding:0 !important; border:0 !important; box-shadow:none !important; } .repair-form-card .repair-upload-box .file-select-button { width:100% !important; min-width:0 !important; height:52px !important; min-height:52px !important; } .repair-form-card .repair-upload-box #repairImageStatus { padding:0 2px; white-space:normal; overflow-wrap:anywhere; line-height:1.45; } }


/* Repair barcode menu viewport alignment 20260727 */
body > .repair-barcode-menu { position:fixed !important; right:auto !important; margin:0 !important; transform:none !important; }
@media(max-width:760px){ body > .repair-barcode-menu { top:auto !important; right:12px !important; bottom:12px !important; left:12px !important; width:auto !important; } }


/* Unified dropdown visible range and scrollbar 20260727 */
.site-select-popover { max-height:min(420px,calc(100dvh - 32px)) !important; overflow-y:scroll !important; overflow-x:hidden !important; scrollbar-gutter:stable; overscroll-behavior:contain; }
#optionCategoryMenu,.option-category-menu,.repair-barcode-menu,.dropdown-menu,[role="listbox"] { scrollbar-gutter:stable; overscroll-behavior:contain; }
#optionCategoryMenu,.option-category-menu,.repair-barcode-menu { max-height:min(420px,58dvh) !important; overflow-y:scroll !important; overflow-x:hidden !important; }
.site-select-popover,.option-category-menu,#optionCategoryMenu,.repair-barcode-menu,.dropdown-menu,[role="listbox"] { scrollbar-width:thin; scrollbar-color:rgba(71,85,105,.68) rgba(226,232,240,.42); }
.site-select-popover::-webkit-scrollbar,.option-category-menu::-webkit-scrollbar,#optionCategoryMenu::-webkit-scrollbar,.repair-barcode-menu::-webkit-scrollbar,.dropdown-menu::-webkit-scrollbar,[role="listbox"]::-webkit-scrollbar { width:10px; height:10px; }
.site-select-popover::-webkit-scrollbar-track,.option-category-menu::-webkit-scrollbar-track,#optionCategoryMenu::-webkit-scrollbar-track,.repair-barcode-menu::-webkit-scrollbar-track,.dropdown-menu::-webkit-scrollbar-track,[role="listbox"]::-webkit-scrollbar-track { margin:6px 0; border-radius:999px; background:rgba(226,232,240,.42); }
.site-select-popover::-webkit-scrollbar-thumb,.option-category-menu::-webkit-scrollbar-thumb,#optionCategoryMenu::-webkit-scrollbar-thumb,.repair-barcode-menu::-webkit-scrollbar-thumb,.dropdown-menu::-webkit-scrollbar-thumb,[role="listbox"]::-webkit-scrollbar-thumb { min-height:42px; border:2px solid transparent; border-radius:999px; background:rgba(71,85,105,.68); background-clip:padding-box; }
.site-select-popover::-webkit-scrollbar-thumb:hover,.option-category-menu::-webkit-scrollbar-thumb:hover,#optionCategoryMenu::-webkit-scrollbar-thumb:hover,.repair-barcode-menu::-webkit-scrollbar-thumb:hover,.dropdown-menu::-webkit-scrollbar-thumb:hover,[role="listbox"]::-webkit-scrollbar-thumb:hover { background:rgba(15,118,110,.82); background-clip:padding-box; }
@media(max-width:760px){ .site-select-popover,#optionCategoryMenu,.option-category-menu,.repair-barcode-menu { max-height:min(460px,56dvh) !important; } }


/* Repair barcode complete text display 20260727 */
.repair-barcode-option > span { display:flex !important; width:100%; min-width:0; align-items:center; gap:10px; overflow:visible; white-space:nowrap; }
.repair-barcode-option strong,.repair-barcode-option small { flex:0 0 auto; min-width:0; overflow:visible; text-overflow:clip; white-space:nowrap; line-height:1.25; }
.repair-barcode-option small { padding-left:10px; border-left:1px solid rgba(20,184,166,.72); }
.repair-barcode-option small::before { content:none !important; display:none !important; margin:0 !important; }
.repair-barcode-option > span.compact-text { gap:6px; }
.repair-barcode-option > span.compact-text small { padding-left:6px; }
@media(max-width:760px){ .repair-barcode-option > span { display:grid !important; grid-template-columns:1fr; gap:2px; white-space:normal; } .repair-barcode-option strong,.repair-barcode-option small { white-space:normal; overflow-wrap:anywhere; } .repair-barcode-option small { padding-left:0; border-left:0; } }


/* Finance dashboard internal scrolling 20260727 */
@media(min-width:761px){
  body:not(.login-mode):has(#financeView:not(.hidden)) { height:100dvh; overflow:hidden !important; }
  #financeView:not(.hidden) { display:grid !important; height:100dvh; min-height:0 !important; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
  #financeView > .page-header { flex:0 0 auto; min-height:0; }
  #financeView > .finance-dashboard { min-height:0; height:100%; overflow-y:scroll !important; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(71,85,105,.68) rgba(226,232,240,.4); }
  #financeView > .finance-dashboard::-webkit-scrollbar { width:11px; }
  #financeView > .finance-dashboard::-webkit-scrollbar-track { margin:10px 0; border-radius:999px; background:rgba(226,232,240,.4); }
  #financeView > .finance-dashboard::-webkit-scrollbar-thumb { min-height:54px; border:2px solid transparent; border-radius:999px; background:rgba(71,85,105,.68); background-clip:padding-box; }
  #financeView > .finance-dashboard::-webkit-scrollbar-thumb:hover { background:rgba(15,118,110,.84); background-clip:padding-box; }
}
@media(max-width:760px){
  #financeView { height:auto; min-height:auto; overflow:visible; }
  #financeView > .finance-dashboard { height:auto; max-height:none; overflow:visible; }
}


/* Toolbar reset buttons 20260727 */
#recordsView .toolbar .toolbar-reset-button,.inventory-toolbar .toolbar-reset-button,.repair-toolbar .toolbar-reset-button { width:100%; min-width:0; min-height:44px; align-self:end; }
@media(max-width:760px){ #recordsView .toolbar .toolbar-reset-button,.inventory-toolbar .toolbar-reset-button,.repair-toolbar .toolbar-reset-button { min-height:46px; } }


/* Finance internal scroll clipping fix 20260727 */
@media(min-width:761px){
  #financeView:not(.hidden) { padding-bottom:16px !important; }
  #financeView > .page-header { margin-bottom:14px !important; }
  #financeView > .finance-dashboard { height:auto !important; max-height:100% !important; align-self:stretch; padding-bottom:42px !important; scroll-padding-top:18px; scroll-padding-bottom:42px; }
  #financeView > .finance-dashboard > :last-child { margin-bottom:0; }
}


/* Unified reset button color 20260727 */
.toolbar-reset-button,#calculationClear,#resetFormDefaults { border:1px solid #0d9488 !important; color:#fff !important; background:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%) !important; box-shadow:0 8px 18px rgba(13,148,136,.18) !important; }
.toolbar-reset-button:hover,#calculationClear:hover,#resetFormDefaults:hover,.toolbar-reset-button:focus-visible,#calculationClear:focus-visible,#resetFormDefaults:focus-visible { border-color:#0f766e !important; color:#fff !important; background:linear-gradient(135deg,#0d9488 0%,#0f766e 100%) !important; box-shadow:0 0 0 3px rgba(20,184,166,.14),0 10px 24px rgba(13,148,136,.25) !important; outline:none !important; transform:translateY(-1px); }
.toolbar-reset-button:active,#calculationClear:active,#resetFormDefaults:active { border-color:#0f766e !important; background:linear-gradient(135deg,#0d9488 0%,#0f766e 100%) !important; box-shadow:0 4px 10px rgba(13,148,136,.2) !important; transform:translateY(0); }


/* Secondary page button typography and field labels 20260727 */
body.app-mode main > section :where(button,.primary-button,.secondary-button,.danger-button,.text-button,.row-button,.pagination-button,label.primary-button,label.secondary-button,label.danger-button) { font-weight:500 !important; }
body.app-mode main > section :where(.toolbar,.record-form-dialog,.display-settings-card,.option-card,.finance-dashboard,.operation-log-toolbar) label > span:first-child { display:inline-flex; min-height:18px; align-items:center; gap:7px; color:#526579; font-size:12px; font-weight:500 !important; letter-spacing:.025em; line-height:1.35; }
body.app-mode main > section :where(.toolbar,.record-form-dialog,.display-settings-card,.option-card,.finance-dashboard,.operation-log-toolbar) label > span:first-child::before { width:3px; height:12px; flex:0 0 3px; border-radius:999px; background:linear-gradient(180deg,#2dd4bf,#0d9488); box-shadow:0 2px 6px rgba(13,148,136,.2); content:""; }
body.app-mode main > section :where(.toolbar,.record-form-dialog,.display-settings-card,.option-card,.finance-dashboard,.operation-log-toolbar) label:focus-within > span:first-child { color:#0f766e; }


/* Reset buttons always visible 20260727 */
body.app-mode :is(#purchaseFilterReset,#inventoryFilterReset,#repairFilterReset,#calculationClear,#resetFormDefaults) {
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #0d9488 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background-color:#0d9488 !important;
  background-image:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%) !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  text-indent:0 !important;
  text-shadow:0 1px 1px rgba(15,118,110,.24) !important;
  box-shadow:0 8px 18px rgba(13,148,136,.18) !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}
body.app-mode :is(#purchaseFilterReset,#inventoryFilterReset,#repairFilterReset,#calculationClear,#resetFormDefaults):is(:hover,:focus-visible) {
  border-color:#0f766e !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background-color:#0f766e !important;
  background-image:linear-gradient(135deg,#0d9488 0%,#0f766e 100%) !important;
}

/* Unified action button dimensions 20260727 */
body.app-mode main > section :where(
  .primary-button,
  .secondary-button,
  .danger-button,
  .text-button,
  label.primary-button,
  label.secondary-button,
  label.danger-button
) {
  width:fit-content !important;
  min-width:max-content !important;
  max-width:100% !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 16px !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  white-space:nowrap;
}
body.app-mode main > section :where(.toolbar,.form-actions,.repair-form-actions,.calculation-head-actions,.operation-log-toolbar) {
  align-items:end;
}
body.app-mode main > section :where(.toolbar,.form-actions,.repair-form-actions,.calculation-head-actions,.operation-log-toolbar) :where(
  .primary-button,
  .secondary-button,
  .danger-button,
  .text-button,
  label.primary-button,
  label.secondary-button,
  label.danger-button
) {
  justify-self:start !important;
  align-self:end !important;
}
body.app-mode main > section :is(#purchaseFilterReset,#inventoryFilterReset,#repairFilterReset,#calculationClear,#resetFormDefaults) {
  width:fit-content !important;
  min-width:76px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 16px !important;
}
@media(max-width:760px) {
  body.app-mode main > section :where(.primary-button,.secondary-button,.danger-button,.text-button,label.primary-button,label.secondary-button,label.danger-button) {
    max-width:100% !important;
    white-space:normal;
  }
}
/* Finance internal scrolling chain fix 20260727 */
@media(min-width:761px) {
  body.app-mode:has(#financeView:not(.hidden)) {
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  #appShell:has(#financeView:not(.hidden)) {
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  #financeView:not(.hidden) {
    display:grid !important;
    width:100% !important;
    height:100% !important;
    max-height:100dvh !important;
    min-height:0 !important;
    padding-top:20px !important;
    padding-bottom:20px !important;
    grid-template-rows:max-content minmax(0,1fr) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  #financeView > .page-header {
    min-height:0 !important;
    margin-bottom:12px !important;
  }
  #financeView > .finance-dashboard {
    position:relative;
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    align-self:stretch !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-y;
    scrollbar-gutter:stable !important;
    padding-right:24px !important;
    padding-bottom:56px !important;
  }
  #financeView > .finance-dashboard > :last-child {
    margin-bottom:4px !important;
  }
}
/* Compact toolbar action groups 20260727 */
body.app-mode main > section :where(.toolbar-action-group,.finance-toolbar-actions,.calculation-head-actions,.form-actions,.repair-form-actions) {
  display:flex !important;
  width:fit-content !important;
  max-width:100% !important;
  align-items:center !important;
  justify-content:flex-start !important;
  align-self:end !important;
  justify-self:start !important;
  flex-wrap:wrap;
  gap:8px !important;
}
#recordsView .toolbar > .toolbar-action-group,
.inventory-toolbar > .toolbar-action-group,
.repair-toolbar > .toolbar-action-group {
  grid-column:span 2;
  min-width:0;
}
#recordsView .toolbar .toolbar-action-group > *,
.inventory-toolbar .toolbar-action-group > *,
.repair-toolbar .toolbar-action-group > * {
  width:fit-content !important;
  min-width:max-content !important;
  margin:0 !important;
}
@media(max-width:760px) {
  #recordsView .toolbar > .toolbar-action-group,
  .inventory-toolbar > .toolbar-action-group,
  .repair-toolbar > .toolbar-action-group {
    grid-column:1 / -1;
  }
}
@media(max-width:460px) {
  body.app-mode main > section :where(.toolbar-action-group,.finance-toolbar-actions,.calculation-head-actions,.form-actions,.repair-form-actions) {
    width:100% !important;
  }
}
/* Direct toolbar button spacing and click safety 20260727 */
#recordsView .toolbar > #purchaseFilterReset,
.inventory-toolbar > #inventoryFilterReset,
.repair-toolbar > #repairFilterReset {
  justify-self:end !important;
  margin-right:0 !important;
}
#recordsView .toolbar > #openRecordForm,
.inventory-toolbar > #inventoryRefresh,
.repair-toolbar > #openRepairForm {
  justify-self:start !important;
  margin-left:0 !important;
}
@media(max-width:460px) {
  #recordsView .toolbar > :is(#purchaseFilterReset,#openRecordForm),
  .inventory-toolbar > :is(#inventoryFilterReset,#inventoryRefresh),
  .repair-toolbar > :is(#repairFilterReset,#openRepairForm) {
    justify-self:start !important;
  }
}
/* Unified form control typography 20260727 */
body :where(
  input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .site-select-button,
  .site-select-option
) {
  color:#334155 !important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:1.4 !important;
}
body :where(input,textarea)::placeholder {
  color:#94a3b8 !important;
  font-size:14px !important;
  font-weight:400 !important;
  opacity:1;
}
.site-select-button.is-placeholder .site-select-value {
  color:#94a3b8 !important;
}
.site-select-value,
.site-select-option > span:first-child {
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
}
/* Final form control typography priority 20260727 */
body.app-mode #appShell > .view :where(
  input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .site-select-button,
  .site-select-value,
  .site-select-option,
  .site-select-option > span:first-child
),
body.login-mode #loginScreen :where(input,textarea) {
  color:#334155 !important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:1.4 !important;
}
body.app-mode #appShell > .view :where(input,textarea)::placeholder,
body.login-mode #loginScreen :where(input,textarea)::placeholder {
  color:#94a3b8 !important;
  font-size:14px !important;
  font-weight:400 !important;
  opacity:1 !important;
}
body.app-mode #appShell > .view .site-select-button.is-placeholder .site-select-value {
  color:#94a3b8 !important;
}
/* Finance header spacing aligned with purchase 20260727 */
@media(min-width:761px) {
  #financeView:not(.hidden) {
    padding-top:102px !important;
    grid-template-rows:minmax(0,1fr) !important;
  }
  #financeView > .finance-dashboard {
    grid-row:1 !important;
  }
}
/* Unified data refresh icon buttons 20260727 */
body.app-mode main > section .data-refresh-button {
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 42px !important;
  justify-self:start !important;
  align-self:end !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  border:1px solid rgba(13,148,136,.34) !important;
  border-radius:12px !important;
  color:#0f766e !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 7px 18px rgba(15,118,110,.11) !important;
  cursor:pointer;
}
body.app-mode main > section .data-refresh-button svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform-origin:center;
}
body.app-mode main > section .data-refresh-button:is(:hover,:focus-visible) {
  border-color:#0d9488 !important;
  color:#fff !important;
  background:linear-gradient(135deg,#14b8a6,#0f766e) !important;
  box-shadow:0 9px 20px rgba(13,148,136,.2) !important;
}
body.app-mode main > section .data-refresh-button:disabled {
  opacity:.78 !important;
  cursor:wait;
}
body.app-mode main > section .data-refresh-button.is-refreshing svg {
  animation:data-refresh-spin .72s linear infinite;
}
@keyframes data-refresh-spin { to { transform:rotate(360deg); } }
#recordsView .toolbar > #purchaseRefresh,
.inventory-toolbar > #inventoryRefresh,
.repair-toolbar > #repairRefresh {
  grid-column:auto !important;
  width:42px !important;
  justify-self:start !important;
}
.calculation-head-actions .data-refresh-button { margin-left:2px; }
@media(max-width:760px) {
  #recordsView .toolbar > #purchaseRefresh,
  .inventory-toolbar > #inventoryRefresh,
  .repair-toolbar > #repairRefresh {
    grid-column:auto !important;
    width:42px !important;
  }
}
/* Calculation layout aligned with purchase records 20260727 */
@media(min-width:761px) {
  #calculationView:not(.hidden) {
    padding-top:102px !important;
    grid-template-rows:minmax(0,1fr) !important;
    row-gap:0 !important;
  }
  #calculationView > .calculation-dashboard {
    grid-row:1 !important;
    margin-top:0 !important;
  }
}
#calculationView .calculation-header-table .calculation-column-head th,
#calculationView .calculation-column-head > [data-calculation-column-key] {
  font-size:11px !important;
  font-weight:500 !important;
}
#calculationView .calculation-product-row {
  font-size:13px !important;
}
#calculationView .calculation-product-row > span,
#calculationView .calculation-product-row > em {
  font-size:13px !important;
  line-height:1.35 !important;
}
#calculationView .calculation-product-row input {
  font-size:13px !important;
}
@media(max-width:760px) {
  #calculationView .calculation-product-row > span,
  #calculationView .calculation-product-row > em,
  #calculationView .calculation-product-row input {
    font-size:13px !important;
  }
}
/* Repair layout aligned with purchase records 20260727 */
@media(min-width:761px) {
  #repairView:not(.hidden) {
    padding-top:102px !important;
    grid-template-rows:minmax(0,1fr) !important;
    row-gap:0 !important;
  }
  #repairView > .repair-dashboard {
    grid-row:1 !important;
    margin-top:0 !important;
    animation:none !important;
    transform:none !important;
  }
}
#repairView .repair-toolbar label > span {
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
}
#repairView .repair-toolbar :is(input,select,.site-select-button) {
  font-size:14px !important;
  font-weight:400 !important;
}
#repairView .repair-table th {
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
#repairView .repair-table td,
#repairView .repair-table td :where(span,strong,button) {
  font-size:13px !important;
  line-height:1.4 !important;
}
#repairView .repair-summary,
#repairView .repair-summary strong {
  font-size:13px !important;
}
@media(max-width:760px) {
  #repairView .repair-mobile-card,
  #repairView .repair-mobile-card :where(span,strong,button) {
    font-size:13px !important;
  }
}
/* Compact business toolbar actions 20260728 */
body.app-mode main > section :where(.toolbar-action-group) {
  flex-wrap:nowrap !important;
  gap:6px !important;
  white-space:nowrap;
}
#recordsView .toolbar .toolbar-action-group,
.inventory-toolbar .toolbar-action-group,
.repair-toolbar .toolbar-action-group {
  width:max-content !important;
  max-width:100% !important;
}
#recordsView .toolbar .toolbar-action-group > *,
.inventory-toolbar .toolbar-action-group > *,
.repair-toolbar .toolbar-action-group > * {
  flex:0 0 auto !important;
}
.repair-dashboard {
  gap:8px !important;
  padding:12px !important;
}
@media(min-width:1181px) {
  .repair-toolbar {
    grid-template-columns:minmax(260px,1.55fr) repeat(3,minmax(140px,.72fr)) auto !important;
    gap:8px !important;
  }
  .repair-toolbar > .toolbar-action-group {
    grid-column:auto !important;
    justify-self:end !important;
  }
  #recordsView .toolbar > .toolbar-action-group,
  .inventory-toolbar > .toolbar-action-group {
    grid-column:span 2 !important;
  }
}
@media(max-width:760px) {
  body.app-mode main > section :where(.toolbar-action-group) {
    width:100% !important;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .repair-dashboard {
    padding:10px !important;
  }
}
/* Final compact toolbar sizing 20260728 */
#recordsView .toolbar .toolbar-action-group > .toolbar-reset-button,
.inventory-toolbar .toolbar-action-group > .toolbar-reset-button,
.repair-toolbar .toolbar-action-group > .toolbar-reset-button {
  width:76px !important;
  min-width:76px !important;
}
#recordsView .toolbar .toolbar-action-group > .data-refresh-button,
.inventory-toolbar .toolbar-action-group > .data-refresh-button,
.repair-toolbar .toolbar-action-group > .data-refresh-button {
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  flex-basis:42px !important;
}
@media(min-width:1181px) {
  .repair-toolbar > .repair-search {
    grid-column:auto !important;
  }
  .repair-toolbar {
    grid-template-columns:minmax(220px,1.25fr) repeat(3,minmax(120px,.7fr)) 246px !important;
  }
  .repair-toolbar > .toolbar-action-group {
    width:246px !important;
    min-width:246px !important;
  }
}
/* Finance detail single-scroll behavior 20260729 */
@media(min-width:761px) {
  #financeView .finance-detail-card {
    display:block;
    min-height:0 !important;
    overflow:hidden !important;
  }
  #financeView .finance-detail-card > .finance-card-head {
    margin-bottom:8px;
  }
  #financeView .finance-table-wrap {
    width:100%;
    min-height:0;
    max-height:none;
    overflow-x:auto !important;
    overflow-y:clip !important;
    overscroll-behavior-x:contain;
    scrollbar-gutter:auto;
    touch-action:pan-x pan-y;
  }
  #financeView .finance-table thead th {
    position:static;
  }
}
@media(max-width:760px) {
  #financeView .finance-detail-card {
    min-height:0 !important;
  }
}
/* Financial intelligence matrix cards 20260728 */
#financeView .finance-intelligence-card {
  position:relative;
  min-height:280px;
  padding:17px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(rgba(20,184,166,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,184,166,.035) 1px,transparent 1px),
    radial-gradient(circle at 12% 8%,rgba(45,212,191,.16),transparent 34%),
    rgba(255,255,255,calc(.65 + var(--panel-opacity)*.25)) !important;
  background-size:22px 22px,22px 22px,auto,auto !important;
}
#financeView .finance-supplier-intelligence {
  background:
    linear-gradient(rgba(56,189,248,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.035) 1px,transparent 1px),
    radial-gradient(circle at 88% 8%,rgba(56,189,248,.17),transparent 34%),
    rgba(255,255,255,calc(.65 + var(--panel-opacity)*.25)) !important;
  background-size:22px 22px,22px 22px,auto,auto !important;
}
#financeView .finance-intelligence-card::after {
  position:absolute;
  width:140px;
  height:140px;
  right:-72px;
  bottom:-82px;
  border:1px solid rgba(20,184,166,.2);
  border-radius:50%;
  box-shadow:0 0 0 16px rgba(20,184,166,.035),0 0 0 34px rgba(20,184,166,.025);
  content:"";
  pointer-events:none;
}
#financeView .finance-intelligence-card > * { position:relative; z-index:1; }
#financeView .finance-intel-overview {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:16px;
  margin-bottom:15px;
  padding:13px;
  border:1px solid rgba(20,184,166,.14);
  border-radius:16px;
  background:rgba(248,250,252,.58);
}
#financeView .finance-intel-ring {
  position:relative;
  display:grid;
  width:96px;
  height:96px;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(#14b8a6 0 var(--finance-ring-angle),rgba(203,213,225,.34) var(--finance-ring-angle) 360deg);
  box-shadow:0 0 24px rgba(20,184,166,.18),inset 0 0 18px rgba(255,255,255,.7);
  animation:finance-ring-arrive .65s ease-out both;
}
#financeView .finance-supplier-intelligence .finance-intel-ring {
  background:conic-gradient(#38bdf8 0 var(--finance-ring-angle),rgba(203,213,225,.34) var(--finance-ring-angle) 360deg);
  box-shadow:0 0 24px rgba(56,189,248,.2),inset 0 0 18px rgba(255,255,255,.7);
}
#financeView .finance-intel-ring::before {
  position:absolute;
  inset:9px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  content:"";
}
#financeView .finance-intel-ring > div { position:relative; z-index:1; display:grid; gap:1px; text-align:center; }
#financeView .finance-intel-ring strong { color:#0f766e; font-size:20px; font-weight:650; letter-spacing:-.04em; }
#financeView .finance-supplier-intelligence .finance-intel-ring strong { color:#0369a1; }
#financeView .finance-intel-ring span { color:#94a3b8; font-size:9px; }
#financeView .finance-intel-core { display:grid; min-width:0; gap:5px; }
#financeView .finance-intel-core > span { color:#64748b; font-size:10px; }
#financeView .finance-intel-core > strong { overflow:hidden; color:#0f172a; font-size:17px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
#financeView .finance-intel-core > small { color:#64748b; font-size:10px; }
#financeView .finance-intel-status { width:fit-content; margin-top:3px; padding:4px 9px; border-radius:999px; font-size:10px; font-style:normal; }
#financeView .finance-intel-status.high { color:#b45309; background:rgba(254,243,199,.8); }
#financeView .finance-intel-status.medium { color:#0369a1; background:rgba(224,242,254,.86); }
#financeView .finance-intel-status.low { color:#047857; background:rgba(209,250,229,.82); }
#financeView .finance-signal-list { display:grid; gap:9px; }
#financeView .finance-signal-row { display:grid; grid-template-columns:23px minmax(0,1fr); align-items:start; gap:9px; }
#financeView .finance-signal-index { padding-top:1px; color:#94a3b8; font-size:9px; font-variant-numeric:tabular-nums; }
#financeView .finance-signal-main { display:grid; min-width:0; gap:4px; }
#financeView .finance-signal-main > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#financeView .finance-signal-main strong { overflow:hidden; color:#334155; font-size:11px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
#financeView .finance-signal-main em { color:#0f766e; font-size:10px; font-style:normal; font-variant-numeric:tabular-nums; }
#financeView .finance-signal-main i { display:block; height:5px; overflow:hidden; border-radius:999px; background:rgba(203,213,225,.36); }
#financeView .finance-signal-main i b { display:block; width:var(--signal-width); height:100%; border-radius:inherit; background:linear-gradient(90deg,#14b8a6,#2dd4bf,#38bdf8); box-shadow:0 0 10px rgba(20,184,166,.5); animation:finance-signal-grow .72s cubic-bezier(.2,.8,.2,1) both; }
#financeView .finance-supplier-intelligence .finance-signal-main i b { background:linear-gradient(90deg,#0ea5e9,#38bdf8,#818cf8); box-shadow:0 0 10px rgba(56,189,248,.52); }
#financeView .finance-signal-main small { color:#94a3b8; font-size:9px; }
@keyframes finance-ring-arrive { from { opacity:.3; transform:scale(.82) rotate(-28deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes finance-signal-grow { from { width:0; opacity:.25; } to { width:var(--signal-width); opacity:1; } }
@media(max-width:760px) {
  #financeView .finance-intelligence-card { min-height:0; padding:14px; }
  #financeView .finance-intel-overview { grid-template-columns:88px minmax(0,1fr); gap:12px; padding:11px; }
  #financeView .finance-intel-ring { width:78px; height:78px; }
  #financeView .finance-intel-ring strong { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  #financeView .finance-intel-ring,
  #financeView .finance-signal-main i b { animation:none !important; }
}

/* Purchase and repair form reset actions 20260728 */
body.app-mode .form-reset-button {
  display: inline-flex !important;
  width: fit-content !important;
  min-width: 76px !important;
  height: 42px !important;
  min-height: 42px !important;
  align-items: center;
  justify-content: center;
  padding: 0 14px !important;
  border: 1px solid #0d9488 !important;
  border-radius: 10px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
  box-shadow: 0 8px 18px rgba(13, 148, 136, .18) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
body.app-mode .form-reset-button:is(:hover, :focus-visible) {
  border-color: #0f766e !important;
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .14), 0 10px 24px rgba(13, 148, 136, .25) !important;
  outline: none !important;
  transform: translateY(-1px);
}
body.app-mode .form-reset-button:active {
  transform: translateY(0);
}
@media (max-width: 760px) {
  #assetForm .form-actions,
  #repairForm .repair-form-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  #assetForm .form-actions button,
  #repairForm .repair-form-actions button {
    width: fit-content !important;
    min-width: 0 !important;
  }
  #assetForm .form-actions button[type="submit"],
  #repairForm .repair-form-actions button[type="submit"] { min-width: 88px !important; }
  #assetForm #resetFormDefaults,
  #repairForm #repairFormReset { min-width: 76px !important; }
}
/* Operation log date range compact toolbar 20260728 */
.operation-log-toolbar { gap:8px; margin-bottom:14px; }
.operation-log-toolbar-group { gap:8px; padding:10px; }
.operation-log-inline-group { grid-template-columns:minmax(150px,1.4fr) minmax(96px,.74fr) repeat(2,minmax(114px,.88fr)) minmax(62px,.46fr) minmax(86px,.62fr) 68px 88px; gap:6px; padding:8px; align-items:end; }
.operation-log-inline-group .operation-log-date-control > span:first-child { position:relative; display:flex; width:auto; height:auto; min-height:14px; margin:0; padding:0 0 0 9px; overflow:visible; clip:auto; color:#52645d; font-size:11px; font-weight:500; line-height:1.2; white-space:normal; border:0; }
.operation-log-inline-group .operation-log-date-control > span:first-child::before { position:absolute; top:1px; bottom:1px; left:0; width:3px; border-radius:999px; background:linear-gradient(180deg,#2dd4bf,#0d9488); content:""; }
.operation-log-toolbar label { gap:5px; }
.operation-log-inline-group :is(input,select,button),.operation-log-toolbar input,.operation-log-toolbar select,.operation-log-toolbar button { min-height:38px; height:38px; }
.operation-log-inline-group > button { min-width:0; padding-right:11px; padding-left:11px; }
.operation-log-inline-group > .operation-log-reset-button { width:68px; }
.operation-log-inline-group > #exportOperationLogs { width:88px; }
@media (max-width:1180px) {
  .operation-log-inline-group { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .operation-log-search-control { grid-column:span 2; }
  .operation-log-inline-group > .operation-log-reset-button,.operation-log-inline-group > #exportOperationLogs { width:100%; }
}
@media (max-width:760px) {
  .operation-log-inline-group { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operation-log-search-control { grid-column:1/-1; }
}
@media (max-width:600px) {
  .operation-log-toolbar-group { padding:8px; }
  .operation-log-inline-group { gap:7px; }
}
/* Operation log final compact actions 20260728 */
.operation-log-inline-group { grid-template-columns:minmax(170px,1.5fr) minmax(100px,.75fr) repeat(2,minmax(120px,.9fr)) minmax(90px,.65fr) auto; }
body.app-mode #operationLogView .operation-log-inline-group .operation-log-date-control > span:first-child { position:relative !important; display:flex !important; width:auto !important; height:auto !important; min-height:14px !important; margin:0 !important; padding:0 0 0 9px !important; overflow:visible !important; clip:auto !important; color:#52645d !important; font-size:11px !important; font-weight:500 !important; line-height:1.2 !important; white-space:normal !important; border:0 !important; }
.operation-log-action-group { display:flex; min-width:0; align-items:end; justify-content:flex-start; gap:6px; }
body.app-mode #operationLogView .operation-log-action-group > button { display:inline-flex !important; width:auto !important; min-width:0 !important; height:42px !important; min-height:42px !important; align-items:center !important; justify-content:center !important; padding:0 12px !important; }
body.app-mode #operationLogView #clearOperationLogs { width:60px !important; }
body.app-mode #operationLogView #resetOperationLogs { width:76px !important; border:1px solid #0d9488 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; background-color:#0d9488 !important; background-image:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%) !important; box-shadow:0 8px 18px rgba(13,148,136,.18) !important; }
body.app-mode #operationLogView #resetOperationLogs:is(:hover,:focus-visible) { border-color:#0f766e !important; background-color:#0f766e !important; background-image:linear-gradient(135deg,#0d9488 0%,#0f766e 100%) !important; box-shadow:0 0 0 3px rgba(20,184,166,.14),0 10px 24px rgba(13,148,136,.25) !important; outline:none !important; }
body.app-mode #operationLogView #exportOperationLogs { width:88px !important; }
@media (max-width:1180px) {
  .operation-log-inline-group { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .operation-log-search-control { grid-column:auto; }
}
@media (max-width:900px) {
  .operation-log-inline-group { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operation-log-search-control,.operation-log-action-group { grid-column:1/-1; }
}
@media (max-width:600px) {
  .operation-log-action-group { flex-wrap:nowrap; }
}
/* Repair pagination aligned with purchase records 20260728 */
.repair-pagination { order:11; margin-top:0; }
/* Calculation category-linked editable name menu 20260728 */
.calculation-name-combobox {
  position:relative;
  display:flex;
  width:100%;
  min-width:0;
  align-items:center;
}
#calculationView .calculation-name-combobox .calculation-actual-name {
  width:100% !important;
  min-width:0 !important;
  padding-right:40px !important;
  padding-left:12px !important;
  text-align:left !important;
}
#calculationView .calculation-name-combobox .calculation-actual-name::placeholder {
  text-align:left !important;
}
#calculationView .calculation-name-toggle {
  position:absolute !important;
  top:50% !important;
  right:5px !important;
  z-index:2;
  display:grid !important;
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 !important;
  place-items:center !important;
  border:0 !important;
  border-left:1px solid rgba(148,163,184,.28) !important;
  border-radius:0 7px 7px 0 !important;
  color:#64748b !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1 !important;
  transform:translateY(-50%) !important;
}
#calculationView .calculation-name-toggle:hover,
#calculationView .calculation-name-toggle:focus-visible,
#calculationView .calculation-name-combobox:focus-within .calculation-name-toggle {
  color:#0f766e !important;
  background:rgba(204,251,241,.46) !important;
  outline:none !important;
}
#calculationView .calculation-actual-name[aria-expanded="true"] + .calculation-name-toggle span {
  transform:rotate(180deg);
}
#calculationView .calculation-name-toggle span {
  transition:transform .16s ease;
}
.calculation-name-popover {
  position:fixed;
  z-index:10070;
  display:grid;
  max-height:min(310px,calc(100dvh - 24px));
  gap:5px;
  padding:7px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-gutter:stable;
  border:1px solid rgba(148,163,184,.38);
  border-radius:13px;
  background:rgba(248,250,252,calc(.82 + var(--panel-opacity)*.18));
  box-shadow:0 18px 46px rgba(15,23,42,.18);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.calculation-name-popover.hidden {
  display:none !important;
}
.calculation-name-option {
  display:grid !important;
  width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  grid-template-columns:minmax(0,1fr) 18px;
  align-items:center !important;
  justify-content:stretch !important;
  gap:9px;
  padding:8px 10px !important;
  border:1px solid transparent !important;
  border-radius:9px !important;
  color:#334155 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  text-align:left !important;
}
.calculation-name-option > span {
  min-width:0;
  overflow-wrap:anywhere;
  text-align:left;
}
.calculation-name-option > b {
  color:#0f9f91;
  font-size:15px;
  font-weight:600;
  text-align:center;
}
.calculation-name-option:hover,
.calculation-name-option:focus-visible {
  border-color:rgba(94,234,212,.62) !important;
  color:#0f766e !important;
  background:rgba(240,253,250,.92) !important;
  outline:none !important;
  transform:none !important;
}
.calculation-name-option.selected {
  border-color:rgba(45,212,191,.5) !important;
  color:#0f766e !important;
  background:rgba(204,251,241,.74) !important;
}
.calculation-name-empty {
  padding:15px 12px;
  color:#64748b;
  font-size:12px;
  font-weight:400;
  line-height:1.55;
  text-align:left;
}
.calculation-name-popover::-webkit-scrollbar { width:8px; }
.calculation-name-popover::-webkit-scrollbar-track { border-radius:999px; background:rgba(226,232,240,.52); }
.calculation-name-popover::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:rgba(20,184,166,.56); background-clip:padding-box; }
.calculation-name-popover::-webkit-scrollbar-thumb:hover { background:rgba(13,148,136,.76); background-clip:padding-box; }
@media(max-width:760px) {
  .calculation-name-combobox { grid-column:1/-1; }
  .calculation-name-popover { max-height:min(340px,calc(100dvh - 20px)); padding:8px; border-radius:14px; }
  .calculation-name-option { min-height:44px !important; padding:9px 10px !important; font-size:13px !important; }
}
/* Operation log responsive aligned toolbar 20260728 */
#operationLogView .operation-log-panel { container-type:inline-size; }
body.app-mode #operationLogView .operation-log-inline-group {
  grid-template-columns:minmax(220px,1.6fr) minmax(120px,.8fr) repeat(2,minmax(138px,.9fr)) minmax(110px,.7fr) auto !important;
  align-items:end !important;
  gap:8px !important;
}
body.app-mode #operationLogView .operation-log-inline-group > label {
  display:grid !important;
  min-width:0 !important;
  gap:5px !important;
  align-content:end !important;
}
body.app-mode #operationLogView .operation-log-inline-group > label > span:first-child:not(.site-select-shell) {
  position:relative !important;
  display:flex !important;
  width:auto !important;
  height:auto !important;
  min-height:14px !important;
  margin:0 !important;
  padding:0 0 0 9px !important;
  overflow:visible !important;
  clip:auto !important;
  color:#52645d !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  border:0 !important;
}
body.app-mode #operationLogView .operation-log-inline-group > label > span:first-child:not(.site-select-shell)::before {
  position:absolute;
  top:1px;
  bottom:1px;
  left:0;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#2dd4bf,#0d9488);
  content:"";
}
body.app-mode #operationLogView .operation-log-inline-group :is(input,.site-select-button),
body.app-mode #operationLogView .operation-log-action-group > button {
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  min-height:42px !important;
  box-sizing:border-box !important;
}body.app-mode #operationLogView .operation-log-inline-group .site-select-shell {
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
}
body.app-mode #operationLogView .operation-log-action-group {
  display:flex !important;
  min-width:0 !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
  gap:6px !important;
}
body.app-mode #operationLogView .operation-log-action-group > button {
  flex:0 0 auto !important;
}
@container (max-width:1100px) {
  body.app-mode #operationLogView .operation-log-inline-group { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  body.app-mode #operationLogView .operation-log-search-control { grid-column:span 2 !important; }
  body.app-mode #operationLogView .operation-log-action-group { grid-column:1/-1 !important; }
}
@container (max-width:720px) {
  body.app-mode #operationLogView .operation-log-inline-group { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.app-mode #operationLogView .operation-log-search-control,
  body.app-mode #operationLogView .operation-log-action-group { grid-column:1/-1 !important; }
  body.app-mode #operationLogView .operation-log-action-group > button { flex:1 1 0 !important; width:auto !important; }
}
@container (max-width:460px) {
  body.app-mode #operationLogView .operation-log-inline-group { grid-template-columns:minmax(0,1fr) !important; }
  body.app-mode #operationLogView .operation-log-search-control,
  body.app-mode #operationLogView .operation-log-action-group { grid-column:auto !important; }
}
/* Login title uses sidebar brand logo 20260728 */
.login-panel-heading {
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 0 8px;
}
.login-panel .login-panel-heading h1 {
  min-width:0;
  margin:0 !important;
  overflow-wrap:anywhere;
}
.login-panel-brand-logo {
  width:44px;
  height:44px;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(13,148,136,.2);
}
.login-panel-brand-logo img {
  border-radius:11px;
}
@media(max-width:420px) {
  .login-panel-heading { gap:10px; margin-bottom:8px; }
  .login-panel-brand-logo { width:38px; height:38px; border-radius:12px; }
  .login-panel-brand-logo img { border-radius:9px; }
}
/* Repair linked records follow purchase and inventory grouping 20260728 */
.repair-inline-group-toggle { display:inline-flex; width:100%; min-width:0; align-items:center; gap:9px; padding:0; border:0; color:inherit; background:transparent; white-space:nowrap; }
.repair-inline-group-toggle > span { display:grid; width:30px; height:30px; flex:0 0 30px; place-items:center; border-radius:9px; color:#fff; background:linear-gradient(135deg,#20c4b2,#0f9f97); font-size:18px; line-height:1; }
.repair-inline-group-toggle strong { color:#0f766e; font-size:inherit; }
#repairTableBody .repair-order-child-row { background:rgba(248,250,252,calc(var(--panel-opacity) * .9)) !important; }
#repairTableBody .repair-order-child-row td:first-child { border-left:4px solid #cbd5e1; }
.repair-mobile-barcode-line { display:flex; align-items:center; gap:8px; margin-top:4px; color:#64748b; }
.repair-mobile-inline-toggle { display:grid; width:30px !important; min-width:30px !important; height:30px !important; min-height:30px !important; padding:0 !important; place-items:center; border:0; border-radius:9px; color:#fff; background:linear-gradient(135deg,#20c4b2,#0f9f97); font-size:18px; line-height:1; }
.repair-mobile-card:not(.repair-mobile-child-card):has(.repair-mobile-inline-toggle) { border-color:rgba(45,212,191,.5); background:rgba(240,253,250,calc(var(--panel-opacity) * .82)); }
.repair-mobile-child-card { margin-left:10px; border-left:4px solid #cbd5e1 !important; background:rgba(248,250,252,calc(var(--panel-opacity) * .9)) !important; }
/* Image viewer zoom and pan controls 20260728 */
.image-viewer { overflow:hidden; overscroll-behavior:contain; }
.image-viewer img { transform-origin:center center; transition:transform .12s ease-out; user-select:none; -webkit-user-drag:none; touch-action:none; cursor:zoom-in; will-change:transform; }
.image-viewer img.is-zoomed { cursor:grab; }
.image-viewer img.is-zoomed:active { cursor:grabbing; }
.image-viewer-zoom-controls { position:fixed; top:16px; left:16px; z-index:122; display:flex; height:44px; align-items:center; gap:4px; padding:4px; border:1px solid rgba(255,255,255,.18); border-radius:12px; color:#fff; background:rgba(15,23,42,.58); box-shadow:0 12px 32px rgba(0,0,0,.22); }
.image-viewer-zoom-controls button { display:grid; width:36px; min-width:36px; height:36px; min-height:36px; padding:0; place-items:center; border:0; border-radius:9px; color:#fff; background:rgba(255,255,255,.14); font-size:20px; font-weight:500; line-height:1; }
.image-viewer-zoom-controls button:hover { background:rgba(255,255,255,.24); }
.image-viewer-zoom-controls button:disabled { opacity:.35; cursor:not-allowed; }
.image-viewer-zoom-controls #imageViewerZoomValue { min-width:88px; padding:0 7px; font-size:13px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }
.image-viewer-zoom-controls .image-viewer-zoom-reset { width:auto; min-width:52px; padding:0 11px; font-size:13px; }
@media(max-width:600px) {
  .image-viewer { padding:12px; }
  .image-viewer-zoom-controls { top:auto; bottom:14px; left:50%; height:42px; max-width:calc(100vw - 24px); transform:translateX(-50%); }
  .image-viewer-zoom-controls button { width:34px; min-width:34px; height:34px; min-height:34px; }
  .image-viewer-zoom-controls #imageViewerZoomValue { min-width:80px; }
  .image-viewer-count { bottom:66px; }
  .image-viewer-delete { top:12px; right:62px; height:40px; }
  .image-viewer-close { top:12px; right:12px; width:40px; height:40px; }
}
/* Rendering performance: static app surfaces keep transparency without live blur 20260728 */
body.app-mode .app-shell,
body.app-mode .app-shell *,
body.app-mode .app-shell::before,
body.app-mode .app-shell *::before,
body.app-mode .app-shell *::after {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.app-mode .app-shell .calculation-name-popover,
body.app-mode .app-shell .option-category-menu,
body.app-mode .app-shell .profile-dropdown,
body.app-mode .site-select-popover,
body.app-mode .site-date-popover {
  -webkit-backdrop-filter:blur(14px) saturate(1.08) !important;
  backdrop-filter:blur(14px) saturate(1.08) !important;
}
/* Unified business-page header clearance and content bounds 20260728 */
body.app-mode #appShell > :is(
  #calculationView,
  #recordsView,
  #otherView,
  #repairView,
  #financeView,
  #otherTemplateView
) > .page-header {
  animation:none !important;
  transform:none !important;
}

body.app-mode #appShell > :is(
  #calculationView,
  #recordsView,
  #otherView,
  #repairView,
  #financeView,
  #otherTemplateView
) > :is(
  .calculation-dashboard,
  .records-workspace,
  .inventory-dashboard,
  .repair-dashboard,
  .finance-dashboard,
  .blank-view-panel
) {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-top:0 !important;
  box-sizing:border-box !important;
  animation:none !important;
  transform:none !important;
}

@media(min-width:761px) {
  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ):not(.hidden) {
    padding-top:106px !important;
    row-gap:0 !important;
  }

  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ) > :is(
    .calculation-dashboard,
    .records-workspace,
    .inventory-dashboard,
    .repair-dashboard,
    .finance-dashboard,
    .blank-view-panel
  ) {
    grid-row:1 !important;
  }
}

@media(max-width:760px) {
  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ) > .page-header {
    margin-bottom:16px !important;
  }
}
/* Repair barcode scan and image recognition 20260728 */
.repair-barcode-field {
  display:grid;
  min-width:0;
  gap:6px;
  color:#475569;
  font-size:13px;
}
.repair-scan-input {
  grid-template-columns:minmax(0,1fr) 76px 96px;
  align-items:stretch;
}
.repair-scan-input .repair-barcode-combobox {
  min-width:0;
}
.repair-scan-input > :is(button,.file-select-button) {
  display:inline-grid !important;
  width:100% !important;
  min-width:0 !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 10px !important;
  place-items:center;
  white-space:nowrap;
}
@media(max-width:760px) {
  .repair-scan-input {
    grid-template-columns:1fr 1fr !important;
  }
  .repair-scan-input .repair-barcode-combobox {
    grid-column:1 / -1;
  }
}
@media(max-width:420px) {
  .repair-scan-input {
    grid-template-columns:1fr !important;
  }
  .repair-scan-input .repair-barcode-combobox {
    grid-column:auto;
  }
}
/* Unified group toggle left alignment 20260728 */
:is(
  .purchase-inline-group-toggle,
  .inventory-inline-group-toggle,
  .repair-inline-group-toggle
) {
  width:100% !important;
  justify-content:flex-start !important;
  text-align:left !important;
}
:is(
  .purchase-inline-group-toggle,
  .inventory-inline-group-toggle,
  .repair-inline-group-toggle
) strong {
  min-width:0;
  text-align:left;
}
/* Unified business-page reserved scroll viewport 20260728 */
@media(min-width:761px) {
  body.app-mode:has(#calculationView:not(.hidden)),
  body.app-mode:has(#recordsView:not(.hidden)),
  body.app-mode:has(#otherView:not(.hidden)),
  body.app-mode:has(#repairView:not(.hidden)),
  body.app-mode:has(#financeView:not(.hidden)),
  body.app-mode:has(#otherTemplateView:not(.hidden)) {
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  #appShell:has(#calculationView:not(.hidden)),
  #appShell:has(#recordsView:not(.hidden)),
  #appShell:has(#otherView:not(.hidden)),
  #appShell:has(#repairView:not(.hidden)),
  #appShell:has(#financeView:not(.hidden)),
  #appShell:has(#otherTemplateView:not(.hidden)) {
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ):not(.hidden) {
    display:grid !important;
    width:100% !important;
    height:100% !important;
    max-height:100dvh !important;
    min-height:0 !important;
    padding-top:106px !important;
    padding-bottom:16px !important;
    grid-template-rows:minmax(0,1fr) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ) > :is(
    .calculation-dashboard,
    .records-workspace,
    .inventory-dashboard,
    .repair-dashboard,
    .finance-dashboard,
    .blank-view-panel
  ) {
    position:relative;
    height:100% !important;
    max-height:none !important;
    min-height:0 !important;
    align-self:stretch !important;
    overflow-x:hidden !important;
    overflow-y:scroll !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-y;
    scrollbar-gutter:stable !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(71,85,105,.68) rgba(226,232,240,.4);
    padding-right:18px !important;
    padding-bottom:48px !important;
  }

  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ) > :is(
    .calculation-dashboard,
    .records-workspace,
    .inventory-dashboard,
    .repair-dashboard,
    .finance-dashboard,
    .blank-view-panel
  )::-webkit-scrollbar {
    width:11px;
  }

  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ) > :is(
    .calculation-dashboard,
    .records-workspace,
    .inventory-dashboard,
    .repair-dashboard,
    .finance-dashboard,
    .blank-view-panel
  )::-webkit-scrollbar-track {
    margin:10px 0;
    border-radius:999px;
    background:rgba(226,232,240,.4);
  }

  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ) > :is(
    .calculation-dashboard,
    .records-workspace,
    .inventory-dashboard,
    .repair-dashboard,
    .finance-dashboard,
    .blank-view-panel
  )::-webkit-scrollbar-thumb {
    min-height:54px;
    border:2px solid transparent;
    border-radius:999px;
    background:rgba(71,85,105,.68);
    background-clip:padding-box;
  }

  body.app-mode #appShell > :is(
    #calculationView,
    #recordsView,
    #otherView,
    #repairView,
    #financeView,
    #otherTemplateView
  ) > :is(
    .calculation-dashboard,
    .records-workspace,
    .inventory-dashboard,
    .repair-dashboard,
    .finance-dashboard,
    .blank-view-panel
  )::-webkit-scrollbar-thumb:hover {
    background:rgba(15,118,110,.84);
    background-clip:padding-box;
  }
}
/* Repair status overview cards 20260728 */
.repair-overview-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.repair-overview-card {
  position:relative;
  min-width:0;
  min-height:116px;
  padding:17px 18px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,calc(.46 + var(--panel-opacity) * .28));
  border-radius:16px;
  background:rgba(255,255,255,calc(var(--panel-opacity) * .86));
  box-shadow:0 16px 36px rgba(15,23,42,calc(var(--panel-opacity) * .07));
}

.repair-overview-card::after {
  content:"";
  position:absolute;
  right:-22px;
  bottom:-34px;
  width:92px;
  height:92px;
  border-radius:50%;
  background:rgba(32,196,178,.1);
}

.repair-overview-card > :is(span,strong,small) {
  position:relative;
  z-index:1;
  display:block;
}

.repair-overview-card > span,
.repair-overview-card > small {
  color:#64748b;
}

.repair-overview-card > span {
  font-size:13px;
}

.repair-overview-card > strong {
  margin:10px 0 7px;
  color:#123047;
  font-size:clamp(26px,3vw,34px);
  line-height:1;
  overflow-wrap:anywhere;
}

.repair-overview-card > small {
  font-size:12px;
  line-height:1.45;
}

.repair-overview-pending::after { background:rgba(245,158,11,.12); }
.repair-overview-working::after { background:rgba(59,130,246,.11); }
.repair-overview-completed::after { background:rgba(34,197,94,.11); }
.repair-overview-failed::after { background:rgba(239,68,68,.1); }
.repair-overview-cost::after { background:rgba(14,165,233,.11); }

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

@media(max-width:760px) {
  .repair-overview-grid { gap:10px; }
  .repair-overview-card { min-height:108px; padding:15px 16px; border-radius:15px; }
  .repair-overview-card > strong { margin:9px 0 6px; font-size:27px; }
}

@media(max-width:430px) {
  .repair-overview-grid { grid-template-columns:1fr; }
}
/* Compact inventory and repair overview cards 20260728 */
.inventory-summary-grid,
.repair-overview-grid {
  gap:10px !important;
}

.inventory-summary-card,
.repair-overview-card {
  min-height:104px !important;
  padding:14px 16px !important;
  border-radius:15px !important;
}

.inventory-summary-card::after,
.repair-overview-card::after {
  right:-18px !important;
  bottom:-28px !important;
  width:78px !important;
  height:78px !important;
}

.inventory-summary-card > strong,
.repair-overview-card > strong {
  margin:8px 0 5px !important;
  font-size:28px !important;
}

.inventory-summary-card > small,
.repair-overview-card > small {
  line-height:1.35 !important;
}

@media(max-width:760px) {
  .inventory-summary-card,
  .repair-overview-card {
    min-height:96px !important;
    padding:13px 14px !important;
  }

  .inventory-summary-card > strong,
  .repair-overview-card > strong {
    margin:7px 0 4px !important;
    font-size:25px !important;
  }
}
/* Repair list footer aligned with purchase records 20260729 */
.repair-pagination-copy {
  display:flex;
  min-width:0;
  align-items:center;
  gap:14px;
}

.repair-pagination .repair-summary {
  order:initial;
  min-height:0;
  padding:0;
  border-top:0;
  white-space:nowrap;
}

@media (min-width:761px) {
  .repair-dashboard {
    display:flex;
    min-height:100%;
    flex-direction:column;
  }

  .repair-table-wrap {
    min-height:0;
    max-height:min(62dvh,720px);
    flex:0 0 auto;
  }

  .repair-pagination {
    flex:0 0 auto;
  }
}

@media (max-width:980px) {
  .repair-pagination-copy {
    flex:1 1 100%;
    justify-content:space-between;
  }
}

@media (max-width:760px) {
  .repair-dashboard {
    display:grid;
  }

  .repair-pagination-copy {
    display:grid;
    width:100%;
    gap:4px;
  }

  .repair-pagination .repair-summary {
    width:100%;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}
/* Scanner overlay above purchase and repair forms 20260729 */
.scanner-viewer {
  position:fixed !important;
  inset:0 !important;
  z-index:12050 !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  overflow:hidden !important;
  isolation:isolate;
}

.scanner-viewer:not(.hidden) {
  display:grid !important;
}

@media(max-width:720px) {
  .scanner-viewer {
    padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)) !important;
  }

  .scanner-panel {
    width:100% !important;
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
  }
}

/* Unified row selection controls 20260729 */
.selection-column {
  width:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  padding-left:10px !important;
  padding-right:10px !important;
  text-align:center !important;
}
.table-selection-control {
  position:relative;
  display:inline-grid;
  width:22px;
  height:22px;
  flex:0 0 22px;
  place-items:center;
  margin:0;
  cursor:pointer;
  vertical-align:middle;
}
.table-selection-checkbox {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.table-selection-control > span {
  position:relative;
  display:block;
  width:19px;
  height:19px;
  border:1.5px solid rgba(100,116,139,.62);
  border-radius:6px;
  background:rgba(255,255,255,.88);
  box-shadow:0 2px 7px rgba(15,23,42,.08),inset 0 0 0 1px rgba(255,255,255,.42);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
  pointer-events:none;
}
.table-selection-control:hover > span,
.table-selection-checkbox:focus-visible + span {
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.13),0 3px 9px rgba(37,99,235,.15);
}
.table-selection-checkbox:checked + span,
.table-selection-checkbox:indeterminate + span {
  border-color:#2563eb;
  background:linear-gradient(145deg,#3b82f6,#1d4ed8);
  box-shadow:0 4px 11px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.28);
}
.table-selection-checkbox:checked + span::after {
  position:absolute;
  left:5px;
  top:2px;
  width:6px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  content:"";
  transform:rotate(45deg);
}
.table-selection-checkbox:indeterminate + span::after {
  position:absolute;
  left:4px;
  top:8px;
  width:9px;
  height:2px;
  border-radius:2px;
  background:#fff;
  content:"";
}
.table-selection-checkbox:disabled + span {
  cursor:not-allowed;
  opacity:.42;
  box-shadow:none;
}
#recordsBody tr.is-multi-selected > td,
.inventory-table tbody tr.is-multi-selected > td,
.repair-table tbody tr.is-multi-selected > td,
.finance-table tbody tr.is-multi-selected > td {
  background:linear-gradient(90deg,rgba(219,234,254,.72),rgba(239,246,255,.48)) !important;
  box-shadow:inset 0 1px rgba(59,130,246,.08),inset 0 -1px rgba(59,130,246,.08);
}
#recordsBody tr.is-multi-selected > td:first-child,
.inventory-table tbody tr.is-multi-selected > td:first-child,
.repair-table tbody tr.is-multi-selected > td:first-child,
.finance-table tbody tr.is-multi-selected > td:first-child {
  box-shadow:inset 3px 0 #3b82f6,inset 0 1px rgba(59,130,246,.08),inset 0 -1px rgba(59,130,246,.08);
}
.selection-summary {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 9px;
  border:1px solid rgba(59,130,246,.18);
  border-radius:999px;
  color:#1d4ed8;
  background:rgba(239,246,255,.76);
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}
.pagination-summary {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.inventory-list-selection,
.finance-selection-tools,
.mobile-selection-heading,
.finance-mobile-card-heading {
  display:flex;
  align-items:center;
  gap:9px;
}
.inventory-list-selection {
  justify-content:flex-end;
  flex-wrap:wrap;
}
.finance-selection-tools {
  justify-content:flex-end;
}
.finance-selection-tools > .table-selection-control {
  display:none;
}
.mobile-select-all {
  display:none;
}
.inventory-mobile-card.is-multi-selected,
.repair-mobile-card.is-multi-selected,
.finance-mobile-card.is-multi-selected {
  border-color:rgba(59,130,246,.42) !important;
  background:linear-gradient(145deg,rgba(239,246,255,.88),rgba(255,255,255,.72)) !important;
  box-shadow:0 10px 28px rgba(37,99,235,.12),inset 3px 0 #3b82f6 !important;
}
.mobile-selection-heading > div,
.finance-mobile-card-heading > div {
  min-width:0;
}
.finance-mobile-card-heading {
  width:100%;
  justify-content:flex-start !important;
}
.finance-mobile-card-heading > div {
  display:flex;
  min-width:0;
  flex:1;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
@media(max-width:760px) {
  .mobile-select-all {
    display:inline-grid;
  }
  .selection-column {
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .inventory-list-head {
    align-items:flex-start !important;
    gap:10px;
  }
  .inventory-list-selection {
    max-width:58%;
    gap:6px;
  }
  .inventory-pagination-selection {
    display:none;
  }
  .finance-selection-tools {
    gap:7px;
  }
  .finance-selection-tools > .table-selection-control {
    display:inline-grid;
  }
  .finance-mobile-card-heading > .table-selection-control {
    align-self:flex-start;
    margin-top:1px;
  }
}
@media(max-width:420px) {
  .inventory-list-head {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .inventory-list-selection {
    max-width:none;
  }
  .selection-summary {
    padding-inline:7px;
    font-size:11px;
  }
}
/* Repair selection responsive layout 20260729 */
.repair-selection-strip {
  display:none;
}
.repair-mobile-selection-heading {
  display:flex;
  min-width:0;
  align-items:flex-start;
  gap:9px;
}
.repair-mobile-selection-heading > div {
  min-width:0;
}
@media(max-width:760px) {
  .repair-selection-strip {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin:-2px 0 8px;
    padding:0 2px;
  }
  .desktop-repair-selection {
    display:none;
  }
  .repair-mobile-selection-heading > .table-selection-control {
    margin-top:1px;
  }
}
/* Finance dashboard complete content tracks 20260729 */
@media(min-width:761px) {
  #financeView .finance-dashboard {
    grid-auto-rows:max-content !important;
    align-content:start !important;
  }
}
/* Repair note viewer 20260730 */
.repair-note-trigger { display:inline-grid; width:32px; min-width:32px; height:32px; min-height:32px; padding:0; place-items:center; border:1px solid rgba(20,184,166,.24); border-radius:10px; color:#0f766e; background:rgba(240,253,250,.92); cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.repair-note-trigger:hover,.repair-note-trigger:focus-visible { transform:translateY(-1px); border-color:rgba(13,148,136,.5); background:#ccfbf1; box-shadow:0 8px 18px rgba(15,118,110,.14); outline:none; }
.repair-note-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.repair-note-trigger svg circle { fill:currentColor; stroke:none; }
.repair-note-empty { color:#94a3b8; }
.repair-note-popover { position:fixed; inset:0; z-index:13050; display:grid; padding:24px; place-items:center; background:rgba(15,23,42,.38); }
.repair-note-popover.hidden { display:none; }
.repair-note-dialog { display:grid; width:min(520px,100%); max-height:min(72vh,580px); overflow:hidden; border:1px solid rgba(255,255,255,.78); border-radius:20px; background:rgba(255,255,255,.98); box-shadow:0 28px 80px rgba(15,23,42,.28); }
.repair-note-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px 14px; border-bottom:1px solid rgba(226,232,240,.82); }
.repair-note-dialog header > div { min-width:0; }
.repair-note-dialog header small { display:block; margin-bottom:3px; color:#14b8a6; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.repair-note-dialog h2 { margin:0; color:#0f172a; font-size:18px; overflow-wrap:anywhere; }
.repair-note-dialog header button { display:grid; width:34px; min-width:34px; height:34px; min-height:34px; padding:0; place-items:center; border:0; border-radius:10px; color:#475569; background:#f1f5f9; font-size:22px; cursor:pointer; }
.repair-note-body { overflow:auto; padding:20px; color:#334155; font-size:14px; line-height:1.75; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:760px) {
  .repair-note-popover { padding:14px; align-items:end; }
  .repair-note-dialog { width:100%; max-height:76vh; border-radius:18px; }
  .repair-note-dialog header { padding:16px; }
  .repair-note-body { padding:16px; }
}
/* Compact inventory summary row on desktop 20260730 */
@media (min-width:761px) {
  #otherView .inventory-dashboard {
    grid-template-rows:max-content minmax(0,1fr);
  }

  #otherView .inventory-summary-grid {
    align-self:start;
  }

  #otherView .inventory-summary-card {
    height:104px;
    min-height:104px !important;
    max-height:104px;
  }
}
/* Full-site backup scope hint 20260730 */
.admin-data-backup-hint {
  margin:12px 2px 0;
  color:#64748b;
  font-size:12px;
  line-height:1.65;
}
/* Data management grouped layout 20260730 */
.admin-data-card {
  width:min(100%, 760px);
  max-height:calc(100vh - 36px);
  padding:0 !important;
  overflow:auto;
  border-color:rgba(148,163,184,.24) !important;
  background:rgba(255,255,255,calc(var(--panel-opacity) * .98)) !important;
}
.admin-data-head {
  align-items:center;
  margin:0 !important;
  padding:20px 22px 18px !important;
  border-bottom:1px solid rgba(148,163,184,.18);
  background:linear-gradient(135deg,rgba(14,165,164,.09),rgba(59,130,246,.045) 52%,rgba(255,255,255,.2));
}
.admin-data-title-wrap { display:flex; align-items:center; gap:13px; min-width:0; }
.admin-data-title-icon {
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  border:1px solid rgba(13,148,136,.18);
  border-radius:14px;
  color:#0f766e;
  background:linear-gradient(145deg,rgba(204,251,241,.9),rgba(240,253,250,.68));
  box-shadow:0 10px 24px rgba(13,148,136,.1);
}
.admin-data-title-icon .menu-icon { width:21px; height:21px; }
.admin-data-head .section-kicker { margin-bottom:2px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.admin-data-head h2 { margin:0; color:#0f172a; font-size:21px; line-height:1.25; }
.admin-data-head p { margin:5px 0 0; color:#64748b; font-size:12px; line-height:1.45; }
.admin-data-head .account-close { align-self:flex-start; border-radius:12px; }
.admin-action-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:18px 20px 14px;
}
.admin-action-group {
  min-width:0;
  padding:14px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  background:linear-gradient(150deg,rgba(248,250,252,.82),rgba(255,255,255,.5));
  box-shadow:0 8px 24px rgba(15,23,42,.035);
}
.admin-action-group-export { border-color:rgba(14,116,144,.15); }
.admin-action-group-restore { border-color:rgba(13,148,136,.16); }
.admin-action-group-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.admin-action-group-icon {
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:10px;
  color:#0f766e;
  background:rgba(204,251,241,.7);
}
.admin-action-group-export .admin-action-group-icon { color:#0e7490; background:rgba(207,250,254,.72); }
.admin-action-group-icon .menu-icon { width:16px; height:16px; }
.admin-action-group-head div { display:grid; gap:2px; min-width:0; }
.admin-action-group-head strong { color:#1e293b; font-size:13px; font-weight:700; }
.admin-action-group-head small { color:#94a3b8; font-size:10px; }
.admin-action-buttons { display:grid; gap:9px; }
.admin-action-tile,
.admin-actions .admin-action-tile,
label.admin-action-tile.import-button {
  --admin-action-color:#0f766e;
  --admin-action-rgb:15,118,110;
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center !important;
  justify-content:stretch !important;
  width:100%;
  min-width:0;
  min-height:62px;
  gap:11px;
  margin:0;
  padding:10px 12px;
  appearance:none;
  border:1px solid rgba(var(--admin-action-rgb),.15);
  border-radius:13px;
  color:#334155;
  background:rgba(var(--admin-action-rgb),.055);
  box-shadow:none;
  cursor:pointer;
  font:inherit;
  line-height:1.2 !important;
  text-align:left !important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.admin-action-tile > .menu-icon {
  width:38px;
  height:38px;
  padding:9px;
  border-radius:11px;
  color:var(--admin-action-color);
  background:rgba(var(--admin-action-rgb),.1);
}
.admin-action-tile > span { display:grid; gap:4px; min-width:0; }
.admin-action-tile strong { color:#1e293b; font-size:12px; font-weight:700; }
.admin-action-tile small { color:#64748b; font-size:10px; font-weight:400; line-height:1.35; }
.admin-action-tile::after { content:"\203A"; color:rgba(var(--admin-action-rgb),.62); font-size:22px; font-weight:300; line-height:1; }
.admin-action-tile:hover {
  transform:translateY(-1px);
  border-color:rgba(var(--admin-action-rgb),.3);
  background:rgba(var(--admin-action-rgb),.09);
  box-shadow:0 9px 20px rgba(var(--admin-action-rgb),.09);
}
.admin-action-tile:focus-visible { outline:3px solid rgba(var(--admin-action-rgb),.15); outline-offset:2px; }
.admin-action-export { --admin-action-color:#0369a1; --admin-action-rgb:3,105,161; }
.admin-action-backup { --admin-action-color:#4f46e5; --admin-action-rgb:79,70,229; }
.admin-action-merge { --admin-action-color:#0f766e; --admin-action-rgb:15,118,110; }
.admin-action-restore { --admin-action-color:#b45309; --admin-action-rgb:180,83,9; }

.admin-data-backup-hint {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 !important;
  padding:13px 20px 16px;
  border-top:1px solid rgba(148,163,184,.14);
  color:#64748b;
  background:rgba(248,250,252,.58);
  font-size:10px;
  line-height:1.65;
}
.admin-data-backup-hint > span {
  display:grid;
  width:18px;
  height:18px;
  flex:0 0 18px;
  place-items:center;
  margin-top:1px;
  border-radius:50%;
  color:#0f766e;
  background:rgba(20,184,166,.12);
  font-size:11px;
  font-weight:800;
  font-style:normal;
}
.admin-data-backup-hint p { margin:0; }
.scheduled-backup-panel {
  margin:0 20px 16px;
  padding:16px;
  border:1px solid rgba(79,70,229,.14);
  border-radius:16px;
  background:rgba(248,250,252,.72);
}
.scheduled-backup-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.scheduled-backup-head h3 { margin:2px 0 0; color:#1e293b; font-size:16px; }
.scheduled-backup-head p { margin:5px 0 0; color:#64748b; font-size:11px; }
.scheduled-backup-head .secondary-button { min-height:36px; padding:0 13px; }
.scheduled-backup-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; }
.scheduled-backup-options label {
  display:grid;
  grid-template-columns:17px minmax(0,1fr) 58px;
  min-width:0;
  min-height:58px;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:11px;
  background:rgba(255,255,255,.78);
  cursor:pointer;
}
.scheduled-backup-options input[type="checkbox"] { width:17px; height:17px; accent-color:#0f9488; }
.scheduled-backup-options input[type="number"] { width:58px; min-width:0; height:34px; padding:0 6px; border:1px solid #dbe3ec; border-radius:8px; color:#334155; background:#fff; font-size:11px; text-align:center; }
.scheduled-backup-options span { display:grid; min-width:0; gap:3px; }
.scheduled-backup-options strong { color:#334155; font-size:12px; font-weight:600; }
.scheduled-backup-options small { color:#94a3b8; font-size:9px; }
.scheduled-backup-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.scheduled-backup-toolbar > .primary-button { min-height:38px; padding:0 14px; }
.scheduled-backup-run-group { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.scheduled-backup-run-group button,
.scheduled-backup-file-actions :is(a,button) {
  display:inline-flex;
  min-height:32px;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:1px solid rgba(79,70,229,.16);
  border-radius:8px;
  color:#4338ca;
  background:rgba(238,242,255,.74);
  font-size:10px;
  text-decoration:none;
  cursor:pointer;
}
.scheduled-backup-status { margin-top:12px; color:#64748b; font-size:10px; line-height:1.5; }
.scheduled-backup-list { display:grid; max-height:269px; gap:7px; margin-top:8px; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; }
.scheduled-backup-file { display:flex; min-height:62px; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; border:1px solid rgba(226,232,240,.9); border-radius:11px; background:rgba(255,255,255,.82); box-sizing:border-box; }
.scheduled-backup-file > div:first-child { display:grid; min-width:0; gap:2px; }
.scheduled-backup-file > div:first-child > span { width:max-content; padding:2px 6px; border-radius:999px; color:#0f766e; background:#ecfdf5; font-size:9px; }
.scheduled-backup-file strong { overflow:hidden; color:#334155; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.scheduled-backup-file small { color:#94a3b8; font-size:9px; }
.scheduled-backup-file-actions { display:flex; flex:0 0 auto; gap:6px; }
.scheduled-backup-file-actions button { color:#be123c; border-color:rgba(190,18,60,.15); background:rgba(255,241,242,.78); }
.scheduled-backup-empty { padding:18px; color:#94a3b8; font-size:11px; text-align:center; }
@media (max-width:760px) {
  .admin-data-card { border-radius:18px !important; }
  .admin-data-head { padding:16px !important; }
  .admin-data-title-wrap { gap:11px; }
  .admin-data-title-icon { width:40px; height:40px; flex-basis:40px; border-radius:12px; }
  .admin-data-head h2 { font-size:19px; }
  .admin-data-head p { font-size:11px; }
  .admin-action-grid { grid-template-columns:1fr; gap:11px; padding:14px; }
  .admin-action-group { padding:12px; border-radius:14px; }
  .admin-action-tile,
  label.admin-action-tile.import-button { min-height:58px; padding:9px 11px; }


  .scheduled-backup-panel { margin:0 14px 14px; padding:13px; }
  .scheduled-backup-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scheduled-backup-toolbar { align-items:stretch; flex-direction:column; }
  .scheduled-backup-run-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scheduled-backup-list { max-height:429px; }
  .scheduled-backup-file { min-height:102px; align-items:flex-start; flex-direction:column; }
  .scheduled-backup-file-actions { width:100%; }
  .scheduled-backup-file-actions :is(a,button) { flex:1; }
  .admin-data-backup-hint { padding:12px 14px 15px; }
}

/* Keep enhanced date fields aligned with the unified date control style. */
body.app-mode #appShell > .view input[data-site-date-enhanced="true"] {
  padding-right:42px!important;
  border-color:rgba(203,213,225,.88)!important;
  border-radius:11px!important;
  background-color:rgba(255,255,255,calc(.72 + var(--panel-opacity)*.24))!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17.5h.01M12 17.5h.01'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:17px 17px!important;
  font-weight:400!important;
  letter-spacing:0!important;
}

body.app-mode #appShell > .view input[data-site-date-enhanced="true"]:is(:hover,:focus,[aria-expanded="true"]){
  border-color:rgba(13,148,136,.72)!important;
  background-color:rgba(248,255,253,.96)!important;
  box-shadow:0 0 0 3px rgba(45,212,191,.14),0 8px 20px rgba(15,118,110,.07)!important;
}

/* Paste action embedded in every editable site date field. */
.site-date-paste-shell {
  position:relative;
  display:block;
  width:100%;
  min-width:0;
}

.site-date-paste-shell > input {
  width:100%!important;
  min-width:0!important;
  padding-right:52px!important;
  background-position:right 10px center!important;
  background-size:16px 16px!important;
}

.site-date-paste-shell > input.is-paste-ready {
  border-color:rgba(13,148,136,.72)!important;
  background-color:rgba(248,255,253,.98)!important;
  box-shadow:0 0 0 3px rgba(45,212,191,.14),0 8px 20px rgba(15,118,110,.07)!important;
}

button.site-date-paste-button {
  position:absolute!important;
  top:50%!important;
  right:29px!important;
  z-index:3!important;
  display:grid!important;
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  place-items:center!important;
  border:0!important;
  border-radius:5px!important;
  color:#4d7773!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
  opacity:.72;
}

button.site-date-paste-button:is(:hover,:focus-visible),
.site-date-paste-shell > input.is-paste-ready + button.site-date-paste-button {
  color:#087f75!important;
  background:rgba(15,139,130,.1)!important;
  outline:none!important;
  opacity:1;
}

.site-date-paste-icon {
  position:relative;
  display:block;
  width:10px;
  height:12px;
  border:1.4px solid currentColor;
  border-radius:2px;
}

.site-date-paste-icon::before {
  content:"";
  position:absolute;
  top:-3px;
  left:1px;
  width:5px;
  height:3px;
  border:1.4px solid currentColor;
  border-radius:2px;
  background:#fff;
}

@media (max-width:420px) {
  .scheduled-backup-options { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .admin-data-head p { display:none; }
  .admin-action-tile,
  label.admin-action-tile.import-button { grid-template-columns:36px minmax(0,1fr) auto; gap:9px; }
  .admin-action-tile > .menu-icon { width:36px; height:36px; }
}
/* Inventory panel containment and fixed desktop columns 20260731 */
#otherView .inventory-dashboard,
#otherView .inventory-list-panel,
#otherView .inventory-toolbar,
#otherView .inventory-list-head,
#otherView .inventory-table-wrap,
#otherView .inventory-mobile-list,
#otherView .inventory-pagination {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
#otherView .inventory-list-panel {
  overflow:visible;
  contain:inline-size;
}
#otherView .inventory-toolbar > *,
#otherView .inventory-toolbar :is(input,select,.site-select-shell,.site-select-button) {
  min-width:0 !important;
  max-width:100% !important;
}
#otherView .inventory-table-wrap {
  overflow-x:auto !important;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
}
@media (min-width:1181px) {
  #otherView .inventory-toolbar {
    grid-template-columns:repeat(4,minmax(0,1fr)) minmax(214px,1.25fr) !important;
  }
  #otherView .inventory-toolbar .inventory-search-control {
    grid-column:span 2 !important;
  }
  #otherView .inventory-toolbar > .toolbar-action-group {
    grid-column:5 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    justify-content:flex-end !important;
    box-sizing:border-box !important;
  }
}
@media (min-width:761px) and (max-width:1180px) {
  #otherView .inventory-toolbar {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #otherView .inventory-toolbar .inventory-search-control {
    grid-column:span 2 !important;
  }
}
@media (max-width:760px) {
  #otherView .inventory-toolbar {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #otherView .inventory-toolbar .inventory-search-control,
  #otherView .inventory-toolbar > .toolbar-action-group {
    grid-column:1 / -1 !important;
  }
}
@media (max-width:460px) {
  #otherView .inventory-toolbar {
    grid-template-columns:minmax(0,1fr) !important;
  }
  #otherView .inventory-toolbar .inventory-search-control {
    grid-column:auto !important;
  }
}
/* Inventory complete desktop table and useful empty state 20260731 */
.inventory-empty-state {
  display:flex;
  min-height:150px;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:28px 20px;
  border:1px dashed rgba(148,163,184,.46);
  border-radius:14px;
  color:#64748b;
  background:rgba(248,250,252,calc(var(--panel-opacity) * .58));
  text-align:center;
}
.inventory-empty-state.hidden { display:none !important; }
.inventory-empty-state > div:first-child { display:grid; gap:7px; }
.inventory-empty-state strong { color:#334155; font-size:16px; }
.inventory-empty-state p { margin:0; font-size:13px; line-height:1.6; }
.inventory-empty-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.inventory-empty-actions .secondary-button { min-height:38px; padding:7px 13px; }
@media (min-width:761px) and (max-width:1500px) {
  #otherView .inventory-table {
    width:100% !important;
    min-width:100% !important;
    table-layout:fixed;
  }
  #otherView .inventory-table th,
  #otherView .inventory-table td {
    padding:8px 5px !important;
    font-size:11px !important;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  #otherView .inventory-table .selection-column { width:42px; }
  #otherView .inventory-table .action-column { width:78px; }
  #otherView .inventory-table .inventory-row-actions {
    display:grid;
    width:100%;
    gap:4px;
    white-space:normal;
  }
  #otherView .inventory-table .inventory-row-actions .row-button {
    width:100%;
    min-width:0;
    padding:5px 3px;
    font-size:11px !important;
  }
  #otherView .inventory-table .inventory-warranty {
    min-width:0;
    padding:5px 3px;
  }
}
@media (max-width:760px) {
  .inventory-empty-state {
    min-height:132px;
    flex-direction:column;
    padding:22px 14px;
  }
}
/* Purchase and repair clear image buttons 20260804 */
.record-form-dialog .upload-box,
.repair-form-card .repair-upload-box {
  grid-template-columns:116px 88px minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px 10px !important;
  min-height:40px !important;
}
.record-form-dialog .upload-box .file-select-button,
.repair-form-card .repair-upload-box .file-select-button,
.clear-form-images-button {
  display:flex !important;
  height:40px !important;
  min-height:40px !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap;
}
.record-form-dialog .upload-box .file-select-button,
.repair-form-card .repair-upload-box .file-select-button {
  width:116px !important;
  min-width:116px !important;
  padding:0 10px !important;
}
.clear-form-images-button {
  width:88px !important;
  min-width:88px !important;
  padding:0 10px !important;
  border-color:rgba(244,63,94,.26) !important;
  color:#be123c !important;
  background:rgba(255,241,242,calc(.68 + var(--panel-opacity) * .2)) !important;
}
.clear-form-images-button:hover,
.clear-form-images-button:focus-visible {
  border-color:rgba(225,29,72,.5) !important;
  color:#9f1239 !important;
  background:#ffe4e6 !important;
}
@media(max-width:760px) {
  .record-form-dialog .upload-box,
  .repair-form-card .repair-upload-box {
    grid-template-columns:1fr !important;
    align-items:stretch !important;
    gap:8px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .record-form-dialog .upload-box .file-select-button,
  .repair-form-card .repair-upload-box .file-select-button,
  .record-form-dialog .clear-form-images-button,
  .repair-form-card .clear-form-images-button {
    width:100% !important;
    min-width:0 !important;
    height:56px !important;
    min-height:56px !important;
  }
  .record-form-dialog #assetImageStatus,
  .repair-form-card #repairImageStatus {
    grid-column:1 / -1;
    min-height:18px;
    padding:0 2px;
    font-size:12px;
    font-weight:600;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

/* Repair inline notes toggle 20260804 */
.repair-table th.repair-notes-toggle-header { cursor:pointer; }
.repair-table th.repair-notes-toggle-header:hover,
.repair-table th.repair-notes-toggle-header.is-expanded { color:#0f766e !important; background:rgba(240,253,250,.96) !important; }
.repair-notes-toggle-mark { display:inline-grid; width:14px; margin-left:3px; color:#14b8a6; font-size:12px; font-weight:700; line-height:1; vertical-align:middle; }
.repair-inline-note-row td { height:auto !important; padding:0 12px 12px !important; border-bottom:1px solid rgba(226,232,240,.72); text-align:left !important; background:rgba(248,250,252,.66); }
.repair-inline-note-content { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:9px; padding:10px 12px; border:1px solid rgba(20,184,166,.14); border-left:3px solid rgba(20,184,166,.68); border-radius:10px; color:#334155; background:rgba(240,253,250,.56); }
.repair-inline-note-content > span { display:inline-flex; min-height:22px; align-items:center; padding:0 8px; border-radius:999px; color:#0f766e; background:rgba(204,251,241,.78); font-size:11px; font-weight:650; white-space:nowrap; }
.repair-inline-note-content p { margin:1px 0 0; color:#475569; font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.repair-inline-note-child td { padding-left:16px !important; background:rgba(248,250,252,.9); }
/* Purchase note viewer and inline notes toggle 20260804 */
.purchase-note-trigger { display:inline-grid; width:32px; min-width:32px; height:32px; min-height:32px; padding:0; place-items:center; border:1px solid rgba(20,184,166,.24); border-radius:10px; color:#0f766e; background:rgba(240,253,250,.92); cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.purchase-note-trigger:hover,.purchase-note-trigger:focus-visible { transform:translateY(-1px); border-color:rgba(13,148,136,.5); background:#ccfbf1; box-shadow:0 8px 18px rgba(15,118,110,.14); outline:none; }
.purchase-note-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.purchase-note-trigger svg circle { fill:currentColor; stroke:none; }
.purchase-note-empty { color:#94a3b8; }
.purchase-note-popover { position:fixed; inset:0; z-index:13050; display:grid; padding:24px; place-items:center; background:rgba(15,23,42,.38); }
.purchase-note-popover.hidden { display:none; }
.purchase-note-dialog { display:grid; width:min(520px,100%); max-height:min(72vh,580px); overflow:hidden; border:1px solid rgba(255,255,255,.78); border-radius:20px; background:rgba(255,255,255,.98); box-shadow:0 28px 80px rgba(15,23,42,.28); }
.purchase-note-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px 14px; border-bottom:1px solid rgba(226,232,240,.82); }
.purchase-note-dialog header > div { min-width:0; }
.purchase-note-dialog header small { display:block; margin-bottom:3px; color:#14b8a6; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.purchase-note-dialog h2 { margin:0; color:#0f172a; font-size:18px; overflow-wrap:anywhere; }
.purchase-note-dialog header button { display:grid; width:34px; min-width:34px; height:34px; min-height:34px; padding:0; place-items:center; border:0; border-radius:10px; color:#475569; background:#f1f5f9; font-size:22px; cursor:pointer; }
.purchase-note-body { overflow:auto; padding:20px; color:#334155; font-size:14px; line-height:1.75; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; }
#recordsTable th.purchase-notes-toggle-header { cursor:pointer; }
#recordsTable th.purchase-notes-toggle-header:hover,#recordsTable th.purchase-notes-toggle-header.is-expanded { color:#0f766e !important; background:rgba(240,253,250,.96) !important; }
.purchase-notes-toggle-mark { display:inline-grid; width:14px; margin-left:3px; color:#14b8a6; font-size:12px; font-weight:700; line-height:1; vertical-align:middle; }
#recordsTable .purchase-inline-note-row td { height:auto !important; padding:0 12px 12px !important; border-bottom:1px solid rgba(226,232,240,.72); text-align:left !important; background:rgba(248,250,252,.66); white-space:normal !important; }
.purchase-inline-note-content { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:9px; padding:10px 12px; border:1px solid rgba(20,184,166,.14); border-left:3px solid rgba(20,184,166,.68); border-radius:10px; color:#334155; background:rgba(240,253,250,.56); }
.purchase-inline-note-content > span { display:inline-flex; min-height:22px; align-items:center; padding:0 8px; border-radius:999px; color:#0f766e; background:rgba(204,251,241,.78); font-size:11px; font-weight:650; white-space:nowrap; }
.purchase-inline-note-content p { margin:1px 0 0; color:#475569; font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
#recordsTable .purchase-inline-note-child td { padding-left:16px !important; background:rgba(248,250,252,.9); }
@media (max-width:760px) { .purchase-note-popover { padding:14px; align-items:end; } .purchase-note-dialog { width:100%; max-height:76vh; border-radius:18px; } .purchase-note-dialog header { padding:16px; } .purchase-note-body { padding:16px; } }
/* Unified purchase and repair note entry pills 20260804 */
#recordsTable .purchase-note-trigger,
#repairView .repair-table td .repair-note-trigger {
  display:inline-flex !important;
  width:auto !important;
  min-width:62px !important;
  height:30px !important;
  min-height:30px !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px;
  padding:0 10px 0 8px !important;
  border:1px solid rgba(20,184,166,.2) !important;
  border-radius:999px !important;
  color:#0f766e !important;
  background:linear-gradient(135deg,rgba(240,253,250,.98),rgba(236,253,245,.88)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.9),0 2px 6px rgba(15,118,110,.05);
  font-size:11px !important;
  font-weight:650 !important;
  line-height:1 !important;
  letter-spacing:.02em;
}
#recordsTable .purchase-note-trigger:hover,
#recordsTable .purchase-note-trigger:focus-visible,
#repairView .repair-table td .repair-note-trigger:hover,
#repairView .repair-table td .repair-note-trigger:focus-visible {
  transform:translateY(-1px);
  border-color:rgba(13,148,136,.42) !important;
  color:#0f766e !important;
  background:linear-gradient(135deg,#ccfbf1,#d1fae5) !important;
  box-shadow:0 7px 15px rgba(15,118,110,.14);
  outline:none;
}
#recordsTable .purchase-note-trigger svg,
#repairView .repair-table td .repair-note-trigger svg {
  width:15px !important;
  height:15px !important;
  flex:0 0 15px;
}
#recordsTable .purchase-note-trigger > span,
#repairView .repair-table td .repair-note-trigger > span {
  display:block;
  font-size:11px !important;
  font-weight:650 !important;
  line-height:1 !important;
  white-space:nowrap;
}
/* Refined purchase and repair note hover preview 20260804 */
.note-hover-preview { position:fixed; z-index:13080; display:grid; gap:5px; box-sizing:border-box; max-width:calc(100vw - 28px); max-height:min(42vh,280px); overflow:auto; padding:13px 15px 14px; border:1px solid rgba(148,163,184,.28); border-radius:14px; color:#334155; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,252,.96)); box-shadow:0 14px 34px rgba(15,23,42,.16),inset 0 1px rgba(255,255,255,.9); opacity:0; pointer-events:none; transform:translateY(5px) scale(.985); transition:opacity .16s ease,transform .16s ease; }
.note-hover-preview.is-visible { opacity:1; transform:translateY(0) scale(1); }
.note-hover-preview::after { position:absolute; left:50%; width:10px; height:10px; border-right:1px solid rgba(148,163,184,.28); border-bottom:1px solid rgba(148,163,184,.28); background:#f8fafc; content:""; transform:translateX(-50%) rotate(45deg); }
.note-hover-preview[data-placement="top"]::after { bottom:-6px; }
.note-hover-preview[data-placement="bottom"]::after { top:-6px; transform:translateX(-50%) rotate(225deg); }
.note-hover-preview-kicker { color:#0f766e; font-size:10px; font-weight:750; letter-spacing:.12em; line-height:1; }
.note-hover-preview-title { color:#0f172a; font-size:13px; line-height:1.25; }
.note-hover-preview-body { margin:0; color:#475569; font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:760px) { .note-hover-preview { display:none; } }
/* Purchase, inventory and repair column visibility controls 20260804 */
.column-visibility-control { position:relative; z-index:30; flex:0 0 auto; }
.column-visibility-trigger { display:inline-flex !important; min-width:96px; align-items:center; justify-content:center; gap:7px; padding:0 11px !important; border-color:rgba(20,184,166,.24) !important; color:#0f766e !important; background:linear-gradient(135deg,rgba(240,253,250,.94),rgba(236,253,245,.82)) !important; box-shadow:inset 0 1px rgba(255,255,255,.94),0 3px 10px rgba(15,118,110,.07); }
.column-visibility-trigger svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.column-visibility-trigger i { font-style:normal; font-size:14px; line-height:1; transition:transform .18s ease; }
.column-visibility-control.is-open .column-visibility-trigger { border-color:rgba(13,148,136,.54) !important; background:#ccfbf1 !important; box-shadow:0 8px 18px rgba(15,118,110,.14); }
.column-visibility-control.is-open .column-visibility-trigger i { transform:rotate(180deg); }
.column-visibility-menu { position:absolute; top:calc(100% + 9px); right:0; display:none; width:min(310px,calc(100vw - 34px)); overflow:hidden; border:1px solid rgba(148,163,184,.28); border-radius:16px; color:#334155; background:rgba(255,255,255,.98); box-shadow:0 20px 48px rgba(15,23,42,.19); backdrop-filter:blur(16px); }
.column-visibility-control.is-open .column-visibility-menu { display:block; animation:column-visibility-menu-in .16s ease both; }
.column-visibility-menu header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 15px 11px; border-bottom:1px solid rgba(226,232,240,.82); }
.column-visibility-menu-section-title { display:flex; min-height:38px; align-items:center; padding:0 15px; border-bottom:1px solid rgba(226,232,240,.7); color:#64748b; background:rgba(248,250,252,.74); font-size:12px; font-weight:700; }
.column-visibility-menu-column-header { margin:0; }
.column-visibility-menu header div { min-width:0; }

.column-visibility-menu-kicker { color:#94a3b8; font-size:11px; font-weight:650; line-height:1.25; }
.column-visibility-menu strong { color:#0f172a; font-size:14px; }
.column-visibility-menu header button { min-height:30px; padding:0 9px; border:0; border-radius:9px; color:#0f766e; background:#ecfdf5; font:inherit; font-size:11px; font-weight:650; cursor:pointer; }
.column-visibility-menu > p { margin:0; padding:10px 15px; color:#64748b; border-bottom:1px solid rgba(226,232,240,.7); font-size:11px; line-height:1.5; }
.column-visibility-list { display:grid; max-height:min(46vh,330px); overflow:auto; padding:7px; }
.column-visibility-option { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:9px; min-height:36px; padding:0 9px; border-radius:10px; color:#475569; font-size:13px; cursor:pointer; transition:background .16s ease,color .16s ease; }
.column-visibility-option:hover { color:#0f766e; background:rgba(240,253,250,.8); }
.column-visibility-option input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.column-visibility-check { display:grid; width:18px; height:18px; place-items:center; border:1px solid #cbd5e1; border-radius:6px; color:transparent; background:#fff; font-size:12px; font-weight:800; transition:all .16s ease; }
.column-visibility-option input:checked + .column-visibility-check { border-color:#14b8a6; color:#fff; background:#14b8a6; box-shadow:0 3px 8px rgba(20,184,166,.2); }
.column-visibility-option input:focus-visible + .column-visibility-check { outline:2px solid rgba(13,148,136,.34); outline-offset:2px; }
@keyframes column-visibility-menu-in { from { opacity:0; transform:translateY(-5px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:760px) { .column-visibility-control { width:100%; } .column-visibility-trigger { width:100%; } .column-visibility-menu { right:auto; left:0; width:min(340px,calc(100vw - 36px)); } }
/* Purchase batch import 20260804 */
.column-visibility-menu-section-action { justify-content:space-between; gap:10px; }
.column-visibility-menu-action { min-height:28px; padding:0 9px; border:1px solid rgba(20,184,166,.22); border-radius:8px; color:#0f766e; background:#ecfdf5; font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.column-visibility-menu-action:hover { color:#115e59; background:#ccfbf1; }
.purchase-batch-import-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:22px; background:rgba(15,23,42,.36); backdrop-filter:blur(8px); }
.purchase-batch-import-dialog { display:flex; width:min(980px,100%); max-height:min(790px,calc(100vh - 44px)); flex-direction:column; overflow:hidden; border:1px solid rgba(148,163,184,.26); border-radius:22px; background:rgba(255,255,255,.98); box-shadow:0 28px 80px rgba(15,23,42,.28); }
.purchase-batch-import-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:24px 26px 18px; border-bottom:1px solid rgba(226,232,240,.82); background:linear-gradient(135deg,rgba(240,253,250,.88),rgba(248,250,252,.96)); }
.purchase-batch-import-header small { color:#0f766e; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.purchase-batch-import-header h2 { margin:6px 0 7px; color:#0f172a; font-size:22px; line-height:1.2; }
.purchase-batch-import-header p { margin:0; color:#64748b; font-size:12px; line-height:1.6; }
.purchase-batch-import-close { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border:0; border-radius:10px; color:#64748b; background:rgba(255,255,255,.7); font-size:23px; line-height:1; cursor:pointer; }
.purchase-batch-import-close:hover { color:#0f766e; background:#ccfbf1; }
.purchase-batch-import-body { min-height:0; padding:18px 26px 12px; overflow:auto; }
.purchase-batch-import-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin-bottom:13px; }
.purchase-batch-import-toolbar > .secondary-button, .purchase-batch-import-file-button { min-height:38px; }
.purchase-batch-import-file-button { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.purchase-batch-import-file-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.purchase-batch-import-supplier { display:grid; min-width:min(280px,100%); gap:5px; margin-left:auto; color:#475569; font-size:11px; font-weight:700; }
.purchase-batch-import-supplier select { min-height:38px; padding:0 34px 0 11px; border:1px solid rgba(148,163,184,.38); border-radius:10px; color:#334155; background:#fff; font:inherit; cursor:pointer; }
.purchase-batch-import-supplier-order { min-width:min(260px,100%); margin-left:0; }
.purchase-batch-import-supplier input { min-height:38px; width:100%; padding:0 11px; border:1px solid rgba(148,163,184,.38); border-radius:10px; color:#334155; background:#fff; font:inherit; outline:none; transition:border-color .16s ease,box-shadow .16s ease; }
.purchase-batch-import-supplier input:focus { border-color:rgba(13,148,136,.62); box-shadow:0 0 0 3px rgba(20,184,166,.12); }
.purchase-batch-import-summary { margin-bottom:12px; padding:11px 13px; border:1px solid rgba(20,184,166,.18); border-radius:11px; color:#0f766e; background:rgba(240,253,250,.72); font-size:12px; line-height:1.5; }
.purchase-batch-import-table-wrap { overflow:auto; border:1px solid rgba(226,232,240,.95); border-radius:13px; }
.purchase-batch-import-table { width:100%; min-width:740px; border-collapse:collapse; font-size:12px; }
.purchase-batch-import-table th { padding:11px 12px; color:#64748b; background:#f8fafc; font-size:11px; font-weight:750; text-align:left; white-space:nowrap; }
.purchase-batch-import-table td { padding:11px 12px; border-top:1px solid rgba(241,245,249,.98); color:#475569; white-space:nowrap; }
.purchase-batch-import-table tbody tr:hover { background:#f8fffd; }
.purchase-batch-import-empty, .purchase-batch-import-more { padding:28px !important; color:#94a3b8 !important; text-align:center; }
.purchase-batch-import-status { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:700; }
.purchase-batch-import-status.is-valid { color:#047857; background:#d1fae5; }
.purchase-batch-import-status.is-invalid { color:#b45309; background:#fef3c7; }
.purchase-batch-import-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 26px 20px; border-top:1px solid rgba(226,232,240,.82); background:rgba(248,250,252,.72); }
@media (max-width:760px) {
  .purchase-batch-import-modal { padding:10px; place-items:end center; }
  .purchase-batch-import-dialog { max-height:calc(100vh - 20px); border-radius:18px; }
  .purchase-batch-import-header { padding:18px 18px 14px; }
  .purchase-batch-import-header h2 { font-size:19px; }
  .purchase-batch-import-body { padding:14px 18px 10px; }
  .purchase-batch-import-toolbar { align-items:stretch; }
  .purchase-batch-import-toolbar > .secondary-button, .purchase-batch-import-file-button, .purchase-batch-import-supplier { width:100%; margin-left:0; }
  .purchase-batch-import-footer { padding:13px 18px 16px; }
  .purchase-batch-import-footer button { flex:1; }
}
/* More actions menu viewport fitting 20260804 */
.column-visibility-control { overflow:visible !important; }
.column-visibility-menu { left:0; right:auto; width:min(310px,calc(100vw - 24px)); max-width:calc(100vw - 24px); }
.column-visibility-control.column-visibility-align-right .column-visibility-menu { left:auto; right:0; }
.records-panel.column-visibility-open,
.inventory-list-panel.column-visibility-open,
.repair-dashboard.column-visibility-open { overflow:visible !important; }
.records-panel.column-visibility-open .toolbar,
.inventory-list-panel.column-visibility-open .inventory-toolbar,
.repair-dashboard.column-visibility-open .repair-toolbar { overflow:visible !important; }
@media (max-width:760px) {
  .column-visibility-menu,
  .column-visibility-control.column-visibility-align-right .column-visibility-menu { left:0; right:auto; width:min(340px,calc(100vw - 24px)); max-width:calc(100vw - 24px); }
}
/* Data operation secondary actions 20260804 */
.column-visibility-menu-sub-actions { padding:6px 8px; border-bottom:1px solid rgba(226,232,240,.7); background:rgba(255,255,255,.72); }
.column-visibility-menu-sub-action { display:grid; grid-template-columns:18px minmax(0,1fr) 14px; width:100%; min-height:34px; align-items:center; gap:8px; padding:0 10px; border:0; border-radius:9px; color:#0f766e; background:transparent; font:inherit; font-size:12px; font-weight:650; text-align:left; cursor:pointer; }
.column-visibility-menu-sub-action > span:first-child { color:#14b8a6; font-size:15px; line-height:1; }
.column-visibility-menu-sub-action > i { color:#94a3b8; font-size:16px; font-style:normal; line-height:1; text-align:right; }
.column-visibility-menu-sub-action:hover,
.column-visibility-menu-sub-action:focus-visible { color:#115e59; background:#ecfdf5; outline:none; }
/* Supplier order number assignment 20260804 */
.supplier-order-no-modal .purchase-batch-import-dialog { width:min(980px,100%); }
.supplier-order-no-modal .purchase-batch-import-table { min-width:740px; table-layout:auto; }
.supplier-order-no-modal .purchase-batch-import-table th,
.supplier-order-no-modal .purchase-batch-import-table td { vertical-align:middle; }
.supplier-order-no-modal .purchase-batch-import-table th:nth-child(1),
.supplier-order-no-modal .purchase-batch-import-table td:nth-child(1) { width:18%; }
.supplier-order-no-modal .purchase-batch-import-table th:nth-child(2),
.supplier-order-no-modal .purchase-batch-import-table td:nth-child(2) { width:12%; }
.supplier-order-no-modal .purchase-batch-import-table th:nth-child(3),
.supplier-order-no-modal .purchase-batch-import-table td:nth-child(3) { width:18%; }
.supplier-order-no-modal .purchase-batch-import-table th:nth-child(4),
.supplier-order-no-modal .purchase-batch-import-table td:nth-child(4) { width:14%; }
.supplier-order-no-modal .purchase-batch-import-table th:nth-child(5),
.supplier-order-no-modal .purchase-batch-import-table td:nth-child(5) { width:28%; }
.supplier-order-no-modal .purchase-batch-import-table th:nth-child(6),
.supplier-order-no-modal .purchase-batch-import-table td:nth-child(6) { width:1%; white-space:nowrap; }
.supplier-order-no-field { display:grid; gap:6px; margin-bottom:13px; color:#475569; font-size:12px; font-weight:700; }
.supplier-order-no-field input { width:100%; min-height:40px; box-sizing:border-box; padding:0 12px; border:1px solid rgba(148,163,184,.4); border-radius:10px; color:#334155; background:#fff; font:inherit; font-weight:500; outline:none; }
.supplier-order-no-field input:focus { border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.13); }
.column-visibility-menu-sub-actions { display:grid; gap:3px; }
.column-visibility-menu-sub-action + .column-visibility-menu-sub-action { border-top:1px solid rgba(226,232,240,.5); }
/* Supplier order row tools 20260804 */
.supplier-order-no-field select { width:100%; min-height:40px; box-sizing:border-box; padding:0 34px 0 12px; border:1px solid rgba(148,163,184,.4); border-radius:10px; color:#334155; background:#fff; font:inherit; font-weight:500; outline:none; }
.supplier-order-no-field select:focus { border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.13); }
.supplier-order-no-actions { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.supplier-order-no-actions .row-button { min-width:46px; height:30px; padding:0 8px; border:0; border-radius:8px; font-size:11px; font-weight:650; }
.supplier-order-no-actions .danger-row-button { color:#b4232f; background:rgba(254,226,226,.84); }
.supplier-order-no-actions .danger-row-button:hover { color:#991b1b; background:#fee2e2; }
.purchase-batch-import-table tr.is-editing td { background:rgba(204,251,241,.56); }
/* More actions submenu icons 20260804 */
.column-visibility-menu-sub-icon { display:grid; width:18px; height:18px; place-items:center; color:#0f9f93; }
.column-visibility-menu-sub-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.column-visibility-menu-sub-action > span:first-child.column-visibility-menu-sub-icon { color:#0f9f93; font-size:inherit; }
.column-visibility-menu-sub-action:hover .column-visibility-menu-sub-icon,
.column-visibility-menu-sub-action:focus-visible .column-visibility-menu-sub-icon { color:#0f766e; }
/* Mobile column menu visibility 20260804 */
@media (max-width:760px) {
  #recordsView .toolbar .toolbar-action-group,
  .inventory-toolbar .toolbar-action-group,
  .repair-toolbar .toolbar-action-group {
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
    overflow:visible !important;
    padding-bottom:0 !important;
    white-space:normal !important;
  }
  #recordsView .toolbar .toolbar-action-group > .column-visibility-control,
  .inventory-toolbar .toolbar-action-group > .column-visibility-control,
  .repair-toolbar .toolbar-action-group > .column-visibility-control {
    flex:1 1 140px !important;
    width:auto !important;
    min-width:140px !important;
  }
  #recordsView .toolbar .toolbar-action-group > .column-visibility-control .column-visibility-trigger,
  .inventory-toolbar .toolbar-action-group > .column-visibility-control .column-visibility-trigger,
  .repair-toolbar .toolbar-action-group > .column-visibility-control .column-visibility-trigger {
    width:100% !important;
    min-width:0 !important;
  }
  .records-panel.column-visibility-open .toolbar-action-group,
  .inventory-list-panel.column-visibility-open .toolbar-action-group,
  .repair-dashboard.column-visibility-open .toolbar-action-group {
    overflow:visible !important;
  }
}

/* Final public-mode access visibility */
body.public-converter-mode .sidebar-account,
body.public-converter-mode #profileMenuToggle,
body.public-converter-mode #profileDropdown,
body.public-converter-mode #inventoryMenuToggle,
body.public-converter-mode #inventorySubmenu,
body.public-converter-mode #adminMenuToggle,
body.public-converter-mode #adminSubmenu,
body.public-converter-mode .mobile-account-toggle {
  display:none !important;
}
body.public-converter-mode [data-auth-required] {
  display:none !important;
}

/* Keep the repair toolbar actions inside the dashboard boundary. */
@media (min-width:1280px) {
  #repairView .repair-toolbar {
    grid-template-columns:minmax(190px,1.3fr) repeat(3,minmax(108px,.68fr)) minmax(350px,auto) !important;
  }
  #repairView .repair-toolbar > .toolbar-action-group {
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }
}
@media (min-width:761px) and (max-width:1279px) {
  #repairView .repair-toolbar {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #repairView .repair-toolbar > .repair-search {
    grid-column:span 2 !important;
  }
  #repairView .repair-toolbar > .toolbar-action-group {
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }
}

/* Logistics-style grouping for the whole-cabinet submenu. */
#wholeCabinetSubmenu .sidebar-submenu-label {
  display:block;
  margin:8px 8px 3px;
  padding:0 8px;
  color:rgba(71,85,105,.72);
  font-size:10px;
  font-weight:600;
  line-height:18px;
  letter-spacing:0;
}

#wholeCabinetSubmenu .sidebar-submenu-label:first-child {
  margin-top:2px;
}

body.dark-mode #wholeCabinetSubmenu .sidebar-submenu-label {
  color:rgba(203,213,225,.68);
}

/* Independent blank workspace under whole-cabinet management. */
body.app-mode #appShell > #wholeCabinetOtherView > .page-header {
  animation:none !important;
  transform:none !important;
}

body.app-mode #appShell > #wholeCabinetOtherView > .blank-view-panel {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-top:0 !important;
  box-sizing:border-box !important;
  animation:none !important;
  transform:none !important;
}

@media (min-width:761px) {
  body.app-mode:has(#wholeCabinetOtherView:not(.hidden)),
  #appShell:has(#wholeCabinetOtherView:not(.hidden)) {
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.app-mode #appShell > #wholeCabinetOtherView:not(.hidden) {
    display:grid !important;
    width:100% !important;
    height:100% !important;
    max-height:100dvh !important;
    min-height:0 !important;
    padding-top:106px !important;
    padding-bottom:16px !important;
    grid-template-rows:minmax(0,1fr) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.app-mode #appShell > #wholeCabinetOtherView > .blank-view-panel {
    grid-row:1 !important;
    position:relative;
    height:100% !important;
    min-height:0 !important;
    align-self:stretch !important;
    overflow:auto !important;
  }
}

@media (max-width:760px) {
  #wholeCabinetOtherView,
  #wholeCabinetOtherView > .page-header,
  #wholeCabinetOtherView > .blank-view-panel {
    width:100%;
    max-width:100%;
    min-width:0;
  }

  body.app-mode #appShell > #wholeCabinetOtherView > .page-header {
    margin-bottom:16px !important;
  }
}

/* Keep whole-cabinet page descriptions fully readable on tablet and mobile. */
@media (max-width:760px) {
  body.app-mode #appShell > :is(#wholeCabinetView, #wholeCabinetOtherView) > .page-header {
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    contain:layout !important;
    clip-path:none !important;
  }

  body.app-mode #appShell > :is(#wholeCabinetView, #wholeCabinetOtherView) > .page-header > div,
  body.app-mode #appShell > :is(#wholeCabinetView, #wholeCabinetOtherView) > .page-header p {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  body.app-mode #appShell > :is(#wholeCabinetView, #wholeCabinetOtherView) > .page-header p {
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}

/* Full-site responsive and interaction convergence 20260914 */
html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body,
button,
input,
select,
textarea {
  letter-spacing:0;
}

button,
[role="button"],
label[for],
input[type="checkbox"],
input[type="radio"] {
  touch-action:manipulation;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor:not-allowed !important;
  opacity:.56;
}

:is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline:3px solid rgba(13,148,136,.2);
  outline-offset:2px;
}

body.app-mode :is(.view,.workspace,.records-panel,.entry-panel,.admin-panel,.panel-head,.toolbar,.form-grid,.form-actions) {
  min-width:0;
}

body.app-mode :is(.table-wrap,.repair-table-wrap,.finance-table-wrap,.inventory-table-wrap) {
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
}

.record-form-modal > iframe,
.cabinet-info-host > iframe {
  display:block;
  width:100%;
  min-width:0;
  border:0;
}

/* Booking and ledger use the same single-layer workspace as purchase records. */
.cabinet-info-host:has(> #cabinetInfoFrame[data-active-view="booking"]),
.cabinet-info-host:has(> #cabinetInfoFrame[data-active-view="ledger"]) {
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.record-form-modal,
.account-popover,
.image-viewer,
.scanner-viewer {
  padding-top:max(12px,env(safe-area-inset-top));
  padding-right:max(12px,env(safe-area-inset-right));
  padding-bottom:max(12px,env(safe-area-inset-bottom));
  padding-left:max(12px,env(safe-area-inset-left));
}

.record-form-dialog,
.account-card,
.display-settings-card,
.admin-data-card,
.log-clear-password-card {
  max-width:100%;
  max-height:calc(100dvh - max(24px,env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px));
}

@media (pointer:coarse) {
  body.app-mode :is(button,.row-button,.primary-button,.secondary-button,.danger-button):not(.site-date-paste-button):not(.image-viewer-nav) {
    min-height:44px;
  }

  body.app-mode :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea) {
    min-height:44px;
  }
}

@media (max-width:760px) {
  body.app-mode .view {
    padding-right:max(10px,env(safe-area-inset-right));
    padding-left:max(10px,env(safe-area-inset-left));
  }

  body.app-mode .page-header {
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
  }

  body.app-mode .page-header h1 {
    font-size:24px;
    line-height:1.25;
  }

  body.app-mode .page-header p {
    font-size:13px;
    line-height:1.55;
  }

  body.app-mode :is(.panel-head,.toolbar,.pagination-bar,.table-footer,.form-actions) {
    max-width:100%;
    flex-wrap:wrap;
    gap:9px;
  }

  body.app-mode .toolbar > :is(label,select,input,button,.site-select-shell,.search-box,.toolbar-action-group) {
    max-width:100%;
    min-width:0;
  }

  body.app-mode .record-form-modal {
    place-items:stretch;
    overflow:hidden;
  }

  body.app-mode .record-form-dialog {
    width:100%;
    max-height:calc(100dvh - max(24px,env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px));
    margin:0;
    border-radius:14px;
  }

  body.app-mode .record-form-dialog > .form-actions {
    position:sticky;
    bottom:0;
    z-index:6;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    background:rgba(255,255,255,calc(.9 + var(--panel-opacity) * .1));
  }

  body.app-mode .account-popover > :is(.account-card,.display-settings-card,.admin-data-card,.log-clear-password-card) {
    width:100%;
    overflow:auto;
  }
}

@media (max-width:460px) {
  body.app-mode .page-header h1 {
    font-size:22px;
  }

  body.app-mode .page-header .section-kicker {
    font-size:9px;
  }

  body.app-mode .form-actions > :is(button,.primary-button,.secondary-button,.danger-button) {
    width:100%;
    min-width:0;
  }
}