.library-hero {
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 7rem) 0 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.42fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
}
.library-hero h1 { margin: 0; max-width: 13ch; font: 500 clamp(3rem, 7vw, 6.6rem)/.94 Georgia, serif; letter-spacing: -.055em; }
.library-hero > div > p:last-child { max-width: 44rem; margin: 1.4rem 0 0; color: var(--muted); font-size: 1.15rem; }
.security-note { padding: 1.3rem; display: flex; gap: .9rem; align-items: flex-start; border: 1px solid #bcd2cf; border-radius: 1rem; background: #eaf4f1; }
.security-note > span { width: 2rem; height: 2rem; display: grid; flex: 0 0 2rem; place-items: center; border-radius: 50%; color: white; background: var(--brand); font-weight: 900; }
.security-note p, .security-note strong { display: block; margin: 0; }
.security-note p { color: #45615f; font-size: .92rem; }
.security-note strong { color: var(--ink); margin-bottom: .2rem; }

.library-shell { width: min(1180px, calc(100% - 2.5rem)); min-height: 26rem; margin: 0 auto 5rem; }
.signin-panel[hidden], .account-panel[hidden], .library-loading[hidden], .library-empty[hidden] { display: none; }
.signin-panel, .account-panel { padding: clamp(1.4rem, 4vw, 2.4rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(20rem, 1fr); align-items: end; gap: 2rem; border: 1px solid var(--line); border-radius: 1.4rem; background: white; box-shadow: var(--shadow); }
.signin-panel h2, .account-panel h2 { margin: 0; font: 500 clamp(1.8rem, 4vw, 2.8rem)/1.05 Georgia, serif; letter-spacing: -.035em; }
.signin-panel > div > p:last-child { margin: .6rem 0 0; color: var(--muted); }
.signin-panel label { display: block; margin-bottom: .45rem; font-weight: 750; }
.signin-row { display: flex; gap: .65rem; }
.signin-row input { width: 100%; min-height: 3.2rem; padding: 0 .9rem; border: 1px solid #b8c4cb; border-radius: .75rem; outline: 0; }
.signin-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,93,104,.15); }
.signin-row button { white-space: nowrap; }
.form-status { min-height: 1.3rem; margin: .55rem 0 0; color: var(--brand); font-size: .85rem; }
.form-status.error { color: #9b312c; }
.sign-out { border: 0; color: #43515d; background: transparent; font-weight: 700; cursor: pointer; }

.account-panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-bottom: 1.3rem; background: #172d38; color: white; }
.account-panel .eyebrow { color: var(--lime); }
.device-picker { display: grid; gap: .3rem; color: #c3d2d6; font-size: .82rem; font-weight: 700; }
.device-picker select { min-width: 14rem; min-height: 3rem; padding: 0 2.3rem 0 .8rem; border: 1px solid #789097; border-radius: .7rem; color: white; background: #29434d; }

.library-loading { min-height: 16rem; display: grid; place-items: center; align-content: center; color: var(--muted); }
.spinner { width: 2.5rem; height: 2.5rem; border: 3px solid #cdd7da; border-top-color: var(--brand); border-radius: 50%; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.owned-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.owned-card { padding: 1.3rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; border: 1px solid var(--line); border-radius: 1.15rem; background: white; }
.owned-card img { width: 4.5rem; height: 4.5rem; border-radius: 1rem; object-fit: cover; background: #eef2f3; }
.owned-card h3 { margin: 0; font-size: 1.2rem; }
.owned-card .owned-description { margin: .3rem 0 .9rem; color: var(--muted); font-size: .9rem; }
.release-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .8rem; border-top: 1px solid #e7ecef; }
.release-state { color: #63727d; font-size: .84rem; }
.release-action { min-height: 2.6rem; padding: 0 .9rem; border: 0; border-radius: .65rem; color: white; background: var(--brand-deep); font-weight: 750; cursor: pointer; }
.release-action[disabled] { color: #66727b; background: #e6ebed; cursor: not-allowed; }
.library-empty { padding: 5rem 1rem; text-align: center; color: var(--muted); }
.library-empty h2 { margin: 0; color: var(--ink); font: 500 2.4rem Georgia, serif; }
.library-empty p { max-width: 42rem; margin: .8rem auto 1.3rem; }
.library-empty a { display: inline-flex; min-height: 3rem; align-items: center; padding: 0 1.1rem; border-radius: 999px; color: white; background: var(--brand); text-decoration: none; font-weight: 750; }

.platform-guidance { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto 6rem; }
.platform-guidance h2 { max-width: 18ch; margin: 0 0 1.6rem; font: 500 clamp(2rem, 4vw, 3.5rem)/1 Georgia, serif; letter-spacing: -.04em; }
.guidance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.guidance-grid article { padding: 1.2rem; border-top: 3px solid var(--brand); background: white; }
.guidance-grid p { margin: .45rem 0 0; color: var(--muted); font-size: .9rem; }

@media (max-width: 850px) {
  .library-hero, .signin-panel { grid-template-columns: 1fr; }
  .owned-grid, .guidance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .library-hero, .library-shell, .platform-guidance { width: min(100% - 1.2rem, 1180px); }
  .library-hero h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .signin-row { display: grid; }
  .account-panel { grid-template-columns: 1fr; }
  .device-picker select { width: 100%; }
  .owned-grid, .guidance-grid { grid-template-columns: 1fr; }
  .owned-card { grid-template-columns: 3.8rem 1fr; }
  .owned-card img { width: 3.8rem; height: 3.8rem; }
}