:root { color-scheme:dark; font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif; background:#111b29; color:#fff4e9; }
.oauth-notice { padding:12px 14px; border:1px solid #f0c478; border-radius:12px; color:#fff0cb; background:#513c1c; }
.oauth-notice[hidden] { display:none; }
.app [hidden] {display:none!important;}
.app.editing .choices button {min-height:64px;touch-action:manipulation;}
.app.editing .choices button:focus-visible {outline:3px solid #ed796b;outline-offset:2px;}
.app.editing {height:100vh;height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));}
.app.editing header {flex:none;margin:0 0 7px;gap:10px;}
.app.editing header small {display:none;}
.app.editing h1 {font-size:clamp(16px,4vw,22px);}
.app.editing .steps {flex:none;margin-bottom:9px;}
.app.editing .steps button {padding:6px 2px;}
.app.editing .oauth-notice {flex:none;max-height:68px;overflow:auto;margin:2px 0 9px;font-size:12px;}
.app.editing .preview {position:relative;top:auto;flex:none;margin:0 auto;width:min(100%,480px,26dvh)!important;box-shadow:0 8px 24px #0009;}
.app.editing .preview[data-shape="landscape"] {width:min(100%,620px,55dvh)!important;}
.app.editing .preview[data-shape="square"] {width:min(100%,480px,34dvh)!important;}
.app.editing .panel:not([hidden]) {flex:1;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:hidden;margin-top:10px;padding-bottom:0;}
.app.editing .panel-scroll {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 2px 10px;}
.app.editing .panel .buttons {position:relative!important;bottom:auto!important;z-index:1;flex:none;margin:0 -18px!important;padding:11px 18px max(12px,env(safe-area-inset-bottom))!important;background:#1b2734;border-top:1px solid #59616e;}
.app.editing footer {display:none;}
.app.editing .covers button[data-id="auto"] {grid-column:1/-1;background:#503440;border-color:#f0907c;}
.app.editing .covers button[data-id="auto"] b {font-size:17px;}
.app.editing .extra-choices {border-top:1px solid #59616e;margin:12px 0;padding:10px 0;}
.app.editing .extra-choices summary {cursor:pointer;padding:8px 2px;color:#ed796b;font-size:13px;font-weight:700;}
.app.editing .extra-choices[open] summary {margin-bottom:10px;}
.app.editing #lookSummary,.app.editing #coverSummary {background:#152232;border:1px solid #68535b;border-radius:10px;color:#ffe6d7;padding:9px 12px;font-size:12px;margin:8px 0 12px;}
.app.editing #titleField small {display:block;margin-top:7px;color:#cbb7b2;line-height:1.5;}
@media (max-height:600px) {.app.editing .preview {width:min(100%,480px,21dvh)!important}.app.editing .preview[data-shape="landscape"] {width:min(100%,620px,44dvh)!important}.app.editing .preview[data-shape="square"] {width:min(100%,480px,28dvh)!important}}
* {box-sizing:border-box} body {margin:0;background:radial-gradient(circle at 50% -10%,#48303b 0%,#243040 37%,#111b29 78%);min-height:100dvh} button,input,textarea {font:inherit} button,.button {border:1px solid #657381;border-radius:12px;padding:11px 16px;color:#fff;background:#263342;cursor:pointer;text-align:center} button:disabled {opacity:.55;cursor:wait} button.main {border-color:#ed796b;background:#ed796b;color:#151e2c;font-weight:800} .app {max-width:720px;margin:auto;padding:14px 16px calc(22px + env(safe-area-inset-bottom))} header {display:flex;align-items:center;gap:18px;margin:5px 0 14px} header>a {flex:none;color:#ffe0ce;font-size:12px} header small {font-size:10px;letter-spacing:.18em;color:#eab6a4} h1 {margin:2px 0;font-size:clamp(20px,5vw,30px)} h1 span {font-size:11px;color:#d5bdb4} h2 {font-size:19px;margin:0 0 9px} p {color:#d4c5bc;line-height:1.55;font-size:13px;margin:4px 0 14px} a {color:#ffad94}.steps {display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}.steps button {padding:9px 2px;border:1px solid #59616e;border-radius:9px;color:#a7b0bc;text-align:center;font-size:11px}.steps button.active {background:#ed796b;color:#151e2c;font-weight:800;border-color:#ed796b}.preview {position:relative;display:grid;place-items:center;width:min(100%,480px,46dvh);min-height:0;aspect-ratio:3/4;margin:auto;background:#0b1421;border-radius:17px;overflow:hidden;box-shadow:0 20px 65px #0009;touch-action:pan-y}.preview video,.preview canvas {width:100%;height:100%;object-fit:cover;display:block}.preview [hidden] {display:none} .preview #empty {padding:32px;text-align:center}.panel {background:#1b2734;padding:18px;margin-top:14px;border:1px solid #59616e;border-radius:17px}.panel[hidden] {display:none}.buttons {display:flex;flex-wrap:wrap;gap:8px;align-items:center}.buttons>* {flex:1;min-width:130px}.choices {display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:8px;margin:12px 0 18px}.choices button {padding:12px;text-align:left;min-height:64px}.choices button.selected {border:2px solid #ed796b;background:#65424a}.choices b,.choices small {display:block}.choices small {font-size:10px;color:#d4c5bc;margin-top:5px} label:not(.button) {display:block;font-size:13px;margin:14px 0} input:not([type=file]),textarea {display:block;width:100%;border:1px solid #718092;border-radius:9px;background:#0e1928;color:white;padding:11px;margin-top:6px} fieldset {border:1px solid #59616e;border-radius:10px;margin:16px 0} fieldset label {display:flex!important;gap:8px;align-items:center;margin:9px 0!important;word-break:break-word} fieldset input {width:auto!important;margin:0!important}.status {min-height:18px;color:#ffd9c8}#postResults a {display:block;margin:8px 0} footer {text-align:center;font-size:10px;color:#ad9c9e;margin:20px}

.app.editing .diary-fields {border:1px solid #a08179;border-radius:12px;background:#283442;padding:12px;margin:12px 0;}
.app.editing .diary-fields label {margin:9px 0;}
.app.editing #threadPreview p {white-space:pre-wrap;background:#14212f;border:1px solid #59616e;padding:12px;border-radius:9px;overflow-wrap:anywhere;}
.app.editing #threadSummary {color:#ffddcc;}
.app.editing input:not([type=file]),.app.editing textarea {font-size:16px;line-height:1.45;}
.app.editing .steps [data-step="post"] {background:#3e3041;border-color:#f5a391;color:#ffe6d6;cursor:pointer;font-weight:700;min-width:0;padding:6px 1px;font-size:11px;}
.app.editing .steps [data-step="post"]:disabled {background:transparent;border-color:#59616e;color:#a7b0bc;cursor:default;opacity:1;}
.app.editing .steps [data-step="post"].active {background:#ed796b;border-color:#ed796b;color:#151e2c;}
.app.editing .preview[data-shape="landscape"] {width:min(100%,620px,43dvh)!important;}
@media (max-height:600px) {.app.editing .preview[data-shape="landscape"] {width:min(100%,620px,32dvh)!important}}

header {gap:8px;} header>div {min-width:0;} header .brand-mini {width:48px;height:48px;object-fit:contain;flex:none;}
header #brandHome {display:block;flex:none;border:0;background:transparent;padding:0;line-height:0;}
header #brandHome:focus-visible {outline:3px solid #ed796b;outline-offset:3px;}
.steps button {background:transparent;min-width:0;touch-action:manipulation;}
.steps button:disabled {opacity:.6;cursor:default;}
.steps button:focus-visible {outline:3px solid #ed796b;outline-offset:2px;}
.preview #empty {display:grid;justify-items:center;gap:5px;width:100%;} .preview #empty .brand-hero {display:block;width:min(85%,240px);max-height:29dvh;object-fit:contain;} .preview #empty p {margin:0;}
.app.editing header .brand-mini {width:38px;height:38px;}
@media(max-width:410px) {header .brand-mini {width:38px;height:38px;}header h1 {font-size:18px;}}

#accountList .account-row {background:#132333;border:1px solid #68535b;border-radius:10px;padding:9px 12px;margin:8px 0;}
#accountList .account-row label {margin:0!important;align-items:flex-start;} #accountList .account-actions {display:flex;gap:7px;margin:8px 0 0 28px;} #accountList .account-actions button {padding:5px 9px;font-size:12px;}
#connectPanel {margin-top:12px;}

.revision {display:block;font-size:11px;font-weight:600;color:#e8b4a2;letter-spacing:.04em;white-space:nowrap;}
.update-notice {display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #ed796b;border-radius:10px;background:#493841;padding:8px 10px;margin-bottom:9px;font-size:12px;color:#fff0e4;}
.update-notice button {min-width:84px;padding:7px 9px;background:#ed796b;color:#1c2230;font-weight:800;}
.app.editing .update-notice {flex:none;}

.revision-line {display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .revision-line #checkVersion {border:0;background:none;padding:2px;color:#ffc4af;text-decoration:underline;font-size:11px;min-width:0;}
.variable-buttons {display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;} .variable-buttons button {padding:8px 12px;font-size:12px;border-color:#ed796b;color:#ffe6d7;}
.app #postTemplateSelect {display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #718092;border-radius:9px;background:#0e1928;color:white;font-size:16px;}
.template-actions {display:flex;gap:8px;margin:10px 0;} .template-actions button {flex:1;min-width:0;font-size:12px;}
.app.editing:has(.update-notice:not([hidden])) .preview {width:min(100%,480px,20dvh)!important;}
.app.editing:has(.update-notice:not([hidden])) .preview[data-shape="landscape"] {width:min(100%,620px,34dvh)!important;}
.app.editing:has(.update-notice:not([hidden])) .preview[data-shape="square"] {width:min(100%,480px,26dvh)!important;}

/* 撮影中は映像とシャッターに画面を譲る。撮影後は通常の編集画面へ戻す。 */
.app.camera-active {height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:env(safe-area-inset-top) 0 max(8px,env(safe-area-inset-bottom));background:#0b1421;}
.app.camera-active header,.app.camera-active .steps,.app.camera-active .update-notice,.app.camera-active .oauth-notice,.app.camera-active footer,.app.camera-active #shoot h2,.app.camera-active #shoot>p,.app.camera-active #shoot .buttons>*:not(#snap) {display:none!important;}
.app.camera-active .preview {flex:1;min-height:0;width:100%;max-width:none;aspect-ratio:auto;margin:0;border-radius:0;box-shadow:none;}
.app.camera-active .preview video {width:100%;height:100%;object-fit:cover;}
.app.camera-active #shoot {flex:none;margin:0;padding:14px 0 18px;border:0;border-radius:0;background:#0b1421;}
.app.camera-active #shoot .buttons {display:flex;justify-content:center;align-items:center;}
.app.camera-active #snap {flex:none;min-width:0;width:78px;height:78px;padding:0;border:4px solid white;border-radius:50%;background:#182637;font-size:0;box-shadow:0 0 0 2px #182637;touch-action:manipulation;}
.app.camera-active #snap::after {content:"";display:block;width:58px;height:58px;margin:auto;border-radius:50%;background:white;}
.app.camera-active #snap:focus-visible {outline:3px solid #ed796b;outline-offset:5px;}