* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

    body {
      background-color: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      overflow-x: hidden;
      min-height: 100vh;
      min-height: 100dvh;
      width: 100%;
      max-width: 100%;
      transition: background-color 0.3s, color 0.3s;
    }

    .app-container {
      display: grid;
      grid-template-columns: 1fr 400px;
height: 100vh;
      height: 100dvh;
      width: 100%;
    }
    .sidebar-toggle { display: none; }

    @media (max-width: 1180px) {
      .app-container {
        grid-template-columns: 1fr;
        height: auto;
        width: 100%;
        max-width: 100%;
      }
      .sidebar {
        height: auto;
        border-left: none;
        border-top: 1px solid var(--border);
        width: 100%;
        box-sizing: border-box;
      }
      .preview-header { padding: 40px 40px 16px; }
      .site-nav { gap: 16px; font-size: 8px; letter-spacing: 0.15em; }
      .preview-content { padding: 48px 60px 100px; }

      .sidebar-toggle {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 20;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 44px;
        padding: 10px 15px;
        border: 1px solid var(--fg);
        border-radius: 99px;
        background: var(--fg);
        color: var(--bg);
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        font: 700 12px var(--font-body);
        cursor: pointer;
      }
      .sidebar-toggle-icon { font-size: 18px; line-height: 12px; }
      .sidebar-collapsed .sidebar { display: none; }
      .sidebar-collapsed .preview-area { min-height: 100vh; min-height: 100dvh; }
      .sidebar-collapsed .preview-content { min-height: calc(100vh - 120px); min-height: calc(100dvh - 120px); }
    }

    @media (max-width: 768px) {
      .preview-area { padding: 0; min-height: 100vh; min-height: 100dvh; }
      .preview-header { padding: 24px 20px; }
      .preview-content {
        padding: 48px 20px 60px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 120px);
        min-height: calc(100dvh - 120px);
      }
      .art-wrapper { 
        margin: 20px auto !important; 
      }
    }

    /* Snapshot Mode Overrides */
    body.snapshot-active {
      overflow: hidden;
      background-color: white !important;
    }

    body.snapshot-active .sidebar,
    body.snapshot-active .preview-header,
    body.snapshot-active .screenshot-btn,
    body.snapshot-active .vision-toggle {
      display: none !important;
    }

    body.snapshot-active .sidebar-toggle { display: none !important; }

    body.snapshot-active .app-container {
      grid-template-columns: 1fr;
      height: 100vh;
      height: 100dvh;
      width: 100vw;
    }

    body.snapshot-active .preview-area {
      height: 100vh;
      height: 100dvh;
      background: white !important;
      cursor: pointer;
    }

    body.snapshot-active .preview-content {
      padding: 0;
      height: 100vh;
      height: 100dvh;
      width: 100vw;
    }

    .snapshot-hint {
      display: none;
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 10px 20px;
      border-radius: 99px;
      font-size: 13px;
      font-weight: 600;
      z-index: 10001;
      pointer-events: none;
    }

    body.snapshot-active .snapshot-hint {
      display: block;
    }

    /* Preview Area */
    .preview-area {
      display: flex;
      flex-direction: column;
      background: var(--bg);
      position: relative;
      overflow-y: auto;
      min-height: 500px;
      -webkit-overflow-scrolling: touch;
      transition: background-color 0.3s;
    }

    .preview-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 40px 100px;
      min-height: min-content;
      width: 100%;
      position: relative;
    }

    .preview-header {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      padding: 32px 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      z-index: 10;
      transition: background-color 0.3s;
      background: var(--bg);
    }

    .site-logo-link {
      display: inline-block;
      text-decoration: none;
    }

    .site-logo {
      height: 50px;
      width: auto;
      transition: filter 0.3s;
    }

    [data-theme='dark'] .site-logo {
      filter: invert(1) brightness(1.5);
    }

    .art-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      margin: auto;
      flex-shrink: 0;
      z-index: 2;
      /* Size the wrapper to the actual panel grid, not the full preview column. */
      width: fit-content;
      max-width: 100%;
    }

    .art-wrapper.vertical-boost {
      margin: 5vh auto; /* Adjusted as requested */
    }

    /* Epic Panel Logic */
    .epic-grid {
      display: grid;
      gap: var(--epic-gap-px);
      width: auto;
      height: auto;
      grid-template-columns: repeat(var(--cols), var(--panel-width-px));
      grid-template-rows: repeat(var(--rows), var(--panel-height-px));
      background: transparent;
    }

    .epic-panel {
      position: relative;
      overflow: hidden;
      background: var(--bg);
    }

    .epic-panel img {
      position: absolute;
      /* Width and height are supplied by epic-preview-gap-shared.css so the
         artwork spans all visible panel gaps without exposing the background. */
      object-fit: fill;
      max-width: none;
      max-height: none;
      left: calc(var(--col-idx) * -1 * (var(--panel-width-px) + var(--epic-gap-px)));
      top: calc(var(--row-idx) * -1 * (var(--panel-height-px) + var(--epic-gap-px)));
      transform: scale(1.002);
    }

    .preview-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 400px;
      background: var(--bg);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-align: center;
    }

    .section-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--fg); display: flex; align-items: center; gap: 8px; }
    .step-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .step-heading { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); display: flex; align-items: center; gap: 8px; }

    .select-group label {
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 4px;
      display: block;
    }

    .layout-section {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--surface) 72%, var(--bg));
    }

    .layout-section + .layout-section { margin-top: 4px; }

    .tab-btn.custom-active {
      background: var(--dark-brown);
      color: #fff;
      border-color: var(--dark-brown);
    }

    .tab-btn.custom-active:disabled {
      background: var(--dark-brown);
      color: #fff;
      border-color: var(--dark-brown);
      opacity: 1;
    }

    .search-option.selected { background: var(--bg); font-weight: 600; color: var(--accent); }
    .search-option.highlighted { background: rgba(0, 145, 255, 0.15); font-weight: 600; }

    .vision-toggle { position: relative; display: flex; background: var(--bg); padding: 2px; border-radius: 99px; border: 1px solid var(--border); width: 140px; height: 36px; }
    .vision-btn { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-radius: 99px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; transition: color 0.3s; }
    .vision-btn.active { color: var(--fg); }
    .vision-slider { position: absolute; top: 2px; left: 2px; width: calc(50% - 2px); height: calc(100% - 4px); background: var(--surface); border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
    [data-theme='dark'] .vision-slider { transform: translateX(100%); }

    .snapshot-hint { display: none; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 99px; font-size: 13px; font-weight: 600; z-index: 10001; pointer-events: none; }
    body.snapshot-active .snapshot-hint { display: block; }

    .standard-epic-edition .upload-area,
    .standard-epic-edition .vision-toggle,
    .standard-epic-edition .sidebar-toggle,
    /* Hide only the Step 1 Epic Format switch. Standard Special Layout has
       its own compact orientation control and must remain visible. */
    .standard-epic-edition .select-group:not(.layout-section):has(> .orientation-toggle) { display: none !important; }

    .login-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
    .login-box { width: min(440px, 100%); padding: 60px 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; text-align: center; box-shadow: 0 50px 100px -20px rgba(0,0,0,.4); }
    .login-box img { height: 48px; width: auto; margin-bottom: 32px; }
    .login-box h1 { margin: 0 0 8px; font-size: 16px; letter-spacing: .24em; }
    .login-box p { margin: 0 0 24px; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
    .login-form { display: grid; gap: 16px; }
    .login-form input { width: 100%; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--fg); font: 16px var(--font-mono); text-align: center; letter-spacing: .1em; outline: none; }
    .login-form button { width: 100%; padding: 20px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
    .login-error { min-height: 16px; margin-top: 12px; color: var(--danger); font-size: 11px; }
    .builder-switch-fixed { display: none; position: fixed; top: 24px; right: 24px; z-index: 10001; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font: 700 10px var(--font-mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
    body.standard-authenticated .builder-switch-fixed { display: inline-flex; }
    .builder-switch-fixed:hover { border-color: var(--accent); color: var(--accent); }
    .standard-logout { display: none; position: fixed; top: 24px; right: 130px; z-index: 10001; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font: 700 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
    body.standard-authenticated .standard-logout { display: inline-flex; }
    .standard-logout:hover { border-color: var(--accent); color: var(--accent); }
    @media (max-width: 480px) { .login-box { padding: 40px 24px; } .standard-logout { top: 68px; right: 24px; } }

    .orient-btn { flex: 1; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 600; color: var(--fg); transition: all 0.2s; }
    .orient-btn.active { background: color-mix(in srgb, var(--accent) 72%, white); color: #fff; border-color: var(--accent); }
    .orient-btn:disabled { opacity: 0.3; cursor: not-allowed; background-color: var(--bg); filter: grayscale(1); }
    .orientation-toggle { display: flex; gap: 6px; }
    .compact-orientation-toggle { width: 85%; max-width: none; margin-inline: auto; justify-content: center; }
     .range-group { display: flex; flex-direction: column; gap: 8px; }
    .range-group input { width: 100%; cursor: pointer; }
    .range-header { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); }

    /* Synced Custom Panel Sizing controls: shared with the full Epic Builder. */
    .panoramic-layout-section .tab-btn.custom-active,
    .panoramic-layout-section .tab-btn.custom-active:disabled {
      background: var(--dark-brown) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff;
      border-color: var(--dark-brown) !important;
      opacity: 1 !important;
      filter: none !important;
      text-shadow: none;
    }
    .custom-input-group {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
      gap: 8px;
      margin-top: 8px;
      width: 100%;
      min-width: 0;
    }
    .custom-input-group .full-width,
    .custom-input-heading,
    .calculated-panel-dims { grid-column: 1 / -1; min-width: 0; }
    .custom-input-heading {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      overflow-wrap: anywhere;
    }
    .custom-input-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .custom-input-field label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
    .custom-input-field input {
      width: 100%; min-width: 0; box-sizing: border-box;
      padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
      background: var(--surface); color: var(--fg); font-family: var(--font-body);
      font-size: 14px; font-weight: 600; outline: none; transition: all 0.2s;
    }
    .custom-input-field input:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
    .calculated-panel-dims {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--surface) 78%, var(--bg));
      min-width: 0;
    }
    .calculated-panel-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
    .calculated-panel-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 88px), 1fr));
      gap: 6px;
      min-width: 0;
    }
    .calculated-panel-list span {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 12px;
      font-weight: 700;
      color: var(--fg);
    }
    .custom-sizing-mode {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      min-width: 0;
    }
    .custom-sizing-mode button,
    .restore-ratio-btn {
      min-width: 0;
      padding: 9px 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--muted);
      font: 700 10px var(--font-body);
      letter-spacing: .08em;
      cursor: pointer;
      overflow-wrap: anywhere;
    }
    .custom-sizing-mode button.active {
      border-color: var(--dark-brown);
      background: var(--dark-brown);
      color: #fff;
    }
    .custom-total-lock {
      grid-column: 1 / -1;
      display: flex !important;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--surface) 78%, var(--bg));
      color: var(--fg);
      font-size: 11px;
      font-weight: 700;
      min-width: 0;
    }
    .custom-total-lock input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--dark-brown); }
    .custom-total-lock span { display: block; flex: 1 1 auto; min-width: 0; padding-left: 2px; line-height: 1.25; }
    .custom-panel-editor {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--surface) 78%, var(--bg));
    }
    .individual-panel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
      gap: 8px;
      min-width: 0;
    }
    .restore-sizing-actions {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      min-width: 0;
    }
    .restore-sizing-actions .restore-ratio-btn,
    .restore-default-layout-btn {
      width: 100%;
      min-width: 0;
      padding: 9px 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--fg);
      font: 700 10px var(--font-body);
      letter-spacing: .08em;
      cursor: pointer;
      overflow-wrap: anywhere;
    }
    .restore-sizing-actions .restore-ratio-btn:hover { border-color: var(--dark-brown); color: var(--dark-brown); }
    .restore-default-layout-btn { border-color: var(--accent); color: var(--accent); }
    .restore-default-layout-btn:hover { background: var(--accent); color: #fff; }
    @media (max-width: 420px) {
      .custom-input-group { grid-template-columns: 1fr; }
      .calculated-panel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .restore-sizing-actions { grid-template-columns: 1fr; }
    }