/* Copyright © 2026 MELDIX. TrioSoft. All rights reserved. */
/* TrioSoft OS — TrioSoft ID as the "System Settings" app */

body.account-page { background: var(--os-wall) !important; }
body.account-page > header.account-header.os-menubar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: var(--os-bar-h) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 8px 0 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--os-chrome) !important;
  box-shadow: inset 0 -1px 0 var(--os-line) !important;
  justify-content: flex-start !important;
}

.account-header .account-brand img { display: none; }
.account-header .account-brand strong { font-family: var(--os-display); font-size: 14px !important; font-weight: 800 !important; }
.account-header .account-brand small { display: none; }

.account-main.os-stage { width: min(calc(var(--os-content) + 40px), calc(100% - var(--os-gutter) * 2)) !important; margin: 22px auto 0 !important; padding: 0 !important; }
.account-main .os-app-window > .os-window-body { padding: 0; }

/* sign-in / 2FA / loading render as a compact system dialog */
.account-main:has(#loginView:not(.hidden)) .os-app-window,
.account-main:has(#twoFactorView:not(.hidden)) .os-app-window,
.account-main:has(#accountLoading:not(.hidden)) .os-app-window { width: min(440px, 100%); margin: 5vh auto 0; }
.account-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 220px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.account-loading span { width: 26px; height: 26px; border: 3px solid var(--os-hover-2); border-top-color: var(--os-accent); border-radius: 50%; animation: os-spin .8s linear infinite; }
.login-account { display: grid; justify-items: center; gap: 12px; padding: 30px 28px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; animation: none !important; }
.login-account h1 { font-size: 24px !important; font-weight: 800 !important; }
.login-account > p { color: var(--os-ink-2); font-size: 14.5px; }
.account-logo { display: grid; place-items: center; width: 84px !important; height: 84px !important; border: 0 !important; border-radius: 22px !important; background: var(--os-pane) !important; box-shadow: inset 0 0 0 1px var(--os-line) !important; }
.account-logo img { width: 58px !important; height: 58px !important; }
.provider-buttons { display: grid; gap: 6px; width: 100%; }
.provider-buttons > * { border: 0 !important; border-radius: 11px !important; background: var(--os-pane) !important; box-shadow: none !important; }
.provider-buttons > *:hover { background: var(--os-hover-2) !important; }
.account-security { border: 0 !important; border-radius: 12px !important; background: var(--os-pane) !important; text-align: left; }
.passkey-login-divider { color: var(--os-ink-3); font-size: 12.5px; }

/* settings layout: source list + detail pane */
.account-dashboard { grid-template-columns: 270px minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; }
.profile-sidebar {
  position: sticky !important;
  top: var(--os-bar-h) !important;
  align-self: start;
  max-height: calc(100vh - var(--os-bar-h) - var(--os-dock-h) - 40px);
  overflow: auto;
  padding: 22px 12px !important;
  border: 0 !important;
  border-right: 1px solid var(--os-line) !important;
  border-radius: 0 0 0 var(--os-r-win) !important;
  background: var(--os-pane) !important;
  box-shadow: none !important;
  animation: none !important;
}
.profile-avatar { border-radius: 50% !important; background: conic-gradient(from 200deg, var(--os-coral), var(--os-violet), var(--os-mint), var(--os-coral)) !important; box-shadow: 0 0 0 4px var(--os-pane), 0 0 0 5px var(--os-line-2) !important; font-family: var(--os-display); }
#profileName { font-size: 19px !important; }
.role-badge { border: 0 !important; border-radius: 6px !important; background: var(--os-hover-2) !important; font-family: var(--os-mono); font-size: 11px !important; }
.sidebar-security-mini { padding: 10px 12px !important; border: 0 !important; border-radius: 12px !important; background: var(--os-window) !important; }
.score-track { border-radius: 5px !important; background: var(--os-hover-2) !important; }
.score-track i { background: linear-gradient(90deg, var(--os-coral), var(--os-violet), var(--os-mint)) !important; }
.profile-nav { gap: 1px !important; text-align: left; }
.profile-nav button { min-height: 36px !important; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important; color: var(--os-ink) !important; background: transparent !important; box-shadow: none !important; font-size: 14px !important; font-weight: 500 !important; }
.profile-nav button:hover { background: var(--os-hover-2) !important; }
.profile-nav button.active { color: #fff !important; background: var(--os-accent) !important; }
.profile-nav button .ui-icon {
  width: 26px !important;
  height: 26px !important;
  padding: 5px !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: var(--tone, var(--os-violet)) !important;
  stroke-width: 2;
  flex: none;
}
.profile-nav button:nth-child(14n + 2) .ui-icon { --tone: #8e8579; }
.profile-nav button:nth-child(14n + 3) .ui-icon { --tone: #2f9bff; }
.profile-nav button:nth-child(14n + 4) .ui-icon { --tone: var(--os-mint); }
.profile-nav button:nth-child(14n + 5) .ui-icon { --tone: #4b4552; }
.profile-nav button:nth-child(14n + 6) .ui-icon { --tone: #19b0c9; }
.profile-nav button:nth-child(14n + 7) .ui-icon { --tone: var(--os-coral); }
.profile-nav button:nth-child(14n + 8) .ui-icon { --tone: var(--os-violet); }
.profile-nav button:nth-child(14n + 9) .ui-icon { --tone: #ff4f8b; }
.profile-nav button:nth-child(14n + 10) .ui-icon { --tone: #3fb950; }
.profile-nav button:nth-child(14n + 11) .ui-icon { --tone: #e9a92b; }
.profile-nav button:nth-child(14n + 12) .ui-icon { --tone: #2f9bff; }
.profile-nav button:nth-child(14n + 13) .ui-icon { --tone: #6e6678; }
.profile-nav button:nth-child(14n + 14) .ui-icon { --tone: #b06cff; }
.profile-nav button:nth-child(14n + 15) .ui-icon { --tone: var(--os-danger); }

/* detail pane */
.account-tab.account-card { padding: clamp(20px, 3vw, 32px) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.account-tab h1 { font-size: clamp(26px, 2.8vw, 36px) !important; font-weight: 800 !important; letter-spacing: -.04em !important; }
.account-kicker { color: var(--os-ink-3) !important; font-family: var(--os-mono); font-size: 11.5px !important; letter-spacing: .06em !important; }
.account-tab :is(.account-panel, .home-status-card, .settings-list > *, .account-list > *, .profile-form-section, .updates-overview, .danger-action) {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--os-pane) !important;
  box-shadow: none !important;
}
.panel-icon, .section-icon, .home-status-icon, .profile-form-section-icon, .updates-overview-icon { border: 0 !important; border-radius: 9px !important; color: #fff !important; background: var(--os-accent) !important; }
.account-button { border-radius: 10px !important; font-weight: 600 !important; }
.account-button.primary { color: #fff !important; border: 0 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--os-accent) 82%, white), var(--os-accent)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(var(--os-accent-rgb), .8) !important; }
.account-button.secondary { border: 0 !important; background: var(--os-window) !important; box-shadow: inset 0 0 0 1px var(--os-line-2) !important; color: var(--os-ink) !important; }
.account-button.danger { border: 0 !important; color: #fff !important; background: linear-gradient(180deg, #ff6b50, var(--os-danger)) !important; }
.switch input:checked + span, .switch input:checked + i, .switch.on { background: var(--os-mint) !important; }

/* OAuth consent & public profile (server-rendered) */
.consent-shell, .public-profile-shell { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.consent-card { display: grid; justify-items: center; gap: 12px; width: min(440px, 100%); padding: 0 0 26px; overflow: hidden; border-radius: var(--os-r-win); background: var(--os-window); box-shadow: var(--os-pop-shadow); text-align: center; animation: os-open .5s var(--os-out) both; }
.consent-card::before { content: ''; display: block; width: 100%; height: 42px; border-bottom: 1px solid var(--os-line); background: radial-gradient(circle at 20px 21px, var(--os-coral) 6px, transparent 6.5px), radial-gradient(circle at 41px 21px, var(--os-violet) 6px, transparent 6.5px), radial-gradient(circle at 62px 21px, var(--os-mint) 6px, transparent 6.5px), var(--os-pane); }
.consent-card .provider-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-top: 10px; overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--os-violet) 70%, white), var(--os-violet)); font-family: var(--os-display); font-size: 30px; font-weight: 800; }
.consent-card .provider-icon img { width: 100%; height: 100%; object-fit: cover; }
.consent-card h1 { font-size: 23px; }
.consent-card p { padding-inline: 26px; color: var(--os-ink-2); }
.consent-card ul { display: grid; gap: 6px; width: calc(100% - 52px); margin: 4px 0; padding: 0; list-style: none; text-align: left; }
.consent-card li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--os-pane); font-size: 14px; }
.consent-card li::before { content: '✓'; color: var(--os-success); font-weight: 800; }
.consent-card form { width: calc(100% - 52px); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (max-width: 900px) {
  .account-dashboard { grid-template-columns: 1fr !important; }
  .profile-sidebar { position: static !important; max-height: none; border-right: 0 !important; border-bottom: 1px solid var(--os-line) !important; border-radius: 0 !important; }
}