/* Irivi · static/app/profile.css（REFACTOR_PLAN 3.5 个人主页）
   对照 design/ui-2026-10-21/profile/profile.html；令牌来自 static/app/base.css。竖屏（max-aspect-ratio:1/1）为手机版。 */
html body[data-page="profile"]>main{max-width:1440px}
html body[data-page="profile"]>main>.page-header{display:none}
html body .profile{color:var(--ink)}
html body .profile :is(h1,h2,h3,p){margin:0}
html body .profile a{text-decoration:none;color:inherit}
html body .profile :is(a,button):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
html body .profile-pending{display:inline-flex;align-items:center;height:16px;margin-left:6px;padding:0 6px;border-radius:var(--r-xs);background:#ECEAF0;color:var(--ink-3);font-size:10px;font-weight:900;font-style:normal}

/* 封面：最近 5 张作品拼成 */
html body .profile-cover{position:relative;display:grid;grid-template-columns:repeat(5,1fr);height:220px;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,#EFE8FF,#FFE4EC)}
html body .profile-cover i{background-size:cover;background-position:center}
html body .profile-cover.has-works::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,34,0) 30%,rgba(20,14,34,.45))}
html body .profile-cover-change{position:absolute;right:14px;top:14px;z-index:2;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.9);color:var(--ink-2);font-size:12px;font-weight:800}
html body .profile-cover-change svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 资料行：大头像压在封面下沿 */
html body .profile-head{position:relative;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:start;margin:-56px 0 0;padding:0 24px;background:none;border:0;box-shadow:none}
html body .profile-avatar{margin:0;padding:0}
html body .profile-avatar .profile-avatar-img{display:grid;place-items:center;width:124px;height:124px;border-radius:50%;border:5px solid #fff;background:var(--candy);color:var(--ink);font-size:48px;font-weight:900;object-fit:cover;box-shadow:0 8px 24px rgba(36,20,70,.18);box-sizing:border-box}
html body .profile-who{padding-top:66px;min-width:0}
html body .profile-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html body .profile-name h1{font-size:28px;font-weight:900;line-height:1.2;overflow-wrap:anywhere}
html body .profile-badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:800;white-space:nowrap}
html body .profile-badge.is-role{background:var(--brand-soft);color:var(--brand)}
html body .profile-badge.is-vip{background:#FFF1F4;color:var(--pink)}
html body .profile-badge.is-vip a{margin-left:4px;color:var(--brand)}
html body .profile-handle{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;font-size:13px;color:var(--ink-3);overflow-wrap:anywhere}
html body .profile-bio{margin-top:6px;max-width:44em;font-size:14px;color:var(--ink-2)}
html body .profile-stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px;padding:0;border:0;background:none}
html body .profile-stats span{font-size:13px;color:var(--ink-3)}
html body .profile-stats b{margin-right:4px;font-size:18px;font-weight:900;color:var(--ink)}
html body .profile-acts{display:flex;gap:8px;padding-top:70px}
html body .profile-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out),background-color var(--t-base),color var(--t-base)}
html body .profile-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-card)}
html body .profile-btn:active:not(:disabled){transform:scale(.96)}
html body .profile-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html body .profile-btn.is-primary{background:var(--brand);border-color:var(--brand);color:#fff}
html body .profile-btn.is-primary.is-following{background:#fff;border-color:var(--line);color:var(--ink-2)}
html body .profile-btn.is-icon{width:38px;padding:0}
html body .profile-btn.is-danger{background:var(--danger);border-color:var(--danger);color:#fff}

/* 创作者卡片入口 */
html body .profile-card-entry{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:22px;padding:12px 16px 12px 12px;border-radius:var(--r-md);background:var(--soft)}
html body .profile-card-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:72px;height:96px;border-radius:var(--r-sm);border:3px solid #fff;background:linear-gradient(160deg,#EFE8FF,#FFE4EC);box-shadow:0 4px 12px rgba(36,20,70,.1);box-sizing:border-box}
html body .profile-card-mini i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--candy);font-style:normal;font-size:11px;font-weight:900}
html body .profile-card-mini s{display:block;width:40px;height:5px;border-radius:3px;background:rgba(36,33,42,.15)}
html body .profile-card-mini s+s{width:30px}
html body .profile-card-copy{min-width:0}
html body .profile-card-copy strong{display:block;font-size:15px;font-weight:900}
html body .profile-card-copy small{display:block;font-size:13px;color:var(--ink-2)}
html body .profile .profile-card-url{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--brand);overflow-wrap:anywhere}
html body .profile-card-acts{display:flex;gap:8px}

/* 标签 */
html body .profile-tabs{display:flex;align-items:center;gap:28px;margin-top:26px;padding:0;border:0;border-bottom:1px solid var(--line);background:none;box-shadow:none;height:auto}
html body .profile-tabs button{display:flex;align-items:baseline;gap:6px;padding:10px 0 12px;border:0;border-radius:0;background:none;color:var(--ink-3);font:inherit;font-size:16px;font-weight:800;white-space:nowrap;cursor:pointer;box-shadow:none;transition:color var(--t-base),box-shadow var(--t-base)}
html body .profile-tabs button small{font-size:13px;font-weight:600}
html body .profile-tabs button.active{color:var(--ink);background:none;box-shadow:inset 0 -3px 0 var(--brand)}
html body .profile-tabs button.active small{color:var(--brand)}
html body .profile-grow{flex:1}
html body .profile-private{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
html body .profile-private[hidden]{display:none}
html body .profile-private svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
html body .profile-tools{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:13px;color:var(--ink-3)}
html body .profile-tools[hidden]{display:none}
html body .profile-count{font-weight:700;color:var(--ink-2)}
html body .profile-clear{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--ink-3);font:inherit;font-size:13px;font-weight:700}
html body .profile-clear[hidden]{display:none}
html body .profile-clear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 瀑布流：CSS 网格 + 行跨度（DOM 顺序 = 列表顺序）；图片下方无文字 */
html body .profile .profile-gallery{margin:16px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;min-height:0}
html body .profile #grid.profile-grid{display:grid!important;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));grid-auto-rows:1px;column-gap:var(--gap,12px);row-gap:0;align-items:start;scrollbar-gutter:auto;overflow:visible}
html body .profile #grid.profile-grid[data-loading="true"]{opacity:.6}
html body .profile-card{position:relative;min-width:0;border-radius:var(--r-sm);overflow:hidden;background:#E4E1E8}
html body .profile-card-link{display:block}
html body .profile-card img{display:block;width:100%;height:auto;object-fit:cover;transition:opacity var(--t-slow) ease,filter var(--t-slow) ease,transform var(--t-slow) var(--ease-out)}
html body .profile-card-link:hover img{transform:scale(1.02)}
html body .profile-like{position:absolute;right:8px;bottom:8px;width:32px;height:32px}
html body .profile-like svg{width:17px;height:17px}
html body .profile-like-count{position:absolute;left:8px;bottom:9px;display:flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
html body .profile-like-count svg{width:12px;height:12px;fill:currentColor;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
html body .profile-star{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#E8A317;box-shadow:0 2px 6px rgba(0,0,0,.18);pointer-events:none}
html body .profile-star svg{width:17px;height:17px;fill:currentColor}
/* 已下架占位卡 */
html body .profile-card.is-takedown{background:repeating-linear-gradient(135deg,#F1EFF4 0 10px,#E9E6EE 10px 20px)}
html body .profile-takedown-open{display:grid;place-items:center;width:100%;aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;font:inherit}
html body .profile-takedown-mark{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);background:#fff;color:var(--ink-3);font-size:13px;font-weight:800;box-shadow:0 2px 6px rgba(36,20,70,.08)}
html body .profile-empty{margin-top:16px;padding:48px 16px;border-radius:var(--r-md);background:var(--soft);text-align:center;color:var(--ink-2)}
html body .profile-empty[hidden]{display:none}
html body .profile-end{padding:28px 0 8px;text-align:center;font-size:13px;color:var(--ink-3)}
html body .profile-end[hidden]{display:none}
/* 下架弹窗 */
html body .profile-takedown{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:16px;background:rgba(22,18,28,.45)}
html body .profile-takedown[hidden]{display:none}
html body .profile-takedown-card{width:min(360px,100%);padding:28px 24px 22px;border-radius:var(--r-lg);background:#fff;text-align:center;box-shadow:var(--shadow-pop);animation:iriviPopIn var(--t-base) var(--ease-out)}
html body .profile-takedown-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border-radius:var(--r-md);background:var(--soft);color:var(--ink-3)}
html body .profile-takedown-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
html body .profile-takedown-card h3{font-size:18px;font-weight:900}
html body .profile-takedown-card p{margin-top:4px;font-size:13px;color:var(--ink-2)}
html body .profile-takedown-acts{display:flex;justify-content:center;gap:8px;margin-top:18px}
html body .profile-takedown-acts [hidden]{display:none}

/* 竖屏 = 手机版 */
@media (max-aspect-ratio:1/1){
  html body .profile-cover{height:132px;border-radius:var(--r-md);grid-template-columns:repeat(3,1fr)}
  html body .profile-cover i:nth-child(n+4){display:none}
  html body .profile-cover-change{right:10px;top:10px;height:28px;font-size:11px}
  html body .profile-head{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:-44px;padding:0 4px}
  html body .profile-avatar .profile-avatar-img{width:88px;height:88px;font-size:34px;border-width:4px}
  html body .profile-who{padding-top:0}
  html body .profile-name h1{font-size:21px}
  html body .profile-stats{gap:6px 16px}
  html body .profile-acts{padding-top:6px}
  html body .profile-acts .profile-btn{flex:1}
  html body .profile-acts .profile-btn.is-icon{flex:0 0 38px}
  html body .profile-card-entry{grid-template-columns:56px minmax(0,1fr);margin-top:16px}
  html body .profile-card-mini{width:56px;height:74px}
  html body .profile-card-acts{grid-column:span 2}
  html body .profile-card-acts .profile-btn{flex:1;height:34px}
  html body .profile-tabs{gap:20px;margin-top:18px}
  html body .profile-private{display:none}
  html body .profile-tools{flex-wrap:wrap}
  html body .profile-card{border-radius:8px}
}
html body .profile .profile-email{display:inline;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink-3);font-size:13px;min-height:0}
html body .profile-btn.is-primary.is-following svg{display:none}