body{
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 220px),
    var(--bg);
}

.topbar{
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

.preset-btn.active,
.btn-secondary.active,
#books-trash-toggle.active{
  background:var(--accent);
  color:var(--surface);
  border-color:var(--accent);
}

.view > * + *{
  margin-top:var(--space-4);
}

.settings-btn,
.panel,
.modal-box,
.table-wrap,
.box-setting,
.sale-box,
.source-box,
.result-card,
.trend-card,
.export-col,
.box-card,
.pick-batch-card{
  border-radius:var(--radius);
}

.panel,
.table-wrap,
.box-setting,
.sale-box,
.source-box,
.result-card,
.pick-batch-card,
.export-list,
.pick-list{
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

.panel{
  padding:22px;
}

.tabs{
  position:sticky;
  top:0;
  z-index:20;
  padding:12px 28px 0;
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

.tab{
  border:1px solid var(--border);
  border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--surface-2);
  color:var(--text-muted);
}

.tab.active{
  background:var(--bg);
  border-color:var(--border-strong);
  color:var(--accent-dark);
}

.btn-danger,
.settings-btn,
.preset-btn,
.export-form button,
.scan-input-row button,
.box-setting-edit button,
.row-actions button,
.box-btn,
.sale-option-btn,
.export-change-btn,
.cart-copy-btn,
.pick-filter-btn,
.rescan-toggle-btn,
.box-conflict-btn{
  border-radius:var(--radius-sm);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease;
}

.btn-danger{
  background:var(--red-bg);
  color:var(--red-dark);
  border:2px solid var(--red);
  font-weight:700;
}

.btn-danger:hover{
  background:var(--red);
  color:var(--surface);
}

.modal-actions .btn-danger{
  margin-left:var(--space-4);
}

#confirm-message{
  padding:var(--space-3);
  border-left:5px solid var(--red);
  background:var(--red-bg);
  color:var(--text);
}

.expert-details{
  margin-top:var(--space-4);
  padding:var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
}

.expert-details summary{
  min-height:48px;
  display:flex;
  align-items:center;
  cursor:pointer;
  color:var(--text-muted);
  font-weight:700;
}

.expert-details.compact{
  margin:var(--space-2) 0;
  padding:0 var(--space-3);
}

input,
select,
.time-select{
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
}

.scan-status{
  border-radius:var(--radius-sm);
  padding:10px 12px;
}

.scan-status.busy{
  background:var(--accent-bg);
  color:var(--accent-dark);
  border:1px solid var(--accent);
}

.scan-status.error{
  background:var(--red-bg);
  color:var(--red);
  border:1px solid var(--red);
}

.rescan-table th{
  background:var(--surface-2);
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}

.history-list-row:nth-child(even),
.export-item:nth-child(even){
  background:var(--surface-2);
}

.pill,
.sale-pill{
  border-radius:999px;
}

.export-warning{
  border:1px solid var(--amber);
  box-shadow:var(--shadow-sm);
}

.rescan-summary{
  gap:12px;
}

.rescan-summary .stat{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
}

.export-results,
.trend-cards{
  gap:18px;
}

.export-col-actions button,
.pick-detail-actions button{
  min-height:42px;
}

@media (max-width:700px){
  .topbar,
  .tabs,
  .view{
    padding-left:16px;
    padding-right:16px;
  }
  .tab{
    padding:11px 14px;
  }
  .panel{
    padding:18px;
  }
}