:root{--self-primary: #3b82f6;--self-primary-hover: #2563eb;--self-primary-light: #eff6ff;--self-success: #10b981;--self-success-light: #ecfdf5;--self-warning: #f59e0b;--self-warning-light: #fffbeb;--self-error: #ef4444;--self-error-light: #fef2f2;--self-info: #6366f1;--self-info-light: #eef2ff;--self-bg: #f8fafc;--self-card: #ffffff;--self-text: #1e293b;--self-text-secondary: #64748b;--self-text-tertiary: #94a3b8;--self-border: #e2e8f0;--self-border-light: #f1f5f9;--self-radius-sm: 8px;--self-radius-md: 12px;--self-radius-lg: 16px;--self-radius-xl: 24px;--self-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--self-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--self-shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--self-transition: .2s ease;--self-transition-slow: .3s ease}.self-modern{min-height:100vh;background:var(--self-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--self-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}.self-modern-container{max-width:600px;margin:0 auto;padding-bottom:80px}.progress-indicator{display:flex;justify-content:center;align-items:center;padding:24px 20px;background:var(--self-card);border-bottom:1px solid var(--self-border-light)}.progress-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;max-width:80px}.progress-step:before,.progress-step:after{content:"";position:absolute;top:14px;height:2px;width:50%;z-index:0;transition:var(--self-transition)}.progress-step:before{left:0;background:var(--self-border)}.progress-step:after{right:0;background:var(--self-border)}.progress-step:first-child:before{display:none}.progress-step:last-child:after{display:none}.progress-step.completed:before,.progress-step.completed:after{background:var(--self-success)}.progress-step.active:before{background:var(--self-success)}.progress-step.active:after{background:var(--self-border)}.progress-dot{width:28px;height:28px;border-radius:50%;background:var(--self-border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--self-text-tertiary);z-index:1;transition:var(--self-transition)}.progress-step.completed .progress-dot{background:var(--self-success);color:#fff}.progress-step.active .progress-dot{background:var(--self-primary);color:#fff;box-shadow:0 0 0 4px var(--self-primary-light)}.progress-label{margin-top:8px;font-size:11px;color:var(--self-text-tertiary);text-align:center;white-space:nowrap}.progress-step.active .progress-label{color:var(--self-primary);font-weight:600}.progress-step.completed .progress-label{color:var(--self-success)}.status-card{background:var(--self-card);margin:16px;border-radius:var(--self-radius-lg);box-shadow:var(--self-shadow-md);overflow:hidden}.status-card-header{padding:20px;background:linear-gradient(135deg,var(--self-primary) 0%,#6366f1 100%);color:#fff}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#fff3;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:12px}.status-badge.using{background:#10b9814d}.status-badge.done{background:#64748b4d}.status-card-title{font-size:22px;font-weight:700;margin-bottom:4px}.status-card-subtitle{font-size:14px;opacity:.9}.status-card-body{padding:20px}.info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--self-border-light)}.info-row:last-child{border-bottom:none}.info-label{font-size:14px;color:var(--self-text-secondary)}.info-value{font-size:14px;font-weight:600;color:var(--self-text);text-align:right}.info-value.highlight{color:var(--self-primary)}.password-reveal{background:linear-gradient(135deg,#1e293b,#334155);color:#fff;padding:24px;border-radius:var(--self-radius-lg);text-align:center;margin:16px}.password-reveal-label{font-size:13px;opacity:.8;margin-bottom:12px}.password-reveal-value{font-size:36px;font-weight:700;letter-spacing:4px;font-family:SF Mono,Monaco,Consolas,monospace}.password-reveal-hint{font-size:12px;opacity:.6;margin-top:12px}.action-button{width:100%;padding:16px 24px;border:none;border-radius:var(--self-radius-md);font-size:16px;font-weight:600;cursor:pointer;transition:var(--self-transition);display:flex;align-items:center;justify-content:center;gap:8px}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button.primary{background:var(--self-primary);color:#fff}.action-button.primary:hover:not(:disabled){background:var(--self-primary-hover);transform:translateY(-2px);box-shadow:var(--self-shadow-lg)}.action-button.secondary{background:var(--self-success);color:#fff}.action-button.secondary:hover:not(:disabled){background:#059669}.action-button.outline{background:transparent;color:var(--self-primary);border:2px solid var(--self-primary)}.action-button.outline:hover:not(:disabled){background:var(--self-primary-light)}.action-button.ghost{background:transparent;color:var(--self-text-secondary);border:1px solid var(--self-border)}.action-button.ghost:hover:not(:disabled){background:var(--self-border-light)}.action-button.danger{background:var(--self-error);color:#fff}.icon-button-group{display:flex;gap:12px;margin:16px 0}.icon-button{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:var(--self-card);border:1px solid var(--self-border);border-radius:var(--self-radius-md);cursor:pointer;transition:var(--self-transition)}@media (hover: hover){.icon-button:hover{border-color:var(--self-primary);background:var(--self-primary-light)}}.icon-button:active{border-color:var(--self-primary);background:var(--self-primary-light)}.icon-button-icon{font-size:24px}.icon-button-label{font-size:13px;font-weight:500;color:var(--self-text-secondary)}.bottom-sheet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000;opacity:0;visibility:hidden;transition:var(--self-transition)}.bottom-sheet-overlay.open{opacity:1;visibility:visible}.bottom-sheet{position:fixed;left:50%;right:auto;bottom:0;transform:translate(-50%) translateY(100%);max-width:600px;width:100%;background:var(--self-card);border-radius:var(--self-radius-xl) var(--self-radius-xl) 0 0;z-index:1001;transition:var(--self-transition-slow);max-height:85vh;display:flex;flex-direction:column}.bottom-sheet-overlay.open .bottom-sheet{transform:translate(-50%) translateY(0)}.bottom-sheet-handle{width:40px;height:4px;background:var(--self-border);border-radius:2px;margin:12px auto}.bottom-sheet-header{padding:16px 20px;border-bottom:1px solid var(--self-border-light);display:flex;align-items:center;justify-content:space-between}.bottom-sheet-title{font-size:18px;font-weight:700;color:var(--self-text)}.bottom-sheet-close{width:32px;height:32px;border:none;background:var(--self-border-light);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--self-text-secondary)}.bottom-sheet-body{padding:20px;overflow-y:auto;flex:1}.bottom-sheet-footer{padding:16px 20px;border-top:1px solid var(--self-border-light);background:var(--self-card)}.fixed-bottom-actions{position:fixed;left:0;right:0;bottom:0;background:var(--self-card);padding:16px;box-shadow:0 -4px 12px #00000014;z-index:100}.fixed-bottom-actions .action-button{max-width:480px;margin:0 auto}.agreement-cards{padding:16px;display:flex;flex-direction:column;gap:12px}.agreement-card{background:var(--self-card);border:1px solid var(--self-border);border-radius:var(--self-radius-md);padding:16px;cursor:pointer;transition:var(--self-transition)}.agreement-card:hover{border-color:var(--self-primary)}.agreement-card.checked{border-color:var(--self-success);background:var(--self-success-light)}.agreement-card-header{display:flex;align-items:center;gap:12px}.agreement-checkbox{width:24px;height:24px;border:2px solid var(--self-border);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--self-transition);flex-shrink:0}.agreement-card.checked .agreement-checkbox{background:var(--self-success);border-color:var(--self-success);color:#fff}.agreement-card-title{flex:1;font-size:14px;font-weight:600;color:var(--self-text);letter-spacing:-.25px;word-break:keep-all;line-height:1.5}.agreement-card-chevron{color:var(--self-text-tertiary);font-size:18px}.checkout-checklist{background:var(--self-card);margin:16px 0;border-radius:var(--self-radius-lg);overflow:hidden}.checklist-header{padding:16px 20px;background:var(--self-warning-light);border-bottom:1px solid var(--self-border-light)}.checklist-title{font-size:15px;font-weight:600;color:var(--self-warning);display:flex;align-items:center;gap:8px}.checklist-items{padding:8px 0}.checklist-item{display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer;transition:var(--self-transition)}.checklist-item:hover{background:var(--self-border-light)}.checklist-checkbox{width:24px;height:24px;border:2px solid var(--self-border);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--self-transition);flex-shrink:0}.checklist-item.checked .checklist-checkbox{background:var(--self-success);border-color:var(--self-success);color:#fff}.checklist-text{font-size:14px;color:var(--self-text)}.checklist-required{color:var(--self-error);margin-left:4px}.demo-controls{position:sticky;top:0;left:0;right:0;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;padding:12px 16px;z-index:2000;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 10px #0000001a}.demo-badge{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.demo-badge:before{content:"🎭"}.demo-step-controls{display:flex;gap:8px}.demo-step-btn{padding:6px 12px;background:#fff3;border:none;border-radius:6px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:var(--self-transition)}.demo-step-btn:hover{background:#ffffff4d}.demo-step-btn:disabled{opacity:.5;cursor:not-allowed}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px}.loading-spinner{width:48px;height:48px;border:3px solid var(--self-border);border-top-color:var(--self-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:16px;font-size:14px;color:var(--self-text-secondary)}.error-state{text-align:center;padding:60px 20px}.error-icon{font-size:48px;margin-bottom:16px}.error-title{font-size:18px;font-weight:700;color:var(--self-text);margin-bottom:8px}.error-message{font-size:14px;color:var(--self-text-secondary);margin-bottom:24px}@media (max-width: 480px){.status-card{margin:12px}.progress-indicator{padding:16px 12px}.progress-step{max-width:60px}.progress-label{font-size:10px}.password-reveal-value{font-size:28px;letter-spacing:2px}}.bottom-sheet-body .markdown-viewer{font-size:14px;line-height:1.7;color:var(--self-text);white-space:normal;word-wrap:break-word}.bottom-sheet-body .markdown-viewer h1,.bottom-sheet-body .markdown-viewer h2,.bottom-sheet-body .markdown-viewer h3{margin-top:20px;margin-bottom:12px;font-weight:700;color:var(--self-text)}.bottom-sheet-body .markdown-viewer h1{font-size:20px}.bottom-sheet-body .markdown-viewer h2{font-size:18px}.bottom-sheet-body .markdown-viewer h3{font-size:16px}.bottom-sheet-body .markdown-viewer p{margin-bottom:12px;line-height:1.7}.bottom-sheet-body .markdown-viewer ul,.bottom-sheet-body .markdown-viewer ol{margin-bottom:12px;padding-left:24px}.bottom-sheet-body .markdown-viewer li{margin-bottom:6px;line-height:1.6}.bottom-sheet-body .markdown-viewer strong{font-weight:700;color:var(--self-text)}.bottom-sheet-body .markdown-viewer em{font-style:italic}.bottom-sheet-body .markdown-viewer code{background:var(--self-border-light);padding:2px 6px;border-radius:4px;font-family:SF Mono,Monaco,Consolas,monospace;font-size:13px}.bottom-sheet-body .markdown-viewer pre{background:var(--self-border-light);padding:12px;border-radius:var(--self-radius-sm);overflow-x:auto;margin-bottom:12px}.bottom-sheet-body .markdown-viewer blockquote{border-left:4px solid var(--self-primary);padding-left:16px;margin:12px 0;color:var(--self-text-secondary);font-style:italic}.bottom-sheet-body .markdown-viewer a{color:var(--self-primary);text-decoration:underline}.bottom-sheet-body .markdown-viewer hr{border:none;border-top:1px solid var(--self-border);margin:20px 0}.bottom-sheet-body .markdown-viewer table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:13px}.bottom-sheet-body .markdown-viewer th,.bottom-sheet-body .markdown-viewer td{padding:10px;border:1px solid var(--self-border);text-align:left}.bottom-sheet-body .markdown-viewer th{background-color:var(--self-bg);font-weight:600}.bottom-sheet-body .markdown-viewer ul{list-style-type:disc;padding-left:20px}.bottom-sheet-body .markdown-viewer ol{list-style-type:decimal;padding-left:20px}.time-extension-sheet{display:flex;flex-direction:column;gap:24px}.time-extension-segment{display:grid;grid-template-columns:1fr 1fr;gap:12px}.segment-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;background:var(--self-card);border:2px solid var(--self-border);border-radius:var(--self-radius-lg);cursor:pointer;transition:var(--self-transition)}.segment-btn:hover{border-color:var(--self-primary);background:var(--self-primary-light)}.segment-btn.active{border-color:var(--self-primary);background:var(--self-primary-light);box-shadow:0 0 0 3px #3b82f626}.segment-icon{font-size:28px;margin-bottom:4px}.segment-label{font-size:15px;font-weight:700;color:var(--self-text)}.segment-desc{font-size:12px;color:var(--self-text-tertiary)}.segment-btn.active .segment-label{color:var(--self-primary)}.time-selection-section{text-align:center}.time-selection-label{display:block;font-size:15px;font-weight:600;color:var(--self-text);margin-bottom:16px}.max-hours-warning{color:var(--self-error);font-size:13px;font-weight:500}.max-hours-info{color:var(--self-text-secondary);font-size:13px;font-weight:500}.time-display{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:20px}.time-display-value{font-size:56px;font-weight:800;color:var(--self-primary);line-height:1}.time-display-unit{font-size:20px;font-weight:600;color:var(--self-text-secondary)}.time-slider-container{padding:0 8px;margin-bottom:16px}.time-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,var(--self-primary),var(--self-info));outline:none;cursor:pointer}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--self-primary);box-shadow:var(--self-shadow-md);cursor:grab;transition:var(--self-transition)}.time-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:var(--self-shadow-lg)}.time-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.time-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--self-primary);box-shadow:var(--self-shadow-md);cursor:grab}.time-slider-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--self-text-tertiary)}.time-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.time-chip{padding:10px 18px;border:2px solid var(--self-border);border-radius:24px;background:#fff;font-size:14px;font-weight:600;color:var(--self-text-secondary);cursor:pointer;transition:var(--self-transition)}.time-chip:hover{border-color:var(--self-primary);color:var(--self-primary)}.time-chip.active{background:var(--self-primary);border-color:var(--self-primary);color:#fff}.time-result-section{min-height:140px}.time-result-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#fffc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:var(--self-radius-lg);z-index:10}.time-result-spinner{width:32px;height:32px;border:3px solid var(--self-border);border-top-color:var(--self-primary);border-radius:50%;animation:spin .8s linear infinite}.time-compare-card{position:relative;background:var(--self-card);border-radius:var(--self-radius-lg);border:1px solid var(--self-border);overflow:hidden;transition:opacity .2s ease,transform .2s ease}.time-compare-card.loading{opacity:.6}.time-compare-card.available{border-color:var(--self-success);background:var(--self-success-light)}.time-compare-card.unavailable{border-color:var(--self-error);background:var(--self-error-light)}.time-compare-timeline{padding:16px}.timeline-row{display:flex;align-items:center;gap:12px}.timeline-label{width:40px;font-size:12px;font-weight:600;color:var(--self-text-tertiary);text-align:right}.timeline-bar{flex:1;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:var(--self-radius-sm);background:#fff;border:1px solid var(--self-border)}.timeline-bar.original{opacity:.7}.timeline-bar.new{border-color:var(--self-success);background:#fff}.timeline-bar.new.conflict{border-color:var(--self-error);background:#ef44440d}.timeline-time{font-size:18px;font-weight:700;color:var(--self-text)}.timeline-date{font-size:13px;color:var(--self-text-secondary)}.timeline-arrow{display:flex;justify-content:center;padding:8px 0;font-size:18px;color:var(--self-text-tertiary)}.time-compare-card.available .timeline-arrow{color:var(--self-success)}.time-compare-card.unavailable .timeline-arrow{color:var(--self-error)}.time-result-available,.time-result-unavailable{padding:16px;border-top:1px solid var(--self-border)}.result-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:12px}.result-badge.success{background:var(--self-success);color:#fff}.result-badge.error{background:var(--self-error);color:#fff}.badge-icon{font-size:12px}.time-price{display:flex;justify-content:space-between;align-items:center}.price-label{font-size:14px;color:var(--self-text-secondary)}.price-value{font-size:24px;font-weight:800;color:var(--self-primary)}.price-unit{font-size:14px;font-weight:600;margin-left:2px}.conflict-message{margin:0;font-size:14px;color:var(--self-error);line-height:1.5}.time-extension-footer{padding-top:8px}@media (max-width: 480px){.segment-icon{font-size:24px}.segment-label{font-size:14px}.time-display-value{font-size:48px}.time-chip{padding:8px 14px;font-size:13px}.timeline-time{font-size:16px}.price-value{font-size:20px}}.time-compare-card.skeleton{border-color:var(--self-border);background:var(--self-card)}.timeline-bar.skeleton-bar{background:var(--self-border-light);border-color:var(--self-border)}.skeleton-text{display:inline-block;background:linear-gradient(90deg,var(--self-border-light) 25%,var(--self-border) 50%,var(--self-border-light) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:4px}.skeleton-time{width:60px;height:20px}.skeleton-date{width:40px;height:16px}.time-result-skeleton-footer{padding:16px;border-top:1px solid var(--self-border);display:flex;justify-content:space-between;align-items:center}.skeleton-badge{width:80px;height:24px}.skeleton-price{width:100px;height:28px}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}