/* KAYCO Item Master v9 — share links, download all (zip panel), API keys, and the public share page (/s/<token>, share.html).
   Same tokens as im.css (plum, ink, line), Plus Jakarta Sans from shop.css. Prefix sh-. */

/* ---------- zip panel (item page sheet + share page card) ---------- */
.sh-zip { display:flex; flex-direction:column; gap:12px; }
.sh-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.sh-k { width:84px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
.sh-seg { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:14px; background:var(--mist); max-width:100%; }
.sh-seg-b { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ink-600); white-space:nowrap; }
.sh-seg-b small { font-size:11.5px; font-weight:700; color:var(--ink-400); }
.sh-seg-b:hover:not(:disabled) { color:var(--ink-900); }
.sh-seg-b.is-on { background:#fff; color:var(--plum); box-shadow:0 1px 2px rgba(27,24,31,.08), 0 0 0 1px var(--line); }
.sh-seg-b.is-on small { color:var(--plum); }
.sh-seg-b:disabled { opacity:.45; cursor:not-allowed; }
.sh-seg-b:focus-visible { outline:2px solid var(--plum); outline-offset:1px; }
.sh-sum { display:flex; align-items:baseline; gap:10px; font-size:15px; color:var(--ink-900); }
.sh-sum span { font-size:13.5px; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.sh-note { font-size:13px; line-height:1.5; color:var(--ink-500); }
.sh-warn, .sh-ok { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; background:#FFF6E5; color:#7A5308; }
.sh-warn svg, .sh-ok svg { flex:none; margin-top:1px; }
.sh-warn.is-bad { background:#FCECEA; color:#9B2C1F; }
.sh-warn .btn-ghost { margin:-6px 0 -6px auto; }
.sh-ok { background:var(--leaf-50); color:#0E6B4C; }
.sh-prog p { margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.sh-prog-n { color:var(--ink-700); }
.sh-bar { height:8px; border-radius:99px; background:var(--mist); overflow:hidden; }
.sh-bar span { display:block; height:100%; border-radius:99px; background:var(--plum); transition:width .2s ease-out; }
.sh-acts { display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- share sheet (item page / list) ---------- */
.sh-lab { display:block; margin:2px 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-400); }
.sh-lab small { margin-left:6px; letter-spacing:0; text-transform:none; font-size:12px; color:var(--ink-500); }
.sh-pickh { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:16px; }
.sh-pickq { display:flex; gap:2px; margin-bottom:4px; }
.sh-pickq button { height:28px; padding:0 9px; border-radius:8px; font-size:12.5px; font-weight:700; color:var(--plum); }
.sh-pickq button:hover { background:var(--plum-50); }
.sh-pick { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.sh-pi { display:flex; align-items:center; gap:10px; min-height:52px; padding:6px 10px 6px 8px; border-radius:12px; cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); }
.sh-pi.is-on { box-shadow:inset 0 0 0 1.5px var(--plum-200); background:var(--plum-50); }
.sh-pi input { flex:none; width:18px; height:18px; accent-color:var(--plum); }
.sh-pi-t { flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; overflow:hidden; border-radius:9px; background:#fff; color:var(--ink-400); box-shadow:0 0 0 1px var(--line); }
.sh-pi-t img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.sh-pi-m { display:flex; min-width:0; flex-direction:column; }
.sh-pi-m b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:var(--ink-900); }
.sh-pi-m small { font-size:12px; color:var(--ink-500); }
.sh-chk { display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:14px; font-weight:600; color:var(--ink-900); cursor:pointer; }
.sh-chk input { flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--plum); }
.sh-chk small { display:block; font-size:12.5px; font-weight:500; color:var(--ink-500); }
.sh-chk-s { margin-top:0; font-size:13.5px; align-items:center; }
.sh-chk-s input { margin-top:0; }
.sh-made { display:flex; flex-direction:column; gap:12px; }
.sh-url { display:flex; align-items:center; gap:8px; min-width:0; }
.sh-url input { min-width:0; flex:1; height:40px; padding:0 12px; border-radius:12px; border:1px solid var(--line); background:var(--canvas); font:500 13px/1 var(--mono); color:var(--ink-900); }
.sh-url input:focus { outline:none; border-color:var(--plum); box-shadow:0 0 0 4px rgba(122,56,114,.12); }

/* item page: "Download all" next to the tab counts; viewer: web rendition links */
.ip-mc { display:inline-flex; align-items:center; gap:8px; }
.sh-vw { display:inline-flex; gap:4px; }
.sh-vw-a { display:inline-flex; align-items:center; height:30px; padding:0 10px; border-radius:99px; font-size:12.5px; font-weight:700; color:var(--plum); background:var(--plum-50); box-shadow:inset 0 0 0 1px var(--plum-200); white-space:nowrap; }
.sh-vw-a:hover { background:var(--plum-100); }

/* ---------- #/shares and #/keys ---------- */
.sh-list { display:flex; flex-direction:column; gap:8px; }
.sh-li { display:flex; align-items:center; gap:12px; min-height:68px; padding:10px 12px; border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.sh-li.is-off { background:var(--canvas); }
.sh-li.is-off .sh-li-t, .sh-li.is-off .sh-li-img { opacity:.6; }
.sh-li-img { flex:none; width:44px; height:44px; border-radius:12px; }
.sh-li-ph { display:inline-flex; align-items:center; justify-content:center; background:var(--plum-50); color:var(--plum); }
.sh-li-m { min-width:0; flex:1; }
.sh-li-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; color:var(--ink-900); }
.sh-li-s { display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:2px; font-size:12.5px; color:var(--ink-500); }
.sh-li-a { flex:none; display:flex; align-items:center; gap:4px; }
.sh-rv { color:#9B2C1F !important; }
.sh-rv:hover { background:#FCECEA !important; }
.sh-off { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:99px; background:var(--mist); font-size:12px; font-weight:700; color:var(--ink-500); white-space:nowrap; }
.sh-mono, .sh-code { font-family:var(--mono); font-size:.95em; }
.sh-code { padding:1px 6px; border-radius:6px; background:var(--mist); color:var(--ink-700); word-break:break-all; }
.sh-fresh { display:flex; flex-direction:column; gap:10px; max-width:720px; margin-top:16px; padding:16px; border-radius:18px; background:var(--plum-50); box-shadow:inset 0 0 0 1px var(--plum-200); }
.sh-fresh-h { display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--ink-900); }
.sh-fresh-h svg { flex:none; color:var(--plum); }
.sh-fresh .btn-ghost { align-self:flex-start; }
.sh-pre { overflow-x:auto; padding:10px 12px; border-radius:12px; background:#fff; font:500 12.5px/1.5 var(--mono); color:var(--ink-700); box-shadow:inset 0 0 0 1px var(--line); white-space:pre; }
@media (max-width:639px) {
  .sh-li { flex-wrap:wrap; }
  .sh-li-a { width:100%; justify-content:flex-end; margin-top:-2px; }
}

/* ---------- public share page ---------- */
.sh-pub { min-height:100dvh; background:var(--canvas); color:var(--ink-900); }
.sh-boot { display:flex; justify-content:center; padding:20vh 0; }
.sh-hd { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter:blur(12px) saturate(1.5); -webkit-backdrop-filter:blur(12px) saturate(1.5); }
.sh-hd-in { display:flex; align-items:center; gap:12px; height:60px; }
.sh-logo { height:32px; width:auto; mix-blend-mode:multiply; }
.sh-hd .im-logo-l { display:inline; }
.sh-hd-tag { margin-left:auto; padding:5px 11px; border-radius:99px; background:var(--plum-50); color:var(--plum); font-size:12px; font-weight:700; white-space:nowrap; }
.sh-main { display:flex; flex-direction:column; gap:16px; padding-top:28px; padding-bottom:48px; }
.sh-intro { padding:4px 0 4px; }
.sh-eye { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--plum); }
.sh-h1 { margin-top:6px; font-size:clamp(26px, 4vw, 36px); line-height:1.12; letter-spacing:-.02em; overflow-wrap:anywhere; }
.sh-sub { margin-top:8px; font-size:14px; color:var(--ink-500); }
.sh-card, .sh-item { padding:18px 20px 20px; border-radius:22px; background:#fff; box-shadow:0 0 0 1px var(--line); }
.sh-h2 { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:15px; font-weight:800; color:var(--ink-950); }
.sh-h2 svg { color:var(--plum); }
.sh-dlc { max-width:640px; }
.sh-brand { font-size:12.5px; font-weight:700; color:var(--ink-500); }
.sh-in { margin-top:2px; font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.015em; color:var(--ink-950); overflow-wrap:anywhere; }
.sh-codes { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.sh-codes div { display:flex; flex-direction:column; gap:1px; min-width:0; padding:7px 12px; border-radius:12px; background:var(--plum-50); box-shadow:inset 0 0 0 1px var(--plum-100); }
.sh-codes dt { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--plum); }
.sh-codes dd { font-size:14px; font-weight:700; color:var(--ink-900); overflow-wrap:anywhere; }
.sh-h3 { display:flex; align-items:baseline; gap:8px; margin:20px 0 10px; font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink-700); }
.sh-h3 small { font-size:12px; font-weight:700; color:var(--ink-400); }
.sh-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
@media (min-width:640px) { .sh-grid { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; } }
@media (min-width:1024px) { .sh-grid { grid-template-columns:repeat(8, minmax(0, 1fr)); } }
.sh-t { position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); cursor:zoom-in; transition:box-shadow .15s; }
.sh-t:hover { box-shadow:inset 0 0 0 2px var(--plum-200); }
.sh-t:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }
.sh-t img { position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; mix-blend-mode:multiply; }
.sh-t-x { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:var(--mist); color:var(--ink-400); font-size:11px; font-weight:800; letter-spacing:.08em; }
.sh-t-c { position:absolute; left:6px; bottom:6px; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.92); font-size:10.5px; font-weight:700; color:var(--ink-500); box-shadow:0 0 0 1px var(--line); }
.sh-files { display:flex; flex-direction:column; }
.sh-f { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:4px 12px; padding:10px 0; border-top:1px solid #F1EFF2; }
.sh-f:first-child { border-top:0; }
.sh-f-ic { display:flex; flex-direction:column; align-items:center; justify-content:center; width:44px; height:48px; border-radius:10px; background:#F7F0F7; color:var(--plum); }
.sh-f-ic b { margin-top:1px; font-size:9px; font-weight:800; letter-spacing:.06em; }
.sh-f-m { min-width:0; }
.sh-f-n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; color:var(--ink-950); }
.sh-f-s { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:3px; font-size:12.5px; color:var(--ink-500); }
.sh-chip { padding:1px 8px; border-radius:12px; background:var(--mist); font-size:11.5px; font-weight:600; color:var(--ink-700); }
.sh-f-a { display:flex; gap:6px; }
.sh-ft { padding:20px 0 max(24px, env(safe-area-inset-bottom)); border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-500); }
.sh-gone { max-width:460px; margin:8vh auto 0; text-align:center; }
.sh-gone-i { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:16px; background:var(--plum-100); color:var(--plum); }
.sh-gone h1 { margin-top:14px; font-size:24px; line-height:1.2; }
.sh-gone p { margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--ink-500); }
@media (max-width:479px) {
  .sh-hide-xs { display:none; }
  .sh-hd .im-logo-l { display:none; }
  .sh-card, .sh-item { padding:16px; border-radius:20px; }
  .sh-k { width:auto; flex-basis:100%; }
}

/* share page viewer */
.sh-v { position:fixed; inset:0; z-index:110; display:flex; flex-direction:column; background:var(--canvas); }
.sh-vbar { display:flex; align-items:center; gap:12px; padding:max(10px, env(safe-area-inset-top)) 12px 10px 20px; border-bottom:1px solid var(--line); background:#fff; }
.sh-vt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; color:var(--ink-900); }
.sh-vs { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--ink-500); }
.sh-vacts { display:flex; flex:none; align-items:center; gap:4px; }
.sh-vx { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:99px; color:var(--ink-700); }
.sh-vx:hover { background:var(--mist); }
.sh-vstage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px; }
.sh-vstage img { max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.sh-vn { position:absolute; top:50%; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-top:-22px; border-radius:99px; background:rgba(255,255,255,.94); color:var(--ink-700); box-shadow:0 1px 2px rgba(27,24,31,.08), 0 0 0 1px var(--line); }
.sh-vn.is-l { left:12px; } .sh-vn.is-r { right:12px; }
@media (max-width:479px) { .sh-vbar { padding-left:14px; gap:8px; } .sh-vw-a { padding:0 8px; } }