:root{--bg:#f6efe4;--card:#fffaf1;--ink:#2a1c14;--muted:#7a6656;--cog:#b8693a;--cog-d:#96512a;--amber:#e0a03a;--line:#e6d8c2;--ok:#2f7d4a;--err:#b83a2a;--side:#2a1c14;--r:14px}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:900;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:30px}h2{font-size:21px}h3{font-size:17px}
a{color:var(--cog-d)}
.mono{font-family:'Space Mono',monospace}
.muted{color:var(--muted)}.sm{font-size:13px}
.app{display:flex;min-height:100vh}
.side{width:236px;background:var(--side);color:#f3e7d3;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-shrink:0}
.brand{font-family:'Fraunces',serif;font-weight:900;font-size:22px;padding:0 10px 18px;color:#fff;display:flex;gap:10px;align-items:center}
.brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--amber),var(--cog));display:inline-block}
.side nav a{display:block;padding:10px 12px;border-radius:10px;color:#e8d8bd;text-decoration:none;font-weight:600;margin-bottom:3px}
.side nav a:hover{background:rgba(255,255,255,.07)}
.side nav a.on{background:var(--cog);color:#fff}
.side .foot{margin-top:auto;font-size:13px;color:#b9a68b;padding:0 10px}
.side .foot a{color:#f3e7d3}
.main{flex:1;min-width:0;padding:30px 34px 60px;max-width:1240px}
.top{display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:20px}
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 16px;border-radius:10px;font:600 14px 'Hanken Grotesk',sans-serif;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{border-color:var(--cog)}
.btn.primary{background:var(--cog);border-color:var(--cog);color:#fff}.btn.primary:hover{background:var(--cog-d)}
.btn.danger{color:var(--err);border-color:#e7c0b9}.btn.danger:hover{background:#fbeae7}
.btn.s{padding:6px 11px;font-size:13px}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-weight:600}
.flash.ok{background:#e4f3ea;color:var(--ok);border:1px solid #bfe0cb}.flash.err{background:#fbeae7;color:var(--err);border:1px solid #efc4bd}
.flash.warn{background:#fff3d9;color:#8a5a00;border:1px solid #f0d9a0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.stat b{display:block;font:900 32px 'Fraunces',serif;line-height:1.1}
.stat span{color:var(--muted);font-size:13px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;background:#efe3cf;color:#6b4a2a}
.badge.ok{background:#dff1e6;color:var(--ok)}.badge.off{background:#eee;color:#888}.badge.err{background:#fbe3df;color:var(--err)}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fg .full{grid-column:1/-1}
label{display:block;font-weight:700;font-size:13px;margin-bottom:5px}
label small{font-weight:400;color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=url],input[type=search],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:15px 'Hanken Grotesk',sans-serif;color:var(--ink)}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(184,105,58,.35);border-color:var(--cog)}
input[type=color]{width:54px;height:40px;padding:2px;border:1px solid var(--line);border-radius:10px;background:#fff}
.chk{display:flex;gap:8px;align-items:center;font-weight:600;margin:4px 0}.chk input{width:18px;height:18px;accent-color:var(--cog)}
.hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.tcard.off{opacity:.55}
.tcard canvas{width:100%;height:auto;border-radius:8px;background:#eee;display:block}
.tcard .row{display:flex;gap:6px;flex-wrap:wrap}
.thumb{width:54px;height:54px;object-fit:cover;border-radius:8px;background:#eee;display:block}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{width:100%;max-width:380px}
pre.code{background:#2a1c14;color:#f3e7d3;padding:14px;border-radius:10px;overflow:auto;font:13px 'Space Mono',monospace}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px}
.bars div{flex:1;background:linear-gradient(var(--amber),var(--cog));border-radius:5px 5px 0 0;min-height:3px;position:relative}
.bars div span{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}
.bars-l{display:flex;gap:6px;font-size:10px;color:var(--muted)}.bars-l span{flex:1;text-align:center}
.pager{display:flex;gap:6px;align-items:center;margin-top:14px;flex-wrap:wrap}
.editor{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:20px;align-items:start}
.stage{position:relative;background:#ddd;border-radius:10px;overflow:hidden;line-height:0}
.stage canvas{width:100%;height:auto}
.hdl{position:absolute;border:2px solid #2f8cff;background:rgba(47,140,255,.12);cursor:move;touch-action:none}
.hdl b{position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;border-radius:4px;background:#2f8cff;cursor:nwse-resize}
.hdl em{position:absolute;left:4px;top:2px;font:700 12px 'Space Mono';color:#fff;background:#2f8cff;padding:0 5px;border-radius:4px;font-style:normal;line-height:18px}
.tools{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
@media(max-width:860px){
 .app{display:block}.side{display:none;position:fixed;inset:0 25% 0 0;z-index:30;height:100vh;width:auto;max-width:280px}.side.open{display:flex}
 .top{display:flex;align-items:center;justify-content:space-between;background:var(--side);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:20}
 .top button{background:none;border:0;color:#fff;font-size:24px}.main{padding:20px 16px 50px}.fg{grid-template-columns:1fr}.editor{grid-template-columns:1fr}
 table.rsp thead{display:none}table.rsp td{display:block;border:0;padding:4px 0}table.rsp tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
}