/* =====================================================================
   MQ SPORT MANAGEMENT — Admin CMS
   Works from a 320px phone up. Everything the owner needs is here;
   phpMyAdmin should never be necessary for day-to-day content.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

:root{
  --a-bg:#0E0E10;
  --a-panel:#161619;
  --a-panel-2:#1D1D21;
  --a-line:#27272C;
  --a-line-soft:#1F1F23;
  --a-text:#ECECEE;
  --a-muted:#8B8B95;
  --a-accent:var(--brand-accent,#E94F24);
  --a-accent-rgb:var(--brand-accent-rgb,233,79,36);
  --a-ok:#35C48B;
  --a-warn:#E9B324;
  --a-info:#4C9AFF;
  --a-sidebar:264px;
  --a-radius:6px;
  --a-ease:cubic-bezier(.22,.61,.36,1);
  --font-display:var(--brand-font-display,"Archivo","Helvetica Neue",Arial,sans-serif);
}

body{
  background:var(--a-bg);color:var(--a-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Kufi Arabic",sans-serif;
  font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
body.a-locked{overflow:hidden}
::selection{background:var(--a-accent);color:#fff}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--a-accent);outline-offset:2px}

/* ── Shell ─────────────────────────────────────────────────────── */
.a-shell{display:flex;min-height:100vh}

.a-side{
  position:fixed;inset-block:0;inset-inline-start:0;width:var(--a-sidebar);z-index:60;
  background:var(--a-panel);border-inline-end:1px solid var(--a-line);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.a-side__brand{padding:22px 22px 18px;border-bottom:1px solid var(--a-line);display:flex;align-items:center;gap:12px}
.a-side__brand img{height:24px;width:auto}
.a-side__brand span{font-family:var(--font-display);font-weight:800;font-size:.7rem;letter-spacing:.2em;color:var(--a-muted)}
.a-nav{padding:14px 12px;flex:1}
.a-nav__group{margin-bottom:6px;padding:16px 10px 8px;font-size:.62rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#5E5E68}
.a-nav a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:2px;
  border-radius:var(--a-radius);color:#B9B9C2;font-size:.88rem;font-weight:500;
  transition:background .18s,color .18s;
}
.a-nav a:hover{background:var(--a-panel-2);color:var(--a-text)}
.a-nav a.is-active{background:rgba(var(--a-accent-rgb),.13);color:var(--a-accent);font-weight:600}
.a-nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.a-nav__count{
  margin-inline-start:auto;min-width:21px;height:21px;padding-inline:6px;border-radius:11px;
  background:var(--a-accent);color:#fff;font-size:.66rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.a-side__foot{padding:14px;border-top:1px solid var(--a-line)}
.a-side__user{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--a-radius);background:var(--a-panel-2)}
.a-side__avatar{width:32px;height:32px;border-radius:50%;background:var(--a-accent);color:#fff;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:.78rem}
.a-side__user strong{display:block;font-size:.82rem;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-side__user small{display:block;font-size:.68rem;color:var(--a-muted);text-transform:uppercase;letter-spacing:.1em}

.a-main{flex:1;min-width:0;margin-inline-start:var(--a-sidebar);display:flex;flex-direction:column}

.a-top{
  position:sticky;top:0;z-index:40;background:rgba(14,14,16,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--a-line);padding:14px clamp(16px,3vw,30px);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.a-top h1{font-family:var(--font-display);font-weight:800;font-size:1.18rem;letter-spacing:-.01em;
  text-transform:uppercase;line-height:1.2}
.a-top__sub{font-size:.78rem;color:var(--a-muted);width:100%;order:3;margin-top:-6px}
.a-top__actions{margin-inline-start:auto;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.a-burger{display:none;width:38px;height:38px;place-items:center;border:1px solid var(--a-line);border-radius:var(--a-radius)}
.a-burger svg{width:18px;height:18px}

.a-body{padding:clamp(18px,3vw,30px);flex:1}
.a-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55;display:none}
.a-scrim.is-on{display:block}

@media (max-width:1024px){
  .a-side{transform:translateX(-100%);transition:transform .3s var(--a-ease)}
  .a-side.is-open{transform:translateX(0)}
  .a-main{margin-inline-start:0}
  .a-burger{display:grid}
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn{
  --b-bg:var(--a-accent);--b-fg:#fff;--b-bd:var(--a-accent);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;min-height:40px;border-radius:var(--a-radius);
  background:var(--b-bg);color:var(--b-fg);border:1px solid var(--b-bd);
  font-size:.83rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:filter .18s,background .18s,color .18s,border-color .18s;
}
.btn:hover{filter:brightness(1.12)}
.btn svg{width:16px;height:16px;flex:none}
.btn--ghost{--b-bg:transparent;--b-fg:var(--a-text);--b-bd:var(--a-line)}
.btn--ghost:hover{--b-bg:var(--a-panel-2);filter:none}
.btn--quiet{--b-bg:var(--a-panel-2);--b-fg:#C3C3CC;--b-bd:transparent}
.btn--danger{--b-bg:transparent;--b-fg:#FF6B6B;--b-bd:rgba(255,107,107,.4)}
.btn--danger:hover{--b-bg:#FF6B6B;--b-fg:#fff;filter:none}
.btn--ok{--b-bg:var(--a-ok);--b-bd:var(--a-ok)}
.btn--sm{padding:6px 12px;min-height:32px;font-size:.78rem;border-radius:5px}
.btn--icon{padding:0;width:36px;min-height:36px}
.btn--icon.btn--sm{width:30px;min-height:30px}
.btn--block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}

/* ── Panels ────────────────────────────────────────────────────── */
.card{background:var(--a-panel);border:1px solid var(--a-line);border-radius:10px;overflow:hidden}
.card + .card{margin-top:18px}
.card__head{
  padding:16px 20px;border-bottom:1px solid var(--a-line);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.card__head h2,.card__head h3{font-family:var(--font-display);font-weight:800;font-size:.86rem;
  letter-spacing:.11em;text-transform:uppercase}
.card__head p{font-size:.78rem;color:var(--a-muted);width:100%;margin-top:-4px}
.card__head .card__actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.card__body{padding:20px}
.card__body--flush{padding:0}
.card__foot{padding:15px 20px;border-top:1px solid var(--a-line);background:var(--a-panel-2);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── Stat tiles ────────────────────────────────────────────────── */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:22px}
.tile{background:var(--a-panel);border:1px solid var(--a-line);border-radius:10px;padding:20px;
  display:block;transition:border-color .2s,transform .2s}
a.tile:hover{border-color:rgba(var(--a-accent-rgb),.55);transform:translateY(-2px)}
.tile__label{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--a-muted)}
.tile__value{font-family:var(--font-display);font-weight:800;font-size:2.1rem;line-height:1.05;margin-top:12px;letter-spacing:-.02em}
.tile__meta{font-size:.76rem;color:var(--a-muted);margin-top:8px}
.tile--accent .tile__value{color:var(--a-accent)}

/* ── Tables ────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{min-width:720px;font-size:.86rem}
.table thead th{
  text-align:start;padding:11px 16px;background:var(--a-panel-2);
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--a-muted);
  border-bottom:1px solid var(--a-line);white-space:nowrap;position:sticky;top:0;z-index:2;
}
.table tbody td{padding:13px 16px;border-bottom:1px solid var(--a-line-soft);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:var(--a-panel-2)}
.table th.is-narrow,.table td.is-narrow{width:1%;white-space:nowrap}
.table td.is-actions{text-align:end;white-space:nowrap}

.row-media{display:flex;align-items:center;gap:13px;min-width:0}
.row-media__img{width:46px;height:56px;flex:none;object-fit:cover;border-radius:4px;background:#000;
  filter:grayscale(1);border:1px solid var(--a-line)}
.row-media__ph{width:46px;height:56px;flex:none;display:grid;place-items:center;border-radius:4px;
  background:var(--a-panel-2);border:1px solid var(--a-line);color:#4A4A54;font-weight:800;font-size:.8rem}
.row-media__img--sq,.row-media__ph--sq{width:46px;height:46px}
.row-media strong{display:block;font-weight:600;font-size:.92rem;line-height:1.3}
.row-media small{display:block;color:var(--a-muted);font-size:.74rem;margin-top:2px}

/* ── Badges & status dots ──────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:20px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--a-panel-2);color:var(--a-muted);border:1px solid var(--a-line);white-space:nowrap;
}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;display:block}
.badge--live{color:var(--a-ok);border-color:rgba(53,196,139,.35);background:rgba(53,196,139,.1)}
.badge--hidden{color:#8B8B95}
.badge--draft{color:var(--a-warn);border-color:rgba(233,179,36,.32);background:rgba(233,179,36,.09)}
.badge--archived{color:#7C86FF;border-color:rgba(124,134,255,.3);background:rgba(124,134,255,.09)}
.badge--deleted{color:#FF6B6B;border-color:rgba(255,107,107,.32);background:rgba(255,107,107,.09)}
.badge--new{color:var(--a-accent);border-color:rgba(var(--a-accent-rgb),.4);background:rgba(var(--a-accent-rgb),.11)}

.star{width:30px;height:30px;display:grid;place-items:center;color:#4A4A54;border-radius:5px;transition:color .18s,background .18s}
.star:hover{background:var(--a-panel-2)}
.star.is-on{color:var(--a-accent)}
.star svg{width:17px;height:17px}

/* ── Action menu ───────────────────────────────────────────────── */
.menu{position:relative}
.menu__panel{
  position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:30;min-width:206px;
  background:var(--a-panel-2);border:1px solid var(--a-line);border-radius:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);padding:6px;display:none;text-align:start;
}
.menu.is-open .menu__panel{display:block}
.menu__panel a,.menu__panel button{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 11px;border-radius:5px;
  font-size:.83rem;color:#C9C9D2;transition:background .15s,color .15s;
}
.menu__panel a:hover,.menu__panel button:hover{background:rgba(255,255,255,.055);color:var(--a-text)}
.menu__panel svg{width:15px;height:15px;opacity:.75;flex:none}
.menu__panel hr{border:0;border-top:1px solid var(--a-line);margin:6px 4px}
.menu__panel .is-danger{color:#FF7A7A}
.menu__panel .is-danger:hover{background:rgba(255,107,107,.12)}

/* ── Forms ─────────────────────────────────────────────────────── */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.col-full{grid-column:1/-1}

.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f > label,.f__label{font-size:.72rem;font-weight:600;letter-spacing:.06em;color:#A9A9B4}
.f__label .req,.f > label .req{color:var(--a-accent)}
.f input[type=text],.f input[type=email],.f input[type=url],.f input[type=tel],
.f input[type=number],.f input[type=date],.f input[type=password],.f input[type=search],
.f select,.f textarea{
  width:100%;background:var(--a-bg);border:1px solid var(--a-line);border-radius:var(--a-radius);
  padding:10px 12px;font-size:.9rem;transition:border-color .18s,background .18s;
}
.f textarea{min-height:120px;resize:vertical;line-height:1.6}
.f textarea.is-tall{min-height:260px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--a-accent);outline:none;background:#0A0A0C}
.f input::placeholder,.f textarea::placeholder{color:#4E4E58}
.f select{appearance:none;cursor:pointer;padding-inline-end:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238B8B95' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
[dir=rtl] .f select{background-position:left 12px center}
.f select option{background:var(--a-panel-2)}
.f__hint{font-size:.74rem;color:var(--a-muted);line-height:1.5}
.f__err{font-size:.76rem;color:#FF7A7A}
.f.has-error input,.f.has-error select,.f.has-error textarea{border-color:#FF6B6B}
.f input[readonly]{opacity:.6;cursor:not-allowed}

/* Toggle switch */
.toggle{display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle__track{width:40px;height:22px;border-radius:12px;background:#33333A;position:relative;
  transition:background .22s;flex:none}
.toggle__track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;
  border-radius:50%;background:#8B8B95;transition:transform .22s,background .22s}
.toggle input:checked + .toggle__track{background:rgba(var(--a-accent-rgb),.32)}
.toggle input:checked + .toggle__track::after{background:var(--a-accent);transform:translateX(18px)}
[dir=rtl] .toggle input:checked + .toggle__track::after{transform:translateX(-18px)}
.toggle input:focus-visible + .toggle__track{outline:2px solid var(--a-accent);outline-offset:2px}
.toggle__text{font-size:.85rem}
.toggle__text small{display:block;color:var(--a-muted);font-size:.74rem}

/* Colour field */
.f--color .colorbox{display:flex;gap:9px;align-items:center}
.f--color input[type=color]{width:46px;height:40px;padding:2px;border:1px solid var(--a-line);
  border-radius:var(--a-radius);background:var(--a-bg);cursor:pointer;flex:none}
.f--color input[type=text]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}

/* Image picker */
.imgf{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.imgf__preview{
  width:112px;height:112px;flex:none;border:1px dashed var(--a-line);border-radius:8px;
  background:var(--a-bg);display:grid;place-items:center;overflow:hidden;position:relative;
}
.imgf__preview img{width:100%;height:100%;object-fit:contain;padding:6px}
.imgf__preview.is-empty::after{content:"No image";font-size:.7rem;color:#4E4E58}
.imgf__preview--tall{height:148px}
.imgf__ctl{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:8px}
.imgf input[type=file]{font-size:.8rem;color:var(--a-muted)}
.imgf input[type=file]::file-selector-button{
  margin-inline-end:10px;padding:7px 13px;border-radius:5px;border:1px solid var(--a-line);
  background:var(--a-panel-2);color:var(--a-text);font-size:.8rem;cursor:pointer;
}

/* ── Tabs ──────────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--a-line);
  background:var(--a-panel);scrollbar-width:thin}
.tabs button{
  padding:14px 18px;font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--a-muted);white-space:nowrap;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.tabs button:hover{color:var(--a-text)}
.tabs button.is-active{color:var(--a-accent);border-bottom-color:var(--a-accent)}
.tabs button .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--a-accent);
  margin-inline-start:6px;vertical-align:middle}
.tab-panel{display:none;padding:22px}
.tab-panel.is-active{display:block}

/* ── Editor status bar ─────────────────────────────────────────── */
.editbar{
  position:sticky;top:0;z-index:38;background:rgba(14,14,16,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--a-line);padding:12px clamp(16px,3vw,30px);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.editbar__back{display:inline-flex;align-items:center;gap:7px;color:var(--a-muted);font-size:.8rem}
.editbar__back:hover{color:var(--a-text)}
.editbar__back svg{width:15px;height:15px}
.editbar__title{font-family:var(--font-display);font-weight:800;font-size:1.02rem;text-transform:uppercase;
  letter-spacing:-.005em;max-width:min(46vw,460px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editbar__actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){
  .editbar{padding-block:10px}
  .editbar__title{max-width:100%;width:100%;order:5;font-size:.92rem}
  .editbar__actions{width:100%;order:6}
  .editbar__actions .btn{flex:1}
}

/* ── Repeaters ─────────────────────────────────────────────────── */
.rep{display:flex;flex-direction:column;gap:12px}
.rep__item{
  background:var(--a-panel-2);border:1px solid var(--a-line);border-radius:8px;overflow:hidden;
}
.rep__item.is-dragging{opacity:.45}
.rep__item.is-over{border-color:var(--a-accent)}
.rep__bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--a-line);
  background:rgba(255,255,255,.02)}
.rep__grip{cursor:grab;color:#4E4E58;width:26px;height:26px;display:grid;place-items:center;flex:none;touch-action:none}
.rep__grip:active{cursor:grabbing}
.rep__grip svg{width:15px;height:15px}
.rep__num{font-family:var(--font-display);font-weight:800;font-size:.72rem;letter-spacing:.1em;color:var(--a-muted);flex:none}
.rep__name{font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.rep__tools{margin-inline-start:auto;display:flex;gap:6px;align-items:center;flex:none}
.rep__grid{padding:14px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rep__empty{padding:34px 20px;text-align:center;border:1px dashed var(--a-line);border-radius:8px;color:var(--a-muted);font-size:.88rem}
.rep__add{margin-top:12px}

/* ── Gallery manager ───────────────────────────────────────────── */
.gal-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.gal-item{background:var(--a-panel-2);border:1px solid var(--a-line);border-radius:8px;overflow:hidden;position:relative}
.gal-item.is-dragging{opacity:.4}
.gal-item.is-over{border-color:var(--a-accent)}
.gal-item__img{aspect-ratio:4/5;background:#000}
.gal-item__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.gal-item__body{padding:10px;display:flex;flex-direction:column;gap:8px}
.gal-item__body input{width:100%;background:var(--a-bg);border:1px solid var(--a-line);border-radius:5px;
  padding:7px 9px;font-size:.78rem}
.gal-item__bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid var(--a-line)}
.gal-item__grip{cursor:grab;color:#4E4E58;touch-action:none}
.gal-item__grip svg{width:15px;height:15px}

.dropzone{
  border:2px dashed var(--a-line);border-radius:10px;padding:34px 20px;text-align:center;
  color:var(--a-muted);transition:border-color .2s,background .2s;cursor:pointer;
}
.dropzone:hover,.dropzone.is-over{border-color:var(--a-accent);background:rgba(var(--a-accent-rgb),.05)}
.dropzone svg{width:26px;height:26px;margin:0 auto 12px;opacity:.6}
.dropzone strong{display:block;color:var(--a-text);font-size:.92rem;margin-bottom:5px}
.dropzone small{font-size:.76rem}

/* ── Notices & toasts ──────────────────────────────────────────── */
.notice{
  display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:8px;margin-bottom:16px;
  background:var(--a-panel);border:1px solid var(--a-line);border-inline-start:3px solid var(--a-muted);
  font-size:.87rem;line-height:1.55;
}
.notice svg{width:17px;height:17px;flex:none;margin-top:2px}
.notice--ok{border-inline-start-color:var(--a-ok)}
.notice--ok svg{color:var(--a-ok)}
.notice--error{border-inline-start-color:#FF6B6B}
.notice--error svg{color:#FF6B6B}
.notice--warn{border-inline-start-color:var(--a-warn)}
.notice--warn svg{color:var(--a-warn)}
.notice--info{border-inline-start-color:var(--a-info)}
.notice--info svg{color:var(--a-info)}
.notice a{color:var(--a-accent);text-decoration:underline}

.toasts{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:90;display:flex;
  flex-direction:column;gap:10px;max-width:min(360px,90vw)}
.toast{background:var(--a-panel-2);border:1px solid var(--a-line);border-inline-start:3px solid var(--a-ok);
  border-radius:8px;padding:13px 16px;font-size:.85rem;box-shadow:0 16px 40px rgba(0,0,0,.5);
  animation:toastin .3s var(--a-ease)}
.toast--error{border-inline-start-color:#FF6B6B}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Modal ─────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.modal.is-open{display:flex}
.modal__box{background:var(--a-panel);border:1px solid var(--a-line);border-radius:12px;
  width:100%;max-width:460px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal__box--wide{max-width:900px}
.modal__head{padding:18px 22px;border-bottom:1px solid var(--a-line);display:flex;align-items:center;gap:12px}
.modal__head h3{font-family:var(--font-display);font-weight:800;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase}
.modal__head button{margin-inline-start:auto;color:var(--a-muted)}
.modal__head button svg{width:18px;height:18px}
.modal__body{padding:22px;font-size:.9rem;line-height:1.65;max-height:70vh;overflow:auto}
.modal__body strong{color:var(--a-accent)}
.modal__foot{padding:15px 22px;border-top:1px solid var(--a-line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ── Filter bar ────────────────────────────────────────────────── */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.filterbar .f{flex:0 1 auto}
.filterbar input[type=search]{min-width:230px}
.filterbar__right{margin-inline-start:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:6px 13px;border-radius:20px;border:1px solid var(--a-line);font-size:.76rem;
  color:var(--a-muted);transition:all .18s;white-space:nowrap}
.chip:hover{color:var(--a-text);border-color:#3A3A42}
.chip.is-on{background:rgba(var(--a-accent-rgb),.14);border-color:rgba(var(--a-accent-rgb),.45);color:var(--a-accent);font-weight:600}
.chip span{opacity:.6;margin-inline-start:4px}

/* ── Empty state ───────────────────────────────────────────────── */
.a-empty{text-align:center;padding:60px 24px;color:var(--a-muted)}
.a-empty svg{width:40px;height:40px;margin:0 auto 18px;opacity:.35}
.a-empty h3{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--a-text);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.a-empty p{font-size:.88rem;max-width:40ch;margin:0 auto 22px}

/* ── Pagination ────────────────────────────────────────────────── */
.a-pager{display:flex;gap:6px;justify-content:center;align-items:center;padding:18px;flex-wrap:wrap}
.a-pager a,.a-pager span{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  padding-inline:11px;border:1px solid var(--a-line);border-radius:var(--a-radius);font-size:.83rem}
.a-pager a:hover{border-color:var(--a-accent);color:var(--a-accent)}
.a-pager .is-current{background:var(--a-accent);border-color:var(--a-accent);color:#fff;font-weight:600}
.a-pager .is-off{opacity:.35;pointer-events:none}

/* ── Login ─────────────────────────────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(var(--a-accent-rgb),.09),transparent 65%),var(--a-bg)}
.login__box{width:100%;max-width:392px}
.login__brand{text-align:center;margin-bottom:34px}
.login__brand img{height:34px;width:auto;margin:0 auto 16px}
.login__brand p{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--a-muted)}
.login .card__body{padding:26px}
.login__foot{text-align:center;margin-top:22px;font-size:.76rem;color:#55555E}

/* ── Utilities ─────────────────────────────────────────────────── */
.u-muted{color:var(--a-muted)}
.u-small{font-size:.8rem}
.u-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}
.u-right{text-align:end}
.u-center{text-align:center}
.u-nowrap{white-space:nowrap}
.u-mt{margin-top:16px}.u-mt-lg{margin-top:28px}
.u-mb{margin-bottom:16px}
.u-flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.u-hr{border:0;border-top:1px solid var(--a-line);margin:22px 0}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.is-hidden{display:none!important}

/* ── Login: the username field is tucked away until it is needed ── */
.login__more{margin-top:4px}
.login__more summary{
  cursor:pointer;font-size:.78rem;color:var(--a-muted);
  padding:6px 0;list-style:none;user-select:none;
}
.login__more summary::-webkit-details-marker{display:none}
.login__more summary::before{content:"+ ";font-weight:700}
.login__more[open] summary::before{content:"– "}
.login__more summary:hover{color:var(--a-text)}

/* ── Branding: live preview of the public palette ──────────────── */
/* Properties are written by JS from the colour fields, so what is shown
   here is exactly what the site will render after saving. */
.brand-preview{
  --p-color-background:#0A0A0A; --p-color-surface:#121212; --p-color-surface-2:#191919;
  --p-color-border:#242424; --p-color-heading:#FFFFFF; --p-color-text:#F5F5F5;
  --p-color-muted:#8A8A8A; --p-color-link:#E94F24; --p-color-accent:#E94F24;
  --p-color-btn-text:#FFFFFF; --p-color-header-bg:#0A0A0A; --p-color-card-bg:#121212;
  --p-card-gradient-from:#1C1C1C; --p-card-gradient-to:#050505; --p-card-frame:#E94F24;
  --p-color-success:#35C48B;
  border:1px solid var(--a-line);border-radius:10px;overflow:hidden;
  background:var(--p-color-background);
}
.brand-preview__bar{
  display:flex;align-items:center;gap:16px;padding:14px 20px;
  background:var(--p-color-header-bg);border-bottom:1px solid var(--p-color-border);
}
.brand-preview__logo{font-family:var(--font-display);font-weight:900;font-size:1.1rem;
  letter-spacing:-.02em;color:var(--p-color-heading)}
.brand-preview__nav{font-size:.78rem;color:var(--p-color-muted);letter-spacing:.08em}
.brand-preview__btn{
  margin-inline-start:auto;padding:8px 16px;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;background:var(--p-color-accent);color:var(--p-color-btn-text);
}
.brand-preview__body{padding:26px 20px}
.brand-preview__eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--p-color-accent);margin-bottom:12px}
.brand-preview__h{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:1.7rem;line-height:1;letter-spacing:-.02em;color:var(--p-color-heading);margin-bottom:12px}
.brand-preview__p{color:var(--p-color-text);font-size:.92rem;line-height:1.7;max-width:56ch}
.brand-preview__p a{color:var(--p-color-link);text-decoration:underline}
.brand-preview__muted{margin-top:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-color-muted)}
.brand-preview__row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-top:22px}
.brand-preview__card{
  width:120px;aspect-ratio:3/4.15;display:flex;flex-direction:column;justify-content:space-between;
  padding:12px 10px;background:linear-gradient(160deg,var(--p-card-gradient-from),var(--p-card-gradient-to) 78%);
  border:1px solid var(--p-card-frame);
}
.brand-preview__code{font-family:var(--font-display);font-weight:900;font-size:.8rem;color:var(--p-card-frame)}
.brand-preview__name{font-family:var(--font-display);font-weight:800;font-size:.76rem;
  text-transform:uppercase;text-align:center;color:var(--p-color-heading)}
.brand-preview__panel{
  flex:1 1 150px;display:grid;place-items:center;font-size:.76rem;color:var(--p-color-muted);
  background:var(--p-color-surface);border:1px solid var(--p-color-border);
}
.brand-preview__chip{
  align-self:flex-start;padding:6px 12px;font-size:.64rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-color-success);
  border:1px solid var(--p-color-success);background:transparent;
}