/* Account settings use compact rows and the website's existing colour tokens. */
.dashboard-page { padding-block:42px 88px; }
.dashboard-page [hidden] { display:none!important; }
.dashboard-page .visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.dashboard-wrap { width:100%; max-width:1100px; margin-inline:auto; }
.dashboard-intro { margin:0 0 35px; }
.account-page.dashboard-page h1 { margin:0; font-family:inherit; font-size:30px; font-weight:550; line-height:1.4; letter-spacing:-.035em; }
.dashboard-grid { display:grid; grid-template-columns:190px minmax(0,1fr); gap:58px; align-items:start; }
.dashboard-sidebar { position:sticky; top:110px; min-width:0; padding-top:2px; }
.dashboard-nav { display:grid; gap:3px; }
.dashboard-nav>button { position:relative; display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:9px 10px; border:0; border-radius:5px; background:transparent; color:var(--account-muted); font:inherit; font-size:13px; line-height:1.6; text-align:start; cursor:pointer; transition:background .14s,color .14s; }
.dashboard-nav>button:hover { color:var(--account-ink); background:color-mix(in srgb,var(--account-muted) 5%,transparent); }
.dashboard-nav>button[aria-selected=true] { color:var(--account-ink); background:color-mix(in srgb,var(--account-muted) 9%,transparent); font-weight:550; }
.dashboard-nav>button.has-changes::after { content:''; display:block; width:5px; height:5px; margin-inline-start:auto; border-radius:50%; background:var(--account-accent); }
.dashboard-nav>button>svg { flex:none; width:16px; height:16px; }
.dashboard-sidebar-footer { display:grid; margin-top:25px; padding-top:14px; border-top:1px solid var(--account-line); }
.account-page .dashboard-sidebar-footer>a,.dashboard-sidebar-footer>button { display:flex; align-items:center; gap:8px; min-height:40px; padding:8px 10px; border:0; border-radius:5px; background:none; color:var(--account-muted); font:inherit; font-size:12px; line-height:1.7; text-align:start; text-decoration:none; cursor:pointer; }
.dashboard-sidebar-footer>button:hover { color:var(--account-ink); }
.dashboard-sidebar-footer :is(a,button)>svg { width:15px; height:15px; flex:none; }
.dashboard-sidebar-footer>button:disabled { opacity:.6; cursor:wait; }
.dashboard-sidebar-footer>[data-header-account-error] { color:var(--account-error); padding-inline:10px; font-size:12px; line-height:1.7; }
.dashboard-panels { min-width:0; width:100%; max-width:790px; }
.dashboard-panel { min-width:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.dashboard-panel[hidden] { display:none; }
/* Focus belongs to controls, not a frame around a whole form. */
.dashboard-panel:focus { outline:none; }
.settings-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; margin:0 0 5px; padding:0 0 22px; border-bottom:1px solid var(--account-line); }
.account-page .settings-heading h2 { margin:0; font-family:inherit; font-size:21px; font-weight:550; line-height:1.5; letter-spacing:-.02em; }
.settings-heading>p { flex-basis:100%; margin:0; color:var(--account-muted); font-size:13px; line-height:1.8; }
.settings-heading>div>p { margin:7px 0 0; color:var(--account-muted); font-size:13px; line-height:1.8; }
.settings-form { margin:0; }
.settings-row { display:grid; grid-template-columns:minmax(150px,.75fr) minmax(0,1.6fr); gap:24px; align-items:start; padding:23px 0; border-bottom:1px solid var(--account-line); }
.settings-label { min-width:0; padding-block:8px 0; }
.account-page .settings-label :is(label,h3) { display:block; margin:0; color:var(--account-ink); font:inherit; font-size:13px; font-weight:500; line-height:1.65; }
.settings-label p { margin:6px 0 0; max-width:230px; color:var(--account-muted); font-size:12px; line-height:1.7; }
.settings-label>span { display:block; margin-top:5px; color:var(--account-muted); font-size:12px; }
.settings-control { min-width:0; }
.dashboard-page .settings-control .account-field { gap:7px; margin:0 0 16px; }
.dashboard-page .settings-control>.account-field:last-child,.dashboard-page .settings-control>.account-field:only-child,.dashboard-page .settings-pair .account-field { margin-bottom:0; }
.dashboard-page .account-field>label { font-size:13px; font-weight:450; }
.dashboard-page .account-field :is(input,select,textarea),.dashboard-page .styled-select-trigger { min-height:42px; padding:9px 11px; border-radius:6px; font-size:13px; line-height:1.65; background:color-mix(in srgb,var(--account-field) 65%,transparent); }
.dashboard-page .account-field textarea { min-height:120px; }
.dashboard-page .account-field :is(input,select,textarea):focus-visible { border-color:color-mix(in srgb,var(--account-accent) 75%,var(--account-line)); box-shadow:0 0 0 2px color-mix(in srgb,var(--account-accent) 10%,transparent); }
.dashboard-page .account-field-error,.dashboard-page .account-hint { font-size:12px; line-height:1.7; }
.dashboard-page .account-password input,.dashboard-page .account-password input[dir=ltr] { padding-right:65px; }
.dashboard-page .account-password>button { top:3px; bottom:3px; border-radius:4px; font-size:11px; }
.settings-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; min-width:0; }
.settings-pair>* { min-width:0; }
.settings-inline { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; min-height:42px; font-size:13px; line-height:1.7; }
.settings-inline>span:first-child,.settings-inline>bdi { min-width:0; overflow-wrap:anywhere; }
.settings-inline>.settings-link-button:last-child,.settings-inline>.settings-secondary:last-child { margin-inline-start:auto; }
.settings-note { margin:8px 0 0; color:var(--account-muted); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.settings-note>p { margin:0 0 8px; }
.settings-note>p:last-child { margin-bottom:0; }
.settings-status { display:inline-flex; align-items:center; gap:5px; flex:none; color:var(--account-success); font-size:11px; line-height:1.65; }
.settings-status>svg { width:13px; height:13px; }
.settings-status.is-pending { color:var(--account-accent); }
.settings-inline-status { display:inline-flex; align-items:center; gap:5px; color:var(--account-success); font-size:11px; line-height:1.7; }
.settings-email-pending { display:flex; flex-wrap:wrap; align-items:center; gap:5px 14px; margin-top:8px; color:var(--account-muted); font-size:12px; line-height:1.8; }
.settings-email-pending>p { margin:0; min-width:0; overflow-wrap:anywhere; }
.settings-session-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:26px; }
.account-page .settings-session-heading h3 { margin:0; font-family:inherit; font-size:15px; font-weight:550; line-height:1.7; }
.settings-session-action { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:15px; }
.settings-link-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:6px 0; border:0; border-radius:3px; background:none; color:var(--account-accent); font:inherit; font-size:12px; line-height:1.6; text-decoration:none; cursor:pointer; }
.settings-link-button:hover { text-decoration:underline; text-underline-offset:3px; }
.settings-link-button>svg { width:14px; height:14px; }
.settings-link-button:disabled { opacity:.6; cursor:wait; }
.settings-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; min-height:76px; padding:18px 0; }
.settings-action-buttons { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; margin-inline-start:auto; }
.settings-actions [data-save-state] { color:var(--account-muted); font-size:12px; line-height:1.7; }
.settings-actions [data-save-state]>svg { width:13px; height:13px; vertical-align:-2px; margin-inline-end:5px; }
.settings-actions.is-dirty [data-save-state] { color:var(--account-accent); }
.dashboard-page .account-submit,.settings-secondary { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:5px; font:inherit; font-size:12px; font-weight:500; line-height:1.6; white-space:normal; text-align:center; text-decoration:none; cursor:pointer; transition:background .14s,border-color .14s; }
.dashboard-page .account-submit { background:var(--account-accent); color:var(--account-accent-ink); }
.dashboard-page .account-submit:hover { transform:none; filter:brightness(1.04); }
.dashboard-page .account-submit:disabled { opacity:.45; cursor:default; }
.dashboard-page form[aria-busy=true] .account-submit { cursor:wait; }
.settings-secondary { background:transparent; color:var(--account-ink); border-color:var(--account-line); }
.account-page a.settings-secondary { color:var(--account-ink); }
.settings-secondary:hover { background:color-mix(in srgb,var(--account-muted) 6%,transparent); border-color:color-mix(in srgb,var(--account-muted) 32%,transparent); }
.settings-secondary:disabled { opacity:.45; cursor:default; }
.settings-action-buttons>[data-discard] { background:none; color:var(--account-muted); border:0; min-height:38px; padding:8px 10px; font:inherit; font-size:12px; cursor:pointer; }
.settings-action-buttons>[data-discard][hidden] { display:none; }
.settings-action-buttons>[data-discard]:disabled { opacity:.5; cursor:wait; }
.settings-actions>:only-child:not([data-save-state]) { margin-inline-start:auto; }
.settings-reveal { margin:13px 0 0; padding:18px 0 0; min-width:0; border:0; border-top:1px solid var(--account-line); }
.settings-reveal[hidden] { display:none; }
.settings-reveal>legend { padding:0; margin-bottom:12px; font-size:13px; font-weight:500; }
.dashboard-page .settings-reveal>.account-field { margin-bottom:16px; }
.settings-reveal>.settings-actions { min-height:0; padding:4px 0 0; }
.settings-section { margin-top:28px; padding-top:26px; border-top:1px solid var(--account-line); }
.settings-section:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.settings-heading+.settings-section { margin-top:0; padding-top:0; border-top:0; }
.settings-group { margin:0 0 14px; }
.account-page .settings-group h3,.account-page .settings-section>h3 { margin:0; font-family:inherit; font-size:15px; font-weight:550; line-height:1.7; }
.settings-group>p,.settings-section>p { margin:6px 0 0; color:var(--account-muted); font-size:12px; line-height:1.8; }
.settings-danger { color:var(--account-error); }
.settings-secondary.settings-danger { color:var(--account-error); border-color:color-mix(in srgb,var(--account-error) 25%,var(--account-line)); }
.account-page .settings-link-button.settings-danger,.account-page a.settings-danger { color:var(--account-error); }
.dashboard-page .account-result { padding:11px 13px; margin:12px 0 0; border-radius:5px; font-size:12px; }
.dashboard-page .account-result[hidden] { display:none; }
.settings-session-list { list-style:none; margin:16px 0 0; padding:0; }
.settings-session { display:flex; align-items:center; gap:15px; padding:17px 0; border-bottom:1px solid var(--account-line); }
.settings-session:last-child { border-bottom:0; }
.settings-session>div:first-of-type { min-width:0; flex:1; }
.settings-session strong { display:block; font-size:13px; font-weight:500; line-height:1.7; overflow-wrap:anywhere; }
.settings-session p { margin:4px 0 0; color:var(--account-muted); font-size:12px; line-height:1.7; }
.settings-session-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; flex-shrink:0; max-width:50%; }
.settings-session-meta time { font-size:12px; color:var(--account-muted); }
.settings-session-meta .settings-secondary { min-height:34px; padding:6px 11px; }
.settings-browser-icon { display:grid; place-items:center; width:28px; color:var(--account-muted); flex:none; }
.settings-browser-icon svg { width:21px; height:21px; }
.settings-choice-group { display:flex; flex-wrap:wrap; align-items:stretch; gap:0; padding:3px; border:1px solid var(--account-line); border-radius:6px; background:var(--account-field); }
.settings-choice-group>label { position:relative; display:flex; align-items:center; justify-content:center; gap:7px; flex:1; min-width:0; min-height:37px; padding:8px 12px; border-radius:4px; background:transparent; color:var(--account-muted); font-size:12px; line-height:1.6; cursor:pointer; }
.settings-choice-group>label:has(input:checked) { background:var(--account-surface); color:var(--account-ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.settings-choice-group>label:has(input:focus-visible) { outline:2px solid var(--account-accent); outline-offset:2px; }
.settings-choice-group input[type=radio] { position:absolute; width:1px; height:1px; clip-path:inset(50%); opacity:0; }
.settings-choice-group label>svg { width:15px; height:15px; flex:none; }
.settings-data-actions { margin-top:4px; }
.settings-data-actions>.settings-row:last-child { border-bottom:0; }
.settings-support-list { list-style:none; margin:0; padding:0; }
.settings-support-list>li { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:20px 0; border-bottom:1px solid var(--account-line); }
.settings-support-list>li>div { min-width:0; flex:1; }
.account-page .settings-support-list h3 { margin:0; font-family:inherit; font-size:14px; font-weight:500; line-height:1.7; overflow-wrap:anywhere; }
.settings-support-list p { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; color:var(--account-muted); font-size:12px; line-height:1.7; }
.dashboard-ticket-status { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:var(--account-muted); font-size:11px; line-height:1.7; }
.dashboard-ticket-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.dashboard-ticket-status[data-status=open] { color:var(--account-accent); }
.dashboard-ticket-status[data-status=in_progress] { color:var(--account-success); }
.settings-empty { padding:24px 0; color:var(--account-muted); font-size:13px; line-height:1.8; }
.settings-empty p { margin:0 0 10px; }
.account-session-recovery { display:block; width:fit-content; margin-top:8px; font-size:12px; }
.dashboard-fallback { max-width:500px; margin:35px auto; }
.dashboard-skeleton { display:grid; grid-template-columns:190px minmax(0,1fr); gap:58px; }
.dashboard-skeleton>div { height:300px; border-radius:5px; background:color-mix(in srgb,var(--account-muted) 4%,transparent); animation:settings-pulse 1.4s ease-in-out infinite alternate; }
.dashboard-skeleton>div:first-child { height:180px; }
.dashboard-skeleton>div>span { display:block; height:35px; margin:24px; border-radius:4px; background:color-mix(in srgb,var(--account-muted) 5%,transparent); }
.dashboard-page:lang(ar) :is(h1,h2,h3) { letter-spacing:0; }
.dashboard-page:lang(ar) .settings-label :is(label,h3) { line-height:1.9; }
.account-nav-member[open]>summary { background:var(--control-hover,rgba(255,255,255,.06)); }
.account-nav-member>summary>svg { transition:transform .15s; }
.account-nav-member[open]>summary>svg { transform:rotate(180deg); }
.account-dropdown { border:1px solid rgba(150,130,140,.18); animation:settings-menu .14s ease-out both; }
.account-dropdown>a,.account-dropdown>button { transition:background .14s; }
@keyframes settings-menu { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
@keyframes settings-pulse { to { opacity:.45; } }
@media(max-width:1000px) {
  .dashboard-grid,.dashboard-skeleton { grid-template-columns:170px minmax(0,1fr); gap:34px; }
  .settings-row { grid-template-columns:minmax(130px,.7fr) minmax(0,1.4fr); gap:20px; }
}
@media(max-width:760px) {
  .dashboard-page { padding:30px 20px 64px; }
  .dashboard-intro { margin-bottom:23px; }
  .account-page.dashboard-page h1 { font-size:27px; }
  .dashboard-grid { grid-template-columns:minmax(0,1fr); gap:26px; }
  .dashboard-sidebar { position:static; display:flex; flex-direction:column; padding:0; min-width:0; }
  .dashboard-nav { display:flex; width:100%; gap:3px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; padding:0 0 8px; border-bottom:1px solid var(--account-line); }
  .dashboard-nav>button { flex:0 0 auto; min-height:40px; width:auto; padding:8px 12px; font-size:12px; white-space:nowrap; }
  .dashboard-nav>button.has-changes::after { margin-inline-start:1px; }
  .dashboard-sidebar-footer { display:none; }
  .dashboard-panels { max-width:none; }
  .settings-heading { padding-bottom:18px; }
  .settings-row { grid-template-columns:minmax(135px,.65fr) minmax(0,1.4fr); gap:20px; padding-block:20px; }
  .settings-heading h2 { font-size:20px; }
  .dashboard-skeleton { grid-template-columns:1fr; gap:20px; }
  .dashboard-skeleton>div:first-child { height:44px; }
}
@media(max-width:560px) {
  .dashboard-page { padding-inline:18px; }
  .settings-row { grid-template-columns:minmax(0,1fr); gap:12px; padding-block:20px; }
  .settings-label { padding:0; }
  .settings-label p { max-width:none; margin-top:4px; }
  .settings-inline { min-height:36px; gap:8px 12px; }
  .settings-inline>.settings-secondary:last-child,.settings-inline>.settings-link-button:last-child { margin-inline-start:0; }
  .settings-pair { gap:14px; }
  .dashboard-page .account-field :is(input,select,textarea),.dashboard-page .styled-select-trigger { min-height:44px; font-size:14px; }
  .dashboard-page .account-submit,.settings-secondary { min-height:42px; }
  .settings-reveal { margin-top:12px; padding-top:16px; }
  .settings-actions { min-height:72px; padding-block:16px; }
  .settings-action-buttons { gap:8px; }
  .settings-actions [data-save-state] { font-size:11px; }
  .settings-session { flex-wrap:wrap; gap:8px 12px; }
  .settings-session-meta { width:100%; max-width:none; justify-content:flex-start; margin-inline-start:0; }
  .settings-session:has(.settings-browser-icon) .settings-session-meta { padding-inline-start:40px; }
  .settings-session-meta .settings-secondary { min-height:38px; margin-inline-start:auto; }
  .settings-choice-group>label { min-height:40px; padding:8px 10px; }
  .settings-choice-group>label>svg { display:none; }
}
@media(max-width:380px) {
  .dashboard-page { padding-inline:16px; }
  .settings-pair { grid-template-columns:minmax(0,1fr); }
  .settings-action-buttons { flex-wrap:wrap; }
  .settings-actions [data-save-state]:not(:empty) { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .dashboard-skeleton>div,.account-dropdown { animation:none; }
  .dashboard-nav>button,.dashboard-page .account-submit,.settings-secondary,.account-nav-member>summary>svg { transition:none; }
}
/* Optional mail choices use native checkboxes so keyboard and assistive tools
   receive the same state that is persisted to the account. */
.settings-switch { position:relative; display:inline-flex; align-items:center; min-height:42px; cursor:pointer; }
.settings-switch input { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; }
.settings-switch>span { position:relative; display:block; width:40px; height:23px; border:1px solid color-mix(in srgb,var(--account-muted) 35%,transparent); border-radius:20px; background:color-mix(in srgb,var(--account-muted) 12%,transparent); transition:background .18s,border-color .18s; }
.settings-switch>span::after { content:''; position:absolute; inset-inline-start:3px; top:3px; width:15px; height:15px; background:var(--account-muted); border-radius:50%; transition:inset-inline-start .18s,background .18s; }
.settings-switch input:checked+span { background:var(--account-accent); border-color:var(--account-accent); }
.settings-switch input:checked+span::after { inset-inline-start:20px; background:var(--account-accent-ink); }
.settings-switch input:focus-visible+span { outline:2px solid var(--account-accent); outline-offset:4px; }
.settings-switch input:disabled+span { opacity:.5; cursor:wait; }
.settings-required-email { display:inline-flex; align-items:center; min-height:42px; font-size:12px; color:var(--account-muted); }
#notifications-form .settings-row:not(:last-of-type) .settings-control { display:flex; justify-content:flex-end; }
@media(prefers-reduced-motion:reduce) { .settings-switch>span,.settings-switch>span::after { transition:none; } }

.settings-ticket-details { display:flex; flex-wrap:wrap; gap:6px 16px; }