.app-header {
  border-bottom:1px solid var(--line);
  background:var(--bg);
  padding:18px 4%;
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none
}

.brand-mark {
  height:34px;
  width:34px;
  border:1px solid var(--accent);
  border-radius:var(--radius-md,8px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px
}

.brand strong {
  font-size:14px;
  font-weight:500;
  letter-spacing:.05em
}

.brand small {
  display:block;
  font-size:10px;
  letter-spacing:.12em
}

.main-nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-left:auto
}

.main-nav a {
  font-size:12px;
  text-decoration:none;
  color:var(--muted)
}

.main-nav a:hover {
  color:var(--text)
}

.app-main {
  width:min(1260px,94%);
  margin:28px auto 60px
}

.app-main>turbo-frame {
  display:block;
  max-width:850px;
  margin:35px auto;
  background:var(--surface);
  padding:30px;
  border:1px solid var(--line);
  border-radius:12px
}

.app-footer {
  width:min(1260px,94%);
  margin:0 auto 28px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px
}

.main-nav a { padding:5px 0;min-height:30px }.main-nav a:hover { color:var(--accent) }.app-main>turbo-frame { max-width:980px;border-radius:16px }.brand-mark { border-color:var(--color-gold) }.main-nav { gap:16px }
@media(max-width:600px) { .app-header { padding:18px;gap:16px }.main-nav { margin-left:0;width:100%;gap:10px 18px }.main-nav a { min-height:36px;display:flex;align-items:center }.account { max-width:100% }.account>span { overflow-wrap:anywhere }.app-main { width:calc(100% - 24px);margin-top:20px }.app-footer { width:calc(100% - 24px) } }

/* Avatar e navegação da conta: disclosure nativo, sem dependência para abrir. */
.account-menu { position:relative;margin-left:auto;flex-shrink:0;order:3 }
.avatar-button { width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border-strong);border-radius:50%;background:var(--color-surface-hover);color:var(--color-text);font-size:13px;font-weight:600;cursor:pointer;list-style:none }
.avatar-button::-webkit-details-marker { display:none }.avatar-button:hover,.account-menu[open] .avatar-button { border-color:var(--color-gold);background:var(--color-border-subtle) }.avatar-button:focus-visible { outline:2px solid var(--color-gold);outline-offset:4px }
.account-menu-panel { position:absolute;right:0;top:calc(100% + 12px);width:min(290px,calc(100vw - 36px));background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:14px;padding:8px;box-shadow:var(--shadow-md);z-index:30;max-height:calc(100dvh - 90px);overflow-y:auto }
.account-menu-identity { display:grid;gap:5px;padding:12px;overflow-wrap:anywhere }.account-menu-identity strong { font-size:13px }.account-menu-identity span { color:var(--muted);font-size:12px }.account-menu-identity small { font-size:11px;color:var(--muted) }
.account-menu-panel nav { display:grid }.account-menu-panel a,.account-menu-exit,.account-menu-action { display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;min-height:44px;font:inherit;font-size:13px;text-decoration:none;color:var(--text);border:0;border-radius:7px;background:transparent;text-align:left;cursor:pointer }.account-menu-panel a:hover,.account-menu-exit:hover,.account-menu-action:hover { background:var(--color-surface-hover) }.account-menu-panel a:focus-visible,.account-menu-exit:focus-visible,.account-menu-action:focus-visible { outline:2px solid var(--color-gold);outline-offset:-2px;background:var(--color-surface-hover) }.account-menu-panel a>span,.account-menu-exit>span { width:18px;text-align:center;color:var(--muted);font-size:17px }.account-menu-action .account-menu-label { font:inherit;font-size:13px;font-weight:normal;color:var(--text);width:auto;text-align:left }.account-menu-divider { height:1px;background:var(--color-border-subtle);margin:6px 4px }.account-menu-panel form { margin:0 }
.app-header { display:grid;grid-template-columns:auto minmax(0,1fr) auto }.main-nav { margin-left:auto;min-width:0;justify-content:flex-end;grid-column:2;grid-row:1 }.account-menu { margin-left:0;grid-column:3;grid-row:1 }
.settings-shell { max-width:850px;margin:32px auto }.settings-shell h1 { font-size:30px }.settings-card { background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:14px;padding:24px;margin-top:22px }.settings-card h2 { font-size:19px;margin:0 0 18px }.settings-card>.status-badge { margin-bottom:18px }.settings-card .muted { font-size:13px }.settings-sections { display:flex;flex-wrap:wrap;gap:16px;margin:24px 0;font-size:13px }.settings-sections a { color:var(--muted) }.settings-sections a:hover { color:var(--text) }.settings-card { scroll-margin-top:20px }
.profile-identity { display:flex;gap:18px;align-items:center;margin:24px 0 }.profile-identity>div { min-width:0;overflow-wrap:anywhere }.profile-identity strong { font-size:17px }.profile-identity p { margin:6px 0;font-size:13px }.profile-avatar { width:64px;height:64px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--color-border-strong);background:var(--color-surface-hover);border-radius:50%;font-size:20px }.settings-shell>.back-link { display:block }
@media(max-width:900px) { .app-header { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px }.brand { grid-column:1;grid-row:1 }.account-menu { grid-column:2;grid-row:1 }.main-nav { grid-column:1/-1;grid-row:2;margin-left:0;justify-content:flex-start } }
@media(max-width:600px) { .settings-shell { margin-top:24px }.settings-card { padding:18px }.settings-card .form-actions .button { width:100% }.settings-shell h1 { font-size:27px }.profile-identity strong { font-size:14px } }

@media(max-width:600px) { .room-option { padding:14px }.room-option-heading label { flex-basis:100% }.room-option-heading .status-badge { margin-left:28px } }

.brand-copy { min-width:0 }
.brand-copy small { max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }