.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;  color:#f8fbff; }
.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; }
.pwa-banner.pwa-banner-action { cursor:pointer; border-color:#27d6f8; touch-action:manipulation; }
.pwa-banner.pwa-banner-action:hover { background:linear-gradient(135deg,#19517cee,#0b2947ee); }
.pwa-banner.pwa-banner-action:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.pwa-banner.pwa-banner-action:active { transform:scale(.99); }
.pwa-banner button[hidden] { display:none; }
.workflow-steps[hidden] { display:none; }
.workflow-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:0 0 9px; padding:5px; border:1px solid #45cbe65c; border-radius:14px; background:#071b30e8; }
.workflow-steps button { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:36px; padding:5px 2px; border:0; border-radius:10px; background:transparent; color:#a7bed1; font:inherit; font-size:11px; font-weight:800; white-space:nowrap; }
.workflow-steps button span { display:grid; place-items:center; width:18px; height:18px; flex:none; border-radius:50%; border:1px solid currentColor; font-size:10px; }
.workflow-steps button[aria-current="step"] { background:#12486c; color:#fff; box-shadow:inset 0 0 0 1px #2dd9f3; }
.workflow-steps button:disabled { opacity:.45; }
.workflow-steps button:not(:disabled):focus-visible { outline:2px solid #fff; outline-offset:2px; }
.camera-active .workflow-steps { position:fixed; z-index:110; top:calc(12px + env(safe-area-inset-top)); left:calc(66px + env(safe-area-inset-left)); right:calc(12px + env(safe-area-inset-right)); width:auto; height:44px; margin:0; transform:none; backdrop-filter:blur(12px); }
.camera-active .workflow-steps button { min-height:32px; font-size:clamp(9px,2.8vw,11px); }
.camera-active .workflow-steps button span { width:16px; height:16px; font-size:9px; }
.location-osd-open .workflow-steps { position:fixed; z-index:710; top:calc(12px + env(safe-area-inset-top)); left:50%; width:min(315px,calc(100% - 24px)); transform:translateX(-50%); }
.location-osd-open .manual-location-osd { padding-top:calc(70px + env(safe-area-inset-top)); }
.pwa-update-osd:not([hidden]) { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:20px; background:#000a; }
.pwa-update-osd[hidden] { display:none; }
.pwa-update-card { display:grid; justify-items:center; gap:10px; width:min(340px,100%); padding:30px 24px; border:1px solid #42cde799; border-radius:22px; background:#071d32; color:#fff; text-align:center; box-shadow:0 20px 60px #000a; }
.pwa-update-card strong { font-size:18px; }
.pwa-update-card span:last-child { color:#b7ccda; font-size:13px; }
.pwa-update-spinner { width:32px; height:32px; border:3px solid #ffffff55; border-top-color:#21d2f4; border-radius:50%; animation:pwa-update-spin .8s linear infinite; }
@keyframes pwa-update-spin { to { transform:rotate(360deg); } }
.post-success-osd { position:fixed; z-index:950; top:calc(14px + env(safe-area-inset-top)); left:50%; display:grid; grid-template-columns:46px minmax(0,1fr) auto 34px; align-items:center; gap:11px; width:min(680px,calc(100% - 24px)); padding:12px 13px; transform:translateX(-50%); border:1px solid #2bd9fa80; border-radius:18px; background:#071d32f2; box-shadow:0 16px 46px #000b; backdrop-filter:blur(16px); }
.post-success-osd[hidden] { display:none; }
.post-success-osd img { width:46px; height:46px; border-radius:11px; }
.post-success-copy { min-width:0; }
.post-success-copy strong,.post-success-copy span { display:block; }
.post-success-copy strong { color:#fff; font-size:14px; }
.post-success-copy span { margin-top:3px; color:#a9bfd3; font-size:10px; }
.post-success-osd a { border-radius:11px; padding:10px 13px; background:linear-gradient(135deg,#2ce1ff,#1381eb); color:#001628; font-size:12px; font-weight:950; text-decoration:none; white-space:nowrap; }
.post-success-osd button { width:34px; height:34px; border:0; border-radius:50%; padding:0; background:#ffffff0d; color:#b9ccdd; font-size:20px; font-weight:900; }
.help-dialog-open { overflow:hidden !important; overscroll-behavior:none; }
.public-help-dialog { width:min(680px,calc(100% - 24px)); max-width:680px; height:min(820px,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px)); max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px); margin:calc(env(safe-area-inset-top) + 10px) auto calc(env(safe-area-inset-bottom) + 10px); padding:0; overflow:hidden; overscroll-behavior:contain; border:1px solid #25d5f05c; border-radius:24px; background:#07182bf7; box-shadow:0 30px 100px #000;  color:#f8fbff; }
.public-help-dialog::backdrop { background:#000c; backdrop-filter:blur(8px); }
.help-dialog-header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:82px; padding:18px 20px 15px; border-bottom:1px solid #ffffff17; background:#0a2037fa;  color:#f8fbff; }
.help-dialog-header h2 { margin:3px 0 0; font-size:21px; }
.help-close-button { flex:0 0 auto; min-width:78px; min-height:44px; border:1px solid #55ddf466; border-radius:12px; padding:0 15px; background:#0d304e; color:#fff; font-size:14px; font-weight:900; }
.help-dialog-scroll { height:calc(100% - 82px); padding:20px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-gutter:stable; }
.help-data-shortcut { display:block; width:100%; min-height:46px; margin:0 0 20px; border:1px solid #35dafa85; border-radius:12px; background:#103852; color:#e5faff; font-size:13px; font-weight:800; text-align:center; }
.help-data { margin-top:30px; padding-top:24px; border-top:1px solid #2bd9fa42; }
.help-data h3 { scroll-margin-top:12px; }
.help-section h3 { display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:20px; }
.help-section h3 span { display:grid; place-items:center; width:36px; height:28px; border-radius:8px; background:#16cfee; color:#002039; font-size:11px; font-weight:1000; }
.help-steps { display:grid; gap:11px; margin:0; padding:0; counter-reset:help-step; list-style:none; }
.help-steps li { position:relative; display:grid; gap:3px; min-height:68px; padding:12px 13px 12px 52px; border:1px solid #ffffff14; border-radius:14px; background:#061322; }
.help-steps li::before { position:absolute; top:13px; left:13px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#123b62; color:#6deaff; font-size:12px; font-weight:950; counter-increment:help-step; content:counter(help-step); }
.help-steps b { color:#fff; font-size:14px; }
.help-steps span { color:#b9c9d7; font-size:12px; line-height:1.65; }
.help-important { margin-top:30px; padding-top:24px; border-top:1px solid #2bd9fa42; }
.help-variables { margin-top:30px; padding-top:24px; border-top:1px solid #2bd9fa42; }
.help-variables>p { margin:0 0 14px; color:#afc1d1; font-size:12px; line-height:1.75; }
.help-variable-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0; }
.help-variable-list div { display:grid; grid-template-columns:5.7em 1fr; align-items:center; gap:7px; min-width:0; padding:8px 9px; border-radius:9px; background:#061322; }
.help-variable-list dt { color:#50e5ff; font:800 11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.help-variable-list dd { min-width:0; margin:0; color:#d5e2ed; font-size:10px; }
.help-variable-note { margin-top:13px !important; padding:11px; border-left:3px solid #ffc83d; border-radius:3px 10px 10px 3px; background:#191909; color:#e8ddb3 !important; }
.help-notice-list { display:grid; gap:10px; }
.help-notice-list article { padding:13px 14px; border-left:3px solid #1fcfea; border-radius:4px 13px 13px 4px; background:#061322; }
.help-notice-list h4 { margin:0 0 6px; color:#fff; font-size:14px; }
.help-notice-list p { margin:0; color:#afc1d1; font-size:12px; line-height:1.75; }
.help-revision { margin:20px 0 6px !important; color:#7590a8 !important; font-size:10px !important; text-align:center; }
.help-team-footer { margin:22px 0 4px; padding:24px 18px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #2bd9fa32; text-align:center; }
.help-team-footer a { display:inline-block; width:min(82%,420px); border-radius:16px; padding:12px 18px; transition:background .2s,transform .2s; }
.help-team-footer a:hover,.help-team-footer a:focus-visible { background:#ffffff08; outline:1px solid #38dcf566; }
.help-team-footer img { display:block; width:100%; height:auto; max-height:150px; object-fit:contain; filter:drop-shadow(0 7px 16px #0009); }
@media(max-width:520px) {
  .public-help-dialog { width:calc(100% - 16px); height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); margin:calc(env(safe-area-inset-top) + 8px) auto calc(env(safe-area-inset-bottom) + 8px); border-radius:20px;  color:#f8fbff; }
  .help-dialog-header { min-height:76px; padding:14px 14px 12px;  color:#f8fbff; }
  .help-dialog-header h2 { font-size:17px; }
  .help-close-button { min-width:70px; min-height:42px; padding:0 12px; }
  .help-dialog-scroll { height:calc(100% - 76px); padding:16px 14px calc(24px + env(safe-area-inset-bottom)); }
  .help-variable-list { grid-template-columns:1fr; }
}

/* Settings use a clearly coloured on/off switch; account selection stays a checkbox. */
.alt-save-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.alt-save-actions button { min-height:42px; }
.capture-options label.check-field,
.image-adjust-panel label.check-field,
.control-grid label.check-field,
.result-night-field {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  min-height:48px;
  padding:9px 11px;
  border:1px solid #ffffff30;
  border-radius:12px;
  background:#081d30;
  color:#dceafa;
  cursor:pointer;
}
.capture-options label.check-field:has(input:checked),
.image-adjust-panel label.check-field:has(input:checked),
.control-grid label.check-field:has(input:checked),
.result-night-field:has(input:checked) {
  border-color:#24d6f5;
  background:#103b53;
  color:#fff;
}
label.check-field input[type="checkbox"],
.result-night-field input[type="checkbox"] {
  -webkit-appearance:none;
  appearance:none;
  display:inline-block;
  position:relative;
  flex:0 0 48px;
  width:48px !important;
  min-width:48px;
  height:28px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #8395a5;
  border-radius:999px;
  background:#26394b;
  cursor:pointer;
  transition:background .18s,border-color .18s;
}
label.check-field input[type="checkbox"]::before,
.result-night-field input[type="checkbox"]::before {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px #0006;
  transition:transform .18s;
}
label.check-field input[type="checkbox"]:checked,
.result-night-field input[type="checkbox"]:checked {
  border-color:#19d3f2;
  background:#19d3f2;
}
label.check-field input[type="checkbox"]:checked::before,
.result-night-field input[type="checkbox"]:checked::before { transform:translateX(20px); }
label.check-field input[type="checkbox"]:focus-visible,
.result-night-field input[type="checkbox"]:focus-visible { outline:3px solid #fff; outline-offset:3px; }
label.check-field input[type="checkbox"]:disabled,
.result-night-field input[type="checkbox"]:disabled { opacity:.5; cursor:not-allowed; }
#warningControl small { flex-basis:100%; padding-left:58px; }
@media(max-width:520px) {
  .post-success-osd { grid-template-columns:38px minmax(0,1fr) auto 30px; gap:8px; padding:10px; }
  .post-success-osd img { width:38px; height:38px; }
  .post-success-copy strong { font-size:12px; }
  .post-success-copy span { font-size:9px; }
  .post-success-osd a { padding:9px 10px; font-size:11px; }
  .post-success-osd button { width:30px; height:30px; }
}
.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 .bluesky-settings-shortcut img { width:22px; height:22px; max-height:none; flex:0 0 22px; }
.camera-start-overlay .bluesky-settings-shortcut span { flex:0 0 auto; white-space:nowrap; }
.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; }
.stage[data-output-size="landscapeWide"] { aspect-ratio:16/9 !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}
.touch-brightness-control { position:absolute; z-index:20; width:160px; padding:9px 11px; transform:translate(-50%,-50%); border:1px solid #25d6f5; border-radius:12px; background:rgba(6,27,45,.62); color:#fff; box-shadow:0 6px 18px #0007; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); touch-action:none; }
.touch-brightness-control[hidden],.stage.has-result .touch-brightness-control,.stage:not(.has-video) .touch-brightness-control { display:none; }
.touch-brightness-control label { display:flex; justify-content:space-between; font-size:12px; font-weight:850; }
.touch-brightness-control input { display:block; width:100%; margin:7px 0; accent-color:#23d7f4; }
.touch-brightness-control small { display:block; font-size:10px; color:#acc7d6; }
.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}
.exposure-warning-status:not([hidden]){position:absolute;z-index:13;top:12px;left:12px;max-width:60%;padding:6px 9px;border:1px solid #ffffff55;border-radius:9px;background:#06182edc;color:#fff;font-size:11px;font-weight:900;line-height:1.4;pointer-events:none}
.stage:has(.exposure-warning.has-highlights) .exposure-warning-status{border-color:#ff6666;color:#ffb2b2}
.stage:has(.exposure-warning.has-shadows) .exposure-warning-status{border-color:#6ca5ff;color:#d2e3ff}
#warningControl small{grid-column:1/-1;color:#9db0c5;font-size:10px;font-weight:500;line-height:1.4}
.capture-options,.output-quality-panel,.image-adjust-panel{display:grid;gap:12px;margin-top:14px;padding:14px;border-radius:18px;background:#0310208a color:#f8fbff; }.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;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.shutter::before{content:"";position:absolute;inset:-10px;border-radius:50%}
.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}
.stage.has-video{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@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 .capture-freeze-frame { position:absolute; z-index:3; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.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-top-button { display:none; }
.camera-active .camera-menu-top-button { position:fixed; z-index:37; top:calc(12px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid #69dcf5a8; border-radius:13px; background:#071726c9; color:#fff; font:inherit; font-size:13px; font-weight:900; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.camera-active .camera-menu-top-button span { color:var(--cyan); font-size:16px; }
.camera-active .camera-menu-top-button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.camera-active .top-context-menu:not([hidden]) { position:fixed; z-index:38; top:calc(64px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); display:block; width:min(300px,calc(100vw - 24px)); max-height:calc(100dvh - 86px - env(safe-area-inset-top)); overflow-y:auto; padding:12px; border:1px solid #6edffa9e; border-radius:19px; background:#071726f5; color:#fff; box-shadow:0 15px 42px #000b; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.top-context-menu[hidden] { display:none; }
.top-context-menu strong { display:block; padding:5px 8px 10px; color:#8bdff3; font-size:12px; }
.top-context-menu button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:10px 12px; border:0; border-top:1px solid #ffffff1c; background:transparent; color:#fff; font:inherit; font-size:14px; font-weight:800; text-align:left; }
.top-context-menu button span { color:var(--cyan); font-size:24px; line-height:1; }
.top-context-menu button:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.top-context-menu button:active { background:#164262; }
.top-context-menu .top-context-exit { margin-top:5px; border-top-color:#ff72808c; color:#ff7d89; }
.top-context-menu .top-context-exit:active { background:#671d2a; }
.top-context-menu button[hidden],.top-context-choices[hidden],.top-context-shoot[hidden] { display:none !important; }
.top-context-choices button[aria-checked="true"] { color:#52ddf7; }
.top-context-choices button[aria-checked="true"]::before { content:'✓'; width:20px; flex:none; }
.top-context-choices button[aria-checked="false"]::before { content:''; width:20px; flex:none; }
.top-context-choices [data-top-back] { color:#a9e4f4; }
.top-context-edit { display:none; }
.capture-result-active .top-context-shoot { display:none; }
.capture-result-active .top-context-edit { display:block; }
.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); }
.post-menu-head > div { min-width:0; }
.post-menu-head #postMenuCloseButton { flex:none; padding:0 10px; font-size:clamp(11px,3.1vw,14px); white-space:nowrap; }
.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;  color:#f8fbff; }
.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;  color:#f8fbff; }
.template-variable-tools { margin-top:9px; padding:10px; border:1px solid #25d5f03b; border-radius:12px; background:#061827;  color:#f8fbff; }
.template-variable-tools>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.template-variable-tools b { color:#fff; font-size:11px; }
.template-variable-tools>div:first-child span { color:#829ab0; font-size:9px; }
.template-variable-buttons { display:flex; gap:6px; margin-top:8px; padding-bottom:3px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.template-variable-buttons button { flex:0 0 auto; min-height:36px; border:1px solid #44dff05c; border-radius:999px; padding:6px 10px; background:#0b3150; color:#dffaff; font-size:12px; font-weight:900; }
.template-variable-buttons button::before { content:attr(data-template-variable); margin-right:5px; color:#4de6ff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.template-variable-tools.compact { margin:9px 0 0; }
.template-preview { margin-top:8px; padding:9px 10px; border-radius:10px; background:#020d18;  color:#f8fbff; }
.template-preview>b { color:#8faabe; font-size:9px; }
.template-preview pre { min-height:2.8em; max-height:110px; margin:5px 0 0; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:#eaf8ff; font:10px/1.55 Inter,"Noto Sans JP",sans-serif; }
.template-preview .form-status { margin:5px 0 0; font-size:9px; }
.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; }
.posting-in-progress { overflow:hidden !important; }
.posting-lock { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; background:rgba(1,8,16,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); touch-action:none; overscroll-behavior:none; cursor:wait; }
.posting-lock[hidden] { display:none; }
.posting-lock-card { width:min(100%,360px); padding:30px 24px; border:1px solid #27d8f266; border-radius:24px; background:linear-gradient(145deg,#0b2d55f7,#061425fc); box-shadow:0 28px 90px #000d; text-align:center;  color:#f8fbff; }
.posting-lock-card strong { display:block; margin-top:17px; color:#fff; font-size:21px; letter-spacing:.04em; }
.posting-lock-card p { margin:8px 0 0; color:#b7c9da; font-size:12px; line-height:1.7; }
.posting-spinner { display:block; width:58px; height:58px; margin:auto; border:5px solid #ffffff20; border-top-color:#25d7f5; border-right-color:#168ff1; border-radius:50%; animation:posting-spin .85s linear infinite; }
@keyframes posting-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .posting-spinner { animation-duration:1.8s; } }
@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; }
.topbar > div { flex:1 1 auto; min-width:0; overflow:hidden; }
.top-home-link { display:flex; align-items:center; flex:1 1 auto; min-width:0; gap:12px; color:inherit; text-decoration:none; border-radius:10px; }
.top-home-link > div { min-width:0; overflow:hidden; }
.top-home-link .brand { flex:none; }
.workflow-title-bar { text-decoration:none; cursor:pointer; }
.top-home-link:focus-visible,.workflow-title-bar:focus-visible { outline:3px solid #168fba; outline-offset:3px; }
.topbar #screenTitle,.topbar .eyebrow { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bonkuraz-member-name-badge { display:block; flex:0 0 auto; width:130px; height:52px; object-fit:contain; margin-left:auto; }
.bonkuraz-member-name-badge[hidden] { display:none !important; }
.topbar .icon-button { margin-left:auto; flex:0 0 auto; }
.topbar .bonkuraz-member-name-badge:not([hidden]) + .icon-button { margin-left:0; }
.manual-location { display:none; min-width:0; padding:14px; border:1px solid #3bd4f768; border-radius:15px; background:#081d32;  color:#f8fbff; }
.mode-edit .manual-location,.manual-location-osd .manual-location { display:block; }
.manual-location-osd[hidden] { display:none; }
.manual-location-osd { position:fixed; z-index:700; inset:0; display:grid; place-items:center; padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); background:#000c; }
.manual-location-osd-card { width:min(480px,100%); max-height:100%; overflow-y:auto; padding:20px; border:1px solid #3bd4f7a0; border-radius:22px; background:#071b30; box-shadow:0 20px 70px #000c;  color:#f8fbff; }
.manual-location-osd-card h2 { margin:0 0 7px; font-size:20px; }
.manual-location-osd-card>p { margin:0 0 12px; color:#b6c9d8; font-size:12px; line-height:1.6; }
.manual-location-osd-card #manualLocationReplaceButton { display:block; width:100%; margin-top:12px; min-height:40px; border:1px solid #ffffff36; border-radius:10px; background:#122b46; color:#fff; font:inherit; font-size:12px; font-weight:800; }
.manual-location h3 { margin:0 0 6px; font-size:15px; }
.manual-location input { width:100%; min-height:40px; padding:8px 10px; border:1px solid #ffffff48; border-radius:10px; background:#041220; color:#fff; font:inherit; font-size:14px; }
.manual-location p,.manual-location small { display:block; margin:7px 0; color:#b6c9d8; font-size:11px; line-height:1.55; }
.manual-location-search { display:flex; gap:7px; margin:10px 0; }
.manual-location-search input { flex:1 1 0; min-width:0; }
.manual-location button { flex:none; min-height:40px; padding:8px 12px; border:1px solid #27cbea8c; border-radius:10px; background:#12395e; color:#fff; font:inherit; font-size:12px; font-weight:800; }
.manual-location-results[hidden] { display:none; }
.manual-location-results { display:grid; gap:6px; max-height:210px; overflow-y:auto; }
.manual-location-results button { width:100%; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.manual-location-results button span { display:block; margin-top:3px; color:#aac4d6; font-size:10px; }
.manual-coordinates { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; align-items:end; }
.manual-coordinates label { min-width:0; }
.manual-coordinates input { width:100%; }
.manual-coordinates button { grid-column:1 / -1; }
.bonkuraz-member-status { color:#c5d6e6; font-size:13px; line-height:1.6; }
.bonkuraz-member-form { display:grid; gap:10px; margin-top:16px; padding:16px; border:1px solid #ffffff30; border-radius:14px; background:#07192f;  color:#f8fbff; }
.bonkuraz-member-form[hidden] { display:none !important; }
.bonkuraz-member-form label { font-weight:800; }
.bonkuraz-member-form input { width:100%; min-width:0; padding:12px; border:1px solid #ffffff55; border-radius:9px; background:#091b2e; color:#fff; font-size:16px; }
.bonkuraz-member-form button { padding:12px; border:0; border-radius:9px; background:#23c9ed; color:#07192f; font-weight:900; cursor:pointer; }
.bonkuraz-member-form p { margin:0; color:#c5d6e6; }
@media(max-width:480px) {
  .topbar { gap:6px; }
  .topbar .brand { width:48px; height:48px; flex:0 0 48px; }
  .topbar h1 { font-size:clamp(15px,4.4vw,20px); white-space:nowrap; }
  .topbar .eyebrow { font-size:clamp(7px,1.9vw,10px); letter-spacing:.11em; white-space:nowrap; }
  .bonkuraz-member-name-badge { width:115px; height:46px; }
  .topbar .icon-button { width:38px; height:38px; flex:0 0 38px; }
}
.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;  color:#f8fbff; }
.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; }
.post-menu-open .post-menu-backdrop { background:transparent; }
.camera-active.post-menu-open .workflow-steps,
.camera-active.post-menu-open .camera-menu-top-button { z-index:210; }
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 .result-action-bar .action-row { grid-template-columns:1fr 1.35fr 1fr; }
.camera-active.capture-result-active .stage { max-height:calc(100dvh - 116px - env(safe-area-inset-bottom)); }
.result-editor-panel[hidden] { display:none; }
.camera-active.capture-result-active.result-editor-open .result-action-bar { display:none !important; }
.camera-active.capture-result-active.result-editor-open .stage { max-height:none; }
.camera-active.capture-result-active.result-editor-open .result-editor-panel { position:absolute; z-index:30; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; max-height:40dvh; overflow:hidden; border:1px solid #ffffff2b; border-radius:22px; background:#111b27f5; box-shadow:0 -18px 56px #000b; backdrop-filter:blur(15px); }
.result-editor-head { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px 11px; border-bottom:1px solid #ffffff1c; }
.result-editor-head-actions { display:flex; align-items:center; gap:7px; flex:none; }
.result-editor-head > div:first-child { min-width:0; }
.result-editor-head h2 { font-size:clamp(13px,4vw,18px); }
.result-editor-head-actions #resultEditorRetakeButton { min-width:0; padding:0 10px; border:1px solid #ffffff4d; background:#10283c; color:#e6f4ff; white-space:nowrap; }
.mode-edit #resultEditorRetakeButton { display:none; }
.result-editor-head h2 { margin:2px 0 0; font-size:18px; }
.result-editor-head button { min-width:70px; min-height:40px; border:0; border-radius:11px; background:linear-gradient(135deg,#2ce1ff,#1381eb); color:#001628; font-weight:950; }
@media(max-width:390px) {
  .result-editor-head { gap:6px; padding-right:10px; padding-left:10px; }
  .result-editor-head .eyebrow { display:none; }
  .result-editor-head h2 { font-size:13px; white-space:nowrap; }
  .result-editor-head-actions { gap:5px; }
  .result-editor-head button,.result-editor-head-actions #resultEditorRetakeButton { min-width:0; min-height:38px; padding:0 8px; font-size:12px; }
  .post-menu-head #postMenuCloseButton { padding:0 8px; font-size:11px; }
}
.result-editor-scroll { flex:1 1 auto; min-height:0; padding:12px 14px 16px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.result-editor-tabs { position:relative; z-index:1; display:flex; flex:none; min-height:48px; gap:5px; padding:8px 10px 0; overflow-x:auto; border-bottom:1px solid #ffffff1c; background:#111b27; scrollbar-width:none; }
.result-editor-tabs button { flex:1 0 auto; min-height:38px; padding:7px 10px; border:0; border-bottom:3px solid transparent; border-radius:8px 8px 0 0; background:transparent; color:#a9bbcb; font-size:12px; font-weight:900; white-space:nowrap; }
.result-editor-tabs button[aria-selected="true"] { border-bottom-color:var(--cyan); background:#12334b; color:#fff; }
.result-editor-scroll [role="tabpanel"][hidden] { display:none !important; }
.result-editor-scroll .control-grid { display:grid; gap:10px; }
.result-editor-scroll .control-grid label { min-width:0; }
#resultQualityPanel #outputSizeSettings { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; }
#resultQualityPanel #outputSizeSettings label { display:grid; gap:6px; }
#resultQualityPanel #outputSizeSettings select { width:100%; }
#resultQualityPanel #outputSizeBadge { color:#bfefff; font-size:12px; padding-bottom:9px; }
#resultQualityPanel .output-quality-panel { margin-top:10px; }
.member-enhance { margin-top:14px; padding:14px; border:1px solid #1c8ebc; border-radius:14px; background:#09263a; color:#e6f6ff; }
.member-enhance h3 { margin:0 0 8px; font-size:15px; }
.member-enhance p { margin:7px 0; font-size:12px; line-height:1.55; }
.member-enhance .member-enhance-notice { color:#f6d898; }
.member-enhance button { min-height:44px; width:100%; margin-top:8px; border:0; border-radius:10px; background:linear-gradient(120deg,#2ce1ff,#1381eb); color:#001628; font-weight:900; }
.member-enhance button:disabled { opacity:.55; }
.member-enhance .member-enhance-auto { display:flex; align-items:center; gap:12px; min-height:66px; margin:13px 0 7px; padding:11px 13px; border:1px solid #5fd0e2a8; border-radius:12px; background:#113b53; color:#fff; cursor:pointer; }
.member-enhance-auto input { flex:none; width:46px; height:27px; margin:0; accent-color:#12c5e8; cursor:pointer; }
.member-enhance-auto span { display:block; font-size:14px; font-weight:900; }
.member-enhance-auto small { display:block; margin-top:3px; color:#b9d8e5; font-size:11px; font-weight:600; }
.member-enhance .member-enhance-hint { color:#c7e5ee; font-size:12px; }
#memberEnhanceStatus { min-height:1.5em; }
.stage .member-enhance-osd:not([hidden]) { position:absolute; z-index:29; top:50%; left:50%; display:grid; gap:7px; width:min(85%,300px); padding:16px; transform:translate(-50%,-50%); border:1px solid #55d7f3a8; border-radius:16px; background:#061c2ded; color:#fff; text-align:center; box-shadow:0 14px 40px #000b; backdrop-filter:blur(12px); pointer-events:auto; }
.member-enhance-osd strong { font-size:15px; }
.member-enhance-osd span { color:#b9d7e7; font-size:12px; line-height:1.4; }
.member-enhance-osd progress { width:100%; height:8px; accent-color:#13cff3; }
.member-enhance-osd button { justify-self:center; min-width:96px; min-height:34px; margin-top:3px; border:1px solid #7caec3; border-radius:10px; background:#0c2d44; color:#fff; font-weight:800; }
.camera-osd #outputSizeSettings { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
.camera-osd #outputSizeSettings label { min-width:0; }
.camera-osd #outputSizeBadge { color:#bfefff; font-size:9px; white-space:nowrap; }
.camera-menu-open .camera-osd { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.camera-menu-open .camera-osd #outputSizeSettings { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; }
.camera-menu-open .camera-osd #outputSizeSettings label { grid-column:auto; grid-template-columns:auto minmax(0,1fr); min-width:0; }
.camera-menu-open .camera-osd #outputSizeSettings select { min-width:0; }
.camera-menu-open .camera-osd #outputSizeBadge { align-self:center; font-size:11px; }
.camera-menu-open .camera-osd .camera-location-button,.camera-menu-open .camera-osd .camera-exit-button { width:100%; min-width:0; align-self:stretch; white-space:normal; }
.result-filter-field { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; color:#dceafa; font-size:12px; font-weight:900; }
.result-filter-field select { min-width:0; width:100%; border:1px solid #ffffff2b; border-radius:11px; padding:10px; background:#03101f; color:#fff; font:inherit; }
.result-filter-description { margin:9px 0 0; color:#b6cbdb; font-size:12px; line-height:1.5; }
.stage .blur-touch-layer { display:none; position:absolute; inset:0; z-index:12; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.stage.has-result .blur-touch-layer:not([hidden]) { display:block; }
.result-blur-guide { margin:2px 0 14px; color:#c5d9e6; font-size:12px; line-height:1.65; }
.result-blur-size { display:grid; grid-template-columns:auto minmax(0,1fr) 2em; align-items:center; gap:12px; font-size:12px; font-weight:850; }
.result-blur-size input { width:100%; accent-color:var(--cyan); }
.result-blur-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.result-blur-actions button { min-height:42px; border:1px solid #60d9ed70; border-radius:11px; background:#10324b; color:#fff; font-weight:850; }
.result-blur-actions button:disabled { opacity:.45; }
.result-adjust-grid { display:grid; gap:10px; margin-top:12px; }
.result-adjust-grid label { display:grid; grid-template-columns:6.5em minmax(0,1fr) 2.3em auto; align-items:center; gap:8px; color:#dceafa; font-size:11px; font-weight:850; }
.result-adjust-grid input { width:100%; min-width:0; accent-color:var(--cyan); }
.result-adjust-grid output { text-align:right; color:#fff; }
.result-adjust-grid .adjust-reset { padding:6px 8px; border:1px solid #60d9ed70; border-radius:8px; background:#12395e; color:#fff; font:inherit; white-space:nowrap; }
.capture-feedback:not([hidden]) { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:7px 14px; border-radius:12px; background:#092a43ee; color:#fff; font-size:13px; font-weight:900; pointer-events:none; }
.shutter.is-capturing span { box-shadow:0 0 0 9px #25d8ff55,0 0 26px #25d8ff; }
.result-night-field { display:flex; align-items:center; gap:8px; margin-top:12px; color:#dceafa; font-size:11px; font-weight:850; }
.result-night-field input { width:20px; height:20px; accent-color:var(--cyan); }
.result-edit-status { min-height:1.4em; margin:10px 0 0; color:#8faabe; font-size:10px; }
.result-details-button { width:100%; margin-top:8px; border:1px solid #55ddf452; border-radius:11px; padding:11px; background:#0b2c48; color:#fff; font-weight:900; }
@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 1.3fr; }
  .camera-active.capture-result-active .result-action-bar .action-row .ghost-button:last-child { grid-column:1/-1; }
  .camera-active.capture-result-active .result-action-bar .ghost-button { padding:10px; }
}

/* Only the live camera shows the shooting settings after a result has been created. */
.capture-result-active .camera-menu-button { display:none !important; }

/* 横向きのスマートフォン: 写真を左、操作を右に分ける。 */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 600px) {
  /* トップは画面内に撮影ボタンを収める。撮影中の固定レイアウトには適用しない。 */
  body:not(.camera-active) .app-shell { width:100%; max-width:none; padding:calc(4px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 16px calc(12px + env(safe-area-inset-left)); }
  body:not(.camera-active) .topbar,
  body:not(.camera-active) .status-strip,
  body:not(.camera-active) .camera-card { width:100%; max-width:none; }
  body:not(.camera-active) .topbar { min-height:55px; margin:0 auto 3px; padding:3px 8px; border-radius:13px; gap:8px; }
  body:not(.camera-active) .topbar .brand { width:50px; height:50px; }
  body:not(.camera-active) .topbar h1 { font-size:18px; }
  body:not(.camera-active) .topbar .eyebrow { font-size:9px; }
  body:not(.camera-active) .topbar .bonkuraz-member-name-badge { width:116px; height:auto; }
  body:not(.camera-active) .status-strip { min-height:32px; margin-bottom:5px; padding:3px 8px; }
  body:not(.camera-active) .camera-card { margin:0 auto; }
  body:not(.camera-active) .camera-card .stage:not(.has-video):not(.has-photo):not(.has-result) { width:100%; height:calc(100dvh - 122px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:240px; aspect-ratio:auto !important; border-radius:16px; }
  body:not(.camera-active) .camera-start-overlay { display:grid; grid-template-columns:minmax(110px,32%) minmax(0,1fr); grid-template-rows:repeat(6,auto); align-content:center; justify-items:center; column-gap:12px; row-gap:3px; padding:10px 16px; }
  body:not(.camera-active) .camera-start-overlay[hidden] { display:none; }
  body:not(.camera-active) .camera-start-overlay>img { grid-column:1; grid-row:1 / 7; width:min(82%,170px); max-height:175px; align-self:center; }
  body:not(.camera-active) .camera-start-overlay> :not(img) { grid-column:2; }
  body:not(.camera-active) .camera-start-overlay h2 { font-size:18px; margin:0; }
  body:not(.camera-active) .camera-start-overlay>p:not(.eyebrow) { margin:0; }
  body:not(.camera-active) .camera-start-overlay .quick-camera-button { width:min(100%,350px); padding:9px; }
  body:not(.camera-active) .camera-start-overlay .start-mode-switch { width:min(100%,350px); margin:0; }
  body:not(.camera-active) .camera-start-overlay .mode-button { min-height:39px; padding:5px 10px; }
  body:not(.camera-active) .camera-start-overlay .mode-button b { font-size:12px; }
  body:not(.camera-active) .camera-start-overlay .mode-button span { font-size:9px; }
  body:not(.camera-active) .camera-start-overlay .bluesky-settings-shortcut { width:min(100%,350px); min-height:34px; font-size:11px; }
  .camera-active .camera-card {
    padding:0;
    overflow:hidden;
  }
  .camera-active .stage {
    position:absolute;
    top:50%;
    left:calc((100% - var(--landscape-rail-width, 34%)) / 2);
    width:auto;
    height:auto;
    max-width:calc(100% - var(--landscape-rail-width, 34%) - 24px);
    max-height:calc(100% - 24px);
    transform:translate(-50%, -50%);
  }
  .camera-active .capture-bar {
    left:auto;
    right:0;
    bottom:50%;
    width:var(--landscape-rail-width, 34%);
    height:110px;
    transform:translateY(50%);
    gap:clamp(8px,2vw,22px);
  }
  .camera-active .capture-bar .shutter { flex:none; }
  .camera-active .live-zoom-control:not([hidden]) {
    left:auto;
    right:12px;
    bottom:auto;
    top:calc(18px + env(safe-area-inset-top));
    width:calc(var(--landscape-rail-width, 34%) - 24px);
    transform:none;
  }
  .camera-active .camera-menu-button {
    left:auto;
    right:12px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:calc(var(--landscape-rail-width, 34%) - 24px);
  }
  .camera-active.capture-result-active.result-editor-open .result-editor-panel {
    top:calc(8px + env(safe-area-inset-top));
    bottom:calc(8px + env(safe-area-inset-bottom));
    left:auto;
    right:calc(8px + env(safe-area-inset-right));
    width:calc(var(--landscape-rail-width, 48%) - 16px);
    max-height:none;
    border-radius:18px;
  }
  .result-editor-head { padding:8px 12px; }
  .result-editor-head h2 { font-size:15px; }
  .result-editor-head button { min-height:36px; }
  .result-editor-tabs { min-height:42px; padding-top:4px; }
  .result-editor-tabs button { min-height:34px; padding:5px 8px; font-size:11px; }
  .result-editor-scroll { padding:8px 12px 12px; }
  .camera-active.camera-menu-open .control-panel,
  .post-menu-open .result-panel {
    left:auto;
    right:calc(8px + env(safe-area-inset-right));
    top:calc(8px + env(safe-area-inset-top));
    bottom:calc(8px + env(safe-area-inset-bottom));
    width:min(480px,calc(100% - 24px));
    max-height:none;
    transform:none;
    border:1px solid #ffffff26;
    border-radius:18px;
  }
}
/* The main three-step flow leaves photo edits and posting tools available on demand. */
.quick-finish-status { margin:0; padding:10px 16px; color:#d4ebf5; font-size:12px; line-height:1.5; }
.result-editor-details { flex:0 1 auto; min-height:0; overflow:hidden; }
.result-editor-details[open] { display:flex; flex-direction:column; flex:1 1 auto; }
.result-editor-details>summary, .post-advanced-details>summary { cursor:pointer; list-style:none; border-top:1px solid #ffffff22; padding:12px 16px; color:#d6f5ff; background:#102a3d; font-size:13px; font-weight:900; }
.result-editor-details>summary::-webkit-details-marker, .post-advanced-details>summary::-webkit-details-marker { display:none; }
.result-editor-details>summary::after, .post-advanced-details>summary::after { content:'⌄'; float:right; color:var(--cyan); }
.result-editor-details[open]>summary::after, .post-advanced-details[open]>summary::after { transform:rotate(180deg); }
.result-editor-details .result-editor-scroll { min-height:0; }
.post-advanced-details { margin:10px 0; border:1px solid #5ad6f363; border-radius:12px; overflow:hidden; }
.post-advanced-details>summary { border:0; }
.post-advanced-body { padding:12px; }
.post-advanced-body>*:first-child { margin-top:0; }
.location-refresh-status { grid-column:1/-1; margin:2px 0 0; padding:9px 11px; border:1px solid #51d2ea66; border-radius:10px; color:#e5faff; background:#082b42; font-size:11px; line-height:1.5; }
.location-refresh-status[hidden],.location-refresh-osd[hidden],.location-refresh-osd button[hidden] { display:none; }
.location-refresh-osd { position:fixed; z-index:720; inset:0; display:flex; justify-content:center; align-items:flex-start; padding:calc(110px + env(safe-area-inset-top)) 16px 16px; pointer-events:none; }
.location-refresh-card { width:min(100%,370px); padding:16px; border:1px solid #59d9edb3; border-radius:16px; background:#071e32f5; color:#fff; box-shadow:0 12px 38px #000c; pointer-events:auto; }
.location-refresh-card strong { display:block; font-size:16px; }
.location-refresh-card p { margin:8px 0 0; white-space:pre-line; font-size:12px; line-height:1.65; }
.location-refresh-card button { display:block; margin:12px 0 0 auto; padding:8px 16px; border:1px solid #76ddef; border-radius:9px; background:#114263; color:#fff; font:inherit; font-weight:800; }
.action-osd { position:fixed; z-index:1000; width:min(400px,calc(100% - 32px)); max-height:80dvh; margin:auto; padding:0; border:1px solid #55d9ef; border-radius:18px; background:#081e32; color:#fff; box-shadow:0 24px 80px #000d; }
.action-osd::backdrop { background:#000b; backdrop-filter:blur(4px); }
.action-osd form { padding:20px; }
.action-osd h2 { margin:0 0 10px; font-size:19px; }
.action-osd p { margin:0 0 16px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; font-size:14px; }
.action-osd input:not([hidden]) { display:block; width:100%; min-height:44px; margin-bottom:16px; padding:10px; border:1px solid #73dcef; border-radius:9px; background:#02101d; color:#fff; font:inherit; font-size:16px; }
.action-osd-buttons { display:flex; justify-content:flex-end; gap:10px; }
.action-osd-buttons button { min-height:44px; padding:8px 15px; border:1px solid #5fcce4; border-radius:10px; background:#123149; color:#fff; font:inherit; font-weight:850; }
.action-osd-buttons #actionOsdAccept { background:#22b8e8; color:#031827; }
.action-osd-buttons button[hidden] { display:none; }
@media (orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .camera-active.capture-result-active.result-editor-open .result-editor-panel:has(#resultEditorDetails:not([open])) { top:auto; }
}
/* Keep the preview below the fixed 44px workflow bar on portrait phones. */
@media (orientation:portrait), (max-width:599px) {
  .camera-active .camera-card { padding-top:calc(68px + env(safe-area-inset-top)); }
}

/* Movable image stamp on the completed photo; placement uses photo coordinates. */
.stage .stamp-placement { position:absolute; z-index:11; inset:0; pointer-events:none; }
.stage.has-result .stamp-placement:not([hidden]) { display:block; }
.stage .stamp-placement img { position:absolute; display:block; width:28%; height:auto; max-height:90%; object-fit:contain; transform:translate(-50%,-50%); touch-action:none; cursor:grab; pointer-events:auto; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; border:1px dashed #48dbfa; }
.stamp-file-label { display:block; padding:12px; border:1px solid #36c9ed; border-radius:10px; color:#fff; font-weight:800; }
.stamp-file-label input { display:block; width:100%; margin-top:8px; font:inherit; }
.stamp-tolerance-label { display:flex; align-items:center; gap:10px; margin:14px 0; }
.stamp-tolerance-label input { flex:1; min-width:0; }
/* iOS Safari cannot reliably scroll a flex child inside an open <details>.
   Make the details element itself the scrolling surface. */
.camera-active.capture-result-active.result-editor-open .result-editor-details[open] {
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.result-editor-details[open] .result-editor-scroll {
  flex:none;
  overflow:visible;
  min-height:min-content;
  touch-action:pan-y;
}
.result-editor-details[open] .result-editor-tabs { position:sticky; top:0; z-index:2; }

/* Portrait editing and posting: the photo remains visible beside the controls. */
@media (orientation:portrait) and (min-width:320px) {
  .camera-active.capture-result-active.result-editor-open .result-editor-panel {
    top:calc(70px + env(safe-area-inset-top));
    right:calc(6px + env(safe-area-inset-right));
    bottom:calc(8px + env(safe-area-inset-bottom));
    left:auto;
    width:calc(56% - 9px);
    max-height:none;
    border-radius:16px;
  }
  .camera-active.post-menu-open .result-panel {
    top:calc(70px + env(safe-area-inset-top));
    right:calc(6px + env(safe-area-inset-right));
    bottom:calc(8px + env(safe-area-inset-bottom));
    left:auto;
    width:calc(56% - 9px);
    max-height:none;
    padding:0 8px calc(12px + env(safe-area-inset-bottom));
    transform:none;
    border-radius:16px;
    background:#071726;
  }
  .camera-active.capture-result-active.result-editor-open .stage,
  .camera-active.post-menu-open .stage { max-height:none; }
  .result-editor-head { display:flex; flex-wrap:wrap; padding:9px; gap:5px; }
  .result-editor-head > div:first-child { width:100%; }
  .result-editor-head h2 { font-size:13px; white-space:normal; }
  .result-editor-head .eyebrow { font-size:9px; }
  .result-editor-head-actions { display:flex; width:100%; gap:4px; }
  .result-editor-head button,.result-editor-head-actions #resultEditorRetakeButton { flex:1; min-width:0; min-height:34px; padding:4px; font-size:10px; white-space:normal; }
  .quick-finish-status { padding:7px 9px; font-size:10px; }
  .result-editor-details>summary { padding:9px; }
  .result-editor-tabs { gap:3px; padding:4px; }
  .result-editor-tabs button { min-height:34px; padding:4px 6px; font-size:10px; }
  .result-editor-scroll { padding:8px; }
  .result-editor-scroll input:not([type="range"]):not([type="checkbox"]),
  .result-editor-scroll select,
  .post-menu-open .result-panel input:not([type="range"]):not([type="checkbox"]),
  .post-menu-open .result-panel textarea,
  .post-menu-open .result-panel select { min-width:0; max-width:100%; font-size:16px; }
  .post-menu-open .post-menu-head { display:flex; flex-wrap:wrap; gap:4px; margin:0 -8px 8px; padding:9px; }
  .post-menu-open .post-menu-head > div { width:100%; }
  .post-menu-open .post-menu-head h2 { font-size:13px; }
  .post-menu-open .post-menu-head .eyebrow { font-size:9px; }
  .post-menu-open .post-menu-head #postMenuCloseButton { min-height:32px; margin-left:auto; font-size:10px; }
  .post-menu-open .post-composer { min-width:0; padding:9px; }
  .post-menu-open .post-composer-head { display:block; }
  .post-menu-open .post-composer-head h3 { font-size:14px; }
  .post-menu-open .post-composer-head #postAccountLabel { display:block; font-size:10px; }
  .post-menu-open .post-composer textarea { width:100%; }
  .post-menu-open .template-variable-tools { padding:7px; }
  .post-menu-open .template-variable-tools>div:first-child { display:block; }
  .post-menu-open .template-variable-buttons button { min-height:36px; }
}
/* During portrait editing/posting every navigation and action sits in the right rail. */
@media (orientation:portrait) and (min-width:320px) {
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .camera-menu-top-button {
    left:auto;
    right:calc(8px + env(safe-area-inset-right));
    top:calc(10px + env(safe-area-inset-top));
  }
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .top-context-menu {
    left:auto;
    right:calc(8px + env(safe-area-inset-right));
    top:calc(60px + env(safe-area-inset-top));
    width:min(290px,calc(100vw - 16px));
  }
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps {
    top:calc(64px + env(safe-area-inset-top));
    left:calc(6px + env(safe-area-inset-left));
    right:calc(6px + env(safe-area-inset-right));
    width:auto;
    height:48px;
    padding:4px;
    gap:4px;
  }
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps button {
    min-height:38px;
    padding:2px 4px;
    gap:4px;
    font-size:clamp(9px,2.8vw,12px);
    white-space:normal;
    line-height:1.1;
  }
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps button span {
    width:18px;
    height:18px;
    font-size:10px;
  }
  .camera-active.capture-result-active.result-editor-open .result-editor-panel,
  .camera-active.capture-result-active.post-menu-open .result-panel {
    top:calc(120px + env(safe-area-inset-top));
  }
}

body.portrait-rail-layout.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps {
  left:calc(6px + env(safe-area-inset-left));
  right:calc(6px + env(safe-area-inset-right));
  top:calc(64px + env(safe-area-inset-top));
  width:auto;
  height:48px;
  padding:4px;
  gap:4px;
}
body.portrait-rail-layout.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps button {
  min-height:38px;
  padding:2px 4px;
  gap:4px;
  font-size:clamp(9px,2.8vw,12px);
  white-space:normal;
  line-height:1.1;
}
body.portrait-rail-layout.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps button span {
  width:18px;
  height:18px;
  font-size:10px;
}

/* Apply the portrait split through the measured layout viewport, including iOS PWA
   states where CSS orientation media queries report the wrong orientation. */
body.portrait-rail-layout.camera-active.capture-result-active.result-editor-open .result-editor-panel {
  position:absolute;
  top:calc(120px + env(safe-area-inset-top)) !important;
  right:calc(6px + env(safe-area-inset-right));
  bottom:calc(8px + env(safe-area-inset-bottom));
  left:auto;
  width:calc(56% - 9px);
  max-height:none;
  border-radius:16px;
}
body.portrait-rail-layout.camera-active.post-menu-open .result-panel {
  position:fixed;
  top:calc(120px + env(safe-area-inset-top));
  right:calc(6px + env(safe-area-inset-right));
  bottom:calc(8px + env(safe-area-inset-bottom));
  left:auto;
  width:calc(56% - 9px);
  max-height:none;
  transform:none;
  padding:0 8px calc(12px + env(safe-area-inset-bottom));
  border-radius:16px;
  background:#071726;
}
body.portrait-rail-layout.camera-active .workflow-steps {
  top:calc(64px + env(safe-area-inset-top));
  right:calc(6px + env(safe-area-inset-right));
  left:calc(6px + env(safe-area-inset-left));
  width:auto;
  height:48px;
  padding:4px;
  gap:4px;
}
body.portrait-rail-layout.camera-active .workflow-steps button { min-height:38px; padding:2px 4px; gap:4px; font-size:clamp(9px,2.8vw,12px); white-space:normal; line-height:1.1; }
body.portrait-rail-layout.camera-active .workflow-steps button span { width:18px; height:18px; font-size:10px; }
body.portrait-rail-layout.camera-active .camera-menu-top-button { top:calc(10px + env(safe-area-inset-top)); left:auto; right:calc(8px + env(safe-area-inset-right)); }
body.portrait-rail-layout.camera-active .top-context-menu { top:calc(60px + env(safe-area-inset-top)); left:auto; right:calc(8px + env(safe-area-inset-right)); width:min(290px,calc(100vw - 16px)); }
body.portrait-rail-layout.camera-active .stage { max-height:none; }
body.portrait-rail-layout .result-editor-head,
body.portrait-rail-layout .post-menu-head { flex-wrap:wrap; gap:5px; padding:9px; }
body.portrait-rail-layout .result-editor-head > div:first-child,
body.portrait-rail-layout .post-menu-head > div:first-child { width:100%; }
body.portrait-rail-layout .result-editor-head-actions { width:100%; }
body.portrait-rail-layout .result-editor-head button { flex:1; min-width:0; min-height:34px; padding:4px; font-size:10px; white-space:normal; }
body.portrait-rail-layout .post-menu-head { margin:0 -8px 8px; }
body.portrait-rail-layout .post-menu-head #postMenuCloseButton { margin-left:auto; }
body.portrait-rail-layout .post-composer { min-width:0; padding:9px; }
body.portrait-rail-layout .post-composer-head { display:block; }
body.portrait-rail-layout .result-editor-scroll { padding:8px; }
body.portrait-rail-layout .result-editor-tabs { padding:4px; gap:3px; }
body.portrait-rail-layout .result-editor-tabs button { padding:4px 6px; font-size:10px; }
body.portrait-rail-layout .result-editor-scroll input:not([type=range]):not([type=checkbox]),
body.portrait-rail-layout .result-editor-scroll select,
body.portrait-rail-layout .result-panel input:not([type=range]):not([type=checkbox]),
body.portrait-rail-layout .result-panel textarea,
body.portrait-rail-layout .result-panel select { max-width:100%; min-width:0; font-size:16px; }

/* Do not let the capture action bar leak through under the side-by-side post. */
body.portrait-rail-layout.post-menu-open .result-action-bar,
body.portrait-rail-layout.result-editor-open .result-action-bar { display:none !important; }
body.portrait-rail-layout .post-composer .template-variable-tools>div:first-child span { display:block; margin-top:4px; line-height:1.35; }

.portrait-post-preview { display:none; }
body.portrait-rail-layout.post-menu-open .camera-card .portrait-post-preview {
  position:absolute;
  z-index:29;
  display:block;
  left:6px;
  top:var(--portrait-photo-bottom, 65dvh);
  bottom:calc(8px + env(safe-area-inset-bottom));
  width:calc(44% - 12px);
  min-height:0;
  padding:10px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid #49c8e46b;
  border-radius:13px;
  background:#071b2d;
  color:#eaf8ff;
}
.portrait-post-preview b { font-size:11px; color:#60dcf5; }
.portrait-post-preview pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.55 Inter,"Noto Sans JP",sans-serif; }
.portrait-post-preview .form-status { font-size:10px; line-height:1.45; }

/* The post preview lives directly under body so the fixed camera card cannot clip it. */
body.portrait-rail-layout.post-menu-open > .portrait-post-preview {
  position:fixed;
  z-index:195;
  display:block;
  right:auto;
  bottom:calc(8px + env(safe-area-inset-bottom));
  max-height:calc(100dvh - 150px);
}
body.portrait-rail-layout.post-menu-open > .portrait-post-preview {
  min-height:0;
  padding:10px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid #49c8e46b;
  border-radius:13px;
  background:#071b2d;
  color:#eaf8ff;
}

/* 地名・天気: daily controls first, location confirmation second, uncommon settings collapsed. */
.location-editor-grid { grid-template-columns:minmax(0,1fr) !important; align-content:start; }
.location-editor-grid>.wide-field { grid-column:1/-1; }
.location-current { padding:14px; border:1px solid #41c9e34d; border-radius:16px; background:linear-gradient(135deg,#103650,#071b2c);  color:#f8fbff; }
.location-kicker { display:block; margin-bottom:10px; color:#a9def0; font-size:12px; font-weight:800; }
.location-main-fields,.weather-main-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.location-current label,.weather-main-fields label { display:grid; min-width:0; gap:6px; color:#c9deeb; font-size:12px; font-weight:800; }
.location-editor-grid input:not([type=checkbox]),.location-editor-grid select { width:100%; min-width:0; box-sizing:border-box; }
.location-current input { font-size:17px; font-weight:850; }
.weather-main-fields { padding:2px 0 4px; }
.location-editor-grid .manual-location { display:block; padding:15px; border-color:#42c6de64; background:#0a2237; }
.location-section-head h3 { margin:0 0 5px; font-size:16px; }
.location-section-head p { margin:0; font-size:12px; }
.location-editor-grid .manual-location-search { display:grid; grid-template-columns:minmax(0,1fr) auto; margin:14px 0 10px; }
.location-editor-grid .manual-location-search button { padding:8px 12px; }
.location-candidate { margin:12px 0; padding:12px 14px; border:1px solid #35cee878; border-radius:12px; background:#103a55;  color:#f8fbff; }
.location-candidate[hidden] { display:none; }
.location-candidate span,.location-candidate small { display:block; color:#b8d5e2; font-size:11px; }
.location-candidate strong { display:block; margin:5px 0; color:#fff; font-size:19px; }
.location-editor-grid .location-confirm-button { width:100%; min-height:46px; border-color:#3edcf6; background:linear-gradient(110deg,#10bdda,#1784df); color:#052036; font-size:14px; }
.location-editor-grid .location-confirm-button:disabled { opacity:.48; filter:grayscale(.5); }
.location-more { min-width:0; border:1px solid #ffffff26; border-radius:12px; background:#081a2b;  color:#f8fbff; }
.location-more>summary { padding:12px; color:#b9d7e5; font-size:12px; font-weight:800; cursor:pointer; }
.location-more[open]>summary { border-bottom:1px solid #ffffff24; }
.location-more .manual-coordinates,.location-extra { padding:12px; }
.location-more .manual-coordinates { margin:0; }
.location-extra { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.location-extra>.wide-field,.location-extra>.nearby-places { grid-column:1/-1; }
.location-extra .nearby-places { min-width:0; }
@media(max-width:520px) {
  .location-editor-grid .manual-location-search { grid-template-columns:minmax(0,1fr); }
  .location-editor-grid .manual-location-search button { width:100%; }
  .location-current input { font-size:15px; }
}
body:not(.mode-edit) .location-editor-grid .manual-location { display:none; }

/* Step 2: photo and one-touch filter at left, direct menu at right. */
.editor-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; align-content:start; padding:12px; overflow-y:auto; }
.editor-menu button { min-width:0; min-height:76px; padding:12px 9px; border:1px solid #58d0e479; border-radius:14px; background:linear-gradient(145deg,#113d5b,#0a2239); color:#fff; text-align:left; font:inherit; font-size:clamp(12px,3vw,16px); font-weight:900; cursor:pointer; }
.editor-menu button span { display:block; margin-top:6px; color:#bdd9e5; font-size:10px; font-weight:600; line-height:1.35; }
.editor-menu button:active { background:#17628a; }
.editor-menu button:last-child { grid-column:1/-1; }
.editor-filter-dock[hidden] { display:none; }
.editor-filter-dock { position:absolute; z-index:27; box-sizing:border-box; left:6px; top:var(--editor-photo-bottom,55%); width:calc(44% - 12px); padding:12px; border:1px solid #44cbe070; border-radius:15px; background:#0b253a; color:#fff; text-align:center; }
.editor-filter-dock strong { display:block; font-size:13px; }
.editor-filter-dock p,.editor-filter-dock small { display:block; margin:6px 0; color:#bdd5e1; font-size:10px; line-height:1.35; }
.editor-filter-dock button { width:100%; min-height:52px; padding:7px; border:1px solid #5ce8f8; border-radius:12px; background:linear-gradient(130deg,#0cbddc,#228bea); color:#042336; font:inherit; font-size:12px; font-weight:900; }
.result-editor-open:not(.editor-osd-open) #resultEditorDetails { display:none !important; }
body.editor-osd-open #resultEditorDetails[open] { position:fixed !important; z-index:910; top:calc(8vh + env(safe-area-inset-top)) !important; left:50% !important; right:auto !important; bottom:auto !important; width:min(600px,calc(100vw - 24px)) !important; max-height:calc(84dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; padding:0; transform:translateX(-50%); border:1px solid #55dbee; border-radius:18px; background:#0a1e31; box-shadow:0 0 0 100vmax #000b,0 24px 70px #000d; overflow-y:auto !important;  color:#f8fbff; }
body.editor-osd-open #resultEditorDetails>summary { padding:16px 88px 16px 16px; border:0; background:#123650; font-size:17px; }
body.editor-osd-open #editorOsdClose { position:sticky; float:right; z-index:2; top:6px; margin:-44px 10px 5px 0; padding:7px 10px; border:1px solid #6ad9ef; border-radius:9px; background:#09283d; color:#fff; font:inherit; font-size:12px; font-weight:850; }
body.editor-osd-open #resultEditorDetails .result-editor-tabs { display:none; }
body.editor-osd-open #resultEditorDetails .result-editor-scroll { padding:16px; overflow:visible; }
@media (orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .camera-active.capture-result-active.result-editor-open .editor-filter-dock { top:auto; bottom:9px; left:12px; width:calc(100% - var(--landscape-rail-width,34%) - 24px); }
}
@media (orientation:portrait) and (max-width:600px) {
  .editor-menu { gap:6px; padding:7px; }
  .editor-menu button { min-height:68px; padding:8px; }
  .result-editor-open .result-editor-head-actions { display:grid; grid-template-columns:1fr; }
  .editor-filter-dock { padding:8px; }
}
body.editor-osd-open:has(#resultBlurPanel:not([hidden])) #resultEditorDetails { right:6px !important; left:auto !important; width:calc(56% - 9px) !important; transform:none; box-shadow:0 16px 35px #000b; }
body.editor-osd-open:has(#resultStampPanel:not([hidden])) #resultEditorDetails { right:6px !important; left:auto !important; width:calc(56% - 9px) !important; transform:none; box-shadow:0 16px 35px #000b; }

/* Shared step 2/3 frame: title, progress/menu, two equal columns and two equal rows. */
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-title-bar:not([hidden]) {
  position:absolute; z-index:65; top:calc(8px + env(safe-area-inset-top)); left:8px; right:62px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:46px;
  color:#f3fbff; font-size:clamp(13px,3.6vw,19px); font-weight:900;
}
.workflow-title-bar span { color:#a8d5e4; font-size:clamp(10px,2.8vw,14px); white-space:nowrap; }
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps,
body.portrait-rail-layout.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps {
  top:calc(64px + env(safe-area-inset-top)); left:8px; right:64px; width:auto;
  height:48px; box-sizing:border-box; border-radius:13px;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .camera-menu-top-button,
body.portrait-rail-layout.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .camera-menu-top-button {
  top:calc(64px + env(safe-area-inset-top)); right:8px; left:auto; width:48px; height:48px;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .top-context-menu,
body.portrait-rail-layout.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .top-context-menu {
  top:calc(116px + env(safe-area-inset-top)); right:8px; left:auto; width:min(310px,calc(100vw - 16px));
}
.post-menu-open .top-context-shoot,.post-menu-open .top-context-edit { display:none !important; }
.post-menu-open .top-context-post { display:grid; gap:3px; }
.top-context-post { display:none; }
.top-context-post button { width:100%; min-height:43px; text-align:left; }
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .editor-filter-dock,
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .post-workspace:not([hidden]) {
  position:absolute; z-index:27; box-sizing:border-box; left:8px; top:var(--workspace-second-top); bottom:8px;
  width:calc(44% - 12px); height:auto; padding:12px; border:1px solid #4bc6dc66; border-radius:16px; background:#0c2337; color:#fff;
}
.post-workspace[hidden] { display:none; }
.post-workspace strong { display:block; font-size:15px; }
.post-workspace p { color:#b6d0dd; font-size:12px; line-height:1.5; }
.post-workspace button { width:100%; min-height:44px; border:1px solid #4dd4eb; border-radius:10px; background:#123d58; color:#fff; font:inherit; font-weight:850; }
.camera-active.capture-result-active.result-editor-open .result-editor-panel,
body.portrait-rail-layout.camera-active.capture-result-active.result-editor-open .result-editor-panel,
.camera-active.post-menu-open .result-panel,
body.portrait-rail-layout.camera-active.post-menu-open .result-panel {
  position:absolute !important; z-index:30; top:var(--workspace-top) !important; right:8px; bottom:auto !important; left:auto !important;
  width:calc(56% - 12px); height:var(--workspace-row-height); max-height:none; margin:0;
  box-sizing:border-box; border:1px solid #4bc6dc66; border-radius:16px; background:#0c2337; overflow:auto;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-next-dock:not([hidden]) {
  position:absolute; z-index:33; right:8px; top:var(--workspace-second-top); bottom:8px;
  width:calc(56% - 12px); box-sizing:border-box; padding:12px; border:1px solid #4bc6dc66; border-radius:16px; background:#0c2337;
  display:flex; align-items:flex-end;
}
.workflow-next-dock[hidden] { display:none; }
.workflow-next-dock button { width:100%; min-height:58px; border:1px solid #5ee7f8; border-radius:12px; background:linear-gradient(120deg,#16c3e4,#2389df); color:#052338; font:inherit; font-size:15px; font-weight:900; }
.post-menu-open #postAdvancedDetails,.post-menu-open #blueskyPostButton { display:none !important; }
.post-menu-open #resultPanel .post-composer { padding:8px; }
.post-menu-open #resultPanel .post-menu-head { display:none; }
.post-menu-open #resultPanel .post-composer-head { display:none; }
.post-menu-open #resultPanel textarea { min-height:95px; }
.editor-osd-preview { display:none; }
body.editor-osd-open #resultEditorDetails[open] { display:flex !important; flex-direction:column; height:calc(90dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; max-height:none !important; top:calc(5dvh + env(safe-area-inset-top)) !important;  color:#f8fbff; }
body.editor-osd-open #resultEditorDetails .editor-osd-preview { display:flex; flex:1 1 50%; min-height:0; align-items:center; justify-content:center; padding:8px; background:#020b16; }
.editor-osd-preview img { width:100%; height:100%; object-fit:contain; }
body.editor-osd-open #resultEditorDetails .result-editor-scroll { flex:1 1 50%; min-height:0; overflow-y:auto; padding:14px; }
.post-feature-osd[hidden] { display:none; }
.post-feature-osd { position:fixed; z-index:950; inset:0; display:flex; align-items:center; justify-content:center; padding:calc(5dvh + env(safe-area-inset-top)) 12px calc(5dvh + env(safe-area-inset-bottom)); background:#000c; }
.feature-osd-card { display:flex; flex-direction:column; width:min(620px,100%); height:100%; min-height:0; overflow:hidden; border:1px solid #5bd6eb; border-radius:18px; background:#0b2134; color:#fff; }
.feature-osd-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px; }
.feature-osd-heading button { min-height:36px; border:1px solid #6bd8ec; border-radius:9px; background:#123d55; color:#fff; font:inherit; }
.feature-osd-preview { display:flex; flex:1 1 50%; min-height:0; align-items:center; justify-content:center; padding:8px; background:#020b16; }
.feature-osd-preview img { width:100%; height:100%; object-fit:contain; }
.feature-osd-content { flex:1 1 50%; min-height:0; overflow-y:auto; padding:14px; }
.feature-osd-content > * { display:block; width:100%; box-sizing:border-box; }
.feature-osd-content details[open] > summary { margin-bottom:8px; }
.camera-active.post-menu-open .result-panel,body.portrait-rail-layout.camera-active.post-menu-open .result-panel { position:fixed !important; }
@media (orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .editor-filter-dock,
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .post-workspace:not([hidden]) { left:8px; top:var(--workspace-second-top); bottom:8px; width:calc(100% - var(--landscape-rail-width,48%) - 16px); }
  .camera-active.capture-result-active.result-editor-open .result-editor-panel,
  .camera-active.post-menu-open .result-panel,
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-next-dock:not([hidden]) { right:8px; width:calc(var(--landscape-rail-width,48%) - 12px); }
}
.result-editor-open .editor-menu { display:none; }
.result-editor-open .result-editor-head-actions { display:none; }
.editor-workspace-intro { margin:12px; padding:14px; border:1px solid #42d4ec6b; border-radius:12px; background:#123550; color:#fff; }
.editor-workspace-intro strong { font-size:15px; }
.editor-workspace-intro p { margin:8px 0 0; color:#c4dce7; font-size:12px; line-height:1.5; }
.workflow-next-dock button:disabled { opacity:.48; filter:grayscale(.6); }
.preview-quadrant { display:none; }
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .preview-quadrant {
  display:block; position:absolute; z-index:1; top:var(--workspace-top); left:8px;
  width:calc(44% - 12px); height:var(--workspace-row-height); box-sizing:border-box;
  border:1px solid #4bc6dc66; border-radius:16px; background:#081b2d;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .stage { z-index:2; }
@media (orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .preview-quadrant { width:calc(100% - var(--landscape-rail-width,48%) - 16px); }
}

/* Full-screen live camera with two focused menus. */
.camera-exit-top,.camera-location-top { display:none; }
.camera-location-osd[hidden] { display:none; }
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-card { padding:0; }
.camera-active:not(.mode-edit):not(.capture-result-active) .stage.has-video { max-width:none; max-height:none; border-radius:0; box-shadow:none; }
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-menu-top-button,
.camera-active:not(.mode-edit):not(.capture-result-active) .workflow-steps { display:none !important; }
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-exit-top,
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-location-top,
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-menu-button {
  position:absolute; z-index:72; top:calc(12px + env(safe-area-inset-top)); bottom:auto; margin:0;
  display:flex; align-items:center; justify-content:center; min-height:46px;
  border:1px solid #63dcf0; border-radius:999px; background:#092439dc; color:#fff;
  font:inherit; font-size:clamp(11px,3vw,14px); font-weight:900; box-shadow:0 4px 18px #0009;
}
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-exit-top { left:10px; width:46px; font-size:25px; }
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-menu-button { right:10px; left:auto; width:clamp(85px,25vw,130px); padding:0 8px; }
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-location-top { right:calc(20px + clamp(85px,25vw,130px)); width:clamp(78px,23vw,120px); padding:0 6px; }
.camera-active:not(.mode-edit):not(.capture-result-active) .capture-bar:not([hidden]) {
  bottom:0; height:calc(136px + env(safe-area-inset-bottom)); padding:16px 16px calc(12px + env(safe-area-inset-bottom));
  background:#06101cf2;
}
.camera-active:not(.mode-edit):not(.capture-result-active).camera-menu-open .control-panel {
  top:calc(76px + env(safe-area-inset-top)); bottom:auto; left:50%; width:min(560px,calc(100% - 24px));
  max-height:calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  transform:translateX(-50%); border:1px solid #59d5e8; border-radius:18px; background:#071d30eb; backdrop-filter:blur(14px);
}
.camera-active:not(.mode-edit):not(.capture-result-active).camera-menu-open .camera-menu-backdrop { background:#0005; }
.camera-location-osd { position:fixed; z-index:230; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:calc(76px + env(safe-area-inset-top)) 12px 12px; background:#0008; }
.camera-location-card { width:min(560px,100%); max-height:calc(100dvh - 92px - env(safe-area-inset-top)); overflow-y:auto; padding:18px; border:1px solid #59d5e8; border-radius:18px; background:#071d30ef; color:#fff; box-shadow:0 16px 50px #000c; backdrop-filter:blur(14px); }
.camera-location-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.camera-location-card h2 { margin:0; font-size:19px; }
.camera-location-card header button,.camera-location-card .camera-location-button { min-height:44px; border:1px solid #59d5e8; border-radius:11px; background:#113c59; color:#fff; font:inherit; font-weight:850; }
.camera-location-card .camera-location-button { width:100%; margin:12px 0; }
.camera-location-card p { color:#c6dce8; line-height:1.55; font-size:13px; }

/* Gourmet-style workflow cards, in Aozora's sky palette. */
body:not(.camera-active) { background:linear-gradient(160deg,#d4e8f2,#edf6f7 52%,#d6e7ef); color:#173c52; }
body:not(.camera-active) .topbar { margin-bottom:7px; padding:8px 10px; border:1px solid #b0cbd8; border-radius:17px; background:#fffefaee; box-shadow:0 5px 18px #27506917; }
body:not(.camera-active) .topbar h1 { color:#164b69; }
body:not(.camera-active) .topbar .eyebrow { color:#377c9d; }
body:not(.camera-active) .topbar .icon-button { border-color:#91bacb; background:#e7f5f9; color:#125477; }
body:not(.camera-active) .status-strip { padding:7px 10px; border:1px solid #b0cbd8; border-radius:12px; background:#fffefaee; }
body:not(.camera-active) .status-text,body:not(.camera-active) .status-version { color:#3c6073; }
body:not(.camera-active) .camera-card { border-color:#a8c9d8; background:#fffefa; box-shadow:0 12px 30px #27506923; }
body:not(.camera-active) .camera-start-overlay { background:linear-gradient(145deg,#eff9fbf8,#d7ebf4fb); color:#154765; }
body:not(.camera-active) .camera-start-overlay>p:not(.eyebrow) { color:#52748a; }
body:not(.camera-active) .camera-start-overlay .quick-camera-button { border-radius:12px; box-shadow:0 4px 12px #23749749; }
body:not(.camera-active) .camera-start-overlay .mode-button { border:1px solid #93bbca; background:#fffefa; color:#174765; }
body:not(.camera-active) .camera-start-overlay .mode-button span { color:#52748a; }
body:not(.camera-active) .camera-start-overlay .bluesky-settings-shortcut { border-color:#93bbca; background:#e9f5fa; color:#144e6c; }
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .camera-card {
  background:linear-gradient(155deg,#d5eaf2 0%,#f4f9f8 58%,#d9e9ef 100%);
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-title-bar:not([hidden]) {
  top:calc(6px + env(safe-area-inset-top)); left:8px; right:8px; height:52px;
  justify-content:flex-start; color:#103e59;
}
.workflow-title-bar img { width:46px; height:46px; object-fit:contain; }
.workflow-title-bar div { display:grid; gap:2px; min-width:0; }
.workflow-title-bar strong { font-size:clamp(16px,4.5vw,21px); line-height:1.1; }
.workflow-title-bar span { font-size:11px; color:#35627a; }
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps,
body.portrait-rail-layout.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps {
  border:0; background:transparent; padding:0; gap:6px; backdrop-filter:none;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps button,
body.portrait-rail-layout.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps button {
  border:1px solid #9ebfcf; border-radius:11px; background:#fffefa; color:#305b70;
  font-weight:900; box-shadow:0 2px 6px #284c6316;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-steps button[aria-current="step"] {
  border-color:#188fba; background:#167ead; color:#fff; box-shadow:none;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .camera-menu-top-button {
  border-color:#8ab6c8; border-radius:11px; background:#fffefa; color:#0f5272;
  box-shadow:0 2px 6px #284c6316;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .camera-menu-top-button span { color:#126d96; }
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .preview-quadrant,
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .editor-filter-dock,
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .post-workspace:not([hidden]),
.camera-active.capture-result-active.result-editor-open .result-editor-panel,
.camera-active.post-menu-open .result-panel,
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-next-dock:not([hidden]) {
  border:1px solid #9ebfcf; border-radius:17px; background:#fffefa; color:#16415a;
  box-shadow:0 6px 20px #23486119;
}
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .stage {
  border-radius:13px; box-shadow:0 3px 10px #0c395943;
}
.camera-active.capture-result-active.result-editor-open .result-editor-panel { display:flex; flex-direction:column; }
.result-editor-open .editor-menu { display:grid; grid-template-columns:minmax(0,1fr); flex:1; padding:7px 12px 12px; overflow-y:auto; }
.result-editor-open .editor-menu button { min-height:46px; padding:7px 12px; border:1px solid #8bb7c9; border-radius:10px; background:#ebf6fa; color:#114b69; font-size:13px; }
.result-editor-open .editor-menu button:last-child { grid-column:auto; }
.result-editor-open .editor-menu button span { margin-top:1px; color:#52758a; font-size:10px; }
.result-editor-open .editor-menu button:active { background:#d2eff8; }
.result-editor-open .result-editor-head { padding:10px 12px 3px; }
.result-editor-open .result-editor-head h2 { color:#143f5a; font-size:16px; }
.result-editor-open .result-editor-head .eyebrow { color:#357292; }
.result-editor-open .quick-finish-status { color:#346278; background:transparent; padding:3px 12px; font-size:11px; }
.result-editor-open .editor-workspace-intro { margin:7px 12px 4px; padding:9px; border:0; background:#e5f4fa; color:#16415a; }
.result-editor-open .editor-workspace-intro p { margin-top:3px; color:#52758a; }
.editor-filter-dock strong,.post-workspace strong { color:#104769; font-size:15px; }
.editor-filter-dock p,.editor-filter-dock small,.post-workspace p { color:#54758a; }
.camera-active.capture-result-active.result-editor-open .editor-filter-dock { display:flex; flex-direction:column; justify-content:center; gap:4px; }
.camera-active.capture-result-active.result-editor-open .editor-filter-dock button { min-height:48px; }
.camera-active.post-menu-open .result-panel { padding:10px; }
.camera-active.post-menu-open .result-panel .post-composer { border:0; background:transparent; box-shadow:none; padding:0; }
.camera-active.post-menu-open .result-panel .post-composer h3,
.camera-active.post-menu-open .result-panel .post-composer label { color:#16415a; }
.camera-active.post-menu-open .post-workspace:not([hidden]) { display:flex; flex-direction:column; justify-content:center; }
.camera-active.post-menu-open .post-workspace button { background:#e6f4fa; color:#104f72; }
.camera-active.post-menu-open .portrait-post-preview,
body.portrait-rail-layout.post-menu-open > .portrait-post-preview { display:none !important; }
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-next-dock:not([hidden]) { align-items:center; }
.camera-active.capture-result-active:is(.result-editor-open,.post-menu-open) .workflow-next-dock button { border-color:#117daf; background:linear-gradient(115deg,#19bde4,#188add); color:#062b43; font-size:clamp(13px,3.5vw,18px); }

/* Keep the framing and weather text clear while shooting. */
.live-zoom-button[hidden],.live-zoom-control[hidden] { display:none !important; }
.camera-active:not(.mode-edit):not(.capture-result-active) .live-zoom-button:not([hidden]) {
  position:absolute; z-index:2; top:6px; left:12px; min-width:57px; min-height:44px;
  padding:3px 9px; border:1px solid #65d7ed; border-radius:999px;
  background:#102b40d9; color:#fff; font:inherit; font-size:12px; font-weight:900;
}
.camera-active:not(.mode-edit):not(.capture-result-active) .live-zoom-button[aria-expanded="true"] { background:#137eab; }
@media (orientation:portrait), (max-width:599px) {
  .camera-active:not(.mode-edit):not(.capture-result-active) .capture-bar:not([hidden]) { align-items:flex-end; }
}
.camera-active:not(.mode-edit):not(.capture-result-active) .live-zoom-control:not([hidden]) {
  position:absolute; z-index:73; top:auto; right:auto; bottom:calc(140px + env(safe-area-inset-bottom)); left:50%;
  width:min(390px,calc(100% - 24px)); transform:translateX(-50%);
}
@media (orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .camera-active:not(.mode-edit):not(.capture-result-active) .live-zoom-control:not([hidden]) {
    top:auto; right:12px; bottom:calc(122px + env(safe-area-inset-bottom)); left:auto;
    width:min(330px,calc(34% - 24px)); transform:none;
  }
}

/* The current Gourmet workflow keeps the complete photo visible between actions. */
.camera-active.capture-result-active.focus-workflow .preview-quadrant,
.camera-active.capture-result-active.focus-workflow .editor-filter-dock,
.camera-active.capture-result-active.focus-workflow .post-workspace,
.camera-active.capture-result-active.focus-workflow .result-editor-panel,
.camera-active.capture-result-active.focus-workflow .result-panel { display:none !important; }
.camera-active.capture-result-active.focus-workflow .stage {
  max-width:calc(100% - 20px); max-height:none; border-radius:15px;
  box-shadow:0 9px 26px #1a4b6766;
}
.camera-active.capture-result-active.focus-workflow .workflow-next-dock:not([hidden]) {
  position:absolute; z-index:35; top:auto; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); left:8px;
  width:auto; height:72px; padding:7px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);
  align-items:stretch; gap:8px; background:#fffefa; border-color:#9ebfcf;
}
.camera-active.capture-result-active.focus-workflow .workflow-next-dock button { min-height:0; height:100%; }
.camera-active.capture-result-active.focus-workflow #workflowQuickButton {
  border:2px solid #91b7c8; border-radius:11px; background:#eaf6fa; color:#174967;
  font-size:clamp(12px,3vw,16px);
}
.camera-active.capture-result-active.focus-workflow.post-menu-open .portrait-post-preview,
body.focus-workflow.post-menu-open > .portrait-post-preview {
  display:flex !important; flex-direction:column; position:absolute; z-index:25; right:8px; left:8px;
  bottom:auto; width:auto !important; min-height:0; max-height:none; box-sizing:border-box;
  padding:13px 15px; overflow-y:auto; border:1px solid #a6c6d4; border-radius:14px;
  background:#fffefa; color:#184762; box-shadow:0 4px 15px #2449611e;
}
body.focus-workflow.post-menu-open .portrait-post-preview b { flex:none; color:#145d83; font-size:13px; }
body.focus-workflow.post-menu-open .portrait-post-preview pre { flex:1; min-height:0; overflow-y:auto; margin:10px 0; color:#173e55; font-size:13px; }
body.focus-workflow.post-menu-open .portrait-post-preview .form-status { flex:none; margin:0; color:#597385; }
/* Posting is a workflow page, so its old modal backdrop must not capture taps. */
body.focus-workflow.post-menu-open .post-menu-backdrop { display:none; }
body.focus-workflow .top-context-menu:not([hidden]) { z-index:220; }

/* Menus rise from the bottom; the photo stays visible in the upper half. */
body.focus-workflow.editor-osd-open #resultEditorDetails[open],
body.focus-workflow.editor-osd-open:has(#resultBlurPanel:not([hidden])) #resultEditorDetails[open],
body.focus-workflow.editor-osd-open:has(#resultStampPanel:not([hidden])) #resultEditorDetails[open] {
  position:fixed !important; z-index:910; top:auto !important; right:8px !important;
  bottom:calc(8px + env(safe-area-inset-bottom)) !important; left:8px !important;
  width:min(720px,calc(100% - 16px)) !important; height:min(50dvh,540px) !important;
  max-height:none !important; margin:0 auto; transform:none !important;
  border-radius:19px; box-shadow:0 0 0 100vmax #0006,0 14px 42px #0009;
}
body.focus-workflow.editor-osd-open #resultEditorDetails .editor-osd-preview { display:none !important; }
body.focus-workflow.editor-osd-open #resultEditorDetails .result-editor-scroll {
  display:block; flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px;
}
body.focus-workflow .post-feature-osd { align-items:flex-end; padding:0 8px calc(8px + env(safe-area-inset-bottom)); background:#0006; }
body.focus-workflow .post-feature-osd .feature-osd-card { width:min(720px,100%); height:min(50dvh,540px); border-radius:19px; }
body.focus-workflow .post-feature-osd .feature-osd-preview { display:none; }
body.focus-workflow .post-feature-osd .feature-osd-content { flex:1 1 auto; padding:14px; }
body.focus-workflow #postTextEditor label { display:block; color:#e7f5fb; font-size:14px; font-weight:800; }
body.focus-workflow #postTextEditor textarea { display:block; width:100%; min-height:115px; margin-top:8px; padding:12px; border:1px solid #70bace; border-radius:10px; background:#071829; color:#fff; font:inherit; font-size:16px; }
body.focus-workflow #postTextEditor .template-variable-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:none; overflow:visible; }
body.focus-workflow #postTextEditor .template-variable-buttons button { min-width:0; min-height:42px; border-radius:10px; padding:7px; text-align:left; }
@media (max-height:590px) {
  .camera-active.capture-result-active.focus-workflow .workflow-title-bar:not([hidden]) { height:42px; }
  body.focus-workflow.editor-osd-open #resultEditorDetails[open],body.focus-workflow .post-feature-osd .feature-osd-card { height:min(54dvh,360px) !important; }
}
@media (max-height:500px) {
  .camera-active.capture-result-active.focus-workflow .workflow-next-dock:not([hidden]) { height:53px; padding:5px; }
  body.focus-workflow.post-menu-open .portrait-post-preview { padding:7px 10px; }
}

/* One posting action area: keep the old completed-photo controls out of step 3. */
body.camera-active.focus-workflow.post-menu-open .result-action-bar { display:none !important; }
.workflow-post-readiness[hidden] { display:none !important; }
body.camera-active.focus-workflow.post-menu-open .workflow-next-dock:not([hidden]) {
  height:136px; grid-template-rows:48px minmax(0,1fr); padding:8px; gap:8px;
}
.workflow-post-readiness { grid-column:1/-1; display:flex; align-items:center; gap:8px; min-width:0; }
.workflow-post-readiness p { flex:1; min-width:0; max-height:44px; margin:0; overflow-y:auto; color:#214f69; font-size:12px; line-height:1.5; }
body.camera-active.focus-workflow .workflow-post-readiness button { flex:none; width:auto; height:40px; padding:5px 10px; background:#eaf6fa; color:#174967; border:1px solid #91b7c8; font-size:12px; }
body.camera-active.focus-workflow.post-menu-open #workflowNextButton { color:#fff; font-size:17px; background:#087eb1; }
body.camera-active.focus-workflow.post-menu-open #workflowNextButton:disabled { opacity:1; background:#dae5ea; color:#597385; filter:none; }
body.focus-workflow.post-menu-open #portraitPostFeedback { flex:none; max-height:40%; overflow-y:auto; margin:6px 0 0; padding:7px; border-radius:7px; background:#e6f4fa; color:#175174; font-size:12px; line-height:1.5; }
body.focus-workflow.post-menu-open #portraitPostFeedback.error { background:#fff0ec; color:#9b3020; }
body.focus-workflow.post-menu-open #portraitPostFeedback[hidden] { display:none; }
@media (max-height:500px) {
  body.camera-active.focus-workflow.post-menu-open .workflow-next-dock:not([hidden]) { height:100px; grid-template-rows:32px minmax(0,1fr); padding:5px; gap:5px; }
  .workflow-post-readiness p { max-height:30px; font-size:10px; }
  body.camera-active.focus-workflow .workflow-post-readiness button { height:30px; }
  body.camera-active.focus-workflow.post-menu-open #workflowNextButton { font-size:13px; }
}

/* 明るいトップ背景では、見出しも濃い文字色にする。 */
body:not(.camera-active) .camera-start-overlay .mode-button b {color:#174765;}
body:not(.camera-active) .camera-start-overlay .mode-button span {color:#365b70;}

#missingTakenAtDialog input {display:block;width:100%;min-width:0;box-sizing:border-box;margin-top:10px;padding:14px;font-size:16px;color:#173e55;background:#fff;border:1px solid #91b7c8;border-radius:10px;}

/* Dark introduction cards keep their headings readable in the light page theme. */
.about-aozora h2,.about-aozora h3,.about-aozora .function-list b { color:#f8fbff; }

/* Text on the dark install banner must not inherit the light page text. */
.pwa-banner b { color:#f8fbff; }
.pwa-banner span,.pwa-banner .pwa-close { color:#c6d9e7; }
.about-aozora { color:#f8fbff; }

/* Live preview and camera controls share one orientation-aware layout. */
.camera-active:not(.mode-edit):not(.capture-result-active) .camera-card {
  --camera-safe-left:env(safe-area-inset-left,0px);
  --camera-safe-right:env(safe-area-inset-right,0px);
  --camera-safe-top:env(safe-area-inset-top,0px);
  --camera-safe-bottom:env(safe-area-inset-bottom,0px);
}
@media (orientation:landscape) and (min-width:600px) {
  .camera-active:not(.mode-edit):not(.capture-result-active) .capture-bar:not([hidden]) {
    top:124px; bottom:calc(8px + env(safe-area-inset-bottom)); left:auto;
    right:env(safe-area-inset-right); width:var(--live-rail-width,140px); height:auto;
    transform:none; display:grid; grid-template-columns:1fr 1fr;
    align-content:center; justify-items:center; align-items:center; gap:14px 8px; padding:8px;
  }
  .camera-active:not(.mode-edit):not(.capture-result-active) .capture-bar .shutter {
    grid-column:1 / -1; grid-row:1; width:86px; height:86px;
  }
  .camera-active:not(.mode-edit):not(.capture-result-active) .capture-bar .secondary { width:42px; height:42px; }
  .camera-active:not(.mode-edit):not(.capture-result-active) .live-zoom-button:not([hidden]) {
    top:76px; bottom:auto; left:auto; right:calc(32px + env(safe-area-inset-right)); min-height:40px;
  }
  .camera-active:not(.mode-edit):not(.capture-result-active) .live-zoom-control:not([hidden]) {
    top:76px; bottom:auto; right:calc(12px + env(safe-area-inset-right)); width:min(330px,calc(100% - 90px));
  }
  .camera-active:not(.mode-edit):not(.capture-result-active) .camera-exit-top { left:calc(10px + env(safe-area-inset-left)); }
  .camera-active:not(.mode-edit):not(.capture-result-active) .camera-menu-button { right:calc(10px + env(safe-area-inset-right)); }
  .camera-active:not(.mode-edit):not(.capture-result-active) .camera-location-top { right:calc(20px + env(safe-area-inset-right) + clamp(85px,25vw,130px)); }
}

.failed-post-save[hidden] { display:none !important; }
.failed-post-save { flex:none; display:flex; align-items:center; gap:10px; margin-top:8px; }
.failed-post-save button { flex:none; min-height:44px; padding:8px 12px; border:1px solid #147ba6; border-radius:10px; background:#e5f5fb; color:#144e68; font:inherit; font-weight:800; }
.failed-post-save small { color:#365b70; font-size:11px; line-height:1.4; }

.post-failure-details[hidden] { display:none !important; }
.post-failure-details { flex:none; max-height:145px; overflow:auto; margin-top:8px; padding:8px 10px; border:1px solid #d99b94; border-radius:10px; background:#fff0ed; color:#85392e; }
.post-failure-details summary { cursor:pointer; font-size:12px; font-weight:800; }
.post-failure-details pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.5 sans-serif; margin:8px 0 0; color:#71362f !important; }
.bluesky-post-result.error { white-space:pre-wrap; overflow-wrap:anywhere; }