/* Copyright © 2026 MELDIX. TrioSoft. All rights reserved. */
/* TrioSoft «Графит» — TrioSoft ID (/account). The account keeps its own component sheets
   (account.css, the per-tab sheets, os-account*, os-labs); this layer gives it the shell:
   page width, the identity card, the grouped section menu, section heads, cards, buttons,
   fields and the sign-in card — all on graphite surfaces with hairlines. */

body.account-page .account-main.ts-account { width: min(var(--p-content), calc(100% - var(--p-gutter) * 2)) !important; max-width: none !important; margin: 0 auto !important; padding: clamp(20px, 3vw, 36px) 0 0 !important; background: transparent !important; }
.ts-account-body { display: block; }

/* sign-in, 2FA and loading: one centred card with the violet light behind it */
.ts-account:has(#loginView:not(.hidden)) .ts-account-body,
.ts-account:has(#twoFactorView:not(.hidden)) .ts-account-body,
.ts-account:has(#accountLoading:not(.hidden)) .ts-account-body { width: min(440px, 100%); margin: 6vh auto 0; }
body.account-page .login-account { position: relative; overflow: hidden; isolation: isolate; padding: 36px 28px !important; border: 0 !important; border-radius: var(--p-r-xl) !important; background: var(--p-surface) !important; box-shadow: inset 0 0 0 1px var(--p-line), var(--p-shadow-l) !important; }
body.account-page .login-account::before { content: ''; position: absolute; inset: 0 0 auto; z-index: -1; height: 200px; background: radial-gradient(60% 100% at 50% 0%, rgba(var(--p-violet-rgb), .2), transparent 70%), linear-gradient(var(--p-line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--p-line) 1px, transparent 1px) 0 0 / 32px 32px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
body.account-page .login-account h1 { font-family: var(--p-display) !important; font-size: 26px !important; font-weight: 600 !important; letter-spacing: -.03em !important; }
body.account-page .login-account p { color: var(--p-ink-3) !important; }
body.account-page .account-logo { width: 64px !important; height: 64px !important; border-radius: 18px !important; clip-path: none !important; background: var(--p-surface-3) !important; box-shadow: inset 0 0 0 1px var(--p-line-2), 0 18px 40px -16px #000 !important; }
body.account-page .account-logo img { width: 34px !important; height: 34px !important; }
body.account-page .account-kicker { color: var(--p-violet-ink) !important; font-family: var(--p-mono) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .04em !important; }
body.account-page .provider-buttons > * { min-height: 44px !important; border: 0 !important; border-radius: var(--p-r-s) !important; color: var(--p-ink) !important; background: var(--p-surface-2) !important; box-shadow: inset 0 0 0 1px var(--p-line-2) !important; font-weight: 500 !important; }
@media (hover: hover) { body.account-page .provider-buttons > *:hover { background: var(--p-surface-3) !important; box-shadow: inset 0 0 0 1px var(--p-line-3) !important; } }

/* dashboard: identity sidebar + content */
body.account-page .account-dashboard { grid-template-columns: 280px minmax(0, 1fr) !important; gap: 28px !important; align-items: start !important; }
body.account-page .profile-sidebar {
  position: sticky !important;
  top: calc(var(--p-header) + 20px) !important;
  max-height: calc(100vh - var(--p-header) - 40px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-radius: var(--p-r-l) !important;
  background: var(--p-surface) !important;
  box-shadow: inset 0 0 0 1px var(--p-line) !important;
  scrollbar-width: none;
}
body.account-page .profile-sidebar::-webkit-scrollbar { display: none; }
body.account-page .profile-sidebar > :not(.id-card) { margin-inline: 10px !important; }
body.account-page .id-card { position: relative; padding: 0 16px 16px !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: center; }
body.account-page .id-card-banner { height: 76px !important; margin: 0 -16px !important; border-radius: var(--p-r-l) var(--p-r-l) 0 0 !important; background: radial-gradient(70% 140% at 50% 0%, rgba(var(--p-violet-rgb), .3), transparent 70%), linear-gradient(var(--p-line) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--p-line) 1px, transparent 1px) 0 0 / 24px 24px, var(--p-surface-2) !important; }
body.account-page .profile-avatar { margin-top: -38px !important; border-radius: 22px !important; background: linear-gradient(135deg, var(--p-coral), var(--p-violet)) !important; box-shadow: 0 0 0 4px var(--p-surface), 0 14px 30px -12px #000 !important; }
body.account-page #profileName { font-family: var(--p-display) !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.025em !important; }
body.account-page #profileEmail { color: var(--p-ink-4) !important; font-size: 12.5px !important; }
body.account-page .role-badge, body.account-page .id-level-chip, body.account-page .id-premium-chip { height: 22px; padding: 0 7px !important; border: 0 !important; border-radius: 6px !important; color: var(--p-ink-3) !important; background: var(--p-surface-3) !important; box-shadow: inset 0 0 0 1px var(--p-line-2) !important; font: 500 11px var(--p-mono) !important; }
body.account-page .id-level-chip { color: var(--p-violet-ink) !important; }
body.account-page .id-premium-chip { color: var(--p-gold-ink) !important; }
body.account-page .sidebar-security-mini { padding: 12px !important; border: 0 !important; border-radius: var(--p-r-m) !important; background: var(--p-bg-2) !important; box-shadow: inset 0 0 0 1px var(--p-line-2) !important; }
body.account-page .score-track { height: 4px !important; border-radius: 2px !important; background: var(--p-surface-3) !important; }
body.account-page .score-track i { background: var(--p-mint) !important; box-shadow: 0 0 8px var(--p-mint); }

/* section menu: grouped, mono labels, the current section lit by a violet bar */
html[data-theme] body.account-page .profile-nav { display: grid !important; gap: 1px !important; margin-top: 8px !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
body.account-page .profile-nav-label { margin: 16px 10px 6px; color: var(--p-ink-4); font: 500 11px var(--p-mono); letter-spacing: .05em; text-transform: uppercase; }
body.account-page .profile-nav-label.is-gap { height: 1px; margin: 12px 6px; background: var(--p-line); }
html[data-theme] body.account-page .profile-nav button {
  position: relative;
  min-height: 36px !important;
  gap: 10px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: var(--p-r-s) !important;
  color: var(--p-ink-3) !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 500 14px var(--p-font) !important;
}
html[data-theme] body.account-page .profile-nav button .ui-icon { width: 16px !important; height: 16px !important; padding: 0 !important; border-radius: 0 !important; color: var(--p-ink-4) !important; background: none !important; box-shadow: none !important; }
@media (hover: hover) { html[data-theme] body.account-page .profile-nav button:hover { color: var(--p-ink) !important; background: var(--p-hover) !important; } }
html[data-theme] body.account-page .profile-nav button.active { color: var(--p-ink) !important; background: var(--p-hover-2) !important; box-shadow: none !important; }
html[data-theme] body.account-page .profile-nav button.active .ui-icon { color: var(--p-ink) !important; }
html[data-theme] body.account-page .profile-nav button.active::before { content: '' !important; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 0 2px 2px 0; background: var(--p-violet); box-shadow: 0 0 8px var(--p-violet); }
html[data-theme] body.account-page .profile-nav button[data-account-tab="premium"] .ui-icon { color: var(--p-gold-ink) !important; }
html[data-theme] body.account-page .profile-nav .danger-nav, html[data-theme] body.account-page .profile-nav [data-account-tab="danger"] { color: var(--p-coral-ink) !important; }
html[data-theme] body.account-page .profile-nav .danger-nav .ui-icon { color: var(--p-coral-ink) !important; }
html[data-theme] body.account-page .profile-nav [data-account-tab="danger"].active { background: rgba(var(--p-coral-rgb), .08) !important; }
html[data-theme] body.account-page .profile-nav [data-account-tab="danger"].active::before { background: var(--p-coral); box-shadow: 0 0 8px var(--p-coral); }
html[data-theme] body.account-page .profile-nav .nav-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px !important; color: var(--p-coral-ink) !important; background: rgba(var(--p-coral-rgb), .12) !important; font: 500 11px/18px var(--p-mono) !important; text-align: center; }

/* content: section heads in Inter Tight, cards on the surface */
body.account-page .account-tab.account-card { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
body.account-page .account-tab :is(h1, h2) { font-family: var(--p-display) !important; font-weight: 600 !important; letter-spacing: -.03em !important; }
body.account-page .account-tab h1 { font-size: clamp(28px, 3vw, 38px) !important; }
body.account-page .account-tab h2 { font-size: clamp(20px, 2vw, 24px) !important; }
body.account-page .account-tab :is(h3, h4) { font-family: var(--p-display) !important; font-weight: 600 !important; letter-spacing: -.02em !important; }
body.account-page .account-tab p { color: var(--p-ink-3); }
body.account-page .section-heading { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(22px, 3vw, 32px) !important; border: 0 !important; border-radius: var(--p-r-l) !important; background: var(--p-surface) !important; box-shadow: inset 0 0 0 1px var(--p-line) !important; }
body.account-page .section-heading::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 90% 0%, rgba(var(--p-violet-rgb), .16), transparent 70%), linear-gradient(var(--p-line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--p-line) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: radial-gradient(60% 120% at 90% 0%, #000, transparent 80%); mask-image: radial-gradient(60% 120% at 90% 0%, #000, transparent 80%); }
body.account-page .section-heading > div { display: grid; gap: 8px; }
body.account-page .section-icon { display: grid; place-items: center; flex: none; width: 48px !important; height: 48px !important; border-radius: var(--p-r-m) !important; color: var(--p-ink-2) !important; background: var(--p-surface-3) !important; box-shadow: inset 0 0 0 1px var(--p-line-2) !important; }
body.account-page .section-icon .ui-icon { width: 22px !important; height: 22px !important; }
body.account-page :is(.account-section, .settings-card, .account-panel, .home-status-card, .home-command-center > section, .security-card, .device-card, .connection-card, .library-card, .review-row, .update-card, .premium-card, .support-card, .privacy-card, .notification-card, .profile-form-section, .style-studio, .labs-card) {
  border: 0 !important;
  border-radius: var(--p-r-l) !important;
  background: var(--p-surface) !important;
  box-shadow: inset 0 0 0 1px var(--p-line) !important;
}
body.account-page .home-identity-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0 !important;
  border-radius: var(--p-r-l) !important;
  background: var(--p-surface) !important;
  box-shadow: inset 0 0 0 1px var(--p-line) !important;
}
body.account-page .home-identity-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 140% at 85% 0%, rgba(var(--p-violet-rgb), .24), transparent 70%), linear-gradient(var(--p-line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--p-line) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: radial-gradient(60% 140% at 85% 0%, #000, transparent 80%); mask-image: radial-gradient(60% 140% at 85% 0%, #000, transparent 80%); }
body.account-page .home-identity-hero :is(h1, h2, strong) { color: var(--p-ink) !important; }
body.account-page .home-status-icon { border-radius: var(--p-r-s) !important; color: var(--p-ink-2) !important; background: var(--p-surface-3) !important; box-shadow: inset 0 0 0 1px var(--p-line-2); }

/* panel icons, the identity banner and the Labs hero: graphite tiles instead of violet fills */
body.account-page .panel-icon, body.account-page .tab-icon, body.account-page .card-icon { border-radius: var(--p-r-s) !important; color: var(--p-ink-2) !important; background: var(--p-surface-3) !important; box-shadow: inset 0 0 0 1px var(--p-line-2) !important; }
body.account-page .home-identity-hero > .pfx { opacity: .4 !important; }
body.account-page .hih-avatar { background: rgba(8, 9, 10, .5) !important; }
body.account-page .hih-kicker { color: var(--p-ink-3) !important; font-family: var(--p-mono) !important; }
body.account-page .hih-copy p { color: var(--p-ink-3) !important; }
body.account-page .hih-progress div { height: 4px !important; background: var(--p-surface-4) !important; }
body.account-page .hih-progress i { background: var(--p-violet) !important; box-shadow: 0 0 8px var(--p-violet); }
body.account-page .hih-stats button { border-radius: var(--p-r-m) !important; color: var(--p-ink) !important; background: rgba(8, 9, 10, .55) !important; box-shadow: inset 0 0 0 1px var(--p-line-2) !important; }
body.account-page .hih-stats button:hover { background: var(--p-surface-3) !important; }
body.account-page .hih-stats strong, body.account-page .labs-stat strong, body.account-page .labs-ring strong { font-family: var(--p-mono) !important; font-weight: 500 !important; letter-spacing: -.03em; }
body.account-page .hih-stats small { color: var(--p-ink-4) !important; }
body.account-page .labs-hero { border-radius: var(--p-r-l) !important; color: var(--p-ink) !important; background: var(--p-surface) !important; box-shadow: inset 0 0 0 1px var(--p-line) !important; }
body.account-page .labs-orb { opacity: .16 !important; filter: blur(70px) !important; }
body.account-page .labs-grid { opacity: .5; }
body.account-page .labs-hero-kicker { color: var(--p-violet-ink) !important; background: transparent !important; padding: 0 !important; font-weight: 500 !important; }
body.account-page .labs-hero p, body.account-page .labs-level-copy span, body.account-page .labs-stat small { color: var(--p-ink-3) !important; }
body.account-page .labs-hero-level, body.account-page .labs-stat { border-radius: var(--p-r-m) !important; color: var(--p-ink) !important; background: var(--p-bg-2) !important; box-shadow: inset 0 0 0 1px var(--p-line-2) !important; }
body.account-page .labs-stat > span { border-radius: var(--p-r-s) !important; background: var(--p-surface-3) !important; }
body.account-page .labs-level-bar { height: 4px !important; background: var(--p-surface-4) !important; }
body.account-page .labs-level-bar i { background: var(--p-violet) !important; }

/* buttons: white primary, graphite secondary, coral danger */
body.account-page .account-button { min-height: 40px; border: 0 !important; border-radius: var(--p-r-s) !important; clip-path: none !important; color: var(--p-ink) !important; background: var(--p-surface-2) !important; box-shadow: inset 0 0 0 1px var(--p-line-2) !important; font: 500 14px var(--p-font) !important; transition: background-color .15s, transform .1s; }
body.account-page .account-button:not(:disabled):active { transform: scale(.98); }
body.account-page .account-button.primary { color: var(--p-on-solid) !important; background: var(--p-solid) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 24px -10px rgba(255, 255, 255, .3) !important; }
body.account-page .account-button.secondary { color: var(--p-ink) !important; background: var(--p-surface-2) !important; }
body.account-page .account-button.danger { color: var(--p-coral-ink) !important; background: rgba(var(--p-coral-rgb), .08) !important; box-shadow: inset 0 0 0 1px rgba(var(--p-coral-rgb), .3) !important; }
body.account-page .account-button:disabled { opacity: .45; }
@media (hover: hover) { body.account-page .account-button:not(.primary):not(.danger):hover { background: var(--p-surface-3) !important; box-shadow: inset 0 0 0 1px var(--p-line-3) !important; } body.account-page .account-button.primary:hover { background: #fff !important; } }
body.account-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { border-radius: var(--p-r-s) !important; }

@media (max-width: 900px) {
  body.account-page .account-dashboard { grid-template-columns: minmax(0, 1fr) !important; }
  body.account-page .profile-sidebar { position: static !important; max-height: none !important; overflow: visible !important; }
  body.account-page .profile-nav-label { display: none; }
  body.account-page .section-heading { padding: 20px !important; }
  body.account-page .section-icon { display: none; }
}