/* ============ Token ============ */
:root{
  --bg:#f3f0ff; --paper:#ffffff; --ink:#15123a; --muted:#625f86; --line:#15123a;
  --violet:#6b4cff; --violet-d:#5237e0; --pink:#ff5fa8; --lemon:#ffe14d; --mint:#35d9a0; --sky:#7cc7ff;
  --red:#e5334b; --ok:#0f8f62;
  --display:"Unbounded",system-ui,sans-serif; --body:"DM Sans",system-ui,sans-serif;
  --r:16px; --bw:2px; --sh:4px 4px 0 var(--ink); --sh-lg:7px 7px 0 var(--ink);
}
*{box-sizing:border-box} html{scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);
  background-image:radial-gradient(rgba(21,18,58,.09) 1.2px,transparent 1.2px);background-size:22px 22px}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em;line-height:1.15}
a{color:var(--violet-d);font-weight:600} button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
[hidden]{display:none!important}
::selection{background:var(--lemon)}

/* ============ Tombol ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--bw) solid var(--ink);background:var(--violet);color:#fff;
  padding:11px 20px;border-radius:999px;cursor:pointer;font-weight:700;text-decoration:none;box-shadow:var(--sh);transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--violet-d)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:#fff;color:var(--ink)}.btn.ghost:hover{background:var(--lemon)}
.btn.danger{background:var(--red)}.btn.sm{padding:6px 14px;font-size:.88rem;box-shadow:3px 3px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--sh)}

/* ============ Toko publik ============ */
.ticker{background:var(--ink);color:var(--lemon);overflow:hidden;white-space:nowrap;font:600 .78rem var(--body);padding:7px 0;border-bottom:var(--bw) solid var(--ink)}
.ticker div{display:inline-block;padding-left:100%;animation:tick 38s linear infinite}
.ticker span{margin-right:42px}.ticker b{color:#fff}
@keyframes tick{to{transform:translateX(-100%)}}
.top{position:sticky;top:0;z-index:20;display:flex;gap:14px;align-items:center;padding:12px clamp(14px,3vw,32px);background:var(--paper);border-bottom:var(--bw) solid var(--ink);flex-wrap:wrap}
.brand{font:800 1.05rem/1 var(--display);color:#fff;text-decoration:none;white-space:nowrap;background:var(--violet);border:var(--bw) solid var(--ink);padding:10px 14px;border-radius:12px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);transition:transform .15s}
.brand:hover{transform:rotate(1deg) scale(1.04)}
.searchbar{flex:1 1 340px;min-width:200px}
.searchbar input{width:100%;padding:13px 20px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;box-shadow:var(--sh);transition:box-shadow .15s,transform .15s}
.searchbar input:focus{outline:none;background:#fffbe0;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pink)}
.cur{display:flex;gap:8px;align-items:center;font-size:.82rem;font-weight:600;color:var(--muted)}
.cur select,.bar select{padding:9px 12px;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff;font-weight:600}
.wishbtn{border:var(--bw) solid var(--ink);background:var(--pink);color:var(--ink);padding:10px 16px;border-radius:999px;cursor:pointer;font-weight:700;box-shadow:var(--sh);transition:transform .12s,box-shadow .12s}
.wishbtn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.wishbtn span{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:6px;border-radius:99px;background:var(--ink);color:#fff;font-size:.78rem}
.wishbtn.pop span{animation:pop .4s}
@keyframes pop{40%{transform:scale(1.6) rotate(12deg)}}

.hero{max-width:1500px;margin:0 auto;padding:34px clamp(14px,3vw,32px) 0}
.hero h1{font-size:clamp(1.6rem,4.2vw,3rem);max-width:18ch}
.hero h1 mark{background:var(--lemon);padding:0 .15em;border:var(--bw) solid var(--ink);border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p{max-width:56ch;color:var(--muted);margin:14px 0 0;font-size:1.05rem}
.layout{display:grid;grid-template-columns:270px 1fr;gap:28px;padding:26px clamp(14px,3vw,32px);max-width:1500px;margin:auto}
.rail{position:sticky;top:96px;align-self:start;display:grid;gap:18px;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.rail h2{font-size:.82rem;margin-bottom:10px}.rail small{color:var(--muted);font-family:var(--body);font-weight:600;margin-left:6px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{border:var(--bw) solid var(--ink);background:#fff;padding:5px 12px;border-radius:999px;cursor:pointer;font-size:.88rem;font-weight:600;transition:transform .1s,background .1s}
.chips button:hover{background:var(--lemon);transform:translateY(-2px)}
.chips button.on{background:var(--ink);color:#fff}
.chips button i{font-style:normal;opacity:.6;margin-left:6px;font-size:.78rem}
.pricebox{display:flex;gap:8px;align-items:center}.pricebox input{width:100%;padding:9px 12px;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff}
.check{display:flex;gap:10px;align-items:center;font-size:.92rem;font-weight:500;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--violet)}
.ratenote{font-size:.76rem;color:var(--muted);margin:0;background:var(--lemon);border:var(--bw) dashed var(--ink);border-radius:10px;padding:8px 10px;color:var(--ink)}
.bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.bar p{margin:0;font:700 .95rem var(--display)}.bar label{font-weight:600;font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:22px}
.card{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:9px;text-align:left;position:relative;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}
.card:nth-child(4n+1):hover{background:#fff9d6}.card:nth-child(4n+2):hover{background:#ffeaf4}.card:nth-child(4n+3):hover{background:#e8fbf4}.card:nth-child(4n):hover{background:#ecf6ff}
.slab{position:relative;aspect-ratio:5/7;border-radius:10px;border:var(--bw) solid var(--ink);overflow:hidden;background:#e9e5ff;
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s ease-out}
.slab img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.slab.noimg{display:grid;place-items:center;color:var(--muted);font-size:.85rem;font-weight:600}
.foil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;mix-blend-mode:color-dodge;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),transparent 42%),
  linear-gradient(115deg,#ff3d81,#ffd23d,#3dffa8,#3db6ff,#9b3dff,#ff3d81);background-size:100% 100%,300% 300%;background-position:0 0,var(--mx,50%) var(--my,50%)}
.card:hover .foil{opacity:.6}
.card h3{font:700 .98rem/1.3 var(--body);letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:.82rem;color:var(--muted);margin:0}
.price{font:700 1.05rem var(--display);margin-top:auto}
.tag{position:absolute;top:2px;left:-4px;z-index:2;padding:3px 10px;border-radius:8px;border:var(--bw) solid var(--ink);font-size:.74rem;font-weight:700;background:var(--mint);transform:rotate(-4deg)}
.tag.sold{background:var(--red);color:#fff}.tag.res{background:var(--lemon)}.tag.gr{background:var(--sky);left:auto;right:-4px;transform:rotate(4deg)}
.card.is-sold .slab{filter:grayscale(1);opacity:.65}
.empty{color:var(--muted);padding:40px 0;text-align:center;font-weight:500}
.skel{height:340px;border-radius:var(--r);border:var(--bw) solid var(--ink);background:linear-gradient(100deg,#fff 30%,#ece8ff 50%,#fff 70%);background-size:300% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-100% 0}}

.modal{position:fixed;inset:0;z-index:50;background:rgba(21,18,58,.72);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;overflow:auto}
.sheet{position:relative;background:#fff;border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:10px 10px 0 var(--violet);max-width:980px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:28px;animation:rise .25s ease-out}
@keyframes rise{from{transform:translateY(20px) scale(.97);opacity:0}}
.x{position:absolute;top:12px;right:14px;width:38px;height:38px;border:var(--bw) solid var(--ink);background:#fff;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:3}
.x:hover{background:var(--lemon)}
.gallery{min-width:0;display:flex;flex-direction:column;align-items:center}
.gallery img#mImg{display:block;width:100%;height:auto;max-height:74vh;object-fit:contain;background:#f3f0ff;border:var(--bw) solid var(--ink);border-radius:14px}
/* bingkai foto mengikuti orientasi: portrait = kolom foto menyempit sesuai rasio (tanpa pita kosong di kiri-kanan), landscape = lebar penuh */
.sheet[data-o=p]{grid-template-columns:min(400px,calc(68vh * var(--ar,.7))) minmax(0,1fr);max-width:900px}
.sheet[data-o=s]{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.sheet[data-o=l]{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:flex-start;width:100%}.thumbs img{width:62px;height:62px;object-fit:cover;border-radius:8px;border:var(--bw) solid transparent;cursor:pointer;opacity:.7;background:#f3f0ff}.thumbs img.on{border-color:var(--ink);opacity:1}
@media(max-width:760px){.sheet,.sheet[data-o]{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px}
  .sheet[data-o=p] .gallery img#mImg{width:min(100%,calc(62vh * var(--ar,.7)));max-height:62vh}.gallery{align-items:center}}
.info h2{font-size:1.35rem;margin-bottom:10px;padding-right:44px}
.mprice{font:800 1.9rem var(--display);margin:6px 0 0;color:var(--violet-d)}.mprice2{color:var(--muted);margin:2px 0 16px;font-size:.9rem}
dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0 0 14px;padding:14px;background:var(--bg);border-radius:14px;border:var(--bw) dashed var(--ink)}dt{color:var(--muted);font-weight:500}dd{margin:0;font-weight:600}
.desc{white-space:pre-line}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:60;border-left:var(--bw) solid var(--ink);box-shadow:-10px 0 0 rgba(21,18,58,.18);display:flex;flex-direction:column;padding:20px;animation:slide .25s ease-out}
@keyframes slide{from{transform:translateX(100%)}}
.dh{display:flex;justify-content:space-between;align-items:center}.dh .x{position:static}.dh h2{font-size:1.1rem}
.drawer ul{list-style:none;padding:0;margin:14px 0;overflow:auto;flex:1}
.drawer li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:var(--bw) dashed var(--line)}
.drawer li img{width:44px;height:60px;object-fit:cover;border-radius:6px;border:var(--bw) solid var(--ink);background:#eee}.drawer li div{flex:1;font-size:.9rem}
.drawer li button{border:0;background:none;color:var(--red);cursor:pointer;font-weight:700}
.dfoot{display:grid;gap:10px}.dfoot p{margin:0;display:flex;justify-content:space-between;font:700 1rem var(--display)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;border:var(--bw) solid var(--lemon);font-weight:600;animation:rise .25s}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:36px 16px 44px}
@media (max-width:860px){.layout{grid-template-columns:1fr}.rail{position:static}.sheet{grid-template-columns:1fr}.cur{display:none}.hero h1{max-width:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.slab{transform:none!important}.foil{display:none}.ticker div{padding-left:0}}

/* ============ Login / setup ============ */
body.auth{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh;background:var(--bg)}
.auth-art{position:relative;background:var(--violet);border-right:var(--bw) solid var(--ink);padding:48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#fff}
.auth-art h1{font-size:clamp(1.8rem,3.4vw,2.8rem);max-width:14ch}
.auth-art p{max-width:38ch;opacity:.9}
.auth-art .blob{position:absolute;border-radius:50%;border:var(--bw) solid var(--ink)}
.demo{position:relative;width:200px;aspect-ratio:5/7;margin:20px auto;border-radius:16px;border:3px solid var(--ink);background:linear-gradient(160deg,var(--lemon),var(--pink) 60%,var(--sky));box-shadow:10px 10px 0 var(--ink);display:grid;place-items:center;font:800 1.1rem var(--display);color:var(--ink);text-align:center;padding:18px;
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-4deg);transition:transform .12s ease-out;z-index:2}
.demo .foil{opacity:.55;border-radius:14px}
.auth-form{display:grid;place-items:center;padding:32px}
.auth-form form{width:100%;max-width:400px;background:#fff;border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:var(--sh-lg);padding:30px}
.auth-form h2{font-size:1.5rem;margin-bottom:6px}.auth-form .sub{color:var(--muted);margin:0 0 22px}
.auth-form .f{margin-bottom:16px}
@media (max-width:820px){body.auth{grid-template-columns:1fr}.auth-art{padding:28px;min-height:260px}.demo{width:130px}}

/* ============ Dashboard penjual ============ */
.anav{position:sticky;top:0;z-index:30;display:flex;gap:8px;align-items:center;background:var(--paper);border-bottom:var(--bw) solid var(--ink);padding:10px clamp(14px,3vw,32px);flex-wrap:wrap}
.anav .brand{margin-right:14px;font-size:.9rem}
.anav a.t{color:var(--ink);text-decoration:none;padding:8px 16px;border-radius:999px;border:var(--bw) solid transparent;font-weight:600}
.anav a.t:hover{border-color:var(--ink);background:var(--lemon)}.anav a.t.on{background:var(--ink);color:#fff}.anav .sp{flex:1}
.wrap{max-width:1180px;margin:0 auto;padding:30px clamp(14px,3vw,32px) 70px}
.wrap h1{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:20px}
.panel{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);padding:22px;margin-bottom:22px;box-shadow:var(--sh)}
.panel h2{font-size:1rem;margin-bottom:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:22px}
.stat{border:var(--bw) solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--sh);background:#fff;transition:transform .15s}
.stat:hover{transform:translateY(-3px) rotate(-1deg)}
.stat:nth-child(1){background:var(--mint)}.stat:nth-child(2){background:var(--lemon)}.stat:nth-child(3){background:var(--pink)}.stat:nth-child(4){background:var(--sky)}.stat:nth-child(5){background:#d9ceff}
.stat b{display:block;font:800 1.35rem var(--display);word-break:break-word}.stat span{font-size:.88rem;font-weight:600}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.f{display:flex;flex-direction:column;gap:6px}.f.wide{grid-column:1/-1}
.f label{font-weight:700;font-size:.88rem}.f small{color:var(--muted)}
.f input:not([type=checkbox]):not([type=file]),.f select,.f textarea,.toolbar input,.toolbar select,.linkrow input,.linkrow select,.items td input:not([type=checkbox]),.items td select{padding:10px 14px;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff;width:100%;transition:box-shadow .12s,background .12s}
.f input:focus,.f select:focus,.f textarea:focus,.toolbar input:focus,.linkrow input:focus,.items td input:focus{outline:none;background:#fffbe0;box-shadow:3px 3px 0 var(--pink)}
.f input[type=checkbox]{width:18px;height:18px;accent-color:var(--violet)}
.f input[type=file]{padding:12px;border:var(--bw) dashed var(--ink);border-radius:12px;background:var(--bg)}
.f textarea{min-height:100px;resize:vertical}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t th{text-align:left;padding:10px;border-bottom:var(--bw) solid var(--ink);color:var(--ink);font-weight:700;white-space:nowrap;font-size:.82rem}
table.t td{padding:10px;border-bottom:1px dashed rgba(21,18,58,.3);vertical-align:middle}
table.t tr:hover td{background:#faf8ff}
table.t img{width:40px;height:56px;object-fit:cover;border-radius:6px;border:var(--bw) solid var(--ink)}
.right{text-align:right}.num{font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:2px 11px;border-radius:99px;font-size:.78rem;font-weight:700;border:var(--bw) solid var(--ink);background:#eee}
.badge.available{background:var(--mint)}.badge.sold{background:var(--pink)}.badge.reserved{background:var(--lemon)}
.flash{background:var(--mint);border:var(--bw) solid var(--ink);padding:12px 16px;border-radius:14px;margin-bottom:18px;font-weight:600;box-shadow:var(--sh)}.flash.err{background:var(--pink)}
.imgs{display:flex;gap:14px;flex-wrap:wrap}.imgs figure{margin:0;width:112px;text-align:center}.imgs img{width:112px;height:150px;object-fit:cover;border-radius:10px;border:var(--bw) solid var(--ink)}
.imgs label{font-size:.82rem;color:var(--red);font-weight:700}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}.toolbar input,.toolbar select{width:auto;min-width:200px}
.seller{border:var(--bw) solid var(--ink);border-radius:var(--r);padding:18px;margin-bottom:18px;background:#fff;box-shadow:var(--sh)}
.seller header{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:14px}.seller header .f{min-width:140px;flex:1}
.items td.n input{width:90px}
.sum{display:grid;gap:5px;margin-top:12px;font-size:.92rem;background:var(--bg);border-radius:12px;padding:14px;border:var(--bw) dashed var(--ink)}.sum div{display:flex;justify-content:space-between;gap:12px}
.sum .tot{font:700 1rem var(--display);border-top:var(--bw) solid var(--ink);padding-top:8px;margin-top:4px}
.grand{background:var(--ink);color:#fff;border-radius:var(--r);padding:22px;position:sticky;bottom:14px;border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--violet)}
.grand .row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:#d6d2ff}
.grand .big{font:800 1.3rem var(--display);color:var(--lemon);border-top:var(--bw) dashed #6b67a8;margin-top:10px;padding-top:12px}
.linkrow{display:flex;gap:10px;flex-wrap:wrap}.linkrow input{flex:1;min-width:200px;width:auto}.linkrow select{width:auto}
.hint{color:var(--muted);font-size:.88rem}

/* ============ Checkout pembeli ============ */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lbl{display:grid;gap:4px;font-size:.82rem;font-weight:700}
.lbl input{padding:10px 14px;border:var(--bw) solid var(--ink);border-radius:12px;font-weight:400;font-size:1rem}
.lbl input:focus{outline:none;background:#fffbe0;box-shadow:3px 3px 0 var(--pink)}
.coerr{margin:0;background:var(--pink);border:var(--bw) solid var(--ink);padding:8px 12px;border-radius:10px;font-weight:600;font-size:.88rem;display:block!important}
.coerr[hidden]{display:none!important}
.codone{display:grid;gap:10px;background:var(--mint);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.codone h3{font-size:1.1rem}.codone p{margin:0}

/* ============ Versi 2: titip, lacak, bayar, live, asal barang ============ */
.btn.alt{background:var(--pink);color:var(--ink)}.btn.alt:hover{background:#ff7fba}
.live{display:inline-flex;align-items:center;gap:6px;font:700 .7rem var(--body);letter-spacing:0;background:#fff;border:var(--bw) solid var(--ink);border-radius:99px;padding:2px 10px;vertical-align:middle;margin-left:8px}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);animation:blink 1.6s infinite}
.live.off::before{background:var(--red);animation:none}
@keyframes blink{50%{opacity:.25}}
.nb{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--pink);color:var(--ink);border:2px solid var(--ink);font-size:.72rem;margin-left:4px}
.chipa{display:inline-block;border:var(--bw) solid var(--ink);background:#fff;padding:5px 14px;border-radius:999px;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--ink);margin:0 6px 6px 0}
.chipa:hover{background:var(--lemon)}.chipa.on{background:var(--ink);color:#fff}.chipa i{font-style:normal;opacity:.6;margin-left:6px;font-size:.78rem}
.tag.rdy{background:var(--lemon)}
.card .origin{margin:0;font-size:.74rem;font-weight:700;color:var(--violet-d)}
.eta{margin:0 0 10px;padding:8px 12px;background:var(--lemon);border:var(--bw) dashed var(--ink);border-radius:10px;font-weight:600;font-size:.9rem}
.herocta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.qform{display:grid;gap:10px;margin-top:14px;padding:16px;border:var(--bw) solid var(--ink);border-radius:var(--r);background:var(--bg)}
.qform h3{font-size:1.05rem}.qform .hint{margin:0}.qform .lbl textarea{padding:10px 14px;border:var(--bw) solid var(--ink);border-radius:12px;font:inherit;resize:vertical}
.pnav{display:flex;gap:4px;flex-wrap:wrap}.pnav a{color:var(--ink);text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;border:var(--bw) solid transparent}
.pnav a:hover{border-color:var(--ink);background:var(--lemon)}.pnav a.on{background:var(--ink);color:#fff}
body.pub .top{justify-content:space-between}
.pwrap{max-width:1100px;margin:0 auto;padding:26px clamp(14px,3vw,32px) 40px}
.phero{margin-bottom:22px}.phero h1{font-size:clamp(1.5rem,3.6vw,2.4rem);max-width:22ch}.phero p{max-width:60ch;color:var(--muted);font-size:1.05rem}
.phero h1 mark{background:var(--lemon);padding:0 .15em;border:var(--bw) solid var(--ink);border-radius:10px}
.eyebrow{font:700 .75rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--violet-d);margin:0 0 6px}
.pgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start}@media(max-width:860px){.pgrid{grid-template-columns:1fr}}
.pcard{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);padding:22px;margin-bottom:22px;box-shadow:var(--sh)}
.pcard h1{font-size:1.4rem}.pcard h2{font-size:1.15rem}.ph{font:700 1rem var(--display);margin:18px 0 10px}.pcard>.ph:first-child{margin-top:0}
.pform{display:grid;gap:14px}.pform .two,.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:520px){.pform .two,.two{grid-template-columns:1fr}}
.pform .lbl small{font-weight:400;color:var(--muted)}
.pform textarea,.pform select{padding:10px 14px;border:var(--bw) solid var(--ink);border-radius:12px;font:inherit;background:#fff;width:100%}
.pform input[type=file]{padding:10px;border:var(--bw) dashed var(--ink);border-radius:12px;background:var(--bg);font-size:.9rem}
.pform textarea:focus,.pform select:focus{outline:none;background:#fffbe0;box-shadow:3px 3px 0 var(--pink)}
.drop{display:grid;gap:4px;place-items:center;text-align:center;padding:22px;border:var(--bw) dashed var(--ink);border-radius:14px;background:var(--bg);cursor:pointer;font-weight:400}
.drop.over{background:var(--lemon)}.drop input{display:none}.drop small{color:var(--muted)}
.prevs{display:flex;gap:10px;flex-wrap:wrap}.pv{position:relative}.pv img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:var(--bw) solid var(--ink)}
.pv button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--pink);cursor:pointer;line-height:1;font-weight:700}
.proofprev{max-width:220px;border:var(--bw) solid var(--ink);border-radius:12px}
.how{list-style:none;padding:0;margin:0;display:grid;gap:14px;counter-reset:s}.how li{display:grid;grid-template-columns:34px 1fr;gap:2px 12px;counter-increment:s}
.how li::before{content:counter(s);grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800;border:var(--bw) solid var(--ink)}.how span{color:var(--muted);font-size:.9rem}
.pitems{list-style:none;padding:0;margin:12px 0}.pitems li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:var(--bw) dashed var(--ink)}
.pitems img,.pitems .noimg{width:44px;height:60px;border-radius:6px;border:var(--bw) solid var(--ink);object-fit:cover;background:#eee;flex:none;display:grid;place-items:center}.pitems div{flex:1}.pitems small{display:block;color:var(--muted)}
.plist{list-style:none;padding:0;margin:0}.plist li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:var(--bw) dashed var(--ink)}.plist small{display:block;color:var(--muted)}
.acct{display:flex;justify-content:space-between;gap:10px;align-items:center;border:var(--bw) solid var(--ink);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:var(--bg)}
.acct b{display:block}.acno{display:block;font:800 1.2rem var(--display);letter-spacing:.02em;margin:2px 0}.acct small{color:var(--muted)}
.statusbig{border:var(--bw) solid var(--ink);border-radius:14px;padding:14px 16px;margin:12px 0;background:var(--lemon);box-shadow:3px 3px 0 var(--ink)}.statusbig b{display:block;font:700 1.1rem var(--display)}.statusbig span{color:var(--ink);opacity:.8}
.statusbig.s-dibayar,.statusbig.s-setuju,.statusbig.s-selesai{background:var(--mint)}.statusbig.s-dikirim,.statusbig.s-kuotasi{background:var(--sky)}.statusbig.s-batal,.statusbig.s-ditolak{background:#e5e1ef}.statusbig.s-cicilan{background:#ffb86b}
.track{list-style:none;padding:0;margin:14px 0;position:relative}.track li{display:flex;gap:14px;padding:0 0 18px;position:relative;opacity:.45}
.track li::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:3px;background:#d8d3f0}.track li:last-child::before{display:none}
.track li i{width:26px;height:26px;border-radius:50%;border:var(--bw) solid var(--ink);background:#fff;flex:none;position:relative;z-index:1}
.track li.ok{opacity:1}.track li.ok i{background:var(--mint)}.track li.ok i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:.8rem;font-weight:800}
.track li.now i{background:var(--lemon);animation:blink 1.4s infinite}.track li small{display:block;color:var(--muted)}
.resi{background:var(--bg);border:var(--bw) dashed var(--ink);border-radius:12px;padding:10px 14px}
.note{background:var(--bg);border-radius:12px;padding:10px 14px;border-left:6px solid var(--violet)}
.badge.minat{background:var(--lemon)}.badge.cicilan{background:#ffb86b}.badge.dibayar{background:var(--mint)}.badge.dikirim{background:var(--sky)}.badge.selesai{background:#d9ceff}.badge.batal{background:#e5e1ef}
.pcard .sum,.pcard .t{margin-top:10px}.pcard .flash{margin:12px 0}
/* admin: titipan */
.rq-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}.rq-t{font:700 1.05rem var(--display)}
.rq-body{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:860px){.rq-body{grid-template-columns:1fr}}
.rq-info p{margin:0 0 6px}.rq-note{background:var(--bg);padding:10px 14px;border-radius:12px;border-left:6px solid var(--violet)}
.rq-imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.rq-imgs img{width:86px;height:110px;object-fit:cover;border-radius:8px;border:var(--bw) solid var(--ink)}
.rq-form{display:grid;gap:10px}.rq-calc{background:var(--bg);border:var(--bw) dashed var(--ink);border-radius:12px;padding:8px 12px}.rq-calc summary{cursor:pointer;font-weight:700}
.rq-form .f input,.rq-form .f select,.rq-calc input,.rq-calc select{padding:8px 10px;border:var(--bw) solid var(--ink);border-radius:10px;background:#fff;width:100%}
.badge.rq-baru{background:var(--pink)}.badge.rq-dicek{background:var(--lemon)}.badge.rq-kuotasi{background:var(--sky)}.badge.rq-setuju,.badge.rq-selesai{background:var(--mint)}.badge.rq-ditolak{background:#e5e1ef}
.k-tags{display:flex;gap:4px;flex-wrap:wrap}.k-tags:empty{display:none}.k-tags .badge{font-size:.68rem;padding:0 8px}
.pos{color:var(--ok);font-weight:700}.neg{color:var(--red);font-weight:700}
@media(max-width:860px){.top .pnav{order:5;width:100%;overflow:auto;flex-wrap:nowrap}.top .pnav a{white-space:nowrap}}

/* ============ V3: filter katalog, status berminat/dipesan, panel filter HP ============ */
.tag.int{background:var(--sky)}
.card.is-held{opacity:.86}.card.is-held .slab img{filter:saturate(.65)}
.card h3 mark{background:var(--lemon);color:inherit;border-radius:4px;padding:0 2px}
.card .who{margin:2px 0 0;font-size:.8rem;font-weight:600;color:var(--violet-d)}
.card .who mark{background:var(--lemon);color:inherit;border-radius:4px;padding:0 2px}
.chips.scroll{max-height:190px;overflow:auto;padding:2px 2px 6px;scrollbar-width:thin}
.chips .hint{font-size:.82rem;color:var(--muted)}
.chips button[aria-pressed=true] i{opacity:.8}
.rail .mini{width:100%;margin:0 0 8px;padding:8px 12px;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff}
.rail-head{display:none}
.rail-foot{display:flex;gap:10px;flex-wrap:wrap}.rail-foot #railApply{display:none}
.railov{position:fixed;inset:0;background:rgba(21,18,58,.45);z-index:59}
.fbtn{display:none}.fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--pink);color:var(--ink);font-size:.74rem;border:var(--bw) solid var(--ink)}
.activebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.achip{border:var(--bw) solid var(--ink);background:var(--lemon);padding:4px 12px;border-radius:999px;font-size:.84rem;font-weight:700;cursor:pointer;transition:transform .1s,background .1s}
.achip:hover{background:var(--pink);transform:translateY(-2px)}
.alink{border:0;background:none;color:var(--violet-d);font-weight:700;cursor:pointer;text-decoration:underline;padding:4px 6px}
.empty .btn{margin-top:10px}
.mprice2{display:inline-block;margin:6px 0 16px;padding:2px 12px;border:var(--bw) solid var(--ink);border-radius:99px;font-size:.82rem;font-weight:700;background:var(--mint)}
.mprice2:empty{display:none}
.mprice2[data-status=interest]{background:var(--sky)}.mprice2[data-status=reserved]{background:var(--lemon)}.mprice2[data-status=sold]{background:var(--pink)}
.badge.interest{background:var(--sky)}.badge.hidden{background:#e5e1ef}
@media (max-width:860px){
  .fbtn{display:inline-flex;align-items:center;gap:8px}
  .bar{flex-wrap:wrap;gap:10px}
  .rail{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(92vw,390px);z-index:60;overflow:auto;border-radius:var(--r) 0 0 var(--r);transform:translateX(105%);transition:transform .25s ease;box-shadow:none;padding-bottom:90px}
  .rail.open{transform:none;box-shadow:-8px 0 0 var(--ink)}
  .rail-head{display:flex;justify-content:space-between;align-items:center}
  .rail-head h2{font-size:1rem}
  .rail-foot{position:sticky;bottom:-90px;background:var(--paper);padding:12px 0 0;margin-top:4px;border-top:2px dashed var(--ink)}.rail-foot #railApply{display:inline-flex;flex:1}
  .chips.scroll{max-height:150px}
}
@media (prefers-reduced-motion:reduce){.rail{transition:none}}

/* ============ V4: QRIS di halaman bayar ============ */
.qris{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff;padding:14px;margin-bottom:12px;box-shadow:var(--sh)}
.qris img{width:min(220px,100%);height:auto;border-radius:12px;border:2px solid var(--ink);background:#fff}
.qris>div{flex:1 1 200px}.qris .hint{margin:6px 0 10px}

/* V5: pemilih segmen (dipakai form barang & Keuangan) */
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 16px}
.seg2 button{border:var(--bw) solid var(--ink);background:#fff;border-radius:14px;padding:10px;font-weight:700;cursor:pointer;text-align:center;box-shadow:3px 3px 0 var(--ink)}
.seg2 button small{display:block;font-weight:500;font-size:.74rem;opacity:.8}.seg2 button.on{background:var(--violet);color:#fff}
#ptSw{grid-template-columns:repeat(4,1fr)}@media(max-width:640px){#ptSw{grid-template-columns:1fr 1fr}}

/* ============ V5: halaman Tagihan (bayar.php) & pembayaran ============ */
.inv{max-width:980px;margin:0 auto}.inv-card{padding:26px}
.inv-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
.inv-head h1{margin:0 0 4px;font-size:1.6rem}
.inv-state{border:var(--bw) solid var(--ink);border-radius:16px;padding:10px 18px;text-align:center;box-shadow:3px 3px 0 var(--ink);min-width:150px}
.inv-state b{display:block;font:800 1.05rem var(--display);letter-spacing:.02em}.inv-state span{font-size:.82rem;font-weight:600}
.inv-state.ok{background:var(--mint)}.inv-state.mid{background:#ffb86b}.inv-state.wait{background:var(--lemon)}.inv-state.bad{background:#e5e1ef}
.inv-prog{height:16px;border:var(--bw) solid var(--ink);border-radius:99px;background:#fff;overflow:hidden}.inv-prog i{display:block;height:100%;background:var(--mint);border-right:var(--bw) solid var(--ink);transition:width .5s}
.inv-progt{margin:6px 0 16px}
.invwrap{overflow-x:auto;border:var(--bw) solid var(--ink);border-radius:var(--r);background:#fff}
table.invt{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem;display:table;margin:0;box-shadow:none;border:0}
.invt th{background:var(--ink);color:#fff;text-align:left;padding:10px 12px;font-size:.78rem;white-space:nowrap}
.invt td{padding:10px 12px;border-bottom:1px solid #e4e0f5;vertical-align:middle}
.invt .r{text-align:right}.invt .no{width:38px;text-align:center;color:var(--muted)}
.invt tbody tr:nth-child(even) td{background:#faf9ff}
.invt .it{display:flex;gap:12px;align-items:center;min-width:240px}.invt .it img,.invt .it .noimg{width:40px;height:56px;object-fit:cover;border-radius:6px;border:2px solid var(--ink);flex:none;background:var(--bg)}
.invt .it small{display:block;color:var(--muted);font-size:.76rem;font-weight:500}
.pill{display:inline-block;border:2px solid var(--ink);border-radius:99px;padding:3px 12px;font-size:.78rem;font-weight:700;line-height:1.3}
.invt tfoot td{background:#f3f0ff;font-weight:600;border-bottom:1px solid #e4e0f5}.invt tfoot .t1 td{border-top:var(--bw) solid var(--ink);font-weight:800}
.invt tfoot .t2 td{background:var(--lemon);font:800 1rem var(--display);border-top:var(--bw) solid var(--ink)}
.invt .pos{color:var(--ok)}
.inv-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.inv-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}@media(max-width:820px){.inv-two{grid-template-columns:1fr}}
.backl{margin:0 0 12px}.backl a{font-weight:700;color:var(--violet-d)}
@media(max-width:640px){
  .invwrap{border:0;background:none;overflow:visible}
  table.invt,.invt tbody,.invt tfoot,.invt tr{display:block;min-width:0;width:100%}
  .invt thead{display:none}
  .invt tbody tr{margin:0 0 12px;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);padding:6px 0}
  .invt tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;padding:6px 14px;background:none!important;text-align:right}
  .invt td[data-l]::before{content:attr(data-l);font-weight:700;color:var(--muted);font-size:.76rem;text-align:left;flex:none}
  .invt td.no{display:none}.invt td.it{min-width:0;text-align:left;justify-content:flex-start}.invt td.it::before{display:none}
  .invt tfoot tr{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;background:#f3f0ff;border-radius:12px;margin-bottom:6px}
  .invt tfoot td{background:none!important;border:0;padding:0}.invt tfoot td:empty{display:none}.invt tfoot td[colspan]{flex:1;text-align:left}
}
@media print{
  .top,.foot,.inv-cta,.pform,#toast,.pnav{display:none!important}
  body.shop{background:#fff}.pcard{box-shadow:none;break-inside:avoid}.invwrap{overflow:visible}
}

/* ============ V5: Keuangan lebih sederhana ============ */
.stepn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:.8rem;margin-right:6px}
.itrow2{border:var(--bw) solid var(--ink);border-radius:14px;padding:10px 12px;margin-bottom:10px;background:#fff;display:grid;gap:8px}
.ithead{display:flex;flex-direction:column;gap:2px}
.itctl{display:grid;grid-template-columns:70px 1fr 1.4fr;gap:8px}@media(max-width:520px){.itctl{grid-template-columns:1fr 1fr}.itctl label:last-child{grid-column:1/-1}}
.itctl label{display:grid;gap:3px;font-size:.74rem;font-weight:700;color:var(--muted)}
.itctl input,.itctl select{padding:7px 10px;border:2px solid var(--ink);border-radius:10px;font:inherit;font-weight:500;color:var(--ink);background:#fff;width:100%}
.itbtn{display:flex;gap:8px;flex-wrap:wrap}
.pill2{display:inline-block;border:2px solid var(--ink);border-radius:99px;padding:2px 12px;font-weight:700;font-size:.78rem;white-space:nowrap}
.fsheet td.acts{white-space:nowrap}.fsheet td.acts .btn{margin-right:4px}
.mergehint{margin:8px 0 0;padding:8px 12px;border:2px dashed var(--ink);border-radius:12px;background:#fff;font-size:.84rem}
.mergehint.ok{background:#e4fbf2;border-style:solid}

/* ============ V7: pilih barang dengan mengetik (combobox) ============ */
.cbx{position:relative;min-width:0}
.cbx-in{width:100%;padding-right:34px!important;text-overflow:ellipsis}
.cbx-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:1rem;padding:4px 8px;color:var(--ink)}
.cbx-list{position:fixed;z-index:400;margin:0;padding:4px;list-style:none;overflow:auto;background:#fffbe5;border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);overscroll-behavior:contain}
.cbx-list li{padding:8px 10px;border-radius:8px;cursor:pointer;display:grid;gap:2px}
.cbx-list li.act{background:var(--violet);color:#fff}.cbx-list li.act mark{color:var(--ink)}
.cbx-list li.cur:not(.act){background:#efe9ff}.cbx-list li.dim{opacity:.55}
.cbx-t{font-weight:600;line-height:1.3;word-break:break-word}.cbx-t mark{background:var(--lemon);border-radius:3px;padding:0 1px}
.cbx-m{font-size:.76rem;opacity:.9;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cbx-m i{font-style:normal;font-weight:700;color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:0 9px}
.cbx-list li.cbx-more{cursor:default;font-size:.82rem;color:var(--muted);background:none}

/* ============ V8: halaman Titip (banyak barang, pelanggan diingat) ============ */
.tt-hero{margin:8px 0 22px}.tt-hero h1{margin:10px 0 8px;font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.08}.tt-hero p{margin:0;max-width:640px;font-weight:500}
.tt-tag{display:inline-block;background:var(--lemon);border:var(--bw) solid var(--ink);border-radius:99px;padding:3px 14px;font-weight:800;font-size:.8rem;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}.tt-tag.ok{background:var(--mint)}
.tt-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}@media(max-width:900px){.tt-grid{grid-template-columns:1fr}}
.tt-main{padding:22px}
.tt-sec{display:flex;align-items:center;gap:10px;margin:6px 0 12px}.tt-sec h2{margin:0;font-size:1.1rem}
.tt-n,.tt-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:800 .85rem var(--display);flex:none}
.tt-no{background:var(--violet)}
.tt-who{margin:-4px 0 18px;padding:8px 12px;border:2px dashed var(--ink);border-radius:12px;font-size:.84rem;background:#fff}.tt-who.ok{background:#e4fbf2;border-style:solid}
.tt-it{border:var(--bw) solid var(--ink);border-radius:16px;background:#fff;padding:12px;margin-bottom:12px;box-shadow:4px 4px 0 var(--ink);animation:rise .2s ease-out}
.tt-row{display:flex;gap:10px;align-items:center}
.tt-title{flex:1;min-width:0;padding:10px 12px;border:2px solid var(--ink);border-radius:12px;font:inherit;font-weight:600;background:var(--bg);color:var(--ink)}.tt-title:focus{outline:3px solid var(--violet);outline-offset:1px;background:#fff}
.tt-qty{display:flex;align-items:center;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;flex:none}
.tt-qty button{width:32px;height:38px;border:0;background:var(--lemon);font-weight:800;font-size:1.05rem;cursor:pointer;color:var(--ink)}.tt-qty button:hover{background:var(--pink)}
.tt-qty input{width:44px;height:38px;border:0;text-align:center;font:700 .95rem var(--font,inherit);-moz-appearance:textfield;background:#fff;color:var(--ink)}.tt-qty input::-webkit-outer-spin-button,.tt-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tt-del{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:#fff;font-size:1.2rem;line-height:1;cursor:pointer;flex:none;color:var(--ink)}.tt-del:hover{background:var(--pink)}
.tt-more{margin:8px 0 0 38px;border:0;background:none;color:var(--violet-d);font-weight:700;cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px;font-size:.86rem}
.tt-det{margin:10px 0 0 38px;display:grid;gap:10px}
.tt-photos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tt-drop{display:grid;place-items:center;gap:0;width:112px;min-height:84px;border:2px dashed var(--ink);border-radius:12px;background:var(--bg);cursor:pointer;text-align:center;padding:6px}.tt-drop.over{background:var(--lemon)}.tt-drop input{display:none}.tt-drop b{font-size:.9rem}.tt-drop small{font-size:.68rem;color:var(--muted);line-height:1.2}
.tt-prev{display:flex;gap:8px;flex-wrap:wrap}.tt-prev .pv{position:relative;width:84px;height:84px}.tt-prev img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:2px solid var(--ink)}
.tt-prev .pv button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:var(--pink);font-size:.8rem;line-height:1;cursor:pointer;padding:0;color:var(--ink)}
.tt-add{width:100%;border:var(--bw) dashed var(--ink);background:#fff;border-radius:16px;padding:12px;font:800 .95rem inherit;cursor:pointer;color:var(--ink);transition:background .15s,transform .15s}.tt-add:hover:not(:disabled){background:var(--lemon);transform:translateY(-2px)}.tt-add:disabled{opacity:.55;cursor:default}
.tt-bar{position:sticky;bottom:10px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding:10px 12px 10px 16px;background:var(--lemon);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink)}
.tt-sum b{display:block}.tt-sum small{font-size:.76rem}
.tt-done{text-align:center;padding:10px 0}.tt-done h2{margin:12px 0 4px}
.tt-code{display:inline-block;margin:6px 0 12px;padding:8px 22px;background:var(--mint);border:var(--bw) solid var(--ink);border-radius:14px;font:800 2rem var(--display);letter-spacing:.06em;transform:rotate(-2deg);box-shadow:5px 5px 0 var(--ink)}
.tt-list{list-style:none;margin:0 auto 10px;padding:0;max-width:440px;text-align:left}.tt-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;border-bottom:1px dashed var(--ink)}.tt-list b{flex:none}
.tt-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.tt-mine{margin-top:22px;padding-top:16px;border-top:2px dashed var(--ink)}.tt-mine h3{margin:0 0 10px;font-size:1rem}
.tt-mrow{display:flex;gap:10px;align-items:center;padding:8px 12px;border:2px solid var(--ink);border-radius:12px;margin-bottom:8px;background:#fff;color:var(--ink);text-decoration:none;flex-wrap:wrap}.tt-mrow:hover{background:var(--lemon)}.tt-mrow span{flex:1;min-width:120px;color:var(--muted)}
.tt-mrow i{font-style:normal;font-weight:700;font-size:.76rem;border:2px solid var(--ink);border-radius:99px;padding:1px 10px;background:var(--lemon)}.tt-mrow i.s-kuotasi,.tt-mrow i.s-setuju,.tt-mrow i.s-selesai{background:var(--mint)}.tt-mrow i.s-ditolak{background:#e5e1ef}
.rqitems{list-style:none;margin:10px 0;padding:0}.rqitems li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--ink)}
@media(max-width:560px){.tt-row{flex-wrap:wrap}.tt-title{flex:1 1 100%;order:2}.tt-no{order:1}.tt-qty{order:3}.tt-del{order:1;margin-left:auto}.tt-more,.tt-det{margin-left:0}.tt-bar{bottom:6px}}
@media(prefers-reduced-motion:reduce){.tt-it{animation:none}}
.rq-item{border:2px solid var(--ink);border-radius:14px;padding:10px 12px;margin:0 0 10px;background:#fff}.rq-ih{display:flex;gap:10px;align-items:flex-start}
.rq-no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800;font-size:.78rem;flex:none}
.rq-q{margin-top:8px;max-width:260px}.cust-chip{display:inline-block;margin-top:3px;padding:1px 10px;border:2px solid var(--ink);border-radius:99px;background:var(--lemon);font-weight:700}

/* ============ V9: impor invoice -> draft listing ============ */
.imp-drop.over{background:var(--lemon)}
.imp-file{display:grid;place-items:center;gap:2px;padding:26px;border:var(--bw) dashed var(--ink);border-radius:16px;background:#fff;cursor:pointer;text-align:center}.imp-file input{display:none}.imp-file b{font-size:1.05rem}.imp-file span{font-size:.8rem;color:var(--muted)}
.imp-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:8px 0 14px}.imp-meta div{border:2px solid var(--ink);border-radius:12px;padding:8px 12px;background:#fff}.imp-meta span{display:block;font-size:.72rem;color:var(--muted);font-weight:700}.imp-meta b{font-size:.95rem;word-break:break-all}
.imp-t td,.imp-t th{padding:8px 8px;vertical-align:top}.imp-t tr.dim{opacity:.55}.imp-title{width:100%;min-width:220px;padding:6px 8px;border:2px solid var(--ink);border-radius:10px;font:inherit;font-weight:600}.imp-n{width:84px;padding:6px 8px;border:2px solid var(--ink);border-radius:10px;font:inherit;text-align:right}
.imp-t select{padding:6px;border:2px solid var(--ink);border-radius:10px;font:inherit}
.imp-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.dr{margin-bottom:16px}.dr-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}.dr-cost{text-align:right}.dr-cost span{font-size:.72rem;color:var(--muted);font-weight:700;display:block}.dr-cost b{font-size:1.1rem}.dr-cost small{display:block;color:var(--muted)}
.dr-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}@media(max-width:760px){.dr-grid{grid-template-columns:1fr}}
.dr-prev{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.dr-prev .pv,.dr-prev .pvnew .pv{position:relative;width:104px}.dr-prev .pvnew{display:contents}
.dr-prev img{width:104px;height:140px;object-fit:cover;border-radius:10px;border:2px solid var(--ink);background:#f3f0ff;display:block}.dr-prev .pv.new img{border-style:dashed}
.dr-prev .cap{position:absolute;left:4px;bottom:4px;background:var(--lemon);border:2px solid var(--ink);border-radius:99px;font-size:.66rem;font-weight:700;padding:0 8px}
.dr-prev .pv button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:var(--pink);font-size:.8rem;line-height:1;cursor:pointer;padding:0;color:var(--ink)}
.dr-fields .f{margin-bottom:10px}.dr-fields input,.dr-fields textarea,.dr-fields select{width:100%}.dr-row{display:grid;grid-template-columns:1fr 110px;gap:10px}
.dr-msg{min-height:1.2em;margin:8px 0}.dr.done{background:#e4fbf2}
.nav a[data-n]:not([data-n="0"])::after{content:attr(data-n);margin-left:6px;background:var(--pink);border:2px solid var(--ink);border-radius:99px;padding:0 7px;font-size:.7rem}
.imp-cost{border:var(--bw) solid var(--ink);border-radius:14px;padding:12px 14px;margin:6px 0 12px;background:#fff}.imp-cost h3{margin:0 0 8px;font-size:1rem}
.invedit{border:var(--bw) solid var(--ink);border-radius:14px;padding:12px 14px;margin-top:14px;background:var(--lemon)}.invedit h3{margin:0 0 8px;display:flex;justify-content:space-between;gap:10px}.invedit .t{background:#fff}

/* ============ V3: lapak, penjual, laporan ============ */
/* --- katalog pembeli: tab lapak + kartu merch --- */
.lapaktabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.lapaktabs button{border:var(--bw) solid var(--ink);background:#fff;border-radius:999px;padding:9px 18px;font-weight:700;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s,background .1s}
.lapaktabs button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);background:var(--lemon)}
.lapaktabs button.on{background:var(--violet);color:#fff}
.lapaktabs button i{font-style:normal;opacity:.7;margin-left:8px;font-size:.8rem}
.card.merch{padding:10px;gap:8px}
.card.merch .mpic{position:relative;aspect-ratio:1/1;border-radius:12px;border:var(--bw) solid var(--ink);overflow:hidden;background:linear-gradient(135deg,#fff3a8,#ffd0e6 55%,#c9ecff)}
.card.merch .mpic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.card.merch:hover .mpic img{transform:scale(1.05)}
.card.merch .mpic.noimg{display:grid;place-items:center;color:var(--muted);font-size:.85rem;font-weight:600}
.card.merch .variants{margin:0;display:flex;gap:6px;flex-wrap:wrap}
.card.merch .variants span{border:var(--bw) solid var(--ink);border-radius:999px;padding:1px 10px;font-size:.74rem;font-weight:700;background:var(--mint)}
.card.merch .mrow{margin:auto 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.card.merch .mrow .price{margin-top:0}
.card.merch .mstock{font-size:.72rem;color:var(--muted);font-weight:700}
.card.merch .tag{top:6px;z-index:3}
.card.merch.is-held .mpic img{filter:saturate(.65)}
.grid.is-merch{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card .by{margin:0;font-size:.74rem;font-weight:600;color:var(--muted)}
.mseller{margin:0 0 12px;font-size:.9rem}
ul.multi{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.multi li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;padding:8px 10px}
ul.multi li>div{flex:1;min-width:140px}

/* --- dashboard: pilihan penjual, unduh laporan, halaman akun/profil/kurs --- */
.scopebar{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);font-size:.92rem}
.scopebar.on{background:var(--lemon)}.scopebar.solo{background:#e8fbf4;display:block}
.scopebar select{width:auto;min-width:200px;border:var(--bw) solid var(--ink);border-radius:999px;padding:7px 14px;background:#fff;font-weight:700}
.scopebar .sb-l{font:800 .78rem var(--display);text-transform:uppercase;letter-spacing:.02em}
.scopebar .sb-t{flex:1;min-width:200px}
.repbox{position:relative;display:inline-block}
.repbox summary{list-style:none;cursor:pointer}.repbox summary::-webkit-details-marker{display:none}
.repbox .repform{position:absolute;right:0;top:calc(100% + 8px);z-index:40;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;padding:14px;box-shadow:var(--sh);min-width:280px;max-width:calc(100vw - 32px);display:grid;gap:10px}
.repbox .repdates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.repbox .repdates label{display:grid;gap:3px;font-size:.78rem;font-weight:700}
.repbox .repdates input{width:100%;border:var(--bw) solid var(--ink);border-radius:10px;padding:6px 8px;background:#fff}
.repbox .repbtns{display:flex;gap:8px;flex-wrap:wrap}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:900px){.agrid{grid-template-columns:1fr}}
.pwbox{display:flex;gap:8px}.pwbox input{flex:1;min-width:0}
.pwbox button{border:var(--bw) solid var(--ink);background:#fff;border-radius:12px;padding:0 14px;font-weight:700;cursor:pointer}
.kurs-out{font:800 1.5rem var(--display);margin:14px 0 4px;word-break:break-word}

/* ============ V3.1: akun pembeli ============ */
.acctabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 18px;padding-bottom:12px;border-bottom:var(--bw) solid var(--ink)}
.acctabs a{color:var(--ink);text-decoration:none;font-weight:700;padding:8px 16px;border-radius:999px;border:var(--bw) solid transparent}
.acctabs a:hover{border-color:var(--ink);background:var(--lemon)}.acctabs a.on{background:var(--ink);color:#fff}
.acctabs .nb{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--pink);color:var(--ink);border:2px solid var(--ink);font-size:.72rem}
.acstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 20px}
.acstat{background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;padding:14px 16px;box-shadow:var(--sh)}
.acstat:nth-child(1){background:var(--lemon)}.acstat b{display:block;font:800 1.35rem var(--display);word-break:break-word}.acstat span{font-size:.82rem;color:var(--muted);font-weight:600}
.ocard{background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;padding:14px 16px;margin:0 0 14px;box-shadow:var(--sh)}
.ohead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.oamt{text-align:right}.oamt b{display:block;font:800 1.1rem var(--display)}.oamt small{color:var(--muted);font-weight:600}
.otitles{margin:8px 0 10px;font-size:.92rem}
.ocard .note{margin:0 0 10px;background:#f7f4ff;border:2px dashed var(--ink);border-radius:10px;padding:8px 12px;font-size:.88rem}
.oacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}.oacts form{margin:0}
.pill{display:inline-block;padding:1px 10px;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:.74rem;background:var(--lemon);vertical-align:middle}
.pill.s-dibayar,.pill.s-selesai{background:var(--mint)}.pill.s-dikirim{background:var(--sky)}.pill.s-batal{background:#e5e1ef}.pill.s-cicilan{background:#ffd9a8}
.flashp{background:var(--mint);border:var(--bw) solid var(--ink);border-radius:14px;padding:12px 16px;margin:0 0 16px;font-weight:600;box-shadow:var(--sh)}
.flashp.warn{background:var(--lemon)}.flashp form{margin-left:8px;display:inline}
.loginbox{background:#fff7d6;border:var(--bw) solid var(--ink);border-radius:14px;padding:14px;margin:0 0 12px}.loginbox p{margin:0 0 10px}
.loginbox[hidden],#coAuthed[hidden]{display:none}

/* ============ V14: Clean theme ============ */
:root{
  --brand:#6b4cff; --brand-d:#5237e0; --brand-l:#8b75ff;
  --soft:#f6f4ff; --soft-2:#faf9ff; --line-soft:#e6e2ff;
  --ink-soft:#2a2650; --ok-soft:#e4fbf2; --warn-soft:#fff5cc; --danger-soft:#ffe5ec;
}
body.pub{background:var(--soft)}
.pcard{box-shadow:0 2px 12px rgba(21,18,58,.06);border-color:var(--line-soft)}
.pcard h1,.pcard h2,.pcard h3{color:var(--ink-soft)}

.bhero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-l) 100%);color:#fff;border-radius:22px;
  padding:26px 24px;margin:0 0 22px;border:0;box-shadow:0 8px 24px rgba(107,76,255,.18)}
.bhero h1{font-size:clamp(1.35rem,3vw,1.8rem);margin:0 0 6px;color:#fff}
.bhero p{margin:0;opacity:.92;font-size:.95rem;color:#fff}
.bhero .btn{box-shadow:0 3px 0 rgba(0,0,0,.18)}
.bhero .chip{display:inline-block;padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.18);font-size:.78rem;font-weight:700;margin-right:6px}

.prof-card{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:#fff;border:1.5px solid var(--line-soft);
  border-radius:20px;padding:18px 20px;margin:0 0 18px;box-shadow:0 2px 12px rgba(21,18,58,.05)}
.prof-av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-l) 100%);
  color:#fff;display:grid;place-items:center;font:800 1.6rem/1 var(--display);flex:none;box-shadow:0 4px 12px rgba(107,76,255,.35)}
.prof-meta{flex:1;min-width:180px}.prof-meta h2{margin:0 0 2px;font-size:1.15rem;color:var(--ink-soft)}
.prof-meta small{color:var(--muted);display:block;line-height:1.6}
.prof-meta .badge{margin-top:4px;margin-right:4px}
.prof-actions{display:flex;gap:8px;flex-wrap:wrap}
.prof-actions .btn{border-radius:12px;box-shadow:0 2px 0 var(--ink)}

.bstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 22px}
.bstat{background:#fff;border:1.5px solid var(--line-soft);border-radius:16px;padding:14px 16px;box-shadow:0 2px 8px rgba(21,18,58,.04)}
.bstat small{display:block;font-size:.74rem;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.bstat b{font:800 1.5rem var(--display);color:var(--ink-soft);display:block;line-height:1.1}
.bstat.on-warn b{color:#b26a00}.bstat.on-ok b{color:var(--ok)}.bstat.on-brand b{color:var(--brand)}

.ocard2{background:#fff;border:1.5px solid var(--line-soft);border-radius:18px;padding:18px 20px;
  margin:0 0 14px;box-shadow:0 2px 10px rgba(21,18,58,.05);transition:border-color .15s,box-shadow .15s}
.ocard2:hover{border-color:var(--brand-l);box-shadow:0 4px 16px rgba(107,76,255,.1)}
.ocard2 .head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.ocard2 .code{font:800 .95rem var(--display);color:var(--ink-soft);letter-spacing:.01em}
.ocard2 .when{color:var(--muted);font-size:.8rem}
.ocard2 .total{text-align:right}
.ocard2 .total b{display:block;font:800 1.15rem var(--display);color:var(--ink-soft)}
.ocard2 .total small{color:var(--muted);font-weight:600}
.ocard2 .items-line{font-size:.88rem;color:var(--muted);margin:0 0 12px}

.pill2{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;
  font:700 .78rem var(--body);background:var(--warn-soft);color:#8a6800;border:1.5px solid transparent}
.pill2::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.85}
.pill2.ok{background:var(--ok-soft);color:#0f8f62}
.pill2.danger{background:var(--danger-soft);color:#b31a3a}
.pill2.info{background:#e6f0ff;color:#2563b8}
.pill2.brand{background:#eee9ff;color:var(--brand-d)}
.pill2.muted{background:#f1f0f6;color:var(--muted)}

.tl-h{display:flex;justify-content:space-between;gap:8px;margin:14px 0 6px;overflow-x:auto;padding:4px 0}
.tl-h .step{flex:1;min-width:72px;text-align:center;position:relative;font-size:.72rem;color:var(--muted);font-weight:600}
.tl-h .step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line-soft);z-index:0}
.tl-h .step:first-child::before{display:none}
.tl-h .step i{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#fff;border:2px solid var(--line-soft);color:var(--muted);z-index:1;margin-bottom:4px;transition:all .2s}
.tl-h .step.ok i{background:var(--ok);border-color:var(--ok);color:#fff}
.tl-h .step.ok::before{background:var(--ok)}
.tl-h .step.now i{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 4px rgba(107,76,255,.18);animation:tlPulse 1.8s infinite}
.tl-h .step.now{color:var(--brand-d);font-weight:800}
.tl-h .step.now::before{background:var(--brand)}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 4px rgba(107,76,255,.18)}50%{box-shadow:0 0 0 7px rgba(107,76,255,.06)}}
.tl-h .step b{display:block;font-weight:700;color:inherit}
.tl-h .step small{display:block;font-weight:500;font-size:.68rem;opacity:.85}
.ocard2 .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ocard2 .acts .btn{border-radius:12px}

.tabs2{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 20px;border-bottom:1.5px solid var(--line-soft);padding:0 0 0 4px}
.tabs2 a{color:var(--ink-soft);text-decoration:none;font-weight:700;padding:10px 16px;border-radius:12px 12px 0 0;
  font-size:.92rem;border-bottom:2px solid transparent;margin-bottom:-2px;display:inline-flex;align-items:center;gap:6px}
.tabs2 a:hover{background:var(--soft)}
.tabs2 a.on{background:var(--soft);border-bottom-color:var(--brand);color:var(--brand-d)}
.tabs2 .nb{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--brand);color:#fff;font-size:.7rem}

.lbl2{display:grid;gap:5px;font-size:.82rem;font-weight:700;color:var(--ink-soft);margin-bottom:14px}
.lbl2 input,.lbl2 select,.lbl2 textarea{padding:11px 14px;border:1.5px solid var(--line-soft);border-radius:12px;
  font:inherit;background:#faf9ff;color:var(--ink);transition:all .15s;width:100%}
.lbl2 input:focus,.lbl2 select:focus,.lbl2 textarea:focus{outline:none;background:#fff;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(107,76,255,.12)}
.lbl2 small{font-weight:400;color:var(--muted);font-size:.78rem}

.bulk-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:#fff;border:1.5px solid var(--brand);
  border-radius:14px;padding:10px 14px;margin-bottom:14px;box-shadow:0 3px 14px rgba(107,76,255,.15);position:sticky;top:70px;z-index:20}
.bulk-bar .cnt{font-weight:800;color:var(--brand-d);background:#eee9ff;padding:3px 12px;border-radius:99px}
.bulk-bar select,.bulk-bar input{padding:8px 12px;border:1.5px solid var(--line-soft);border-radius:10px;background:#fff;min-width:120px}
.bulk-bar .btn{border-radius:10px}
.bulkwrap .check-cell{width:36px;text-align:center}
.bulkwrap .check-cell input{width:18px;height:18px;accent-color:var(--brand)}
.bulkwrap table.t tr.sel td{background:#f4efff!important}

.flash2{background:var(--ok-soft);color:#0f6f4c;border:1.5px solid rgba(15,143,98,.35);border-radius:14px;
  padding:12px 16px;margin:0 0 16px;font-weight:600}
.flash2.err{background:var(--danger-soft);color:#b31a3a;border-color:rgba(227,51,75,.35)}
.flash2.warn{background:var(--warn-soft);color:#8a6800;border-color:rgba(255,180,0,.35)}

.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--brand-d);text-decoration:none;
  font-weight:700;padding:6px 12px;border-radius:99px;background:#eee9ff;margin-bottom:14px;font-size:.85rem}
.backlink:hover{background:var(--brand);color:#fff}

.btn.google{background:#fff;color:#15123a;justify-content:center;font-weight:700}
.btn.google:hover{background:#f5f5f5;color:#15123a}
.btn.google svg{flex:none}

@media(max-width:640px){
  .bhero{padding:22px 18px;border-radius:18px}
  .prof-card{padding:14px 16px;gap:12px}
  .prof-av{width:52px;height:52px;font-size:1.3rem}
  .prof-meta h2{font-size:1rem}
  .bstat{padding:11px 13px}.bstat b{font-size:1.25rem}
  .ocard2{padding:14px 16px}
  .tl-h .step{min-width:60px;font-size:.66rem}
  .tl-h .step i{width:22px;height:22px}
  .bulk-bar{position:static}
}