:root{
  --sheet-bg:#fff; --sheet-blur:10px; --sheet-shadow:0 18px 50px rgba(0,0,0,.25);
  --sheet-border:1px solid rgba(0,0,0,.08); --scrim-bg:rgba(0,0,0,.45); --radius:20px;
}
.sheet-scrim{position:fixed;inset:0;background:var(--scrim-bg);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1000}
.sheet{position:fixed;z-index:1001;background:var(--sheet-bg);backdrop-filter:blur(var(--sheet-blur));
  box-shadow:var(--sheet-shadow);border:var(--sheet-border);display:grid;grid-template-rows:auto 1fr;opacity:0;transition:transform .25s,opacity .2s;}
.sheet header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid rgba(0,0,0,.06)}
.sheet header h3{margin:0;font:600 16px/1.3 system-ui,Segoe UI,Roboto,Arial}
.sheet header .close{border:0;background:#0b7285;color:#fff;padding:.45rem .7rem;border-radius:10px;cursor:pointer}
.sheet .content{overflow:auto;padding:1rem;max-width:640px}
.sheet .handle{width:48px;height:6px;border-radius:999px;background:#d1d5db;margin:.5rem auto 0;}
@media (max-width: 768px){
  .sheet{left:0;right:0;bottom:0;border-radius:var(--radius) var(--radius) 0 0;transform:translateY(20px);max-height:85vh;}
  .sheet.open{opacity:1;transform:translateY(0)}
  .sheet-scrim.open{opacity:1;pointer-events:auto}
  .sheet header{padding-top:.5rem}
}
@media (min-width: 769px){
  .sheet{top:0;right:0;width:min(420px,95vw);height:100vh;border-left:var(--sheet-border);transform:translateX(30px)}
  .sheet.open{opacity:1;transform:translateX(0)}
  .sheet-scrim.open{opacity:1;pointer-events:auto}
}