:root { color-scheme: dark; --bg:#101010; --panel:#181818; --line:#333; --ink:#f4f3ef; --muted:#999; --accent:#d6d4ce; --danger:#b96868; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 80% 0%,#282828 0,#101010 38%); color:var(--ink); min-height:100vh; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.admin-shell { width:min(1180px,100%); margin:0 auto; padding:20px; }
.admin-header { display:flex; justify-content:space-between; align-items:center; padding:4px 0 46px; }
.admin-brand { color:var(--ink); font-size:20px; font-weight:800; letter-spacing:.16em; text-decoration:none; }
.admin-brand span { color:var(--muted); font-size:10px; letter-spacing:.2em; margin-left:8px; }
h1,h2,p { margin:0; } h1 { font-size:clamp(32px,5vw,58px); letter-spacing:-.07em; } h2 { font-size:18px; letter-spacing:-.03em; }
.eyebrow { color:var(--muted); font-size:10px; letter-spacing:.18em; font-weight:700; margin-bottom:12px; } .eyebrow span { color:var(--ink); }
.muted { color:var(--muted); font-size:13px; line-height:1.5; }
.auth-card { width:min(480px,100%); margin:8vh auto 0; padding:30px; background:rgba(24,24,24,.82); border:1px solid var(--line); border-radius:18px; box-shadow:0 28px 80px #0008; }
.auth-card h1 { margin-bottom:12px; font-size:38px; } .auth-card .muted { margin-bottom:26px; }
.admin-toolbar { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.admin-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:18px; align-items:start; }
.admin-grid:has(.editor-panel[hidden]) { grid-template-columns:1fr; }
.panel { background:rgba(24,24,24,.86); border:1px solid var(--line); border-radius:16px; padding:20px; }
.editor-panel[data-mode="create"] { border-color:#4d4b45; background:#1b1b1a; }
.editor-panel[data-mode="edit"] { border-color:#363636; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.section-kicker { color:#777; font-size:9px; letter-spacing:.17em; font-weight:800; margin-bottom:7px; }
.filter-toolbar { display:grid; gap:11px; padding:4px 0 15px; border-bottom:1px solid var(--line); margin-bottom:9px; }
.filter-chips { display:flex; gap:6px; flex-wrap:wrap; }
.filter-chip { border:1px solid #3b3b3b; background:transparent; color:#aaa; border-radius:999px; padding:8px 11px; font-size:11px; font-weight:700; }
.filter-chip span { color:#777; margin-left:4px; font-variant-numeric:tabular-nums; }
.filter-chip.is-active { background:#deddd7; border-color:#deddd7; color:#111; }
.filter-chip.is-active span { color:#555; }
.filter-selects { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.filter-selects select { padding:9px 10px; font-size:11px; color:#bbb; }
.editor-heading { display:flex; align-items:center; gap:9px; }
.mobile-back { display:flex; align-items:center; gap:5px; border:1px solid #444; background:transparent; color:var(--ink); font-size:12px; line-height:1; padding:9px 11px; border-radius:7px; }
.mobile-back:first-letter { font-size:22px; }
.close-label { font-size:11px; }
.mode-badge { border:1px solid #57564f; border-radius:999px; padding:7px 10px; font-size:9px; font-weight:850; letter-spacing:.13em; }
.mode-edit { color:#c7c5be; border-color:#555; background:#262626; }
.mode-create { color:#171717; border-color:#d6d4ce; background:#d6d4ce; }
.editor-hint { color:#8d8c86; font-size:12px; line-height:1.5; padding:0 0 16px; border-bottom:1px solid #2c2c2c; margin-bottom:17px; }
.quick-import { display:grid; gap:12px; padding:18px; background:#20201f; border:1px solid #4a4944; border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.quick-import h3,.details-heading h3 { font-size:20px; letter-spacing:-.04em; }
.quick-import .muted { max-width:56ch; }
.quick-import label { margin-top:4px; }
.quick-import .inline-action input { min-height:48px; }
.quick-import .button { min-height:48px; white-space:nowrap; }
.product-details { display:grid; gap:15px; padding-top:18px; border-top:1px solid #333; }
.details-heading { display:flex; justify-content:space-between; align-items:end; gap:12px; padding-bottom:2px; }
.details-check { color:#aaa89f; border:1px solid #55534c; border-radius:999px; padding:6px 8px; font-size:8px; letter-spacing:.12em; white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.search-input { width:150px!important; padding:9px 11px!important; }
.stack-form { display:grid; gap:15px; } label { color:var(--muted); font-size:11px; letter-spacing:.07em; text-transform:uppercase; display:grid; gap:7px; } input,select,textarea { width:100%; border:1px solid #3a3a3a; background:#101010; color:var(--ink); padding:12px 13px; border-radius:7px; outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--accent); } textarea { resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .inline-action { display:grid; grid-template-columns:1fr auto; gap:8px; } .checkbox-label { display:flex; grid-template-columns:none; align-items:center; flex-direction:row; gap:8px; } .checkbox-label input { width:auto; }
.button { border:1px solid transparent; padding:12px 16px; border-radius:7px; font-weight:750; transition:.2s ease; } .button:hover { transform:translateY(-1px); } .button-solid { background:var(--accent); color:#111; } .button-outline,.button-ghost { background:transparent; color:var(--ink); border-color:#555; } .button-danger { color:#fff; background:transparent; border-color:#7d4848; }
.editor-actions { display:flex; gap:10px; justify-content:center; padding-top:4px; } .form-message { min-height:18px; color:#c9c7bd; font-size:12px; } .form-message.error { color:#ef9c9c; }
.product-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-height:680px; overflow:auto; overscroll-behavior:contain; } .product-row { width:100%; display:grid; grid-template-columns:88px 1fr; gap:12px; align-items:center; text-align:left; border:1px solid #2b2b2b; background:#151515; color:var(--ink); padding:10px; border-radius:10px; } .product-row:hover,.product-row.is-selected { background:#292929; border-color:#555; } .product-row:active { transform:scale(.99); } .product-row img { width:88px; height:108px; object-fit:contain; background:#f7f7f4; border-radius:6px; } .product-row strong { display:block; font-size:13px; line-height:1.25; } .product-row small { display:block; color:var(--muted); margin-top:6px; line-height:1.4; } .product-row em { display:block; color:#c9c7c0; font-size:12px; font-style:normal; margin-top:9px; font-variant-numeric:tabular-nums; }
@media(max-width:780px) { body{padding-bottom:env(safe-area-inset-bottom)} .admin-shell{padding:12px 12px 32px}.admin-header{position:sticky;top:0;z-index:4;margin:0 -12px;padding:12px;background:rgba(16,16,16,.9);backdrop-filter:blur(18px);border-bottom:1px solid #292929}.admin-brand{font-size:16px}.admin-toolbar{align-items:stretch;flex-direction:column;gap:16px;margin:24px 0 14px}.admin-toolbar .button{width:100%;padding:14px}.admin-grid{display:block}.product-list-panel{padding:14px}.editor-panel{position:fixed;inset:0;z-index:10;overflow:auto;border:0;border-radius:0;padding:14px 14px calc(92px + env(safe-area-inset-bottom));background:#151515;transform:translateY(105%);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease}.editor-panel.is-mobile-open{transform:translateY(0);opacity:1;pointer-events:auto}.editor-panel .panel-heading{position:sticky;top:-14px;z-index:2;margin:0 -14px 20px;padding:14px;background:rgba(21,21,21,.92);backdrop-filter:blur(18px)}.mobile-back{border:0;padding:0 4px;font-size:30px}.close-label{display:none}.product-list{grid-template-columns:1fr;max-height:none;overflow:visible}.product-row{grid-template-columns:76px 1fr;gap:12px;padding:12px}.product-row img{width:76px;height:94px}.product-row strong{font-size:13px}.product-row small{font-size:10px}.filter-selects{grid-template-columns:1fr 1fr}.search-input{width:100%!important}.panel-heading:has(.editor-heading) #editorStatus{font-size:11px}.quick-import{padding:16px;margin-top:2px}.quick-import h3{font-size:24px}.quick-import .inline-action{grid-template-columns:1fr}.quick-import .button{width:100%;font-size:14px}.details-heading{align-items:start;flex-direction:column;gap:8px}.details-check{font-size:8px}.editor-actions{position:fixed;z-index:12;left:0;right:0;bottom:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(21,21,21,.95);backdrop-filter:blur(18px);border-top:1px solid #393939}.editor-actions .button{flex:1;padding:14px 9px}.auth-card{margin-top:5vh;padding:22px}.auth-card .button{padding:14px} }

/* Shared Bolos identity: the admin should feel like the catalogue, not a separate tool. */
:root { --bg:#141414; --panel:rgba(28,28,28,.64); --line:rgba(255,255,255,.12); --ink:#dedede; --muted:#9a9a9a; --accent:#aaa9a4; --glass-border:rgba(255,255,255,.12); font-family:Sora,Arial,sans-serif; }
body { background:radial-gradient(circle at 80% 0%,rgba(255,255,255,.12) 0,rgba(20,20,20,0) 34%),var(--bg); }
.admin-shell { max-width:1280px; padding:18px 24px 48px; }
.admin-header { position:relative; min-height:70px; padding:0 0 32px; border-bottom:1px solid var(--line); }
.admin-brand { display:grid; justify-items:center; gap:2px; color:var(--ink); text-decoration:none; }
.admin-header .admin-brand { position:absolute; left:50%; transform:translateX(-50%); }
.admin-header > .button { margin-left:auto; }
.admin-wordmark-main { font-family:Georgia,"Times New Roman",serif; font-size:30px; line-height:1; letter-spacing:.19em; padding-left:.19em; }
.admin-wordmark-sub { color:#aaa8a3; font-family:Georgia,"Times New Roman",serif; font-size:10px; letter-spacing:.09em; }
.panel,.auth-card { background:rgba(28,28,28,.58); border-color:var(--glass-border); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 80px rgba(0,0,0,.18); backdrop-filter:blur(18px) saturate(115%); -webkit-backdrop-filter:blur(18px) saturate(115%); }
.panel { border-radius:12px; }
.admin-toolbar { margin:30px 0 24px; }
.admin-toolbar h1 { color:#f1f0ed; }
.admin-toolbar .button-solid { min-height:46px; padding-inline:20px; }
.button { border-radius:4px; transition:transform .2s cubic-bezier(.25,1,.5,1),background-color .2s ease,border-color .2s ease; }
.button:active { transform:scale(.98); }
.button-solid { background:#deddd7; color:#171717; }
.button-solid:hover { background:#f1f0ed; }
.search-input,input,select,textarea { background:rgba(13,13,13,.54); border-color:rgba(255,255,255,.16); }
.search-input:focus,input:focus,select:focus,textarea:focus { border-color:#aaa9a4; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.product-row { background:rgba(18,18,18,.54); border-color:rgba(255,255,255,.10); border-radius:8px; }
.product-row:hover,.product-row.is-selected { background:rgba(55,55,55,.52); border-color:rgba(255,255,255,.26); }
.quick-import { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.editor-panel[data-mode="create"] { border-color:rgba(255,255,255,.22); background:rgba(34,34,33,.60); }
.editor-panel[data-mode="edit"] { border-color:rgba(255,255,255,.14); }
.mode-create { background:#deddd7; border-color:#deddd7; }
.mode-edit { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); }

@media(max-width:780px) {
  .admin-shell { padding:0 12px 32px; }
  .admin-header { margin:0 -12px; padding:12px 16px; background:rgba(20,20,20,.72); border-color:rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(115%); -webkit-backdrop-filter:blur(18px) saturate(115%); }
  .admin-wordmark-main { font-size:24px; }
  .admin-wordmark-sub { font-size:8px; }
  .admin-toolbar { margin:24px 0 14px; }
  .panel { border-radius:10px; }
  .editor-panel { background:rgba(20,20,20,.96); }
  .editor-panel .panel-heading { background:rgba(20,20,20,.86); }
}