.creator-sim-ui{
--x-bg:#000;
--x-panel:#000;
--x-hover:#080808;
--x-soft:#16181c;
--x-soft-hover:#1d1f23;
--x-line:#2f3336;
--x-line-soft:#202327;
--x-text:#e7e9ea;
--x-muted:#71767b;
--x-blue:#1d9bf0;
--x-blue-hover:#1a8cd8;
--x-green:#00ba7c;
--x-pink:#f91880;
--x-red:#f4212e;
--x-gold:#ffd400;
--x-purple:#7856ff;
position:relative;
isolation:isolate;
width:100%;
max-width:680px;
margin:0 auto;
overflow:hidden;
color:var(--x-text);
font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
background:var(--x-bg);
border:1px solid var(--x-line);
border-radius:16px;
box-shadow:0 0 0 1px rgba(255,255,255,.015),0 16px 45px rgba(0,0,0,.35);
}
.creator-sim-ui header,
.creator-sim-ui article,
.creator-sim-ui section,
.creator-sim-ui details,
.creator-sim-ui summary,
.creator-sim-ui div,
.creator-sim-ui p,
.creator-sim-ui span,
.creator-sim-ui strong,
.creator-sim-ui small,
.creator-sim-ui b,
.creator-sim-ui ul,
.creator-sim-ui li,
.creator-sim-ui blockquote{
box-sizing:border-box;
}
.creator-sim-ui::before{
content:"";
position:absolute;
z-index:-1;
inset:0;
pointer-events:none;
background:radial-gradient(circle at 50% -180px,rgba(29,155,240,.11),transparent 350px);
}
.creator-sim-ui .scene-header{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr;
min-height:64px;
background:rgba(0,0,0,.92);
border-bottom:1px solid var(--x-line);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
}
.creator-sim-ui .scene-header::before{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:-1px;
height:1px;
background:linear-gradient(90deg,transparent,var(--x-blue),transparent);
opacity:.3;
}
.creator-sim-ui .scene-cell{
position:relative;
display:flex;
min-width:0;
flex-direction:column;
justify-content:center;
gap:3px;
padding:11px 16px;
}
.creator-sim-ui .scene-cell+.scene-cell{
border-left:1px solid var(--x-line);
}
.creator-sim-ui .scene-label{
display:flex;
align-items:center;
gap:6px;
color:var(--x-muted);
font-size:12px;
font-weight:400;
line-height:1.2;
}
.creator-sim-ui .scene-label::before{
content:"";
display:block;
width:7px;
height:7px;
background:var(--x-blue);
border-radius:50%;
box-shadow:0 0 0 3px rgba(29,155,240,.13);
}
.creator-sim-ui .scene-cell:nth-child(2) .scene-label::before{
background:var(--x-green);
box-shadow:0 0 0 3px rgba(0,186,124,.13);
}
.creator-sim-ui .scene-cell strong{
display:block;
min-width:0;
overflow:hidden;
color:var(--x-text);
font-size:15px;
font-weight:700;
line-height:1.3;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .story-sheet{
position:relative;
padding:14px 16px 15px 68px;
background:var(--x-panel);
border-bottom:1px solid var(--x-line);
transition:background-color .2s ease;
}
.creator-sim-ui .story-sheet:hover{
background:rgba(255,255,255,.015);
}
.creator-sim-ui .story-sheet::before{
content:"AI";
position:absolute;
left:16px;
top:14px;
display:grid;
place-items:center;
width:40px;
height:40px;
color:#fff;
font-size:12px;
font-weight:800;
background:linear-gradient(145deg,#1d9bf0,#7856ff);
border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.creator-sim-ui .story-sheet::after{
content:"世界叙事  @world_sim · 现在";
position:absolute;
left:68px;
right:15px;
top:15px;
overflow:hidden;
color:var(--x-muted);
font-size:14px;
line-height:20px;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .story-content{
position:relative;
padding-top:24px;
color:var(--x-text);
font-size:15px;
line-height:1.62;
overflow-wrap:anywhere;
}
.creator-sim-ui .story-content>p{
margin:0 0 11px;
}
.creator-sim-ui .story-content>p:last-child{
margin-bottom:0;
}
.creator-sim-ui .story-content strong,
.creator-sim-ui .story-content b{
color:#fff;
font-weight:700;
}
.creator-sim-ui .story-content em,
.creator-sim-ui .story-content i{
color:var(--x-blue);
font-style:normal;
}
.creator-sim-ui .story-content a{
color:var(--x-blue);
text-decoration:none;
}
.creator-sim-ui .story-content a:hover{
text-decoration:underline;
}
.creator-sim-ui .story-content blockquote,
.creator-sim-ui .dialogue{
position:relative;
margin:10px 0;
padding:10px 12px;
color:var(--x-text);
background:var(--x-soft);
border:1px solid var(--x-line);
border-radius:12px;
}
.creator-sim-ui .story-content blockquote::before,
.creator-sim-ui .dialogue::before{
content:"“";
position:absolute;
right:10px;
top:0;
color:rgba(29,155,240,.25);
font:700 32px/1 Georgia,serif;
}
.creator-sim-ui .drawer{
--accent:var(--x-blue);
position:relative;
margin:0;
overflow:hidden;
background:var(--x-panel);
border:0;
border-bottom:1px solid var(--x-line);
}
.creator-sim-ui .profile-drawer{--accent:var(--x-blue)}
.creator-sim-ui .money-drawer{--accent:var(--x-gold)}
.creator-sim-ui .x-drawer{--accent:var(--x-text)}
.creator-sim-ui .people-drawer{--accent:var(--x-pink)}
.creator-sim-ui .drawer-summary{
position:relative;
display:grid;
grid-template-columns:40px minmax(0,1fr) 28px;
align-items:center;
gap:12px;
min-height:60px;
padding:9px 16px;
cursor:pointer;
list-style:none;
background:var(--x-panel);
transition:background-color .18s ease;
}
.creator-sim-ui .drawer-summary::-webkit-details-marker{
display:none;
}
.creator-sim-ui .drawer-summary:hover{
background:rgba(231,233,234,.035);
}
.creator-sim-ui .drawer-summary:focus-visible{
outline:2px solid var(--x-blue);
outline-offset:-2px;
}
.creator-sim-ui .drawer-index{
display:grid;
place-items:center;
width:40px;
height:40px;
overflow:hidden;
color:#fff;
font-size:12px;
font-weight:800;
background:var(--accent);
border-radius:50%;
}
.creator-sim-ui .profile-drawer .drawer-index{
background:linear-gradient(145deg,#1d9bf0,#1677b8);
}
.creator-sim-ui .money-drawer .drawer-index{
color:#000;
background:linear-gradient(145deg,#ffe45e,#f4b400);
}
.creator-sim-ui .x-drawer .drawer-index{
color:#000;
background:#eff3f4;
}
.creator-sim-ui .people-drawer .drawer-index{
background:linear-gradient(145deg,#f91880,#c2185b);
}
.creator-sim-ui .drawer-title{
display:flex;
min-width:0;
flex-direction:column;
gap:2px;
}
.creator-sim-ui .drawer-title b{
display:block;
overflow:hidden;
color:var(--x-text);
font-size:15px;
font-weight:700;
line-height:1.25;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .drawer-title small{
display:block;
overflow:hidden;
color:var(--x-muted);
font-size:13px;
font-weight:400;
line-height:1.25;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .drawer-toggle{
position:relative;
display:grid;
place-items:center;
width:28px;
height:28px;
border-radius:50%;
transition:background-color .18s ease,transform .25s ease;
}
.creator-sim-ui .drawer-toggle::before{
content:"";
width:7px;
height:7px;
border-right:2px solid var(--x-muted);
border-bottom:2px solid var(--x-muted);
transform:rotate(45deg) translate(-2px,-2px);
transition:border-color .18s ease;
}
.creator-sim-ui .drawer-toggle::after{
display:none;
}
.creator-sim-ui .drawer-summary:hover .drawer-toggle{
background:rgba(29,155,240,.1);
}
.creator-sim-ui .drawer-summary:hover .drawer-toggle::before{
border-color:var(--x-blue);
}
.creator-sim-ui .drawer[open] .drawer-toggle{
transform:rotate(180deg);
}
.creator-sim-ui .drawer[open]>.drawer-summary{
border-bottom:1px solid var(--x-line-soft);
}
.creator-sim-ui .drawer-reveal{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease;
}
.creator-sim-ui .drawer[open]>.drawer-reveal{
grid-template-rows:1fr;
}
.creator-sim-ui .drawer-inner{
min-height:0;
overflow:hidden;
}
.creator-sim-ui .drawer-content{
padding:12px 16px 16px;
color:var(--x-text);
background:var(--x-panel);
}
.creator-sim-ui .drawer-content>p{
margin:5px 0;
}
.creator-sim-ui .drawer-content>p:first-child{
margin-top:0;
}
.creator-sim-ui .drawer-content>p:last-child{
margin-bottom:0;
}
.creator-sim-ui .drawer-content h3,
.creator-sim-ui .drawer-content h4{
margin:15px 0 8px;
color:var(--x-text);
font-size:16px;
font-weight:800;
line-height:1.3;
}
.creator-sim-ui .drawer-content h3:first-child,
.creator-sim-ui .drawer-content h4:first-child{
margin-top:0;
}
.creator-sim-ui .drawer-content hr{
height:1px;
margin:12px -16px;
background:var(--x-line);
border:0;
}
.creator-sim-ui .profile-grid,
.creator-sim-ui .status-grid,
.creator-sim-ui .people-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0;
overflow:hidden;
background:var(--x-soft);
border:1px solid var(--x-line);
border-radius:16px;
}
.creator-sim-ui .field,
.creator-sim-ui .info-item{
min-width:0;
padding:10px 12px;
border-right:1px solid var(--x-line);
border-bottom:1px solid var(--x-line);
}
.creator-sim-ui .field:nth-child(2n),
.creator-sim-ui .info-item:nth-child(2n){
border-right:0;
}
.creator-sim-ui .field>span:first-child,
.creator-sim-ui .info-item>span:first-child,
.creator-sim-ui .field-label{
display:block;
margin-bottom:2px;
color:var(--x-muted);
font-size:12px;
line-height:1.3;
}
.creator-sim-ui .field>strong,
.creator-sim-ui .info-item>strong,
.creator-sim-ui .field-value{
display:block;
overflow-wrap:anywhere;
color:var(--x-text);
font-size:14px;
font-weight:600;
}
.creator-sim-ui .private-section,
.creator-sim-ui .life-section,
.creator-sim-ui .cumulative-section,
.creator-sim-ui .pose-section{
position:relative;
margin-top:10px;
padding:11px 13px;
background:var(--x-soft);
border:1px solid var(--x-line);
border-radius:16px;
}
.creator-sim-ui .private-section{
border-color:rgba(249,24,128,.32);
}
.creator-sim-ui .life-section{
border-color:rgba(29,155,240,.3);
}
.creator-sim-ui .cumulative-section{
border-color:rgba(120,86,255,.3);
}
.creator-sim-ui .pose-section{
border-color:rgba(0,186,124,.3);
}
.creator-sim-ui .section-title{
display:flex;
align-items:center;
gap:7px;
margin-bottom:6px;
color:var(--x-text);
font-size:13px;
font-weight:700;
}
.creator-sim-ui .section-title::before{
content:"";
display:block;
width:8px;
height:8px;
background:var(--x-blue);
border-radius:50%;
}
.creator-sim-ui .private-section .section-title::before{background:var(--x-pink)}
.creator-sim-ui .cumulative-section .section-title::before{background:var(--x-purple)}
.creator-sim-ui .pose-section .section-title::before{background:var(--x-green)}
.creator-sim-ui .money-overview{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:0;
margin-bottom:12px;
overflow:hidden;
background:var(--x-soft);
border:1px solid var(--x-line);
border-radius:16px;
}
.creator-sim-ui .money-overview .metric{
min-width:0;
padding:10px 6px;
text-align:center;
border-right:1px solid var(--x-line);
}
.creator-sim-ui .money-overview .metric:last-child{
border-right:0;
}
.creator-sim-ui .metric>span:first-child,
.creator-sim-ui .metric-label{
display:block;
overflow:hidden;
color:var(--x-muted);
font-size:11px;
line-height:1.25;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .metric>strong,
.creator-sim-ui .metric-value{
display:block;
margin-top:3px;
overflow:hidden;
color:var(--x-text);
font-size:13px;
font-weight:700;
line-height:1.3;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .money-overview .metric:first-child strong,
.creator-sim-ui .money-overview .metric:first-child .metric-value{
color:var(--x-gold);
}
.creator-sim-ui .revenue-list,
.creator-sim-ui .channel-list{
display:grid;
gap:9px;
}
.creator-sim-ui .revenue-card,
.creator-sim-ui .channel-card,
.creator-sim-ui .order-card{
--card-accent:var(--x-blue);
position:relative;
overflow:hidden;
background:var(--x-soft);
border:1px solid var(--x-line);
border-radius:16px;
transition:background-color .18s ease,border-color .18s ease;
}
.creator-sim-ui .revenue-card:hover,
.creator-sim-ui .channel-card:hover,
.creator-sim-ui .order-card:hover{
background:var(--x-soft-hover);
border-color:#536471;
}
.creator-sim-ui .revenue-card[data-channel="P"],
.creator-sim-ui .channel-card[data-channel="P"]{--card-accent:var(--x-pink)}
.creator-sim-ui .revenue-card[data-channel="V"],
.creator-sim-ui .channel-card[data-channel="V"]{--card-accent:var(--x-purple)}
.creator-sim-ui .revenue-card[data-channel="G"],
.creator-sim-ui .channel-card[data-channel="G"]{--card-accent:var(--x-blue)}
.creator-sim-ui .revenue-card[data-channel="O"],
.creator-sim-ui .channel-card[data-channel="O"]{--card-accent:var(--x-gold)}
.creator-sim-ui .revenue-card[data-channel="F"],
.creator-sim-ui .channel-card[data-channel="F"]{--card-accent:var(--x-red)}
.creator-sim-ui .revenue-card::before,
.creator-sim-ui .channel-card::before,
.creator-sim-ui .order-card::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:var(--card-accent);
}
.creator-sim-ui .card-head,
.creator-sim-ui .channel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 12px 7px 15px;
}
.creator-sim-ui .card-head b,
.creator-sim-ui .channel-head b{
color:var(--x-text);
font-size:14px;
font-weight:700;
}
.creator-sim-ui .channel-code,
.creator-sim-ui .record-id,
.creator-sim-ui .order-id{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:27px;
min-height:22px;
padding:2px 7px;
color:var(--card-accent);
font-size:11px;
font-weight:700;
line-height:1;
background:rgba(255,255,255,.035);
border:1px solid var(--x-line);
border-radius:999px;
}
.creator-sim-ui .card-stats,
.creator-sim-ui .channel-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
padding:1px 10px 10px 13px;
}
.creator-sim-ui .card-stats>span,
.creator-sim-ui .channel-stats>span{
min-width:0;
padding:3px 6px;
color:var(--x-muted);
font-size:11px;
text-align:center;
border-right:1px solid var(--x-line);
}
.creator-sim-ui .card-stats>span:last-child,
.creator-sim-ui .channel-stats>span:last-child{
border-right:0;
}
.creator-sim-ui .card-stats strong,
.creator-sim-ui .channel-stats strong{
display:block;
overflow:hidden;
margin-bottom:1px;
color:var(--x-text);
font-size:13px;
font-weight:700;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .record-list,
.creator-sim-ui .order-list{
margin:0;
padding:7px 12px 9px 15px;
border-top:1px solid var(--x-line);
}
.creator-sim-ui .record,
.creator-sim-ui .order{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:start;
gap:8px;
padding:6px 0;
color:var(--x-muted);
font-size:12px;
border-bottom:1px solid var(--x-line-soft);
}
.creator-sim-ui .record:last-child,
.creator-sim-ui .order:last-child{
border-bottom:0;
}
.creator-sim-ui .record-status,
.creator-sim-ui .order-status,
.creator-sim-ui .status-tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:3px 8px;
color:var(--x-green);
font-size:11px;
font-weight:600;
line-height:1.3;
background:rgba(0,186,124,.1);
border-radius:999px;
white-space:nowrap;
}
.creator-sim-ui .status-tag.pending,
.creator-sim-ui .record-status.pending,
.creator-sim-ui .order-status.pending{
color:var(--x-gold);
background:rgba(255,212,0,.1);
}
.creator-sim-ui .status-tag.risk,
.creator-sim-ui .record-status.risk,
.creator-sim-ui .order-status.risk{
color:var(--x-red);
background:rgba(244,33,46,.1);
}
.creator-sim-ui .x-profile{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:10px;
min-height:84px;
margin:-12px -16px 0;
padding:15px 16px 14px 72px;
background:var(--x-bg);
border-bottom:1px solid var(--x-line);
}
.creator-sim-ui .x-profile::before{
content:"X";
position:absolute;
left:16px;
top:15px;
display:grid;
place-items:center;
width:44px;
height:44px;
color:#000;
font-size:20px;
font-weight:800;
background:#eff3f4;
border-radius:50%;
}
.creator-sim-ui .x-identity{
min-width:0;
}
.creator-sim-ui .x-name{
display:block;
overflow:hidden;
color:var(--x-text);
font-size:15px;
font-weight:700;
line-height:1.25;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .x-name::after{
content:" ✓";
color:var(--x-blue);
font-size:13px;
}
.creator-sim-ui .x-id,
.creator-sim-ui .x-bio{
display:block;
overflow-wrap:anywhere;
color:var(--x-muted);
font-size:13px;
line-height:1.35;
}
.creator-sim-ui .x-growth{
padding:6px 11px;
color:#fff;
font-size:12px;
font-weight:700;
line-height:1.2;
text-align:center;
background:var(--x-blue);
border-radius:999px;
white-space:nowrap;
}
.creator-sim-ui .account-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
margin:0 -16px 10px;
border-bottom:1px solid var(--x-line);
}
.creator-sim-ui .account-stats .stat{
min-width:0;
padding:10px 4px;
text-align:center;
transition:background-color .18s ease;
}
.creator-sim-ui .account-stats .stat:hover{
background:rgba(231,233,234,.035);
}
.creator-sim-ui .account-stats .stat>span:first-child{
display:block;
color:var(--x-muted);
font-size:11px;
}
.creator-sim-ui .account-stats .stat>strong{
display:block;
overflow:hidden;
color:var(--x-text);
font-size:14px;
font-weight:700;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .x-post,
.creator-sim-ui .post-card{
position:relative;
margin:0 -16px;
padding:12px 16px 8px 68px;
background:var(--x-bg);
border-bottom:1px solid var(--x-line);
transition:background-color .18s ease;
}
.creator-sim-ui .x-post:hover,
.creator-sim-ui .post-card:hover{
background:rgba(231,233,234,.025);
}
.creator-sim-ui .x-post::before,
.creator-sim-ui .post-card::before{
content:"X";
position:absolute;
left:16px;
top:12px;
display:grid;
place-items:center;
width:40px;
height:40px;
color:#fff;
font-size:17px;
font-weight:800;
background:linear-gradient(145deg,#1d9bf0,#7856ff);
border-radius:50%;
}
.creator-sim-ui .post-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:20px;
padding:0 0 3px;
}
.creator-sim-ui .post-author{
min-width:0;
overflow:hidden;
color:var(--x-text);
font-size:14px;
font-weight:700;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .post-author::after{
content:" ✓";
color:var(--x-blue);
}
.creator-sim-ui .post-time{
color:var(--x-muted);
font-size:13px;
white-space:nowrap;
}
.creator-sim-ui .post-text{
padding:0 0 9px;
color:var(--x-text);
font-size:15px;
line-height:1.45;
overflow-wrap:anywhere;
}
.creator-sim-ui .post-media,
.creator-sim-ui .media-description{
position:relative;
min-height:86px;
margin:0 0 9px;
padding:14px 14px 14px 40px;
display:flex;
align-items:center;
color:#b7bbc0;
font-size:13px;
line-height:1.45;
background:
linear-gradient(135deg,rgba(29,155,240,.12),transparent 45%),
linear-gradient(315deg,rgba(120,86,255,.11),transparent 50%),
var(--x-soft);
border:1px solid var(--x-line);
border-radius:16px;
}
.creator-sim-ui .post-media::before,
.creator-sim-ui .media-description::before{
content:"▧";
position:absolute;
left:14px;
top:15px;
color:var(--x-blue);
font-size:17px;
}
.creator-sim-ui .post-metrics,
.creator-sim-ui .interaction-data{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
min-height:34px;
align-items:center;
border-top:1px solid var(--x-line-soft);
}
.creator-sim-ui .post-metrics>span,
.creator-sim-ui .interaction-data>span{
position:relative;
min-width:0;
padding:7px 2px;
color:var(--x-muted);
font-size:10px;
text-align:center;
transition:color .18s ease,background-color .18s ease;
border-radius:999px;
}
.creator-sim-ui .post-metrics>span:hover,
.creator-sim-ui .interaction-data>span:hover{
color:var(--x-blue);
background:rgba(29,155,240,.08);
}
.creator-sim-ui .post-metrics>span:nth-child(3):hover,
.creator-sim-ui .interaction-data>span:nth-child(3):hover{
color:var(--x-green);
background:rgba(0,186,124,.08);
}
.creator-sim-ui .post-metrics>span:nth-child(4):hover,
.creator-sim-ui .interaction-data>span:nth-child(4):hover{
color:var(--x-pink);
background:rgba(249,24,128,.08);
}
.creator-sim-ui .post-metrics strong,
.creator-sim-ui .interaction-data strong{
display:block;
overflow:hidden;
color:inherit;
font-size:11px;
font-weight:600;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .reply-list{
position:relative;
margin:0;
padding:2px 0 0;
border-top:1px solid var(--x-line-soft);
}
.creator-sim-ui .reply,
.creator-sim-ui .comment{
position:relative;
min-height:40px;
padding:8px 4px 8px 38px;
color:var(--x-text);
font-size:13px;
line-height:1.45;
border-bottom:1px solid var(--x-line-soft);
}
.creator-sim-ui .reply:last-child,
.creator-sim-ui .comment:last-child{
border-bottom:0;
}
.creator-sim-ui .reply::before,
.creator-sim-ui .comment::before{
content:"";
position:absolute;
left:3px;
top:8px;
width:27px;
height:27px;
background:
linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.04)),
var(--x-soft);
border:1px solid var(--x-line);
border-radius:50%;
}
.creator-sim-ui .reply-name,
.creator-sim-ui .comment-name{
margin-right:5px;
color:var(--x-text);
font-weight:700;
}
.creator-sim-ui .reply-name::after,
.creator-sim-ui .comment-name::after{
content:" ·";
color:var(--x-muted);
font-weight:400;
}
.creator-sim-ui .player-reply{
margin-left:18px;
padding-left:38px;
}
.creator-sim-ui .player-reply::before{
background:linear-gradient(145deg,var(--x-blue),#1677b8);
border-color:transparent;
}
.creator-sim-ui .player-reply .reply-name{
color:var(--x-blue);
}
.creator-sim-ui .sub-reply{
margin-left:32px;
}
.creator-sim-ui .sub-reply::after{
content:"";
position:absolute;
left:-15px;
top:0;
bottom:0;
width:1px;
background:var(--x-line);
}
.creator-sim-ui .conversion-note,
.creator-sim-ui .risk-note{
position:relative;
margin:10px 0 0;
padding:10px 12px 10px 36px;
color:var(--x-muted);
font-size:12px;
line-height:1.45;
background:rgba(29,155,240,.08);
border:1px solid rgba(29,155,240,.25);
border-radius:12px;
}
.creator-sim-ui .conversion-note::before{
content:"↗";
position:absolute;
left:12px;
top:9px;
display:grid;
place-items:center;
width:17px;
height:17px;
color:var(--x-blue);
font-size:14px;
font-weight:800;
}
.creator-sim-ui .risk-note{
background:rgba(244,33,46,.08);
border-color:rgba(244,33,46,.26);
}
.creator-sim-ui .risk-note::before{
content:"!";
position:absolute;
left:12px;
top:9px;
display:grid;
place-items:center;
width:17px;
height:17px;
color:#fff;
font-size:11px;
font-weight:800;
background:var(--x-red);
border-radius:50%;
}
.creator-sim-ui .people-grid{
grid-template-columns:1fr;
gap:0;
background:transparent;
border:0;
border-radius:0;
}
.creator-sim-ui .person-card{
position:relative;
min-height:72px;
padding:11px 12px 11px 65px;
background:var(--x-bg);
border-bottom:1px solid var(--x-line);
transition:background-color .18s ease;
}
.creator-sim-ui .person-card:first-child{
border-top:1px solid var(--x-line);
}
.creator-sim-ui .person-card:hover{
background:rgba(231,233,234,.035);
}
.creator-sim-ui .person-card::before{
content:"";
position:absolute;
left:8px;
top:11px;
width:44px;
height:44px;
background:
radial-gradient(circle at 35% 32%,rgba(255,255,255,.4) 0 8%,transparent 9%),
linear-gradient(145deg,var(--x-blue),var(--x-purple));
border-radius:50%;
}
.creator-sim-ui .person-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:5px;
}
.creator-sim-ui .person-name{
min-width:0;
overflow:hidden;
color:var(--x-text);
font-size:14px;
font-weight:700;
text-overflow:ellipsis;
white-space:nowrap;
}
.creator-sim-ui .relation-stage{
flex:0 0 auto;
padding:5px 11px;
color:var(--x-text);
font-size:11px;
font-weight:700;
background:transparent;
border:1px solid #536471;
border-radius:999px;
white-space:nowrap;
}
.creator-sim-ui .person-card:hover .relation-stage{
background:rgba(231,233,234,.08);
}
.creator-sim-ui .person-info{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:3px 10px;
color:var(--x-muted);
font-size:12px;
}
.creator-sim-ui .person-info>span{
min-width:0;
overflow-wrap:anywhere;
}
.creator-sim-ui .unresolved{
grid-column:1/-1;
margin-top:5px;
padding-top:6px;
color:var(--x-blue);
border-top:1px solid var(--x-line-soft);
}
.creator-sim-ui .memory-capsule{
display:none!important;
}
.creator-sim-ui .action-panel,
.creator-sim-ui .actions,
.creator-sim-ui .action-options{
position:relative;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
padding:14px 16px 16px;
background:var(--x-bg);
}
.creator-sim-ui .action-panel::before,
.creator-sim-ui .actions::before,
.creator-sim-ui .action-options::before{
content:"你接下来想做什么？";
grid-column:1/-1;
margin-bottom:3px;
color:var(--x-text);
font-size:18px;
font-weight:800;
line-height:1.25;
}
.creator-sim-ui .action-item,
.creator-sim-ui .action-option,
.creator-sim-ui .choice{
position:relative;
min-width:0;
padding:11px 13px 11px 42px;
color:var(--x-text);
font-size:13px;
font-weight:600;
line-height:1.4;
background:var(--x-soft);
border:1px solid var(--x-line);
border-radius:16px;
transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.creator-sim-ui .action-item::before,
.creator-sim-ui .action-option::before,
.creator-sim-ui .choice::before{
content:attr(data-key);
position:absolute;
left:11px;
top:50%;
display:grid;
place-items:center;
width:22px;
height:22px;
color:#fff;
font-size:11px;
font-weight:800;
line-height:1;
background:var(--x-blue);
border-radius:50%;
transform:translateY(-50%);
}
.creator-sim-ui .action-item:hover,
.creator-sim-ui .action-option:hover,
.creator-sim-ui .choice:hover{
background:var(--x-soft-hover);
border-color:#536471;
transform:translateY(-1px);
}
.creator-sim-ui .action-item:active,
.creator-sim-ui .action-option:active,
.creator-sim-ui .choice:active{
transform:translateY(0);
}
.creator-sim-ui .custom-action{
grid-column:1/-1;
padding-top:12px;
padding-bottom:12px;
color:#fff;
background:var(--x-blue);
border-color:var(--x-blue);
border-radius:999px;
text-align:center;
}
.creator-sim-ui .custom-action::before{
color:var(--x-blue);
background:#fff;
}
.creator-sim-ui .custom-action:hover{
background:var(--x-blue-hover);
border-color:var(--x-blue-hover);
}
.creator-sim-ui .empty-state{
position:relative;
padding:27px 16px;
color:var(--x-muted);
font-size:13px;
text-align:center;
background:var(--x-bg);
border:1px solid var(--x-line);
border-radius:16px;
}
.creator-sim-ui .empty-state::before{
content:"𝕏";
display:block;
margin-bottom:7px;
color:var(--x-text);
font-size:25px;
font-weight:700;
}
.creator-sim-ui .positive{color:var(--x-green)!important}
.creator-sim-ui .negative{color:var(--x-red)!important}
.creator-sim-ui .warning{color:var(--x-gold)!important}
.creator-sim-ui .accent{color:var(--x-blue)!important}
.creator-sim-ui .muted{color:var(--x-muted)!important}
.creator-sim-ui a{
color:var(--x-blue);
text-decoration:none;
}
.creator-sim-ui a:hover{
text-decoration:underline;
}
@media(max-width:600px){
.creator-sim-ui{
border-left:0;
border-right:0;
border-radius:12px;
font-size:14px;
}
.creator-sim-ui .scene-cell{
padding-right:11px;
padding-left:12px;
}
.creator-sim-ui .story-sheet{
padding-right:12px;
padding-left:60px;
}
.creator-sim-ui .story-sheet::before{
left:12px;
width:36px;
height:36px;
}
.creator-sim-ui .story-sheet::after{
left:60px;
right:12px;
}
.creator-sim-ui .story-content{
font-size:14px;
}
.creator-sim-ui .drawer-summary{
grid-template-columns:36px minmax(0,1fr) 26px;
gap:10px;
padding-right:11px;
padding-left:12px;
}
.creator-sim-ui .drawer-index{
width:36px;
height:36px;
}
.creator-sim-ui .drawer-content{
padding-right:12px;
padding-left:12px;
}
.creator-sim-ui .drawer-content hr{
margin-right:-12px;
margin-left:-12px;
}
.creator-sim-ui .money-overview{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.creator-sim-ui .money-overview .metric{
border-bottom:1px solid var(--x-line);
}
.creator-sim-ui .money-overview .metric:first-child{
grid-column:1/-1;
}
.creator-sim-ui .money-overview .metric:nth-child(2n+1){
border-right:0;
}
.creator-sim-ui .card-stats,
.creator-sim-ui .channel-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.creator-sim-ui .card-stats>span,
.creator-sim-ui .channel-stats>span{
padding-top:5px;
padding-bottom:5px;
}
.creator-sim-ui .card-stats>span:nth-child(2),
.creator-sim-ui .channel-stats>span:nth-child(2){
border-right:0;
}
.creator-sim-ui .x-profile{
margin-right:-12px;
margin-left:-12px;
padding-left:64px;
}
.creator-sim-ui .x-profile::before{
left:12px;
}
.creator-sim-ui .account-stats{
margin-right:-12px;
margin-left:-12px;
}
.creator-sim-ui .x-post,
.creator-sim-ui .post-card{
margin-right:-12px;
margin-left:-12px;
padding-right:12px;
padding-left:60px;
}
.creator-sim-ui .x-post::before,
.creator-sim-ui .post-card::before{
left:12px;
width:36px;
height:36px;
}
.creator-sim-ui .post-metrics,
.creator-sim-ui .interaction-data{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.creator-sim-ui .action-panel,
.creator-sim-ui .actions,
.creator-sim-ui .action-options{
grid-template-columns:1fr;
padding-right:12px;
padding-left:12px;
}
.creator-sim-ui .custom-action{
grid-column:auto;
}
}
@media(max-width:420px){
.creator-sim-ui .scene-header{
grid-template-columns:1fr;
}
.creator-sim-ui .scene-cell{
min-height:51px;
padding-top:9px;
padding-bottom:9px;
}
.creator-sim-ui .scene-cell+.scene-cell{
border-top:1px solid var(--x-line);
border-left:0;
}
.creator-sim-ui .profile-grid,
.creator-sim-ui .status-grid{
grid-template-columns:1fr;
}
.creator-sim-ui .field,
.creator-sim-ui .info-item{
border-right:0;
}
.creator-sim-ui .account-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.creator-sim-ui .account-stats .stat{
border-bottom:1px solid var(--x-line-soft);
}
.creator-sim-ui .x-profile{
grid-template-columns:minmax(0,1fr);
}
.creator-sim-ui .x-growth{
position:absolute;
right:12px;
top:15px;
max-width:96px;
overflow:hidden;
text-overflow:ellipsis;
}
.creator-sim-ui .x-identity{
padding-right:70px;
}
.creator-sim-ui .person-info{
grid-template-columns:1fr;
}
.creator-sim-ui .record,
.creator-sim-ui .order{
grid-template-columns:auto minmax(0,1fr);
}
.creator-sim-ui .record-status,
.creator-sim-ui .order-status{
grid-column:2;
justify-self:start;
}
}
@media(prefers-reduced-motion:reduce){
.creator-sim-ui .drawer-reveal,
.creator-sim-ui .drawer-toggle,
.creator-sim-ui .story-sheet,
.creator-sim-ui .revenue-card,
.creator-sim-ui .channel-card,
.creator-sim-ui .order-card,
.creator-sim-ui .x-post,
.creator-sim-ui .post-card,
.creator-sim-ui .person-card,
.creator-sim-ui .action-item,
.creator-sim-ui .action-option,
.creator-sim-ui .choice{
transition:none;
}
}
.creator-sim-ui{
--x-glow:rgba(29,155,240,.22);
--x-mask:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);
}
.creator-sim-ui .scene-header{
grid-template-columns:1fr 1fr;
min-height:134px;
padding-top:70px;
overflow:hidden;
}
.creator-sim-ui .scene-header::after{
content:"创作者中心";
position:absolute;
left:16px;
top:13px;
z-index:2;
color:var(--x-text);
font-size:20px;
font-weight:800;
line-height:28px;
letter-spacing:-.02em;
}
.creator-sim-ui .scene-header::before{
content:"主页　　　　创作　　　　收益　　　　数据";
position:absolute;
left:0;
right:0;
top:48px;
bottom:auto;
z-index:2;
width:auto;
height:38px;
display:flex;
align-items:flex-start;
justify-content:center;
overflow:hidden;
color:var(--x-muted);
font-size:13px;
font-weight:500;
line-height:36px;
text-align:center;
white-space:nowrap;
background:none;
border-bottom:1px solid var(--x-line);
opacity:1;
box-shadow:none;
}
.creator-sim-ui .scene-header .scene-cell{
min-height:64px;
padding-top:13px;
}
.creator-sim-ui .scene-header .scene-cell:first-of-type::after{
content:"";
position:absolute;
left:20%;
right:20%;
top:-23px;
height:4px;
background:var(--x-blue);
border-radius:999px;
box-shadow:0 0 12px var(--x-glow);
}
.creator-sim-ui .scene-header .scene-cell:first-of-type::before{
content:"𝕏";
position:absolute;
right:16px;
top:-59px;
display:grid;
place-items:center;
width:29px;
height:29px;
color:var(--x-text);
font-size:19px;
font-weight:800;
background:transparent;
border-radius:50%;
transition:background-color .18s ease;
}
.creator-sim-ui .scene-header .scene-cell:first-of-type:hover::before{
background:rgba(231,233,234,.1);
}
.creator-sim-ui .story-sheet{
min-height:112px;
}
.creator-sim-ui .story-sheet::before{
outline:2px solid var(--x-bg);
box-shadow:0 0 0 1px var(--x-line);
}
.creator-sim-ui .story-sheet::after{
content:"世界叙事  @world_sim · 现在";
color:var(--x-muted);
}
.creator-sim-ui .story-content{
padding-bottom:36px;
}
.creator-sim-ui .story-content::after{
content:"○　　↻　　♡　　▥　　↗";
position:absolute;
left:0;
right:0;
bottom:0;
height:28px;
display:flex;
align-items:center;
justify-content:space-between;
max-width:430px;
color:var(--x-muted);
font-size:17px;
font-weight:400;
letter-spacing:.07em;
line-height:28px;
transition:color .18s ease;
}
.creator-sim-ui .story-sheet:hover .story-content::after{
color:#8b949e;
}
.creator-sim-ui .story-content>p:first-child::first-letter{
color:inherit;
font-size:inherit;
font-weight:inherit;
}
.creator-sim-ui .drawer-summary{
min-height:64px;
}
.creator-sim-ui .drawer-summary::before{
content:"";
position:absolute;
left:67px;
right:58px;
bottom:0;
height:1px;
background:var(--x-line-soft);
opacity:.72;
}
.creator-sim-ui .drawer:last-of-type{
border-bottom-color:var(--x-line);
}
.creator-sim-ui .drawer[open]>.drawer-summary::after{
content:"";
position:absolute;
left:67px;
bottom:-1px;
width:34px;
height:2px;
background:var(--accent);
border-radius:999px;
box-shadow:0 0 9px color-mix(in srgb,var(--accent) 35%,transparent);
}
.creator-sim-ui .drawer-index{
position:relative;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.creator-sim-ui .profile-drawer[open] .drawer-index,
.creator-sim-ui .money-drawer[open] .drawer-index,
.creator-sim-ui .x-drawer[open] .drawer-index,
.creator-sim-ui .people-drawer[open] .drawer-index{
animation:x-avatar-in .35s cubic-bezier(.2,.8,.2,1);
}
.creator-sim-ui .drawer-title b::after{
content:"";
display:inline-block;
width:5px;
height:5px;
margin-left:7px;
vertical-align:2px;
background:var(--accent);
border-radius:50%;
opacity:.75;
}
.creator-sim-ui .drawer-title small{
letter-spacing:0;
}
.creator-sim-ui .profile-grid,
.creator-sim-ui .status-grid{
position:relative;
}
.creator-sim-ui .profile-grid::before,
.creator-sim-ui .status-grid::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:2px;
background:var(--x-blue);
opacity:.7;
}
.creator-sim-ui .field,
.creator-sim-ui .info-item{
position:relative;
transition:background-color .18s ease;
}
.creator-sim-ui .field:hover,
.creator-sim-ui .info-item:hover{
background:rgba(29,155,240,.055);
}
.creator-sim-ui .field:hover>span:first-child,
.creator-sim-ui .info-item:hover>span:first-child{
color:var(--x-blue);
}
.creator-sim-ui .private-section,
.creator-sim-ui .life-section,
.creator-sim-ui .cumulative-section,
.creator-sim-ui .pose-section{
overflow:hidden;
transition:background-color .18s ease,border-color .18s ease;
}
.creator-sim-ui .private-section::after,
.creator-sim-ui .life-section::after,
.creator-sim-ui .cumulative-section::after,
.creator-sim-ui .pose-section::after{
content:"";
position:absolute;
right:-20px;
top:-28px;
width:88px;
height:88px;
background:radial-gradient(circle,rgba(29,155,240,.1),transparent 67%);
pointer-events:none;
}
.creator-sim-ui .private-section::after{
background:radial-gradient(circle,rgba(249,24,128,.11),transparent 67%);
}
.creator-sim-ui .cumulative-section::after{
background:radial-gradient(circle,rgba(120,86,255,.11),transparent 67%);
}
.creator-sim-ui .pose-section::after{
background:radial-gradient(circle,rgba(0,186,124,.11),transparent 67%);
}
.creator-sim-ui .private-section:hover,
.creator-sim-ui .life-section:hover,
.creator-sim-ui .cumulative-section:hover,
.creator-sim-ui .pose-section:hover{
background:var(--x-soft-hover);
border-color:#536471;
}
.creator-sim-ui .money-overview{
position:relative;
padding-top:35px;
}
.creator-sim-ui .money-overview::before{
content:"本回合资金概览";
position:absolute;
left:13px;
top:9px;
color:var(--x-text);
font-size:13px;
font-weight:700;
}
.creator-sim-ui .money-overview::after{
content:"实时结算";
position:absolute;
right:11px;
top:8px;
padding:3px 8px;
color:var(--x-green);
font-size:10px;
font-weight:600;
background:rgba(0,186,124,.1);
border-radius:999px;
}
.creator-sim-ui .money-overview .metric{
position:relative;
overflow:hidden;
}
.creator-sim-ui .money-overview .metric::after{
content:"";
position:absolute;
left:8px;
right:8px;
bottom:0;
height:2px;
background:var(--x-blue);
border-radius:999px 999px 0 0;
opacity:.25;
transform:scaleX(.3);
transform-origin:left;
transition:transform .35s ease,opacity .2s ease;
}
.creator-sim-ui .money-overview .metric:nth-child(2)::after{
background:var(--x-gold);
transform:scaleX(.82);
}
.creator-sim-ui .money-overview .metric:nth-child(3)::after{
background:var(--x-green);
transform:scaleX(.64);
}
.creator-sim-ui .money-overview .metric:nth-child(4)::after{
background:var(--x-red);
transform:scaleX(.48);
}
.creator-sim-ui .money-overview .metric:nth-child(5)::after{
background:var(--x-purple);
transform:scaleX(.7);
}
.creator-sim-ui .money-overview .metric:hover::after{
opacity:.9;
transform:scaleX(1);
}
.creator-sim-ui .revenue-card,
.creator-sim-ui .channel-card{
padding-bottom:34px;
}
.creator-sim-ui .revenue-card::after,
.creator-sim-ui .channel-card::after{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:9px;
height:19px;
opacity:.72;
background:
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 0 100%/7% 28% no-repeat,
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 12% 100%/7% 52% no-repeat,
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 24% 100%/7% 38% no-repeat,
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 36% 100%/7% 71% no-repeat,
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 48% 100%/7% 59% no-repeat,
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 60% 100%/7% 88% no-repeat,
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 72% 100%/7% 65% no-repeat,
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 84% 100%/7% 100% no-repeat,
linear-gradient(to top,transparent 0 2px,var(--card-accent) 2px 100%) 96% 100%/4% 78% no-repeat;
-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000);
mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000);
transform-origin:bottom;
transition:height .25s ease,opacity .25s ease;
}
.creator-sim-ui .revenue-card:hover::after,
.creator-sim-ui .channel-card:hover::after{
height:24px;
opacity:1;
}
.creator-sim-ui .card-head::before,
.creator-sim-ui .channel-head::before{
content:"";
flex:0 0 auto;
width:8px;
height:8px;
margin-right:-3px;
background:var(--card-accent);
border-radius:50%;
box-shadow:0 0 0 4px color-mix(in srgb,var(--card-accent) 11%,transparent);
}
.creator-sim-ui .card-head b,
.creator-sim-ui .channel-head b{
margin-right:auto;
}
.creator-sim-ui .record,
.creator-sim-ui .order{
transition:background-color .18s ease;
}
.creator-sim-ui .record:hover,
.creator-sim-ui .order:hover{
background:rgba(255,255,255,.025);
}
.creator-sim-ui .x-profile{
min-height:104px;
padding-top:27px;
}
.creator-sim-ui .x-profile::after{
content:"创作者账号";
position:absolute;
left:72px;
top:10px;
color:var(--x-muted);
font-size:11px;
}
.creator-sim-ui .x-profile::before{
top:30px;
}
.creator-sim-ui .x-name::after,
.creator-sim-ui .post-author::after{
content:none;
}
.creator-sim-ui .x-growth{
position:relative;
overflow:visible;
}
.creator-sim-ui .x-growth::before{
content:"";
position:absolute;
right:-3px;
top:-3px;
width:8px;
height:8px;
background:var(--x-green);
border:2px solid var(--x-bg);
border-radius:50%;
animation:x-live-pulse 2s ease-out infinite;
}
.creator-sim-ui .account-stats{
position:relative;
padding-top:30px;
}
.creator-sim-ui .account-stats::before{
content:"账号分析";
position:absolute;
left:16px;
top:8px;
color:var(--x-text);
font-size:13px;
font-weight:700;
}
.creator-sim-ui .account-stats::after{
content:"过去 24 小时";
position:absolute;
right:16px;
top:8px;
color:var(--x-muted);
font-size:11px;
}
.creator-sim-ui .account-stats .stat{
position:relative;
}
.creator-sim-ui .account-stats .stat>strong::after{
content:" ↗";
color:var(--x-green);
font-size:10px;
font-weight:600;
}
.creator-sim-ui .x-post,
.creator-sim-ui .post-card{
padding-bottom:10px;
}
.creator-sim-ui .x-post::after,
.creator-sim-ui .post-card::after{
content:"•••";
position:absolute;
right:16px;
top:8px;
display:grid;
place-items:center;
width:30px;
height:30px;
color:var(--x-muted);
font-size:13px;
letter-spacing:-1px;
border-radius:50%;
transition:color .18s ease,background-color .18s ease;
}
.creator-sim-ui .x-post:hover::after,
.creator-sim-ui .post-card:hover::after{
color:var(--x-blue);
background:rgba(29,155,240,.1);
}
.creator-sim-ui .post-head{
padding-right:34px;
}
.creator-sim-ui .post-media,
.creator-sim-ui .media-description{
overflow:hidden;
}
.creator-sim-ui .post-media::after,
.creator-sim-ui .media-description::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.045) 45%,transparent 65%);
transform:translateX(-110%);
transition:transform .65s ease;
}
.creator-sim-ui .x-post:hover .post-media::after,
.creator-sim-ui .post-card:hover .media-description::after{
transform:translateX(110%);
}
.creator-sim-ui .post-metrics,
.creator-sim-ui .interaction-data{
position:relative;
}
.creator-sim-ui .post-metrics>span,
.creator-sim-ui .interaction-data>span{
display:flex;
min-height:36px;
align-items:center;
justify-content:center;
gap:3px;
}
.creator-sim-ui .post-metrics>span::before,
.creator-sim-ui .interaction-data>span::before{
display:inline-grid;
place-items:center;
width:20px;
height:20px;
font-size:13px;
line-height:1;
border-radius:50%;
}
.creator-sim-ui .post-metrics>span:nth-child(1)::before,
.creator-sim-ui .interaction-data>span:nth-child(1)::before{content:"◯"}
.creator-sim-ui .post-metrics>span:nth-child(2)::before,
.creator-sim-ui .interaction-data>span:nth-child(2)::before{content:"↻"}
.creator-sim-ui .post-metrics>span:nth-child(3)::before,
.creator-sim-ui .interaction-data>span:nth-child(3)::before{content:"♡"}
.creator-sim-ui .post-metrics>span:nth-child(4)::before,
.creator-sim-ui .interaction-data>span:nth-child(4)::before{content:"▥"}
.creator-sim-ui .post-metrics>span:nth-child(5)::before,
.creator-sim-ui .interaction-data>span:nth-child(5)::before{content:"⌑"}
.creator-sim-ui .post-metrics>span:nth-child(6)::before,
.creator-sim-ui .interaction-data>span:nth-child(6)::before{content:"↗"}
.creator-sim-ui .post-metrics>span:nth-child(2):hover,
.creator-sim-ui .interaction-data>span:nth-child(2):hover{
color:var(--x-green);
background:rgba(0,186,124,.08);
}
.creator-sim-ui .post-metrics>span:nth-child(3):hover,
.creator-sim-ui .interaction-data>span:nth-child(3):hover{
color:var(--x-pink);
background:rgba(249,24,128,.08);
}
.creator-sim-ui .post-metrics>span:nth-child(5):hover,
.creator-sim-ui .interaction-data>span:nth-child(5):hover{
color:var(--x-blue);
background:rgba(29,155,240,.08);
}
.creator-sim-ui .reply-list::before{
content:"代表性回复";
display:block;
padding:8px 0 5px;
color:var(--x-muted);
font-size:12px;
font-weight:500;
}
.creator-sim-ui .reply,
.creator-sim-ui .comment{
transition:background-color .18s ease;
}
.creator-sim-ui .reply:hover,
.creator-sim-ui .comment:hover{
background:rgba(231,233,234,.025);
}
.creator-sim-ui .reply::after,
.creator-sim-ui .comment::after{
content:"♡";
position:absolute;
right:6px;
top:9px;
color:var(--x-muted);
font-size:13px;
transition:color .18s ease,transform .18s ease;
}
.creator-sim-ui .reply:hover::after,
.creator-sim-ui .comment:hover::after{
color:var(--x-pink);
transform:scale(1.12);
}
.creator-sim-ui .person-card{
padding-right:84px;
}
.creator-sim-ui .person-card::after{
content:"查看";
position:absolute;
right:12px;
top:19px;
padding:6px 13px;
color:#000;
font-size:11px;
font-weight:700;
background:var(--x-text);
border-radius:999px;
transition:background-color .18s ease;
}
.creator-sim-ui .person-card:hover::after{
background:#d7dbdc;
}
.creator-sim-ui .relation-stage{
position:absolute;
right:12px;
bottom:10px;
padding:0;
color:var(--x-muted);
background:transparent;
border:0;
}
.creator-sim-ui .person-card:hover .relation-stage{
color:var(--x-blue);
background:transparent;
}
.creator-sim-ui .action-panel,
.creator-sim-ui .actions,
.creator-sim-ui .action-options{
border-top:1px solid var(--x-line);
}
.creator-sim-ui .action-panel::after,
.creator-sim-ui .actions::after,
.creator-sim-ui .action-options::after{
content:"可多选、组合或直接输入你的行动";
grid-column:1/-1;
grid-row:2;
margin-top:-5px;
margin-bottom:3px;
color:var(--x-muted);
font-size:12px;
}
.creator-sim-ui .action-item,
.creator-sim-ui .action-option,
.creator-sim-ui .choice{
overflow:hidden;
}
.creator-sim-ui .action-item::after,
.creator-sim-ui .action-option::after,
.creator-sim-ui .choice::after{
content:"›";
position:absolute;
right:13px;
top:50%;
color:var(--x-muted);
font-size:20px;
font-weight:300;
transform:translateY(-52%);
transition:color .18s ease,transform .18s ease;
}
.creator-sim-ui .action-item:hover::after,
.creator-sim-ui .action-option:hover::after,
.creator-sim-ui .choice:hover::after{
color:var(--x-blue);
transform:translate(2px,-52%);
}
.creator-sim-ui .custom-action{
box-shadow:0 0 0 0 rgba(29,155,240,.25);
}
.creator-sim-ui .custom-action::after{
content:"＋";
right:16px;
color:#fff;
font-size:17px;
font-weight:600;
}
.creator-sim-ui .custom-action:hover::after{
color:#fff;
}
.creator-sim-ui .custom-action:hover{
box-shadow:0 0 0 4px rgba(29,155,240,.13);
}
.creator-sim-ui ::-webkit-scrollbar{
width:8px;
height:8px;
}
.creator-sim-ui ::-webkit-scrollbar-track{
background:var(--x-bg);
}
.creator-sim-ui ::-webkit-scrollbar-thumb{
background:#3e4144;
border:2px solid var(--x-bg);
border-radius:999px;
}
.creator-sim-ui ::-webkit-scrollbar-thumb:hover{
background:#536471;
}
@keyframes x-avatar-in{
0%{transform:scale(.86);opacity:.55}
70%{transform:scale(1.05);opacity:1}
100%{transform:scale(1);opacity:1}
}
@keyframes x-live-pulse{
0%{box-shadow:0 0 0 0 rgba(0,186,124,.45)}
65%{box-shadow:0 0 0 7px rgba(0,186,124,0)}
100%{box-shadow:0 0 0 0 rgba(0,186,124,0)}
}
@media(max-width:600px){
.creator-sim-ui .scene-header{
min-height:128px;
padding-top:68px;
}
.creator-sim-ui .scene-header::after{
left:13px;
font-size:19px;
}
.creator-sim-ui .scene-header::before{
content:"主页　　　创作　　　收益　　　数据";
font-size:12px;
}
.creator-sim-ui .scene-header .scene-cell:first-of-type::before{
right:12px;
}
.creator-sim-ui .story-content::after{
max-width:100%;
font-size:15px;
}
.creator-sim-ui .drawer-summary::before{
left:58px;
right:50px;
}
.creator-sim-ui .drawer[open]>.drawer-summary::after{
left:58px;
}
.creator-sim-ui .money-overview{
padding-top:38px;
}
.creator-sim-ui .money-overview .metric:first-child{
grid-column:1/-1;
}
.creator-sim-ui .x-profile::after{
left:64px;
}
.creator-sim-ui .account-stats::before{
left:12px;
}
.creator-sim-ui .account-stats::after{
right:12px;
}
.creator-sim-ui .post-metrics>span,
.creator-sim-ui .interaction-data>span{
font-size:9px;
}
.creator-sim-ui .person-card{
padding-right:72px;
}
.creator-sim-ui .person-card::after{
right:8px;
padding-right:11px;
padding-left:11px;
}
}
@media(max-width:420px){
.creator-sim-ui .scene-header{
min-height:178px;
}
.creator-sim-ui .scene-header .scene-cell:first-of-type::after{
left:12%;
right:12%;
}
.creator-sim-ui .story-content::after{
content:"○　↻　♡　▥　↗";
letter-spacing:0;
}
.creator-sim-ui .money-overview::after{
content:"实时";
}
.creator-sim-ui .post-metrics>span,
.creator-sim-ui .interaction-data>span{
flex-direction:column;
gap:0;
padding:4px 1px;
}
.creator-sim-ui .post-metrics>span::before,
.creator-sim-ui .interaction-data>span::before{
height:16px;
}
.creator-sim-ui .person-card{
padding-right:12px;
padding-bottom:36px;
}
.creator-sim-ui .person-card::after{
top:auto;
right:12px;
bottom:8px;
padding:3px 10px;
}
.creator-sim-ui .relation-stage{
left:65px;
right:auto;
bottom:10px;
}
}
@media(prefers-reduced-motion:reduce){
.creator-sim-ui .profile-drawer[open] .drawer-index,
.creator-sim-ui .money-drawer[open] .drawer-index,
.creator-sim-ui .x-drawer[open] .drawer-index,
.creator-sim-ui .people-drawer[open] .drawer-index,
.creator-sim-ui .x-growth::before{
animation:none;
}
.creator-sim-ui .post-media::after,
.creator-sim-ui .media-description::after{
display:none;
}
}
.creator-sim-ui{
--x-cyan:#00c2ff;
--x-orange:#ff7a00;
--x-card:#16181c;
--x-chart-line:#1d9bf0;
--x-chart-fill:rgba(29,155,240,.14);
padding-bottom:0;
}
.creator-sim-ui .scene-header{
background:
linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.96)),
radial-gradient(circle at 80% 0,rgba(29,155,240,.22),transparent 45%);
}
.creator-sim-ui .scene-header::after{
padding-left:32px;
}
.creator-sim-ui .scene-header .scene-cell:first-of-type::before{
content:"𝕏";
left:13px;
right:auto;
top:-59px;
}
.creator-sim-ui .scene-header .scene-cell:nth-child(2)::before{
content:"•••";
position:absolute;
right:14px;
top:-59px;
display:grid;
place-items:center;
width:30px;
height:30px;
color:var(--x-text);
font-size:13px;
font-weight:700;
letter-spacing:-1px;
border:1px solid var(--x-line);
border-radius:50%;
transition:background-color .18s ease,border-color .18s ease;
}
.creator-sim-ui .scene-header .scene-cell:nth-child(2):hover::before{
background:var(--x-soft);
border-color:#536471;
}
.creator-sim-ui .scene-header .scene-cell:nth-child(2)::after{
content:"";
position:absolute;
right:11px;
top:-62px;
width:8px;
height:8px;
background:var(--x-blue);
border:2px solid var(--x-bg);
border-radius:50%;
animation:x-notification-pulse 2.4s ease-out infinite;
}
.creator-sim-ui .scene-label{
font-size:11px;
}
.creator-sim-ui .scene-cell strong{
letter-spacing:-.01em;
}
.creator-sim-ui .story-sheet{
background:
linear-gradient(90deg,transparent 0 35px,var(--x-line-soft) 35px 36px,transparent 36px) 32px 52px/36px calc(100% - 64px) no-repeat,
var(--x-bg);
}
.creator-sim-ui .story-sheet::before{
z-index:2;
}
.creator-sim-ui .story-content::before{
content:"主线动态";
display:inline-flex;
align-items:center;
min-height:20px;
margin-bottom:8px;
padding:2px 8px;
color:var(--x-blue);
font-size:11px;
font-weight:600;
line-height:1;
background:rgba(29,155,240,.1);
border-radius:999px;
}
.creator-sim-ui .story-content>p:first-of-type{
margin-top:0;
}
.creator-sim-ui .story-content>p+blockquote,
.creator-sim-ui .story-content>p+.dialogue{
margin-top:12px;
}
.creator-sim-ui .story-content blockquote,
.creator-sim-ui .dialogue{
overflow:hidden;
}
.creator-sim-ui .story-content blockquote::after,
.creator-sim-ui .dialogue::after{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:var(--x-blue);
}
.creator-sim-ui .story-content blockquote:hover,
.creator-sim-ui .dialogue:hover{
border-color:#536471;
}
.creator-sim-ui .drawer-summary{
overflow:hidden;
}
.creator-sim-ui .drawer-summary::after{
pointer-events:none;
}
.creator-sim-ui .drawer-summary:hover .drawer-title b{
color:#fff;
}
.creator-sim-ui .drawer-summary:hover .drawer-index{
transform:scale(1.04);
}
.creator-sim-ui .drawer-index{
transition:transform .18s ease,filter .18s ease;
}
.creator-sim-ui .drawer-summary:active .drawer-index{
transform:scale(.96);
}
.creator-sim-ui .drawer:not([open]) .drawer-title small::after{
content:" · 点击展开";
color:var(--x-blue);
}
.creator-sim-ui .drawer[open] .drawer-title small::after{
content:" · 已展开";
color:var(--x-green);
}
.creator-sim-ui .profile-drawer .drawer-content{
position:relative;
padding-top:72px;
}
.creator-sim-ui .profile-drawer .drawer-content::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:58px;
background:
radial-gradient(circle at 16% 25%,rgba(255,255,255,.12) 0 1px,transparent 2px),
radial-gradient(circle at 72% 68%,rgba(255,255,255,.1) 0 1px,transparent 2px),
linear-gradient(120deg,#0b3b5f 0%,#0d6b8b 36%,#55348d 72%,#8e2b67 100%);
background-size:42px 42px,58px 58px,100% 100%;
border-bottom:1px solid var(--x-line);
}
.creator-sim-ui .profile-drawer .drawer-content::after{
content:"";
position:absolute;
left:18px;
top:34px;
width:52px;
height:52px;
background:
radial-gradient(circle at 50% 35%,#d9e4ef 0 17%,transparent 18%),
radial-gradient(ellipse at 50% 92%,#d9e4ef 0 31%,transparent 32%),
linear-gradient(145deg,#1d9bf0,#7856ff);
border:4px solid var(--x-bg);
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.creator-sim-ui .profile-grid,
.creator-sim-ui .status-grid{
border-radius:14px;
}
.creator-sim-ui .profile-grid::after,
.creator-sim-ui .status-grid::after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(29,155,240,.42),transparent);
}
.creator-sim-ui .field>strong::before,
.creator-sim-ui .info-item>strong::before{
content:"";
display:inline-block;
width:4px;
height:4px;
margin-right:6px;
vertical-align:3px;
background:var(--x-muted);
border-radius:50%;
}
.creator-sim-ui .field:hover>strong::before,
.creator-sim-ui .info-item:hover>strong::before{
background:var(--x-blue);
}
.creator-sim-ui .money-drawer .drawer-content{
position:relative;
}
.creator-sim-ui .money-drawer .drawer-content::before{
content:"近 7 日表现";
display:block;
margin-bottom:8px;
color:var(--x-text);
font-size:17px;
font-weight:800;
line-height:1.25;
}
.creator-sim-ui .money-drawer .drawer-content::after{
content:"";
display:block;
height:104px;
margin:11px 0 14px;
background:
radial-gradient(circle at 3% 82%,var(--x-chart-line) 0 3px,#000 4px 5px,transparent 6px),
radial-gradient(circle at 18% 67%,var(--x-chart-line) 0 3px,#000 4px 5px,transparent 6px),
radial-gradient(circle at 34% 73%,var(--x-chart-line) 0 3px,#000 4px 5px,transparent 6px),
radial-gradient(circle at 50% 45%,var(--x-chart-line) 0 3px,#000 4px 5px,transparent 6px),
radial-gradient(circle at 66% 56%,var(--x-chart-line) 0 3px,#000 4px 5px,transparent 6px),
radial-gradient(circle at 82% 28%,var(--x-chart-line) 0 3px,#000 4px 5px,transparent 6px),
radial-gradient(circle at 97% 12%,var(--x-chart-line) 0 3px,#000 4px 5px,transparent 6px),
linear-gradient(171deg,transparent 0 17%,var(--x-chart-line) 18% 19%,transparent 20% 100%),
linear-gradient(188deg,transparent 0 26%,var(--x-chart-line) 27% 28%,transparent 29% 100%),
linear-gradient(164deg,transparent 0 39%,var(--x-chart-line) 40% 41%,transparent 42% 100%),
linear-gradient(188deg,transparent 0 51%,var(--x-chart-line) 52% 53%,transparent 54% 100%),
linear-gradient(163deg,transparent 0 66%,var(--x-chart-line) 67% 68%,transparent 69% 100%),
linear-gradient(169deg,transparent 0 82%,var(--x-chart-line) 83% 84%,transparent 85% 100%),
repeating-linear-gradient(to bottom,var(--x-line-soft) 0 1px,transparent 1px 25px);
background-color:rgba(29,155,240,.025);
border:1px solid var(--x-line);
border-radius:14px;
box-shadow:inset 0 -25px 35px rgba(29,155,240,.045);
}
.creator-sim-ui .money-overview{
margin-top:-128px;
margin-bottom:128px;
background:rgba(0,0,0,.78);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
transform:translateY(128px);
}
.creator-sim-ui .money-overview::before{
content:"资金与订单";
}
.creator-sim-ui .money-overview .metric:hover{
background:rgba(29,155,240,.055);
}
.creator-sim-ui .money-overview .metric>strong{
font-variant-numeric:tabular-nums;
}
.creator-sim-ui .money-overview .metric>strong::before{
content:"";
display:inline-block;
width:5px;
height:5px;
margin-right:4px;
vertical-align:2px;
background:var(--x-green);
border-radius:50%;
}
.creator-sim-ui .money-overview .metric:nth-child(3)>strong::before,
.creator-sim-ui .money-overview .metric:nth-child(4)>strong::before{
background:var(--x-gold);
}
.creator-sim-ui .money-overview .metric:nth-child(5)>strong::before{
background:var(--x-purple);
}
.creator-sim-ui .revenue-list,
.creator-sim-ui .channel-list{
counter-reset:x-channel;
}
.creator-sim-ui .revenue-card,
.creator-sim-ui .channel-card{
counter-increment:x-channel;
}
.creator-sim-ui .revenue-card .card-head::after,
.creator-sim-ui .channel-card .channel-head::after{
content:"0" counter(x-channel);
position:absolute;
right:16px;
bottom:10px;
color:color-mix(in srgb,var(--card-accent) 55%,var(--x-muted));
font-size:9px;
font-weight:700;
letter-spacing:.1em;
}
.creator-sim-ui .record-list,
.creator-sim-ui .order-list{
position:relative;
}
.creator-sim-ui .record-list::before,
.creator-sim-ui .order-list::before{
content:"";
position:absolute;
left:27px;
top:13px;
bottom:13px;
width:1px;
background:var(--x-line);
}
.creator-sim-ui .record,
.creator-sim-ui .order{
position:relative;
padding-left:20px;
}
.creator-sim-ui .record::before,
.creator-sim-ui .order::before{
content:"";
position:absolute;
left:8px;
top:12px;
z-index:1;
width:7px;
height:7px;
background:var(--card-accent);
border:2px solid var(--x-soft);
border-radius:50%;
}
.creator-sim-ui .record-status.pending,
.creator-sim-ui .order-status.pending{
animation:x-pending 1.8s ease-in-out infinite;
}
.creator-sim-ui .x-drawer .drawer-content{
position:relative;
}
.creator-sim-ui .x-drawer .drawer-content::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:3px;
background:linear-gradient(90deg,transparent,var(--x-blue),var(--x-purple),transparent);
opacity:.65;
}
.creator-sim-ui .x-profile{
padding-top:92px;
min-height:178px;
overflow:visible;
}
.creator-sim-ui .x-profile::after{
content:"";
left:0;
right:0;
top:0;
height:68px;
background:
radial-gradient(circle at 78% 22%,rgba(255,255,255,.15) 0 1px,transparent 2px),
linear-gradient(115deg,#052f49,#176b8f 42%,#5a3c8c 76%,#982d69);
background-size:44px 44px,100% 100%;
border-bottom:1px solid var(--x-line);
}
.creator-sim-ui .x-profile::before{
content:"X";
z-index:2;
left:16px;
top:43px;
width:64px;
height:64px;
font-size:27px;
border:4px solid var(--x-bg);
box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.creator-sim-ui .x-identity{
position:relative;
z-index:2;
}
.creator-sim-ui .x-identity::before{
content:"公开账号";
display:block;
margin-bottom:3px;
color:var(--x-muted);
font-size:11px;
}
.creator-sim-ui .x-name{
font-size:18px;
font-weight:800;
letter-spacing:-.02em;
}
.creator-sim-ui .x-name::after{
content:"";
display:inline-block;
width:14px;
height:14px;
margin-left:5px;
vertical-align:-2px;
background:
radial-gradient(circle,#fff 0 2px,transparent 3px),
var(--x-blue);
border-radius:50%;
-webkit-clip-path:polygon(50% 0,62% 14%,80% 10%,86% 28%,100% 38%,91% 55%,96% 73%,78% 82%,67% 100%,50% 90%,33% 100%,22% 82%,4% 73%,9% 55%,0 38%,14% 28%,20% 10%,38% 14%);
clip-path:polygon(50% 0,62% 14%,80% 10%,86% 28%,100% 38%,91% 55%,96% 73%,78% 82%,67% 100%,50% 90%,33% 100%,22% 82%,4% 73%,9% 55%,0 38%,14% 28%,20% 10%,38% 14%);
}
.creator-sim-ui .x-profile[data-verified="false"] .x-name::after,
.creator-sim-ui .x-profile[data-verified="unknown"] .x-name::after{
display:none;
}
.creator-sim-ui .x-growth{
position:absolute;
right:16px;
top:82px;
z-index:3;
}
.creator-sim-ui .account-stats{
background:rgba(255,255,255,.01);
}
.creator-sim-ui .account-stats .stat::after{
content:"";
position:absolute;
left:20%;
right:20%;
bottom:0;
height:2px;
background:var(--x-blue);
border-radius:999px;
opacity:0;
transform:scaleX(.2);
transition:opacity .18s ease,transform .22s ease;
}
.creator-sim-ui .account-stats .stat:hover::after{
opacity:1;
transform:scaleX(1);
}
.creator-sim-ui .x-post,
.creator-sim-ui .post-card{
overflow:visible;
}
.creator-sim-ui .x-post[data-pinned="true"]::before,
.creator-sim-ui .post-card[data-pinned="true"]::before{
box-shadow:0 0 0 3px rgba(29,155,240,.18);
}
.creator-sim-ui .x-post[data-pinned="true"] .post-head::before,
.creator-sim-ui .post-card[data-pinned="true"] .post-head::before{
content:"置顶";
position:absolute;
left:68px;
top:-8px;
color:var(--x-muted);
font-size:11px;
font-weight:600;
}
.creator-sim-ui .x-post[data-pinned="true"],
.creator-sim-ui .post-card[data-pinned="true"]{
padding-top:27px;
}
.creator-sim-ui .x-post[data-pinned="true"]::before,
.creator-sim-ui .post-card[data-pinned="true"]::before{
top:27px;
}
.creator-sim-ui .x-post[data-pinned="true"]::after,
.creator-sim-ui .post-card[data-pinned="true"]::after{
top:23px;
}
.creator-sim-ui .x-post[data-hot="true"] .post-text::before,
.creator-sim-ui .post-card[data-hot="true"] .post-text::before{
content:"热门";
display:inline-flex;
margin-right:6px;
padding:2px 6px;
color:var(--x-orange);
font-size:10px;
font-weight:700;
line-height:1.2;
background:rgba(255,122,0,.1);
border-radius:999px;
vertical-align:2px;
}
.creator-sim-ui .post-media,
.creator-sim-ui .media-description{
min-height:122px;
background:
linear-gradient(180deg,transparent 58%,rgba(0,0,0,.48)),
radial-gradient(circle at 72% 22%,rgba(120,86,255,.27),transparent 34%),
radial-gradient(circle at 20% 80%,rgba(29,155,240,.24),transparent 39%),
var(--x-soft);
}
.creator-sim-ui .post-media::before,
.creator-sim-ui .media-description::before{
content:"MEDIA";
left:auto;
right:10px;
top:10px;
padding:3px 6px;
color:#fff;
font-size:8px;
font-weight:800;
letter-spacing:.1em;
background:rgba(0,0,0,.56);
border-radius:4px;
}
.creator-sim-ui .post-media:hover,
.creator-sim-ui .media-description:hover{
border-color:#536471;
}
.creator-sim-ui .post-metrics strong,
.creator-sim-ui .interaction-data strong{
font-variant-numeric:tabular-nums;
}
.creator-sim-ui .post-metrics>span:nth-child(3):active::before,
.creator-sim-ui .interaction-data>span:nth-child(3):active::before{
content:"♥";
animation:x-like .4s cubic-bezier(.2,.8,.2,1);
}
.creator-sim-ui .reply-list{
margin-left:-52px;
}
.creator-sim-ui .reply,
.creator-sim-ui .comment{
padding-left:48px;
}
.creator-sim-ui .reply::before,
.creator-sim-ui .comment::before{
left:8px;
width:30px;
height:30px;
}
.creator-sim-ui .reply:nth-of-type(3n+1)::before,
.creator-sim-ui .comment:nth-of-type(3n+1)::before{
background:
radial-gradient(circle at 50% 36%,rgba(255,255,255,.76) 0 16%,transparent 17%),
radial-gradient(ellipse at 50% 94%,rgba(255,255,255,.7) 0 29%,transparent 30%),
linear-gradient(145deg,#1d9bf0,#005d9d);
}
.creator-sim-ui .reply:nth-of-type(3n+2)::before,
.creator-sim-ui .comment:nth-of-type(3n+2)::before{
background:
radial-gradient(circle at 50% 36%,rgba(255,255,255,.76) 0 16%,transparent 17%),
radial-gradient(ellipse at 50% 94%,rgba(255,255,255,.7) 0 29%,transparent 30%),
linear-gradient(145deg,#f91880,#7856ff);
}
.creator-sim-ui .reply:nth-of-type(3n)::before,
.creator-sim-ui .comment:nth-of-type(3n)::before{
background:
radial-gradient(circle at 50% 36%,rgba(255,255,255,.76) 0 16%,transparent 17%),
radial-gradient(ellipse at 50% 94%,rgba(255,255,255,.7) 0 29%,transparent 30%),
linear-gradient(145deg,#00ba7c,#086a72);
}
.creator-sim-ui .reply::after,
.creator-sim-ui .comment::after{
right:10px;
}
.creator-sim-ui .player-reply{
margin-left:28px;
}
.creator-sim-ui .player-reply::before{
box-shadow:0 0 0 2px var(--x-bg),0 0 0 3px var(--x-blue);
}
.creator-sim-ui .conversion-note,
.creator-sim-ui .risk-note{
overflow:hidden;
}
.creator-sim-ui .conversion-note::after,
.creator-sim-ui .risk-note::after{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:var(--x-blue);
}
.creator-sim-ui .risk-note::after{
background:var(--x-red);
}
.creator-sim-ui .risk-note[data-level="warning"]{
color:#e7c981;
background:rgba(255,212,0,.07);
border-color:rgba(255,212,0,.3);
}
.creator-sim-ui .risk-note[data-level="warning"]::before{
content:"!";
background:var(--x-gold);
color:#000;
}
.creator-sim-ui .risk-note[data-level="warning"]::after{
background:var(--x-gold);
}
.creator-sim-ui .risk-note[data-level="critical"]{
color:#ffb5bb;
background:rgba(244,33,46,.11);
border-color:rgba(244,33,46,.42);
animation:x-risk-glow 2.2s ease-in-out infinite;
}
.creator-sim-ui .risk-note[data-type="limit"]::before{
content:"↓";
}
.creator-sim-ui .risk-note[data-type="copy"]::before{
content:"≋";
}
.creator-sim-ui .risk-note[data-type="identity"]::before{
content:"?";
}
.creator-sim-ui .people-drawer .drawer-content{
padding-right:0;
padding-left:0;
}
.creator-sim-ui .people-drawer .drawer-content>h3,
.creator-sim-ui .people-drawer .drawer-content>h4,
.creator-sim-ui .people-drawer .drawer-content>p{
margin-right:16px;
margin-left:16px;
}
.creator-sim-ui .person-card{
min-height:94px;
padding-top:14px;
}
.creator-sim-ui .person-card::before{
top:14px;
width:48px;
height:48px;
}
.creator-sim-ui .person-name::after{
content:" 关注中";
margin-left:5px;
color:var(--x-muted);
font-size:10px;
font-weight:400;
}
.creator-sim-ui .person-info{
line-height:1.45;
}
.creator-sim-ui .unresolved::before{
content:"未解 · ";
color:var(--x-muted);
}
.creator-sim-ui .action-panel,
.creator-sim-ui .actions,
.creator-sim-ui .action-options{
padding-bottom:76px;
}
.creator-sim-ui .action-item,
.creator-sim-ui .action-option,
.creator-sim-ui .choice{
min-height:48px;
padding-right:34px;
}
.creator-sim-ui .action-item:hover::before,
.creator-sim-ui .action-option:hover::before,
.creator-sim-ui .choice:hover::before{
box-shadow:0 0 0 4px rgba(29,155,240,.13);
}
.creator-sim-ui .custom-action{
min-height:44px;
}
.creator-sim-ui .custom-action::before{
content:"E";
}
.creator-sim-ui .action-panel::before,
.creator-sim-ui .actions::before,
.creator-sim-ui .action-options::before{
padding-right:48px;
}
.creator-sim-ui .action-panel::after,
.creator-sim-ui .actions::after,
.creator-sim-ui .action-options::after{
padding-right:48px;
}
.creator-sim-ui .custom-action:last-child::after{
content:"＋";
}
.creator-sim-ui .action-panel .custom-action:last-child,
.creator-sim-ui .actions .custom-action:last-child,
.creator-sim-ui .action-options .custom-action:last-child{
position:relative;
}
.creator-sim-ui .action-panel:has(.custom-action)::before,
.creator-sim-ui .actions:has(.custom-action)::before,
.creator-sim-ui .action-options:has(.custom-action)::before{
text-shadow:0 0 18px rgba(29,155,240,.14);
}
.creator-sim-ui .action-panel::selection,
.creator-sim-ui .actions::selection,
.creator-sim-ui .action-options::selection,
.creator-sim-ui .story-content::selection,
.creator-sim-ui .drawer-content::selection{
color:#fff;
background:rgba(29,155,240,.5);
}
.creator-sim-ui .empty-state{
overflow:hidden;
}
.creator-sim-ui .empty-state::after{
content:"";
position:absolute;
left:-45%;
top:0;
width:35%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
animation:x-empty-scan 2.8s ease-in-out infinite;
}
.creator-sim-ui .loading,
.creator-sim-ui .skeleton{
position:relative;
overflow:hidden;
min-height:46px;
color:transparent!important;
background:
linear-gradient(var(--x-soft-hover) 0 0) 12px 10px/42% 9px no-repeat,
linear-gradient(var(--x-soft-hover) 0 0) 12px 28px/72% 7px no-repeat,
var(--x-soft);
border-radius:12px;
}
.creator-sim-ui .loading::after,
.creator-sim-ui .skeleton::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.055) 45%,transparent 65%);
transform:translateX(-100%);
animation:x-skeleton 1.6s linear infinite;
}
.creator-sim-ui::after{
content:"⌂　⌕　◎　♡　✉";
position:absolute;
left:0;
right:0;
bottom:0;
z-index:20;
display:flex;
align-items:center;
justify-content:space-around;
height:54px;
color:var(--x-text);
font-size:20px;
font-weight:400;
letter-spacing:clamp(18px,8vw,55px);
text-align:center;
white-space:nowrap;
background:rgba(0,0,0,.9);
border-top:1px solid var(--x-line);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
pointer-events:none;
}
.creator-sim-ui .action-panel::after,
.creator-sim-ui .actions::after,
.creator-sim-ui .action-options::after{
align-self:start;
}
@keyframes x-notification-pulse{
0%{box-shadow:0 0 0 0 rgba(29,155,240,.5)}
70%{box-shadow:0 0 0 7px rgba(29,155,240,0)}
100%{box-shadow:0 0 0 0 rgba(29,155,240,0)}
}
@keyframes x-pending{
0%,100%{opacity:1}
50%{opacity:.55}
}
@keyframes x-like{
0%{transform:scale(.6)}
65%{transform:scale(1.35)}
100%{transform:scale(1)}
}
@keyframes x-risk-glow{
0%,100%{box-shadow:0 0 0 rgba(244,33,46,0)}
50%{box-shadow:0 0 18px rgba(244,33,46,.14)}
}
@keyframes x-empty-scan{
0%,15%{transform:translateX(0)}
70%,100%{transform:translateX(430%)}
}
@keyframes x-skeleton{
to{transform:translateX(100%)}
}
@media(min-width:601px){
.creator-sim-ui{
padding-left:58px;
}
.creator-sim-ui::after{
left:0;
right:auto;
top:0;
bottom:0;
width:58px;
height:auto;
flex-direction:column;
padding:82px 0 24px;
font-size:19px;
letter-spacing:0;
background:rgba(0,0,0,.97);
border-top:0;
border-right:1px solid var(--x-line);
writing-mode:vertical-lr;
text-orientation:upright;
}
.creator-sim-ui .scene-header{
border-top-left-radius:0;
}
}
@media(max-width:600px){
.creator-sim-ui{
padding-bottom:54px;
}
.creator-sim-ui .scene-header .scene-cell:first-of-type::before{
left:10px;
}
.creator-sim-ui .scene-header::after{
padding-left:28px;
}
.creator-sim-ui .scene-header .scene-cell:nth-child(2)::before{
right:11px;
}
.creator-sim-ui .scene-header .scene-cell:nth-child(2)::after{
right:8px;
}
.creator-sim-ui .profile-drawer .drawer-content{
padding-top:68px;
}
.creator-sim-ui .profile-drawer .drawer-content::after{
left:14px;
width:48px;
height:48px;
}
.creator-sim-ui .money-drawer .drawer-content::after{
height:92px;
}
.creator-sim-ui .money-overview{
margin-top:-116px;
margin-bottom:116px;
transform:translateY(116px);
}
.creator-sim-ui .x-profile{
margin-right:-12px;
margin-left:-12px;
padding-top:89px;
}
.creator-sim-ui .x-profile::before{
left:12px;
}
.creator-sim-ui .x-growth{
right:12px;
}
.creator-sim-ui .x-post[data-pinned="true"] .post-head::before,
.creator-sim-ui .post-card[data-pinned="true"] .post-head::before{
left:60px;
}
.creator-sim-ui .reply-list{
margin-left:-48px;
}
.creator-sim-ui .people-drawer .drawer-content>h3,
.creator-sim-ui .people-drawer .drawer-content>h4,
.creator-sim-ui .people-drawer .drawer-content>p{
margin-right:12px;
margin-left:12px;
}
.creator-sim-ui .action-panel,
.creator-sim-ui .actions,
.creator-sim-ui .action-options{
padding-bottom:18px;
}
.creator-sim-ui::after{
position:sticky;
margin-top:-54px;
transform:translateY(54px);
}
}
@media(max-width:420px){
.creator-sim-ui .money-drawer .drawer-content::before{
font-size:16px;
}
.creator-sim-ui .money-drawer .drawer-content::after{
height:82px;
}
.creator-sim-ui .money-overview{
margin-top:-106px;
margin-bottom:106px;
transform:translateY(106px);
}
.creator-sim-ui .x-profile{
min-height:190px;
padding-top:94px;
}
.creator-sim-ui .x-profile::before{
top:44px;
width:58px;
height:58px;
}
.creator-sim-ui .x-growth{
top:77px;
}
.creator-sim-ui .x-name{
font-size:17px;
}
.creator-sim-ui .post-media,
.creator-sim-ui .media-description{
min-height:105px;
}
.creator-sim-ui .reply-list{
margin-left:-44px;
}
.creator-sim-ui .player-reply{
margin-left:14px;
}
.creator-sim-ui::after{
font-size:18px;
letter-spacing:clamp(12px,7vw,24px);
}
}
@media(prefers-reduced-motion:reduce){
.creator-sim-ui .scene-header .scene-cell:nth-child(2)::after,
.creator-sim-ui .record-status.pending,
.creator-sim-ui .order-status.pending,
.creator-sim-ui .risk-note[data-level="critical"],
.creator-sim-ui .empty-state::after,
.creator-sim-ui .loading::after,
.creator-sim-ui .skeleton::after{
animation:none;
}
}
.creator-sim-ui{
--x-focus:rgba(29,155,240,.32);
--x-hover-blue:rgba(29,155,240,.1);
--x-hover-green:rgba(0,186,124,.1);
--x-hover-pink:rgba(249,24,128,.1);
--x-hover-red:rgba(244,33,46,.1);
--x-elevated:#202327;
--x-shadow:0 8px 28px rgba(0,0,0,.42);
scrollbar-color:#536471 var(--x-bg);
scrollbar-width:thin;
}
.creator-sim-ui .x-name::after{
display:none;
}
.creator-sim-ui .x-profile[data-verified="true"] .x-name::after{
content:"";
display:inline-block;
width:14px;
height:14px;
margin-left:5px;
vertical-align:-2px;
background:
radial-gradient(circle,#fff 0 2px,transparent 3px),
var(--x-blue);
border-radius:50%;
-webkit-clip-path:polygon(50% 0,62% 14%,80% 10%,86% 28%,100% 38%,91% 55%,96% 73%,78% 82%,67% 100%,50% 90%,33% 100%,22% 82%,4% 73%,9% 55%,0 38%,14% 28%,20% 10%,38% 14%);
clip-path:polygon(50% 0,62% 14%,80% 10%,86% 28%,100% 38%,91% 55%,96% 73%,78% 82%,67% 100%,50% 90%,33% 100%,22% 82%,4% 73%,9% 55%,0 38%,14% 28%,20% 10%,38% 14%);
}
.creator-sim-ui .post-author::after{
display:none;
}
.creator-sim-ui .post-card[data-verified="true"] .post-author::after,
.creator-sim-ui .x-post[data-verified="true"] .post-author::after{
content:"✓";
display:inline-grid;
place-items:center;
width:13px;
height:13px;
margin-left:4px;
color:#fff;
font-size:8px;
font-weight:900;
line-height:1;
background:var(--x-blue);
border-radius:50%;
vertical-align:1px;
}
.creator-sim-ui :focus-visible{
outline:2px solid var(--x-blue);
outline-offset:-2px;
}
.creator-sim-ui .drawer-summary:focus-visible,
.creator-sim-ui .action-item:focus-visible,
.creator-sim-ui .action-option:focus-visible,
.creator-sim-ui .choice:focus-visible{
box-shadow:inset 0 0 0 1px #fff,0 0 0 3px var(--x-focus);
}
.creator-sim-ui .scene-header{
box-shadow:0 1px 0 var(--x-line);
}
.creator-sim-ui .scene-header::before{
word-spacing:clamp(14px,4vw,36px);
}
.creator-sim-ui .scene-header .scene-cell{
transition:background-color .18s ease;
}
.creator-sim-ui .scene-header .scene-cell:hover{
background:rgba(231,233,234,.025);
}
.creator-sim-ui .scene-label::after{
content:"";
width:0;
height:0;
margin-left:-3px;
border-right:3px solid transparent;
border-left:3px solid transparent;
border-top:4px solid var(--x-muted);
}
.creator-sim-ui .scene-cell strong{
font-variant-numeric:tabular-nums;
}
.creator-sim-ui .story-sheet{
isolation:isolate;
}
.creator-sim-ui .story-sheet::before{
transition:transform .2s ease,box-shadow .2s ease;
}
.creator-sim-ui .story-sheet:hover::before{
transform:scale(1.035);
box-shadow:0 0 0 1px var(--x-line),0 0 0 5px rgba(29,155,240,.08);
}
.creator-sim-ui .story-sheet::after{
padding-right:42px;
}
.creator-sim-ui .story-content{
z-index:1;
}
.creator-sim-ui .story-content::before{
content:"主线动态";
letter-spacing:0;
}
.creator-sim-ui .story-sheet[data-thread="true"] .story-content::before{
content:"剧情串文";
}
.creator-sim-ui .story-sheet[data-update="true"] .story-content::before{
content:"最新进展";
color:var(--x-green);
background:rgba(0,186,124,.1);
}
.creator-sim-ui .story-content>p{
position:relative;
}
.creator-sim-ui .story-content>p+p{
padding-top:2px;
}
.creator-sim-ui .story-content>p+p::before{
content:"";
position:absolute;
left:0;
top:-5px;
width:22px;
height:1px;
background:var(--x-line);
}
.creator-sim-ui .story-content blockquote,
.creator-sim-ui .dialogue{
transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.creator-sim-ui .story-content blockquote:hover,
.creator-sim-ui .dialogue:hover{
background:var(--x-soft-hover);
transform:translateX(2px);
}
.creator-sim-ui .story-content::after{
content:"○　　↻　　♡　　▥　　↗";
cursor:default;
}
.creator-sim-ui .drawer{
contain:layout paint;
}
.creator-sim-ui .drawer-summary{
z-index:2;
}
.creator-sim-ui .drawer-summary::before{
transition:background-color .18s ease;
}
.creator-sim-ui .drawer[open]>.drawer-summary{
background:rgba(231,233,234,.018);
}
.creator-sim-ui .drawer[open]>.drawer-summary .drawer-title b{
color:#fff;
}
.creator-sim-ui .drawer[open]>.drawer-summary .drawer-index{
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.18),
0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent);
}
.creator-sim-ui .drawer-title small::after{
font-size:11px;
}
.creator-sim-ui .drawer-reveal{
will-change:grid-template-rows;
}
.creator-sim-ui .drawer-content{
position:relative;
}
.creator-sim-ui .drawer-content::selection,
.creator-sim-ui .story-content::selection{
color:#fff;
background:rgba(29,155,240,.55);
}
.creator-sim-ui .profile-drawer .drawer-content{
padding-top:76px;
}
.creator-sim-ui .profile-drawer .drawer-content::before{
height:62px;
background:
radial-gradient(circle at 15% 26%,rgba(255,255,255,.18) 0 1px,transparent 2px),
radial-gradient(circle at 78% 37%,rgba(255,255,255,.14) 0 1px,transparent 2px),
radial-gradient(circle at 62% 76%,rgba(255,255,255,.1) 0 1px,transparent 2px),
linear-gradient(125deg,#06243a 0%,#075780 38%,#45327e 70%,#752653 100%);
background-size:34px 34px,48px 48px,56px 56px,100% 100%;
}
.creator-sim-ui .profile-drawer .drawer-content::after{
top:37px;
}
.creator-sim-ui .profile-grid,
.creator-sim-ui .status-grid{
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.creator-sim-ui .field,
.creator-sim-ui .info-item{
min-height:59px;
}
.creator-sim-ui .field>span:first-child,
.creator-sim-ui .info-item>span:first-child,
.creator-sim-ui .field-label{
display:flex;
align-items:center;
gap:5px;
}
.creator-sim-ui .field>span:first-child::after,
.creator-sim-ui .info-item>span:first-child::after,
.creator-sim-ui .field-label::after{
content:"";
display:block;
width:12px;
height:1px;
background:var(--x-line);
}
.creator-sim-ui .private-section,
.creator-sim-ui .life-section,
.creator-sim-ui .cumulative-section,
.creator-sim-ui .pose-section{
min-height:48px;
}
.creator-sim-ui .private-section::before,
.creator-sim-ui .life-section::before,
.creator-sim-ui .cumulative-section::before,
.creator-sim-ui .pose-section::before{
content:"";
position:absolute;
left:0;
top:13px;
bottom:13px;
width:3px;
background:var(--x-pink);
border-radius:0 999px 999px 0;
}
.creator-sim-ui .life-section::before{background:var(--x-blue)}
.creator-sim-ui .cumulative-section::before{background:var(--x-purple)}
.creator-sim-ui .pose-section::before{background:var(--x-green)}
.creator-sim-ui .money-drawer .drawer-content{
padding-top:14px;
}
.creator-sim-ui .money-drawer .drawer-content::before{
content:"资金概览";
margin:0 0 10px;
}
.creator-sim-ui .money-drawer .drawer-content::after{
display:none;
}
.creator-sim-ui .money-overview{
margin:0 0 12px;
transform:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
.creator-sim-ui .money-overview::before{
content:"本回合结算";
}
.creator-sim-ui .money-overview::after{
content:"已同步";
}
.creator-sim-ui .money-overview .metric{
min-height:62px;
}
.creator-sim-ui .money-overview .metric>strong,
.creator-sim-ui .money-overview .metric-value{
font-variant-numeric:tabular-nums;
}
.creator-sim-ui .money-overview .metric:hover{
background:rgba(255,255,255,.025);
}
.creator-sim-ui .revenue-list,
.creator-sim-ui .channel-list{
position:relative;
padding-top:37px;
}
.creator-sim-ui .revenue-list::before,
.creator-sim-ui .channel-list::before{
content:"收益渠道";
position:absolute;
left:1px;
top:8px;
color:var(--x-text);
font-size:16px;
font-weight:800;
}
.creator-sim-ui .revenue-list::after,
.creator-sim-ui .channel-list::after{
content:"查看全部";
position:absolute;
right:2px;
top:9px;
color:var(--x-blue);
font-size:12px;
}
.creator-sim-ui .revenue-card,
.creator-sim-ui .channel-card{
padding-bottom:38px;
}
.creator-sim-ui .revenue-card::after,
.creator-sim-ui .channel-card::after{
height:21px;
bottom:10px;
}
.creator-sim-ui .revenue-card[data-channel="P"]::after,
.creator-sim-ui .channel-card[data-channel="P"]::after{
filter:hue-rotate(0deg);
}
.creator-sim-ui .revenue-card[data-channel="V"]::after,
.creator-sim-ui .channel-card[data-channel="V"]::after{
transform:scaleY(.76);
transform-origin:bottom;
}
.creator-sim-ui .revenue-card[data-channel="G"]::after,
.creator-sim-ui .channel-card[data-channel="G"]::after{
transform:scaleY(.58);
transform-origin:bottom;
}
.creator-sim-ui .revenue-card[data-channel="O"]::after,
.creator-sim-ui .channel-card[data-channel="O"]::after{
transform:scaleY(.42);
transform-origin:bottom;
}
.creator-sim-ui .revenue-card[data-channel="F"]::after,
.creator-sim-ui .channel-card[data-channel="F"]::after{
transform:scaleY(.31);
transform-origin:bottom;
}
.creator-sim-ui .revenue-card[data-state="active"],
.creator-sim-ui .channel-card[data-state="active"]{
border-color:color-mix(in srgb,var(--card-accent) 43%,var(--x-line));
}
.creator-sim-ui .revenue-card[data-state="active"] .card-head b::after,
.creator-sim-ui .channel-card[data-state="active"] .channel-head b::after{
content:"进行中";
display:inline-flex;
margin-left:7px;
padding:2px 6px;
color:var(--card-accent);
font-size:9px;
font-weight:700;
line-height:1.3;
background:color-mix(in srgb,var(--card-accent) 10%,transparent);
border-radius:999px;
vertical-align:2px;
}
.creator-sim-ui .revenue-card[data-state="disabled"],
.creator-sim-ui .channel-card[data-state="disabled"]{
opacity:.68;
filter:saturate(.45);
}
.creator-sim-ui .revenue-card[data-state="disabled"] .card-head b::after,
.creator-sim-ui .channel-card[data-state="disabled"] .channel-head b::after{
content:"未开启";
display:inline-flex;
margin-left:7px;
padding:2px 6px;
color:var(--x-muted);
font-size:9px;
font-weight:600;
line-height:1.3;
background:rgba(113,118,123,.1);
border-radius:999px;
vertical-align:2px;
}
.creator-sim-ui .record-list::before,
.creator-sim-ui .order-list::before{
left:25px;
}
.creator-sim-ui .record::before,
.creator-sim-ui .order::before{
left:6px;
}
.creator-sim-ui .record:hover,
.creator-sim-ui .order:hover{
margin-right:-5px;
margin-left:-5px;
padding-right:5px;
padding-left:25px;
border-radius:7px;
}
.creator-sim-ui .x-drawer .drawer-content{
padding-top:14px;
}
.creator-sim-ui .x-drawer .drawer-content::before{
height:2px;
}
.creator-sim-ui .x-profile{
margin-top:-14px;
}
.creator-sim-ui .x-profile::after{
background:
radial-gradient(circle at 80% 30%,rgba(255,255,255,.13) 0 1px,transparent 2px),
radial-gradient(circle at 25% 70%,rgba(255,255,255,.08) 0 1px,transparent 2px),
linear-gradient(120deg,#06263b,#07567b 38%,#47367d 70%,#772852);
background-size:46px 46px,55px 55px,100% 100%;
}
.creator-sim-ui .x-profile[data-verified="true"] .x-identity::after{
content:"身份已验证";
display:inline-flex;
align-items:center;
gap:4px;
margin-top:6px;
padding:3px 8px;
color:var(--x-blue);
font-size:10px;
font-weight:600;
background:rgba(29,155,240,.09);
border-radius:999px;
}
.creator-sim-ui .x-profile[data-verified="true"] .x-identity::after{
content:"✓ 身份已验证";
}
.creator-sim-ui .x-profile[data-verified="false"] .x-identity::after{
content:"未认证";
display:inline-flex;
margin-top:6px;
padding:3px 8px;
color:var(--x-muted);
font-size:10px;
background:rgba(113,118,123,.1);
border-radius:999px;
}
.creator-sim-ui .x-growth{
min-width:68px;
}
.creator-sim-ui .account-stats{
padding-top:34px;
}
.creator-sim-ui .account-stats::before{
content:"账号数据";
}
.creator-sim-ui .account-stats .stat{
min-height:58px;
}
.creator-sim-ui .account-stats .stat>strong{
font-variant-numeric:tabular-nums;
}
.creator-sim-ui .account-stats .stat>strong::after{
content:none;
}
.creator-sim-ui .account-stats .stat[data-trend="up"]>strong::after{
content:" ↑";
color:var(--x-green);
font-size:10px;
}
.creator-sim-ui .account-stats .stat[data-trend="down"]>strong::after{
content:" ↓";
color:var(--x-red);
font-size:10px;
}
.creator-sim-ui .account-stats .stat[data-trend="flat"]>strong::after{
content:" –";
color:var(--x-muted);
font-size:10px;
}
.creator-sim-ui .x-post,
.creator-sim-ui .post-card{
isolation:isolate;
}
.creator-sim-ui .x-post::before,
.creator-sim-ui .post-card::before{
z-index:2;
transition:transform .18s ease;
}
.creator-sim-ui .x-post:hover::before,
.creator-sim-ui .post-card:hover::before{
transform:scale(1.035);
}
.creator-sim-ui .x-post[data-pinned="true"] .post-head::before,
.creator-sim-ui .post-card[data-pinned="true"] .post-head::before{
content:"↥ 置顶";
}
.creator-sim-ui .x-post[data-promoted="true"] .post-head::before,
.creator-sim-ui .post-card[data-promoted="true"] .post-head::before{
content:"推广内容";
position:absolute;
left:68px;
top:-8px;
color:var(--x-muted);
font-size:11px;
}
.creator-sim-ui .x-post[data-hot="true"]{
background:
linear-gradient(90deg,rgba(255,122,0,.025),transparent 34%),
var(--x-bg);
}
.creator-sim-ui .x-post[data-risk="true"],
.creator-sim-ui .post-card[data-risk="true"]{
background:
linear-gradient(90deg,rgba(244,33,46,.04),transparent 38%),
var(--x-bg);
}
.creator-sim-ui .x-post[data-risk="true"]::before,
.creator-sim-ui .post-card[data-risk="true"]::before{
box-shadow:0 0 0 3px rgba(244,33,46,.14);
}
.creator-sim-ui .post-media,
.creator-sim-ui .media-description{
transition:border-color .18s ease,filter .18s ease;
}
.creator-sim-ui .post-media:hover,
.creator-sim-ui .media-description:hover{
filter:brightness(1.08);
}
.creator-sim-ui .post-media[data-sensitive="true"]::after,
.creator-sim-ui .media-description[data-sensitive="true"]::after{
content:"敏感内容";
position:absolute;
inset:auto 10px 10px auto;
width:auto;
height:auto;
padding:4px 8px;
color:#fff;
font-size:10px;
font-weight:600;
background:rgba(0,0,0,.72);
border-radius:999px;
transform:none;
}
.creator-sim-ui .post-media[data-sensitive="true"],
.creator-sim-ui .media-description[data-sensitive="true"]{
filter:saturate(.66) brightness(.72);
}
.creator-sim-ui .post-media[data-sensitive="true"]:hover,
.creator-sim-ui .media-description[data-sensitive="true"]:hover{
filter:saturate(.82) brightness(.82);
}
.creator-sim-ui .post-metrics,
.creator-sim-ui .interaction-data{
gap:2px;
}
.creator-sim-ui .post-metrics>span,
.creator-sim-ui .interaction-data>span{
cursor:default;
}
.creator-sim-ui .post-metrics>span:nth-child(1):hover,
.creator-sim-ui .interaction-data>span:nth-child(1):hover{
color:var(--x-blue);
background:var(--x-hover-blue);
}
.creator-sim-ui .post-metrics>span:nth-child(2):hover,
.creator-sim-ui .interaction-data>span:nth-child(2):hover{
color:var(--x-green);
background:var(--x-hover-green);
}
.creator-sim-ui .post-metrics>span:nth-child(3):hover,
.creator-sim-ui .interaction-data>span:nth-child(3):hover{
color:var(--x-pink);
background:var(--x-hover-pink);
}
.creator-sim-ui .reply-list{
position:relative;
}
.creator-sim-ui .reply-list::after{
content:"";
position:absolute;
left:23px;
top:38px;
bottom:8px;
z-index:0;
width:1px;
background:var(--x-line);
}
.creator-sim-ui .reply,
.creator-sim-ui .comment{
z-index:1;
padding-right:33px;
background:var(--x-bg);
}
.creator-sim-ui .reply::before,
.creator-sim-ui .comment::before{
z-index:2;
}
.creator-sim-ui .reply-name,
.creator-sim-ui .comment-name{
display:inline-flex;
align-items:center;
}
.creator-sim-ui .reply-name[data-verified="true"]::after,
.creator-sim-ui .comment-name[data-verified="true"]::after{
content:"✓";
display:inline-grid;
place-items:center;
width:11px;
height:11px;
margin-left:3px;
color:#fff;
font-size:7px;
background:var(--x-blue);
border-radius:50%;
}
.creator-sim-ui .player-reply{
border-left:2px solid rgba(29,155,240,.28);
}
.creator-sim-ui .conversion-note{
padding-right:37px;
}
.creator-sim-ui .conversion-note::before{
content:"↗";
}
.creator-sim-ui .conversion-note::after{
width:3px;
}
.creator-sim-ui .conversion-note[data-trend="high"]::before{
content:"↑";
}
.creator-sim-ui .conversion-note[data-trend="low"]::before{
content:"↓";
color:var(--x-gold);
}
.creator-sim-ui .conversion-note[data-trend="low"]{
background:rgba(255,212,0,.06);
border-color:rgba(255,212,0,.22);
}
.creator-sim-ui .risk-note{
padding-right:36px;
}
.creator-sim-ui .risk-note::before{
z-index:2;
}
.creator-sim-ui .risk-note::after{
z-index:1;
}
.creator-sim-ui .risk-note[data-level="critical"]::after{
width:4px;
}
.creator-sim-ui .risk-note[data-level="resolved"]{
color:#b6e8d3;
background:rgba(0,186,124,.07);
border-color:rgba(0,186,124,.25);
}
.creator-sim-ui .risk-note[data-level="resolved"]::before{
content:"✓";
color:#fff;
background:var(--x-green);
}
.creator-sim-ui .risk-note[data-level="resolved"]::after{
background:var(--x-green);
}
.creator-sim-ui .people-grid{
counter-reset:x-person;
}
.creator-sim-ui .person-card{
counter-increment:x-person;
}
.creator-sim-ui .person-card::before{
box-shadow:0 0 0 2px var(--x-bg),0 0 0 3px var(--x-line);
}
.creator-sim-ui .person-card:nth-child(2)::before{
background:
radial-gradient(circle at 50% 35%,rgba(255,255,255,.75) 0 16%,transparent 17%),
radial-gradient(ellipse at 50% 94%,rgba(255,255,255,.68) 0 30%,transparent 31%),
linear-gradient(145deg,#f91880,#7856ff);
}
.creator-sim-ui .person-card:nth-child(3)::before{
background:
radial-gradient(circle at 50% 35%,rgba(255,255,255,.75) 0 16%,transparent 17%),
radial-gradient(ellipse at 50% 94%,rgba(255,255,255,.68) 0 30%,transparent 31%),
linear-gradient(145deg,#00ba7c,#1d9bf0);
}
.creator-sim-ui .person-card:hover::before{
border-color:var(--x-blue);
}
.creator-sim-ui .person-card::after{
content:"查看";
}
.creator-sim-ui .person-card[data-status="active"]::after{
content:"互动中";
color:#fff;
background:var(--x-blue);
}
.creator-sim-ui .person-card[data-status="pending"]::after{
content:"待回应";
color:#000;
background:var(--x-gold);
}
.creator-sim-ui .person-card[data-status="blocked"]::after{
content:"已限制";
color:#fff;
background:var(--x-red);
}
.creator-sim-ui .person-card[data-status="blocked"]{
opacity:.74;
}
.creator-sim-ui .relation-stage::before{
content:"关系 · ";
}
.creator-sim-ui .action-panel,
.creator-sim-ui .actions,
.creator-sim-ui .action-options{
isolation:isolate;
}
.creator-sim-ui .action-panel::before,
.creator-sim-ui .actions::before,
.creator-sim-ui .action-options::before{
content:"下一步";
}
.creator-sim-ui .action-panel::after,
.creator-sim-ui .actions::after,
.creator-sim-ui .action-options::after{
content:"可多选、组合，或使用自定义行动";
}
.creator-sim-ui .action-item,
.creator-sim-ui .action-option,
.creator-sim-ui .choice{
isolation:isolate;
}
.creator-sim-ui .action-item::before,
.creator-sim-ui .action-option::before,
.creator-sim-ui .choice::before{
z-index:2;
}
.creator-sim-ui .action-item::after,
.creator-sim-ui .action-option::after,
.creator-sim-ui .choice::after{
z-index:2;
}
.creator-sim-ui .action-item:hover,
.creator-sim-ui .action-option:hover,
.creator-sim-ui .choice:hover{
box-shadow:0 5px 16px rgba(0,0,0,.22);
}
.creator-sim-ui .action-item:active,
.creator-sim-ui .action-option:active,
.creator-sim-ui .choice:active{
background:#25282c;
}
.creator-sim-ui .custom-action{
box-shadow:none;
}
.creator-sim-ui .custom-action:hover{
box-shadow:0 0 0 4px var(--x-focus),0 7px 18px rgba(29,155,240,.18);
}
.creator-sim-ui .custom-action:active{
background:#1677b8;
}
.creator-sim-ui .empty-state{
min-height:112px;
display:grid;
place-items:center;
align-content:center;
}
.creator-sim-ui .empty-state::before{
content:"𝕏";
}
.creator-sim-ui .empty-state[data-type="post"]::before{
content:"✎";
}
.creator-sim-ui .empty-state[data-type="order"]::before{
content:"▣";
color:var(--x-gold);
}
.creator-sim-ui .empty-state[data-type="people"]::before{
content:"◎";
color:var(--x-pink);
}
.creator-sim-ui .notice-card,
.creator-sim-ui .platform-notice{
position:relative;
margin:10px 0;
padding:12px 40px 12px 42px;
color:var(--x-text);
font-size:13px;
line-height:1.45;
background:var(--x-soft);
border:1px solid var(--x-line);
border-radius:14px;
}
.creator-sim-ui .notice-card::before,
.creator-sim-ui .platform-notice::before{
content:"i";
position:absolute;
left:13px;
top:12px;
display:grid;
place-items:center;
width:19px;
height:19px;
color:#fff;
font-size:12px;
font-weight:800;
background:var(--x-blue);
border-radius:50%;
}
.creator-sim-ui .notice-card::after,
.creator-sim-ui .platform-notice::after{
content:"›";
position:absolute;
right:14px;
top:50%;
color:var(--x-muted);
font-size:20px;
transform:translateY(-52%);
}
.creator-sim-ui .notice-card[data-tone="warning"],
.creator-sim-ui .platform-notice[data-tone="warning"]{
background:rgba(255,212,0,.06);
border-color:rgba(255,212,0,.25);
}
.creator-sim-ui .notice-card[data-tone="warning"]::before,
.creator-sim-ui .platform-notice[data-tone="warning"]::before{
content:"!";
color:#000;
background:var(--x-gold);
}
.creator-sim-ui .notice-card[data-tone="danger"],
.creator-sim-ui .platform-notice[data-tone="danger"]{
background:rgba(244,33,46,.07);
border-color:rgba(244,33,46,.27);
}
.creator-sim-ui .notice-card[data-tone="danger"]::before,
.creator-sim-ui .platform-notice[data-tone="danger"]::before{
content:"!";
background:var(--x-red);
}
.creator-sim-ui .notice-card[data-tone="success"],
.creator-sim-ui .platform-notice[data-tone="success"]{
background:rgba(0,186,124,.06);
border-color:rgba(0,186,124,.25);
}
.creator-sim-ui .notice-card[data-tone="success"]::before,
.creator-sim-ui .platform-notice[data-tone="success"]::before{
content:"✓";
background:var(--x-green);
}
.creator-sim-ui .trend-panel{
position:relative;
height:116px;
margin:10px 0 14px;
overflow:hidden;
background:
repeating-linear-gradient(to bottom,var(--x-line-soft) 0 1px,transparent 1px 28px),
linear-gradient(180deg,rgba(29,155,240,.035),transparent);
border:1px solid var(--x-line);
border-radius:14px;
}
.creator-sim-ui .trend-panel::before{
content:"近 7 日趋势";
position:absolute;
left:12px;
top:9px;
z-index:2;
color:var(--x-text);
font-size:12px;
font-weight:700;
}
.creator-sim-ui .trend-panel::after{
content:"";
position:absolute;
left:12px;
right:12px;
bottom:12px;
height:70px;
background:
linear-gradient(to top,var(--x-blue) 0 100%) 0 100%/8% 28% no-repeat,
linear-gradient(to top,var(--x-blue) 0 100%) 15% 100%/8% 42% no-repeat,
linear-gradient(to top,var(--x-blue) 0 100%) 31% 100%/8% 35% no-repeat,
linear-gradient(to top,var(--x-blue) 0 100%) 47% 100%/8% 61% no-repeat,
linear-gradient(to top,var(--x-blue) 0 100%) 63% 100%/8% 55% no-repeat,
linear-gradient(to top,var(--x-blue) 0 100%) 79% 100%/8% 78% no-repeat,
linear-gradient(to top,var(--x-blue) 0 100%) 96% 100%/4% 92% no-repeat;
opacity:.8;
-webkit-mask-image:linear-gradient(to top,#000,rgba(0,0,0,.55));
mask-image:linear-gradient(to top,#000,rgba(0,0,0,.55));
}
@media(min-width:601px){
.creator-sim-ui{
padding-left:62px;
}
.creator-sim-ui::after{
content:"𝕏\A⌂\A⌕\A◎\A♡\A✉";
width:62px;
padding:18px 0;
font-size:20px;
line-height:2.75;
letter-spacing:0;
white-space:pre;
writing-mode:horizontal-tb;
text-orientation:mixed;
}
.creator-sim-ui .scene-header{
border-top-left-radius:0;
}
.creator-sim-ui .scene-header::after{
left:17px;
}
}
@media(max-width:600px){
.creator-sim-ui{
padding-bottom:55px;
}
.creator-sim-ui::after{
content:"⌂　⌕　◎　♡　✉";
position:absolute;
left:0;
right:0;
top:auto;
bottom:0;
width:auto;
height:55px;
margin:0;
padding:0 8px;
display:flex;
align-items:center;
justify-content:center;
font-size:19px;
line-height:55px;
letter-spacing:clamp(14px,7vw,31px);
writing-mode:horizontal-tb;
transform:none;
}
.creator-sim-ui .profile-drawer .drawer-content{
padding-top:72px;
}
.creator-sim-ui .profile-drawer .drawer-content::after{
top:38px;
}
.creator-sim-ui .money-overview{
margin:0 0 12px;
transform:none;
}
.creator-sim-ui .revenue-list,
.creator-sim-ui .channel-list{
padding-top:35px;
}
.creator-sim-ui .x-profile{
margin-top:-14px;
}
.creator-sim-ui .x-post[data-promoted="true"] .post-head::before,
.creator-sim-ui .post-card[data-promoted="true"] .post-head::before{
left:60px;
}
.creator-sim-ui .notice-card,
.creator-sim-ui .platform-notice{
padding-right:34px;
padding-left:39px;
}
}
@media(max-width:420px){
.creator-sim-ui .scene-header::before{
word-spacing:8px;
}
.creator-sim-ui .story-content::after{
content:"○　↻　♡　▥　↗";
}
.creator-sim-ui .drawer-title small::after{
font-size:10px;
}
.creator-sim-ui .money-overview{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.creator-sim-ui .money-overview .metric:first-child{
grid-column:1/-1;
}
.creator-sim-ui .revenue-card,
.creator-sim-ui .channel-card{
padding-bottom:35px;
}
.creator-sim-ui .x-profile[data-verified="true"] .x-identity::after,
.creator-sim-ui .x-profile[data-verified="false"] .x-identity::after{
font-size:9px;
}
.creator-sim-ui .reply-list::after{
left:22px;
}
.creator-sim-ui .notice-card,
.creator-sim-ui .platform-notice{
font-size:12px;
}
.creator-sim-ui::after{
font-size:18px;
letter-spacing:clamp(10px,6vw,22px);
}
}
@media(prefers-reduced-motion:reduce){
.creator-sim-ui .story-sheet::before,
.creator-sim-ui .story-content blockquote,
.creator-sim-ui .dialogue,
.creator-sim-ui .drawer-index,
.creator-sim-ui .field,
.creator-sim-ui .info-item,
.creator-sim-ui .post-media,
.creator-sim-ui .media-description,
.creator-sim-ui .x-post::before,
.creator-sim-ui .post-card::before,
.creator-sim-ui .action-item,
.creator-sim-ui .action-option,
.creator-sim-ui .choice{
transition:none;
}
}
/* ========================================
   X DARK — 主题变量
   ======================================== */

.sticky.w-full.top-0.flex.items-center,
#ai-mod-button2,
.bg-gradient-to-t,
#ai-chat-bottom-input,
div.flex.flex-col.border-gray-200 {
  --x-bg: #000000;
  --x-surface: #16181c;
  --x-surface-hover: #1d1f23;
  --x-border: #2f3336;
  --x-border-active: #1d9bf0;
  --x-text: #e7e9ea;
  --x-muted: #71767b;
  --x-blue: #1d9bf0;
  --x-blue-hover: #1a8cd8;
  --x-green: #00ba7c;
  --x-pink: #f91880;
  --x-danger: #f4212e;
  --x-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* ========================================
   01. 顶部栏
   ======================================== */

.sticky.w-full.top-0.flex.items-center {
  color: var(--x-text) !important;
  background:
    radial-gradient(
      circle at 50% -80px,
      rgba(29, 155, 240, 0.14),
      transparent 180px
    ),
    rgba(0, 0, 0, 0.94) !important;
  border-bottom: 1px solid var(--x-border) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025),
    0 8px 24px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

/* 顶部栏蓝色高光线 */

.sticky.w-full.top-0.flex.items-center::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: -1px !important;
  left: 18px !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(29, 155, 240, 0.72),
    transparent
  ) !important;
  opacity: 0.5 !important;
}

/* 顶部栏内常规文字保持可读 */

.sticky.w-full.top-0.flex.items-center span,
.sticky.w-full.top-0.flex.items-center p {
  color: var(--x-text) !important;
}

/* ========================================
   02. 模型选择器
   ======================================== */

#ai-model-selector .group.flex.items-center {
  position: relative !important;
  min-height: 38px !important;
  padding: 5px 10px 5px 12px !important;
  color: #ffffff !important;
  background: var(--x-surface) !important;
  border: 1px solid var(--x-border) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 3px 12px rgba(0, 0, 0, 0.2) !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

#ai-model-selector .group.flex.items-center::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  margin-right: 8px !important;
  background: var(--x-blue) !important;
  border: 2px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 4px rgba(29, 155, 240, 0.1),
    0 0 12px rgba(29, 155, 240, 0.42) !important;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
  color: #ffffff !important;
  background: var(--x-surface-hover) !important;
  border-color: #536471 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 5px 18px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}

#ai-model-selector .group.flex.items-center:hover::before {
  background: #4db5f9 !important;
  box-shadow:
    0 0 0 5px rgba(29, 155, 240, 0.12),
    0 0 15px rgba(29, 155, 240, 0.58) !important;
  transform: scale(1.06) !important;
}

#ai-model-selector .group.flex.items-center:active {
  background: #202327 !important;
  transform: translateY(0) !important;
}

#ai-model-selector .group.flex.items-center:focus-visible {
  outline: 2px solid var(--x-blue) !important;
  outline-offset: 2px !important;
  border-color: var(--x-blue) !important;
}

/* 模型名称 */

#ai-model-selector .truncate.text-\[13px\] {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* 模型下拉箭头 */

#ai-model-selector .shrink-0.flex.items-center svg {
  width: 17px !important;
  height: 17px !important;
  color: var(--x-muted) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  transition:
    color 180ms ease,
    transform 220ms ease !important;
}

#ai-model-selector .group.flex.items-center:hover
  .shrink-0.flex.items-center
  svg {
  color: var(--x-blue) !important;
  transform: translateY(1px) rotate(180deg) !important;
}

/* ========================================
   03. 顶部历史、音乐与设置图标
   ======================================== */

/* 移动端历史记录裸图标 */

.sticky.w-full.top-0 svg.lucide-clock-8 {
  width: 21px !important;
  height: 21px !important;
  padding: 2px !important;
  color: var(--x-text) !important;
  stroke: currentColor !important;
  filter: none !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease !important;
}

.sticky.w-full.top-0 svg.lucide-clock-8:hover {
  color: var(--x-blue) !important;
  background: rgba(29, 155, 240, 0.12) !important;
  transform: scale(1.06) !important;
}

/* 历史记录未读圆点 */

.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  min-width: 8px !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--x-blue) !important;
  border: 2px solid #000000 !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 2px rgba(29, 155, 240, 0.12),
    0 0 10px rgba(29, 155, 240, 0.65) !important;
}

/* 音乐按钮 */

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
  width: 38px !important;
  height: 38px !important;
  padding: 8px !important;
  color: var(--x-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease !important;
}

.sticky.w-full.top-0
  button.MuiIconButton-root:has(svg.lucide-music-2):hover {
  color: var(--x-blue) !important;
  background: rgba(29, 155, 240, 0.12) !important;
  border-color: rgba(29, 155, 240, 0.22) !important;
  transform: translateY(-1px) !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  transition: transform 220ms ease !important;
}

.sticky.w-full.top-0
  button.MuiIconButton-root:has(svg.lucide-music-2):hover
  svg.lucide-music-2 {
  transform: rotate(-8deg) scale(1.05) !important;
}

/* 移动端设置裸图标 */

.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
  width: 21px !important;
  height: 21px !important;
  padding: 2px !important;
  color: var(--x-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 220ms ease !important;
}

.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover {
  color: var(--x-blue) !important;
  background: rgba(29, 155, 240, 0.12) !important;
  transform: rotate(22deg) !important;
}

/* 设置按钮 */

#header-setting-button {
  min-width: 38px !important;
  height: 38px !important;
  padding: 7px !important;
  color: var(--x-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease !important;
}

#header-setting-button:hover {
  color: var(--x-blue) !important;
  background: rgba(29, 155, 240, 0.12) !important;
  border-color: rgba(29, 155, 240, 0.22) !important;
  transform: translateY(-1px) !important;
}

#header-setting-button:active {
  background: rgba(29, 155, 240, 0.18) !important;
  transform: translateY(0) scale(0.96) !important;
}

#header-setting-button:focus-visible {
  outline: 2px solid var(--x-blue) !important;
  outline-offset: 2px !important;
}

#header-setting-button svg {
  width: 21px !important;
  height: 21px !important;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  transition: transform 280ms ease !important;
}

#header-setting-button:hover svg {
  transform: rotate(28deg) !important;
}

/* ========================================
   04. 按钮栏
   ======================================== */

#ai-mod-button2 {
  padding: 8px 6px !important;
  background: #000000 !important;
  border-top: 1px solid rgba(47, 51, 54, 0.65) !important;
  border-bottom: 1px solid rgba(47, 51, 54, 0.65) !important;
  box-shadow: none !important;
}

/* X 风格深色胶囊按钮 */

#ai-mod-button2 button.MuiButton-root {
  min-height: 36px !important;
  padding: 7px 13px !important;
  color: var(--x-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: var(--x-surface) !important;
  border: 1px solid var(--x-border) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 2px 7px rgba(0, 0, 0, 0.16) !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
  color: #ffffff !important;
  background: var(--x-surface-hover) !important;
  border-color: #536471 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 5px 15px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1px) !important;
}

#ai-mod-button2 button.MuiButton-root:active {
  color: #ffffff !important;
  background: #25282c !important;
  border-color: var(--x-blue) !important;
  box-shadow: inset 0 0 0 1px rgba(29, 155, 240, 0.12) !important;
  transform: translateY(0) scale(0.98) !important;
}

#ai-mod-button2 button.MuiButton-root:focus-visible {
  outline: 2px solid var(--x-blue) !important;
  outline-offset: 2px !important;
  border-color: var(--x-blue) !important;
}

/* 禁用按钮仍然保证文字可辨认 */

#ai-mod-button2 button.MuiButton-root:disabled,
#ai-mod-button2 button.MuiButton-root.Mui-disabled {
  color: #8b98a5 !important;
  background: #111315 !important;
  border-color: #272a2d !important;
  box-shadow: none !important;
  opacity: 0.72 !important;
  transform: none !important;
}

/* 按钮图标 */

#ai-mod-button2 button.MuiButton-root svg {
  width: 18px !important;
  height: 18px !important;
  margin-right: 5px !important;
  color: var(--x-muted) !important;
  fill: none !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  transition:
    color 180ms ease,
    transform 220ms ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
  color: var(--x-blue) !important;
  transform: scale(1.08) !important;
}

/* 被选中或按下的按钮 */

#ai-mod-button2 button.MuiButton-root[aria-pressed="true"],
#ai-mod-button2 button.MuiButton-root.MuiButton-containedPrimary {
  color: #ffffff !important;
  background: var(--x-blue) !important;
  border-color: var(--x-blue) !important;
  box-shadow:
    0 0 0 3px rgba(29, 155, 240, 0.1),
    0 5px 16px rgba(29, 155, 240, 0.2) !important;
}

#ai-mod-button2 button.MuiButton-root[aria-pressed="true"]:hover,
#ai-mod-button2 button.MuiButton-root.MuiButton-containedPrimary:hover {
  background: var(--x-blue-hover) !important;
  border-color: var(--x-blue-hover) !important;
}

#ai-mod-button2 button.MuiButton-root[aria-pressed="true"] svg,
#ai-mod-button2 button.MuiButton-root.MuiButton-containedPrimary svg {
  color: #ffffff !important;
}

/* ========================================
   05. 底部栏与主输入框
   ======================================== */

.bg-gradient-to-t {
  background:
    linear-gradient(
      to top,
      #000000 0%,
      rgba(0, 0, 0, 0.98) 72%,
      rgba(0, 0, 0, 0.84) 90%,
      transparent 100%
    ) !important;
}

/* 输入框外层 */

#ai-chat-bottom-input {
  position: relative !important;
  color: var(--x-text) !important;
  background: var(--x-surface) !important;
  border: 1px solid var(--x-border) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 7px 24px rgba(0, 0, 0, 0.38) !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

#ai-chat-bottom-input:hover {
  background: #181b1f !important;
  border-color: #536471 !important;
}

#ai-chat-bottom-input:focus-within {
  background: #000000 !important;
  border-color: var(--x-blue) !important;
  box-shadow:
    0 0 0 1px var(--x-blue),
    0 0 0 4px rgba(29, 155, 240, 0.1),
    0 8px 28px rgba(0, 0, 0, 0.42) !important;
}

/* 输入框顶部细微蓝光 */

#ai-chat-bottom-input::before {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  top: -1px !important;
  left: 22px !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(29, 155, 240, 0.65),
    transparent
  ) !important;
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
}

#ai-chat-bottom-input:focus-within::before {
  opacity: 1 !important;
}

/* 主输入框 */

#ai-chat-input {
  color: var(--x-text) !important;
  caret-color: var(--x-blue) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  resize: none !important;
}

#ai-chat-input::placeholder {
  color: #8b98a5 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

#ai-chat-input:focus::placeholder {
  color: var(--x-muted) !important;
}

#ai-chat-input::selection {
  color: #ffffff !important;
  background: rgba(29, 155, 240, 0.58) !important;
}

/* 输入区内按钮与图标的可读性 */

#ai-chat-bottom-input button {
  color: var(--x-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease !important;
}

#ai-chat-bottom-input button:hover {
  color: var(--x-blue) !important;
  background: rgba(29, 155, 240, 0.12) !important;
  transform: scale(1.04) !important;
}

#ai-chat-bottom-input button:active {
  background: rgba(29, 155, 240, 0.18) !important;
  transform: scale(0.96) !important;
}

#ai-chat-bottom-input button:focus-visible {
  outline: 2px solid var(--x-blue) !important;
  outline-offset: 1px !important;
}

#ai-chat-bottom-input button svg {
  color: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* 输入区内主要发送按钮 */

#ai-chat-bottom-input button.MuiButton-containedPrimary,
#ai-chat-bottom-input button[aria-label*="发送"],
#ai-chat-bottom-input button[title*="发送"] {
  color: #ffffff !important;
  background: var(--x-blue) !important;
  border: 1px solid var(--x-blue) !important;
  box-shadow: 0 4px 13px rgba(29, 155, 240, 0.25) !important;
}

#ai-chat-bottom-input button.MuiButton-containedPrimary:hover,
#ai-chat-bottom-input button[aria-label*="发送"]:hover,
#ai-chat-bottom-input button[title*="发送"]:hover {
  color: #ffffff !important;
  background: var(--x-blue-hover) !important;
  border-color: var(--x-blue-hover) !important;
}

/* ========================================
   06. 回复框
   说明：此处按“评论区 textarea 回复框”处理
   ======================================== */

div.flex.flex-col.border-gray-200 {
  color: var(--x-text) !important;
  background: var(--x-surface) !important;
  border: 1px solid var(--x-border) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 5px 18px rgba(0, 0, 0, 0.24) !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

div.flex.flex-col.border-gray-200:hover {
  background: #181b1f !important;
  border-color: #536471 !important;
}

div.flex.flex-col.border-gray-200:focus-within {
  background: #000000 !important;
  border-color: var(--x-blue) !important;
  box-shadow:
    0 0 0 1px var(--x-blue),
    0 0 0 4px rgba(29, 155, 240, 0.1),
    0 7px 22px rgba(0, 0, 0, 0.32) !important;
}

/* 评论回复文本框 */

textarea.rc-textarea {
  color: var(--x-text) !important;
  caret-color: var(--x-blue) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  resize: none !important;
}

textarea.rc-textarea::placeholder {
  color: #8b98a5 !important;
  opacity: 1 !important;
}

textarea.rc-textarea:focus::placeholder {
  color: var(--x-muted) !important;
}

textarea.rc-textarea::selection {
  color: #ffffff !important;
  background: rgba(29, 155, 240, 0.58) !important;
}

/* 回复字数统计 */

div.bg-gray-100.text-gray-500 {
  color: var(--x-muted) !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 评论发送按钮 */

div.cursor-pointer.group.flex.items-center.justify-center {
  color: #ffffff !important;
  background: var(--x-blue) !important;
  border: 1px solid var(--x-blue) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 13px rgba(29, 155, 240, 0.24) !important;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
  color: #ffffff !important;
  background: var(--x-blue-hover) !important;
  border-color: var(--x-blue-hover) !important;
  box-shadow:
    0 0 0 4px rgba(29, 155, 240, 0.1),
    0 6px 17px rgba(29, 155, 240, 0.24) !important;
  transform: translateY(-1px) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:active {
  background: #1677b8 !important;
  transform: translateY(0) scale(0.97) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
  color: #ffffff !important;
  fill: none !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  transition: transform 220ms ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover
  svg[data-icon="Send03"] {
  transform: translate(1px, -1px) rotate(-7deg) !important;
}

/* ========================================
   07. 移动端适配
   ======================================== */

@media (max-width: 768px) {
  .sticky.w-full.top-0.flex.items-center {
    background: rgba(0, 0, 0, 0.96) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(13px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(13px) saturate(125%) !important;
  }

  #ai-model-selector .group.flex.items-center {
    min-height: 35px !important;
    padding: 4px 8px 4px 10px !important;
  }

  #ai-model-selector .group.flex.items-center::before {
    width: 7px !important;
    height: 7px !important;
    margin-right: 6px !important;
  }

  #ai-model-selector .truncate.text-\[13px\] {
    font-size: 12px !important;
  }

  #ai-model-selector .shrink-0.flex.items-center svg {
    width: 15px !important;
    height: 15px !important;
  }

  #header-setting-button,
  .sticky.w-full.top-0
    button.MuiIconButton-root:has(svg.lucide-music-2) {
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
  }

  #ai-mod-button2 {
    padding: 7px 4px !important;
  }

  #ai-mod-button2 button.MuiButton-root {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  #ai-mod-button2 button.MuiButton-root svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 4px !important;
  }

  #ai-chat-bottom-input {
    border-radius: 19px !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.32) !important;
  }

  #ai-chat-input {
    font-size: 14px !important;
  }

  div.flex.flex-col.border-gray-200 {
    border-radius: 14px !important;
  }

  textarea.rc-textarea {
    font-size: 14px !important;
  }
}

/* ========================================
   08. 减少动画偏好
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  #ai-model-selector .group.flex.items-center,
  #ai-model-selector .group.flex.items-center::before,
  #ai-model-selector .shrink-0.flex.items-center svg,
  .sticky.w-full.top-0 svg.lucide-clock-8,
  .sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
  #header-setting-button,
  #header-setting-button svg,
  #ai-mod-button2 button.MuiButton-root,
  #ai-mod-button2 button.MuiButton-root svg,
  #ai-chat-bottom-input,
  #ai-chat-bottom-input::before,
  #ai-chat-bottom-input button,
  div.flex.flex-col.border-gray-200,
  div.cursor-pointer.group.flex.items-center.justify-center,
  div[data-state="closed"] svg[data-icon="Send03"] {
    transition: none !important;
  }
}
.creator-sim-ui .profile-drawer .drawer-content,
.creator-sim-ui .money-drawer .drawer-content,
.creator-sim-ui .people-drawer .drawer-content{
--text-main:#e7e9ea;
--text-sub:#a8adb2;
--text-dim:#71767b;
}
.creator-sim-ui .profile-drawer .drawer-content>p,
.creator-sim-ui .money-drawer .drawer-content>p,
.creator-sim-ui .people-drawer .drawer-content>p{
margin:9px 0;
color:var(--text-sub);
line-height:1.65;
}
.creator-sim-ui .profile-drawer .drawer-content>p strong,
.creator-sim-ui .money-drawer .drawer-content>p strong,
.creator-sim-ui .people-drawer .drawer-content>p strong{
color:var(--text-main);
font-weight:700;
}
.creator-sim-ui .profile-grid,
.creator-sim-ui .status-grid{
gap:0;
background:
linear-gradient(145deg,rgba(29,155,240,.035),transparent 45%),
var(--x-soft);
}
.creator-sim-ui .profile-grid::before,
.creator-sim-ui .status-grid::before{
width:3px;
background:linear-gradient(to bottom,var(--x-blue),var(--x-purple));
}
.creator-sim-ui .profile-grid .field,
.creator-sim-ui .status-grid .field,
.creator-sim-ui .profile-grid .info-item,
.creator-sim-ui .status-grid .info-item{
position:relative;
display:flex;
min-height:67px;
flex-direction:column;
justify-content:center;
gap:5px;
padding:11px 13px 11px 16px;
background:transparent;
transition:background-color .18s ease;
}
.creator-sim-ui .profile-grid .field:nth-child(4n+1),
.creator-sim-ui .profile-grid .field:nth-child(4n+2),
.creator-sim-ui .status-grid .field:nth-child(4n+1),
.creator-sim-ui .status-grid .field:nth-child(4n+2),
.creator-sim-ui .profile-grid .info-item:nth-child(4n+1),
.creator-sim-ui .profile-grid .info-item:nth-child(4n+2),
.creator-sim-ui .status-grid .info-item:nth-child(4n+1),
.creator-sim-ui .status-grid .info-item:nth-child(4n+2){
background:rgba(255,255,255,.012);
}
.creator-sim-ui .profile-grid .field:hover,
.creator-sim-ui .status-grid .field:hover,
.creator-sim-ui .profile-grid .info-item:hover,
.creator-sim-ui .status-grid .info-item:hover{
z-index:1;
background:rgba(29,155,240,.065);
}
.creator-sim-ui .profile-grid .field>span:first-child,
.creator-sim-ui .status-grid .field>span:first-child,
.creator-sim-ui .profile-grid .info-item>span:first-child,
.creator-sim-ui .status-grid .info-item>span:first-child,
.creator-sim-ui .profile-grid .field-label,
.creator-sim-ui .status-grid .field-label{
display:flex;
align-items:center;
gap:6px;
margin:0;
color:#8b98a5;
font-size:11px;
font-weight:600;
line-height:1.3;
letter-spacing:.025em;
}
.creator-sim-ui .profile-grid .field>span:first-child::before,
.creator-sim-ui .status-grid .field>span:first-child::before,
.creator-sim-ui .profile-grid .info-item>span:first-child::before,
.creator-sim-ui .status-grid .info-item>span:first-child::before,
.creator-sim-ui .profile-grid .field-label::before,
.creator-sim-ui .status-grid .field-label::before{
content:"";
flex:0 0 auto;
width:5px;
height:5px;
background:var(--x-blue);
border-radius:50%;
box-shadow:0 0 0 3px rgba(29,155,240,.09);
}
.creator-sim-ui .profile-grid .field:nth-child(3n+2)>span:first-child::before,
.creator-sim-ui .status-grid .field:nth-child(3n+2)>span:first-child::before,
.creator-sim-ui .profile-grid .info-item:nth-child(3n+2)>span:first-child::before,
.creator-sim-ui .status-grid .info-item:nth-child(3n+2)>span:first-child::before{
background:var(--x-purple);
box-shadow:0 0 0 3px rgba(120,86,255,.1);
}
.creator-sim-ui .profile-grid .field:nth-child(3n)>span:first-child::before,
.creator-sim-ui .status-grid .field:nth-child(3n)>span:first-child::before,
.creator-sim-ui .profile-grid .info-item:nth-child(3n)>span:first-child::before,
.creator-sim-ui .status-grid .info-item:nth-child(3n)>span:first-child::before{
background:var(--x-green);
box-shadow:0 0 0 3px rgba(0,186,124,.1);
}
.creator-sim-ui .profile-grid .field>span:first-child::after,
.creator-sim-ui .status-grid .field>span:first-child::after,
.creator-sim-ui .profile-grid .info-item>span:first-child::after,
.creator-sim-ui .status-grid .info-item>span:first-child::after,
.creator-sim-ui .profile-grid .field-label::after,
.creator-sim-ui .status-grid .field-label::after{
content:"";
flex:1 1 auto;
height:1px;
margin-left:2px;
background:linear-gradient(90deg,var(--x-line),transparent);
}
.creator-sim-ui .profile-grid .field>strong,
.creator-sim-ui .status-grid .field>strong,
.creator-sim-ui .profile-grid .info-item>strong,
.creator-sim-ui .status-grid .info-item>strong,
.creator-sim-ui .profile-grid .field-value,
.creator-sim-ui .status-grid .field-value{
display:block;
padding-left:11px;
color:var(--text-main);
font-size:14px;
font-weight:650;
line-height:1.5;
letter-spacing:.01em;
overflow-wrap:anywhere;
}
.creator-sim-ui .private-section,
.creator-sim-ui .life-section,
.creator-sim-ui .cumulative-section,
.creator-sim-ui .pose-section{
display:grid;
grid-template-columns:1fr;
gap:6px;
margin-top:11px;
padding:12px 14px 13px 17px;
line-height:1.65;
}
.creator-sim-ui .private-section{
background:
linear-gradient(100deg,rgba(249,24,128,.075),transparent 58%),
var(--x-soft);
}
.creator-sim-ui .life-section{
background:
linear-gradient(100deg,rgba(29,155,240,.075),transparent 58%),
var(--x-soft);
}
.creator-sim-ui .cumulative-section{
background:
linear-gradient(100deg,rgba(120,86,255,.075),transparent 58%),
var(--x-soft);
}
.creator-sim-ui .pose-section{
background:
linear-gradient(100deg,rgba(0,186,124,.075),transparent 58%),
var(--x-soft);
}
.creator-sim-ui .private-section .section-title,
.creator-sim-ui .life-section .section-title,
.creator-sim-ui .cumulative-section .section-title,
.creator-sim-ui .pose-section .section-title{
position:relative;
margin:0 0 2px;
padding-bottom:7px;
color:var(--text-main);
font-size:13px;
font-weight:750;
border-bottom:1px solid var(--x-line-soft);
}
.creator-sim-ui .private-section .section-title{
color:#ff8fc5;
}
.creator-sim-ui .life-section .section-title{
color:#74c7ff;
}
.creator-sim-ui .cumulative-section .section-title{
color:#aa96ff;
}
.creator-sim-ui .pose-section .section-title{
color:#66d9ad;
}
.creator-sim-ui .private-section>p,
.creator-sim-ui .life-section>p,
.creator-sim-ui .cumulative-section>p,
.creator-sim-ui .pose-section>p{
margin:0;
color:#c9cdd2;
line-height:1.7;
}
.creator-sim-ui .private-section>p+p,
.creator-sim-ui .life-section>p+p,
.creator-sim-ui .cumulative-section>p+p,
.creator-sim-ui .pose-section>p+p{
padding-top:7px;
border-top:1px dashed rgba(255,255,255,.07);
}
.creator-sim-ui .money-overview{
background:
linear-gradient(135deg,rgba(255,212,0,.035),transparent 40%),
var(--x-soft);
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.creator-sim-ui .money-overview .metric{
display:flex;
min-height:72px;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
padding:10px 7px;
transition:background-color .18s ease;
}
.creator-sim-ui .money-overview .metric:hover{
background:rgba(255,255,255,.035);
}
.creator-sim-ui .money-overview .metric>span:first-child,
.creator-sim-ui .money-overview .metric-label{
color:#8b98a5;
font-size:10px;
font-weight:600;
line-height:1.3;
letter-spacing:.025em;
}
.creator-sim-ui .money-overview .metric>strong,
.creator-sim-ui .money-overview .metric-value{
margin:0;
color:var(--text-main);
font:750 14px/1.3 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
letter-spacing:-.025em;
}
.creator-sim-ui .money-overview .metric:first-child>strong,
.creator-sim-ui .money-overview .metric:first-child .metric-value{
color:#ffd84d;
font-size:16px;
text-shadow:0 0 14px rgba(255,212,0,.13);
}
.creator-sim-ui .money-overview .metric:nth-child(2)>strong,
.creator-sim-ui .money-overview .metric:nth-child(2) .metric-value{
color:#69dbae;
}
.creator-sim-ui .money-overview .metric:nth-child(3)>strong,
.creator-sim-ui .money-overview .metric:nth-child(3) .metric-value{
color:#ff8b95;
}
.creator-sim-ui .money-overview .metric:nth-child(4)>strong,
.creator-sim-ui .money-overview .metric:nth-child(4) .metric-value{
color:#7dcaff;
}
.creator-sim-ui .money-overview .metric:nth-child(5)>strong,
.creator-sim-ui .money-overview .metric:nth-child(5) .metric-value{
color:#ad9aff;
}
.creator-sim-ui .revenue-card,
.creator-sim-ui .channel-card{
background:
linear-gradient(110deg,color-mix(in srgb,var(--card-accent) 7%,transparent),transparent 47%),
var(--x-soft);
}
.creator-sim-ui .revenue-card:hover,
.creator-sim-ui .channel-card:hover{
background:
linear-gradient(110deg,color-mix(in srgb,var(--card-accent) 11%,transparent),transparent 56%),
var(--x-soft-hover);
}
.creator-sim-ui .card-head,
.creator-sim-ui .channel-head{
min-height:46px;
padding-top:11px;
padding-bottom:9px;
}
.creator-sim-ui .card-head b,
.creator-sim-ui .channel-head b{
font-size:14px;
font-weight:750;
letter-spacing:.015em;
}
.creator-sim-ui .card-stats,
.creator-sim-ui .channel-stats{
gap:0;
padding-top:3px;
padding-bottom:11px;
}
.creator-sim-ui .card-stats>span,
.creator-sim-ui .channel-stats>span{
display:flex;
min-height:44px;
flex-direction:column-reverse;
align-items:center;
justify-content:center;
gap:3px;
color:#8b98a5;
font-size:10px;
line-height:1.25;
}
.creator-sim-ui .card-stats strong,
.creator-sim-ui .channel-stats strong{
margin:0;
color:var(--text-main);
font:700 13px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.creator-sim-ui .record-list,
.creator-sim-ui .order-list{
padding-top:9px;
padding-bottom:10px;
}
.creator-sim-ui .record,
.creator-sim-ui .order{
min-height:38px;
align-items:center;
padding-top:7px;
padding-bottom:7px;
line-height:1.5;
}
.creator-sim-ui .people-drawer .drawer-content{
padding-top:14px;
padding-bottom:16px;
}
.creator-sim-ui .people-grid{
display:grid;
grid-template-columns:1fr;
gap:12px;
padding:0 12px;
}
.creator-sim-ui .person-card{
position:relative;
display:block;
min-height:0;
padding:15px 15px 14px 78px;
overflow:hidden;
background:
linear-gradient(115deg,rgba(249,24,128,.055),transparent 45%),
var(--x-soft);
border:1px solid var(--x-line);
border-radius:16px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.creator-sim-ui .person-card:first-child{
border-top:1px solid var(--x-line);
}
.creator-sim-ui .person-card:hover{
background:
linear-gradient(115deg,rgba(29,155,240,.07),transparent 48%),
var(--x-soft-hover);
border-color:#536471;
transform:translateY(-1px);
}
.creator-sim-ui .person-card::before{
left:15px;
top:16px;
width:48px;
height:48px;
}
.creator-sim-ui .person-card::after{
top:15px;
right:14px;
bottom:auto;
padding:5px 11px;
font-size:10px;
}
.creator-sim-ui .person-head{
display:flex;
min-height:48px;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:4px;
margin:0 72px 12px 0;
padding-bottom:11px;
border-bottom:1px solid var(--x-line-soft);
}
.creator-sim-ui .person-name{
display:block;
max-width:100%;
color:var(--text-main);
font-size:15px;
font-weight:750;
line-height:1.3;
letter-spacing:.005em;
white-space:normal;
}
.creator-sim-ui .person-name::after{
display:inline;
margin-left:6px;
color:var(--x-muted);
font-size:10px;
font-weight:400;
}
.creator-sim-ui .relation-stage{
position:static;
display:inline-flex;
align-items:center;
width:max-content;
max-width:100%;
padding:2px 8px;
color:#8bcfff;
font-size:10px;
font-weight:600;
line-height:1.4;
background:rgba(29,155,240,.08);
border:1px solid rgba(29,155,240,.16);
border-radius:999px;
white-space:normal;
}
.creator-sim-ui .relation-stage::before{
content:"关系 · ";
color:var(--x-muted);
}
.creator-sim-ui .person-card:hover .relation-stage{
color:#a6dcff;
background:rgba(29,155,240,.12);
}
.creator-sim-ui .person-info{
display:grid;
grid-template-columns:1fr;
gap:0;
color:#c3c8ce;
font-size:12px;
line-height:1.65;
}
.creator-sim-ui .person-info>span{
position:relative;
display:block;
min-width:0;
padding:9px 4px 9px 19px;
overflow-wrap:anywhere;
border-bottom:1px solid rgba(255,255,255,.055);
}
.creator-sim-ui .person-info>span::before{
content:"";
position:absolute;
left:3px;
top:17px;
width:5px;
height:5px;
background:var(--x-muted);
border-radius:50%;
}
.creator-sim-ui .person-info>span:nth-child(3n+1)::before{
background:var(--x-blue);
box-shadow:0 0 0 3px rgba(29,155,240,.08);
}
.creator-sim-ui .person-info>span:nth-child(3n+2)::before{
background:var(--x-pink);
box-shadow:0 0 0 3px rgba(249,24,128,.08);
}
.creator-sim-ui .person-info>span:nth-child(3n)::before{
background:var(--x-green);
box-shadow:0 0 0 3px rgba(0,186,124,.08);
}
.creator-sim-ui .person-info>span:last-child{
border-bottom:0;
}
.creator-sim-ui .person-info>span:hover{
color:var(--text-main);
background:rgba(255,255,255,.018);
}
.creator-sim-ui .unresolved{
grid-column:auto;
margin:10px 0 0;
padding:10px 11px 10px 31px!important;
color:#e8c96d!important;
line-height:1.6;
background:rgba(255,212,0,.055);
border:1px solid rgba(255,212,0,.16)!important;
border-radius:10px;
}
.creator-sim-ui .unresolved::before{
content:"?";
position:absolute;
left:9px;
top:11px!important;
display:grid;
place-items:center;
width:14px!important;
height:14px!important;
color:#000;
font-size:9px;
font-weight:800;
background:var(--x-gold)!important;
border-radius:50%;
box-shadow:none!important;
}
.creator-sim-ui .person-card[data-status="active"]{
border-color:rgba(29,155,240,.32);
}
.creator-sim-ui .person-card[data-status="pending"]{
border-color:rgba(255,212,0,.3);
}
.creator-sim-ui .person-card[data-status="blocked"]{
border-color:rgba(244,33,46,.27);
}
.creator-sim-ui .person-card[data-status="active"]::after{
color:#fff;
background:var(--x-blue);
}
.creator-sim-ui .person-card[data-status="pending"]::after{
color:#000;
background:var(--x-gold);
}
.creator-sim-ui .person-card[data-status="blocked"]::after{
color:#fff;
background:var(--x-red);
}
@media(max-width:600px){
.creator-sim-ui .profile-grid .field,
.creator-sim-ui .status-grid .field,
.creator-sim-ui .profile-grid .info-item,
.creator-sim-ui .status-grid .info-item{
min-height:64px;
padding:10px 11px 10px 14px;
}
.creator-sim-ui .money-overview .metric{
min-height:66px;
}
.creator-sim-ui .money-overview .metric:first-child{
min-height:61px;
}
.creator-sim-ui .people-grid{
gap:10px;
padding-right:10px;
padding-left:10px;
}
.creator-sim-ui .person-card{
padding:14px 12px 13px 70px;
}
.creator-sim-ui .person-card::before{
left:12px;
top:15px;
width:44px;
height:44px;
}
.creator-sim-ui .person-card::after{
right:11px;
top:14px;
}
.creator-sim-ui .person-head{
margin-right:65px;
margin-bottom:10px;
}
.creator-sim-ui .person-info>span{
padding-top:8px;
padding-bottom:8px;
}
.creator-sim-ui .person-info>span::before{
top:16px;
}
}
@media(max-width:420px){
.creator-sim-ui .profile-grid,
.creator-sim-ui .status-grid{
grid-template-columns:1fr;
}
.creator-sim-ui .profile-grid .field:nth-child(odd),
.creator-sim-ui .status-grid .field:nth-child(odd),
.creator-sim-ui .profile-grid .info-item:nth-child(odd),
.creator-sim-ui .status-grid .info-item:nth-child(odd){
background:rgba(255,255,255,.012);
}
.creator-sim-ui .profile-grid .field:nth-child(even),
.creator-sim-ui .status-grid .field:nth-child(even),
.creator-sim-ui .profile-grid .info-item:nth-child(even),
.creator-sim-ui .status-grid .info-item:nth-child(even){
background:transparent;
}
.creator-sim-ui .profile-grid .field,
.creator-sim-ui .status-grid .field,
.creator-sim-ui .profile-grid .info-item,
.creator-sim-ui .status-grid .info-item{
min-height:58px;
border-right:0;
}
.creator-sim-ui .private-section,
.creator-sim-ui .life-section,
.creator-sim-ui .cumulative-section,
.creator-sim-ui .pose-section{
padding-right:12px;
padding-left:15px;
}
.creator-sim-ui .money-overview .metric>strong,
.creator-sim-ui .money-overview .metric-value{
font-size:13px;
}
.creator-sim-ui .money-overview .metric:first-child>strong,
.creator-sim-ui .money-overview .metric:first-child .metric-value{
font-size:15px;
}
.creator-sim-ui .card-stats>span,
.creator-sim-ui .channel-stats>span{
min-height:42px;
}
.creator-sim-ui .person-card{
padding:13px 11px 12px 64px;
}
.creator-sim-ui .person-card::before{
left:11px;
top:14px;
width:40px;
height:40px;
}
.creator-sim-ui .person-card::after{
position:static;
display:inline-flex;
margin:8px 0 0;
}
.creator-sim-ui .person-head{
min-height:42px;
margin-right:0;
padding-right:0;
}
.creator-sim-ui .person-name{
font-size:14px;
}
.creator-sim-ui .person-info{
margin-left:-53px;
}
.creator-sim-ui .unresolved{
margin-left:-53px;
}
}
@media(prefers-reduced-motion:reduce){
.creator-sim-ui .profile-grid .field,
.creator-sim-ui .status-grid .field,
.creator-sim-ui .profile-grid .info-item,
.creator-sim-ui .status-grid .info-item,
.creator-sim-ui .money-overview .metric,
.creator-sim-ui .person-card{
transition:none;
}
}