.screen{width:100%;margin:0 auto;min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0);max-width:720px!important}.screen-padding{padding:40px 32px}@media (max-width: 640px){.screen-padding{padding:24px 16px}}.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md);margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-lg);border-bottom:3px solid var(--color-border);flex-wrap:wrap}.app-header-left{flex:1;min-width:0}.app-header-back{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-secondary);background-color:var(--color-secondary-light);border:2px solid var(--color-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-base);margin-bottom:var(--spacing-sm);display:inline-flex;align-items:center;gap:var(--spacing-xs);box-shadow:var(--shadow-sm)}.app-header-back:hover{background-color:var(--color-secondary);color:var(--color-text-inverse);transform:translate(-2px);box-shadow:var(--shadow-md)}.app-header-title-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.app-header-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0;letter-spacing:-.5px;line-height:var(--line-height-tight)}.app-header-subtitle{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0;font-weight:var(--font-weight-medium)}.app-header-right{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}@media (max-width: 640px){.app-header-title{font-size:var(--font-size-2xl)}.app-header-subtitle{font-size:var(--font-size-sm)}}.card{background-color:var(--color-surface-elevated, var(--color-surface));border-radius:var(--radius-lg);border:2px solid var(--color-border);transition:var(--transition-base);box-shadow:var(--shadow-md)}.card-hover:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px);border-color:var(--color-secondary);border-width:2px}.card-clickable{cursor:pointer}.card-clickable:active{transform:translateY(0)}.card-clickable:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);border-radius:var(--radius-md);border:none;cursor:pointer;transition:var(--transition-base);position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-sm{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.btn-full-width{width:100%}.btn-primary{background-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-xl);border:3px solid var(--color-primary);font-weight:var(--font-weight-bold)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-2xl)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-pressed);border-color:var(--color-primary-pressed);transform:translateY(0);box-shadow:var(--shadow-lg)}.btn-secondary{background-color:var(--color-secondary);border:3px solid var(--color-secondary);color:var(--color-text-inverse);box-shadow:var(--shadow-lg);font-weight:var(--font-weight-bold)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-hover);border-color:var(--color-secondary-hover);color:var(--color-text-inverse);transform:translateY(-2px);box-shadow:var(--shadow-xl)}.btn-secondary:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-md)}.btn-secondary:active:not(:disabled){transform:translateY(0)}.btn-text{background-color:transparent;color:var(--color-secondary);padding:var(--spacing-sm) var(--spacing-md)}.btn-text:hover:not(:disabled){background-color:var(--color-secondary-light);color:var(--color-secondary-hover)}.btn-danger{background-color:var(--color-error);color:var(--color-text-inverse);box-shadow:var(--shadow-md);border:2px solid var(--color-error)}.btn-danger:hover:not(:disabled){background-color:var(--color-error-hover);border-color:var(--color-error-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-danger:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-md)}.btn-loading{pointer-events:none}.btn-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.btn-content-loading{opacity:.7}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs)}.input-wrapper-full-width{width:100%}.input-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.input{width:100%;padding:var(--spacing-md);font-size:var(--font-size-base);font-family:var(--font-family-sans);color:var(--color-text-primary);background-color:#fff!important;border:2px solid #94a3b8!important;border-radius:var(--radius-md);transition:var(--transition-base);box-shadow:0 2px 4px #0000001a!important}.input:hover:not(:disabled){border-color:#3b82f6!important;box-shadow:0 2px 6px #00000026!important;background-color:#fff!important}.input:focus{outline:none;border-color:#2563eb!important;box-shadow:0 0 0 3px #3b82f640,0 2px 6px #0003!important;background-color:#fff!important}.input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-gray-100)}.input::placeholder{color:var(--color-text-tertiary)}.input-error{border-color:var(--color-error)}.input-error:focus{border-color:var(--color-error);box-shadow:0 0 0 4px var(--color-error-light)}.input-helper{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--spacing-xs)}.input-error-text{font-size:var(--font-size-sm);color:var(--color-error);margin-top:var(--spacing-xs);font-weight:var(--font-weight-medium);display:flex;align-items:center;gap:var(--spacing-xs)}.input-error-text:before{content:"⚠";font-size:var(--font-size-base)}.divider{display:flex;align-items:center;width:100%;color:var(--color-text-secondary)}.divider-sm{margin:var(--spacing-md) 0}.divider-md{margin:var(--spacing-lg) 0}.divider-lg{margin:var(--spacing-xl) 0}.divider-line{flex:1;height:1px;background-color:var(--color-border)}.divider-line-full{flex:none;width:100%}.divider-label{padding:0 var(--spacing-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap}.status-pill{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);white-space:nowrap}.status-pill-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.status-pill-md{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.status-pill-default{background-color:var(--color-gray-200);color:var(--color-gray-700)}.status-pill-success{background-color:var(--color-success-light);color:var(--color-success)}.status-pill-error{background-color:var(--color-error-light);color:var(--color-error)}.status-pill-warning{background-color:var(--color-warning-light);color:var(--color-warning)}.status-pill-info{background-color:var(--color-secondary-light);color:var(--color-secondary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl) var(--spacing-xl);text-align:center;min-height:300px}.empty-state-icon{font-size:64px;margin-bottom:var(--spacing-lg);opacity:.6}.empty-state-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--spacing-md) 0}.empty-state-description{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0 0 var(--spacing-xl) 0;max-width:400px;line-height:var(--line-height-relaxed)}.empty-state-action{margin-top:var(--spacing-lg)}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl) var(--spacing-xl);text-align:center;min-height:300px}.error-state-icon{font-size:64px;margin-bottom:var(--spacing-lg)}.error-state-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-error);margin:0 0 var(--spacing-md) 0}.error-state-message{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0 0 var(--spacing-xl) 0;max-width:400px;line-height:var(--line-height-relaxed)}.error-state-action{margin-top:var(--spacing-lg)}.loading-skeleton{background:linear-gradient(90deg,var(--color-gray-200) 0%,var(--color-gray-100) 50%,var(--color-gray-200) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}.loading-skeleton-rounded{border-radius:var(--radius-full)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh}.auth-card-centered{width:100%;max-width:480px;margin:0 auto}.container{min-height:100vh;padding:40px 32px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);display:flex;flex-direction:column;justify-content:center;max-width:720px!important;margin:0 auto}.scrollContainer{min-height:100vh;padding:40px 32px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);max-width:720px!important;margin:0 auto}.pageHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--border);flex-wrap:wrap}.pageTitle{font-size:32px;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.5px;background:linear-gradient(135deg,var(--text-primary) 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pageSubtitle{font-size:16px;color:var(--text-secondary);margin-bottom:32px;font-weight:500}.title{font-size:36px;font-weight:700;text-align:center;margin-bottom:8px;color:var(--text-primary);letter-spacing:-.5px;background:linear-gradient(135deg,var(--text-primary) 0%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:18px;text-align:center;margin-bottom:32px;color:var(--text-secondary);font-weight:500}.welcome{font-size:18px;text-align:center;margin-bottom:48px;color:var(--text-secondary);font-weight:500}.uploadLoadingContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:24px}.pulsingCircle{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.pulseRing{position:absolute;width:100%;height:100%;border:3px solid var(--primary);border-radius:50%;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.pulseRing:nth-child(1){animation-delay:0s}.pulseRing:nth-child(2){animation-delay:.5s}.pulseRing:nth-child(3){animation-delay:1s}@keyframes pulse{0%{transform:scale(.8);opacity:1}to{transform:scale(1.4);opacity:0}}.uploadButton,.button.primary,.buttonSecondary,.backToHomeButton{background-color:var(--color-primary)!important;color:var(--color-text-inverse)!important;border:3px solid var(--color-primary)!important;box-shadow:var(--shadow-xl)!important;font-weight:var(--font-weight-bold)!important}.buttonSecondary,.backToHomeButton{background-color:var(--color-secondary)!important;color:var(--color-text-inverse)!important;border-color:var(--color-secondary)!important}.pulsingCircle:before{content:"";position:absolute;width:60px;height:60px;background:var(--primary);border-radius:50%;z-index:1}.uploadLoadingText{font-size:24px;font-weight:600;color:var(--text-primary);margin:0}.uploadLoadingSubtext{font-size:16px;color:var(--text-secondary);margin:0}.extractedDataCard{background:var(--surface);padding:48px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;border:1px solid var(--border);transition:var(--transition)}.extractedDataCard:hover{box-shadow:var(--shadow-xl)}.successIcon{width:80px;height:80px;background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;margin:0 auto 24px;border:3px solid var(--success);box-shadow:0 4px 12px #10b9814d;animation:successPulse .6s ease-out}@keyframes successPulse{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.extractedTitle{font-size:24px;font-weight:600;color:var(--text-primary);margin-bottom:32px}.extractedSection{text-align:left;margin-bottom:32px;padding:28px;background:linear-gradient(135deg,var(--background) 0%,var(--surface) 100%);border-radius:var(--radius-lg);border:1px solid var(--border)}.extractedSectionTitle{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--border)}.extractedRow{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}.extractedRow:last-child{border-bottom:none}.extractedLabel{font-size:16px;color:var(--text-secondary);font-weight:500}.extractedValue{font-size:18px;color:var(--text-primary);font-weight:600}.extractedActions{display:flex;flex-direction:column;gap:16px;margin-top:32px}.manualEntrySection{margin-top:32px}.manualFormActions{display:flex;flex-direction:column;gap:16px;margin-top:24px}.uploadSection{margin-bottom:32px}.uploadCard{background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius-lg);padding:48px 32px;text-align:center;transition:var(--transition);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.uploadCard:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--primary-light) 0%,transparent 70%);opacity:0;transition:opacity .3s ease}.uploadCard:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.uploadCard:hover:before{opacity:.3}.uploadIcon{font-size:64px;margin-bottom:20px;transition:var(--transition);display:inline-block}.uploadCard:hover .uploadIcon{transform:scale(1.1) rotate(5deg)}.uploadTitle{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.uploadDescription{font-size:14px;color:var(--text-secondary);margin-bottom:24px}.fileInput{display:none}.uploadButton{display:inline-block;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);color:#fff;padding:14px 28px;border-radius:var(--radius-sm);font-weight:600;font-size:16px;cursor:pointer;transition:var(--transition);border:none;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.uploadButton:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.uploadButton:hover{background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary-dark) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.uploadButton:hover:before{width:300px;height:300px}.uploadButton:active{transform:translateY(0);box-shadow:var(--shadow-md)}.uploadError{margin-top:16px;color:var(--error);font-size:14px;font-weight:500}.divider{display:flex;align-items:center;text-align:center;margin:32px 0;color:var(--text-secondary);font-weight:500}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid var(--border)}.divider span{padding:0 16px}.prescriptionForm{background:var(--surface);padding:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border);transition:var(--transition)}.prescriptionForm:hover{box-shadow:var(--shadow-xl)}.form{display:flex;flex-direction:column;gap:24px;-webkit-appearance:none}.section{margin-bottom:40px}.section:last-child{margin-bottom:0}.sectionTitle{font-size:22px;font-weight:600;margin-bottom:24px;color:var(--text-primary);padding-bottom:12px;border-bottom:3px solid var(--primary-light);position:relative}.sectionTitle:after{content:"";position:absolute;bottom:-3px;left:0;width:60px;height:3px;background:var(--primary);border-radius:2px}.formGroup{margin-bottom:20px}.label{font-size:14px;font-weight:600;margin-bottom:8px;display:block;color:var(--text-primary);letter-spacing:.2px}.prescription-page .input{width:100%;border:2px solid #94a3b8!important;border-radius:var(--radius-sm);padding:14px 16px;font-size:16px;background-color:#fff!important;color:var(--text-primary);transition:var(--transition);font-family:inherit;box-shadow:0 2px 4px #0000001a!important}.input:hover{border-color:#3b82f6!important;box-shadow:0 2px 6px #00000026!important}.input:focus{outline:none;border-color:#2563eb!important;box-shadow:0 0 0 3px #3b82f640,0 2px 6px #0003!important;transform:translateY(-1px);background-color:#fff!important}.input::placeholder{color:var(--text-secondary)}.button{padding:16px 24px;border-radius:var(--radius-sm);border:none;font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition);width:100%;font-family:inherit;letter-spacing:.3px;position:relative;overflow:hidden;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.button:hover:before{width:300px;height:300px}.button.primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);color:#fff;margin-top:8px;box-shadow:var(--shadow-md);position:relative}.button.primary:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary-dark) 100%);transform:translateY(-3px);box-shadow:var(--shadow-xl)}.button.primary:not(:disabled){cursor:pointer;pointer-events:auto;-webkit-user-select:none;user-select:none}.button.primary:active:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}.button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.buttonSecondary{background-color:transparent;border:2px solid var(--primary);padding:16px 24px;border-radius:var(--radius-sm);color:var(--primary);font-size:16px;font-weight:600;cursor:pointer;margin-top:16px;width:100%;transition:var(--transition);position:relative;overflow:hidden}.buttonSecondary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(37,99,235,.1),transparent);transition:left .5s}.buttonSecondary:hover{background-color:var(--primary-light);border-color:var(--primary-hover);color:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.buttonSecondary:hover:before{left:100%}.buttonSecondary:active{transform:translateY(0)}.backButton{background:none;border:none;color:var(--primary);font-size:16px;font-weight:600;cursor:pointer;padding:10px 16px;border-radius:var(--radius-sm);transition:var(--transition);display:flex;align-items:center;gap:6px;position:relative}.backButton:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:0;height:2px;background:var(--primary);transition:width .3s ease}.backButton:hover{background:var(--primary-light);color:var(--primary-hover);transform:translate(-4px);padding-left:20px}.backButton:hover:before{width:8px}.backButton:active{transform:translate(-2px)}.backToHomeButton{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);color:#fff;padding:10px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:14px;cursor:pointer;transition:var(--transition);border:none;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.backToHomeButton:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.backToHomeButton:hover{background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary-dark) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.backToHomeButton:hover:before{width:300px;height:300px}.backToHomeButton:active{transform:translateY(0)}.error{color:var(--error);font-size:14px;margin-top:6px;font-weight:500;display:flex;align-items:center;gap:4px}.error:before{content:"⚠";font-size:16px}.link{text-align:center;color:var(--primary);font-size:16px;margin-top:16px;text-decoration:none;font-weight:500;transition:var(--transition);position:relative;display:inline-block}.link:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--primary);transition:width .3s ease}.link:hover{color:var(--primary-hover);transform:translateY(-1px)}.link:hover:after{width:100%}.list{padding:24px;display:flex;flex-direction:column;gap:16px}.ordersList{display:flex;flex-direction:column;gap:16px;margin-top:24px}.orderCard{border:2px solid var(--border);border-radius:var(--radius-lg);padding:24px;background-color:var(--surface);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.orderCard:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--primary);transform:scaleY(0);transition:transform .3s ease}.orderCard:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-4px) scale(1.01)}.orderCard:hover:before{transform:scaleY(1)}.orderId{font-size:18px;font-weight:600;margin-bottom:10px;color:var(--text-primary);transition:var(--transition-fast)}.orderCard:hover .orderId{color:var(--primary)}.orderDate{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.orderStatus{font-size:16px;font-weight:600;margin-bottom:8px}.orderPrice{font-size:22px;font-weight:700;color:var(--primary);transition:var(--transition-fast)}.orderCard:hover .orderPrice{color:var(--primary-hover)}.empty{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px 32px;min-height:400px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border);transition:var(--transition)}.empty:hover{box-shadow:var(--shadow-lg)}.emptyText{font-size:18px;color:var(--text-secondary);margin-bottom:24px;font-weight:500}.frameCard{border:2px solid var(--border);border-radius:var(--radius-lg);padding:28px;margin-bottom:20px;cursor:pointer;background:var(--surface);transition:var(--transition);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.frameCard:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(37,99,235,.05),transparent);transition:left .5s ease}.frameCard:hover{border-color:var(--primary);box-shadow:var(--shadow-xl);transform:translateY(-4px) scale(1.02)}.frameCard:hover:after{left:100%}.frameCard:active{transform:translateY(-2px) scale(1.01)}.frameName{font-size:22px;font-weight:600;margin-bottom:10px;color:var(--text-primary);transition:var(--transition-fast)}.frameCard:hover .frameName{color:var(--primary)}.frameDescription{font-size:14px;color:var(--text-secondary);margin-bottom:12px;line-height:1.5}.framePrice{font-size:22px;font-weight:700;color:var(--primary);transition:var(--transition-fast)}.frameCard:hover .framePrice{color:var(--primary-hover)}.authCard{background:var(--surface);padding:48px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;border:1px solid var(--border);transition:var(--transition)}.authCard:hover{box-shadow:var(--shadow-xl)}.homeHeader{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:48px;padding-bottom:24px;border-bottom:2px solid var(--border);flex-wrap:wrap;gap:24px}.homeHeaderLeft{flex:1}.homeTitle{font-size:42px;font-weight:700;color:var(--primary);margin-bottom:8px}.homeTagline{font-size:18px;color:var(--text-secondary);font-weight:500}.homeHeaderRight{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.homeNav{display:flex;gap:12px;align-items:center}.navLink{background:transparent;border:none;color:var(--text-primary);font-size:15px;font-weight:600;cursor:pointer;padding:8px 16px;border-radius:var(--radius-sm);transition:var(--transition);position:relative}.navLink:after{content:"";position:absolute;bottom:4px;left:16px;width:0;height:2px;background:var(--primary);transition:width .3s ease}.navLink:hover{color:var(--primary);background:var(--primary-light)}.navLink:hover:after{width:calc(100% - 32px)}.homeWelcomeSection{margin-bottom:48px}.welcomeCard{background:linear-gradient(135deg,var(--primary-light) 0%,rgba(37,99,235,.05) 100%);padding:32px;border-radius:var(--radius-lg);border:2px solid var(--primary);text-align:center}.welcomeTitle{font-size:32px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.welcomeSubtitle{font-size:18px;color:var(--text-secondary);font-weight:500}.homeMainActions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:48px}.actionCard{background:var(--surface);padding:32px;border-radius:var(--radius-lg);border:2px solid var(--border);cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}.actionCard:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--primary);transform:scaleY(0);transition:transform .3s ease}.actionCard:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.actionCard:hover:before{transform:scaleY(1)}.primaryAction{background:linear-gradient(135deg,var(--primary-light) 0%,var(--surface) 100%)}.actionIcon{font-size:48px;margin-bottom:16px}.actionTitle{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:12px}.actionDescription{font-size:16px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px}.actionArrow{font-size:24px;color:var(--primary);font-weight:700;transition:var(--transition)}.actionCard:hover .actionArrow{transform:translate(8px)}.homeFeatures{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:48px}.featureItem{text-align:center;padding:24px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);transition:var(--transition)}.featureItem:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.featureIcon{font-size:40px;margin-bottom:16px}.featureTitle{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.featureText{font-size:14px;color:var(--text-secondary);line-height:1.5}.logoutButton{background:transparent;border:2px solid var(--border);color:var(--text-primary);padding:10px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:14px;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.logoutButton:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fee2e2;transform:translate(-50%,-50%);transition:width .4s,height .4s}.logoutButton:hover{border-color:var(--error);color:var(--error);transform:translateY(-2px);box-shadow:var(--shadow-md)}.logoutButton:hover:before{width:200px;height:200px}.logoutButton:active{transform:translateY(0)}.homeActions{display:flex;flex-direction:column;gap:16px;margin-top:24px}.contentCard{background:var(--surface);padding:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border);max-width:900px;margin:0 auto}.instructionSection{margin-bottom:48px}.instructionSection:last-child{margin-bottom:0}.instructionStep{display:flex;gap:24px;margin-bottom:32px;padding:24px;background:linear-gradient(135deg,var(--background) 0%,var(--surface) 100%);border-radius:var(--radius-lg);border-left:4px solid var(--primary);transition:var(--transition)}.instructionStep:hover{box-shadow:var(--shadow-md);transform:translate(4px)}.stepNumber{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0}.stepContent{flex:1}.stepTitle{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.stepDescription{font-size:16px;color:var(--text-secondary);line-height:1.6}.tipsList{list-style:none;padding:0}.tipItem{padding:16px 24px;margin-bottom:12px;background:var(--primary-light);border-radius:var(--radius-sm);border-left:4px solid var(--primary);font-size:16px;color:var(--text-primary);line-height:1.6;transition:var(--transition)}.tipItem:hover{background:#2563eb1a;transform:translate(4px)}.aboutSection{margin-bottom:40px}.aboutSection:last-child{margin-bottom:0}.aboutText{font-size:16px;color:var(--text-secondary);line-height:1.8;margin-top:16px}.contactInfo{margin-bottom:32px;text-align:center}.contactDescription{font-size:16px;color:var(--text-secondary);margin-top:12px}.contactForm{display:flex;flex-direction:column;gap:24px}.textarea{resize:vertical;min-height:120px;font-family:inherit}.successMessage{text-align:center;padding:48px 24px}.successTitle{font-size:28px;font-weight:700;color:var(--success);margin:24px 0 12px}.successText{font-size:16px;color:var(--text-secondary);margin-bottom:32px;line-height:1.6}.loadingState{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.errorMessage{background:#fee2e2;color:var(--error);padding:16px;border-radius:var(--radius-sm);margin-bottom:24px;font-weight:500;border:2px solid #fecaca}.framesGrid{display:grid;gap:20px;margin-top:24px}.frameCard.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.paymentCard{background:var(--surface);padding:48px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;position:relative;z-index:1;border:1px solid var(--border);transition:var(--transition)}.paymentCard:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.paymentAmount{margin-bottom:40px}.amountLabel{font-size:14px;color:var(--text-secondary);margin-bottom:8px;font-weight:500}.amountValue{font-size:64px;font-weight:700;color:var(--primary);letter-spacing:-2px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:var(--transition)}.paymentCard:hover .amountValue{transform:scale(1.05)}::selection{background:var(--primary-light);color:var(--primary-dark)}.attestationSection{margin:24px 0;padding:20px;background:var(--primary-light);border-radius:var(--radius-sm);border:2px solid var(--primary)}.attestationCheckbox{display:flex;align-items:flex-start;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.attestationCheckbox input[type=checkbox]{width:20px;height:20px;margin-top:2px;cursor:pointer;accent-color:var(--primary);flex-shrink:0}.attestationText{font-size:15px;color:var(--text-primary);font-weight:500;line-height:1.5}.attestationCheckbox:hover .attestationText{color:var(--primary-dark)}.attestationCheckbox input[type=checkbox]:checked+.attestationText{color:var(--primary-dark);font-weight:600}.expiredCard{background:var(--surface);padding:56px 40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);text-align:center;border:2px solid var(--error);max-width:500px;margin:0 auto}.expiredIcon{font-size:80px;margin-bottom:24px;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.expiredTitle{font-size:32px;font-weight:700;color:var(--error);margin-bottom:16px}.expiredMessage{font-size:18px;color:var(--text-primary);margin-bottom:12px;font-weight:500}.expiredSubtext{font-size:16px;color:var(--text-secondary);margin-bottom:32px}*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media (max-width: 640px){.container,.scrollContainer{padding:24px 16px}.prescriptionForm,.authCard,.paymentCard{padding:24px}.pageTitle{font-size:28px}.amountValue{font-size:48px}.uploadIcon{font-size:56px}}.camera-pd-container{display:flex;flex-direction:column;align-items:center;padding:20px;max-width:100%}.camera-pd-header{text-align:center;margin-bottom:20px}.camera-pd-header h2{margin:0 0 10px;font-size:24px}.instructions{color:#666;font-size:14px;margin:0}.camera-pd-view{position:relative;width:100%;max-width:640px;aspect-ratio:4 / 3;margin-bottom:20px;border-radius:8px;overflow:hidden;background:#000}.camera-video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.camera-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}.face-guide-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;display:flex;align-items:center;justify-content:center}.face-guide-frame{width:50%;height:60%;border:3px solid rgba(0,255,0,.6);border-radius:8px;box-shadow:0 0 20px #00ff004d;position:relative;transition:border-color .3s ease,box-shadow .3s ease}.face-guide-frame.position-good{border-color:#0f0c;box-shadow:0 0 25px #00ff0080}.face-guide-frame.position-warning{border-color:#ffa500cc;box-shadow:0 0 25px #ffa50080}.face-guide-frame:before,.face-guide-frame:after{content:"";position:absolute;background:#0f09}.face-guide-frame:before{top:-15px;left:50%;transform:translate(-50%);width:2px;height:15px}.face-guide-frame:after{bottom:-15px;left:50%;transform:translate(-50%);width:2px;height:15px}.face-position-feedback{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:10px 20px;border-radius:20px;font-size:16px;font-weight:700;z-index:11}.position-good{color:#4caf50}.position-warning{color:orange;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.pd-capturing{font-size:14px;color:#4caf50;margin-top:5px;font-weight:700;animation:pulse 1s ease-in-out infinite}.face-detection-status{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0000004d;z-index:6;pointer-events:none}.detection-message{background:#000c;color:#fff;padding:30px 40px;border-radius:12px;text-align:center;max-width:300px}.detection-icon{font-size:48px;margin-bottom:15px}.detection-message>div:not(.detection-icon){margin-bottom:10px;font-size:16px}.detection-hint{font-size:14px;color:#ccc;margin-top:10px}.pd-display{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:15px 25px;border-radius:8px;text-align:center;z-index:10}.pd-value{font-size:32px;font-weight:700;color:#4caf50;margin-bottom:5px}.pd-confidence{font-size:14px;color:#ccc;margin-bottom:5px}.pd-status{font-size:18px;color:#ffc107}.pd-warning{font-size:12px;color:#ff9800;margin-top:5px}.camera-pd-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.camera-pd-error{text-align:center;padding:40px 20px}.camera-pd-error h2{margin-bottom:15px}.camera-pd-error p{color:#666;margin-bottom:20px}@media (max-width: 640px){.camera-pd-view{max-width:100%}.pd-display{top:10px;padding:10px 15px}.pd-value{font-size:24px}}.order-step-timeline{width:100%;padding:24px 0}.timeline-container{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px}.timeline-line{position:absolute;top:20px;left:16px;right:16px;height:4px;background-color:var(--timeline-incomplete-color, #e0e0e0);z-index:0}.timeline-progress{position:absolute;top:0;left:0;height:100%;background-color:var(--timeline-complete-color, #4caf50);transition:width .3s ease}.timeline-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}.step-node-container{margin-bottom:12px}.step-node{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;border:4px solid;background-color:var(--step-bg-color, #ffffff);transition:all .3s ease}.step-node-completed{background-color:var(--step-completed-bg, #4caf50);border-color:var(--step-completed-border, #4caf50);color:var(--step-completed-text, #ffffff)}.step-node-current{background-color:var(--step-current-bg, #2196f3);border-color:var(--step-current-border, #2196f3);color:var(--step-current-text, #ffffff);animation:pulse 2s ease-in-out infinite}.step-node-upcoming{background-color:var(--step-upcoming-bg, #ffffff);border-color:var(--step-upcoming-border, #e0e0e0);color:var(--step-upcoming-text, #999999)}.step-checkmark{font-size:24px;line-height:1}.step-label{font-size:16px;font-weight:600;text-align:center;color:var(--step-label-color, #000000);padding:0 4px;word-break:break-word;line-height:1.3}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}}@media (max-width: 640px){.step-node{width:36px;height:36px;font-size:18px;border-width:3px}.step-label{font-size:14px}.timeline-line{height:3px}}*{margin:0;padding:0;box-sizing:border-box}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:#f8fafc;color:#0f172a;min-height:100vh}button,input,textarea,select{font-family:inherit}:root{--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "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: 32px;--font-size-4xl: 40px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--color-background: #FFFFFF;--color-surface: #FFFFFF;--color-surface-elevated: #FAFAFA;--color-text-primary: #111827;--color-text-secondary: #6B7280;--color-text-tertiary: #9CA3AF;--color-text-inverse: #FFFFFF;--color-border: #D1D5DB;--color-primary: #111827;--color-primary-hover: #0B1220;--color-primary-pressed: #0B1220;--color-primary-light: #F3F4F6;--color-primary-dark: #0B1220;--color-secondary: #2563EB;--color-secondary-hover: #1D4ED8;--color-secondary-light: #DBEAFE;--color-success: #10B981;--color-success-light: #D1FAE5;--color-success-hover: #059669;--color-error: #EF4444;--color-error-light: #FEE2E2;--color-error-hover: #DC2626;--color-warning: #F59E0B;--color-warning-light: #FEF3C7;--color-warning-hover: #D97706;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 10px 10px -5px rgb(0 0 0 / .04);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05);--shadow-none: none;--transition-fast: all .15s ease;--transition-base: all .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: all .5s cubic-bezier(.4, 0, .2, 1);--z-base: 0;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}[data-theme=dark]{--color-background: #0A0A0A;--color-surface: #111827;--color-surface-elevated: #1F2937;--color-text-primary: #F9FAFB;--color-text-secondary: #9CA3AF;--color-text-tertiary: #6B7280;--color-text-inverse: #111827;--color-border: #1F2937;--color-primary: #F9FAFB;--color-primary-hover: #E5E7EB;--color-primary-pressed: #E5E7EB;--color-primary-light: #374151;--color-primary-dark: #E5E7EB;--color-secondary: #60A5FA;--color-secondary-hover: #93C5FD;--color-secondary-light: #1E3A8A;--color-success: #34D399;--color-success-light: #065F46;--color-success-hover: #10B981;--color-error: #F87171;--color-error-light: #7F1D1D;--color-error-hover: #EF4444;--color-warning: #FBBF24;--color-warning-light: #78350F;--color-warning-hover: #F59E0B}*{box-sizing:border-box}body{font-family:var(--font-family-sans);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;min-height:100vh}#root{min-height:100vh}html{scroll-behavior:smooth}::selection{background-color:var(--color-secondary-light);color:var(--color-secondary)}*:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px;border-radius:var(--radius-sm)}button{font-family:inherit;border:none;background:none;padding:0;margin:0;cursor:pointer}input,textarea,select{font-family:inherit;font-size:inherit}