:root{color-scheme:dark;--bg:#0b1120;--panel:#111827;--text:#e5e7eb;--muted:#94a3b8;--accent:#f59e0b;--line:#263244}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px system-ui,-apple-system,sans-serif}header{height:56px;background:#111827;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:relative;z-index:10}.brand{display:flex;align-items:center;color:#fff;text-decoration:none}.brand img{display:block;width:150px;height:40px;object-fit:contain}nav{display:flex;gap:14px}a{color:#fbbf24;text-decoration:none}main{max-width:1100px;margin:auto;padding:16px}.map-shell{padding:0;max-width:none;position:relative;height:calc(100vh - 56px)}#map{height:100%;min-height:520px}.fab,.primary,button{border:0;border-radius:8px;padding:11px 15px;background:#334155;color:#fff;cursor:pointer;font-weight:650}.primary{background:var(--accent);color:#1f2937}.fab{position:absolute;right:16px;top:16px;font-size:22px;z-index:500}.map-shell>.primary{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:500;white-space:nowrap}#nearby{position:absolute;left:16px;top:16px;z-index:500;background:#111827dd;border:1px solid var(--line);border-radius:8px;padding:12px;width:260px;max-height:260px;overflow:auto}#nearby h2{font-size:15px;margin:0 0 8px}.auth,.profile,.chat{max-width:600px;margin:30px auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}.auth form,.profile form{display:grid;gap:12px}input,textarea,select{width:100%;padding:11px;border-radius:7px;border:1px solid #334155;background:#0f172a;color:var(--text);font:inherit}textarea{min-height:100px;resize:vertical}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;width:min(92vw,420px)}dialog::backdrop{background:#0008}#messages{height:55vh;overflow:auto;background:#0f172a;padding:10px;margin:14px 0;border-radius:8px}.msg{padding:8px 0;border-bottom:1px solid var(--line)}.msg small{color:var(--muted)}.rules{color:var(--muted);font-size:13px}@media(max-width:700px){#nearby{width:calc(100% - 32px);top:auto;bottom:78px;max-height:120px}.map-shell>.primary{bottom:20px}.map-shell{height:calc(100vh - 56px)}}
.profile>form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0;padding:18px;background:#0f172a;border:1px solid var(--line);border-radius:8px}.profile>form label{display:grid;gap:6px;color:var(--muted);font-size:13px}.profile>form button{grid-column:1/-1;justify-self:start}.profile table{width:100%;border-collapse:collapse;margin-top:18px}.profile th,.profile td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}.profile th{color:#fbbf24}@media(max-width:700px){.profile>form{grid-template-columns:1fr}.profile{overflow:auto}.profile table{min-width:640px}}
/* Map feedback and the chat composer use separate layout tracks. */
[hidden] { display: none !important; }
header { gap: 12px; }
.brand { flex: 0 1 150px; min-width: 90px; }
.brand img { max-width: 100%; }
header nav { flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }
header nav a { white-space: nowrap; }
#marker-list { display: grid; gap: 6px; min-width: 0; }
.marker-list-item { width: 100%; min-width: 0; padding: 8px; text-align: left; background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; overflow-wrap: anywhere; }
.marker-list-item strong, .marker-list-item span { display: block; }
.marker-list-item span { margin-top: 4px; font-weight: 400; }
#location-status { position: absolute; right: 16px; top: 76px; z-index: 501; max-width: min(320px, calc(100% - 32px)); padding: 10px 12px; border-radius: 6px; background: #111827; border: 1px solid var(--line); overflow-wrap: anywhere; }
#location-status[data-error="true"], #chat-status[data-error="true"], #marker-status { color: #fca5a5; }
#locate[aria-busy="true"] { opacity: .6; cursor: progress; }
.chat { width: 100%; min-width: 0; }
.chat #messages { height: min(48dvh, 480px); min-height: 160px; overflow: auto; }
.chat .msg { overflow-wrap: anywhere; white-space: pre-wrap; min-width: 0; }
.chat .emoji-bar { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chat .emoji-bar button { position: static; transform: none; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; line-height: 1; font-size: 24px; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.chat #chat-form { position: static; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; margin: 0; }
.chat #chat-text { width: 100%; min-width: 0; min-height: 76px; max-height: 200px; resize: vertical; font-size: 16px; }
.chat #chat-send { position: static; transform: none; height: 44px; max-width: 100%; margin: 0; white-space: nowrap; }
.chat #chat-status { min-height: 24px; margin: 8px 0 0; overflow-wrap: anywhere; }
.marker-item{display:block;width:100%;text-align:left;background:transparent;border-bottom:1px solid var(--line);border-radius:0;padding:8px 2px;font-weight:500;overflow-wrap:anywhere}.icon-button{padding:4px 8px;background:transparent;color:var(--accent);font-size:22px;vertical-align:middle}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.profile-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.profile-heading h1{margin:0 0 16px;font-size:24px}
.profile-heading .icon-button{width:44px;height:44px;flex:none}
.profile h2,.profile p,.profile li{overflow-wrap:anywhere}
#profile-avatar{border-radius:50%;object-fit:cover}
.profile-about{white-space:pre-wrap}
#profile-settings{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}
#profile-settings form{min-width:0;gap:8px}
#profile-settings input,#profile-settings select,#profile-settings textarea{min-width:0;max-width:100%;font-size:16px}
#profile-settings .checkbox-label{display:flex;align-items:center;gap:8px;margin:12px 0}
#profile-settings input[type="checkbox"]{width:18px;height:18px;flex:none}
#profile-settings .avatar-delete{margin-top:12px}
body{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
header{padding-top:env(safe-area-inset-top);min-height:calc(56px + env(safe-area-inset-top));height:auto}
.map-page{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;padding-bottom:0}
.map-page>header{flex:none}
.map-page>main{display:flex;flex:1;min-height:0;width:100%;max-width:none;padding:0;margin:0}
.map-page .map-shell{flex:1;height:auto;min-height:0;width:100%}
.map-page #map{height:100%;min-height:0}
.map-page .map-shell>.primary{bottom:calc(20px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);white-space:normal}
button:focus-visible,a:focus-visible{outline:2px solid #38bdf8;outline-offset:3px}
@media(max-width:700px){.map-page #nearby{bottom:calc(82px + env(safe-area-inset-bottom));max-height:min(120px,24dvh)}}
@media (max-width: 480px) {
    main { padding: 12px; }
    .chat { margin: 12px auto; padding: 12px; }
    .chat #chat-form { grid-template-columns: minmax(0,1fr); }
    .chat #chat-send { justify-self: end; }
    header { height: auto; min-height: 56px; padding: 8px 12px; }
}