.personal-dashboard{display:none;margin-top:16px;color:#eaf5ff;--personal-accent:#20c9d8;--personal-bg:linear-gradient(145deg,#0d1c2b,#07111c)}
body[data-role="client"] .personal-dashboard{display:block}
.personal-shell{background:var(--personal-bg);border:1px solid #25445d;border-radius:22px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.22)}
.personal-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px;background:linear-gradient(110deg,color-mix(in srgb,var(--personal-accent) 18%,transparent),transparent 60%)}
.personal-identity{display:flex;align-items:center;gap:15px}.personal-avatar{width:64px;height:64px;border-radius:20px;object-fit:cover;background:var(--personal-accent);display:grid;place-items:center;color:#031016;font-size:23px;font-weight:900;border:2px solid color-mix(in srgb,var(--personal-accent) 65%,white)}
.personal-identity h2{font-size:26px;margin:3px 0}.personal-identity p{color:#9db4c8;margin:0}.personal-live{padding:9px 13px;border:1px solid #23604d;border-radius:99px;color:#50e6a7;font:10px monospace;white-space:nowrap}.personal-live:before{content:"";display:inline-block;width:7px;height:7px;background:#50e6a7;border-radius:50%;margin-right:7px}
.personal-nav{display:flex;gap:6px;padding:0 20px 14px;overflow:auto}.personal-nav button{border:0;background:transparent;color:#8fa8bc;border-radius:10px;padding:10px 13px;cursor:pointer;white-space:nowrap}.personal-nav button.active{background:color-mix(in srgb,var(--personal-accent) 16%,#0b1724);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--personal-accent) 50%,transparent)}
.personal-content{padding:0 24px 24px}.personal-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.personal-kpis article,.personal-card{background:rgba(6,16,27,.78);border:1px solid #1d3850;border-radius:15px;padding:17px}.personal-kpis span,.personal-card .muted{display:block;color:#829db3;font-size:11px}.personal-kpis b{display:block;font-size:23px;margin:7px 0}.personal-kpis small{color:#5ce0ab}.personal-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;margin-top:12px}.personal-card h3{font-size:16px;margin:0 0 14px}.usage-layout{display:flex;align-items:center;gap:20px}.donut{width:138px;height:138px;border-radius:50%;background:conic-gradient(var(--personal-accent) 0 48%,#7d6cf2 48% 76%,#f7b955 76% 91%,#203449 91%);display:grid;place-items:center;flex:none}.donut:after{content:"";width:82px;height:82px;border-radius:50%;background:#091522}.donut-label{position:absolute;text-align:center;z-index:1}.donut-wrap{position:relative;display:grid;place-items:center}.donut-label b,.donut-label span{display:block}.donut-label b{font-size:20px}.donut-label span{font-size:9px;color:#91aabd}.legend{display:grid;gap:10px;flex:1}.legend div{display:flex;justify-content:space-between;gap:12px;font-size:11px}.legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}.progress{height:8px;border-radius:99px;background:#16283a;overflow:hidden;margin:12px 0}.progress i{height:100%;display:block;width:var(--value);background:linear-gradient(90deg,var(--personal-accent),#6ce4aa)}
.qupay-banner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--personal-accent) 55%,#24455c);border-radius:15px;background:linear-gradient(100deg,color-mix(in srgb,var(--personal-accent) 16%,#071522),#07111c)}.qupay-banner span,.qupay-banner b,.qupay-banner small{display:block}.qupay-banner span{font:9px monospace;color:var(--personal-accent);letter-spacing:.13em}.qupay-banner b{font-size:18px;margin:7px 0}.qupay-banner small{color:#8ca6ba}.qupay-banner em{font:9px monospace;border-radius:99px;padding:8px 10px;white-space:nowrap}.qupay-banner em.ready{color:#50e6a7;border:1px solid #28634f;background:#0b2a22}.qupay-banner em.pending{color:#efc66e;border:1px solid #66512c;background:#2d2516}
.quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.quick-actions button,.token-package,.personal-save{background:#0e2030;border:1px solid #29465d;border-radius:11px;color:#e8f5ff;padding:13px;text-align:left;cursor:pointer}.quick-actions button:hover,.token-package:hover{border-color:var(--personal-accent)}.quick-actions b,.quick-actions span{display:block}.quick-actions span{font-size:10px;color:#8da6ba;margin-top:4px}.list-clean{list-style:none;padding:0;margin:0}.list-clean li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #183047;font-size:11px}.license-badge{display:inline-block;padding:5px 8px;border-radius:99px;background:color-mix(in srgb,var(--personal-accent) 17%,transparent);color:var(--personal-accent);font:9px monospace}.token-packages{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.token-package{text-align:center}.token-package b,.token-package span,.token-package small{display:block}.token-package b{font-size:18px}.token-package span{color:var(--personal-accent);margin:7px 0}.token-package small{color:#7892a8}.personal-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.personal-form label{font-size:11px;color:#a8bed0}.personal-form input,.personal-form select{width:100%;box-sizing:border-box;margin-top:6px;background:#0a1724;border:1px solid #28435a;border-radius:9px;color:#fff;padding:11px}.personal-form .full{grid-column:1/-1}.personal-save{background:var(--personal-accent);color:#03121a;border:0;text-align:center;font-weight:800}.theme-options{display:flex;gap:8px;flex-wrap:wrap}.theme-swatch{width:42px;height:42px!important;border-radius:12px!important;padding:0!important;background:var(--swatch)!important}.notice-safe{padding:12px;border-radius:10px;background:#0b2630;color:#91dce3;font-size:10px;margin-top:12px}.personal-hidden{display:none!important}
body.personal-calm .personal-shell{--personal-bg:linear-gradient(145deg,#132b2b,#091817)}body.personal-light .personal-shell{--personal-bg:linear-gradient(145deg,#213044,#111b28)}
@media(max-width:900px){.personal-kpis{grid-template-columns:repeat(2,1fr)}.personal-grid{grid-template-columns:1fr}.token-packages{grid-template-columns:1fr}.personal-hero{align-items:flex-start}.usage-layout{flex-wrap:wrap}}
@media(max-width:560px){.personal-content{padding:0 14px 16px}.personal-hero{padding:18px;flex-direction:column}.personal-kpis{grid-template-columns:1fr 1fr}.personal-form{grid-template-columns:1fr}.personal-form .full{grid-column:auto}.quick-actions{grid-template-columns:1fr}.personal-avatar{width:52px;height:52px}.personal-identity h2{font-size:21px}}