:root {
    color-scheme: dark;
    --bg: #070d16;
    --bg-2: #0e1622;
    --fg: #fdfdfe;
    --muted: #91919c;
    --border: rgba(208,242,255,0.09);
    --card: rgba(255,255,255,0.025);
    --card-hover: rgba(0,172,203,0.06);
    --accent: #00accb;
    --accent-bright: #00d6fc;
    --accent-deep: #005e70;
    --warm: #f65221;
  }
  * { box-sizing: border-box; }
  * { scrollbar-width: thin; scrollbar-color: rgba(0,172,203,0.45) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,172,203,0.55), rgba(0,94,112,0.55));
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0,214,252,0.85), rgba(0,172,203,0.85));
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-corner { background: transparent; }
  html, body {
    margin: 0; height: 100%;
    background: var(--bg); color: var(--fg);
    font: 14px/1.4 'Bai Jamjuree', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  /* Subtle fingerprint watermark: pattern-b.svg has teal #015F70 strokes that
     read as a faint contour over the dark page bg. Fixed so it doesn't scroll. */
  body { background: transparent; }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('pattern-b.svg') 0 0 / 336px 335px repeat;
    opacity: 0.06;
    pointer-events: none;
    z-index: -1;
  }
  .app { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
  .tab-bar {
    display: flex; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, #050a12 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    flex-shrink: 0;
  }
  .tab-bar .tab-brand { display: flex; align-items: center; gap: .55rem; padding: 10px 18px 10px 0; border-right: 1px solid var(--border); margin-right: 8px; }
  .tab-bar .tab-brand img { height: 1.5rem; }
  .tab-bar .tab-brand .badge { font: 600 9.5px/1 'Kanit'; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
  body:not(.dev-mode) .tab-btn[data-dev="1"],
  body:not(.dev-mode) .sub-tab[data-dev="1"] { display: none !important; }
  /* Nearly-invisible toggle dot in the tab-bar's top-right. Click to flip dev mode without typing ?dev=1. */
  .tab-bar { position: relative; }
  .dev-toggle {
    position: absolute; top: 8px; right: 10px;
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(208, 242, 255, 0.08);
    cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s;
  }
  .dev-toggle:hover { background: var(--warm); transform: scale(1.4); box-shadow: 0 0 10px rgba(246,82,33,0.6); }
  body.dev-mode .dev-toggle { background: var(--warm); }
  body.dev-mode .dev-toggle:hover { background: var(--warm); box-shadow: 0 0 10px rgba(246,82,33,0.8); }
  .tab-bar .tab-btn {
    background: transparent; border: 0; color: var(--muted);
    padding: 14px 18px; cursor: pointer;
    font: 600 11.5px/1 'Kanit'; letter-spacing: .2em; text-transform: uppercase;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s, border-color .15s;
  }
  .tab-bar .tab-btn:hover { color: var(--fg); }
  .tab-bar .tab-btn.active { color: var(--accent-bright); border-bottom-color: var(--accent); }
  .tab-pane { display: grid; grid-template-columns: 640px 1fr; flex: 1; min-height: 0; }
  .tab-pane.is-tabbed { display: flex; flex-direction: column; grid-template-columns: none; }
  .tab-pane.is-assets { display: flex; flex-direction: column; grid-template-columns: none; overflow: auto; min-height: 0; }
  .tab-pane.is-banners { display: grid; grid-template-columns: 380px 1fr; flex: 1; min-height: 0; }
  .ban-sidebar { padding: 14px 14px 24px; overflow: auto; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .ban-sidebar .section { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
  .ban-sidebar .section h1 { font: 600 11px/1 'Kanit'; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
  .ban-sidebar label { display: block; font: 500 9.5px/1.2 'Kanit'; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 6px 0 3px; }
  .ban-sidebar input[type=text], .ban-sidebar input[type=number], .ban-sidebar select { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 4px; color: var(--fg); font: 13px/1.2 'Bai Jamjuree', system-ui, sans-serif; padding: 6px 8px; box-sizing: border-box; }
  /* Style native <option>s so they don't render as white-on-white in the dropdown
     menu on Chromium/Edge where they'd otherwise inherit the OS theme. */
  .ban-sidebar select option, .ban-sidebar select optgroup { background: var(--bg-2); color: var(--fg); }
  .ban-sidebar input[type=text]::placeholder, .ban-sidebar input[type=number]::placeholder { color: var(--muted); }
  .ban-sidebar input[type=text]:focus, .ban-sidebar input[type=number]:focus, .ban-sidebar select:focus { outline: none; border-color: var(--accent); }
  /* Text-block list items: inputs were inheriting the same dark background, but
     against a slightly lighter card surface they read better with explicit
     contrast — pin the bg to bg-2 and the text to --fg. */
  .ban-textitem input[type=text], .ban-textitem input[type=number], .ban-textitem select { background: var(--bg-2); color: var(--fg); }
  .ban-sidebar input[type=color] { width: 100%; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; }
  .ban-sidebar input[type=range] { width: 100%; }
  .ban-sidebar .row { display: flex; gap: 6px; }
  .ban-sidebar .row > div { flex: 1; min-width: 0; }
  .ban-sidebar .chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
  .ban-sidebar .chip { font: 500 10px/1.2 'Kanit'; letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--muted); cursor: pointer; user-select: none; }
  .ban-sidebar .chip:hover { color: var(--fg); border-color: rgba(0,172,203,0.4); }
  .ban-sidebar .chip.active { background: var(--accent-deep); color: var(--fg); border-color: var(--accent); }
  .ban-sidebar .hint { font: 500 11px/1.4 'Bai Jamjuree', system-ui, sans-serif; color: var(--muted); margin-bottom: 6px; }
  .ban-sidebar button { background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--fg); border-radius: 4px; padding: 7px 10px; font: 500 11px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
  .ban-sidebar button.ghost:hover { border-color: var(--accent); color: var(--accent-bright); }
  .ban-sidebar button.primary { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); color: #001218; border: 0; font-weight: 700; padding: 10px; cursor: pointer; }
  .ban-sidebar button.primary:hover { background: linear-gradient(180deg, #20e6ff, #00c0e0); }
  .ban-sidebar button.primary:disabled { opacity: 0.5; cursor: wait; }
  .ban-textitem { background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 6px; }
  .ban-layeritem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: rgba(255,255,255,0.02); margin-bottom: 4px; cursor: pointer; user-select: none; }
  .ban-layeritem:hover { border-color: rgba(0,172,203,0.4); }
  .ban-layeritem input { margin: 0; }
  .ban-layeritem-name { flex: 1; font: 500 12px/1.2 'Bai Jamjuree', system-ui, sans-serif; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ban-layeritem-meta { font: 500 9px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,0.04); }
  .ban-textitem-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  .ban-textitem-head .ban-textitem-title { font: 600 10px/1 'Kanit'; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); flex: 1; }
  .ban-textitem-head button { padding: 3px 6px; font-size: 10px; }
  .ban-stage { display: flex; flex-direction: column; padding: 18px; overflow: hidden; min-height: 0; }
  .ban-stage-info { font: 600 10px/1 'Kanit'; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; flex-shrink: 0; }
  .ban-canvas-wrap { background: repeating-conic-gradient(#171b22 0% 25%, #1d2128 0% 50%) 50% / 18px 18px; border: 1px solid var(--border); border-radius: 6px; padding: 16px; display: flex; align-items: center; justify-content: center; overflow: auto; flex: 1; min-height: 0; }
  #banCanvas { max-width: 100%; max-height: 100%; box-shadow: 0 8px 36px rgba(0,0,0,0.45); display: block; }
  /* Pin the info-sheets pane below the tab-bar, anchored to all 4 viewport
     edges. Avoids the iframe-in-flex sizing quirks entirely. */
  .tab-pane.is-info-sheets,
  .tab-pane.is-game-demos {
    position: fixed;
    top: var(--tab-bar-h, 44px);
    left: 0; right: 0; bottom: 0;
    display: block;
    grid-template-columns: none;
    overflow: hidden;
    z-index: 1;
  }
  .info-sheets-frame,
  .game-demos-frame {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    background: var(--bg, #0c1018);
  }
  .tab-pane[hidden] { display: none !important; }

  .sub-tab-bar { display: flex; gap: 0; padding: 0 18px; background: var(--card); border-bottom: 1px solid var(--border); flex-shrink: 0; }
  /* In non-dev mode the Dev Mode sub-tab is hidden, so the sub-tab-bar
     only shows "EXPORT" — a single tab is noise rather than navigation. */
  body:not(.dev-mode) .tab-pane.is-tabbed > .sub-tab-bar { display: none; }
  .sub-tab { background: transparent; border: none; color: var(--muted); padding: 11px 18px; font: 500 11px/1.2 'Kanit'; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
  .sub-tab:hover { color: var(--fg); }
  .sub-tab.active { color: var(--accent-bright); border-bottom-color: var(--accent); }
  .sub-tab-pane { flex: 1; min-height: 0; }
  .sub-tab-pane.is-dev { display: grid; grid-template-columns: 640px 1fr; }
  .sub-tab-pane.is-export { display: grid; grid-template-columns: 380px 1fr; }
  .sub-tab-pane[hidden] { display: none !important; }
  @media (max-width: 1100px) { .sub-tab-pane.is-dev { grid-template-columns: 360px 1fr; } .sub-tab-pane.is-export { grid-template-columns: 300px 1fr; } }
  @media (max-width: 720px) {
    /* Release viewport-locked heights so the whole page scrolls as one
       column on phones — no nested scroll containers inside the
       thumbnails panes. */
    html, body { height: auto; min-height: 100%; }
    .app { height: auto; min-height: 100vh; }
    .tab-bar { position: sticky; top: 0; z-index: 30; }
    .sub-tab-bar { position: sticky; top: 40px; z-index: 25; }

    /* Top tab bar: horizontal scroll with a right-edge fade to telegraph
       "more tabs exist" — without the mask it looks like a clipped row. */
    .tab-bar {
      overflow-x: auto;
      padding: 0 6px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
              mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-bar .tab-brand {
      padding: 6px 8px 6px 0;
      margin-right: 2px;
      flex-shrink: 0;
      border-right-width: 1px;
    }
    .tab-bar .tab-brand img { height: 0.95rem; }
    .tab-bar .tab-brand .badge { display: none; }
    .tab-bar .tab-btn {
      padding: 12px 7px;
      font-size: 10.5px;
      letter-spacing: 0;
      flex-shrink: 0;
      scroll-snap-align: start;
    }

    /* Thumbnails sub-tabs: single column, page-flow scroll. Each panel
       grows to its content size and the page (not the panel) scrolls. */
    .tab-pane.is-tabbed { flex: 0 0 auto; min-height: 0; }
    .sub-tab-pane.is-dev, .sub-tab-pane.is-export {
      display: flex; flex-direction: column; grid-template-columns: none;
      flex: 0 0 auto; min-height: 0;
    }
    .sub-tab-pane.is-export > .sidebar {
      flex: 0 0 auto;
      max-height: none; overflow: visible;
      border-right: 0; border-bottom: 1px solid var(--border);
      padding: 14px !important;
    }
    .sub-tab-pane.is-export > .export-stage {
      flex: 0 0 auto;
      overflow: visible;
      padding: 12px;
    }
    .sub-tab-pane.is-dev > .thumb-sidebar {
      flex: 0 0 auto;
      max-height: none; overflow: visible;
      border-right: 0; border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column;
    }
    .sub-tab-pane.is-dev > .thumb-sidebar > .sidebar-col {
      flex: 0 0 auto; min-height: 0;
      overflow: visible;
    }
    .sub-tab-pane.is-dev > .thumb-stage {
      flex: 0 0 auto;
      overflow: visible;
      padding: 12px;
    }
    /* Edit view inside thumb-stage normally has its own scroll — release it
       too so it joins the page-scroll flow. */
    .sub-tab-pane.is-dev #thumbEditView { overflow: visible; }
    .sub-tab-pane.is-dev #thumbAllView,
    .sub-tab-pane.is-dev #thumbGamesAtSizeView,
    .sub-tab-pane.is-dev #thumbPortfolioView { overflow: visible; }
    .thumb-stage-toolbar {
      flex-wrap: wrap; gap: 6px; margin: -12px -12px 0; padding: 12px;
      position: static; /* unstick — page scroll handles it now */
    }
    .thumb-stage-toolbar .info { margin-left: 0; }
    /* Inline overflow:auto on dev-mode views creates nested scroll; flatten. */
    .sub-tab-pane.is-dev #thumbAllView,
    .sub-tab-pane.is-dev #thumbGamesAtSizeView,
    .sub-tab-pane.is-dev #thumbPortfolioView,
    .sub-tab-pane.is-dev #thumbEditView { overflow: visible !important; }

    .sub-tab-bar { padding: 0 10px; }
    .sub-tab { padding: 10px 14px; font-size: 10.5px; }

    /* Tighter thumbnail grid so 2 columns fit on a phone */
    .export-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  }
  .export-stage { padding: 18px; overflow:auto; flex:1; min-height:0; background: var(--bg-2); }
  .export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .export-grid figure { margin: 0; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .export-grid img, .export-grid canvas, .export-grid svg { max-width:100%; height:auto; border-radius:4px; background:#000; border:1px solid var(--border); display:block; }
  .export-grid figcaption { font:500 9.5px/1.1 'Kanit'; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; }
  .sidebar {
    background:
      radial-gradient(ellipse 90% 35% at 50% -5%, rgba(0,172,203,0.18), transparent 70%),
      radial-gradient(ellipse 70% 30% at 100% 8%, rgba(246,82,33,0.07), transparent 70%),
      var(--bg);
    border-right: 1px solid var(--border);
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 22px;
    overflow: hidden;
  }
  .sidebar-col {
    overflow-y: auto;
    min-height: 0;
    padding-right: 6px;
  }
  .section { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .section:first-of-type { padding-top: 0; }
  .section.collapsible > h1 { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
  .section.collapsible > h1::after { content: '▾'; font-size: 11px; color: var(--muted); transition: transform .15s; }
  .section.collapsible.is-collapsed > h1::after { transform: rotate(-90deg); }
  .section.collapsible.is-collapsed > h1 { margin-bottom: 0; }
  .section.collapsible.is-collapsed > *:not(h1) { display: none !important; }
  .brand-header {
    display: flex; align-items: center; gap: .7rem;
    padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
    grid-column: 1 / -1;
  }
  .brand-header .logotype { height: 2rem; }
  .brand-header .sub { color: var(--accent); font: 500 .72rem 'Kanit'; text-transform: uppercase; letter-spacing: .2em; }
  .stage {
    display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto;
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,172,203,0.10), transparent 70%),
      repeating-conic-gradient(#0a1220 0% 25%, #070d16 0% 50%) 50% / 24px 24px;
  }
  .preview-wrap {
    background: #000; border-radius: 6px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--border), 0 0 60px -20px rgba(0,172,203,0.35);
  }
  canvas { display: block; max-width: 100%; max-height: calc(100vh - 80px); }
  h1 { font: 600 11px/1 'Kanit'; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
  label { display: block; font: 500 10.5px/1 'Kanit'; color: var(--muted); margin: 10px 0 5px; text-transform: uppercase; letter-spacing: .14em; }
  input[type="text"], input[type="number"], select, textarea {
    width: 100%; background: var(--bg-2); color: var(--fg); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 10px; font: inherit;
    font-family: 'Bai Jamjuree', system-ui, sans-serif;
    transition: border-color .15s, box-shadow .15s;
  }
  input:hover, textarea:hover { border-color: var(--accent); }
  input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,172,203,.22); }
  input[type="color"] { width: 100%; height: 32px; padding: 2px; border-radius: 8px; }
  input[type="range"] { width: 100%; accent-color: var(--accent); }
  textarea { resize: vertical; min-height: 50px; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .chip {
    background: var(--card); border: 1px solid var(--border); color: var(--fg);
    padding: 6px 12px; border-radius: 999px;
    font: 500 11px/1 'Kanit'; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; transition: all .15s;
  }
  .chip.active { background: rgba(0,172,203,.18); border-color: var(--accent); color: var(--accent-bright); box-shadow: 0 0 12px rgba(0,214,252,.28); }
  .chip:hover:not(.active) { border-color: var(--accent); background: var(--card-hover); }
  .chip.sm { padding: 4px 9px; font-size: 10px; }
  button.primary {
    background: linear-gradient(180deg, var(--accent), var(--accent-deep));
    border: 1px solid var(--accent); color: #fff; padding: 12px 16px; border-radius: 10px;
    font: 600 12px/1 'Kanit'; letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer; width: 100%; margin-top: 8px;
  }
  button.primary:hover { box-shadow: 0 0 18px rgba(0,214,252,.5); }
  button.ghost { background: var(--card); border: 1px solid var(--border); color: var(--fg);
    padding: 8px 12px; border-radius: 8px; cursor: pointer;
    font: 500 11px/1 'Kanit'; letter-spacing: .1em; text-transform: uppercase;
  }
  button.ghost:hover { border-color: var(--accent); color: var(--accent-bright); background: var(--card-hover); }
  .drop {
    border: 1.5px dashed var(--border); border-radius: 10px; padding: 14px; text-align: center;
    color: var(--muted); cursor: pointer; background: var(--card); font-size: 12px;
    transition: all .15s;
  }
  .drop:hover, .drop.over { border-color: var(--accent); color: var(--fg); background: var(--card-hover); }
  .hint { font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 4px; }

  .template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .template-card { display: flex; gap: 8px; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; align-items: center; transition: all .15s; }
  .template-card:hover { border-color: var(--accent); background: var(--card-hover); }
  .template-card.active { border-color: var(--accent); background: rgba(0,172,203,.10); box-shadow: 0 0 14px rgba(0,214,252,.18); }
  .template-card.customized .tc-title::after { content: ' ★'; color: var(--warm); }
  .tc-swatch { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; background: #1a3742; display: flex; align-items: center; justify-content: center; }
  .tc-swatch.tc-teal { background: linear-gradient(135deg, #00accb, #0a3d4a); }
  .tc-swatch.tc-red { background: linear-gradient(135deg, #f65221, #3a0d05); }
  .tc-swatch.tc-photo { background: linear-gradient(135deg, #2a4a55, #0a1f24); color: #00d6fc; font: 600 9px/1 'Kanit'; }
  .tc-swatch.tc-wave { background: linear-gradient(135deg, #0a4734, #02110a); }
  .tc-title { font: 500 12px/1.2 'Kanit'; color: var(--fg); }
  .tc-desc { font-size: 10.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; }

  .layer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .layer-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
    transition: opacity .12s, transform .12s, border-color .12s; }
  .layer-card.dragging { opacity: .35; }
  .layer-card.drop-above { box-shadow: 0 -2px 0 0 var(--accent-bright) inset; border-top-color: var(--accent-bright); }
  .layer-card.drop-below { box-shadow: 0 2px 0 0 var(--accent-bright) inset; border-bottom-color: var(--accent-bright); }
  .drag-handle { color: var(--muted); cursor: grab; font-size: 12px; padding: 0 2px; user-select: none; }
  .drag-handle:active { cursor: grabbing; }
  .layer-card.hidden-state { opacity: .55; }
  .layer-head { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
  .layer-type-icon { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: var(--bg-2);
    color: var(--accent); font: 600 11px/1 'Kanit'; }
  .layer-name { flex: 1; font: 500 12px/1.2 'Kanit'; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; }
  .layer-actions { display: flex; gap: 2px; }
  .layer-actions button { background: transparent; border: none; color: var(--muted);
    width: 22px; height: 22px; padding: 0; cursor: pointer; border-radius: 4px; font-size: 13px; line-height: 1; }
  .layer-actions button:hover { background: var(--card-hover); color: var(--fg); }
  .layer-actions button.danger:hover { color: #ff5252; }
  .layer-body { display: none; padding-top: 8px; }
  .layer-card.open .layer-body { display: block; }
  .layer-card.open .toggle-caret { transform: rotate(90deg); }
  .toggle-caret { color: var(--muted); transition: transform .15s; display: inline-block; }
  .layer-thumb { width: 100%; height: 36px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .layer-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .tint-row { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
  .tint-row button { width: 22px; height: 22px; border-radius: 4px; border: 1.5px solid transparent; cursor: pointer; padding: 0; font-size: 10px; }
  .tint-row button.active { border-color: var(--accent); box-shadow: 0 0 6px rgba(0,214,252,.5); }
  .tint-row .asis { background: linear-gradient(135deg, #888 50%, #555 50%); color: #fff; }
  .tint-row .white { background: #fff; }
  .tint-row .black { background: #000; }
  .tint-row input[type="color"] { width: 26px; height: 26px; padding: 0; border-radius: 4px; }
  .add-layer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }

  .overlay-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 4px 0; }
  .overlay-toggle { display: flex; align-items: center; gap: 6px; color: var(--fg); font: 500 11px/1 'Kanit'; letter-spacing: .08em; text-transform: uppercase; margin: 0; cursor: pointer; }
  .overlay-toggle input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
  .overlay-controls { display: flex; gap: 6px; align-items: center; }
  .overlay-controls input[type="range"] { width: 80px; }
  .overlay-controls input[type="color"] { width: 28px; height: 24px; padding: 0; border-radius: 4px; }
  .overlay-controls.disabled { opacity: .35; pointer-events: none; }
  .bg-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
  .bg-preset { aspect-ratio: 16/9; border-radius: 8px; cursor: pointer; position: relative;
    border: 2px solid transparent; overflow: hidden; display: flex; align-items: flex-end; padding: 4px 6px;
    font: 500 9px/1 'Kanit'; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9);
    transition: border-color .15s, transform .12s; }
  .bg-preset:hover { transform: translateY(-1px); }
  .bg-preset.active { border-color: var(--accent-bright); box-shadow: 0 0 12px rgba(0,214,252,.4); }
  .sidebar::-webkit-scrollbar { width: 8px; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

  @media (max-width: 1100px) {
    .tab-pane { grid-template-columns: 360px 1fr; }
    .sidebar { grid-template-columns: 1fr; }
  }

  /* Thumbnail designer tab */
  .thumb-sidebar { grid-template-columns: 1fr; }
  .thumb-sidebar .sidebar-col { padding-right: 8px; }
  .thumb-layer {
    display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 8px; background: var(--card); border: 1px solid var(--border);
    margin-bottom: 5px; cursor: pointer; user-select: none;
  }
  .thumb-layer:hover { border-color: var(--accent); }
  .thumb-layer.active { border-color: var(--accent-bright); background: rgba(0,172,203,.12); box-shadow: 0 0 12px rgba(0,214,252,.18); }
  .thumb-layer.hidden-state { opacity: .55; }
  .thumb-layer.hidden-state .thumb-name { text-decoration: line-through; color: var(--muted); }
  .thumb-layer .thumb-swatch { width: 32px; height: 32px; border-radius: 5px; background: #000 center/cover no-repeat; flex-shrink: 0; border: 1px solid var(--border); }
  .thumb-layer .thumb-name { font: 500 12px/1.2 'Bai Jamjuree'; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .thumb-layer .thumb-meta { font: 500 9.5px/1.1 'Kanit'; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
  .thumb-layer .thumb-ctrls { display: flex; gap: 2px; }
  .thumb-layer .thumb-ctrls button {
    background: transparent; border: 1px solid transparent; color: var(--muted);
    width: 22px; height: 22px; border-radius: 5px; cursor: pointer; font: 11px/1 system-ui;
  }
  .thumb-layer .thumb-ctrls button:hover { color: var(--fg); border-color: var(--border); background: var(--bg-2); }
  .anchor-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    gap: 4px; width: 96px; aspect-ratio: 1;
  }
  .anchor-grid .ah {
    background: var(--card); border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer; position: relative; transition: all .12s;
  }
  .anchor-grid .ah:hover { border-color: var(--accent); }
  .anchor-grid .ah.active { background: var(--accent); border-color: var(--accent-bright); box-shadow: 0 0 8px rgba(0,214,252,.5); }
  .thumb-drop {
    border: 1.5px dashed var(--border); border-radius: 10px; padding: 14px;
    text-align: center; color: var(--muted); cursor: pointer; transition: all .15s;
    font: 500 11px/1.3 'Kanit'; letter-spacing: .14em; text-transform: uppercase;
  }
  .thumb-drop:hover, .thumb-drop.over { border-color: var(--accent); color: var(--accent-bright); background: var(--card-hover); }
  .thumb-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .thumb-size-grid .size-chip {
    background: var(--card); border: 1px solid var(--border); border-radius: 6px;
    padding: 7px 9px; cursor: pointer; transition: all .12s;
    font: 500 10.5px/1.1 'Kanit'; letter-spacing: .1em; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center; gap: 6px;
  }
  .thumb-size-grid .size-chip:hover { border-color: var(--accent); }
  .thumb-size-grid .size-chip.active { background: rgba(0,172,203,.18); border-color: var(--accent-bright); color: var(--accent-bright); }
  .thumb-size-grid .size-chip .ratio { font: 500 9px/1 'Kanit'; color: var(--muted); }
  .thumb-size-grid .size-chip.active .ratio { color: var(--accent); }
  .thumb-size-grid .size-chip input[type=checkbox] { accent-color: var(--accent); margin: 0; cursor: pointer; }
  .thumb-stage { flex-direction: column; gap: 14px; padding: 16px; align-items: stretch; justify-content: flex-start; overflow: hidden; }
  .thumb-stage-toolbar { flex-shrink: 0; }
  .thumb-stage-toolbar {
    display: flex; gap: 8px; align-items: center;
    position: sticky; top: 0; z-index: 5;
    background: var(--bg);
    margin: -16px -16px 0;
    padding: 16px;
  }
  .thumb-stage-toolbar .seg { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .thumb-stage-toolbar .seg button {
    background: transparent; border: 0; color: var(--muted); padding: 7px 12px; cursor: pointer;
    font: 600 10.5px/1 'Kanit'; letter-spacing: .16em; text-transform: uppercase;
  }
  .thumb-stage-toolbar .seg button.active { background: var(--accent); color: #fff; }
  .thumb-stage-toolbar .info { font: 500 11px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-left: auto; }
  .thumb-stage canvas { cursor: grab; }
  .thumb-stage canvas.dragging { cursor: grabbing; }
  .thumb-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px; padding: 8px; width: 100%; align-content: start;
    justify-items: center;
  }
  .thumb-grid figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
  .thumb-grid figure canvas {
    max-width: 100%; max-height: 60vh; height: auto; width: auto; background: #000;
    box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 0 1px var(--border);
    border-radius: 5px; object-fit: contain;
  }
  .thumb-grid figcaption { font: 500 11px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .portfolio-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 8px; border-bottom: 1px solid var(--border); }
  .portfolio-row:last-child { border-bottom: 0; }
  .portfolio-row .game-title { font: 600 12px/1 'Kanit'; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-bright); }
  .portfolio-strip { display: flex; flex-wrap: nowrap; gap: 12px; align-items: flex-end; width: 100%; }
  .portfolio-strip figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .portfolio-strip figure canvas { background: #000; box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 1px var(--border); border-radius: 3px; display: block; }
  .portfolio-strip figcaption { font: 500 9px/1 'Kanit'; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .num-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .num-row input[type=number] { padding: 6px 8px; }
  .opacity-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
  .thumb-canvas-wrap { position: relative; display: inline-block; line-height: 0; overflow: visible !important; }
  .thumb-resize-handle {
    position: absolute; width: 14px; height: 14px;
    background: var(--accent-bright);
    border: 2px solid #0a1220; border-radius: 3px;
    box-shadow: 0 0 8px rgba(0,214,252,.6);
    z-index: 10; touch-action: none;
  }
  .thumb-resize-handle.nw { top: -18px;  left: -18px;  cursor: nwse-resize; }
  .thumb-resize-handle.ne { top: -18px;  right: -18px; cursor: nesw-resize; }
  .thumb-resize-handle.sw { bottom: -18px; left: -18px; cursor: nesw-resize; }
  .thumb-resize-handle.se { bottom: -18px; right: -18px; cursor: nwse-resize; }
  .thumb-resize-handle:hover { transform: scale(1.2); }

  /* Game preset chips */
  .game-cat { font: 600 9.5px/1 'Kanit'; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 10px 2px 6px; }
  .game-cat:first-child { margin-top: 4px; }
  .game-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .game-chip {
    position: relative; aspect-ratio: 1; border-radius: 6px;
    background: var(--card) center/cover no-repeat; border: 1px solid var(--border);
    cursor: pointer; overflow: hidden; transition: transform .12s, border-color .12s, box-shadow .12s;
  }
  .game-chip .chip-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .game-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
  .game-chip.active { border-color: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent-bright), 0 0 10px rgba(0,214,252,.4); }
  .game-chip .label {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.82) 65%);
    color: #fff; font: 600 7px/1.1 'Kanit'; letter-spacing: .04em; text-transform: uppercase;
    padding: 10px 2px 3px; text-align: center;
  }
  .game-chip .saved-dot {
    position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
    background: var(--accent-bright); border: 1px solid #0a1220; border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,214,252,.7); display: none;
  }
  .game-chip.has-saved .saved-dot { display: block; }
  .save-to-game-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; margin-top: 6px; }
  .save-to-game-row .ghost.danger { color: #ff8b6d; border-color: rgba(246,82,33,.4); }
  .save-to-game-row .ghost.danger:hover { background: rgba(246,82,33,.1); color: #ff6f4a; }

  /* ===================== Assets tab (ported from marketing-assets) ===================== */
  /* All selectors are scoped under .is-assets or .assets-* so they can't leak into the
     Thumbnails/Marketing tabs. The colour palette is mapped from the standalone build
     (orange-primary, teal-secondary) onto the studio's teal accent so the tab feels native. */
  .is-assets { background: radial-gradient(900px 500px at 80% -10%, rgba(0,172,203,0.08), transparent 60%), var(--bg); }
  .is-assets a { color: var(--accent-bright); text-decoration: none; }
  .is-assets a:hover { color: var(--accent); }

  .assets-intro-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .assets-drive-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    background: linear-gradient(180deg, var(--accent), var(--accent-deep));
    color: #fff; font: 600 11px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase;
    border-radius: 10px; border: 1px solid var(--accent);
    transition: box-shadow .15s, transform .15s;
  }
  .assets-drive-cta:hover { color: #fff; box-shadow: 0 0 18px rgba(0,214,252,.5); transform: translateY(-1px); }

  .assets-view { flex: 1; padding: 20px 28px 40px; max-width: 1500px; width: 100%; margin: 0 auto; }
  .assets-footer {
    padding: 16px 28px;
    border-top: 1px solid var(--border);
    color: var(--muted); font-size: 12px;
    display: flex; justify-content: center; align-items: center; gap: 10px;
    flex-wrap: wrap;
  }
  .assets-footer .sep { color: rgba(255,255,255,.18); }

  /* Landing */
  .assets-intro {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 16px 0 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .assets-intro h1 {
    font: 700 22px/1.1 'Kanit'; margin: 0;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--accent-bright);
  }
  .assets-intro-stat {
    flex-shrink: 0;
    font: 600 11px/1 'Kanit'; color: var(--muted);
    text-transform: uppercase; letter-spacing: .16em;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(0, 172, 203, 0.08);
    border: 1px solid rgba(0, 172, 203, 0.25);
  }
  .assets-intro-stat strong { color: var(--accent-bright); font-size: 14px; margin-right: 2px; }
  .assets-intro-stat .dot { color: rgba(255,255,255,.18); }

  /* Featured + shared chips */
  .assets-featured-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
  .assets-featured-card {
    display: flex; align-items: center; gap: 12px;
    width: 320px; padding: 10px 16px 10px 10px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; color: inherit;
    transition: transform .18s, border-color .18s, box-shadow .18s;
  }
  .assets-featured-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,172,203,.22); color: inherit; }
  .assets-featured-card-hero {
    flex: 0 0 88px; aspect-ratio: 1;
    background: var(--bg-2); border-radius: 8px; overflow: hidden;
  }
  .assets-featured-card-hero img { width: 100%; height: 100%; object-fit: cover; }
  .assets-featured-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .assets-featured-card-eyebrow { font: 600 10px/1 'Kanit'; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-bright); }
  .assets-featured-card-name { font: 600 16px/1.1 'Kanit'; margin: 0; }
  .assets-featured-card-tag { color: var(--muted); font-size: 12px; margin: 2px 0 0; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .assets-shared-strip {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 14px; margin-bottom: 28px;
    background: linear-gradient(180deg, rgba(0,172,203,.04), transparent);
    border: 1px solid var(--border); border-radius: 16px;
  }
  .assets-shared-label { font: 600 12px/1 'Kanit'; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; align-self: center; margin-right: 6px; }
  .assets-shared-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--border);
    color: var(--fg); font-weight: 500; font-size: 12.5px;
    cursor: pointer; transition: all .15s;
  }
  .assets-shared-chip:hover { border-color: var(--accent); background: var(--card-hover); color: var(--accent-bright); }
  .assets-shared-chip .count { color: var(--muted); font-size: 11px; }

  /* Games grid. Square corners + tight gap to differentiate visually
     from the Game Demos tab's iframe-embedded rounded cards. */
  .assets-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .assets-game-card {
    position: relative; background: var(--card); border: 1px solid var(--border);
    overflow: hidden; cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    display: flex; flex-direction: column;
    color: inherit;
  }
  .assets-game-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 40px rgba(0,172,203,.22); color: inherit; }
  .assets-game-card-hero { aspect-ratio: 625 / 227; background: var(--bg-2); overflow: hidden; position: relative; }
  .assets-game-card-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
  .assets-game-card-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,172,203,.18) 0%, transparent 35%, rgba(7,13,22,.6) 100%);
    pointer-events: none; z-index: 1;
    transition: opacity .3s;
  }
  .assets-game-card-hero::after {
    content: '◆  Marketing Assets';
    position: absolute; bottom: 10px; left: 12px;
    font: 600 10.5px/1 'Kanit'; letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent-bright); text-shadow: 0 1px 6px rgba(0,0,0,.75);
    z-index: 2; pointer-events: none;
  }
  .assets-game-card:hover .assets-game-card-hero::before { opacity: 0.7; }
  .assets-game-card:hover .assets-game-card-hero img { transform: scale(1.04); }
  .assets-game-card-hero.placeholder { display: grid; place-items: center; color: var(--muted); font: 500 16px/1 'Kanit'; }
  .assets-game-card-body { padding: 13px 16px 16px; }
  .assets-game-card-name { font: 600 16px/1.2 'Kanit'; margin: 0 0 6px; }
  .assets-game-total { font: 500 11px/1 'Kanit'; color: var(--muted); letter-spacing: .04em; }

  /* Game detail */
  .assets-back-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px 9px 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; color: var(--fg);
    font: 600 12px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: 22px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
  }
  .assets-back-link:hover { border-color: var(--accent); background: var(--card-hover); color: var(--accent-bright); transform: translateX(-2px); }
  .assets-back-link::before { content: '←'; font-size: 14px; line-height: 1; }
  .assets-detail-head { display: grid; grid-template-columns: 460px 1fr; gap: 32px; align-items: center; margin-bottom: 36px; }
  .assets-detail-hero {
    aspect-ratio: 625 / 227; background: var(--bg-2);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }
  .assets-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
  .assets-detail-hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,172,203,.18) 0%, transparent 35%, rgba(7,13,22,.6) 100%);
    pointer-events: none;
  }
  .assets-detail-hero::after {
    content: '◆  Marketing Assets';
    position: absolute; bottom: 12px; left: 14px;
    font: 600 11.5px/1 'Kanit'; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent-bright); text-shadow: 0 1px 6px rgba(0,0,0,.75);
    pointer-events: none;
  }
  .assets-detail-hero.placeholder { display: grid; place-items: center; font: 500 22px/1 'Kanit'; color: var(--muted); }
  .assets-detail-info { display: flex; flex-direction: column; gap: 14px; }
  .assets-detail-info h1 { font: 700 40px/1.05 'Kanit'; margin: 0; letter-spacing: -0.4px; }
  .assets-detail-stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 8px; }
  .assets-detail-stats .stat { color: var(--muted); font-size: 13px; }
  .assets-detail-stats .stat strong { color: var(--fg); margin-right: 4px; }
  .assets-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 10px;
    background: linear-gradient(180deg, var(--accent), var(--accent-deep));
    color: #fff; font: 600 12px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid var(--accent);
    transition: box-shadow .15s, transform .15s;
    align-self: flex-start;
  }
  .assets-btn:hover { color: #fff; box-shadow: 0 0 18px rgba(0,214,252,.5); transform: translateY(-1px); }

  .assets-category { margin-bottom: 36px; }
  .assets-category-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .assets-category-head h2 { font: 600 20px/1 'Kanit'; margin: 0; letter-spacing: .02em; }
  .assets-category-head .count { color: var(--muted); font: 600 11px/1 'Kanit'; text-transform: uppercase; letter-spacing: .14em; }

  .assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .assets-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: all .15s; }
  .assets-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,172,203,.15); }
  .assets-thumb { aspect-ratio: 1; background: var(--bg-2); display: grid; place-items: center; overflow: hidden; position: relative; }
  .assets-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
  .assets-thumb.no-preview {
    background: linear-gradient(135deg, var(--bg-2), #0a1620);
    color: var(--muted); font-size: 13px; padding: 14px; text-align: center;
  }
  .assets-thumb.no-preview .ext { font: 700 26px/1 'Kanit'; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
  .assets-name { padding: 8px 12px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--border); }

  .assets-download {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(7,13,22,.78); backdrop-filter: blur(6px);
    border: 1px solid rgba(208,242,255,.18);
    color: var(--accent-bright);
    display: grid; place-items: center;
    opacity: 0; transform: translateY(-4px);
    transition: opacity .18s, transform .18s, background .15s, color .15s;
    z-index: 5;
  }
  .assets-download svg { width: 14px; height: 14px; }
  .assets-card:hover .assets-download { opacity: 1; transform: translateY(0); }
  .assets-download:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,172,203,.35); }

  .assets-empty { padding: 60px 20px; text-align: center; color: var(--muted); font-style: italic; }

  /* Dev warnings (only visible when body.dev-mode) */
  .assets-warn-badge {
    display: none;
    position: absolute; top: 8px; right: 8px;
    font: 700 11px/1 'Kanit'; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 999px;
    background: var(--warm); color: #fff;
    box-shadow: 0 3px 10px rgba(246, 82, 33, 0.45);
    z-index: 3;
  }
  body.dev-mode .assets-warn-badge { display: inline-flex; }
  .assets-warn-panel {
    display: none;
    margin: 0 0 24px; padding: 14px 18px;
    background: rgba(246, 82, 33, 0.08);
    border: 1px solid rgba(246, 82, 33, 0.35);
    border-radius: 12px;
  }
  .assets-warn-panel.ok { background: rgba(0, 172, 203, 0.06); border-color: rgba(0, 172, 203, 0.3); color: var(--accent-bright); padding: 11px 16px; }
  body.dev-mode .assets-warn-panel { display: block; }
  .assets-warn-head { font: 600 13px/1.3 'Kanit'; color: var(--warm); margin-bottom: 6px; }
  .assets-warn-sub { color: var(--muted); font-weight: 500; font-size: 12px; }
  .assets-warn-list { margin: 0; padding-left: 20px; }
  .assets-warn-list li { margin: 4px 0; font-size: 13px; }
  .assets-warn-list strong { color: var(--fg); }

  /* Shared detail */
  .assets-shared-detail h1 { font: 700 30px/1.1 'Kanit'; margin: 0 0 6px; }
  .assets-shared-desc { color: var(--muted); max-width: 640px; margin: 8px 0 4px; }
  .assets-shared-meta { color: var(--muted); margin-bottom: 22px; font-size: 12.5px; }

  .assets-bundle-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 20px;
    background: linear-gradient(180deg, var(--accent), var(--accent-deep));
    color: #fff; font: 600 12px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase;
    border-radius: 999px; border: 1px solid var(--accent);
    box-shadow: 0 8px 26px rgba(0,172,203,.3);
    transition: all .18s;
    margin: 8px 0 22px;
  }
  .assets-bundle-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,172,203,.45); }
  .assets-bundle-btn svg { flex: 0 0 14px; }
  .assets-bundle-btn .meta { margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85); font-size: 11px; letter-spacing: .04em; }

  .assets-doc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 22px 0; }
  .assets-doc-item { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; transition: all .15s; color: inherit; }
  .assets-doc-item:hover { border-color: var(--accent); background: var(--card-hover); color: inherit; }
  .assets-doc-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(0,172,203,.12); display: grid; place-items: center; color: var(--accent-bright); font: 700 12px/1 'Kanit'; }
  .assets-doc-name { font-weight: 600; font-size: 13px; }
  .assets-doc-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }

  /* Lightbox */
  .assets-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(3,7,13,.94); backdrop-filter: blur(8px); display: flex; flex-direction: column; }
  .assets-lightbox[hidden] { display: none; }
  .alb-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 60px 80px 20px; }
  .alb-stage img, .alb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .alb-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--fg); font-size: 18px; cursor: pointer; transition: all .15s; }
  .alb-close:hover { background: rgba(255,255,255,.12); border-color: var(--accent); }
  .alb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--fg); font-size: 28px; line-height: 1; cursor: pointer; transition: all .15s; }
  .alb-nav:hover { background: rgba(0,172,203,.2); border-color: var(--accent); }
  .alb-prev { left: 20px; }
  .alb-next { right: 20px; }
  .alb-caption { padding: 16px 28px 22px; background: linear-gradient(180deg, transparent, rgba(7,13,22,.9)); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .alb-name { font: 600 16px/1.2 'Kanit'; color: var(--fg); }
  .alb-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
  .alb-actions { display: flex; gap: 10px; }
  .alb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--fg); font: 600 12px/1 'Kanit'; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: all .15s; }
  .alb-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
  .alb-btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: #fff; border-color: var(--accent); }
  .alb-btn-primary:hover { color: #fff; box-shadow: 0 6px 20px rgba(0,172,203,.3); }

  @media (max-width: 900px) {
    .assets-detail-head { grid-template-columns: 1fr; gap: 20px; }
    .assets-detail-hero { max-width: 600px; }
  }
  @media (max-width: 720px) {
    .assets-topbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
    .assets-search { order: 3; flex-basis: 100%; max-width: 100%; }
    .assets-view { padding: 20px 14px 36px; }
    .assets-intro h1 { font-size: 28px; }
    .assets-detail-info h1 { font-size: 28px; }
    .alb-stage { padding: 60px 16px 16px; }
  }

  /* Logo list (Solidicon Logos shared page) */
  .logo-list-head h1 { font: 700 30px/1.1 'Kanit'; margin: 0 0 6px; }
  .logo-list-sub { color: var(--muted); margin: 0 0 22px; font-size: 13px; max-width: 640px; }

  .logo-list-controls {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .logo-list-size { display: flex; align-items: center; gap: 6px; font: 600 12px/1 'Kanit'; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .logo-list-size input {
    width: 82px;
    padding: 8px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--fg);
    font: 500 14px/1 'Bai Jamjuree', system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
  }
  .logo-list-size input::placeholder { color: var(--muted); opacity: .6; }
  .logo-list-size input:focus { outline: none; border-color: var(--accent); }
  .logo-list-size .unit { color: var(--muted); font-size: 11px; margin-left: 2px; }
  .logo-list-presets { display: flex; flex-wrap: wrap; gap: 6px; }
  .logo-list-hint { flex-basis: 100%; margin: 0; font-size: 11.5px; color: var(--muted); }
  .logo-list-hint b { color: var(--fg); font-weight: 600; }

  .logo-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .logo-chip {
    padding: 7px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg);
    font: 500 12px/1 'Kanit'; letter-spacing: .04em;
    cursor: pointer;
    transition: all .15s;
  }
  .logo-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-bright); }
  .logo-chip.active { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: #fff; border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,172,203,.25); }
  .logo-chip:disabled { opacity: .35; cursor: not-allowed; }

  .logo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .logo-list-row {
    display: grid;
    grid-template-columns: 112px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .15s, background .15s;
  }
  .logo-list-row:hover { border-color: rgba(0,172,203,.35); background: var(--card-hover); }
  .logo-list-thumb {
    width: 112px; height: 112px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    transition: background .2s;
  }
  .logo-list-thumb[data-bg="transparent"] {
    background:
      linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%),
      linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%),
      rgba(255,255,255,.02);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
  }
  .logo-list-thumb[data-bg="light"] { background: #f7f8fa; }
  .logo-list-thumb[data-bg="dark"]  { background: #0b1220; }
  .logo-list-thumb img { max-width: 84%; max-height: 84%; width: auto; height: auto; display: block; }
  .logo-list-meta { min-width: 0; }
  .logo-list-title { font: 600 14px/1.2 'Kanit'; color: var(--fg); }
  .logo-list-color { color: var(--muted); font-weight: 500; text-transform: capitalize; margin-left: 4px; }
  .logo-list-desc { color: var(--muted); font-size: 12px; margin-top: 2px; }

  .logo-list-actions { display: flex; gap: 8px; }
  .logo-btn {
    min-width: 68px;
    padding: 9px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--fg);
    font: 600 11px/1 'Kanit'; letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
  }
  .logo-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-bright); }
  .logo-btn:disabled { opacity: .55; cursor: wait; }
  .logo-btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: #fff; border-color: var(--accent); }
  .logo-btn-primary:hover:not(:disabled) { color: #fff; box-shadow: 0 6px 20px rgba(0,172,203,.3); transform: translateY(-1px); }

  @media (max-width: 640px) {
    .logo-list-controls { gap: 12px; }
    .logo-list-row { grid-template-columns: 72px 1fr; }
    .logo-list-row .logo-list-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .logo-list-thumb { width: 72px; height: 72px; }
  }