/* Desktop workspace: quiet, cool surfaces and a persistent left navigation. */
@media (min-width: 900px) {
  body {
    background:
      radial-gradient(circle at 12% 4%, rgba(222, 231, 246, .8), transparent 34%),
      radial-gradient(circle at 88% 92%, rgba(226, 232, 241, .62), transparent 37%),
      #eef0f4;
    color: #20252d;
  }

  .app-shell {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    grid-template-rows: 98px minmax(0, 1fr);
    width: calc(100% - 48px);
    max-width: 1180px;
    height: calc(100dvh - 48px);
    min-height: 600px;
    margin: 24px auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 28px;
    background: #f9fafc;
    box-shadow:
      0 30px 75px rgba(56, 67, 87, .13),
      0 3px 12px rgba(70, 79, 96, .05);
  }

  .app-header {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    height: auto;
    min-width: 0;
    padding: 24px 18px 12px;
    border-right: 1px solid #e8ebf0;
    background: #fcfcfe;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .brand-wrap { min-width: 0; gap: 10px; }
  .brand-mark {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 12px;
    background: #202630;
    color: #fff;
    box-shadow: 0 4px 10px rgba(20, 26, 37, .13);
  }
  .brand { color: #20252d; font-size: 18px; letter-spacing: -.02em; }
  .brand-sub { color: #9aa1ad; font-size: 10px; white-space: nowrap; }
  .header-add {
    width: 29px;
    height: 29px;
    min-width: 29px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    color: #4b5360;
    box-shadow: 0 1px 3px rgba(23, 30, 42, .04);
  }

  .bottom-nav {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    left: auto;
    bottom: auto;
    z-index: 1;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 11px 12px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
    overflow: visible;
    transform: none;
    border: 0;
    border-right: 1px solid #e8ebf0;
    border-radius: 0;
    background: #fcfcfe;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .bottom-nav::before,
  .bottom-nav::after { content: none; }
  .nav-item {
    flex: 0 0 auto;
    min-height: 46px;
    width: 100%;
    padding: 0 13px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: #626a75;
    font-size: 13px;
    font-weight: 540;
    text-align: left;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  .nav-item svg { width: 19px; height: 19px; flex: 0 0 19px; stroke-width: 1.8; }
  .nav-item span { display: inline; }
  .nav-item:hover { background: #f1f3f6; color: #262c35; }
  .nav-item.active {
    border-color: #e5e8ed;
    background: linear-gradient(145deg, #fff, #f0f2f6);
    color: #20252d;
    box-shadow: 0 2px 7px rgba(38, 46, 60, .06), inset 0 1px rgba(255, 255, 255, .9);
  }
  .nav-item:focus-visible,
  .header-add:focus-visible { outline: 2px solid #6685bc; outline-offset: 2px; }

  .main-view {
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 40px clamp(28px, 4vw, 58px) 70px;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(160deg, #fbfcfe, #f8f9fc 68%);
    scrollbar-color: #cbd1db transparent;
    scrollbar-width: thin;
  }
  .page-title { color: #20252d; letter-spacing: -.035em; }
  .page-subtitle { color: #9098a4; }
  .eyebrow { color: #747d8b; }
  .section-title, .feature-title, .source-title, .book-title { color: #252b34; }
  .section-meta, .feature-detail, .source-note, .directory-link-desc,
  .rank-refresh-hint, .rank-method { color: #858d99; }
  .feature-kicker, .feature-arrow, .directory-link-type,
  .rank-position, .rank-origin-link, .mark-book { color: #536e92; }
  .search-input, .source-search-cta, .ghost-button, .rank-retry,
  .rank-refresh-row .account-link, .rank-auth-retry {
    border-color: #e3e6eb;
    background: #fff;
    color: #364152;
  }
  .search-input:focus { border-color: #7189aa; }
  .primary-button, .panel-primary {
    background: #292e37;
    color: #fff;
    box-shadow: 0 5px 14px rgba(37, 45, 58, .14);
  }
  .directory-link { color: #262d37; background: #fff; border-color: #e7eaf0; }
  .rank-link, .feature-card, .combined-rank-list {
    background: linear-gradient(145deg, #fff, #f2f5fa);
    border-color: #e5e9f0;
  }
  .rank-refresh-button {
    color: #344761;
    border-color: #d7dfe9;
    background: linear-gradient(145deg, #fff, #e9eef5);
  }
  .source-pill, .rank-origin-chip, .rank-source-badge.fresh {
    color: #435d7b;
    background: #e8edf3;
  }
  .rank-entry { color: #292e36; border-top-color: #e9ebef; }
  .rank-entry-arrow { color: #76869b; }
  .import-tile {
    color: #62738c;
    background: #f8f9fb;
    border-color: #bfc8d4;
  }
  .info-banner, .sync-panel, .rank-unavailable, .rank-refresh-status {
    color: #536070;
    background: #edf0f4;
  }
  .sync-status, .status-line, .empty-state strong { color: #52637b; }

  .feature-card,
  .source-card,
  .rank-card,
  .book-card,
  .info-banner {
    border-color: #e9ebef;
    box-shadow: 0 4px 16px rgba(49, 59, 77, .045);
  }
  .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
  .source-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rank-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .reader {
    top: 24px;
    bottom: 24px;
    max-width: 760px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(43, 50, 66, .2);
  }
}

@media (min-width: 1120px) {
  .app-shell { grid-template-columns: 234px minmax(0, 1fr); }
  .book-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}