/* Irivi · static/app/base.css（REFACTOR_PLAN 3.0a 公共框架）
   全局令牌（颜色 / 分类色 / 圆角 / 时长 / 缓动 / 字体）、顶栏与导航、手机底部标签栏、页脚、公共组件（按钮、轻提示、
   转圈、骨架屏、进度条、点赞回弹、数字滚动、抽屉、底部面板、图片淡入）、自定义下拉。
   对照 design/ui-2026-10-21/ 的 layers / type / motion 与 home 顶栏；横竖屏切换统一用 @media (max-aspect-ratio:1/1)。
   本文件在 <head> 最后加载，以覆盖 style.css 等旧样式里的侧栏布局；页面级样式仍由各页面任务（3.1–3.13）重做。 */

/* ===== 1. 令牌 ===== */
:root{
  --ink:#24212A;--ink-2:#5E5868;--ink-3:#938C9E;--line:#ECEAF0;--soft:#F5F4F8;--bg:#FFFFFF;
  /* 2026-10-28 界面修正 §1：主色从鸢尾紫换成墨色。--brand / --brand-soft 是通用控件（主按钮、链接、开关、下划线、
     分段选中、角标、聚焦框、进度条、单选复选、选中浅底）用的主色，现在指向墨色；鸢尾紫改名 --iris，只用在月榜、
     首页“创作者招募”横幅、AI 入口光球（§1.2）。品牌渐变 V25-PAL-041 用于顶栏，--brand-pink 用于手机上传按钮。 */
  --ink-soft:#F1F0F4;--iris:#7349D8;--iris-soft:#F1ECFC;
  --brand-gradient:linear-gradient(100deg,#FF76B8 0%,#AEE4FF 100%);--brand-pink:#FF76B8;
  --brand:var(--ink);--brand-soft:var(--ink-soft);--brand-deep:#0F0E12;--pink:#EC2C64;--candy:#FD8BA8;--cyan:#49D6C8;
  --topbar:var(--brand-gradient);
  /* 用户头像白圈（§2.4）：常规 2.5px；≤32px 的小头像按比例减到 2px（叠放）/ 1.5px（单个 24–26px）。统一套用见本文件“用户头像白圈” */
  --avatar-ring:0 0 0 2.5px #fff,0 2px 8px rgba(36,33,42,.18);
  --avatar-ring-sm:0 0 0 2px #fff,0 1px 4px rgba(36,33,42,.16);
  --avatar-ring-xs:0 0 0 1.5px #fff,0 1px 3px rgba(36,33,42,.16);
  --topbar-shadow:0 4px 12px rgba(40,20,80,.16);
  --ok:#2F9E77;--ok-soft:#E6F5EF;--warn:#6B4A0E;--warn-soft:#FFF6E0;--danger:#D23B5A;
  /* Tag 分类色（界面定稿记录 "搜索页"） */
  --cat-character:#7B6BD6;--cat-scene:#3B82DF;--cat-pose:#D56BA0;--cat-costume:#E95E78;--cat-prop:#EA6532;--cat-shot:#617CD4;
  --cat-angle:#3FA796;--cat-brightness:#329FDB;--cat-contrast:#6F93CE;--cat-direction:#3AA5AB;--cat-type:#BC7FD3;--cat-feature:#EA4E8F;
  /* 圆角：6 / 10 / 16 / 22 + 胶囊；嵌套 外 = 内 + 间距 */
  --r-xs:6px;--r-sm:10px;--r-md:16px;--r-lg:22px;--r-pill:999px;
  /* 动效：120 / 200 / 320ms；进场 ease-out、出场 ease-in、弹性只用于点赞等奖励反馈 */
  --t-fast:120ms;--t-base:200ms;--t-slow:320ms;--t-tabbar:250ms;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.55,0,1,.45);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* 字体：系统字体栈；Inter 自托管只覆盖英文数字；文章正文霞鹜文楷按需加载（app/reading.css） */
  --f-ui:"Inter","PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --f-num:"Inter","PingFang SC",sans-serif;--f-brand:var(--f-ui);
  --f-read:"LXGW WenKai","PingFang SC","Noto Serif CJK SC",serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --shadow-pop:0 18px 50px rgba(36,20,70,.18),0 0 0 1px rgba(36,20,70,.06);
  --shadow-card:0 10px 30px rgba(60,30,120,.06);
  --topbar-h:68px;--tabbar-h:64px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  /* 旧 style.css 变量别名：旧页面样式里的 var(--line) 等继续生效 */
  --purple:var(--ink);
}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("/static/fonts/inter-latin.woff") format("woff");
  unicode-range:U+0020-007E,U+00A0,U+00A5,U+00A9,U+00B7,U+00D7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2022,U+2026,U+20AC,U+2190,U+2192,U+2212}

/* ===== 2. 基础排版（type/type.html） ===== */
html{-webkit-text-size-adjust:100%}
html body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
html body h1{font-size:30px;font-weight:900;letter-spacing:-.01em;line-height:1.2}
html body h2{font-size:20px;font-weight:900;line-height:1.3}
html body h3{font-size:16px;font-weight:800;line-height:1.35}
html body .brand-title{font-family:var(--f-brand);font-weight:900;letter-spacing:-.03em;font-size:clamp(32px,5vw,56px);line-height:1.1}
html body .brand-title em{font-style:normal;color:var(--candy)}
html body .num,html body .count,html body [data-num],html body .like-count,html body .stat-value{font-family:var(--f-num);font-variant-numeric:tabular-nums}
html body .mono,html body code,html body kbd,html body pre{font-family:var(--f-mono)}
html body .text-2{color:var(--ink-2)}html body .text-3{color:var(--ink-3)}
html body .page-kicker{display:none}

/* ===== 3. 顶栏（2026-10-28 界面修正 §3）：品牌渐变 V25-PAL-041 底、无底线；左 白色字标 + 导航，中 搜索槽位（白色胶囊），右 上传 · 通知 · 头像（白色 40px） ===== */
/* 旧 style.css / responsive_layout.css 在竖屏下给 #nav 加了圆角卡片外观，这里的关键属性加 !important 统一为平直顶栏 */
html body #nav{position:sticky!important;top:0!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:60;display:flex!important;flex-direction:row!important;align-items:center;gap:12px;
  width:100%!important;height:var(--topbar-h)!important;min-height:0!important;margin:0!important;padding:0 24px!important;box-sizing:border-box;border-radius:0!important;
  background:var(--topbar)!important;border:0!important;box-shadow:none!important;overflow:visible!important;flex-wrap:nowrap}
html body #nav .brand{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0;padding:0;text-decoration:none;color:var(--ink)}
html body #nav .brand-mark{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;padding:0;background:none;border-radius:0;box-shadow:none;line-height:0}
html body #nav .brand-mark img{display:block;width:28px;height:28px;object-fit:contain;max-width:none}
html body #nav .brand-text{display:flex;align-items:center;line-height:1}
html body #nav .brand-text img{display:block;width:auto;height:28px;max-width:none;filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(36,20,60,.28))}
html body .auth-brand img.irivi-wordmark{width:auto;height:32px}
html body #nav .brand:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:var(--r-xs)}
html body #nav #mobileMenuToggle{display:none}
html body #nav #navSection{position:static;display:flex;flex-direction:row;align-items:center;gap:4px;flex:0 0 auto;width:auto;max-width:none;margin:0 0 0 8px;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
html body #nav .navbtn{display:inline-flex;align-items:center;gap:6px;height:36px;min-height:0;width:auto;margin:0;padding:0 14px;border:0;border-radius:18px;
  background:none!important;box-shadow:none!important;color:rgba(255,255,255,.85)!important;font-family:inherit;font-size:15px;font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;
  transition:color var(--t-base) var(--ease-out),background-color var(--t-base) var(--ease-out)}
html body #nav .navbtn .nav-icon{display:none}
html body #nav .navbtn:hover{background:rgba(255,255,255,.16)!important;color:#fff!important}
html body #nav .navbtn.active,html body #nav .navbtn[aria-current="page"]{background:rgba(255,255,255,.26)!important;color:#fff!important;font-weight:800}
html body #nav .navbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 顶栏搜索槽位：只在首页 / 搜索 / 排行榜输出（base.html topbar_search_pages），内容由各页面任务填充 */
html body #nav .nav-search-slot{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
html body #nav .nav-search-slot:empty{display:block}
html body #nav .nav-search-slot>*{width:100%;max-width:520px}
html body #nav .nav-spacer{flex:1 1 auto}
html body #nav .nav-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
/* 上传：白色胶囊（高 40），墨色字 + 上箭头；当前页不再加紫色外圈 */
html body #nav .nav-upload{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:20px;
  background:#fff!important;color:var(--ink)!important;font-size:14px;font-weight:800;box-shadow:var(--topbar-shadow)!important;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
html body #nav .nav-upload:hover{transform:translateY(-1px);background:#fff!important;color:var(--ink)!important}
html body #nav .nav-upload:active{transform:scale(.96)}
html body #nav .nav-upload.active,html body #nav .nav-upload[aria-current="page"]{background:#fff!important;color:var(--ink)!important}
html body #nav .nav-upload .nav-icon{display:inline-grid;place-items:center;width:18px;height:18px}
html body #nav .nav-upload svg{width:18px;height:18px}
html body #nav .mobile-account-link{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:20px;border:0;
  color:var(--ink)!important;background:#fff!important;font-size:14px;font-weight:800;text-decoration:none;box-shadow:var(--topbar-shadow)}
html body #nav .mobile-account-link .nav-icon,html body #nav .mobile-account-link .nav-avatar,html body #nav .mobile-account-link .mobile-account-copy{display:none}
/* 已登录：脚本把它换成 #accountMenu 头像之前（网慢时能看到一阵），直接画成同样的圆形头像，不再先出白色胶囊框（负责人 10-31） */
html body #nav .mobile-account-link[data-permission-key="nav.profile"]{width:40px;height:40px;padding:0;border-radius:50%;background:transparent!important;box-shadow:none}
html body #nav .mobile-account-link[data-permission-key="nav.profile"] .nav-avatar{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--candy);color:#3A1626;font-size:14px;font-weight:800;box-shadow:var(--avatar-ring)}
html body #nav .mobile-account-link[data-permission-key="nav.profile"] .nav-avatar img{width:100%;height:100%;object-fit:cover}
html body #nav .nav-footer{display:none}
html body #nav .nav-accent{display:none}
/* 通知铃铛（core-defer 注入 button#ptTopbarNotificationBtn） */
/* 铃铛：宽屏 40px 白色圆形按钮（与上传、头像同高），图标 20px 墨色；未读 = 右上角 8px 玫红圆点 + 2px 白圈（不显示数字） */
html body #nav .topbar-bell{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0!important;border-radius:50%;background:#fff!important;color:var(--ink);cursor:pointer;box-shadow:var(--topbar-shadow);transition:transform var(--t-fast) var(--ease-out)}
html body #nav .topbar-bell:hover{transform:translateY(-1px);color:var(--ink)}
html body #nav .topbar-bell:active{transform:scale(.96)}
html body #nav .topbar-bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body #nav .topbar-bell .pt-notification-badge{right:9px!important;top:8px!important;min-width:0!important;width:8px!important;height:8px!important;padding:0!important;border-radius:50%!important;font-size:0!important;line-height:0!important;box-shadow:0 0 0 2px #fff!important}
/* 账号菜单触发器（core-defer 克隆 .nav-user>a 生成 #accountMenu） */
html body #accountMenu{position:relative;flex:0 0 auto;min-width:0;margin:0;order:0}
html body #accountMenu .account-menu-trigger{appearance:none;display:flex;align-items:center;gap:0;width:40px;height:40px;min-height:0;max-width:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;text-align:left}
html body #accountMenu .account-menu-trigger:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* 头像：圆形 + 2.5px 白圈 + 阴影（§2.4）；宽屏 40px，手机 38px */
html body #accountMenu .nav-avatar{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;overflow:hidden;background:var(--candy);color:#3A1626;font-size:14px;font-weight:800}
html body #accountMenu .nav-avatar img{width:100%;height:100%;object-fit:cover}
/* 用户头像白圈（2026-10-30 负责人：所有显示头像的地方都加圈；图片头像与“名字首字”头像同样处理）。
   只在这里统一写，各页面 css 不再各写一份。用 box-shadow 画在盒子外侧：不占布局、不改头像占位尺寸，
   也不受头像自身 overflow:hidden 裁切（outline 不跟随圆角在旧 Safari 上会变方，所以不用）。
   白底卡片上靠阴影显出轮廓，不改深色圈（与顶栏一致）。叠放头像用同一白圈当分隔（后一个盖住前一个的边）。
   不含：子 Tag 选择器的角色头像（.tp-face）、游戏图标、个人主页大头像（profile.css 自带 5px 白边）、
   创作者卡片 .cw-avatar（各版式自带白边 / 方形相框）、后台。 */
html body #accountMenu .nav-avatar,
html body .pop-avatar,
html body .home-creator-av,
html body .detail-avatar,
html body .pt-notification-avatar:not(.is-stack):not(.is-brand)>a,
html body .rq-share-avatar,
html body .st-row-avatar,
html body .st-avatar,
html body .supporter img{box-shadow:var(--avatar-ring)}
html body .rq-avatar,
html body .pt-notification-avatar.is-stack>a{box-shadow:var(--avatar-ring-sm)}
html body .detail-avatar.is-small,
html body .profile-card-mini i{box-shadow:var(--avatar-ring-xs)}
html body #accountMenu .account-menu-trigger>span:not(.nav-avatar):not(.pt-notification-badge),html body #accountMenu .account-chevron{display:none!important}
html body #accountMenu .account-menu-trigger .pt-notification-badge{right:-4px;top:-4px}
/* 账号菜单面板、手机账号抽屉、通知面板：static/app/popovers.css（3.0b） */
html body .pt-notification-badge{background:var(--pink)!important;box-shadow:none!important;font-family:var(--f-num)}
@keyframes iriviPopIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===== 4. 主内容区 ===== */
html body>main{display:block;width:100%;max-width:1280px;margin:0 auto;padding:24px 32px 64px;box-sizing:border-box}
html body .page-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
html body .page-header h1{margin:0}
html body .page-header-actions{display:flex;align-items:center;gap:10px}
html body #navSection.open{display:flex}
/* 回到顶部：竖屏时停在底部标签栏之上 */
html body #topBtn{position:fixed;right:18px;bottom:calc(22px + var(--safe-bottom));z-index:30;background:var(--ink);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}

/* ===== 5. 页脚（home/home.html footer；含 ICP 备案号，只在 base.html 的 site_footer_pages 页面输出一次） ===== */
html body .irivi-site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;clear:both;max-width:1280px;margin:56px auto 0;padding:24px 0 40px;
  border-top:1px solid var(--line);color:var(--ink-3);font-size:13px;line-height:1.6;text-align:left;overflow-wrap:anywhere}
html body .irivi-site-footer a{color:inherit;text-decoration:none;transition:color var(--t-base)}
html body .irivi-site-footer a:hover,html body .irivi-site-footer a:focus-visible{color:var(--ink-2);text-decoration:underline}
html body .irivi-site-footer .irivi-site-footer-copy{font-family:var(--f-num)}
html body .irivi-site-footer .irivi-site-footer-grow{flex:1 1 auto}
html body .irivi-site-footer-report{display:inline-flex;flex-wrap:wrap;gap:0 10px}
html body .irivi-site-footer-icp{display:inline-flex;flex-wrap:wrap;gap:0 8px;flex-basis:100%}
html body .irivi-site-footer-operator{display:inline-flex;flex-wrap:wrap;gap:0 10px;flex-basis:100%}
html body .irivi-site-footer-operator+.irivi-site-footer-icp{margin-top:-4px}
html body.agreement-page .irivi-site-footer{max-width:860px;margin:24px auto}
html body.auth-page .irivi-site-footer{width:100%;margin:16px auto 0;padding:14px 0;border-top:0;justify-content:center;text-align:center}
html body.auth-page .irivi-site-footer .irivi-site-footer-grow{display:none}

/* ===== 6. 手机底部标签栏（layers/layers.html .tabbar；64px；竖屏显示） ===== */
html body #iriviTabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;height:calc(var(--tabbar-h) + var(--safe-bottom));padding:0 0 var(--safe-bottom);box-sizing:border-box;
  background:#fff;border-top:1px solid var(--line);grid-template-columns:repeat(5,1fr);align-items:center;
  transition:transform var(--t-tabbar) var(--ease-out)}
html body #iriviTabbar.is-hidden{transform:translateY(100%)}
html body[data-tabbar="off"] #iriviTabbar{display:none!important}
html body #iriviTabbar .tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tabbar-h);font-size:10px;font-weight:800;color:var(--ink-3);text-decoration:none;-webkit-tap-highlight-color:transparent}
html body #iriviTabbar .tb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
html body #iriviTabbar .tb.is-on{color:var(--ink)}
/* 中间上传（2026-10-28 §4）：品牌粉实心圆 48px + 白色“＋”（24px，线宽 2.6），按下缩到 0.96（120ms） */
html body #iriviTabbar .tb.tb-add span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--brand-pink);color:#fff;box-shadow:0 4px 12px rgba(36,33,42,.22);transition:transform var(--t-fast) var(--ease-out)}
html body #iriviTabbar .tb.tb-add span svg{width:24px;height:24px;stroke-width:2.6}
html body #iriviTabbar .tb.tb-add:active span{transform:scale(.96)}
/* 修 bug：旧样式给标签栏里的链接加了浅灰底块，这里统一透明 */
html body #iriviTabbar .tb,html body #iriviTabbar .tb:hover,html body #iriviTabbar .tb:focus,html body #iriviTabbar .tb.is-on{background:transparent!important;box-shadow:none!important;border:0!important}

/* ===== 7. 竖屏 = 手机版（max-aspect-ratio:1/1） ===== */
@media (max-aspect-ratio:1/1){
  :root{--topbar-h:60px}
  html body #nav{padding:0 16px!important;gap:8px}
  html body #nav .brand-mark{width:24px;height:24px;flex-basis:24px}html body #nav .brand-mark img{width:24px;height:24px}
  html body #nav .brand-text img{width:auto;height:24px}
  /* 导航链接移到底部标签栏；#navSection 只在 .open（手册提示等旧逻辑）时作为下拉面板出现 */
  html body #nav #navSection{display:none;position:absolute;top:calc(100% + 8px);right:12px;left:auto;width:220px;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:8px;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-pop);z-index:70}
  html body #nav #navSection.open{display:flex}
  html body #nav #navSection .navbtn{width:100%;height:40px;box-sizing:border-box}
  html body #nav .nav-search-slot{display:none}
  html body #nav .nav-upload{display:none}
  html body #nav .mobile-account-link{height:34px;padding:0 14px;font-size:13px}
  html body #nav .mobile-account-link[data-permission-key="nav.profile"]{width:38px;height:38px;padding:0}
  html body #nav .nav-actions{gap:14px}
  /* 手机：铃铛纯图标 22px（深色），未读红点同宽屏；头像 38px 白圈 */
  html body #nav .topbar-bell{width:36px;height:36px;background:transparent!important;box-shadow:none}
  html body #nav .topbar-bell svg{width:22px;height:22px}
  html body #nav .topbar-bell .pt-notification-badge{right:7px!important;top:6px!important}
  html body #accountMenu .account-menu-trigger{width:38px;height:38px}
  html body #accountMenu .nav-avatar{width:38px;height:38px;flex-basis:38px}
  html body>main{padding:16px 12px calc(32px + var(--tabbar-h) + var(--safe-bottom))}
  /* discover_layout.css 对 main#discoverMain 用了 !important，这里同样加 !important 保证底部留出标签栏 */
  html body>main#discoverMain{padding-bottom:calc(32px + var(--tabbar-h) + var(--safe-bottom))!important;margin-bottom:0!important}
  html body #iriviTabbar{display:grid}
  html body[data-tabbar="off"]>main{padding-bottom:32px}
  html body #topBtn{bottom:calc(var(--tabbar-h) + 16px + var(--safe-bottom))}
  html body[data-tabbar="off"] #topBtn{bottom:calc(22px + var(--safe-bottom))}
  /* 页脚（含备案号）在标签栏之上，不被遮挡 */
  html body .irivi-site-footer{margin-top:32px;padding:20px 0 16px;gap:6px 16px;font-size:12px}
  html body .irivi-site-footer-icp{flex-basis:100%}
  html body .page-header{margin-bottom:14px}
  html body h1{font-size:24px}html body h2{font-size:18px}
}

/* ===== 8. 公共组件（motion/motion.html） ===== */
/* 按钮：胶囊、800 字重；悬停上浮 1px + 阴影加深，按下缩到 0.96 */
html body .btn{border-radius:var(--r-pill);font-family:inherit;font-weight:800;font-size:14px;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out),background-color var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
html body .btn:hover:not(:disabled){transform:translateY(-1px)}
html body .btn:active:not(:disabled){transform:scale(.96)}
html body .btn:disabled,html body .btn[aria-busy="true"]{cursor:default;opacity:.85}
html body .btn.btn-sm{font-size:13px}
html body .btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(36,33,42,.25)}
html body .btn-brand:hover:not(:disabled){box-shadow:0 10px 22px rgba(36,33,42,.32)}
/* 按钮内转圈（IriviUI.busy） */
html body .irivi-spinner{display:inline-block;width:16px;height:16px;vertical-align:-3px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:currentColor;animation:iriviRotate .8s linear infinite}
html body .irivi-spinner.is-brand{border-color:#E4E2E8;border-top-color:var(--brand)}
html body .irivi-spinner.is-lg{width:22px;height:22px}
@keyframes iriviRotate{to{transform:rotate(360deg)}}
/* 统一处理中反馈（static/app/busy.js，负责人 2026-10-30）：按钮内转圈 + “删除中…”文案；切换 / 图标按钮只加安静遮罩；
   顶部细进度条（用户操作 800ms 未完成）；“网络较慢，正在处理…”提示条（3 秒未完成） */
html body .irivi-busy{cursor:progress!important}
html body .irivi-busy>.irivi-busy-spin{width:14px;height:14px;border-width:2px;margin-right:6px;vertical-align:-2px;flex:0 0 auto}
html body .irivi-busy>.irivi-busy-text{white-space:nowrap}
html body button.irivi-busy:not(.irivi-busy-quiet):not([hidden]){display:inline-flex;align-items:center;justify-content:center}
html body .irivi-busy-quiet{opacity:.72}
html body .irivi-busy-quiet::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(36,33,42,.18);border-top-color:var(--ink);animation:iriviRotate .8s linear infinite;pointer-events:none;z-index:2}
html body .irivi-busy-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:12002;overflow:hidden;pointer-events:none;background:rgba(36,33,42,.08)}
html body .irivi-busy-bar[hidden]{display:none}
html body .irivi-busy-bar>i{position:absolute;top:0;bottom:0;left:0;width:36%;border-radius:0 3px 3px 0;background:var(--brand-pink,#FF76B8);background:linear-gradient(90deg,var(--brand-pink,#FF76B8),var(--ink));animation:iriviBusyBar 1.1s var(--ease-out) infinite}
@keyframes iriviBusyBar{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
html body .irivi-net-note{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;z-index:12001;display:flex;align-items:center;gap:8px;max-width:min(92vw,440px);padding:8px 14px;border-radius:var(--r-pill);background:var(--warn-soft);color:var(--warn);border:1px solid #F1DFAE;font-size:13px;font-weight:800;line-height:1.45;box-shadow:0 10px 30px rgba(36,20,70,.16);transform:translateX(-50%);animation:iriviNoteIn var(--t-base) var(--ease-out)}
@keyframes iriviNoteIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
html body .irivi-net-note[hidden]{display:none}
html body .irivi-net-note>.irivi-spinner{width:14px;height:14px;border-width:2px;border-color:rgba(107,74,14,.2);border-top-color:var(--warn);flex:0 0 auto}
@media (prefers-reduced-motion:reduce){html body .irivi-busy-bar>i{animation:none;width:100%;opacity:.6}html body .irivi-net-note{animation:none}}
html body .irivi-dots{display:inline-flex;gap:5px}
html body .irivi-dots i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:iriviBob 1s var(--ease-out) infinite}
html body .irivi-dots i:nth-child(2){animation-delay:.15s}html body .irivi-dots i:nth-child(3){animation-delay:.3s}
@keyframes iriviBob{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
/* 骨架屏：结构已知的列表 / 卡片首屏；瀑布流按真实宽高比占位（style="aspect-ratio:w/h"） */
html body .irivi-skeleton{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,#ECEBEF 0,#F7F6F9 40%,#ECEBEF 80%);background-size:300% 100%;animation:iriviShimmer 1.4s linear infinite}
html body .irivi-skeleton.is-text{height:10px;border-radius:5px}
html body .irivi-skeleton.is-image{aspect-ratio:var(--ar,3/4);border-radius:var(--r-sm)}
@keyframes iriviShimmer{from{background-position:100% 0}to{background-position:-200% 0}}
/* 进度条 + 具体说明（"上传中 3 / 8 张 · 约 20 秒"） */
html body .irivi-progress{display:block}
html body .irivi-progress .bar{height:8px;border-radius:4px;background:#E6E4EA;overflow:hidden}
html body .irivi-progress .bar>i{display:block;height:100%;width:var(--value,0%);border-radius:4px;background:var(--brand);transition:width var(--t-slow) var(--ease-out)}
html body .irivi-progress small{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* 轻提示：从下方升起，停 2 秒淡出（IriviUI.toast） */
html body .irivi-toast-host{position:fixed;left:0;right:0;bottom:calc(32px + var(--safe-bottom));z-index:12000;display:flex;justify-content:center;pointer-events:none}
html body .irivi-toast{max-width:min(92vw,420px);padding:8px 14px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:13px;font-weight:700;line-height:1.5;box-shadow:0 10px 30px rgba(36,20,70,.2);
  opacity:0;transform:translateY(30px);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
html body .irivi-toast.is-in{opacity:1;transform:none}
html body .irivi-toast.is-out{opacity:0;transform:translateY(-6px);transition-timing-function:var(--ease-in)}
html body .irivi-toast.is-error,html body .irivi-toast.is-danger{background:var(--danger)}
html body .irivi-toast.is-ok{background:var(--ok)}
@media (max-aspect-ratio:1/1){html body .irivi-toast-host{bottom:calc(var(--tabbar-h) + 16px + var(--safe-bottom))}html body[data-tabbar="off"] .irivi-toast-host{bottom:calc(32px + var(--safe-bottom))}}
/* 点赞：白底圆、已赞玫红；点亮时放大到 1.28 回弹 + 粉色外圈扩散；取消不播（IriviUI.heart） */
html body .irivi-heart{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#C9C3D3;box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer;transition:color var(--t-base) var(--ease-out)}
html body .irivi-heart svg{width:22px;height:22px;fill:currentColor}
html body .irivi-heart.is-on{color:var(--pink)}
html body .irivi-heart.is-pop{animation:iriviHeartPop .45s var(--ease-spring)}
html body .irivi-heart.is-pop::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--pink);animation:iriviHeartRing .5s var(--ease-out) forwards}
@keyframes iriviHeartPop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes iriviHeartRing{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
/* 灯箱点赞按钮 #lightboxLike：数字等宽；点赞回弹（image_likes 调 IriviUI.heart，取消不播） */
html body #lightboxLike{position:relative;font-family:var(--f-num);font-variant-numeric:tabular-nums}
html body #lightboxLike.is-pop{animation:iriviHeartPop .45s var(--ease-spring)}
html body #lightboxLike.is-pop::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--pink);pointer-events:none;animation:iriviHeartRing .5s var(--ease-out) forwards}
/* 数字滚动（IriviUI.rollNumber）：向上滚一格 */
html body .irivi-roll{display:inline-flex;overflow:hidden;height:1.2em;line-height:1.2em;vertical-align:bottom;font-variant-numeric:tabular-nums}
html body .irivi-roll-column{display:flex;flex-direction:column;transition:transform var(--t-slow) var(--ease-out)}
html body .irivi-roll-column i{font-style:normal;height:1.2em;line-height:1.2em}
html body .irivi-roll-column.is-rolled{transform:translateY(-1.2em)}
/* 图片按真实比例占位、模糊到清晰淡入（image_delivery 设 data-media-source 后清透明度） */
html body img[data-media-image-id]{transition:opacity var(--t-slow) ease,filter var(--t-slow) ease,transform var(--t-slow) ease}
html body img[data-media-image-id]:not([data-media-source]){filter:blur(8px);transform:scale(1.04)}
html body img[data-media-image-id][data-media-source]{filter:none;transform:none}
html body .irivi-ratio{position:relative;display:block;aspect-ratio:var(--ar,3/4);overflow:hidden;border-radius:var(--r-sm);background:#E4E1E8}
html body .irivi-ratio>img{display:block;width:100%;height:100%;object-fit:cover}
/* 抽屉（左滑入 320ms / 出 200ms）、底部面板（下滑出）、压暗层 */
html body .irivi-dim{position:fixed;inset:0;z-index:1200;background:rgba(22,18,28,.45);opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
html body .irivi-dim.is-in{opacity:1}
html body .irivi-drawer{position:fixed;top:0;bottom:0;left:0;z-index:1210;width:340px;max-width:86vw;background:#fff;border-radius:0 var(--r-lg) var(--r-lg) 0;box-shadow:8px 0 20px rgba(36,20,70,.12);overflow:auto;overscroll-behavior:contain;
  transform:translateX(-102%);transition:transform var(--t-slow) var(--ease-out)}
html body .irivi-drawer.is-in{transform:none}
html body .irivi-drawer.is-out{transform:translateX(-102%);transition:transform var(--t-base) var(--ease-in)}
/* 左侧“筛选”小标签可按住往外拉（IriviUI.pullDrawer）：标签上不触发浏览器的横向滚动 / 文字选择 */
html body .search-filter-tab,html body .rq-filter-tab{touch-action:none;-webkit-user-select:none;user-select:none}
html body.irivi-pulling{-webkit-user-select:none;user-select:none;cursor:grabbing}
html body .irivi-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1210;max-height:86vh;background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:8px 12px calc(22px + var(--safe-bottom));box-shadow:0 -8px 20px rgba(36,20,70,.12);overflow:auto;overscroll-behavior:contain;
  transform:translateY(102%);transition:transform var(--t-slow) var(--ease-out)}
html body .irivi-sheet.is-in{transform:none}
html body .irivi-sheet.is-out{transform:translateY(102%);transition:transform var(--t-base) var(--ease-in)}
html body .irivi-sheet .grab{width:38px;height:4px;border-radius:2px;background:#DDD8E4;margin:2px auto 6px}
/* 胶囊 Tag（分类色：--c） */
html body .irivi-tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--r-pill);border:1.5px solid var(--c,var(--brand));color:var(--c,var(--brand));background:#fff;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;transition:background-color var(--t-base),color var(--t-base)}
html body .irivi-tag.is-on{background:var(--c,var(--brand));color:#fff;font-weight:800}
html body .irivi-chip{display:inline-flex;align-items:center;height:18px;padding:0 9px;border-radius:var(--r-pill);background:var(--candy);color:#3A1626;font-size:11px;font-weight:900;line-height:1}
/* 校验弹窗与通用卡片圆角归一 */
html body .validation-modal-card{border-radius:var(--r-lg)}
html body .pt-notification-card{border-radius:var(--r-lg)}

/* ===== 9. 自定义下拉（原 site_controls.css；原生 select 仍是数据源） ===== */
html body .irivi-chevron{display:inline-grid!important;place-items:center;flex:0 0 20px;width:20px;height:20px;line-height:0}
html body .irivi-chevron::before{content:'';display:block;width:8px;height:8px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:translateY(-2px) rotate(45deg)}
html body [aria-expanded=true]>.irivi-chevron::before{transform:translateY(2px) rotate(225deg)}
html body .irivi-select{display:inline-block;position:relative;min-width:0;max-width:100%;vertical-align:middle}
html body .irivi-select>select.irivi-select-source{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)}
html body .irivi-select-trigger{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:40px;margin:0;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;line-height:1.4;cursor:pointer;transition:border-color var(--t-base),background-color var(--t-base)}
html body .irivi-select-trigger>span:first-child{flex:1;text-align:left;overflow-wrap:anywhere}
html body .irivi-select-trigger:focus-visible,html body .account-menu-trigger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
html body .irivi-select-trigger[aria-expanded=true]{border-color:var(--brand);background:var(--brand-soft)}
html body .irivi-select-trigger:disabled{opacity:.5;cursor:default}
html body .irivi-select-menu{position:fixed;z-index:10000;display:grid;gap:2px;padding:6px;overflow:auto;border:0;border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-pop);overscroll-behavior:contain;animation:iriviPopIn var(--t-base) var(--ease-out)}
html body .irivi-select-menu button{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px;min-height:38px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--ink);text-align:left;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
html body .irivi-select-menu button[aria-selected=true]{background:var(--brand-soft);color:var(--brand);font-weight:800}
html body .irivi-select-menu button:hover,html body .irivi-select-menu button:focus-visible{background:var(--soft);outline:0}
html body #nav .irivi-select-trigger{min-height:32px;padding:4px 10px;border-color:transparent;background:transparent;color:var(--ink-2)}
html body #discoverLanguage .irivi-select{min-width:112px}html body .result-sort-control .irivi-select{min-width:124px}

/* ===== 10. 减少动态效果 ===== */
@media (prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html body .irivi-spinner{animation-duration:.8s!important;animation-iteration-count:infinite!important}
  html body .irivi-dots i{animation-duration:1s!important;animation-iteration-count:infinite!important}
  html body .irivi-skeleton{animation-duration:1.4s!important;animation-iteration-count:infinite!important}
  html body #iriviTabbar{transition:none}
  html body img[data-media-image-id]:not([data-media-source]){filter:none;transform:none}
}

/* 安装到主屏幕提示（static/app/install-hint.js）：手机 / 平板非 PWA 时底部小卡片，避开底部标签栏 */
.irivi-install-hint{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:900;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity var(--t-base,200ms) ease,transform var(--t-base,200ms) ease}
.irivi-install-hint.is-in{opacity:1;transform:none}
body[data-tabbar="off"] .irivi-install-hint{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.irivi-install-hint .ih-card{pointer-events:auto;position:relative;display:grid;grid-template-columns:48px 1fr;gap:6px 12px;width:100%;max-width:440px;padding:14px 14px 12px;border-radius:var(--r-lg,16px);background:#fff;box-shadow:0 12px 32px rgba(31,22,50,.18),0 0 0 1px rgba(31,22,50,.06);box-sizing:border-box}
.irivi-install-hint .ih-icon{width:48px;height:48px;border-radius:12px;grid-row:1/3}
.irivi-install-hint .ih-copy{min-width:0;padding-right:20px}
.irivi-install-hint .ih-title{display:block;font-size:15px;font-weight:900;color:var(--ink,#1F2433)}
.irivi-install-hint .ih-text{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2,#555)}
.irivi-install-hint .ih-share{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--soft,#F3F0FA);color:var(--brand,#24212A);font-size:13px;vertical-align:-4px}
.irivi-install-hint .ih-actions{grid-column:2;display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.irivi-install-hint .ih-actions button{height:34px;padding:0 16px;border-radius:999px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.irivi-install-hint .ih-go{border:0;background:var(--brand,#24212A);color:#fff}
.irivi-install-hint .ih-later{border:1px solid var(--line,#E4DFEC);background:#fff;color:var(--ink-2,#555)}
.irivi-install-hint .ih-x{position:absolute;top:6px;right:8px;width:28px;height:28px;border:0;background:none;font-size:20px;line-height:1;color:var(--ink-3,#999);cursor:pointer}
@media (prefers-reduced-motion:reduce){.irivi-install-hint{transition:none}}
/* 先审后发：本人看到自己待审 / 未通过的头像、背景、展示页图片时的标记（网安检查表 9.2.2 b） */
html body .review-pending-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-size:12px;font-weight:700;font-style:normal;line-height:1.4}
html body .review-pending-badge[data-review-status="rejected"]{background:#FDECEF;color:var(--danger)}
html body .profile-avatar{position:relative}
html body .profile-avatar-review{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);white-space:nowrap}
html body .review-pending-label{display:block;margin-top:4px;color:var(--warn)}
html body img[data-review-status]{outline:2px dashed var(--warn);outline-offset:-2px}