.page-container{min-height:100vh;background-color:var(--bg-secondary);display:flex;flex-direction:column}.page-content{flex:1;padding:var(--spacing-lg);max-width:1200px;width:100%;margin:0 auto}@media(max-width:768px){.page-content{padding:var(--spacing-md)}}.page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;min-height:64px}.page-header-left,.page-header-right{flex:0 0 60px;display:flex;align-items:center}.page-header-right{justify-content:flex-end}.page-header-title{flex:1;text-align:center;font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.back-button{min-height:var(--touch-target);min-width:var(--touch-target);padding:var(--spacing-sm);background-color:transparent;color:var(--text-primary);border:none;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.back-button:hover{background-color:var(--bg-secondary)}.back-button:active{transform:scale(.95)}.role-card{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background-color:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);cursor:pointer;transition:all .2s ease;border:2px solid transparent}.role-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-color);transform:translateY(-2px)}.role-card:active{transform:translateY(0)}.role-avatar{width:60px;height:60px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-2xl);font-weight:700;color:#fff;flex-shrink:0}.role-info{flex:1;min-width:0}.role-header{display:flex;align-items:baseline;gap:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.role-name{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin:0}.role-relation{font-size:var(--font-sm);color:var(--text-secondary)}.role-stats{display:flex;flex-direction:column;gap:var(--spacing-xs)}.blood-pressure{display:flex;align-items:baseline;gap:var(--spacing-xs);font-weight:600}.bp-value{font-size:var(--font-lg)}.bp-value.systolic{color:var(--danger-color)}.bp-value.diastolic{color:var(--primary-color)}.bp-separator{color:var(--text-secondary)}.record-meta{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-sm);color:var(--text-secondary)}.record-date{font-weight:500}.medicine-badge{padding:2px 8px;background-color:#4ecdc426;color:var(--primary-color);border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}.no-record{font-size:var(--font-sm);color:var(--text-secondary);font-style:italic}.role-status{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-xs);flex-shrink:0}.chevron-right{color:var(--text-light)}@media(max-width:768px){.role-card{padding:var(--spacing-md)}.role-avatar{width:50px;height:50px;font-size:var(--font-xl)}.role-name{font-size:var(--font-lg)}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-lg);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background-color:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.modal-title{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin:0}.modal-close-button{min-height:var(--touch-target);min-width:var(--touch-target);padding:var(--spacing-sm);background-color:transparent;color:var(--text-secondary);border:none;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.modal-close-button:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.modal-body{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-lg);border-top:1px solid var(--border-color);display:flex;gap:var(--spacing-md);justify-content:flex-end}@media(max-width:768px){.modal-overlay{padding:var(--spacing-md)}.modal-content{max-height:95vh}}.roles-grid{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-2xl)}.add-role-button{width:100%;font-size:var(--font-lg);min-height:56px;box-shadow:var(--shadow-md)}.add-role-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-group label{font-size:var(--font-base);font-weight:600;color:var(--text-primary)}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;font-weight:500}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer}.threshold-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md)}@media(max-width:768px){.threshold-inputs{grid-template-columns:1fr}}.record-form-container{background-color:var(--bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.date-selector{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.date-nav-button{min-height:var(--touch-target);min-width:var(--touch-target);padding:var(--spacing-sm);background-color:var(--bg-secondary);color:var(--text-primary);border:none;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.date-nav-button:hover{background-color:var(--bg-tertiary)}.current-date{flex:1;text-align:center}.date-text{font-size:var(--font-xl);font-weight:700;color:var(--text-primary)}.record-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.blood-pressure-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.input-with-unit{position:relative;display:flex;align-items:center}.input-with-unit input{flex:1;padding-right:70px}.input-with-unit .unit{position:absolute;right:var(--spacing-md);color:var(--text-secondary);font-size:var(--font-sm);pointer-events:none}.medicine-toggle{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md);cursor:pointer;transition:background-color .2s ease}.medicine-toggle:hover{background-color:var(--bg-tertiary)}.medicine-toggle input[type=checkbox]{width:24px;height:24px;cursor:pointer}.toggle-text{font-size:var(--font-base);font-weight:600;color:var(--text-primary)}.submit-button{width:100%;font-size:var(--font-lg)}.warning-alert{margin-top:var(--spacing-lg);padding:var(--spacing-md);background-color:#ff6b6b1a;border:2px solid var(--danger-color);border-radius:var(--radius-md);display:flex;gap:var(--spacing-md);align-items:flex-start}.warning-alert svg{flex-shrink:0;color:var(--danger-color);margin-top:2px}.warning-alert strong{color:var(--danger-color);font-size:var(--font-base);display:block;margin-bottom:var(--spacing-xs)}.warning-alert p{margin:0;font-size:var(--font-sm);color:var(--text-primary);line-height:1.5}@media(max-width:768px){.blood-pressure-inputs{grid-template-columns:1fr}}.record-list-container{background-color:var(--bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.record-list-title{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin:0 0 var(--spacing-md) 0;display:flex;align-items:baseline;gap:var(--spacing-xs)}.record-count{font-size:var(--font-sm);color:var(--text-secondary);font-weight:500}.no-records{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);color:var(--text-secondary)}.no-records svg{color:var(--text-light);margin-bottom:var(--spacing-md)}.no-records p{font-size:var(--font-lg);font-weight:600;margin:0 0 var(--spacing-xs) 0}.no-records span{font-size:var(--font-sm)}.record-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.record-item{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all .2s ease;position:relative}.record-item:hover{border-color:var(--primary-color);background-color:var(--bg-secondary)}.record-item.abnormal{border-color:var(--danger-color);background-color:#ff6b6b0d}.record-date-section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:70px;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--bg-secondary);border-radius:var(--radius-md)}.record-date{font-size:var(--font-base);font-weight:700;color:var(--text-primary);white-space:nowrap}.record-weekday{font-size:var(--font-xs);color:var(--text-secondary)}.record-data{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.blood-pressure-values{display:flex;align-items:baseline;gap:var(--spacing-xs);font-weight:600}.bp-value.systolic{font-size:var(--font-xl);color:var(--danger-color)}.bp-value.diastolic{font-size:var(--font-xl);color:var(--primary-color)}.bp-separator{font-size:var(--font-lg);color:var(--text-secondary)}.bp-unit{font-size:var(--font-sm);color:var(--text-secondary);margin-left:var(--spacing-xs)}.record-meta{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.medicine-badge,.note-indicator{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background-color:#4ecdc426;color:var(--primary-color);border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600}.note-indicator{background-color:#7f8c8d26;color:var(--text-secondary);cursor:help}.record-note{margin-top:var(--spacing-xs);padding:var(--spacing-sm);background-color:var(--bg-secondary);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-secondary);line-height:1.5}.warning-icon{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);color:var(--danger-color)}@media(max-width:768px){.record-item{flex-direction:column}.record-date-section{flex-direction:row;width:100%;justify-content:space-between}.warning-icon{position:static;align-self:flex-end}}.chart-container{background-color:var(--bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md);flex-wrap:wrap;gap:var(--spacing-md)}.chart-title{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin:0}.chart-tabs{display:flex;gap:var(--spacing-xs);background-color:var(--bg-secondary);padding:4px;border-radius:var(--radius-md)}.tab-button{padding:var(--spacing-xs) var(--spacing-md);background-color:transparent;color:var(--text-secondary);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);font-weight:600;transition:all .2s ease;min-height:36px}.tab-button:hover{color:var(--text-primary)}.tab-button.active{background-color:var(--primary-color);color:#fff}.chart-legend-note{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md);flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-sm);color:var(--text-secondary)}.legend-dot{width:8px;height:8px;border-radius:50%;background-color:var(--text-light)}.legend-dot.larger{width:12px;height:12px;background-color:var(--primary-color)}.chart-wrapper{margin:0 -var(--spacing-sm)}@media(max-width:768px){.chart-header{flex-direction:column;align-items:flex-start}.chart-tabs{width:100%}.tab-button{flex:1}.chart-wrapper{margin:0}}.ai-summary-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);color:#fff}.ai-summary-header{margin-bottom:var(--spacing-md)}.ai-summary-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);margin-bottom:var(--spacing-xs);flex-wrap:wrap}.ai-summary-title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-xl);font-weight:700;margin:0}.ai-risk-badge{padding:var(--spacing-xs) var(--spacing-md);background-color:#fff3;border-radius:var(--radius-full);font-size:var(--font-sm);font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ai-update-time{font-size:var(--font-sm);opacity:.9;margin:0}.ai-summary-content{background-color:#fffffff2;border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);color:var(--text-primary)}.ai-content-body{line-height:1.8}.ai-content-body.collapsed{max-height:300px;overflow:hidden;position:relative}.ai-content-body.collapsed:after{content:"";position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.95))}.ai-content-heading{font-size:var(--font-lg);font-weight:700;color:var(--text-primary);margin:var(--spacing-lg) 0 var(--spacing-sm) 0}.ai-content-heading:first-child{margin-top:0}.ai-content-text{font-size:var(--font-sm);color:var(--text-secondary);margin:var(--spacing-xs) 0;line-height:1.8}.ai-content-text strong{color:var(--text-primary);font-weight:700}.expand-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);width:100%;padding:var(--spacing-sm);margin-top:var(--spacing-md);background-color:var(--bg-secondary);color:var(--text-primary);border:none;border-radius:var(--radius-md);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.expand-button:hover{background-color:var(--bg-tertiary)}.no-ai-summary{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);background-color:#ffffff1a;border-radius:var(--radius-md);margin-bottom:var(--spacing-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.no-ai-summary svg{opacity:.6;margin-bottom:var(--spacing-md)}.no-ai-summary p{font-size:var(--font-lg);font-weight:600;margin:0 0 var(--spacing-xs) 0}.no-ai-summary span{font-size:var(--font-sm);opacity:.8}.refresh-button{width:100%;background-color:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:var(--spacing-md)}.refresh-button:hover:not(:disabled){background-color:#ffffff4d;border-color:#ffffff80}.refresh-button:disabled{opacity:.7}.ai-disclaimer{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:#0000001a;border-radius:var(--radius-md);font-size:var(--font-xs);opacity:.9;line-height:1.5}.ai-disclaimer svg{flex-shrink:0;margin-top:2px}@media(max-width:768px){.ai-summary-title-row{flex-direction:column;align-items:flex-start}.ai-risk-badge{align-self:flex-start}}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background:var(--bg-primary);color:var(--text-primary);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:10000;min-width:200px;text-align:center;font-size:var(--font-base);font-weight:500;animation:toastSlideIn .3s ease-out}.toast-success{background:var(--success-color);color:#fff}.toast-error{background:var(--danger-color);color:#fff}.toast-info{background:var(--primary-color);color:#fff}.toast-message{display:block}@keyframes toastSlideIn{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.dashboard-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.role-info-card{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg);background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:#fff}.role-avatar-large{width:80px;height:80px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-4xl);font-weight:700;background-color:#fff3;border:3px solid rgba(255,255,255,.3);flex-shrink:0}.role-details{flex:1}.role-name-large{font-size:var(--font-3xl);font-weight:700;margin:0 0 var(--spacing-xs) 0}.role-relation-text{font-size:var(--font-lg);opacity:.9;margin:0 0 var(--spacing-sm) 0}.threshold-info{font-size:var(--font-sm);opacity:.8;margin:0;font-weight:500}.dashboard-section{width:100%}@media(max-width:768px){.role-info-card{flex-direction:column;text-align:center}.role-avatar-large{width:70px;height:70px;font-size:var(--font-3xl)}.role-name-large{font-size:var(--font-2xl)}}.overview-role-card{background-color:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:all .2s ease;border:2px solid transparent}.overview-role-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-color)}.overview-card-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);cursor:pointer}.overview-avatar{width:60px;height:60px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-2xl);font-weight:700;color:#fff;flex-shrink:0}.overview-basic-info{flex:1;min-width:0}.overview-name-row{display:flex;align-items:baseline;gap:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.overview-role-name{font-size:var(--font-xl);font-weight:700;color:var(--text-primary);margin:0}.overview-relation{font-size:var(--font-sm);color:var(--text-secondary)}.overview-latest-record{display:flex;flex-direction:column;gap:var(--spacing-xs)}.no-record-text{font-size:var(--font-sm);color:var(--text-secondary);font-style:italic}.overview-status{flex-shrink:0}.overview-ai-section{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--bg-secondary);border-top:1px solid var(--border-color)}.ai-summary-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.ai-summary-label{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-sm);font-weight:600;color:var(--text-secondary)}.ai-risk-tag{font-size:var(--font-sm);font-weight:700;padding:2px 8px;border-radius:var(--radius-full);background-color:#0000000d}.ai-summary-content-overview{position:relative}.ai-summary-text{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.6;margin:0;white-space:pre-wrap}.toggle-summary-button{margin-top:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background-color:transparent;color:var(--primary-color);border:none;font-size:var(--font-xs);font-weight:600;cursor:pointer;transition:opacity .2s ease}.toggle-summary-button:hover{opacity:.7}.overview-no-ai{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--bg-secondary);border-top:1px solid var(--border-color);text-align:center}.no-ai-text{font-size:var(--font-sm);color:var(--text-light);font-style:italic}.overview-card-footer{padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--border-color);display:flex;justify-content:flex-end}.view-detail-button{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all .2s ease}.view-detail-button:hover{background-color:var(--primary-dark)}@media(max-width:768px){.overview-card-header{flex-wrap:wrap}.overview-avatar{width:50px;height:50px;font-size:var(--font-xl)}.overview-status{width:100%;display:flex;justify-content:flex-start}}.overview-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.overview-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}.stat-card{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background-color:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all .2s ease}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-icon{width:60px;height:60px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-content{flex:1}.stat-content h4{font-size:var(--font-sm);color:var(--text-secondary);margin:0 0 var(--spacing-xs) 0;font-weight:600}.stat-value{font-size:var(--font-3xl);font-weight:700;color:var(--text-primary);margin:0;line-height:1}.overview-alert{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.overview-alert.danger{background-color:#ff6b6b1a;border:2px solid var(--danger-color);color:var(--danger-color)}.overview-alert.warning{background-color:#ffd93d1a;border:2px solid var(--warning-color);color:#e67700}.overview-alert svg{flex-shrink:0;margin-top:2px}.overview-alert strong{font-size:var(--font-base);display:block;margin-bottom:var(--spacing-xs)}.overview-alert p{margin:0;font-size:var(--font-sm);color:var(--text-primary)}.overview-roles-section{width:100%}.section-title{font-size:var(--font-2xl);font-weight:700;color:var(--text-primary);margin:0 0 var(--spacing-lg) 0}.overview-roles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-lg)}@media(max-width:768px){.overview-stats,.overview-roles-grid{grid-template-columns:1fr}}:root{--primary-color: #4ECDC4;--primary-dark: #3BA7A1;--secondary-color: #FF6B6B;--success-color: #51CF66;--warning-color: #FFD93D;--danger-color: #FF6B6B;--text-primary: #2C3E50;--text-secondary: #7F8C8D;--text-light: #BDC3C7;--bg-primary: #FFFFFF;--bg-secondary: #F8F9FA;--bg-tertiary: #ECF0F1;--border-color: #E0E0E0;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .15);--font-xs: 14px;--font-sm: 16px;--font-base: 18px;--font-lg: 20px;--font-xl: 24px;--font-2xl: 28px;--font-3xl: 32px;--font-4xl: 40px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--touch-target: 44px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-size:16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6;font-size:var(--font-base)}#root{min-height:100vh}h1{font-size:var(--font-3xl);font-weight:700;margin-bottom:var(--spacing-md)}h2{font-size:var(--font-2xl);font-weight:600;margin-bottom:var(--spacing-sm)}h3{font-size:var(--font-xl);font-weight:600;margin-bottom:var(--spacing-sm)}h4{font-size:var(--font-lg);font-weight:600;margin-bottom:var(--spacing-xs)}button{font-family:inherit;font-size:var(--font-base);min-height:var(--touch-target);padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}button:active{transform:scale(.98)}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-dark)}.btn-danger{background-color:var(--danger-color);color:#fff}.btn-danger:hover:not(:disabled){background-color:#e85a5a}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background-color:#d5dbdb}input,textarea,select{font-family:inherit;font-size:var(--font-base);min-height:var(--touch-target);padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary);color:var(--text-primary);transition:border-color .2s ease;width:100%}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary-color)}textarea{resize:vertical;min-height:80px;line-height:1.5}.card{background-color:var(--bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease}.card:hover{box-shadow:var(--shadow-md)}.badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:var(--font-sm);font-weight:600;line-height:1}.badge-success{background-color:#51cf6626;color:#2b8a3e}.badge-warning{background-color:#ffd93d26;color:#e67700}.badge-danger{background-color:#ff6b6b26;color:#c92a2a}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){:root{--font-base: 16px;--font-lg: 18px;--font-xl: 22px;--font-2xl: 26px;--font-3xl: 30px}}