@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --color-primary:         #d966a8;
  --color-primary-light:   #e88ac4;
  --color-primary-dark:    #b84d8e;
  --color-primary-glow:    rgba(217, 102, 168, 0.35);
  --color-primary-subtle:  rgba(217, 102, 168, 0.10);

  --color-secondary:       #dceeff;
  --color-secondary-hover: #c4dfff;
  --color-secondary-text:  #3b6fa8;

  --color-accent-mint:      #b8f5d8;
  --color-accent-mint-text: #2a7a58;
  --color-accent-peach:     #ffd4b0;
  --color-accent-peach-text:#a0510a;
  --color-accent-lavender:  #e8d8ff;
  --color-accent-lavender-text: #6b3fa0;

  --color-neutral-50:  #fdf0f8;
  --color-neutral-100: #fff5fc;
  --color-neutral-150: #ffeaf8;
  --color-neutral-200: #fdf5fb;
  --color-neutral-300: #f0bce5;
  --color-neutral-400: #e494d9;
  --color-neutral-500: #c4a0cf;
  --color-neutral-600: #9b72a8;
  --color-neutral-900: #3b1f3f;

  --color-text-primary:    #3b1f3f;
  --color-text-secondary:  #9b72a8;
  --color-text-muted:      #c4a0cf;
  --color-text-disabled:   #e0c0e8;
  --color-text-inverse:    #ffffff;
  --color-text-on-primary: #ffffff;

  --color-success:         #52c78a;
  --color-success-subtle:  rgba(82, 199, 138, 0.14);
  --color-warning:         #f4a83a;
  --color-warning-subtle:  rgba(244, 168, 58, 0.14);
  --color-error:           #f06292;
  --color-error-subtle:    rgba(240, 98, 146, 0.14);
  --color-info:            #5ab4d9;
  --color-info-subtle:     rgba(90, 180, 217, 0.14);

  --bg-app:     var(--color-neutral-50);
  --bg-surface: var(--color-neutral-100);
  --bg-raised:  var(--color-neutral-150);
  --bg-input:   var(--color-neutral-200);
  --bg-overlay: rgba(253, 240, 248, 0.92);

  --border-default: var(--color-neutral-300);
  --border-hover:   var(--color-neutral-400);
  --border-active:  var(--color-primary);
  --border-focus:   var(--color-primary);

  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted:     var(--color-text-muted);
  --text-disabled:  var(--color-text-disabled);
  --text-accent:    var(--color-primary);

  --font-display: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --text-micro: 11px;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   32px;
  --text-4xl:   40px;
  --text-5xl:   52px;
  --text-hero:  64px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-caps:    0.12em;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  --shadow-1:         0 2px 8px rgba(180, 80, 140, 0.08);
  --shadow-2:         0 6px 24px rgba(180, 80, 140, 0.12);
  --shadow-3:         0 16px 48px rgba(180, 80, 140, 0.18);
  --shadow-glow:      0 0 24px var(--color-primary-glow);
  --shadow-glow-mint: 0 0 20px rgba(82, 199, 138, 0.35);

  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --ease-sharp:    cubic-bezier(0.4, 0, 0.2, 1);

  --duration-micro:    150ms;
  --duration-standard: 250ms;
  --duration-hero:     400ms;
  --duration-draw:     600ms;

  --sidebar-width: 240px;
  --topbar-height: 56px;
  --content-max:   1100px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-app);
  height: 100vh;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
h1 { font-size: var(--text-4xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: var(--fw-semibold); }

p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--duration-micro) var(--ease-smooth);
}
a:hover { opacity: 0.8; }

/* ── Material Symbols ── */
.ms {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  user-select: none;
  flex-shrink: 0;
}

/* ── App shell ── */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#main-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--space-8) var(--space-10);
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
}

.sidebar-brand {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) 10px;
}

.sidebar-section-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-1) 10px var(--space-2);
}

.sidebar-section-label + .sidebar-section-label,
.sidebar-nav-divider {
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background var(--duration-micro) var(--ease-smooth);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}
.sidebar-item:hover {
  background: var(--color-primary-subtle);
  opacity: 1;
}
.sidebar-item.active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}
.sidebar-item.active .ms { color: var(--color-primary); }
.sidebar-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-item-count {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
  padding: 1px 5px;
}
.sidebar-item.active .sidebar-item-count {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.sidebar-footer {
  padding: var(--space-3) 10px;
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1) 0;
}
.sidebar-user-avatar {
  width: 30px;
  height: 30px;
  background: var(--color-accent-lavender);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* ── Topbar ── */
.topbar {
  height: var(--topbar-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  gap: var(--space-3);
  flex-shrink: 0;
}
.topbar-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  flex: 1;
}
.topbar-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Mobile topbar (brand + actions) */
.topbar-brand {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-brand-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  transition: all var(--duration-micro) var(--ease-smooth);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-inverse);
  box-shadow: 0 4px 20px var(--color-primary-glow);
}
.btn-primary:hover {
  box-shadow: 0 6px 24px var(--color-primary-glow);
  opacity: 1;
  filter: brightness(1.05);
}
.btn-primary:disabled {
  background: var(--border-default);
  box-shadow: none;
  cursor: default;
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
  border: 1px solid rgba(90, 180, 217, 0.25);
}
.btn-secondary:hover { background: var(--color-secondary-hover); opacity: 1; }

.btn-ghost {
  background: var(--bg-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-ghost:hover { border-color: var(--border-hover); opacity: 1; }
.btn-ghost.active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-color: rgba(217, 102, 168, 0.25);
}

.btn-danger {
  background: var(--color-error-subtle);
  color: var(--color-error);
  border: 1px solid rgba(240, 98, 146, 0.25);
}
.btn-danger:hover { background: rgba(240, 98, 146, 0.15); opacity: 1; }

.btn-sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

.btn-lg {
  font-size: var(--text-xl);
  padding: 18px var(--space-10);
}

.btn-full { width: 100%; }

.btn-icon {
  background: none;
  border: none;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  transition: color var(--duration-micro) var(--ease-smooth);
}
.btn-icon:hover { color: var(--color-primary); }
.btn-icon.danger:hover { color: var(--color-error); }

/* ── Inputs ── */
.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--duration-micro) var(--ease-smooth),
              box-shadow var(--duration-micro) var(--ease-smooth);
}
.input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.input::placeholder { color: var(--text-muted); }

textarea.input { resize: vertical; line-height: var(--lh-relaxed); }

select.input { cursor: pointer; }

/* ── Cards ── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
  transition: border-color var(--duration-micro) var(--ease-smooth),
              box-shadow var(--duration-micro) var(--ease-smooth),
              transform var(--duration-micro) var(--ease-smooth);
}
.card-hover:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* ── Label ── */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── Badge / pill ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.badge-primary {
  background: var(--color-primary-subtle);
  border: 1px solid rgba(217, 102, 168, 0.22);
  color: var(--color-primary);
}
.badge-info {
  background: var(--color-info-subtle);
  border: 1px solid rgba(90, 180, 217, 0.25);
  color: #2a6a8a;
}
.badge-mint {
  background: var(--color-success-subtle);
  border: 1px solid rgba(82, 199, 138, 0.25);
  color: var(--color-accent-mint-text);
}

/* ── Home screen (mobile bag list) ── */
.bag-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bag-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px var(--space-4);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-micro) var(--ease-smooth),
              transform var(--duration-micro) var(--ease-smooth),
              box-shadow var(--duration-micro) var(--ease-smooth);
}
.bag-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  opacity: 1;
}
.bag-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
}
.bag-card-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.bag-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bag-card-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.bag-card-actions {
  display: flex;
  gap: var(--space-2);
}

/* ── Bag view (draw screen) ── */
.view-layout {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.view-draw-area {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.view-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 180px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-1);
}
.stat-card-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
  margin: var(--space-1) 0;
}
.stat-card-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.draw-prompt-heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.draw-prompt-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Drawn item card */
.drawn-item-card {
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-raised));
  border: 2px solid var(--border-hover);
  border-radius: var(--radius-xl);
  padding: 28px var(--space-8);
  position: relative;
  overflow: visible;
}
.drawn-item-name {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
  margin: var(--space-3) 0 var(--space-2);
}
.drawn-item-from {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Item grid */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.item-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px var(--space-5);
  background: var(--bg-surface);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
}
.empty-state-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin: 14px 0 var(--space-2);
}
.empty-state-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ── Edit screen ── */
.edit-layout {
  max-width: 640px;
}
.edit-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.item-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px var(--space-4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.item-row-name {
  flex: 1;
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.add-item-panel {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: var(--space-5);
}
.add-item-form {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.danger-zone {
  margin-top: var(--space-8);
  background: var(--color-error-subtle);
  border: 1px solid rgba(240, 98, 146, 0.20);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.danger-zone-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-error);
  margin-bottom: 10px;
}
.danger-zone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.danger-zone-desc { font-size: var(--text-sm); color: var(--text-primary); }
.danger-zone-sub { font-size: var(--text-xs); color: var(--text-secondary); }

/* Share section in edit */
.share-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-top: var(--space-5);
}
.share-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.share-panel-text { font-size: var(--text-sm); color: var(--text-secondary); }

/* ── Create bag ── */
.create-layout {
  max-width: 480px;
}
.create-heading {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.create-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}
.form-field {
  margin-bottom: var(--space-5);
}
.form-field .label {
  display: block;
  margin-bottom: var(--space-2);
}
.input-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ── Share form ── */
.share-layout {
  max-width: 480px;
}
.share-heading {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

/* ── Welcome / empty home ── */
.welcome-state {
  text-align: center;
  padding: 80px var(--space-5);
}
.welcome-heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.welcome-sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* ── Topbar bag actions ── */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Animations ── */
@keyframes drawGlow {
  0%   { box-shadow: 0 0 0 0   rgba(217, 102, 168, 0.75), var(--shadow-1); }
  35%  { box-shadow: 0 0 0 14px rgba(217, 102, 168, 0.30), var(--shadow-2); }
  100% { box-shadow: 0 0 0 24px rgba(217, 102, 168, 0),    var(--shadow-1); }
}
.draw-glow {
  animation: drawGlow var(--duration-draw) var(--ease-smooth) forwards;
}

@keyframes cardIn {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.card-in {
  animation: cardIn var(--duration-hero) var(--ease-spring) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }

/* ── Responsive — mobile ── */
@media (max-width: 767px) {
  body { overflow: auto; height: auto; }
  .app-shell { flex-direction: column; height: auto; min-height: 100vh; }
  .sidebar { display: none; }
  .main-area { height: auto; }
  #main-content {
    flex: none;
    overflow-y: visible;
    padding: var(--space-4) var(--space-4) var(--space-10);
  }
  .topbar { padding: 0 var(--space-4); }
  .topbar-desktop-only { display: none; }
  .view-stats { display: none; }
  .view-layout { flex-direction: column; gap: var(--space-4); }
  .item-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .topbar-mobile-only { display: none; }
  .mobile-only { display: none; }
  .bag-list-mobile { display: none; }
  .desktop-only { display: flex; }
}