.works-page .hero, .works-page #mainContent, .works-page .gallery-section,
.works-page .mobile-generate-dock, .works-page .float-progress, .works-page .chat-panel { display: none !important; }
.works-library { max-width: 1360px; margin: 0 auto; padding: 44px 40px 64px; min-height: 72vh; scroll-margin-top: 88px; }
.works-library[hidden] { display: none; }
.works-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.works-heading h1 { margin: 9px 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.25; letter-spacing: -.055em; font-weight: 600; }
.works-heading h1 > span { color: var(--clay); }
.works-heading p { font-size: 13px; color: var(--ink-2); }
.works-create { border: 1px solid var(--ink); color: var(--paper); background: var(--ink); border-radius: 8px; padding: 12px 18px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; cursor: pointer; white-space: nowrap; min-height: 44px; }
.works-create span { margin-left: 16px; }
.works-create:hover { background: var(--clay); border-color: var(--clay); color: var(--clay-ink); }
.works-filters { display: grid; grid-template-columns: minmax(250px, 1.7fr) minmax(160px, 1fr) minmax(130px, .8fr) minmax(130px, .8fr); gap: 16px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); padding: 22px 0; }
.works-filters label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.works-filters label > span:first-child { font-size: 11px; color: var(--ink-3); }
.works-filters select, .works-search-box { min-height: 44px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--card); color: var(--ink); }
.works-filters select { width: 100%; padding: 9px 32px 9px 12px; font: inherit; font-size: 12px; text-overflow: ellipsis; cursor: pointer; }
.works-search-box { display: flex; overflow: hidden; }
.works-search-box input { width: 100%; min-width: 0; background: none; border: 0; color: var(--ink); outline: 0; padding: 10px 12px; font: inherit; font-size: 13px; }
.works-search-box:focus-within { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-soft); }
.works-search-box input::placeholder { color: var(--ink-3); }
.works-search-box button { border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink-2); padding: 0 13px; cursor: pointer; font-family: inherit; white-space: nowrap; font-size: 12px; }
.works-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; font-size: 12px; color: var(--ink-3); }
.works-summary > div { display: flex; gap: 18px; flex-shrink: 0; }
.works-summary button { border: 0; background: none; padding: 8px 0; color: var(--ink-2); font: inherit; cursor: pointer; }
.works-summary button:hover { color: var(--clay); }
.works-summary #worksClearBtn { color: var(--clay-deep); }
.works-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
.work-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--line); background: var(--card); border-radius: 11px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.work-card:hover { border-color: var(--line-2); box-shadow: 0 6px 22px #2429200b; transform: translateY(-2px); }
.work-image { position: relative; background: var(--paper-2); }
.work-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; display: block; padding: 0; overflow: hidden; border: 0; cursor: pointer; background: var(--paper-2); color: var(--ink-2); font-family: inherit; }
.work-preview img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s var(--ease); }
.work-preview img[hidden] { display: none; }
.work-preview:hover img { transform: scale(1.025); }
.work-preview:focus-visible { outline-offset: -4px; z-index: 2; }
.work-state { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 5px; background: #fff9edeb; color: #464e40; font-size: 10px; line-height: 1.5; pointer-events: none; border: 1px solid #fff4; }
.work-state.is-published { background: #264837ef; color: #f2f2dd; }
.work-open-hint { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 6px; background: #1d2a20d9; color: #fff9ec; font-size: 12px; opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; }
.work-preview:hover .work-open-hint, .work-preview:focus-visible .work-open-hint { opacity: 1; transform: none; }
.work-card-body { display: flex; flex-direction: column; flex: 1; padding: 13px 14px 0; }
.work-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: 10px; }
.work-card-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-card-meta time { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 10px; }
.work-prompt { margin: 10px 0 13px; min-height: 42px; line-height: 1.75; font-size: 12px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.work-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; border-top: 1px solid var(--line); min-height: 43px; }
.work-card-actions button { background: none; border: 0; color: var(--ink-2); cursor: pointer; min-height: 42px; font-family: inherit; font-size: 11px; padding: 8px 0; }
.work-card-actions button:last-child { color: var(--clay-deep); }
.work-card-actions > span { font-size: 11px; color: var(--ink-3); }
.work-card-actions button:hover { text-decoration: underline; text-underline-offset: 4px; }
.work-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.work-placeholder-symbol { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 20px; }
.work-failed .work-placeholder-symbol { color: var(--err); border-color: var(--clay-line); }
.work-placeholder strong { font-size: 13px; font-weight: 500; }
.work-placeholder > span:last-child { font-size: 11px; color: var(--ink-3); }
.work-image-unavailable { display: grid; place-items: center; height: 100%; padding: 20px; font-size: 12px; }
.work-skeleton { background: var(--card); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; padding-bottom: 24px; }
.work-skeleton div { aspect-ratio: 4 / 3; background: var(--paper-2); }
.work-skeleton span { display: block; height: 10px; margin: 16px 14px 0; width: 75%; background: var(--line); border-radius: 4px; }
.work-skeleton span:last-child { width: 45%; }
.works-empty { padding: 65px 20px; text-align: center; }
.works-empty[hidden], .works-error[hidden] { display: none; }
.works-empty-mark { display: grid; place-items: center; margin: 0 auto 20px; width: 50px; height: 50px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--clay); font-size: 26px; }
.works-empty h2 { font-size: 22px; font-weight: 500; margin: 0 0 12px; }
.works-empty p { font-size: 13px; color: var(--ink-3); }
.works-empty button { margin: 24px auto 0; border-radius: 7px; background: var(--ink); color: var(--paper); border: 0; padding: 12px 22px; font-family: inherit; cursor: pointer; }
.works-error { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0; padding: 20px; border: 1px solid var(--clay-line); border-radius: 8px; background: var(--clay-soft); }
.works-error p { font-size: 13px; color: var(--ink-2); }
.works-error button { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); padding: 8px 18px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.works-pagination { text-align: center; margin-top: 32px; }
.works-pagination button { min-width: 180px; min-height: 44px; padding: 11px 24px; border: 1px solid var(--line-2); border-radius: 7px; color: var(--ink); background: var(--card); cursor: pointer; font-family: inherit; }
.works-pagination button:hover { border-color: var(--clay); color: var(--clay-deep); }
.works-pagination button:disabled { opacity: .6; cursor: wait; }
.works-pagination p { margin-top: 13px; color: var(--ink-3); font-size: 11px; }
@media (max-width: 1100px) {
  .works-library { padding-inline: 24px; }
  .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
  .works-filters { grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
  .works-search-field { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .works-library { padding: 30px 20px 40px; scroll-margin-top: 120px; }
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .works-heading { margin-bottom: 24px; }
  .works-heading h1 { font-size: 34px; }
  .works-search-box input { font-size: 16px; }
  .works-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .works-filters select { font-size: 12px; padding-inline: 8px 20px; }
  .work-card-body { padding-inline: 11px; }
  .work-card-meta { display: block; min-height: 32px; }
  .work-card-meta > span, .work-card-meta time { display: block; }
  .work-card-meta time { font-size: 10px; margin-top: 3px; }
  .work-card-actions { gap: 4px; }
  .work-card-actions button { font-size: 11px; }
  .work-prompt { font-size: 12px; }
  .works-create { font-size: 12px; padding: 10px 13px; }
  .works-create span { margin-left: 6px; }
}
@media (max-width: 480px) {
  .works-library { padding-inline: 16px; }
  .works-heading { gap: 10px; }
  .works-heading h1 { font-size: 30px; }
  .works-heading p { font-size: 11px; max-width: 170px; }
  .works-heading .studio-eyebrow { font-size: 8px; }
  .works-summary { font-size: 11px; flex-wrap: wrap; gap: 4px; padding: 12px 0; }
  .works-summary > div { gap: 12px; }
  .work-state { font-size: 9px; top: 8px; left: 8px; }
  .works-empty h2 { font-size: 19px; }
  .works-empty p { font-size: 12px; }
}
@media (max-width: 360px) {
  .works-grid { grid-template-columns: minmax(0, 1fr); }
  .work-card-meta { display: flex; flex-wrap: nowrap; min-height: 0; }
  .work-card-actions button { font-size: 12px; }
  .work-prompt { font-size: 13px; }
  .works-heading { flex-wrap: wrap; align-items: center; }
}