:root {
  color-scheme: light;
  --bg: #f7f1e9;
  --dot: #e7dbce;
  --surface: #fffdf9;
  --soft: #f0e6da;
  --ink: #211b17;
  --muted: #75695f;
  --line: #e2d4c7;
  --accent: #3b2b24;
  --hero: #d8b3a1;
  --danger: #a94336;
  --ok: #3f7b54;
  --font-size: 16px;
  --studio-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 14px 36px rgba(72, 52, 39, 0.09);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  background:
    radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
  color: var(--ink);
  font-family: var(--studio-font);
  font-size: var(--font-size);
}

button,
input,
select {
  font: inherit;
}

button,
.login-pill,
.soft-link {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

button:hover,
.login-pill:hover,
.soft-link:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(28, 32, 40, 0.06);
  transform: translateY(-1px);
}

button:active,
.login-pill:active,
.soft-link:active {
  transform: translateY(0);
  box-shadow: none;
}

.inline-upload {
  display: inline-grid;
  place-items: center;
}

.inline-upload input {
  display: none;
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.danger {
  color: var(--danger);
}

.full {
  width: 100%;
}

.site-header,
.master-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 82px;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.93);
  backdrop-filter: blur(14px);
}

.site-header {
  grid-template-columns: 1fr auto auto;
}

.brand-text {
  color: var(--ink);
  text-decoration: none;
  font-size: 28px;
  font-weight: 950;
}

.site-nav {
  display: flex;
  gap: clamp(20px, 4vw, 42px);
  justify-content: center;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
}

.site-header .login-pill,
.master-header .login-pill,
.master-header .soft-link {
  justify-self: end;
}

.database-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #d8dce2;
  border-radius: 5px;
  background: #f2f3f5;
  color: #676d76;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.database-status.connected {
  border-color: #b9dcc8;
  background: #eef8f2;
  color: #237a48;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 260px;
  padding: 0 12px;
  border: 1px solid #d8dce2;
  border-radius: 999px;
  background: #fff;
  color: #30343b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


main {
  width: min(1280px, calc(100% - 44px));
  margin: 0 auto;
}

.promo-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0 calc(50% - 50vw);
  padding: 34px 18px;
  min-height: 430px;
}

.hero-stage {
  position: relative;
  overflow: hidden;
  display: block;
  width: min(1140px, 100%);
  min-height: 410px;
  margin: 0 auto;
  border-radius: 26px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--hero), #fff 12%), color-mix(in srgb, var(--hero), #6b443b 12%));
}

.hero-copy {
  display: grid;
  align-content: center;
  padding: clamp(28px, 6vw, 72px);
  color: #fff;
}

.hero-copy p {
  margin: 0;
}

.hero-copy p:first-child {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  -webkit-text-stroke: 1px #fff;
  color: transparent;
}

.hero-copy h1 {
  margin: 18px 0 0;
  font-size: clamp(62px, 10vw, 124px);
  line-height: 0.9;
  font-weight: 1000;
  letter-spacing: 0;
}

.hero-copy h1 span {
  font-size: 0.34em;
  -webkit-text-stroke: 1px #fff;
  color: transparent;
}

.hero-copy #heroCaption {
  margin-top: 18px;
  font-size: 24px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.86);
}

.hero-collage {
  position: relative;
  min-height: 410px;
}

.hero-collage .banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.second-portfolio-banner {
  position: relative;
  overflow: hidden;
  width: min(1180px, 100%);
  min-height: 480px;
  margin: 8px auto 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

#portfolioSection #portfolioGallery {
  padding-bottom: 12px;
}

.second-portfolio-banner[hidden] {
  display: none;
}

.second-banner-stage {
  position: absolute;
  inset: 0;
}

.second-banner-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

.second-banner-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.88);
}

.second-banner-arrow.left {
  left: 18px;
}

.second-banner-arrow.right {
  right: 18px;
}

.hero-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, color-mix(in srgb, var(--hero), #fff 12%), color-mix(in srgb, var(--hero), #6b443b 12%));
}

.promo-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: min(340px, calc(100vw - 28px));
}

.promo-float[hidden] {
  display: none;
}

.promo-minimize {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 2;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 50%;
  background: #202124;
  color: #fff;
}

.promo-card {
  display: grid;
  grid-template-rows: 190px auto;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: left;
  box-shadow: 0 16px 42px rgba(20, 24, 28, 0.2);
}

.promo-card[hidden] {
  display: none;
}

.promo-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 8px;
}

.promo-card span {
  display: grid;
  gap: 3px;
}

.promo-card small {
  color: var(--muted);
}

.promo-dialog {
  position: relative;
}

.promo-dialog > img {
  width: 100%;
  max-height: 300px;
  margin-bottom: 14px;
  object-fit: contain;
  background: #f2f2f2;
  border-radius: 10px;
}

.promo-terms {
  margin-bottom: 18px;
  white-space: pre-wrap;
  line-height: 1.6;
}

.promo-dialog .soft-link {
  display: inline-flex;
}

.round-arrow {
  display: grid;
  place-items: center;
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 999px;
  font-size: 36px;
}

.banner-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.84);
}

.banner-arrow.left {
  left: 18px;
}

.banner-arrow.right {
  right: 18px;
}

.client-access,
.client-summary,
.client-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 42px 0 18px;
}

.client-access h2 {
  margin: 0;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 0.95;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.code-card {
  display: flex;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

input,
select {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent), transparent 86%);
}

.client-summary {
  grid-template-columns: 1.4fr 0.7fr 1fr;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.password-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.password-editor label {
  min-width: min(260px, 100%);
}

.client-summary strong,
.client-summary span {
  display: block;
}

.client-summary strong {
  font-size: 22px;
}

.client-summary span {
  color: var(--muted);
  font-size: 13px;
}

.client-toolbar {
  grid-template-columns: minmax(0, 1fr) 210px;
  padding-top: 20px;
}

.client-toolbar > label,
.client-toolbar > select,
.filter-panel > input,
.filter-panel > select,
.filter-panel > button {
  min-height: 40px;
}

.multi-select-toolbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.multi-select-toolbar button {
  min-height: 34px;
  padding-inline: 12px;
}

.multi-select-toolbar .readonly-note {
  min-height: 34px;
  margin-left: auto;
}

.client-file-group[hidden],
.photo-card[hidden] {
  display: none;
}

.content-section {
  padding: 34px 0 14px;
}

.content-section[hidden],
.client-toolbar[hidden] {
  display: none;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.section-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

.compact-head {
  align-items: center;
  margin: 18px 0 12px;
}

.compact-head h2 {
  font-size: 24px;
}

.readonly-note {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.sort-row {
  min-width: min(260px, 100%);
}

.public-folder-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.public-folder {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.public-folder strong {
  font-size: 20px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 18px;
  padding-bottom: 70px;
}

.photo-card {
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 320px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.photo-card.is-picked {
  border-color: var(--accent);
}

.photo-card.is-multi-selected {
  border-color: #26764a;
  box-shadow: 0 0 0 2px rgba(38, 118, 74, 0.18), var(--shadow);
}

.photo-card.is-saving {
  pointer-events: none;
  opacity: 0.72;
}

.card-select-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(24, 26, 31, 0.68);
  color: #fff;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}

.photo-card:hover .card-select-toggle,
.multi-select-active .card-select-toggle,
.photo-card.is-multi-selected .card-select-toggle {
  opacity: 1;
}

.card-select-toggle[aria-pressed="true"] {
  background: #26764a;
}

.thumb-button {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soft);
}

.image-shell {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  background: var(--soft);
  contain: layout paint;
}

.thumb-image-shell,
.category-image-shell {
  aspect-ratio: 4 / 3;
}

.pricelist-image-shell {
  aspect-ratio: 4 / 5;
}

.image-shell .resilient-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: 0;
  transition: opacity 160ms ease;
}

.image-shell.is-loaded .resilient-image {
  opacity: 1 !important;
}

.image-shell.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: image-shimmer 1.1s infinite;
}

.image-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

@keyframes image-shimmer {
  to { transform: translateX(100%); }
}

.photo-info {
  padding: 14px;
}

.file-name {
  margin-bottom: 10px;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.pick-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.client-download-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.icon-download {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.pick-buttons button,
.preview-actions button {
  padding: 0 10px;
  font-size: 13px;
}

.pick-buttons button.active,
.preview-actions button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 70px 20px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
  text-align: center;
}

.preview-dialog {
  width: min(980px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
}

.preview-dialog::backdrop {
  background: rgba(10, 11, 16, 0.72);
}

.choice-dialog {
  width: min(480px, calc(100vw - 28px));
  padding: 22px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24);
}

.choice-dialog::backdrop {
  background: rgba(10, 11, 16, 0.42);
}

.choice-dialog h2 {
  margin: 0 0 8px;
}

.choice-dialog p {
  margin: 0 0 14px;
  color: var(--muted);
}

.preview-dialog figure {
  margin: 0;
}

.preview-dialog img {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: #111;
}

.preview-dialog figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}

.dialog-close {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 28px;
}

.preview-nav {
  position: absolute;
  top: 42%;
  z-index: 2;
}

.preview-nav.left {
  left: 14px;
}

.preview-nav.right {
  right: 14px;
}

.preview-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

.preview-actions label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 900;
}

.master-header {
  grid-template-columns: 1fr auto;
}

.master-header > .folder-actions {
  justify-content: flex-end;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #f7f7f5;
}

.login-screen[hidden] {
  display: none;
}

.login-card {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.form-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e5adb3;
  border-radius: 12px;
  background: #fff1f2;
  color: #8d2630;
  font-weight: 900;
}

.form-help {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #dde2ea;
  border-radius: 12px;
  background: #f7f8fb;
  color: #4e5664;
  font-size: 13px;
  line-height: 1.45;
}

.is-locked > .master-header,
.is-locked > .master-app {
  visibility: hidden;
}

.side-toggle {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.master-brand {
  display: flex;
  gap: 14px;
  align-items: center;
}

.admin-logo,
.admin-logo-fallback {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.admin-logo {
  object-fit: contain;
  padding: 8px;
}

.admin-logo-fallback {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 28px;
  font-weight: 950;
}

.master-brand strong {
  font-size: 28px;
  font-weight: 950;
}

.master-app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0 48px;
}

.sidebar-collapsed .master-app {
  grid-template-columns: minmax(0, 1fr);
}

.sidebar-collapsed .folder-sidebar {
  display: none;
}

.folder-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
}

.tool-switch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.tool-group {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.tool-group summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tool-group button {
  width: 100%;
  margin-top: 5px;
  justify-content: flex-start;
  border-radius: 10px;
  background: #f8f9fb;
}

.tool-switch button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tool-hidden {
  display: none;
}

.panel,
.table-wrap,
.summary-row > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  position: relative;
  padding: 14px;
}

.master-content {
  min-width: 0;
}

.master-content:not(.tool-hidden) {
  display: grid;
  align-content: start;
  gap: 12px;
}

.master-content > *,
.panel > * {
  min-width: 0;
}

.compact-minimizable {
  position: relative;
}

.panel.compact-minimizable,
.production-card.compact-minimizable,
.client-folder-card.compact-minimizable,
.folder-split > .compact-minimizable,
.master-content > .summary-row.compact-minimizable,
.media-folder.compact-minimizable,
.table-wrap.compact-minimizable,
.stock-table.compact-minimizable {
  padding-right: 54px;
}

.compact-minimize-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 7px;
  background: var(--soft);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(72, 52, 39, 0.08);
}

.compact-minimize-summary {
  display: none !important;
  overflow: hidden;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-minimized {
  min-height: 54px !important;
  padding: 15px 54px 15px 14px !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
}

.compact-minimized > *:not(.compact-minimize-btn):not(.compact-minimize-summary) {
  display: none !important;
}

.compact-minimized > .compact-minimize-summary {
  display: block !important;
}

.file-card > .compact-minimize-btn,
.photo-card > .compact-minimize-btn {
  background: rgba(255, 253, 249, 0.94);
  backdrop-filter: blur(6px);
}

.file-card.compact-minimized,
.photo-card.compact-minimized {
  display: block;
  width: 100%;
  aspect-ratio: auto;
}

.panel h1,
.panel h2,
.folder-head h2 {
  margin: 0 0 16px;
  font-size: 21px;
}

.client-list {
  display: grid;
  gap: 8px;
}

.client-folder-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.client-folder {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 70px;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
}

.client-folder-card > .client-folder:first-child {
  grid-column: 1 / 3;
}

.client-folder.active {
  background: var(--accent);
  color: #fff;
}

.client-folder-card.active .client-folder {
  background: var(--accent);
  color: #fff;
}

.client-folder span {
  color: inherit;
  opacity: 0.72;
  font-size: 12px;
}

.folder-star {
  display: grid;
  place-items: center;
  min-width: 46px;
  padding: 0;
  border-radius: 14px;
  font-size: 20px;
}

.folder-star.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.folder-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.folder-delete {
  display: grid;
  place-items: center;
  min-width: 46px;
  padding: 0;
  border-radius: 14px;
  color: #8d2630;
  font-size: 22px;
}

.folder-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.folder-head p {
  margin: 0;
  color: var(--muted);
}

.folder-actions,
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.folder-actions > button,
.folder-actions > .soft-link,
.quick-actions > button {
  flex: 0 1 auto;
  max-width: 100%;
}

.upload-drop {
  display: grid;
  place-items: center;
  min-height: 190px;
  border: 1px dashed #cbd0d9;
  border-radius: 16px;
  background: var(--soft);
  text-align: center;
  cursor: pointer;
}

.upload-drop input {
  display: none;
}

.upload-drop span {
  font-size: 26px;
  font-weight: 950;
}

.upload-drop small {
  color: var(--muted);
}

.upload-drop.drag-over {
  border-color: var(--accent);
}

.order-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.upload-status {
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.upload-progress-panel {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7f8fa;
}

.upload-progress-panel[hidden] {
  display: none;
}

.upload-progress-track {
  overflow: hidden;
  height: 42px;
  border-radius: 8px;
  background: #d7d9dc;
}

.upload-progress-fill {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 100%;
  border-radius: 8px;
  background: #14aeda;
  color: #fff;
  transition: width 180ms ease;
}

.upload-progress-fill strong {
  font-size: 19px;
  font-weight: 950;
}

.upload-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.upload-progress-meta span:first-child {
  overflow-wrap: anywhere;
}


.sub-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fafbfc;
}

.sub-panel h3 {
  margin: -8px 0 0;
  font-size: 20px;
}

.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.72);
}

.filter-panel > * {
  min-width: 0;
}

.filter-panel input[type="search"] {
  flex: 1 1 220px;
}

.filter-panel input[type="date"],
.filter-panel select {
  min-height: 36px;
  max-width: 170px;
  font-size: 13px;
}

.check-line {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  line-height: 1.2;
}

.check-line input[type="checkbox"],
.production-card > input[type="checkbox"],
.client-folder-card > input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.filter-panel .check-line {
  flex: 1 1 180px;
  max-width: 230px;
}

.filter-panel > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.access-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.access-options label {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
}

.access-options input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
}

.maintenance-stack {
  display: grid;
  gap: 16px;
}

.option-group-card {
  align-items: start;
}

.option-chip-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  font-size: 13px;
  font-weight: 850;
}

.option-chip button {
  display: grid;
  place-items: center;
  min-width: 24px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
}

.stock-cashier {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 0.7fr;
  gap: 12px;
  align-items: end;
}

.stock-table {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.stock-table-head,
.stock-table-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr 0.45fr 0.6fr 0.5fr 0.72fr 0.82fr minmax(150px, auto);
  gap: 8px;
  align-items: center;
  min-width: 760px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.stock-table-head {
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.stock-table-row strong {
  overflow-wrap: anywhere;
}

.monthly-stock-table .stock-table-head,
.monthly-stock-table .stock-table-row {
  grid-template-columns: 0.8fr 1.4fr 0.5fr 1fr;
  min-width: 620px;
}

.pricelist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 18px;
}

.pricelist-card {
  display: grid;
  grid-template-rows: auto minmax(70px, 1fr);
  align-self: stretch;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  padding: 0;
  text-align: left;
  border-radius: 10px;
}

.pricelist-card img,
.pricelist-card .pricelist-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f4f4f4;
}

.pricelist-card details {
  padding: 14px;
}

.compact-pricelist-form {
  align-items: end;
}

.pricelist-card summary {
  cursor: pointer;
  font-weight: 900;
}

.pricelist-card p {
  margin: 10px 0 0;
  color: var(--muted);
  white-space: pre-line;
}

.pricelist-card > span {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 12px;
}

.pricelist-card small,
.portfolio-category-card small,
.client-file-group h3 small {
  color: var(--muted);
}

.catalog-group,
.client-file-group,
.period-group {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
}

.catalog-group > h3,
.client-file-group > h3,
.period-group > h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.portfolio-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

#pricelistGallery > .portfolio-category-grid {
  grid-column: 1 / -1;
  width: 100%;
}

.portfolio-category-card {
  display: grid;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  text-align: left;
  border-radius: 10px;
}

.portfolio-category-card img,
.portfolio-category-card .category-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-category-card span {
  display: grid;
  gap: 3px;
  padding: 12px;
}

.portfolio-expanded {
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  overflow: visible;
  width: 100%;
}

.catalog-expanded .pricelist-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.catalog-folder-card img {
  background: #f2f3f5;
  object-fit: cover;
}

.media-folder {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafbfc;
}

.media-folder h3 {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}

.media-folder h3 small {
  color: var(--muted);
  font-size: 12px;
}

.media-admin-card .photo-info {
  align-content: start;
  gap: 8px;
}

.media-admin-card .folder-actions {
  gap: 6px;
}

.media-admin-card .folder-actions button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.portfolio-expanded .inner-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0 0 12px;
}

.portfolio-expanded .photo-card {
  width: 100%;
}

.portfolio-open-grid {
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  overflow: visible;
  padding-bottom: 24px;
}

.catalog-open-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.back-inline-btn {
  width: min(260px, 100%);
  justify-self: start;
}

.youtube-card {
  color: var(--ink);
  text-decoration: none;
}

.youtube-card strong {
  display: block;
  padding: 10px;
}

.client-file-group + .client-file-group,
.period-group + .period-group {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.catalog-preview-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px;
}

.catalog-preview-actions[hidden] {
  display: none;
}

.sample-preview-download {
  display: block;
  margin: 10px auto 0;
}

.stock-use-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  gap: 8px;
  align-items: end;
  width: 100%;
}

.info-client-operations {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 12px;
  align-items: end;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.storage-choice {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.storage-choice select {
  width: 100%;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .info-client-operations,
  .stock-use-row {
    grid-template-columns: 1fr;
  }
}

.compact-alerts {
  border-color: #ecd6a7;
  background: #fffaf0;
}

.alert-row {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #ead39b;
  border-radius: 10px;
  background: #fff;
}

.file-edit-folder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.file-edit-thumb {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.file-edit-thumb img,
.sample-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--soft);
}

.info-client-preview summary {
  cursor: pointer;
  font-weight: 900;
}

.info-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.info-preview-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--soft);
}

.sample-cover {
  max-width: 180px;
}

.print-edit {
  margin-top: 10px;
}

.print-edit select {
  margin-top: 6px;
}

.readonly-preview .preview-actions {
  display: none;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.compact-media-grid {
  margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.media-admin-card .thumb {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.banner-edit-panel {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.banner-edit-panel[hidden] {
  display: none;
}

.banner-edit-panel img {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 14px;
  background: #111;
  object-fit: cover;
  clip-path: inset(0 round 14px);
  transition: object-position 120ms ease, transform 120ms ease;
}

.portfolio-photo-caption {
  padding: 9px 10px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-line;
}

.folder-split {
  display: grid;
  gap: 18px;
}

.file-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.file-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soft);
}

.file-card-body {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.file-card-body input {
  min-height: 38px;
}

.file-card-body button {
  min-height: 36px;
}

.file-card-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.file-card-actions button {
  padding: 0 10px;
}

.menu-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mini-drop {
  min-height: 150px;
}

.folder-code-card {
  width: fit-content;
  margin: 18px 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.info-card {
  display: grid;
  gap: 10px;
  min-height: 130px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.info-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.info-card strong {
  overflow-wrap: anywhere;
  font-size: 22px;
}

.portfolio-group {
  grid-column: 1 / -1;
}

.portfolio-group h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.inner-grid {
  padding-bottom: 22px;
}

.invoice-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.pickup-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, #fffaf3, #f1e5d8);
}

.pickup-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.pickup-summary label,
.pickup-summary > span {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(226, 212, 199, 0.85);
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.pickup-summary input,
.pickup-summary select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf9;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  text-transform: none;
}

.pickup-summary strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.success {
  border-color: #1f8f53;
  color: #137044;
}

.success.primary {
  background: #1f8f53;
  border-color: #1f8f53;
  color: #fff;
}

.master-peek {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(8, 9, 13, 0.12);
  color: transparent;
  text-decoration: none;
}

.master-peek:hover {
  background: var(--accent);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wide-field {
  grid-column: 1 / -1;
}

textarea {
  width: 100%;
  resize: vertical;
}

.cashier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.compact-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}

.production-list {
  display: grid;
  gap: 14px;
}

.order-workflow-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
}

.order-progress-card {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
}

.order-progress-track {
  overflow: hidden;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: var(--line);
}

.order-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ok);
}

.workflow-photo-details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.workflow-photo-details summary,
.production-card details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.workflow-photo-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.workflow-photo-form input,
.workflow-photo-form select {
  min-height: 36px;
  font-size: 13px;
}

.workflow-photo-form textarea,
.workflow-notes textarea {
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.editor-order-dashboard,
.workflow-photo-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.editor-order-dashboard > span,
.workflow-photo-readout > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.editor-order-dashboard .wide {
  grid-column: 1 / -1;
}

.editor-order-dashboard small,
.workflow-photo-readout small,
.activity-row small {
  color: var(--muted);
  font-size: 11px;
}

.editor-photo-workflow {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}

.editor-photo-preview {
  width: min(180px, 100%);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--soft);
}

.editor-print-row {
  align-items: start;
}

.editor-print-row > .editor-photo-workflow {
  min-width: 0;
}

.workflow-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr);
  gap: 10px;
}

.workflow-notes p {
  display: grid;
  align-content: start;
  gap: 4px;
  margin: 0;
  color: var(--muted);
}

.activity-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.activity-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.production-card {
  display: grid;
  content-visibility: auto;
  contain-intrinsic-size: 280px;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.gallery-load-more {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: min(320px, 100%);
}

.download-progress-panel {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 95;
  width: min(520px, calc(100vw - 36px));
  margin: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 44px rgba(20, 24, 28, 0.2);
  backdrop-filter: blur(12px);
}

.production-card strong,
.production-card span {
  display: block;
}

.production-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.print-detail {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.print-detail summary {
  cursor: pointer;
  font-weight: 900;
}

.print-file-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.print-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.print-file-row span {
  overflow-wrap: anywhere;
}

.step-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.include-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.tracking-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.tracking-step {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.tracking-step.done {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0;
}

.summary-row > div {
  padding: 16px;
}

.summary-row strong,
.summary-row span {
  display: block;
}

.summary-row strong {
  font-size: 28px;
}

.summary-row span {
  color: var(--muted);
  font-size: 13px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.table-photo {
  display: flex;
  gap: 10px;
  align-items: center;
}

.table-photo img {
  width: 68px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}

.choice-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.choice-pill.active {
  background: color-mix(in srgb, var(--accent), #fff 85%);
  color: var(--accent);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  max-width: 360px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .site-header,
  .master-header {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: auto;
    padding: 14px 18px;
  }

  .site-nav {
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding: 0 0 4px;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--soft);
    font-size: 16px;
  }

  .hero-stage,
  .master-app,
  .client-access,
  .client-toolbar,
  .client-summary {
    grid-template-columns: 1fr;
  }

  .promo-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 18px 12px;
  }

  .hero-stage,
  .hero-collage {
    min-height: 280px;
    border-radius: 18px;
  }

  .second-portfolio-banner {
    min-height: 340px;
    border-radius: 16px;
  }

  .round-arrow:not(.preview-nav) {
    width: 42px;
    min-width: 42px;
    height: 42px;
    font-size: 28px;
  }

  .section-head,
  .folder-head {
    align-items: stretch;
    flex-direction: column;
  }

  .section-head h2 {
    font-size: 24px;
  }

  .code-card,
  .password-editor {
    align-items: stretch;
    flex-direction: column;
  }

  .folder-actions {
    align-items: center;
    flex-direction: row;
  }

  .folder-actions > button,
  .folder-actions > .soft-link {
    width: auto;
  }

  .master-header > .folder-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .master-header > .folder-actions > * {
    min-width: 0;
    width: 100%;
    text-align: center;
  }

  .folder-code-card {
    width: 100%;
  }

  .public-folder-list,
  .photo-grid,
  .file-grid,
  .info-grid,
  .menu-upload-grid,
  .order-upload-grid,
  .cashier-grid,
  .compact-form,
  .include-fields,
  .step-row {
    grid-template-columns: 1fr;
  }

  .tracking-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-summary {
    gap: 12px;
  }

  .master-app {
    width: min(100% - 24px, 1280px);
  }

  .folder-sidebar {
    position: static;
  }

  .tool-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: sticky;
    top: 0;
    z-index: 9;
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
  }

  .tool-switch button {
    min-height: 42px;
    padding: 0 10px;
    font-size: 13px;
  }

  .tool-group {
    grid-column: 1 / -1;
  }
}

@media (min-width: 621px) and (max-width: 980px) {
  .public-folder-list,
  .photo-grid,
  .file-grid,
  .pricelist-grid,
  .portfolio-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-open-grid,
  .catalog-open-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .site-header,
  .master-header {
    padding: 12px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-header .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-header .database-status {
    grid-column: 2;
    grid-row: 1;
  }

  main {
    width: min(100% - 24px, 1280px);
  }

  .brand-text,
  .master-brand strong {
    font-size: 21px;
  }

  .master-brand {
    gap: 10px;
  }

  .admin-logo,
  .admin-logo-fallback {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .promo-hero {
    margin: 0 calc(50% - 50vw);
    padding-inline: 12px;
  }

  .hero-stage,
  .hero-collage {
    min-height: 220px;
    border-radius: 16px;
  }

  .banner-arrow {
    top: auto;
    bottom: 12px;
    transform: none;
  }

  .banner-arrow.left {
    left: 12px;
  }

  .banner-arrow.right {
    right: 12px;
  }

  .second-portfolio-banner {
    min-height: 300px;
  }

  .second-banner-arrow {
    top: auto;
    bottom: 12px;
    transform: none;
  }

  .second-banner-arrow.left {
    left: 12px;
  }

  .second-banner-arrow.right {
    right: 12px;
  }

  .content-section {
    padding-top: 24px;
  }

  .promo-float {
    right: 12px;
    bottom: 12px;
    width: min(300px, calc(100vw - 24px));
  }

  .download-progress-panel {
    left: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .promo-card {
    grid-template-rows: 160px auto;
  }

  .promo-card img {
    height: 160px;
  }

  .pricelist-grid {
    grid-template-columns: 1fr;
  }

  .multi-select-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .multi-select-toolbar button {
    width: 100%;
  }

  .multi-select-toolbar .readonly-note {
    grid-column: 1 / -1;
    justify-content: center;
    margin-left: 0;
  }

  .workflow-photo-form,
  .workflow-notes,
  .activity-row {
    grid-template-columns: 1fr;
  }

  .section-head h2 {
    font-size: 22px;
  }

  .panel {
    padding: 14px;
  }

  .summary-row {
    gap: 10px;
  }

  .summary-row > div,
  .client-summary {
    padding: 14px;
  }

  .file-card-actions {
    grid-template-columns: 1fr;
  }

  .print-file-row {
    grid-template-columns: 1fr;
  }

  .preview-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .preview-dialog img {
    height: 68dvh;
    max-height: 68dvh;
  }

  .preview-dialog figcaption {
    display: grid;
  }

  .preview-nav {
    top: 34%;
  }

  .form-grid,
  .summary-row,
  .preview-actions,
  .pick-buttons,
  .access-options,
  .tracking-steps {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 480px) and (max-width: 620px) {
  .public-folder-list,
  .portfolio-category-grid,
  .portfolio-open-grid,
  .catalog-open-grid,
  .pricelist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-open-grid .photo-card,
  .catalog-open-grid .pricelist-card {
    min-width: 0;
  }
}