*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--black:#0a0a0a;--white:#ffffff;--gray-50:#fafafa;--gray-100:#f4f4f5;--gray-200:#e4e4e7;--gray-300:#d4d4d8;--gray-400:#a1a1aa;--gray-500:#71717a;--gray-600:#52525b;--gray-700:#3f3f46;--gray-800:#27272a;--gray-900:#18181b;--accent:#ff3366;--accent-hover:#e6294d;--success:#10b981;--success-hover:#059669;--warning:#f59e0b;--error:#ef4444;--font-display:"Archivo Black",sans-serif;--font-body:"DM Sans",sans-serif;--sidebar-width:380px;--header-height:64px;--gutter:16px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--transition-fast:150ms ease;--transition-normal:250ms ease}body,html{height:100%;overflow:hidden}body{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--gray-100);background:var(--black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400;letter-spacing:.02em;text-transform:uppercase}h1{font-size:24px}h2{font-size:18px}h3{font-size:14px}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{justify-content:space-between;height:var(--header-height);padding:0 24px;background:var(--gray-900);border-bottom:1px solid var(--gray-800);flex-shrink:0}.header,.header__brand{display:flex;align-items:center}.header__brand{gap:12px}.header__logo{width:32px;height:32px;background:var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.header__logo svg{width:20px;height:20px;fill:var(--white)}.header__title{font-size:20px;color:var(--white)}.header__actions{display:flex;align-items:center;gap:12px}.canvas-area,.main{display:flex;flex:1 1;overflow:hidden}.canvas-area{flex-direction:column;background:var(--black)}.canvas-toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--gray-900);border-bottom:1px solid var(--gray-800)}.canvas-toolbar__group{display:flex;align-items:center;gap:4px;padding:0 8px;border-right:1px solid var(--gray-700)}.canvas-toolbar__group:last-child{border-right:none}.canvas-container{flex:1 1;display:flex;padding:var(--gutter);overflow:auto;position:relative}.canvas-wrapper{position:relative;margin:auto;flex-shrink:0;background:var(--gray-800);border-radius:var(--radius-md);box-shadow:0 4px 24px rgba(0,0,0,.5)}.canvas-wrapper canvas{display:block;border-radius:var(--radius-md)}.canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:48px;color:var(--gray-500);text-align:center}.canvas-empty__icon{width:64px;height:64px;opacity:.5}.canvas-empty__title{font-size:16px;font-weight:600;color:var(--gray-400)}.sidebar{width:var(--sidebar-width);display:flex;flex-direction:column;background:var(--gray-900);border-left:1px solid var(--gray-800);overflow:hidden;flex-shrink:0}.sidebar__section{border-bottom:1px solid var(--gray-800)}.sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background var(--transition-fast)}.sidebar__header:hover{background:var(--gray-800)}.sidebar__title{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray-400)}.sidebar__toggle{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--gray-500);transition:transform var(--transition-fast)}.sidebar__toggle.collapsed{transform:rotate(-90deg)}.sidebar__content{padding:0 16px 16px}.sidebar__content.collapsed{display:none}.pages-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;gap:8px}.page-thumb{aspect-ratio:2/3;background:var(--gray-800);border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;overflow:hidden;position:relative;transition:all var(--transition-fast)}.page-thumb:hover{border-color:var(--gray-600)}.page-thumb.active{border-color:var(--accent)}.page-thumb.done{border-color:var(--success)}.page-thumb__img{width:100%;height:100%;object-fit:cover}.page-thumb__number{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.7);color:var(--white);font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--radius-sm)}.page-thumb__status{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}.page-thumb__status.done{background:var(--success)}.page-thumb__status svg{width:10px;height:10px;fill:var(--white)}.panel-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}.panel-item{display:flex;align-items:center;gap:12px;padding:8px;background:var(--gray-800);border-radius:var(--radius-sm);cursor:-webkit-grab;cursor:grab;transition:background var(--transition-fast)}.panel-item:hover{background:var(--gray-700)}.panel-item.dragging{opacity:.5}.panel-item.selected{background:var(--gray-700);border:1px solid var(--accent)}.panel-item__preview{width:48px;height:48px;background:var(--gray-700);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}.panel-item__preview canvas{width:100%;height:100%;object-fit:cover}.panel-item__info{flex:1 1;min-width:0}.panel-item__name{font-size:13px;font-weight:500;color:var(--gray-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-item__size{font-size:11px;color:var(--gray-500)}.panel-item__actions{display:flex;gap:4px;opacity:0;transition:opacity var(--transition-fast)}.panel-item:hover .panel-item__actions{opacity:1}.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px}.settings-group{display:flex;flex-direction:column;gap:12px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-row__label{font-size:13px;color:var(--gray-300)}.setting-row__input{width:80px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--gray-500)}.btn,.empty-state__text{font-size:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font-family:var(--font-body);font-weight:600;line-height:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--accent);color:var(--white)}.btn--primary:hover:not(:disabled){background:var(--accent-hover)}.btn--secondary{background:var(--gray-700);color:var(--gray-100)}.btn--secondary:hover:not(:disabled){background:var(--gray-600)}.btn--ghost{background:transparent;color:var(--gray-300)}.btn--ghost:hover:not(:disabled){background:var(--gray-800);color:var(--white)}.btn--success{background:var(--success);color:var(--white)}.btn--success:hover:not(:disabled){background:var(--success-hover)}.btn--sm{padding:6px 10px;font-size:12px}.btn--icon{width:36px;height:36px;padding:0}.btn--icon.btn--sm{width:28px;height:28px}.btn svg{width:16px;height:16px;fill:currentColor}.btn--icon svg{width:18px;height:18px}.icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--gray-400);cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover{background:var(--gray-800);color:var(--white)}.icon-btn.active{background:var(--accent);color:var(--white)}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn svg{width:18px;height:18px;fill:currentColor}.input{width:100%;padding:10px 12px;font-family:var(--font-body);font-size:13px;color:var(--gray-100);background:var(--gray-800);border:1px solid var(--gray-700);border-radius:var(--radius-sm);outline:none;transition:border-color var(--transition-fast)}.input:focus{border-color:var(--accent)}.input--sm{padding:6px 10px;font-size:12px}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;background:var(--gray-800);border:2px dashed var(--gray-600);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:center}.dropzone.dragover,.dropzone:hover{border-color:var(--accent);background:rgba(255,51,102,.05)}.dropzone__icon{width:48px;height:48px;color:var(--gray-500)}.dropzone__icon svg{width:100%;height:100%;fill:currentColor}.dropzone__text{font-size:14px;color:var(--gray-400)}.dropzone__text strong{color:var(--accent)}.dropzone__hint{font-size:12px;color:var(--gray-600)}.badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}.badge--accent{background:rgba(255,51,102,.15);color:var(--accent)}.badge--success{background:rgba(16,185,129,.15);color:var(--success)}.divider{width:1px;height:24px;background:var(--gray-700);margin:0 8px}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000;opacity:0;visibility:hidden;transition:all var(--transition-normal)}.modal-overlay.active{opacity:1;visibility:visible}.modal{width:100%;max-width:600px;max-height:90vh;background:var(--gray-900);border:1px solid var(--gray-800);border-radius:var(--radius-lg);overflow:hidden;transform:scale(.95);transition:transform var(--transition-normal)}.modal-overlay.active .modal{transform:scale(1)}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-800)}.modal__title{font-size:16px;color:var(--white)}.modal__close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--gray-400);cursor:pointer;transition:all var(--transition-fast)}.modal__close:hover{background:var(--gray-800);color:var(--white)}.modal__close svg{width:20px;height:20px;fill:currentColor}.modal__body{padding:20px;overflow-y:auto}.modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid var(--gray-800)}.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:1100}.toast{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--gray-800);border:1px solid var(--gray-700);border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,.3);animation:toast-in .3s ease}.toast--success{border-color:var(--success)}.toast--error{border-color:var(--error)}.toast__icon{width:20px;height:20px;flex-shrink:0}.toast__icon svg{width:100%;height:100%;fill:currentColor}.toast--success .toast__icon{color:var(--success)}.toast--error .toast__icon{color:var(--error)}.toast__message{font-size:13px;color:var(--gray-200)}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--gray-900)}::-webkit-scrollbar-thumb{background:var(--gray-700);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gray-600)}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:var(--black)}.auth-card{width:100%;max-width:400px;background:var(--gray-900);border:1px solid var(--gray-800);border-radius:var(--radius-lg);padding:40px 32px}.auth-card__header{text-align:center;margin-bottom:32px}.auth-card__header .header__logo{margin:0 auto 16px}.auth-card__title{font-size:22px;color:var(--white);margin-bottom:8px}.auth-card__subtitle{font-size:14px;color:var(--gray-400)}.auth-card__form{display:flex;flex-direction:column;gap:16px}.auth-card__field{display:flex;flex-direction:column;gap:6px}.auth-card__field label{font-size:13px;font-weight:500;color:var(--gray-300)}.auth-card__error{padding:10px 14px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:var(--error);font-size:13px}.auth-card__submit{width:100%;margin-top:8px}.auth-card__footer{text-align:center;margin-top:24px;font-size:13px;color:var(--gray-500)}.auth-card__footer a{color:var(--accent);text-decoration:none;font-weight:500}.auth-card__footer a:hover{text-decoration:underline}.auth-loading{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--black)}.auth-loading__spinner{width:32px;height:32px;border:3px solid var(--gray-700);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.header__divider{width:1px;height:20px;background:var(--gray-700)}.step-indicator{display:flex;align-items:center;gap:0}.step-indicator__item{display:flex;align-items:center;gap:8px}.step-indicator__line{width:40px;height:2px;background:var(--gray-700);margin-right:8px;transition:background var(--transition-normal)}.step-indicator__line.completed{background:var(--accent)}.step-indicator__dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--gray-600);background:transparent;color:var(--gray-500);font-family:var(--font-body);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.step-indicator__dot:disabled{cursor:not-allowed;opacity:.5}.step-indicator__dot.active{border-color:var(--accent);background:var(--accent);color:var(--white)}.step-indicator__dot.completed{border-color:var(--accent);background:transparent;color:var(--accent)}.step-indicator__dot svg{width:16px;height:16px;fill:currentColor}.step-indicator__label{font-size:12px;font-weight:500;color:var(--gray-500);margin-right:8px;transition:color var(--transition-fast)}.step-indicator__label.active{color:var(--white)}.upload-step{flex:1 1;padding:32px}.upload-step,.upload-step__dropzone{display:flex;align-items:center;justify-content:center}.upload-step__dropzone{flex-direction:column;gap:16px;width:100%;max-width:560px;padding:80px 48px;background:var(--gray-900);border:2px dashed var(--gray-600);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);text-align:center}.upload-step__dropzone.dragover,.upload-step__dropzone:hover{border-color:var(--accent);background:rgba(255,51,102,.04)}.upload-step__icon{width:64px;height:64px;color:var(--gray-500)}.upload-step__icon svg{width:100%;height:100%;fill:currentColor}.upload-step__title{font-size:20px;color:var(--white)}.upload-step__subtitle{font-size:15px;color:var(--gray-400)}.upload-step__hint{font-size:12px;color:var(--gray-600)}.upload-step__content{flex:1 1;display:flex;flex-direction:column;width:100%;max-width:800px;margin:0 auto;gap:24px}.upload-step__pages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:12px;gap:12px;flex:1 1;overflow-y:auto;align-content:start}.upload-step__thumb{aspect-ratio:2/3;background:var(--gray-800);border-radius:var(--radius-md);overflow:hidden;position:relative}.upload-step__thumb img{width:100%;height:100%;object-fit:cover}.upload-step__thumb-number{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.75);color:var(--white);font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm)}.upload-step__add-more{aspect-ratio:2/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--gray-900);border:2px dashed var(--gray-700);border-radius:var(--radius-md);color:var(--gray-500);cursor:pointer;font-size:12px;transition:all var(--transition-fast)}.upload-step__add-more.dragover,.upload-step__add-more:hover{border-color:var(--accent);color:var(--accent)}.upload-step__add-more svg{width:24px;height:24px}.upload-step__footer{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-top:1px solid var(--gray-800)}.upload-step__count{font-size:14px;color:var(--gray-400)}.btn--lg{padding:14px 24px;font-size:15px}.draw-step{flex:1 1;display:flex;flex-direction:column;position:relative;overflow:hidden}.draw-step__canvas-area{flex:1 1;position:relative;overflow:auto}.draw-step__canvas-area,.draw-step__nav-arrow{display:flex;align-items:center;justify-content:center}.draw-step__nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;background:var(--gray-800);border:1px solid var(--gray-700);border-radius:50%;color:var(--gray-300);cursor:pointer;transition:all var(--transition-fast)}.draw-step__nav-arrow:hover:not(:disabled){background:var(--gray-700);color:var(--white)}.draw-step__nav-arrow:disabled{opacity:.3;cursor:not-allowed}.draw-step__nav-arrow svg{width:20px;height:20px;fill:currentColor}.draw-step__nav-arrow--prev{left:16px}.draw-step__nav-arrow--next{right:16px}.draw-step__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--gray-900);border-top:1px solid var(--gray-800)}.draw-step__page-info{font-size:13px;color:var(--gray-400)}.draw-step__footer .btn svg{width:16px;height:16px}.floating-toolbar{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:4px;padding:6px 12px;background:var(--gray-900);border:1px solid var(--gray-700);border-radius:999px;box-shadow:0 4px 24px rgba(0,0,0,.5)}.floating-toolbar__btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;border:none;border-radius:999px;color:var(--gray-400);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.floating-toolbar__btn:hover{background:var(--gray-800);color:var(--white)}.floating-toolbar__btn.active{background:var(--accent);color:var(--white)}.floating-toolbar__btn svg{width:16px;height:16px;fill:currentColor}.floating-toolbar__divider{width:1px;height:20px;background:var(--gray-700);margin:0 4px}.floating-toolbar__templates-wrapper{position:relative}.floating-toolbar__zoom{font-size:12px;font-weight:600;color:var(--gray-500);padding:0 8px;min-width:48px;text-align:center}.templates-popover{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:30;background:var(--gray-900);border:1px solid var(--gray-700);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.5);padding:12px;min-width:220px}.templates-popover__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px}.templates-popover__btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--gray-800);border:1px solid transparent;border-radius:var(--radius-md);color:var(--gray-400);font-family:var(--font-body);font-size:11px;cursor:pointer;transition:all var(--transition-fast)}.templates-popover__btn:hover{border-color:var(--accent);color:var(--white)}.templates-popover__btn svg{opacity:.7}.templates-popover__btn:hover svg{opacity:1}.panel-strip{display:flex;align-items:center;gap:8px;padding:12px 24px;background:var(--gray-900);border-top:1px solid var(--gray-800);overflow-x:auto;min-height:80px}.panel-strip__empty{font-size:13px;color:var(--gray-500);margin:0 auto}.panel-strip__item{position:relative;flex-shrink:0;width:56px;height:56px;border:2px solid var(--gray-700);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:border-color var(--transition-fast)}.panel-strip__item:hover{border-color:var(--gray-500)}.panel-strip__item.selected{border-color:var(--accent)}.panel-strip__item canvas{display:block;width:100%;height:100%;object-fit:cover}.panel-strip__number{position:absolute;bottom:2px;right:2px;font-size:9px;font-weight:700;color:var(--white);background:rgba(0,0,0,.7);padding:1px 4px;border-radius:2px;line-height:1}.export-step,.export-step__preview{flex:1 1;display:flex;overflow:hidden}.export-step__preview{flex-direction:column;background:var(--black)}.export-step__empty{color:var(--gray-500);font-size:14px;text-align:center;padding:48px;margin:auto}.export-step__canvas-scroll{flex:1 1;overflow-y:auto;padding:24px}.export-step__canvas-scroll canvas{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:var(--radius-md);box-shadow:0 4px 24px rgba(0,0,0,.5)}.export-step__settings{width:320px;flex-shrink:0;display:flex;flex-direction:column;gap:24px;padding:32px 24px;background:var(--gray-900);border-left:1px solid var(--gray-800);overflow-y:auto}.export-step__title{font-size:16px;color:var(--white)}.export-step__group{display:flex;flex-direction:column;gap:8px}.export-step__label{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--gray-300)}.export-step__value{font-weight:600;color:var(--gray-400);font-size:12px}.export-step__range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--gray-700);border-radius:2px;outline:none;cursor:pointer}.export-step__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer;-webkit-transition:transform var(--transition-fast);transition:transform var(--transition-fast)}.export-step__range::-webkit-slider-thumb:hover{transform:scale(1.2)}.export-step__range::-moz-range-thumb{width:16px;height:16px;background:var(--accent);border:none;border-radius:50%;cursor:pointer}.export-step__color-row{display:flex;align-items:center;gap:12px}.export-step__color-input{width:40px;height:32px;border:1px solid var(--gray-700);border-radius:var(--radius-sm);background:transparent;cursor:pointer;padding:2px}.export-step__color-hex{font-size:13px;font-family:monospace;color:var(--gray-400)}.export-step__actions{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px;border-top:1px solid var(--gray-800)}