.pwa-banner { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:12px 14px; border:1px solid #22d5fa55; border-radius:16px; background:linear-gradient(135deg,#12395ee8,#081a2ee8); box-shadow:0 12px 35px #0004; }
.pwa-banner[hidden] { display:none; }
.pwa-banner img { width:42px; height:42px; border-radius:10px; }
.pwa-banner div { flex:1; min-width:0; }
.pwa-banner b, .pwa-banner span { display:block; }
.pwa-banner b { font-size:13px; }
.pwa-banner span { margin-top:3px; color:#9db0c5; font-size:10px; }
.pwa-banner button { border:0; border-radius:10px; padding:9px 12px; background:var(--cyan); color:#001628; font-weight:900; white-space:nowrap; }
.pwa-banner .pwa-close { width:28px; padding:7px 0; color:#9db0c5; background:transparent; }
.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; }
.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; }
.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-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; }
  .help-dialog-header { min-height:76px; padding:14px 14px 12px; }
  .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; }
}
@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 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}
.exposure-warning{inset:0;opacity:0}.exposure-warning.has-highlights{opacity:1;border:5px dashed #ff2d2dc7}.exposure-warning.has-shadows{opacity:1;box-shadow:inset 0 0 0 8px #2878ff80}
.capture-options,.output-quality-panel,.image-adjust-panel{display:grid;gap:12px;margin-top:14px;padding:14px;border-radius:18px;background:#0310208a}.capture-options{grid-template-columns:1fr 1fr}
.capture-options label,.output-quality-panel label,.image-adjust-panel label{display:grid;gap:7px;font-weight:800;color:#dceafa}.image-adjust-panel h3{margin:0;color:#fff;font-size:1rem}.image-adjust-panel label:not(.check-field){grid-template-columns:7em 1fr 3em;align-items:center}.camera-controls label{display:grid;gap:7px}
.shutter{position:relative}.shutter[data-countdown]::after{content:attr(data-countdown);position:absolute;inset:0;display:grid;place-items:center;color:#07192f;font-size:2.2rem;font-weight:950}
@media(max-width:560px){.capture-options{grid-template-columns:1fr}.image-adjust-panel label:not(.check-field){grid-template-columns:6em 1fr 2em}}

/* The completed image replaces the live preview in the same frame. */
.stage #resultImage { position:absolute; inset:0; z-index:4; width:100%; height:100%; object-fit:cover; display:none; background:#02070d; }
.stage.has-result #resultImage { display:block; }
.stage.has-result video,
.stage.has-result #photoSource,
.stage.has-result .preview-overlay,
.stage.has-result .guide-lines,
.stage.has-result .empty-state,
.stage.has-result .large-pick-button,
.stage.has-result .camera-start-overlay { display:none; }
.live-overlay-canvas { position:absolute; z-index:8; inset:0; display:none; width:100%; height:100%; pointer-events:none; }
.stage.has-video .live-overlay-canvas,.stage.has-photo .live-overlay-canvas { display:block; }
.stage.has-result .live-overlay-canvas { display:none; }
.legacy-preview-overlay { display:none !important; }
.stage.has-result ~ .camera-osd { display:none; }
.result-action-bar { padding:14px 16px 16px; border-top:1px solid #ffffff17; background:linear-gradient(180deg,#0a2038,#07172a); }
.result-action-bar[hidden] { display:none; }
.result-action-bar>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.result-action-bar b { font-size:14px; }
.result-action-bar span { color:#8fa5ba; font-size:10px; text-align:right; }
.result-action-bar .action-row { margin-top:10px; }
.app-version { margin:18px 0 0; color:#6f869e; font-size:10px; font-weight:800; letter-spacing:.08em; text-align:center; }
.scroll-top-button { position:fixed; z-index:80; right:calc(14px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); min-width:76px; min-height:48px; border:1px solid #65e8ff80; border-radius:999px; padding:0 16px; background:#071726e8; color:#fff; font-size:13px; font-weight:900; box-shadow:0 10px 32px #0009; backdrop-filter:blur(12px); }
.scroll-top-button span { margin-right:5px; color:var(--cyan); font-size:18px; }
.scroll-top-button[hidden],.camera-active .scroll-top-button { display:none !important; }
.camera-controls { display:flex; align-items:center; gap:10px; padding:0 16px 14px; }
.camera-controls[hidden],.camera-controls label[hidden],.camera-controls button[hidden] { display:none; }
.camera-controls label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; flex:1; color:#b5c7d8; font-size:11px; font-weight:800; }
.camera-controls input { min-width:0; accent-color:var(--cyan); }
.camera-controls select { display:block; width:100%; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.camera-controls output { width:3.2em; color:#dff8ff; text-align:right; }
.camera-controls button { padding:9px 12px; white-space:nowrap; }
.live-zoom-control { display:none; }
.camera-active .live-zoom-control:not([hidden]) { position:absolute; z-index:27; left:50%; bottom:calc(166px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:auto minmax(110px,1fr) auto; align-items:center; gap:10px; width:min(390px,calc(100% - 32px)); min-height:48px; padding:9px 14px; transform:translateX(-50%); border:1px solid #ffffff26; border-radius:16px; background:#071726dc; color:#fff; font-size:12px; font-weight:900; box-shadow:0 10px 28px #0008; backdrop-filter:blur(12px); }
.live-zoom-control input { width:100%; min-width:0; accent-color:var(--cyan); }
.live-zoom-control output { width:3.4em; color:#dff8ff; text-align:right; }
.capture-bar[hidden] { display:none; }
.camera-menu-button,.camera-menu-head,.camera-menu-backdrop { display:none; }
.camera-menu-button { align-items:center; justify-content:center; gap:7px; border:1px solid #ffffff2c; border-radius:13px; background:#071726; color:#fff; font-size:14px; font-weight:900; }
.camera-menu-button span { color:var(--cyan); }
.camera-menu-head { align-items:center; justify-content:space-between; gap:14px; }
.camera-menu-head h2 { margin:2px 0 0; font-size:20px; }
.camera-menu-close { min-height:44px; border:1px solid #ffffff2c; border-radius:12px; padding:0 14px; background:#ffffff0c; color:#fff; font-weight:900; }
.camera-menu-close span { color:var(--cyan); }
.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; }
.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; }
.template-variable-tools { margin-top:9px; padding:10px; border:1px solid #25d5f03b; border-radius:12px; background:#061827; }
.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:32px; border:1px solid #44dff05c; border-radius:999px; padding:5px 9px; background:#0b3150; color:#dffaff; font-size:9px; 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; }
.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; }
.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 { min-width:0; }
.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; }
.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; }
.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; }
.settings-group>summary { position:relative; padding:14px 42px 14px 14px; color:#fff; font-size:14px; font-weight:900; cursor:pointer; list-style:none; }
.settings-group>summary::-webkit-details-marker { display:none; }
.settings-group>summary:after { content:'＋'; position:absolute; right:15px; color:var(--cyan); font-size:18px; }
.settings-group[open]>summary { border-bottom:1px solid #ffffff17; }
.settings-group[open]>summary:after { content:'−'; }
.settings-group-body { padding:12px; }
.settings-group-body .camera-osd { margin:0 0 10px; border:1px solid #ffffff17; border-radius:12px; }
.settings-group-body .photo-filter-panel,.settings-group-body .bluesky-connect { margin-top:10px; }
.camera-menu-open .camera-menu-backdrop,.post-menu-open .post-menu-backdrop { position:fixed; z-index:190; inset:0; display:block; width:100%; height:100%; border:0; background:#0009; }
.camera-menu-open .control-panel,.post-menu-open .result-panel { position:fixed; z-index:200; left:50%; right:auto; bottom:0; display:block !important; width:min(100%,720px); max-height:min(78dvh,760px); margin:0; padding:0 16px calc(18px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; transform:translateX(-50%); border:1px solid #ffffff26; border-bottom:0; border-radius:24px 24px 0 0; background:#071726f8; box-shadow:0 -24px 70px #000c; -webkit-overflow-scrolling:touch; }
.camera-menu-open .camera-menu-head,.post-menu-open .post-menu-head { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; margin:0 -16px 12px; padding:14px 16px 12px; border-bottom:1px solid #ffffff18; background:#071726fc; }
.post-menu-backdrop { display:none; }
body:not(.camera-menu-open) .control-panel { display:none; }
body:not(.post-menu-open) .result-panel { display:none !important; }
.post-menu-open .post-composer { margin-top:0; }
.post-menu-open .post-composer-head { margin-bottom:4px; }
.post-menu-open .result-head h2 { margin:2px 0 0; }
.camera-active.capture-result-active .capture-bar,.camera-active.capture-result-active .camera-menu-button,.camera-active.capture-result-active .live-zoom-control { display:none !important; }
.camera-active.capture-result-active .result-action-bar { position:absolute; z-index:28; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); display:block !important; padding:12px; border:1px solid #ffffff22; border-radius:18px; background:#071726ee; box-shadow:0 14px 42px #000b; backdrop-filter:blur(12px); }
.camera-active.capture-result-active .result-action-bar>div:first-child { display:none; }
.camera-active.capture-result-active .result-action-bar .action-row { margin:0; }
.camera-active.capture-result-active .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; }
.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;
  }
}

.food-entry { display:block; width:min(100%,320px); padding:10px 12px; border:1px solid #ffffff88; border-radius:12px; color:white; background:#07192fbb; font-size:12px; text-decoration:none; }
.food-entry span { display:block; font-size:15px; font-weight:800; }