/* Themed to match yiwuduan.com — cream/ink, EB Garamond + system sans. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
:root{
  --bg:#faf7f2; --panel:#ffffff; --panel2:#f3eee4; --line:#e6dfd4; --ink:#14110d;
  --muted:#7a746c; --accent:#b13b2e; --accent2:#b13b2e; --danger:#b13b2e;
  --serif:'EB Garamond','Iowan Old Style',Georgia,serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--accent); text-decoration:none;}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-0.01em;}
.wrap{max-width:560px; margin:0 auto; padding:24px 16px calc(40px + env(safe-area-inset-bottom));}
.brand{font-family:var(--serif); font-size:20px; letter-spacing:6px; color:var(--ink); text-align:center; margin:14px 0 22px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:18px; margin:12px 0;}
.muted{color:var(--muted);}
.center{text-align:center;}
small{color:var(--muted);}

label.field{display:block; font-size:12px; color:var(--muted); margin:14px 0 6px;}
input[type=text], input[type=email]{
  width:100%; background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:13px 14px; border-radius:4px; font-size:16px;}
input:focus{outline:1px solid var(--ink);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:13px 16px; border-radius:4px; font-size:15px; font-weight:600; cursor:pointer; width:100%;}
.btn:active{filter:brightness(0.97);}
.btn.primary{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.btn.primary:active{background:var(--accent); border-color:var(--accent);}
.btn.ghost{background:transparent;}
.btn.sm{width:auto; padding:9px 12px; font-size:13px;}
.btn.danger{color:var(--danger); border-color:var(--line);}
.row{display:flex; gap:8px; align-items:center;}
.row.wrap{flex-wrap:wrap;}
.spacer{flex:1;}

.list{display:flex; flex-direction:column; gap:10px;}
.item{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:4px; padding:12px; cursor:pointer;}
.item:active{background:var(--panel2);}
.thumb{width:54px; height:54px; border-radius:4px; object-fit:cover; background:var(--panel2); flex:0 0 auto;}
.item .meta{flex:1; min-width:0;}
.item .meta b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.item .meta small{display:block;}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); border:1px solid var(--ink); color:var(--bg);
  padding:10px 16px; border-radius:4px; font-size:13px; z-index:50;
  opacity:0; transition:opacity .25s; pointer-events:none; max-width:90vw; text-align:center;}
.toast.show{opacity:1;}

.banner{background:#f3eee4; border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; border-radius:4px; font-size:13px; margin:12px 0; line-height:1.5;}

.tag{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:3px;
  background:var(--ink); color:var(--bg); letter-spacing:.04em;}
.hide{display:none !important;}

select{appearance:none; -webkit-appearance:none;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a746c' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;
  border:1px solid var(--line); color:var(--ink); padding:13px 38px 13px 14px;
  border-radius:4px; font-size:16px; cursor:pointer;}
select:focus{outline:1px solid var(--ink);}

/* ---- design gallery (client showcase) ---- */
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.gcard{position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--panel); cursor:pointer;}
.gcard:active{filter:brightness(0.97);}
.gcard img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--panel2);}
.gcard .cap{padding:8px 10px;}
.gcard .cap b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gcard .cap small{display:block; color:var(--muted); font-size:11px;}
.gcard .del{position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  border:none; background:rgba(0,0,0,.6); color:#fff; font-size:13px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;}
.gcard .del:active{background:var(--danger);}
.gcard .present-mini{position:absolute; top:6px; left:6px; width:30px; height:30px; border-radius:50%;
  border:none; background:rgba(0,0,0,.6); color:#fff; font-size:13px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding-left:2px;}
.gcard .present-mini:active{background:var(--accent); color:#fff;}

/* ---- present mode (full-screen showcase) ---- */
.present{position:fixed; inset:0; z-index:100; background:#000; display:none;
  flex-direction:column; align-items:center; justify-content:center;}
.present.show{display:flex;}
.present img{max-width:94vw; max-height:80vh; object-fit:contain;}
.present .pbar{position:absolute; top:0; left:0; right:0; display:flex; align-items:center;
  justify-content:space-between; padding:16px 18px calc(16px + env(safe-area-inset-top));
  background:linear-gradient(rgba(0,0,0,.7),transparent);}
.present .pbar .ptitle{font-size:15px; font-weight:700;}
.present .pbar .psub{font-size:12px; color:var(--muted);}
.present .pclose,.present .pnav{background:rgba(255,255,255,.14); border:none; color:#fff; cursor:pointer;}
.present .pclose{width:40px; height:40px; border-radius:50%; font-size:18px;}
.present .pnav{position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%; font-size:24px;}
.present .pnav.prev{left:14px;} .present .pnav.next{right:14px;}
.present .pclose:active,.present .pnav:active{background:rgba(255,255,255,.3);}
.present .pcount{position:absolute; bottom:calc(22px + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%); font-size:13px; color:var(--muted);}