/* Browser version: a menu bar above the app, in the app's own colours. */
body { display: flex; flex-direction: column; }
#webMenu { flex: none; display: flex; align-items: stretch; height: 28px; background: var(--panel-2, #1b1e24); border-bottom: 1px solid var(--line, #2a2e36); position: relative; z-index: 50; user-select: none; }
#webMenu .wm-top { position: relative; }
#webMenu .wm-top > button { height: 28px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--text, #dfe3ea); font: inherit; }
#webMenu .wm-top.open > button, #webMenu .wm-top > button:hover { background: var(--accent-dim, #0a3040); }
#webMenu .wm-drop { display: none; position: absolute; left: 0; top: 28px; min-width: 260px; padding: 4px 0; background: var(--panel, #20242b); border: 1px solid var(--line, #2f343d); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); max-height: calc(100vh - 40px); overflow-y: auto; }
#webMenu .wm-top.open .wm-drop { display: block; }
#webMenu .wm-item { display: flex; justify-content: space-between; gap: 24px; width: 100%; height: 26px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--text, #dfe3ea); font: inherit; text-align: left; align-items: center; white-space: nowrap; }
#webMenu .wm-item:hover { background: var(--accent-dim, #0a3040); }
#webMenu .wm-acc { color: var(--muted, #8b93a1); font-size: 11px; }
#webMenu .wm-sep { height: 1px; margin: 4px 0; background: var(--line, #2f343d); }
#app { flex: 1 1 auto; min-height: 0; height: auto; }

/* Account button and the log in / my drawings screens */
#webMenu .wm-account { margin-left: auto; height: 28px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--muted, #8b93a1); font: inherit; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#webMenu .wm-account:hover { background: var(--accent-dim, #0a3040); color: var(--text, #dfe3ea); }
.acc-layer { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 10, 14, 0.82); backdrop-filter: blur(4px); }
.acc-box { width: 380px; max-width: 100%; max-height: 100%; overflow: auto; padding: 28px; background: var(--panel, #20242b); border: 1px solid var(--line, #2f343d); border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); color: var(--text, #dfe3ea); }
.acc-box.wide { width: 560px; }
.acc-title { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.acc-sub { margin: 0 0 18px; color: var(--muted, #8b93a1); line-height: 1.45; }
.acc-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line, #2f343d); }
.acc-tabs button { flex: 1; height: 34px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted, #8b93a1); font: inherit; }
.acc-tabs button.on { color: var(--text, #dfe3ea); border-bottom-color: var(--accent, #4a90e2); }
.acc-form { display: flex; flex-direction: column; gap: 12px; }
.acc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #8b93a1); }
.acc-field input { height: 36px; padding: 0 10px; font-size: 14px; }
.acc-primary { height: 38px; padding: 0 18px; background: var(--accent, #4a90e2); border-color: transparent; color: #fff; font-weight: 600; }
.acc-primary:disabled { opacity: 0.6; }
.acc-link { border: 0; background: transparent; color: var(--accent-2, #7fc0d6); padding: 4px 0; font: inherit; text-align: left; height: auto; }
.acc-guest { display: block; margin: 16px auto 0; text-align: center; color: var(--muted, #8b93a1); }
.acc-note { min-height: 18px; margin-top: 10px; font-size: 13px; line-height: 1.4; }
.acc-note.bad, .acc-empty.bad { color: #ff7b72; }
.acc-note.good { color: #7ee2a0; }
.acc-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--muted, #8b93a1); font-size: 13px; }
.acc-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.acc-actions button { height: 36px; padding: 0 14px; }
.acc-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
/* Hide the public hosting badge injected by Netlify. */
#nl-badge-frame { display: none !important; }

.acc-empty { padding: 24px 8px; text-align: center; color: var(--muted, #8b93a1); }
.acc-row { display: flex; gap: 6px; }
.acc-open { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; height: auto; text-align: left; }
.acc-open small { color: var(--muted, #8b93a1); }
.acc-del { padding: 0 12px; color: #ff7b72; }
.acc-field input { background: var(--input-bg, #181b21); color: inherit; border: 1px solid var(--line-2, #3a404b); border-radius: 5px; outline: none; }
.acc-field input:focus { border-color: var(--accent, #4a90e2); }
.acc-pass { position: relative; display: flex; }
.acc-pass input { flex: 1; padding-right: 58px; }
.acc-eye { position: absolute; right: 4px; top: 4px; height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--muted, #8b93a1); font-size: 12px; }
.acc-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--text, #dfe3ea); cursor: pointer; }
.acc-check input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--accent, #4a90e2); }