:root{--bg-primary:#0f1219;--bg-secondary:#161b26;--bg-card:#1c2333;--bg-card-hover:#232d42;--bg-input:#1a2238;--bg-sidebar:#111827;--accent-blue:#3b82f6;--accent-blue-hover:#2563eb;--accent-blue-light:#60a5fa;--accent-green:#22c55e;--accent-green-light:#22c55e26;--accent-orange:#f59e0b;--accent-orange-light:#f59e0b26;--accent-red:#ef4444;--accent-red-light:#ef444426;--accent-purple:#8b5cf6;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border-color:#ffffff14;--border-active:#3b82f680;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px #0006;--shadow-lg:0 10px 25px #00000080;--shadow-glow:0 0 20px #3b82f626;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;--transition:all .2s ease;--transition-slow:all .3s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-layout{height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;width:72px;padding:16px 0;display:flex}.sidebar-logo{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));border-radius:var(--radius-md);color:#fff;cursor:pointer;width:40px;height:40px;transition:var(--transition);justify-content:center;align-items:center;margin-bottom:20px;font-size:18px;font-weight:800;display:flex}.sidebar-logo:hover{box-shadow:var(--shadow-glow);transform:scale(1.05)}.sidebar-nav{flex-direction:column;flex:1;gap:4px;display:flex}.sidebar-item{border-radius:var(--radius-md);width:48px;height:48px;color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.sidebar-item:hover{color:var(--text-secondary);background:#ffffff0d}.sidebar-item.active{color:var(--accent-blue);background:#3b82f626}.sidebar-item.active:before{content:"";background:var(--accent-blue);border-radius:0 3px 3px 0;width:3px;height:24px;position:absolute;left:-12px}.sidebar-bottom{flex-direction:column;gap:4px;margin-top:auto;display:flex}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.topbar{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0;align-items:center;gap:16px;height:56px;padding:0 24px;display:flex}.topbar-title{color:var(--text-primary);font-size:16px;font-weight:600}.topbar-spacer{flex:1}.topbar-user{cursor:pointer;border-radius:var(--radius-md);transition:var(--transition);align-items:center;gap:10px;padding:6px 12px;display:flex}.topbar-user:hover{background:#ffffff0d}.topbar-avatar{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:700;display:flex}.topbar-username{color:var(--text-secondary);font-size:13px;font-weight:500}.page-content{flex:1;padding:24px;overflow-y:auto}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:var(--transition);padding:20px}.card:hover{border-color:#ffffff1f}.card-title{color:var(--text-primary);align-items:center;gap:8px;margin-bottom:16px;font-size:14px;font-weight:600;display:flex}.card-title svg{color:var(--accent-blue)}.btn{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-blue), #1d4ed8);color:#fff;border:none;box-shadow:0 2px 8px #3b82f64d}.btn-primary:hover{background:linear-gradient(135deg, var(--accent-blue-hover), #1e40af);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f666}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{color:var(--text-secondary);border:1px solid var(--border-color);background:#ffffff0d}.btn-secondary:hover{color:var(--text-primary);background:#ffffff14;border-color:#ffffff26}.btn-danger{color:var(--accent-red);background:#ef44441a;border:1px solid #ef444433}.btn-danger:hover{background:#ef444433}.btn-ghost{color:var(--text-secondary);background:0 0;border:none;padding:8px 12px}.btn-ghost:hover{color:var(--text-primary);background:#ffffff0d}.btn-sm{padding:6px 14px;font-size:13px}.btn-lg{padding:14px 32px;font-size:16px;font-weight:600}.btn-icon{border-radius:var(--radius-sm);width:36px;height:36px;padding:0}.input-group{flex-direction:column;gap:6px;display:flex}.input-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:500}.input{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);transition:var(--transition);outline:none;width:100%;padding:10px 14px;font-family:inherit;font-size:14px}.input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px #3b82f61a}.input::placeholder{color:var(--text-muted)}.input-row{gap:12px;display:flex}.input-row .input-group{flex:1}select.input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}.table-container{border-radius:var(--radius-md);border:1px solid var(--border-color);overflow-x:auto}table{border-collapse:collapse;width:100%}thead{background:#ffffff08}th{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);text-align:left;border-bottom:1px solid var(--border-color);padding:10px 16px;font-size:11px;font-weight:600}td{color:var(--text-secondary);border-bottom:1px solid #ffffff0a;padding:12px 16px;font-size:13px}tr:hover td{background:#ffffff05}tr:last-child td{border-bottom:none}.badge{letter-spacing:.3px;border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.badge-success{background:var(--accent-green-light);color:var(--accent-green)}.badge-warning{background:var(--accent-orange-light);color:var(--accent-orange)}.badge-error{background:var(--accent-red-light);color:var(--accent-red)}.badge-info{color:var(--accent-blue-light);background:#3b82f626}.progress-bar{background:#ffffff0f;border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent-blue), var(--accent-purple));border-radius:4px;height:100%;transition:width .5s}.stats-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);flex-direction:column;gap:8px;padding:16px;display:flex}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px}.stat-value{color:var(--text-primary);font-size:24px;font-weight:700}.stat-change{align-items:center;gap:4px;font-size:12px;display:flex}.stat-change.up{color:var(--accent-green)}.stat-change.down{color:var(--accent-red)}.login-page{background:var(--bg-primary);height:100vh;display:flex}.login-visual{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.login-visual:before{content:"";background:radial-gradient(circle,#3b82f626 0%,#0000 70%);width:400px;height:400px;animation:4s ease-in-out infinite pulse;position:absolute;top:20%;left:30%}.login-visual:after{content:"";background:radial-gradient(circle,#8b5cf61a 0%,#0000 70%);width:300px;height:300px;animation:5s ease-in-out infinite reverse pulse;position:absolute;bottom:20%;right:20%}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.login-brand{text-align:center;z-index:1}.login-brand h1{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:48px;font-weight:800}.login-brand p{color:var(--text-muted);max-width:300px;font-size:16px}.login-form-side{background:var(--bg-secondary);border-left:1px solid var(--border-color);justify-content:center;align-items:center;width:480px;padding:48px;display:flex}.login-form{width:100%;max-width:380px}.login-form h2{margin-bottom:8px;font-size:24px;font-weight:700}.login-form p{color:var(--text-muted);margin-bottom:32px;font-size:14px}.login-form .input-group{margin-bottom:20px}.login-form .btn-primary{width:100%;margin-top:8px}.login-forgot{text-align:center;margin-top:16px}.login-forgot a{color:var(--accent-blue);font-size:13px;text-decoration:none}.login-forgot a:hover{text-decoration:underline}.login-error{background:var(--accent-red-light);border-radius:var(--radius-sm);color:var(--accent-red);border:1px solid #ef44444d;align-items:center;gap:8px;margin-bottom:16px;padding:10px 14px;font-size:13px;display:flex}.signing-layout{grid-template-columns:1fr 340px;gap:20px;height:100%;display:grid}.signing-main,.signing-sidebar{flex-direction:column;gap:20px;display:flex;overflow-y:auto}.input-actions{flex-wrap:wrap;gap:10px;display:flex}.file-info{color:var(--text-muted);align-items:center;gap:16px;font-size:13px;display:flex}.file-info strong{color:var(--text-primary)}.file-name-cell{color:var(--text-primary);align-items:center;gap:8px;font-weight:500;display:flex}.file-name-cell svg{color:var(--accent-red);flex-shrink:0}.sign-actions{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);align-items:center;gap:16px;padding:20px;display:flex}.sign-actions .btn-primary{min-width:160px}.options-row{align-items:center;gap:20px;display:flex}.checkbox-group{color:var(--text-secondary);cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.checkbox-group input[type=checkbox]{accent-color:var(--accent-blue);cursor:pointer;width:16px;height:16px}.progress-section{flex-direction:column;gap:12px;display:flex}.progress-header{justify-content:space-between;align-items:center;display:flex}.progress-percentage{color:var(--accent-blue);font-size:20px;font-weight:700}.progress-stats{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.progress-stat{text-align:center}.progress-stat .label{color:var(--text-muted);text-transform:uppercase;font-size:11px}.progress-stat .value{color:var(--text-primary);margin-top:4px;font-size:18px;font-weight:700}.config-layout{grid-template-columns:1fr 1fr;gap:24px;display:grid}.config-preview{border-radius:var(--radius-md);background:#fff;flex-direction:column;align-items:center;gap:16px;min-height:200px;padding:24px;display:flex}.config-preview-box{border:2px dashed var(--accent-blue);color:#333;flex-direction:column;align-items:center;gap:4px;padding:12px;font-size:12px;display:flex}.config-list{flex-direction:column;gap:12px;display:flex}.config-item{border:1px solid var(--border-color);border-radius:var(--radius-md);transition:var(--transition);background:#ffffff08;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.config-item:hover{background:#ffffff0d;border-color:#ffffff1f}.config-item-info{flex-direction:column;gap:4px;display:flex}.config-item-name{color:var(--text-primary);font-size:14px;font-weight:500}.config-item-meta{color:var(--text-muted);font-size:12px}.config-item-actions{gap:8px;display:flex}.empty-state{color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:60px 20px;display:flex}.empty-state svg{color:var(--text-muted);opacity:.4}.empty-state h3{color:var(--text-secondary);font-size:16px;font-weight:600}.empty-state p{max-width:300px;font-size:13px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.3s forwards fadeIn}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:1s linear infinite spin}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);background:var(--bg-card);color:var(--text-primary);border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;border:1px solid var(--border-color);box-shadow:var(--shadow-md);z-index:100;padding:6px 12px;font-size:12px;transition:opacity .2s;position:absolute;top:50%;left:60px;transform:translateY(-50%)}.tooltip:hover:after{opacity:1}.download-page{background:var(--bg-primary);max-width:800px;height:100vh;margin:0 auto;padding:40px 24px;overflow-y:auto}.download-hero{text-align:center;margin-bottom:48px}.download-hero h1{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:42px;font-weight:800}.download-hero p{color:var(--text-muted);font-size:16px}.download-cards{grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:48px;display:grid}.download-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);text-align:center;transition:var(--transition-slow);padding:32px}.download-card:hover{border-color:var(--accent-blue);box-shadow:var(--shadow-glow);transform:translateY(-4px)}.download-icon{width:80px;height:80px;color:var(--accent-blue);background:#3b82f61a;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 20px;display:flex}.download-card h3{margin-bottom:6px;font-size:20px;font-weight:700}.download-card p{color:var(--text-muted);margin-bottom:4px;font-size:13px}.download-version{color:var(--text-muted)!important;margin-bottom:20px!important;font-size:12px!important}.download-card .btn{text-decoration:none}.download-features{flex-direction:column;gap:16px;margin-bottom:48px;display:flex}.download-feature{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);align-items:flex-start;gap:16px;padding:20px;display:flex}.download-feature svg{color:var(--accent-blue);flex-shrink:0;margin-top:2px}.download-feature h4{margin-bottom:4px;font-size:14px;font-weight:600}.download-feature p{color:var(--text-muted);font-size:13px}.download-instructions{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:32px}.download-instructions h3{text-align:center;margin-bottom:24px;font-size:18px;font-weight:700}.instructions-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.instruction-step{border-radius:var(--radius-md);background:#ffffff08;align-items:flex-start;gap:14px;padding:16px;display:flex}.step-number{background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:700;display:flex}.instruction-step p{color:var(--text-secondary);padding-top:5px;font-size:13px;line-height:1.5}