:root { --bg:#17100c; --panel:#241812; --panel2:#2e201a; --line:rgba(226,214,194,.14); --red:#C9A15E; --red2:#E7CE9B; --danger:#c1584f; --fg:#F3E9DA; --muted:#AF9C86; --ok:#1f9d55; color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); }
a { color:inherit; }
h1 { font-size:1.6rem; margin:4px 0 6px; }
.muted { color:var(--muted); font-size:.92rem; text-decoration:none; }
img { max-width:100%; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px; border:0; border-radius:999px; background:var(--red); color:#2A1D17; font:600 .95rem inherit; font-family:inherit; text-decoration:none; cursor:pointer; transition:background .2s; }
.btn:hover { background:var(--red2); }
.btn--ghost { background:transparent; border:1px solid var(--line); color:var(--fg); }
.btn--ghost:hover { background:var(--panel2); }
.btn--sm { min-height:36px; padding:6px 14px; font-size:.85rem; }
.btn--block { width:100%; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; }

/* login */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 70% 20%, rgba(201,161,94,.3), transparent 55%), var(--bg); }
.login__card { width:min(380px,100%); display:grid; gap:14px; text-align:center; }
.login__card .field { text-align:left; }
.login__logo { display:block; margin:0 auto; }
.login__mark { width:86px; height:86px; border-radius:10px; }
.login h1 { margin:0; }

/* layout */
.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:10px 18px; background:rgba(23,16,12,.93); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top__brand { display:flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; margin-right:auto; }
.top__brand svg { width:34px; height:34px; border-radius:6px; }
.menu-btn { display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:transparent; color:#fff; font-size:1.3rem; cursor:pointer; }
.layout { display:grid; grid-template-columns:260px 1fr; min-height:calc(100vh - 61px); }
.side { border-right:1px solid var(--line); padding:18px 12px; position:sticky; top:61px; height:calc(100vh - 61px); overflow:auto; }
.side nav { display:grid; gap:2px; }
.side a, .side__out { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; text-decoration:none; color:#d6d3d0; font-size:.93rem; background:none; border:0; width:100%; text-align:left; font-family:inherit; cursor:pointer; }
.side a:hover, .side__out:hover { background:var(--panel2); }
.side a.active { background:var(--red); color:#2A1D17; font-weight:600; }
.side a em { font-style:normal; font-size:.75rem; background:rgba(243,233,218,.12); padding:1px 8px; border-radius:999px; }
.side__title { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red2); padding:16px 12px 6px; }
.main { padding:26px clamp(14px,3vw,40px) 80px; max-width:1100px; width:100%; }
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.head p { margin:0; max-width:640px; }

/* lista */
.list { padding:6px; }
.row-item { display:flex; align-items:center; gap:14px; padding:10px; border-radius:12px; }
.row-item + .row-item { border-top:1px solid var(--line); }
.row-item:hover { background:var(--panel2); }
.row-item__thumb { flex:none; width:64px; height:64px; border-radius:10px; overflow:hidden; background:var(--panel2); }
.row-item__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.row-item__txt { flex:1; min-width:0; text-decoration:none; display:grid; }
.row-item__txt strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-item__txt small { color:var(--muted); }
.row-item__act { display:flex; gap:4px; flex:none; }
.row-item__act form { margin:0; }
.ico { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:transparent; color:#fff; text-decoration:none; cursor:pointer; font-size:1rem; }
.ico:hover { background:var(--panel2); }
.ico:disabled { opacity:.3; cursor:default; }
.ico--danger:hover { background:var(--danger); border-color:var(--danger); }

/* formulários */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.field { display:grid; gap:6px; align-content:start; }
.field--wide, .actions { grid-column:1 / -1; }
.field label { font-size:.85rem; font-weight:600; color:#dcd9d6; }
.field label b { color:var(--red2); }
.field input[type=text], .field input[type=url], .field input[type=date], .field input[type=password], .field input:not([type]), .field textarea, .field select {
  width:100%; min-height:44px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#0d0d0f; color:var(--fg); font:inherit; font-size:16px;
}
.field textarea { resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--red2); box-shadow:0 0 0 3px rgba(229,38,47,.18); }
.help { color:var(--muted); font-size:.8rem; }
.img-field { display:flex; gap:14px; align-items:flex-start; }
.img-field > div { flex:1; display:grid; gap:8px; }
.img-prev { width:120px; height:120px; object-fit:cover; border-radius:12px; border:1px solid var(--line); flex:none; background:var(--panel2); }
.thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.thumbs img { width:72px; height:72px; object-fit:cover; border-radius:8px; }
input[type=file] { font-size:.85rem; color:var(--muted); max-width:100%; }
input[type=file]::file-selector-button { margin-right:10px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel2); color:#fff; cursor:pointer; }
.path { font-size:.85rem !important; color:var(--muted) !important; }
.field--check { align-content:center; }
.switch { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.95rem !important; }
.switch input[type=checkbox] { position:absolute; opacity:0; }
.switch span { width:44px; height:24px; border-radius:999px; background:#333; position:relative; transition:.2s; flex:none; }
.switch span::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s; }
.switch input:checked + span { background:var(--red); }
.switch input:checked + span::after { left:23px; }
.switch input:focus-visible + span { outline:2px solid var(--red2); }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.sticky { position:sticky; bottom:0; padding:14px 0 4px; background:linear-gradient(transparent, var(--panel) 30%); }

.flash { padding:12px 16px; border-radius:12px; margin-bottom:16px; border:1px solid; }
.flash--ok { background:rgba(31,157,85,.12); border-color:rgba(31,157,85,.5); }
.flash--erro { background:rgba(193,88,79,.16); border-color:rgba(193,88,79,.55); }

@media (max-width: 860px) {
  .menu-btn { display:block; }
  .layout { grid-template-columns:1fr; }
  .side { position:fixed; z-index:30; top:61px; left:0; bottom:0; width:min(300px,85vw); height:auto; background:var(--bg); transform:translateX(-100%); transition:transform .3s; box-shadow:20px 0 40px rgba(0,0,0,.6); }
  .side.open { transform:none; }
  .form-grid { grid-template-columns:1fr; }
  .main { padding-top:18px; }
  .head .btn { width:100%; }
}
@media (max-width: 520px) {
  .row-item { flex-wrap:wrap; }
  .row-item__txt { flex-basis:calc(100% - 80px); }
  .row-item__act { width:100%; justify-content:flex-end; }
  .img-field { flex-direction:column; }
  .img-prev { width:100%; height:180px; }
  .card { padding:14px; }
}