@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#ede9df;
  --paper-2:#f6f2e8;
  --ink:#151515;
  --acid:#d8ff39;
  --muted:#737169;
  --line:rgba(21,21,21,.22);
  --danger:#ff6d6d;
  --ok:#d8ff39;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.075;z-index:999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E")}
a{color:inherit}
.wrap{max-width:1400px;margin:auto;padding:0 4vw 80px}

/* Header */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 4vw;
  border-bottom:1px solid var(--line);
  background:rgba(237,233,223,.96);
  backdrop-filter:blur(9px);
  font:500 12px 'DM Mono',monospace;
  text-transform:uppercase;letter-spacing:.08em
}
.brand{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:500
}
.brand::before{
  content:"KPO";display:grid;place-items:center;width:42px;height:42px;
  background:var(--ink);color:var(--paper);font-size:10px;transform:rotate(-3deg)
}
.mainnav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.mainnav a{text-decoration:none;position:relative}
.mainnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--ink);transition:right .2s}
.mainnav a:hover::after{right:0}

/* Hero */
.hero{
  min-height:46vh;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:40px;align-content:center;align-items:end;padding:68px 0 48px;
  border-bottom:1px solid var(--ink)
}
.hero h1{
  margin:0;max-width:1050px;font-size:clamp(50px,8vw,122px);
  line-height:.85;letter-spacing:-.065em;font-weight:800;text-transform:uppercase
}
.hero p{max-width:630px;margin:28px 0 0;font-size:clamp(16px,1.6vw,21px);line-height:1.5;color:#3e3d38}
.endbox{
  min-width:250px;background:var(--ink);color:var(--paper);padding:20px 22px;
  transform:rotate(1deg);font-family:'DM Mono',monospace
}
.endbox span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#aaa79d}
.endbox strong{display:block;margin-top:7px;font-size:15px}

/* Controls */
.search{display:grid;grid-template-columns:1fr auto;gap:10px;margin:22px 0 28px}
input,textarea,select,button,.button{
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  padding:12px 14px;font:500 13px 'DM Mono',monospace
}
input,textarea,select{width:100%;background:rgba(255,255,255,.14)}
textarea{font-family:Manrope,Arial,sans-serif}
button,.button{cursor:pointer;text-decoration:none;display:inline-block;text-transform:uppercase;letter-spacing:.04em}
button:hover,.button:hover{background:var(--ink);color:var(--paper)}
.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.primary:hover{background:var(--acid);color:var(--ink)}
.wide{width:100%}

/* Gallery */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{
  border:1px solid var(--ink);background:transparent;overflow:hidden;position:relative;
  transition:transform .25s ease,background .25s ease,color .25s ease
}
.card:hover{transform:translateY(-4px);background:var(--ink);color:var(--paper)}
.thumb{aspect-ratio:4/3;background:#d8d3c7;overflow:hidden;border-bottom:1px solid var(--ink)}
.thumb img,.artimage img,.livecard img{width:100%;height:100%;object-fit:cover}
.card:hover .thumb{border-color:#555}
.placeholder{height:100%;display:grid;place-items:center;font:500 30px 'DM Mono',monospace;color:#969187}
.placeholder.large{min-height:500px}
.cardbody{padding:14px 16px 18px}
.card h2{font-size:clamp(24px,2.4vw,38px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;margin:12px 0}
.card h2 a{text-decoration:none}
.card .muted{font-family:'DM Mono',monospace;font-size:11px}
.card:hover .muted{color:#aaa79d}
.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}
.code{font:500 12px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.code.big{font-size:13px}
.heart{border:0;background:transparent;font-size:29px;padding:0;cursor:pointer;color:inherit}
.heart:hover{background:transparent;color:var(--acid)}
.price{font:500 13px 'DM Mono',monospace;margin:14px 0 0}

/* Detail */
.detail{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:16px;padding-top:34px}
.artimage{background:#d8d3c7;min-height:560px;max-height:80vh;border:1px solid var(--ink)}
.panel{border:1px solid var(--ink);padding:24px;background:transparent}
.panel.narrow{max-width:560px;margin:42px auto}
.panel h1{font-size:clamp(38px,5vw,72px);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;margin:10px 0 18px}
.panel h2{font-size:24px;letter-spacing:-.03em}
.artist{font:500 13px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em}
.muted{color:var(--muted)}
.bidbox{margin:28px 0;padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.bidbox span,.bidbox small{display:block;font:400 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em}
.bidbox strong{display:block;font-size:clamp(34px,4vw,58px);letter-spacing:-.05em;margin:4px 0}
.bidform label,.panel label{display:block;font:500 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;margin:14px 0 6px}
.bidderfields{display:grid;gap:6px}
.moneyinput{display:flex;align-items:center}.moneyinput input{font-size:24px;font-weight:800}.moneyinput span{font-size:20px;margin-left:8px}
.closed,.empty{padding:24px;border:1px dashed var(--ink);font-family:'DM Mono',monospace}
.history{margin-top:32px}
.history h2,h1{letter-spacing:-.035em}
table{width:100%;border-collapse:collapse;background:transparent}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}
th{font:500 10px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em}

/* Flash */
.flash{padding:13px 15px;background:var(--acid);color:#111;margin:18px 0;font:500 12px 'DM Mono',monospace}
.flash.error{background:var(--danger)}.flash.success{background:var(--acid)}

/* Bids/account */
.list{display:grid;gap:8px}.bidrow{display:flex;justify-content:space-between;border:1px solid var(--ink);padding:16px;text-decoration:none}
.bidrow:hover{background:var(--ink);color:var(--paper)}
.bidrow small{display:block;color:var(--muted);margin-top:5px;font-family:'DM Mono',monospace}
.leading{color:#2c7a3f;text-align:right}.outbid{color:#a23535;text-align:right}
.favorite-list{display:flex;gap:8px;flex-wrap:wrap}.favorite-chip{border:1px solid var(--ink);padding:9px 11px;text-decoration:none;font:500 11px 'DM Mono',monospace}

/* Admin */
.admin-topbar{position:sticky;top:83px;z-index:50;background:#121212;color:#f2efe7;border-bottom:1px solid #343434}
.admin-topbar-inner{max-width:1400px;margin:0 auto;padding:10px 4vw;display:flex;gap:18px;align-items:center;justify-content:space-between}
.admin-brand{color:#f2efe7;font:500 12px 'DM Mono',monospace;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}
.admin-mainnav{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:flex-end}
.admin-mainnav a{color:#f2efe7;text-decoration:none;font:400 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.04em;opacity:.86}
.admin-mainnav a:hover{opacity:1;color:var(--acid)}
.adminnav{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}
.admincards{display:grid;gap:8px}
.admincard,.winnercard{border:1px solid var(--ink);padding:14px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}
.admincard small,.winnercard small{display:block;color:var(--muted);font:400 11px 'DM Mono',monospace}
.winnercard{grid-template-columns:1.5fr auto auto auto 1fr auto}
.check{display:flex!important;gap:8px;align-items:center}.check input{width:auto}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.formgrid .full{grid-column:1/-1}
.tablewrap{overflow:auto}
.invalidbid{opacity:.5;text-decoration:line-through}

/* Admin dark treatment: any logged-in admin page */
body:has(.admin-topbar){
  background:#121212;color:#f2efe7;
}
body:has(.admin-topbar)::before{opacity:.05}
body:has(.admin-topbar) .topbar{
  background:#121212;color:#f2efe7;border-color:#363636
}
body:has(.admin-topbar) .brand::before{background:#f2efe7;color:#121212}
body:has(.admin-topbar) .wrap{max-width:1200px}
body:has(.admin-topbar) .panel,
body:has(.admin-topbar) .admincard,
body:has(.admin-topbar) .winnercard,
body:has(.admin-topbar) table{border-color:#3c3c3c}
body:has(.admin-topbar) input,
body:has(.admin-topbar) textarea,
body:has(.admin-topbar) select{
  background:#1c1c1c;color:#fff;border-color:#454545
}
body:has(.admin-topbar) button,
body:has(.admin-topbar) .button{
  border-color:#777;color:#f2efe7
}
body:has(.admin-topbar) button:hover,
body:has(.admin-topbar) .button:hover{background:#f2efe7;color:#121212}
body:has(.admin-topbar) .primary{background:#f2efe7;color:#121212}
body:has(.admin-topbar) .primary:hover{background:var(--acid);color:#121212}
body:has(.admin-topbar) .muted{color:#8f8d86}
body:has(.admin-topbar) th,body:has(.admin-topbar) td{border-color:#333}

/* Live */
.livebody{background:#0c0c0c;color:#f4f0e7;min-height:100vh}
.livehead{display:flex;justify-content:space-between;padding:24px 3vw;font:500 18px 'DM Mono',monospace;text-transform:uppercase}
.livegrid{padding:0 3vw 3vw;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.livecard{border:1px solid #444;display:grid;grid-template-rows:1fr auto;min-height:300px}
.livecard img{height:220px}.livecard div{padding:15px}.livecard span,.livecard small{display:block;color:#9b978e;font-family:'DM Mono',monospace}
.livecard h2{margin:7px 0;font-size:30px;line-height:.95;text-transform:uppercase}.livecard strong{font-size:28px}

/* Burger */
.menu-toggle,.admin-menu-toggle{display:none;width:46px;height:42px;border:0;background:transparent;padding:8px;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:inherit}
.menu-toggle span,.admin-menu-toggle span{display:block;width:25px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.menu-toggle.open span:nth-child(1),.admin-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2),.admin-menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3),.admin-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.footer{display:flex;justify-content:space-between;padding:24px 4vw;border-top:1px solid var(--line);font:400 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}

@media(max-width:800px){
  .wrap{padding:0 20px 55px}
  .topbar{padding:14px 20px}
  .brand::before{width:38px;height:38px}
  .menu-toggle,.admin-menu-toggle{display:flex}
  .mainnav{
    display:none!important;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--ink);
    padding:7px 20px 14px;flex-direction:column;align-items:stretch;gap:0
  }
  .mainnav.open{display:flex!important}
  .mainnav a{padding:13px 2px;border-bottom:1px solid var(--line)}
  .mainnav a:last-child{border-bottom:0}
  body:has(.admin-topbar) .mainnav{background:#121212}
  .hero{display:block;min-height:43vh;padding:48px 0 34px}
  .hero h1{font-size:clamp(44px,13vw,78px)}
  .endbox{margin-top:24px;min-width:0}
  .grid{grid-template-columns:1fr 1fr;gap:8px}
  .card h2{font-size:22px}
  .cardbody{padding:11px}
  .detail{grid-template-columns:1fr;padding-top:20px}.artimage{min-height:330px}.placeholder.large{min-height:330px}
  .formgrid{grid-template-columns:1fr}.admincard,.winnercard{grid-template-columns:1fr}
  .bidrow{gap:12px}.livegrid{grid-template-columns:1fr 1fr}
  .admin-topbar{top:67px}
  .admin-topbar-inner{position:relative;padding:8px 20px}
  .admin-mainnav{
    display:none!important;position:absolute;left:0;right:0;top:100%;
    background:#121212;padding:8px 20px 14px;flex-direction:column;align-items:stretch;
    gap:0;max-height:70vh;overflow:auto
  }
  .admin-mainnav.open{display:flex!important}
  .admin-mainnav a{padding:12px 2px;border-bottom:1px solid #2b2b2b}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr}
  .livegrid{grid-template-columns:1fr}
}


.logged-bidder-box{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--ink);padding:12px 14px;margin:14px 0;
  background:rgba(216,255,57,.16)
}
.logged-bidder-box .status-dot{
  width:10px;height:10px;border-radius:50%;background:var(--acid);
  box-shadow:0 0 0 4px rgba(216,255,57,.22);flex:0 0 auto
}
.logged-bidder-box small,
.logged-bidder-box span:not(.status-dot){
  display:block;font:400 10px 'DM Mono',monospace;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)
}
.logged-bidder-box strong{display:block;font-size:17px}
.inline-login-box{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:16px 0;margin:14px 0
}
.inline-login-box p{margin-top:0}

.admin-image-manager{border-top:1px solid var(--line);padding-top:18px;margin-top:6px}
.admin-current-image{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:start;margin-bottom:18px}
.admin-current-image img{width:180px;max-height:150px;object-fit:cover;border:1px solid currentColor}
.image-remove-check{margin-top:12px!important}
@media(max-width:600px){
  .admin-current-image{grid-template-columns:1fr}
  .admin-current-image img{width:100%;max-height:260px}
}

.artgallery{min-width:0}
.slideshow{position:relative;border:1px solid var(--ink);background:#d8d3c7;overflow:hidden}
.slides{aspect-ratio:4/3;display:grid}
.slide{grid-area:1/1;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .2s ease;background:#d8d3c7}
.slide.active{opacity:1;pointer-events:auto}
.slide-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(237,233,223,.86)}
.slide-nav.prev{left:12px}.slide-nav.next{right:12px}
.slide-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px}
.slide-thumb{padding:0;border:1px solid var(--line);min-width:78px;width:78px;height:62px;background:transparent}
.slide-thumb img{width:100%;height:100%;object-fit:cover}
.slide-thumb.active{border:3px solid var(--ink)}
.admin-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0 20px}
.admin-image-card{border:1px solid currentColor;padding:8px;cursor:grab}
.admin-image-card.dragging{opacity:.45}
.admin-image-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:8px}
.cover-choice,.delete-choice{display:flex!important;align-items:center;gap:6px;margin:7px 0!important}
.cover-choice input,.delete-choice input{width:auto!important}
@media(max-width:800px){
  .slide-nav{width:40px;height:40px}
  .slide-thumb{min-width:68px;width:68px;height:54px}
}

.three-image-upload{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}
.three-image-upload label{
  border:1px solid var(--line);
  padding:12px;
  margin:0!important
}
.three-image-upload label .muted{
  display:block;
  margin:3px 0 8px;
  font-size:10px
}
@media(max-width:760px){
  .three-image-upload{grid-template-columns:1fr}
}
.leftlink {
  text-align: left;
  float: left;
}