/* ==========================================================================
   Member area — auth pages, onboarding, composer, account, portals
   ========================================================================== */

/* ---------- Form primitives ---------- */

.field { margin-bottom: var(--sp-4); }
.field__input--lg { height: 52px; font-size: var(--fs-lg); font-weight: 600; }
.field__textarea { height: auto; padding: 12px 16px; line-height: 1.55; resize: vertical; }
select.field__input { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--da-text-2) 50%), linear-gradient(135deg, var(--da-text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field__hint { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: var(--fs-xs); color: var(--da-text-3); }
.field__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--da-even); font-weight: 700; }
.field__ok .i { width: 13px; height: 13px; stroke-width: 3; }
.field__prefix-wrap { position: relative; display: flex; align-items: center; }
.field__prefix-wrap .field__input { flex: 1; }
.field__prefix { position: absolute; left: 14px; color: var(--da-text-3); font-weight: 700; pointer-events: none; }
.field__prefix + .field__input { padding-left: 32px; }
.field__suffix { position: absolute; right: 14px; font-size: var(--fs-sm); color: var(--da-text-3); pointer-events: none; }
.field__input--code { max-width: 220px; font: 700 28px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.3em; text-align: center; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field--end { align-self: end; }

.check { display: flex; align-items: flex-start; gap: 10px; margin: var(--sp-4) 0; font-size: var(--fs-sm); color: var(--da-text-2); cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--da-red); }
.check a { color: var(--da-text); text-decoration: underline; }

.chipset { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.chipset .chip { cursor: pointer; }

.toggles { display: grid; gap: 2px; margin: var(--sp-2) 0 var(--sp-4); }
.toggle { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; cursor: pointer; }
.toggles li + li .toggle { border-top: 1px solid var(--da-border); }
.toggle__text { display: grid; flex: 1; }
.toggle__text small { font-size: var(--fs-xs); color: var(--da-text-2); }
.toggle__input, .mini-switch input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .switch__track, .mini-switch .switch__track { flex: none; }
.toggle__input:checked + .switch__track,
.mini-switch input:checked + .switch__track { background: var(--da-red); }
.toggle__input:checked + .switch__track::after,
.mini-switch input:checked + .switch__track::after { transform: translateX(16px); }
.toggle__input:focus-visible + .switch__track,
.mini-switch input:focus-visible + .switch__track { box-shadow: var(--ring); }
.mini-switch { position: relative; display: inline-flex; cursor: pointer; }

.dropzone {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: var(--sp-5);
	border-radius: var(--r-md);
	border: 2px dashed var(--da-border-strong);
	background: var(--da-surface-2);
	color: var(--da-text-2);
	cursor: pointer;
	transition: border-color var(--t-fast);
}
.dropzone:hover { border-color: var(--da-red); }
.dropzone > .i { width: 28px; height: 28px; color: var(--da-red); flex: none; }
.dropzone b { display: block; color: var(--da-text); }
.dropzone small { font-size: var(--fs-xs); }
.dropzone--sm { margin-top: var(--sp-3); padding: var(--sp-3); font-size: var(--fs-sm); cursor: default; opacity: 0.7; }
.dropzone--sm:hover { border-color: var(--da-border-strong); }
.dropzone--private > .i { color: var(--da-text-3); }

.choice-list { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.choice { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--da-border-strong); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.choice:has(input:checked) { border-color: var(--da-red); background: var(--da-red-soft); }
.choice input { accent-color: var(--da-red); margin-top: 3px; }
.choice b { display: block; }
.choice small { font-size: var(--fs-sm); color: var(--da-text-2); }

.btn--danger { background: transparent; border-color: color-mix(in srgb, var(--da-red-hot) 55%, transparent); color: var(--da-red-hot); }
.btn--danger:hover { background: var(--da-red-soft); }

/* Rage slider */
.rage-input__label { margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: var(--da-surface-3); }
.rage-input[data-level="1"] { --rg: var(--rage-1); }
.rage-input[data-level="2"] { --rg: var(--rage-2); }
.rage-input[data-level="3"] { --rg: var(--rage-3); }
.rage-input[data-level="4"] { --rg: var(--rage-4); }
.rage-input[data-level="5"] { --rg: var(--rage-5); }
.rage-input .rage-input__label { color: var(--rg); }
.rage-input__range { width: 100%; margin: var(--sp-3) 0 4px; accent-color: var(--rg); height: 6px; }
.rage-input__scale { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--da-text-3); text-transform: uppercase; letter-spacing: 0.03em; }

/* Star input (reversed order for :checked ~ highlighting) */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin: 0 0 var(--sp-5); padding: 0; border: 0; }
.star-input legend { float: left; width: 100%; margin-bottom: 8px; }
.star-input input { position: absolute; opacity: 0; }
.star-input label { cursor: pointer; color: var(--da-surface-3); transition: color var(--t-fast), transform var(--t-fast); }
.star-input label .i { width: 38px; height: 38px; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--da-red); }
.star-input input:focus-visible + label { box-shadow: var(--ring); border-radius: 6px; }

/* Steppers */
.stepdots { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.stepdots li { display: flex; align-items: center; gap: 8px; flex: 1; padding-bottom: 10px; border-bottom: 3px solid var(--da-surface-3); font-size: var(--fs-sm); font-weight: 700; color: var(--da-text-3); }
.stepdots span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--da-surface-3); font-size: 12px; }
.stepdots .is-done { border-color: var(--da-red); color: var(--da-text-2); }
.stepdots .is-done span { background: var(--da-red); color: #fff; }
.stepdots .is-current { border-color: var(--da-red); color: var(--da-text); }
.stepdots .is-current span { background: var(--da-text); color: var(--da-bg); }

.success { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-6); text-align: center; outline: none; }
.success__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--da-even); color: #fff; }
.success__icon .i { width: 34px; height: 34px; stroke-width: 2.6; }
.success h2 { font-size: var(--fs-xl); font-weight: 800; }
.success p { max-width: 52ch; color: var(--da-text-2); }
.track--mini { width: 100%; max-width: 560px; }

/* ---------- Auth pages ---------- */

.auth-page {
	display: grid; grid-template-columns: 1fr minmax(360px, 520px);
	max-width: 1180px;
	margin: var(--sp-8) auto 0;
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--da-border);
	background: var(--da-surface-1);
	min-height: 640px;
}
.auth-page__art { position: relative; background: #000; color: #fff; overflow: hidden; }
.auth-page__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.auth-page__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.2)), linear-gradient(0deg, rgb(0 0 0 / 0.8), transparent 60%); }
.auth-page__art-copy { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 1; }
.auth-page__art .marker { font-size: 2.4rem; color: #fff; text-shadow: 0 4px 24px var(--da-red); }
.auth-page__big { margin-top: var(--sp-4); font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4rem); line-height: 0.95; text-transform: uppercase; }
.auth-page__big span { color: var(--da-red-hot); }
.auth-page__proof { margin-top: var(--sp-5); font-size: var(--fs-sm); color: rgb(255 255 255 / 0.7); }
.auth-page__proof b { color: #fff; }
.auth-page__panel { padding: var(--sp-12) var(--sp-10); align-self: center; }
.auth-page__switch { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--da-text-2); text-align: center; }
.auth-page__switch a { color: var(--da-red); font-weight: 700; }
.auth__sent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.auth__sent-actions .btn { margin: 0; }

/* ---------- Onboarding ---------- */

.onboard { max-width: 760px; margin: var(--sp-10) auto 0; }
.onboard__card { padding: var(--sp-8); border-radius: var(--r-xl); background: var(--da-surface-1); border: 1px solid var(--da-border); box-shadow: var(--shadow-2); }
.onboard__title { margin: var(--sp-2) 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1; text-transform: uppercase; }
.onboard__sub { margin-bottom: var(--sp-5); color: var(--da-text-2); }
.onboard__nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--da-border); }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.pick { position: relative; display: flex; align-items: center; gap: 10px; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--da-border-strong); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.pick input { position: absolute; opacity: 0; }
.pick__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--cat) 20%, var(--da-surface-2)); color: var(--cat); }
.pick__icon .i { width: 18px; height: 18px; }
.pick__name { font-size: var(--fs-sm); font-weight: 700; }
.pick__check { margin-left: auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--da-border-strong); color: transparent; }
.pick__check .i { width: 12px; height: 12px; stroke-width: 3.5; }
.pick:has(input:checked) { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 10%, transparent); }
.pick:has(input:checked) .pick__check { background: var(--cat); border-color: var(--cat); color: #fff; }
.pick:has(input:focus-visible) { box-shadow: var(--ring); }

.safety-note { display: flex; gap: 10px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--da-surface-2); font-size: var(--fs-sm); color: var(--da-text-2); }
.safety-note .i { flex: none; color: var(--da-even); }

.follow-list { display: grid; gap: var(--sp-2); }
.follow-list li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--da-surface-2); }
.follow-list li > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.follow-list small { font-size: var(--fs-xs); color: var(--da-text-2); }
.follow-list .cause-mark { width: 40px; height: 40px; font-size: 15px; }
.follow-list--panel { max-width: 760px; }
.follow-list--panel li { background: var(--da-surface-1); border: 1px solid var(--da-border); }
.follow-btn { position: relative; cursor: pointer; }
.follow-btn input { position: absolute; opacity: 0; }
.follow-btn span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--da-text); color: var(--da-bg); font-size: var(--fs-sm); font-weight: 700; }
.follow-btn input:checked + span { background: transparent; color: var(--da-text); box-shadow: inset 0 0 0 1px var(--da-border-strong); }
.follow-btn input:checked + span::before { content: "✓ "; white-space: pre; }
.follow-btn input:focus-visible + span { box-shadow: var(--ring); }

/* ---------- Composer ---------- */

.composer-page { max-width: 1240px; margin-inline: auto; }
.page-head--tight { padding-bottom: var(--sp-4); }
.modepick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.modepick__tab {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-md);
	background: var(--da-surface-1);
	border: 1px solid var(--da-border);
	text-align: left;
	transition: border-color var(--t-fast), background var(--t-fast);
}
.modepick__tab:hover { border-color: var(--da-border-strong); }
.modepick__tab b { display: block; }
.modepick__tab small { font-size: var(--fs-xs); color: var(--da-text-2); }
.modepick__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--da-surface-2); }
.modepick__tab--text .modepick__icon { color: var(--da-amber); }
.modepick__tab--video .modepick__icon { color: var(--da-red-hot); }
.modepick__tab--photo .modepick__icon { color: var(--da-even); }
.modepick__tab--complaint .modepick__icon { color: var(--da-verified); }
.modepick__tab[aria-selected="true"] { border-color: var(--da-red); background: linear-gradient(135deg, var(--da-red-soft), transparent 70%), var(--da-surface-1); box-shadow: 0 0 0 1px var(--da-red); }

.compose-form__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }
.btn--marker-sm { font-family: var(--font-marker); font-weight: 400; font-size: 1.15rem; }

.aside-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--da-text-3); }
.post--preview .post__title { margin-top: var(--sp-3); }
.post--preview .post__body { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.preview-media { display: none; place-items: center; margin-top: var(--sp-3); aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--da-surface-2); color: var(--da-text-3); }
.preview-media .i { width: 36px; height: 36px; }
.post--preview[data-mode="video"] .preview-media,
.post--preview[data-mode="photo"] .preview-media { display: grid; }
.preview-media.has-media { background: linear-gradient(135deg, var(--da-red), #111); color: #fff; }

.picked { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--da-surface-2); }
.picked > span:last-child { display: grid; }
.picked small { font-size: var(--fs-xs); color: var(--da-text-2); }

.tips__list { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--da-text-2); }
.tips__list li { display: flex; gap: 10px; }
.tips__list .i { flex: none; width: 18px; height: 18px; color: var(--da-even); stroke-width: 3; }
.tips__list .is-no .i { color: var(--da-red-hot); }
.tips__list b { color: var(--da-text); }
.how--stack { grid-template-columns: 1fr; margin: 0; gap: var(--sp-2); }
.how--stack li { grid-template-columns: 30px 1fr; align-items: center; column-gap: 10px; padding: var(--sp-3); }
.how--stack span { grid-row: span 2; margin: 0; }

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--sp-4); padding: 0; border: 0; }
.swatches legend { width: 100%; margin-bottom: 6px; }
.swatches label { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--sw); cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatches label:has(input:checked) { box-shadow: 0 0 0 3px var(--da-bg), 0 0 0 5px var(--sw); }
.swatches label:has(input:focus-visible) { outline: 2px solid var(--da-text); outline-offset: 4px; }

/* ---------- Account shell ---------- */

.account {
	display: grid; grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--sp-8);
	max-width: 1320px;
	margin: 0 auto;
	padding-top: var(--sp-6);
}
.account__nav { position: sticky; top: calc(var(--topbar-h) + 16px); align-self: start; }
.account__me { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin-bottom: var(--sp-2); border-radius: var(--r-md); background: var(--da-surface-1); border: 1px solid var(--da-border); }
.account__me > span { display: grid; min-width: 0; }
.account__me b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account__me small { font-size: var(--fs-xs); color: var(--da-text-2); }
.account__group { padding: var(--sp-4) 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-text-3); }
.account__nav a:not(.account__me) { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-sm); font-weight: 600; color: var(--da-text-2); }
.account__nav a:not(.account__me):hover { background: var(--da-surface-2); color: var(--da-text); }
.account__nav a[aria-current="page"] { background: var(--da-surface-2); color: var(--da-text); box-shadow: inset 3px 0 0 var(--da-red); }
.account__nav a[aria-current="page"] .i { color: var(--da-red); }
.account__nav .i { width: 18px; height: 18px; }
.account__preview { display: flex; gap: 6px; margin-top: var(--sp-5); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--da-amber-soft); font-size: var(--fs-xs); color: var(--da-amber); }
.account__preview .i { width: 14px; height: 14px; flex: none; }

.account > * { min-width: 0; }
.account__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.account__head .kicker { margin-bottom: 4px; }
.portal-id { display: flex; align-items: center; gap: var(--sp-4); }
.portal-id .page-title { display: flex; align-items: center; gap: 8px; }
.account__cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-4); }
.account__cols .panel + .panel { margin-top: 0; }
.panel__title--sm { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-lg); }

.statcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: 0 0 var(--sp-6); }
.statcards div { padding: var(--sp-4); border-radius: var(--r-md); background: var(--da-surface-1); border: 1px solid var(--da-border); }
.statcards dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--da-text-2); }
.statcards dt .i { width: 15px; height: 15px; }
.statcards dd { margin: 8px 0 2px; font-family: var(--font-display); font-size: 34px; line-height: 1; }
.statcards small { font-size: var(--fs-xs); color: var(--da-text-3); }
.statcards small.trend--down { color: var(--da-even); }
.statcards__even { border-color: color-mix(in srgb, var(--da-even) 40%, var(--da-border)) !important; background: linear-gradient(160deg, var(--da-even-soft), transparent 70%), var(--da-surface-1) !important; }
.statcards__even dt { color: var(--da-even); }
.statcards__alert { border-color: color-mix(in srgb, var(--da-red) 45%, var(--da-border)) !important; background: linear-gradient(160deg, var(--da-red-soft), transparent 70%), var(--da-surface-1) !important; }
.statcards__alert dt { color: var(--da-red-hot); }

.mycase { display: block; padding: var(--sp-4); margin-bottom: var(--sp-3); border-radius: var(--r-md); background: var(--da-surface-2); border: 1px solid transparent; transition: border-color var(--t-fast); }
.mycase:hover { border-color: var(--da-border-strong); }
.mycase__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mycase__title { display: block; margin-top: 10px; }
.mycase .track { margin-top: var(--sp-3); padding: var(--sp-3) 0; background: none; }
.mycase .track__time { display: none; }

.notes li + li { border-top: 1px solid var(--da-border); }
.note { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); border-radius: var(--r-sm); }
.note:hover { background: var(--da-surface-2); }
.note__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--da-surface-2); color: var(--da-text-2); }
.note__icon .i { width: 17px; height: 17px; }
.note--company .note__icon { background: var(--da-verified-soft); color: var(--da-verified); }
.note--win .note__icon { background: var(--da-even-soft); color: var(--da-even); }
.note--cause .note__icon { background: var(--da-amber-soft); color: var(--da-amber); }
.note__text { flex: 1; font-size: var(--fs-sm); line-height: 1.45; color: var(--da-text-2); }
.note__text b { color: var(--da-text); }
.note__text small { display: block; font-size: var(--fs-xs); color: var(--da-text-3); }
.note.is-unread .note__text { color: var(--da-text); }
.note__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--da-red); }
.notes__group { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-text-3); }
.notes__group:first-child { margin-top: 0; }

.data-table td { vertical-align: middle; }
.data-table__post { display: flex; align-items: center; gap: var(--sp-3); min-width: 260px; white-space: normal; }
.data-table__post > span:last-child { display: grid; }
.data-table__post b { line-height: 1.3; }
.data-table__post small { font-size: var(--fs-xs); color: var(--da-text-3); }
.data-table__post:hover b { color: var(--da-red); }
.data-table__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--da-surface-2); color: var(--da-text-2); }
.data-table__icon .i { width: 16px; height: 16px; }
.data-table__actions { text-align: right; }
.data-table__actions > * { display: inline-grid; vertical-align: middle; }

.vgrid--account { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.results__title--spaced { margin-top: var(--sp-10); }

/* Settings */
.settings-jump { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 4; display: flex; gap: 4px; margin-bottom: var(--sp-4); padding: 4px; overflow-x: auto; border-radius: var(--r-pill); background: color-mix(in srgb, var(--da-surface-1) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--da-border); scrollbar-width: none; }
.settings-jump a { flex: none; padding: 7px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; color: var(--da-text-2); }
.settings-jump a:hover { background: var(--da-surface-3); color: var(--da-text); }
.settings-section { scroll-margin-top: calc(var(--topbar-h) + 72px); }
.settings-section--danger { border-color: color-mix(in srgb, var(--da-red) 35%, var(--da-border)); }
.settings-form { max-width: 820px; }
.avatar-edit { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.avatar-edit .avatar--xl { box-shadow: none; }
.avatar-edit label.btn { cursor: pointer; }

.connections { display: grid; gap: var(--sp-2); }
.connections li, .sessions li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--da-surface-2); }
.connections li > span:not([class]), .sessions li > span:not([class]) { display: grid; flex: 1; min-width: 0; }
.connections small, .sessions small { font-size: var(--fs-xs); color: var(--da-text-2); }
.sessions { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sessions .i { color: var(--da-text-3); }

.notify-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.notify-table th { padding: 8px 4px; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--da-text-3); }
.notify-table th:not(:first-child), .notify-table td:not(:first-child) { width: 90px; text-align: center; }
.notify-table td { padding: 12px 4px; border-top: 1px solid var(--da-border); }

.data-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0; }
.data-row + .data-row { border-top: 1px solid var(--da-border); }
.data-row > span { display: grid; flex: 1; min-width: 240px; }
.data-row small { font-size: var(--fs-sm); color: var(--da-text-2); }

/* Company portal */
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--sp-4); font-size: var(--fs-sm); font-weight: 700; color: var(--da-text-2); }
.back-link:hover { color: var(--da-text); }
.back-link .i { width: 16px; height: 16px; }
.portal-case { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-4); }
.portal-case .panel + .panel, .portal-case .panel + form { margin-top: var(--sp-4); }
.portal-case .case__title { font-size: var(--fs-xl); }
.portal-case .case__byline { font-size: var(--fs-sm); color: var(--da-text-2); }
.portal-case .case__body { font-size: var(--fs-md); }
.reply-box textarea { width: 100%; margin-bottom: var(--sp-4); }
.reply-box__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4); }
.pledge-note--sm { margin-top: var(--sp-4); padding: var(--sp-3); font-size: var(--fs-xs); }
.sla { font-weight: 800; }
.sla b { font-family: var(--font-display); font-weight: 400; font-size: 34px; }
.sla--late { color: var(--da-red-hot); }
.sla--ok { color: var(--da-text); }

.admin-list li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.admin-list li + li { border-top: 1px solid var(--da-border); }
.admin-list li > span:first-child { display: grid; flex: 1; min-width: 0; }
.admin-list small { font-size: var(--fs-xs); color: var(--da-text-2); }
.admin-list__bar { width: 140px; height: 8px; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.account { grid-template-columns: 1fr; gap: var(--sp-4); }
	.account__nav { position: static; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.account__nav ul { display: flex; gap: 4px; }
	.account__me, .account__group, .account__preview { display: none; }
	.account__nav a:not(.account__me) { white-space: nowrap; background: var(--da-surface-1); border: 1px solid var(--da-border); }
	.account__cols, .portal-case { grid-template-columns: 1fr; }
	.auth-page { grid-template-columns: 1fr; }
	.auth-page__art { min-height: 280px; }
	.statcards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.modepick { grid-template-columns: repeat(2, 1fr); }
	.modepick__tab small { display: none; }
	.field-row, .reply-box__row { grid-template-columns: 1fr; }
	.onboard__card { padding: var(--sp-5); margin-inline: calc(-1 * var(--gutter) + 8px); }
	.auth-page { margin-inline: calc(-1 * var(--gutter) + 8px); }
	.auth-page__art { display: none; }
	.auth-page__panel { padding: var(--sp-8) var(--sp-5); }
	.stepdots li { font-size: 0; gap: 0; justify-content: center; }
	.stepdots li span { font-size: 12px; }
	.statcards dd { font-size: 28px; }
	.admin-list__bar { display: none; }
}