:root { --bg:#0a0a0a; --panel:#121212; --text:#fff; --muted:rgba(255,255,255,.48); --line:rgba(255,255,255,.10); --active:rgba(255,255,255,.11); }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { background:var(--bg); color:var(--text); display:flex; font-family:"Courier New",Courier,monospace; margin:0; overflow:hidden; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.sidebar { align-items:center; background:rgba(255,255,255,.012); display:flex; flex:0 0 75px; flex-direction:column; height:100vh; padding:25px 0; position:relative; z-index:10; }
.sidebar-left { border-right:1px solid var(--line); }
.sidebar-right { border-left:1px solid var(--line); justify-content:center; }
.sidebar-group { align-items:center; display:flex; flex-direction:column; gap:19px; }
.sidebar-bottom { margin-top:auto; }
.monogram, .icon-button { align-items:center; background:transparent; border:0; border-radius:50%; color:var(--muted); display:flex; font-size:1.15rem; height:40px; justify-content:center; position:relative; transition:background .2s,color .2s,transform .2s; width:40px; }
.monogram { border:1px solid rgba(255,255,255,.2); border-radius:8px; color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.08em; margin:10px 0 31px; }
.monogram:hover, .icon-button:hover, .icon-button.active { background:var(--active); color:#fff; transform:scale(1.05); }
[data-tip]::after { background:var(--panel); border:1px solid rgba(255,255,255,.16); border-radius:4px; color:#fff; content:attr(data-tip); font-size:.68rem; left:64px; letter-spacing:.08em; opacity:0; padding:6px 9px; pointer-events:none; position:absolute; top:50%; transform:translate(0,-50%); transition:opacity .16s,transform .16s; white-space:nowrap; z-index:30; }
.sidebar-right [data-tip]::after { left:auto; right:64px; }
[data-tip]:hover::after { opacity:1; transform:translate(5px,-50%); }
.sidebar-right [data-tip]:hover::after { transform:translate(-5px,-50%); }
.gallery-shell { display:flex; flex:1; flex-direction:column; height:100vh; min-width:0; position:relative; }
.topline { align-items:center; border-bottom:1px solid var(--line); display:flex; font-size:.72rem; letter-spacing:.17em; margin:0; min-height:76px; padding:0 5.5vw; }
.topline p { margin:0; }
.topline-left, .site-tabs { align-items:center; display:flex; }
.site-tabs { gap:4px; }
.site-tab { border-bottom:1px solid transparent; color:var(--muted); font-size:.69rem; letter-spacing:.13em; padding:9px 8px; text-decoration:none; transition:border-color .2s,color .2s; }
.site-tab:hover, .site-tab.active { border-color:#fff; color:#fff; }
.grid-view { flex:1; overflow-y:auto; padding:7vh 5.5vw 8vh; }
.gallery-section-heading { align-items:baseline; display:flex; justify-content:space-between; margin:0 auto 25px; max-width:1100px; }
.gallery-heading { color:#fff; font-size:.76rem; font-weight:400; letter-spacing:.15em; margin:0; }
#galleryCount { color:var(--muted); font-size:.62rem; letter-spacing:.12em; margin:0; }
.site-footer { align-items:center; border-top:1px solid var(--line); color:var(--muted); display:flex; flex:0 0 auto; font-size:.57rem; gap:16px; justify-content:space-between; letter-spacing:.07em; padding:14px 5.5vw; }
.site-footer p { margin:0; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover, .site-footer a:focus-visible { color:#fff; outline:0; text-decoration:underline; text-underline-offset:3px; }
#stageView:not([hidden]) + .gallery-footer { display:none; }
.grid-container { display:grid; gap:25px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 auto; max-width:1100px; }
.grid-item { aspect-ratio:3 / 2; background:#111; border:1px solid var(--line); border-radius:5px; overflow:hidden; padding:0; position:relative; text-align:left; transition:border-color .25s,transform .25s,box-shadow .25s; }
.grid-item:hover, .grid-item:focus-visible { border-color:rgba(255,255,255,.5); box-shadow:0 12px 26px rgba(0,0,0,.48); outline:0; transform:scale(1.025); }
.grid-item img { height:100%; object-fit:cover; transition:filter .35s,transform .5s; width:100%; }
.grid-item:hover img { filter:brightness(.65); transform:scale(1.045); }
.grid-label { background:rgba(0,0,0,.73); bottom:9px; color:#fff; font-size:.7rem; left:9px; letter-spacing:.06em; padding:4px 7px; position:absolute; }
.grid-name { bottom:10px; color:#fff; font-size:.7rem; letter-spacing:.04em; position:absolute; right:10px; text-shadow:0 1px 4px #000; }
.empty-state { color:var(--muted); font-size:.85rem; grid-column:1/-1; padding:5rem 0; text-align:center; }
.stage-view { align-items:center; display:grid; flex:1; grid-template-columns:minmax(42px,8%) minmax(0,1fr) minmax(42px,8%); min-height:0; position:relative; }
.stage-view[hidden], .grid-view[hidden] { display:none; }
.artwork-stage { align-items:center; display:flex; flex-direction:column; height:calc(100vh - 76px); justify-content:center; margin:0; max-width:100%; position:relative; }
.artwork-stage img { box-shadow:0 20px 44px rgba(0,0,0,.64); cursor:zoom-in; max-height:72vh; max-width:100%; object-fit:contain; }
.artwork-stage figcaption { align-items:center; color:var(--muted); display:flex; font-size:.73rem; gap:14px; letter-spacing:.1em; margin-top:18px; }
.artwork-stage figcaption strong { color:#fff; font-weight:400; }
.stage-nav, .stage-close { background:transparent; border:0; color:rgba(255,255,255,.25); font-size:2.2rem; height:100%; transition:background .2s,color .2s; }
.stage-nav:hover { background:rgba(255,255,255,.018); color:#fff; }
.stage-close { color:var(--muted); font-size:.69rem; height:auto; letter-spacing:.08em; padding:12px; position:absolute; right:24px; text-transform:uppercase; top:12px; }
.stage-close:hover { color:#fff; }
.zoom-dialog { background:#050505; border:0; height:100vh; margin:0; max-height:none; max-width:none; padding:0; width:100vw; }
.zoom-dialog::backdrop { background:rgba(0,0,0,.92); }
.zoom-canvas { align-items:center; display:flex; height:100%; justify-content:center; overflow:auto; padding:4.5rem 5rem; }
.zoom-canvas img { display:block; height:auto; max-width:none; min-width:125%; width:min(2200px,160vw); }
.zoom-close { background:rgba(0,0,0,.78); border:1px solid var(--line); color:#fff; font-size:.7rem; letter-spacing:.1em; padding:11px 14px; position:fixed; right:25px; top:20px; z-index:1; }
.zoom-close:hover { background:#fff; color:#000; }
.vote-box { backdrop-filter:blur(8px); background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:18px; display:flex; gap:16px; margin-top:16px; padding:5px 14px; }
.vote-box button { background:transparent; border:0; font-size:1.28rem; opacity:.45; padding:2px; }
.vote-box button:hover, .vote-box button.active { opacity:1; transform:scale(1.16); }
.dialog { background:var(--panel); border:1px solid rgba(255,255,255,.17); border-radius:10px; box-shadow:0 28px 70px rgba(0,0,0,.7); color:#fff; max-width:510px; padding:31px; width:min(90vw,510px); }
.dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(8px); }
.dialog h2 { font-size:1rem; letter-spacing:.16em; margin:0 0 15px; }
.dialog p { color:var(--muted); font-size:.78rem; line-height:1.7; margin:0 0 18px; }
.dialog-close { background:transparent; border:0; color:var(--muted); font-size:1.7rem; position:absolute; right:15px; top:10px; }
.dialog-close:hover { color:#fff; }
.search-input, .dialog input, .dialog textarea { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.16); border-radius:5px; color:#fff; font-size:.9rem; outline:none; padding:12px; width:100%; }
.dialog textarea { resize:vertical; }
.search-input:focus, .dialog input:focus, .dialog textarea:focus { border-color:rgba(255,255,255,.72); }
.dialog-action { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:5px; color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.1em; margin-top:14px; padding:12px; transition:background .2s,color .2s; width:100%; }
.dialog-action:hover { background:#fff; color:#000; }
.email-link { color:#fff; font-size:.95rem; letter-spacing:.04em; }
.email-link:hover { color:#cfcfcf; }
.dialog form { display:flex; flex-direction:column; gap:13px; }
.dialog label { color:var(--muted); display:grid; font-size:.68rem; gap:6px; letter-spacing:.08em; }
.form-note { min-height:1.2rem; }
.form-note[data-state] { border-left:3px solid var(--line); font-size:.72rem; line-height:1.5; margin:2px 0 0; padding:9px 11px; }
.form-note[data-state="working"] { border-color:#a3c7ff; color:#dbe9ff; }
.form-note[data-state="success"] { border-color:#6cdb9a; color:#b8f4cf; }
.form-note[data-state="error"] { border-color:#ff7c7c; color:#ffc0c0; }
.dialog-action:disabled { cursor:wait; opacity:.58; }
.admin-dialog { max-height:86vh; overflow-y:auto; }
.admin-statistics { border-bottom:1px solid var(--line); border-top:1px solid var(--line); margin:24px 0; padding:17px 0 19px; }
.admin-section-heading { align-items:baseline; display:flex; gap:13px; justify-content:space-between; }
.admin-section-heading h3 { font-size:.7rem; letter-spacing:.12em; margin:0; }
.admin-section-heading p { font-size:.62rem; margin:0; text-align:right; }
.admin-stat-cards { display:grid; gap:8px; grid-template-columns:repeat(3,1fr); margin-top:14px; }
.admin-stat-cards article { background:#0b0b0b; border:1px solid var(--line); min-height:79px; padding:12px; }
.admin-stat-cards span, .admin-row-stats span { color:var(--muted); display:block; font-size:.58rem; letter-spacing:.07em; }
.admin-stat-cards strong { display:block; font-size:1.35rem; font-weight:400; margin-top:11px; }
.admin-list-heading { margin-top:25px; }
.admin-artworks { display:grid; gap:1px; margin-top:24px; }
.admin-artwork { align-items:center; background:#0b0b0b; display:grid; gap:8px 10px; grid-template-columns:58px 1fr auto; padding:8px; }
.admin-artwork img { height:42px; object-fit:cover; width:58px; }
.admin-artwork span { color:var(--muted); font-size:.67rem; }
.admin-artwork button { background:transparent; border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.65rem; padding:6px; }
.admin-row-stats { display:flex; gap:13px; grid-column:2 / -1; padding-bottom:2px; }
.admin-row-stats span { font-size:.56rem; }
.admin-row-stats b { color:#fff; font-size:.69rem; font-weight:400; margin-left:4px; }
@media (max-width:900px) { .grid-container { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { body { flex-direction:column; overflow:auto; } .sidebar { flex:0 0 auto; height:58px; padding:8px 13px; width:100%; } .sidebar-left { border-bottom:1px solid var(--line); border-right:0; flex-direction:row; justify-content:space-between; } .sidebar-right { border-left:0; border-top:1px solid var(--line); flex-direction:row; justify-content:center; order:3; } .sidebar-group { flex-direction:row; gap:8px; } .sidebar-bottom { margin:0; } .monogram { height:34px; margin:0; width:34px; } .icon-button { height:34px; width:34px; } [data-tip]::after { display:none; } .gallery-shell { height:calc(100vh - 116px); min-height:560px; } .topline { min-height:58px; padding:0 6vw; } .site-tab { font-size:.6rem; padding:8px 5px; } .grid-view { padding:30px 6vw 50px; } .gallery-section-heading { margin-bottom:17px; } .gallery-heading { font-size:.67rem; } .grid-container { gap:13px; } .site-footer { align-items:flex-start; flex-direction:column; gap:8px; padding:13px 6vw; } .site-footer nav { gap:9px 12px; justify-content:flex-start; } .stage-view { grid-template-columns:38px minmax(0,1fr) 38px; } .artwork-stage { height:calc(100vh - 166px); } .artwork-stage img { max-height:62vh; } .stage-close { right:0; top:0; } .artwork-stage figcaption { font-size:.62rem; gap:7px; } .zoom-canvas { padding:4.5rem 1.5rem 2rem; } .zoom-canvas img { min-width:165%; width:200vw; } .zoom-close { right:12px; top:12px; } .admin-stat-cards { gap:5px; } .admin-stat-cards article { min-height:70px; padding:10px 7px; } .admin-stat-cards span { font-size:.5rem; } .admin-section-heading { align-items:flex-start; flex-direction:column; gap:5px; } .admin-section-heading p { text-align:left; } }