:root{
  --ink:#15181a;--ink-soft:#3c444a;--ink-faint:#6b757c;--line:#cfd5d8;--line-soft:#e3e8ea;
  --sheet:#fff;--paper:#f4f6f7;--blue:#13314c;--blue-light:#1a4568;--brass:#a9661f;--ok:#1f7a45;
  --warn:#9a3b2e;--sans:system-ui,sans-serif;--disp:Oswald,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.45}
a{color:var(--blue)}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{background:var(--sheet);border:1px solid var(--line);padding:28px;max-width:420px;width:100%}
.auth-card h1{font-family:var(--disp);text-transform:uppercase;font-size:24px;margin-bottom:8px}
.muted{color:var(--ink-soft);font-size:14px}
form{display:flex;flex-direction:column;gap:12px;margin-top:0}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
input,select,textarea{padding:10px 12px;border:1px solid var(--line);font:inherit;background:#fff;border-radius:2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
button{font:inherit;cursor:pointer}
.msg{margin-top:8px;color:var(--warn);font-size:14px}
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:var(--blue);color:#fff;padding:20px}
.sidebar h2{font-family:var(--disp);text-transform:uppercase;font-size:18px;margin-bottom:16px}
.sidebar nav{display:flex;flex-direction:column;gap:4px}
.sidebar a{color:#dbe7f3;padding:8px 10px;text-decoration:none;border-radius:2px}
.sidebar a.active,.sidebar a:hover{background:rgba(255,255,255,.12)}
.sidebar>button,.sidebar-logout{width:100%;margin-top:20px;padding:11px 16px;border:none;background:rgba(255,255,255,.14);color:#fff;font-weight:600;border-radius:2px}
.sidebar>button:hover,.sidebar-logout:hover{background:rgba(255,255,255,.22)}
.main{padding:24px;min-width:0}
.panel{background:var(--sheet);border:1px solid var(--line);padding:20px;margin-bottom:16px}
.panel h3{font-family:var(--disp);text-transform:uppercase;font-size:20px;margin-bottom:8px;letter-spacing:.02em}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border-bottom:1px solid var(--line-soft);padding:10px 12px;text-align:left;vertical-align:middle}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);background:#f8fafb;font-weight:600}
.badge{display:inline-block;padding:3px 8px;font-size:11px;text-transform:uppercase;background:#eef1f2;border-radius:2px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.btn{padding:10px 16px;border:none;background:var(--blue);color:#fff;font-weight:600;border-radius:2px}
.btn:hover{background:var(--blue-light)}
.btn-ghost{padding:10px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;border-radius:2px}
.btn-ghost:hover{border-color:var(--ink-soft)}
.btn-sm{padding:6px 10px;font-size:12px;font-weight:600;border-radius:2px;border:none;background:var(--blue);color:#fff}
.btn-sm:hover{background:var(--blue-light)}
.btn-sm-ghost{padding:6px 10px;font-size:12px;font-weight:600;border-radius:2px;border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.btn-sm-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-danger{padding:6px 10px;font-size:12px;font-weight:600;border-radius:2px;border:1px solid #e8c4bc;background:#fff;color:var(--warn)}
.btn-danger:hover{background:#fdf3f1}
.link-quiet{font-size:13px;color:var(--ink-soft)}

/* Catalog menu admin */
.menu-head{margin-bottom:4px}
.menu-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:2px}
.menu-table{margin:0}
.menu-col-drag{width:36px;padding:0}
.menu-drag{width:36px;padding:0 4px;text-align:center;vertical-align:middle}
.menu-drag-handle{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  color:var(--ink-faint);cursor:grab;user-select:none;font-size:14px;letter-spacing:-2px;
  border-radius:2px;line-height:1;
}
.menu-drag-handle:hover{color:var(--ink);background:#eef2f5}
.menu-drag-handle:active{cursor:grabbing}
.menu-group + .menu-group tr.is-l1 td{border-top:2px solid var(--line-soft)}
.menu-group.is-collapsed tr.is-l2{display:none}
.menu-fold-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-right:8px;vertical-align:middle;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  border-radius:2px;font-size:14px;font-weight:700;line-height:1;padding:0;
  cursor:pointer;
}
.menu-fold-btn:hover{border-color:var(--blue);color:var(--blue);background:#f3f8fc}
.menu-name-toggle{cursor:pointer}
.menu-name-toggle:hover{color:var(--blue)}
.menu-child-count{
  display:inline-block;margin-left:6px;padding:1px 6px;
  font-size:11px;font-weight:600;color:var(--ink-faint);
  background:#eef2f5;border-radius:999px;vertical-align:middle;
}
.menu-sort-ghost{opacity:.45;background:#e8f2fa !important}
.menu-sort-chosen{background:#f3f8fc !important}
.menu-order-status{margin-left:auto;font-size:13px;color:var(--ink-faint)}
.menu-order-status:not(:empty){color:var(--ok)}
.menu-table tbody tr:hover{background:#fafbfc}
.menu-table tr.is-l1{background:#fff}
.menu-table tr.is-l2{background:#fcfdfe}
.menu-table tr.is-l2 .menu-name{padding-left:28px;color:var(--ink-soft)}
.menu-table tr.is-editing{outline:2px solid var(--blue);outline-offset:-2px;background:#f3f8fc}
.menu-name{font-weight:600}
.menu-name-l2{font-weight:500}
.menu-slug code{font-size:12px;background:#f0f3f5;padding:2px 6px;border-radius:2px;color:var(--ink-soft)}
.menu-url{font-size:12px;color:var(--ink-faint);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-icon{font-size:11px;color:var(--ink-faint);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-icon img{width:32px;height:32px;object-fit:contain;border:1px solid var(--line-soft);background:#fff}
.menu-actions{display:flex;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.vis-yes{color:var(--ok);font-weight:600;font-size:12px}
.vis-no{color:var(--warn);font-weight:600;font-size:12px}

.menu-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.menu-modal[hidden]{display:none !important}
.menu-modal-backdrop{position:absolute;inset:0;background:rgba(13,34,54,.45)}
.menu-modal-dialog{
  position:relative;z-index:1;width:min(100%,640px);max-height:90vh;overflow:auto;
  background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px rgba(13,34,54,.18);padding:24px;
}
.menu-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.menu-modal-head h4{font-family:var(--disp);text-transform:uppercase;font-size:18px}
.menu-modal-x{width:36px;height:36px;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;color:var(--ink-soft);border-radius:2px;flex-shrink:0}
.menu-modal-x:hover{border-color:var(--ink);color:var(--ink)}
.menu-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.menu-form-actions{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.menu-seo-fieldset{
  grid-column:1/-1;border:1px solid var(--line-soft);padding:14px 16px 16px;margin:0;border-radius:2px;background:#fafbfc;
}
.menu-seo-fieldset legend{
  font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:0 6px;
}
.field-hint{font-weight:400;color:var(--ink-faint);font-size:11px}
.menu-icon-field{grid-column:1/-1}
.menu-icon-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.menu-icon-row{display:flex;gap:16px;align-items:flex-start}
.menu-icon-preview{width:80px;height:80px;flex-shrink:0;border:1px solid var(--line);background:#fff;display:grid;place-items:center;padding:6px}
.menu-icon-preview img{max-width:100%;max-height:100%;object-fit:contain}
.menu-icon-controls{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.menu-icon-pick{display:inline-flex;width:fit-content;cursor:pointer;margin:0}
.menu-icon-pick input{display:none}
.menu-icon-path input{font-size:12px;color:var(--ink-soft);background:#f8fafb}
.menu-icon-status{font-size:12px;color:var(--ink-faint)}
.menu-icon-status.is-ok{color:var(--ok)}
.menu-icon-status.is-err{color:var(--warn)}

@media (max-width:860px){
  .menu-form-grid{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;z-index:10}
}