@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The native [hidden] attribute must always win over any class's explicit
   display:, so JS-driven show/hide (modals, panels, editors) can't be
   silently defeated by an unrelated component style setting display later
   in the cascade. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* The header stays outside the scrolling area (below) so it always spans
   the full browser width -- no page-level scrollbar ever eats into it --
   and the page's own scrollbar visibly starts right underneath it instead
   of running the full window height alongside the logo/nav. */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.site-header { flex: 0 0 auto; }

/* Everything below the header lives in this scroll container -- it's what
   actually scrolls, so the header above it never moves and never shares a
   scrollbar track with the content. */
.page-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- Scrollbars (thin, modern, rounded, matched to the surface's
   own background -- not a default browser-gray track) ----------
   Two recipes, picked by how light/dark the scrolling container's own
   background is:
     - "light" (white/near-white surfaces: page body, white modals/panels):
       track = the surface's own bg, thumb = ~30% darker than that bg.
     - "dark" (near-black surfaces, e.g. the lightbox overlay): track =
       the surface's own bg, thumb = ~30% lighter than that bg.
   Native scrollbar styling is per scrolling-element, not per visible
   content, so a page whose sections mix light and dark backgrounds still
   gets one scrollbar theme for its one scrolling container -- these two
   recipes cover every actual scrolling element on the site today. */
.page-scroll-area,
.account-modal-body,
.asset-manager-sidebar,
.asset-manager-inspector,
.asset-manager-dropzone {
  scrollbar-width: thin;
  scrollbar-color: #b3b3b3 #fff;
}
.page-scroll-area::-webkit-scrollbar,
.account-modal-body::-webkit-scrollbar,
.asset-manager-sidebar::-webkit-scrollbar,
.asset-manager-inspector::-webkit-scrollbar,
.asset-manager-dropzone::-webkit-scrollbar {
  width: 8px;
}
.page-scroll-area::-webkit-scrollbar-track,
.account-modal-body::-webkit-scrollbar-track,
.asset-manager-sidebar::-webkit-scrollbar-track,
.asset-manager-inspector::-webkit-scrollbar-track,
.asset-manager-dropzone::-webkit-scrollbar-track {
  background: #fff;
}
.page-scroll-area::-webkit-scrollbar-thumb,
.account-modal-body::-webkit-scrollbar-thumb,
.asset-manager-sidebar::-webkit-scrollbar-thumb,
.asset-manager-inspector::-webkit-scrollbar-thumb,
.asset-manager-dropzone::-webkit-scrollbar-thumb {
  background-color: #b3b3b3;
  border-radius: 4px;
}
.page-scroll-area::-webkit-scrollbar-thumb:hover,
.account-modal-body::-webkit-scrollbar-thumb:hover,
.asset-manager-sidebar::-webkit-scrollbar-thumb:hover,
.asset-manager-inspector::-webkit-scrollbar-thumb:hover,
.asset-manager-dropzone::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: relative;
  z-index: 100; /* keep the whole header (nav, account dropdown, etc.) above page content like the hero */
  display: flex;
  align-items: center;
  padding: 28px 40px;
  flex-wrap: wrap;
  background: #fff;
  min-height: 91px;
}

.site-title {
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 400;
}

.site-title a { text-decoration: none; }

/* Centered on the header itself (not relative to the logo), so the nav
   lands at the exact same spot regardless of how long the site title is. */
.main-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 36px;
}

/* Underline is drawn with text-decoration (not border-bottom) so it is
   painted directly against the text's own baseline metrics by the browser's
   text renderer -- identical positioning regardless of display:inline vs
   inline-block, and it never changes the element's box height, so nothing
   shifts vertically when the underline appears on hover/active. */
.main-nav a {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-bottom: 4px;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.main-nav a.active,
.main-nav a:hover {
  text-decoration-color: var(--accent-color, #000);
}

/* Fixed width on the 2nd nav item ("About Us" / "About Me") so the nav
   track width is identical on both sites and no nav item shifts by even
   1px between kruegervp.com and tillkrueger.com. */
.main-nav ul li:nth-child(2) a {
  display: inline-block;
  width: 81px;
}

@media (max-width: 700px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; }
  .main-nav { position: static; transform: none; }
  .main-nav ul { flex-wrap: wrap; gap: 20px; }
}

/* ---------- Hero sections ---------- */
.hero {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.hero-home {
  position: relative;
  overflow: hidden;
  min-height: 65vh;
}

.hero-home::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: url('../images/hero-home.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Autoplaying background video (native <video>, direct Bunny CDN file), full-bleed.
   Sits above the poster image, below the dark overlay and content. */
.hero-video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  border: 0;
}

.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 2;
}

.hero-home > * {
  position: relative;
  z-index: 3;
}

/* Override the generic "> *" rule above: the video background must stay
   absolutely positioned (and behind the overlay) rather than in normal flow. */
.hero-home > .hero-video-bg {
  position: absolute;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-bg { display: none; }
}

.hero-about {
  background-image: linear-gradient(rgba(60,60,60,0.55), rgba(60,60,60,0.55)), url('../images/hero-about.jpg');
}

.hero-portfolio {
  background: #333 url('../images/wp-rt-website.jpg') center/cover;
  background-blend-mode: multiply;
}

.hero-contact {
  background: #efe9d8 url('../images/contact-bg.jpg') right bottom / auto 100% no-repeat;
  color: #222;
}

.hero-simple {
  background: #2c2c2c;
  color: #fff;
  min-height: 30vh;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px;
  width: 100%;
}

.hero-eyebrow {
  color: #c0392b;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero p {
  max-width: 720px;
  font-size: 16px;
}

.hero-about .hero-inner { max-width: 520px; }
.hero-about p { margin-bottom: 16px; }
.hero-about ul { margin: 16px 0 16px 20px; }

.hero-home { align-items: flex-end; }
.hero-tagline {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 60px;
  text-align: right;
}
.hero-tagline .tagline-main {
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.7;
}
.hero-tagline .tagline-main strong { font-weight: 700; }
.hero-tagline .tagline-sub {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.7;
  opacity: 0.9;
}

/* ---------- Feature grid (home + portfolio index) ---------- */
.feature-grid {
  background: #ededed;
  padding: 70px 40px;
}

.feature-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 50px;
}

.feature-item .eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: #555;
  margin-bottom: 10px;
}

.feature-item img { margin-bottom: 16px; }

.feature-item h3 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.feature-item p { font-size: 14px; color: #444; }

.feature-grid.dark { background: #4a4a4a; }
.feature-grid.dark .eyebrow { color: #bbb; }
.feature-grid.dark p { color: #ddd; }
.feature-grid.dark h3 { color: #fff; }

/* ---------- Portfolio grid (web-and-print) ---------- */
.portfolio-section {
  background: #4a4a4a;
  color: #fff;
  padding: 60px 40px 80px;
}

.portfolio-section h1 {
  max-width: 1200px;
  margin: 0 auto 40px;
  font-size: 36px;
  font-weight: 400;
}

.portfolio-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 50px 40px;
}

.portfolio-piece h4 {
  font-weight: 400;
  font-size: 17px;
  margin-bottom: 14px;
}

.portfolio-piece h4 span { color: #aaa; font-weight: 400; }

.portfolio-piece a.thumb {
  position: relative;
  display: block;
  cursor: pointer;
}

.portfolio-piece a.thumb img {
  border: 1px solid #666;
  display: block;
  width: 100%;
}

.portfolio-piece.square a.thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.portfolio-piece.square a.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-piece .credit {
  margin-top: 10px;
  font-size: 13px;
  color: #ccc;
}

.portfolio-piece .credit strong { color: #fff; font-weight: 400; }

.thumb-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

/* Admin-only per-thumbnail edit icon (top-left corner of each portfolio
   grid tile) -- opens the name/type/thumbnail-crop modal in portfolio-admin.js. */
.portfolio-edit-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.portfolio-piece a.thumb:hover .portfolio-edit-btn,
.portfolio-edit-btn:focus-visible {
  opacity: 1;
  visibility: visible;
}
.portfolio-edit-btn:hover { background: rgba(0, 0, 0, 0.9); }

/* ---------- Portfolio piece edit modal ---------- */

.portfolio-edit-modal { width: min(760px, 92vw); max-height: 85vh; }

.portfolio-edit-label {
  display: block;
  font-size: 13px;
  color: #ccc;
  margin: 14px 0 6px;
}

.portfolio-edit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #555;
  background: #1c1c1c;
  color: #fff;
  font-size: 14px;
}

.portfolio-edit-newtype {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.portfolio-edit-newtype .portfolio-edit-input { flex: 1 1 auto; }

.portfolio-edit-thumb-label {
  margin-top: 20px;
  font-size: 13px;
  color: #ccc;
}

.portfolio-edit-body {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  min-height: 260px;
}

.portfolio-edit-picker {
  flex: 0 0 180px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  align-content: flex-start;
}

.portfolio-edit-pick-item {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  background: #1c1c1c;
  aspect-ratio: 1 / 1;
}
.portfolio-edit-pick-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portfolio-edit-pick-item:hover { border-color: #888; }
.portfolio-edit-pick-item.active { border-color: var(--accent-color, #6366f1); }

.portfolio-edit-crop {
  flex: 1 1 auto;
  min-width: 0;
}

.portfolio-edit-empty,
.portfolio-edit-loading,
.portfolio-edit-applied {
  color: #999;
  font-size: 13px;
}

.portfolio-edit-preview {
  display: block;
  max-width: 220px;
  margin-top: 10px;
  border: 1px solid #555;
  border-radius: 3px;
}

@media (max-width: 700px) {
  .portfolio-edit-body { flex-direction: column; }
  .portfolio-edit-picker { flex-basis: auto; max-height: 160px; }
}

/* ---------- Lightbox ---------- */
body.lightbox-open { overflow: hidden; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Minimal padding on purpose -- the figure below sizes itself to a fixed
     95vh, so padding here just needs to clear the fixed prev/next/close
     buttons, not carve out vertical space for the image (that would make
     the figure overflow the viewport). */
  padding: 10px 90px;
}

.lightbox-overlay[hidden] { display: none; }

.lightbox-figure {
  /* Fixed width+height (not sized to the current image's rendered size) so
     the caption and filmstrip below never shift when navigating between
     images of different aspect ratios, and the visible image area is
     always as large as the viewport allows. */
  width: min(1400px, 94vw);
  height: 95vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-image-wrap {
  position: relative;
  /* Everything except the caption+filmstrip band goes here -- this is what
     actually grows/shrinks with the viewport. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  border: 1px solid #444;
  object-fit: contain;
}

.lightbox-zoom-btn {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.lightbox-zoom-btn:hover,
.lightbox-zoom-btn.active { background: rgba(0, 0, 0, 0.8); border-color: #fff; }
.lightbox-zoom-btn svg { width: 17px; height: 17px; }

.lightbox-image-wrap.loupe-active .lightbox-image { cursor: none; }

.lightbox-loupe {
  /* Classic magnifier/loupe: a circular lens that follows the cursor,
     showing a zoomed-in crop of the full-size image via a background-image
     positioned to match the cursor location (see moveLoupe() in lightbox.js). */
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 3;
}
.lightbox-loupe[hidden] { display: none; }

@media (max-width: 700px) {
  .lightbox-loupe { width: 120px; height: 120px; }
}

.lightbox-caption {
  flex: 0 0 auto;
  margin-top: 10px;
  color: #eee;
  font-size: 14px;
  text-align: center;
}

.lightbox-title { font-weight: 600; }

.lightbox-counter {
  color: #999;
  margin-left: 8px;
}

.lightbox-filmstrip {
  /* Reserved band: thumbnails + scrollbar live in exactly this height,
     never taller, regardless of how many images there are. */
  flex: 0 0 128px;
  height: 128px;
  box-sizing: border-box;
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: #4d4d4d #141414;
}
.lightbox-filmstrip::-webkit-scrollbar { height: 8px; }
.lightbox-filmstrip::-webkit-scrollbar-track { background: #141414; border-radius: 4px; }
.lightbox-filmstrip::-webkit-scrollbar-thumb { background: #4d4d4d; border-radius: 4px; }
.lightbox-filmstrip::-webkit-scrollbar-thumb:hover { background: #5c5c5c; }

.lightbox-filmstrip[hidden] { display: none; }

.lightbox-filmstrip-item {
  /* Sized by HEIGHT (fits exactly the band above), width follows the
     thumbnail's own aspect ratio -- no cropping, no fixed box. */
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  background: #111;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lightbox-filmstrip-item:hover { opacity: 0.85; }

.lightbox-filmstrip-item.active {
  opacity: 1;
  border-color: #fff;
}

.lightbox-filmstrip-item img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 26px;
  background: none;
  border: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.lightbox-close:hover { color: #ccc; }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  padding: 12px 16px;
}

.lightbox-nav:hover { color: #ccc; }

.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

.lightbox-nav[hidden] { display: none; }

@media (max-width: 700px) {
  .lightbox-overlay { padding: 8px 8px; }
  .lightbox-figure { width: 100%; height: 92vh; }
  .lightbox-filmstrip { flex-basis: 96px; height: 96px; padding: 4px 2px 14px; }
  .lightbox-zoom-btn { width: 32px; height: 32px; }
}

/* ---------- Sub-portfolio detail pages ---------- */
.detail-hero {
  background: #2c2c2c;
  color: #fff;
  padding: 60px 40px 40px;
}

.detail-hero h1 {
  max-width: 1200px;
  margin: 0 auto;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
}

.detail-hero h1 .muted { color: #999; }

.detail-body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 40px 80px;
}

.detail-body img {
  width: 100%;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

.detail-body img:last-of-type {
  margin-bottom: 0;
}

.detail-body .back-link {
  display: inline-block;
  margin-top: 30px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #000;
}

/* ---------- Account (placeholder) ---------- */
.account-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 70px 40px 100px;
  text-align: center;
}

.account-page h1 {
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.account-page p {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 16px;
}

.account-page .badge {
  display: inline-block;
  margin-bottom: 24px;
  padding: 6px 16px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #efe9d8;
  color: #222;
  border-radius: 3px;
}

/* ---------- Video / credit rows (Demo, Music, Timelapses) ---------- */
.video-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
  padding: 70px 40px;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.video-row.alt { background-color: #333; }

.video-row-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
  width: 100%;
}

.video-meta {
  flex: 1 1 280px;
  min-width: 240px;
}

.video-meta dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 14px;
}

.video-meta dt {
  text-transform: uppercase;
  color: #ccc;
  letter-spacing: 1px;
}

.video-meta dd { font-weight: 600; }

.video-embed {
  flex: 1 1 480px;
  min-width: 280px;
}

.video-embed .aspect {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.page-title-bar {
  background: #2c2c2c;
  color: #fff;
  padding: 60px 40px 20px;
}

.page-title-bar h1 {
  max-width: 1300px;
  margin: 0 auto;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- Contact ---------- */
.contact-section {
  padding: 70px 40px;
}

.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
}

.contact-inner h1 {
  color: #c0392b;
  font-weight: 400;
  font-size: 40px;
  margin-bottom: 30px;
}

.required-note {
  font-style: italic;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}

.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.form-row .names { display: flex; gap: 16px; }
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: 14px;
  background: #fdfdf6;
}
.form-row textarea { min-height: 130px; resize: vertical; }

.btn-send {
  background: #eee;
  border: 1px solid #ccc;
  padding: 12px 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  cursor: pointer;
}
.btn-send:hover { background: #ddd; }

.contact-note { font-size: 15px; font-weight: 600; margin-bottom: 20px; }

.form-status {
  margin-bottom: 16px;
  padding: 12px 16px;
  font-size: 14px;
}
.form-status.success { background: #e5f5e5; color: #256029; }
.form-status.error { background: #fbe5e5; color: #a02020; }

@media (max-width: 800px) {
  .contact-inner { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 50px 40px;
  border-top: 1px solid #eee;
}

.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-search {
  display: flex;
  max-width: 300px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
}

.footer-search input {
  flex: 1;
  border: 0;
  padding: 8px 10px;
  font-family: inherit;
}

.footer-search button {
  border: 0;
  background: #fff;
  padding: 0 14px;
  cursor: pointer;
  border-left: 1px solid #ccc;
}

.footer-nav ul {
  list-style: none;
}

.footer-nav li { margin-bottom: 6px; }
.footer-nav a { font-size: 14px; border-bottom: 1px solid transparent; }
.footer-nav a:hover { border-bottom-color: #000; text-decoration: none; }

/* ---------- Buttons (shared: auth forms, account modals) ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 3px;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: #000; color: #fff; }
.btn-primary:hover { background: #222; }
.btn-secondary { background: #fff; color: #000; }
.btn-secondary:hover { background: #f2f2f2; }
.btn-text {
  border: 0;
  background: none;
  padding: 10px 10px;
  text-decoration: underline;
}
.btn-text:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Login / setup / forgot-password pages ---------- */
.account-auth { max-width: 420px; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.auth-form input {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-transform: none;
  letter-spacing: normal;
}
.auth-form .btn { margin-top: 6px; }

.auth-fineprint {
  font-size: 13px !important;
  color: #666 !important;
}

.auth-notice {
  padding: 14px 16px;
  border-radius: 3px;
  margin-bottom: 20px;
  font-size: 14px;
  text-align: left;
}
.auth-notice-error { background: #fdecea; color: #7a1f14; border: 1px solid #f3c3bc; }
.auth-notice-success { background: #eaf6ec; color: #1e4620; border: 1px solid #bfe3c4; }

.recovery-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 700;
  background: #fff;
  border: 1px dashed #999;
  border-radius: 3px;
  padding: 14px;
  margin: 12px 0;
  word-break: break-all;
  text-align: center;
}

/* ---------- Header account widget (login icon / avatar / dropdown) ---------- */
.account-widget {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.account-login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #555;
  opacity: 0.75;
}
.account-login-icon:hover { opacity: 1; text-decoration: none; background: #f2f2f2; }

.account-avatar-btn {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
  padding: 0;
  overflow: hidden;
  background: #f5f5f5;
  cursor: pointer;
}
.account-avatar-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #555;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 160px;
  padding: 6px;
  z-index: 40;
}
.account-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 3px;
  color: #000;
}
.account-dropdown-item:hover { background: #f2f2f2; text-decoration: none; }

@media (max-width: 700px) {
  .account-widget { top: 28px; transform: none; }
}

/* ---------- Logo media (image/video logo rendered in header) ---------- */
.logo-media-link { display: block; overflow: hidden; }
.logo-media {
  display: block;
  max-height: 46px;
  width: auto;
}

/* ---------- Account modals (Profile / Appearance) ---------- */
.account-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200; /* above .site-header's z-index: 100 */
}
body.account-modal-open { overflow: hidden; }

/* The header is a normal (non-scrolling) flex item and the body is the only
   scrolling region -- this keeps the header pixel-perfectly still no matter
   how the body scrolls (no sticky-inside-scroll jitter/bounce), and it means
   anything absolutely positioned inside the body (e.g. the font picker's
   dropdown) is naturally clipped by the body's own box and can never paint
   over/above the header. */
.account-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  z-index: 201; /* above .site-header's z-index: 100 */
}

.account-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
}
.account-modal-header h2 {
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.account-modal-close {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 4px 8px;
}
.account-modal-close:hover { color: #000; }

.account-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  /* Scrollbar colors for this are defined once, up top, alongside every
     other scrolling surface on the site. */
}

.account-modal-notice {
  padding: 12px 14px;
  border-radius: 3px;
  font-size: 14px;
}
.account-modal-notice-error { background: #fdecea; color: #7a1f14; border: 1px solid #f3c3bc; }
.account-modal-notice-success { background: #eaf6ec; color: #1e4620; border: 1px solid #bfe3c4; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.field input,
.field select {
  font-family: inherit;
  font-size: 15px;
  padding: 9px 11px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-transform: none;
  letter-spacing: normal;
}
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }

.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type="color"] { width: 42px; height: 38px; padding: 2px; }
.color-field input[type="text"] { width: 110px; }
.hex-input { font-family: monospace; text-transform: uppercase; }

.opacity-field { display: flex; align-items: center; gap: 10px; }
.opacity-field input[type="range"] { flex: 1; }
.opacity-field .opacity-value { width: 42px; text-align: right; font-size: 13px; }

.swatch-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
}
.accent-color-field .auth-fineprint { text-transform: none; letter-spacing: normal; display: block; font-size: 11px; margin-top: 2px; }
.swatch-grid-wrap { display: flex; flex-direction: column; gap: 8px; }
.swatch-grid-wrap > .field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #555;
}
.swatch-grid-wrap > .field-label .auth-fineprint { text-transform: none; letter-spacing: normal; }
.swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch-item {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 0;
}
.swatch-item.dragging { opacity: 0.4; }
.swatch-item-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  color: #555;
}
.swatch-item-remove:hover { background: #f5f5f5; color: #000; }

.account-subsection {
  border-top: 1px solid #eee;
  padding-top: 14px;
}
.account-subsection summary {
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.account-subsection .field { margin-top: 10px; }
.account-subsection .btn { margin-top: 10px; }

.avatar-edit-field {
  display: flex;
  align-items: center;
  gap: 16px;
}
.avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #f2f2f2;
  border: 1px solid #e2e2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-preview .account-avatar-media { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview .account-avatar-fallback { font-size: 22px; }

.logo-image-preview {
  width: auto;
  min-width: 120px;
  max-width: 260px;
  height: 72px;
  border-radius: 4px;
  padding: 8px 14px;
}
.logo-image-preview .logo-media { max-height: 56px; }

.avatar-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.logo-type-toggle {
  display: flex;
  gap: 24px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.logo-type-toggle label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.logo-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.logo-live-preview {
  padding: 20px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
  text-align: center;
}

.logo-color-mode-field .field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 6px;
}
.logo-color-mode-toggle {
  display: flex;
  gap: 18px;
  font-size: 13px;
}
.logo-color-mode-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.logo-segment-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
}
.logo-segment-color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #555;
  cursor: pointer;
}
.logo-segment-color-item input[type="color"] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.logo-segment-hex-input {
  width: 60px;
  padding: 2px 4px;
  font-size: 10px;
  text-align: center;
}
.logo-segment-color-label {
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo-segment-style-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #777;
  cursor: pointer;
}
.logo-segment-style-toggle input[type="checkbox"] { width: 12px; height: 12px; cursor: pointer; margin: 0; }

.field-note {
  margin-top: -6px;
  font-size: 11px;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: none;
  cursor: pointer;
}
.checkbox-field input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.logo-style-toggle { align-items: center; }

.field-divider {
  border: 0;
  border-top: 1px solid #eee;
  margin: 4px 0;
}

/* ---------- Font picker (searchable Google Fonts combobox) ---------- */
.font-picker { position: relative; }
.font-picker-input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 9px 11px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-transform: none;
  letter-spacing: normal;
}
.font-picker-results {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.font-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 16px;
  border: 0;
  background: none;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.font-picker-item:hover { background: #f2f2f2; }

/* ---------- Icon picker (Iconify search results grid) ---------- */
.icon-picker-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
}
.icon-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  padding: 6px;
}
.icon-picker-item:hover { border-color: #999; background: #f5f5f5; }
.icon-picker-item img { width: 100%; height: 100%; object-fit: contain; }
.icon-picker-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
}
.logo-combo-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Combination logo (icon/image + text side by side, in header and previews) ---------- */
.logo-combo { text-decoration: none; }

/* ---------- Asset editor (crop for raster, position/rotate for svg/webm) ---------- */
.asset-editor {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 14px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.asset-editor-stage {
  width: 100%;
  max-height: 320px;
  overflow: hidden;
  background: #222;
}
.asset-editor-img { display: block; max-width: 100%; }

.asset-editor-stage-media {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}
.asset-editor-media { max-width: 80%; max-height: 80%; }

.asset-editor-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.asset-editor-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.asset-editor-zoom { display: flex; align-items: center; gap: 8px; }
.asset-editor-aspects { display: flex; gap: 4px; }
.asset-editor-aspect-btn { padding: 4px 10px; border: 1px solid #ddd; border-radius: 3px; }
.asset-editor-aspect-btn.active { background: #111; color: #fff; border-color: #111; }

/* ---------- Asset Manager ---------- */
.account-modal-wide {
  width: min(1240px, 96vw);
  /* Fixed height (not just a max-height ceiling) so the modal's box never
     grows/shrinks on its own -- e.g. when a folder row's content changes
     on hover, or the grid re-renders with more/fewer items. Everything
     inside scrolls in its own pane instead of the modal itself resizing. */
  height: 80vh;
  max-height: 80vh;
}
.asset-manager-body { padding: 0; gap: 0; }
.asset-manager-layout {
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  height: 100%;
  min-height: 0;
}
.asset-manager-sidebar {
  border-right: 1px solid #eee;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.asset-upload-buttons { display: flex; flex-direction: column; gap: 8px; }
.asset-sync-bunny-btn {
  align-self: flex-start;
  font-size: 12px;
  color: #666;
  padding: 2px 0;
}
.asset-sync-bunny-btn:hover { color: #000; }
.asset-sync-bunny-btn:disabled { opacity: 0.5; cursor: default; }
.asset-sidebar-section { display: flex; flex-direction: column; gap: 6px; }
.asset-sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
}
.asset-icon-btn {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 3px;
  width: 20px;
  height: 20px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}
.asset-icon-btn:hover { background: #f2f2f2; }
.asset-folder-tree, .asset-tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.asset-folder-tree ul { list-style: none; margin: 0; padding: 0; }
.asset-folder-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13.5px;
  color: #333;
  /* Long folder names must never wrap to a 2nd line -- that would change
     this row's (and therefore the whole sidebar's/modal's) height the
     moment hover reveals the action buttons and narrows this element. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-folder-item:hover { background: #f4f4f4; }
.asset-folder-item.active { background: #111; color: #fff; }

.asset-folder-row { display: flex; align-items: center; gap: 2px; border-radius: 3px; }
.asset-folder-row:hover { background: #f4f4f4; }
.asset-folder-row .asset-folder-item { flex: 1; }
.asset-folder-row:hover .asset-folder-item { background: none; }
/* Always laid out (never display:none) and only faded in/out on hover --
   toggling display would reflow the row's available width every time,
   which is exactly what was making the sidebar/modal jump around. */
.asset-folder-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
}
.asset-folder-row:hover .asset-folder-actions,
.asset-folder-row:focus-within .asset-folder-actions {
  opacity: 1;
  visibility: visible;
}
.asset-folder-action-btn {
  border: 0;
  background: none;
  width: 18px;
  height: 18px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  font-size: 12px;
  border-radius: 3px;
}
.asset-folder-action-btn:hover { background: #e6e6e6; color: #111; }

.asset-tag-row { display: flex; align-items: center; gap: 4px; }
.asset-tag-chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
.asset-tag-chip:hover { background: #f4f4f4; }
.asset-tag-chip.active { background: #eef0ff; }
.asset-tag-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.asset-tag-remove {
  border: 0;
  background: none;
  color: #aaa;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 6px;
  visibility: hidden;
}
.asset-tag-row:hover .asset-tag-remove { visibility: visible; }
.asset-tag-remove:hover { color: #c0392b; }

.asset-manager-main { display: flex; flex-direction: column; min-width: 0; }
.asset-manager-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
}
.asset-search-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13.5px;
}
.asset-view-toggle { display: flex; border: 1px solid #ddd; border-radius: 3px; overflow: hidden; flex: none; }
.asset-view-toggle button {
  border: 0;
  background: #fff;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  color: #666;
}
.asset-view-toggle button.active { background: #111; color: #fff; }
.asset-delete-selected-btn { color: #c0392b; flex: none; }

.asset-manager-dropzone { position: relative; flex: 1; overflow-y: auto; padding: 18px; }
.asset-drop-hint {
  position: absolute;
  inset: 8px;
  border: 2px dashed #111;
  border-radius: 6px;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.asset-empty-state { color: #999; font-size: 13.5px; text-align: center; margin-top: 60px; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.asset-card { cursor: pointer; }
.asset-card-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f2f2f2;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
}
.asset-card.selected .asset-card-thumb { border-color: #111; }
.asset-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-card-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 28px; color: #bbb; }
.asset-card-check { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; }
.asset-video-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.asset-card-name {
  margin-top: 6px;
  font-size: 12px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-grid-list { display: flex; flex-direction: column; gap: 2px; }
.asset-list-row {
  display: grid;
  grid-template-columns: 24px 1fr 70px 80px 110px;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}
.asset-list-row:hover { background: #f7f7f7; }
.asset-list-row.selected { background: #eef0ff; }
.asset-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-list-type { color: #888; text-transform: capitalize; font-size: 11.5px; }
.asset-list-size, .asset-list-date { color: #888; font-size: 11.5px; }

.asset-manager-inspector {
  border-left: 1px solid #eee;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.asset-inspector-image { width: 100%; border-radius: 4px; display: block; }
.asset-inspector-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000; }
.asset-inspector-video iframe { width: 100%; height: 100%; border: 0; }
.asset-inspector-processing {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: 4px;
  color: #888;
  font-size: 13px;
}
.asset-inspector-tags { display: flex; flex-direction: column; gap: 6px; }
.asset-inspector-tag { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.asset-inspector-meta { font-size: 11.5px; color: #999; }
.asset-inspector-multi { font-size: 13.5px; color: #555; }

@media (max-width: 900px) {
  .account-modal-wide { height: 86vh; max-height: 86vh; }
  .asset-manager-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .asset-manager-sidebar { border: 0; border-bottom: 1px solid #eee; max-height: 160px; }
  .asset-manager-inspector { border: 0; border-top: 1px solid #eee; max-height: 260px; }
  .asset-manager-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .asset-search-input { flex: 1 1 100%; order: -1; }
}

@media (max-width: 560px) {
  /* Edge-to-edge full-screen sheet -- more usable than a small floating
     card once the viewport itself is roughly modal-sized. */
  .account-modal-wide {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .asset-upload-buttons { flex-direction: row; }
  .asset-upload-buttons .btn { flex: 1; }
  .asset-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  .asset-manager-dropzone { padding: 12px; }
  .asset-list-row { grid-template-columns: 20px 1fr 64px; }
  .asset-list-type, .asset-list-date { display: none; }
  .asset-editor-stage { max-height: 220px; }
  .asset-editor-controls { gap: 8px; }
}