[hidden]{display:none!important}
.home-action-label{display:none}
.topbar .top-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
#ownProfileBtn{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .65rem;order:0}
/* A profile sync can replace the avatar or label while the pointer is down. */
#ownProfileBtn > span{pointer-events:none}
#referralBtn{order:1}#themeBtn{order:2}#language,#languageTrigger,.language-picker{order:3}.header-help{order:4}
.header-help{display:grid;place-items:center;min-width:40px;height:40px;color:var(--ink);border:1px solid var(--line);border-radius:12px;text-decoration:none;background:var(--card)}
.own-avatar{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--accent2);color:var(--ink);border-radius:50%;font-weight:700;overflow:hidden}
.own-avatar img{width:100%;height:100%;object-fit:cover}
.own-summary .own-avatar{width:62px;height:62px;font-size:1.1rem}
.own-summary p span{display:block}.profile-access,.profile-protection,.profile-editor>strong{display:block;margin:.65rem 0}
.profile-access summary{cursor:pointer;padding:.75rem 0;font-weight:700}
.profile-editor :is(label,.file-label){margin:.3rem 0}.profile-editor .profile-date-grid{display:grid;gap:.25rem}.profile-editor .profile-v2-fields{padding:.5rem 0;margin:.5rem 0}
.welcome-settings{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;text-align:start}.welcome-settings label{color:var(--ink);font-size:.85rem}.welcome-settings select{width:100%;font:inherit;padding:.6rem;border-radius:10px;background:var(--card);color:var(--ink);border:1px solid var(--line)}
.owb-welcome-actions a{text-decoration:none;text-align:center}.owb-welcome,.owb-welcome-inner,.profile-editor{color:var(--ink)}
:root:not([data-color-mode="dark"]) :is(.owb-welcome,.app-shell,dialog) .btn.primary{background:#733647;color:#fff}
:root[data-theme="ocean"]:not([data-color-mode="dark"]) .btn.primary{background:#24566f}
:root[data-theme="forest"]:not([data-color-mode="dark"]) .btn.primary{background:#355f44}
:root[data-theme="coral"]:not([data-color-mode="dark"]) .btn.primary{background:#803d2f}
:root[data-color-mode="dark"] :is(.owb-welcome,.app-shell,dialog) .btn.primary{background:var(--accent);color:#17181b}
.crop-wrap{height:min(52dvh,340px);width:100%;overflow:hidden;border-radius:14px}.crop-wrap>img{display:block;max-width:100%}.crop-tools{display:flex;justify-content:center;gap:.5rem}.crop-tools button{font-size:1.3rem;min-width:44px;min-height:44px}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media(max-width:580px){.topbar{flex-wrap:wrap;align-items:flex-start}.topbar .top-actions{width:100%;justify-content:flex-start}.owb-welcome-inner{padding:1rem}.owb-welcome-mark img{width:52px;height:52px}}
.header-help{display:inline-flex;gap:.3rem;align-items:center;justify-content:center;padding:.3rem .6rem;font:inherit;font-size:.87rem;font-weight:650}
.help-symbol{display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;border:1px solid currentColor;border-radius:50%;font-size:.75rem}
.profile-editor :is(#preferredCurrency,.profile-date-parts select){width:100%;min-height:44px;padding:.5rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
.profile-date-parts{display:flex;flex-wrap:nowrap;gap:.3rem;min-width:0;border:0;padding:0;margin:0}
.profile-date-parts legend{font-weight:600;padding:0}.profile-date-parts label{flex:1;min-width:0;font-size:.85rem}.profile-date-parts label:nth-of-type(2){flex:1.6}
.profile-editor .remove-photo{min-height:40px}.welcome-appearance{width:100%}
@media(max-width:580px){
 #profileDialog[open]{position:fixed;inset:var(--profile-top,0px) 0 auto;box-sizing:border-box;margin:0 auto;width:100%;max-width:none;height:var(--profile-vh,100dvh);max-height:var(--profile-vh,100dvh);border-radius:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:4rem 1rem;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 #profileDialog[open]{padding-top:max(16px,env(safe-area-inset-top))}
 #profileDialog>.dialog-head{position:static;margin:0 0 .5rem;padding:0;min-height:44px;background:transparent}
 #profileDialog>.dialog-head h2{margin:0}.profile-editor :is(input,textarea,select){font-size:16px}
 .topbar .top-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem}
 .top-actions #ownProfileBtn,.top-actions #referralBtn{grid-column:span 3}.top-actions :is(#themeBtn,#languageTrigger,.header-help){grid-column:span 2;width:100%;min-width:0}
}

/* One toolbar for the private app shell and its detail views. */
.app-shell .topbar:has(#ownProfileBtn) {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  gap:4px;
  height:auto;
  min-height:0;
}
.app-shell .topbar:has(#ownProfileBtn) .brand {
  grid-column:1 / 4;
  grid-row:1;
  justify-self:start;
}
.app-shell .topbar .top-actions {display:contents}
.app-shell .topbar #ownProfileBtn {
  grid-column:4;
  grid-row:1;
  justify-self:end;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border-radius:50%;
}
.app-shell #ownProfileBtn [data-own-label],
.app-shell .topbar #referralBtn .referral-label,
.app-shell .topbar #languageTrigger .home-action-label {display:none}
.app-shell .topbar :is(#referralBtn,#themeBtn,#languageTrigger,.header-help) {
  display:flex;
  align-items:center;
  justify-content:center;
  grid-row:2;
  box-sizing:border-box;
  min-width:0;
  width:100%;
  height:44px;
  min-height:44px;
  padding:0 2px;
  gap:0;
  border-radius:12px;
  font:600 clamp(12px,3.3vw,15px)/1.15 system-ui,sans-serif;
}
.app-shell .topbar #referralBtn {grid-column:1}
.app-shell .topbar #themeBtn {grid-column:2}
.app-shell .topbar #languageTrigger {grid-column:3}
.app-shell .topbar .header-help {grid-column:4}
.app-shell .topbar .home-action-label {display:inline;font-size:clamp(12px,3.3vw,15px)}

.app-shell .topbar :is(#referralBtn,#themeBtn,.header-help) {flex-direction:column;gap:1px}
.app-shell .topbar #referralBtn .referral-icon {font-size:15px}
.app-shell .topbar #languageTrigger {gap:3px}
.app-shell .topbar #languageTrigger .owb-language-flag {flex:0 0 20px}
.app-shell .topbar #languageTrigger svg {width:20px;height:auto}
.own-summary .profile-dates {
  margin:.7rem 0;padding:.8rem;text-align:start;border:1px solid var(--line);border-radius:18px;
  background:var(--bg);background:color-mix(in srgb,var(--accent2) 25%,var(--card));
}
.profile-dates h3 {display:flex;align-items:center;gap:.5rem;margin:0 0 .65rem;font-size:1.05rem;line-height:1.3;color:var(--ink)}
.profile-dates dl {display:grid;gap:.5rem;margin:0}
.profile-dates dl>div {
  position:relative;display:grid;align-content:center;gap:.12rem;min-height:3.7rem;
  padding:.55rem .7rem;padding-inline-start:3.9rem;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
}
.profile-dates dt {color:var(--ink);color:color-mix(in srgb,var(--ink) 72%,var(--muted));font-size:.82rem;font-weight:550;line-height:1.3}
.profile-dates dd {margin:0;color:var(--ink);font-size:1.14rem;font-weight:700;line-height:1.22;overflow-wrap:anywhere}
.profile-date-icon {display:inline-grid;place-items:center;color:var(--ink);background:var(--accent2);border-radius:12px}
.profile-date-icon svg {display:block;width:1.55rem;height:1.55rem}
.profile-dates h3 .profile-date-icon {width:1.7rem;height:1.7rem;border-radius:50%}
.profile-dates h3 svg {width:1rem;height:1rem}
.profile-dates dt .profile-date-icon {position:absolute;inset-inline-start:.65rem;top:50%;transform:translateY(-50%);width:2.55rem;height:2.55rem}
#accountDeletionDialog[open] {box-sizing:border-box;width:min(32rem,calc(100% - 1.25rem));max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;padding:1rem}
#accountDeletionDialog .deletion-content {display:grid;gap:.75rem;min-width:0}
#accountDeletionDialog :is(h2,p) {margin:0;overflow-wrap:anywhere}
#accountDeletionDialog :is(button,a.btn) {box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:auto;min-height:44px;margin:0;padding:.6rem .8rem;white-space:normal;line-height:1.3;text-align:center}
#accountDeletionDialog .deletion-consent {display:flex;align-items:flex-start;gap:.6rem;margin:0}
#accountDeletionDialog .deletion-consent input {width:1.25rem;height:1.25rem;flex:none;margin:.1rem 0 0;padding:0}
#accountDeletionDialog [role="status"] {padding:.6rem .75rem;background:var(--card);border:1px solid var(--line);border-radius:10px;font-weight:600}