:root{--font-main: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Space Grotesk", ui-monospace, monospace;--bg-app: #0f172a;--bg-sidebar: #1e293b;--bg-card: #334155;--border-ui: #334155;--border-light: #475569;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--primary-color: #f97316;--primary-hover: #ea580c;--accent-blue: #38bdf8;--success-color: #22c55e}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-app);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}.app-container{display:flex;height:100vh;width:100vw;overflow:hidden}.controls-panel{width:380px;min-width:340px;max-width:420px;background-color:var(--bg-sidebar);border-right:1px solid var(--border-ui);display:flex;flex-direction:column;overflow-y:auto;padding:24px 20px;gap:20px;box-shadow:4px 0 24px #00000040;z-index:10}.panel-header{border-bottom:1px solid var(--border-ui);padding-bottom:16px}.brand-logo{display:flex;align-items:center;gap:8px}.brand-logo h2{font-size:1.5rem;font-weight:900;letter-spacing:.5px;background:linear-gradient(135deg,#fb923c,#f97316,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-badge{background:#f97316;color:#fff;font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:1px}.subtitle{color:var(--text-secondary);font-size:.85rem;margin-top:4px}.section-block{display:flex;flex-direction:column;gap:10px}.section-label{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary)}.section-label-row{display:flex;justify-content:space-between;align-items:center}.seed-badge{font-size:.65rem;background:#38bdf826;color:var(--accent-blue);padding:2px 8px;border-radius:12px;font-weight:700}.field-hint{font-size:.78rem;color:var(--text-muted);line-height:1.35}.toggle-group{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-app);padding:4px;border-radius:8px;border:1px solid var(--border-ui)}.toggle-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-main);font-size:.82rem;font-weight:600;border-radius:6px;cursor:pointer;transition:all .18s ease}.toggle-btn:hover{color:var(--text-primary)}.toggle-btn.active{background:var(--bg-card);color:#fff;box-shadow:0 2px 8px #0003}.seed-input-row{display:flex;gap:8px}.seed-input{flex:1;background:var(--bg-app);border:1px solid var(--border-light);border-radius:8px;padding:9px 12px;font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:#fbbf24;letter-spacing:1px}.seed-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #f9731633}.icon-action-btn{background:var(--bg-card);border:1px solid var(--border-ui);color:var(--text-secondary);border-radius:8px;width:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s}.icon-action-btn:hover{background:var(--border-light);color:#fff}.text-success{color:var(--success-color)}.primary-action-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-family:var(--font-main);font-size:.9rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px #ea580c59;transition:all .2s}.primary-action-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #ea580c73}.dice-roll-big-btn{width:100%;padding:13px 18px;font-size:1rem;background:linear-gradient(135deg,#f97316,#ea580c,#c2410c);border-radius:10px;box-shadow:0 4px 18px #ea580c66;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:10px}.dice-roll-big-btn:hover .dice-icon-spin{transform:rotate(45deg) scale(1.1);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.dice-icon-spin{transition:transform .2s ease}.rolled-city-card{margin-top:12px;background:#0f172aa6;border:1px solid rgba(255,255,255,.08);border-left:4px solid #f97316;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.rolled-city-top{display:flex;align-items:center;gap:8px}.city-accent-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}.rolled-city-name{font-size:1rem;font-weight:800;color:#f8fafc;letter-spacing:.5px}.rolled-city-country{font-size:.8rem;font-weight:500;color:#94a3b8}.rolled-landmarks-info{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#cbd5e1;background:#ffffff0a;padding:4px 8px;border-radius:6px}.landmark-tag-icon{font-weight:600;color:#f59e0b}.landmark-tag-text{font-weight:700;color:#e2e8f0}.city-pill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.city-pill{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border-ui);border-radius:8px;padding:8px 10px;font-family:var(--font-main);font-size:.8rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all .18s}.city-pill:hover{border-color:var(--border-light);color:#fff}.city-pill.active{background:#ffffff14;border-color:var(--accent, #f97316);color:#fff;box-shadow:0 0 10px #0003}.city-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.custom-pill{grid-column:span 2;justify-content:center}.sheet-options-block{background:#ffffff08;padding:12px;border-radius:8px;border:1px solid var(--border-ui)}.sheet-mode-options{display:flex;flex-direction:column;gap:8px}.radio-label{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-secondary);cursor:pointer}.radio-label input{accent-color:var(--primary-color)}.advanced-toggle-btn{display:flex;align-items:center;gap:8px;background:transparent;border:none;color:var(--text-secondary);font-size:.8rem;font-weight:600;cursor:pointer;padding:4px 0}.advanced-toggle-btn:hover{color:var(--primary-color)}.advanced-fields{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--bg-app);border-radius:8px;border:1px solid var(--border-ui)}.field-group{display:flex;flex-direction:column;gap:4px}.field-group label{font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase}.field-group input,.field-group select{background:var(--bg-sidebar);border:1px solid var(--border-light);border-radius:6px;padding:6px 10px;font-family:var(--font-main);font-size:.82rem;color:var(--text-primary)}.export-section{margin-top:auto;padding-top:18px;border-top:1px solid var(--border-ui);display:flex;flex-direction:column;gap:10px}.primary-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:8px;border:none;font-family:var(--font-main);font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s}.print-btn{background:#2563eb;color:#fff;box-shadow:0 4px 14px #2563eb59}.print-btn:hover{background:#1d4ed8;transform:translateY(-1px)}.secondary-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border-ui);color:var(--text-primary);font-family:var(--font-main);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .18s}.secondary-btn:hover{background:var(--border-light)}.print-hint{font-size:.72rem;color:var(--text-muted);text-align:center;line-height:1.3}.preview-viewport{flex:1;display:flex;flex-direction:column;background:radial-gradient(circle at center,#1e293b,#0f172a);position:relative;overflow:hidden}.viewport-toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#0f172ab3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(51,65,85,.5);z-index:5}.card-meta-pill{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary)}.card-meta-pill strong{color:#fff}.card-meta-pill code{font-family:var(--font-mono);background:#ffffff1a;padding:2px 6px;border-radius:4px;color:#fbbf24}.dot-live{width:8px;height:8px;border-radius:50%;background:var(--success-color);box-shadow:0 0 8px var(--success-color)}.zoom-controls{display:flex;align-items:center;gap:6px;background:var(--bg-sidebar);border:1px solid var(--border-ui);border-radius:8px;padding:3px 6px}.zoom-btn{background:transparent;border:none;color:var(--text-secondary);border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.zoom-btn:hover{color:#fff;background:var(--bg-card)}.zoom-label{font-size:.75rem;font-family:var(--font-mono);color:var(--text-muted);min-width:40px;text-align:center}.preview-stage{flex:1;overflow:auto;display:flex;justify-content:center;align-items:center;padding:12px 16px;box-sizing:border-box;min-height:0}.preview-canvas-wrapper{transition:transform .12s ease-out;display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%}.single-card-frame{width:min(840px,calc(100vw - 420px),calc((100vh - 175px)*2.258));max-width:95vw;background:#fff;border-radius:8px;padding:8px;box-shadow:0 16px 36px -10px #00000073,0 0 0 1px #ffffff14;box-sizing:border-box}.sidebar-collapsed .single-card-frame{width:min(920px,94vw,calc((100vh - 175px)*2.258))}.single-card-frame svg{width:100%;height:auto;display:block}.sheet-frame{width:min(720px,calc(100vw - 420px),calc((100vh - 175px) * (210 / 297)));max-width:92vw;background:#fff;box-shadow:0 25px 50px -12px #0000008c;border-radius:4px}.sidebar-collapsed .sheet-frame{width:min(780px,92vw,calc((100vh - 175px) * (210 / 297)))}.a4-print-sheet{width:100%;aspect-ratio:210 / 297;padding:calc(100% * 12 / 210) calc(100% * 8 / 210);background:#fff;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;color:#212121}.print-sheet-cards-container{display:flex;flex-direction:column;height:100%;justify-content:space-between;gap:4px}.print-card-wrapper{width:100%;display:flex;align-items:center;justify-content:center}.print-card-wrapper svg{width:100%;height:auto;display:block}.print-cut-divider{display:flex;align-items:center;gap:8px;color:#9e9e9e;font-size:.65rem;font-family:system-ui,sans-serif;-webkit-user-select:none;user-select:none}.cut-line{flex:1;border-top:1px dashed #bdbdbd}.cut-icon{display:flex;align-items:center;gap:4px}.viewport-footer{height:38px;background:#0f172ad9;border-top:1px solid var(--border-ui);display:flex;align-items:center;justify-content:space-around;font-size:.75rem;color:var(--text-muted);padding:0 20px}.app-container{display:flex;height:100vh;width:100vw;overflow:hidden;position:relative}.controls-panel{width:380px;min-width:380px;max-width:380px;background-color:var(--bg-sidebar);border-right:1px solid var(--border-ui);display:flex;flex-direction:column;overflow-y:auto;padding:24px 20px;gap:20px;box-shadow:4px 0 24px #00000040;z-index:10;transition:margin-left .25s cubic-bezier(.4,0,.2,1),opacity .2s ease}.sidebar-collapsed .controls-panel{margin-left:-380px;opacity:0;pointer-events:none}.custom-badge{background:#f59e0b33;color:#fbbf24;font-size:.7rem;padding:2px 8px;border-radius:12px;font-weight:700}.editor-ribbon-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 20px;background:#1e293b;border-bottom:1px solid var(--border-ui);min-height:44px;flex-shrink:0;gap:12px;z-index:5}.editor-ribbon-bar.active-ribbon{background:#0f172a;border-bottom:1px solid #0284c7;box-shadow:0 4px 12px #0003}.ribbon-section{display:flex;align-items:center;gap:8px}.ribbon-right{margin-left:auto}.ribbon-label{font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase}.ribbon-live-badge{color:#38bdf8;font-size:.75rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase}.ribbon-btn-group{display:flex;gap:4px}.start-edit-ribbon-btn{background:linear-gradient(135deg,#0284c7,#0369a1);color:#fff;border:1px solid #38bdf8;border-radius:6px;padding:6px 14px;font-family:var(--font-main);font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer;transition:all .18s}.start-edit-ribbon-btn:hover{background:#0284c7}.sidebar-toggle-btn{display:flex;align-items:center;gap:6px;background:var(--bg-card);border:1px solid var(--border-ui);color:var(--text-secondary);border-radius:6px;padding:5px 10px;font-family:var(--font-main);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .18s}.sidebar-toggle-btn:hover{background:var(--border-light);color:#fff}.ribbon-done-btn{background:#16a34a;color:#fff;border:none;border-radius:5px;padding:4px 10px;font-size:.75rem;font-weight:700;display:flex;align-items:center;gap:4px;cursor:pointer}.ribbon-line-btn{display:flex;align-items:center;gap:5px;background:var(--bg-card);border:1px solid var(--border-ui);border-radius:5px;padding:4px 8px;font-family:var(--font-main);font-size:.75rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all .15s}.ribbon-line-btn.active{background:#38bdf833;border-color:#38bdf8;color:#fff}.ribbon-line-dot{width:7px;height:7px;border-radius:50%}.line-pill-wrapper{display:flex;align-items:center;position:relative}.delete-line-icon-btn{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;border:none;border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 4px #0006}.delete-line-icon-btn:hover{background:#dc2626}.ribbon-add-line-btn{display:flex;align-items:center;gap:4px;background:#38bdf826;border:1px dashed #38bdf8;color:#38bdf8;border-radius:5px;padding:4px 8px;font-family:var(--font-main);font-size:.75rem;font-weight:700;cursor:pointer;transition:all .15s}.ribbon-add-line-btn:hover{background:#38bdf847}.color-picker-dropdown-wrapper{position:relative;display:flex;align-items:center}.color-picker-trigger-btn{width:24px;height:24px;border-radius:5px;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px #0000004d}.color-picker-palette{position:absolute;top:30px;left:0;background:#0f172a;border:1px solid var(--border-light);border-radius:8px;padding:6px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;z-index:50;box-shadow:0 8px 24px #00000080}.palette-swatch{width:20px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,.2);cursor:pointer}.palette-swatch:hover{transform:scale(1.15)}.ribbon-loop-toggle-btn{display:flex;align-items:center;gap:4px;background:var(--bg-card);border:1px solid var(--border-ui);border-radius:5px;padding:4px 8px;font-family:var(--font-main);font-size:.72rem;font-weight:700;color:var(--text-muted);cursor:pointer;transition:all .15s}.ribbon-loop-toggle-btn.active{background:#ea580c33;border-color:#f97316;color:#fb923c}.ribbon-tool-btn{display:flex;align-items:center;gap:5px;background:var(--bg-card);border:1px solid var(--border-ui);border-radius:5px;padding:4px 9px;font-family:var(--font-main);font-size:.75rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all .15s}.ribbon-tool-btn:hover{color:#fff}.ribbon-tool-btn.active{background:#0284c7;border-color:#38bdf8;color:#fff}.ribbon-action-btn{display:flex;align-items:center;gap:4px;background:var(--bg-card);border:1px solid var(--border-ui);border-radius:5px;padding:4px 8px;font-size:.72rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all .15s}.ribbon-action-btn:hover{color:#fff;background:var(--border-light)}.ribbon-action-btn.danger-btn{color:#f87171;border-color:#ef44444d}.ribbon-action-btn.relax-btn{background:#10b98126;border-color:#10b981;color:#34d399}.editing-active{cursor:crosshair}.single-card-frame.large-edit-frame{width:980px;max-width:96vw;padding:14px;transition:width .2s ease}.mobile-toolbar-actions,.mobile-close-sidebar-btn{display:none}@media(max-width:860px){.app-container{flex-direction:column;height:100vh;height:100dvh;width:100vw;overflow:hidden}.controls-panel{position:fixed;top:0;left:0;bottom:0;width:min(360px,86vw);min-width:unset;max-width:86vw;height:100%;z-index:50;box-shadow:10px 0 30px #0009;transform:translate(0);transition:transform .28s cubic-bezier(.32,.72,0,1),opacity .2s ease;margin-left:0!important;opacity:1!important;pointer-events:auto!important}.sidebar-collapsed .controls-panel{transform:translate(-105%);pointer-events:none!important}.mobile-sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0f1db3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:45;animation:fadeIn .2s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.panel-header{display:flex;align-items:center;justify-content:space-between}.mobile-close-sidebar-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#33415566;border:1px solid rgba(100,116,139,.3);color:#e2e8f0;cursor:pointer;transition:background .15s}.mobile-close-sidebar-btn:hover,.mobile-close-sidebar-btn:active{background:#ef444433;border-color:#ef4444;color:#fff}.mobile-toolbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.mobile-action-btn{display:flex;align-items:center;gap:5px;border-radius:8px;padding:6px 10px;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .15s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.mobile-menu-btn{background:#1e293b;border:1px solid #334155;color:#f1f5f9}.mobile-menu-btn:active{background:#334155}.mobile-dice-btn{background:linear-gradient(135deg,#f59e0b,#ea580c);border:1px solid #f97316;color:#fff;box-shadow:0 2px 8px #f59e0b4d}.mobile-dice-btn:active{transform:scale(.96)}.viewport-toolbar{height:48px;padding:0 10px;gap:8px;justify-content:space-between}.card-meta-pill{font-size:.72rem;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 220px)}.card-meta-pill code{font-size:.65rem;padding:1px 4px}.zoom-controls{display:none}.preview-stage{padding:6px 0!important;width:100%!important;max-width:100vw!important;overflow-x:hidden}.preview-canvas-wrapper{width:100%!important;max-width:100vw!important;margin:0!important;padding:0!important;display:flex!important;justify-content:center!important;align-items:center!important}.single-card-frame,.single-card-frame.large-edit-frame{width:100vw!important;max-width:100vw!important;padding:0!important;margin:0!important;border:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}.single-card-frame svg,.metro-card-svg{width:100vw!important;max-width:100vw!important;height:auto!important;display:block!important;margin:0 auto!important}.sheet-frame{width:100vw!important;max-width:100vw!important;padding:0!important;margin:0!important;border-radius:0!important}.editor-ribbon-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding:6px 10px;gap:8px;justify-content:flex-start;scrollbar-width:thin}.editor-ribbon-bar::-webkit-scrollbar{height:3px}.editor-ribbon-bar::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}.ribbon-section{flex-shrink:0;gap:5px}.ribbon-btn-group{flex-shrink:0}.sidebar-toggle-btn{display:none}.viewport-footer{height:30px;font-size:.65rem;padding:0 8px;overflow-x:auto;white-space:nowrap;justify-content:flex-start;gap:12px;scrollbar-width:none}.viewport-footer::-webkit-scrollbar{display:none}}@media print{@page{size:A4 portrait;margin:0}html,body{width:210mm;height:297mm;margin:0!important;padding:0!important;background:#fff!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.controls-panel,.viewport-toolbar,.viewport-footer{display:none!important}.app-container{display:block!important;height:auto!important;width:100%!important;overflow:visible!important}.preview-viewport{background:#fff!important;overflow:visible!important;display:block!important;padding:0!important}.preview-stage{padding:0!important;overflow:visible!important;display:block!important}.preview-canvas-wrapper{transform:none!important}.single-card-frame,.sheet-frame{box-shadow:none!important;border-radius:0!important;width:210mm!important;max-width:none!important;margin:0!important;padding:0!important}.a4-print-sheet{width:210mm!important;height:297mm!important;padding:12mm 8mm!important;box-sizing:border-box!important;page-break-after:always}.print-sheet-cards-container{height:100%!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;margin:0!important;gap:0!important}.print-card-wrapper{width:194mm!important;height:85.9mm!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto!important}.print-card-wrapper svg{height:85.9mm!important;width:194mm!important}.print-cut-divider{height:4mm!important;font-size:7pt!important;color:#757575!important;display:flex!important;align-items:center!important;margin:0!important}.cut-line{border-top:.3mm dashed #9e9e9e!important}}