/* =========================================================
   CARD SHELF · สไตล์โปสเตอร์ริโซ (น้ำเงิน–แดง บนกระดาษครีม)
   ค่าทุกอย่างอยู่ใน :root — ห้ามเขียนค่าสีตรงในหน้า
   ========================================================= */
:root{
  /* กระดาษและหมึก */
  --bg:#F4ECDF;            /* พื้นทั้งหน้า */
  --paper-hi:#FBF6EC;      /* ในการ์ด ช่องกรอก */
  --paper-2:#EAE0CF;       /* พื้นซ้อนอ่อน / ไฮไลต์แถว */
  --blue:#1E2FB8;          /* หมึกหลัก = สีระบบ (ปุ่มหลัก แท็บที่เลือก) */
  --blue-soft:#DCE0F7;
  --red:#E5432F;           /* ตกแต่ง (เทป ดาว) */
  --red-ink:#C8341F;       /* แดงที่มีตัวหนังสือ (ราคา ตราติดจอง) ≥4.5:1 กับครีม */
  --ink:#1E2FB8; --ink-2:#4A4F7A; --ink-3:#9EA2C9;
  --on-blue:#F4ECDF;
  --maroon:var(--blue); --teal:var(--blue); --navy:var(--blue);
  --sys:var(--blue); --sys-soft:var(--blue-soft); --on-sys:var(--on-blue);
  --line:var(--blue);

  /* สีวง (สองสีหลัก ไล่เฉด) */
  --c1:#1E2FB8; --c1-soft:#DCE0F7;
  --c2:#C8341F; --c2-soft:#F6DDD5;
  --c3:#4654C8; --c3-soft:#E2E4F5;
  --c4:#A62A17; --c4-soft:#F1D9D2;
  --c5:#12207F; --c5-soft:#D9DCEE;
  --c6:#D9563F; --c6-soft:#F7E1D9;

  /* สถานะ */
  --st-available:#1E2FB8; --st-available-soft:#DCE0F7;
  --st-reserved:#C8341F;  --st-reserved-soft:#F6DDD5;
  --st-sold:#6E685C;      --st-sold-soft:#E7DFD1;
  --danger:#C8341F;
  --os-unpaid:#C8341F;  --os-unpaid-soft:#F6DDD5;
  --os-paid:#1E2FB8;    --os-paid-soft:#DCE0F7;
  --os-shipped:#2F6E45; --os-shipped-soft:#DCE8DA;

  /* ลายจุดฮาล์ฟโทน (ละเอียด) */
  --halftone:radial-gradient(var(--blue) .9px, transparent 1.15px) 0 0 / 4.5px 4.5px;
  --halftone-soft:radial-gradient(rgba(30,47,184,.3) .9px, transparent 1.15px) 0 0 / 4.5px 4.5px;

  --font-display:"Kanit", system-ui, sans-serif;
  --font-body:"Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"Space Mono", "Kanit", ui-monospace, monospace;
  --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  --lh-body:1.6; --lh-head:1.1;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:0; --r-md:0; --r-lg:0; --r-pill:999px;
  --bw:3px; --bw-thin:1.5px;
  --shadow-dlg:8px 8px 0 var(--blue);
  --ctl-h:44px; --content-max:1240px;
  --z-content:1; --z-bar:10; --z-toast:60;
  --ease:160ms cubic-bezier(.3,.7,.4,1);
}
@media (max-width:640px){ :root{ --ctl-h:46px } }

/* ================= BASE ================= */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-body); font-size:var(--fs-md); font-weight:400; line-height:var(--lh-body); color:var(--ink); background:var(--bg); min-height:100vh; line-break:loose}
h1,h2,h3{font-family:var(--font-display); line-height:var(--lh-head); margin:0; font-weight:800; color:var(--blue)}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--blue)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; word-break:break-all}
.muted{color:var(--ink-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--red); outline-offset:2px}
[hidden]{display:none !important}
.eyebrow{font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--blue)}

/* ================= COMPONENTS ================= */
/* แผ่น/หน้าต่าง (ชื่อคลาสเดิม .win) */
.win{position:relative; z-index:var(--z-content); background:var(--paper-hi); border:var(--bw) solid var(--blue)}
.win__bar{display:flex; align-items:center; gap:var(--s3); min-height:52px; padding:var(--s2) var(--s4); background:var(--blue); color:var(--on-blue)}
.win__dots{display:none}
.win__title{flex:1; font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--on-blue)}
.win__body{padding:var(--s5)}
.win__bar .btn--icon{margin-left:auto; background:transparent; border-color:var(--on-blue); color:var(--on-blue)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--ctl-h); padding:0 var(--s4);
  border:var(--bw) solid var(--blue); background:var(--bg); color:var(--blue);
  font-weight:700; font-size:var(--fs-md); cursor:pointer; white-space:nowrap; text-decoration:none; transition:transform var(--ease), box-shadow var(--ease)}
.btn:hover{background:var(--paper-hi)}
.btn:active{transform:translate(2px,2px)}
.btn--primary,.btn--primary:hover{background:var(--blue); color:var(--on-blue); box-shadow:4px 4px 0 var(--red)}
.btn--primary:active{box-shadow:1px 1px 0 var(--red)}
.btn--danger,.btn--danger:hover{background:var(--red-ink); border-color:var(--red-ink); color:#fff}
.btn--text{border-color:transparent; background:none; color:var(--red-ink); padding:0 var(--s2); box-shadow:none}
.btn--text:hover{background:none; text-decoration:underline}
.btn--icon{width:var(--ctl-h); padding:0}
.btn[aria-disabled="true"]{opacity:.5; pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}

.seg{display:inline-flex; border:var(--bw) solid var(--blue); background:var(--bg)}
.seg button,.seg a{display:inline-flex; align-items:center; gap:var(--s2); min-height:calc(var(--ctl-h) - 6px); padding:0 var(--s4); border:0; background:none; font-weight:700; font-size:var(--fs-md); cursor:pointer; color:var(--blue); text-decoration:none}
.seg button[aria-selected="true"],.seg a[aria-current="page"]{background:var(--blue); color:var(--on-blue)}
.seg .count{font-family:var(--font-mono); font-size:var(--fs-sm); opacity:.85}

.field{display:flex; flex-direction:column; gap:var(--s1)}
.field label,.field .lab{font-size:var(--fs-sm); font-weight:700}
.field .hint{font-size:var(--fs-sm); color:var(--ink-2)}
.field .err{font-size:var(--fs-sm); color:var(--red-ink); display:none; font-weight:600}
.field.is-error .err{display:block}
.field.is-error .input{border-color:var(--red-ink); box-shadow:0 0 0 2px var(--red-ink) inset}
.input{min-height:var(--ctl-h); width:100%; padding:0 var(--s3); border:var(--bw) solid var(--blue); background:var(--paper-hi); color:var(--blue); font-weight:500}
.input::placeholder{color:var(--ink-3)}
textarea.input{padding:var(--s2) var(--s3); min-height:72px; resize:vertical}
select.input{appearance:none; padding-right:36px; background:var(--paper-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E2FB8' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat right 12px center}
.search{position:relative; display:block}
.search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--blue)}
.search .input{padding-left:42px}

.chips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.chip{display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--ctl-h); padding:0 var(--s4);
  border:var(--bw) solid var(--blue); background:transparent; color:var(--blue); font-size:var(--fs-md); font-weight:700; cursor:pointer; flex:none}
.chip .count{font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:700; opacity:.85}
.chip[aria-pressed="true"]{background:var(--blue); color:var(--on-blue)}
.dot{width:12px; height:12px; background:var(--gc,var(--blue)); flex:none}

.st{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:700; color:var(--stc)}
.st__mk{width:18px; height:18px; background:var(--stc); color:#fff; display:grid; place-items:center}
.st__mk svg{width:12px; height:12px}
.st--available{--stc:var(--st-available); --sts:var(--st-available-soft)}
.st--reserved{--stc:var(--st-reserved); --sts:var(--st-reserved-soft)}
.st--sold{--stc:var(--st-sold); --sts:var(--st-sold-soft)}
.os--unpaid{--stc:var(--os-unpaid); --sts:var(--os-unpaid-soft)}
.os--paid{--stc:var(--os-paid); --sts:var(--os-paid-soft)}
.os--shipped{--stc:var(--os-shipped); --sts:var(--os-shipped-soft)}
.price{font-weight:700; font-variant-numeric:tabular-nums}

dialog.dlg{padding:0; border:var(--bw) solid var(--blue); background:var(--paper-hi); color:var(--ink); box-shadow:var(--shadow-dlg);
  width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto}
dialog.dlg--wide{width:min(760px, calc(100vw - 32px))}
dialog.dlg::backdrop{background:rgba(18,32,127,.45)}
.dlg__foot{position:sticky; bottom:0; display:flex; align-items:center; justify-content:flex-end; gap:var(--s3); padding:var(--s4) var(--s5); border-top:var(--bw) solid var(--blue); background:var(--bg)}
.dlg__foot .spacer{margin-right:auto}

.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); padding:var(--s7) var(--s4); grid-column:1 / -1}
.empty svg{width:110px; height:auto}
.empty h3{font-size:var(--fs-xl)}
.empty p{margin:0; color:var(--ink-2); max-width:34ch}

.toast{position:fixed; z-index:var(--z-toast); left:50%; top:72px; max-width:calc(100vw - 32px); text-align:center; transform:translateX(-50%); background:var(--blue); color:var(--on-blue);
  padding:var(--s2) var(--s4); font-weight:600; font-size:var(--fs-sm); box-shadow:4px 4px 0 var(--red)}

.notice{display:flex; align-items:flex-start; gap:var(--s3); background:var(--blue-soft); border-left:5px solid var(--blue); padding:var(--s3) var(--s4); font-size:var(--fs-sm)}
.notice--warn{background:#F6E8CC; border-left-color:#8A5A0A}
.notice--error{background:#F6DDD5; border-left-color:var(--red-ink); color:#5C1A10}
.notice p{margin:0}

.state{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); padding:var(--s7) var(--s4); color:var(--ink-2); grid-column:1 / -1}
.dots{display:inline-flex; gap:6px}
.dots i{width:10px; height:10px; background:var(--blue); animation:blink 1s infinite alternate}
.dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{from{opacity:.2} to{opacity:1}}

/* แถบลายตกแต่งบนสุด */
.strip{border-bottom:2px solid var(--blue); padding-bottom:6px}
.strip svg{display:block; width:100%; height:14px; opacity:.75}

/* ================= หน้าร้าน ================= */
.page{max-width:var(--content-max); margin:0 auto; padding:clamp(16px,3vw,40px) clamp(12px,3vw,40px) 56px; display:flex; flex-direction:column; gap:28px}
.rhdr{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; align-items:end}
.rhdr__tone{position:absolute; right:0; top:-14px; bottom:-14px; width:46%; background:var(--halftone); opacity:.35;
  -webkit-mask-image:linear-gradient(to left,#000 35%,transparent); mask-image:linear-gradient(to left,#000 35%,transparent); pointer-events:none}
.rhdr__main{position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--s3); min-width:0}
.rhdr__titlewrap{position:relative; display:inline-flex; align-self:flex-start; max-width:calc(100% - 44px)}
.rhdr h1{position:relative; z-index:1; font-weight:900; font-style:italic; font-size:clamp(40px,6vw,72px); line-height:.98; letter-spacing:-.02em; transform:skewX(-4deg); transform-origin:left bottom; overflow-wrap:anywhere}
.rhdr h1 a{color:inherit; text-decoration:none}
.rhdr h1 a[href]:hover{text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:8px}
.tape{position:absolute; left:4%; bottom:-14px; width:102%; height:30px; transform:rotate(-1.5deg)}
.spark{position:absolute; right:-40px; top:-6px; width:34px; height:34px}
.rhdr__bio{margin:18px 0 0; font-weight:400; font-size:var(--fs-md); line-height:1.6; white-space:pre-line}
.rhdr__bio:empty{display:none}
.rhdr__act{position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.filterbar{display:flex; justify-content:space-between; align-items:center; gap:var(--s3) var(--s4); flex-wrap:wrap; border-top:var(--bw) solid var(--blue); border-bottom:var(--bw) solid var(--blue); padding:var(--s3) 0}
.filterbar .search{flex:1 1 260px; max-width:380px}
.grp-wrap{display:none; position:relative; flex:1 1 100%}
.grp-wrap select{appearance:none; -webkit-appearance:none; width:100%; min-height:50px; padding:0 44px 0 16px; border:0; background:var(--blue); color:var(--on-blue); font-weight:700; font-size:var(--fs-lg); cursor:pointer}
.grp-wrap option{color:var(--blue); background:var(--paper-hi)}
.grp-wrap svg{position:absolute; right:18px; top:50%; transform:translateY(-50%); pointer-events:none}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:26px 18px}

/* การ์ดแบบโปสเตอร์จิ๋ว */
.pc{position:relative; display:block; padding:0; border:0; background:none; text-align:left; cursor:pointer; color:var(--blue)}
.pc::before{content:""; position:absolute; inset:0; transform:translate(7px,7px); background:var(--halftone); opacity:.45}
.pc__frame{position:relative; display:flex; flex-direction:column; border:var(--bw) solid var(--blue); background:var(--paper-hi); transition:transform var(--ease)}
.pc:hover .pc__frame{transform:translate(-2px,-2px)}
.pc:active .pc__frame{transform:translate(2px,2px)}
.pc__bar{display:flex; justify-content:space-between; align-items:center; gap:var(--s2); background:var(--blue); color:var(--on-blue); padding:6px 10px}
.pc__group{font-weight:900; font-size:var(--fs-md); line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase}
.pc__no{font-family:var(--font-mono); font-weight:700; font-size:var(--fs-sm); white-space:nowrap}
.pc__img{position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden; background:var(--gc,var(--blue))}
.pc__img img{width:100%; height:100%; object-fit:cover; object-position:center var(--crop,25%); display:block}
.pc__stamp{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) rotate(-12deg); padding:2px 14px; border:4px solid var(--red-ink); background:var(--bg); color:var(--red-ink); font-weight:900; font-size:var(--fs-lg); white-space:nowrap}
.pc--sold .pc__img img{opacity:.4; filter:grayscale(1)}
.pc--sold .pc__stamp{border-color:var(--st-sold); color:var(--st-sold)}
.pc__info{position:relative; display:flex; flex-direction:column; gap:2px; padding:10px 10px 12px; border-top:var(--bw) solid var(--blue)}
.pc__price{position:absolute; right:8px; top:-48px; width:56px; height:56px; border-radius:50%; background:var(--red-ink); color:var(--on-blue); display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px; letter-spacing:.02em; transform:rotate(8deg); box-shadow:0 0 0 3px var(--paper-hi); font-variant-numeric:tabular-nums}
.pc__name{font-weight:600; font-size:21px; line-height:1.15; letter-spacing:.01em; overflow-wrap:break-word}
.pc__meta{font-family:var(--font-mono); font-weight:700; font-size:var(--fs-sm); letter-spacing:.03em; line-height:1.4; text-transform:uppercase; overflow-wrap:anywhere}
.tile__badge{position:absolute; right:var(--s2); bottom:var(--s2); display:inline-flex; align-items:center; gap:var(--s1); background:var(--paper-hi); border:2px solid var(--blue); padding:0 var(--s2); font-size:var(--fs-sm); font-weight:700; line-height:22px; color:var(--blue)}
.tile__badge svg{width:14px; height:14px}

.foot-row{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap; font-weight:500; font-size:var(--fs-md)}
.check{display:inline-flex; align-items:center; gap:10px; min-height:var(--ctl-h); font-weight:700; cursor:pointer; color:var(--blue)}
.check input{width:22px; height:22px; margin:0; accent-color:var(--blue)}

/* รอบส่ง (ท้ายหน้า) */
.rounds{display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:end; border-top:var(--bw) solid var(--blue); padding-top:22px}
.rounds__year{display:flex; align-items:flex-end; gap:6px; padding:12px 10px; background:var(--halftone-soft), var(--bg)}
.rounds__year b{writing-mode:vertical-rl; transform:rotate(180deg); font-weight:900; font-size:54px; line-height:.9}
.rounds__year span{writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-mono); font-weight:700; font-size:var(--fs-sm); letter-spacing:.2em; text-transform:uppercase}
.rounds__list{display:flex; flex-direction:column; gap:6px; min-width:0}
.rounds__list h2{font-weight:900; font-size:var(--fs-xl)}
.round{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; border-bottom:var(--bw-thin) solid var(--blue); padding:6px 0; font-size:var(--fs-md)}
.round b{font-weight:800; min-width:4.5em}
.round .mono{font-weight:700; font-size:15px}
.round--next b,.round--next .mono{color:var(--red-ink)}
.rounds__empty{margin:0; color:var(--ink-2)}

/* รายละเอียดการ์ด */
.detail{display:grid; grid-template-columns:minmax(0,280px) 1fr; gap:var(--s5); align-items:start}
.detail__info{display:flex; flex-direction:column; gap:var(--s3)}
.detail__info h2{font-size:var(--fs-2xl); font-weight:800}
.detail__info .price{font-size:var(--fs-xl); color:var(--red-ink)}
.gallery{display:flex; flex-direction:column; gap:var(--s3)}
.gallery__main{position:relative; aspect-ratio:55/85; border:var(--bw) solid var(--blue); overflow:hidden; background:var(--gc,var(--blue))}
.gallery__main img,.gallery__main video{width:100%; height:100%; object-fit:contain; display:block}
.gallery__main video{background:#000}
.gallery__nav{position:absolute; top:50%; transform:translateY(-50%); background:var(--paper-hi)}
.gallery__nav--prev{left:var(--s2)} .gallery__nav--next{right:var(--s2)}
.gallery__count{position:absolute; right:var(--s2); top:var(--s2); background:var(--paper-hi); border:2px solid var(--blue); padding:0 var(--s2); font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:700}
.gallery__thumbs{display:flex; flex-wrap:wrap; gap:var(--s2)}
.gthumb{position:relative; width:44px; aspect-ratio:55/85; padding:0; border:2px solid var(--ink-3); overflow:hidden; background:var(--gc,var(--blue)); cursor:pointer}
.gthumb[aria-current="true"]{border-color:var(--blue); box-shadow:0 0 0 2px var(--blue)}
.gthumb img,.gthumb video{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.play svg{width:40%; max-width:44px; height:auto}

/* ================= เช็คสถานะ ================= */
.track{max-width:760px}
.track-form{display:flex; gap:var(--s3); flex-wrap:wrap}
.track-form .search{flex:1; min-width:200px}
.ocard{border:var(--bw) solid var(--blue); background:var(--paper-hi); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); position:relative}
.ocard + .ocard{margin-top:var(--s5)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); list-style:none; margin:0; padding:0}
.steps li{display:flex; flex-direction:column; gap:var(--s1); font-size:var(--fs-sm); color:var(--ink-2)}
.steps li::before{content:""; height:10px; background:var(--halftone-soft), var(--bg); border:2px solid var(--ink-3)}
.steps li.is-done{color:var(--blue)}
.steps li.is-done::before{background:var(--stc); border-color:var(--stc)}
.steps li.is-now{font-weight:800}
.ocard dl{display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4); margin:0}
.ocard dt{font-size:var(--fs-sm); color:var(--ink-2); padding-top:2px}
.ocard dd{margin:0; display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.olist{display:flex; flex-direction:column; gap:var(--s2)}
.oitem{display:flex; align-items:center; gap:var(--s3)}
.oitem__thumb{width:36px; aspect-ratio:55/85; border:2px solid var(--blue); overflow:hidden; background:var(--blue-soft); flex:none}
.oitem__thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* ================= หลังร้าน ================= */
.menubar{position:sticky; top:0; z-index:var(--z-bar); background:var(--bg); border-bottom:var(--bw) solid var(--blue)}
.menubar__in{max-width:var(--content-max); margin:0 auto; padding:var(--s2) var(--s4); display:flex; align-items:center; gap:var(--s4); min-height:56px}
.brand{display:flex; align-items:center; gap:var(--s2); font-weight:900; font-style:italic; font-size:var(--fs-xl); text-decoration:none; color:var(--blue)}
.brand svg{width:30px; height:30px}
.menubar__link{margin-left:auto; display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--ctl-h); padding:0 var(--s3); font-weight:700; font-size:var(--fs-md); color:var(--blue); text-decoration:none}
.menubar__link:hover{text-decoration:underline}
.menubar__link svg{width:16px; height:16px}
main{position:relative; z-index:var(--z-content)}
.adm{max-width:var(--content-max); margin:0 auto; padding:var(--s5) var(--s4) var(--s7)}
.view{display:flex; flex-direction:column; gap:var(--s5)}
.setup{max-width:520px; margin:var(--s6) auto 0; width:100%}
.setup .win__body{display:flex; flex-direction:column; gap:var(--s4)}
.admin-head{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.summary{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); font-size:var(--fs-sm)}
.summary b{font-size:var(--fs-md)}
.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:48px minmax(0,1fr) 96px 160px var(--ctl-h); gap:var(--s4); align-items:center; padding:var(--s2)}
.row + .row{border-top:var(--bw-thin) solid var(--blue-soft)}
.row:hover{background:var(--paper-2)}
.row__thumb{width:48px; aspect-ratio:55/85; border:2px solid var(--blue); overflow:hidden; background:var(--gc,var(--blue))}
.row__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.row__name{font-weight:600; line-height:1.35}
.row__sub{font-size:var(--fs-sm); color:var(--ink-2); display:flex; align-items:flex-start; gap:6px}
.row__sub .dot{width:10px; height:10px; margin-top:6px}
.row .price{text-align:right}
.row--sold .row__thumb img{opacity:.45; filter:grayscale(1)}
select.input.status-select{font-size:var(--fs-sm); font-weight:700; background-color:var(--sts); color:var(--stc); border-color:var(--stc)}
.tag-new{display:inline-block; font-size:var(--fs-sm); font-weight:700; color:var(--red-ink); margin-left:var(--s1)}

.orow{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr) 170px var(--ctl-h); gap:var(--s4); align-items:center; padding:var(--s3) var(--s2)}
.orow + .orow{border-top:var(--bw-thin) solid var(--blue-soft)}
.orow:hover{background:var(--paper-2)}
.orow__buyer{font-weight:700}
.orow__sub{font-size:var(--fs-sm); color:var(--ink-2)}
.orow__lbl{display:none; font-size:var(--fs-sm); color:var(--ink-2)}
.thumbs{display:flex; align-items:center}
.thumbs span{width:24px; aspect-ratio:55/85; border:2px solid var(--blue); overflow:hidden; background:var(--blue-soft); margin-right:-6px}
.thumbs span:last-child{margin-right:var(--s2)}
.thumbs img{width:100%; height:100%; object-fit:cover; display:block}

.picker{border:var(--bw) solid var(--blue); background:var(--paper-hi); max-height:260px; overflow:auto}
.pick{display:grid; grid-template-columns:24px 32px 1fr auto; gap:var(--s3); align-items:center; padding:var(--s2) var(--s3); min-height:48px; cursor:pointer}
.pick + .pick{border-top:1px solid var(--blue-soft)}
.pick:hover{background:var(--paper-2)}
.pick input{width:20px; height:20px; accent-color:var(--blue)}
.pick__thumb{width:32px; aspect-ratio:55/85; border:2px solid var(--blue); overflow:hidden; background:var(--gc,var(--blue))}
.pick__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pick__name{font-weight:600; line-height:1.3}
.pick__sub{font-size:var(--fs-sm); color:var(--ink-2)}
.pick-sum{display:flex; justify-content:space-between; font-size:var(--fs-sm); margin-top:var(--s2)}

.rrow{display:grid; grid-template-columns:200px minmax(0,1fr) minmax(0,1.2fr) var(--ctl-h); gap:var(--s4); align-items:center; padding:var(--s3) var(--s2)}
.rrow + .rrow{border-top:var(--bw-thin) solid var(--blue-soft)}
.rrow:hover{background:var(--paper-2)}
.rrow--past{opacity:.55}

.pubbar{position:sticky; bottom:var(--s4); z-index:var(--z-bar); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  background:var(--paper-hi); border:var(--bw) solid var(--blue); box-shadow:6px 6px 0 var(--blue); padding:var(--s3) var(--s4)}
.pubbar__text{flex:1; min-width:180px; font-size:var(--fs-sm)}
.pubbar__text b{font-size:var(--fs-md)}
.progress{height:10px; background:var(--bg); border:2px solid var(--blue); overflow:hidden; margin-top:var(--s1)}
.progress i{display:block; height:100%; background:var(--halftone), var(--blue); width:0; transition:width var(--ease)}

.form{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.form .span2{grid-column:1 / -1}
.media{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:var(--s3)}
.mitem{display:flex; flex-direction:column; gap:var(--s1)}
.mthumb{position:relative; aspect-ratio:55/85; border:var(--bw) solid var(--blue); overflow:hidden; background:var(--paper-2)}
.mthumb img,.mthumb video{width:100%; height:100%; object-fit:cover; display:block}
.mthumb__cover{position:absolute; left:4px; top:4px; background:var(--blue); color:var(--on-blue); font-size:var(--fs-sm); font-weight:700; padding:0 var(--s2); line-height:22px}
.mitem__act{display:flex; gap:var(--s1); justify-content:center}
.mitem__act .btn{border-width:2px}
.madd{aspect-ratio:55/85; border:var(--bw) dashed var(--blue); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s1); cursor:pointer; color:var(--blue); font-size:var(--fs-sm); font-weight:700; text-align:center; background:var(--halftone-soft), var(--bg)}
.madd:hover{background:var(--blue-soft)}
.madd svg{width:24px; height:24px}
.media-input:focus-visible + .madd{outline:3px solid var(--red); outline-offset:2px}

/* ================= RESPONSIVE ================= */
@media (max-width:760px){
  .rhdr{grid-template-columns:1fr}
  .rhdr__act{justify-content:flex-start}
  .chips--groups{display:none}
  .grp-wrap{display:block}
  .filterbar .search{max-width:none}
  .detail{grid-template-columns:1fr}
  .gallery{max-width:280px; width:100%; margin:0 auto}
  .row{grid-template-columns:48px minmax(0,1fr) var(--ctl-h); grid-template-areas:"t n e" "t p e" "s s s"; gap:var(--s1) var(--s3); padding:var(--s3) var(--s2)}
  .row .row__thumb{grid-area:t; align-self:start}
  .row .c-name{grid-area:n}
  .row .price{grid-area:p; text-align:left}
  .row .c-status{grid-area:s; margin-top:var(--s2)}
  .row .c-edit{grid-area:e; align-self:start}
  .orow{grid-template-columns:minmax(0,1fr) var(--ctl-h); grid-template-areas:"b e" "r e" "t t" "s s"; gap:var(--s1) var(--s3)}
  .orow .c-buyer{grid-area:b} .orow .c-round{grid-area:r} .orow .c-track{grid-area:t} .orow .c-status{grid-area:s; margin-top:var(--s2)} .orow .c-edit{grid-area:e; align-self:start}
  .orow__lbl{display:inline}
  .rrow{grid-template-columns:minmax(0,1fr) var(--ctl-h); grid-template-areas:"d e" "c e" "n e"; gap:var(--s1) var(--s3)}
  .rrow .c-date{grid-area:d} .rrow .c-close{grid-area:c} .rrow .c-note{grid-area:n} .rrow .c-edit{grid-area:e; align-self:start}
}
@media (max-width:640px){
  .menubar__in{padding:var(--s2) var(--s3)}
  .brand span{display:none}
  .win__body{padding:var(--s4)}
  .adm{padding:var(--s4) var(--s3) var(--s7)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) 14px}
  .pc__name{font-size:19px}
  .form{grid-template-columns:1fr}
  .dlg__foot{padding:var(--s3) var(--s4)}
  .pubbar{bottom:var(--s2); padding:var(--s3)}
  .pubbar__text{flex-basis:100%}
  .pubbar #publishBtn{flex:1}
  .rounds__year b{font-size:44px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} .pc:hover .pc__frame,.btn:active{transform:none} }