/* Collector Seal: compact silver foil identity, matching the card edges. */
header.collector-seal{--foil:linear-gradient(118deg,#b8bac5 0%,#f6f7f0 10%,#b9b7cf 18%,#e4d5e9 24%,#c0eee0 31%,#fff2df 37%,#c4c5d0 44%,#effaff 51%,#c4c0da 58%,#efd1da 65%,#d7efd4 72%,#e8faff 80%,#b7b9ce 87%,#fff5e9 94%,#bec9cf 100%);height:auto;max-width:470px;margin:0 auto 13px;padding:max(16px,env(safe-area-inset-top)) 0 0;display:flex;flex-direction:column;gap:8px;border:0}
.collector-seal .brand-kicker{display:flex;align-items:center;gap:12px;width:100%;font-size:9px;letter-spacing:2px;font-style:italic;color:#f8f2df;white-space:nowrap}
.collector-seal .brand-kicker::before,.collector-seal .brand-kicker::after{content:"";flex:1;height:2px;background:var(--foil)}
header.collector-seal>.brand{width:calc(100% - 24px);max-width:390px;margin:0 12px 0 0}
header.collector-seal>.brand::after{background:repeating-linear-gradient(112deg,transparent 0,#ffffff20 1px,transparent 2px,transparent 4px),var(--foil);-webkit-mask-image:url('brand/surfrat-straight-mask.png');mask-image:url('brand/surfrat-straight-mask.png');filter:none}
header.collector-seal>.brand .registered{top:auto;bottom:12%;right:-12px;font-size:14px;color:#f5f3e8;text-shadow:none}
.collector-seal h1{font-size:14px;text-transform:uppercase;letter-spacing:4px;line-height:1.3;font-weight:800;font-style:italic;text-align:center;margin:0;color:#f8f2df}
.seal-tools{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:22px;padding:5px 0 11px;border-bottom:1px solid #e6e4d29c}
.seal-tools .modes{padding:2px;border-color:#f8f2df80}
.seal-tools .modes button{font-size:11px;font-weight:700;padding:5px 16px}
.seal-tools .modes [aria-pressed=true]{background:var(--lime);color:#101112}
.seal-tools>.icon{justify-self:end;width:28px;height:28px;font-size:17px;border-color:#f8f2df9c}
.seal-checkers{width:32px;height:19px;background:conic-gradient(var(--lime) 25%,transparent 0 50%,var(--lime) 0 75%,transparent 0) 0 0/12px 12px;transform:skew(-18deg);margin-left:7px}
nav{margin-bottom:20px}
@media(min-width:850px){.stage{width:min(365px,calc((100dvh - 405px)*.7143));min-width:245px}}
@media(max-width:600px){header.collector-seal{gap:6px;max-width:390px}.collector-seal .brand-kicker{font-size:7px;letter-spacing:1.6px;gap:10px}header.collector-seal>.brand{max-width:300px;width:calc(100% - 28px)}.collector-seal h1{font-size:11px;letter-spacing:3px}.seal-tools{gap:16px;padding:4px 0 9px}.seal-tools .modes button{padding:5px 14px}.collector-seal+.intro{display:none}}
@media(max-width:350px){.collector-seal h1{font-size:10px;letter-spacing:2.3px}.collector-seal .brand-kicker{letter-spacing:1px}}
/* Match the concept's scale and keep the kicker below the phone's top shadow. */
.foil-filters{position:absolute;pointer-events:none;overflow:hidden}
header.collector-seal{padding-top:calc(env(safe-area-inset-top,0px) + 24px);gap:7px;--foil:linear-gradient(121deg,#a4a3b5 0%,#f6f6f1 8%,#c5bfda 15%,#ebdce7 22%,#afe2d4 28%,#fff4d9 34%,#aaa9bf 40%,#f5fcff 47%,#bbb5d0 54%,#f5d4e3 61%,#c6e8cb 68%,#e5faff 75%,#afadc7 82%,#fff0db 90%,#b2c5cc 96%,#eff5f0 100%)}
.collector-seal .brand-kicker{font-size:11px;font-weight:800;letter-spacing:1.8px;gap:14px;line-height:1.4}
header.collector-seal>.brand{width:calc(100% - 18px);max-width:440px;margin-right:12px;filter:url('#foil-bevel')}
header.collector-seal>.brand .registered{font-size:17px;bottom:12%;right:-9px}
.collector-seal h1{font-size:16px;letter-spacing:4.3px}
.seal-tools{gap:26px;padding:7px 0 12px}
.seal-tools .modes{position:relative}
.seal-tools .modes::before,.seal-tools .modes::after{content:"";position:absolute;top:50%;height:23px;width:1px;background:#eeeadd99;transform:translateY(-50%)}
.seal-tools .modes::before{left:-27px}.seal-tools .modes::after{right:-27px}
.seal-tools .modes button{font-size:13px;padding:5px 19px}
nav button{border-color:#f8f2df85}
@media(max-width:600px){header.collector-seal{max-width:390px;gap:7px;padding-top:calc(env(safe-area-inset-top,0px) + 23px)}.collector-seal .brand-kicker{font-size:clamp(9px,2.55vw,11px);letter-spacing:1.3px;gap:10px}header.collector-seal>.brand{width:calc(100% - 16px);max-width:none}.collector-seal h1{font-size:clamp(10.5px,3.3vw,13px);letter-spacing:3.1px}.seal-tools{gap:22px;padding:5px 0 10px}.seal-tools .modes button{font-size:12px;padding:5px 16px}.seal-tools .modes::before{left:-20px}.seal-tools .modes::after{right:-20px}.seal-tools>.icon{width:27px;height:27px}.seal-checkers{width:33px;height:19px}header.collector-seal>.brand .registered{font-size:14px;right:-8px}}
@media(max-width:350px){.collector-seal h1{letter-spacing:2.4px}.collector-seal .brand-kicker{letter-spacing:.8px}.seal-tools .modes button{padding:5px 13px}}

header.collector-seal>.brand::after{background:repeating-linear-gradient(112deg,transparent 0,#ffffff18 1px,transparent 2px,transparent 4px),radial-gradient(ellipse at 17% 65%,#99e3d99e,transparent 22%),radial-gradient(ellipse at 76% 35%,#e8b8d696,transparent 23%),linear-gradient(121deg,#9696aa 0%,#e9e9e5 8%,#b3accb 15%,#ded0df 22%,#9ad8c7 28%,#eee3cd 34%,#9292aa 40%,#e4edf2 47%,#a39bbd 54%,#e4bdce 61%,#b3d7b9 68%,#cfe5ee 75%,#9995b4 82%,#e9d8c2 90%,#9ab4bf 96%,#e1e5e2 100%)}
/* Flatter optical logo proportions; keep the foil aligned with the artwork. */
header.collector-seal>.brand{aspect-ratio:3.45;line-height:0}
header.collector-seal>.brand img{width:100%;height:100%;object-fit:fill}
.stage-slot{display:contents}
@media(max-width:600px) and (min-height:560px){
 .app{height:100dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
 header.collector-seal{flex:none;width:100%;gap:4px;margin-bottom:8px;padding-top:calc(env(safe-area-inset-top,0px) + 16px)}
 header.collector-seal>.brand{width:min(calc(100% - 18px),35dvh);max-width:320px;flex:none}
 .collector-seal .brand-kicker{font-size:10px;line-height:1.3}
 .collector-seal h1{font-size:12px;line-height:1.25;letter-spacing:2.7px}
 .seal-tools{padding:4px 0 7px}
 .seal-tools .modes button{padding:4px 16px}
 .app>main{display:flex;flex-direction:column;flex:1;min-height:0}
 nav{flex:none;margin-bottom:9px}
 nav button{padding:7px 12px}
 #deckView{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:420px}
 #deckView[hidden]{display:none}
 .stage-slot{display:grid;place-items:center;container-type:size;flex:1;min-height:0;width:100%}
 .stage{width:min(340px,calc(100cqw - 24px),calc(100cqh * .7142857));min-width:0;aspect-ratio:1060/1484;margin:0 auto}
 .card{height:100%;border-radius:16px}
 .ghost{border-radius:16px}
 .cardInfo{flex:none;margin:9px 0 6px;gap:8px;min-height:34px}
 .cardInfo h2{font-size:14px;line-height:1.15}
 .cardInfo .eyebrow{font-size:7px;letter-spacing:1.2px;margin-bottom:3px}
 .cardActions{gap:7px}
 .cardActions .icon{width:32px;height:32px;font-size:18px}
 .cardActions .saveCard{padding:7px 9px;font-size:9px}
 .controls{flex:none;height:35px;gap:26px}
 .controls .arrow{height:32px;width:43px;font-size:20px}
 .controls span{font-size:7px;margin-top:3px}
 .controls b{font-size:12px}
 .refreshRow{flex:none;margin:9px 0 0;gap:5px;position:relative}
 .refreshRow .saveCard{padding:7px 15px;font-size:11px}
 #refreshStatus:not(:empty){position:absolute;bottom:100%;padding:5px 10px;background:#171a18;border:1px solid #ffffff30;border-radius:8px;z-index:4;text-align:center}
 footer{flex:none;margin-top:9px;padding:10px 0;line-height:1.3;font-size:8px}
 footer button{font-size:10px}
 #grid{flex:1;min-height:0;overflow-y:auto;align-content:start;padding:0 2px 12px}
 #empty{padding:15px 10px}
 .saveStatus:not(:empty){position:fixed;left:15px;right:15px;bottom:65px;padding:8px;background:#171a18;border-radius:8px;z-index:5}
}
@media(max-width:600px) and (max-height:740px) and (min-height:560px){
 header.collector-seal{gap:3px;padding-top:calc(env(safe-area-inset-top,0px) + 13px)}
 header.collector-seal>.brand{width:min(calc(100% - 30px),32dvh)}
 .collector-seal h1{font-size:11px;letter-spacing:2.4px}
 .refreshRow{margin-top:6px}footer{margin-top:6px;padding:8px 0}
}