:root{--navy:#020b18;--navy2:#051428;--navy3:#071d35;--blue1:#0a2447;--blue2:#0d3b6e;--blue3:#1565c0;--blue4:#1e88e5;--cyan:#00d4ff;--cyan2:#00a8cc;--white:#fff;--white2:#e8f4fd;--white3:#b8d4e8;--gray:#8ba8c0;--border:#00d4ff2e;--border2:#00d4ff14;--glow:0 0 20px #00d4ff40;--glow2:0 0 40px #00d4ff26;--sidebar-w:240px;--font-head:"Poppins", sans-serif;--font-body:"Poppins", sans-serif;--font-mono:"Share Tech Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--navy);color:var(--white);min-height:100vh;overflow-x:hidden}body:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(80% 50% at 50% -20%,#1565c059 0%,#0000 70%),radial-gradient(40% 40% at 90% 80%,#00d4ff14 0%,#0000 60%),radial-gradient(30% 30% at 10% 60%,#0d3b6e4d 0%,#0000 60%);position:fixed;inset:0}body:after{content:"";z-index:0;pointer-events:none;background-image:linear-gradient(#00d4ff08 1px,#0000 1px),linear-gradient(90deg,#00d4ff08 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0}#login-screen{z-index:100;background:var(--navy);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#login-screen:before{content:"";background:radial-gradient(70% 60% at 50% 40%,#1565c066 0%,#0000 70%);position:absolute;inset:0}.login-card{z-index:1;border:1px solid var(--border);text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#051428e6;border-radius:20px;width:100%;max-width:420px;padding:50px 44px;animation:.6s forwards fadeUp;position:relative;box-shadow:0 0 60px #00d4ff1a,inset 0 1px #ffffff0d}.login-logo{margin-bottom:8px}.login-logo-icon{background:linear-gradient(135deg, var(--blue3), var(--cyan));border-radius:16px;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;font-size:28px;display:flex;box-shadow:0 0 30px #00d4ff66}.login-brand{font-family:var(--font-head);color:var(--white);letter-spacing:2px;font-size:22px;font-weight:700;line-height:1.2}.login-brand span{color:var(--cyan)}.login-tagline{color:var(--gray);letter-spacing:1px;font-size:13px;font-family:var(--font-mono);margin-top:6px}.login-divider{background:linear-gradient(90deg, transparent, var(--border), transparent);height:1px;margin:28px 0}.login-subtitle{color:var(--gray);letter-spacing:.5px;margin-bottom:24px;font-size:13px}.btn-connect{background:linear-gradient(135deg, var(--blue3) 0%, var(--cyan2) 100%);width:100%;color:var(--white);font-family:var(--font-head);letter-spacing:2px;cursor:pointer;border:none;border-radius:12px;padding:15px 24px;font-size:13px;font-weight:700;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 4px 24px #00d4ff4d}.btn-connect:after{content:"";opacity:0;background:linear-gradient(135deg,#ffffff1a,#0000);transition:opacity .3s;position:absolute;inset:0}.btn-connect:hover{transform:translateY(-2px);box-shadow:0 8px 32px #00d4ff66}.btn-connect:hover:after{opacity:1}.btn-connect i{margin-right:8px;font-size:16px}.login-note{color:var(--gray);margin-top:18px;font-size:12px;line-height:1.6}.login-dots{justify-content:center;gap:6px;margin-top:24px;display:flex}.login-dot{background:var(--blue2);border-radius:50%;width:6px;height:6px}.login-dot.active{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}#app{z-index:1;min-height:100vh;display:none;position:relative}#app.visible{animation:.5s fadeIn;display:flex}.sidebar{width:var(--sidebar-w);border-right:1px solid var(--border);z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#020b18f2;flex-direction:column;min-height:100vh;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-brand{border-bottom:1px solid var(--border2);padding:24px 20px 20px}.brand-row{align-items:center;gap:12px;display:flex}.brand-icon{background:linear-gradient(135deg, var(--blue3), var(--cyan));border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex;box-shadow:0 0 20px #00d4ff4d}.brand-text{flex:1;min-width:0}.brand-name{font-family:var(--font-head);color:var(--white);letter-spacing:1.5px;font-size:11px;font-weight:700;line-height:1.2}.brand-name span{color:var(--cyan)}.brand-sub{color:var(--gray);letter-spacing:.5px;font-size:10px;font-family:var(--font-mono)}.sidebar-user{border-bottom:1px solid var(--border2);align-items:center;gap:10px;padding:14px 20px;display:flex}.user-avatar{background:linear-gradient(135deg, var(--blue2), var(--blue3));border:2px solid var(--cyan);width:34px;height:34px;font-family:var(--font-head);color:var(--cyan);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.user-info{min-width:0}.user-addr{color:var(--white2);font-size:11px;font-family:var(--font-mono);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.user-status{color:var(--cyan);align-items:center;gap:4px;font-size:10px;display:flex}.status-dot{background:#0f8;border-radius:50%;width:5px;height:5px;animation:2s infinite pulse;box-shadow:0 0 6px #0f8}.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}.nav-section-label{color:var(--gray);letter-spacing:2px;font-size:9px;font-family:var(--font-mono);padding:12px 20px 6px}.nav-item{cursor:pointer;color:var(--gray);-webkit-user-select:none;user-select:none;border-left:2px solid #0000;align-items:center;gap:10px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s;display:flex;position:relative}.nav-item i{flex-shrink:0;font-size:17px;transition:color .2s}.nav-item:hover{color:var(--white2);background:#00d4ff0a}.nav-item.active{color:var(--cyan);border-left-color:var(--cyan);background:#00d4ff14}.nav-item.active i{color:var(--cyan)}.nav-item.active:before{content:"";background:var(--cyan);opacity:.5;border-radius:2px;width:3px;height:60%;position:absolute;top:50%;right:0;transform:translateY(-50%)}.nav-submenu{border-left:1px solid var(--border2);background:#00d4ff08;margin-left:20px;display:none}.nav-submenu.open{display:block}.nav-submenu-item{cursor:pointer;color:var(--gray);border-left:1px solid #0000;align-items:center;gap:8px;padding:8px 16px 8px 20px;font-size:13px;transition:all .2s;display:flex}.nav-submenu-item i{font-size:13px}.nav-submenu-item:hover{color:var(--cyan);border-left-color:#00d4ff66}.nav-submenu-item.active{color:var(--cyan)}.nav-item .chevron{margin-left:auto;font-size:13px;transition:transform .2s}.nav-item.open .chevron{transform:rotate(90deg)}.sidebar-footer{border-top:1px solid var(--border2);padding:12px 0}.main{margin-left:var(--sidebar-w);flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border);z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#020b18cc;align-items:center;gap:16px;height:60px;padding:0 28px;display:flex;position:sticky;top:0}.topbar-title{font-family:var(--font-head);color:var(--white);letter-spacing:1px;flex:1;font-size:14px;font-weight:700}.topbar-title span{color:var(--cyan)}.topbar-right{align-items:center;gap:12px;display:flex}.topbar-badge{border:1px solid var(--border);color:var(--white2);font-size:12px;font-family:var(--font-mono);background:#00d4ff14;border-radius:20px;align-items:center;gap:6px;padding:5px 12px;display:flex}.topbar-badge i{color:var(--cyan);font-size:13px}.content{flex:1;min-width:0;padding:28px}.page{animation:.3s fadeIn;display:none}.page.active{display:block}.page-header{margin-bottom:24px}.page-title{font-family:var(--font-head);color:var(--white);letter-spacing:1px;align-items:center;gap:10px;font-size:20px;font-weight:700;display:flex}.page-title i{color:var(--cyan);font-size:22px}.page-subtitle{color:var(--gray);letter-spacing:.3px;margin-top:4px;font-size:13px}.dash-grid{grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:28px;display:grid}.dash-box{border:1px solid var(--border);cursor:default;background:#051428d9;border-radius:14px;padding:18px 16px;transition:all .3s;position:relative;overflow:hidden}.dash-box:before{content:"";background:linear-gradient(90deg, var(--blue3), var(--cyan));opacity:0;height:2px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.dash-box:hover{box-shadow:var(--glow);border-color:#00d4ff66;transform:translateY(-2px)}.dash-box:hover:before{opacity:1}.dash-box-icon{border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;margin-bottom:12px;font-size:17px;display:flex}.db-blue{color:var(--blue4);background:#1565c040}.db-cyan{color:var(--cyan);background:#00d4ff26}.db-teal{color:#00c878;background:#00c87826}.db-gold{color:#ffc107;background:#ffc1071f}.db-white{color:var(--white2);background:#ffffff14}.dash-box-label{color:var(--gray);letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px;font-size:11px}.dash-box-value{font-family:var(--font-head);color:var(--white);font-size:18px;font-weight:700;line-height:1}.dash-box-value span{color:var(--cyan);font-size:11px}.dash-box-sub{color:var(--gray);margin-top:5px;font-size:11px}.dash-box-badge{font-size:9px;font-family:var(--font-mono);letter-spacing:.5px;border-radius:8px;padding:2px 7px;font-weight:700;position:absolute;top:12px;right:12px}.badge-green{color:#00c878;background:#00c87826;border:1px solid #00c8784d}.badge-blue{color:var(--cyan);border:1px solid var(--border);background:#00d4ff1f}.badge-gold{color:#ffc107;background:#ffc1071f;border:1px solid #ffc1074d}.card{border:1px solid var(--border);background:#051428d9;border-radius:14px;margin-bottom:20px;padding:22px 24px;overflow-x:auto}.card-title{font-family:var(--font-head);color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase;align-items:center;gap:8px;margin-bottom:18px;font-size:12px;font-weight:700;display:flex}.card-title:after{content:"";background:linear-gradient(90deg, var(--border), transparent);flex:1;height:1px}.data-table{border-collapse:collapse;width:100%;font-size:13px}.data-table th{text-align:left;font-family:var(--font-mono);color:var(--gray);letter-spacing:1px;border-bottom:1px solid var(--border2);text-transform:uppercase;padding:10px 14px;font-size:10px}.data-table td{color:var(--white2);border-bottom:1px solid var(--border2);padding:12px 14px}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:#00d4ff08}.td-addr{font-family:var(--font-mono);color:var(--gray);font-size:11px}.td-green{color:#00c878;font-weight:600}.td-cyan{color:var(--cyan);font-weight:600}.td-gold{color:#ffc107;font-weight:600}.profile-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.profile-card{border:1px solid var(--border);background:#051428d9;border-radius:14px;padding:24px}.profile-card-head{border-bottom:1px solid var(--border2);align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;display:flex}.profile-card-icon{border:1px solid var(--border);width:44px;height:44px;color:var(--cyan);background:#00d4ff1f;border-radius:12px;justify-content:center;align-items:center;font-size:20px;display:flex}.profile-card-title{font-family:var(--font-head);color:var(--white);letter-spacing:1px;font-size:12px;font-weight:700}.profile-card-sub{color:var(--gray);margin-top:2px;font-size:11px}.info-row{border-bottom:1px solid var(--border2);justify-content:space-between;align-items:center;padding:9px 0;display:flex}.info-row:last-child{border-bottom:none}.info-label{color:var(--gray);letter-spacing:.3px;font-size:12px}.info-value{color:var(--white2);text-align:right;font-size:13px;font-weight:500}.info-value.mono{font-family:var(--font-mono);font-size:11px}.info-value.highlight{color:var(--cyan)}.info-value.green{color:#00c878}.nft-display{text-align:center;background:linear-gradient(135deg,#1565c04d,#00d4ff1a);border:1px solid #00d4ff4d;border-radius:16px;padding:28px;position:relative;overflow:hidden}.nft-display:before{content:"";background:conic-gradient(#0000 340deg,#00d4ff0d 360deg);width:200%;height:200%;animation:8s linear infinite spin;position:absolute;top:-50%;left:-50%}.nft-icon{z-index:1;margin-bottom:12px;font-size:56px;position:relative}.nft-id{font-family:var(--font-head);color:var(--cyan);z-index:1;margin-bottom:4px;font-size:14px;position:relative}.nft-status{color:var(--gray);z-index:1;font-size:12px;position:relative}.progress-wrap{z-index:1;margin-top:16px;position:relative}.progress-label{color:var(--gray);justify-content:space-between;margin-bottom:6px;font-size:11px;display:flex}.progress-bar{background:#00d4ff26;border-radius:2px;height:4px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--blue3), var(--cyan));height:100%;box-shadow:0 0 8px var(--cyan);border-radius:2px}.tree-container{text-align:center;padding:8px 0;display:block;overflow-x:auto}.tree{flex-direction:column;align-items:center;display:inline-flex}.tree-node{flex-direction:column;align-items:center;display:flex}.tree-box{border:1px solid var(--border);color:var(--white2);text-align:center;white-space:nowrap;cursor:pointer;background:#051428e6;border-radius:10px;min-width:90px;padding:9px 16px;font-size:12px;font-weight:500;transition:all .2s}.tree-box:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow)}.tree-box.root{border-color:var(--cyan);color:var(--cyan);font-family:var(--font-head);background:#00d4ff1f;font-size:11px}.tree-box.left-n{color:#00c878;border-color:#00c87866}.tree-box.right-n{color:#ffc107;border-color:#ffc10766}.tree-box.empty{color:var(--gray);border-style:dashed;font-size:11px}.vline{background:var(--border);width:1px;height:22px}.hline-wrap{display:flex;position:relative}.hline-wrap:before{content:"";background:var(--border);height:1px;position:absolute;top:0;left:25%;right:25%}.tree-children{gap:28px;display:flex}.tree-child{flex-direction:column;align-items:center;display:flex}.tree-badges{justify-content:center;gap:10px;margin-top:16px;display:flex}.income-list{flex-direction:column;gap:0;display:flex}.income-item{border-bottom:1px solid var(--border2);align-items:center;gap:12px;padding:13px 0;display:flex}.income-item:last-child{border-bottom:none}.income-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex}.income-info{flex:1;min-width:0}.income-label{color:var(--white2);font-size:13px;font-weight:500}.income-date{color:var(--gray);font-size:11px;font-family:var(--font-mono);margin-top:2px}.income-amount{font-family:var(--font-head);font-size:15px;font-weight:700}.task-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.task-item{background:#00c8500f;border:1px solid #00c85033;border-radius:12px;padding:18px;transition:all .2s}.task-item:hover{border-color:#00c85066;box-shadow:0 0 20px #00c8501a}.task-num{font-family:var(--font-head);color:#00c878;font-size:28px;font-weight:900;line-height:1}.task-unit{color:var(--gray);margin-top:3px;font-size:12px}.task-label{color:var(--white2);margin-top:10px;font-size:13px;font-weight:500}.social-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.social-card{text-align:center;cursor:pointer;border-radius:14px;padding:28px 20px;transition:all .3s;position:relative;overflow:hidden}.social-card:before{content:"";opacity:0;background:linear-gradient(135deg,#ffffff0d,#0000);transition:opacity .3s;position:absolute;inset:0}.social-card:hover{transform:translateY(-4px)}.social-card:hover:before{opacity:1}.sc-fb{background:#1877f21f;border:1px solid #1877f24d}.sc-fb:hover{box-shadow:0 8px 30px #1877f240}.sc-ig{background:#e1306c1a;border:1px solid #e1306c40}.sc-ig:hover{box-shadow:0 8px 30px #e1306c33}.sc-tg{background:#0088cc1a;border:1px solid #0088cc40}.sc-tg:hover{box-shadow:0 8px 30px #08c3}.social-icon{margin-bottom:12px;font-size:42px}.sc-fb .social-icon{color:#1877f2}.sc-ig .social-icon{color:#e1306c}.sc-tg .social-icon{color:#08c}.social-name{font-family:var(--font-head);letter-spacing:1px;font-size:12px;font-weight:700}.sc-fb .social-name{color:#1877f2}.sc-ig .social-name{color:#e1306c}.sc-tg .social-name{color:#08c}.social-handle{color:var(--gray);margin-top:5px;font-size:12px}.social-btn{letter-spacing:.5px;cursor:pointer;border:none;border-radius:20px;margin-top:14px;padding:7px 18px;font-size:11px;font-weight:600;transition:all .2s;display:inline-block}.sc-fb .social-btn{color:#1877f2;background:#1877f233}.sc-ig .social-btn{color:#e1306c;background:#e1306c26}.sc-tg .social-btn{color:#08c;background:#0088cc26}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--blue2);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--blue3)}.hamburger{cursor:pointer;border:1px solid var(--border);background:#00d4ff14;border-radius:8px;flex-direction:column;flex-shrink:0;justify-content:center;gap:5px;width:36px;height:36px;padding:4px;transition:background .2s;display:none}.hamburger:hover{background:#00d4ff29}.hamburger span{background:var(--cyan);transform-origin:50%;border-radius:2px;height:2px;transition:all .3s;display:block}.hamburger.open span:first-child{transform:translateY(7px)rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}.hamburger.open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.sidebar-overlay{z-index:49;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000000b8;animation:.25s fadeIn;display:none;position:fixed;inset:0}.sidebar-overlay.visible{display:block}@media (max-width:768px){.hamburger{display:flex}.sidebar{box-shadow:none;transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:6px 0 40px #000000b3}.main{margin-left:0}.topbar{gap:12px;height:64px;padding:0 16px}.topbar-title{font-size:15px}.topbar-right .topbar-badge:last-child{display:none}.topbar-badge{padding:6px 12px;font-size:12px}.content{padding:18px}.dash-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.profile-grid,.task-grid{grid-template-columns:1fr;gap:16px}.social-grid{grid-template-columns:1fr;gap:14px}.dash-box{padding:20px 16px}.dash-box-value{font-size:20px}.data-table{min-width:500px;font-size:13px}.data-table th,.data-table td{padding:10px 12px}.nft-display{padding:24px 18px}.page-title{font-size:22px}.login-card{padding:40px 24px}}@media (max-width:480px){.dash-grid{grid-template-columns:1fr;gap:12px}.topbar-badge{padding:5px 10px;font-size:11px}.topbar-title{font-size:14px}}
