:root{
  --navy:#0A1B2E; --navy2:#0F2740; --panel:#12314f; --line:#1e4166;
  --ink:#eaf2fb; --muted:#9db4cc; --blue:#3AA6E0; --blue2:#2E8FCB;
  --green:#31BC63; --green2:#23A455; --red:#E52320; --amber:#f0a83a;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue2)}
h1{font-size:1.5rem;margin:.2rem 0 .3rem}
h2{font-size:1.05rem;margin:0 0 .8rem;color:var(--ink)}
.muted{color:var(--muted)}

.topbar{display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.2rem;
  background:linear-gradient(180deg,var(--navy2),var(--navy));border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10}
.brand{font-weight:800;letter-spacing:.5px;color:#fff}
.brand span{color:var(--blue);font-weight:600}
.brand.big{font-size:2rem}
.mainnav{display:flex;gap:.3rem;flex:1;flex-wrap:wrap}
.mainnav a{padding:.4rem .7rem;border-radius:8px;color:var(--muted);font-weight:600;font-size:.9rem}
.mainnav a:hover{background:var(--panel);color:var(--ink)}
.mainnav a.on{background:var(--blue2);color:#fff}
.mainnav a.soon{opacity:.45;cursor:not-allowed}
.user{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.9rem}

.wrap{max-width:1080px;margin:0 auto;padding:1.4rem 1.2rem 4rem}

.flash{padding:.7rem 1rem;border-radius:10px;margin:0 0 1rem;border:1px solid var(--line)}
.flash.ok{background:rgba(49,188,99,.12);border-color:var(--green2);color:#c9f5d9}
.flash.warn{background:rgba(240,168,58,.12);border-color:var(--amber);color:#ffe4b8}
.flash.error{background:rgba(229,35,32,.12);border-color:var(--red);color:#ffd0cf}

.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:10px;
  font-weight:700;border:1px solid transparent;cursor:pointer;font-size:.95rem}
.btn.sm{padding:.3rem .6rem;font-size:.82rem}
.btn.primary{background:var(--green2);color:#fff;border-color:var(--green)}
.btn.primary:hover{background:var(--green)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--blue)}

.login{max-width:400px;margin:8vh auto;text-align:center;background:var(--navy2);
  border:1px solid var(--line);border-radius:16px;padding:2.4rem 2rem}
.login .btn{margin:1rem 0 .5rem}
.fineprint{font-size:.78rem;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin:1.2rem 0 2rem}
.card{display:block;background:var(--navy2);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--blue);transform:translateY(-2px)}
.card.disabled{opacity:.55}
.card-k{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)}
.card-v{font-size:1.5rem;font-weight:800;color:#fff;margin:.2rem 0}
.card-d{font-size:.85rem;color:var(--muted)}

.block{background:var(--navy2);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin:0 0 1.2rem}
details.adv summary{cursor:pointer;font-weight:700;color:var(--blue)}
details.adv[open] summary{margin-bottom:.9rem}

.table-scroll{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;min-width:640px}
table.grid th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:600;padding:.3rem .4rem;border-bottom:1px solid var(--line)}
table.grid td{padding:.28rem .4rem;vertical-align:middle}
table.grid td.ck{text-align:center}
table.log{width:100%;border-collapse:collapse;font-size:.85rem}
table.log th{text-align:left;color:var(--muted);border-bottom:1px solid var(--line);padding:.4rem}
table.log td{padding:.4rem;border-bottom:1px solid var(--panel);color:var(--muted)}

input[type=text],input[type=number],select{width:100%;background:var(--navy);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:.4rem .55rem;font-size:.9rem}
input[type=text]:focus,input[type=number]:focus,select:focus{outline:2px solid var(--blue);border-color:var(--blue)}
input.money{max-width:110px;font-variant-numeric:tabular-nums;text-align:right}
input[type=number]{max-width:90px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--green2)}

.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.fields label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--muted)}
.fields label.inline{flex-direction:row;align-items:center;gap:.5rem}
label.full{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--muted);margin-top:.9rem}
label.full textarea{background:var(--navy);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.5rem .6rem;font:inherit;font-size:.9rem;resize:vertical}
label.full textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.newprod .fields{margin-bottom:.9rem}
.stock-sel{max-width:160px;font-size:.82rem;font-weight:600}
.stock-sel.s-in{color:#c9f5d9;border-color:var(--green2)}
.stock-sel.s-low{color:#ffe4b8;border-color:var(--amber)}
.stock-sel.s-out{color:#ffd0cf;border-color:var(--red)}
.btn.danger{background:transparent;border-color:var(--red);color:#ff9d9b}
.btn.danger:hover{background:rgba(229,35,32,.14)}
.danger-zone{margin-top:2rem;padding-top:1.2rem;border-top:1px dashed var(--line)}

/* editor WYSIWYG (richtext.js) */
.rt-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--navy);margin-top:.3rem}
.rt-wrap:focus-within{outline:2px solid var(--blue);border-color:var(--blue)}
.rt-bar{display:flex;flex-wrap:wrap;gap:.25rem;padding:.4rem;background:var(--navy2);border-bottom:1px solid var(--line)}
.rt-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:.28rem .55rem;font-size:.8rem;cursor:pointer;line-height:1}
.rt-btn:hover{border-color:var(--blue);color:#fff}
.rt-btn.rt-b{font-weight:800}.rt-btn.rt-i{font-style:italic}
.rt-ed{min-height:170px;max-height:420px;overflow:auto;padding:.75rem .85rem;color:var(--ink);font-size:.92rem;line-height:1.6}
.rt-ed:focus{outline:none}
.rt-ed p{margin:0 0 .7rem}.rt-ed h2{font-size:1.15rem;margin:1rem 0 .4rem}.rt-ed h3{font-size:1rem;margin:.9rem 0 .3rem}
.rt-ed ul,.rt-ed ol{margin:0 0 .7rem 1.2rem}.rt-ed a{color:var(--blue)}
.rt-ed img{max-width:100%;height:auto;border-radius:6px;margin:.4rem 0}

/* upload de imagem de capa */
.upload-field{display:flex;gap:.4rem;align-items:center}
.upload-field input[type=text]{flex:1;min-width:0}
.upload-field .btn{flex:none;white-space:nowrap}
.cover-preview img{margin-left:.5rem}

.actionbar{position:sticky;bottom:0;display:flex;gap:.8rem;align-items:center;
  padding:1rem;margin-top:1rem;background:linear-gradient(0deg,var(--navy),transparent);
  border-top:1px solid var(--line)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.2rem}