:root{--color-primary: #6366F1;--color-primary-hover: #4F46E5;--color-primary-light: #A5B4FC;--color-success: #10B981;--color-error: #EF4444;--color-warning: #F59E0B;--color-text: #111827;--color-text-secondary: #4B5563;--color-text-tertiary: #6B7280;--color-text-light: #9CA3AF;--color-bg: #FFFFFF;--color-bg-secondary: #F9FAFB;--color-bg-tertiary: #F3F4F6;--color-bg-hover: #F3F4F6;--color-border: #E5E7EB;--color-border-light: #F3F4F6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-14: 56px;--space-16: 64px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-family-code: "Fira Code", "Courier New", monospace;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 30px;--font-size-4xl: 36px;--font-weight-normal: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-spring: .4s cubic-bezier(.34, 1.56, .64, 1);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1), 0 10px 10px rgba(0, 0, 0, .04);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-modal: 400;--z-toast: 500;--z-splash: 600}[data-theme=dark]{--color-text: #F9FAFB;--color-text-secondary: #D1D5DB;--color-text-tertiary: #9CA3AF;--color-text-light: #6B7280;--color-bg: #111827;--color-bg-secondary: #1F2937;--color-bg-tertiary: #374151;--color-bg-hover: #374151;--color-border: #374151;--color-border-light: #1F2937;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5), 0 4px 6px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .6), 0 10px 10px rgba(0, 0, 0, .3)}[data-font-size=small]{--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 22px}[data-font-size=large]{--font-size-base: 18px;--font-size-lg: 20px;--font-size-xl: 22px;--font-size-2xl: 28px}@media (prefers-reduced-motion: reduce){:root{--transition-fast: .01ms;--transition-base: .01ms;--transition-slow: .01ms;--transition-spring: .01ms}}[data-animations=disabled] *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text);background-color:var(--color-bg);overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-bottom:var(--space-4)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}p{margin-bottom:var(--space-4);line-height:var(--line-height-relaxed)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.5}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);transition:border-color var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary)}ul,ol{list-style:none}img{max-width:100%;height:auto;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}::selection{background-color:var(--color-primary-light);color:var(--color-text)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes checkmark{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-in{animation:fadeIn var(--transition-base) ease-out}.fade-in-up{animation:fadeInUp var(--transition-base) ease-out}.fade-in-down{animation:fadeInDown var(--transition-base) ease-out}.scale-in{animation:scaleIn var(--transition-spring) ease-out}.slide-in-right{animation:slideInRight var(--transition-base) ease-out}.slide-in-left{animation:slideInLeft var(--transition-base) ease-out}.cascade>*{animation:fadeInUp var(--transition-base) ease-out;animation-fill-mode:both}.cascade>*:nth-child(1){animation-delay:.05s}.cascade>*:nth-child(2){animation-delay:.1s}.cascade>*:nth-child(3){animation-delay:.15s}.cascade>*:nth-child(4){animation-delay:.2s}.cascade>*:nth-child(5){animation-delay:.25s}.cascade>*:nth-child(6){animation-delay:.3s}.cascade>*:nth-child(7){animation-delay:.35s}.cascade>*:nth-child(8){animation-delay:.4s}.cascade>*:nth-child(9){animation-delay:.45s}.cascade>*:nth-child(10){animation-delay:.5s}.transition-all{transition:all var(--transition-base)}.transition-transform{transition:transform var(--transition-base)}.transition-opacity{transition:opacity var(--transition-base)}.hover-lift{transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.hover-scale{transition:transform var(--transition-fast)}.hover-scale:hover{transform:scale(1.02)}.hover-scale:active{transform:scale(.98)}.skeleton{background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-bg-secondary) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite linear;border-radius:var(--radius-md)}.spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .6s linear infinite}.app{min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-bg)}.header{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background-color:var(--color-bg);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-title{flex:1;font-size:var(--font-size-xl);margin:0}.header-actions{display:flex;gap:var(--space-2)}.back-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-bg-secondary);transition:all var(--transition-fast)}.back-button:hover{background:var(--color-bg-tertiary)}.back-button:active{transform:scale(.95)}.icon-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);background:transparent;transition:all var(--transition-fast)}.icon-button:hover{background:var(--color-bg-secondary)}.icon-button:active{transform:scale(.95)}.icon{font-size:var(--font-size-xl)}.main-content{flex:1;padding:var(--space-6) var(--space-4);max-width:640px;margin:0 auto;width:100%}.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm);transition:all var(--transition-fast);cursor:pointer}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.card:active{transform:scale(.98)}.card-icon{font-size:var(--font-size-4xl);margin-bottom:var(--space-3)}.card-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-2);color:var(--color-text)}.card-description{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--space-4)}.card-action{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm)}.section-header{margin-bottom:var(--space-6)}.section-title{font-size:var(--font-size-2xl);margin-bottom:var(--space-2)}.section-description{color:var(--color-text-secondary);font-size:var(--font-size-lg)}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);min-height:48px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;white-space:nowrap}.button-primary{background:var(--color-primary);color:#fff}.button-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.button-primary:active{transform:scale(.98)}.button-secondary{background:var(--color-bg-secondary);color:var(--color-text);border:1px solid var(--color-border)}.button-secondary:hover{background:var(--color-bg-tertiary)}.button-tertiary{background:transparent;color:var(--color-primary);padding:var(--space-2) var(--space-4)}.button-tertiary:hover{background:var(--color-bg-secondary)}.button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button-loading{position:relative;color:transparent!important}.button-loading:after{content:"";position:absolute;width:20px;height:20px;top:50%;left:50%;margin-left:-10px;margin-top:-10px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.5px}.badge-success{background:#10b9811a;color:var(--color-success)}.badge-error{background:#ef44441a;color:var(--color-error)}.badge-warning{background:#f59e0b1a;color:var(--color-warning)}.badge-neutral{background:var(--color-bg-tertiary);color:var(--color-text-secondary)}.divider{height:1px;background:var(--color-border);margin:var(--space-6) 0}.example-box{padding:var(--space-6);border-radius:var(--radius-lg);margin:var(--space-4) 0;border:2px solid}.example-box-good{background:#10b9810d;border-color:var(--color-success)}.example-box-bad{background:#ef44440d;border-color:var(--color-error)}.example-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.example-demo{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);margin:var(--space-4) 0}.example-explanation{margin-top:var(--space-4)}.example-explanation h4{font-size:var(--font-size-base);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)}.example-explanation ul{list-style:disc;padding-left:var(--space-6)}.example-explanation li{margin-bottom:var(--space-2);color:var(--color-text-secondary)}.checklist{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-4) 0}.checklist-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);margin-bottom:var(--space-2);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.checklist-item:hover{background:var(--color-bg-secondary)}.checklist-checkbox{position:relative;width:24px;height:24px;min-width:24px;border:2px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.checklist-checkbox.checked{background:var(--color-primary);border-color:var(--color-primary)}.checklist-checkbox.checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;font-weight:700}.checklist-text{flex:1;line-height:var(--line-height-relaxed)}.checklist-item.checked .checklist-text{text-decoration:line-through;opacity:.6}.checklist-score{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background:var(--color-bg-secondary);border-radius:var(--radius-md);margin-top:var(--space-4);font-weight:var(--font-weight-semibold)}.checklist-progress{flex:1;height:8px;background:var(--color-bg-tertiary);border-radius:var(--radius-full);overflow:hidden;margin:0 var(--space-4)}.checklist-progress-bar{height:100%;background:var(--color-primary);transition:width var(--transition-base);border-radius:var(--radius-full)}.swipeable-container{position:relative;overflow:hidden;border-radius:var(--radius-lg)}.swipeable-content{display:flex;transition:transform var(--transition-base);touch-action:pan-y}.swipeable-slide{min-width:100%;padding:var(--space-6)}.swipe-indicator{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-4)}.swipe-dot{width:8px;height:8px;border-radius:50%;background:var(--color-border);transition:all var(--transition-fast);cursor:pointer}.swipe-dot.active{background:var(--color-primary);width:24px;border-radius:var(--radius-full)}.search-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--color-bg);z-index:var(--z-modal);padding:var(--space-4)}.search-container{position:relative;display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.search-input{flex:1;padding:var(--space-4);padding-right:var(--space-12);border:2px solid var(--color-primary);border-radius:var(--radius-lg);font-size:var(--font-size-lg)}.search-close{position:absolute;right:var(--space-2);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:transparent;font-size:var(--font-size-xl)}.search-close:hover{background:var(--color-bg-secondary)}.search-results{overflow-y:auto;max-height:calc(100vh - 120px)}.search-result-item{padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-2);cursor:pointer;transition:background var(--transition-fast)}.search-result-item:hover{background:var(--color-bg-secondary)}.search-result-title{font-weight:var(--font-weight-semibold);margin-bottom:var(--space-1)}.search-result-description{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.search-no-results{text-align:center;padding:var(--space-16) var(--space-4);color:var(--color-text-tertiary)}.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--color-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:500px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6);border-bottom:1px solid var(--color-border)}.modal-header h2{margin:0}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-size:var(--font-size-xl);transition:background var(--transition-fast)}.modal-close:hover{background:var(--color-bg-secondary)}.modal-body{padding:var(--space-6);overflow-y:auto}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}.setting-item:last-child{border-bottom:none}.setting-info h3{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-1)}.setting-info p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.toggle{position:relative;width:52px;height:28px;cursor:pointer}.toggle input{display:none}.toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--color-bg-tertiary);border-radius:var(--radius-full);transition:background var(--transition-fast)}.toggle-slider:before{content:"";position:absolute;width:20px;height:20px;left:4px;top:4px;background:#fff;border-radius:50%;transition:transform var(--transition-fast);box-shadow:var(--shadow-sm)}.toggle input:checked+.toggle-slider{background:var(--color-primary)}.toggle input:checked+.toggle-slider:before{transform:translate(24px)}.font-size-controls{display:flex;gap:var(--space-2)}.font-size-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--radius-md);font-weight:var(--font-weight-bold);transition:all var(--transition-fast)}.font-size-button[data-size=small]{font-size:var(--font-size-sm)}.font-size-button[data-size=medium]{font-size:var(--font-size-base)}.font-size-button[data-size=large]{font-size:var(--font-size-lg)}.font-size-button:hover{background:var(--color-bg-secondary)}.font-size-button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.toast-container{position:fixed;top:var(--space-4);right:var(--space-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);max-width:400px}.toast{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--space-3);animation:slideInRight var(--transition-base) ease-out}.toast-icon{font-size:var(--font-size-xl)}.toast-message{flex:1;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.toast-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);opacity:.5;transition:all var(--transition-fast)}.toast-close:hover{opacity:1;background:var(--color-bg-secondary)}.splash-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--color-primary) 0%,#8B5CF6 100%);z-index:var(--z-splash);display:flex;align-items:center;justify-content:center}.splash-content{text-align:center;color:#fff}.splash-logo{font-size:80px;margin-bottom:var(--space-4);animation:scaleIn var(--transition-slow) ease-out}.splash-title{font-size:var(--font-size-3xl);margin-bottom:var(--space-2);color:#fff;animation:fadeInUp var(--transition-base) ease-out .3s both}.splash-subtitle{font-size:var(--font-size-lg);color:#ffffffe6;margin-bottom:var(--space-8);animation:fadeInUp var(--transition-base) ease-out .5s both}.splash-loader{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;margin:0 auto;animation:spin .8s linear infinite,fadeIn var(--transition-base) ease-out .7s both}.text-center{text-align:center}.text-right{text-align:right}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.text-muted{color:var(--color-text-secondary)}.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mt-0{margin-top:0}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}