*{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:#f5f5f5}html,body{height:100%}app-root{display:block;min-height:100%}app-canvas{display:block;width:100%;height:100%;min-height:100%}app-canvas .canvas-wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:100%}app-canvas .canvas-topbar{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:18px 22px 14px}app-canvas .canvas-primary-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}app-canvas .preview-toggle-button,app-canvas .add-page-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}app-canvas .preview-toggle-button{border:1px solid #d7dbe7;background:#fffffff5;color:#243047}app-canvas .preview-toggle-button.active{border-color:#24304733;background:#24304714}app-canvas .add-page-button{border:1px solid #243047;background:#243047;color:#fff}app-canvas .add-page-button:hover{box-shadow:0 6px 16px #2430472e;transform:translateY(-1px)}app-canvas .canvas-zoom-controls{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-radius:12px;box-shadow:0 8px 20px #0f172a14;z-index:10}app-canvas .canvas-zoom-controls .zoom-btn{width:32px;height:32px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#333;transition:all .2s}app-canvas .canvas-zoom-controls .zoom-btn:hover:not(:disabled){background:#f5f5f5;border-color:#243047;color:#243047}app-canvas .canvas-zoom-controls .zoom-btn:disabled{opacity:.5;cursor:not-allowed}app-canvas .canvas-zoom-controls .zoom-btn.reset{font-size:16px;margin-left:4px}app-canvas .canvas-zoom-controls .zoom-level{min-width:50px;text-align:center;font-weight:600;color:#243047;font-size:14px}app-canvas .canvas-workspace{position:relative;width:100%;display:grid;grid-template-columns:minmax(220px,240px) minmax(0,1fr);gap:0;align-items:stretch;flex:1;min-height:0;border-top:1px solid #e3e8f0}app-canvas .canvas-workspace.previews-hidden{grid-template-columns:44px minmax(0,1fr)}app-canvas .canvas-workspace.previews-hidden .canvas-main{grid-column:2}app-canvas .page-preview-rail{display:flex;flex-direction:column;gap:12px;min-height:0;height:100%;padding:18px 14px 18px 16px;border-right:1px solid #e3e8f0;background:#eef3f8;max-height:none;overflow:hidden}app-canvas .page-preview-rail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(96,112,140,.16)}app-canvas .page-preview-rail-header h3{margin:0;font-size:16px;color:#243047}app-canvas .page-preview-kicker{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#60708c}app-canvas .page-preview-collapse,app-canvas .page-preview-reveal{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid #d7dbe7;border-radius:999px;background:#fff;color:#243047;font-size:12px;font-weight:700;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}app-canvas .page-preview-collapse:hover,app-canvas .page-preview-reveal:hover{border-color:#243047;box-shadow:0 10px 22px #0f172a1a;transform:translateY(-1px)}app-canvas .page-preview-collapse{width:34px;padding:0}app-canvas .page-preview-reveal{position:sticky;top:18px;align-self:stretch;justify-self:stretch;margin:18px 0 18px 8px;min-width:42px;padding:12px 8px;writing-mode:vertical-rl;text-orientation:mixed}app-canvas .page-preview-list{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto;padding-right:2px}app-canvas .page-preview-card{width:100%;border:1px solid #d7dbe7;border-radius:12px;background:#fff;padding:8px;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}app-canvas .page-preview-card:hover{border-color:#243047;transform:translateY(-1px)}app-canvas .page-preview-card.active{border-color:#243047;background:#f8fbff}app-canvas .page-preview-card.overflow{border-color:#efb7b4;background:#fff9f8}app-canvas .page-preview-card-topline,app-canvas .page-preview-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}app-canvas .page-preview-card-topline{margin-bottom:8px}app-canvas .page-preview-card-number,app-canvas .page-preview-card-alert{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700}app-canvas .page-preview-card-number{background:#24304714;color:#243047}app-canvas .page-preview-card-alert{background:#fff1f0;color:#c62828}app-canvas .page-preview-shell{padding:6px;border:1px solid #e4e8f1;border-radius:10px;background:#f7f9fc}app-canvas .page-preview-card.active .page-preview-shell{border-color:#bfd0e6;background:#eef4fb}app-canvas .page-preview-viewport{width:100%;min-height:170px;overflow:hidden;border-radius:10px;background:#fff}app-canvas .page-preview-card-footer{margin-top:8px;color:#60708c;font-size:11px;font-weight:600}app-canvas .page-preview-canvas-clone{box-shadow:none!important}app-canvas .page-preview-canvas-clone *{max-width:100%;box-sizing:border-box}app-canvas .canvas-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto;background:#f7f9fc}app-canvas .canvas-stage{display:flex;justify-content:center;width:100%;min-height:100%;padding:20px 24px 28px;transition:transform .2s ease}app-canvas .pages-container{display:flex;flex-direction:column;align-items:center;gap:30px;width:100%}app-canvas .page-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;scroll-margin-top:20px}app-canvas .page-wrapper.active{position:relative}app-canvas .page-header{width:min(100%,1200px);display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}app-canvas .page-header.active .page-indicator{background:#243047;color:#fff}app-canvas .page-header.active .page-status{border-color:#9fb6d3;background:#edf4fb;color:#243047}app-canvas .page-indicator,app-canvas .page-status,app-canvas .page-action{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600}app-canvas .page-indicator{background:#24304714;color:#243047}app-canvas .page-status{border:1px solid #cfd8dc;color:#546e7a}app-canvas .page-status.overflow{border-color:#ef9a9a;background:#fff1f0;color:#c62828}app-canvas .page-status.ok{border-color:#a5d6a7;background:#edf7ed;color:#2e7d32}app-canvas .page-action{border:1px solid #d7dbe7;background:#fff;color:#243047;cursor:pointer}app-canvas .page-action:disabled{opacity:.45;cursor:not-allowed}app-canvas .leaflet-canvas.active{box-shadow:0 0 0 4px #2430471f,0 20px 44px #0f172a24}app-canvas .empty-column{border:2px dashed #ddd;border-radius:10px;padding:28px 16px;text-align:center;color:#999;background:#fafafa}app-canvas .empty-column p{font-style:italic;margin:0}app-canvas .page-overflow-indicator{position:absolute;border-top:2px dashed #d32f2f;pointer-events:none;z-index:5}app-canvas .page-overflow-indicator span{position:absolute;top:-12px;left:50%;transform:translate(-50%);padding:2px 8px;border-radius:999px;background:#fff1f0;color:#c62828;font-size:12px;font-weight:700;letter-spacing:.02em}@media(max-width:1180px){app-canvas .canvas-workspace{grid-template-columns:1fr;min-height:auto}app-canvas .canvas-workspace.previews-hidden{grid-template-columns:1fr}app-canvas .canvas-workspace.previews-hidden .canvas-main{grid-column:auto}app-canvas .page-preview-rail{max-height:none;min-height:0;height:auto;border-right:0;border-bottom:1px solid #e3e8f0}app-canvas .page-preview-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}app-canvas .page-preview-card{min-width:168px;max-width:168px}app-canvas .page-preview-reveal{position:static;writing-mode:initial;text-orientation:initial;min-width:0;margin:14px 14px 0;justify-self:start;align-self:start}}@media(max-width:900px){app-canvas .canvas-topbar,app-canvas .canvas-primary-actions{justify-content:center}app-canvas .page-header{width:100%}}