:root{--bg:#f4f6f8;--panel:#fff;--ink:#17202a;--muted:#69727d;--accent:#c62828;--line:#dfe4ea;--danger:#b42318} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,Arial,sans-serif}.topbar{height:64px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{font-weight:700;font-size:20px}.topbar nav{display:flex;gap:18px}.topbar a{color:#e5e7eb;text-decoration:none}.container{max-width:1480px;margin:0 auto;padding:28px}.hero-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}h1{margin:0 0 6px;font-size:30px}h2{margin:0 0 18px;font-size:20px}p{margin:0;color:var(--muted)}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}.kpi span{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}.kpi strong{font-size:23px}.panel,.update-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:20px}.narrow{max-width:560px}.card-form{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr .6fr;gap:14px;align-items:end}.field{display:flex;flex-direction:column;gap:6px;position:relative}.field.wide{grid-column:span 4}.field label{font-size:13px;color:var(--muted);font-weight:600}input,select{width:100%;height:40px;border:1px solid #cbd2da;border-radius:8px;padding:0 10px;background:#fff;color:var(--ink)}.btn{border:1px solid #cbd2da;background:#fff;color:var(--ink);border-radius:8px;padding:9px 13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.danger{color:var(--danger);border-color:#f1b5af}.btn.small{padding:6px 9px;font-size:12px}.form-actions{display:flex;align-items:end}.form-actions .btn{height:40px}.suggestions{position:absolute;top:66px;left:0;right:0;z-index:30;background:#fff;border:1px solid #cbd2da;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.14);max-height:280px;overflow:auto}.suggestion{padding:9px 11px;cursor:pointer}.suggestion:hover{background:#eef3ff}.hidden{display:none!important}.table-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.search-form{display:flex;gap:8px;min-width:360px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:10px;border-bottom:1px solid #e8ebef;text-align:left;vertical-align:top;white-space:nowrap}th{background:#f7f8fa;color:#525d69;font-size:12px;position:sticky;top:0}.actions{display:flex;gap:6px;align-items:center}.actions form{margin:0}.status{max-width:270px;white-space:normal}.empty{text-align:center;color:var(--muted);padding:28px}.edit-row td{background:#f8fafc}.inline-edit{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr .5fr 2.2fr auto;gap:8px}.update-head{display:flex;justify-content:space-between;margin-bottom:10px}.progress{height:10px;background:#e9edf2;border-radius:99px;overflow:hidden}.progress div{height:100%;width:0;background:var(--accent);transition:width .25s}.muted{color:var(--muted);font-size:13px;margin-top:8px}.settings-form{display:grid;gap:16px}.settings-form input{max-width:220px}@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}.card-form{grid-template-columns:1fr 1fr}.field.wide{grid-column:span 2}.inline-edit{grid-template-columns:1fr 1fr}.topbar{height:auto;padding:14px 18px;gap:10px;align-items:flex-start}.topbar nav{flex-wrap:wrap}.container{padding:18px}}@media(max-width:640px){.kpis{grid-template-columns:1fr}.hero-row,.table-head{align-items:stretch;flex-direction:column}.card-form{grid-template-columns:1fr}.field.wide{grid-column:auto}.search-form{min-width:0}.topbar{flex-direction:column}.inline-edit{grid-template-columns:1fr}} .import-form{display:flex;gap:8px;align-items:center}.import-form input[type=file]{height:auto;max-width:360px;padding:7px}.import-panel h2{margin-bottom:5px} .hero-actions{display:flex;gap:10px;align-items:center}.export-menu{position:relative}.export-menu summary{list-style:none;cursor:pointer;color:#e5e7eb}.export-menu summary::-webkit-details-marker{display:none}.export-options{position:absolute;right:0;top:28px;z-index:50;min-width:180px;background:#111827;border:1px solid #374151;border-radius:8px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.25)}.export-options a{display:block;padding:9px 10px;border-radius:6px;white-space:nowrap}.export-options a:hover{background:#1f2937}@media(max-width:640px){.hero-actions{flex-direction:column;align-items:stretch}} .catalog-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.inline-autocomplete{position:relative}.inline-autocomplete .suggestions{top:42px;min-width:260px}@media(max-width:640px){.catalog-note{align-items:stretch;flex-direction:column}} .select-col{width:38px;text-align:center}.select-col input{width:16px;height:16px;vertical-align:middle}.hero-actions{flex-wrap:wrap} .kpis-six{grid-template-columns:repeat(6,1fr)} .btn.cm{border-color:#1d7a46;color:#1d7a46}.btn.cm:hover{background:#edf8f1} .card-form .wide-half{grid-column:span 2} .inline-edit-dual{grid-template-columns:2fr 1.2fr 1fr 1fr .5fr 2fr 2fr auto} .portal-alert{border-radius:10px;padding:12px 14px;margin-bottom:18px;border:1px solid var(--line);background:#fff}.portal-alert.success{border-color:#9fd5b5;background:#f1fbf5}.portal-alert.error{border-color:#efb0aa;background:#fff5f4} .section-help{margin:-8px 0 18px}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.data-card{border:1px solid var(--line);border-radius:10px;padding:16px}.data-card h3{margin:0 0 8px}.data-card p{margin:4px 0}.upload-inline{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}.upload-inline input[type=file]{height:auto;max-width:380px;padding:7px} @media(max-width:1200px){.kpis-six{grid-template-columns:repeat(3,1fr)}.inline-edit-dual{grid-template-columns:1fr 1fr}} @media(max-width:700px){.kpis-six{grid-template-columns:1fr 1fr}.data-grid{grid-template-columns:1fr}.card-form .wide-half{grid-column:auto}} .section-title-row{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}.status-error{color:#b42318;overflow-wrap:anywhere} .kpis-seven { grid-template-columns: repeat(7, minmax(0, 1fr)); } @media (max-width: 1200px) { .kpis-seven { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .kpis-seven { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cardvault-note{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border:1px solid #b9d7ff;background:#f4f9ff;border-radius:9px;font-size:12px}.cardvault-note span{color:var(--muted)} .cv-suggestion{display:flex;justify-content:space-between;gap:12px;align-items:center}.cv-suggestion small,.cv-mini{color:var(--muted);font-size:11px}.cv-pitch{font-size:10px;border:1px solid #d7dde5;border-radius:99px;padding:2px 6px;color:var(--muted)} .cv-mini{margin-top:3px}.cardvault-print-field{min-width:300px}.card-form{grid-template-columns:1.6fr 1.7fr 1.2fr 1fr 1fr .8fr .6fr}.inline-edit-dual{grid-template-columns:1.7fr 1.6fr 1.2fr 1fr 1fr .5fr 1.8fr 1.8fr 1.8fr auto}.cardvault-print-inline select{min-width:280px} @media(max-width:1200px){.card-form{grid-template-columns:1fr 1fr 1fr}.inline-edit-dual{grid-template-columns:1fr 1fr}} @media(max-width:700px){.card-form{grid-template-columns:1fr}} /* V3.3.12 - organização de ações, imagens Card Vault e câmbio */ .action-groups{align-items:flex-start;gap:12px}.action-group{display:flex;flex-direction:column;gap:5px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#fff}.action-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.action-buttons{display:flex;gap:7px;flex-wrap:wrap}.action-buttons .btn{min-height:36px}.btn:not(.primary):not(.danger){background:#fff;border-color:#cbd2da;color:var(--ink)}.btn:not(.primary):not(.danger):hover{background:#f6f8fb}.btn.danger{background:#fff;color:var(--danger);border-color:#efb0aa}.card-name-cell{display:flex;align-items:center;gap:9px}.card-thumb{width:36px;height:50px;object-fit:cover;border-radius:4px;border:1px solid var(--line);cursor:zoom-in;background:#f3f4f6}.image-modal{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.78);display:flex;align-items:center;justify-content:center;padding:30px}.image-modal img{max-height:90vh;max-width:min(90vw,720px);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.4)}.image-modal-close{position:fixed;right:25px;top:20px;border:0;background:#fff;border-radius:99px;width:40px;height:40px;font-size:26px;cursor:pointer}.cv-preview-wrap:empty{display:none}.cv-form-preview{width:58px;height:81px;object-fit:cover;border-radius:5px;border:1px solid var(--line);cursor:zoom-in}.cardvault-note>div:last-child{display:flex;flex-direction:column;gap:3px}.fx-update-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} @media(max-width:1100px){.hero-row{align-items:flex-start;flex-direction:column}.action-groups{width:100%}.action-group{width:100%}} /* V3.3.27 - autenticação e multiusuário */ .user-chip{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid #374151;border-radius:999px;color:#e5e7eb;font-size:12px;white-space:nowrap}.logout-form{margin:0}.topbar-button{border:1px solid #4b5563;background:transparent;color:#e5e7eb;border-radius:8px;padding:7px 10px;cursor:pointer}.topbar-button:hover{background:#1f2937}.auth-shell{min-height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center;padding:24px}.auth-card{width:min(100%,430px);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:0 18px 50px rgba(15,23,42,.08)}.auth-card h1{margin:6px 0 8px}.auth-card>p{margin-bottom:20px}.auth-brand{font-weight:800;font-size:18px;color:var(--accent)}.auth-form{display:grid;gap:16px}.auth-submit{height:42px;margin-top:4px}.check-line{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13px}.check-line input{width:16px;height:16px}.users-create-panel{max-width:620px}.user-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.password-reset-form{display:flex;gap:6px;align-items:center}.password-reset-form input{width:180px;height:34px}.muted-inline{color:var(--muted);font-size:12px}@media(max-width:700px){.auth-shell{padding:4px;min-height:auto}.auth-card{padding:22px}.user-actions,.password-reset-form{align-items:stretch;flex-direction:column}.password-reset-form input{width:100%}.topbar nav{width:100%;gap:10px}.user-chip{order:8}.logout-form{order:9}} /* ============================================================ FABFOLIO - FILTROS DA COLEÇÃO Layout desktop compacto + responsivo ============================================================ */ #collection-filters { display: grid; grid-template-columns: minmax(170px, 1.35fr) minmax(125px, 0.85fr) minmax(145px, 0.95fr) minmax(155px, 1fr) minmax(145px, 1fr); gap: 8px 10px; align-items: end; margin: 8px 0 10px; padding: 10px; background: #f7f8fa; border: 1px solid #e5e7eb; border-radius: 8px; } /* Selects dos filtros */ #collection-filters select { width: 100%; min-width: 0; height: 34px; padding: 5px 30px 5px 9px; border: 1px solid #cfd5dd; border-radius: 6px; background-color: #fff; font: inherit; font-size: 12px; cursor: pointer; } /* ------------------------------------------------------------ Labels visuais ------------------------------------------------------------ */ #collection-filters select::before { font-weight: 600; } /* Os cinco selects ocupam a primeira linha. Os botões e contador passam para uma segunda linha. */ #select-filtered { grid-column: 1; } #clear-card-selection { grid-column: 2; } #clear-card-filters { grid-column: 3; } #collection-filter-count { grid-column: 4 / 6; display: flex; align-items: center; min-height: 32px; padding-left: 10px; border-left: 1px solid #d1d5db; white-space: nowrap; font-size: 12px; color: #596273; } /* Botões */ #collection-filters .btn { width: 100%; min-height: 32px; margin: 0; padding: 5px 10px; white-space: nowrap; } /* Selecionar filtradas recebe maior destaque */ #select-filtered { font-weight: 600; } /* ------------------------------------------------------------ Labels acima dos filtros Gerados sem alterar o HTML ------------------------------------------------------------ */ #filter-set { grid-column: 1; } #filter-language { grid-column: 2; } #filter-rarity { grid-column: 3; } #filter-treatment { grid-column: 4; } #filter-variant { grid-column: 5; } /* Como os selects atuais não possuem