/* menu-sheet.css — منيو بيطلع من تحت (يلا نبدأ؟) بكروت 2×N وزرار فاتح/داكن.
   للتعديل: الألوان والزوايا من المتغيرات. */
:root{
  --ms-bg:var(--surface,#fff);
  --ms-card-bg:var(--surface,#fff);
  --ms-card-border:var(--line,#E4E6F0);
  --ms-card-active-bg:var(--brand-soft,#EAEBF9);
  --ms-card-active-border:#B8BEE6;
  --ms-ink:var(--ink,#12173A);
  --ms-radius:28px;
  --ms-backdrop:rgba(10,13,35,.5);
}
html[data-theme="dark"]{--ms-bg:#0F1628;--ms-card-bg:#151D33;--ms-card-border:#2A3654;--ms-card-active-bg:#1C2749;--ms-card-active-border:#3F4E86;--ms-ink:#F4F6FF;--ms-backdrop:rgba(0,0,0,.66)}
.ms-backdrop{position:fixed;inset:0;background:var(--ms-backdrop);z-index:900;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.ms-backdrop.show{opacity:1;visibility:visible}
.ms-sheet{
  position:fixed;inset-inline:0;bottom:0;margin-inline:auto;width:100%;max-width:560px;z-index:901;
  background:var(--ms-bg);color:var(--ms-ink);border-radius:var(--ms-radius) var(--ms-radius) 0 0;
  padding:14px 20px calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
  max-height:88vh;overflow-y:auto;box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);
}
.ms-sheet.open{transform:none}
.ms-handle{width:44px;height:5px;border-radius:9px;background:var(--ms-card-border);margin:0 auto 14px}
.ms-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ms-head h2{margin:0;font-size:24px;font-weight:800;color:var(--ms-ink)}
.ms-close{width:40px;height:40px;border:0;background:transparent;color:var(--ms-ink);opacity:.7;cursor:pointer;display:grid;place-items:center;border-radius:12px}
.ms-close:hover{opacity:1;background:var(--ms-card-active-bg)}
.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ms-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:104px;padding:16px 10px;
  border:1.5px solid var(--ms-card-border);background:var(--ms-card-bg);color:var(--ms-ink);border-radius:20px;
  font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .2s,border-color .2s,background .2s;
}
.ms-card svg{width:30px;height:30px}
.ms-card:hover{transform:translateY(-2px);border-color:var(--ms-card-active-border)}
.ms-card.is-active{background:var(--ms-card-active-bg);border-color:var(--ms-card-active-border)}
.ms-theme{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:18px;padding:6px;background:var(--ms-card-active-bg);border-radius:99px}
.ms-theme button{border:0;background:transparent;color:var(--ms-ink);opacity:.65;font:inherit;font-weight:600;padding:12px;border-radius:99px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.ms-theme button.on{background:var(--ms-card-bg);opacity:1;box-shadow:0 4px 14px -6px rgba(0,0,0,.3)}
body.ms-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.ms-sheet,.ms-backdrop{transition:none}}