/* Mobile-first styles. Colours come from the :root variables. */
:root {
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);background:var(--bg);color-scheme:light;
  --bg:#f3f6fb;--ink:#243247;--accent:#335f9c;--line:#e1e7ef;
  --border:#d9e1ed;--muted:#68788d;--head:#23354d;--stripe:#f9fbfe;
  --good:#217441;--warn:#a65d00;
}
* { box-sizing:border-box }
body { margin:0;font-size:16px;line-height:1.6 }
a { color:var(--accent) }
main { max-width:1160px;margin:40px auto;padding:0 24px 40px;min-width:0 }
header { display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px;margin:0 0 24px }
.eyebrow { font-size:12px;letter-spacing:.06em;color:var(--accent);margin:0 0 7px }
h1 { font-size:32px;letter-spacing:-1px;margin:0 }
h2 { font-size:19px;margin:0 0 12px }
p { line-height:1.65 }
button,input,select { font:inherit }
button { cursor:pointer;border:1px solid var(--line);border-radius:12px;background:white;padding:11px 14px;color:inherit;min-height:44px }
button:disabled { opacity:.5;cursor:wait }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #4273b5;outline-offset:2px }
.primary { background:var(--accent);color:#fff;border-color:var(--accent);font-weight:650 }
.quiet { font-size:12px;background:transparent }
.panel { background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px }
.overview { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0 }
.overview div { background:white;border:1px solid var(--line);border-radius:12px;padding:16px 22px }
.overview div:last-child strong { color:var(--warn) }
.overview span { font-size:12px;color:var(--muted) }
.overview strong { display:block;font-size:25px;margin-top:0;font-variant-numeric:tabular-nums }
nav { display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:14px }
nav button { flex:1;background:transparent;border-color:transparent }
nav .selected { background:#e8eef8;color:var(--accent);font-weight:650 }
.toolbar { display:flex;justify-content:space-between;gap:12px;margin:18px 0 10px }
.toolbar #brand { min-width:0;flex:1;margin:0;background:white }.toolbar #refresh{flex-shrink:0}
.muted,footer { font-size:12px;color:var(--muted) }
footer { text-align:center;line-height:1.8;margin-top:30px }
#notice:empty { display:none }
#notice { border-radius:12px;padding:10px 14px;background:#fff0da;font-size:13px }
.pill { background:#eef2f7;border-radius:30px;padding:3px 8px;font-size:11px;white-space:nowrap }
.pill.expired { background:#fbe1df;color:#9a3830 }
.pill.soon { background:#fff0cc;color:#886006 }
.empty { padding:42px 16px;text-align:center;background:#fff;border-radius:18px;color:var(--muted);font-size:14px }
label { display:block;font-size:13px;font-weight:550;margin:14px 0 }
input,select { display:block;width:100%;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:10px;background:white }
form .primary { width:100%;margin-top:10px }
dialog { border:none;border-radius:22px;padding:22px;width:min(94vw,600px);max-height:90dvh;overflow:auto;color:inherit;background:#fff }
dialog::backdrop { background:#23354d88 }
.dialog-head { display:flex;justify-content:space-between;align-items:start;gap:12px;position:sticky;top:-22px;background:#fff;padding:10px 0;z-index:1 }
.dialog-head h2 { margin-top:10px }
.history { padding:12px 0;border-top:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px }
.history small { color:var(--muted) }
.raw { white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);padding:12px;border-radius:10px;font-size:12px;max-height:200px;overflow:auto }
[hidden] { display:none!important }
#login { max-width:560px;margin:28px auto }
.header-actions { display:flex;align-items:center;gap:12px }
header p { margin:4px 0 }
.tag { display:inline-block;background:#e8eef8;color:#33588b;border-radius:20px;padding:3px 12px;font-size:13px;white-space:nowrap }
@media(max-width:600px) {
  main { margin:24px auto;padding:0 16px 32px;max-width:100% }
  h1 { font-size:26px }
  header { align-items:start;gap:12px }
  .header-actions { flex-direction:column }
  .overview { gap:10px }
  .overview div { padding:12px 16px }
  .overview strong { font-size:22px }
  .panel { padding:20px }
}
.barcode-panel { background:#fff;margin:16px 0 12px;padding:12px 0;min-height:90px }
.barcode-preview { display:block;width:100%;height:auto;max-height:45dvh;object-fit:contain }
.original-link { display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;color:var(--accent);text-decoration:none;margin-bottom:12px }
.usage-panel { margin:8px 0 20px }
.usage-panel>button { width:100% }
.usage-panel .muted { margin:4px 0 12px }
#coupons { display:block;overflow-x:auto;border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 28px #20355408 }
#coupons:empty { display:none }
.coupon-table { width:100%;border-collapse:collapse;table-layout:fixed;background:white;font-size:12px }
.coupon-table th { background:var(--head);text-align:left;font-size:11px;font-weight:500;padding:12px 7px;color:white }
.coupon-table th:first-child { width:38% }
.coupon-table th:nth-child(2) { width:21% }
.coupon-table th:nth-child(3) { width:23% }
.coupon-table th:last-child { width:18% }
.coupon-table td { padding:12px 7px;vertical-align:middle;border-bottom:1px solid var(--line);overflow-wrap:anywhere }
.coupon-table tr:last-child td { border-bottom:none }
.coupon-table tbody tr:nth-child(even) { background:var(--stripe) }
.coupon-name { display:block;width:100%;min-height:44px;text-align:left;padding:0;border:0;background:none;color:var(--accent);font-size:13px;font-weight:650;line-height:1.5 }
.row-brand { display:block;margin-top:3px;font-size:10px }
.row-balance { font-weight:650;white-space:nowrap;font-size:11px }
.row-date { display:block;font-size:10px;margin-bottom:6px;white-space:nowrap }
.row-action { width:100%;padding:7px 3px;font-size:11px;word-break:keep-all;color:var(--accent);border-color:var(--border) }
.coupon-table .pill { font-size:10px;padding:3px 5px }
.sr-only { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap }
@media(min-width:600px) {
  .coupon-table { font-size:14px }
  .coupon-table td,.coupon-table th { padding:18px 16px }
  .coupon-table th { font-size:14px }
  .coupon-name { font-size:16px }
  .row-date,.row-balance,.row-action { font-size:12px }
}

.bulk-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.bulk-controls label{display:flex;align-items:center;gap:8px;margin:0}.bulk-controls p{flex-basis:100%;margin:0}
.bulk-controls input[type=checkbox],.coupon-select{display:inline-block;width:22px;height:22px;min-width:22px;margin:0 8px 0 0;vertical-align:middle;accent-color:var(--accent)}
.coupon-table .inbox-balance{width:100%;min-width:0;margin:0;padding:8px 3px;font-size:12px}
#bulkResults{padding:16px;margin-bottom:16px;background:white;border:1px solid var(--line);border-radius:12px}
#bulkResults h2{font-size:16px}#bulkResults ul{list-style:none;margin:0;padding:0}
.bulk-result{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}
.bulk-result strong,.bulk-result span{flex-basis:100%;overflow-wrap:anywhere}.bulk-result.saved span{color:var(--accent)}
.bulk-result.conflict span,.bulk-result.unknown span{color:#886006}.bulk-result.failed span{color:#9a3830}
.bulk-result .bulk-status{font-size:11px;font-weight:700}
.app-switcher{display:flex;gap:0;margin:22px 0;padding:4px;background:#e8eef5;border:1px solid #d9e1ed;border-radius:12px}
.app-switcher a{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;min-height:44px;padding:9px 12px;border-radius:9px;color:#596b82;font-weight:650;text-decoration:none;white-space:nowrap}
.app-switcher a[aria-current=page]{background:white;color:#335f9c;box-shadow:0 2px 8px #20355412}
.app-switcher a:hover{color:#335f9c}
.app-switcher a:focus-visible{outline:3px solid #4273b5;outline-offset:2px}
.app-switcher small{font-size:10px;color:#738298}
@media(max-width:360px){.app-switcher a{font-size:14px;padding:8px}.app-switcher small{font-size:9px}}