/* Authentication and account management extend the existing dashboard tokens. */
[hidden] { display: none !important; }
.breadcrumb { min-width: 0; }
.breadcrumb b { overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { flex-shrink: 0; }
.auth-gate { max-width: none; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 23px; padding: 30px 20px; text-align: center; }
.auth-gate>p { color: var(--secondary); font-size: 12px; }
.auth-brand { padding: 0; }
.auth-brand .brand-copy { display: flex; text-align: left; }
.auth-brand .brand-copy strong { font-size: 20px; }
.auth-brand .brand-copy small { font-size: 8px; }
.auth-brand .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
.auth-spinner { width: 25px; height: 25px; border: 2px solid var(--border); border-top-color: var(--purple); border-radius: 50%; animation: spin .9s linear infinite; }
.auth-layout { min-height: 100dvh; width: 100%; padding: 0; display: grid; grid-template-columns: 1.05fr 1fr; max-width: none; }
.auth-story { padding: 47px 55px 30px; display: flex; flex-direction: column; position: relative; isolation: isolate; overflow: hidden; border-right: 1px solid var(--border); background: radial-gradient(ellipse at 60% 45%,var(--purple-tint),transparent 75%),var(--sidebar); }
.auth-story:before { content:''; position: absolute; inset: 0; background-image: radial-gradient(var(--muted) .6px,transparent .6px); background-size: 24px 24px; opacity: .18; z-index: -1; mask-image: linear-gradient(transparent,black 40%,transparent); }
.auth-story:after { content:''; width: 600px; height: 600px; border: 1px solid #9677ec0d; border-radius: 50%; position: absolute; left: 30%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 80px #9677ec05,0 0 0 160px #9677ec03; z-index:-1; }
.auth-story-content { margin: auto 0; padding: 80px 0; }
.auth-story-content>.eyebrow { color: var(--purple); font-size: 9px; letter-spacing: 1.6px; }
.auth-story-content h1 { font-size: clamp(30px,3vw,46px); font-weight: 550; letter-spacing: -1.6px; line-height: 1.4; margin: 20px 0; }
.auth-story-content>p { color: var(--secondary); font-size: 13px; line-height: 1.9; }
.auth-network { display: flex; align-items: center; gap: 13px; margin-top: 58px; max-width: 395px; }
.auth-network>span { background: var(--panel); border: 1px solid var(--border); color: var(--secondary); border-radius: 11px; padding: 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 10px; white-space: nowrap; }
.auth-network>span>svg { color: var(--cyan); width: 26px; height: 26px; }
.auth-network>span:first-child>svg { color: var(--orange); }
.auth-network>.auth-network-shield { border-color: #9677ec55; padding: 13px; background: var(--purple-tint); }
.auth-network>.auth-network-shield>svg { color: var(--purple); }
.auth-network-line { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,var(--purple),transparent); min-width: 15px; }
.auth-security-note { color: var(--muted); font-size: 10px; margin-top: 30px; display: flex; gap: 8px; align-items: center; }
.auth-security-note>svg { width: 13px; height: 13px; color: var(--purple); }
.auth-story-footer { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 9px; }
.auth-story-footer>span { color: var(--muted); font-size: 8px; }
.auth-form-panel { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 40px 35px; position: relative; }
.auth-theme { position: absolute; top: 36px; right: 35px; }
.login-box { width: min(100%,365px); margin: auto 0; }
.login-emblem { width: 48px; height: 48px; color: var(--purple); background: var(--purple-tint); border: 1px solid #9677ec26; border-radius: 13px; display: inline-grid; place-items: center; margin-bottom: 27px; }
.login-emblem>svg { width: 26px; height: 26px; }
.login-box>.eyebrow { display: block; font-size: 8px; }
.login-box>h2 { font-size: 27px; font-weight: 550; letter-spacing: -.7px; margin-top: 8px; }
.login-box>p { color: var(--muted); font-size: 11px; line-height: 1.9; margin-top: 10px; }
.login-box form { margin-top: 30px; }
.account-form { text-align: left; }
.account-form label { display: block; color: var(--secondary); font-size: 11px; font-weight: 450; margin: 16px 0 8px; }
.account-form input:not([type="checkbox"]),.account-form select { display: block; width: 100%; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; border-radius: 7px; padding: 11px 12px; margin-top: 8px; min-height: 42px; }
.account-form input:focus,.account-form select:focus { border-color: var(--purple); outline: 1px solid var(--purple); outline-offset: 0; }
.account-form input:disabled { opacity: .55; }
.account-form label>small { display: block; font-size: 9px; line-height: 1.8; color: var(--muted); margin-top: 6px; font-weight: 400; }
.account-form .auth-input { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; }
.auth-input>svg { color: var(--muted); width: 16px; height: 16px; }
.account-form .auth-input input { padding: 13px 0; margin: 0; background: transparent; border: 0; flex: 1; min-height: 46px; }
.account-form .auth-input input:focus { outline: 0; }
.auth-input:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-tint); }
.auth-input .icon-button { width: 28px; height: 30px; }
.auth-input .icon-button>svg { width: 15px; height: 15px; }
.account-form .login-submit { width: 100%; padding: 13px; font-size: 12px; border-radius: 8px; margin-top: 10px; justify-content: center; }
.login-submit>svg { width: 16px; height: 16px; }
.login-help { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 25px; color: var(--muted); font-size: 9px; padding: 16px 0; border-top: 1px solid var(--border); }
.login-help>svg { color: var(--green); width: 14px; height: 14px; }
.login-box .login-contact { text-align: center; font-size: 10px; line-height: 1.9; margin-top: 6px; }
.login-footer { color: var(--muted); font-size: 8px; margin-top: 60px; text-align: center; }
.form-error { color: var(--red); font-size: 11px; line-height: 1.8; margin-top: 13px; min-height: 0; }
.form-error:empty { display: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { min-width: 0; }
.form-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 20px; margin-top: 10px; border-top: 1px solid var(--border); }
.form-footer .button { font-size: 11px; }
.role-template-row { display: flex; align-items: flex-end; gap: 12px; }
.role-template-row>label { flex: 1; margin-bottom: 0; }
.role-template-row>.button { min-height: 42px; font-size: 10px; }
.permission-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 8px 15px 15px; margin: 24px 0 10px; }
.permission-fieldset>legend { padding: 0 7px; font-size: 11px; font-weight: 500; }
.permission-fieldset>p { color: var(--muted); font-size: 9px; margin: 2px 0 12px; }
.permission-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.permission-checkboxes>label { display: flex; align-items: flex-start; gap: 9px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin: 0; cursor: pointer; }
.permission-checkboxes input { accent-color: var(--purple-solid); margin: 3px 0 0; width: 14px; height: 14px; flex-shrink: 0; }
.permission-checkboxes b { font-size: 10px; font-weight: 450; }
.permission-checkboxes code { display: block; color: var(--muted); font-size: 8px; margin-top: 4px; }
.user-summary .stat-card>.stat-label { margin-top: 13px; }
.user-summary .stat-card>small { color: var(--muted); font-size: 8px; }
.accounts-panel .panel-header { padding-bottom: 20px; }
.accounts-panel th { font-size: 10px; }
.accounts-panel td { padding-top: 17px; padding-bottom: 17px; }
.accounts-panel table { min-width: 820px; }
.account-name { display: flex; gap: 10px; align-items: center; }
.account-name b { color: var(--text); font-weight: 450; font-size: 11px; }
.account-name small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.self-label { font-size: 8px; padding: 2px 5px; border-radius: 4px; background: var(--purple-tint); color: var(--purple); margin-left: 4px; }
.permission-tags { display: flex; flex-wrap: wrap; gap: 5px; max-width: 310px; white-space: normal; }
.permission-tags>span { font-size: 8px; color: var(--secondary); background: var(--hover); border-radius: 4px; padding: 3px 6px; }
.account-actions { display: flex; align-items: center; gap: 5px; }
.account-actions>.button { font-size: 9px; padding: 6px 8px; min-height: 30px; }
.account-actions .button>svg { width: 12px; height: 12px; }
.password-pending { display: block; font-size: 8px; color: var(--muted); margin-top: 5px; }
.logout-profile { margin-top: 12px; }
.password-change-screen { gap: 30px; }
.password-change-card { padding: 30px; width: min(100%,440px); text-align: left; }
.password-change-card>.login-emblem { margin-bottom: 15px; }
.password-change-card>h1 { font-size: 23px; }
.password-change-card>p { color: var(--muted); font-size: 11px; margin-top: 10px; line-height: 1.8; }
.password-change-card form { margin: 25px 0 0; }
.password-change-card form>.button { margin-top: 18px; }
.forbidden-state { min-height: 350px; text-align: center; padding: 60px 25px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.forbidden-state>svg { width: 45px; height: 45px; padding: 9px; box-sizing: content-box; color: var(--amber); background: var(--amber-tint); border-radius: 15px; margin-bottom: 23px; }
.forbidden-state h2 { font-size: 19px; font-weight: 500; margin: 10px 0; }
.forbidden-state p { color: var(--muted); font-size: 11px; max-width: 430px; line-height: 1.9; }
.forbidden-state .button { margin-top: 25px; }
.auth-retry { position: fixed; bottom: 20%; left: 50%; transform: translateX(-50%); }
.spin { animation: spin .9s linear infinite; }
.dashboard-middle.single-column,.dashboard-bottom.single-column { grid-template-columns: minmax(0,1fr); }
.stats-grid.partial-stats { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.stock-edit-form { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 4px; }
.stock-edit-form .button { margin-top: 12px; width: 100%; }

@media (max-width: 1000px) {
  .auth-story { padding: 35px 32px 25px; }
  .auth-form-panel { padding-left: 30px; padding-right: 30px; }
  .auth-story-content h1 { font-size: 32px; }
  .auth-story-content>p { font-size: 11px; }
  .auth-story-content>.eyebrow { font-size: 7px; }
  .auth-network { gap: 8px; }
  .auth-network>span { padding: 12px; font-size: 8px; }
  .auth-network-line { min-width: 8px; }
  .auth-story-footer { font-size: 7px; }
  .auth-story-footer>span { display: none; }
}
@media (max-width: 700px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-story { min-height: 0; padding: 28px 25px; border-right: 0; border-bottom: 1px solid var(--border); }
  .auth-story-content { padding: 35px 0 5px; }
  .auth-story-content>.eyebrow { display: none; }
  .auth-story-content h1 { font-size: 27px; margin: 0 0 10px; }
  .auth-story-content>p { display: none; }
  .auth-network,.auth-security-note,.auth-story-footer { display: none; }
  .auth-form-panel { min-height: auto; flex: 1; padding: 35px 25px 25px; }
  .auth-theme { top: 25px; right: 20px; }
  .login-emblem { width: 40px; height: 40px; margin-bottom: 20px; }
  .login-emblem>svg { width: 23px; height: 23px; }
  .login-box>h2 { font-size: 24px; }
  .login-box>p { font-size: 10px; }
  .login-box form { margin-top: 23px; }
  .login-footer { margin-top: 35px; font-size: 7px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .role-template-row { flex-wrap: wrap; }
  .role-template-row>label { flex-basis: 100%; }
  .role-template-row>.button { width: 100%; min-height: 36px; }
  .permission-checkboxes { grid-template-columns: 1fr; }
  .permission-checkboxes>label { padding: 12px; }
  .permission-checkboxes b { font-size: 11px; }
  .permission-checkboxes code { font-size: 9px; }
  .user-summary .stat-card>small { font-size: 7px; }
  .accounts-panel .panel-header { flex-wrap: wrap; }
  .accounts-panel .panel-header p { font-size: 8px; max-width: 245px; }
  .accounts-panel .panel-header>.button { font-size: 9px; }
  .forbidden-state h2 { font-size: 16px; }
  .forbidden-state p { font-size: 10px; }
  .password-change-card { padding: 23px; }
}
@media (prefers-reduced-motion: reduce) { .auth-spinner,.spin { animation: none; } }