/* ================= TOKENS / TEMAS ================= O app define sempre um data-theme no (js/ui.js applyTheme): "dark" → paleta padrão (:root abaixo, o visual de sempre) "light" → :root[data-theme="light"] "auto" → herda :root (escuro) e só vira claro sob prefers-color-scheme:light loja.html usa data-theme="auto" — o cliente vê no tema do aparelho dele. */ :root{ --ground:#0e1211; --ground-2:#141a18; --surface:#171d1b; --surface-2:#1e2624; --surface-3:#26302d; --border:#2c3733; --border-2:#3b4843; --text:#e8ede9; --text-soft:#c4cdc7; --muted:#8a968f; --faint:#6b7772; --accent:#63d6a0; --accent-2:#3f9d74; --accent-ink:#06130d; --accent-quiet:#13271f; --accent-line:#3f8a63; --danger:#e8674e; --danger-ink:#ffe4dd; --danger-quiet:#2c1a15; --danger-line:#8a3030; --qty:#f0a53e; --qty-ink:#241503; --gold:#e6b552; --gold-soft:#f0c04e; --gold-quiet:#28200f; --gold-line:#7a5a20; --gold-btn:#8a6412; --violet:#c39cf2; --violet-quiet:#231a33; --violet-line:#5f3d8f; --info:#7cc3e8; --info-quiet:#12212c; --info-line:#356b94; --info-btn:#1e3a52; --shadow-1:0 3px 10px rgba(0,0,0,.38); --shadow-2:0 14px 38px rgba(0,0,0,.5); --radius:14px; --radius-sm:9px; } :root[data-theme="light"]{ --ground:#edf0ea; --ground-2:#e6eae1; --surface:#ffffff; --surface-2:#f2f5ef; --surface-3:#e7ece2; --border:#d8ded3; --border-2:#c2ccbc; --text:#17211c; --text-soft:#3c4a43; --muted:#66756c; --faint:#8a978d; --accent:#0f8f56; --accent-2:#12925a; --accent-ink:#ffffff; --accent-quiet:#e1f2e8; --accent-line:#7cc7a3; --danger:#c33f28; --danger-ink:#7a1c0d; --danger-quiet:#fae6e1; --danger-line:#e0ab9d; --qty:#d9821a; --qty-ink:#2a1602; --gold:#9c6c15; --gold-soft:#8a5f10; --gold-quiet:#f6ecd3; --gold-line:#e0c692; --gold-btn:#b58527; --violet:#6f39c4; --violet-quiet:#eee4fb; --violet-line:#c9b3ec; --info:#1c6f9c; --info-quiet:#e4f0f7; --info-line:#a7cde1; --info-btn:#2f7aa6; --shadow-1:0 1px 2px rgba(20,32,26,.06),0 6px 18px rgba(20,32,26,.09); --shadow-2:0 2px 8px rgba(20,32,26,.1),0 20px 44px rgba(20,32,26,.14); } @media (prefers-color-scheme: light){ :root[data-theme="auto"]{ --ground:#edf0ea; --ground-2:#e6eae1; --surface:#ffffff; --surface-2:#f2f5ef; --surface-3:#e7ece2; --border:#d8ded3; --border-2:#c2ccbc; --text:#17211c; --text-soft:#3c4a43; --muted:#66756c; --faint:#8a978d; --accent:#0f8f56; --accent-2:#12925a; --accent-ink:#ffffff; --accent-quiet:#e1f2e8; --accent-line:#7cc7a3; --danger:#c33f28; --danger-ink:#7a1c0d; --danger-quiet:#fae6e1; --danger-line:#e0ab9d; --qty:#d9821a; --qty-ink:#2a1602; --gold:#9c6c15; --gold-soft:#8a5f10; --gold-quiet:#f6ecd3; --gold-line:#e0c692; --gold-btn:#b58527; --violet:#6f39c4; --violet-quiet:#eee4fb; --violet-line:#c9b3ec; --info:#1c6f9c; --info-quiet:#e4f0f7; --info-line:#a7cde1; --info-btn:#2f7aa6; --shadow-1:0 1px 2px rgba(20,32,26,.06),0 6px 18px rgba(20,32,26,.09); --shadow-2:0 2px 8px rgba(20,32,26,.1),0 20px 44px rgba(20,32,26,.14); } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} body{font-family:'Segoe UI',Arial,sans-serif;background:var(--ground); color:var(--text);margin:0;padding:0 0 84px;min-height:100vh} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.001ms!important}} /* ================= TOPBAR ================= */ .topbar{position:sticky;top:0;z-index:120;background:var(--ground); background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(12px); border-bottom:1px solid var(--border)} .topbar-inner{max-width:760px;margin:0 auto;display:grid;grid-template-columns:40px 1fr auto; align-items:center;gap:10px;padding:9px 12px} .topbar-actions{display:flex;gap:6px} .brand-wrap{display:flex;align-items:center;gap:9px;min-width:0} .brand-logo{width:31px;height:31px;border-radius:8px;flex:0 0 auto;object-fit:cover; box-shadow:0 0 0 1px var(--border),var(--shadow-1)} .brand-txt{min-width:0;display:flex;flex-direction:column;line-height:1.15} .brand{font-size:16px;font-weight:600;color:var(--accent);letter-spacing:.3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand b{color:var(--text);font-weight:800} .brand-sub{font-size:10px;color:var(--muted);margin-top:1px;letter-spacing:.5px;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .icon-btn{position:relative;width:40px;height:40px;border-radius:12px;background:var(--surface-2); border:1px solid var(--border);color:var(--accent);font-size:16px;font-weight:800;cursor:pointer; transition:.15s;display:flex;align-items:center;justify-content:center;padding:0} .icon-btn:hover{background:var(--surface-3);border-color:var(--accent-line)} .icon-btn:active{transform:scale(.93)} .burger{display:flex;flex-direction:column;gap:4px;width:17px} .burger i{display:block;height:2px;border-radius:2px;background:var(--accent);transition:.2s} .burger i:nth-child(2){width:70%} .icon-btn.open .burger i:nth-child(2){width:100%} .burger-pill{position:absolute;top:5px;right:5px;min-width:8px;height:8px;border-radius:50%;background:var(--danger); box-shadow:0 0 0 2px var(--surface-2)} /* ================= DRAWER ================= */ .drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:190; opacity:0;pointer-events:none;transition:.25s} .drawer-bg.show{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;left:0;bottom:0;width:308px;max-width:86vw;z-index:200; background:var(--ground-2);border-right:1px solid var(--border); box-shadow:14px 0 40px rgba(0,0,0,.45);transform:translateX(-104%);transition:transform .28s cubic-bezier(.3,.8,.3,1); display:flex;flex-direction:column;overflow:hidden} .drawer.show{transform:translateX(0)} .drawer-head{display:flex;align-items:flex-start;gap:10px;padding:16px 15px 13px;border-bottom:1px solid var(--border)} .dh-title{font-size:15.5px;font-weight:800;color:var(--accent);line-height:1.3} .dh-sub{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5} .drawer-stats{display:flex;gap:6px;flex-wrap:wrap;padding:11px 15px;border-bottom:1px solid var(--border);background:var(--ground)} .dstat{flex:1;min-width:66px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:7px 8px;text-align:center} .dstat b{display:block;font-size:15px;color:var(--accent);line-height:1.2} .dstat span{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} .drawer-nav{flex:1;overflow-y:auto;padding:10px 10px 16px} .dn-sec{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin:14px 8px 6px;font-weight:800} .dn-sec:first-child{margin-top:4px} .dn-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;background:transparent; border:1px solid transparent;border-radius:12px;padding:10px 11px;cursor:pointer;color:var(--text-soft); text-align:left;transition:.15s;margin-bottom:2px;font-family:inherit} .dn-item:hover{background:var(--surface-2);border-color:var(--border)} .dn-item.active{background:var(--accent-quiet);border-color:var(--accent-line)} .dn-item.active .dn-tx b{color:var(--accent)} .dn-item.active::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;background:var(--accent)} .dn-ic{flex:0 0 34px;height:34px;border-radius:10px;background:var(--surface-3);display:flex;align-items:center; justify-content:center;font-size:16px} .dn-item.active .dn-ic{background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent-line)} .dn-tx{min-width:0;flex:1} .dn-tx b{display:block;font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3} .dn-tx i{display:block;font-size:10.5px;color:var(--muted);font-style:normal;margin-top:2px;line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dn-badge{flex:0 0 auto;background:var(--danger);color:#fff;font-size:10px;font-weight:800;border-radius:9px;padding:2px 7px} .dn-badge.alt{background:var(--gold-btn);color:#ffe9a8} .drawer-foot{padding:13px 15px 16px;border-top:1px solid var(--border);background:var(--ground)} .drawer-foot-btns{display:flex;gap:7px;margin-top:9px} .drawer-foot-btns .btn{flex:1;padding:8px 6px;font-size:11.5px} /* bandeja recolhível: nuvem, vitrine, conferência, tema e backup ficam escondidos atrás deste botão pra o menu não virar uma parede de opções */ .foot-tray-toggle{display:flex;align-items:center;gap:10px;width:100%;background:var(--surface-2); border:1px solid var(--border);border-radius:12px;padding:9px 11px;cursor:pointer;color:var(--text-soft); text-align:left;font-family:inherit;transition:.15s} .foot-tray-toggle:hover{border-color:var(--border-2)} .foot-tray-toggle .ftt-ic{flex:0 0 30px;height:30px;border-radius:9px;background:var(--surface-3); display:flex;align-items:center;justify-content:center;font-size:15px} .foot-tray-toggle .ftt-tx{flex:1;min-width:0} .foot-tray-toggle .ftt-tx b{display:block;font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3} .foot-tray-toggle .ftt-tx i{display:block;font-size:10px;color:var(--muted);font-style:normal;margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .foot-tray-toggle .ftt-chev{flex:0 0 auto;color:var(--faint);transition:transform .2s} .drawer-foot.tray-open .foot-tray-toggle{border-color:var(--border-2)} .drawer-foot.tray-open .foot-tray-toggle .ftt-chev{transform:rotate(180deg)} .foot-tray{display:none;margin-top:11px} .drawer-foot.tray-open .foot-tray{display:block} /* ================= TABBAR ================= */ .tabbar{position:fixed;bottom:0;left:0;right:0;z-index:110;display:flex; background:var(--ground);background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(12px); border-top:1px solid var(--border);padding:5px 4px calc(5px + env(safe-area-inset-bottom))} .tab{position:relative;flex:1;background:none;border:none;color:var(--faint);cursor:pointer;padding:6px 2px 5px; display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit;border-radius:12px;transition:.15s} .tab i{font-size:17px;font-style:normal;line-height:1} .tab span{font-size:9.5px;font-weight:700;letter-spacing:.2px} .tab.active{color:var(--accent);background:var(--accent-quiet)} .tab:active{transform:scale(.94)} .tab-badge{position:absolute;top:1px;right:calc(50% - 20px);min-width:7px;height:7px;border-radius:50%; background:var(--danger);font-style:normal} /* ================= LAYOUT ================= */ .wrapper{max-width:700px;margin:0 auto;padding:24px 15px 0} h2{text-align:center;font-size:22px;margin:0 0 4px;color:var(--text)} .subtitle{text-align:center;color:var(--muted);margin-bottom:16px;font-size:13px} .counter{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:14px;font-weight:600;margin-bottom:18px; background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 12px;color:var(--accent)} .hint{font-size:11.5px;color:var(--muted);text-align:center;margin-bottom:14px;line-height:1.5} input,textarea,select{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:10px; padding:10px 14px;font-size:13px;outline:none;width:100%;font-family:inherit} input:focus,textarea:focus,select:focus{border-color:var(--accent)} input::placeholder,textarea::placeholder{color:var(--faint)} textarea{min-height:150px;font-family:'Courier New',monospace;resize:vertical} .search-box{text-align:center;margin-bottom:14px} .search-box input{max-width:340px;border-radius:20px} .filter-tip{max-width:400px;margin:0 auto 14px;font-size:11.5px;color:var(--accent);background:var(--accent-quiet); border:1px solid var(--accent-line);border-radius:10px;padding:8px 12px;text-align:center;display:none;line-height:1.5} /* ================= GRUPOS ================= */ .group-label{display:flex;align-items:center;gap:9px;margin:24px 0 10px;padding:8px 13px; background:var(--surface);border:1px solid var(--border);border-radius:11px} .group-label b{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-soft)} .grp-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto} .gflags{display:flex;gap:4px;margin-left:auto} .gflags img{width:21px;height:16px;border-radius:3px;box-shadow:0 0 0 1px var(--border-2)} /* ================= TIME ================= */ .team{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 18px;margin-bottom:13px; box-shadow:var(--shadow-1);border-left:4px solid var(--border-2)} .team:hover{border-color:var(--border-2)} .team.allshiny{border-color:var(--gold-line);background:linear-gradient(160deg,var(--gold-quiet),var(--surface) 60%)} .team.hasace{border-color:var(--violet-line)} .team-header{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap} .fimg{width:33px;height:25px;border-radius:4px;object-fit:cover;flex:0 0 auto; box-shadow:0 0 0 1px var(--border-2),0 2px 6px rgba(0,0,0,.35)} .fico{font-size:24px;line-height:1;width:33px;text-align:center;flex:0 0 auto} .tname{font-weight:700;font-size:14.5px;color:var(--text)} .tsep{color:var(--faint)} .tcode{font-family:'Courier New',monospace;font-weight:700;font-size:11.5px;color:var(--accent); background:var(--accent-quiet);border:1px solid var(--accent-line);border-radius:8px;padding:2px 8px} .tgrp{font-size:10.5px;color:var(--info);background:var(--info-quiet);border:1px solid var(--info-line);border-radius:8px;padding:2px 8px} .tright{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .shinytag{font-size:9.5px;font-weight:800;color:var(--gold-soft);background:var(--gold-quiet);border:1px solid var(--gold-line);border-radius:8px;padding:2px 7px} .acetag{font-size:9.5px;font-weight:800;color:var(--violet);background:var(--violet-quiet);border:1px solid var(--violet-line);border-radius:8px;padding:2px 7px} .tct{font-size:10.5px;color:var(--muted);font-family:'Courier New',monospace} .g-A{border-left-color:#e05263}.g-B{border-left-color:#e08b52}.g-C{border-left-color:#e0c852} .g-D{border-left-color:#9ce052}.g-E{border-left-color:#52e07a}.g-F{border-left-color:#52e0c0} .g-G{border-left-color:#52b8e0}.g-H{border-left-color:#5271e0}.g-I{border-left-color:#8b52e0} .g-J{border-left-color:#c852e0}.g-K{border-left-color:#e052a8}.g-L{border-left-color:#9aa0a6} .g-none{border-left-color:var(--gold-btn)} /* ================= FIGURINHAS ================= */ .stickers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:min(340px,100%);margin:0 auto} body.show-players .stickers{grid-template-columns:repeat(5,minmax(56px,70px));max-width:min(382px,100%);justify-content:center} .sticker-btn{position:relative;background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);padding:9px 0; border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;transition:.12s;user-select:none;width:100%;text-align:center} .sticker-btn:hover{background:var(--surface-3);border-color:var(--border-2);transform:translateY(-1px)} .sticker-btn:active{transform:scale(.93)} .sticker-btn.has,.sticker-btn.sel{background:var(--accent-2);border-color:var(--accent);color:var(--accent-ink)} .sticker-btn.nostock{background:var(--danger-quiet);border-color:var(--danger-line);color:var(--danger);cursor:pointer;opacity:1} .sticker-btn.nostock:hover{background:var(--danger-quiet);border-color:var(--danger)} .sticker-btn.selout{background:var(--danger-quiet);border:2px solid var(--accent);color:var(--danger-ink); box-shadow:0 0 0 1px var(--danger-line) inset,0 0 8px rgba(99,214,160,.3)} .sticker-btn.selout::after{content:"✔";position:absolute;bottom:-6px;right:-4px;font-size:9px; background:var(--accent-2);color:var(--accent-ink);border-radius:6px;padding:0 3px;font-weight:800} .sticker-btn.shiny{box-shadow:inset 0 0 0 2px var(--gold)} .sticker-btn.shiny::before{content:"✨";position:absolute;top:-7px;left:-5px;font-size:9px;text-shadow:0 0 4px rgba(0,0,0,.6)} .sticker-btn.shiny:not(.has):not(.sel):not(.nostock):not(.selout){background:linear-gradient(150deg,var(--gold-quiet),var(--surface-2));color:var(--gold-soft)} .sticker-btn.ace{box-shadow:inset 0 0 0 2px var(--violet)} .sticker-btn.ace::before{content:"⭐";position:absolute;top:-7px;left:-5px;font-size:9px;text-shadow:0 0 4px rgba(0,0,0,.6)} .sticker-btn.ace:not(.has):not(.sel):not(.nostock):not(.selout){background:linear-gradient(150deg,var(--violet-quiet),var(--surface-2));color:var(--violet)} .sticker-btn .acen{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:9.5px; font-weight:700;opacity:.85;line-height:1.2;margin-top:2px;white-space:normal;overflow:hidden; text-overflow:ellipsis;overflow-wrap:break-word;word-break:break-word} .sticker-btn .acestar{display:inline-block;font-size:8px;margin-left:2px;vertical-align:middle} .qty-badge{position:absolute;top:-6px;right:-6px;background:var(--qty);color:var(--qty-ink);font-size:9.5px; font-weight:800;border-radius:9px;padding:1px 5px;min-width:16px} .dem-badge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:9.5px; font-weight:800;border-radius:9px;padding:1px 5px;min-width:16px} .acelist{font-size:10.5px;color:var(--violet);background:var(--violet-quiet);border:1px solid var(--violet-line);border-radius:9px; padding:6px 10px;margin:0 auto 10px;max-width:280px;line-height:1.5;text-align:center} /* ================= BOTÕES / CARDS ================= */ .actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:22px 0 14px} .btn{background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:11px 20px;border-radius:10px; font-size:13.5px;cursor:pointer;font-weight:600;transition:.15s;font-family:inherit} .btn:hover{background:var(--surface-3);border-color:var(--border-2);transform:translateY(-1px)} .btn:active{transform:scale(.96)} .btn.green{background:var(--accent-2);border-color:var(--accent);color:var(--accent-ink)} .btn.green:hover{background:var(--accent);color:var(--accent-ink)} .btn.gold{background:var(--gold-btn);border-color:var(--gold);color:#fff}.btn.gold:hover{background:var(--gold);color:#1a1206} .btn.red{background:var(--danger-quiet);border-color:var(--danger-line);color:var(--danger)}.btn.red:hover{background:var(--danger-line);color:#fff} .btn.blue{background:var(--info-btn);border-color:var(--info-line);color:#fff}.btn.blue:hover{background:var(--info-line)} .btn-sm{padding:7px 13px;font-size:12px;border-radius:8px} .out{background:var(--ground-2);border:1px solid var(--border);border-radius:var(--radius);padding:17px;margin-top:10px; white-space:pre-wrap;font-family:'Courier New',monospace;font-size:13px;line-height:1.7;color:var(--text-soft); max-height:440px;overflow-y:auto;display:none} .card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:14px 17px;margin-bottom:11px;box-shadow:var(--shadow-1)} .card.dem{border-color:var(--danger-line);background:linear-gradient(160deg,var(--danger-quiet),var(--surface) 60%)} .card.sale{border-color:var(--accent-line)} .card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .card-title{font-weight:700;font-size:14.5px;color:var(--text)} .card-meta{font-size:11.5px;color:var(--muted);margin-left:auto} .card-sub{font-size:12px;color:var(--text-soft);margin-top:5px;line-height:1.5} .card-ace{font-size:11.5px;color:var(--violet);margin-top:5px} .card-actions{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap} .empty{text-align:center;color:var(--muted);font-size:13px;padding:30px 0;line-height:1.7} .divider{border-top:1px dashed var(--border-2);margin:28px 0} .warn{background:var(--gold-quiet);border:1px solid var(--gold-line);border-radius:11px;padding:12px 15px;font-size:12.5px; line-height:1.6;margin:14px 0;color:var(--gold-soft);display:none} .warn.info{background:var(--info-quiet);border-color:var(--info-line);color:var(--info)} .orc-add{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap} .orc-add input{flex:1;min-width:180px} .orc-add button{flex:0 0 auto} .acebox{background:var(--violet-quiet);border:1px solid var(--violet-line);border-radius:11px;padding:11px 15px;font-size:12.5px; line-height:1.7;margin:0 0 16px;color:var(--violet);display:none} .acebox b{color:var(--text)} .badge{display:inline-block;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:2px 9px;font-size:11px;margin:2px 5px 2px 0;color:var(--text-soft)} .badge.ok{background:var(--accent-quiet);border-color:var(--accent-line);color:var(--accent)} .badge.sh{background:var(--gold-quiet);border-color:var(--gold-line);color:var(--gold-soft)} .badge.ac{background:var(--violet-quiet);border-color:var(--violet-line);color:var(--violet)} .badge.dm{background:var(--danger-quiet);border-color:var(--danger-line);color:var(--danger)} .badge.so{background:var(--danger-quiet);border-color:var(--accent);color:var(--danger-ink)} .legend{display:flex;justify-content:center;gap:13px;font-size:11px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap} .legend span{display:flex;align-items:center;gap:5px} .dot{width:11px;height:11px;border-radius:3px;display:inline-block} .chk{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--text-soft);margin-bottom:16px;cursor:pointer} .chk input{width:auto} /* ================= SWITCH ================= */ .switch{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px; padding:7px 13px 7px 9px;cursor:pointer;font-size:11.5px;font-weight:700;color:var(--muted);transition:.15s;user-select:none} .switch:hover{border-color:var(--border-2)} .switch .track{width:32px;height:17px;background:var(--border-2);border-radius:10px;position:relative;transition:.2s;flex:0 0 32px} .switch .track::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;background:var(--surface);border-radius:50%;transition:.2s} .switch.on{border-color:var(--gold-line);color:var(--gold-soft);background:var(--gold-quiet)} .switch.on .track{background:var(--gold)} .switch.on .track::after{left:17px;background:var(--ground)} .banner{background:var(--gold-quiet);border:1px solid var(--gold-line);border-radius:11px;padding:10px 14px;font-size:12px; line-height:1.5;color:var(--gold-soft);margin-bottom:16px;text-align:center;display:none} .banner.show{display:block} /* ================= DEMANDA ================= */ .demrow{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:12px; padding:11px 14px;margin-bottom:9px} .demrow.hot{border-color:var(--danger-line);background:linear-gradient(90deg,var(--danger-quiet),var(--surface) 60%)} .demrow .rank{flex:0 0 32px;height:32px;border-radius:9px;background:var(--surface-3);display:flex;align-items:center; justify-content:center;font-weight:800;font-size:12.5px;color:var(--muted)} .demrow.hot .rank{background:var(--danger-quiet);color:var(--danger)} .demrow .info{flex:1;min-width:0} .demrow .code{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--text)} .demrow .who{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45} .demrow .cnt{flex:0 0 auto;font-size:11px;font-weight:800;background:var(--danger-quiet);border:1px solid var(--danger-line); color:var(--danger);border-radius:9px;padding:3px 9px} .tagshiny{font-size:9px;font-weight:800;color:var(--gold-soft);background:var(--gold-quiet);border:1px solid var(--gold-line);border-radius:6px;padding:1px 5px} .tagace{font-size:9px;font-weight:800;color:var(--violet);background:var(--violet-quiet);border:1px solid var(--violet-line);border-radius:6px;padding:1px 5px} /* ================= TESTES ================= */ .test-row{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;line-height:1.5} .test-row .st{flex:0 0 20px;font-weight:800} .test-row.pass .st{color:var(--accent)}.test-row.fail .st{color:var(--danger)} .test-row .msg{color:var(--muted);font-size:11.5px;display:block} .test-grp{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);margin:18px 0 4px} .test-sum{font-size:15px;font-weight:800;text-align:center;padding:13px;border-radius:12px;margin-bottom:16px} .test-sum.ok{background:var(--accent-quiet);border:1px solid var(--accent-line);color:var(--accent)} .test-sum.bad{background:var(--danger-quiet);border:1px solid var(--danger-line);color:var(--danger)} /* ================= MODAL ================= */ .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;display:none; align-items:flex-start;justify-content:center;padding:40px 15px;overflow-y:auto} .modal-bg.show{display:flex} .modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:620px;width:100%;padding:26px 28px;position:relative;box-shadow:var(--shadow-2)} .modal h3{margin:0 0 4px;font-size:20px;color:var(--accent)} .modal .msub{font-size:12.5px;color:var(--muted);margin-bottom:20px} .modal .close{position:absolute;top:14px;right:16px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft); width:30px;height:30px;border-radius:50%;cursor:pointer} /* guia longo: rola dentro do próprio modal e mantém o ✕ sempre à vista */ #helpModal .modal{max-height:calc(100vh - 64px);overflow-y:auto} #helpModal .modal .close{position:sticky;float:right;top:0;right:0;margin:-6px -6px 4px 12px} .step{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--border)} .step:last-child{border:none} .step .n{flex:0 0 30px;height:30px;background:var(--accent-2);border-radius:9px;display:flex;align-items:center; justify-content:center;font-weight:800;font-size:13px;color:var(--accent-ink)} .step .n.g{background:var(--gold-btn);color:#ffe9a8}.step .n.p{background:var(--violet-line);color:#e4d0ff} .step .n.b{background:var(--info-btn);color:#bfe0f5}.step .n.r{background:var(--danger-line);color:#ffc9c9} .step .txt{font-size:13px;line-height:1.65;color:var(--text-soft)} .step .txt .t{display:block;font-weight:700;font-size:14px;margin-bottom:3px;color:var(--text)} .modal .sec{font-weight:800;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--accent); margin:22px 0 2px;padding-top:14px;border-top:1px solid var(--border)} .modal .sec.first{border-top:none;padding-top:0;margin-top:8px} .modal .flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;font-weight:700; color:var(--text-soft);margin:8px 0 4px} .modal .flow b{background:var(--accent-quiet);border:1px solid var(--accent-line);color:var(--accent); border-radius:7px;padding:3px 8px} .modal .flow i{color:var(--muted);font-style:normal} .tip{background:var(--accent-quiet);border:1px solid var(--accent-line);border-radius:10px;padding:11px 14px;font-size:12.5px; line-height:1.6;margin-top:16px;color:var(--accent)} kbd{background:var(--surface-3);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;font-size:11px;color:var(--text)} code{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:11.5px;color:var(--text-soft)} /* ================= SCANNER ================= */ .scan-wrap{position:relative;max-width:440px;margin:0 auto 12px;border-radius:14px;overflow:hidden; background:#000;border:1px solid var(--border);min-height:130px} #scanVideo{width:100%;display:block} .scan-roi{display:none} .roi-c{position:absolute;width:22px;height:22px;border:3px solid var(--accent)} .roi-c.tl{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:10px 0 0 0} .roi-c.tr{top:-2px;right:-2px;border-left:none;border-bottom:none;border-radius:0 10px 0 0} .roi-c.bl{bottom:-2px;left:-2px;border-right:none;border-top:none;border-radius:0 0 0 10px} .roi-c.br{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 10px 0} .roi-tip{position:absolute;left:0;right:0;bottom:-25px;text-align:center;font-size:10.5px; color:var(--accent);opacity:.75;letter-spacing:.5px} .scan-flash{position:absolute;inset:0;background:var(--accent);opacity:0;pointer-events:none;transition:opacity .12s} .scan-flash.on{opacity:.32} .scan-flash.bad{background:var(--danger)} .scan-result{min-height:96px;background:var(--ground-2);border:1px solid var(--border);border-radius:14px; padding:14px;margin-bottom:12px;text-align:center} .sr-idle{font-size:12.5px;color:var(--muted);padding:16px 0;line-height:1.6} .sr-ok .sr-code{font-size:31px;font-weight:800;color:var(--accent);letter-spacing:1px;line-height:1.15} .sr-ok .sr-team{font-size:13px;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap} .sr-meta{font-size:11px;color:var(--muted);margin-top:6px} .sr-qty{display:inline-block;background:var(--accent-quiet);border:1px solid var(--accent-line);color:var(--accent); border-radius:8px;padding:2px 9px;font-size:11.5px;font-weight:700;margin-top:8px} .sr-bar{height:5px;background:var(--surface-3);border-radius:4px;overflow:hidden;margin:10px auto 0;max-width:210px} .sr-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--danger),var(--qty),var(--accent-2));transition:.3s} .sr-ask{font-size:12.5px;color:var(--gold-soft);margin-bottom:9px;font-weight:600} .sr-cands{display:flex;gap:7px;justify-content:center;flex-wrap:wrap} .sr-cand{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:8px 12px;cursor:pointer; font-size:12.5px;font-weight:700;color:var(--text);transition:.15s;display:flex;align-items:center;gap:7px;font-family:inherit} .sr-cand:hover{border-color:var(--accent);background:var(--accent-quiet)} .sr-cand small{font-weight:600;color:var(--faint);font-size:10px} .sr-cand img{width:19px;height:14px;border-radius:2px} .sr-fail{font-size:13px;color:var(--danger);font-weight:600;padding:12px 0} .sr-fail span{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:5px} .sr-scan{font-size:12.5px;color:var(--info);padding:16px 0;font-weight:600} .scan-opts{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;font-size:12px} .scan-session{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:6px} .ss-chip{display:flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--border); border-radius:16px;padding:4px 9px;font-size:11.5px;font-weight:700;color:var(--text-soft)} .ss-chip img{width:17px;height:13px;border-radius:2px} .ss-chip button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px;padding:0 1px;line-height:1} .ss-chip.new{animation:ssin .32s} @keyframes ssin{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}} /* ================= NUVEM ================= */ .cloud-box{background:var(--info-quiet);border:1px solid var(--info-line);border-radius:12px;padding:12px 14px; margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--text-soft)} .cloud-box .cb-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .cloud-box .cb-ic{font-size:17px} .cloud-box b{color:var(--info)} .cloud-box .cb-mail{font-size:11.5px;color:var(--muted);word-break:break-all} .cloud-box .cb-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap} .cloud-box input{margin-top:7px} .cb-hint{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.5} .cloud-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--faint); box-shadow:0 0 0 2px rgba(127,127,127,.12)} .cloud-dot.on{background:var(--accent-2);animation:cbp 2.4s infinite} .cloud-dot.sync{background:var(--qty);animation:cbp .9s infinite} .cloud-dot.off{background:var(--danger)} @keyframes cbp{0%,100%{opacity:1}50%{opacity:.35}} .cloud-chip{display:flex;align-items:center;gap:7px;background:var(--info-quiet);border:1px solid var(--info-line); border-radius:20px;padding:7px 12px;font-size:11px;font-weight:700;color:var(--info); cursor:pointer;margin-bottom:9px} .cloud-chip:hover{border-color:var(--info)} /* ================= TOAST ================= */ #toast{position:fixed;bottom:92px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--accent-2); color:var(--accent-ink);padding:12px 22px;border-radius:10px;font-weight:700;font-size:13.5px;opacity:0; transition:.3s;pointer-events:none;z-index:400;max-width:90%;text-align:center; box-shadow:var(--shadow-2)} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} #toast.warn2{background:var(--qty);color:#241503} #toast.err{background:var(--danger);color:#fff} .hidden{display:none} /* ================= CONFIGURAÇÕES ================= */ .cfg-list{display:flex;flex-direction:column;gap:10px} .cfg-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1)} .cfg-card.cloud{background:var(--info-quiet);border-color:var(--info-line)} .cfg-head{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:0; padding:13px 14px;cursor:pointer;color:var(--text);text-align:left;font-family:inherit} .cfg-ic{flex:0 0 34px;height:34px;border-radius:10px;background:var(--surface-2);display:flex; align-items:center;justify-content:center;font-size:16px} .cfg-card.cloud .cfg-ic{background:var(--info-quiet)} .cfg-title{flex:1;min-width:0} .cfg-title b{display:block;font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3} .cfg-card.cloud .cfg-title b{color:var(--info)} .cfg-title i{display:block;font-size:10.5px;color:var(--muted);font-style:normal;margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cfg-chev{color:var(--faint);font-size:13px;transition:transform .2s} .cfg-card.open .cfg-chev{transform:rotate(180deg)} .cfg-body{display:none;padding:12px 14px 15px;border-top:1px solid var(--border)} .cfg-card.cloud .cfg-body{border-top-color:var(--info-line)} .cfg-card.open .cfg-body{display:block} .cfg-lbl{display:block;font-size:10px;color:var(--muted);margin:12px 0 5px;letter-spacing:.6px; text-transform:uppercase;font-weight:700} .cfg-body>.cfg-lbl:first-child{margin-top:2px} .cfg-hint{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.5} .cfg-sec{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint); font-weight:800;margin:0 4px 11px} .cfg-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .cfg-tile{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surface); border:1px solid var(--border);border-radius:12px;padding:15px 6px;cursor:pointer;color:var(--text-soft);font-family:inherit} .cfg-tile:hover{background:var(--surface-2);border-color:var(--accent-line)} .cfg-tile span:first-child{font-size:21px} .cfg-tile span:last-child{font-size:12px;font-weight:700} .cfg-ver{text-align:center;color:var(--faint);font-size:11px;margin-top:26px} /* seletor de tema (escuro / claro / auto) — no card Exibição e no rodapé do drawer */ .theme-seg{display:flex;gap:6px} .theme-seg button{flex:1;appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--muted); font:inherit;font-size:12px;font-weight:600;padding:9px 6px;border-radius:10px;cursor:pointer;transition:.15s; display:flex;flex-direction:column;align-items:center;gap:6px} .theme-seg button:hover{color:var(--text);border-color:var(--border-2)} .theme-seg button[aria-pressed="true"]{border-color:var(--accent);color:var(--text);background:var(--accent-quiet)} .theme-seg .sw{width:100%;height:16px;border-radius:5px;border:1px solid var(--border)} .theme-seg .sw.dark{background:linear-gradient(120deg,#0e1211 52%,#63d6a0 52%)} .theme-seg .sw.light{background:linear-gradient(120deg,#ffffff 52%,#0f8f56 52%)} .theme-seg .sw.auto{background:linear-gradient(120deg,#0e1211 50%,#ffffff 50%)} .drawer-foot .theme-seg{margin-top:9px} .drawer-foot .theme-seg button{padding:7px 4px;font-size:11px} @media(min-width:900px){ .tabbar{display:none} body{padding-bottom:40px;padding-left:308px} #toast{bottom:26px} .drawer{transform:none;box-shadow:none;transition:none} .drawer-bg{display:none!important} #btnMenu,#btnDrawerClose{display:none} .burger-pill{display:none} } @media(min-width:900px) and (max-width:1040px){ body{padding-left:0} .drawer{transform:translateX(-104%)} .drawer.show{transform:translateX(0)} .drawer-bg{display:block!important} #btnMenu{display:flex} } @media(max-width:480px){ .wrapper{padding:18px 11px 0} .stickers{max-width:100%;gap:7px} .tname{font-size:13.5px} .fimg{width:29px;height:22px} .brand{font-size:15px} h2{font-size:19px} } /* ================= SCAN BOX DINÂMICO ================= */ #scanBox{position:absolute;border:2px solid var(--info);border-radius:8px; box-shadow:0 0 0 9999px rgba(0,0,0,.35);transition:all .12s ease; pointer-events:none;opacity:.35} /* ===== Toggle "Nomes dos jogadores" ===== Mantém as 5 colunas de sempre — só o quadrado vira um retângulo em pé, com o nome quebrando em até 2 linhas (em vez de cortar com "..."). Altura fixa (não só min-height) pra todo botão ficar realmente do mesmo tamanho. */ .acen{ display:block; font-size:.62em; line-height:1.05; font-weight:500; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } /* altura fixa aqui é essencial, não só estética: sem ela, o -webkit-box do line-clamp muda de tamanho conforme o nome tem 1, 2, 3 ou 4 linhas, e isso empurra a estrela/número ANTES dele no fluxo pra cima ou pra baixo — um comportamento estranho do -webkit-box com irmãos, não é só o que vem depois que se ajusta. Fixando a altura, todo card fica com o número exatamente na mesma posição, tenha o jogador nome curto ou nome de 4 linhas. */ .sticker-btn.haveName .acen{font-size:8.5px;text-transform:uppercase;letter-spacing:.2px;height:41px} /* craque: a estrela vira linha própria acima do número — na mesma linha ela desloca o número do centro (o texto "16⭐" inteiro é que fica centralizado, não o número sozinho). A linha existe em TODO card (craque ou não) — só fica invisível nos outros — pra reservar a mesma altura e manter todos os números alinhados na mesma posição vertical. */ .sticker-btn.haveName .acestar{display:block;margin:0 0 1px;font-size:11px;vertical-align:initial} .sticker-btn.haveName .acestar.hide{visibility:hidden} .sticker-btn.haveName{ height:100px; width:70px; padding:8px 3px 3px; font-size:20px; margin:0 auto; } .sticker-btn.haveName.havePrice{height:110px} /* FWC: nomes de especial (ex.: "MASCOTES OFICIAIS", "ALEMANHA OCIDENTAL 1974") sao mais longos que nome de jogador e encostavam na borda — mais respiro lateral só aqui, nao mexe nos cards de selecao normal */ .sticker-btn.fwcbtn.haveName{padding-left:6px;padding-right:6px} /* 70px fixo em 5 colunas não cabe em tela estreita — encolhe só a largura aqui (media query depois da regra dos 70px, pra realmente vencer); a altura (100/110px) continua igual em qualquer tamanho de tela */ @media(max-width:480px){ body.show-players .stickers{grid-template-columns:repeat(5,minmax(0,1fr))} .sticker-btn.haveName{width:100%} } /* ================= PREÇOS ================= */ .badge.mn{background:var(--accent-quiet);border-color:var(--accent);color:var(--accent);font-weight:800} /* preço dentro do quadradinho */ .sticker-btn .pr{display:block;font-size:7.5px;font-weight:800;line-height:1.1;margin-top:1px; opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .sticker-btn.havePrice{height:auto;min-height:44px;padding-bottom:2px} /* grade só-leitura (detalhe da venda) */ .sticker-btn.ro{cursor:default} .sticker-btn.ro:hover{transform:none;background:var(--surface-2);border-color:var(--border)} .sticker-btn.ro.sel:hover,.sticker-btn.ro.has:hover{background:var(--accent-2);border-color:var(--accent)} .sticker-btn.ro:active{transform:none} /* resumo por categoria */ .price-break{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:0 0 16px} .price-break .pb{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border); border-radius:10px;padding:6px 11px;font-size:11.5px;color:var(--text-soft)} .price-break .pb b{color:var(--text);font-weight:700} .price-break .pb i{font-style:normal;color:var(--muted);font-size:10.5px} .price-break .pb .v{margin-left:2px;font-weight:800;color:var(--accent)} .price-break .pb.tot{background:var(--accent-quiet);border-color:var(--accent-line)} .price-break .pb.tot .v{color:var(--accent);font-size:13px} /* tabela de preços */ .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin-bottom:6px} .price-cell{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 13px} .price-cell label{display:block;font-size:11.5px;font-weight:700;color:var(--text-soft);margin-bottom:3px} .price-cell .ph{display:block;font-size:10px;color:var(--muted);line-height:1.4;margin-bottom:8px} .price-cell .inp{display:flex;align-items:center;gap:7px} .price-cell .inp span{font-size:12px;color:var(--muted);font-weight:700} .price-cell input{padding:8px 10px;font-size:13px;font-weight:700;text-align:right} .price-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border); border-radius:11px;padding:9px 13px;margin-bottom:8px} .price-row.fwc{border-color:var(--gold-line);background:linear-gradient(90deg,var(--gold-quiet),var(--surface) 60%)} .price-row.craque{border-color:var(--violet-line);background:linear-gradient(90deg,var(--violet-quiet),var(--surface) 60%)} .price-row .pr-ic{flex:0 0 30px;height:30px;border-radius:9px;background:var(--surface-2);display:flex; align-items:center;justify-content:center;font-size:14px} .price-row .pr-tx{flex:1;min-width:0} .price-row .pr-tx b{display:block;font-size:13px;color:var(--text);font-weight:700} .price-row .pr-tx i{display:block;font-size:10.5px;color:var(--muted);font-style:normal;margin-top:2px} .price-row input{flex:0 0 84px;padding:7px 9px;font-size:13px;font-weight:700;text-align:right} .price-row button{flex:0 0 auto;background:var(--danger-quiet);border:1px solid var(--danger-line);color:var(--danger); width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:13px;padding:0} .price-row button:hover{background:var(--danger-line);color:#fff} .price-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface-2); border:1px dashed var(--border-2);border-radius:11px;padding:11px 13px;margin-top:12px} .price-add select{flex:1;min-width:150px} .price-add input{flex:0 0 92px;text-align:right;font-weight:700} @media(max-width:480px){ .price-add select{flex:1 1 100%} .price-add input{flex:1} }