:root { --paper:#f4f0e6; --ink:#10100e; --muted:#6c675d; --red:#e33a2b; --line:rgba(16,16,14,.22); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Commissioner","Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.admin-topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:10px max(18px,calc((100vw - 1180px)/2)); background:rgba(244,240,230,.96); border-bottom:1px solid var(--ink); backdrop-filter:blur(12px); }
.admin-brand { display:flex; align-items:center; gap:11px; color:inherit; font-weight:900; letter-spacing:-.03em; text-decoration:none; text-transform:uppercase; }
.admin-brand img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.admin-brand em { color:var(--red); font-style:normal; }
.admin-actions { display:flex; align-items:center; gap:18px; }
.admin-actions a { color:inherit; font:750 10px/1 ui-monospace,monospace; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
main { width:min(1180px,calc(100% - 36px)); margin:0 auto; padding:56px 0 96px; }
.admin-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding-bottom:30px; border-bottom:3px solid var(--ink); }
.eyebrow { margin:0 0 14px; font:750 10px/1 ui-monospace,monospace; letter-spacing:.15em; }
h1 { margin:0; font-size:clamp(48px,9vw,96px); line-height:.82; letter-spacing:-.065em; text-transform:uppercase; }
.admin-intro p:last-child { max-width:610px; margin:22px 0 0; color:var(--muted); line-height:1.45; }
.button { border:1px solid var(--ink); padding:12px 16px; color:var(--ink); background:transparent; font:800 10px/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.button:hover,.button:focus-visible { color:white; background:var(--ink); }
.button--primary { flex:0 0 auto; min-width:150px; padding:16px 20px; color:white; background:var(--red); border-color:var(--red); }
.button--primary:disabled { cursor:wait; opacity:.55; }
.status { margin:22px 0; padding:12px 14px; color:var(--muted); background:rgba(255,255,255,.38); border-left:4px solid var(--ink); font:700 11px/1.4 ui-monospace,monospace; }
.status--success { color:#165b2d; border-color:#2d9d50; }
.status--error { color:#8d2018; border-color:var(--red); }
.editor { display:grid; gap:18px; }
.category { background:rgba(255,255,255,.34); border:1px solid var(--ink); }
.category__head { display:grid; grid-template-columns:44px minmax(150px,1fr) auto; gap:12px; align-items:center; padding:14px; background:var(--ink); color:white; }
.drag-number { color:#aaa69d; font:700 11px/1 ui-monospace,monospace; }
.category__head input { min-width:0; padding:9px 10px; color:white; background:#292925; border:1px solid #4c4b46; }
.category__buttons,.product__buttons { display:flex; gap:6px; }
.icon-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid currentColor; color:inherit; background:transparent; font-weight:900; }
.icon-button:hover,.icon-button:focus-visible { color:var(--ink); background:var(--paper); }
.category__settings { display:flex; flex-wrap:wrap; gap:18px; padding:12px 14px; border-bottom:1px solid var(--line); }
.check { display:flex; align-items:center; gap:8px; font:750 10px/1 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.products { display:grid; gap:10px; padding:14px; }
.product { display:grid; grid-template-columns:minmax(160px,1.15fr) 100px minmax(190px,1.4fr) minmax(150px,1fr) auto; gap:10px; align-items:start; padding:12px; border:1px solid var(--line); background:var(--paper); }
.field { display:grid; gap:6px; min-width:0; }
.field label { color:var(--muted); font:750 9px/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.field input,.field textarea { width:100%; min-width:0; padding:10px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:0; }
.field textarea { min-height:62px; resize:vertical; }
.photo-field { display:grid; grid-template-columns:1fr auto; gap:6px; }
.photo-field input[type=file] { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.upload-label { display:grid; place-items:center; padding:0 11px; border:1px solid var(--ink); font:800 9px/1 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.product__buttons { align-self:center; }
.product__buttons .icon-button:hover { color:white; background:var(--ink); }
.add-product { margin:0 14px 14px; width:calc(100% - 28px); border-style:dashed; }
.button--add-category { width:100%; margin-top:18px; padding:18px; border-width:2px; border-style:dashed; }
.loading-card { height:180px; animation:pulse 1.2s infinite alternate; background:#e1ddd3; border:1px solid var(--line); }
@keyframes pulse { to { opacity:.45; } }
@media (max-width:900px) { .product { grid-template-columns:1fr 100px; } .product .field:nth-child(3),.product .field:nth-child(4) { grid-column:1/-1; } .product__buttons { grid-column:1/-1; } }
@media (max-width:680px) { main { width:min(100% - 24px,1180px); padding-top:36px; } .admin-actions a:last-child { display:none; } .admin-intro { align-items:stretch; flex-direction:column; } .button--primary { width:100%; } .category__head { grid-template-columns:32px 1fr; } .category__buttons { grid-column:2; } .product { grid-template-columns:1fr; } .product .field:nth-child(3),.product .field:nth-child(4),.product__buttons { grid-column:1; } }
@media (prefers-reduced-motion:reduce) { .loading-card { animation:none; } }