:root{color-scheme:dark;--bg: #111111;--fg: #f5f5f5;--accent: #ff5a3c;--muted: #8a8a8a;--panel: #1c1c1c;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overscroll-behavior:none}#app{height:100dvh;width:100vw;display:flex;flex-direction:column}.screen{flex:1;min-height:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.layout-select-grid,.capture-stage,.layout-preview,.print-stage,.gallery-grid,.settings-form{min-height:0}.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.topbar button{background:none;border:none;color:var(--muted);font-size:16px;padding:10px 14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.screen-flash{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;opacity:1;transition:opacity .25s ease-out;z-index:9999;pointer-events:none}.countdown{font-size:clamp(48px,22vh,120px);font-weight:700;color:var(--fg)}.bootstrap-error{align-items:center;justify-content:center;padding:24px}.bootstrap-error .state-error{max-width:480px;text-align:center}.state-error{background:#f871711f;border:1px solid #f87171;color:#f87171;padding:16px 24px;border-radius:10px;text-align:center;font-size:16px;max-width:90%;margin:0 auto}.save-error{padding:0 20px 12px;display:flex;flex-direction:column;align-items:center;gap:12px}.save-error button{padding:10px 20px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:15px}.layout-review-headline{text-align:center;font-size:20px;font-weight:600;margin:8px 20px 4px}.capture-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.capture-stage img,.capture-stage video{max-width:100%;max-height:100%;border-radius:12px}.placeholder{color:var(--muted);font-size:22px;text-align:center;padding:32px}.shutter-row{display:flex;justify-content:center;align-items:center;padding:40px;gap:32px}.shutter-button{width:110px;height:110px;border-radius:50%;border:6px solid var(--fg);background:var(--accent);display:flex;align-items:center;justify-content:center}.shutter-button:active{transform:scale(.94)}.shutter-button:disabled{opacity:.4}.status-pill{font-size:14px;padding:6px 14px;border-radius:999px;background:var(--panel);color:var(--muted)}.status-pill.ok{color:#4ade80}.status-pill.err{color:#f87171}.gallery-filters{display:flex;gap:8px;padding:0 16px 12px}.gallery-filter{padding:8px 14px;border-radius:999px;border:1px solid #333;background:var(--panel);color:var(--muted);font-size:14px}.gallery-filter--active{color:var(--fg);border-color:var(--accent);background:#ff5a3c1f}.gallery-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:16px;overflow-y:auto}.gallery-tile{position:relative}.gallery-grid img,.gallery-grid video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.badge{position:absolute;bottom:4px;right:4px;font-size:11px;padding:2px 6px;border-radius:6px;background:#0009}.badge--kind{bottom:auto;right:auto;top:4px;left:4px;background:#ff5a3cd9;color:#fff}.settings-form{padding:20px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;flex:1}.settings-section{display:flex;flex-direction:column;gap:14px;padding-bottom:16px;border-bottom:1px solid #262626}.settings-section h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.settings-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}.settings-form input,.settings-form select{padding:12px;border-radius:8px;border:1px solid #333;background:var(--panel);color:var(--fg);font-size:16px}.settings-form>button{padding:14px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:16px}.settings-color-row{display:flex;gap:8px}.settings-color-row input[type=color]{flex:0 0 48px;padding:4px}.settings-color-row input[type=text]{flex:1}.settings-overlay-preview-row{display:flex;align-items:center;gap:12px}.settings-overlay-preview-row img{max-width:100px;max-height:70px;border-radius:4px;background:repeating-conic-gradient(#444,#444 25%,#333 0%,#333 50%) 50% / 16px 16px}.settings-overlay-preview-row button{padding:8px 12px;border-radius:6px;border:1px solid #333;background:var(--panel);color:var(--fg)}.settings-overlay-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}.settings-overlay-root--open{pointer-events:auto}.settings-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;opacity:0;transition:opacity .2s ease}.settings-overlay-root--open .settings-backdrop{opacity:1}.settings-drawer{position:absolute;top:0;right:0;bottom:0;width:min(90vw,420px);background:var(--bg);border-left:1px solid #262626;display:flex;flex-direction:column;transform:translate(100%);transition:transform .22s ease;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.settings-overlay-root--open .settings-drawer{transform:translate(0)}.settings-drawer-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #262626;font-size:16px;font-weight:600}.settings-drawer-header button{background:none;border:none;color:var(--muted);font-size:20px;padding:4px 8px}.settings-lock{padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;color:var(--muted)}.settings-lock form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:220px}.settings-lock input{padding:14px;border-radius:8px;border:1px solid #333;background:var(--panel);color:var(--fg);font-size:24px;letter-spacing:.3em;text-align:center}.settings-lock button{padding:12px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:16px}.result-actions{display:flex;justify-content:center;gap:16px;padding:0 20px}.result-actions[hidden]{display:none}.result-actions button{padding:10px 18px;border-radius:999px;border:1px solid #333;background:var(--panel);color:var(--fg);font-size:15px}.welcome-intro{text-align:center;color:var(--muted);font-size:15px;padding:4px 20px 0}.layout-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px;overflow-y:auto}.layout-select-card{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px;border-radius:12px;border:1px solid #333;background:var(--panel);color:var(--fg);text-align:left}.layout-select-card .print-shape{width:100%}.layout-select-card .layout-frame{gap:3px}.layout-select-icon span{display:block;width:100%;height:100%;background:#3a3a3a;border-radius:4px}.layout-select-label{font-size:15px;font-weight:600}.layout-select-desc{font-size:12px;color:var(--muted)}.layout-capture-thumbs{display:flex;gap:8px;justify-content:center;padding:8px 16px;min-height:56px}.layout-capture-thumbs img{width:48px;height:48px;object-fit:cover;object-position:center;border-radius:6px;opacity:.75}.idle-hint{text-align:center;font-size:12px;color:var(--muted);padding:0 20px}.layout-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;container-type:size}.print-shape{position:relative;aspect-ratio:148 / 100}.print-shape>.layout-frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.layout-preview .print-shape{width:min(100cqw,148cqh);max-width:min(80vw,620px)}.layout-overlay-preview{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.layout-frame{display:grid;gap:6px;max-width:100%;max-height:100%}.layout-frame img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:6px}.layout-frame--single{grid-template-columns:1fr}.layout-frame--grid4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.layout-frame--bigThree{display:flex;flex-direction:column}.layout-frame--bigThree .layout-frame__item--large{flex:2 1 0%;min-height:0}.layout-frame--bigThree .layout-frame__row-small{flex:1 1 0%;min-height:0;display:flex;gap:6px}.layout-frame--bigThree .layout-frame__row-small>*{flex:1 1 0%;min-width:0}.layout-frame--sideBySide{grid-template-columns:1fr 1fr}.layout-picker{display:flex;gap:10px;justify-content:center;padding:0 16px 12px}.layout-picker-thumb{width:64px;height:64px;padding:0;border-radius:8px;border:2px solid transparent;overflow:hidden;opacity:.6}.layout-picker-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.layout-picker-thumb--active{border-color:var(--accent);opacity:1}.layout-save-row{display:flex;justify-content:center;padding:20px}.layout-save-row button{padding:14px 24px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:16px}.layout-save-row button:disabled{opacity:.4}.print-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}.print-frame{aspect-ratio:148 / 100;width:min(90vw,620px);overflow:hidden;border-radius:12px}.print-frame img{width:100%;height:100%;object-fit:cover;display:block}.print-format-note{text-align:center;color:var(--muted);font-size:13px;padding:0 20px}#btn-print{padding:14px 24px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:16px}#btn-print:disabled{opacity:.4}@media (orientation: landscape){.screen--capture,.screen--pick,.screen--review{position:relative}.screen--capture .capture-stage,.screen--pick .layout-preview,.screen--review .layout-preview{position:absolute;top:0;right:0;bottom:0;left:0}.screen-overlay-top{position:absolute;top:0;left:0;right:0;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);padding-bottom:12px}.screen-overlay-bottom{position:absolute;bottom:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;gap:4px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);padding-top:12px}.shutter-row{padding:10px 32px}.shutter-button{width:72px;height:72px;border-width:4px}.layout-capture-thumbs{padding:4px 16px;min-height:40px}.layout-capture-thumbs img{width:36px;height:36px}.idle-hint{font-size:11px;padding:0 16px}.layout-review-headline{font-size:16px;margin:2px 20px}.layout-save-row{padding:8px 20px}.result-actions{padding:4px 20px 12px}.screen--select .layout-select-grid{grid-template-columns:repeat(4,1fr)}}@media print{@page{size:148mm 100mm;margin:0}.no-print{display:none!important}.print-stage{height:auto;padding:0}.print-frame{width:148mm;height:100mm;aspect-ratio:auto;border-radius:0}}