.page-shell { width: min(1500px, calc(100% - 32px)); margin: 8px auto 40px; }

/* Typography baseline aligned with merch page */
:root {
  --wallet-font-display: "Rye", "Glorious", serif; /* matches merch-style display headers */
  --wallet-font-title: "Almendra", serif; /* readable card titles like merch content */
  --wallet-font-body: "Almendra", serif; /* regular page text */
  --wallet-font-ui: Arial, Helvetica, sans-serif; /* compact utility labels/tables */
}

.expedition-wallet-page,
.expedition-wallet-page .paper-input,
.expedition-wallet-page .links-output,
.expedition-wallet-page .exp-btn,
.expedition-wallet-page .icon-btn {
  font-family: var(--wallet-font-body);
}
.viewer-header { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-bottom: 20px; align-items: stretch; }
.viewer-title-wrap, .filters-panel, .nft-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)), var(--surface-paper);
  border: 1px solid var(--surface-line); border-radius: 18px; box-shadow: var(--surface-shadow); backdrop-filter: blur(2px);
}
.viewer-title-wrap { padding: 22px 24px; }
.viewer-title {
  margin: 0; font-family: var(--wallet-font-title); font-weight: bold;
  font-size: clamp(30px, 3.6vw, 35px); line-height: 1.02; letter-spacing: .02em;
  text-transform: uppercase;
}
.viewer-subtitle { margin: 14px 0 0; font-size: 16px; line-height: 1.4; color: var(--ink-soft); max-width: 780px; }
.header-controls { padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.wallet-entry-row { display: grid; gap: 10px; }
.field-label {
  font-family: var(--wallet-font-ui);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
.wallet-input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.saved-wallets { display:flex; flex-wrap:wrap; gap:8px; }
.wallet-chip {
  display:inline-flex; align-items:center; gap:8px; max-width:100%; border:1px solid var(--surface-line);
  border-radius:999px; background:rgba(255,252,245,.74); padding:7px 10px 7px 12px;
}
.wallet-chip, .wallet-chip * { cursor:pointer; }
.wallet-chip-label {
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family: var(--wallet-font-ui);
  font-size: 13px;
}
.wallet-chip-remove { border:0; background:transparent; color:#6a4131; font-size:18px; line-height:1; }
.stats-row { display:none !important; }
.stat-pill {
  min-width:108px; padding:10px 14px; border-radius:14px; border:1px solid var(--surface-line);
  background:rgba(255,251,243,.8); display:flex; flex-direction:column; gap:2px;
}
.stat-pill-button { cursor:pointer; text-align:left; }
.stat-pill-button:hover, .stat-pill-button:focus-visible { border-color: rgba(84,56,34,.45); }
.stat-label { color: var(--ink-soft); }

.wallet-main {
  padding: 20px;
  border: 1px solid #00000035;
  border-radius: 10px;
  background-color: #feffdd20;
  height: 100%;
}
.wallet-main-bg,
.wallet-left-bottom-bg {
  position: relative;
  color: #000;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}
.wallet-main-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/20.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.03;
  z-index: -1;
  pointer-events: none;
}
.wallet-left-bottom {
  padding: 10px;
  border: 1px solid #00000035;
  border-radius: 15px;
  background-color: #feffdd30;
}
.wallet-left-bottom-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  background-image: url('../img/27.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: -1;
  transform: translate(-30px, -75px);
  pointer-events: none;
}

.viewer-layout { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:20px; align-items:start; }
.viewer-layout.filters-hidden { grid-template-columns:minmax(0,1fr); }
.filters-panel { position:relative; min-width:0; overflow:hidden; }
.filters-panel.is-hidden,
.filters-panel[hidden]{display:none !important; pointer-events:none !important;}
.panel-toggle-btn { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:999px; border:1px solid rgba(49,33,18,.18); background:rgba(255,250,241,.88); color:var(--ink-main); cursor:pointer; z-index:3; }
.panel-toggle-btn:hover { border-color: rgba(59,42,27,.38); }
.filters-panel, .nft-panel { padding:18px; }
.nft-panel{min-width:0;}
.panel-section { min-width: 0; }
.panel-section + .panel-section { margin-top:18px; }
.section-head, .panel-topbar, .modal-header-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-topbar{position:relative;z-index:2;}
.panel-topbar-left { display:flex; align-items:flex-start; gap:10px; min-width:0; }
.section-head-collections { align-items:flex-start; }
.icon-actions { display:flex; gap:6px; }
.status-filter-list { display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip {
  border:1px solid var(--surface-line); background:rgba(255,251,243,.75); color:var(--ink-soft); cursor:pointer;
  border-radius:999px; padding:6px 12px; font-size:13px; line-height:1.2;
}
.filter-chip.is-active { background:var(--accent-main); color:#fff8ee; border-color:var(--accent-main); }
.collections-table-wrap { display:block; margin-top:10px; overflow-y:auto !important; overflow-x:hidden !important; min-height:0; max-height:min(60vh,calc(100vh - 280px)); padding-right:2px; overscroll-behavior: contain; }
.collections-table { width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed; }
.collections-table,
.nft-meta-row,
.nft-price,
.filter-chip,
.canvas-tool-btn {
  font-family: var(--wallet-font-ui);
}
.collections-table th:first-child, .collections-table td:first-child { width:auto; }
.collections-table th:nth-child(2), .collections-table td:nth-child(2) { width:82px; }
.collections-table th:nth-child(3), .collections-table td:nth-child(3) { width:72px; }
.collections-table th, .collections-table td { padding:10px 8px; border-bottom:1px solid rgba(66,44,24,.10); text-align:left; vertical-align:middle; min-width: 0; }
.collections-table th { text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }
.collections-table tbody tr { transition: background .12s ease, box-shadow .12s ease; cursor:pointer; }
.collections-table tbody tr:hover { background: rgba(255,255,255,.18); }
.collections-table tbody tr.is-selected { background: rgba(81,53,31,.12); }
.collection-main { display:flex; align-items:center; gap:10px; min-width:0; max-width:100%; overflow:hidden; }
.collection-main img, .collection-thumb-placeholder {
  width:30px; height:30px; border-radius:8px; object-fit:cover; background:rgba(80,54,35,.08); flex:0 0 auto;
}
.collection-name-text { display:-webkit-box; min-width:0; max-width:100%; overflow:hidden; white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.2; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.panel-topbar h2, .panel-section h2, .modal-header-row h2 {
  margin:0; font-family:var(--wallet-font-title); font-size:20px; font-weight:bold; letter-spacing:.02em; text-transform: uppercase;
}
.inline-actions { display:flex; gap:10px; align-items: center; flex-wrap: wrap; }
#showFiltersBtn.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
#showFiltersBtn {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
}
.show-filters-anchor{display:flex;}

.nft-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; margin-top:14px; }
.nft-card {
  position:relative; border:1px solid rgba(66,44,24,.16); border-radius:18px; background:rgba(255,250,241,.72);
  overflow:hidden; box-shadow:0 8px 24px rgba(40,24,12,.06); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.nft-card:hover { transform: translateY(-2px); border-color: rgba(90,59,34,.35); }
.nft-card.is-checked {
  border-color: var(--accent-strong);
  border-width: 2px;
  background: rgba(255,248,236,.92);
  box-shadow: 0 0 0 4px rgba(107,68,41,.20), inset 0 0 0 1px rgba(255,255,255,.55), 0 12px 30px rgba(40,24,12,.14);
}
.nft-card.is-checked .nft-check-indicator { opacity:1; transform:none; }
.nft-card.is-checked::after {
  content:'';
  position:absolute;
  inset:8px;
  border-radius:12px;
  border:2px solid rgba(107,68,41,.48);
  pointer-events:none;
}
.nft-check-indicator {
  position:absolute; top:10px; left:10px; z-index:3; min-width:30px; height:30px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; background:var(--accent-main); color:#fff9ef; font-size:14px;
  opacity:0; transform: scale(.9); transition: opacity .15s ease, transform .15s ease;
}
.nft-market-link {
  position:absolute; right:10px; bottom:10px; z-index:3; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(255,247,235,.92); border:1px solid rgba(59,42,27,.18); text-decoration:none; cursor:pointer;
}
.nft-market-link:hover { border-color: rgba(59,42,27,.42); }
.nft-media-wrap { aspect-ratio:1/1; background:rgba(50,30,16,.06); overflow:hidden; }
.nft-media-wrap img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.nft-body { padding:12px 42px 12px 12px; }
.nft-name {
  font-family:var(--wallet-font-title); font-size:24px; line-height:1.1; font-weight:700; margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nft-meta-row { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--ink-soft); font-size:14px; }
.nft-id-wrap { display:flex; align-items:center; gap:8px; min-width:0; }
.nft-id { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nft-price { margin-top:8px; font-size:14px; color:var(--ink-main); min-height:20px; }
.modal { position:fixed; inset:0; z-index:80; }
.modal-backdrop { position:absolute; inset:0; background:rgba(25,17,11,.54); backdrop-filter: blur(2px); }
.modal-dialog { position:relative; width:min(1180px, calc(100% - 28px)); max-height:calc(100vh - 40px); overflow:auto; margin:20px auto; padding:18px; }
.generator-layout { display:grid; grid-template-columns:.52fr 1.48fr; gap:16px; }
.generator-canvas-section { align-self:start; }
.generator-side-section { display:flex; flex-direction:column; gap:12px; }
.generator-selected-head { display:none !important; }
.generator-panel-group {
  border: 1px solid rgba(66,44,24,.14);
  border-radius: 14px;
  background: rgba(255,251,243,.66);
  padding: 12px;
  margin-bottom: 10px;
}
.generator-panel-title {
  margin: 0 0 10px;
  font-family: var(--wallet-font-ui);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.generator-controls { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
.generator-controls label { display:grid; gap:6px; }
.generator-controls .paper-input { width:120px; }
.generator-export-actions { display:grid; gap:8px; }
.generator-export-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
#drawCheckedBtn { grid-column: 1 / -1; }
.generator-preview-grid { display:none !important; }
.editor-selection-hint { margin: 0 0 8px; }
.canvas-editor { display: grid; gap: 8px; }
.canvas-editor-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.export-canvas {
  width:auto;
  max-width:100%;
  max-height:calc(100vh - 250px);
  margin: 0 auto;
  display:block;
  border-radius:14px;
  background:rgba(255,247,232,.7);
  image-rendering: auto;
  touch-action: none;
  cursor: default;
}
.export-canvas.is-draggable { cursor: grab; }
.export-canvas.is-dragging { cursor: grabbing; }

.canvas-stage {
  position: relative;
  width: 100%;
}
.canvas-tool-btn {
  border: 1px solid rgba(59,42,27,.18);
  background: rgba(255,252,244,.98);
  color: var(--ink-main);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.1;
  cursor: pointer;
}
.canvas-tool-btn:hover,
.canvas-tool-btn.is-active {
  border-color: rgba(59,42,27,.42);
  background: rgba(238,224,199,.96);
}
.canvas-tool-btn.is-danger {
  color: #7b2e24;
}

.nft-card,.nft-market-link,.wallet-chip,.wallet-chip-remove,.wallet-chip-label,#checkedTopbarBtn,#clearCheckedBtn,#showFiltersBtn{cursor:pointer;}
.generator-counts{margin:0 0 10px; font-size:18px;}

@media (max-width: 1100px) {
  .viewer-header, .viewer-layout, .generator-layout { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .page-shell { width:min(100% - 20px, 100%); margin:14px auto 26px; }
  .nft-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .wallet-input-row { grid-template-columns:1fr; }
  .generator-export-row { grid-template-columns:1fr; }
}