:root{--color-primary: #3b82f6;--color-primary-dark: #2563eb;--color-bg: #f1f5f9;--color-surface: #ffffff;--color-surface-2: #f8fafc;--color-surface-3: #f1f5f9;--color-border: #e2e8f0;--color-text: #0f172a;--color-text-secondary: #64748b;--color-text-muted: #94a3b8;--color-success: #10b981;--color-error: #ef4444;--space-1: 4px;--space-2: 6px;--space-3: 10px;--space-4: 14px;--space-5: 18px;--space-6: 22px;--space-8: 32px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0,0,0,.06);--shadow-md: 0 2px 8px rgba(0,0,0,.08);--shadow-xl: 0 8px 24px rgba(0,0,0,.12);--font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-xl: 20px;--transition: .15s ease;--header-height: 48px;--bottom-nav-height: 56px;--safe-area-bottom: env(safe-area-inset-bottom, 0px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body{font-family:var(--font);font-size:var(--text-base);line-height:1.5;color:var(--color-text);background:var(--color-bg);min-height:100vh;min-height:100dvh;overflow-x:hidden}img,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none;-webkit-appearance:none}input,select{-webkit-appearance:none;appearance:none}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}::selection{background:var(--color-primary);color:#fff}.accordion{background:var(--color-surface);border-radius:var(--radius-md);margin-bottom:var(--space-1)}.accordion__header{width:100%;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--color-text);text-align:left}.accordion__header:active{background:var(--color-surface-2)}.accordion__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);flex-shrink:0}.accordion__icon svg{width:14px;height:14px}.accordion__title{flex:1}.accordion__arrow{width:18px;height:18px;color:var(--color-text-muted);transition:transform var(--transition)}.accordion__header--active .accordion__arrow{transform:rotate(180deg)}.accordion__content{display:none;padding:0 var(--space-2) var(--space-2)}.accordion__content--active{display:block}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}.switch-row:last-child{border-bottom:none}.switch-row__label{font-size:var(--text-sm);color:var(--color-text)}.switch{position:relative;width:44px;height:26px;background:var(--color-border);border-radius:var(--radius-full);transition:background var(--transition);cursor:pointer;flex-shrink:0}.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--transition)}.switch:checked{background:var(--color-primary)}.switch:checked:after{transform:translate(18px)}.color-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}.color-row:last-child{border-bottom:none}.color-row__label{font-size:var(--text-sm);color:var(--color-text)}.color-picker{width:36px;height:36px;border:2px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;padding:0}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:3px}.input-row{margin-bottom:var(--space-3)}.input-row:last-child{margin-bottom:0}.input-row__label{display:block;font-size:var(--text-xs);font-weight:500;color:var(--color-text-secondary);margin-bottom:2px}.input-hint{font-weight:400;color:var(--color-text-muted);font-style:italic}.input-field{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);background:var(--color-surface-2);border:2px solid transparent;border-radius:var(--radius-sm);transition:all var(--transition)}.input-field:focus{background:#fff;border-color:var(--color-primary)}.input-field--textarea{resize:vertical;min-height:60px}.sub-fields{padding:var(--space-2) 0 var(--space-2) var(--space-3);border-left:2px solid var(--color-border);margin:var(--space-2) 0}.help-text{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}.upload-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.upload-card{position:relative;aspect-ratio:1;background:var(--color-surface-2);border:2px dashed var(--color-border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer}.upload-input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}.upload-card__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--color-text-muted)}.upload-card__placeholder svg{width:20px;height:20px}.upload-card__placeholder span{font-size:var(--text-xs);font-weight:500}.upload-card__preview{display:none;position:absolute;inset:0}.upload-card__preview img{width:100%;height:100%;object-fit:cover}.upload-card__preview--active{display:block}.upload-card__remove{position:absolute;top:4px;right:4px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:#0009;color:#fff;border-radius:50%;z-index:3}.upload-card__remove svg{width:12px;height:12px}.template-select{width:100%;padding:var(--space-3);font-size:var(--text-sm);font-weight:500;color:var(--color-text);background:var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;border:2px solid var(--color-border);border-radius:var(--radius-sm);padding-right:40px;transition:all var(--transition)}.template-select:hover{border-color:var(--color-primary)}.template-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f61a}.template-select option{padding:var(--space-2)}.preview-pages{display:flex;gap:var(--space-1);padding-bottom:var(--space-2);overflow-x:auto;-webkit-overflow-scrolling:touch}.preview-page-btn{flex-shrink:0;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:500;color:var(--color-text-secondary);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full)}.preview-page-btn--active{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-sm);transition:all var(--transition)}.btn--primary{background:var(--color-primary);color:#fff}.btn--primary:hover{background:var(--color-primary-dark)}.btn--outline{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.btn--outline:hover{background:var(--color-surface-2);border-color:var(--color-primary);color:var(--color-primary)}.toast{position:fixed;bottom:calc(120px + var(--safe-area-bottom));left:50%;transform:translate(-50%) translateY(80px);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;background:var(--color-text);color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-md);z-index:1000;opacity:0;transition:all .2s ease}.toast--visible{transform:translate(-50%) translateY(0);opacity:1}.toast--success{background:var(--color-success)}.toast--error{background:var(--color-error)}@media(min-width:768px){.toast{bottom:var(--space-6)}}.pkg-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);margin-bottom:var(--space-2)}.pkg-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.pkg-card__title{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}.pkg-card__remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--color-error);border-radius:var(--radius-sm)}.pkg-card__remove:active{background:#ef44441a}.pkg-card__remove svg{width:14px;height:14px}.pkg-card__fields{display:grid;grid-template-columns:1fr;gap:var(--space-2)}@media(min-width:400px){.pkg-card__fields{grid-template-columns:1fr 1fr}}.pkg-field{display:flex;flex-direction:column;gap:2px}.pkg-field--full{grid-column:1 / -1}.pkg-field__label{font-size:10px;font-weight:500;color:var(--color-text-muted);text-transform:uppercase}.pkg-field__input{width:100%;min-width:0;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px}.pkg-field__input:focus{border-color:var(--color-primary);outline:none}.pkg-add-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-1);width:100%;padding:var(--space-2);font-size:var(--text-sm);font-weight:500;color:var(--color-primary);background:#3b82f61a;border:1px dashed var(--color-primary);border-radius:var(--radius-sm);margin-top:var(--space-2)}.pkg-add-btn:active{background:#3b82f633}.pkg-add-btn svg{width:14px;height:14px}.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-4);pointer-events:none}.modal--open{pointer-events:auto}.modal__backdrop{position:absolute;inset:0;background:#00000080;opacity:0;transition:opacity .2s ease-out;will-change:opacity}.modal--open .modal__backdrop{opacity:1}.modal__content{position:relative;width:100%;max-width:400px;padding:var(--space-6);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);transform:translateY(12px);opacity:0;transition:transform .2s ease-out,opacity .2s ease-out;will-change:transform,opacity}.modal--open .modal__content{transform:translateY(0);opacity:1}.modal__close{position:absolute;top:var(--space-3);right:var(--space-3);width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;color:var(--color-text-muted);border-radius:var(--radius-full);transition:background var(--transition)}.modal__close:hover{background:var(--color-surface-2)}.modal__icon{width:64px;height:64px;margin:0 auto var(--space-4);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary);border-radius:var(--radius-full)}.modal__icon svg{width:32px;height:32px}.modal__icon--success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success)}.modal__title{font-size:var(--text-xl);font-weight:700;text-align:center;margin-bottom:var(--space-2);color:var(--color-text)}.modal__desc{font-size:var(--text-sm);color:var(--color-text-secondary);text-align:center;margin-bottom:var(--space-4)}.modal__form{display:flex;flex-direction:column;gap:var(--space-3)}.modal__input{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-base);border:2px solid var(--color-border);border-radius:var(--radius-md);text-align:center;transition:border-color var(--transition)}.modal__input:focus{outline:none;border-color:var(--color-primary)}.modal__btn{position:relative}.modal__btn .btn__loading{display:none}.modal__btn--loading .btn__text{visibility:hidden}.modal__btn--loading .btn__loading{display:flex;position:absolute;inset:0;align-items:center;justify-content:center}.modal__hint{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;margin-top:var(--space-3)}.otp-inputs{display:flex;gap:var(--space-2);justify-content:center}.otp-input{width:44px;height:52px;font-size:var(--text-xl);font-weight:700;text-align:center;border:2px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition)}.otp-input:focus{outline:none;border-color:var(--color-primary)}.link-btn{color:var(--color-primary);text-decoration:underline}.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--space-3);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.header__content{display:flex;flex-direction:column;align-items:center;flex:1}.header__title{font-size:var(--text-base);font-weight:700;color:var(--color-text)}.header__desc{font-size:var(--text-xs);color:var(--color-text-muted)}.header__reset{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--color-text-muted);border-radius:var(--radius-sm);transition:all var(--transition)}.header__reset:hover{color:var(--color-error);background:#ef44441a}.main{flex:1;display:flex;flex-direction:column}.content-area{padding:var(--space-3)}.step-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;margin-bottom:var(--space-3)}.step-dot{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500;transition:all var(--transition)}.step-dot:hover{background:var(--color-surface-3)}.step-dot--active{background:var(--color-primary);color:#fff}.step-dot--active:hover{background:var(--color-primary-dark)}.step-dot--completed{background:var(--color-success);color:#fff}.step-dot--completed:hover{background:var(--color-success-dark, #16a34a)}.step-dot__number{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#fff3;font-size:11px;font-weight:600}.step-dot__label{display:none}.step-line{flex:1;height:2px;background:var(--color-border);min-width:20px}.step{display:none}.step--active{display:block}.step-nav{display:flex;gap:var(--space-2);padding:var(--space-3);margin-top:var(--space-3);background:var(--color-surface);border-top:1px solid var(--color-border)}.step-nav__back,.step-nav__next,.step-nav__download{display:none;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-sm);transition:all var(--transition)}.step-nav__back{background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.step-nav__back:hover{background:var(--color-surface-2);color:var(--color-text)}.step-nav__next,.step-nav__download{flex:1;background:var(--color-primary);color:#fff}.step-nav__next:hover,.step-nav__download:hover{background:var(--color-primary-dark)}.step-nav__next,[data-current-step="2"] .step-nav__back{display:flex}[data-current-step="2"] .step-nav__next{display:none}[data-current-step="2"] .step-nav__download{display:flex}.preview-area{display:block;background:var(--color-surface-2);border-top:1px solid var(--color-border)}.preview-label{padding:var(--space-2) var(--space-2) 0;font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.preview-content{padding:var(--space-2)}.preview-wrapper{border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:#fff}.preview-iframe{width:100%;height:480px;background:#fff;border:none;display:block}@media(max-width:767px){.step-dot__label{display:inline}.main{padding-bottom:70px}.step-nav{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media(min-width:768px){.main{display:grid;grid-template-columns:400px 1fr;gap:var(--space-4);max-width:1000px;margin:0 auto;padding:var(--space-4);width:100%}.content-area{padding:0}.step-nav{border-top:1px solid var(--color-border);padding:var(--space-3) 0;margin-top:var(--space-3);background:transparent}.preview-area{position:sticky;top:calc(var(--header-height) + var(--space-4));height:fit-content;border-top:none}.preview-content{background:transparent;padding:0}.preview-wrapper{border-radius:var(--radius-md);margin:0}.preview-iframe{height:580px}.step-dot__label{display:inline}}@media(min-width:1024px){.main{max-width:1100px;grid-template-columns:450px 1fr}.preview-iframe{height:620px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.step--active{animation:fadeIn .15s ease}