/* ===================================================================
   صديق القولون — نظام التصميم (Design Tokens)
   ملاحظة: الاسم "صديق القولون" مقترح مؤقت وقابل للتغيير بسهولة (انظر ملف data.js)
   =================================================================== */

:root{
  /* ألوان أساسية — مستوحاة من زيتون وأرض ريفية هادئة، بعيدة عن القياسي */
  --bg:            #F3F6F1;
  --bg-alt:        #E8EEE3;
  --surface:       #FFFFFF;
  --surface-2:     #FBFCF9;

  --primary:       #2F5747;
  --primary-dark:  #1E3D31;
  --primary-light: #6E9B83;
  --primary-tint:  #E3ECE4;

  --accent:        #C68A2E;
  --accent-dark:   #A06F22;
  --accent-tint:   #F6E8CC;

  --text:          #1E2A22;
  --text-muted:    #57655C;
  --text-faint:    #88958C;
  --border:        #DCE3D5;
  --border-strong: #C3CFBA;

  /* حالة الغذاء — العنصر التصميمي المحوري في الموقع */
  --allowed:       #3F8C53;
  --allowed-tint:  #E3F1E4;
  --limited:       #C98A1F;
  --limited-tint:  #FAF0DC;
  --avoid:         #C1572E;
  --avoid-tint:    #FBE9E0;

  /* شريط التحذير الطبي */
  --warning-bg:     #FCEFD8;
  --warning-border: #E7B564;
  --warning-text:   #7A4A12;

  /* خطوط */
  --font-display: "El Messiri", "Tahoma", sans-serif;
  --font-body:    "Almarai", "Tahoma", sans-serif;

  /* مقاييس */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(30,42,34,0.06), 0 1px 2px rgba(30,42,34,0.04);
  --shadow-md: 0 6px 20px rgba(30,42,34,0.08);
  --shadow-lg: 0 16px 40px rgba(30,42,34,0.12);

  --container: 1180px;
  --header-h: 64px;
  --topbar-h: 40px;
}

/* ===================== إعادة ضبط أساسية ===================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--primary-dark);
  margin:0 0 .5em;
  line-height:1.3;
  font-weight:700;
}
h1{ font-size:clamp(1.9rem, 4vw, 2.8rem); }
h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--text); }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

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

/* ===================== شريط الإخلاء الطبي العلوي ===================== */
.top-medical-bar{
  background:var(--warning-bg);
  border-bottom:1px solid var(--warning-border);
  color:var(--warning-text);
  font-size:.85rem;
}
.top-medical-bar .container{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:var(--topbar-h);
  flex-wrap:wrap;
}
.top-medical-bar svg{ flex:none; width:18px; height:18px; }
.top-medical-bar strong{ font-weight:700; }
.top-medical-bar a{
  text-decoration:underline;
  font-weight:700;
  white-space:nowrap;
  margin-right:auto; /* RTL: يبقى بالطرف */
}

/* ===================== الهيدر ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(243,246,241,0.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:var(--header-h);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  color:var(--primary-dark);
}
.brand .logo-mark{
  width:36px; height:36px; flex:none;
}
.brand .brand-sub{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:.7rem;
  color:var(--text-muted);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin-right:auto; /* تدفع القائمة لليسار بصريا داخل RTL */
}
.main-nav a{
  padding:8px 14px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.92rem;
  color:var(--text);
  transition:background .15s, color .15s;
}
.main-nav a:hover{ background:var(--primary-tint); color:var(--primary-dark); }
.main-nav a.active{ background:var(--primary); color:#fff; }

.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--primary-dark);
  transition:background .15s, border-color .15s;
}
.icon-btn:hover{ background:var(--primary-tint); border-color:var(--primary-light); }
.icon-btn svg{ width:19px; height:19px; }

.nav-toggle{ display:none; }

/* قائمة الموبايل المنبثقة */
.mobile-nav{
  position:fixed; inset:0;
  background:rgba(30,42,34,.45);
  z-index:80;
  display:none;
}
.mobile-nav.open{ display:block; }
.mobile-nav-panel{
  position:absolute; top:0; right:0; /* RTL: تنزلق من اليمين */
  width:min(82vw, 340px); height:100%;
  background:var(--surface);
  padding:18px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-lg);
  animation:slideIn .22s ease-out;
}
@keyframes slideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.mobile-nav-panel a{
  display:block;
  padding:13px 14px;
  border-radius:var(--radius-md);
  font-weight:700;
  color:var(--text);
}
.mobile-nav-panel a.active{ background:var(--primary); color:#fff; }
.mobile-nav-panel a:hover{ background:var(--primary-tint); }
.mobile-nav-close{
  align-self:flex-start;
  margin-bottom:10px;
  background:none; border:none; color:var(--text-muted); font-size:.9rem;
  display:flex; align-items:center; gap:6px;
}

/* ===================== الفوتر ===================== */
.site-footer{
  background:var(--primary-dark);
  color:#DCE7DF;
  margin-top:64px;
}
.site-footer .container{ padding-top:48px; padding-bottom:28px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:28px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-col p{ color:#B9CBC0; font-size:.88rem; }
.footer-col ul li{ margin-bottom:9px; }
.footer-col a{ color:#CBDACF; font-size:.88rem; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
  padding-top:18px;
  font-size:.82rem; color:#9FB6A8;
}
.footer-disclaimer-note{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);
  padding:14px 16px;
  font-size:.82rem;
  color:#CBDACF;
  margin-top:18px;
}

/* ===================== أزرار ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.95rem;
  border:1px solid transparent;
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-dark); box-shadow:var(--shadow-md); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-dark); }
.btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--primary-dark); }
.btn-outline:hover{ background:var(--primary-tint); }
.btn-sm{ padding:8px 16px; font-size:.85rem; }
.btn-block{ width:100%; }

/* ===================== شارات حالة الغذاء (العنصر التصميمي المحوري) ===================== */
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px;
  border-radius:var(--radius-pill);
  font-size:.8rem;
  font-weight:700;
  white-space:nowrap;
}
.status-badge::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  flex:none;
}
.status-allowed{ background:var(--allowed-tint); color:var(--allowed); }
.status-allowed::before{ background:var(--allowed); }
.status-limited{ background:var(--limited-tint); color:var(--limited); }
.status-limited::before{ background:var(--limited); }
.status-avoid{ background:var(--avoid-tint); color:var(--avoid); }
.status-avoid::before{ background:var(--avoid); }

/* ===================== الكروت ===================== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary-light); }
.card-media{
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--primary-tint), var(--bg-alt));
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-light);
}
.card-media svg{ width:46px; height:46px; }
.card-body{ padding:16px; }
.card-eyebrow{ font-size:.75rem; color:var(--text-faint); font-weight:700; margin-bottom:6px; }
.card-title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin:0 0 8px; color:var(--primary-dark); }
.card-desc{ font-size:.88rem; color:var(--text-muted); margin:0 0 10px; }
.card-footer-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.card-fav{
  background:none; border:none; color:var(--text-faint); padding:4px;
  display:flex; align-items:center;
}
.card-fav svg{ width:20px; height:20px; }
.card-fav.is-fav{ color:var(--accent); }

.grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
}

/* ===================== أقسام عامة ===================== */
.section{ padding:56px 0; }
.section-tight{ padding:32px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:26px; flex-wrap:wrap;
}
.section-head .eyebrow{
  display:block; font-size:.8rem; font-weight:700; color:var(--accent-dark);
  margin-bottom:6px; letter-spacing:.02em;
}
.section-alt{ background:var(--bg-alt); }
.muted{ color:var(--text-muted); }
.link-more{ font-weight:700; color:var(--primary); white-space:nowrap; }
.link-more:hover{ text-decoration:underline; }

/* ===================== الهيرو ===================== */
.hero{
  padding:46px 0 60px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary-tint); color:var(--primary-dark);
  padding:6px 14px; border-radius:var(--radius-pill);
  font-size:.8rem; font-weight:700; margin-bottom:16px;
}
.hero h1{ margin-bottom:.45em; }
.hero p.lead{ font-size:1.08rem; color:var(--text-muted); max-width:46ch; }
.hero-actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }

/* صندوق البحث السريع داخل الهيرو — عنصر تفاعلي يجسّد فكرة الموقع */
.quick-check{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-md);
  margin-top:28px;
}
.quick-check label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:8px; color:var(--primary-dark); }
.quick-check-input-row{ position:relative; }
.quick-check input[type="text"]{
  width:100%; padding:13px 44px 13px 14px;
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface-2);
}
.quick-check-input-row svg{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--text-faint);
}
.quick-check-results{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.quick-result-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-radius:var(--radius-sm); background:var(--bg-alt);
  font-size:.9rem; font-weight:700;
}
.quick-check-hint{ font-size:.78rem; color:var(--text-faint); margin-top:8px; }

.hero-visual{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-md);
}
.hero-visual-title{ font-weight:700; color:var(--primary-dark); margin-bottom:14px; font-size:.92rem; }
.legend-row{ display:flex; flex-direction:column; gap:10px; }
.legend-row .status-badge{ width:fit-content; }
.legend-row .legend-desc{ font-size:.82rem; color:var(--text-muted); margin-right:auto; }
.legend-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border); }
.legend-item:last-child{ border-bottom:none; }

/* فئات الأغذية على الرئيسية */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.cat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 14px; text-align:center; transition:border-color .15s, transform .15s;
}
.cat-card:hover{ border-color:var(--primary-light); transform:translateY(-2px); }
.cat-card .cat-icon{
  width:46px; height:46px; margin:0 auto 10px;
  border-radius:50%; background:var(--primary-tint); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.cat-card .cat-icon svg{ width:22px; height:22px; }
.cat-card span{ font-weight:700; font-size:.88rem; }

/* ===================== صفحات تفصيلية (غذاء / وصفة / مقال) ===================== */
.breadcrumbs{ font-size:.82rem; color:var(--text-faint); margin-bottom:18px; }
.breadcrumbs a:hover{ text-decoration:underline; }
.detail-hero{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; margin-bottom:30px; }
.detail-media{
  width:160px; height:160px; flex:none; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--primary-tint), var(--bg-alt));
  display:flex; align-items:center; justify-content:center; color:var(--primary-light);
}
.detail-media svg{ width:64px; height:64px; }
.detail-heading{ flex:1; min-width:240px; }
.detail-heading .status-badge{ margin-bottom:10px; }
.detail-meta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; }
.detail-meta-chip{
  display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:9px 14px; font-size:.8rem;
}
.detail-meta-chip b{ color:var(--primary-dark); font-size:.92rem; }

.tab-strip{
  display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:24px; overflow-x:auto;
}
.tab-strip button{
  background:none; border:none; padding:11px 6px; font-weight:700; color:var(--text-muted);
  border-bottom:3px solid transparent; white-space:nowrap;
}
.tab-strip button.active{ color:var(--primary-dark); border-color:var(--primary); }

.info-box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px; margin-bottom:18px;
}
.info-box h4{ margin-bottom:10px; font-size:1rem; }
.nutrient-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.nutrient-item{ text-align:center; background:var(--bg-alt); border-radius:var(--radius-sm); padding:10px 6px; }
.nutrient-item b{ display:block; font-size:1.05rem; color:var(--primary-dark); }
.nutrient-item span{ font-size:.74rem; color:var(--text-muted); }

.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:6px 13px; font-size:.82rem; font-weight:700; color:var(--text-muted);
}
.tag-pill:hover{ border-color:var(--primary-light); color:var(--primary-dark); }

.rating-stars{ display:inline-flex; gap:2px; color:var(--accent); }
.rating-stars svg{ width:16px; height:16px; }

/* قسم التجارب والتعليقات */
.experience-card{ padding:18px; }
.experience-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--primary-tint); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex:none;
}
.experience-name{ font-weight:700; font-size:.92rem; }
.experience-date{ font-size:.76rem; color:var(--text-faint); }

.comment-form, .suggest-form{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px;
}
.form-row{ margin-bottom:14px; }
.form-row label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:6px; }
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:11px 13px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-2);
}
.form-row textarea{ min-height:100px; resize:vertical; }
.form-hint{ font-size:.78rem; color:var(--text-faint); margin-top:6px; }

/* صفحة البحث */
.search-bar-lg{ position:relative; margin-bottom:18px; }
.search-bar-lg input{
  width:100%; padding:16px 50px 16px 16px; font-size:1.05rem;
  border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.search-bar-lg svg{ position:absolute; right:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--text-faint); }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.filter-chip{
  border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--radius-pill);
  padding:8px 16px; font-size:.85rem; font-weight:700; color:var(--text-muted);
}
.filter-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.search-empty{ text-align:center; padding:60px 20px; color:var(--text-muted); }
.search-empty svg{ width:48px; height:48px; margin:0 auto 14px; color:var(--text-faint); }

/* صفحة عن النظام / من نحن — محتوى نصي طويل */
.prose{ max-width:74ch; }
.prose h2{ margin-top:1.6em; }
.prose ul{ list-style:disc; padding-right:1.4em; margin-bottom:1em; }
.prose li{ margin-bottom:.4em; }
.callout{
  background:var(--primary-tint); border-right:4px solid var(--primary);
  border-radius:var(--radius-sm); padding:14px 18px; margin:20px 0; font-size:.92rem;
}
.callout-warning{
  background:var(--warning-bg); border-right:4px solid var(--warning-border); color:var(--warning-text);
}

/* صفحة الأسئلة الشائعة */
.accordion-item{ border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; background:var(--surface); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:none; border:none; padding:16px 18px; text-align:right; font-weight:700; color:var(--primary-dark);
}
.accordion-trigger svg{ width:18px; height:18px; flex:none; transition:transform .2s; }
.accordion-item.open .accordion-trigger svg{ transform:rotate(180deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.accordion-panel-inner{ padding:0 18px 16px; color:var(--text-muted); font-size:.92rem; }

/* لوحة التحكم (Admin) */
.admin-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; background:var(--bg-alt); }
.admin-sidebar{ background:var(--primary-dark); color:#dce7df; padding:20px 14px; }
.admin-sidebar .brand{ color:#fff; margin-bottom:24px; padding:0 8px; }
.admin-sidebar a{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius-sm); color:#cfe0d6; font-weight:700; font-size:.88rem; margin-bottom:2px; }
.admin-sidebar a.active, .admin-sidebar a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.admin-main{ padding:26px 30px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:26px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; }
.stat-card .num{ font-family:var(--font-display); font-size:1.7rem; color:var(--primary-dark); }
.stat-card .lbl{ font-size:.8rem; color:var(--text-muted); }
.admin-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.admin-table th, .admin-table td{ padding:11px 14px; text-align:right; font-size:.88rem; border-bottom:1px solid var(--border); }
.admin-table th{ background:var(--bg-alt); color:var(--text-muted); font-weight:700; }
.admin-table tr:last-child td{ border-bottom:none; }
.pill-status{ padding:3px 10px; border-radius:var(--radius-pill); font-size:.74rem; font-weight:700; }
.pill-published{ background:var(--allowed-tint); color:var(--allowed); }
.pill-draft{ background:var(--limited-tint); color:var(--limited); }
.admin-actions a, .admin-actions button{ font-size:.8rem; font-weight:700; color:var(--primary); margin-inline-start:10px; background:none; border:none; }
.admin-login{ max-width:380px; margin:80px auto; }

/* CTA ختامي */
.cta-band{ background:var(--primary); border-radius:var(--radius-lg); padding:42px; text-align:center; color:#fff; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#D7E6DC; max-width:50ch; margin-inline:auto; }

/* ===================== استجابة الشاشات ===================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .footer-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; }
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{ display:none; }
  h1{ font-size:1.7rem; }
}
@media (max-width: 480px){
  .grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
}