.pwa-banner { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:12px 14px; border:1px solid #22d5fa55; border-radius:16px; background:linear-gradient(135deg,#12395ee8,#081a2ee8); box-shadow:0 12px 35px #0004; }
.pwa-banner[hidden] { display:none; }
.pwa-banner img { width:42px; height:42px; border-radius:10px; }
.pwa-banner div { flex:1; min-width:0; }
.pwa-banner b, .pwa-banner span { display:block; }
.pwa-banner b { font-size:13px; }
.pwa-banner span { margin-top:3px; color:#9db0c5; font-size:10px; }
.pwa-banner button { border:0; border-radius:10px; padding:9px 12px; background:var(--cyan); color:#001628; font-weight:900; white-space:nowrap; }
.pwa-banner .pwa-close { width:28px; padding:7px 0; color:#9db0c5; background:transparent; }
.offline-indicator { color:#ffc83d !important; }
.place { font-size:clamp(48px,13.5vw,96px); line-height:.92; letter-spacing:-.075em; white-space:nowrap; }
.quick-camera-button { width:min(100%,320px); border:0; border-radius:14px; padding:15px 18px; background:linear-gradient(135deg,#2ce1ff,#1381eb); color:#001628; font-size:15px; font-weight:1000; box-shadow:0 8px 24px #13cff348; }
.camera-start-overlay { position:absolute; z-index:9; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:72px 24px 24px; background:radial-gradient(circle at 50% 28%,#174d82f2,#06172af7 62%,#020a13fa); text-align:center; }
.camera-start-overlay[hidden] { display:none; }
.camera-start-overlay img { width:112px; max-height:27%; object-fit:contain; filter:drop-shadow(0 4px 14px #0009); }
.camera-start-overlay h2 { margin:2px 0; font-size:23px; }
.camera-start-overlay>p:not(.eyebrow) { margin:0 0 12px; color:#a9bfd3; font-size:11px; }
.camera-osd { display:grid; grid-template-columns:minmax(130px,1fr) auto auto auto; align-items:end; gap:7px; padding:10px 12px 12px; border-top:1px solid #ffffff12; background:#051321; pointer-events:auto; }
.camera-osd label { display:grid; grid-template-columns:auto minmax(80px,1fr); align-items:center; gap:7px; color:#dff8ff; font-size:10px; font-weight:900; }
.camera-osd label>span { white-space:nowrap; }
.camera-osd select { display:block; width:100%; margin:0; border:1px solid #ffffff38; border-radius:10px; background:#00101fd9; color:#fff; padding:8px; font:inherit; }
.camera-osd>span { align-self:end; padding:10px 8px; border-radius:9px; background:#00101fd9; color:#bfefff; font-size:9px; font-weight:900; white-space:nowrap; }
.camera-location-button,.camera-exit-button { align-self:end; border:1px solid #ffffff38; border-radius:10px; background:#00101fd9; color:#fff; height:40px; padding:0 11px; font-size:10px; font-weight:900; white-space:nowrap; }
.camera-exit-button { color:#ffb9b9; }
.camera-exit-button[hidden] { display:none; }
.stage[data-output-size="portrait"] { aspect-ratio:3/4 !important; }
.stage[data-output-size="square"] { aspect-ratio:1/1 !important; }
.stage[data-output-size="story"] { aspect-ratio:9/16 !important; }
.stage[data-output-size="landscape"] { aspect-ratio:4/3 !important; }

/* iPhone PWA: keep the header below the status bar / Dynamic Island. */
.app-shell { padding-top:calc(16px + env(safe-area-inset-top)); }

@media(max-width:480px) {
  .app-shell { padding-top:calc(10px + env(safe-area-inset-top)); padding-right:calc(10px + env(safe-area-inset-right)); padding-bottom:calc(24px + env(safe-area-inset-bottom)); padding-left:calc(10px + env(safe-area-inset-left)); }
}

/* v0.7 camera assistance */
.composition-guide,.level-indicator,.focus-ring,.exposure-warning{position:absolute;z-index:12;pointer-events:none}
.composition-guide{inset:0;display:none}.stage.has-video .composition-guide,.stage.has-photo:not(.has-result) .composition-guide{display:block}.stage.has-result .composition-guide,.camera-start-overlay:not([hidden])~.composition-guide{display:none!important}.composition-guide i{position:absolute;background:rgba(255,255,255,.38);box-shadow:0 0 2px #000}
.composition-guide.guide-thirds i:nth-child(1),.composition-guide.guide-thirds i:nth-child(2){top:0;bottom:0;width:1px;left:33.333%}.composition-guide.guide-thirds i:nth-child(2){left:66.666%}
.composition-guide.guide-thirds i:nth-child(3),.composition-guide.guide-thirds i:nth-child(4){left:0;right:0;height:1px;top:33.333%}.composition-guide.guide-thirds i:nth-child(4){top:66.666%}
.composition-guide.guide-center i:nth-child(1){top:0;bottom:0;width:1px;left:50%}.composition-guide.guide-center i:nth-child(2){left:0;right:0;height:1px;top:50%}.composition-guide.guide-none{display:none}
.stage .composition-guide.guide-none{display:none!important}
.level-indicator{left:20%;right:20%;top:50%;height:42px;text-align:center;color:#fff;font-weight:900}.level-indicator span{display:block;height:3px;background:#ffd454;box-shadow:0 1px 5px #000;transform-origin:center}.level-indicator output{display:inline-block;margin-top:7px;padding:3px 9px;border-radius:12px;background:#000a}.level-indicator.level-ok span{background:#3dffbf}
.focus-ring{width:62px;height:62px;margin:-31px 0 0 -31px;border:2px solid #ffe25c;border-radius:8px;box-shadow:0 0 0 1px #0009}
.exposure-warning{inset:0;opacity:0}.exposure-warning.has-highlights{opacity:1;border:5px dashed #ff2d2dc7}.exposure-warning.has-shadows{opacity:1;box-shadow:inset 0 0 0 8px #2878ff80}
.capture-options,.output-quality-panel,.image-adjust-panel{display:grid;gap:12px;margin-top:14px;padding:14px;border-radius:18px;background:#0310208a}.capture-options{grid-template-columns:1fr 1fr}
.capture-options label,.output-quality-panel label,.image-adjust-panel label{display:grid;gap:7px;font-weight:800;color:#dceafa}.image-adjust-panel h3{margin:0;color:#fff;font-size:1rem}.image-adjust-panel label:not(.check-field){grid-template-columns:7em 1fr 3em;align-items:center}.camera-controls label{display:grid;gap:7px}
.shutter{position:relative}.shutter[data-countdown]::after{content:attr(data-countdown);position:absolute;inset:0;display:grid;place-items:center;color:#07192f;font-size:2.2rem;font-weight:950}
@media(max-width:560px){.capture-options{grid-template-columns:1fr}.image-adjust-panel label:not(.check-field){grid-template-columns:6em 1fr 2em}}

/* The completed image replaces the live preview in the same frame. */
.stage #resultImage { position:absolute; inset:0; z-index:4; width:100%; height:100%; object-fit:cover; display:none; background:#02070d; }
.stage.has-result #resultImage { display:block; }
.stage.has-result video,
.stage.has-result #photoSource,
.stage.has-result .preview-overlay,
.stage.has-result .guide-lines,
.stage.has-result .empty-state,
.stage.has-result .large-pick-button,
.stage.has-result .camera-start-overlay { display:none; }
.live-overlay-canvas { position:absolute; z-index:8; inset:0; display:none; width:100%; height:100%; pointer-events:none; }
.stage.has-video .live-overlay-canvas,.stage.has-photo .live-overlay-canvas { display:block; }
.stage.has-result .live-overlay-canvas { display:none; }
.legacy-preview-overlay { display:none !important; }
.stage.has-result ~ .camera-osd { display:none; }
.result-action-bar { padding:14px 16px 16px; border-top:1px solid #ffffff17; background:linear-gradient(180deg,#0a2038,#07172a); }
.result-action-bar[hidden] { display:none; }
.result-action-bar>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.result-action-bar b { font-size:14px; }
.result-action-bar span { color:#8fa5ba; font-size:10px; text-align:right; }
.result-action-bar .action-row { margin-top:10px; }
.app-version { margin:18px 0 0; color:#6f869e; font-size:10px; font-weight:800; letter-spacing:.08em; text-align:center; }
.scroll-top-button { position:fixed; z-index:80; right:calc(14px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); min-width:76px; min-height:48px; border:1px solid #65e8ff80; border-radius:999px; padding:0 16px; background:#071726e8; color:#fff; font-size:13px; font-weight:900; box-shadow:0 10px 32px #0009; backdrop-filter:blur(12px); }
.scroll-top-button span { margin-right:5px; color:var(--cyan); font-size:18px; }
.scroll-top-button[hidden],.camera-active .scroll-top-button { display:none !important; }
.camera-controls { display:flex; align-items:center; gap:10px; padding:0 16px 14px; }
.camera-controls[hidden],.camera-controls label[hidden],.camera-controls button[hidden] { display:none; }
.camera-controls label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; flex:1; color:#b5c7d8; font-size:11px; font-weight:800; }
.camera-controls input { min-width:0; accent-color:var(--cyan); }
.camera-controls select { display:block; width:100%; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.camera-controls output { width:3.2em; color:#dff8ff; text-align:right; }
.camera-controls button { padding:9px 12px; white-space:nowrap; }
.live-zoom-control { display:none; }
.camera-active .live-zoom-control:not([hidden]) { position:absolute; z-index:27; left:50%; bottom:calc(166px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:auto minmax(110px,1fr) auto; align-items:center; gap:10px; width:min(390px,calc(100% - 32px)); min-height:48px; padding:9px 14px; transform:translateX(-50%); border:1px solid #ffffff26; border-radius:16px; background:#071726dc; color:#fff; font-size:12px; font-weight:900; box-shadow:0 10px 28px #0008; backdrop-filter:blur(12px); }
.live-zoom-control input { width:100%; min-width:0; accent-color:var(--cyan); }
.live-zoom-control output { width:3.4em; color:#dff8ff; text-align:right; }
.capture-bar[hidden] { display:none; }
.camera-menu-button,.camera-menu-head,.camera-menu-backdrop { display:none; }
.camera-menu-button { align-items:center; justify-content:center; gap:7px; border:1px solid #ffffff2c; border-radius:13px; background:#071726; color:#fff; font-size:14px; font-weight:900; }
.camera-menu-button span { color:var(--cyan); }
.camera-menu-head { align-items:center; justify-content:space-between; gap:14px; }
.camera-menu-head h2 { margin:2px 0 0; font-size:20px; }
.camera-menu-close { min-height:44px; border:1px solid #ffffff2c; border-radius:12px; padding:0 14px; background:#ffffff0c; color:#fff; font-weight:900; }
.camera-menu-close span { color:var(--cyan); }
.camera-active { overflow:hidden; background:#000; }
.camera-active-root { overflow:hidden; overscroll-behavior:none; }
.camera-active .topbar,.camera-active .status-strip,.camera-active .pwa-banner,.camera-active .mode-switch,.camera-active .result-panel,.camera-active .about-aozora,.camera-active .site-footer,.camera-active .app-version { display:none !important; }
.camera-active .control-panel { display:none !important; }
.camera-active .camera-card { position:fixed; z-index:100; inset:0 auto auto 0; max-width:none; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:calc(8px + env(safe-area-inset-top)) 0 calc(226px + env(safe-area-inset-bottom)); border:0; border-radius:0; background:#000; box-shadow:none; }
.camera-active .stage { flex:none; max-width:100%; border-radius:18px; box-shadow:0 0 0 1px #22d5fa55; }
.camera-active .capture-bar { position:absolute; z-index:25; left:0; right:0; bottom:calc(60px + env(safe-area-inset-bottom)); height:100px; padding:10px 16px; background:#000; }
.camera-active .camera-menu-button { position:absolute; z-index:26; left:16px; right:16px; bottom:calc(8px + env(safe-area-inset-bottom)); display:flex; width:min(220px,calc(100% - 32px)); min-height:46px; margin:auto; }
.camera-active .selected-file-bar,.camera-active .result-action-bar { display:none !important; }
.camera-active.camera-menu-open .camera-menu-backdrop { position:fixed; z-index:190; inset:0; display:block; width:100%; height:100%; border:0; background:#0008; }
.camera-active.camera-menu-open .control-panel { position:fixed; z-index:200; left:50%; right:auto; bottom:0; display:block !important; width:min(100%,720px); max-height:min(72dvh,680px); margin:0; padding:0 16px calc(18px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; transform:translateX(-50%); border:1px solid #ffffff26; border-bottom:0; border-radius:24px 24px 0 0; background:#071726f7; box-shadow:0 -24px 70px #000b; -webkit-overflow-scrolling:touch; }
.camera-active.camera-menu-open .camera-menu-head { position:sticky; z-index:2; top:0; display:flex; margin:0 -16px 12px; padding:14px 16px 12px; border-bottom:1px solid #ffffff18; background:#071726fa; }
.camera-active.camera-menu-open .camera-osd { grid-template-columns:1fr 1fr; margin:0 0 12px; padding:12px; border:1px solid #ffffff18; border-radius:14px; background:#03101f; }
.camera-active.camera-menu-open .camera-osd label { grid-column:1/-1; }
.camera-active.camera-menu-open .camera-controls { position:static; min-height:54px; margin-bottom:12px; padding:10px 12px; border:1px solid #ffffff18; border-radius:14px; background:#03101f; }
.camera-active.camera-menu-open .photo-filter-panel { margin-top:0; }
.selected-file-bar[hidden] { display:none !important; }
.mode-edit .camera-start-overlay { display:none; }
.mode-edit .camera-exit-button { display:none; }
.mode-edit:not(.camera-active) .camera-menu-button { display:flex; width:calc(100% - 32px); min-height:52px; margin:0 16px 14px; background:linear-gradient(135deg,#0d345b,#071a30); box-shadow:0 10px 28px #0006; }
.mode-edit .about-aozora,.mode-edit .site-footer { display:none !important; }
.template-manager { margin-top:13px; border:1px solid #ffffff17; border-radius:13px; background:#03101f99; overflow:hidden; }
.template-manager>summary { padding:12px; color:#b5c7d8; font-size:11px; font-weight:900; cursor:pointer; list-style-position:inside; }
.template-manager[open]>summary { border-bottom:1px solid #ffffff12; }
.template-manager-body { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; }
.template-manager label { margin:0; }
.template-manager select,.template-manager input { width:100%; border:1px solid #ffffff20; border-radius:10px; background:#03101f; color:#fff; padding:10px; font:inherit; }
.template-manager label select { display:block; margin-top:5px; }
.template-manager .text-button { justify-self:end; }
.template-manager .form-status { grid-column:1/-1; margin:0; }
.post-link-assistant { margin-top:8px; padding:10px 11px; border:1px solid #21cfee38; border-radius:11px; background:#051829; }
.post-link-assistant>p:first-child { margin:0; color:#a9bfd2; font-size:10px; line-height:1.6; }
.post-link-assistant ul { display:grid; gap:7px; margin:9px 0 0; padding:0; list-style:none; }
.post-link-assistant li { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:8px 9px; border-radius:9px; background:#0b2d55; }
.post-link-assistant li span { min-width:0; }
.post-link-assistant li b,.post-link-assistant li small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-link-assistant li b { color:#fff; font-size:12px; }
.post-link-assistant li small { margin-top:2px; color:#64dff7; font-size:9px; }
.post-link-assistant li button { flex:0 0 auto; border:1px solid #ffffff22; border-radius:8px; background:#ffffff0c; color:#d8e7f4; padding:6px 8px; font:inherit; font-size:10px; }
.post-link-assistant>.text-button { margin-top:8px; }
.post-link-assistant .form-status { margin:6px 0 0; }
@media(max-width:480px) { .template-manager-body { grid-template-columns:1fr; } .template-manager .text-button { justify-self:start; } }
@media(max-width:480px) { .camera-osd { grid-template-columns:minmax(120px,1fr) auto auto auto; } .camera-osd label { grid-template-columns:auto minmax(72px,1fr); } .camera-osd>span { display:none; } .camera-active.camera-menu-open .camera-osd { grid-template-columns:1fr 1fr; } }

/* Prevent iPhone Safari/PWA from zooming and shifting the UI on form focus. */
@media(max-width:600px) {
  input, select, textarea { font-size:16px !important; }
  .camera-osd select { font-size:16px !important; }
  .camera-controls { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:12px; }
  .camera-controls label { grid-template-columns:4.8em minmax(0,1fr) auto; width:100%; min-width:0; line-height:1.3; }
  .camera-controls label:not([hidden]) { display:grid; }
  .camera-controls button:not([hidden]) { width:100%; }
  .camera-controls output { width:3.6em; }
}

/* v0.6: fixed single-screen flow with settings and posting bottom sheets. */
.status-copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.status-copy .status-text,.status-version { display:block; }
.status-version { color:#6f869e; font-size:9px; font-weight:900; letter-spacing:.08em; }
.weather-stale { color:#ffd36a !important; font-weight:800; }
.weather-loaded { color:#37dca1 !important; }
.settings-group { margin:10px 0; border:1px solid #ffffff1c; border-radius:14px; background:#03101f99; overflow:hidden; }
.settings-group>summary { position:relative; padding:14px 42px 14px 14px; color:#fff; font-size:14px; font-weight:900; cursor:pointer; list-style:none; }
.settings-group>summary::-webkit-details-marker { display:none; }
.settings-group>summary:after { content:'＋'; position:absolute; right:15px; color:var(--cyan); font-size:18px; }
.settings-group[open]>summary { border-bottom:1px solid #ffffff17; }
.settings-group[open]>summary:after { content:'−'; }
.settings-group-body { padding:12px; }
.settings-group-body .camera-osd { margin:0 0 10px; border:1px solid #ffffff17; border-radius:12px; }
.settings-group-body .photo-filter-panel,.settings-group-body .bluesky-connect { margin-top:10px; }
.camera-menu-open .camera-menu-backdrop,.post-menu-open .post-menu-backdrop { position:fixed; z-index:190; inset:0; display:block; width:100%; height:100%; border:0; background:#0009; }
.camera-menu-open .control-panel,.post-menu-open .result-panel { position:fixed; z-index:200; left:50%; right:auto; bottom:0; display:block !important; width:min(100%,720px); max-height:min(78dvh,760px); margin:0; padding:0 16px calc(18px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; transform:translateX(-50%); border:1px solid #ffffff26; border-bottom:0; border-radius:24px 24px 0 0; background:#071726f8; box-shadow:0 -24px 70px #000c; -webkit-overflow-scrolling:touch; }
.camera-menu-open .camera-menu-head,.post-menu-open .post-menu-head { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; margin:0 -16px 12px; padding:14px 16px 12px; border-bottom:1px solid #ffffff18; background:#071726fc; }
.post-menu-backdrop { display:none; }
body:not(.camera-menu-open) .control-panel { display:none; }
body:not(.post-menu-open) .result-panel { display:none !important; }
.post-menu-open .post-composer { margin-top:0; }
.post-menu-open .post-composer-head { margin-bottom:4px; }
.post-menu-open .result-head h2 { margin:2px 0 0; }
.camera-active.capture-result-active .capture-bar,.camera-active.capture-result-active .camera-menu-button,.camera-active.capture-result-active .live-zoom-control { display:none !important; }
.camera-active.capture-result-active .result-action-bar { position:absolute; z-index:28; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); display:block !important; padding:12px; border:1px solid #ffffff22; border-radius:18px; background:#071726ee; box-shadow:0 14px 42px #000b; backdrop-filter:blur(12px); }
.camera-active.capture-result-active .result-action-bar>div:first-child { display:none; }
.camera-active.capture-result-active .result-action-bar .action-row { margin:0; }
.camera-active.capture-result-active .stage { max-height:calc(100dvh - 116px - env(safe-area-inset-bottom)); }
@media(max-width:480px) {
  .camera-menu-open .control-panel,.post-menu-open .result-panel { max-height:82dvh; }
  .camera-active.capture-result-active .result-action-bar .action-row { grid-template-columns:1fr; }
  .camera-active.capture-result-active .result-action-bar .ghost-button { padding:10px; }
}