.coin-hub { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 20px; border:1px solid var(--line); border-left:3px solid var(--gold); background:linear-gradient(110deg,#d9ac5330,transparent 75%),var(--panel); box-shadow:inset 0 1px 0 #ffffff0b,0 3px 0 #0003; }
.coin-balance-button { display:flex; align-items:center; gap:14px; padding:0; border:0; background:none; color:var(--text); text-align:left; min-height:44px; }
.coin-balance-copy { display:grid; gap:1px; }.coin-balance-copy>small { font-size:12px; color:var(--muted); }.coin-balance-line { display:flex; align-items:baseline; gap:9px; }.coin-balance-line>b { font:600 26px/1.25 var(--mono); color:var(--gold); }.coin-balance-line>small { font-size:12px; color:var(--muted); }
.coin-emblem { display:block; position:relative; width:35px; height:38px; border:3px solid #f4d382; background:linear-gradient(135deg,#e8bd64,#a87632); box-shadow:inset 0 0 0 3px #a97635,3px 2px 0 #795026,4px 4px 0 #0005; flex:none; }
.coin-emblem::after { content:'◆'; position:absolute; inset:0; display:grid; place-items:center; font-size:19px; color:#ffe9a8; text-shadow:1px 2px #93682d; }
#coin-shop-button { display:flex; align-items:center; gap:18px; min-height:46px; padding:9px 18px; font-size:16px; white-space:nowrap; }
#coin-shop-button>b { font-size:23px; line-height:1; font-weight:400; }
#home-wallet-slot { margin-bottom:24px; }
#table-wallet-slot .coin-hub { flex-wrap:wrap; gap:14px; padding:17px; margin-bottom:18px; }
#table-wallet-slot #coin-shop-button { width:100%; justify-content:space-between; }
#table-wallet-mobile-slot:not(:empty) { margin-bottom:18px; }
.topbar .topnav { margin-left:auto; }
#modal[data-kind='shop'] { width:min(860px,calc(100% - 24px)); padding:30px; }
.shop-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-right:16px; }
.shop-heading .modal-title { margin-bottom:0; }.shop-eyebrow { font:12px var(--mono); letter-spacing:2px; color:var(--muted); margin-bottom:7px; }
.shop-balance { text-align:right; display:grid; gap:3px; }.shop-balance small { color:var(--muted); font-size:12px; }.shop-balance strong { font:600 25px var(--mono); color:var(--gold); }
.shop-intro { margin:15px 0 21px; font-size:14px; color:var(--muted); }
.coin-pack-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; align-items:stretch; margin-top:24px; }
.coin-pack { position:relative; display:flex; flex-direction:column; align-items:center; padding:26px 10px 12px; border:1px solid var(--line); background:linear-gradient(180deg,#e8c56710,transparent 85%),var(--panel-deep); color:var(--heading); min-width:0; }
.coin-pack:hover { border-color:var(--gold); background-color:var(--panel-raised); }
.coin-pack.pack-featured { border-color:var(--gold); box-shadow:inset 0 0 0 1px #e5bb4b30; }
.pack-badge { position:absolute; top:-1px; right:-1px; padding:2px 7px; color:var(--accent-ink); background:var(--accent); font-size:11px; white-space:nowrap; }.pack-badge:empty { display:none; }
.shop-coins { position:relative; display:block; width:95px; height:70px; margin:0 auto 11px; }
.shop-coins i { position:absolute; width:35px; height:32px; left:calc(10px + var(--coin-i) * 9px); top:calc(30px - var(--coin-i) * 5px); border:3px solid #f2d489; border-radius:2px; background:linear-gradient(135deg,#f3cf74,#b88939); transform:skewY(-12deg); box-shadow:inset 0 0 0 2px #b18438,2px 2px 0 #97672f,4px 4px 0 #684c2a; }
.shop-coins i::after { content:'◆'; position:absolute; inset:0; display:grid; place-items:center; color:#fff0ad; font-size:14px; text-shadow:1px 1px #a37531; }
.pack-name { color:var(--muted); font-size:13px; margin-bottom:8px; }.coin-pack>strong { font:600 23px var(--mono); color:var(--gold); }.pack-unit { font-size:12px; color:var(--muted); margin-top:1px; }.pack-price { display:block; width:100%; background:var(--accent); color:var(--accent-ink); font:600 16px var(--mono); padding:10px 4px; margin-top:18px; border-bottom:2px solid var(--accent-shade); text-align:center; }
.shop-table-note { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 15px; margin-top:20px; padding:13px 0; border-block:1px solid var(--line-soft); color:var(--muted); font-size:13px; }.shop-table-note strong { color:var(--text); }
.shop-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }.shop-bottom button { min-height:44px; }.shop-preview-note { margin-top:17px; font-size:12px; text-align:center; color:var(--muted); }
#modal[data-kind='coin-order'] { width:min(420px,calc(100% - 24px)); }.coin-order { text-align:center; }.coin-order .shop-coins { margin-block:25px 15px; transform:scale(1.25); }.order-coins { display:block; color:var(--gold); font:600 32px var(--mono); }.order-coins small { font-size:15px; }
.order-price { display:flex; justify-content:space-between; align-items:center; margin-top:25px; padding:17px 0; border-block:1px solid var(--line); color:var(--muted); }.order-price strong { font:600 22px var(--mono); color:var(--heading); }.order-note { margin:19px 0; color:var(--muted); font-size:14px; line-height:1.8; }.coin-order>.primary-button { width:100%; opacity:.55; cursor:not-allowed; }.coin-order>.text-button { margin-top:12px; min-height:44px; }
#settings-form #theme-button { display:flex; min-height:78px; padding:10px; margin:0 0 24px; border:1px solid var(--line); background:var(--panel-raised); gap:14px; }
.settings-theme-thumb { width:84px; height:53px; object-fit:cover; border:1px solid var(--line); flex:none; }.settings-theme-title { display:grid; gap:5px; flex:1; }.settings-theme-title>strong { font-size:16px; font-weight:500; }.settings-theme-title>#theme-name { font-size:13px; }.settings-theme-arrow { font-size:25px; color:var(--gold); }
@media(max-width:850px) { #coin-shop-button { padding-inline:14px; }.coin-hub { padding:12px 16px; }.home-view { margin-top:14px; } }
@media(max-width:700px) { .coin-pack-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }#modal[data-kind='shop'] { padding:25px 18px; }.coin-pack { padding-inline:8px; }.coin-pack>strong { font-size:22px; }.shop-table-note { font-size:12px; } }
@media(max-width:470px) { .topbar { min-height:90px; }.topbar .brand { grid-column:1/-1; }.coin-hub { gap:12px; padding:12px; }.coin-emblem { width:29px; height:33px; }.coin-balance-button { gap:10px; }.coin-balance-line { gap:5px; }.coin-balance-line>b { font-size:24px; }.coin-balance-line>small { font-size:11px; }#coin-shop-button { min-height:46px; gap:10px; font-size:14px; padding-inline:12px; }.coin-pack-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.coin-pack:last-child { grid-column:1/-1; display:grid; grid-template-columns:85px 1fr auto; column-gap:10px; text-align:left; padding:24px 13px 13px; }.coin-pack:last-child .shop-coins { grid-row:1/4; margin:0; width:80px; transform:translateX(-6px); }.coin-pack:last-child .pack-name { margin:0; }.coin-pack:last-child>strong { grid-column:2; }.coin-pack:last-child .pack-unit { grid-column:2; }.coin-pack:last-child .pack-price { grid-column:3; grid-row:1/4; margin:0; width:76px; }.shop-heading { gap:10px; }.shop-balance strong { font-size:22px; }.shop-intro { font-size:13px; }.shop-bottom { gap:8px; }.shop-bottom .secondary-button { font-size:13px; padding-inline:10px; }.shop-bottom .text-button { font-size:13px; } }

@media(max-width:470px) {
  .topbar { display:flex; min-height:64px; height:64px; padding:8px 0; gap:8px; }
  .topbar .topnav { width:auto; gap:2px; margin-left:auto; }
  .topbar .topnav .nav-button { min-width:40px; min-height:44px; padding:6px; font-size:13px; }
  .topbar .brand { gap:5px; }
  .topbar .brand b { font-size:15px; }
  #modal[data-kind='shop'] .shop-heading { display:grid; justify-content:stretch; align-items:start; gap:8px; padding-right:42px; }
  #modal[data-kind='shop'] .shop-balance { text-align:left; }
}