.mock-fig{gap:var(--sp-12);display:grid}.mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(12px,3vw,24px)}.mock .ui{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);font-size:14px;line-height:1.5}.mock .ui-head{align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-bottom:1px solid var(--line);display:flex}.mock .ui-title{font-weight:600}.mock .ui-meta{color:var(--muted);margin-left:auto;font-size:13px}.mock .ui-head .wm{font-size:16px}.mock .ui-body{gap:var(--sp-12);padding:var(--sp-16);display:grid}.mock .ui-label{color:var(--muted);font-size:13px;line-height:1.4;display:block}.mock .ui-sub{color:var(--muted);margin:0;font-size:13px;font-weight:500}.mock .ui-row{gap:2px;display:grid}.mock .ui-opts{gap:var(--sp-8);padding:0;list-style:none;display:grid}.mock .ui-opt{justify-content:space-between;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:8px;display:flex}.mock .ui-opt.on{border-color:var(--accent)}.mock .ui-opt svg{width:16px;height:16px;color:var(--accent);flex:none}.mock .ui-media{gap:var(--sp-16);grid-template-columns:88px 1fr;align-items:end;display:grid}.mock .vid{aspect-ratio:9/16;padding:var(--sp-8);color:#fff;text-align:center;background:#1c2133;border-radius:8px;justify-content:center;align-items:flex-end;font-size:11px;font-weight:600;line-height:1.25;display:flex}.mock .trim{height:8px;margin:var(--sp-8) 0 var(--sp-4);background:var(--line);border-radius:4px;position:relative}.mock .trim:after{content:"";background:var(--accent);border-radius:4px;position:absolute;inset:0 55% 0 10%}.mock .ui-times{color:var(--muted);justify-content:space-between;font-size:12px;display:flex}.mock .ui-btn{margin-top:var(--sp-12);border:1px solid var(--field);border-radius:8px;align-items:center;padding:6px 12px;font-weight:500;display:inline-flex}.mock .ui-field{overflow-wrap:anywhere;padding:var(--sp-8) var(--sp-12);border:1px solid var(--field);border-radius:8px}.mock .ui-grid{gap:var(--sp-12);grid-template-columns:minmax(0,1fr);display:grid}.mock .thread{gap:var(--sp-8);padding:var(--sp-12);background:var(--surface);border-radius:8px;display:grid}.mock .cmt{align-items:center;gap:var(--sp-8);display:flex}.mock .av{background:var(--line);border-radius:50%;place-items:center;width:24px;height:24px;font-size:12px;font-weight:600;display:inline-grid}.mock .msg{max-width:88%;padding:var(--sp-8) var(--sp-12);background:var(--bg);border:1px solid var(--line);border-radius:12px}.mock .msg.me{background:var(--accent);border-color:var(--accent);color:var(--on-accent);justify-self:end}.mock .msg .btnlike{margin-top:var(--sp-8);border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:4px 12px;font-weight:500;display:inline-block}.mock .msg .lnk{color:var(--accent);text-underline-offset:.2em;margin-top:2px;text-decoration:underline;display:block}