:root {
  --navy: #4c3476;
  --text: #262039;
  --muted: #665e75;
  --line: #e7e0ee;
  --soft: #f0e9fa;
  --sky: #a68cc9;
  --paper: #f8f6fb;
  --shadow: 0 3px 12px #33245408;
}
body { background: var(--paper); }
.header { height: 62px; padding-inline: max(16px, calc((100vw - 1040px)/2)); }
.brand-icon { border-radius: 11px; background: #4c3476; }
.brand small { font-size: 11px; }
.icon-btn { min-width: 44px; min-height: 44px; padding: 4px; }
main { max-width: 1072px; padding-top: 24px; }
h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.08; }
.home-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 4vw, 34px);
  border-radius: 22px;
  background: linear-gradient(118deg, #352451, #5a407e);
  color: white;
}
.home-intro .eyebrow, .home-intro .sub { color: #f0e3fb; }
.home-intro .sub { margin-top: 8px; }
.home-intro .primary { background: #fff; border-color: #fff; color: #3e285e; }
.btn { min-height: 44px; border-radius: 10px; }
.kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { border-radius: 14px; }
.kpi strong { white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.shortcut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shortcut { min-height: 54px; flex-direction: row; align-items: center; justify-content: flex-start; padding: 10px 12px; border-radius: 12px; }
.shortcut .emoji { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--soft); font-size: 19px; }
.cardtile .photo { background: #f2edf8; }
.cardtile .actions button { min-height: 40px; }
.bottomnav button { flex: 1; min-width: 0; padding: 4px 2px; gap: 4px; }
.bottomnav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linejoin: round; stroke-linecap: round; }
.bottomnav button small { font-size: 11px; }
.cloud-bar { background: #f0ebf7; color: var(--navy); padding: 4px 12px; font-size: 11px; }
.overlay { background: #21173180; }
.modal { padding: 0 20px calc(20px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.modal-head { position: sticky; top: 0; z-index: 2; background: white; padding-block: 10px; border-bottom: 1px solid var(--line); }
.field label { font-size: 12px; }
.editor-label { margin-bottom: 10px; }
.editor-extra { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.editor-extra summary { cursor: pointer; font-weight: 650; color: var(--navy); }
.editor-extra .fields { margin-top: 12px; }
.scan-panel { background: #f6f1fc; border-color: #e7dcf5; padding: 14px; margin-bottom: 18px; }
.scan-panel > .mt { margin-top: 9px; }
.modal .scan-panel .actions { margin-top: 11px; }
.scan-panel .notice { background: #eee6f8; color: #4d386a; padding: 9px 10px; font-size: 12px; }
.scan-panel summary { color: var(--navy); padding-block: 5px; }
.scan-match, .scan-language select { border-color: #dacbe9; }
.scan-match.chosen { border-color: var(--navy); background: var(--soft); }
:where(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid #8250bd; outline-offset: 2px; }
@media (max-width: 600px) {
  main { padding-inline: 14px; }
  .home-intro { align-items: start; flex-direction: column; }
  .shortcut-grid { grid-template-columns: 1fr; gap: 6px; }
  .shortcut { min-height: 46px; padding-block: 6px; }
  .kpi strong { font-size: clamp(14px, 4.1vw, 18px); }
  .modal { padding-inline: 14px; }
  #cardForm .fields > .field:not(.wide) { grid-column: span 1; }
  input:not([type="checkbox"]), select, textarea { font-size: 16px; }
}

.currency-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.currency-bar button { min-height: 40px; }
.cardtile .price { overflow-wrap: anywhere; }
.price-note { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }
.market-suggestion { padding: 12px; background: var(--soft); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.market-suggestion p { flex-basis: 100%; }
.market-suggestion select { min-width: 0; max-width: 100%; }

.scan-attack { display: block; color: var(--muted); margin-top: 4px; }
.scan-frame { position: relative; width: fit-content; max-width: 100%; margin: 10px auto 0; touch-action: none; user-select: none; cursor: crosshair; }
.scan-frame img { display: block; max-width: 100%; max-height: 42dvh; width: auto; height: auto; border-radius: 8px; pointer-events: none; }
.scan-frame span { position: absolute; border: 2px solid white; outline: 2px solid #5b3885; background: #5b388522; pointer-events: none; }