@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#f6f8fc;--surface:#fff;--text:#172033;--muted:#687386;--line:#e8ecf3;--primary:#4f46e5;--primary2:#6366f1;--shadow:0 12px 35px rgba(28,39,70,.08);--sidebar:260px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.app{display:flex;min-height:100vh}.sidebar{width:var(--sidebar);background:#10172a;color:#c9d0df;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:24px 16px;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:4px 9px 30px;color:#fff}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;font-weight:800}.brand strong,.brand span{display:block}.brand strong{font-size:16px}.brand span{font-size:9px;color:#8f9ab0;margin-top:3px}.nav{display:grid;gap:6px}.nav-link{border:0;background:transparent;color:#aeb8cb;text-decoration:none;padding:12px 13px;border-radius:11px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left}.nav-link:hover,.nav-link.active{background:#1d2741;color:#fff}.nav-link.active{box-shadow:inset 3px 0 #818cf8}.sidebar-card{margin:28px 6px;padding:14px;border:1px solid #27324d;border-radius:14px;background:#151e34}.mini-label{font-size:9px;color:#758199;display:block;margin-bottom:9px}.status{font-size:11px;color:#dce3ef}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;margin-right:6px}.sidebar-card small{display:block;color:#758199;margin-top:7px;font-size:9px}.sidebar-bottom{margin-top:auto}.main{margin-left:var(--sidebar);width:calc(100% - var(--sidebar))}.topbar{height:72px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:10}.breadcrumb{display:flex;gap:10px;font-size:13px;color:var(--muted)}.breadcrumb strong{color:var(--text)}.top-actions{display:flex;align-items:center;gap:12px}.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);width:38px;height:38px;border-radius:10px;cursor:pointer}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e0e7ff;color:#4338ca;font-size:11px;font-weight:800}.mobile-only{display:none}.content{padding:34px;max-width:1500px;margin:auto}.view{display:none}.view.active{display:block}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;padding:38px;border-radius:24px;background:linear-gradient(135deg,#111a31,#27346a);color:#fff;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:#6366f1;opacity:.16;right:-130px;top:-160px}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#6366f1}.hero .eyebrow{color:#a5b4fc}.hero h1{font-size:39px;line-height:1.12;margin:11px 0 14px;max-width:650px}.hero h1 span{color:#a5b4fc}.hero p{color:#c6cede;line-height:1.7;max-width:620px;font-size:14px}.hero-actions{display:flex;gap:10px;margin-top:23px}.btn{border:0;padding:11px 16px;border-radius:10px;cursor:pointer;font-weight:700;font-size:12px}.btn.primary{background:#fff;color:#3730a3}.btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16)}.hero-preview{background:#f8fafc;border:7px solid rgba(255,255,255,.13);border-radius:15px;box-shadow:0 25px 50px rgba(0,0,0,.25);overflow:hidden}.window-bar{height:30px;background:#e8ebf2;color:#768097;font-size:8px;display:flex;align-items:center;gap:5px;padding:0 9px}.window-bar i{width:6px;height:6px;border-radius:50%;background:#b8c0cf}.window-bar span{margin-left:7px}.preview-body{display:flex;height:230px}.preview-side{width:20%;background:#151d33}.preview-main{padding:15px;width:80%}.preview-cards{display:flex;gap:7px}.preview-cards b{height:45px;flex:1;border-radius:6px;background:#e2e7f0}.preview-chart{height:88px;margin-top:10px;border-radius:7px;background:#e8ecf4;display:flex;align-items:end;gap:8px;padding:10px}.preview-chart span{flex:1;background:#818cf8;border-radius:4px 4px 0 0}.preview-chart span:nth-child(1){height:35%}.preview-chart span:nth-child(2){height:52%}.preview-chart span:nth-child(3){height:42%}.preview-chart span:nth-child(4){height:75%}.preview-chart span:nth-child(5){height:62%}.preview-chart span:nth-child(6){height:88%}.preview-table{margin-top:9px;display:grid;gap:5px}.preview-table i{height:7px;background:#e5e9f0;border-radius:3px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:34px 2px 16px}.section-head h2,.page-intro h1{margin:6px 0 0}.section-head h2{font-size:20px}.text-btn{border:0;background:none;color:var(--primary);font-weight:700;cursor:pointer;font-size:12px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-card,.panel,.doc-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.stat-card{padding:19px;display:flex;align-items:center;gap:13px}.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800}.stat-icon.blue{background:#e0e7ff;color:#4f46e5}.stat-icon.green{background:#dcfce7;color:#16a34a}.stat-icon.purple{background:#f3e8ff;color:#9333ea}.stat-icon.orange{background:#ffedd5;color:#ea580c}.stat-card small,.stat-card em{display:block;color:var(--muted);font-size:10px;font-style:normal}.stat-card strong{font-size:24px;display:block;margin:2px 0}.stat-card em{color:#16a34a}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.project-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:.2s;box-shadow:var(--shadow)}.project-card:hover{transform:translateY(-4px);border-color:#c7d2fe}.project-thumb{height:155px;background:linear-gradient(135deg,#172554,#4f46e5);padding:15px;position:relative;overflow:hidden}.project-thumb:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-40px;top:-60px;background:#a5b4fc33}.mini-dashboard{background:#fff;border-radius:8px;height:100%;padding:10px;position:relative;z-index:1;box-shadow:0 8px 20px #0002}.mini-dashboard .mini-head{height:8px;background:#dbe2ef;width:45%;border-radius:3px}.mini-dashboard .mini-body{display:grid;grid-template-columns:22% 1fr;gap:7px;height:82%;margin-top:8px}.mini-dashboard .mini-menu{background:#edf0f5;border-radius:4px}.mini-dashboard .mini-content{display:grid;grid-template-rows:30% 1fr;gap:6px}.mini-dashboard .mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mini-dashboard i{background:#eef1f6;border-radius:4px}.project-info{padding:16px}.project-info .tag{font-size:9px;color:#4f46e5;font-weight:800;background:#eef2ff;padding:5px 7px;border-radius:6px}.project-info h3{font-size:15px;margin:11px 0 7px}.project-info p{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 12px}.project-meta{display:flex;justify-content:space-between;color:#8791a3;font-size:9px}.page-intro{margin:4px 0 26px}.page-intro h1{font-size:30px}.page-intro p{color:var(--muted);font-size:13px}.filters{display:flex;gap:10px;margin-bottom:18px}.filters input,.filters select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:11px 13px;outline:0}.filters input{flex:1}.chart-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}.panel{padding:20px}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel-head h3{font-size:14px;margin:0}.panel-head span{font-size:10px;color:var(--muted)}.bars{height:260px;display:flex;align-items:end;justify-content:space-around;gap:18px;padding:25px 15px 5px;background:repeating-linear-gradient(to top,transparent 0 50px,#eef1f6 51px)}.bars div{height:var(--h);width:16%;background:linear-gradient(#6366f1,#4f46e5);border-radius:8px 8px 3px 3px;position:relative}.bars b{position:absolute;bottom:-22px;font-size:9px;color:var(--muted);width:100%;text-align:center}.donut-wrap{display:flex;align-items:center;gap:25px;min-height:260px}.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(#4f46e5 0 42%,#8b5cf6 42% 67%,#f59e0b 67% 84%,#10b981 84%);display:grid;place-items:center}.donut:after{content:"";position:absolute;width:105px;height:105px;background:var(--surface);border-radius:50%}.donut span{z-index:1;text-align:center;font-weight:800}.donut small{font-size:9px;color:var(--muted);font-weight:400}.legend{list-style:none;padding:0;margin:0;display:grid;gap:14px;width:100%;font-size:10px;color:var(--muted)}.legend li{display:flex;align-items:center;gap:7px}.legend i{width:8px;height:8px;border-radius:50%;background:#4f46e5}.legend b{margin-left:auto;color:var(--text)}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.gallery-item{background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;cursor:pointer}.gallery-item img{width:100%;height:190px;object-fit:cover;display:block}.gallery-item div{padding:13px}.gallery-item b{font-size:12px}.gallery-item small{display:block;color:var(--muted);margin-top:5px}.docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.doc-card{padding:22px}.doc-card>b{color:#6366f1;font-size:12px}.doc-card h3{font-size:14px}.doc-card p{font-size:11px;color:var(--muted);line-height:1.7}.timeline{margin-top:18px}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}.steps div{padding:16px;background:#f7f8fc;border-radius:10px}.steps b{color:#6366f1;display:block;font-size:10px}.steps span{font-size:10px;display:block;margin-top:8px}.modal,.lightbox{position:fixed;inset:0;background:#0b1020aa;backdrop-filter:blur(7px);display:none;place-items:center;padding:20px;z-index:50}.modal.show,.lightbox.show{display:grid}.modal-box{background:var(--surface);color:var(--text);width:min(900px,100%);max-height:90vh;overflow:auto;border-radius:20px;position:relative;padding:25px}.modal-close,.lightbox button{position:absolute;right:15px;top:12px;border:0;background:#eef1f6;color:#334155;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;z-index:2}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.detail-title h2{font-size:26px;margin:7px 0}.detail-title p{color:var(--muted);line-height:1.7;font-size:12px}.detail-cover{height:250px;border-radius:14px;background:linear-gradient(135deg,#111827,#4f46e5);padding:15px}.detail-cover .mini-dashboard{height:100%}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0;list-style:none;font-size:11px}.feature-list li:before{content:"✓";color:#16a34a;font-weight:800;margin-right:7px}.techs{display:flex;flex-wrap:wrap;gap:7px}.techs span{padding:6px 8px;background:#eef2ff;color:#4338ca;border-radius:7px;font-size:9px;font-weight:700}.lightbox img{max-width:92vw;max-height:85vh;border-radius:12px}.lightbox #lightboxClose{background:#fff;position:fixed}.dark{--bg:#0b1020;--surface:#121a2d;--text:#e7ebf4;--muted:#96a0b4;--line:#24304a;--shadow:0 12px 35px rgba(0,0,0,.2)}.dark .topbar{background:#0f172acc}.dark .avatar{background:#272b50;color:#c7d2fe}.dark .preview-body{background:#fff}.dark .filters input,.dark .filters select{color:var(--text)}.dark .bars{background:repeating-linear-gradient(to top,transparent 0 50px,#202a41 51px)}.dark .steps div{background:#0e1629}.dark .modal-close,.dark .lightbox button{background:#263149;color:#fff}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.project-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}.docs-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-preview{max-width:650px}.chart-grid{grid-template-columns:1fr}}
@media(max-width:760px){:root{--sidebar:250px}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.topbar{padding:0 16px}.mobile-only{display:block}.content{padding:20px 15px}.hero{padding:25px 20px}.hero h1{font-size:29px}.project-grid,.gallery-grid,.docs-grid,.stats-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.donut-wrap{flex-direction:column}.top-actions .icon-btn{display:none}}
@media(max-width:430px){.hero-actions{flex-direction:column}.filters{flex-direction:column}.page-intro h1{font-size:25px}}