:root{--bg-primary: #f8f9fc;--bg-secondary: #ffffff;--bg-card: #ffffff;--bg-hover: #f1f3f9;--border: #e2e6ef;--border-focus: #6366f1;--text-primary: #0f1117;--text-secondary: #5a6380;--text-muted: #9ba3b8;--accent: #6366f1;--accent-hover: #4f46e5;--accent-light: #eef2ff;--success: #10b981;--success-strong: #065f46;--success-soft: #d1fae5;--warning: #f59e0b;--warning-strong: #92400e;--warning-soft: #fef3c7;--danger: #ef4444;--danger-strong: #991b1b;--danger-soft: #fee2e2;--danger-light: #fef2f2;--info-strong: #4338ca;--text-xs: 11px;--text-sm: 13px;--text-base: 14px;--text-lg: 16px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .06)}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body,#root{min-height:100%}html{font-size:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:var(--text-base);color:var(--text-primary);background:var(--bg-primary);line-height:1.45}a{color:inherit;text-decoration:none}img,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg-primary)}.login-card{width:400px;max-width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:40px}.login-head{text-align:center;margin-bottom:32px}.login-head h1{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary)}.login-head p{margin-top:6px;font-size:var(--text-sm);color:var(--text-secondary)}.login-field{margin-bottom:20px}.login-field label{display:block;margin-bottom:6px;font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}.login-submit{width:100%;height:42px;font-size:var(--text-base);font-weight:600}.login-footnote{display:block;margin-top:18px;text-align:center;font-size:var(--text-xs);color:var(--text-muted)}.admin-page{min-height:100vh;background:var(--bg-primary)}.app-topbar{position:fixed;top:0;left:0;right:0;height:60px;border-bottom:1px solid var(--border);background:var(--bg-secondary);box-shadow:var(--shadow-sm);z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px}.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px}.topbar-right{justify-content:flex-end}.topbar-breadcrumb{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}.company-selector{min-width:280px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);display:flex;align-items:center;gap:10px;padding:6px 10px;position:relative;box-shadow:var(--shadow-sm)}.company-selector select{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.company-avatar,.user-avatar{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;font-size:var(--text-xs);font-weight:700;color:var(--accent);background:var(--accent-light)}.company-name{display:block;font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}.topbar-separator{width:1px;height:24px;background:var(--border)}.topbar-dropdown-wrap{position:relative}.topbar-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:340px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:150}.user-dropdown{width:180px}.dropdown-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--border)}.dropdown-list{max-height:280px;overflow-y:auto}.dropdown-empty{padding:12px;color:var(--text-secondary);font-size:var(--text-sm)}.notification-row{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:4px}.notification-row.unread p{font-weight:700}.notification-row p{font-size:var(--text-sm);color:var(--text-primary)}.notification-row small,.notification-row span{color:var(--text-secondary);font-size:var(--text-xs)}.profile-trigger{border:0;background:transparent;padding:0;color:var(--text-primary);display:flex;align-items:center;gap:8px}.user-name{font-size:var(--text-sm);font-weight:500}.notification-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--bg-secondary);font-size:10px;display:grid;place-items:center}.app-sidebar{position:fixed;top:60px;left:0;bottom:0;width:240px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-brand{height:48px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 12px}.brand-mark{width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--accent-light);color:var(--accent);font-size:var(--text-sm);font-weight:700}.brand-title{font-size:var(--text-sm);font-weight:700}.sidebar-brand small{font-size:var(--text-xs);color:var(--text-muted)}.sidebar-nav{overflow-y:auto;padding-bottom:78px}.sidebar-section-label{padding:0 12px;margin-top:20px;margin-bottom:8px;font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.sidebar-items{padding:0 8px;display:grid;gap:4px}.sidebar-item{height:36px;padding:0 12px;display:flex;align-items:center;gap:10px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);transition:all .15s ease}.sidebar-item-icon{width:18px;height:18px;display:grid;place-items:center;color:var(--text-muted)}.sidebar-item-label{font-size:var(--text-sm);font-weight:500;text-align:left}.sidebar-item:hover{background:var(--bg-hover);color:var(--text-primary)}.sidebar-item:hover .sidebar-item-icon{color:var(--text-primary)}.sidebar-item.active{background:var(--accent-light);color:var(--accent)}.sidebar-item.active .sidebar-item-icon,.sidebar-item.active .sidebar-item-label{color:var(--accent);font-weight:600}.sidebar-user-strip{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--border);padding:10px 12px;display:flex;align-items:center;gap:10px;background:var(--bg-secondary)}.sidebar-user-strip p{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}.sidebar-user-strip small{font-size:var(--text-xs);color:var(--text-secondary)}.content.app-main-content{margin-top:60px;margin-left:240px;min-height:calc(100vh - 60px);background:var(--bg-primary);padding:24px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box;width:calc(100vw - 240px);max-width:100%;overflow-x:hidden}.content.app-main-content>*{max-width:100%;box-sizing:border-box}.panel-page{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card)}.panel-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-header h2{font-size:var(--text-xl);font-weight:700;color:var(--text-primary)}.panel-header p{margin-top:2px;font-size:var(--text-sm);color:var(--text-secondary)}.panel-filter-bar{border-bottom:1px solid var(--border);background:var(--bg-primary);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-filter-inner{display:flex;gap:12px;align-items:center;width:100%}.panel-filter-inner>input{flex:1;max-width:320px}.panel-content-area{padding:24px;background:var(--bg-primary);box-sizing:border-box;width:100%;max-width:100%;overflow-x:hidden}.status-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.status{font-size:var(--text-sm);color:var(--text-secondary)}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:16px}.card h2{font-size:var(--text-xl);margin-bottom:10px}.card h3{font-size:var(--text-lg);margin-bottom:8px}.stack{display:flex;flex-direction:column;gap:10px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}button{border:1px solid var(--accent);background:var(--accent);color:var(--bg-secondary);border-radius:var(--radius-md);padding:8px 16px;font-size:var(--text-sm);font-weight:600;box-shadow:var(--shadow-sm);transition:all .15s ease;cursor:pointer}button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}button:disabled{opacity:.6;cursor:not-allowed}.secondary-button,.text-button,.icon-button{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);box-shadow:none}.secondary-button:hover,.text-button:hover,.icon-button:hover{background:var(--bg-hover);border-color:var(--border)}.text-button{padding:6px 10px}.menu-row{width:100%;justify-content:flex-start;border:0;border-radius:0}.icon-button{width:32px;height:32px;border-radius:var(--radius-md);padding:0;display:grid;place-items:center;position:relative}.mobile-only{display:none}input,select,textarea{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 12px;font-size:var(--text-base);color:var(--text-primary)}input::placeholder,textarea::placeholder{color:var(--text-muted)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px #6366f11f}textarea{min-height:90px;resize:vertical}.table{width:100%;border-collapse:collapse;table-layout:auto;display:block;overflow-x:auto;max-width:100%}.table thead{background:var(--bg-primary)}.table th{font-size:var(--text-xs);color:var(--text-secondary);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;text-align:left}.table td{padding:10px 16px;font-size:var(--text-sm);color:var(--text-primary);line-height:1.25}.table tr{border-bottom:1px solid var(--border);line-height:normal}.table tbody tr:hover{background:var(--bg-hover)}.table th:first-child,.table td:first-child{min-width:80px}.table th:nth-child(2),.table td:nth-child(2){min-width:200px}.table th:nth-child(3),.table td:nth-child(3){min-width:80px}.table th:last-child,.table td:last-child{width:120px;text-align:right}.pagination{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}.empty-state{border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--bg-primary);padding:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}.form-box{margin-top:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary);padding:12px}.card-minor{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);padding:10px}.checkbox{display:flex;align-items:center;gap:8px;font-size:var(--text-sm)}.checkbox input{width:16px;height:16px}.error-banner{border:1px solid var(--danger);background:var(--danger-light);color:var(--danger);border-radius:var(--radius-md);padding:10px 12px;font-size:var(--text-sm)}.dropzone{border:1px dashed var(--border);border-radius:var(--radius-md);padding:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.dropzone.active{border-color:var(--accent);background:var(--accent-light)}.timeline{border-left:2px solid var(--accent-light);padding-left:10px;display:grid;gap:8px}.timeline-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;background:var(--bg-card)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:200}.modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:201;width:520px;max-width:90vw;max-height:85vh;overflow-y:auto;background:var(--bg-secondary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:28px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-header h3{font-size:var(--text-lg);font-weight:700}.modal-body{display:grid;gap:16px}.modal-body label{display:block;margin-bottom:6px;font-size:var(--text-sm);font-weight:500}.modal-footer{position:sticky;bottom:0;background:var(--bg-secondary);margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}.detail p{margin:4px 0;color:var(--text-secondary);font-size:var(--text-sm)}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:var(--text-xs);font-weight:500}.badge.success{background:var(--success-soft);color:var(--success-strong)}.badge.warning{background:var(--warning-soft);color:var(--warning-strong)}.badge.danger{background:var(--danger-soft);color:var(--danger-strong)}.badge.info{background:var(--accent-light);color:var(--info-strong)}.badge.neutral{background:var(--bg-hover);color:var(--text-secondary)}.status-text-danger{color:var(--danger-strong)}.status-text-warning{color:var(--warning-strong)}.status-text-success{color:var(--success-strong)}.status-text-default{color:var(--text-primary)}.dashboard-page{display:flex;flex-direction:column;gap:16px}.dashboard-header-row{display:flex;justify-content:space-between;align-items:center}.dashboard-header-row h1{font-size:var(--text-2xl);color:var(--text-primary);font-weight:700}.dashboard-header-row p{font-size:var(--text-sm);color:var(--text-secondary)}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px;display:flex;flex-direction:column;gap:10px}.kpi-head{display:flex;justify-content:space-between;align-items:center}.kpi-head span{font-size:var(--text-sm);color:var(--text-secondary)}.kpi-head i{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-style:normal;background:var(--accent-light);color:var(--accent)}.kpi-value{font-size:var(--text-3xl);color:var(--text-primary);font-weight:700}.trend{font-size:var(--text-sm);font-weight:600}.trend.up{color:var(--success)}.trend.down{color:var(--danger)}.dashboard-main-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.revenue-card{grid-column:span 2}.revenue-card>p{color:var(--text-secondary);font-size:var(--text-sm)}.revenue-chart{height:280px;display:flex;gap:12px;align-items:end;padding-top:18px}.chart-col{flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px;height:100%}.chart-col span{width:100%;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-hover) 100%)}.chart-col small{font-size:var(--text-xs);color:var(--text-secondary)}.activity-card{height:100%}.activity-list{height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.activity-row{display:flex;gap:10px;align-items:flex-start}.activity-dot{margin-top:4px;width:10px;height:10px;border-radius:999px;background:var(--text-muted)}.activity-dot.info{background:var(--accent)}.activity-dot.neutral{background:var(--text-muted)}.activity-row p{font-size:var(--text-sm);color:var(--text-primary)}.activity-row small{font-size:var(--text-xs);color:var(--text-secondary)}.dashboard-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.top-client-list{display:flex;flex-direction:column;gap:10px}.top-client-row{display:grid;grid-template-columns:20px 1fr 1fr auto;gap:10px;align-items:center}.top-client-row span{font-size:var(--text-sm);color:var(--text-primary)}.top-client-row small{font-size:var(--text-sm);color:var(--text-secondary)}.revenue-bar{height:8px;background:var(--bg-hover);border-radius:999px;overflow:hidden}.revenue-bar em{display:block;height:100%;background:var(--accent)}@media (max-width: 1100px){.app-topbar{grid-template-columns:1fr;height:auto;min-height:60px;gap:8px;padding:10px 12px}.app-sidebar{top:110px}.content.app-main-content{margin-top:110px}}@media (max-width: 960px){.app-sidebar{width:100%;position:static;border-right:0;border-bottom:1px solid var(--border)}.content.app-main-content{margin:0;min-height:auto;width:100%}.grid-2{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-main-grid,.dashboard-bottom-grid{grid-template-columns:1fr}.revenue-card{grid-column:span 1}.mobile-only{display:grid}}