/* gallery.css -- cncrelief.com Showcase Gallery (2026-09-25)
   Warm Editorial Luxury theme: paper #FBF8F2/#EFF1EC, green header #DCE4DE->#CFDDD2,
   2.5px border #C4D2C9, ink #16201E/#101716, terracotta #9C4B30, sage #1E6B47. */

:root { --line:#C4D2C9; --ink:#16201E; --ink2:#101716; --sub:#556761; --terra:#9C4B30;
        --terra-d:#883921; --green:#1E6B47; --green-bg:#E4F2EB; --bg:#EFF1EC; --paper:#FBF8F2; }

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { color:var(--ink); }


/* hero card (dialog theme) */
.gl-wrap { max-width:1560px; margin:0 auto; padding:14px 4px 10px; }
.gl-hero { background:#FBF8F2; border:2.5px solid var(--line); border-radius:16px; overflow:hidden;
           box-shadow:0 10px 30px rgba(22,32,30,.09); margin-bottom:22px; }
.gl-hero-head { display:flex; align-items:center; gap:14px; padding:15px 22px;
                background:linear-gradient(135deg,#DCE4DE 0%,#CFDDD2 100%);
                border-bottom:2px solid #BAC8BE; }
.gl-hero-title-box { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.gl-hero-badge { width:42px; height:42px; border-radius:11px; background:#16201E; color:#FFFFFF;
                 display:flex; align-items:center; justify-content:center; flex-shrink:0;
                 box-shadow:0 3px 8px rgba(22,32,30,.22); }
.gl-hero-head h1 { margin:0; font-size:24px; font-weight:800; color:#101716; letter-spacing:.01em; }
.gl-hero-sub { font-size:13px; color:#4D5E58; font-weight:600; }
.gl-hero-pill { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:800;
                background:#FFFFFF; color:var(--terra); border:2px solid var(--line);
                padding:5px 14px; border-radius:999px; white-space:nowrap; }
.gl-hero-body { padding:18px 22px 16px; display:flex; flex-direction:column; gap:12px; }
.gl-hero-desc { margin:0; font-size:14px; color:var(--sub); line-height:1.55; max-width:900px; }
.gl-hero-status { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; align-self:flex-start;
                  background:#FFFFFF; border:2px solid var(--line); border-radius:999px;
                  padding:7px 16px; font-size:12.5px; color:var(--sub); }
.gl-hero-status b { color:var(--ink); }
.gl-hero-status .pts { background:#E4F2EB; color:var(--green); font-weight:800;
                       padding:1px 9px; border-radius:999px; }
.gl-hero-status .free { background:#FAF0EC; color:var(--terra); font-weight:800;
                        padding:1px 9px; border-radius:999px; border:1px solid #E6C6B9; }

/* toolbar (hero card ke andar) */
.gl-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gl-chips { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.gl-chip { font:inherit; font-size:12.5px; font-weight:700; color:var(--sub); cursor:pointer;
           background:#FFFFFF; border:2px solid var(--line); border-radius:999px; padding:7px 15px;
           display:inline-flex; align-items:center; gap:5px; }
.gl-chip svg { color:var(--terra); }
.gl-chip:hover { border-color:var(--terra); color:var(--terra); }
.gl-chip.on { background:var(--terra); border-color:var(--terra); color:#FFFFFF; }
.gl-chip.on svg { color:#FFFFFF; }
.gl-right { display:flex; align-items:center; gap:12px; margin-left:auto; flex-wrap:wrap; }
/* 2026-09-27: sub-category row + design link */
.gl-subchips { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1.5px dashed #E2ECE5; }
.gl-subchip { font:inherit; font-size:12px; font-weight:700; color:var(--sub); cursor:pointer; background:#F7FAF8;
              border:1.5px solid var(--line); border-radius:999px; padding:5px 12px; }
.gl-subchip:hover { border-color:var(--terra); color:var(--terra); }
.gl-subchip.on { background:var(--ink); border-color:var(--ink); color:#FFFFFF; }
.gl-card.hl { box-shadow:0 0 0 3px var(--terra); }
.gl-m-link { display:block; margin:8px auto 0; font:inherit; font-size:12.5px; font-weight:700; color:var(--terra);
             background:transparent; border:0; cursor:pointer; text-decoration:underline; }
.gl-sort { font:inherit; font-size:12.5px; font-weight:700; color:var(--ink); background:#FFFFFF;
           border:2px solid var(--line); border-radius:999px; padding:8px 12px; cursor:pointer; }
.gl-sort:focus { outline:none; border-color:var(--terra); }
.gl-density { display:flex; align-items:center; background:#FFFFFF; border:2px solid var(--line);
              border-radius:999px; overflow:hidden; }
.gl-density-lbl { font-size:11px; font-weight:800; color:var(--sub); padding:0 6px 0 13px;
                  letter-spacing:.06em; text-transform:uppercase; }
.gl-density button { font:inherit; font-size:12px; font-weight:800; color:var(--sub); background:transparent;
                     border:none; padding:8px 12px; cursor:pointer; border-left:1.5px solid #E2ECE5; }
.gl-density button:hover { color:var(--terra); }
.gl-density button.on { background:var(--terra); color:#FFFFFF; }
#glSearch { font:inherit; font-size:13px; padding:9px 14px; min-width:220px;
            border:2px solid var(--line); border-radius:999px; background:#FFFFFF; color:var(--ink); }
#glSearch:focus { outline:none; border-color:var(--terra); }

/* cards grid */
.gl-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; padding-bottom:26px; }
.gl-grid > * { min-width:0; }
@media (max-width:1500px) { .gl-grid { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:980px)  { .gl-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:680px)  { .gl-grid { grid-template-columns:repeat(2, 1fr); } }

.gl-card { background:#FFFFFF; border:2.5px solid var(--line); border-radius:14px; overflow:hidden;
           display:flex; flex-direction:column; transition:box-shadow .16s ease, transform .16s ease; }
.gl-card:hover { box-shadow:0 12px 28px rgba(22,32,30,.14); transform:translateY(-3px); border-color:#9C4B30; }
.gl-thumb { position:relative; aspect-ratio:4/3; background:#141B19; overflow:hidden; }
.gl-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gl-cat { position:absolute; left:10px; top:10px; background:rgba(16,23,22,.85); color:#F2EFE9;
          font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
          padding:4px 10px; border-radius:999px; }
.gl-owned { position:absolute; left:10px; bottom:10px; background:var(--green); color:#fff;
            font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px; }

/* flag buttons: heart (like) + bookmark (saved) */
.gl-flag { position:absolute; display:inline-flex; align-items:center; gap:4px; height:34px;
           padding:0 9px; border-radius:999px; border:2px solid var(--line); background:rgba(255,255,255,.95);
           cursor:pointer; font:inherit; transition:all .16s ease; }
.gl-flag:hover { border-color:var(--terra); transform:translateY(-1px); }
.gl-flag.like { top:8px; right:8px; color:var(--ink); }
.gl-flag.save { top:50px; right:8px; color:var(--ink); }
.gl-flag svg { display:block; }
.gl-flag .n { font-size:11px; font-weight:800; color:var(--sub); }
.gl-flag.like.on { background:var(--terra); border-color:var(--terra); color:#FFFFFF; }
.gl-flag.like.on .n { color:#FFFFFF; }
.gl-flag.save.on { background:#16201E; border-color:#16201E; color:#FFFFFF; }

.gl-body { padding:13px 15px 15px; display:flex; flex-direction:column; gap:9px; flex:1; }
.gl-title { font-size:15px; font-weight:800; line-height:1.3; color:#101716;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gl-meta { font-size:11px; color:var(--sub); }
.gl-price { display:flex; align-items:baseline; gap:8px; margin-top:auto; }
.gl-pts { font-weight:800; color:var(--green); font-size:16px; }
.gl-pts.was { color:#9AA39D; text-decoration:line-through; font-size:13px; font-weight:700; }
.gl-off { background:#FAF0EC; color:var(--terra); border:1px solid #E6C6B9; font-size:10.5px;
          font-weight:800; padding:2px 8px; border-radius:999px; }
.gl-btn { font:inherit; font-weight:800; font-size:13px; cursor:pointer; border-radius:9px;
          padding:10px 14px; border:2px solid var(--terra); background:var(--terra); color:#fff;
          display:flex; align-items:center; justify-content:center; gap:8px; }
.gl-btn:hover { background:var(--terra-d); border-color:var(--terra-d); }
.gl-btn.free { background:#E4F2EB; border-color:#BFDCCB; color:var(--green); }
.gl-btn.free:hover { background:#D7ECDF; border-color:var(--green); }
.gl-btn:disabled { opacity:.6; cursor:default; }
.gl-btn .n { background:rgba(255,255,255,.55); border-radius:999px; padding:0 7px; font-size:11px; }
.gl-btn.free .n { background:#FFFFFF; }

.gl-empty { text-align:center; color:var(--sub); padding:60px 0 80px; display:flex;
            flex-direction:column; gap:8px; font-size:14.5px; }
.gl-empty b { color:var(--ink); font-size:16px; }

/* modal bits (account.css base) */
.gl-m-preview { position:relative; border:2px solid var(--line); border-radius:12px; overflow:hidden;
                background:#E9EDE9; aspect-ratio:16/7; }
.gl-m-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.gl-m-cat { position:absolute; left:10px; top:10px; background:rgba(16,23,22,.82); color:#F2EFE9;
            font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
            padding:4px 10px; border-radius:999px; }
.gl-m-rows { display:flex; flex-direction:column; border:2px solid var(--line); border-radius:12px; overflow:hidden; }
.gl-m-row { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; font-size:13.5px;
            border-top:1.5px solid #E2ECE5; background:#fff; }
.gl-m-row:first-child { border-top:none; }
.gl-m-row span { color:var(--sub); }
.gl-m-row strong { color:var(--ink); }
.gl-m-row.total { background:#F4F8F5; }
.gl-m-row.total strong { color:var(--green); font-size:15px; }
.gl-m-go { font:inherit; font-weight:800; font-size:14.5px; cursor:pointer; border:none; border-radius:10px;
           padding:13px; background:linear-gradient(135deg,#A85236 0%,#883921 100%); color:#fff; }
.gl-m-go:hover { filter:brightness(1.06); }
.gl-m-go:disabled { opacity:.6; cursor:default; }
.gl-m-msg { font-size:13px; min-height:18px; color:var(--green); font-weight:700; }
.gl-m-msg.bad { color:var(--terra-d); }

/* footer */
.gl-foot { text-align:center; color:var(--sub); font-size:11.5px; padding:6px 20px 30px; line-height:1.6; }

@media (max-width:640px) {
  .gl-top { padding:12px 14px; gap:12px; }
    .gl-wrap { padding:20px 14px 8px; }
}

/* 2026-09-27: zoomable studio render (viewer) + card zoom tag */
.gl-thumb { cursor:zoom-in; }
.gl-zoom-tag { position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px;
               background:rgba(16,23,22,.78); color:#F2EFE9; font-size:11px; font-weight:700; padding:4px 9px;
               border-radius:999px; opacity:0; transition:opacity .15s; pointer-events:none; }
.gl-card:hover .gl-zoom-tag { opacity:1; }
.gl-view-card { max-width:min(1100px, 96vw); }
.gl-zoom { position:relative; overflow:hidden; border:2px solid var(--line); border-radius:12px; background:#EDEAE4;
           height:min(56vh, 600px); touch-action:none; cursor:grab; user-select:none; }
.gl-zoom.drag { cursor:grabbing; }
.gl-zoom img { position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; will-change:transform; }
.gl-zoom-tools { position:absolute; right:10px; top:10px; display:flex; align-items:center; gap:4px;
                 background:rgba(255,255,255,.92); border:1.5px solid var(--line); border-radius:999px; padding:3px; }
.gl-zoom-tools button { font:inherit; font-weight:800; font-size:14px; min-width:30px; height:28px; border:none;
                        border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; padding:0 8px; }
.gl-zoom-tools button:hover { background:#F1ECE6; }
.gl-zoom-tools span { font-size:12px; font-weight:700; color:var(--sub); min-width:44px; text-align:center; }
.gl-zoom-hint { position:absolute; left:10px; bottom:10px; background:rgba(16,23,22,.72); color:#F2EFE9;
                font-size:11px; padding:4px 10px; border-radius:999px; pointer-events:none; }
@media (max-width: 640px) { .gl-zoom { height:52vh; } .gl-zoom-hint { display:none; } }
.gl-view-card .cnc-modal-body > * { flex-shrink:0; }
.gl-foot .gl-legal { display:block; margin-top:6px; } .gl-foot .gl-legal a { color:inherit; font-weight:700; text-decoration:none; } .gl-foot .gl-legal a:hover { text-decoration:underline; }

/* ==========================================================================
   2026-09-28 (user): two filters (Category, Subcategory) + DESIGN BASKET (gallery.js)
   ========================================================================== */
.gl-filters { display:flex; gap:12px; flex-wrap:wrap; flex:1; }
.gl-filter { display:inline-flex; align-items:center; gap:0; background:#FFFFFF; border:2px solid var(--line);
             border-radius:999px; overflow:hidden; }
.gl-filter > span { font-size:11px; font-weight:800; color:var(--sub); letter-spacing:.06em; text-transform:uppercase;
                    padding:0 10px 0 14px; }
.gl-filter select { font:inherit; font-size:13px; font-weight:700; color:var(--ink); background:#F7FAF8; border:none;
                    border-left:1.5px solid #E2ECE5; padding:9px 12px; min-width:190px; cursor:pointer; }
.gl-filter select:focus { outline:none; background:#FFFFFF; }
.gl-filter select:disabled { color:#9AA39D; cursor:default; }
.gl-basket-btn { font:inherit; font-size:13px; font-weight:800; color:var(--ink); background:#FFFFFF; cursor:pointer;
                 border:2px solid var(--line); border-radius:999px; padding:8px 10px 8px 14px;
                 display:inline-flex; align-items:center; gap:8px; }
.gl-basket-btn b { min-width:24px; height:24px; border-radius:999px; background:#E2ECE5; color:var(--sub);
                   display:inline-flex; align-items:center; justify-content:center; font-size:12px; padding:0 6px; }
.gl-basket-btn:hover { border-color:var(--terra); color:var(--terra); }
.gl-basket-btn.has { border-color:var(--terra); color:var(--terra); }
.gl-basket-btn.has b { background:var(--terra); color:#FFFFFF; }

.gl-actions { display:flex; flex-direction:column; gap:6px; }
.gl-btn.in { background:#E4F2EB; border-color:#BFDCCB; color:var(--green); }
.gl-btn.in:hover { background:#FAF0EC; border-color:var(--terra); color:var(--terra); }
.gl-btn.wait { background:#F4F1EA; border-color:#E2DCCF; color:#8A7A5A; font-size:12px; }
.gl-btn.ghost { background:#FFFFFF; color:var(--ink); border-color:var(--line); }
.gl-preview-link { font:inherit; font-size:12px; font-weight:700; color:var(--sub); background:transparent; border:0;
                   cursor:pointer; text-decoration:underline; padding:2px; }
.gl-preview-link:hover { color:var(--terra); }
.gl-inbasket { position:absolute; left:10px; bottom:10px; background:var(--terra); color:#fff; font-size:10.5px;
               font-weight:800; padding:4px 10px; border-radius:999px; letter-spacing:.04em; }
.gl-inbasket.wait { background:#8A7A5A; }
.gl-m-go.in { background:linear-gradient(135deg,#2A7A55 0%,#1E6B47 100%); }
.gl-m-go.free { background:linear-gradient(135deg,#2A7A55 0%,#1E6B47 100%); }
.gl-m-alt { font:inherit; font-weight:800; font-size:13.5px; cursor:pointer; border-radius:10px; padding:11px;
            background:#FFFFFF; color:var(--ink); border:2px solid var(--line); }
.gl-m-alt:hover { border-color:var(--terra); color:var(--terra); }
.gl-toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px); background:#16201E; color:#FBF8F2;
            font-size:13.5px; font-weight:700; padding:11px 18px; border-radius:12px; opacity:0; pointer-events:none;
            transition:all .2s ease; z-index:3000; box-shadow:0 10px 30px rgba(22,32,30,.3); }
.gl-toast.on { opacity:1; transform:translate(-50%, 0); }

/* basket dialog */
.gb-card { max-width:min(880px, 96vw); }
/* 2026-09-29 22:25 (user): basket dialogs wider -- ".cnc-modal-card.wide" (560 px) used to win over .gb-card */
.cnc-modal-card.gb-card { max-width:min(1040px, 96vw); width:100%; }
.gb-card .cnc-modal-body { padding:22px 26px; gap:16px; }
.gb-card .cnc-modal-body > * { flex-shrink:0; }            /* nothing is squeezed or cut; the dialog body scrolls instead */
.gb-top { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(260px, 1fr); gap:16px; align-items:start; }
.gb-top .gb-list { max-height:min(46vh, 420px); }
@media (max-width:760px) { .gb-top { grid-template-columns:1fr; } .gb-card .cnc-modal-body { padding:18px; } }
.gb-list { display:flex; flex-direction:column; border:2px solid var(--line); border-radius:12px; overflow:hidden; max-height:38vh; overflow-y:auto; }
.gb-row { display:flex; align-items:center; gap:12px; padding:9px 12px; border-top:1.5px solid #E2ECE5; background:#fff; }
.gb-row:first-child { border-top:none; }
.gb-row img { width:64px; height:48px; object-fit:cover; border-radius:8px; background:#141B19; flex-shrink:0; }
.gb-row-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.gb-row-txt b { font-size:14px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gb-row-txt span { font-size:11.5px; color:var(--sub); }
.gb-row-price { font-size:13px; color:var(--green); white-space:nowrap; }
.gb-row-price s { color:#9AA39D; font-size:12px; margin-right:4px; }
.gb-free { font-weight:800; color:var(--green); background:#E4F2EB; padding:2px 8px; border-radius:999px; font-size:11.5px; }
.gb-remove { width:30px; height:30px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--sub);
             cursor:pointer; font-size:12px; flex-shrink:0; }
.gb-remove:hover { border-color:var(--terra); color:var(--terra); }
.gb-sec-title { font-size:12px; font-weight:800; color:var(--sub); letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }
.gb-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px) { .gb-options { grid-template-columns:1fr; } }
.gb-opt { border:2px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; background:#FFFFFF; }
.gb-opt.team { background:#FBF8F2; }
.gb-opt-kicker { font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:800; letter-spacing:.12em; color:var(--terra); text-transform:uppercase; }
.gb-opt-title { font-size:16px; color:var(--ink2); }
.gb-opt p { margin:0; font-size:12.5px; color:var(--sub); line-height:1.45; }
.gb-opt textarea { font:inherit; font-size:13px; border:2px solid var(--line); border-radius:10px; padding:8px 10px; resize:vertical; }
.gb-opt textarea:focus { outline:none; border-color:var(--terra); }
.gb-go { font:inherit; font-weight:800; font-size:14px; cursor:pointer; border:none; border-radius:10px; padding:12px; margin-top:auto;
         background:linear-gradient(135deg,#A85236 0%,#883921 100%); color:#fff; }
.gb-go.dark { background:#16201E; }
.gb-go:hover { filter:brightness(1.07); }
.gb-go:disabled { opacity:.55; cursor:default; }
.gb-empty { text-align:center; display:flex; flex-direction:column; gap:6px; padding:26px 10px; color:var(--sub); font-size:13.5px; }
.gb-empty b { color:var(--ink); font-size:15px; }
.gb-orders { display:flex; flex-direction:column; gap:8px; }
.gb-order { border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; background:#FFFFFF; display:flex; flex-direction:column; gap:4px; }
.gb-order-top { display:flex; align-items:center; gap:10px; font-size:13px; }
.gb-order-top b { font-family:'JetBrains Mono',monospace; }
.gb-when { margin-left:auto; font-size:11.5px; color:var(--sub); }
.gb-order-items { font-size:12.5px; color:var(--sub); }
.gb-order-note { font-size:12.5px; color:var(--ink); background:#F4F1EA; border-radius:8px; padding:5px 9px; }
.gb-pill { font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; letter-spacing:.03em; }
.gb-pill.wait { background:#FFF4DC; color:#8A5A00; }
.gb-pill.ok { background:#E4F2EB; color:var(--green); }
.gb-pill.bad { background:#FAF0EC; color:var(--terra-d); }
.gb-pill.off { background:#EEF0EE; color:#7A857F; }
.gb-done { border:2px solid #BFDCCB; background:#F1FAF4; border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.gb-done.team { border-color:#E6C6B9; background:#FBF3EF; }
.gb-done-title { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; color:var(--green); }
.gb-done.team .gb-done-title { color:var(--terra); }
.gb-done p { margin:0; font-size:13px; color:var(--ink); line-height:1.5; }
.gb-done-list { display:flex; flex-direction:column; gap:6px; }
.gb-done-item { display:flex; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:10px; background:#FFFFFF;
                border:1.5px solid #BFDCCB; color:var(--ink); font-weight:800; font-size:13.5px; text-decoration:none; }
.gb-done-item span { color:var(--green); font-size:12.5px; }
.gb-done-item:hover { border-color:var(--green); }

/* ==========================================================================
   2026-09-28 night (user points 9, 10, 17): card = name + Points only; "Preview in 3D" bigger (theme green),
   "Add to Basket" smaller (same terracotta); Liked tab bar; viewer with the details on the RIGHT of the picture
   ========================================================================== */
.gl-name-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.gl-name-row .gl-title { flex:1; min-width:0; }
.gl-name-row .gl-price { margin-top:0; flex-shrink:0; gap:6px; }
.gl-body { justify-content:space-between; }
.gl-actions.two { flex-direction:row; align-items:center; gap:8px; }
.gl-actions.two .gl-btn.prev { flex:1.4; min-width:0; }
.gl-actions.two .gl-btn.small { flex:1; min-width:0; }
.gl-btn.prev { background:#385949; border-color:#385949; color:#FFFFFF; font-size:13.5px; padding:11px 12px; white-space:nowrap; }
.gl-btn.prev:hover { background:#2C473A; border-color:#2C473A; }
.gl-btn.small { font-size:12px; padding:7px 9px; gap:5px; white-space:nowrap; }
.gl-btn.small svg { width:13px; height:13px; }
.gl-all-btn { font:inherit; font-size:13px; font-weight:800; color:#385949; background:#FFFFFF; cursor:pointer;
              border:2px solid #A9C2B3; border-radius:999px; padding:8px 16px; }
.gl-all-btn:hover { border-color:#385949; }
.cnc-modal-card.gl-view-card { max-width:min(1200px, 96vw); }
#glFolderBar[hidden] { display:none; }
/* 2026-09-29 (user): category folders first */
.gl-grid.gl-folders { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.gl-folder { background:#FFFFFF; border:2px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer;
             transition:transform .15s, box-shadow .15s, border-color .15s; display:flex; flex-direction:column; }
.gl-folder:hover { transform:translateY(-3px); border-color:#385949; box-shadow:0 12px 28px rgba(22,32,30,.14); }
.gl-folder-img { display:grid; gap:3px; height:200px; background:#E9EDE9; }
.gl-folder-img.n1 { grid-template-columns:1fr; }
.gl-folder-img.n2 { grid-template-columns:1fr 1fr; }
.gl-folder-img.n3 { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.gl-folder-img.n3 > :first-child { grid-row:1 / span 2; }
.gl-folder-img img, .gl-folder-noimg { width:100%; height:100%; object-fit:cover; display:block; background:#E1E7E2; min-height:0; }
.gl-folder-body { padding:12px 15px 14px; display:flex; flex-direction:column; gap:4px; border-top:2px solid #E2ECE5; }
.gl-folder-name { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; color:#101716; }
.gl-folder-name svg { color:#9C4B30; flex-shrink:0; }
.gl-folder-meta { font-size:12.5px; color:var(--sub); font-weight:600; }
.gl-folder.all .gl-folder-name svg { color:#385949; }
#glLikedBar[hidden] { display:none; }
.gl-view-grid { display:grid; grid-template-columns:minmax(0, 1fr) 370px; gap:18px; align-items:start; }
.gl-view-left { min-width:0; }
.gl-view-left .gl-zoom { height:min(calc(100vh - 150px), 700px); }
.gl-view-right { display:flex; flex-direction:column; gap:12px; min-width:0; }
.gl-view-right .gl-m-alt { background:#385949; border-color:#385949; color:#FFFFFF; font-size:14.5px; padding:13px; }
.gl-view-right .gl-m-alt:hover { background:#2C473A; border-color:#2C473A; color:#FFFFFF; }
.gl-view-right .gl-m-go { font-size:13.5px; padding:11px; }
@media (max-width: 900px) {
  .gl-view-grid { grid-template-columns:1fr; }
  .gl-view-left .gl-zoom { height:52vh; }
}
/* 2026-09-29 22:41 (user): special design request -- photo up to 5 MB */
.gl-req-opt { font-style:normal; font-weight:600; color:var(--sub); letter-spacing:0; text-transform:none; }
.gl-req-photo { display:flex; align-items:center; gap:14px; border:2px dashed var(--line); border-radius:12px; padding:10px; background:#FBFCFA; }
.gl-req-photo.over { border-color:var(--terra); background:#FBF3EF; }
.gl-req-thumb { width:96px; height:72px; border-radius:9px; background:#EEF2EE; overflow:hidden; display:grid; place-items:center; flex-shrink:0; cursor:pointer; }
.gl-req-thumb span { font-size:11.5px; color:var(--sub); }
.gl-req-thumb img { width:100%; height:100%; object-fit:cover; }
.gl-req-pick { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.gl-req-pick span { font-size:12px; color:var(--sub); overflow:hidden; text-overflow:ellipsis; max-width:100%; white-space:nowrap; }
.gl-req-rm { color:var(--terra-d) !important; font-size:12px !important; }
.gb-opt p.gb-limit { font-size:11.5px; color:var(--muted, #6E7A77); margin-top:-2px; }
#glRequest .cnc-sell-field { display:flex; flex-direction:column; gap:6px; }
#glRequest .cnc-sell-lbl { font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--ink2); }
#glRequest .cnc-sell-select, #glRequest .cnc-sell-input { font:inherit; font-size:14px; border:2px solid var(--line); border-radius:10px; padding:9px 12px; background:#fff; color:var(--ink); width:100%; box-sizing:border-box; }
#glRequest .cnc-sell-select:focus, #glRequest .cnc-sell-input:focus { outline:none; border-color:var(--terra); }
.gl-hero-status[hidden] { display:none !important; }

/* 2026-10-01 20:13 (user): the gallery's own title (the header is the same on every page) */
.gl-page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; }
.gl-page-head h2 { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 24px; font-weight: 700; color: var(--ink, #101716); letter-spacing: -.02em; }

/* 2026-10-16 15:57 (owner): every user can download a gallery design with the watermark -- note under "Preview in 3D Editor" */
.gl-m-free { font-size:12.5px; line-height:1.45; color:#385949; font-weight:700; text-align:center; margin-top:-6px; }
.gl-m-free[hidden] { display:none; }