*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#f1f1f3;color:#18181b;min-height:100vh}header{background:linear-gradient(135deg,#0f172a,#1e1b4b);color:#fff;padding:0 24px;height:58px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px #ffffff0f,0 2px 12px #0000004d;position:sticky;top:0;z-index:50}.header-brand{display:flex;align-items:center;gap:12px}.header-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;letter-spacing:-.5px;flex-shrink:0;box-shadow:0 2px 8px #6366f180}.header-title{font-size:15px;font-weight:700;letter-spacing:-.2px}.header-sub{font-size:11px;color:#a5b4fc;letter-spacing:.4px;margin-top:1px}main{max-width:900px;margin:28px auto;padding:0 20px}label{display:block;font-size:12px;font-weight:600;color:#52525b;margin-bottom:5px;margin-top:14px;text-transform:uppercase;letter-spacing:.4px}input[type=email],input[type=password],input[type=text],input[type=number],select{width:100%;padding:9px 12px;border:1.5px solid #e4e4e7;border-radius:8px;font-size:14px;outline:none;background:#fff;transition:border-color .15s,box-shadow .15s;color:#18181b}input:focus,select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11f}.input-readonly{background:#f4f4f5!important;color:#71717a!important;cursor:not-allowed}button.primary{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:9px 20px;border-radius:8px;font-size:14px;cursor:pointer;font-weight:600;letter-spacing:-.1px;transition:opacity .15s,transform .1s;white-space:nowrap}button.primary:hover{opacity:.9;transform:translateY(-1px)}button.primary:active{transform:translateY(0)}button.primary:disabled{background:#a5b4fc;cursor:not-allowed;transform:none;opacity:1}button.secondary{background:#fff;border:1.5px solid #e4e4e7;color:#3f3f46;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;min-height:36px;transition:border-color .15s,color .15s}button.secondary:hover{border-color:#6366f1;color:#6366f1}button.logout{background:#ffffff14;border:1px solid rgba(255,255,255,.18);color:#cbd5e1;padding:6px 14px;border-radius:7px;cursor:pointer;font-size:13px;transition:background .15s,color .15s}button.logout:hover{background:#ffffff26;color:#fff}.msg{font-size:12px;margin-top:6px}.msg.ok{color:#16a34a}.msg.err{color:#dc2626}.login-card{background:#fff;border:1px solid #e4e4e7;border-radius:14px;padding:36px 32px;max-width:380px;margin:60px auto 0;box-shadow:0 4px 24px #00000014}.login-card h2{font-size:20px;font-weight:700;margin-bottom:4px}.login-card .login-sub{font-size:13px;color:#71717a;margin-bottom:4px}.login-card button{margin-top:20px;width:100%;padding:11px;font-size:15px}@media (max-width: 420px){.login-card{padding:28px 18px;margin-top:32px}}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:28px}.kpi-tile{background:#fff;border:1px solid #e4e4e7;border-radius:12px;padding:18px 20px;box-shadow:0 1px 4px #0000000d;border-top:3px solid #e4e4e7;transition:box-shadow .2s,transform .2s}.kpi-tile:hover{box-shadow:0 4px 14px #00000014;transform:translateY(-1px)}.kpi-tile--indigo{border-top-color:#6366f1}.kpi-tile--blue{border-top-color:#3b82f6}.kpi-tile--violet{border-top-color:#8b5cf6}.kpi-tile--amber{border-top-color:#f59e0b}.kpi-label{font-size:11px;font-weight:600;color:#71717a;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.kpi-value{font-size:32px;font-weight:800;color:#18181b;line-height:1;letter-spacing:-1px}.kpi-sub{font-size:11px;color:#a1a1aa;margin-top:5px}.kpi-plan-rows{display:flex;flex-direction:column;gap:7px;margin-top:2px}.kpi-plan-row{display:flex;justify-content:space-between;align-items:center}.kpi-plan-name{font-size:12px;color:#52525b}.kpi-plan-count{font-size:16px;font-weight:700;color:#18181b}.section-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-title{font-size:13px;font-weight:700;color:#52525b;text-transform:uppercase;letter-spacing:.7px}.section-count{font-size:12px;color:#a1a1aa;margin-top:2px}.state-msg{font-size:14px;color:#71717a;padding:12px 0}.empty-state{text-align:center;padding:48px 24px;background:#fff;border:1px dashed #d4d4d8;border-radius:12px}.empty-state-icon{font-size:36px;margin-bottom:10px}.empty-state-text{font-size:15px;font-weight:600;color:#3f3f46;margin-bottom:4px}.empty-state-sub{font-size:13px;color:#71717a}.studio-card{background:#fff;border:1px solid #e4e4e7;border-radius:12px;margin-bottom:10px;box-shadow:0 1px 3px #0000000d;transition:box-shadow .2s ease}.studio-card:hover{box-shadow:0 4px 16px #00000017}.studio-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;-webkit-user-select:none;user-select:none;gap:10px;border-radius:12px;transition:background .15s}.studio-header:hover{background:#fafafa}.studio-card.open .studio-header{border-radius:12px 12px 0 0}.studio-name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#18181b}.studio-meta{font-size:11px;color:#a1a1aa;margin-top:3px;font-family:ui-monospace,monospace}.studio-header-left{min-width:0;flex:1}.studio-header-right{display:flex;gap:8px;align-items:center;flex-shrink:0}.badge{font-size:10px;padding:3px 9px;border-radius:999px;font-weight:600;white-space:nowrap;letter-spacing:.2px}.badge-starter{background:#f4f4f5;color:#52525b}.badge-pro{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.badge-enterprise{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}.badge-inactive{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.toggle-icon{font-size:11px;color:#a1a1aa;transition:transform .25s ease}.studio-card.open .toggle-icon{transform:rotate(180deg)}.studio-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}.studio-collapse.open{grid-template-rows:1fr}.studio-collapse-inner{overflow:hidden}.studio-body{border-top:1px solid #f4f4f5;padding:18px}@media (max-width: 400px){.studio-body,.studio-header{padding:12px}}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:4px;border-radius:8px;border:1px solid #f0f0f1}table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}th{text-align:left;padding:8px 12px;color:#71717a;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;background:#fafafa;border-bottom:1px solid #e4e4e7}td{padding:9px 12px;border-bottom:1px solid #f4f4f5;vertical-align:middle}tr:last-child td{border-bottom:none}tr:hover td{background:#fafafa}.role-tag{font-size:10px;padding:3px 8px;border-radius:999px;font-weight:600;background:#f4f4f5;color:#52525b;white-space:nowrap;letter-spacing:.2px}.action-btn{background:#fff;border:1.5px solid #e4e4e7;color:#3f3f46;padding:5px 10px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;min-height:30px;min-width:44px;transition:border-color .15s,color .15s}.action-btn:hover{border-color:#6366f1;color:#6366f1}.field-hint{font-size:11px;color:#a1a1aa;margin-top:5px}.field-hint strong{color:#6366f1}.add-user-form{margin-top:16px;padding-top:16px;border-top:1px solid #f4f4f5}.add-user-form h4{font-size:12px;font-weight:700;margin-bottom:10px;color:#52525b;text-transform:uppercase;letter-spacing:.5px}.user-form-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}.user-form-row .field{flex:1;min-width:120px}.user-form-row input,.user-form-row select{font-size:13px;padding:7px 10px}@media (max-width: 480px){.user-form-row .field{flex:1 1 100%}.user-form-row button.secondary{width:100%}}@keyframes modal-in{0%{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:#fff;border-radius:14px;padding:26px;width:100%;max-width:420px;box-shadow:0 20px 60px #00000038;animation:modal-in .18s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.modal-header h3{font-size:16px;font-weight:700;color:#18181b}.modal-close{background:none;border:none;font-size:16px;color:#a1a1aa;cursor:pointer;padding:4px 8px;line-height:1;min-height:34px;min-width:34px;border-radius:6px;transition:background .15s,color .15s}.modal-close:hover{background:#f4f4f5;color:#18181b}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}@media (max-width: 480px){.modal{padding:22px 16px}.modal-actions{flex-direction:column-reverse}.modal-actions button{width:100%;justify-content:center}}