/* AIOS shared UI · light / orange. Module workflows own their page contents. */
:root {
  --ink: #242b36;
  --muted: #697586;
  --line: #e5e8ed;
  --orange: #d8501b;
  --blue: #4269a6;
  --bg: #f5f6f8;
  --nav: 232px;
  --surface: #fff;
  --accent-soft: #fff1e9;
  --accent-border: #f3d6c5;
  --radius: 12px;
  --shadow: 0 2px 5px #1d293907;
  --focus: 0 0 0 3px #e6753b29;
}
body { font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button { transition: background .16s, border-color .16s, color .16s, box-shadow .16s; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, .table-wrap:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px;
}
::selection { background: #ffe0cc; color: #642d13; }
h1 { font-size: 28px; line-height: 1.35; font-weight: 680; letter-spacing: -.7px; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: -.2px; }
h3 { font-size: 14px; font-weight: 600; }
strong { font-weight: 600; }
small { font-size: 12px; color: var(--muted); }
.ui-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.muted { color: var(--muted); }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 100; background: #fff; padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { top: 10px; }

/* Navigation and the application frame */
.sidebar { width: var(--nav); background: #fcfcfd; border-color: var(--line); }
.brand { height: 86px; padding: 20px 24px; gap: 12px; flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--orange); font-size: 24px; box-shadow: 0 3px 8px #cf602121; flex-shrink: 0; }
.brand b { font-size: 25px; letter-spacing: 1.2px; color: #252e3b; }
.brand small { font-size: 8px; letter-spacing: 1.45px; line-height: 1.7; margin-top: 3px; white-space: nowrap; }
.nav-scroll { padding: 10px 14px; scrollbar-width: thin; }
.nav-section-label { padding: 10px 14px 12px; color: #818b98; font-size: 11px; letter-spacing: 1.5px; }
.nav-item, .nav-group-toggle { min-height: 44px; padding: 10px 14px; gap: 12px; border-radius: 8px; color: #525f70; font-size: 14px; }
.nav-item > .ui-icon, .nav-group-icon .ui-icon { width: 19px; height: 19px; }
.nav-item span:first-child { width: auto; font-size: inherit; }
.nav-item:hover, .nav-group-toggle:hover { background: #f0f2f5; color: #273443; }
.nav-item.active { background: var(--accent-soft); color: #bc471a; font-weight: 650; box-shadow: inset 3px 0 #d8501b; }
.dashboard-nav { margin-bottom: 14px; }
.nav-group { margin: 5px 0; }
.nav-group-toggle.has-active { color: #323d4c; font-weight: 600; }
.nav-group-icon { display: flex; width: 19px; }
.nav-chevron { display: inline-flex; margin-left: auto; color: #818b98; }
.nav-chevron .ui-icon { width: 14px; height: 14px; }
.expanded .nav-chevron { transform: rotate(90deg); }
.nav-children { margin: 3px 0 10px 23px; padding-left: 10px; border-color: #e3e7ed; }
.nav-children .nav-item { min-height: 39px; padding: 8px 11px; font-size: 13px; gap: 9px; }
.nav-children .nav-dot { width: 5px !important; height: 5px; background: #b7c0ca; border-radius: 50%; font-size: 0; flex-shrink: 0; }
.nav-children .active .nav-dot { background: var(--orange); }
.sidebar-footer { margin: 16px; padding: 15px; font-size: 11px; border-radius: 10px; background: #fff; }
.sidebar-footer strong { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; color: #566372; }
.environment-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #7a8b9e; }
.topbar { height: 72px; margin-left: var(--nav); padding: 0 32px; gap: 16px; background: #ffffffed; backdrop-filter: blur(12px); }
.topbar-location { display: flex; align-items: center; gap: 14px; min-width: 0; }
.crumb { display: flex; align-items: center; gap: 11px; font-size: 12px; color: #768190; white-space: nowrap; }
.crumb .organization { color: #4e5a6b; font-weight: 550; }
.crumb-divider { margin: 0; color: #c0c6d0; }
.crumb-parent { color: #7d8796; }
.current-page { color: #343f4e; font-weight: 550; }
.top-actions { gap: 14px; flex-shrink: 0; }
.demo-pill { display: inline-flex; align-items: center; gap: 6px; border-color: #e4e8ed; background: #f7f8fa; color: #667487; border-radius: 6px; font-size: 11px; padding: 4px 8px; white-space: nowrap; }
.topbar .system-entry { background: #fff; color: #4b5769; border-color: #e1e5ea; }
.system-entry .ui-icon { width: 16px; height: 16px; }
.guide-button { width: 33px; height: 36px; border: 0; padding: 6px; border-radius: 7px; color: #7b8796; background: transparent; }
.guide-button:hover { background: #f2f4f7; color: #364256; }
.user-switch { display: flex; align-items: center; gap: 9px; padding: 3px 0 3px 16px; border-left: 1px solid var(--line); color: var(--ink); text-align: left; }
.avatar { width: 33px; height: 33px; margin: 0; background: #f3ebe4; color: #8b6245; border: 1px solid #eaded3; font-size: 13px; }
.user-info { display: flex; flex-direction: column; line-height: 1.45; font-size: 12px; }
.user-info small { font-size: 10px; color: #7a8491; }
.user-switch > .ui-icon { width: 12px; height: 12px; color: #8791a0; transform: rotate(90deg); margin-left: 3px; }
.menu-toggle { display: none; }
.nav-scrim { display: none; }
.workspace { max-width: none; padding: 32px clamp(24px, 2.8vw, 64px) 52px; min-height: calc(100vh - 72px); }
.workspace-content { width: 100%; max-width: 2000px; margin: 0 auto; min-width: 0; }
.page-heading { margin-bottom: 26px; gap: 24px; }
.page-heading .eyebrow { display: none; }
.page-heading p { margin-top: 9px; font-size: 13px; line-height: 1.7; color: #748091; max-width: 900px; }
.heading-actions { gap: 9px; flex-shrink: 0; justify-content: flex-end; }

/* One shared set of controls for every business module */
.btn { min-height: 36px; padding: 7px 14px; font-size: 13px; color: #4d5969; border-color: #dce1e7; border-radius: 7px; font-weight: 500; }
.btn:hover { background: #f9fafb; color: #263445; border-color: #bcc5d1; }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 2px 3px #bc471a12; }
.btn.primary:hover { background: #bf4314; border-color: #bf4314; }
.btn.text { min-height: 30px; padding: 4px 7px; color: #4269a6; font-weight: 500; }
.btn.text:hover { background: #edf3fb; color: #2c538c; border-color: transparent; }
.btn.danger { color: #b54242; }
.btn.icon { min-height: 32px; width: 32px; height: 32px; padding: 5px; color: #7a8797; border-radius: 7px; font-size: 23px; }
.btn.icon:hover { background: #f1f3f6; }
.notice { align-items: flex-start; padding: 12px 15px; margin-bottom: 20px; font-size: 12px; line-height: 1.8; color: #596e87; border-color: #e0e7f0; border-radius: 8px; background: #f0f4f9; }
.notice > span { flex-shrink: 0; }
.notice.warm { color: #8e6729; background: #fff9ee; border-color: #f0e1c1; }
.notice.error { color: #aa4141; background: #fff3f2; border-color: #f2d9d5; }
.card { border-radius: var(--radius); margin-bottom: 22px; box-shadow: var(--shadow); border-color: var(--line); min-width: 0; }
.card-heading { min-height: 65px; padding: 19px 24px; border-color: #eceff3; }
.card-body { padding: 24px; }
.grid { gap: 22px; }
.grid.two { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); }
.grid > * { min-width: 0; }
.grid > .card { align-self: start; }
.table-wrap { overflow: auto; scrollbar-width: thin; }
table { font-size: 13px; }
th { color: #738093; background: #f9fafc; padding: 12px 24px; font-size: 12px; font-weight: 500; }
td { padding: 16px 24px; border-color: #edf0f4; color: #4a5667; line-height: 1.6; }
td strong { color: #323e4f; font-weight: 550; max-width: 420px; }
td small { margin-top: 4px; font-size: 11px; color: #7c8796; }
td .btn { margin: 2px 3px 2px 0; }
tr:hover td { background: #fafbfd; }
.badge { font-size: 11px; line-height: 1.5; font-weight: 500; border-radius: 5px; padding: 4px 8px; color: #637084; background: #f0f3f7; }
.badge.green { background: #edf6f1; color: #357458; }
.badge.amber { background: #fff5e6; color: #9a671e; }
.badge.red { background: #fdf0ef; color: #b24b44; }
.empty { min-height: 170px; padding: 35px 20px; color: #7d8795; gap: 10px; font-size: 13px; }
.empty > span { width: 46px; height: 46px; display: grid; place-items: center; background: #f4f6f9; border-radius: 12px; font-size: 26px; color: #a2aebd; }
.toolbar { padding: 16px 24px; flex-wrap: wrap; gap: 12px; }
.toolbar input { width: 300px; max-width: 100%; }
input, select, textarea { padding: 10px 12px; border-radius: 7px; border-color: #dce2e9; font-size: 13px; color: #344154; background: #fff; }
input::placeholder, textarea::placeholder { color: #949eab; }
input:focus, select:focus, textarea:focus { border-color: #dc865b; box-shadow: var(--focus); outline: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--orange); }
.field { font-size: 13px; gap: 8px; }
.field > span { color: #4f5b6c; font-weight: 500; }
.form-grid { gap: 22px; }
.form-error { color: #b43e3e; font-size: 13px; }
.tabs { gap: 12px; margin-bottom: 24px; }
.tabs button { font-size: 13px; padding: 12px 14px; color: #697789; border-bottom: 2px solid transparent; }
.tabs button.active { font-weight: 600; color: #c54c1b; border-bottom-color: var(--orange); }
.tabs button:hover { color: var(--orange); background: #fff8f3; }
.chip { font-size: 12px; border-radius: 6px; }
.product-row { gap: 14px; }
.product-art.thumb { width: 52px; height: 52px; border: 1px solid #ebe5dc; border-radius: 9px; }
.product-art.thumb svg { height: 49px; }
.product-card { border-radius: 10px; }
.product-card .info { padding: 18px; }
.product-card h3 { font-size: 14px; }
.price { color: var(--orange); font-size: 22px; }
.module-tile { border-radius: 10px; padding: 24px; }
.module-tile p { color: #748094; font-size: 13px; margin-top: 7px; line-height: 1.8; }
.reading { color: #59697d; font-size: 13px; }
.kv { padding: 20px; font-size: 13px; background: #f6f8fb; }
.detail-meta { font-size: 12px; flex-wrap: wrap; }
.section-note, .code { color: #748194; }
pre { background: #f7f9fb; border-radius: 8px; color: #596a80; }
.layer { border-radius: 10px; }
.layer-number { background: #eff3f9; }
.trace-block { padding: 18px; border-radius: 9px; }
.trace-block .item { font-size: 13px; padding: 10px 0; }
.flow-node { padding: 16px 20px; }

/* Dialogs keep their actions visible and restore focus on close. */
body.modal-open { overflow: hidden; }
.backdrop { background: #1f2a3e55; backdrop-filter: blur(4px); padding: 5vh 5vw; }
.modal { border-radius: 16px; box-shadow: 0 24px 80px #1a243c2b; max-height: 90dvh; width: min(720px,90vw); }
.modal.wide { width: min(1080px,90vw); }
.modal > header { padding: 21px 28px; }
.modal > header h2 { font-size: 18px; color: #2d3848; padding-right: 16px; }
.modal-content { padding: 26px 28px; overscroll-behavior: contain; }
.modal > footer { padding: 17px 28px; background: #fafbfc; gap: 10px; }
.split-plan { margin: -26px -28px; }
.plan-left, .plan-right { padding: 28px 24px; }
.guide-step { padding: 20px 0; gap: 16px; }
.guide-step p { color: #758194; font-size: 13px; }
#toast { background: #29374a; font-size: 13px; padding: 13px 22px; border-radius: 10px; left: calc(50% + var(--nav)/2); }

/* Overview: existing metrics, actionable stages, and a quieter activity rail. */
.overview-heading .heading-actions { align-self: center; }
.overview-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; padding: 27px 30px; background: #fffaf6; border: 1px solid #eee0d4; border-radius: var(--radius); position: relative; overflow: hidden; }
.overview-hero:before { content: ''; position: absolute; left: 0; top: 27px; bottom: 27px; width: 3px; background: var(--orange); border-radius: 0 3px 3px 0; }
.overview-greeting { color: #9a7359; font-size: 12px; margin-bottom: 7px; letter-spacing: .2px; }
.overview-hero h2 { font-size: 21px; line-height: 1.4; color: #3b302a; font-weight: 600; }
.overview-hero h2 em { font-style: normal; color: #c44d1b; }
.overview-hero p { font-size: 13px; color: #8a7a6d; margin-top: 7px; }
.overview-hero-actions { display: flex; align-items: center; gap: 14px; }
.overview-hero-actions .btn { padding: 9px 18px; }
.overview-scope { display: flex; align-items: center; gap: 8px; color: #8390a0; font-size: 11px; }
.overview-section-label { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 26px 0 12px; }
.overview-section-label h2 { font-size: 14px; }
.stats { gap: 14px; margin: 0 0 24px; }
.stat { border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow); color: var(--ink); }
.stat:hover { transform: none; border-color: #d8bca7; background: #fffdfb; box-shadow: 0 4px 12px #26334908; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-label { font-size: 12px; color: #68768a; }
.stat-top .ui-icon { width: 18px; height: 18px; color: #ac9787; }
.stat-value { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; margin: 10px 0 5px; color: #28364b; letter-spacing: -1px; }
.stat-value span { font-size: 12px; color: #8993a1; letter-spacing: 0; margin-left: 8px; }
.stat-foot { display: flex; align-items: center; justify-content: space-between; color: #8993a1; font-size: 11px; }
.stat-foot .ui-icon { width: 12px; height: 12px; }
.pipeline { padding: 24px; gap: 12px; }
.pipeline .step { border: 0; padding: 13px 10px; background: #f7f8fa; border-radius: 9px; color: var(--ink); flex: 1; min-width: 0; }
.pipeline .step:hover { background: #fff4eb; }
.pipeline .step-top { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 5px; }
.pipeline .step i { width: auto; height: auto; margin: 0; display: inline; font-size: 11px; color: #8e9bac; background: none; border-radius: 0; }
.pipeline .step b { font-size: 13px; font-weight: 500; color: #4f6077; }
.pipeline .step small { color: #8290a2; font-size: 11px; }
.pipeline .step small strong { color: #3d4d63; font-size: 18px; margin-right: 5px; font-variant-numeric: tabular-nums; }
.pipeline .arrow { font-size: 14px; color: #bac2cc; }
.pipeline-note { font-size: 11px; color: #7a889a; }
.overview-lower { grid-template-columns: minmax(0, 2fr) minmax(300px, .9fr); }
.overview-lower .card-heading .count { margin-left: 9px; font-size: 12px; background: #f3f5f8; color: #7c8798; border-radius: 5px; padding: 2px 7px; font-weight: 500; }
.task-role { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #798496; white-space: nowrap; }
.task-role b { display: inline-grid; place-items: center; background: #fff4e8; color: #9d6b31; font-size: 10px; font-weight: 600; width: 19px; height: 19px; border-radius: 4px; }
.overview-lower .activity { padding: 8px 24px 20px; }
.event { padding: 13px 0 13px 18px; font-size: 13px; border-color: #e9edf2; color: #5a687b; }
.event:before { width: 7px; height: 7px; top: 21px; background: #c4cedb; }
.event:first-child:before { background: #d97746; }
.event small { font-size: 11px; color: #8a94a2; margin-top: 4px; }
.overview-footnote { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #8b95a2; margin-top: 4px; }
.overview-footnote .ui-icon { width: 14px; height: 14px; }

/* Administration uses the same components, with a subtle separate surface. */
.system-mode .sidebar { background: #fafbfc; }
.system-mode .brand b { font-size: 18px; letter-spacing: 0; }
.system-mode .brand small { font-size: 8px; }
.system-mode .brand-mark { background: #eaf0f6; color: #596d8a; box-shadow: none; }
.system-mode .nav-item.active { background: #edf2f8; color: #446287; box-shadow: inset 3px 0 #6d84a5; }
.system-mode .workspace { background: var(--bg); }
.system-intro { background: #f0f4f9; border-color: #dfe6ef; padding: 26px 28px; border-radius: 12px; }
.system-intro > .ui-icon { width: 38px; height: 38px; color: #6c819f; }
.system-intro p { color: #738298; }
.system-tile-icon { display: inline-grid; place-items: center; width: 39px; height: 39px; border: 1px solid #e5eaf1; background: #f7f9fc; border-radius: 10px; margin-bottom: 20px; color: #7087a7; }
.system-tile { display: flex; flex-direction: column; align-items: flex-start; }
.system-tile p { flex: 1; margin-bottom: 24px; }
.login-panel { border-radius: 20px; width: 920px; box-shadow: 0 24px 80px #2633490b; }
.login-intro { background: #fff6ee; padding: 45px 38px; }
.login-users { padding: 35px; }
.login-users .user-card { padding: 13px 16px; border-radius: 9px; color: #4d5b6f; }

@media(min-width:1900px) { .workspace { padding-top: 38px; } .overview-hero { padding: 23px 30px; } }
@media(max-width:1400px) {
  :root { --nav: 216px; }
  .brand { padding-left: 21px; }
  .brand small { font-size: 7px; }
  .workspace { padding: 28px; }
  .stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .stat { padding: 16px 18px; }
  .stat-value { margin: 5px 0 2px; font-size: 29px; }
  .overview-lower { grid-template-columns: minmax(0, 1.65fr) minmax(290px,1fr); }
  .overview-lower th, .overview-lower td { padding-left: 18px; padding-right: 18px; }
  .pipeline { gap: 7px; padding: 20px; }
  .pipeline .step-top { flex-direction: column; gap: 2px; }
  .crumb-parent, .crumb-parent + .crumb-divider { display: none; }
}
@media(max-width:1150px) {
  .topbar { padding: 0 24px; }
  .top-actions { gap: 10px; }
  .topbar .demo-pill { display: none; }
  .workspace { padding: 26px 24px; }
  .grid.two, .overview-lower { grid-template-columns: minmax(0,1fr); }
  .overview-lower .activity { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
  .page-heading { align-items: flex-start; }
  .page-heading .heading-actions { max-width: 45%; }
  .overview-hero h2 { font-size: 19px; }
  .overview-hero-actions { flex-direction: column; gap: 5px; align-items: stretch; }
}
@media(max-width:820px) {
  :root { --nav: 232px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; z-index: 21; box-shadow: 12px 0 40px #1c2f4c1c; visibility: hidden; }
  .nav-open .sidebar { transform: none; visibility: visible; }
  .nav-open .nav-scrim { display: block; position: fixed; inset: 0; border: 0; background: #1f2a3e44; z-index: 20; }
  .sidebar .brand { padding: 20px 24px; }
  .sidebar .brand b { font-size: 25px; }
  .sidebar .brand small { display: block; font-size: 8px; }
  .sidebar .brand-mark { width: 38px; height: 38px; }
  .sidebar .nav-scroll { padding: 10px 14px; }
  .sidebar .nav-item { justify-content: flex-start; }
  .sidebar .nav-item span+span { display: inline; }
  .sidebar .nav-group-toggle { font-size: 14px; padding: 10px 14px; gap: 12px; }
  .sidebar .nav-children { margin-left: 23px; padding-left: 10px; }
  .sidebar .nav-children .nav-item { font-size: 13px; padding: 8px 11px; }
  .sidebar-footer { display: block; }
  .menu-toggle { display: inline-flex; width: 34px; height: 34px; padding: 7px; min-height: 34px; }
  .topbar { margin-left: 0; height: 64px; padding: 0 20px; }
  .crumb { display: flex; }
  .crumb .organization, .crumb .organization + .crumb-divider { display: none; }
  .top-actions { width: auto; justify-content: flex-end; gap: 8px; }
  .user-info, .user-switch > .ui-icon { display: none; }
  .user-switch { border-left: 0; padding: 2px; }
  .user-switch .avatar { display: inline-grid; }
  .workspace { margin-left: 0; padding: 24px 20px 40px; min-height: calc(100vh - 64px); }
  .page-heading { flex-direction: row; }
  .page-heading h1 { font-size: 25px; }
  .page-heading p { font-size: 12px; }
  .grid.equal { grid-template-columns: 1fr; }
  .overview-hero { padding: 24px; }
  .overview-hero h2 { font-size: 18px; }
  .pipeline { overflow: auto; justify-content: flex-start; }
  .pipeline .step { min-width: 100px; }
  .modal-content { padding: 24px; }
  .split-plan { margin: -24px; }
  .system-mode .brand b { font-size: 18px; }
  #toast { left: 50%; }
}
@media(max-width:560px) {
  .topbar { padding: 0 14px; }
  .topbar-location { gap: 9px; }
  .guide-button { display: none; }
  .topbar .system-entry { padding: 6px 9px; min-height: 32px; font-size: 12px; }
  .system-entry .ui-icon { display: none; }
  .workspace { padding: 22px 16px 36px; }
  .page-heading { flex-direction: column; gap: 14px; margin-bottom: 20px; }
  .page-heading .heading-actions { max-width: none; align-self: flex-start; justify-content: flex-start; }
  .overview-hero { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .overview-hero-actions { flex-direction: row; align-items: center; }
  .overview-section-label { align-items: flex-start; }
  .overview-scope { max-width: 155px; text-align: right; font-size: 10px; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .stat { padding: 15px; }
  .stat-top { gap: 5px; }
  .stat-top .ui-icon { width: 15px; height: 15px; }
  .stat-label { font-size: 11px; }
  .stat-value { font-size: 27px; }
  .stat-foot { font-size: 10px; }
  .card-heading { padding: 17px 18px; }
  .card-heading h2 { font-size: 15px; }
  .card-heading .pipeline-note { display: none; }
  th, td { padding: 12px 18px; }
  .table-wrap table { min-width: 600px; }
  .overview-lower .activity { display: block; }
  .form-grid, .module-grid { grid-template-columns: 1fr; }
  .backdrop { padding: 14px; }
  .modal, .modal.wide { width: 100%; max-height: calc(100dvh - 28px); border-radius: 12px; }
  .modal > header, .modal > footer { padding: 17px 20px; }
  .modal > header h2 { font-size: 16px; }
  .modal-content { padding: 20px; }
  .split-plan { margin: -20px; }
  .overview-footnote { align-items: flex-start; }
  .notice { font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { transition: none !important; scroll-behavior: auto !important; } }
/* Account entry and organization administration */
.auth-screen{min-height:100dvh;background:#f6f7f9;color:#263244;padding:38px 6vw 22px;display:flex;flex-direction:column}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-brand .brand-mark{width:40px;height:40px;font-size:24px;background:#ec713b;color:white;border:0}
.auth-brand b{font-size:22px;line-height:1.15;letter-spacing:1px}
.auth-brand b span{display:block;font-size:8px;color:#8792a2;letter-spacing:2px;margin-top:7px}
.auth-layout{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:1fr 430px;gap:80px;align-items:center;padding:45px 0}
.auth-eyebrow{font-size:13px;letter-spacing:3px;color:#8d776b;margin-bottom:25px}
.auth-story h1{font-size:42px;line-height:1.5;letter-spacing:-1.5px;font-weight:650}
.auth-story h1 em{font-style:normal;color:#e8723d}
.auth-story>p{font-size:15px;line-height:2.1;color:#7a8596;margin-top:23px}
.auth-flow{display:flex;align-items:center;gap:14px;margin-top:50px;font-size:12px;color:#68768a}
.auth-flow span{padding:9px 13px;border:1px solid #dfe4eb;border-radius:7px;background:#fff}
.auth-flow i{font-style:normal;color:#aab3be}
.auth-story-foot{margin-top:40px;font-size:11px;color:#8b96a5;display:flex;align-items:center;gap:8px}
.auth-card{background:white;border:1px solid #e5e9ef;border-radius:17px;padding:34px;box-shadow:0 12px 40px #26324406}
.auth-card-label{font-size:9px;font-weight:700;letter-spacing:2px;color:#de7a4c;margin-bottom:12px}
.auth-card h2{font-size:25px;letter-spacing:-.5px;margin:0 0 10px}
.auth-card>p{font-size:12px;color:#8a95a4;line-height:1.8;margin:0 0 27px}
.auth-card .field{margin:0 0 17px;gap:8px}
.auth-card .field>span{font-size:12px;color:#536177}
.auth-card input{min-height:44px;border-radius:7px;background:#fcfcfd}
.password-input{position:relative}
.password-input input{padding-right:57px;width:100%}
.password-toggle{position:absolute;right:5px;top:5px;height:34px;border:0;background:none;font-size:11px;color:#7c8796;padding:0 8px;cursor:pointer}
.auth-submit{width:100%;min-height:45px;margin-top:5px}
.auth-help{padding-top:22px;margin-top:23px;border-top:1px solid #edf0f4;font-size:11px;color:#96a0ae;text-align:center}
.auth-footer{text-align:center;font-size:10px;letter-spacing:1px;color:#9ca6b3}
.form-error{color:#bd4e40;font-size:12px;line-height:1.7;min-height:8px;margin:9px 0}
.account-overview{display:grid;grid-template-columns:repeat(4,1fr);background:white;border:1px solid #e4e9ef;border-radius:11px;margin-bottom:22px;padding:22px 0}
.account-overview>div{padding:0 25px;border-right:1px solid #edf0f3;display:flex;align-items:center;gap:14px}
.account-overview>div:last-child{border:0}
.account-overview b{font-size:26px;font-weight:600}
.account-overview span{font-size:12px;color:#8c96a5}
.account-actions{display:flex;gap:2px;white-space:nowrap}
.danger-text{color:#b95444!important}
.account-username{font-size:12px;font-weight:550}
.account-time{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.permission-preview{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-scope{padding:0!important;font-weight:550;font-size:12px!important;min-height:24px!important}
.form-section-label{font-size:13px;font-weight:650;margin:6px 0 16px;display:flex;align-items:center;gap:12px}
.form-section-label span{font-size:11px;font-weight:400;color:#9aa3af}
.account-form .form-grid{gap:16px}
.account-options{display:flex;gap:26px;margin:20px 0 26px}
.account-options label,.account-stores label{font-size:12px;display:flex;align-items:center;gap:7px}
.account-form input[type=checkbox]{appearance:auto;width:15px;height:15px;min-height:15px;padding:0;accent-color:#e87945;flex-shrink:0;cursor:pointer}
.permission-tree{border:1px solid #e4e9ef;border-radius:9px;padding:0;margin:0 0 25px;min-width:0;overflow:hidden}
.permission-tree[disabled]{opacity:.5}
.permission-standalone{display:flex;align-items:center;justify-content:space-between;background:#fbfcfd;padding:12px 16px;border-bottom:1px solid #e9edf2}
.permission-standalone>div{display:flex;gap:8px}
.permission-standalone .btn{min-height:27px;font-size:11px;padding:4px 10px}
.permission-group+.permission-group{border-top:1px solid #edf0f3}
.permission-parent{display:flex;align-items:center;gap:9px;padding:13px 16px 9px;font-size:12px}
.permission-parent small{color:#97a1af;margin-left:auto;font-size:10px}
.permission-children{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 10px;padding:4px 16px 16px 40px}
.permission-leaf{display:flex;align-items:center;gap:7px;font-size:12px;color:#637185;cursor:pointer}
.permission-admin-note{padding:12px 14px;border-radius:7px;background:#fff5ed;color:#ac673f;font-size:12px;margin:0 0 10px}
.account-stores{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:15px}
.account-stores [hidden]{display:none}
.account-form-footer{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #ebeff3;padding-top:18px;margin-top:20px}
.form-help{font-size:11px;color:#8f99a7;line-height:1.7}
.scope-group{border-bottom:1px solid #edf0f4;padding:14px 0}
.scope-group h3{font-size:12px;margin:0 0 8px}
.scope-group p{font-size:12px;color:#768396;margin:0}
.profile-card{text-align:center;padding:15px}
.profile-card .avatar{margin:auto;width:46px;height:46px;font-size:20px}
.profile-card h3{margin:13px 0 4px}
.profile-card p{color:#8793a4;font-size:12px}
.account-form .field input:invalid:not(:placeholder-shown){box-shadow:none}

@media(max-width:1100px){.auth-layout{gap:40px;grid-template-columns:1fr 400px}
.auth-story h1{font-size:34px}
.account-overview>div{padding:0 16px;gap:10px}
.account-overview span{font-size:11px}
}

@media(max-width:820px){.auth-screen{padding:25px}
.auth-layout{grid-template-columns:1fr;max-width:430px;padding:30px 0}
.auth-story{display:none}
.auth-card{padding:27px}
.auth-footer{padding-top:16px}
.account-overview{grid-template-columns:1fr 1fr;gap:20px 0}
.account-overview>div:nth-child(2){border:0}
.permission-children{grid-template-columns:1fr 1fr;padding-left:20px}
.form-section-label{flex-wrap:wrap}
}

@media(max-width:440px){.auth-screen{padding:20px 16px}
.auth-card{padding:23px}
.auth-card h2{font-size:23px}
.account-overview>div{padding:0 13px}
.account-overview b{font-size:23px}
.permission-children{grid-template-columns:1fr 1fr;gap:13px 5px}
.permission-leaf{font-size:11px}
}


.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}