@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin:0; color:#000; background:#fff; font-family:'IBM Plex Mono', monospace; }
button, select, input { font:inherit; }

.gas-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); background:#fff; }
.gas-modal-card { width:min(400px,100%); padding:32px 30px; background:#fff; box-shadow:0 8px 40px rgba(0,0,0,.13); }
.gas-header { display:flex; align-items:baseline; margin-bottom:25px; }
.gas-wordmark { color:#000; font-size:12px; font-weight:800; letter-spacing:.12em; text-decoration:none; }
.gas-modal-card h1 { margin:0; font-size:14px; font-weight:600; letter-spacing:.08em; }
.gas-message { margin:13px 0 25px; color:rgba(0,0,0,.56); font-size:12px; line-height:1.55; }
.gas-message strong { color:#000; font-weight:600; }

.gas-form { display:flex; flex-direction:column; gap:20px; }
.gas-field { display:flex; flex-direction:column; gap:6px; }
.gas-field > label { color:rgba(0,0,0,.4); font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.gas-field > label span { font-size:9px; }
.gas-mode { display:flex; gap:8px; margin-top:2px; }
.gas-mode-btn { flex:1; padding:8px 10px; border:1px solid rgba(0,0,0,.15); background:transparent; color:rgba(0,0,0,.5); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.gas-mode-btn.active { border-color:#000; background:#000; color:#fff; }
.gas-help { margin:3px 0 0; color:rgba(0,0,0,.42); font-size:10px; line-height:1.45; }
.gas-field select, .gas-field input#gas-comment { width:100%; padding:10px 0; border:0; border-bottom:1px solid rgba(0,0,0,.1); border-radius:0; outline:0; background:transparent; color:#000; font-size:13px; letter-spacing:.04em; -webkit-appearance:none; appearance:none; }

.gas-file-box { position:relative; width:100%; overflow:hidden; border-radius:4px; }
.gas-file-box img, .gas-file-box video { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; opacity:.22; pointer-events:none; }
.gas-file-box label { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-height:76px; padding:16px; border:1.5px dashed rgba(0,0,0,.2); border-radius:4px; background:rgba(0,0,0,.015); color:rgba(0,0,0,.5); font-size:11px; letter-spacing:.06em; text-align:center; cursor:pointer; overflow-wrap:anywhere; }
.gas-file-box label.selected { border-color:#000; border-style:solid; background:transparent; color:#000; font-weight:600; }
.gas-file-box input[type="file"] { position:absolute; inset:0; z-index:3; width:100%; height:100%; opacity:0; cursor:pointer; }
.gas-submit { width:100%; margin-top:4px; padding:14px; border:0; background:#000; color:#fff; font-size:12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.gas-submit:disabled { cursor:wait; opacity:.5; }
.gas-status { min-height:16px; margin:0; color:rgba(0,0,0,.45); font-size:11px; font-weight:500; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.gas-status.error { color:#c00; }
.gas-status.success { color:#000; font-weight:600; }
@media (max-width:420px) { .gas-modal-card { padding:28px 22px; } .gas-page { padding-left:12px; padding-right:12px; } }