/* CryptoCard Wallet (apps/cryptocard_wallet): the card is the wallet. Finishes from ui/widgets/card_art.dart. */
:root { --warning: #ffd60a; --testnet: #bf5af2; }
.card.obsidian { background: linear-gradient(135deg, #2c2c2f, #0c0c0d 55%, #000); }
.card.titanium { background: linear-gradient(135deg, #a6a6ab, #636366 55%, #3a3a3c); }
.card.ccsilver { background: linear-gradient(135deg, #f5f5f7, #d1d1d6 55%, #98989d); color: #111; }
.card .cc { position: absolute; left: 7%; top: 9%; display: flex; align-items: center; gap: 2.4cqw; font-weight: 700; font-size: 7cqw; }
.card .cc i { width: 8cqw; height: 8cqw; border: .7cqw solid currentColor; border-radius: 2cqw; display: grid; place-items: center; }
.card .cc i::after { content: ""; width: 3.2cqw; height: 3.2cqw; background: currentColor; transform: rotate(45deg); }
.card .rose { position: absolute; right: -16%; bottom: -36%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .13) 0 1px, transparent 1px 5px); }
.card .dots4 { position: absolute; right: 8%; bottom: 12%; font: 700 5cqw/1 var(--mono); letter-spacing: 1cqw; opacity: .8; }
.netrow { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0 24px; }
.netpill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--outline); font-weight: 600; font-size: 14px; }
.netpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--testnet); }
.netpill small { color: var(--testnet); font: 700 10px var(--mono); letter-spacing: .1em; }
.testnet { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(191, 90, 242, .1); border: 1px solid rgba(191, 90, 242, .35); color: #e3c4f7; font-size: 13px; line-height: 1.4; }
.stack { position: relative; width: 300px; height: 205px; margin: 22px auto 0; cursor: pointer; }
.stack .card { position: absolute; left: 0; right: 0; width: 100%; }
.stack .card.behind { top: 0; transform: scale(.92); opacity: .7; }
.stack .card.front { top: 14px; }
.amount-big { text-align: center; margin-top: 26px; font-size: 40px; font-weight: 700; letter-spacing: -1px; }
.amount-big small { font-size: 16px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.addrchip { display: flex; justify-content: center; margin-top: 10px; }
.addrchip button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--outline); font: 13px var(--mono); }
.acts { display: flex; justify-content: space-evenly; margin-top: 28px; }
.acts button { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.acts button span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--outline); }
.acts button.p span { background: #fff; color: #000; }
.inp { display: block; margin-bottom: 14px; }
.inp span { display: block; color: var(--muted); font-size: 12px; margin: 0 0 6px 4px; }
.inp input { width: 100%; padding: 15px 16px; border-radius: 16px; border: 1px solid var(--outline); background: var(--surface); outline: 0; font: 14px var(--mono); }
.inp input:focus { border-color: #fff; }
.pin { text-align: center; padding-top: 10px; }
.pin h2 { margin: 6px 0 4px; font-size: 22px; }
.pin .sub { color: var(--muted); font: 13px var(--mono); }
.pin .dots { display: flex; justify-content: center; gap: 12px; margin: 26px 0 8px; min-height: 16px; }
.pin .dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); }
.pin .dots i.f { background: #fff; border-color: #fff; }
.pin .hint { color: var(--muted); font-size: 12.5px; min-height: 18px; }
.pin .hint.bad { color: var(--danger); font-weight: 600; }