/* ╔════════════════════════════════════════════════════════════════════╗
   ║  0) THEME VARIABLES                                               ║
   ╚════════════════════════════════════════════════════════════════════╝ */
   :root{
    --pager-h: 64px;         /* actual height of the pager */
    --pager-gap: 6px;       /* room above the pager */
  }

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  1) GLOBAL RESET / BASE                                           ║
   ╚════════════════════════════════════════════════════════════════════╝ */
   *{ box-sizing: border-box; }
   *,
   *::before,
   *::after { box-sizing: border-box; }

   html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
   }

    body {
        margin: 10;
        display: flex;
        font-family: 'Montserrat', sans-serif;
        background: #0e0e0e;
        color: #f1f1f1;
        min-height: 100vh;
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }


    /* Page Title */
    .page-title{
        width: 100%;
        display: block;
        text-align: center;
        font-size: clamp(2.2rem, 4.5vw, 3.2rem);
        font-weight: 900;
        margin: 20px auto 20px;
        letter-spacing: 1.2px;
        background: linear-gradient(90deg, #00ffe0, #ff66cc);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 25px rgba(0,255,255,.35);
      }


    /* Main 3-column workspace */
    .workspace-layout{
        margin: 0 auto;
        width: 100%;
        max-width: 1800px;
        padding: 0 16px;
        display: flex;
        justify-content: center;
        grid-template-columns: minmax(260px, 320) 1fr minmax(280px, 420px);
        gap: 16px;
        align-items: flex-start;
    }


/* ╔════════════════════════════════════════════════════════════════════╗
   ║  2) LEFT PANEL (controls)                                         ║
   ╚════════════════════════════════════════════════════════════════════╝ */
       .left-panel{
        flex: 0 0 300px;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 18px;
        background: #161616;
        border-radius: 12px;
        border: 2px solid #2a2a2a;
        box-shadow: 0 0 18px rgba(0,255,255,0.08);
        min-width: 0;
        width: 100%;
      }


    /* Control cards inside left panel */
    .model-card{
        background: #1e1e1e;
        padding: 14px;
        margin-bottom: 12px;
        border: 1px solid #333;
        border-radius: 10px;
        box-shadow: 0 0 12px rgba(0,0,0,0.45);
    }

    /* “Generation Options” */
    .model-card--compact{ padding: 12px; border-radius: 10px; gap: 10px; }
    .model-card--compact .card-header h3{ font-size: 1rem; letter-spacing: .2px; }
    .model-card--compact .form-field{ gap: 6px; margin-bottom: 8px; }


    .card-header{
    display: flex; align-items: center; justify-content: space-between;
    }
    .card-header h3{ margin: 0; color: #00ffff; font-weight: 700; }

    /* Upload button in card header */
    .upload-btn {
        background: #00ffff;
        color: #000; border: 0;
        padding: 8px 12px;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
    }

    .upload-btn:hover {
        filter: brightness(.9);
    }

    /* Tabs */
    .generator-tabs{ display: flex; gap: 8px; }
    .tab-btn{
    flex: 1; padding: 10px 12px; border: 0; border-radius: 10px;
    background: #252525; color: #bbb; cursor: pointer; font-weight: 700;
    }

    .tab-btn.active{ background: #00ffff; color: #000; }
    .tab-content{ display: none; }
    .tab-content.active{ display: block; }
    .tab-content.hidden{ display: none !important; }

    /* Inputs */
    .form-field{ display: flex; flex-direction: column; gap: 8px; width: 100%; }
    label{ color: #cfcfcf; font-size: .95rem; font-weight: 600; }

    textarea, input[type="text"]{
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #333; border-radius: 10px;
        background: #1a1a1a; color: #fff;
        font-size: .95rem; font-family: 'Montserrat', sans-serif;
        margin-top: 5px; resize: none;
    }

    #promptInput{ height:170px; min-height:170px; line-height:1.45; }

    /* Simple native selects */
    #artStyle, #modelSelect{
        width: 100%; cursor: pointer; margin: 5px 0 10px;
        padding: 10px 12px; border-radius: 10px; border: 1px solid #333;
        background: #1a1a1a; color: #fff; font-size: .95rem; font-family: 'Montserrat', sans-serif;
    }

    /* Nice-Select (custom select UI) */
    .ns-hidden{ position: absolute !important; width:1px;
        height:1px; overflow:hidden;
        clip:rect(0 0 0 0); white-space:nowrap;
        border:0; padding:0; margin:0; }

    .nice-select{ position: relative; }

    .ns-control{
    width: 100%; display:flex; align-items:center; justify-content:space-between;
    background:#181818; border:1px solid #2e2e2e; border-radius:10px;
    padding:8px 12px; color:#eaeaea; font-weight:700; cursor:pointer;
    transition:border-color .2s, box-shadow .2s;
    }
    .ns-control:hover{ border-color:#3a3a3a; box-shadow:0 0 0 2px #00ffe022; }

    .ns-caret{ opacity:.8; }

    .ns-menu{
    position:absolute; left:0; right:0; top:calc(100% + 6px);
    background:#121212; border:1px solid #2a2a2a; border-radius:12px;
    padding:6px; list-style:none; margin:0; display:none; z-index:20;
    box-shadow:0 12px 28px rgba(0,0,0,.45);
    }
    .nice-select.open .ns-menu{ display:block; }
    .ns-menu li{ padding:8px 10px; border-radius:8px; cursor:pointer; color:#ddd; font-weight:600; }
    .ns-menu li[aria-selected="true"]{ background:#0f1d1d; color:#7afcff; }
    .ns-menu li:hover{ background:#1a1a1a; }
    
    /* File / image drops */
    .drop-box, .upload-drop-box{
        border:2px dashed #3a3a3a; border-radius:12px; padding:22px; text-align:center;
        color:#868686; background:#121212; cursor:pointer;
        transition:border-color .25s, color .25s, box-shadow .25s;
    }
    .drop-box:hover, .upload-drop-box:hover,
    .drop-box.dragover, .upload-drop-box.dragover{
        border-color:#00ffff; color:#00ffff; box-shadow:0 0 16px #00ffff22;
    }
    .preview-img{ max-width:100%; max-height:140px; border-radius:8px; }

    /* Generate/footer bits */
    .meta-options{ display:flex; flex-direction:column; gap:10px; }
    .meta-row{ display:flex; justify-content:space-between; color:#9a9a9a; font-size:.9rem; }
    .btn-primary-generate{
    padding:12px; border:0; border-radius:12px; cursor:pointer; font-weight:800; color:#000;
    background: linear-gradient(90deg,#00ffe0,#ff66cc);
    transition: transform .2s, box-shadow .2s, filter .2s;
    }
    .btn-primary-generate:hover{ transform: translateY(-2px); box-shadow:0 0 14px rgba(0,255,255,.35); }
    .btn-primary-generate:disabled{ filter:grayscale(1); opacity:.6; cursor:not-allowed; }
    .input-hint{ color:#8d8d8d; }
    .hidden{ display:none !important; }

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  3) MIDDLE VIEWER (Three.js area)                                 ║
   ╚════════════════════════════════════════════════════════════════════╝ */
   .middle-viewer{
    flex: 1 1 720px;
    align-self: flex-start;
  
    display:flex;
    position:relative;
  
    width:100%; min-width:0; min-height:480px; height:76vh;
  
    background:#111;
    border:1px solid #2a2a2a; border-radius:12px;
    box-shadow:0 0 22px rgba(0,0,0,.45);
    }

    /* Canvas wrapper */
    .viewer-canvas-wrapper{
        position:relative; width:100%; height:100%;
        background:transparent !important; border:none !important; box-shadow:none !important;
    }
    #viewerCanvas{
        position:absolute; inset:0; width:100%; height:100%; display:block;
        border:1px solid #2a2a2a; border-radius:15px; box-shadow:0 0 22px rgba(0,0,0,.45);
        -webkit-tap-highlight-color: transparent; cursor: grab; z-index:2;
    }
    #viewerCanvas:active{ cursor: grabbing; }
    #viewerCanvas:focus{ outline: none !important; }
    
    /* Viewer overlays */
    #viewerPlaceholder{
        position:absolute; top:20%; left:50%; transform:translate(-50%,-50%);
        color:#9a9a9a; font-style:italic; text-align:center; z-index:2; pointer-events:none;
    }
    #loader{
        position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        color:#00ffff; font-size:.95rem; z-index:2; display:none; pointer-events:none;
    }
    
    /* Viewer mini menu (auto-rotate etc.) */
    .viewer-switcher{
        position:absolute; top:10px; right:10px; z-index:5;
        display:flex; flex-direction:column; align-items:flex-end; gap:6px;
    }
    .viewer-switcher button{
        background:#1e1e1e; color:#fff; border:1px solid #444; border-radius:8px; padding:6px 10px; cursor:pointer;
    }
    .viewer-menu{
        background:#1f1f1f; border:1px solid #444; padding:10px 12px; border-radius:10px; min-width:180px;
        box-shadow:0 8px 24px rgba(0,0,0,.35);
    }
    .viewer-menu.hidden{ display:none; }
    .viewer-menu .menu-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; color:#ddd; font-size:.95rem; }
    
    /* iOS-style toggle */
    .toggle{ position:relative; width:46px; height:26px; display:inline-block; }
    .toggle input{ display:none; }
    .toggle .slider{ position:absolute; inset:0; cursor:pointer; background:#3a3a3a; border-radius:999px; transition:.2s; }
    .toggle .slider:before{ content:""; position:absolute; width:22px; height:22px; left:2px; top:2px; background:#fff; border-radius:50%; transition:.2s; }
    .toggle input:checked + .slider{ background:#9cff3a; }
    .toggle input:checked + .slider:before{ transform:translateX(20px); }
    
    /* Debug helpers */
    .debug #viewerCanvas{ background-color:rgba(255,0,0,.3) !important; border:2px solid #00ff00 !important; z-index:10; }
    .debug .viewer-canvas-wrapper{ background-color:rgba(0,0,255,.2) !important; border:1px dashed yellow !important; }

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  4) UPLOAD MODAL                                                  ║
   ╚════════════════════════════════════════════════════════════════════╝ */
    .upload-modal{
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.65);
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s, visibility .25s;
      /* sit above the WebGL canvas */
      z-index: 9999;
    }
    .upload-modal.show{ opacity:1; visibility:visible; }
    
    .upload-modal-content{
      width: 420px;
      max-width: 90vw;
      position: relative;
      background: #1b1b1b;
      color: #fff;
      padding: 20px;
      border-radius: 14px;
      /*keep dialog above overlay in the same stacking context */
      z-index: 10000;
    }
    
    /* Prevent background scroll + clicks while modal open */
    body.modal-open{ overflow: hidden; }
    /* also block canvas interactions if needed */
    body.modal-open #viewerCanvas{ pointer-events: none; }
    .close-btn-upload{ position:absolute; top:10px; right:14px; font-size:1.6rem; color:#aaa; cursor:pointer; }
    .close-btn-upload:hover{ color:#00ffff; }
    .modal-footer{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
    .cancel-btn, .continue-btn{ padding:10px 14px; border:0; border-radius:10px; font-weight:700; cursor:pointer; }
    .cancel-btn{ background:#2a2a2a; color:#ccc; }
    .continue-btn{ background:linear-gradient(90deg,#ccff00,#ff66cc); color:#000; }

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  5) RIGHT PANEL: OUTPUT + HISTORY                                 ║
   ╚════════════════════════════════════════════════════════════════════╝ */
   /* Right column container (clean, no outer chrome) */
    .right-panel.compact{
        flex: 0 0 420px; max-width: 420px;
        align-self: flex-start;
        display:flex; flex-direction:column; gap:6px;
        background: transparent; border:0; box-shadow:none;
    }

    .right-panel {
        min-width: 0;
        width: 100%;
    }
    
    /* Output card */
    .output-card{ background:#1b1b1b; border:1px solid #2b2b2b; border-radius:12px; padding:14px; }
    .out-empty{ color:#9aa4a6; font-style:italic; padding:8px 2px; }
    
    .out-progress{ display:flex; flex-direction:column; gap:8px; }
    .out-progress.hidden{ display:none; }
    .out-progress-row{ display:flex; justify-content:space-between; color:#dfe3e6; font-weight:700; }
    .out-bar{ height:10px; border-radius:999px; background:#101417; border:1px solid #273139; overflow:hidden; }
    #outBarFill{ height:100%; width:0%; background:linear-gradient(90deg,#00ffe0,#7afcff); transition:width .25s ease; }
    
    .out-result{ display:flex; align-items:center; gap:12px; }
    .out-result.hidden{ display:none; }
    .out-thumb{ width:96px; height:96px; object-fit:cover; background:#111; border:1px solid #2a2a2a; border-radius:10px; }
    .out-meta{ display:flex; flex-direction:column; gap:8px; }
    .out-actions{ display:flex; gap:8px; flex-wrap:wrap; }
    .out-actions a{
        text-decoration:none;
        background:#262b2f; border:1px solid #36424a; color:#e8f1f3;
        padding:8px 12px; border-radius:10px; font-weight:800;
    }
    .out-actions a:hover{ filter:brightness(1.08); }
    .out-actions a.primary{ background:#00ffff; color:#001010; border-color:transparent; }
    
    .badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:#192126; border:1px solid #2b3a42; color:#bde8ff; font-size:.78rem; }
    .btn{ background:#262b2f; border:1px solid #36424a; color:#e8f1f3; font-weight:800; border-radius:10px; padding:8px 12px; cursor:pointer; }
    .btn:hover{ filter:brightness(1.08); }
    .btn-primary{ background:#00ffff; color:#000; border:0; }
    
    /* ── History panel container */
    .history-card{
        background:#121212; border:1px solid #262626; border-radius:14px; padding:12px;
        display:flex; flex-direction:column; gap:10px;
        max-height: calc(88vh - 140px);
        min-width: 0;
        overflow:auto;
        position:relative;
    }
    
    /* History toolbar */
    .history-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .history-search{ flex:1; background:#0f0f0f; border:1px solid #2c2c2c; color:#fff; border-radius:10px; padding:10px 12px; }
    .per-page{ display:flex; gap:8px; align-items:center; color:#9aa4a6; font-weight:600; }
    #historyPageSize{ width:90px; padding:8px 10px; background:#0f0f0f; color:#fff; border:1px solid #2c2c2c; border-radius:10px; font-weight:700; }
    
    /* History grid (responsive columns).*/
    .gallery-grid{
        display:grid;
        gap:10px;
        grid-template-columns: repeat(3, minmax(140px, 1fr));
        overflow: visible;       /* menus can overflow */
        max-height: none;
        min-width: 0;
        padding: 4px;
    }
    
    /* Reserve space for sticky pager */
    #historyGrid{
        position: relative;
        overflow: visible;
        padding-bottom: calc(var(--pager-h) + 6px) !important;
    }
    
    /* History card tiles */
    .gcard{
        position:relative; z-index:1;
        display:flex; flex-direction:column; justify-content:space-between;
        background: linear-gradient(180deg, #1a1a1a, #141414);
        border:1px solid #2a2a2a; border-radius:12px;
        transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
        overflow: visible; /* allow dropdown to escape the card */
        min-width: 0; max-width: 100%;
    }
    .gcard:hover{ transform: translateY(-2px); border-color:#3a3a3a; box-shadow:0  max-width: 100%;0 0 2px #00ffe022; z-index:40; }
    
    .gthumb{
        width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#0a0a0a;
        border-top-left-radius:12px; border-top-right-radius:12px;
        position:relative; z-index:1;
    }
    .gtitle{
        padding:8px 10px; color:#e9e9e9; font-weight:300; font-size:.8rem; line-height:1.2; min-height:42px;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    
    /* Hover veil (kept behind quick actions) */
    .ghover{
        position:absolute; inset:0; z-index:2; pointer-events:none;
        display:flex; flex-direction:column; justify-content:flex-end;
        background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75));
        opacity:0; transition: opacity .15s ease;
    }
    .gcard:hover .ghover{ opacity:1; }
    
    /* Date badge */
    .ghdr{
        position:absolute; top:6px; right:8px; z-index:3;
        color:#d4ff7a; font-size:.75rem; font-weight:800;
        background:#202b00; border:1px solid #2f3b00; padding:4px 8px; border-radius:999px;
    }
    
    /* Quick actions (Open + kebab) */
    .gquick{
        position:relative; left:12px; bottom:12px; z-index:50; pointer-events:auto;
        display:flex; align-items:center; gap:14px;
        opacity:0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease;
    }
    .gcard:hover .gquick{ opacity:1; transform: translateY(0); }
    
    /* Tiny “Open” button */
    .gbtn-xs{
        font: 600 13px/1.1 "Montserrat", system-ui, sans-serif;
        padding: 8px 12px; border-radius: 12px;
        background:#111; color:#eaeaea; border:1px solid #2a2a2a;
    }
    .gbtn-xs.primary{ background:#00e6e6; color:#001515; border-color:#00caca; }
    
    /* Kebab button */
    .gkebab{
        width:34px; height:34px; border-radius:10px;
        display:grid; place-items:center; font-size:18px; color:#ddd;
        background:#141414; border:1px solid #2a2a2a;
    }
    
/* Dropdown */
.gmenu-pop{
    position: absolute;
    top: calc(100% + 8px);
    right: 0; 
    left: auto;
  
    /* slimmer */
    min-width: 168px;
    max-width: 200px;
    padding: 6px;
  
    border-radius: 10px;
    background: rgba(18,18,18,.96);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
  
    display: none;
    opacity: 0;
  
    /* allow JS to nudge inside the panel via --tx */
    transform: translateX(var(--tx, 0)) scale(.98);
    transform-origin: top right;
    transition: opacity .12s ease, transform .12s ease;
  
    z-index: 50;
  }
  .gmenu-pop::before{content: ''; position: absolute; right: 22px; top: -6px; width: 12px; height: 12px;
    background: inherit; border-left: inherit; border-top: inherit; transform: rotate(45deg);}
  .gmenu-pop.open{
    display: block;
    opacity: 1;
    transform: translateX(var(--tx, 0)) scale(1);
  }
  

/* Flip horizontally when we overflow on the right */
.gmenu-pop.flip-left{ right: auto; left: 0; }
.gmenu-pop.flip-left::before{ right: auto; left: 22px; }
  
/* Flip vertically when there's no room below */
.gmenu-pop.flip-up{
    top: auto;
    bottom: calc(100% + 10px);
  }
  .gmenu-pop.flip-up::before{
    top: auto;
    bottom: -6px;                     /* move arrow under panel */
    transform: rotate(225deg);        /* flip arrow */
  }
  .gmenu-pop.flip-left.flip-up{
    transform-origin: bottom left;
  }
  
  .gmenu-pop.flip-left.flip-up::before{
    right:12px; left:auto;
  }
  
    /* Menu items (minimal) */
    .gmenu-pop .drop-item{
        display: block;
        width: 100%;
        padding: 10px 12px;
        border: 0;
        background: transparent;
        color: #eaeaea;
        font-size: .96rem;
        line-height: 1.15;
        border-radius: 10px;
        text-align: left;
        cursor: pointer;
    }
    .gmenu-pop .drop-item:hover{
        background: rgba(255,255,255,.06);
    }
  .gmenu-pop .drop-item:disabled{ opacity:.45; cursor:not-allowed; }
 
    
    /* (old inline action buttons style kept for completeness) */
    .gactions{ display:flex; gap:6px; padding:8px; }
    .gbtn{
        flex:1; text-align:center; padding:8px 10px; border-radius:10px;
        background:#1b1b1b; color:#eaeaea; border:1px solid #2d2d2d; font-weight:800; font-size:.8rem;
    }
    .gbtn.primary{ background:#00ffff; color:#000; border:0; }
    .gbtn:disabled{ opacity:.45; cursor:not-allowed; }
    
    /* Sticky pager inside History panel */
    .gallery-pager{
        position: sticky; bottom: 0; width: 100%; z-index: 1000;
        height: var(--pager-h) !important; margin-top: var(--pager-gap) !important;
        display:flex; align-items:center; justify-content:center; gap:10px;
        padding: 8px 14px !important; border-radius:12px;
        background: rgba(25,25,25,.72);
        backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
        border:1px solid rgba(255,255,255,.08);
        box-shadow: 0 3px 12px rgba(0,0,0,.3);
        box-sizing: border-box;
    }
    .gallery-pager .pager-btn{
        background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
        color:#fff; font-weight:700; font-size:1.05rem; padding:8px 16px; border-radius:12px; cursor:pointer;
        transition: background .2s, transform .15s;
    }
    .gallery-pager .pager-btn:hover{ background: rgba(0,255,255,.2); transform: translateY(-1px); }
    .gallery-pager .page-label{
        color:#ccc; font-size:1.1rem; font-weight:800; letter-spacing:.025em; min-width:56px; text-align:center;
    }


/* =========================
   Centered Fixed Footer
   ========================= */
   .site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 0;
    background: rgba(20, 20, 20, 0.85);
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    z-index: 2000; /* sits above content */
  }
  
  .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: #aaa;
  }
  
  .footer-logo {
    font-weight: 700;
    color: #00e0ff; /* neon cyan accent */
    transition: text-shadow 0.3s ease;
  }
  
  .footer-powered {
    color: #888;
  }
  
  .footer-powered b {
    color: #fff;
    font-weight: 600;
    transition: text-shadow 0.3s ease;
  }
  
  .footer-divider {
    color: rgba(255,255,255,0.25);
  }
  
  /* Hover glow */
  .footer-logo:hover,
  .footer-powered b:hover {
    text-shadow: 0 0 8px #00e0ff, 0 0 12px #00e0ff;
  }

/* ╔════════════════════════════════════════════════════════════════════╗
   ║  6) RESPONSIVE — compact, readable, and covers 320px → ultrawide   ║
   ╚════════════════════════════════════════════════════════════════════╝ */
/* --- Tiny phones (≤360px) --- */
@media (max-width:360px){
    .middle-viewer{ min-height:300px; height:52vh; }
    .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

/* ===== Phones / narrow (361–480px) ===== */
@media (min-width: 361px) and (max-width: 480px){
  .workspace-layout{ flex-direction: column; align-items: stretch; }
  .left-panel, .right-panel.compact{ width: 100%; flex: none; }
  .middle-viewer{ min-height: 360px; height: 58vh; }
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* Small phones (~≤480px) */
@media (max-width: 480px){
    .page-title{ font-size: clamp(22px, 6vw, 28px); }
    .middle-viewer{ min-height: 320px; }
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
    :root{ --pager-h: 56px; }
  }

/* ===== Large phones / small tablets (481–640px) ===== */
@media (min-width: 481px) and (max-width: 640px){
  .workspace-layout{ flex-direction: column; }
  .left-panel, .right-panel.compact{ width: 100%; }
  .middle-viewer{ min-height: 420px; height: 60vh; }
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===== Tablets portrait & small landscape (641–900px) ===== */
@media (min-width: 641px) and (max-width: 900px){
  .workspace-layout{ flex-direction: column; }
  .middle-viewer{ min-height: 480px; height: 62vh; }
  .right-panel.compact{ width: 100%; }
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Portrait tablets & big phones (~≤820px) */
@media (max-width: 820px){
    .workspace-layout{
      grid-template-columns: 1fr;
      grid-template-areas:
        "left"
        "middle"
        "right";
    }
    .left-panel, .middle-viewer, .right-panel{ width: 100%; }
    .middle-viewer{ min-height: 420px; }
    .gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
  }

/* ===== Tablets landscape / small laptops (901–1200px) ===== */
@media (min-width: 901px) and (max-width: 1200px){
  .workspace-layout{ flex-direction: row; align-items: flex-start; }
  .left-panel{ flex: 0 0 300px; }
  .middle-viewer{ flex: 1 1 auto; min-width: 520px; height: 70vh; }
  .right-panel.compact{ flex: 0 0 420px; max-width: 440px; }
  .gallery-grid{ grid-template-columns: repeat(3, minmax(140px,1fr)); }
}

/* ===== laptops / desktops (1201–1600px) ===== */
@media (min-width:1201px) and (max-width:1599px){
    .middle-viewer{ height:74vh; }
    .right-panel.compact{ flex:0 0 400px; max-width:400px; }
    .gallery-grid{ grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  }


/* Tablets / narrow laptops (~≤1024px) – right panel stacks under viewer */
@media (max-width: 1024px){
    .workspace-layout{
      grid-template-columns: 280px minmax(0, 1fr);
      grid-template-areas:
        "left middle"
        "left middle"
        "left right";
    }
    .left-panel{ grid-area: left; }
    .middle-viewer{ grid-area: middle; min-height: 480px; }
    .right-panel{ grid-area: right; }
  }

  /* Large laptops / small desktops (~≤1280px) */
@media (max-width: 1280px){
    .workspace-layout{
      grid-template-columns: 300px minmax(380px, 1fr) 360px;
      gap: 14px;
    }
    .gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); }
  }

/* ===== Large desktops / ultrawide (≥ 1601px) ===== */
@media (min-width:1600px){
    .middle-viewer{ height:80vh; min-width:760px; }
    .right-panel.compact{ flex:0 0 480px; max-width:480px; }
    .gallery-grid{ grid-template-columns: repeat(3, minmax(156px, 1fr)); }
  }

  /* ===== Nice extras that keep things tidy at all sizes ===== */
@media (min-width:901px) and (max-width:1200px){
    .left-panel{ flex:0 0 280px; }
    .middle-viewer{ flex:1 1 560px; min-width:520px; height:70vh; }
    .right-panel.compact{ flex:0 0 360px; max-width:360px; }
    .gallery-grid{ grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  }

  @media (min-width:641px) and (max-width:900px){
    .workspace-layout{ flex-direction:column; }
    .left-panel, .right-panel.compact{ width:100%; flex:none; }
    .middle-viewer{ width:100%; min-width:auto; height:62vh; }
    .gallery-grid{ grid-template-columns: repeat(3, minmax(120px, 1fr)); }
    .history-card{ max-height:none; }
  }

  /* --- Phones / narrow (≤640px) --- */
@media (max-width:640px){
    .workspace-layout{ flex-direction:column; gap:12px; padding:0 10px; }
    .left-panel, .right-panel.compact{ width:100%; flex:none; }
    .middle-viewer{ width:100%; min-width:auto; min-height:320px; height:56vh; }
    .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root{ --pager-h: 54px; --pager-gap: .35rem; }
  }