.dashboard-demo-section{padding:1.5rem 0 6rem;background:#eef2f7}.dashboard-demo-notice{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem;padding:.85rem 1rem;border-radius:14px;background:#fff8e8;border:1px solid #ead8aa;color:#7c612e}.dashboard-demo-notice strong{white-space:nowrap}
.cos-app-shell{display:grid;grid-template-columns:78px 1fr;min-height:920px;border:1px solid rgba(17,24,39,.10);border-radius:28px;overflow:hidden;background:#f8fafc;box-shadow:0 35px 90px rgba(17,24,39,.18)}
.cos-app-sidebar{display:flex;flex-direction:column;align-items:center;padding:1rem .65rem;background:var(--cos-color-midnight);color:#fff}.cos-app-sidebar__brand{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--cos-color-accent);font-weight:900}.cos-app-sidebar nav{display:grid;gap:.65rem;margin-top:2rem}.cos-app-sidebar nav button{position:relative;width:48px;height:48px;border:0;border-radius:14px;background:transparent;color:#94a3b8;cursor:pointer}.cos-app-sidebar nav button span{font-size:1.1rem}.cos-app-sidebar nav button em{position:absolute;left:58px;top:50%;transform:translateY(-50%);padding:.35rem .55rem;border-radius:8px;background:var(--cos-color-midnight);color:#fff;font-style:normal;font-size:.7rem;opacity:0;pointer-events:none;white-space:nowrap}.cos-app-sidebar nav button:hover em{opacity:1}.cos-app-sidebar nav button.is-active{background:var(--cos-color-accent);color:var(--cos-color-midnight)}.cos-app-sidebar__footer{margin-top:auto}.cos-app-sidebar__footer span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--cos-color-midnight);font-weight:900}
.cos-app-main{min-width:0}.cos-app-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.4rem;background:#fff;border-bottom:1px solid var(--cos-color-border)}.cos-app-header small,.cos-app-header h1{display:block}.cos-app-header small{color:var(--cos-color-muted)}.cos-app-header h1{font-size:1.35rem}.cos-app-header__actions{display:flex;align-items:center;gap:.6rem}.cos-app-header__actions>button{position:relative;width:38px;height:38px;border:1px solid var(--cos-color-border);border-radius:11px;background:#fff;cursor:pointer}.cos-app-header__actions>button i{position:absolute;right:-3px;top:-4px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:var(--cos-color-danger);color:#fff;font-size:.58rem;font-style:normal}.cos-app-user{display:flex;align-items:center;gap:.6rem;margin-left:.5rem}.cos-app-user>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--cos-color-midnight);color:var(--cos-color-accent);font-weight:900}.cos-app-user strong,.cos-app-user small{display:block}.cos-app-user small{color:var(--cos-color-muted)}
.cos-app-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid var(--cos-color-border);background:#fff}.cos-app-toolbar__date strong,.cos-app-toolbar__date span{display:block}.cos-app-toolbar__date span{color:var(--cos-color-muted);font-size:.75rem}.cos-app-toolbar__actions{display:flex;gap:.55rem}.cos-app-toolbar__actions button{padding:.65rem .8rem;border:1px solid var(--cos-color-border);border-radius:11px;background:#fff;cursor:pointer;font-weight:800}.cos-app-toolbar__actions button.is-primary{background:var(--cos-color-midnight);color:#fff;border-color:var(--cos-color-midnight)}
.cos-app-content{padding:1.15rem}.dashboard-demo-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:1rem}.dashboard-demo-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.cos-metric-tile{padding:1rem;border:1px solid var(--cos-color-border);border-radius:16px;background:#fff;text-align:left;cursor:pointer;box-shadow:0 6px 18px rgba(17,24,39,.04);transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease)}.cos-metric-tile:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(17,24,39,.10)}.cos-metric-tile__top,.cos-metric-tile__bottom{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.cos-metric-tile__top span{color:var(--cos-color-muted);font-size:.7rem}.cos-metric-tile__top i{font-style:normal}.cos-metric-tile>strong{display:block;margin-top:.45rem;font-size:1.55rem;letter-spacing:-.04em}.cos-metric-tile__bottom{margin-top:.8rem}.cos-metric-tile__bottom span{font-size:.68rem}.cos-metric-tile__bottom svg{width:82px;height:34px;color:var(--cos-color-accent-dark)}.trend-up{color:#047857}.trend-neutral{color:var(--cos-color-muted)}
.dashboard-demo-card{border:1px solid var(--cos-color-border);border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(17,24,39,.04)}.dashboard-demo-card__header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--cos-color-border)}.dashboard-demo-card__header small,.dashboard-demo-card__header h2{display:block}.dashboard-demo-card__header small{color:var(--cos-color-muted)}.dashboard-demo-card__header h2{font-size:1rem}.dashboard-demo-revenue{min-height:390px}.dashboard-range{display:flex;gap:.3rem;padding:.25rem;border-radius:10px;background:#f3f4f6}.dashboard-range button{padding:.4rem .55rem;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:.66rem}.dashboard-range button.is-active{background:#fff;box-shadow:var(--cos-shadow-sm)}.dashboard-revenue-summary{padding:1rem 1rem 0}.dashboard-revenue-summary strong,.dashboard-revenue-summary span{display:block}.dashboard-revenue-summary strong{font-size:1.55rem}.dashboard-revenue-summary span{color:var(--cos-color-muted);font-size:.7rem}.dashboard-chart{position:relative;height:260px;padding:1rem}.dashboard-chart__grid{position:absolute;inset:1rem;background:repeating-linear-gradient(to bottom,transparent 0,transparent 49px,#eef2f7 50px)}.dashboard-chart svg{position:relative;width:100%;height:210px}.dashboard-chart__labels{display:flex;justify-content:space-between;color:var(--cos-color-muted);font-size:.62rem}
.dashboard-ai-badge{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--cos-color-midnight);color:var(--cos-color-accent);font-weight:900}.dashboard-ai-list{display:grid;gap:.65rem;padding:1rem}.dashboard-ai-list button{display:flex;gap:.7rem;padding:.75rem;border:1px solid var(--cos-color-border);border-radius:13px;background:#f8fafc;text-align:left;cursor:pointer}.dashboard-ai-list button>span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(200,169,106,.2);font-size:.68rem;font-weight:900}.dashboard-ai-list strong,.dashboard-ai-list small{display:block}.dashboard-ai-list small{color:var(--cos-color-muted);font-size:.66rem}.dashboard-ai-response{margin:0 1rem 1rem;padding:.9rem;border-radius:13px;background:var(--cos-color-midnight);color:#fff}.dashboard-ai-response p{margin-top:.35rem;color:#cbd5e1;font-size:.72rem}
.dashboard-health-status{padding:.3rem .55rem;border-radius:999px;background:#ecfdf5;color:#047857;font-size:.66rem;font-weight:850}.dashboard-health-score{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:center;padding:1rem}.dashboard-health-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--cos-color-accent) calc(var(--score)*1%),#eef2f7 0);position:relative}.dashboard-health-ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}.dashboard-health-ring strong,.dashboard-health-ring span{position:relative;z-index:1}.dashboard-health-ring strong{font-size:2rem}.dashboard-health-ring span{color:var(--cos-color-muted);font-size:.7rem}.dashboard-health-bars{display:grid;gap:.65rem}.dashboard-health-bars>div{display:grid;grid-template-columns:70px 1fr 28px;gap:.5rem;align-items:center;font-size:.68rem}.dashboard-health-bars i{height:7px;border-radius:999px;background:#eef2f7;overflow:hidden}.dashboard-health-bars b{display:block;height:100%;border-radius:inherit;background:var(--cos-color-accent)}
.dashboard-demo-activity{grid-column:1/-1}.dashboard-demo-card__header>button{border:0;background:none;color:var(--cos-color-muted);cursor:pointer}.dashboard-activity-feed{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;padding:1rem}.dashboard-activity-feed article{display:flex;gap:.7rem;padding:.75rem;border-radius:13px;background:#f8fafc}.dashboard-activity-feed article>span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:900}.activity-green{background:#ecfdf5;color:#047857}.activity-blue{background:#eff6ff;color:#1d4ed8}.activity-gold{background:#fff8e8;color:#92400e}.activity-slate{background:#f1f5f9;color:#475569}.dashboard-activity-feed strong,.dashboard-activity-feed small{display:block}.dashboard-activity-feed small{color:var(--cos-color-muted);font-size:.66rem}
.dashboard-metric-drawer{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);z-index:1200;background:#fff;box-shadow:-20px 0 60px rgba(17,24,39,.22);padding:1.2rem}.dashboard-metric-drawer[hidden],.dashboard-drawer-backdrop[hidden]{display:none}.dashboard-drawer-backdrop{position:fixed;inset:0;z-index:1190;background:rgba(17,24,39,.45)}.dashboard-metric-drawer__header{display:flex;justify-content:space-between;gap:1rem}.dashboard-metric-drawer__header button{width:38px;height:38px;border:1px solid var(--cos-color-border);border-radius:11px;background:#fff;cursor:pointer}.dashboard-drawer-value{margin-top:2rem;font-size:2.6rem;font-weight:900}.dashboard-metric-drawer__body>p{margin-top:.5rem;color:var(--cos-color-muted)}.dashboard-drawer-breakdown{display:grid;gap:.7rem;margin-top:1.5rem}.dashboard-drawer-breakdown>div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem;border-radius:12px;background:#f8fafc}
.dashboard-action-modal,.dashboard-tour{position:fixed;inset:0;z-index:1300}.dashboard-action-modal[hidden],.dashboard-tour[hidden]{display:none}.dashboard-action-modal__backdrop{position:absolute;inset:0;background:rgba(17,24,39,.55)}.dashboard-action-modal__dialog{position:relative;width:min(520px,92vw);margin:10vh auto 0;padding:1.3rem;border-radius:22px;background:#fff;box-shadow:0 35px 90px rgba(0,0,0,.28)}.dashboard-action-modal__close{position:absolute;right:1rem;top:1rem;width:36px;height:36px;border:1px solid var(--cos-color-border);border-radius:10px;background:#fff}.dashboard-action-modal__dialog>p{margin-top:.7rem;color:var(--cos-color-muted)}.dashboard-action-preview{min-height:160px;margin:1rem 0;padding:1rem;border-radius:15px;background:#f8fafc}.dashboard-action-preview label{display:block;margin-top:.7rem;font-size:.72rem;font-weight:800}.dashboard-action-preview input,.dashboard-action-preview select{width:100%;margin-top:.35rem;padding:.65rem;border:1px solid var(--cos-color-border);border-radius:10px}
.dashboard-tour__spotlight{position:absolute;border:3px solid var(--cos-color-accent);border-radius:18px;box-shadow:0 0 0 9999px rgba(17,24,39,.72);transition:all .3s ease}.dashboard-tour__card{position:absolute;width:min(360px,90vw);padding:1.1rem;border-radius:18px;background:#fff;box-shadow:0 25px 65px rgba(0,0,0,.28)}.dashboard-tour__card>span{font-size:.68rem;color:var(--cos-color-accent-dark);font-weight:850}.dashboard-tour__card h2{margin-top:.35rem;font-size:1.2rem}.dashboard-tour__card p{margin-top:.55rem;color:var(--cos-color-muted)}.dashboard-tour__actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.dashboard-tour__actions button{padding:.55rem .75rem;border:1px solid var(--cos-color-border);border-radius:10px;background:#fff}.dashboard-tour__actions button.is-primary{background:var(--cos-color-midnight);color:#fff}.dashboard-tour-launch{position:fixed;right:1.2rem;bottom:1.2rem;z-index:1100;padding:.75rem 1rem;border:0;border-radius:999px;background:var(--cos-color-accent);color:var(--cos-color-midnight);font-weight:900;box-shadow:var(--cos-shadow-lg)}
@media(max-width:1050px){.dashboard-demo-grid{grid-template-columns:1fr}.dashboard-demo-kpis{grid-template-columns:repeat(2,1fr)}.dashboard-demo-activity{grid-column:auto}.dashboard-activity-feed{grid-template-columns:1fr}}
@media(max-width:760px){.cos-app-shell{grid-template-columns:1fr;border-radius:20px}.cos-app-sidebar{display:none}.cos-app-header,.cos-app-toolbar{align-items:flex-start;flex-direction:column}.cos-app-header__actions{width:100%;justify-content:flex-end}.cos-app-toolbar__actions{width:100%;overflow-x:auto}.dashboard-demo-kpis{grid-template-columns:1fr 1fr}.dashboard-health-score{grid-template-columns:1fr}.dashboard-health-ring{margin-inline:auto}.dashboard-tour-launch{right:.7rem;bottom:.7rem}}
@media(max-width:480px){.dashboard-demo-kpis{grid-template-columns:1fr}.cos-app-user>div{display:none}.dashboard-range{overflow-x:auto}.dashboard-chart{height:220px}.dashboard-chart svg{height:170px}}