:root {
  color-scheme: dark;
  --ink: #e8f7f8;
  --muted: #8ea8ad;
  --paper: #070b0f;
  --surface: #111820;
  --line: #283b43;
  --sage: #12323a;
  --sage-ink: #70f3ec;
  --amber: #332713;
  --amber-ink: #ffc45c;
  --rose: #35151d;
  --rose-ink: #ff6b7d;
  --lav: #1c2441;
  --lav-ink: #8eb8ff;
  --tech-cyan: #31e6df;
  --tech-cyan-soft: rgba(49, 230, 223, .14);
  --tech-blue: #4f8fff;
  --tech-amber: #ffb23f;
  --tech-red: #ff526d;
  --tech-panel: rgba(14, 22, 29, .94);
  --tech-panel-2: rgba(19, 30, 39, .96);
  --tech-line: rgba(100, 218, 218, .24);
  --shadow: 0 18px 50px rgba(0, 0, 0, .38), 0 0 0 1px rgba(68, 229, 220, .04);
}

* { scrollbar-color: #294a50 #090e13; }

body {
  min-height: 100svh;
  background-color: #070b0f;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(49, 230, 223, .09), transparent 28rem),
    radial-gradient(circle at 90% 18%, rgba(79, 143, 255, .08), transparent 34rem),
    linear-gradient(rgba(57, 122, 128, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 122, 128, .045) 1px, transparent 1px),
    linear-gradient(145deg, #070a0e 0%, #0a1117 48%, #070b0f 100%);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
  background-attachment: fixed;
  color: var(--ink);
}

::selection { background: rgba(49, 230, 223, .3); color: #fff; }

button, a, input, select, textarea { transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tech-cyan);
  outline-offset: 3px;
}

.app-shell { position: relative; }
.app-shell::before {
  content: "SYSTEM // SHOWROOM CONTROL";
  display: block;
  margin: 0 0 14px;
  color: rgba(112, 243, 236, .58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .24em;
}

header {
  position: relative;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--tech-line);
}
header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(260px, 42vw);
  height: 2px;
  background: linear-gradient(90deg, var(--tech-cyan), transparent);
  box-shadow: 0 0 14px rgba(49, 230, 223, .55);
}
h1, h2, h3 { color: #f1fbfc; }
h1 { text-shadow: 0 0 24px rgba(49, 230, 223, .18); }
.eyebrow { color: var(--tech-cyan); letter-spacing: .18em; }
.user-menu { color: #9bb1b5; }
.user-menu button, .text-button { color: var(--tech-cyan); }
.user-menu button:hover, .text-button:hover { color: #c8fffb; text-shadow: 0 0 12px rgba(49, 230, 223, .45); }

.workflow-callout {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112deg, rgba(18, 41, 49, .98), rgba(13, 22, 29, .98) 68%) !important;
  border: 1px solid rgba(49, 230, 223, .3);
  border-radius: 8px !important;
  box-shadow: inset 3px 0 0 var(--tech-cyan), 0 16px 38px rgba(0, 0, 0, .22);
}
.workflow-callout::after {
  content: "";
  position: absolute;
  right: -26px;
  top: 0;
  width: 105px;
  height: 5px;
  transform: skewX(-38deg);
  background: linear-gradient(90deg, transparent, var(--tech-amber));
  box-shadow: 0 0 12px rgba(255, 178, 63, .45);
}
.workflow-callout b { color: #ecffff; }
.workflow-callout span { color: #91abb0 !important; }

.outline-button, .home-link, .account-manager-button, .reset-view {
  border: 1px solid rgba(49, 230, 223, .32) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(22, 35, 44, .96), rgba(12, 20, 27, .96)) !important;
  color: #a8faf5 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015);
}
.outline-button:hover, .home-link:hover, .account-manager-button:hover, .reset-view:hover:not(:disabled) {
  border-color: var(--tech-cyan) !important;
  background: rgba(49, 230, 223, .1) !important;
  box-shadow: 0 0 16px rgba(49, 230, 223, .15);
}
.edit-button, .primary {
  border: 1px solid #59f4ec;
  border-radius: 5px;
  background: linear-gradient(135deg, #35efe6, #23aeb6);
  color: #041012;
  box-shadow: 0 0 18px rgba(49, 230, 223, .16);
  text-transform: none;
}
.edit-button:hover, .primary:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(49, 230, 223, .3); }

.workflow-summary { gap: 10px; }
.workflow-summary button {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  border: 1px solid var(--tech-line) !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, rgba(20, 31, 40, .98), rgba(11, 18, 24, .98)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
}
.workflow-summary button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 44%;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.workflow-summary button:nth-child(1) { color: #a8c2c7 !important; }
.workflow-summary button:nth-child(2) { color: #70f3ec !important; }
.workflow-summary button:nth-child(3) { color: #ff6b7d !important; }
.workflow-summary button:nth-child(4) { color: #ffc45c !important; }
.workflow-summary button:nth-child(5) { color: #8eb8ff !important; }
.workflow-summary button:hover { transform: translateY(-2px); border-color: currentColor !important; }
.workflow-summary button.active { outline: 1px solid currentColor; outline-offset: 2px; box-shadow: 0 0 22px color-mix(in srgb, currentColor 20%, transparent) !important; }
.workflow-summary b { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.toolbar { border-top: 1px solid rgba(49, 230, 223, .1); padding-top: 18px; }
.search-panel .search {
  min-height: 60px;
  border: 1px solid rgba(49, 230, 223, .28);
  border-radius: 6px;
  background: rgba(7, 13, 18, .9);
  box-shadow: inset 0 0 24px rgba(49, 230, 223, .025), 0 8px 24px rgba(0, 0, 0, .2);
}
.search-panel .search:focus-within { border-color: var(--tech-cyan); box-shadow: inset 0 0 28px rgba(49, 230, 223, .07), 0 0 18px rgba(49, 230, 223, .12); }
.search-panel .search span { color: var(--tech-cyan); text-shadow: 0 0 12px rgba(49, 230, 223, .48); }
.note-search-panel .search { border-color: rgba(94, 150, 255, .34); background: rgba(10, 15, 28, .92); }
.note-search-panel .search:focus-within { border-color: #75a6ff; box-shadow: 0 0 18px rgba(79, 143, 255, .14); }
.note-search-panel .search span { color: #8eb8ff; text-shadow: 0 0 12px rgba(79, 143, 255, .45); }
.search input { color: #e7f6f7; }
.search input::placeholder, input::placeholder, textarea::placeholder { color: #667d82; opacity: 1; }
.search-submit, .search-clear {
  border-radius: 5px;
  border: 1px solid rgba(49, 230, 223, .4);
}
.search-submit { background: linear-gradient(135deg, #38e8e0, #238f9b); color: #041012; }
.note-search-panel .search-submit { border-color: #628ff0; background: linear-gradient(135deg, #6c9dff, #465fbd); color: #f6f8ff; }
.search-clear { background: #151e26; color: #9bb1b5; }

.filter {
  border-color: #2a4149;
  border-radius: 5px;
  background: rgba(14, 23, 30, .92);
  color: #91a8ad;
}
.filter:hover { border-color: rgba(49, 230, 223, .55); color: #c6f8f5; }
.filter.active { border-color: var(--tech-cyan); background: rgba(49, 230, 223, .14); color: #9ffff9; box-shadow: inset 0 -2px 0 var(--tech-cyan), 0 0 14px rgba(49, 230, 223, .11); }
.result-count { color: #7f989d; letter-spacing: .04em; }

.desktop-table, .product-card, .mobile-bulk-actions {
  border: 1px solid var(--tech-line);
  border-radius: 7px;
  background: var(--tech-panel);
  box-shadow: var(--shadow);
}
.desktop-table { overflow: hidden; }
.desktop-table th {
  border-bottom: 1px solid rgba(49, 230, 223, .2);
  background: #0b1218;
  color: #79b7b7;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.desktop-table td { border-top-color: rgba(93, 128, 135, .18); color: #dcecef; }
.desktop-table tr { background: rgba(14, 22, 29, .82); }
.desktop-table tbody tr:hover { background: rgba(35, 73, 78, .22); }
.desktop-table small, .vendor, .vendor span, .facts { color: #829a9f; }
.facts b, .product-card h3, .desktop-table strong { color: #effdff; }
.product-card { position: relative; overflow: hidden; }
.product-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 78px;
  height: 2px;
  background: var(--tech-cyan);
  box-shadow: 0 0 12px rgba(49, 230, 223, .55);
}
.card-select, .card-select-status { color: #91a8ad; }
.icon-button, .close { color: #7e969b; }
.icon-button:hover, .close:hover { color: var(--tech-cyan); }

.status { border: 1px solid currentColor; border-radius: 4px; background: transparent !important; letter-spacing: .03em; }
.status.normal { color: #70f3ec; }
.status.missing_sample { color: #ff6b7d; box-shadow: 0 0 10px rgba(255, 82, 109, .1); }
.status.missing_label { color: #ffc45c; }
.status.spare_sample { color: #8eb8ff; }
.note-previews span { border: 1px solid #263942; border-radius: 4px; background: #0b1218; color: #a6b9bd; }
.note-previews b { color: var(--tech-cyan); }
.note-previews.compact span { border: 0; background: transparent; }

.issue-toggle, .spare-toggle {
  border-radius: 5px;
  background: #111b23;
  color: #8fa6ab;
  border-color: #2b4149;
}
.issue-toggle:hover, .spare-toggle:hover { border-color: currentColor; }
.issue-toggle.sample.resolve { border-color: rgba(255, 82, 109, .65); background: rgba(255, 82, 109, .09); color: #ff7588; }
.issue-toggle.label.resolve { border-color: rgba(255, 178, 63, .65); background: rgba(255, 178, 63, .09); color: #ffc45c; }
.spare-toggle, .spare-toggle.resolve { border-color: rgba(79, 143, 255, .55); background: rgba(79, 143, 255, .09); color: #8eb8ff; }
.sample-quantity-stepper { border-color: rgba(255, 82, 109, .55); border-radius: 5px; background: rgba(255, 82, 109, .07); color: #ff8a99; }
.sample-quantity-stepper button { border: 1px solid rgba(255, 82, 109, .4); border-radius: 3px; background: rgba(255, 82, 109, .12); color: #ff8796; }
.sample-quantity-stepper button:hover { background: rgba(255, 82, 109, .25); }
.spare-quantity-stepper { border-color: rgba(79, 143, 255, .55); background: rgba(79, 143, 255, .07); color: #9abfff; }
.spare-quantity-stepper button { border-color: rgba(79, 143, 255, .45); background: rgba(79, 143, 255, .13); color: #a8c7ff; }
.spare-quantity-stepper button:hover { background: rgba(79, 143, 255, .26); }

.bulk-bar { border-bottom-color: var(--tech-line); background: #0b1218; color: #9bb1b5; }
.bulk-direct { border-radius: 4px; background: #111a21 !important; }
.bulk-direct.missing-sample { border-color: rgba(255, 82, 109, .5); color: #ff788a; }
.bulk-direct.sample-done { border-color: rgba(49, 230, 223, .45); color: #70f3ec; }
.bulk-direct.missing-label { border-color: rgba(255, 178, 63, .5); color: #ffc45c; }
.bulk-direct.label-done { border-color: rgba(79, 143, 255, .5); color: #8eb8ff; }
.clear-all-labels { border: 1px solid #ffbd50; border-radius: 4px; background: linear-gradient(135deg, #ffb23f, #b56c18); color: #1b1003; box-shadow: 0 0 16px rgba(255, 178, 63, .18); }
.clear-all-labels:hover { background: #ffc45c; }
.clear-all-note { color: #c39e60; }

.search-layout-actions, .smart-position-tools, .layout-topbar, .batch-selectbar, .confirm-replace, .detail-grid, .source-note, .account-create {
  border: 1px solid var(--tech-line);
  border-radius: 6px;
  background: rgba(12, 20, 27, .95);
  color: #c5d8db;
}
.search-layout-actions>span, .smart-numbering>div span, .current-position, .modal-copy, .source-note span { color: #829a9f; }
.smart-position-status, .persistent-note-help, .position-row strong, .position-edit, .close-position { color: var(--tech-cyan); }
.position-row, .batch-position-card, .account-card {
  border-color: #2a3e46;
  border-radius: 5px;
  background: #101820;
  color: #dcecef;
}
.position-row:hover { border-color: rgba(49, 230, 223, .55); background: rgba(49, 230, 223, .055); }
.position-empty, .empty { border-color: #31474f; border-radius: 6px; background: rgba(12, 19, 25, .88); color: #829a9f; }

input, select, textarea {
  border-color: #2a4149;
  border-radius: 5px;
  background: #0a1117;
  color: #e4f3f4;
}
input:focus, select:focus, textarea:focus { border-color: var(--tech-cyan); box-shadow: 0 0 0 3px rgba(49, 230, 223, .08); }
input[type="checkbox"] { accent-color: var(--tech-cyan); }
select option { background: #101820; color: #e4f3f4; }

dialog::backdrop { background: rgba(1, 4, 7, .82); backdrop-filter: blur(4px); }
.modal, .login-card {
  border: 1px solid rgba(49, 230, 223, .25);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(18, 28, 36, .99), rgba(8, 14, 19, .99));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .65), 0 0 28px rgba(49, 230, 223, .07);
}
.modal-head { border-bottom: 1px solid rgba(49, 230, 223, .14); padding-bottom: 14px; }
.timeline>div { border-bottom-color: #263941; }
.timeline span, .timeline small { color: #849ba0; }
.danger-box, .form-error { border: 1px solid rgba(255, 82, 109, .45); border-radius: 5px; background: rgba(255, 82, 109, .09); color: #ff8b9a; }
.account-state { border: 1px solid currentColor; border-radius: 4px; background: transparent !important; }
.account-state.active { color: #70f3ec; }
.account-state.inactive { color: #80959a; }
.account-card-title span, .account-list-head span { color: #829a9f; }

.login-shell { position: relative; }
.login-shell::before {
  content: "AUTHORIZATION REQUIRED // SECURE LOCAL NODE";
  color: rgba(112, 243, 236, .6);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  margin-bottom: 14px;
}
.brand-mark {
  border: 1px solid var(--tech-cyan);
  border-radius: 6px;
  background: rgba(49, 230, 223, .08);
  color: #9ffff9;
  box-shadow: inset 0 0 20px rgba(49, 230, 223, .08), 0 0 22px rgba(49, 230, 223, .12);
}
.login-copy, .hint { color: #849ba0; }

.startup-loading { color: #8da5aa; }
.startup-loading b { color: #edfcfd; }
.startup-loading small { color: #687f84; }
.startup-spinner { border-color: #243941; border-top-color: var(--tech-cyan); box-shadow: 0 0 14px rgba(49, 230, 223, .2); }

@media (prefers-reduced-motion: no-preference) {
  .workflow-callout::after { animation: tech-scan 4.8s ease-in-out infinite; }
  @keyframes tech-scan { 0%, 100% { opacity: .45; transform: translateX(0) skewX(-38deg); } 50% { opacity: 1; transform: translateX(-48px) skewX(-38deg); } }
}

@media (max-width: 759px) {
  body { background-size: auto, auto, 26px 26px, 26px 26px, auto; }
  .app-shell { padding: 22px 13px 44px; }
  .app-shell::before { letter-spacing: .15em; }
  header { gap: 14px; }
  .workflow-callout { padding: 15px; }
  .workflow-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-summary button { min-height: 80px; }
  .workflow-summary button:last-child { grid-column: 1 / -1; }
  .search-panel .search { min-height: 54px; padding: 0 13px; }
  .search-panel .search input { font-size: 16px; }
  .search-submit { padding: 0 14px; }
  .product-card { padding: 16px; }
  .user-menu { row-gap: 6px; }
}