:root { --ink:#203354; --muted:#6b7589; --orange:#ff7124; --yellow:#ffc847; --blue:#25aadd; --purple:#9253cf; --green:#118965; --red:#d94a52; --bg:#f5f6f8; --line:#e3e7ed; --white:#fff; --sidebar:#172945; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,"Segoe UI",Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button,select { cursor:pointer; }
button { color:inherit; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
.brand-mark { display:flex; overflow:hidden; width:46px; height:46px; flex:0 0 auto; border:3px solid #fff; border-radius:50%; box-shadow:0 5px 18px rgba(0,0,0,.14); }
.brand-mark span { display:grid; width:50%; place-items:center; color:#fff; font-weight:900; }
.brand-mark span:first-child { background:var(--orange); } .brand-mark span:last-child { background:var(--blue); }
.login-screen { display:grid; grid-template-columns:minmax(330px,.8fr) minmax(440px,1.2fr); min-height:100vh; }
.login-brand { display:flex; align-items:flex-start; gap:12px; padding:42px; color:#fff; background:var(--sidebar); }
.login-brand strong,.sidebar-brand strong { display:block; font-size:18px; }.login-brand small,.sidebar-brand small { display:block; margin-top:3px; color:#9eb1cc; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.login-brand::after { align-self:center; margin:auto; color:#fff; content:"Catálogo vivo, organizado e sempre pronto para apresentar."; font-family:"Trebuchet MS",sans-serif; font-size:clamp(36px,5vw,72px); font-weight:800; line-height:1.02; }
.login-panel { display:flex; width:min(460px,calc(100% - 40px)); margin:auto; flex-direction:column; }
.eyebrow { margin:0 0 10px; color:var(--orange); font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
h1,h2 { margin-top:0; font-family:"Trebuchet MS",sans-serif; letter-spacing:0; }.login-panel h1 { margin-bottom:12px; font-size:44px; }.login-panel > p:not(.eyebrow,.form-error) { margin:0 0 30px; color:var(--muted); line-height:1.6; }
.login-panel label,.editor-fields > label { display:grid; gap:7px; margin-bottom:16px; }.login-panel label span,.editor-fields label > span,.editor-fields legend { color:#566177; font-size:11px; font-weight:850; text-transform:uppercase; }
input,select,textarea { width:100%; color:var(--ink); background:#fff; border:1px solid #d7dce5; border-radius:5px; outline:none; }input,select { height:44px; padding:0 12px; }textarea { padding:12px; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,170,221,.13); }
.primary-button,.secondary-button,.danger-button { min-height:42px; padding:10px 16px; border:1px solid transparent; border-radius:5px; font-weight:850; }.primary-button { color:#fff; background:var(--orange); }.primary-button:hover { background:#e75f15; }.secondary-button { background:#fff; border-color:#d5dbe4; }.danger-button { color:#fff; background:var(--red); }
.form-error { min-height:20px; color:var(--red); font-size:13px; }
.admin-app { min-height:100vh; }.sidebar { position:fixed; inset:0 auto 0 0; z-index:20; display:flex; width:250px; padding:24px 16px; flex-direction:column; color:#dce5f1; background:var(--sidebar); }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:0 8px 28px; color:#fff; }.sidebar nav { display:grid; gap:5px; }
.nav-item { display:flex; width:100%; min-height:46px; padding:0 13px; align-items:center; gap:12px; color:#aebdd1; background:transparent; border:0; border-radius:6px; font-size:14px; font-weight:750; text-align:left; }.nav-item span { width:22px; font-size:18px; text-align:center; }.nav-item:hover,.nav-item.active { color:#fff; background:#263c5d; }.nav-item.active::after { width:3px; height:22px; margin-left:auto; background:var(--yellow); border-radius:2px; content:""; }
.sidebar-footer { display:grid; gap:8px; margin-top:auto; padding:16px 8px 0; border-top:1px solid rgba(255,255,255,.1); }.sidebar-footer a,.sidebar-footer button { padding:8px 0; color:#aebdd1; background:none; border:0; font-size:12px; text-align:left; text-decoration:none; }.sidebar-footer a:hover,.sidebar-footer button:hover { color:#fff; }
.admin-main { min-height:100vh; margin-left:250px; }.admin-header { position:sticky; top:0; z-index:10; display:flex; height:70px; padding:0 30px; align-items:center; gap:14px; background:rgba(255,255,255,.95); border-bottom:1px solid var(--line); }.admin-header > div:first-of-type span { display:block; color:var(--muted); font-size:10px; font-weight:850; text-transform:uppercase; }.admin-header > div:first-of-type strong { display:block; margin-top:2px; font-size:17px; }.status-pill { display:flex; margin-left:auto; padding:7px 10px; align-items:center; gap:7px; color:var(--green); background:#eaf7f2; border-radius:999px; font-size:11px; font-weight:800; }.status-pill i { width:7px; height:7px; background:currentColor; border-radius:50%; }.status-pill.local { color:#9b6814; background:#fff5d8; }.mobile-menu { display:none; width:40px; height:40px; padding:0; background:#fff; border:1px solid var(--line); border-radius:5px; font-size:20px; }
.admin-content { padding:32px; }.view { display:none; max-width:1380px; margin:auto; }.view.active { display:block; }.page-heading { display:flex; justify-content:space-between; gap:30px; margin-bottom:28px; }.page-heading h1 { margin-bottom:8px; font-size:38px; }.page-heading p:not(.eyebrow) { margin:0; color:var(--muted); }.page-heading .primary-button { align-self:flex-end; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.stats-grid article { min-height:150px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:8px; }.stats-grid article:nth-child(1) { border-top:4px solid var(--orange); }.stats-grid article:nth-child(2) { border-top:4px solid var(--yellow); }.stats-grid article:nth-child(3) { border-top:4px solid var(--blue); }.stats-grid article:nth-child(4) { border-top:4px solid var(--purple); }.stats-grid span { display:block; color:var(--muted); font-size:12px; font-weight:800; }.stats-grid strong { display:block; margin:16px 0 7px; font-family:"Trebuchet MS",sans-serif; font-size:38px; }.stats-grid small { color:#8590a3; }
.dashboard-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:14px; margin-top:14px; }.panel,.table-panel { background:#fff; border:1px solid var(--line); border-radius:8px; }.panel { min-height:360px; padding:22px; }.panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }.panel-heading span { color:var(--muted); font-size:10px; font-weight:850; text-transform:uppercase; }.panel-heading h2 { margin:4px 0 0; font-size:22px; }.panel-heading button { color:var(--orange); background:none; border:0; font-size:12px; font-weight:850; }
.progress-list { display:grid; gap:28px; }.progress-list p { display:flex; justify-content:space-between; margin:0 0 8px; font-size:13px; }.progress { height:8px; overflow:hidden; background:#edf0f4; border-radius:4px; }.progress i { display:block; height:100%; border-radius:4px; }
.recent-list { display:grid; }.recent-list > button { display:grid; grid-template-columns:48px 1fr auto; padding:11px 0; align-items:center; gap:12px; background:none; border:0; border-bottom:1px solid var(--line); text-align:left; }.recent-list img { width:48px; height:48px; object-fit:cover; background:#fffaf4; border-radius:5px; }.recent-list strong,.recent-list small { display:block; }.recent-list small { margin-top:3px; color:var(--muted); font-size:11px; }.recent-list i { color:#a8b1c0; font-size:22px; font-style:normal; }
.table-panel { overflow:hidden; }.table-tools { display:flex; min-height:76px; padding:14px 18px; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }.table-tools label { display:grid; width:min(320px,100%); gap:5px; color:var(--muted); font-size:10px; font-weight:850; text-transform:uppercase; }.table-tools input { height:39px; }.table-tools > span { color:var(--muted); font-size:12px; }.table-scroll { overflow:auto; }table { width:100%; border-collapse:collapse; font-size:13px; }th { padding:13px 16px; color:#7b8598; background:#fafbfc; font-size:10px; text-align:left; text-transform:uppercase; white-space:nowrap; }td { padding:14px 16px; border-top:1px solid var(--line); vertical-align:middle; }td strong,td small { display:block; }td small { max-width:260px; margin-top:4px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.badge { display:inline-flex; margin:2px 4px 2px 0; padding:5px 7px; border-radius:4px; font-size:9px; font-weight:900; text-transform:uppercase; }.badge.success { color:#0c7353; background:#e6f5ef; }.badge.muted { color:#737d8e; background:#eef0f3; }.product-cell { display:flex; min-width:210px; align-items:center; gap:10px; }.product-cell img { width:46px; height:46px; object-fit:cover; background:#fffaf4; border-radius:5px; }.size-list { display:flex; gap:3px; }.size-list span { display:grid; width:24px; height:24px; place-items:center; border:1px solid #d7dce4; border-radius:50%; font-size:9px; font-weight:850; }.row-actions { display:flex; justify-content:flex-end; gap:5px; }.row-actions button { display:grid; width:32px; height:32px; padding:0; place-items:center; background:#fff; border:1px solid #d7dce4; border-radius:5px; }.row-actions button:hover { border-color:var(--blue); }.row-actions .delete:hover { color:var(--red); border-color:var(--red); }.empty-row { padding:25px; color:var(--muted); text-align:center; }
.editor-dialog { width:min(780px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0; border:0; border-radius:8px; box-shadow:0 30px 100px rgba(15,30,54,.3); }.editor-dialog::backdrop,.confirm-dialog::backdrop { background:rgba(18,32,54,.65); backdrop-filter:blur(4px); }.editor-dialog form > header { position:sticky; top:0; z-index:2; display:flex; padding:20px 24px; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }.editor-dialog header span { color:var(--orange); font-size:10px; font-weight:900; text-transform:uppercase; }.editor-dialog h2 { margin:4px 0 0; font-size:25px; }.icon-button { display:grid; width:38px; height:38px; padding:0; place-items:center; background:#fff; border:1px solid var(--line); border-radius:50%; font-size:22px; }.editor-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; padding:24px; }.editor-fields .full { grid-column:1 / -1; }.editor-dialog form > footer { position:sticky; bottom:0; display:flex; padding:16px 24px; justify-content:flex-end; gap:8px; background:#fff; border-top:1px solid var(--line); }.toggle { display:flex !important; margin-top:10px; align-items:center; grid-template-columns:auto !important; gap:8px !important; cursor:pointer; }.toggle input { position:absolute; width:1px; height:1px; opacity:0; }.toggle > span { position:relative; display:block; width:38px; height:22px; background:#ccd2dc; border-radius:11px; }.toggle > span::after { position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; content:""; transition:.2s; }.toggle input:checked + span { background:var(--green); }.toggle input:checked + span::after { transform:translateX(16px); }.toggle strong { font-size:12px; }.editor-fields fieldset { margin:0 0 16px; padding:12px; border:1px solid var(--line); border-radius:6px; }.check-grid { display:flex; gap:7px; margin-top:10px; }.check-grid label { cursor:pointer; }.check-grid input { position:absolute; opacity:0; }.check-grid span { display:grid; width:40px; height:40px; place-items:center; border:1px solid #ccd3de; border-radius:50%; font-size:12px !important; }.check-grid input:checked + span { color:#fff; background:var(--blue); border-color:var(--blue); }.image-upload { display:grid; grid-template-columns:110px 1fr; margin-bottom:20px; padding:14px; align-items:center; gap:16px; background:#f7f8fa; border:1px solid var(--line); border-radius:6px; }.image-preview { display:grid; width:110px; aspect-ratio:1; overflow:hidden; place-items:center; color:var(--muted); background:#fff; border:1px dashed #cbd2dc; border-radius:5px; font-size:11px; }.image-preview img { width:100%; height:100%; object-fit:cover; }.image-upload label { display:grid; gap:7px; }.image-upload input[type=file] { height:auto; padding:8px; }.image-upload small { color:var(--muted); font-size:11px; }
.confirm-dialog { width:min(430px,calc(100vw - 28px)); padding:0; border:0; border-radius:8px; }.confirm-dialog > div { padding:28px; }.confirm-dialog h2 { margin-bottom:8px; }.confirm-dialog p { margin:0 0 24px; color:var(--muted); }.confirm-dialog > div > div { display:flex; justify-content:flex-end; gap:8px; }.toast { position:fixed; right:24px; bottom:24px; z-index:100; max-width:360px; padding:13px 17px; color:#fff; background:var(--green); border-radius:6px; box-shadow:0 15px 40px rgba(0,0,0,.2); opacity:0; transform:translateY(20px); pointer-events:none; transition:.2s; }.toast.error { background:var(--red); }.toast.show { opacity:1; transform:translateY(0); }
@media (max-width:1050px) { .stats-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .login-screen { grid-template-columns:1fr; }.login-brand { min-height:230px; padding:25px; }.login-brand::after { font-size:36px; }.login-panel { padding:45px 0; }.sidebar { transform:translateX(-100%); transition:.2s; box-shadow:15px 0 40px rgba(0,0,0,.2); }.sidebar.open { transform:none; }.admin-main { margin-left:0; }.mobile-menu { display:block; }.admin-header { padding:0 16px; }.admin-content { padding:22px 16px; }.page-heading { align-items:flex-start; flex-direction:column; }.page-heading .primary-button { align-self:stretch; }.editor-fields { grid-template-columns:1fr; }.editor-fields .full { grid-column:auto; }.image-upload { grid-template-columns:80px 1fr; }.image-preview { width:80px; }.status-pill span { display:none; } }
@media (max-width:460px) { .login-brand { min-height:190px; }.login-brand::after { display:none; }.stats-grid { grid-template-columns:1fr 1fr; }.stats-grid article { min-height:130px; padding:16px; }.stats-grid strong { font-size:31px; }.table-tools { align-items:flex-start; flex-direction:column; }.toast { right:14px; bottom:14px; left:14px; }.image-upload { grid-template-columns:1fr; }.image-preview { width:100%; max-height:220px; } }