:root { --ink:#15110d; --paper:#f4eadb; --card:#fffaf1; --line:#dfcfb8; --gold:#b88945; --muted:#756a5c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; grid-template-columns:260px 1fr; color:var(--ink); background:var(--paper); font-family:Georgia,"Times New Roman",serif; }
aside { position:sticky; top:0; height:100vh; padding:22px; background:#100d0a; color:#fff3df; }
aside a, aside button { display:block; width:100%; min-height:42px; margin:6px 0; border:1px solid rgba(184,137,69,.3); padding:0 12px; color:inherit; background:transparent; text-align:left; text-decoration:none; }
.admin-logo { margin-bottom:24px; font-size:24px; font-weight:700; border:0; }
main { min-width:0; padding:28px; overflow:auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
h1 { margin:0; font-size:42px; text-transform:uppercase; }
button { cursor:pointer; font:inherit; }
#refresh, .action { min-height:42px; border:1px solid var(--gold); padding:0 16px; color:#fff3df; background:#74431f; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric, .panel { border:1px solid var(--line); background:var(--card); padding:20px; }
.metric b { display:block; font-size:34px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); }
th, td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:13px; text-transform:uppercase; }
img.thumb { width:58px; height:58px; object-fit:cover; }
input, textarea, select { width:100%; min-height:42px; border:1px solid var(--line); padding:8px 10px; background:#fff; }
textarea { min-height:72px; resize:vertical; }
form { display:grid; gap:12px; max-width:720px; }
.product-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.toolbar-controls { min-width:min(520px, 100%); display:grid; grid-template-columns:1fr 220px; gap:10px; }
.product-admin { display:grid; grid-template-columns:minmax(300px, .85fr) minmax(0, 1.6fr); gap:18px; align-items:start; }
.product-list { max-height:calc(100vh - 210px); overflow:auto; border:1px solid var(--line); background:var(--card); }
.list-count { position:sticky; top:0; z-index:2; padding:10px 12px; border-bottom:1px solid var(--line); background:#fff7ea; color:var(--muted); font-size:13px; }
.product-row { width:100%; display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; min-height:72px; border:0; border-bottom:1px solid var(--line); padding:10px; color:var(--ink); background:transparent; text-align:left; }
.product-row:hover { background:#fff7ea; }
.product-row img { width:52px; height:52px; object-fit:contain; background:#fff; border:1px solid var(--line); }
.product-row b { display:block; font-size:13px; line-height:1.25; }
.product-row small { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.25; }
.product-row em { color:var(--muted); font-size:11px; font-style:normal; }
.product-editor { position:sticky; top:20px; max-height:calc(100vh - 72px); overflow:auto; border:1px solid var(--line); background:var(--card); padding:18px; }
.editor-form { max-width:none; }
.editor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.editor-head h2 { margin:0; font-size:22px; line-height:1.2; }
.editor-head p, .muted { color:var(--muted); font-size:12px; }
.editor-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.editor-grid.two { grid-template-columns:1fr 1fr; }
.editor-form label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.editor-form label small { color:var(--muted); font-weight:400; }
.editor-form input, .editor-form textarea, .editor-form select { color:var(--ink); font-family:inherit; font-size:13px; }
.html-editor { min-height:220px; font-family:Menlo, Consolas, monospace; font-size:12px; }
.preview-strip { display:flex; flex-wrap:wrap; gap:8px; }
.preview-strip img { width:70px; height:70px; object-fit:contain; border:1px solid var(--line); background:#fff; }
.status { display:inline-block; padding:5px 9px; background:#eadcc9; }
.conversation-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:18px; align-items:start; }
.conversation-detail { position:sticky; top:20px; border:1px solid var(--line); background:var(--card); padding:18px; }
.admin-messages { max-height:420px; overflow:auto; display:grid; gap:10px; margin:14px 0; }
.admin-message { border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fff; }
.admin-message.agent { background:#fff8e9; }
.admin-message b { display:inline-block; margin-right:8px; color:var(--gold); }
.admin-message small { color:var(--muted); }
.admin-message p { margin:8px 0 0; line-height:1.5; }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.action.secondary { color:var(--ink); background:#eadcc9; }
@media (max-width:900px) {
    body { grid-template-columns:1fr; }
    aside { position:relative; height:auto; }
    .cards { grid-template-columns:1fr; }
    .conversation-layout { grid-template-columns:1fr; }
    .product-toolbar, .editor-head { display:grid; }
    .toolbar-controls, .product-admin, .editor-grid, .editor-grid.two { grid-template-columns:1fr; }
    .product-editor { position:static; max-height:none; }
    .product-list { max-height:none; }
    .conversation-detail { position:static; }
    main { padding:16px; }
    table, thead, tbody, tr, th, td { display:block; }
    thead { display:none; }
    tr { margin-bottom:14px; border:1px solid var(--line); background:var(--card); }
    td { border-bottom:1px solid var(--line); }
}