/* Premium mobile navigation. Kept separate from the desktop stylesheet. */
:root { --md-bg:#09090B; --md-card:#111827; --md-hover:#1F2937; --md-border:rgba(255,255,255,.08); --md-green:#22C55E; --md-green-hover:#16A34A; --md-blue:#38BDF8; --md-warning:#F59E0B; --md-text:#F9FAFB; --md-secondary:#9CA3AF; --md-muted:#6B7280; }
.md-overlay { position:fixed; inset:0; z-index:10020; background:rgba(0,0,0,.72); opacity:0; pointer-events:none; transition:opacity 400ms ease; backdrop-filter:blur(18px); }
.md-overlay.is-open { opacity:1; pointer-events:auto; }
.md-drawer { position:fixed; top:0; right:0; bottom:0; z-index:10021; width:min(92%,390px); display:flex; flex-direction:column; overflow:hidden; color:var(--md-text); background:var(--md-bg); border-left:1px solid var(--md-border); border-radius:24px 0 0 24px; transform:translateX(100%); transition:transform 400ms cubic-bezier(.22,1,.36,1); font-family:Inter, sans-serif; }
.md-drawer.is-open { transform:translateX(0); }
.md-scroll { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:22px 16px 116px; scrollbar-width:none; }
.md-scroll::-webkit-scrollbar { display:none; }
.md-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.md-brand { display:flex; align-items:center; gap:10px; color:var(--md-text); text-decoration:none; font-size:22px; font-weight:700; letter-spacing:-.04em; }
.md-brand img { width:32px; height:32px; object-fit:contain; border-radius:9px; }
.md-header-right { display:flex; align-items:center; gap:8px; }
.md-badge { padding:6px 8px; color:#111; background:var(--md-warning); border-radius:999px; font-size:10px; font-weight:700; }
.md-icon-button { width:42px; height:42px; display:grid; place-items:center; color:var(--md-text); background:var(--md-card); border:1px solid var(--md-border); border-radius:16px; font-size:24px; cursor:pointer; }
.md-title { margin:0 0 12px; font-size:18px; font-weight:700; }
.md-card { width:100%; display:grid; grid-template-columns:38px 1fr 20px; align-items:center; gap:12px; margin:8px 0; padding:15px 14px; color:var(--md-text); text-align:left; background:var(--md-card); border:1px solid var(--md-border); border-radius:18px; cursor:pointer; transition:background 180ms ease, transform 180ms ease, border-color 180ms ease; }
.md-card:hover,.md-card:focus-visible { background:var(--md-hover); border-color:rgba(34,197,94,.35); outline:none; }
.md-card:active { transform:scale(.985); }
.md-icon { display:grid; place-items:center; width:38px; height:38px; color:var(--md-green); background:rgba(34,197,94,.1); border-radius:14px; font-size:20px; transition:transform 180ms ease; }
.md-card:hover .md-icon,.md-card:focus-visible .md-icon { transform:scale(1.06); }
.md-name { display:block; font-size:17px; font-weight:600; }
.md-description { display:block; margin-top:3px; color:var(--md-secondary); font-size:13px; font-weight:400; line-height:1.3; }
.md-arrow { color:var(--md-muted); font-size:22px; }
.md-panel { display:grid; grid-template-rows:0fr; margin:0 0 4px; opacity:0; overflow:hidden; transition:grid-template-rows 300ms ease, opacity 220ms ease; }
.md-panel > div { min-height:0; overflow:hidden; }
.md-panel.is-open { grid-template-rows:1fr; opacity:1; }
.md-subcard { width:100%; display:grid; grid-template-columns:30px 1fr 16px; gap:9px; align-items:center; padding:11px 10px; color:var(--md-text); background:rgba(17,24,39,.72); border:0; border-bottom:1px solid var(--md-border); text-align:left; cursor:pointer; }
.md-subcard span:first-child { color:var(--md-blue); font-size:18px; }
.md-subcard strong { display:block; font-size:14px; font-weight:600; }
.md-subcard small { display:block; margin-top:2px; color:var(--md-secondary); font-size:12px; font-weight:400; }
.md-manager { margin-top:18px; padding:16px; background:var(--md-card); border:1px solid var(--md-border); border-radius:18px; }
.md-manager-row { display:flex; align-items:center; gap:12px; }
.md-manager-avatar { display:grid; place-items:center; width:48px; height:48px; flex:none; color:var(--md-green); background:rgba(34,197,94,.12); border-radius:50%; font-size:22px; }
.md-manager strong { display:block; font-size:17px; font-weight:700; }.md-manager a { display:block; margin-top:3px; color:var(--md-secondary); font-size:13px; text-decoration:none; }
.md-cta { width:100%; margin-top:14px; padding:17px 12px; color:#04130a; background:var(--md-green); border:0; border-radius:16px; box-shadow:0 0 24px rgba(34,197,94,.25); font:700 14px Inter,sans-serif; cursor:pointer; }
.md-cta:hover { background:var(--md-green-hover); }
.md-dock { position:absolute; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); left:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:8px; background:rgba(17,24,39,.92); border:1px solid var(--md-border); border-radius:18px; backdrop-filter:blur(18px); }
.md-dock a,.md-dock button { min-width:0; min-height:44px; display:grid; place-items:center; gap:2px; color:var(--md-text); background:transparent; border:0; border-radius:12px; font:600 clamp(9px,2.8vw,11px) Inter,sans-serif; text-decoration:none; cursor:pointer; }.md-dock a:hover,.md-dock button:hover { background:var(--md-hover); color:var(--md-green); }
.md-screen[hidden] { display:none; }
.md-screen { animation:md-screen-in 250ms ease both; }
.md-screen-head { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.md-screen-head h2 { margin:0; font-size:20px; line-height:1.15; }
.md-back { padding:7px 0; color:var(--md-green); background:none; border:0; font:600 14px Inter,sans-serif; cursor:pointer; }
.md-featured { animation:md-card-in 250ms ease both; }
.md-featured.is-changing { animation:md-card-change 250ms ease both; }
.md-premium-card { overflow:hidden; background:linear-gradient(145deg,rgba(31,41,55,.98),rgba(17,24,39,.98)); border:1px solid var(--md-border); border-radius:20px; box-shadow:0 16px 35px rgba(0,0,0,.22); }
.md-premium-media { height:178px; overflow:hidden; background:rgba(34,197,94,.08); }
.md-premium-media img { width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.03); transition:transform 250ms ease; }
.md-premium-card:hover .md-premium-media img { transform:scale(1.03); }
.md-no-image,.md-product-mark { height:100%; display:grid; place-items:center; color:var(--md-green); font-size:46px; background:radial-gradient(circle,rgba(34,197,94,.16),transparent 65%); }
.md-premium-content { padding:16px; }
.md-premium-content h3 { margin:0 0 8px; font-size:20px; line-height:1.18; }
.md-premium-content p { margin:0 0 12px; color:var(--md-secondary); font-size:14px; line-height:1.45; }
.md-features { display:grid; gap:7px; margin-bottom:12px; color:#D1FAE5; font-size:12px; line-height:1.3; }
.md-use { margin-bottom:13px; color:var(--md-secondary); font-size:12px; line-height:1.35; }
.md-price { display:block; margin-bottom:13px; color:var(--md-green); font-size:19px; }
.md-more { width:100%; padding:13px 14px; color:#04130a; background:var(--md-green); border:0; border-radius:13px; font:700 13px Inter,sans-serif; cursor:pointer; transition:background 180ms ease,transform 180ms ease; }
.md-more:hover { background:var(--md-green-hover); }.md-more:active { transform:scale(.98); }
.md-thumbs { display:flex; gap:9px; overflow-x:auto; margin:14px -2px 0; padding:2px 2px 7px; scrollbar-width:none; }
.md-thumbs::-webkit-scrollbar { display:none; }
.md-thumb { width:92px; min-width:92px; padding:5px; display:flex; flex-direction:column; gap:5px; color:var(--md-secondary); background:var(--md-card); border:1px solid var(--md-border); border-radius:12px; text-align:left; cursor:pointer; }
.md-thumb.is-selected { color:var(--md-text); border-color:var(--md-green); box-shadow:0 0 0 1px rgba(34,197,94,.25); }
.md-thumb img,.md-thumb > span:first-child { width:80px; height:48px; display:grid; place-items:center; object-fit:cover; color:var(--md-green); background:rgba(34,197,94,.08); border-radius:8px; font-size:20px; }
.md-thumb > span:last-child { overflow:hidden; font-size:11px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.md-product-card .md-product-mark { height:118px; }.md-product-group { display:block; margin-bottom:7px; color:var(--md-green); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
@keyframes md-screen-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes md-card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes md-card-change { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:769px) { .md-overlay,.md-drawer { display:none !important; } }
@media (max-width:430px) { .md-scroll { padding-right:12px; padding-left:12px; }.md-card { padding:13px 10px; }.md-name { font-size:16px; }.md-premium-media { height:150px; }.md-premium-content { padding:14px; }.md-premium-content h3 { font-size:18px; } }
@media (prefers-reduced-motion:reduce) { .md-screen,.md-featured,.md-featured.is-changing { animation:none; }.md-premium-media img { transition:none; } }