@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root { --ink:#f6f4ff; --muted:#a9a5bd; --line:#292541; --paper:#17142a; --canvas:#0d0b19; --purple:#7c5cff; --purple-deep:#5e3cf0; --blue:#42c5ff; --radius:18px; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 77% -10%,#2a1e5966,transparent 34%),radial-gradient(circle at 10% 80%,#142f5a47,transparent 30%),var(--canvas); color:var(--ink); font-family:Vazirmatn, Tahoma, sans-serif; } button,a { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.app-shell { min-height:100vh; display:flex; } .sidebar { width:255px; flex:none; border-left:1px solid #28233e; background:#111022cc; backdrop-filter:blur(14px); color:#e8e5fa; padding:28px 18px; } .sidebar-inner { height:calc(100vh - 56px); display:flex; flex-direction:column; } .mobile-brand { display:none; } nav { display:grid; gap:8px; margin-top:65px; } .nav-link { color:#8f8ba7; padding:12px 14px; border-radius:11px; font-size:14px; transition:.2s; } .nav-link span { display:inline-grid; margin-left:12px; width:18px; text-align:center; } .nav-link.active,.nav-link:hover { color:#fff; background:linear-gradient(90deg,#7c5cff2b,#4d8fff12); box-shadow:inset -3px 0 var(--purple); } .support { margin-top:auto; border:1px solid #312b51; border-radius:15px; background:linear-gradient(135deg,#1e1938,#151229); padding:16px; font-size:12px; color:#aaa5c4; } .support strong { color:white; display:block; } .support p { line-height:1.8; margin:7px 0; } .support a { color:#9f8dff; }
.content { width:min(1190px, calc(100% - 255px)); margin:0 auto; padding:0 42px 50px; } .topbar { height:90px; display:flex; align-items:center; justify-content:space-between; } .header-start { display:flex; align-items:center; gap:13px; }.brand { display:flex; align-items:center; gap:9px; color:#fff; font-size:20px; font-weight:800; } .brand-mark { display:inline-grid; place-items:center; width:35px; height:35px; border-radius:11px; background:linear-gradient(135deg,#957cff,#5b38e8); color:#fff; box-shadow:0 7px 18px #6040d66e; }.menu-toggle { display:none; border:1px solid #302b48; width:38px; height:36px; padding:8px; border-radius:10px; background:#17142a; }.menu-toggle i { display:block; height:2px; margin:4px 0; background:#ded9ff; border-radius:3px; }.nav-overlay { display:none; }.top-actions { display:flex; align-items:center; gap:15px; }.icon-button { border:1px solid #2b2741; border-radius:10px; width:35px;height:35px; background:#17142a; color:#bdb7da; font-size:18px; position:relative; }.icon-button b { position:absolute; right:5px; top:4px; width:7px; height:7px; border:2px solid var(--paper); background:#ff5e87; border-radius:50%; }.profile { border:0; background:transparent; display:flex; gap:8px; align-items:center; color:#d9d5ec; font-size:13px; }.profile span { width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#4b92ff,#795df4);color:#fff;font-weight:700; }.profile em { font-style:normal; }
.hero { position:relative; overflow:hidden; background:linear-gradient(112deg,#21194b,#42248f 58%,#253f90); border:1px solid #57439d; border-radius:22px; color:#fff; padding:31px 34px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 18px 40px #00000035; }.hero:after { content:''; width:220px;height:220px; position:absolute; left:-65px; top:-120px; border-radius:50%; background:#5bc5ff2f; filter:blur(2px); }.hero>* { position:relative; z-index:1; }.hero h1 { margin:4px 0; font-size:26px; }.hero p:not(.eyebrow) { margin:0; color:#d4cff0; font-size:14px; }.eyebrow { margin:0; color:#918cac; font-size:12px; font-weight:700; }.hero .eyebrow { color:#b8adff; }.button { border:1px solid transparent; border-radius:10px; padding:10px 15px; font-weight:700; font-size:12px; background:linear-gradient(135deg,#8566ff,#6745ef); color:#fff; box-shadow:0 8px 16px #4c2ec04d; transition:.2s; }.button:hover { background:#9278ff; transform:translateY(-1px); }.button-light { color:#ece9ff; background:#ffffff16; border-color:#ffffff38; box-shadow:none; }
.sidebar { background:#1d1934f7; border-left-color:#403763; }
.topbar { flex-direction:row-reverse; }