/* DBShop Material Design 3 — self-hosted, no external deps */
:root{
  --md-primary:#6750a4;--md-on-primary:#fff;--md-primary-container:#eaddff;
  --md-secondary:#625b71;--md-surface:#fef7ff;--md-surface-container:#f3edf7;
  --md-surface-container-high:#ece6f0;--md-outline:#79747e;--md-error:#b3261e;
  --md-on-surface:#1d1b20;--md-on-surface-variant:#49454f;
  --md-elevation-1:0 1px 2px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
  --md-elevation-2:0 2px 6px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.08);
  --md-elevation-3:0 4px 12px rgba(0,0,0,.14);
  --md-radius-sm:8px;--md-radius-md:12px;--md-radius-lg:16px;--md-radius-xl:28px;
  --md-font:tahoma,'Segoe UI',system-ui,sans-serif;
  --md-drawer-w:260px;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:var(--md-font);background:var(--md-surface);color:var(--md-on-surface);line-height:1.5}
a{color:var(--md-primary);text-decoration:none}
img{max-width:100%;display:block}

/* Typography */
.md-display-sm{font-size:2.25rem;font-weight:400;line-height:2.75rem}
.md-headline-sm{font-size:1.5rem;font-weight:400}
.md-title-lg{font-size:1.375rem;font-weight:500}
.md-title-md{font-size:1rem;font-weight:500;letter-spacing:.15px}
.md-body-lg{font-size:1rem}
.md-body-md{font-size:.875rem;color:var(--md-on-surface-variant)}
.md-label-lg{font-size:.875rem;font-weight:500;letter-spacing:.1px}

/* Layout */
.md-app{display:flex;min-height:100vh}
.md-drawer{width:var(--md-drawer-w);background:var(--md-surface-container);border-left:1px solid #e7e0ec;padding:12px 8px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto}
.md-main{flex:1;min-width:0;display:flex;flex-direction:column}
.md-topbar{height:64px;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--md-surface-container-high);box-shadow:var(--md-elevation-1);position:sticky;top:0;z-index:100}
.md-content{padding:20px;flex:1}
.md-container{max-width:1200px;margin:0 auto;width:100%}
.md-grid{display:grid;gap:16px}
.md-grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.md-grid-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.md-grid-4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* Nav */
.md-nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--md-radius-xl);color:var(--md-on-surface);margin:2px 0;transition:background .2s}
.md-nav-item:hover,.md-nav-item.active{background:var(--md-primary-container);color:var(--md-on-surface)}
.md-nav-icon{width:24px;text-align:center;opacity:.8}

/* Cards */
.md-card{background:var(--md-surface-container-low,#fff);border-radius:var(--md-radius-md);box-shadow:var(--md-elevation-1);padding:16px;margin-bottom:16px}
.md-card-filled{background:var(--md-surface-container)}
.md-stat-card{padding:20px;border-radius:var(--md-radius-lg);background:linear-gradient(135deg,var(--md-primary-container),#fff)}
.md-stat-value{font-size:1.75rem;font-weight:500;color:var(--md-primary)}

/* Buttons */
.md-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 24px;border:0;border-radius:var(--md-radius-xl);font:inherit;font-weight:500;cursor:pointer;transition:box-shadow .2s,background .2s}
.md-btn-filled{background:var(--md-primary);color:var(--md-on-primary);box-shadow:var(--md-elevation-1)}
.md-btn-filled:hover{box-shadow:var(--md-elevation-2)}
.md-btn-tonal{background:var(--md-primary-container);color:var(--md-on-surface)}
.md-btn-outlined{background:transparent;color:var(--md-primary);border:1px solid var(--md-outline)}
.md-btn-text{background:transparent;color:var(--md-primary);padding:0 12px}
.md-btn-error{background:var(--md-error);color:#fff}
.md-btn-sm{min-height:32px;padding:0 16px;font-size:.875rem}
.md-fab{position:fixed;bottom:24px;left:24px;width:56px;height:56px;border-radius:16px;background:var(--md-primary);color:#fff;border:0;box-shadow:var(--md-elevation-3);font-size:1.5rem;cursor:pointer;z-index:90}

/* Forms */
.md-field{margin-bottom:16px}
.md-field label{display:block;font-size:.75rem;color:var(--md-on-surface-variant);margin-bottom:4px}
.md-input,.md-select,.md-textarea{width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--md-outline);border-radius:var(--md-radius-sm);background:var(--md-surface);font:inherit;color:inherit}
.md-input:focus,.md-select:focus,.md-textarea:focus{outline:2px solid var(--md-primary);border-color:var(--md-primary)}
.md-textarea{min-height:96px;resize:vertical}
.md-checkbox-row{display:flex;align-items:center;gap:8px;margin:6px 0}

/* Table */
.md-table-wrap{overflow:auto;border-radius:var(--md-radius-md);box-shadow:var(--md-elevation-1)}
.md-table{width:100%;border-collapse:collapse;background:#fff}
.md-table th,.md-table td{padding:14px 16px;text-align:right;border-bottom:1px solid #e7e0ec}
.md-table th{font-size:.75rem;color:var(--md-on-surface-variant);font-weight:500;background:var(--md-surface-container)}
.md-table tr:hover td{background:var(--md-surface-container)}

/* Chips & badges */
.md-chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--md-radius-xl);font-size:.75rem;background:var(--md-surface-container-high)}
.md-chip-success{background:#e8f5e9;color:#2e7d32}
.md-chip-warning{background:#fff8e1;color:#f57f17}
.md-chip-error{background:#fce8e6;color:var(--md-error)}

/* Snackbar / alert */
.md-snackbar{padding:14px 16px;border-radius:var(--md-radius-sm);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.md-snackbar-info{background:var(--md-primary-container)}
.md-snackbar-warn{background:#fff8e1;border:1px solid #ffe082}
.md-snackbar-error{background:#fce8e6;border:1px solid #f5c6c2}
.md-snackbar-success{background:#e8f5e9;border:1px solid #a5d6a7}

/* Storefront */
.md-store-header{background:var(--md-surface-container-high);padding:16px 20px;box-shadow:var(--md-elevation-1)}
.md-product-card{background:#fff;border-radius:var(--md-radius-lg);overflow:hidden;box-shadow:var(--md-elevation-1);transition:transform .2s,box-shadow .2s}
.md-product-card:hover{transform:translateY(-2px);box-shadow:var(--md-elevation-3)}
.md-product-card img{aspect-ratio:1;object-fit:cover;background:var(--md-surface-container)}
.md-product-body{padding:12px 16px}
.md-bottom-nav{display:none;position:fixed;bottom:0;right:0;left:0;height:64px;background:var(--md-surface-container-high);box-shadow:0 -2px 8px rgba(0,0,0,.08);z-index:100}
.md-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7rem;color:var(--md-on-surface-variant);padding:8px}
.md-bottom-nav a.active{color:var(--md-primary)}

/* Auth */
.md-auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,var(--md-primary-container),var(--md-surface))}
.md-auth-card{width:100%;max-width:420px;background:#fff;border-radius:var(--md-radius-lg);box-shadow:var(--md-elevation-3);padding:32px 28px}

/* Chat FAB */
.md-chat-fab{position:fixed;bottom:80px;left:20px;z-index:95}
.md-chat-sheet{display:none;background:#fff;border-radius:var(--md-radius-lg) var(--md-radius-lg) 0 0;box-shadow:var(--md-elevation-3);width:320px;max-height:420px;overflow:hidden}
.md-chat-sheet.open{display:flex;flex-direction:column}
.md-chat-messages{flex:1;overflow:auto;padding:12px;min-height:200px}
.md-chat-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid #e7e0ec}

/* Theme variants */
.theme-style-dark{--md-surface:#141218;--md-surface-container:#211f26;--md-surface-container-high:#2b2930;--md-on-surface:#e6e0e9;--md-primary:#d0bcff;--md-primary-container:#4f378b}
.theme-style-market{--md-primary:#006a60;--md-primary-container:#b2dfdb}
.theme-style-bold{--md-primary:#8c1d18;--md-primary-container:#ffdad6}
.theme-style-pastel{--md-primary:#984061;--md-primary-container:#ffd8e4}
.theme-style-minimal{--md-primary:#44474e;--md-surface:#fafafa}

/* Payment gateway */
.md-bank-card{max-width:480px;margin:40px auto;background:linear-gradient(135deg,#1a237e,#3949ab);color:#fff;border-radius:var(--md-radius-lg);padding:28px;box-shadow:var(--md-elevation-3)}
.md-bank-card .md-input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}

/* Responsive */
@media(max-width:900px){
  .md-drawer{display:none}
  .md-drawer.open{display:block;position:fixed;z-index:200;height:100%;box-shadow:var(--md-elevation-3)}
  .md-bottom-nav{display:flex}
  .md-content{padding-bottom:80px}
  .md-menu-btn{display:inline-flex!important}
}
.md-menu-btn{display:none;background:0;border:0;font-size:1.5rem;cursor:pointer;padding:8px}
.md-spacer{flex:1}
.md-actions{display:flex;gap:8px;flex-wrap:wrap}