/* Hook Art Admin — paleta travada do app (LYLTI.SDD/07-perseidas/design-system.md): linho, nata, ameixa,
   rosa-seco (ação), lavanda (seleção), coral (só ponto vivo). Bricolage Grotesque nos títulos, Recursive no texto
   e Recursive Mono em toda contagem. */
:root {
    --linho: #F1E8D7;
    --nata: #FCF7EE;
    --ameixa: #3E3239;
    --ameixa-suave: #7D6F76;
    --rosa: #D492A1;
    --lavanda: #9A8CB8;
    --coral: #E28965;
    --salvia: #B7CAAE;
    --pessego: #F0C79C;
    --manteiga: #F2DE9B;
    --linha: #E2D6C0;
    --erro: #B5453A;
    --ok: #3A7D4A;
    --raio: 12px;
    --fonte: "Recursive", system-ui, sans-serif;
    --titulo: "Bricolage Grotesque", "Recursive", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--linho);
    color: var(--ameixa);
    font: 15px/1.45 var(--fonte);
    font-variation-settings: "CASL" 0, "MONO" 0;
}

h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; margin: 0 0 .4rem; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; margin-top: 1.2rem; }
p { margin: .3rem 0 .8rem; }
code { font-family: var(--fonte); font-variation-settings: "MONO" 1; font-size: .92em; background: var(--linho); padding: 0 .3em; border-radius: 4px; }
a { color: inherit; }

.muted { color: var(--ameixa-suave); }
.small { font-size: .82rem; }
.mono { font-variation-settings: "MONO" 1, "CASL" 1; }

/* ---------- moldura */

.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 24px; background: var(--nata); border-bottom: 1px solid var(--linha);
    position: sticky; top: 0; z-index: 10;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titulo); font-size: 1.1rem; }
.marca img { border-radius: 8px; }
.ambiente { display: flex; align-items: center; gap: 12px; }
.chip { font-variation-settings: "MONO" 1; font-size: .75rem; padding: 2px 10px; border-radius: 20px; background: var(--lavanda); color: #fff; }
.usuario { font-size: .9rem; color: var(--ameixa-suave); }

.corpo { display: grid; grid-template-columns: 200px 1fr; min-height: calc(100vh - 53px); }
.corpo.sem-rail { grid-template-columns: 1fr; }

.rail { padding: 18px 12px; border-right: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; }
.rail p { margin: 14px 10px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ameixa-suave); }
.rail p:first-child { margin-top: 0; }
.rail a { text-decoration: none; padding: 7px 10px; border-radius: 8px; }
.rail a:hover { background: var(--nata); }
.rail a.ativo { background: var(--lavanda); color: #fff; }
.rail form { margin-top: auto; padding-top: 18px; }

.shell { padding: 22px 28px 60px; min-width: 0; }

@media (max-width: 760px) {
    .corpo { grid-template-columns: 1fr; }
    .rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--linha); }
    .rail p { display: none; }
    .rail form { margin: 0 0 0 auto; padding: 0; }
    .shell { padding: 16px; }
}

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.back { display: inline-block; margin-bottom: 6px; font-size: .88rem; text-decoration: none; color: var(--ameixa-suave); }
.back:hover { color: var(--ameixa); }

/* ---------- blocos */

.card { background: var(--nata); border-radius: var(--raio); padding: 16px 18px; margin: 0 0 16px; border: 1px solid var(--linha); }
.flash { padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; }
.flash.ok { background: #E3EEDD; color: var(--ok); }
.flash.err { background: #F6DCD6; color: var(--erro); }
.flash[hidden] { display: none; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.stat b { display: block; font-size: 1.8rem; font-family: var(--titulo); }
.stat span { color: var(--ameixa-suave); font-size: .9rem; }

/* ---------- formulários */

input, select, textarea, button, .button {
    font: inherit; color: var(--ameixa);
    padding: 7px 10px; border: 1px solid var(--linha); border-radius: 8px; background: #fff;
}
textarea { width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lavanda); outline-offset: 1px; }
input[type="file"] { background: transparent; border-style: dashed; }

button, .button { cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2; }
button:hover, .button:hover { border-color: var(--ameixa-suave); }
button.primary, .button.primary { background: var(--rosa); border-color: var(--rosa); color: var(--ameixa); font-weight: 600; }
button.primary:hover, .button.primary:hover { filter: brightness(.96); }
button.danger { color: var(--erro); }
button.ghost { background: transparent; border-color: transparent; color: var(--ameixa-suave); }
button.ghost:hover { color: var(--ameixa); }

.form label, .grid label, .inline-form label { display: block; font-size: .8rem; color: var(--ameixa-suave); margin-bottom: 3px; }
.form input:not([type="checkbox"]):not([type="file"]), .form select { width: 100%; }
label.check { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ameixa); margin-top: 22px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.grid .wide { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--linha); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px 12px; }
legend { font-size: .85rem; padding: 0 4px; }
.actions { display: flex; gap: 8px; margin-top: 14px; align-items: end; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form label { margin: 0; }
.wide-input { width: 100%; min-width: 220px; }

/* ---------- tabelas */

.table-wrap { overflow-x: auto; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--nata); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ameixa-suave); font-weight: 600; }
.num { text-align: right; }
/* Célula normal (flex na <td> quebra a borda da linha); os botões e formulários ficam em linha. */
td.row-actions { text-align: right; white-space: nowrap; }
.row-actions > * { display: inline-block; margin: 2px 0 2px 4px; vertical-align: middle; }
.row-actions form { margin: 0 0 0 4px; }

.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; display: block; background: var(--linho); }
.cover { width: 150px; height: 150px; object-fit: cover; border-radius: var(--raio); display: block; background: var(--linho); }
.cover.empty { display: flex; align-items: center; justify-content: center; }
.image-editor { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .76rem; background: var(--linha); }
.badge.published { background: var(--salvia); }
.badge.draft { background: var(--manteiga); }
.badge.archived { background: #DDD6CC; }
.badge.block { background: var(--pessego); }

.swatches { display: flex; flex-wrap: wrap; gap: 3px; max-width: 160px; }
.swatches i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(62, 50, 57, .2); display: inline-block; }

/* ---------- Em alta */

ol.ranking { list-style: none; padding: 0; margin: 0 0 14px; }
ol.ranking li { display: flex; gap: 8px; align-items: center; background: #fff; padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; border: 1px solid var(--linha); }
ol.ranking .pos { width: 2ch; text-align: right; font-weight: 700; color: var(--coral); }
ol.ranking .t { flex: 1; }

/* ---------- login */

.login-panel { max-width: 400px; margin: 8vh auto 0; padding: 26px 28px; }
.login-panel .form input { margin-bottom: 10px; }

/* ---------- gerador de .hookart (D-83) */

.gerador-cols { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; align-items: start; }
.gerador-visao { min-width: 0; }
@media (max-width: 1000px) { .gerador-cols { grid-template-columns: 1fr; } }
.gerador .form label { margin-top: 8px; }
.segmented { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.segmented label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--ameixa); font-size: .9rem; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--lavanda); border-color: var(--lavanda); color: #fff; }
.segmented input { margin: 0; }
.canvas-box { overflow: auto; max-height: 70vh; border-radius: 8px; background: var(--linho); border: 1px solid var(--linha); }
.canvas-box canvas { display: block; }
canvas[data-role="origem"] { cursor: crosshair; touch-action: none; max-width: 100%; }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.preview-head button { padding: 4px 10px; }
label.check-inline { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--ameixa); }
table.paleta td { padding: 5px 8px; }
table.paleta .nome { width: 100%; min-width: 140px; }
table.paleta .tom { white-space: nowrap; }
table.paleta input[type="color"] { width: 42px; height: 30px; padding: 2px; vertical-align: middle; }
.swatch { display: inline-block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(62, 50, 57, .25); vertical-align: middle; }
.paint-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.paint-bar .segmented { margin: 0; }
.paint-bar .segmented button { padding: 5px 10px; }
.paint-bar .segmented button.ativo { background: var(--lavanda); border-color: var(--lavanda); color: #fff; }
.paint-bar button:disabled { opacity: .45; cursor: default; }
.pincel-atual { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; }
canvas.pintando { cursor: crosshair; touch-action: none; }
button.swatch { padding: 0; cursor: pointer; }
table.paleta tr.pincel td { background: #EEE8F5; }
table.paleta tr.pincel .swatch { outline: 2px solid var(--lavanda); outline-offset: 2px; }