/* =========================================================
   على الحرف — Shared Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Inter:wght@500;600;700&display=swap');

:root{
  /* --- Brand palette (from identity board) --- */
  --color-primary:      #1E8E89;
  --color-primary-dark: #17706C;
  --color-secondary:    #42B6AF;
  --color-team-a:       #1E8E89;
  --color-team-b:       #F06A63;
  --color-win:          #6BBF73;

  --bg-page:            #F8FAFB;
  --bg-white:           #FFFFFF;
  --border-color:       #E5E9EE;

  --text-primary:       #203547;
  --text-secondary:     #607085;

  /* --- Type --- */
  --font-display: 'Tajawal', sans-serif;
  --font-body: 'Tajawal', sans-serif;
  --font-numeric: 'Inter', sans-serif;

  /* --- Radius / shadow / motion --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 25px;
  --shadow-card: 0 8px 24px rgba(32,53,71,0.06);
  --shadow-pop: 0 12px 32px rgba(32,53,71,0.12);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  background:var(--bg-page);
  color:var(--text-primary);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  margin:0;
  color:var(--text-primary);
}

p{ margin:0; color:var(--text-secondary); line-height:1.8; }

.numeric{ font-family:var(--font-numeric); direction:ltr; display:inline-block; }

a{ color:inherit; text-decoration:none; }

button{ font-family:inherit; cursor:pointer; border:none; }

input,select{ font-family:inherit; }

::selection{ background:var(--color-secondary); color:#fff; }

:focus-visible{
  outline:3px solid var(--color-secondary);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   Layout helpers
   ========================================================= */
.screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.container{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:24px;
}

.center-col{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:15px 20px;
  border-radius:var(--radius-lg);
  font-weight:700;
  font-size:16px;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), opacity .15s;
}
.btn:active{ transform:scale(.97); }

.btn-primary{
  background:var(--color-primary);
  color:#fff;
  box-shadow:0 6px 16px rgba(30,142,137,0.28);
}
.btn-primary:hover{ background:var(--color-primary-dark); }

.btn-secondary{
  background:#fff;
  color:var(--color-primary);
  border:2px solid var(--color-primary);
}
.btn-secondary:hover{ background:rgba(30,142,137,.06); }

.btn-danger{
  background:var(--color-team-b);
  color:#fff;
}

.btn-success{
  background:var(--color-win);
  color:#fff;
}

.btn-ghost{
  background:transparent;
  color:var(--text-secondary);
}

.btn-sm{ width:auto; padding:8px 16px; font-size:14px; border-radius:var(--radius-sm); }

.btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }

.btn-icon{
  width:40px; height:40px; padding:0; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border-color); color:var(--text-secondary);
}
.btn-icon:hover{ background:var(--bg-page); }

/* =========================================================
   Inputs
   ========================================================= */
.field{ margin-bottom:16px; text-align:right; }

.field label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:6px;
}

.input-wrap{ position:relative; }

.input-wrap svg{
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  color:var(--text-secondary); width:18px; height:18px;
}

.input-wrap input, .input-wrap select{
  width:100%;
  padding:13px 42px 13px 14px;
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-sm);
  font-size:15px;
  color:var(--text-primary);
  background:#fff;
  transition:border-color .15s;
}
.input-wrap input:focus, .input-wrap select:focus{
  border-color:var(--color-primary);
  outline:none;
}
.input-wrap input.error{ border-color:var(--color-team-b); }

.field-error{ color:var(--color-team-b); font-size:12px; margin-top:5px; display:none; }
.field-error.show{ display:block; }

.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); }
.checkbox-row input{ accent-color:var(--color-primary); width:16px; height:16px; }

/* =========================================================
   Cards
   ========================================================= */
.card{
  background:#fff;
  border-radius:var(--radius-md);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-card);
}

/* =========================================================
   Toast / alert
   ========================================================= */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--text-primary); color:#fff; padding:13px 22px; border-radius:var(--radius-lg);
  font-size:14px; font-weight:700; box-shadow:var(--shadow-pop); opacity:0; pointer-events:none;
  transition:all .3s var(--ease); z-index:999; display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:var(--color-team-b); }
.toast.success{ background:var(--color-win); }

/* =========================================================
   Landing (index.html)
   ========================================================= */
.landing-hero{
  background:#fff;
  border-radius:0 0 32px 32px;
  padding:40px 24px 32px;
  text-align:center;
  box-shadow:var(--shadow-card);
}
.landing-logo{ font-size:34px; font-weight:900; color:var(--color-primary); line-height:1.15; margin-bottom:4px;}
.landing-logo span{ color:var(--color-team-b); }

.brand-logo-img{ max-width:220px; width:100%; height:auto; display:block; margin:0 auto; }
.sidebar-logo-img{ max-width:140px; width:100%; height:auto; display:block; margin:0 auto; }
.topbar-logo-img{ height:28px; width:auto; display:block; }

/* زر واتساب الدعم العائم */
.support-whatsapp-btn{
  position:fixed; bottom:22px; left:22px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(37,211,102,.4);
  transition:transform .2s var(--ease);
}
.support-whatsapp-btn:hover{ transform:scale(1.08); }
.support-whatsapp-btn:active{ transform:scale(.95); }
.landing-illustration{
  margin:20px auto; width:220px; height:150px; border-radius:20px;
  background:linear-gradient(160deg,#EAF6F5,#F8FAFB);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.landing-illustration:before{
  content:"🌿"; position:absolute; top:14px; left:18px; font-size:22px; opacity:.5;
}
.landing-illustration:after{
  content:"🛋️"; font-size:64px;
}
.landing-tagline{ font-size:20px; font-weight:800; color:var(--color-primary); margin:18px 0 8px; }
.landing-desc{ font-size:14px; }

.landing-actions{ padding:24px; display:flex; flex-direction:column; gap:12px; }

.feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 24px 32px; text-align:center;
}
.feature-grid .feature{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.feature-grid .feature .ico{
  width:44px; height:44px; border-radius:14px; background:#EAF6F5; color:var(--color-primary);
  display:flex; align-items:center; justify-content:center;
}
.feature-grid .feature span{ font-size:11px; color:var(--text-secondary); font-weight:700; }

/* =========================================================
   Auth (login/register)
   ========================================================= */
.auth-tabs{ display:flex; background:#EDEFF2; border-radius:var(--radius-lg); padding:4px; margin-bottom:24px; }
.auth-tabs button{
  flex:1; padding:10px; border-radius:calc(var(--radius-lg) - 4px); background:transparent;
  font-weight:700; color:var(--text-secondary); font-size:14px; transition:all .2s var(--ease);
}
.auth-tabs button.active{ background:#fff; color:var(--color-primary); box-shadow:var(--shadow-card); }

.auth-view{ display:none; }
.auth-view.active{ display:block; animation:fadeIn .25s var(--ease); }

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.divider{ display:flex; align-items:center; gap:12px; color:var(--text-secondary); font-size:12px; margin:18px 0; }
.divider:before,.divider:after{ content:""; flex:1; height:1px; background:var(--border-color); }

.google-btn{
  width:100%; padding:13px; border:1.5px solid var(--border-color); border-radius:var(--radius-lg);
  background:#fff; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:14px;
}

.auth-footer{ text-align:center; font-size:13px; color:var(--text-secondary); margin-top:18px; }
.auth-footer button{ background:none; color:var(--color-primary); font-weight:700; }

/* =========================================================
   Setup / settings
   ========================================================= */
.top-bar{
  display:flex; align-items:center; justify-content:space-between; padding:18px 24px;
}
.top-bar h1{ font-size:17px; }

.team-name-row{ display:flex; gap:10px; align-items:center; }
.team-name-row .input-wrap{ flex:1; }
.team-name-row input{ text-align:center; font-weight:700; padding-left:14px; }
.swap-teams-btn{
  width:38px; height:38px; border-radius:50%; background:var(--bg-page); border:1px solid var(--border-color);
  color:var(--text-secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.chip-group{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  flex:1; min-width:70px; text-align:center; padding:12px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border-color); background:#fff; font-weight:700; color:var(--text-secondary);
  transition:all .15s var(--ease);
}
.chip.active{ border-color:var(--color-primary); background:rgba(30,142,137,.08); color:var(--color-primary); }

.section-label{ font-size:13px; font-weight:700; color:var(--text-primary); margin:22px 0 10px; display:block; }

/* =========================================================
   Game screen
   ========================================================= */
.game-header{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
}
.game-header .round-label{ font-size:12px; color:var(--text-secondary); font-weight:700; }
.game-header .round-value{ font-size:15px; font-weight:800; }

.timer-ring{
  width:64px; height:64px; border-radius:50%; background:#fff; border:3px solid var(--color-secondary);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:var(--color-primary);
  box-shadow:var(--shadow-pop);
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:6;
}
.timer-ring.low{ border-color:var(--color-team-b); color:var(--color-team-b); animation:pulse 1s infinite; }
@keyframes pulse{ 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.08);} }

.letter-display{
  text-align:center; margin:6px 0 22px;
}
.letter-display .big-letter{
  font-size:80px; font-weight:900; color:var(--text-primary); line-height:1;
}

.category-grid-wrap{ position:relative; padding:0 20px; }
.category-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}

.cat-card{
  position:relative; background:#fff; border:2px solid var(--border-color); border-radius:var(--radius-md);
  padding:18px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  overflow:hidden;
}
.cat-card .cat-icon{ font-size:26px; }
.cat-card .cat-name{ font-weight:800; font-size:14px; }
.cat-card .cat-points{ font-size:12px; color:var(--text-secondary); font-weight:700; }

.cat-card.answered-a{ border-color:var(--color-team-a); box-shadow:0 4px 14px rgba(30,142,137,.18); }
.cat-card.answered-b{ border-color:var(--color-team-b); box-shadow:0 4px 14px rgba(240,106,99,.18); }
.cat-card.answered-a .cat-points, .cat-card.answered-b .cat-points{ color:var(--text-primary); }

.cat-card .team-dot{
  position:absolute; top:8px; left:8px; width:9px; height:9px; border-radius:50%;
}
.team-dot.a{ background:var(--color-team-a); }
.team-dot.b{ background:var(--color-team-b); }

.cat-card .fly-points{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  font-weight:900; font-size:14px; color:var(--color-win); opacity:0; pointer-events:none;
}
.cat-card.pop .fly-points{
  animation:flyUp .9s var(--ease) forwards;
}
@keyframes flyUp{
  0%{ opacity:0; transform:translate(-50%,10px) scale(.6); }
  25%{ opacity:1; transform:translate(-50%,-6px) scale(1.15); }
  70%{ opacity:1; transform:translate(-50%,-26px) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-42px) scale(.9); }
}
.cat-card.pop{ animation:cardPop .4s var(--ease); }
@keyframes cardPop{ 0%{transform:scale(1);} 40%{transform:scale(1.06);} 100%{transform:scale(1);} }

.score-bar{
  display:flex; align-items:center; gap:14px; padding:18px 20px; margin-top:auto;
}
.team-score{
  flex:1; border-radius:var(--radius-lg); padding:14px; display:flex; align-items:center; justify-content:space-between;
  color:#fff; font-weight:800; transition:transform .3s var(--ease);
}
.team-score.a{ background:var(--color-team-a); }
.team-score.b{ background:var(--color-team-b); }
.team-score .val{ font-size:22px; }
.score-vs{ font-weight:800; color:var(--text-secondary); font-size:13px; }
.team-score.bump{ animation:bump .35s var(--ease); }
@keyframes bump{ 0%{transform:scale(1);} 50%{transform:scale(1.05);} 100%{transform:scale(1);} }

.progress-track{
  height:8px; background:var(--border-color); border-radius:8px; overflow:hidden; margin:8px 20px 0;
}
.progress-fill{ height:100%; background:var(--color-secondary); border-radius:8px; transition:width .4s var(--ease); }
.progress-text{ text-align:center; font-size:12px; color:var(--text-secondary); font-weight:700; margin-top:6px; }

/* Points entry (referee) */
.points-row{
  display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--border-color);
  border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px;
}
.points-row .cat-info{ display:flex; align-items:center; gap:10px; font-weight:700; }
.stepper{ display:flex; align-items:center; gap:10px; }
.stepper button{
  width:32px; height:32px; border-radius:50%; background:var(--bg-page); border:1px solid var(--border-color);
  font-weight:800; font-size:16px; color:var(--text-primary);
}
.stepper .val{ min-width:34px; text-align:center; font-weight:800; font-family:var(--font-numeric); }

/* Round end / trophy */
.trophy-wrap{ text-align:center; padding:36px 24px 10px; }
.trophy-icon{ font-size:56px; }
.trophy-wrap h2{ font-size:22px; margin:12px 0 6px; }

.result-pill-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 20px; }
.result-pill{
  background:#fff; border:1px solid var(--border-color); border-radius:var(--radius-md); padding:12px 6px; text-align:center;
}
.result-pill .status{ font-size:16px; margin-top:4px; }
.result-pill.win{ border-color:var(--color-win); }
.result-pill.lose{ border-color:var(--border-color); }

/* Sidebar / activity log */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(32,53,71,.4); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40;
}
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; bottom:0; right:0; width:88%; max-width:340px; background:#fff; z-index:41;
  transform:translateX(100%); transition:transform .3s var(--ease); box-shadow:-8px 0 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0); }
.drawer.drawer-left{ right:auto; left:0; box-shadow:8px 0 30px rgba(0,0,0,.12); transform:translateX(-100%); }
.drawer.drawer-left.open{ transform:translateX(0); }
.drawer-header{ padding:18px 20px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; }
.drawer-body{ padding:16px 20px; overflow-y:auto; flex:1; }
.log-item{ border-bottom:1px dashed var(--border-color); padding:12px 0; font-size:13px; }
.log-item .log-round{ font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.log-item .log-detail{ color:var(--text-secondary); display:flex; justify-content:space-between; }

/* How to play */
.howto-step{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.howto-step .num{
  width:26px; height:26px; border-radius:50%; background:var(--color-primary); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}

/* =========================================================
   Scoreboard/leaderboard
   ========================================================= */
.winner-banner{
  background:linear-gradient(135deg,#EAF6F5,#F8FAFB); border-radius:var(--radius-md); padding:18px; text-align:center;
  font-weight:800; color:var(--color-primary); display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;
}

/* =========================================================
   Admin panel
   ========================================================= */
.admin-shell{ display:flex; min-height:100vh; background:var(--bg-page); direction:rtl; }

.admin-sidebar{
  width:230px; background:var(--text-primary); color:#fff; flex-shrink:0; display:flex; flex-direction:column;
  padding:20px 0; position:sticky; top:0; height:100vh;
}
.admin-sidebar .brand{ text-align:center; font-weight:900; font-size:20px; color:#fff; padding:0 16px 20px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:12px; }
.admin-sidebar .brand span{ color:#5FD3CB; }
.admin-nav{ list-style:none; margin:0; padding:0 12px; flex:1; }
.admin-nav li + li{ margin-top:4px; }
.admin-nav a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; font-size:14px; font-weight:600;
  color:rgba(255,255,255,.7); transition:all .15s;
}
.admin-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.admin-nav a.active{ background:var(--color-primary); color:#fff; }
.admin-nav .logout-link{ margin-top:auto; }

.admin-main{ flex:1; padding:26px 32px; max-width:100%; overflow-x:hidden; }
.admin-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.admin-topbar h1{ font-size:20px; }
.admin-topbar .url-chip{ font-size:12px; color:var(--text-secondary); background:#fff; border:1px solid var(--border-color); padding:6px 12px; border-radius:20px; }

.admin-view{ display:none; }
.admin-view.active{ display:block; animation:fadeIn .25s var(--ease); }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat-card{ background:#fff; border:1px solid var(--border-color); border-radius:var(--radius-md); padding:18px; display:flex; align-items:center; gap:12px; }
.stat-card .ic{ width:42px; height:42px; border-radius:12px; background:#EAF6F5; color:var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-card .num{ font-size:22px; font-weight:800; font-family:var(--font-numeric); }
.stat-card .lbl{ font-size:12px; color:var(--text-secondary); }

.admin-table-wrap{ background:#fff; border:1px solid var(--border-color); border-radius:var(--radius-md); overflow:hidden; }
.admin-table-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border-color); gap:10px; flex-wrap:wrap; }
.admin-table-head .search-wrap{ position:relative; flex:1; min-width:180px; }
.admin-table-head input{ width:100%; padding:9px 36px 9px 12px; border:1px solid var(--border-color); border-radius:10px; font-size:13px; }
.admin-table-head svg{ position:absolute; top:50%; right:12px; transform:translateY(-50%); color:var(--text-secondary); width:15px; height:15px; }

table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{ text-align:right; padding:12px 16px; color:var(--text-secondary); font-weight:700; border-bottom:1px solid var(--border-color); white-space:nowrap; }
tbody td{ padding:12px 16px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#FAFCFC; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge.active{ background:#E8F7EE; color:#2E9E51; }
.badge.unused{ background:#E8F7EE; color:#2E9E51; }
.badge.used{ background:#EEF0F3; color:var(--text-secondary); }
.badge.disabled{ background:#FDECEC; color:var(--color-team-b); }
.badge.inactive{ background:#FDECEC; color:var(--color-team-b); }

.row-actions{ display:flex; gap:8px; }
.row-actions button{ background:none; color:var(--text-secondary); padding:4px; border-radius:6px; }
.row-actions button:hover{ color:var(--color-primary); background:var(--bg-page); }

.code-pill{ font-family:var(--font-numeric); background:var(--bg-page); padding:4px 10px; border-radius:8px; font-weight:700; letter-spacing:.5px; }

.pagination{ display:flex; justify-content:center; gap:6px; padding:14px; }
.pagination button{ width:30px; height:30px; border-radius:8px; background:var(--bg-page); font-size:13px; font-weight:700; color:var(--text-secondary); }
.pagination button.active{ background:var(--color-primary); color:#fff; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-card{ background:#fff; border:1px solid var(--border-color); border-radius:var(--radius-md); padding:22px; }

.empty-state{ text-align:center; padding:50px 20px; color:var(--text-secondary); }
.empty-state .ic{ font-size:36px; margin-bottom:10px; }

.toggle{ position:relative; width:42px; height:24px; }
.toggle input{ opacity:0; width:0; height:0; }
.toggle .track{ position:absolute; inset:0; background:var(--border-color); border-radius:20px; transition:.2s; cursor:pointer; }
.toggle .track:before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .track{ background:var(--color-primary); }
.toggle input:checked + .track:before{ transform:translateX(-18px); }

.login-split{ display:flex; min-height:100vh; }
.login-split .form-side{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-split .art-side{ flex:1; background:linear-gradient(160deg,#EAF6F5,#fff); display:flex; align-items:center; justify-content:center; }
@media (max-width:860px){ .login-split .art-side{ display:none; } }

/* =========================================================
   Utility
   ========================================================= */
.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.gap-8{ gap:8px; } .gap-10{ gap:10px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.text-center{ text-align:center; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; }
.small{ font-size:12px; }
.hidden{ display:none !important; }

@media (max-width:720px){
  .admin-sidebar{ position:fixed; right:0; z-index:50; transform:translateX(100%); transition:transform .25s var(--ease); }
  .admin-sidebar.open{ transform:translateX(0); }
  .admin-main{ padding:18px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
}