:root{--bg: #f5f6ff;--panel: #ffffff;--text: #0f172a;--muted: #64748b;--border: #e5e7f5;--brand: #6366f1;--brand-dark: #4f46e5;--brand-2: #8b5cf6;--brand-3: #a855f7;--brand-soft: #eef2ff;--success: #059669;--success-soft: #d1fae5;--warn: #d97706;--warn-soft: #fef3c7;--danger: #dc2626;--danger-soft: #fee2e2;--sidebar-bg: #ffffff;--sidebar-text: #475569;--sidebar-hover: #f4f4ff;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);--shadow: 0 4px 20px rgba(99, 102, 241, .08);--shadow-lg: 0 20px 40px rgba(99, 102, 241, .15);--grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--grad-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);--grad-text: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}.app{display:flex;min-height:100vh;background:radial-gradient(1000px 500px at -10% -10%,rgba(139,92,246,.1),transparent 60%),radial-gradient(800px 400px at 110% 10%,rgba(99,102,241,.1),transparent 60%),#f5f6ff}.sidebar{width:260px;background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;padding:24px 0;position:sticky;top:0;height:100vh;border-right:1px solid var(--border);box-shadow:4px 0 20px #6366f108}.sidebar .brand{padding:0 22px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}.sidebar .brand .logo{width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;box-shadow:0 6px 16px #6366f159;letter-spacing:-.5px}.sidebar .brand .name{font-size:17px;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.3px;line-height:1.2}.sidebar nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}.sidebar nav a{color:var(--sidebar-text);padding:11px 14px;border-radius:10px;display:flex;align-items:center;gap:12px;font-weight:500;font-size:13.5px;transition:all .18s ease;position:relative}.sidebar nav a:hover{background:var(--sidebar-hover);color:var(--brand-dark);text-decoration:none}.sidebar nav a.active{background:var(--grad);color:#fff;font-weight:600;box-shadow:0 6px 16px #6366f159}.sidebar .who{margin:0 12px;padding:14px;border-radius:12px;background:var(--grad-soft);border:1px solid var(--border);font-size:12px;color:var(--muted)}.sidebar .who strong{color:var(--text);display:block;margin-bottom:2px;font-size:13px}.sidebar .who button{margin-top:10px;width:100%;background:#fff;color:var(--danger);border:1px solid var(--danger-soft);padding:7px 10px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:500;transition:all .15s}.sidebar .who button:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.main{flex:1;padding:32px 40px;overflow-y:auto}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;gap:20px}.page-header h1{font-size:28px;margin:0;font-weight:800;letter-spacing:-.5px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.page-header .subtitle{color:var(--muted);font-size:13.5px;margin-top:6px}.back-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:all .15s;margin-bottom:10px}.back-link:hover{color:var(--brand-dark);background:var(--brand-soft);border-color:var(--brand);text-decoration:none;transform:translate(-2px)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow)}.panel h2{font-size:15px;margin:0 0 14px;font-weight:700;color:var(--text)}.grid{display:grid;gap:18px}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.stat-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}.stat-card:before{content:"";position:absolute;top:0;right:0;width:120px;height:120px;background:var(--grad);opacity:.08;border-radius:50%;transform:translate(40%,-40%)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-card .label{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.stat-card .value{font-size:30px;font-weight:800;color:var(--text);letter-spacing:-.8px;position:relative;z-index:1}.stat-card.brand .value{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.stat-card.success .value{color:var(--success)}.stat-card.warn .value{color:var(--warn)}button{font-family:inherit;font-size:13px;cursor:pointer}.btn{background:var(--grad);color:#fff;border:none;padding:9px 16px;border-radius:10px;font-weight:600;font-size:13px;transition:all .18s;box-shadow:0 4px 12px #6366f147;letter-spacing:.1px}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px #6366f166}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.btn.secondary:hover{background:var(--brand-soft);color:var(--brand-dark);border-color:var(--brand);box-shadow:0 4px 12px #6366f126}.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 12px #dc262647}.btn.danger:hover{box-shadow:0 8px 20px #dc262666}.btn.success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px #05966947}.btn.success:hover{box-shadow:0 8px 20px #05966966}.btn.small{padding:6px 12px;font-size:12px;border-radius:8px}.btn.link{background:transparent;color:var(--brand);padding:0;box-shadow:none}.btn.link:hover{text-decoration:underline;background:transparent;box-shadow:none;transform:none}.btn-row{display:flex;gap:10px;flex-wrap:wrap}label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}input,textarea,select{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:#fff;color:var(--text);transition:all .15s}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px #6366f11f}.field{margin-bottom:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border-radius:12px;overflow:hidden}th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}th{background:var(--grad-soft);color:var(--muted);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.6px}tbody tr{transition:background .15s}tbody tr:hover{background:var(--brand-soft);cursor:pointer}tbody tr.no-hover:hover{background:transparent;cursor:default}tbody tr:last-child td{border-bottom:none}td.actions{white-space:nowrap}td .btn{margin-right:6px}.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}.badge.pending{background:var(--warn-soft);color:#92400e}.badge.delivered{background:var(--success-soft);color:#065f46}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;padding:28px;box-shadow:0 25px 60px #0f172a4d;animation:slideUp .2s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal.wide{max-width:900px}.modal h2{margin-top:0;margin-bottom:18px;font-size:20px;font-weight:700}.modal .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.login-screen{min-height:100vh;display:flex;overflow:hidden;position:relative;background:linear-gradient(135deg,#0f0729,#2e1065 40%,#4c1d95)}.login-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}.login-orb.orb-1{width:520px;height:520px;background:linear-gradient(135deg,#a855f7,#6366f1);top:-160px;left:-140px;opacity:.55;animation:orb1 12s ease-in-out infinite}.login-orb.orb-2{width:460px;height:460px;background:linear-gradient(135deg,#ec4899,#8b5cf6);bottom:-160px;right:-140px;opacity:.45;animation:orb2 14s ease-in-out infinite}.login-orb.orb-3{width:340px;height:340px;background:linear-gradient(135deg,#06b6d4,#6366f1);top:40%;left:45%;opacity:.25;animation:orb3 16s ease-in-out infinite}@keyframes orb1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(40px,60px) scale(1.15)}}@keyframes orb2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-50px,-40px) scale(1.1)}}@keyframes orb3{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-60px,30px) scale(.9)}}.login-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);z-index:0;pointer-events:none}.login-left{flex:1;display:flex;flex-direction:column;justify-content:center;padding:50px 60px;color:#fff;position:relative;z-index:2}.login-left>*{max-width:640px}.brand-row{display:flex;align-items:center;gap:14px;margin-bottom:40px}.brand-tile{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;position:relative;overflow:hidden;box-shadow:0 12px 30px #8b5cf680,inset 0 1px #ffffff4d}.brand-tile span{position:relative;z-index:2}.brand-shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);animation:shine 4s linear infinite}@keyframes shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.brand-name{font-size:22px;font-weight:800;letter-spacing:-.4px;color:#fff}.login-left h2{font-size:52px;font-weight:800;margin:0 0 20px;letter-spacing:-1.8px;line-height:1.05}.grad-text{background:linear-gradient(135deg,#fbbf24,#fb7185,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.login-left .lead{font-size:15.5px;color:#ffffffd1;line-height:1.65;max-width:500px;margin-bottom:36px}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:620px;margin-bottom:30px}.feature-card{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:#ffffff0f;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:14px;transition:all .2s}.feature-card:hover{background:#ffffff1a;border-color:#ffffff3d;transform:translateY(-2px)}.feature-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#fbbf2440,#a855f740);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.feature-title{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:2px}.feature-desc{font-size:12px;color:#ffffffb8;line-height:1.4}.stats-row{display:flex;gap:10px;flex-wrap:wrap}.stat-pill{padding:7px 14px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:20px;font-size:11.5px;color:#ffffffd9;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-pill strong{color:#fbbf24;font-weight:700;margin-right:3px}.login-right{width:500px;display:flex;align-items:center;justify-content:center;padding:40px 60px 40px 0;position:relative;z-index:2;flex-shrink:0}.login-box{background:#fffffffc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:40px 40px 32px;border-radius:24px;width:100%;box-shadow:0 30px 80px #0006,0 0 0 1px #fff9;position:relative;overflow:hidden}.login-box:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899,#f59e0b)}.login-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;background:var(--brand-soft);color:var(--brand-dark);border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;border:1px solid #ddd6fe}.login-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px #6366f12e;animation:pulseDot 2s ease-in-out infinite}@keyframes pulseDot{0%,to{box-shadow:0 0 0 3px #6366f12e}50%{box-shadow:0 0 0 6px #6366f147}}.login-box h1{font-size:30px;margin:0 0 6px;font-weight:800;letter-spacing:-.6px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.login-box .subtitle{color:var(--muted);margin-bottom:26px;font-size:14px}.input-with-icon{position:relative}.input-with-icon input{padding-left:42px;padding-right:42px;height:46px}.input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;pointer-events:none}.pass-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;padding:6px 10px;cursor:pointer;font-size:15px;color:var(--muted);border-radius:8px}.pass-toggle:hover{background:var(--brand-soft)}.row-between{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px}.row-between.small{font-size:12.5px}.checkbox{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;color:var(--text);font-weight:500;font-size:12.5px;margin:0;cursor:pointer}.checkbox input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}.soft-link{color:var(--brand-dark);font-weight:600;font-size:12.5px;text-decoration:none}.soft-link:hover{text-decoration:underline}.login-btn{width:100%;padding:14px 16px;font-size:14.5px;font-weight:700;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 24px #6366f166}.login-btn .arrow{display:inline-block;transition:transform .2s}.login-btn:hover .arrow{transform:translate(4px)}.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spinner .6s linear infinite}@keyframes spinner{to{transform:rotate(360deg)}}.login-box .error{color:var(--danger);background:var(--danger-soft);padding:10px 12px;border-radius:10px;font-size:12.5px;margin-top:14px;border:1px solid #fecaca;display:flex;align-items:center;gap:8px}.error-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;font-weight:800;flex-shrink:0}.login-box .hint{margin-top:22px;padding:12px 14px;background:var(--grad-soft);border-radius:12px;border:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.hint-label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.hint-creds{display:flex;align-items:center;gap:8px}.hint-sep{color:var(--muted)}.login-box .hint code{background:#fff;padding:3px 9px;border-radius:6px;border:1px solid var(--border);font-size:11.5px;font-weight:600;color:var(--brand-dark)}.secured{margin-top:16px;text-align:center;font-size:11px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px}@media (max-width: 1100px){.login-left{padding:40px 30px}.login-left h2{font-size:42px}.feature-list{grid-template-columns:1fr}}@media (max-width: 900px){.login-left{display:none}.login-right{width:100%;padding:24px}.login-box{padding:32px 24px}.login-box h1{font-size:24px}}.search-bar{display:flex;gap:10px;margin-bottom:16px;align-items:center}.search-bar input{max-width:320px}.tabs{display:flex;gap:8px;margin-bottom:20px}.tabs button{background:transparent;border:none;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s}.tabs button:hover{color:var(--brand-dark);background:var(--brand-soft)}.tabs button.active{background:var(--grad);color:#fff;box-shadow:0 4px 12px #6366f147}.logo-uploader{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:16px;background:var(--grad-soft);border:1px solid var(--border);border-radius:12px;align-items:center}.logo-preview{background:#fff;border:1px dashed var(--border);border-radius:10px;padding:16px;min-height:100px;display:flex;align-items:center;justify-content:center}.logo-preview img{max-width:100%;max-height:80px;object-fit:contain}.logo-placeholder{text-align:center;color:var(--muted);font-size:13px;font-weight:600}.logo-placeholder .hint{font-size:11px;font-weight:400;margin-top:4px}.logo-label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}@media (max-width: 700px){.logo-uploader{grid-template-columns:1fr}}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}.template-grid .field.wide{grid-column:1 / -1}.template-grid .field{margin-bottom:0}.field-hint{margin-top:4px;font-size:11.5px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}@media (max-width: 800px){.template-grid{grid-template-columns:1fr}}.modal.invoice-preview{max-width:950px;width:100%;padding:0;overflow:hidden;height:90vh;display:flex;flex-direction:column}.invoice-preview-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border);background:var(--grad-soft)}.invoice-preview-head h2{margin:0;font-size:16px;font-weight:700}.invoice-preview-body{flex:1;background:#e5e7eb;overflow:hidden}.invoice-frame{width:100%;height:100%;border:0;background:#fff}.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap}.pagination-info{color:var(--muted);font-size:12.5px}.pagination-info strong{color:var(--text);font-weight:700}.pagination-controls{display:flex;gap:4px;align-items:center}.page-btn{min-width:34px;height:34px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid var(--border);color:var(--text);font-weight:600;font-size:12.5px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}.page-btn.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px #6366f152;cursor:default}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-ellipsis{padding:0 6px;color:var(--muted);font-weight:600}.empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:14px}.confirm-dialog{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:32px 30px 26px;box-shadow:0 25px 60px #0f172a4d;text-align:center;animation:confirmPop .22s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}@keyframes confirmPop{0%{transform:scale(.85) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.confirm-dialog:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}.confirm-dialog.tone-danger:before{background:linear-gradient(135deg,#ef4444,#dc2626)}.confirm-dialog.tone-warn:before{background:linear-gradient(135deg,#f59e0b,#d97706)}.confirm-dialog.tone-success:before{background:linear-gradient(135deg,#10b981,#059669)}.confirm-icon{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:4px auto 18px;font-size:32px;font-weight:800;color:#fff;box-shadow:0 10px 24px #00000026}.tone-danger .confirm-icon{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 10px 24px #dc262659}.tone-warn .confirm-icon{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 10px 24px #d9770659}.tone-info .confirm-icon{background:var(--grad);box-shadow:0 10px 24px #6366f159}.tone-success .confirm-icon{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 10px 24px #05966959}.confirm-title{font-size:20px;font-weight:800;color:var(--text);margin:0 0 10px;letter-spacing:-.3px}.confirm-message{font-size:14px;color:var(--muted);margin:0 0 24px;line-height:1.55}.confirm-actions{display:flex;gap:10px;justify-content:center}.confirm-actions .btn{min-width:120px;padding:10px 18px}@media (max-width: 480px){.confirm-dialog{padding:26px 20px 20px;border-radius:16px}.confirm-icon{width:56px;height:56px;font-size:26px}.confirm-title{font-size:17px}.confirm-actions{flex-direction:column-reverse}.confirm-actions .btn{width:100%;min-width:0}}.client-card{display:grid;grid-template-columns:84px 1fr;gap:20px;background:linear-gradient(135deg,#fff,#f5f3ff);border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px;position:relative;overflow:hidden}.client-card:before{content:"";position:absolute;top:0;right:0;width:160px;height:160px;background:var(--grad);opacity:.08;border-radius:50%;transform:translate(40%,-40%);pointer-events:none}.client-avatar{width:68px;height:68px;border-radius:16px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:30px;letter-spacing:-1px;box-shadow:0 10px 24px #6366f159;flex-shrink:0}.client-body{min-width:0;position:relative;z-index:1}.client-name{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.3px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.client-company{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:20px;background:var(--brand-soft);color:var(--brand-dark);border:1px solid #ddd6fe}.client-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.client-info-item.wide{grid-column:1 / -1}.client-info-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:3px}.client-info-value{font-size:13.5px;color:var(--text);font-weight:500;word-break:break-word}@media (max-width: 700px){.client-card{grid-template-columns:60px 1fr;padding:16px;gap:14px}.client-avatar{width:54px;height:54px;font-size:24px;border-radius:14px}.client-name{font-size:16px;margin-bottom:12px}.client-info-grid{grid-template-columns:1fr;gap:10px}}.mobile-header,.menu-toggle,.sidebar-backdrop{display:none}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}.table-scroll table{min-width:560px}@media (max-width: 1100px){.main{padding:24px}.sidebar{width:220px}.page-header h1{font-size:24px}}@media (max-width: 900px){.app{display:block}.sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;transform:translate(-100%);transition:transform .25s ease;z-index:200;box-shadow:8px 0 32px #0f172a33}.sidebar.open{transform:translate(0)}.sidebar-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:199;animation:fadeIn .15s ease}.main{padding:14px;overflow-x:hidden}.mobile-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:8px 12px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:50}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;border:none;width:40px;height:40px;border-radius:10px;font-size:18px;cursor:pointer;box-shadow:0 4px 12px #6366f147}.mobile-brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:16px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.mobile-brand span{width:26px;height:26px;border-radius:7px;background:var(--grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;-webkit-text-fill-color:#fff}.page-header{flex-direction:column;align-items:stretch;margin-bottom:20px}.page-header h1{font-size:22px}.page-header .subtitle{font-size:12.5px}.panel{padding:16px;border-radius:12px}.panel h2{font-size:14px}.form-row,.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}.modal{padding:20px;border-radius:14px;max-height:92vh}.modal.wide{max-width:100%}.modal h2{font-size:17px}.btn-row{flex-wrap:wrap;gap:8px}.btn{padding:8px 12px;font-size:12.5px}.btn.small{padding:5px 9px;font-size:11.5px}.panel>table,.modal>table{display:block;overflow-x:auto;white-space:nowrap;max-width:100%}.pagination{flex-direction:column;align-items:stretch;gap:10px}.pagination-controls{justify-content:center;flex-wrap:wrap}.pagination-info{text-align:center}.stat-card{padding:18px}.stat-card .value{font-size:24px}.order-row,.vendor-row{padding:10px 12px}.order-row .order-id{width:36px;height:36px;font-size:11px}.order-row .order-meta{font-size:11px}.back-link{padding:5px 10px;font-size:12px}.logo-uploader{grid-template-columns:1fr;padding:14px}.modal.invoice-preview{height:calc(100vh - 20px);border-radius:12px}.invoice-preview-head{padding:14px 16px;flex-wrap:wrap;gap:10px}.invoice-preview-head h2{font-size:14px}}@media (max-width: 480px){.main{padding:10px}.stat-card{padding:16px}.stat-card .value{font-size:22px}.page-header h1{font-size:20px}.panel{padding:14px}.see-all{padding:5px 12px 5px 14px;font-size:12px}.modal{padding:16px}.login-box{padding:32px 24px}.login-box h1{font-size:22px}}.dash-top{grid-template-columns:repeat(3,1fr);margin-bottom:20px}.dash-panel{margin-top:20px}.stat-card .hint{font-size:12px;color:var(--muted);margin-top:4px;position:relative;z-index:1}.stat-card.clickable{text-decoration:none;color:inherit;cursor:pointer}.stat-card.clickable:hover{text-decoration:none}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-head h2{margin:0}.see-all{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 16px;border-radius:20px;background:var(--grad-soft);border:1px solid var(--border);color:var(--brand-dark);font-weight:600;font-size:12.5px;text-decoration:none;transition:all .2s ease;position:relative;overflow:hidden}.see-all:after{content:"→";display:inline-block;font-size:14px;transition:transform .2s ease}.see-all:hover{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px #6366f152;text-decoration:none;transform:translateY(-1px)}.see-all:hover:after{transform:translate(4px)}.vendor-list,.orders-list{display:flex;flex-direction:column;gap:8px}.vendor-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--border);color:inherit;text-decoration:none;transition:all .15s}.vendor-row:hover{transform:translate(2px);border-color:var(--brand);text-decoration:none}.vendor-row .rank{width:32px;height:32px;border-radius:8px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}.vendor-row .vendor-name{font-weight:600;color:var(--text);font-size:13.5px}.vendor-row .vendor-rev{font-weight:700;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:14px}.order-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#fff;color:inherit;text-decoration:none;transition:all .15s}.order-row:hover{border-color:var(--brand);background:var(--brand-soft);text-decoration:none}.order-row .order-main{display:flex;align-items:center;gap:12px}.order-row .order-id{width:42px;height:42px;border-radius:10px;background:var(--brand-soft);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}.order-row .order-client{font-weight:600;color:var(--text);font-size:13.5px}.order-row .order-meta{color:var(--muted);font-size:11.5px;margin-top:2px}.order-row .order-right{display:flex;align-items:center;gap:12px}.order-row .order-total{font-weight:700;color:var(--text);font-size:14px}@media (max-width: 1100px){.dash-top{grid-template-columns:repeat(2,1fr)}}@media (max-width: 700px){.dash-top{grid-template-columns:1fr}}