:root{--bg: #121212;--panel: rgba(26, 26, 26, .9);--line: rgba(255, 138, 0, .28);--gold: #ff8a00;--gold-2: #ffb347;--text: #fff7ed;--muted: #c9b8a8;--danger: #ff5c5c;--ok: #4ade80;--shadow: 0 18px 50px rgba(0, 0, 0, .4);--radius: 20px;--tap: 44px}*{box-sizing:border-box}html,body,#root{min-height:100%}html{-webkit-text-size-adjust:100%}body{margin:0;color:var(--text);font-family:Manrope,sans-serif;background:radial-gradient(900px 480px at 8% -8%,rgba(255,138,0,.2),transparent 55%),radial-gradient(700px 420px at 100% 0%,rgba(255,92,0,.12),transparent 48%),linear-gradient(180deg,#1c1c1c 0%,var(--bg) 46%,#0a0a0a 100%)}.app{width:min(1180px,calc(100% - 24px));margin:0 auto;padding:20px 0 calc(32px + env(safe-area-inset-bottom))}.hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch;margin-bottom:20px}.hero:has(.api-box){grid-template-columns:minmax(0,1.2fr) minmax(260px,.9fr)}.banner{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fbbf2414}.brand{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.crest{flex:0 0 112px;width:112px;height:112px;display:grid;place-items:center;background:transparent;border:0;box-shadow:none}.crest img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}.eyebrow{margin:0 0 2px;color:var(--gold);font-size:11px;letter-spacing:.16em;text-transform:uppercase}.brand h1{margin:0;font-family:Cinzel,serif;letter-spacing:.08em;font-size:clamp(22px,4vw,30px)}.brand p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.4}.api-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:grid;gap:8px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.api-row{display:flex;gap:8px}.api-row input{min-width:0}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-height:var(--tap);border:1px solid var(--line);background:#1a1a1a;color:var(--text);border-radius:12px;padding:10px 12px;outline:none;font-size:16px}textarea{min-height:88px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px #ff8a002e}.field{display:grid;align-content:start;gap:6px}.form-row .field{grid-template-rows:16px var(--tap) 2.8em;align-items:stretch}.field-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);min-height:16px}.field-hint,.hint,.muted-copy{color:var(--muted);font-size:12px;line-height:1.4}.field-hint{min-height:1.4em}.form-row .field-hint{min-height:2.8em}.hint{margin:0 0 12px;font-size:13px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.prefix-input{display:flex;align-items:center;width:100%;height:var(--tap);min-height:var(--tap);max-height:var(--tap);background:#1a1a1a;border:1px solid var(--line);border-radius:12px}.prefix-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px #ff8a002e}.prefix-input span{flex:0 0 auto;padding:0 0 0 12px;color:var(--gold);font-weight:700;line-height:1}.prefix-input input{border:0;background:transparent;height:100%;min-height:0;max-height:none;padding:0 12px;box-shadow:none}.prefix-input input:focus{border:0;box-shadow:none}.btn{border:0;cursor:pointer;border-radius:12px;min-height:var(--tap);padding:10px 14px;font-weight:700;color:#1a1a1a;background:linear-gradient(180deg,var(--gold-2),var(--gold));white-space:nowrap}.btn.secondary,.btn.icon{background:transparent;color:var(--text);border:1px solid var(--line)}.btn.icon{width:var(--tap);padding:0;font-size:20px}.btn.danger{background:linear-gradient(180deg,#ff8a9a,var(--danger));color:#2a0610;border:0}.btn:disabled{opacity:.55;cursor:not-allowed}.tabs{display:flex;gap:8px;margin:4px 0 16px;position:sticky;top:8px;z-index:5;padding:8px;border-radius:999px;background:#141414e0;border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.tab{flex:1;background:transparent;color:var(--muted);border:0;min-height:var(--tap);padding:10px 12px;border-radius:999px;cursor:pointer;font-weight:700}.tab.active{color:#1a1a1a;background:var(--gold)}.refresh{margin-left:auto}.status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.status.warn{color:#fbbf24}.dot{width:8px;height:8px;border-radius:50%;background:#fbbf24}.dot.ok{background:var(--ok)}.dot.bad{background:var(--danger)}.grid{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.card h2{margin:0 0 14px;font-size:18px}.form{display:grid;gap:12px}.form-actions{display:flex;gap:8px;flex-wrap:wrap}.form-actions .btn{flex:1 1 140px}.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:12px}.toolbar select{grid-column:1 / -1}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}th{color:var(--gold);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:36px;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700}.badge.ok{background:#4ade8026;color:var(--ok)}.badge.warn{background:#fbbf2426;color:#fbbf24}.badge.muted{background:#b7a8c91f;color:var(--muted)}.row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.toast{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));margin:0 auto;max-width:420px;background:#1a1a1a;border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);z-index:30}.toast.error{border-color:var(--danger)}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.stat{padding:14px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}.stat span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.stat strong{font-size:clamp(20px,5vw,28px);font-family:Cinzel,serif}.empty{color:var(--muted);padding:24px 8px;text-align:center}.modal-backdrop{position:fixed;inset:0;background:#0000009e;display:grid;place-items:end center;z-index:40;padding:16px}.modal{width:min(440px,100%);background:#1a1a1a;border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:env(safe-area-inset-bottom)}.modal h3{margin:0 0 8px}.modal p{margin:0 0 16px;color:var(--muted)}@media(min-width:760px){.tab{flex:0 1 auto;min-width:148px}.toolbar{display:flex;flex-wrap:wrap}.toolbar input,.toolbar select{width:auto;flex:1 1 180px;min-width:140px}.toolbar select{grid-column:auto;min-width:180px}.modal-backdrop{place-items:center}}@media(max-width:920px){.hero,.hero.has-api,.grid,.stats{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.refresh{flex:0 0 auto}}@media(max-width:720px){.app{width:min(100% - 16px,1180px)}.form-row{grid-template-columns:1fr}.brand{align-items:flex-start}.tabs{top:0;border-radius:18px}.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table tr{background:#1a1a1ab3;border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:10px}.responsive-table td{display:flex;justify-content:space-between;gap:12px;border:0;padding:8px 0}.responsive-table td:before{content:attr(data-label);color:var(--gold);font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex:0 0 88px}.responsive-table td[data-label=Produto]{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:start}.responsive-table td[data-label=Produto]:before{grid-row:1 / span 2}.responsive-table td[data-label=Produto] strong,.responsive-table td[data-label=Produto] .muted-copy{grid-column:2}.responsive-table td[data-label=Ações]{display:block}.responsive-table td[data-label=Ações] .row-actions,.responsive-table td[data-label=Estoque] .row-actions{width:100%;justify-content:flex-end}}