:root{--primary-color: #4CAF50;--primary-dark: #388E3C;--primary-light: #C8E6C9;--secondary-color: #2196F3;--secondary-dark: #1976D2;--secondary-light: #BBDEFB;--accent-color: #FF9800;--text-primary: #212121;--text-secondary: #757575;--divider-color: #BDBDBD;--background-color: #F5F5F5;--card-color: #FFFFFF;--error-color: #F44336;--success-color: #4CAF50;--warning-color: #FFC107;--info-color: #2196F3}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--background-color);color:var(--text-primary);line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 20px}.layout{display:flex;min-height:100vh}.main-content{flex:1;padding:20px;margin-left:250px;transition:margin-left .3s ease}.sidebar{width:250px;background-color:var(--card-color);box-shadow:2px 0 5px #0000001a;position:fixed;height:100vh;overflow-y:auto;transition:transform .3s ease}.sidebar-header{padding:20px;text-align:center;border-bottom:1px solid var(--divider-color)}.sidebar-logo{font-size:24px;font-weight:700;color:var(--primary-color)}.sidebar-nav{padding:20px 0}.nav-item{padding:10px 20px;display:flex;align-items:center;color:var(--text-secondary);text-decoration:none;transition:background-color .2s ease}.nav-item:hover{background-color:var(--primary-light);color:var(--primary-dark)}.nav-item.active{background-color:var(--primary-light);color:var(--primary-dark);border-left:4px solid var(--primary-color)}.nav-item i{margin-right:10px;width:20px;text-align:center}.header{background-color:var(--card-color);box-shadow:0 2px 5px #0000001a;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.page-title{font-size:24px;font-weight:700}.user-menu{display:flex;align-items:center}.user-avatar{width:40px;height:40px;border-radius:50%;background-color:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary-dark);font-weight:700;margin-right:10px}.card{background-color:var(--card-color);border-radius:8px;box-shadow:0 2px 5px #0000001a;padding:20px;margin-bottom:20px}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.card-title{font-size:18px;font-weight:700}.card-content,.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500}.form-control{width:100%;padding:10px;border:1px solid var(--divider-color);border-radius:4px;font-size:16px}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-light)}.btn{padding:10px 15px;border:none;border-radius:4px;font-size:16px;cursor:pointer;transition:background-color .2s ease}.btn.primary{background-color:var(--primary-color);color:#fff}.btn.primary:hover{background-color:var(--primary-dark)}.btn.secondary{background-color:var(--secondary-color);color:#fff}.btn.secondary:hover{background-color:var(--secondary-dark)}.btn.danger{background-color:var(--error-color);color:#fff}.btn.danger:hover{background-color:#d32f2f}@media (max-width: 768px){.sidebar{transform:translate(-100%);z-index:1000}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.mobile-menu-toggle{display:block}}.mobile-menu-toggle{display:none;background:none;border:none;font-size:24px;color:var(--text-primary);cursor:pointer}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.stat-card{text-align:center;padding:20px}.stat-value{font-size:36px;font-weight:700;color:var(--primary-color);margin:10px 0}.stat-label{color:var(--text-secondary)}.chart-container{height:300px;margin-bottom:20px}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--divider-color)}th{background-color:var(--primary-light);color:var(--primary-dark);font-weight:700}tr:hover{background-color:#00000005}.alert{padding:15px;border-radius:4px;margin-bottom:20px}.alert.success{background-color:var(--success-color);color:#fff}.alert.error{background-color:var(--error-color);color:#fff}.alert.warning{background-color:var(--warning-color);color:var(--text-primary)}.alert.info{background-color:var(--info-color);color:#fff}.loading-spinner{display:flex;justify-content:center;align-items:center;height:100px}.loading-spinner i{font-size:24px;color:var(--primary-color);margin-right:10px}.notion-integration{padding:20px}.notion-setup-form{max-width:600px}.form-description{margin-bottom:20px;padding:15px;background-color:var(--info-color);color:#fff;border-radius:4px}.form-section{margin-top:30px}.status-card{display:flex;align-items:center;padding:15px;background-color:var(--primary-light);border-radius:4px;margin-bottom:20px}.status-icon{font-size:24px;margin-right:15px}.status-icon.success{color:var(--success-color)}.notion-actions{margin-top:30px}.export-options{display:flex;flex-wrap:wrap;gap:15px;margin:15px 0}.export-option{display:flex;align-items:center}.notion-help{margin-top:40px;padding:20px;background-color:var(--background-color);border-radius:4px}.settings-page{padding:20px}.page-header{margin-bottom:30px}.settings-container{display:flex;background-color:var(--card-color);border-radius:8px;box-shadow:0 2px 5px #0000001a;overflow:hidden}.settings-tabs{width:250px;background-color:var(--background-color);padding:20px 0}.tab{padding:15px 20px;display:flex;align-items:center;cursor:pointer;transition:background-color .2s ease}.tab i{margin-right:10px;width:20px;text-align:center}.tab:hover{background-color:var(--primary-light)}.tab.active{background-color:var(--primary-color);color:#fff}.settings-content{flex:1;padding:30px}.settings-section{margin-bottom:40px}.settings-section h3{margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--divider-color)}.form-group.checkbox{display:flex;align-items:center}.form-group.checkbox input{margin-right:10px}.delete-options,.export-options{display:flex;gap:15px;margin-top:15px}.integration-status{display:flex;align-items:center;padding:15px;background-color:var(--background-color);border-radius:4px;margin-bottom:20px}.integration-status.connected{background-color:var(--success-color);color:#fff}.status-content{flex:1}@media (max-width: 768px){.settings-container{flex-direction:column}.settings-tabs{width:100%;display:flex;overflow-x:auto;padding:10px}.tab{padding:10px 15px;white-space:nowrap}.tab i{margin-right:5px}.settings-content{padding:20px}.delete-options,.export-options{flex-direction:column}}
