@media (min-width: 900px) {
  body {
    padding: 28px;
    background: radial-gradient(circle at 12% 8%, #f7f3e9 0, transparent 34%), #e5ebe6;
  }

  .app-shell {
    max-width: 1240px;
    min-height: calc(100vh - 56px);
    padding-bottom: 0;
    border-radius: 28px;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: 78px minmax(calc(100vh - 134px), auto);
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(18, 50, 41, .16);
  }

  .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 78px;
    padding: 14px 28px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
  }

  .brand-mark { width: 42px; height: 42px; }
  .brand b { font-size: 16px; }
  .brand small { font-size: 11px; }

  main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    background: #f5f3ed;
  }

  .bottom-nav {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    height: auto;
    padding: 24px 14px;
    background: #fff;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    backdrop-filter: none;
  }

  .bottom-nav button {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border-radius: 13px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    text-align: left;
  }

  .bottom-nav button.active { background: var(--cream); color: var(--pine); }
  .bottom-nav span { width: 22px; font-size: 20px; }
  .bottom-nav small { font-size: 12px; }
  .view { min-height: calc(100vh - 134px); }

  #view-home.active {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: 24px;
    padding: 24px;
  }

  .hero {
    min-height: 560px;
    padding: 46px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 16px 34px rgba(15, 48, 38, .12);
  }

  .hero h1 { max-width: 520px; font-size: 50px; }
  .hero .eyebrow { font-size: 11px; }
  .scan-actions { margin-top: 34px; gap: 13px; }
  .scan-card { padding: 16px; }
  .scan-card b { font-size: 16px; }
  .scan-card small { font-size: 12px; }
  .scan-icon { width: 52px; height: 52px; }

  .dashboard-content {
    padding: 34px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(23, 63, 53, .07);
  }

  .section-heading h2 { font-size: 23px; }
  .stats-grid { gap: 12px; margin-top: 18px; }
  .stats-grid article { padding: 18px 15px; }
  .stats-grid b { font-size: 24px; }
  .recent-heading { margin-top: 36px; }
  .activity-row { padding: 16px 0; }
  .activity-row b { font-size: 14px; }
  .activity-row small { font-size: 11px; }

  .page-head {
    padding: 34px 38px 20px;
    background: transparent;
    color: var(--ink);
  }

  .page-head.standard { padding: 36px 38px 22px; border-radius: 0; }
  .page-head h1 { font-size: 38px; }
  .page-head .eyebrow { color: var(--pine-2); }
  .back-button, .round-add { background: var(--pine); color: #fff; }
  .mode-switch { max-width: 380px; margin: 5px 38px 18px; }
  #view-scan.active { padding-bottom: 40px; }
  .scanner-card, .result-card { max-width: 720px; margin: 18px auto; padding: 20px; }
  .camera-frame { height: 400px; }
  .ocr-progress { max-width: 720px; margin: 18px auto; }

  .inventory-summary {
    width: max-content;
    margin: 0 38px 18px;
    padding: 10px 18px;
    border-radius: 12px;
  }

  .search-wrap { margin: 10px 38px 14px; max-width: 680px; }
  .filter-chips, .activity-tabs { padding-left: 38px; padding-right: 38px; }

  .inventory-list {
    padding: 18px 38px 42px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }

  .inventory-group {
    padding: 17px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: 0 5px 16px rgba(23, 63, 53, .04);
  }

  .package-chips { padding-left: 53px; }
  .product-icon { width: 44px; height: 44px; }
  .group-summary b { font-size: 14px; }
  .audit-note { margin: 8px 38px 22px; max-width: 740px; }
  .activity-tabs { margin-top: 0; }

  .full-list {
    margin: 18px 38px 0;
    padding: 0 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  .export-button { width: auto !important; margin: 22px 38px 42px !important; padding-left: 24px; padding-right: 24px; }

  .sale-sheet {
    left: auto;
    right: 28px;
    bottom: 28px;
    transform: none;
    width: 520px;
    border-radius: 25px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  }

  .document-preview { padding: 58px; }
}

@media (min-width: 900px) and (max-width: 1080px) {
  .app-shell { grid-template-columns: 160px minmax(0, 1fr); }
  #view-home.active { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .dashboard-content { min-height: 420px; }
  .inventory-list { grid-template-columns: 1fr; }
}