:root{--color-primary: #3B82F6;--color-primary-dark: #2563EB;--color-secondary: #10B981;--color-danger: #EF4444;--color-warning: #F59E0B;--color-bg: #0F172A;--color-bg-secondary: #1E293B;--color-bg-tertiary: #334155;--color-text: #F8FAFC;--color-text-muted: #94A3B8;--color-border: #334155;--font-family: "Inter", system-ui, sans-serif;--radius: 8px;--radius-lg: 12px;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}.dashboard{display:flex;min-height:100vh}.sidebar{width:260px;background:var(--color-bg-secondary);border-right:1px solid var(--color-border);padding:20px 0;display:flex;flex-direction:column}.sidebar__logo{padding:0 20px 20px;border-bottom:1px solid var(--color-border);margin-bottom:20px}.sidebar__logo h1{font-size:1.25rem;font-weight:700;color:var(--color-primary)}.sidebar__logo span{font-size:.75rem;color:var(--color-text-muted)}.sidebar__nav{flex:1}.sidebar__link{display:flex;align-items:center;gap:12px;padding:12px 20px;color:var(--color-text-muted);text-decoration:none;transition:all .2s}.sidebar__link:hover{background:var(--color-bg-tertiary);color:var(--color-text)}.sidebar__link--active{background:var(--color-primary);color:#fff}.sidebar__link--active:hover{background:var(--color-primary-dark)}.main{flex:1;padding:30px;overflow-y:auto}.page-header{margin-bottom:30px}.page-header h1{font-size:1.75rem;font-weight:700;margin-bottom:8px}.page-header p{color:var(--color-text-muted)}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px}.card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.card__title{font-size:1.1rem;font-weight:600}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px}.stat-card__label{font-size:.85rem;color:var(--color-text-muted);margin-bottom:8px}.stat-card__value{font-size:2rem;font-weight:700}.stat-card__change{font-size:.85rem;margin-top:8px}.stat-card__change--positive{color:var(--color-secondary)}.stat-card__change--negative{color:var(--color-danger)}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:var(--radius);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.btn--primary{background:var(--color-primary);color:#fff}.btn--primary:hover{background:var(--color-primary-dark)}.btn--secondary{background:var(--color-bg-tertiary);color:var(--color-text)}.btn--secondary:hover{background:var(--color-border)}.btn--danger{background:var(--color-danger);color:#fff}.form-group{margin-bottom:20px}.form-label{display:block;font-size:.9rem;font-weight:500;margin-bottom:8px;color:var(--color-text-muted)}.form-input{width:100%;padding:12px 16px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);font-size:.95rem;transition:border-color .2s}.form-input:focus{outline:none;border-color:var(--color-primary)}.form-input::placeholder{color:var(--color-text-muted)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--color-border)}.table th{font-weight:600;color:var(--color-text-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.table tr:hover td{background:var(--color-bg-tertiary)}.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:500}.badge--success{background:#10b98133;color:var(--color-secondary)}.badge--warning{background:#f59e0b33;color:var(--color-warning)}.badge--danger{background:#ef444433;color:var(--color-danger)}.preview-frame{border:2px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;background:#000}.preview-frame iframe{width:100%;height:100%;border:none}.color-picker{display:flex;align-items:center;gap:12px}.color-picker__input{width:50px;height:40px;border:none;border-radius:var(--radius);cursor:pointer}.color-picker__value{font-family:monospace;color:var(--color-text-muted)}.empty-state{text-align:center;padding:60px 20px;color:var(--color-text-muted)}.empty-state__icon{font-size:3rem;margin-bottom:20px;opacity:.5}.empty-state__title{font-size:1.25rem;font-weight:600;margin-bottom:8px;color:var(--color-text)}.loading{display:flex;align-items:center;justify-content:center;padding:40px}.loading__spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-secondary) 100%)}.login-card{width:100%;max-width:420px;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-lg)}.login-header{text-align:center;margin-bottom:30px}.login-header h1{font-size:1.75rem;font-weight:700;color:var(--color-primary);margin-bottom:8px}.login-header p{color:var(--color-text-muted)}.login-form{margin-bottom:30px}.login-error{background:#ef44441a;border:1px solid var(--color-danger);color:var(--color-danger);padding:12px 16px;border-radius:var(--radius);margin-bottom:20px;font-size:.9rem}.login-btn{width:100%;justify-content:center;padding:14px 20px}.login-footer{text-align:center;padding-top:20px;border-top:1px solid var(--color-border)}.login-footer a{color:var(--color-text-muted);text-decoration:none;font-size:.85rem}.login-footer a:hover{color:var(--color-primary)}.sidebar__footer{padding:20px;border-top:1px solid var(--color-border);margin-top:auto}.sidebar__user{margin-bottom:15px}.sidebar__user-email{display:block;font-size:.9rem;color:var(--color-text);word-break:break-all}.sidebar__user-role{display:inline-block;font-size:.75rem;color:var(--color-text-muted);background:var(--color-bg-tertiary);padding:2px 8px;border-radius:10px;margin-top:5px;text-transform:capitalize}.sidebar__signout{width:100%;padding:10px;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-muted);cursor:pointer;transition:all .2s;margin-bottom:15px}.sidebar__signout:hover{background:var(--color-bg-tertiary);color:var(--color-text)}.sidebar__powered{display:block;color:var(--color-text-muted);text-decoration:none;font-size:.8rem;text-align:center}.sidebar__powered:hover{color:var(--color-primary)}.client-selector{margin-bottom:30px}.client-selector__dropdown{display:flex;align-items:center;gap:15px}.client-selector__label{font-size:.9rem;color:var(--color-text-muted);white-space:nowrap}.client-selector__select{flex:1;max-width:400px;padding:12px 16px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);font-size:.95rem;cursor:pointer;transition:border-color .2s}.client-selector__select:focus{outline:none;border-color:var(--color-primary)}.badge--info{background:#3b82f633;color:var(--color-primary)}.badge--gray{background:#94a3b833;color:var(--color-text-muted)}.toggle{position:relative;display:inline-block;width:48px;height:26px}.toggle input{opacity:0;width:0;height:0}.toggle__slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--color-bg-tertiary);transition:.3s;border-radius:26px}.toggle__slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%}.toggle input:checked+.toggle__slider{background:var(--color-primary)}.toggle input:checked+.toggle__slider:before{transform:translate(22px)}@media (max-width: 768px){.dashboard{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--color-border)}.sidebar__nav{display:flex;overflow-x:auto}.sidebar__link{white-space:nowrap}.stats-grid{grid-template-columns:1fr}.login-card{padding:30px 20px}}