/* 作品详情页（ItemView）呈现样式：原 itemview.js injectStyle() 内嵌 CSS 逐字外置
   （plan26 P1-A）。类名前缀 giv-；布局骨架（.cfr/.cfr-scroll/.cib）在共享框架
   （util/chat-frame.js / util/input-bar.js）。由 base.html 全局 <link> 加载。 */
.giv{background:#f7fafc;color:#2d3748;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
.giv-img{width:100%;min-height:180px;max-height:420px;background:#edf2f7;color:#a0aec0;font-size:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.giv-img.giv-emoji{font-size:72px;line-height:1;color:#718096;}
.giv-img img{width:100%;height:100%;max-height:420px;object-fit:contain;display:block;}
.giv-img.pending{color:#718096;font-size:15px;}
/* 素材详情顶图：矢量素材直接以 <img> 渲染（脚本在 <img> 语境不执行），白底衬托透明 SVG */
.giv-img.giv-img-svg{background:#fff;padding:12px;box-sizing:border-box;}
/* 顶图外包层：给播放角标与双击点赞爆心提供定位锚点（bindDetailEvents 的
   「单击进游戏 / 双击点赞」手势也挂在 .giv-imgwrap 上；图片加载失败时
   ImageRender 只替换内部 .giv-img，外包层不受影响） */
.giv-imgwrap{position:relative;}
/* 脚本类条目播放角标：半透明黑圆底 + 白色播放三角，钉在顶图左下角，
   提示该条目是脚本 / 可玩（无图时也出，脚本=可玩与封面有无无关）。
   整个图片区本身就是点击入口，角标纯指示、pointer-events:none 不拦截触点 */
.giv-play{position:absolute;left:12px;bottom:12px;width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:background .15s;}
.giv-imgwrap:active .giv-play{background:rgba(0,0,0,.72);}
.giv-play svg{width:26px;height:26px;fill:#fff;}
/* 操作区：点赞/收藏/分享 钉在底部输入框右侧（抖音评论条式：图标在上、
   计数在下竖排），不再悬浮图片区 */
.giv-baracts{display:flex;align-items:center;gap:2px;flex:none;}
.giv-bact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:38px;padding:2px;border:none;background:transparent;color:#4a5568;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s,transform .12s;}
.giv-bact:hover{color:#2d3748;}
.giv-bact:active{transform:scale(.88);}
/* 图标：默认轮廓，点亮后实心；点赞红 / 收藏金，沿用上一版配色 */
.giv-bact svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:fill .18s;flex:none;}
.giv-bact.active svg{fill:currentColor;}
.giv-bact.giv-like.active{color:#e53e3e;}
.giv-bact.giv-fav.active{color:#d69e2e;}
/* 计数：0 时 span 为空，:empty 隐藏只剩图标；点亮后计数跟随按钮主色 */
.giv-bact .giv-count{font-size:10px;font-weight:600;line-height:1.2;color:#94a3b8;}
.giv-bact.active .giv-count{color:currentColor;}
.giv-bact .giv-count:empty{display:none;}

/* 评论输入框收作抖音式胶囊（全圆角 + 灰底），只作用于本视图，
   聊天窗口的 InputBar 保持原样 */
.giv .cib-input{border-radius:999px;border-color:transparent;background:#f1f3f5;padding:10px 16px;}
.giv .cib-input:focus{border-color:#667eea;background:#fff;}

.giv-body{padding:14px 16px;}
.giv-name{font-size:20px;font-weight:700;line-height:1.3;}
/* 发布时间按钮：详情底部 .giv-ctime 里的时间文本，点开「版本历史」面板。
   按压反馈 = 文字颜色变深一档（与 pv-close 背景变深同范式），不要浏览器默认色块 */
.giv-ctime-btn{border:none;background:transparent;padding:0;font:inherit;font-family:inherit;color:#4a90d9;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s;}
.giv-ctime-btn:active{color:#2f6da6;}
/* 标题旁编号徽标：低调灰色小字，与列表卡片 .item-id-badge 同风格；id 缺失时不渲染 */
.giv-id-badge{font-size:12px;font-weight:400;color:#a0aec0;margin-left:8px;}
/* 标题前不再放任何 chip / 标签——系统彩色标签（类型 / 合集 / 派生 / 类目）、
   用户 tags、V2 合同派生标签、人数标签统一由 chip-renderer.js 在下方 .giv-chips
   行渲染；标题区只保留作品名 + 编号徽标（编号是身份标识，非 tag）。
   系统彩色 chip 配色见 chip-renderer.js（.giv-chip.giv-system-label.kind-*）。*/
/* 系统彩色标签、普通标签和 action 标签的视觉样式统一由 chip-renderer.js 管理；
   本文件只保留详情标签容器布局。 */
.giv-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;align-items:center;}
/* 拷贝自原作徽标：fork 派生作品在标题区标注来源（链接式小按钮，点开原作详情）；
   关系面板另有「派生自（Fork）」卡片，同一数据源（详情接口 forked_from） */
.giv-forked-line{margin:-4px 0 8px;}
.giv-forked-from{border:none;background:transparent;padding:0;font:inherit;font-family:inherit;font-size:12px;color:#805ad5;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s;}
.giv-forked-from:active{color:#553c9a;}
.giv-desc{font-size:15px;line-height:1.7;word-break:break-word;color:#4a5568;margin:8px 0;}
.giv-desc-empty{min-height:20px;}
.giv-desc-placeholder{color:#a0aec0;font-size:14px;}

/* Markdown 渲染（移植自 skill-view.css 的 .skv-md 观感：文档正文与原技能
   查看器同款排版--渐变标题/主色列表标记/深底代码块/圆角表格/引用条）。 */
.giv-desc{font-size:15px;line-height:1.75;color:#2d3748;word-wrap:break-word;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Segoe UI','Microsoft YaHei',sans-serif;}
.giv-desc ::selection{background:rgba(74,144,217,.22);}
.giv-desc h1,.giv-desc h2,.giv-desc h3,.giv-desc h4,.giv-desc h5,.giv-desc h6{
  margin:1.5em 0 .65em;font-weight:700;line-height:1.35;color:#1a202c;}
.giv-desc h1{font-size:1.65em;padding-bottom:.35em;border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#4a90d9,rgba(74,144,217,.08)) 1;}
.giv-desc h2{font-size:1.35em;padding-left:.55em;position:relative;}
.giv-desc h2::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;
  width:4px;border-radius:2px;background:linear-gradient(180deg,#4a90d9,#667eea);}
.giv-desc h3{font-size:1.18em;color:#2b6cb0;}
.giv-desc h4{font-size:1.05em;color:#2d3748;}
.giv-desc h5{font-size:.95em;color:#4a5568;}
.giv-desc h6{font-size:.9em;color:#718096;font-weight:600;}
.giv-desc h1:first-child,.giv-desc h2:first-child,.giv-desc h3:first-child{margin-top:0;}
.giv-desc p{margin:.85em 0;}
.giv-desc ul,.giv-desc ol{margin:.85em 0;padding-left:1.6em;}
.giv-desc li{margin:.35em 0;}
.giv-desc li::marker{color:#4a90d9;font-weight:600;}
.giv-desc li>ul,.giv-desc li>ol{margin:.2em 0;}
.giv-desc li input[type="checkbox"]{margin-right:.45em;accent-color:#4a90d9;}
.giv-desc code{padding:.15em .45em;margin:0;font-size:.88em;
  background:rgba(74,144,217,.13);color:#2b6cb0;border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;}
.giv-desc pre{margin:1em 0;padding:14px 16px;overflow-x:auto;
  background:#1e2a3a;border-radius:10px;line-height:1.55;
  box-shadow:0 1px 3px rgba(15,23,42,.12);}
.giv-desc pre code{padding:0;background:transparent;color:#dbe7f5;border-radius:0;font-size:.85rem;}
.giv-desc table{margin:1em 0;border-collapse:separate;border-spacing:0;width:100%;
  display:block;overflow-x:auto;font-size:.92em;border:1px solid #d6e4f5;border-radius:10px;}
.giv-desc th,.giv-desc td{padding:8px 13px;text-align:left;border-bottom:1px solid #e3edf9;}
.giv-desc th{background:linear-gradient(180deg,#e8f2fc,#dcecfb);color:#2b6cb0;font-weight:600;white-space:nowrap;}
.giv-desc tr:last-child td{border-bottom:0;}
.giv-desc tbody tr:nth-child(even) td{background:#f6fafe;}
.giv-desc blockquote{margin:1em 0;padding:.55em 1em;color:#4a5568;
  border-left:4px solid #4a90d9;background:#f0f6fd;border-radius:0 8px 8px 0;}
.giv-desc blockquote>:first-child{margin-top:0;}
.giv-desc blockquote>:last-child{margin-bottom:0;}
.giv-desc a{color:#4a90d9;text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(74,144,217,.35);transition:color .15s,border-color .15s;}
.giv-desc a:hover{color:#3b7bc0;border-bottom-color:#3b7bc0;}
.giv-desc hr{margin:1.6em 0;border:0;height:2px;border-radius:1px;
  background:linear-gradient(90deg,transparent,#bcd9f5 20%,#bcd9f5 80%,transparent);}
.giv-desc img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 1px 4px rgba(15,23,42,.1);}
.giv-desc strong{font-weight:600;color:#1a202c;}
.giv-desc del{color:#718096;}
.giv-desc kbd{padding:.1em .4em;font-size:.85em;color:#2b6cb0;
  background:#f0f6fd;border:1px solid #d6e4f5;border-bottom-width:2px;border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.giv-ctime{margin-top:10px;font-size:12px;color:#a0aec0;}
/* 顶栏作者（抖音式）：挂在 ‹ 返回旁，头像 + 名字，点击进作者主页。
   头像复用全局 .avatar（圆形/底色/居中），这里只定尺寸；名字超长省略号。 */
.giv-topauthor{display:flex;align-items:center;gap:8px;min-width:0;max-width:62%;text-decoration:none;flex:none;-webkit-tap-highlight-color:transparent;}
/* 头像：细描边让图片头像在浅色毛玻璃顶栏上更有轮廓；按压时轻微缩放给反馈 */
.giv-topauthor .giv-topauthor-avatar{width:30px;height:30px;font-size:15px;box-shadow:0 0 0 1px rgba(45,55,72,.08);transition:transform .15s;}
.giv-topauthor .giv-topauthor-avatar.avatar-emoji{font-size:19px;}
.giv-topauthor:active .giv-topauthor-avatar{transform:scale(.92);}
.giv-topauthor-name{font-size:14px;font-weight:600;color:#2d3748;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;}
.giv-topauthor:active .giv-topauthor-name{color:#4a90d9;}
.giv-ctitle{margin:14px 16px 0;font-size:15px;font-weight:700;color:#4a5568;display:flex;align-items:baseline;}
/* 评论标题右侧的「双击点赞」弱化提示：纯发现性提示，不抢评论区视觉 */
.giv-dblhint{margin-left:auto;font-size:11px;font-weight:400;color:#a0aec0;letter-spacing:.5px;}
.giv-dblhint b{color:#fe2c55;font-weight:400;}
.giv-clist{padding:8px 16px 0;display:flex;flex-direction:column;gap:12px;}
.giv-clist .comment-item{display:flex;gap:10px;}
.giv-clist .comment-item .avatar{width:34px;height:34px;font-size:0.9rem;flex:none;}
.giv-clist .comment-content{font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap;}
.giv-clist .comment-time{font-size:12px;color:#a0aec0;margin-top:3px;}
.giv-clist .comment-time a{color:#4a90d9;text-decoration:none;}
.giv-clist .comment-del{color:#e53e3e;margin-left:8px;}
.giv-clist .comment-reply{color:#4a90d9;margin-left:8px;}
/* 评论区文字链接 / 展开开关按压 = 轻微变淡（与版本条 :active opacity:.7 同范式，
   蓝红不同色不便统一变深，用透明度收敛） */
.giv-clist .comment-time a:active,.giv-clist .comment-toggle:active{opacity:.7;}
/* 引用关系面板（版本历史「引用」标签打开的 PlainView 层）：
   顶部加载/空态占位 + 分节列表（引用了什么 / 被哪些作品引用） */
.giv-panel-loading,.giv-panel-empty{padding:26px 16px;text-align:center;color:#a0aec0;font-size:14px;}
.giv-panel-section{padding:14px 16px 4px;}
.giv-panel-title{font-size:13px;font-weight:700;color:#4a5568;margin-bottom:8px;}
/* 关系/历史条目卡片（RelationEntry.html）：统一两行结构——
   第 1 行 .giv-entry-strip：编号徽标 + 标题（备注/名称）；
   第 2 行 .giv-entry-row：meta（时间/类型/版本/作者）+ 右下角 ⋮ 菜单。
   refs/forks 面板继续用这套；版本历史面板用 RelationEntry.cardHtml 的
   .giv-vcard 专属卡片（见下）。 */
.giv-entry{background:#f7fafc;border:1px solid #edf2f7;border-radius:8px;padding:6px 10px;margin-bottom:6px;font-family:inherit;-webkit-tap-highlight-color:transparent;}
.giv-entry-strip{display:flex;align-items:center;gap:6px;height:22px;overflow:hidden;white-space:nowrap;}
.giv-entry.clickable-strip .giv-entry-strip{cursor:pointer;}
.giv-entry.clickable-strip .giv-entry-strip:active{opacity:.7;}
.giv-entry.clickable-card{cursor:pointer;}
.giv-entry.clickable-card:active{background:#edf2f7;}
/* ⋮ 菜单（条目卡片右下角）：独立类名，视觉与 itemcard 三点菜单一致 */
.giv-entry-menu{flex:none;position:relative;margin-left:4px;}
.giv-entry-menu-trigger{width:22px;height:22px;min-height:22px;border:none;background:transparent;color:#a0aec0;font-size:1rem;line-height:1;cursor:pointer;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;letter-spacing:1px;transition:background .15s,color .15s;}
.giv-entry-menu-trigger:hover{background:#edf2f7;color:#667eea;}
.giv-entry-menu-popup{display:none;position:absolute;top:calc(100% + 4px);bottom:auto;right:0;width:max-content;min-width:72px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:4px 0;z-index:20;}
.giv-entry-menu-popup.open-up{top:auto;bottom:calc(100% + 4px);}
.giv-entry-menu-popup.open{display:block;}
.giv-entry.menu-open{z-index:30;}
.giv-entry-menu-item{display:block;width:100%;text-align:left;border:none;background:transparent;color:#2d3748;font-size:13px;padding:8px 14px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;white-space:nowrap;}
.giv-entry-menu-item:active{background:#edf2f7;}
/* 版本历史贴合列表（.giv-vlist，RelationEntry.cardHtml 专用）：卡片零间距 +
   border-top 分隔线 + 底部 1px；与 .giv-panel-section.flush（padding:0）搭配。 */
.giv-vlist{display:flex;flex-direction:column;}
.giv-vlist .giv-vcard{border-radius:0;border-left:none;border-right:none;border-bottom:none;border-top:1px solid #edf2f7;}
.giv-vlist .giv-vcard:first-child{border-top:none;}
.giv-vlist .giv-vcard:last-child{border-bottom:1px solid #e2e8f0;}
/* 版本历史卡片（RelationEntry.cardHtml）：conv-card 观感两行 grid——
   头像位 48×48 版本徽标（V+n，普通蓝态 / 当前默认版本绿态 .cur）+ 行 1
   （标题 + 右上角 fmtListTime 时间）+ 行 2（详情单行省略 + 右下角 ⋮ 菜单）。
   带 .giv-entry 供 RelationPanel 委托定位，但**不挂 data-item-id /
   data-card-action、不进 .items-grid**——避免 itemcard 全局委托误派发。 */
.giv-vcard{display:flex;align-items:stretch;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;font-family:inherit;-webkit-tap-highlight-color:transparent;}
.giv-vcard.clickable-card{cursor:pointer;}
.giv-vcard.clickable-card:active{background:#f7fafc;}
.giv-vcard-avatar{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ebf8ff;border-radius:10px;}
.giv-vcard-avatar.cur{background:#c6f6d5;}
.giv-vbadge{font-size:13px;font-weight:700;color:#4a90d9;}
.giv-vcard-avatar.cur .giv-vbadge{color:#276749;}
.giv-vcard-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:5px;}
.giv-vcard-row{display:flex;align-items:center;gap:8px;min-width:0;}
.giv-vcard-title{flex:1;min-width:0;font-size:14px;font-weight:600;color:#1a202c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.giv-vcard-title.none{color:#a0aec0;font-weight:400;}
.giv-vcard-time{flex:none;font-size:11px;color:#a0aec0;}
.giv-vcard-detail{flex:1;min-width:0;font-size:12px;color:#718096;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.giv-vcard-detail.none{color:#cbd5e0;}
.giv-vcard .giv-entry-menu{margin-left:auto;}
.giv-panel-section.flush{padding:0;}
/* 版本备注编辑表单（⋮「编辑备注」打开的 PlainView 层）：标题 input（maxlength=40）
   + 详情 textarea + 保存钮；错误文案行显示后端 400 消息。 */
.giv-note-editor{padding:14px 16px 20px;display:flex;flex-direction:column;gap:8px;}
.giv-note-label{font-size:12px;font-weight:600;color:#4a5568;}
.giv-note-input{width:100%;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px;font-size:14px;font-family:inherit;color:#2d3748;background:#fff;-webkit-tap-highlight-color:transparent;}
.giv-note-input:focus{outline:none;border-color:#4a90d9;}
.giv-note-textarea{resize:vertical;min-height:90px;line-height:1.5;}
.giv-note-actions{display:flex;justify-content:flex-end;margin-top:2px;}
.giv-note-save{appearance:none;border:none;background:#4a90d9;color:#fff;font-size:14px;font-weight:600;border-radius:8px;padding:9px 22px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;}
.giv-note-save:active{background:#2f6da6;}
.giv-note-err{font-size:12px;color:#e53e3e;min-height:16px;}
/* 版本历史面板（发布时间按钮打开的 PlainView 层）：版本条目走 RelationEntry.cardHtml
   专属卡片（conv-card 观感两行 grid，样式见 .giv-vcard* 上）。 */
/* （内容描述按钮已下线：描述在详情页 .giv-desc 区直接 Markdown 渲染。） */
/* 版本历史条目样式已统一到 .giv-entry*（上方）；⋮ 菜单承载所有操作按钮。 */
/* 评论点赞（抖音式：钉在评论右侧，图标在上、计数在下竖排）。
   图标默认描边，点亮后实心红（抖音 #fe2c55）。贴边紧凑布局，
   不占正文宽度、不与左侧正文信息竞争空间。 */
.giv-clist .comment-reacts{display:flex;align-items:flex-start;flex:none;align-self:center;margin-left:4px;}
.giv-clist .comment-react{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:26px;border:none;background:transparent;padding:2px 0;color:#a0aec0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s,transform .12s;}
.giv-clist .comment-react:active{transform:scale(.88);}
.giv-clist .comment-react svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:fill .18s;flex:none;}
.giv-clist .comment-react .react-count{font-size:11px;font-weight:600;line-height:1.2;color:#a0aec0;transition:color .18s;}
.giv-clist .comment-react .react-count:empty{display:none;}
.giv-clist .comment-like.active{color:#fe2c55;}
.giv-clist .comment-like.active svg{fill:currentColor;}
.giv-clist .comment-like.active .react-count{color:currentColor;}
.giv-clist .comment-react.pop svg{animation:giv-pop .45s cubic-bezier(.175,.885,.32,1.4);}
/* 回复线程（抖音式）：主评论 + 折叠的回复组 + 「展开 N 条回复」开关。
   回复默认收起，点开关展开；开关缩进到主评论正文下方（头像 34 + gap 10），
   紧贴评论信息行（上间距 4px），不额外撑高线程。 */
.giv-clist .comment-thread{display:flex;flex-direction:column;}
.giv-clist .comment-replies{display:none;flex-direction:column;gap:10px;margin-top:8px;}
.giv-clist .comment-replies.open{display:flex;}
.giv-clist .comment-toggle{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin:4px 0 0 44px;border:none;background:transparent;padding:2px 0;font-size:12px;font-weight:600;color:#4a90d9;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.giv-clist .comment-toggle .toggle-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.giv-clist .comment-toggle[aria-expanded="true"] .toggle-chev{transform:rotate(180deg);}
.giv-clist .comment-reply-item{margin-left:30px;background:#f7fafc;border-radius:8px;padding:8px 10px;}
.giv-clist .comment-reply-item .avatar{width:28px;height:28px;font-size:0.78rem;}
.giv-clist .comment-reply-to{font-size:12px;color:#4a90d9;background:#eaf3fc;border-radius:4px;padding:1px 6px;margin-right:6px;}
.giv-cempty{padding:24px 16px;text-align:center;color:#a0aec0;font-size:13px;}
/* 评分区（豆瓣式，仅小游戏详情出现） */
.giv-rating{margin:16px 16px 0;padding:14px 16px;background:#f9fafb;border-radius:12px;border:1px solid #edf2f7;}
.giv-rating-head{display:flex;align-items:baseline;gap:10px;}
.giv-rating-score{font-size:28px;font-weight:800;color:#e53e3e;line-height:1;}
.giv-rating-score.none{font-size:15px;color:#a0aec0;font-weight:400;}
.giv-rating-stars{font-size:16px;color:#f6ad55;letter-spacing:2px;}
.giv-rating-count{font-size:12px;color:#a0aec0;}
.giv-rating-dist{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.giv-rating-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#718096;}
.giv-rating-row .lbl{width:28px;text-align:right;flex:none;}
.giv-rating-row .bar{flex:1;height:8px;background:#edf2f7;border-radius:4px;overflow:hidden;}
.giv-rating-row .bar-fill{height:100%;background:#f6ad55;border-radius:4px;transition:width .3s;}
.giv-rating-row .num{width:32px;flex:none;color:#a0aec0;}
.giv-rating-mine{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:13px;color:#4a5568;}
.giv-rating-mine .stars{display:flex;gap:2px;}
.giv-rating-mine .star{font-size:22px;cursor:pointer;color:#cbd5e0;transition:color .15s,transform .1s;line-height:1;-webkit-tap-highlight-color:transparent;}
.giv-rating-mine .star.on{color:#f6ad55;}
.giv-rating-mine .star:active{transform:scale(1.25);}
/* 「回复 @xxx」横幅：挂在共享 InputBar 的顶部插槽（.cib-slot），仅回复模式出现 */
.giv-reply-banner{display:flex;align-items:center;min-height:24px;font-size:13px;color:#4a5568;}
.giv-reply-banner .giv-reply-name{color:#4a90d9;font-weight:600;}
.giv-reply-banner button{margin-left:8px;border:none;background:transparent;color:#a0aec0;cursor:pointer;font-size:0.85rem;padding:2px 4px;}
.giv-reply-banner button:hover{color:#718096;}
.giv-status{padding:60px 24px;text-align:center;color:#a0aec0;font-size:15px;}
/* ---------- 抖音式双击点赞：触点爆心（fixed 盖在 PlainView z-index:4000 之上） ---------- */
.giv-dtap{position:fixed;z-index:9000;pointer-events:none;width:0;height:0;}
/* 红心：弹出 → 轻微摇摆 → 上浮淡出；--giv-dtap-r 是 JS 给的随机摇摆角。
   跟手关键：前 12%（≈100ms）就从 0 弹到满尺寸，双击瞬间心就"砸"出来；
   不加 drop-shadow 之类的 filter——动画期间 filter 会强制逐帧重绘，低端机
   上明显掉帧；纯 transform/opacity + will-change 走合成层，爆心全程流畅 */
.giv-dtap-heart{position:absolute;left:-42px;top:-42px;width:84px;height:84px;fill:#fe2c55;will-change:transform,opacity;animation:giv-dtap-pop .9s cubic-bezier(.175,.885,.32,1.4) forwards;}
@keyframes giv-dtap-pop{0%{transform:scale(0) rotate(calc(var(--giv-dtap-r,0deg) * -1));opacity:0;}12%{transform:scale(1.25) rotate(var(--giv-dtap-r,0deg));opacity:1;}28%{transform:scale(.94) rotate(calc(var(--giv-dtap-r,0deg) * .4));}42%{transform:scale(1.04) rotate(0deg);}68%{transform:scale(1) translateY(0);opacity:1;}100%{transform:scale(1.1) translateY(-88px);opacity:0;}}
/* 触点扩散圆环 */
.giv-dtap-ring{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border:3px solid rgba(254,44,85,.65);border-radius:50%;will-change:transform,opacity;animation:giv-dtap-ring .55s ease-out forwards;}
@keyframes giv-dtap-ring{0%{transform:scale(.35);opacity:.9;}100%{transform:scale(1.9);opacity:0;}}
/* 飞溅粒子：--a 是 JS 给的飞散方向 */
.giv-dtap-spark{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;will-change:transform,opacity;animation:giv-dtap-spark .6s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes giv-dtap-spark{0%{transform:rotate(var(--a,0deg)) translateX(10px) scale(1);opacity:0;}12%{opacity:1;}100%{transform:rotate(var(--a,0deg)) translateX(56px) scale(.15);opacity:0;}}