:root {
  --bg: #e7e8e8;
  --ink: #202124;
  --muted: #737373;
  --panel: #f8f8f7;
  --line: #e4e4e2;
  --dark: #363737;
  --dark-soft: #4c4d4d;
  --accent: #e86543;
  --accent-soft: #faebe5;
  --return: #ececec;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "Segoe UI", sans-serif;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
}

.sidebar {
  background: var(--dark);
  color: #fff;
  border-radius: 22px;
  padding: 18px;
  min-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.brand strong { font-size: 14px; }

.bear-logo {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.bear-logo .ear {
  position: absolute;
  top: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #df9f30;
}
.bear-logo .ear.left { left: 7px; }
.bear-logo .ear.right { right: 7px; }
.bear-logo .face {
  position: absolute;
  left: 7px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f5be49;
}
.bear-logo i {
  position: absolute;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #342b22;
}
.bear-logo i:first-child { left: 8px; }
.bear-logo i:nth-child(2) { right: 8px; }
.bear-logo b {
  position: absolute;
  left: 13px;
  top: 16px;
  width: 5px;
  height: 4px;
  border-radius: 50%;
  background: #342b22;
}
.bear-logo em {
  position: absolute;
  left: 8px;
  bottom: -1px;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.bear-logo .scarf {
  position: absolute;
  left: 13px;
  bottom: 5px;
  width: 19px;
  height: 5px;
  border-radius: 999px;
  background: #c6362e;
}

.nav {
  border: 0;
  background: transparent;
  color: #d5d5d5;
  text-align: left;
  padding: 10px 12px;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
}
.nav:hover, .nav.active { background: var(--dark-soft); color: #fff; }
.side-note {
  margin-top: auto;
  padding: 16px;
  border-radius: 18px;
  background: #464747;
  color: #f3f3f3;
  font-weight: 700;
  line-height: 1.5;
}

.shell { min-width: 0; }
.topbar {
  height: 62px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
h1, h2, p { margin: 0; }
h1 { font-size: 34px; line-height: 1; }
.topbar p { color: var(--muted); margin-top: 8px; }

button, .ghost-file {
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 9px 16px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
button:hover, .ghost-file:hover { filter: brightness(0.97); }
.primary { background: var(--accent); color: #fff; }
.danger { color: #b42318; }
.ghost-file input { display: none; }
.top-actions { display: flex; gap: 10px; }

.layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 20px;
  min-height: calc(100vh - 110px);
}
.panel {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0 18px 55px rgba(43, 43, 43, 0.08);
}
.form-panel {
  padding: 18px;
  overflow: auto;
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.panel-title h2 { font-size: 18px; }
.panel-title span { color: var(--muted); font-size: 13px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
  font: inherit;
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 101, 67, 0.12);
}
#profit { background: #f1f1f1; }
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.table-panel { padding: 18px; min-width: 0; }
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.toolbar input { max-width: 360px; }
.toolbar select { max-width: 140px; }
.table-wrap {
  overflow: auto;
  border-radius: 18px;
  background: #fff;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}
th, td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
}
th {
  background: #eeeeee;
  color: #545454;
  font-weight: 700;
  position: sticky;
  top: 0;
}
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f7f7f7; }
tr.sold { background: var(--accent-soft); }
tr.returned { background: var(--return); color: #555; }
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: #f2f2f2;
}
.sold .pill { background: #fff1eb; color: var(--accent); }
.returned .pill { background: #e0e0e0; color: #555; }

.stats-panel {
  padding: 20px;
  min-height: calc(100vh - 110px);
}
.summary-strip {
  background: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 16px;
  line-height: 1.8;
}
.stats-controls {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}
.stats-controls label { width: 160px; }
.hidden { display: none !important; }

@media (max-width: 980px) {
  body { grid-template-columns: 1fr; padding: 14px; }
  .sidebar { min-height: auto; flex-direction: row; overflow: auto; border-radius: 18px; }
  .brand, .side-note { display: none; }
  .layout { grid-template-columns: 1fr; }
  .topbar { height: auto; margin-bottom: 16px; gap: 12px; flex-direction: column; }
}


.login-page {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    linear-gradient(120deg, rgba(0,0,0,0.78), rgba(0,0,0,0.38)),
    radial-gradient(circle at 20% 20%, rgba(232,101,67,0.55), transparent 32%),
    #151515;
}
.login-shell { width: min(430px, 100%); }
.login-card {
  background: rgba(248, 248, 247, 0.95);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 28px 90px rgba(0,0,0,0.32);
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.login-logo strong { font-size: 18px; }
.login-card h1 { font-size: 32px; margin-bottom: 10px; }
.login-card p { color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.login-form {
  display: grid;
  gap: 14px;
}
.login-form button {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}
.login-hint {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.bulk-actions {
  display: grid;
  grid-template-columns: auto 150px minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
}
.bulk-actions span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.bulk-actions select,
.bulk-actions input {
  min-width: 0;
}
.select-head,
.select-cell {
  width: 42px;
  text-align: center;
}
.select-head input,
.select-cell input {
  width: 16px;
  height: 16px;
  padding: 0;
  cursor: pointer;
}

@media (max-width: 980px) {
  .bulk-actions {
    grid-template-columns: 1fr 1fr;
  }
  .bulk-actions span,
  .bulk-actions input {
    grid-column: 1 / -1;
  }
}

.inline-status {
  width: 96px;
  min-height: 34px;
  padding: 6px 28px 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff7f3;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}
tr:not(.sold) .inline-status {
  background: #f3f4f6;
  color: #333;
}
.stats-manual {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
}
.stats-manual input {
  width: 170px;
}
.stats-detail {
  margin-top: 18px;
}
.mini-title {
  margin-top: 8px;
}
.stats-remove-row {
  color: #b42318;
}

.choice-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.choice-field input {
  min-width: 0;
}
.choice-btn {
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: #202020;
  color: #fff;
  white-space: nowrap;
}
.choice-panel {
  position: fixed;
  z-index: 30;
  width: min(340px, calc(100vw - 28px));
  max-height: 320px;
  overflow: auto;
  padding: 14px;
  border-radius: 18px;
  background: rgba(18, 18, 18, 0.96);
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
}
.choice-title {
  color: #fff;
  font-weight: 800;
  margin-bottom: 10px;
}
.choice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.choice-options button {
  justify-content: flex-start;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  text-align: left;
  overflow-wrap: anywhere;
}
.choice-options span {
  color: rgba(255,255,255,0.72);
}

.bulk-choice-field {
  min-width: 0;
}
.bulk-actions .choice-field {
  align-self: stretch;
}
.bulk-actions .choice-field input {
  height: 44px;
}


.sales-panel {
  padding: 20px;
  min-height: calc(100vh - 110px);
}
.sales-grid {
  display: grid;
  gap: 18px;
}
.sales-block {
  display: grid;
  gap: 12px;
}
.sales-chart {
  min-height: 180px;
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  overflow-x: auto;
}
.sales-bar {
  width: 54px;
  min-width: 54px;
  display: grid;
  gap: 8px;
  justify-items: center;
  align-items: end;
}
.sales-bar span {
  width: 28px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--accent), #2f2f2f);
}
.sales-bar small {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.empty-chart {
  color: var(--muted);
  margin: auto;
}


.update-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 20, 20, 0.38);
  backdrop-filter: blur(8px);
}
.update-card {
  width: min(460px, 100%);
  border-radius: 24px;
  background: rgba(248, 248, 247, 0.98);
  box-shadow: 0 30px 100px rgba(0,0,0,0.28);
  padding: 28px;
  text-align: center;
}
.update-kicker {
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 8px;
}
.update-card h2 {
  font-size: 24px;
  margin-bottom: 16px;
}
.update-card ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: #4c4d4d;
  text-align: left;
}
.update-card li {
  position: relative;
  padding-left: 18px;
  line-height: 1.6;
}
.update-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.update-card button {
  min-width: 120px;
}


.inline-color-combo {
  width: 118px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f3f4f6;
  color: #333;
  font-weight: 700;
}
.inline-color-combo:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 101, 67, 0.12);
  background: #fff;
}


/* 2026-05-26 layout/login/inventory polish */
.logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  color: #222;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  font-weight: 700;
}

.layout.inventory-mode {
  grid-template-columns: minmax(0, 1fr);
}
.layout.inventory-mode .form-panel {
  display: none;
}
.inventory-full {
  min-height: calc(100vh - 120px);
}

.stats-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  margin: 12px 0 16px;
  border-radius: 999px;
  background: #f0f0f0;
}
.stats-tab {
  border: 0;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  color: #555;
  background: transparent;
  font-weight: 700;
}
.stats-tab.active {
  color: #111;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.stock-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 800;
  font-size: 12px;
}
.stock-normal { background: #e7f7ec; color: #18753b; }
.stock-watch { background: #fff1c7; color: #8a5a00; }
.stock-medium { background: #ffe2c4; color: #9a3f00; }
.stock-heavy { background: #ffd0d2; color: #a31821; }
.stock-closed { background: #e8e8e8; color: #666; }

tr.sold {
  background: #ffd8c9;
}
tr.sold:hover {
  background: #ffcdbb;
}
tr.returned {
  background: #e7e3ff;
  color: #353057;
}
tr.returned:hover {
  background: #ded8ff;
}
.sold .pill {
  background: #fff5ef;
  color: #c94d24;
}
.returned .pill {
  background: #f5f2ff;
  color: #5b48c7;
}

.bear-logo {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  filter: drop-shadow(0 9px 16px rgba(0,0,0,0.16));
}
.bear-logo .ear {
  width: 17px;
  height: 17px;
  top: 2px;
  background: linear-gradient(145deg, #ffc45d, #d98b22);
  border: 3px solid #fff4d8;
}
.bear-logo .ear.left { left: 5px; }
.bear-logo .ear.right { right: 5px; }
.bear-logo .face {
  left: 6px;
  top: 8px;
  width: 38px;
  height: 37px;
  border-radius: 44% 44% 48% 48%;
  background: linear-gradient(160deg, #ffd46f, #f1a83d);
  border: 3px solid #fff4d8;
}
.bear-logo .face::before,
.bear-logo .face::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,116,105,0.48);
}
.bear-logo .face::before { left: 5px; }
.bear-logo .face::after { right: 5px; }
.bear-logo i {
  top: 10px;
  width: 5px;
  height: 7px;
  background: #2b211c;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
}
.bear-logo i:first-child { left: 10px; }
.bear-logo i:nth-child(2) { right: 10px; }
.bear-logo b {
  left: 16px;
  top: 17px;
  width: 7px;
  height: 5px;
  border-radius: 50% 50% 45% 45%;
}
.bear-logo b::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 5px;
  height: 3px;
  border-bottom: 2px solid #342b22;
  border-radius: 0 0 8px 8px;
}
.bear-logo em {
  display: none;
}
.bear-logo .scarf {
  left: 12px;
  bottom: 2px;
  width: 26px;
  height: 8px;
  background: linear-gradient(90deg, #ef5e46, #c9352c);
  border-radius: 999px 999px 8px 8px;
}

.remember-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0;
}
.remember-row label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #555;
  font-weight: 700;
}
.remember-row input {
  width: 16px;
  height: 16px;
}


/* 2026-05-26 mobile and tablet polish */
@media (max-width: 1180px) {
  body {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .sidebar {
    position: sticky;
    top: 10px;
    z-index: 40;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
    padding: 12px;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .brand {
    flex: 0 0 auto;
    margin: 0 8px 0 0;
  }
  .brand strong {
    white-space: nowrap;
  }
  .side-note {
    display: none;
  }
  .nav {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  .topbar {
    height: auto;
    margin: 6px 0 14px;
    gap: 12px;
  }

  .layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .form-panel {
    max-height: none;
  }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 150px 190px;
    align-items: stretch;
  }
  .toolbar input,
  .toolbar select {
    max-width: none;
  }

  .bulk-actions {
    grid-column: 1 / -1;
    grid-template-columns: auto 150px minmax(220px, 1fr) auto auto;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 760px) {
  html, body {
    min-height: 100%;
  }
  body {
    display: block;
    padding: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: #e9eaea;
  }

  .sidebar {
    top: 6px;
    margin-bottom: 10px;
    gap: 8px;
    border-radius: 18px;
    padding: 10px;
  }
  .brand {
    display: flex;
    gap: 8px;
  }
  .brand .bear-logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .brand strong {
    font-size: 13px;
  }
  .nav {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14px;
  }

  .shell {
    min-width: 0;
  }
  .topbar {
    align-items: stretch;
    flex-direction: column;
    margin: 8px 2px 12px;
  }
  h1 {
    font-size: 28px;
    line-height: 1.12;
  }
  .topbar p {
    font-size: 14px;
    line-height: 1.5;
  }
  .top-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .logout-btn,
  .top-actions button,
  .top-actions .ghost-file {
    min-height: 44px;
    flex: 1 0 auto;
  }

  .panel {
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(43, 43, 43, 0.08);
  }
  .form-panel,
  .table-panel,
  .stats-panel,
  .sales-panel {
    padding: 12px;
  }
  .panel-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
  }
  .panel-title h2 {
    font-size: 17px;
  }
  .panel-title span {
    line-height: 1.5;
  }

  .form-grid {
    gap: 9px;
  }
  label {
    font-size: 13px;
  }
  input,
  select,
  textarea,
  button,
  .ghost-file {
    min-height: 46px;
    font-size: 16px;
  }
  textarea {
    min-height: 88px;
  }
  .choice-field {
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 7px;
  }
  .choice-btn {
    height: 46px;
    padding: 0 10px;
    border-radius: 13px;
    font-size: 15px;
  }
  .button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }
  .button-row .primary,
  .button-row .danger {
    grid-column: span 1;
  }

  .toolbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .toolbar input,
  .toolbar select {
    width: 100%;
  }
  .bulk-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
  }
  .bulk-actions span,
  .bulk-actions .choice-field {
    grid-column: 1 / -1;
  }
  .bulk-actions button {
    padding-left: 10px;
    padding-right: 10px;
  }

  .table-wrap {
    border-radius: 14px;
    margin-left: -2px;
    margin-right: -2px;
    box-shadow: inset -16px 0 18px -20px rgba(0,0,0,0.32);
  }
  table {
    min-width: 1080px;
  }
  th,
  td {
    padding: 12px 9px;
    font-size: 13px;
  }
  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
  }
  th:first-child {
    z-index: 3;
    background: #eeeeee;
  }
  .select-head,
  .select-cell {
    width: 44px;
  }
  .inline-status,
  .inline-color-combo {
    min-height: 38px;
    font-size: 14px;
  }

  .stats-tabs {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 16px;
    scrollbar-width: none;
  }
  .stats-tabs::-webkit-scrollbar { display: none; }
  .stats-tab {
    flex: 1 0 auto;
    min-height: 42px;
    padding: 0 14px;
  }
  .summary-strip {
    border-radius: 14px;
    padding: 12px;
    font-size: 14px;
  }
  .stats-controls,
  .stats-manual {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .stats-controls label,
  .stats-manual input {
    width: 100%;
  }

  .sales-chart {
    min-height: 150px;
    padding: 12px;
    border-radius: 14px;
  }
  .sales-bar {
    width: 46px;
    min-width: 46px;
  }

  .choice-panel {
    left: 10px !important;
    right: 10px;
    width: auto;
    max-height: 58vh;
    border-radius: 18px;
  }
  .choice-options {
    grid-template-columns: 1fr;
  }
  .choice-options button {
    min-height: 42px;
  }

  .update-modal {
    align-items: end;
    padding: 10px;
  }
  .update-card {
    border-radius: 22px;
    padding: 20px;
  }

  .login-page {
    padding: 14px;
  }
  .login-card {
    padding: 22px;
    border-radius: 22px;
  }
  .login-card h1 {
    font-size: 28px;
  }
  .remember-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .button-row {
    grid-template-columns: 1fr;
  }
  .bulk-actions {
    grid-template-columns: 1fr;
  }
  .brand strong {
    display: none;
  }
  h1 {
    font-size: 25px;
  }
}

/* 2026-05-26 minimal apple-style refresh */
:root {
  --bg: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --panel: #ffffff;
  --line: rgba(0, 0, 0, 0.08);
  --dark: #ffffff;
  --dark-soft: rgba(0, 0, 0, 0.06);
  --accent: #0071e3;
  --accent-soft: #eaf4ff;
  --return: #f1edff;
}

body {
  background: #f5f5f7;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

.sidebar {
  color: var(--ink);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.05);
}

.brand strong,
.nav {
  color: #1d1d1f;
}

.nav {
  font-weight: 700;
  color: #5f6065;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.nav:hover {
  background: rgba(0, 0, 0, 0.045);
  color: #1d1d1f;
}
.nav.active {
  background: #1d1d1f;
  color: #fff;
}

.side-note {
  color: #1d1d1f;
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.topbar {
  align-items: center;
}
h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: 0;
}
.topbar p {
  color: #6e6e73;
  font-size: 16px;
}

.panel {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.045);
}

.panel-title h2 {
  font-weight: 800;
  color: #1d1d1f;
}
.panel-title span {
  color: #86868b;
}

input,
select,
textarea {
  border-color: rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #0071e3;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.14);
}

button,
.ghost-file,
.logout-btn {
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none;
  font-weight: 800;
  transition: background 150ms ease, color 150ms ease;
}
button:hover,
.ghost-file:hover,
.logout-btn:hover {
  filter: none;
  background: #f5f5f7;
  box-shadow: none;
}
.primary {
  background: #0071e3;
  color: #fff;
  border-color: #0071e3;
}
.danger {
  color: #d70015;
}

.choice-btn {
  background: #1d1d1f;
  color: #fff;
  box-shadow: none;
}
.choice-panel {
  background: rgba(28, 28, 30, 0.92);
  backdrop-filter: blur(22px) saturate(1.3);
}

.table-wrap {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.045);
}
th {
  background: rgba(245, 245, 247, 0.96);
  color: #6e6e73;
  font-weight: 800;
}
td {
  color: #1d1d1f;
}
tbody tr:hover {
  background: rgba(0, 113, 227, 0.045);
}
tr.sold {
  background: #dff0ff;
}
tr.sold:hover {
  background: #d3eaff;
}
tr.returned {
  background: #efe9ff;
  color: #372f63;
}
tr.returned:hover {
  background: #e7deff;
}

.pill,
.stock-pill,
.inline-status,
.inline-color-combo {
  border-radius: 999px;
}
.stock-normal { background: #e7f8ee; color: #0a7f3f; }
.stock-watch { background: #fff4ce; color: #886300; }
.stock-medium { background: #ffe8cc; color: #a04a00; }
.stock-heavy { background: #ffe0e3; color: #b00020; }
.stock-closed { background: #ededf0; color: #6e6e73; }

.stats-tabs {
  background: rgba(0, 0, 0, 0.055);
}
.stats-tab {
  color: #6e6e73;
}
.stats-tab.active {
  background: #fff;
  color: #1d1d1f;
}
.summary-strip,
.stats-manual,
.bulk-actions,
.sales-chart {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.045);
}

.login-page {
  background: #f5f5f7;
}
.login-card,
.update-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}
.login-card h1,
.update-card h2 {
  color: #1d1d1f;
  font-weight: 850;
}
.login-card p,
.login-hint {
  color: #6e6e73;
}

@media (max-width: 760px) {
  body {
    background: #f5f5f7;
  }
  .sidebar {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  }
  .panel {
    border-radius: 22px;
  }
  h1 {
    font-size: 32px;
  }
}


/* 2026-05-26 clean brand text */
.brand {
  justify-content: center;
}
.topbar {
  min-height: 62px;
}


/* 2026-05-26 free browser voice input */
.voice-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: grid;
  justify-items: end;
  gap: 10px;
}
.voice-toggle {
  background: #1d1d1f;
  color: #fff;
}
.voice-box {
  width: min(360px, calc(100vw - 28px));
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 48px rgba(0,0,0,0.14);
}
.voice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.voice-head strong {
  font-size: 16px;
}
.voice-head button {
  width: 34px;
  height: 34px;
  padding: 0;
}
.voice-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
#voiceStatus {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.voice-preview {
  margin-top: 10px;
  min-height: 52px;
  padding: 10px;
  border-radius: 14px;
  background: #f5f5f7;
  color: #4c4c50;
  line-height: 1.5;
}
.voice-listening .voice-toggle {
  background: #d70015;
}
.voice-listening .voice-preview {
  box-shadow: inset 0 0 0 2px rgba(215,0,21,0.18);
}

@media (max-width: 760px) {
  .voice-panel {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    justify-items: stretch;
  }
  .voice-toggle,
  .voice-box {
    width: 100%;
  }
}


.row-actions {
  text-align: right;
  white-space: nowrap;
}

.row-delete {
  border: 0;
  border-radius: 999px;
  background: #fff1f2;
  color: #c1121f;
  font-weight: 800;
  padding: 8px 14px;
  cursor: pointer;
}

.row-delete:hover {
  background: #ffe4e6;
}