@import"https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #07080f;--bg2: #0d0f1c;--bg3: #13162a;--surface: #181c35;--surface2: #1f2440;--border: rgba(255,255,255,.07);--border2: rgba(255,255,255,.13);--accent: #6c63ff;--accent2: #a78bfa;--pink: #f472b6;--cyan: #22d3ee;--green: #34d399;--amber: #fbbf24;--red: #f87171;--text: #f0f0ff;--text2: #9098c0;--text3: #4a5280;--radius: 14px;--radius-sm: 8px;--shadow: 0 8px 32px rgba(0,0,0,.5);--shadow-lg: 0 24px 64px rgba(0,0,0,.6);--glow: 0 0 40px rgba(108,99,255,.25)}html{scroll-behavior:smooth}body{font-family:DM Sans,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,.font-display{font-family:Syne,sans-serif}a{color:inherit;text-decoration:none}button{font-family:DM Sans,sans-serif;cursor:pointer;border:none;outline:none}input,textarea,select{font-family:DM Sans,sans-serif;outline:none}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.toast-container{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:var(--surface2);border:1px solid var(--border2);box-shadow:var(--shadow-lg);min-width:280px;max-width:380px;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) forwards;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:all}.toast--success{border-left:3px solid var(--green)}.toast--error{border-left:3px solid var(--red)}.toast--info{border-left:3px solid var(--accent)}.toast-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}.toast--success .toast-icon{background:#34d39926;color:var(--green)}.toast--error .toast-icon{background:#f8717126;color:var(--red)}.toast--info .toast-icon{background:#6c63ff26;color:var(--accent)}.toast-message{font-size:14px;color:var(--text);flex:1;line-height:1.4}.toast-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:2px 4px;transition:color .2s;flex-shrink:0}.toast-close:hover{color:var(--text)}@keyframes toastIn{0%{opacity:0;transform:translate(60px) scale(.9)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(60px) scale(.9)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes badgePop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.app-layout{display:flex;min-height:100vh}.sidebar{width:240px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:24px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:40}.sidebar-logo{font-family:Syne,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;padding:0 10px;margin-bottom:32px;background:linear-gradient(135deg,var(--accent2),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-logo span{-webkit-text-fill-color:var(--pink)}.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--text2);transition:all .18s ease;text-decoration:none}.sidebar-nav a:hover{background:var(--surface);color:var(--text);transform:translate(2px)}.sidebar-nav a.active{background:#6c63ff26;color:var(--accent2);font-weight:600}.sidebar-nav a.active .nav-icon{filter:drop-shadow(0 0 6px rgba(108,99,255,.5))}.sidebar-nav .nav-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}.sidebar-bottom{padding-top:12px;border-top:1px solid var(--border);margin-top:8px}.logout-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--text3);background:none;border:none;cursor:pointer;transition:all .18s;font-family:DM Sans,sans-serif}.logout-btn:hover{background:#f871711a;color:var(--red)}.main-content{flex:1;overflow-y:auto;background:radial-gradient(ellipse at 10% 10%,rgba(108,99,255,.07) 0%,transparent 50%),radial-gradient(ellipse at 90% 90%,rgba(244,114,182,.05) 0%,transparent 50%),var(--bg)}.page-inner{padding:40px 48px;max-width:1200px}.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:border-color .2s,box-shadow .2s,transform .2s}.card:hover{border-color:var(--border2);box-shadow:0 8px 32px #0000004d;transform:translateY(-2px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none;font-family:DM Sans,sans-serif;letter-spacing:.1px}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px #6c63ff4d}.btn-primary:hover:not(:disabled){background:#7c74ff;transform:translateY(-2px);box-shadow:0 8px 24px #6c63ff73}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border2)}.btn-secondary:hover:not(:disabled){background:var(--surface2);border-color:var(--accent);transform:translateY(-1px)}.btn-danger{background:#f871711f;color:var(--red);border:1px solid rgba(248,113,113,.25)}.btn-danger:hover:not(:disabled){background:#f8717138;transform:translateY(-1px)}.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}.btn-ghost:hover:not(:disabled){background:var(--surface);color:var(--text)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:13px;font-weight:500;color:var(--text2);letter-spacing:.3px}.form-input{background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:12px 16px;color:var(--text);font-size:14px;transition:all .2s;width:100%;font-family:DM Sans,sans-serif}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6c63ff26;background:var(--surface)}.form-input::placeholder{color:var(--text3)}textarea.form-input{resize:vertical;min-height:100px;line-height:1.6}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.2px;white-space:nowrap}.badge-green{background:#34d3991f;color:var(--green)}.badge-amber{background:#fbbf241f;color:var(--amber)}.badge-red{background:#f871711f;color:var(--red)}.badge-purple{background:#6c63ff26;color:var(--accent2)}.badge-cyan{background:#22d3ee1f;color:var(--cyan)}.badge-pink{background:#f472b61f;color:var(--pink)}.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:0 12px 32px #0000004d}.stat-card:after{content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(108,99,255,.08),transparent 70%);pointer-events:none}.stat-card-num{font-family:Syne,sans-serif;font-size:36px;font-weight:800;letter-spacing:-1.5px;line-height:1;margin-bottom:8px}.stat-card-label{font-size:13px;color:var(--text2);font-weight:500}.divider{height:1px;background:var(--border);margin:24px 0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:36px;width:100%;max-width:520px;box-shadow:var(--shadow-lg);animation:slideUp .3s cubic-bezier(.34,1.56,.64,1)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.modal h2{font-size:22px;font-weight:700;color:var(--text);margin:0}.modal-close{background:#ffffff0f;border:1px solid var(--border);border-radius:8px;color:var(--text3);cursor:pointer;font-size:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s}.modal-close:hover{background:#f871711a;color:var(--red)}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.15);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}.empty-state{text-align:center;padding:64px 20px;color:var(--text3)}.empty-state-icon{font-size:52px;margin-bottom:16px;opacity:.6}.empty-state h3{font-size:18px;color:var(--text2);margin-bottom:8px;font-family:Syne,sans-serif}.empty-state p{font-size:14px;line-height:1.6;max-width:320px;margin:0 auto}.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--surface) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}.skeleton-text{height:14px;border-radius:6px}.skeleton-title{height:24px;border-radius:8px}.skeleton-card{height:120px;border-radius:var(--radius)}@keyframes bellShake{0%,to{transform:rotate(0)}15%{transform:rotate(15deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}.bell-shake{animation:bellShake .65s ease}.page-header{margin-bottom:36px}.page-header h1{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--text);margin-bottom:6px}.page-header p{color:var(--text2);font-size:15px}.gradient-text{background:linear-gradient(135deg,var(--accent2),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.project-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:border-color .2s,transform .2s,box-shadow .2s;cursor:pointer}.project-card:hover{border-color:#6c63ff59;transform:translateY(-3px);box-shadow:0 12px 32px #0000004d}@media (max-width: 900px){.app-layout{flex-direction:column}.sidebar{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;padding:12px 16px;position:relative;gap:4px;align-items:center}.sidebar-logo{margin-bottom:0;font-size:18px}.sidebar-nav{flex-direction:row;flex:none;flex-wrap:wrap;gap:2px}.sidebar-nav a{padding:8px 10px;font-size:12px}.sidebar-nav a span.nav-icon{display:none}.sidebar-bottom{border-top:none;padding-top:0;margin-top:0;margin-left:auto;display:flex;align-items:center;gap:8px}.main-content{min-height:calc(100vh - 80px)}.page-inner{padding:24px 18px}.stat-card-num{font-size:28px}}@media (max-width: 560px){.page-inner{padding:16px 14px}.modal{padding:24px 20px}}@media (max-width: 1024px){.page-inner{padding:32px 28px}.stats-grid-3{grid-template-columns:repeat(2,1fr)!important}.project-grid-2{grid-template-columns:1fr!important}}@media (max-width: 768px){.sidebar{width:100%!important;height:auto!important;flex-direction:row!important;flex-wrap:nowrap!important;padding:12px 16px!important;position:sticky!important;top:0!important;z-index:50!important;overflow-x:auto!important;gap:0!important;border-right:none!important;border-bottom:1px solid var(--border)!important}.sidebar-logo{margin-bottom:0!important;font-size:16px!important;flex-shrink:0!important;margin-right:12px!important}.sidebar-nav{flex-direction:row!important;flex:1!important;gap:2px!important;overflow-x:auto!important;flex-wrap:nowrap!important}.sidebar-nav a{padding:8px 10px!important;font-size:0!important;white-space:nowrap!important;flex-shrink:0!important}.sidebar-nav a .nav-icon{font-size:18px!important;width:auto!important}.sidebar-nav a.active{background:#6c63ff33!important}.sidebar-bottom{border-top:none!important;padding-top:0!important;margin-top:0!important;margin-left:auto!important;display:flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important}.logout-btn{font-size:0!important;padding:8px 10px!important;width:auto!important}.logout-btn span{font-size:18px!important}.main-content{min-height:calc(100vh - 56px)!important}.page-inner{padding:20px 16px!important}.page-header h1{font-size:24px!important}.stat-card-num{font-size:28px!important}.modal-overlay{align-items:flex-end!important;padding:0!important}.modal{border-radius:20px 20px 0 0!important;max-width:100%!important;width:100%!important;max-height:90vh!important;overflow-y:auto!important}.chat-layout-mobile{flex-direction:column!important}.conv-list-mobile{width:100%!important;max-height:200px!important;border-right:none!important;border-bottom:1px solid var(--border)!important}.pay-table{overflow-x:auto!important}.pay-table-head,.pay-table-row{grid-template-columns:minmax(120px,2fr) minmax(80px,1fr) minmax(60px,.8fr)!important;min-width:480px!important;font-size:12px!important}}@media (max-width: 480px){.page-inner{padding:16px 12px!important}.landing-hero{padding:48px 16px 36px!important}.landing-buttons{flex-direction:column!important}.landing-buttons button{width:100%!important}.auth-page{flex-direction:column!important}.auth-visual{min-height:200px!important;flex:none!important}.auth-form-side{width:100%!important;padding:28px 20px!important;border:none!important;border-top:1px solid var(--border)!important}.profile-grid{grid-template-columns:1fr!important}.analytics-grid-4{grid-template-columns:repeat(2,1fr)!important}.analytics-grid-2{grid-template-columns:1fr!important}.invoice-card{flex-direction:column!important;gap:16px!important;align-items:flex-start!important}}@media (max-width: 768px){.btn{min-height:44px!important;padding:12px 20px!important}.form-input{min-height:48px!important;font-size:16px!important}textarea.form-input{min-height:100px!important}button{touch-action:manipulation!important}}@media (max-width: 860px){.lp-flow-grid{grid-template-columns:repeat(2,1fr)!important}.lp-two-col{grid-template-columns:1fr!important}.lp-trust{grid-template-columns:repeat(2,1fr)!important;gap:32px!important}}@media (max-width: 540px){.lp-flow-grid{grid-template-columns:1fr!important}.lp-trust{grid-template-columns:repeat(2,1fr)!important}.lp-role-toggle{flex-direction:column!important}.lp-hero-inner{padding:0 16px!important}}@media (max-width: 768px){.dashboard-stats,.dashboard-quick{grid-template-columns:repeat(2,1fr)!important}.dashboard-projects{grid-template-columns:1fr!important}}@media (max-width: 480px){.dashboard-stats{grid-template-columns:1fr!important}.dashboard-quick{grid-template-columns:repeat(2,1fr)!important}}@media (max-width: 768px){.notif-panel{left:auto!important;right:0!important;bottom:auto!important;top:calc(100% + 8px)!important;width:300px!important;max-height:400px!important}}@media (max-width: 768px){.analytics-grid-4{grid-template-columns:repeat(2,1fr)!important;gap:14px!important}.analytics-grid-2{grid-template-columns:1fr!important}.analytics-chart-card{padding:20px 16px!important}}@media (max-width: 900px){.profile-grid,.profile-formgrid{grid-template-columns:1fr!important}}@media (max-width: 768px){.chat-main{flex-direction:column!important;height:auto!important}.chat-convlist{width:100%!important;height:180px!important;border-right:none!important;border-bottom:1px solid var(--border)!important}.chat-thread{height:calc(100vh - 300px)!important;padding:16px!important}}@media (max-width: 768px){.pay-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.pay-table-head,.pay-table-row{grid-template-columns:2fr 1fr 1fr!important;min-width:360px}.pay-col-party,.pay-col-status{display:none!important}}.hide-mobile{display:block}@media (max-width: 768px){.hide-mobile{display:none!important}}.show-mobile{display:none}@media (max-width: 768px){.show-mobile{display:block!important}}@media (max-width: 768px){.full-mobile{width:100%!important}}@media (max-width: 768px){.stack-mobile{flex-direction:column!important;align-items:stretch!important}}