/* v11: semantic color roles on a white canvas; motion is bounded and optional. */
:root{--blue:#365ddd;--cyan:#007b95;--green:#007f60;--violet:#8048ca;--amber:#a36207;--coral:#ca365b;--blue-soft:#edf2ff}
.metrics{padding-block:0}.metric,.compact .metric{--accent:var(--blue);--wash:#f3f6ff;padding-block:22px;background:var(--wash)}
.metric:nth-child(2){--accent:var(--cyan);--wash:#effafd}.metric:nth-child(3){--accent:var(--green);--wash:#effaf5}.metric:nth-child(4){--accent:var(--amber);--wash:#fff8ee}
.metric-value{color:var(--accent)}.metric-value>span{color:var(--muted)}.metric-label{color:var(--ink)}
.panel{--accent:var(--blue);--wash:#f6f8ff}.engagement{--accent:var(--coral);--wash:#fff6f8}.operations{--accent:var(--coral);--wash:#fff6f7}.creation{--accent:var(--green);--wash:#f2fbf7}.recent{--accent:var(--cyan);--wash:#f1fafd}.recommended{--accent:var(--violet);--wash:#f8f4ff}.creators-grid>.panel:first-child{--accent:var(--violet);--wash:#f8f5ff}.creators-grid>.panel:last-child,.quota{--accent:var(--amber);--wash:#fffaef}.resources-grid>.panel:nth-child(2){--accent:var(--cyan);--wash:#f2fbfc}.system-strip{--accent:var(--green);--wash:#f2faf6}
.panel>.panel-heading{background:var(--wash);border-radius:13px 13px 0 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));margin-bottom:16px;padding-bottom:16px}
.panel-heading h2{color:var(--accent)}.panel-heading .section-icon{color:var(--accent)}
.creation>.panel-heading{margin-bottom:14px}.recommended>.panel-heading{margin-bottom:18px}
.section-band h2{color:var(--blue)}.section-band:has(+.creators-grid) h2{color:var(--violet)}.section-band:has(+.resources-grid) h2{color:var(--cyan)}
.stat-row:nth-child(1)>strong{color:var(--blue)}.stat-row:nth-child(2)>strong{color:var(--green)}.stat-row:nth-child(3)>strong{color:var(--amber)}.stat-row:nth-child(4)>strong{color:var(--violet)}
.avatar.violet{background:#eee5ff;color:#7341b5}.avatar.cyan,.mini-avatar.cyan{background:#dcf3f7;color:#006b82}.avatar.green{background:#ddf4e9;color:#006f51}.avatar.amber{background:#fff0d7;color:#925601}
.rank-number{font-weight:600}.rank-row:nth-child(1) .rank-number{color:#9c6200}.rank-row:nth-child(2) .rank-number{color:#526d8e}.rank-row:nth-child(3) .rank-number{color:#ab5938}
.rank-metric:nth-child(1)>strong{color:var(--cyan)}.rank-metric:nth-child(3)>strong{color:var(--violet)}
.activity-tags>span:nth-child(3n+1){background:#f3edff;color:#7141a9;border-color:#e6dbf6}.activity-tags>span:nth-child(3n+2){background:#eefaF5;color:#00755b;border-color:#d7ece4}.activity-tags>span:nth-child(3n){background:#fff6e7;color:#8d590a;border-color:#f2e4ca}
.progress-info .track{background:color-mix(in srgb,var(--progress-accent) 10%,var(--surface));height:7px}.progress-info .track>b{height:7px;transform-origin:left;background:var(--progress-accent)}
.legend-meter>i{opacity:1}.engagement-legend button:nth-child(1) strong{color:var(--blue)}.engagement-legend button:nth-child(2) strong{color:var(--violet)}.engagement-legend button:nth-child(3) strong{color:var(--amber)}.engagement-legend button:nth-child(4) strong{color:var(--cyan)}
.nav-item:hover,.nav-group>button:hover{background:color-mix(in srgb,var(--nav-color,var(--blue)) 8%,var(--surface));color:var(--nav-color,var(--blue))}.nav-item.active{background:#eaf0ff;color:var(--blue)}
.button.primary{background:#365ddd;border-color:#365ddd}.button.primary:hover{background:#244ac5;border-color:#244ac5}.text-button:hover{color:var(--violet)}
.button,.icon-button,.text-button,.nav-item,.nav-group>button,.cover-placeholder{transition:background-color 180ms,color 180ms,border-color 180ms,transform 180ms cubic-bezier(.16,1,.3,1)}
.button:active,.icon-button:active{transform:scale(.96)}.text-button .icon,.nav-item .icon,.nav-group>button>.icon:first-child{transition:transform 220ms cubic-bezier(.16,1,.3,1)}.text-button:hover .icon{transform:translateX(3px)}.nav-item:hover>.icon,.nav-group>button:hover>.icon:first-child{transform:translateX(2px)}
.cover-placeholder:hover{border-color:var(--cyan);background:#eaf8fc}.rank-row:hover,.progress-row:hover{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
body:not(.no-motion) .drawer:not([hidden]){animation:drawer-enter 280ms cubic-bezier(.16,1,.3,1)}body:not(.no-motion) .overlay:not([hidden]){animation:overlay-enter 180ms ease-out}body:not(.no-motion) .toast:not([hidden]){animation:notice-enter 200ms ease-out}body:not(.no-motion) .nav-children:not([hidden]){animation:overlay-enter 180ms ease-out}
@keyframes drawer-enter{from{transform:translateX(32px);opacity:.3}to{transform:none;opacity:1}}@keyframes overlay-enter{from{opacity:0}to{opacity:1}}@keyframes notice-enter{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
::selection{background:#dce6ff;color:#233f9e}input{caret-color:var(--blue)}:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.dark .metric{--wash:color-mix(in srgb,var(--accent) 9%,var(--surface))}.dark .panel{--wash:color-mix(in srgb,var(--accent) 7%,var(--surface))}.dark .nav-item.active{background:var(--blue-soft)}.dark .activity-tags>span{background:var(--soft);color:var(--ink);border-color:var(--line)}.dark .avatar{background:var(--soft);color:var(--ink)}.dark .cover-placeholder:hover{background:var(--soft)}
@media(max-width:600px){.metric,.compact .metric{padding-block:18px}.panel>.panel-heading{margin-bottom:12px;padding-bottom:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* v12: distinct metric cards, stronger module surfaces, visible interaction. */
.metrics{border:0;border-radius:0;background:transparent;gap:16px;overflow:visible}
.metric,.compact .metric{position:relative;isolation:isolate;overflow:hidden;border:0!important;border-radius:14px;padding:22px 24px;--card-start:#365cce;--card-end:#263e99;background:linear-gradient(120deg,var(--card-start),var(--card-end));color:white;transition:transform 260ms cubic-bezier(.16,1,.3,1)}
.metric:nth-child(2){--card-start:#087f98;--card-end:#07596f}.metric:nth-child(3){--card-start:#078064;--card-end:#075a46}.metric:nth-child(4){--card-start:#955c12;--card-end:#734013}
.metric .metric-label,.metric .metric-value,.metric .metric-value>span,.metric .metric-foot,.metric .metric-foot .delta,.metric .info-button,.metric .metric-label .icon-tile{color:#fff}.metric .metric-foot{opacity:.88}.metric .metric-foot .delta{background:transparent}.metric .metric-label .icon-tile{width:30px;height:30px}.metric .metric-label .icon{width:28px;height:28px}.metric-value{font-size:40px}
.metric::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,#ffffff12 47%,transparent 72%);transform:translateX(-110%);pointer-events:none}
.metric:hover{transform:translateY(-4px)}body:not(.no-motion) .metric:hover::after{animation:metric-light 700ms ease-out}
@keyframes metric-light{to{transform:translateX(110%)}}
.panel{border-color:color-mix(in srgb,var(--accent) 23%,var(--line));transition:border-color 220ms,background-color 220ms;--wash:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.panel:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.panel>.panel-heading{background:var(--wash);border-bottom-color:color-mix(in srgb,var(--accent) 20%,var(--line))}.panel-heading h2{font-size:19px;font-weight:650}.panel-heading .section-icon,.panel-heading .section-icon .icon{width:27px;height:27px}
.operations>.panel-heading,.recommended>.panel-heading{background:color-mix(in srgb,var(--accent) 13%,var(--surface))}
.creation{background:color-mix(in srgb,var(--green) 3%,var(--surface))}.system-strip{background:color-mix(in srgb,var(--green) 5%,var(--surface));border-color:color-mix(in srgb,var(--green) 30%,var(--line))}
.recommended-person{border-radius:10px;transition:background-color 240ms,transform 240ms}.recommended-person:hover{background:color-mix(in srgb,var(--violet) 6%,var(--surface));transform:translateY(-2px)}
.rank-row:first-child{background:color-mix(in srgb,var(--amber) 7%,var(--surface));border-radius:10px}.rank-row:first-child .rank-name{font-weight:600}.rank-row:first-child .rank-number{font-size:19px}
.progress-info .track{height:8px;background:color-mix(in srgb,var(--progress-accent) 16%,var(--surface))}.progress-info .track>b{height:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--progress-accent) 72%,#fff),var(--progress-accent))}
.stat-row .icon-tile,.avatar,.section-icon .icon,.timeline-icon .icon{transition:transform 260ms cubic-bezier(.16,1,.3,1)}.stat-row:hover .icon-tile,.rank-row:hover .avatar,.recommended-person:hover .avatar{transform:scale(1.12)}.panel-heading:hover .section-icon .icon{transform:rotate(-8deg) scale(1.1)}
.engagement-legend button{transition:background-color 200ms,transform 200ms}.engagement-legend button:hover{transform:translateX(3px)}.donut-segment{transition:opacity 220ms,stroke-width 220ms}.donut-segment:hover{stroke-width:25px;cursor:pointer}.donut-hole strong{color:var(--blue)}
.motion-replay{width:100%;justify-content:center;color:var(--blue);background:var(--blue-soft);margin:8px 0 14px}
@media(max-width:1000px){.metrics{gap:12px}.metric,.compact .metric{padding:20px 18px}.metric-value{font-size:34px}}
@media(max-width:600px){.metrics{gap:10px}.metric,.compact .metric{padding:16px 14px}.metric-value{font-size:32px}.metric .metric-label .icon,.metric .metric-label .icon-tile{width:24px;height:24px}.panel-heading h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.metric:hover,.recommended-person:hover,.stat-row:hover .icon-tile,.rank-row:hover .avatar,.recommended-person:hover .avatar,.panel-heading:hover .section-icon .icon,.engagement-legend button:hover{transform:none}}
.no-motion .metric:hover,.no-motion .recommended-person:hover,.no-motion .stat-row:hover .icon-tile,.no-motion .rank-row:hover .avatar,.no-motion .recommended-person:hover .avatar,.no-motion .panel-heading:hover .section-icon .icon,.no-motion .engagement-legend button:hover{transform:none}