/* Visual direction 03: neutral surfaces, clear navigation, prominent authorization. */
body{padding:0;background:#f6f6f6}
.app-shell{margin:0 0 0 212px;max-width:none;min-height:100vh;border:0;border-radius:0;background:#f8f8f8;overflow:visible}
.workspace-sidebar{position:fixed;inset:0 auto 0 0;width:212px;background:#fdfdfd;border-right:1px solid #eaeaea;display:flex;flex-direction:column;z-index:25}
.workspace-sidebar .brand{height:86px;margin:0 23px;font-size:23px;gap:11px}
.workspace-sidebar .brand-mark{width:38px;height:38px;border-radius:13px}
.workspace-sidebar .brand-en{font-size:8px;letter-spacing:2.8px;margin-top:4px}
.sidebar-nav{padding:5px 14px;display:flex;flex-direction:column;gap:5px;overflow:auto}
.sidebar-item{display:flex;align-items:center;gap:12px;height:44px;padding:0 16px;border-radius:13px;font-size:13px;color:#747474;white-space:nowrap}
.sidebar-item .icon{width:18px;height:18px;stroke-width:1.65}
.sidebar-item.active{background:#272727;color:#fff}
.sidebar-item.active:hover{background:#3a3a3a}
.sidebar-current-dot{width:4px;height:4px;background:#b3b3b3;border-radius:50%;margin-left:auto}
.sidebar-label{font-size:10px;letter-spacing:1px;color:#a0a0a0;margin:21px 16px 6px}
.sidebar-bottom{margin-top:auto;padding:18px 16px 19px}
.sidebar-help{display:flex;gap:11px;align-items:center;width:100%;border:0;background:none;color:#919191;font-size:11px;padding:12px 13px;cursor:pointer;border-radius:11px}
.sidebar-help .icon{width:16px;height:16px}.sidebar-help>span:last-child{margin-left:auto}
.sidebar-help:hover{background:#f1f1f1}
.sidebar-profile{display:flex;align-items:center;gap:10px;padding:17px 6px 0;border-top:1px solid #ececec;margin-top:9px}
.sidebar-profile .account-avatar{width:34px;height:34px;font-size:13px;background:#ededed;outline:0;border:0}
.sidebar-profile strong{display:block;font-size:11px;font-weight:550;color:#616161}.sidebar-profile small{font-size:9px;color:#a2a2a2;display:block;margin-top:2px}
.profile-ellipsis{margin-left:auto;font-size:19px;color:#a4a4a4}
.global-header{height:65px;padding:0 31px;border-bottom:1px solid #eaeaea;background:#fdfdfd;gap:18px}
.header-location{display:flex;align-items:center;gap:12px;font-size:11px;color:#939393;white-space:nowrap}.header-location .icon{width:11px;height:11px;color:#b3b3b3}.header-location>span:last-child{color:#545454;font-weight:500}
.header-actions{gap:15px}.header-actions>.icon-button{width:31px;height:31px;background:transparent}.header-actions>.icon-button .icon{width:17px;height:17px}
.preview-dock{position:static;transform:none;border:0;background:#f2f2f2;box-shadow:none;padding:3px;backdrop-filter:none;border-radius:25px}
.preview-label{font-size:9px;padding:0 11px}.preview-dock a{font-size:10px;padding:6px 12px}.preview-dock a.current{background:#fff;color:#4e4e4e;box-shadow:0 1px 4px #30303008}
main{padding:25px 31px 14px}
.hero{margin:0 0 23px;min-height:61px;gap:20px;align-items:center}.hero h1{font-size:29px;letter-spacing:-.8px;line-height:1.2}.hero p{font-size:12px;margin-top:9px;color:#8b8b8b}
.hero-right{display:flex;align-items:center;gap:30px}.hero-summary{display:flex;align-items:center;gap:30px}.hero-summary>div+div{border-left:1px solid #e4e4e4;padding-left:28px}
.hero-summary span{font-size:10px;color:#969696;display:block}.hero-summary strong{font-size:24px;font-weight:550;font-variant-numeric:tabular-nums;letter-spacing:-.7px;line-height:1.3;display:block;margin-top:3px}.hero-summary small{font-size:10px;font-weight:400;margin-left:6px;color:#a1a1a1;letter-spacing:0}
.hero .pill-button{font-size:11px;padding:11px 17px;gap:12px}.hero .pill-button .icon{width:14px;height:14px}
.ranking-panel{border-radius:20px;border-color:#e9e9e9}.list-toolbar{padding:16px 19px;gap:15px}.filter-tabs button{padding:7px 14px;font-size:12px}.filter-tabs .tab-count{font-size:10px}.search{padding:8px 13px;width:225px}.search input{font-size:12px}.sort-control,.sort-control select{height:37px}.sort-control>.icon{top:12px}
col.rank-col{width:7%}col.creator-col{width:29%}col.sales-col{width:21%}col.highest-col{width:18%}col.video-col{width:11%}col.accounts-col{width:9%}col.action-col{width:5%}
th{height:38px;font-size:11px;color:#929292}th:first-child,td:first-child{padding-left:23px}th:last-child,td:last-child{padding-right:18px}
td{height:65px;padding:11px 12px;font-size:13px}.creator-cell{gap:11px}.creator-cell .avatar{width:37px;height:37px;border-radius:12px}.creator-name{font-size:14px}.creator-sub{margin-top:3px}.platform-name{font-size:10px;max-width:170px}.auth-badge{font-size:9px}.sale-value{font-size:14px}.secondary-value{font-size:12px}.rank-number{font-size:15px}.rank-change{margin-top:2px;font-size:8px}.rank-change .icon{width:9px;height:9px}
.table-footer{padding:14px 23px;font-size:10px}.pagination button{height:28px;min-width:28px}.below-note{margin-top:13px}.page-footer{padding:18px 31px 23px;font-size:9px}
.breadcrumb{font-size:11px;margin-bottom:17px;gap:10px}
.detail-hero{margin-bottom:21px;gap:18px}.detail-identity{gap:17px}.detail-identity .avatar{width:64px;height:64px;border-radius:20px}.detail-title-line h1{font-size:29px}.detail-subline{margin-top:7px;font-size:10px}.detail-title-line .auth-badge{font-size:9px;padding:4px 8px}.detail-actions .pill-button{padding:10px 16px;font-size:11px}
.detail-metrics{margin-bottom:20px;border-radius:20px;grid-template-columns:1.5fr 1.15fr .85fr .9fr}.detail-metric{padding:19px 23px}.detail-metric label{font-size:11px}.detail-metric .metric-value{font-size:26px;margin-top:11px}.detail-metric:first-child .metric-value{font-size:30px}.detail-metric .metric-caption{font-size:10px;margin-top:7px}.detail-metric+.detail-metric:before{top:21px;bottom:21px}
.detail-main-grid{gap:20px;grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr)}.panel{border-radius:20px;padding:21px 23px}.panel h2{font-size:17px}.panel-title small{font-size:10px}.panel-subtitle{font-size:11px}.chart-controls{margin-top:16px}.segmented button{font-size:11px;padding:6px 12px}.chart-legend{font-size:10px}.chart-topline{margin-top:14px}.chart-topline strong{font-size:23px}.chart-topline span{font-size:10px}.chart{min-height:195px}.chart-caption{padding-top:10px;font-size:9px}.auth-metrics{margin-top:20px;gap:15px}.auth-metrics span{font-size:11px}.auth-metrics strong{font-size:25px}.auth-divider{margin:17px 0}.key-values{gap:12px}.key-values dt,.key-values dd{font-size:11px}.auth-footnote{font-size:9px;margin-top:15px}.authorization-panel .pill-button{margin-top:16px;padding:9px 12px}.side-stack{gap:20px}.audience-grid{margin-top:17px;gap:15px}.audience-grid span{font-size:11px}.audience-grid strong{font-size:12px}.secondary-panel{margin-top:20px}.profile-metrics{margin-top:20px;gap:19px;grid-template-columns:repeat(4,1fr)}.profile-metrics label{font-size:11px}.profile-metrics strong{font-size:18px;margin-top:7px}.profile-metrics small{font-size:9px}.cooperation-details{margin-top:20px}
@media(min-width:1700px){.workspace-sidebar{width:224px}.app-shell{margin-left:224px}main{padding-left:38px;padding-right:38px}.global-header{padding:0 38px}.creator-name{font-size:15px}td{height:68px;font-size:14px}.sale-value{font-size:15px}}
@media(max-width:1200px){.workspace-sidebar{width:192px}.app-shell{margin-left:192px}.workspace-sidebar .brand{margin:0 22px}.sidebar-nav{padding-left:11px;padding-right:11px}.sidebar-item{font-size:12px;padding:0 13px}.global-header{padding:0 25px}main{padding:22px 25px 14px}.hero-right{gap:18px}.hero-summary{gap:22px}.hero-summary>div+div{padding-left:20px}.hero h1{font-size:27px}.list-toolbar{gap:12px}.filter-tabs button{font-size:11px;padding:7px 11px}.search{width:180px}.creator-name{font-size:13px}.creator-cell{gap:9px}.sale-value{font-size:13px}.secondary-value{font-size:11px}.platform-name{max-width:120px}.detail-metric{padding:18px}.detail-metric .metric-value{font-size:22px}.detail-metric:first-child .metric-value{font-size:27px}.detail-main-grid{grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:16px}.panel{padding:20px}.chart-controls{flex-wrap:wrap}.profile-metrics{grid-template-columns:repeat(2,1fr)}.preview-label{display:none}}
@media(max-width:1000px){.workspace-sidebar{width:176px}.app-shell{margin-left:176px}.workspace-sidebar .brand{font-size:21px;margin:0 20px}.sidebar-nav{padding:4px 9px}.sidebar-item{font-size:11px;gap:10px}.sidebar-label{font-size:9px}.sidebar-profile strong{font-size:10px}.global-header{padding:0 21px}main{padding:21px}.hero-right{gap:16px}.hero-summary{gap:16px}.hero-summary>div+div{padding-left:16px}.hero-summary strong{font-size:21px}.hero .pill-button{padding:10px 12px;font-size:10px}.hero p{font-size:11px}.list-tools{margin-left:0}.list-toolbar{flex-wrap:wrap}.table-scroll{overflow-x:auto}.table-scroll table{min-width:710px}.detail-main-grid{grid-template-columns:minmax(0,1fr)}.side-stack{grid-template-columns:1fr 1fr}.detail-metrics{grid-template-columns:1.4fr 1fr 1fr}.detail-metric:last-child{display:none}.chart-controls{flex-wrap:nowrap}.chart{min-height:190px}.profile-metrics{grid-template-columns:repeat(4,1fr)}.page-footer{padding-left:21px;padding-right:21px}}
@media(max-width:760px){.workspace-sidebar{width:64px}.app-shell{margin-left:64px}.workspace-sidebar .brand{height:72px;margin:0;justify-content:center}.workspace-sidebar .brand>span:last-child{display:none}.workspace-sidebar .brand-mark{width:33px;height:33px;border-radius:11px}.sidebar-nav{padding:3px 8px;gap:7px}.sidebar-item{height:43px;padding:0;justify-content:center;border-radius:12px}.sidebar-item>.icon,.sidebar-item>[data-icon]{display:flex}.sidebar-item>span:nth-child(2),.sidebar-current-dot{display:none}.sidebar-label{font-size:0;margin:11px 9px 3px;border-top:1px solid #ececec;height:1px}.sidebar-item .icon{width:19px;height:19px}.sidebar-bottom{padding:10px 8px 17px}.sidebar-help{padding:13px 0;justify-content:center}.sidebar-help>span:not(:first-child){display:none}.sidebar-profile{padding:15px 0 0;justify-content:center}.sidebar-profile>div,.profile-ellipsis{display:none}.sidebar-profile .account-avatar{width:29px;height:29px}.global-header{height:57px;padding:0 20px;flex-wrap:nowrap;gap:12px}.header-location{font-size:10px;gap:8px}.header-location>span:last-child{max-width:150px;overflow:hidden;text-overflow:ellipsis}.header-actions{margin:0;gap:0;order:0}.header-actions>.icon-button{display:none}.preview-dock a{font-size:9px;padding:5px 8px}.hero-summary{display:none}.hero .pill-button{white-space:nowrap}.hero p{max-width:none}.hero p .dot{display:inline}.period-date{display:inline}.hero-right{gap:0}.hero{align-items:center;min-height:55px;margin-bottom:20px}.hero h1{font-size:27px}.detail-actions{width:auto;justify-content:flex-end}.detail-hero{gap:18px;flex-wrap:wrap}.detail-identity{width:auto}.detail-main-grid{gap:17px}.page-footer{padding-bottom:24px}.preview-dock{position:static;left:auto;bottom:auto;transform:none}.below-note{font-size:9px}}
@media(max-width:600px){.workspace-sidebar{width:55px}.app-shell{margin-left:55px;border-radius:0}.workspace-sidebar .brand-mark{width:30px;height:30px;border-radius:10px}.sidebar-nav{padding:2px 6px}.sidebar-item{height:40px}.sidebar-item .icon{width:17px;height:17px}.sidebar-bottom{padding-left:6px;padding-right:6px}.global-header{padding:0 15px;height:53px}.header-location{font-size:9px;gap:5px}.header-location>a{display:none}.header-location>[data-icon]{display:none}.header-location>span:last-child{max-width:100px}.preview-dock a{font-size:9px;padding:5px 7px}.preview-dock a span{display:none}main{padding:22px 14px 13px}.hero{align-items:center;gap:10px;margin-bottom:18px}.hero h1{font-size:25px}.hero p{font-size:10px;line-height:1.75;margin-top:7px;max-width:180px}.hero p .dot{display:none}.period-date{display:block}.hero .pill-button{font-size:9px;padding:9px 10px;gap:5px}.hero .pill-button .icon{width:12px;height:12px}.ranking-panel{border-radius:17px}.list-toolbar{padding:12px;gap:12px}.filter-tabs{width:100%;padding:3px}.filter-tabs button{padding:7px 8px;font-size:10px;gap:4px}.filter-tabs .tab-count{font-size:9px}.list-tools{width:100%;gap:6px}.search{width:auto;min-width:0;flex:1;padding:8px 9px}.search input{font-size:10px}.search .icon{width:13px;height:13px}.sort-control select{font-size:9px;max-width:99px;padding:0 24px 0 10px;height:34px}.sort-control{height:34px}.sort-control>.icon{width:11px;height:11px;right:9px;top:12px}.table-scroll{overflow:visible}.table-scroll table{min-width:0}col.rank-col{width:12%}col.creator-col{width:47%}col.sales-col{width:41%}.hide-mobile{display:none}th{height:34px;font-size:9px;padding:0 6px}th:first-child,td:first-child{padding-left:12px}th:nth-child(3),td:nth-child(3){padding-right:11px}td{height:65px;padding:11px 6px}.creator-cell{gap:7px}.creator-cell .avatar{width:29px;height:29px;border-radius:10px}.creator-name{font-size:11px}.sale-value{font-size:10px;letter-spacing:-.15px}.rank-number{font-size:12px}.rank-change{font-size:8px;white-space:nowrap}.creator-sub .platform-name{display:none}.creator-sub .auth-badge{font-size:7px;padding:2px 4px}.creator-sub{margin-top:4px}.table-footer{padding:13px 12px;font-size:9px;gap:10px}.pagination button{height:25px;min-width:25px;font-size:9px}.pagination{gap:1px}.below-note{font-size:8px;gap:8px}.below-note .text-button{font-size:8px}.page-footer{font-size:8px;padding:17px 14px 23px}.footer-brand{font-size:9px}.footer-brand span{font-size:8px;letter-spacing:0;margin-left:8px}.breadcrumb{font-size:10px;margin-bottom:18px}.detail-identity .avatar{width:55px;height:55px;border-radius:18px}.detail-identity{gap:12px}.detail-title-line{gap:7px}.detail-title-line h1{font-size:24px}.detail-title-line .auth-badge{font-size:8px;padding:3px 6px}.detail-subline{font-size:9px;gap:5px}.detail-actions{width:100%;margin-top:0}.detail-actions .pill-button{padding:8px 13px;font-size:10px}.detail-hero{margin-bottom:18px;gap:15px}.detail-metrics{grid-template-columns:1fr 1fr;border-radius:17px;margin-bottom:17px}.detail-metric:first-child{grid-column:1/-1}.detail-metric{padding:18px 16px}.detail-metric:first-child .metric-value{font-size:28px}.detail-metric .metric-value{font-size:20px}.detail-metric label{font-size:10px}.detail-metric .metric-caption{font-size:9px}.panel{padding:20px 16px;border-radius:17px}.panel h2{font-size:15px}.panel-title small{font-size:8px}.chart-controls{flex-wrap:wrap;gap:9px}.segmented button{font-size:9px;padding:6px 9px}.chart-legend{font-size:8px}.chart-topline{margin-top:16px}.chart-topline strong{font-size:21px}.chart-topline span{font-size:9px}.chart{min-height:0}.chart svg{min-height:150px}.chart-caption{font-size:8px}.side-stack{grid-template-columns:1fr}.profile-metrics{grid-template-columns:repeat(2,1fr);gap:20px 12px}.profile-metrics label{font-size:10px}.profile-metrics strong{font-size:17px}.secondary-panel{margin-top:17px}.key-values dt,.key-values dd{font-size:11px}.auth-metrics strong{font-size:27px}.cooperation-details{margin-top:17px}.cooperation-details p{font-size:10px}}

/* Keep semantic color on important states, rather than tinting the whole workspace. */
:root{--ink:#202124;--muted:#74777c;--secondary:#686c72;--line:#e6e7e9;--wash:#f5f5f6;--mint:#eef7f1;--green:#197445}
.app-shell,body{background:#f6f6f7}.workspace-sidebar,.global-header{background:#fcfcfc;border-color:#e6e7e9}.sidebar-item{color:#676b71}.sidebar-item.active{background:#25272b;color:#fff}.sidebar-item.active:hover{background:#383b41}.sidebar-current-dot{background:#fff;opacity:.75}
.sidebar-label,.hero-summary span{color:#797d84}.sidebar-help,.sidebar-profile small{color:#757a82}.sidebar-profile strong,.header-location>span:last-child{color:#383d44}.sidebar-profile .account-avatar{background:#ededee;color:#4c5158}.header-location{color:#747982}.hero p{color:#767b83}.hero-summary small{color:#777c83}
.detail-metric:first-child{background:#fff}.authorization-panel{background:#fff;border-color:#dfe3e7}.detail-metric label,.detail-metric .metric-caption{color:#747b83}.detail-subline{color:#727b84}.detail-subline .rank-pill{border-color:#dce0e4;color:#58616c}.panel-title small,.panel-subtitle{color:#777f88}.key-values dt{color:#757d86}.key-values dd,.audience-grid strong{color:#424d59}.auth-metrics span,.profile-metrics label,.audience-grid span{color:#737c86}.auth-footnote,.profile-metrics small{color:#7a8189}.auth-divider{background:#e7e9ec}.chart-legend{color:#64758a}.chart-legend i{background:#52667c}.chart svg text{fill:#737c88}.chart-topline span,.chart-caption{color:#767f8b}.chart-tip{background:#293544}
.filter-tabs,.segmented{background:#f2f3f4}.filter-tabs button,.segmented button{color:#646b75;border:1px solid transparent}.filter-tabs button.active,.segmented button.active{background:#fff;border-color:#d4d8df;color:#222b36;font-weight:550;box-shadow:0 1px 3px #11182709}.filter-tabs .tab-count{color:#747d89}.filter-tabs .active .tab-count{color:#4d5a6b}
.filter-tabs button[data-filter="authorized"]{color:#176c42;font-weight:600}.filter-tabs button[data-filter="authorized"] .tab-count{color:#176c42;background:#e1f0e7;min-width:21px;padding:0 4px;border-radius:6px}.filter-tabs button[data-filter="authorized"].active{background:#197445;border-color:#197445;color:#fff}.filter-tabs button[data-filter="authorized"].active .tab-count{background:#ffffff24;color:#fff}
.search,.sort-control select{border-color:#e0e3e7}.search input::placeholder{color:#818993}.search:focus-within{border-color:#7b8798;box-shadow:0 0 0 3px #e9edf2}.sort-control select{color:#5e6773}th{color:#767f8b;background:#fafafb}.creator-sub .platform-name{color:#818994}.secondary-value{color:#646d79}.rank-number{color:#707b89}.rank-number.top{color:#252b34}.rank-change.up{color:#28764d}.rank-change.down{color:#9c5e51}
col.rank-col{width:7%}col.creator-col{width:27%}col.sales-col{width:19%}col.highest-col{width:17%}col.video-col{width:11%}col.accounts-col{width:10%}col.action-col{width:9%}
.creator-name-line{display:flex;align-items:center;gap:8px;min-width:0}.creator-name-line .creator-name{min-width:0}.auth-badge,.detail-title-line .auth-badge,.authorization-panel .panel-title .auth-badge{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;border:1px solid #197445;border-radius:7px;background:#197445;color:#fff;font-size:11px;font-weight:600;line-height:1.35;padding:3px 7px;letter-spacing:0}.auth-badge .icon{width:12px;height:12px;stroke-width:2.1}.detail-title-line .auth-badge,.authorization-panel .panel-title .auth-badge{font-size:12px;padding:4px 9px}.creator-sub{margin-top:4px}
.action-heading{text-align:right}.row-open{display:flex;align-items:center;justify-content:center;gap:4px;width:65px;height:31px;border-radius:10px;border:1px solid #d9dee5;background:#fff;color:#424d5c;font-size:11px;font-weight:500;white-space:nowrap;margin-left:auto}.row-open .icon{width:12px;height:12px}.row-open:hover,tr:hover .row-open{background:#eef1f5;border-color:#bdc7d3;color:#253449}tbody tr:hover{background:#f7f8fa}.mobile-detail{display:none}
.breadcrumb{gap:13px;color:#808894}.back-button,.breadcrumb .back-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:6px 11px;min-height:31px;border:1px solid #d3d9e1;border-radius:10px;background:white;color:#354254;font-size:12px;font-weight:550;white-space:nowrap}.back-button .icon{width:15px;height:15px}.back-button:hover,.breadcrumb .back-button:hover{background:#edf0f4;border-color:#aab8c9;color:#172a44}
.pill-button{border-color:#dce0e6;color:#424c5b}.pill-button:hover{background:#eef1f5;border-color:#bac6d5}.pill-button.primary{background:#25272b;color:#fff;border-color:#25272b}.pill-button.primary:hover{background:#3a4049}.save-button.saved{background:#edf0f4;color:#27394f;border-color:#bcc8d7}.authorization-panel .pill-button{border-color:#cdd5df;font-weight:550;color:#35485f}.authorization-panel .pill-button:hover{background:#edf1f6;border-color:#a6b5c9}.text-button{color:#566a84}
.preview-dock{background:#eff0f2}.preview-dock a{color:#6a7482}.preview-dock a.current{color:#253449;background:white}.preview-label{color:#818793}.preview-label i{background:#818996}.preview-dock a span{color:#65758b}.preview-dock a:hover{background:#fff;color:#273b55}.pagination button{color:#647084}.pagination button.active{background:#303641;color:white}.pagination button:not(:disabled):hover{background:#e9edf3;color:#233751}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline-color:#7289a9}
@media(max-width:1200px){col.creator-col{width:24%}col.video-col{width:12%}col.action-col{width:11%}.auth-badge{font-size:10px;padding:3px 6px}.creator-name-line{gap:6px}.row-open{width:59px;height:30px;font-size:10px}}
@media(max-width:700px){col.rank-col{width:12%}col.creator-col{width:47%}col.sales-col{width:41%}.creator-name-line{display:block}.creator-name-line .creator-name{display:block}.creator-name-line .auth-badge{font-size:9px;padding:2px 5px;margin-top:4px;border-radius:5px;gap:3px}.creator-name-line .auth-badge .icon{width:10px;height:10px}.creator-sub{display:none}.mobile-detail{display:flex;justify-content:flex-end;align-items:center;gap:2px;color:#546a88;font-size:10px;font-weight:500;line-height:1.4;margin-top:5px}.mobile-detail .icon{width:10px;height:10px}.detail-title-line .auth-badge,.authorization-panel .panel-title .auth-badge{font-size:10px;padding:3px 7px}.back-button,.breadcrumb .back-button{font-size:11px;min-height:31px;padding:6px 10px}.filter-tabs button[data-filter="authorized"] .tab-count{min-width:17px;padding:0 3px}}