:root {
  --sidebar-width: 248px;
  --workspace-max: 1480px;
}

.workspace-body {
  display: block;
  min-height: 100vh;
  background: #eef2f7;
}

.workspace-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar-width);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid #e2e8f0;
}

.workspace-sidebar .brand {
  padding: 0 8px 24px;
}

.workspace-sidebar .brand strong {
  font-size: 22px;
  letter-spacing: .03em;
}

.sidebar-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.sidebar-nav a {
  padding: 13px 14px;
  border-radius: 13px;
  color: #475569;
  font-size: 15px;
  font-weight: 800;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: #0369a1;
  background: #e0f2fe;
}

.sidebar-nav .admin-link {
  margin-top: 8px;
  color: #92400e;
  background: #fef3c7;
}

.sidebar-account {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 13px 10px 0;
  border-top: 1px solid #e2e8f0;
}

.sidebar-account img { border-radius: 10px; }
.sidebar-account div { min-width: 0; }
.sidebar-account strong,
.sidebar-account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account strong { font-size: 13px; }
.sidebar-account small { margin-top: 3px; color: #94a3b8; font-size: 11px; }

.workspace-main {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  height: 76px;
  padding: 14px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(238, 242, 247, .94);
  border-bottom: 1px solid rgba(203, 213, 225, .8);
  backdrop-filter: blur(12px);
}

.top-search {
  width: min(620px, 62vw);
}

.top-search input {
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
}

.top-search input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px #e0f2fe;
}

.topbar-title { margin-right: auto; font-size: 20px; }
.topbar-upload { position: absolute; right: 30px; }

.workspace-page {
  width: min(var(--workspace-max), calc(100% - 52px));
  margin: 0 auto;
  padding: 26px 0 60px;
}

.workspace-page .hero {
  min-height: 220px;
  padding: 36px 46px;
  margin: 0 0 22px;
}

.workspace-page .hero h1 {
  max-width: 760px;
  font-size: clamp(34px, 3.2vw, 48px);
}

.workspace-page .hero p:not(.eyebrow) {
  max-width: 720px;
  font-size: 16px;
}

.workspace-page .hero > img {
  width: 112px;
  height: 112px;
  border-radius: 24px;
  box-shadow: 0 18px 35px rgba(59, 130, 246, .2);
}

.category-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 5px 2px 13px;
  scrollbar-width: none;
}
.category-rail::-webkit-scrollbar { display: none; }

.category-rail a {
  flex: 0 0 auto;
  padding: 10px 15px;
  border-radius: 999px;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
}

.category-rail a:hover,
.category-rail a.selected {
  color: #0369a1;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

.workspace-page .filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  min-width: 390px;
  margin-top: 2px;
}

.workspace-page .filter-bar select { min-width: 220px; }
.workspace-page .filter-bar .button { min-width: 96px; white-space: nowrap; }

.workspace-page .prompt-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}

.workspace-page .prompt-card {
  overflow: hidden;
  padding: 0 0 18px;
  border-radius: 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.workspace-page .prompt-card:hover {
  transform: translateY(-3px);
  border-color: #bae6fd;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .09);
}

.prompt-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.prompt-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .25s ease;
}

.prompt-card:hover .prompt-media > img { transform: scale(1.02); }

.prompt-media-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #ede9fe 0%, #f0f9ff 48%, #dbeafe 100%);
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.prompt-media-empty img { border-radius: 16px; box-shadow: 0 10px 22px rgba(59, 130, 246, .18); }
.image-count { position: absolute; right: 10px; bottom: 10px; padding: 6px 9px; border-radius: 999px; color: #fff; background: rgba(15, 23, 42, .76); font-size: 11px; font-weight: 800; }

.workspace-page .prompt-card > .card-top,
.workspace-page .prompt-card > h3,
.workspace-page .prompt-card > .purpose,
.workspace-page .prompt-card > .tags,
.workspace-page .prompt-card > .prompt-preview,
.workspace-page .prompt-card > .card-actions {
  margin-left: 18px;
  margin-right: 18px;
}

.workspace-page .prompt-card > .card-top { margin-top: 16px; }
.workspace-page .prompt-card > h3 { margin-top: 12px; }
.workspace-page .prompt-card > .prompt-preview { display: none; }
.workspace-page .prompt-card > .tags { min-height: 28px; margin-bottom: 16px; }
.workspace-page .prompt-card > .card-actions { padding-top: 14px; border-top: 1px solid #edf2f7; }

.reference-upload {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  padding: 20px;
  border: 2px dashed #bae6fd;
  border-radius: 16px;
  background: #f8fcff;
  outline: none;
}

.reference-upload:focus,
.reference-upload.dragging { border-color: #0ea5e9; background: #f0f9ff; box-shadow: 0 0 0 4px #e0f2fe; }
.reference-upload strong { color: #0f172a; }
.reference-upload p { margin: 5px 0 0; color: #64748b; font-size: 13px; font-weight: 500; line-height: 1.6; }
.reference-upload input[type=file] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.reference-upload > small { grid-column: 1 / -1; color: #94a3b8; font-weight: 600; }
.reference-preview { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.reference-preview:empty { display: none; }
.reference-preview figure { min-width: 0; margin: 0; }
.reference-preview img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; border-radius: 10px; }
.reference-preview figcaption { margin-top: 5px; overflow: hidden; color: #64748b; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.detail-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.detail-gallery a { display: block; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
.detail-gallery img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; }
.review-images { margin-bottom: 16px; }
.row-thumbnail { width: 110px; height: 82px; align-self: start; object-fit: cover; border-radius: 12px; border: 1px solid #e2e8f0; }
.submission-row:has(.row-thumbnail), .admin-row:has(.row-thumbnail) { grid-template-columns: 110px 1fr 230px; }

@media (max-width: 980px) {
  :root { --sidebar-width: 208px; }
  .workspace-page { width: min(100% - 32px, var(--workspace-max)); }
  .workspace-topbar { justify-content: flex-start; padding-inline: 20px; }
  .top-search { width: calc(100% - 165px); }
  .topbar-upload { right: 20px; }
  .workspace-page .hero { min-height: 190px; padding: 28px; }
  .workspace-page .hero > img { width: 86px; height: 86px; }
  .submission-row:has(.row-thumbnail), .admin-row:has(.row-thumbnail) { grid-template-columns: 90px 1fr; }
  .submission-row:has(.row-thumbnail) .submission-status, .admin-row:has(.row-thumbnail) .source-meta { grid-column: 2; }
}

@media (max-width: 720px) {
  .workspace-sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }
  .workspace-sidebar .brand { padding: 0; }
  .workspace-sidebar .brand img { width: 40px; height: 40px; }
  .workspace-sidebar .brand small, .sidebar-account { display: none; }
  .sidebar-nav { flex-direction: row; justify-content: flex-end; overflow-x: auto; }
  .sidebar-nav a { padding: 9px 10px; white-space: nowrap; font-size: 13px; }
  .sidebar-nav .admin-link { margin-top: 0; }
  .workspace-main { margin-left: 0; }
  .workspace-topbar { top: 61px; height: 66px; padding: 9px 12px; }
  .top-search { width: calc(100% - 120px); }
  .topbar-upload { right: 12px; padding: 10px 12px; }
  .workspace-page { width: min(100% - 24px, var(--workspace-max)); padding-top: 18px; }
  .workspace-page .hero { min-height: 0; }
  .workspace-page .hero > img { display: none; }
  .workspace-page .filter-bar { min-width: 0; width: 100%; flex-wrap: wrap; }
  .workspace-page .filter-bar select { min-width: 0; flex: 1; }
  .workspace-page .prompt-grid { grid-template-columns: 1fr; }
  .reference-upload { grid-template-columns: 1fr; }
  .reference-upload > small, .reference-preview { grid-column: 1; }
  .reference-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submission-row:has(.row-thumbnail), .admin-row:has(.row-thumbnail) { grid-template-columns: 72px 1fr; }
  .row-thumbnail { width: 72px; height: 64px; }
}

@media (max-width: 460px) {
  .workspace-sidebar { grid-template-columns: 46px 1fr; }
  .workspace-sidebar .brand span { display: none; }
  .sidebar-nav a { padding: 8px; font-size: 12px; }
  .workspace-page .hero { padding: 24px 20px; }
  .workspace-page .hero h1 { font-size: 30px; }
  .workspace-page .filter-bar { align-items: stretch; flex-direction: column; }
  .workspace-page .filter-bar .button, .workspace-page .filter-bar select { width: 100%; }
}