:root{
  --bg-ink:#0d1117;
  --bg-deep:#121826;
  --bg-panel:#f4ead6;
  --bg-panel-alt:#fbf4e7;
  --border:#8c6b3d;
  --border-soft:#c8b08a;
  --gold:#c8a35a;
  --gold-deep:#9b7428;
  --text:#241a10;
  --text-soft:#6d5a43;
  --accent:#7a1f1f;
  --accent-soft:#c75b47;
  --shadow:0 18px 44px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
body{
  margin:0;
  padding:20px;
  color:var(--text);
  font-family:"Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  background:
    radial-gradient(circle at top, rgba(200,163,90,.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(122,31,31,.12), transparent 22%),
    linear-gradient(180deg, #1a2130 0%, #0e1118 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.025) 50%, rgba(255,255,255,.025) 75%, transparent 75%, transparent);
  background-size:16px 16px;
  opacity:.12;
}

.is-importing .app{
  filter:blur(2px) saturate(.85);
  opacity:.28;
  pointer-events:none;
  user-select:none;
}

.app{
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:22px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(247,235,213,.94)),
    var(--bg-panel);
  border:1px solid rgba(140,107,61,.45);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.app::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:14px;
  border:1px solid rgba(140,107,61,.2);
  pointer-events:none;
}

h1,h2,h3{
  margin-top:0;
  font-family:Georgia, "Times New Roman", serif;
  color:#2a1d10;
  letter-spacing:.02em;
}

h1{
  margin-bottom:18px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:30px;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

h2{
  margin-bottom:10px;
  font-size:20px;
}

.search{position:relative}
#search,#importText{
  width:100%;
  display:block;
  padding:11px 13px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,241,229,.98));
  color:var(--text);
  font:inherit;
  font-size:16px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}

#search{
  letter-spacing:.02em;
}

#importText{
  min-height:150px;
  resize:vertical;
  line-height:1.45;
}

#search::placeholder,
#importText::placeholder{
  color:#8f7d64;
}

.suggestions{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:30;
  display:none;
  max-height:360px;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid rgba(140,107,61,.42);
  border-radius:12px;
  background:rgba(252,247,236,.98);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
}

.suggestions-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid rgba(140,107,61,.16);
  background:linear-gradient(180deg, rgba(248,239,221,.98), rgba(239,223,191,.95));
  font-size:12px;
  color:var(--text-soft);
}

.suggestions-footer-count{
  font-weight:700;
  letter-spacing:.03em;
}

.suggestions-footer-hint{
  color:var(--text-soft);
  font-style:italic;
}

.sugg-footer-link{
  padding:0;
  border:0;
  background:transparent;
  color:var(--accent);
  box-shadow:none;
  font:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

.sugg-footer-link:hover{
  background:transparent;
  color:var(--accent-soft);
}

.suggestions.is-visible{display:block}

.sugg{
  width:100%;
  display:flex;
  gap:10px;
  align-items:center;
  padding:9px 11px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.sugg + .sugg{border-top:1px solid rgba(140,107,61,.12)}
.sugg:hover{background:rgba(200,163,90,.12)}
.sugg.is-loading{cursor:default;opacity:.98}
.sugg-more{
  border-top:1px solid rgba(140,107,61,.14);
  background:linear-gradient(180deg, rgba(255,248,235,.98), rgba(242,228,198,.95));
}
.sugg-more:hover{background:linear-gradient(180deg, rgba(255,243,220,.98), rgba(236,210,160,.92))}
.sugg-thumb-wrap{width:36px;flex:0 0 36px}
.sugg-thumb{
  display:block;
  width:36px;
  height:50px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(140,107,61,.28);
  background:#f6efe2;
}
.sugg-thumb-placeholder{
  display:block;
  background:linear-gradient(135deg, #e8dac2, #f6efe2);
}
.sugg-spinner{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:2px solid rgba(122,31,31,.18);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.sugg-copy{display:flex;flex-direction:column;min-width:0}
.sugg-name{
  font-weight:700;
  color:#25180d;
}
.sugg-subtitle{
  font-size:12px;
  color:var(--text-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bulk-import{
  margin-top:18px;
  padding:15px;
  border-radius:14px;
  border:1px solid rgba(140,107,61,.35);
  background:linear-gradient(180deg, rgba(255,248,235,.98), rgba(243,229,202,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.bulk-import h2{margin:0 0 8px}
.bulk-import-copy{margin:0 0 10px;color:var(--text-soft)}
.bulk-import-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}

.import-status{
  font-size:14px;
  color:var(--text-soft);
}
.import-status.is-loading{color:var(--accent)}
.import-status.is-success{color:#1d6f3c}
.import-status.is-warning{color:#9a6700}
.import-status.is-error{color:#9b2c2c}
.import-results{
  margin-top:10px;
}
.import-results[hidden]{display:none}
.import-results-title{
  margin-bottom:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#5d4326;
}
.import-results-note{
  margin-bottom:8px;
  font-size:13px;
  color:var(--text-soft);
  line-height:1.35;
}
.import-results-list{
  margin:0;
  padding-left:18px;
  color:#7c2a1d;
}
.import-results-list li{margin:4px 0}
.import-results-list li span{
  color:var(--text-soft);
  margin-left:6px;
}

.import-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,18,.56);
  backdrop-filter:blur(5px);
}
.import-overlay[hidden]{display:none}
.import-overlay-card{
  min-width:300px;
  max-width:92vw;
  padding:26px 24px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,252,245,.98), rgba(244,233,210,.98));
  border:1px solid rgba(140,107,61,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.38);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.import-overlay-spinner{
  width:64px;
  height:64px;
  border-radius:50%;
  border:6px solid rgba(140,107,61,.18);
  border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
.import-overlay-progress{
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  color:#2a1d10;
}

#selected{
  margin-top:12px;
  overflow:visible;
}
.selection-summary{
  margin-bottom:8px;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid rgba(140,107,61,.28);
  background:linear-gradient(180deg, rgba(255,248,235,.95), rgba(242,228,198,.92));
  font-size:14px;
  color:#4a3724;
}
.token-row{
  position:relative;
  display:flex;
  gap:12px;
  align-items:center;
  margin:10px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(140,107,61,.34);
  background:
    linear-gradient(180deg, rgba(255,251,241,.98), rgba(244,230,203,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 18px rgba(0,0,0,.08);
  overflow:visible;
}
.token-row::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(200,163,90,.18), transparent 18%, transparent 82%, rgba(122,31,31,.08));
  opacity:.65;
}
.token-preview-wrap{
  position:relative;
  width:48px;
  flex:0 0 48px;
  overflow:visible;
}
.token-preview{
  display:block;
  width:48px;
  height:67px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(140,107,61,.34);
  background:#f7efe1;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.token-preview-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#e8dac2,#f7efe1);
}
.token-preview-loading{
  position:relative;
  overflow:hidden;
}
.token-preview-spinner{
  width:18px;
  height:18px;
  border:2px solid rgba(0,0,0,.14);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.token-hover-preview{
  position:absolute;
  top:50%;
  left:60px;
  transform:translateY(-50%) scale(.98);
  width:240px;
  padding:8px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,241,228,.98));
  border:1px solid rgba(140,107,61,.25);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
  z-index:40;
}
.token-hover-preview img{
  display:block;
  width:100%;
  aspect-ratio:63/88;
  height:auto;
  object-fit:contain;
  border-radius:8px;
}
.token-preview-wrap:hover .token-hover-preview{
  opacity:1;
  transform:translateY(-50%) scale(1);
}
.token-name-wrap{
  flex:1;
  min-width:0;
  padding-left:2px;
}
.token-name{
  font-weight:700;
  color:#281a0e;
  font-size:16px;
  letter-spacing:.01em;
}
.token-subtitle{
  margin-top:2px;
  font-size:12px;
  color:#6e5a44;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.token-meta{
  margin-top:2px;
  font-size:12px;
  color:#8b6e49;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.qty{
  width:72px;
  margin-left:auto;
  text-align:right;
  border:1px solid rgba(140,107,61,.35);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,234,214,.96));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}
.qty:focus{
  outline:2px solid rgba(122,31,31,.18);
  outline-offset:1px;
}

.controls{
  margin-top:12px;
  display:flex;
  gap:8px;
}
button{
  padding:8px 12px;
  border:1px solid rgba(140,107,61,.55);
  border-radius:8px;
  background:linear-gradient(180deg, #f9efe0, #e6cfaa);
  color:#2a1d10;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 2px 4px rgba(0,0,0,.08);
}
button:hover{
  background:linear-gradient(180deg, #f7e7c9, #dfc08c);
}
button:disabled{
  opacity:.6;
  cursor:wait;
}
.token-row .remove{
  background:linear-gradient(180deg, #f3ddd4, #dcb29f);
  border-color:rgba(122,31,31,.35);
  color:#4e1b16;
}
.token-row .remove:hover{
  background:linear-gradient(180deg, #efd1c4, #cf9f8a);
}

.instructions{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(140,107,61,.28);
  background:linear-gradient(180deg, rgba(255,250,242,.96), rgba(244,234,214,.92));
}
.instructions h3{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.instructions ol{
  margin:0;
  padding-left:20px;
}
.instructions li{margin:4px 0}

.coffee-cta{
  display:block;
  margin-top:12px;
  padding:13px 16px;
  border-radius:14px;
  border:1px solid rgba(122,31,31,.28);
  background:linear-gradient(180deg, #8a1f1f, #5d1212);
  color:#fff7ea;
  text-align:center;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.coffee-cta:hover{
  color:#fff;
  background:linear-gradient(180deg, #a02a2a, #711717);
}

.coffee-cta:focus{
  outline:2px solid rgba(200,163,90,.65);
  outline-offset:2px;
}

code{
  background:rgba(200,163,90,.14);
  padding:1px 4px;
  border-radius:4px;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}