/* Ozibus Identity v1.8 — complete interface system */
:root {
  color-scheme: light;
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #f6f7fb;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #f1f5f9;
  --surface-inverse: #0b1220;
  --text: #111827;
  --text-strong: #08111f;
  --text-soft: #475569;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --brand: #5b5cf0;
  --brand-hover: #4b4cd7;
  --brand-deep: #3939a9;
  --brand-soft: #ededff;
  --accent: #00a6c7;
  --success: #147d54;
  --success-soft: #eaf8f1;
  --warning: #a85d00;
  --warning-soft: #fff6e5;
  --danger: #b4233c;
  --danger-soft: #fff0f3;
  --info: #1f6feb;
  --info-soft: #eef5ff;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-md: 0 18px 52px rgba(15, 23, 42, .10);
  --shadow-lg: 0 28px 80px rgba(15, 23, 42, .16);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --header-h: 68px;
  --sidebar-w: 272px;
  --content-max: 1440px;
  --transition: 160ms cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090f1b;
  --bg-elevated: #0d1524;
  --surface: #111b2b;
  --surface-subtle: #151f30;
  --surface-muted: #1b2739;
  --surface-inverse: #060b13;
  --text: #e8eef7;
  --text-strong: #ffffff;
  --text-soft: #c4d0df;
  --muted: #93a3b7;
  --muted-2: #718198;
  --border: #26354a;
  --border-strong: #35465d;
  --brand: #8b8cff;
  --brand-hover: #a4a5ff;
  --brand-deep: #b6b7ff;
  --brand-soft: #242650;
  --accent: #34d3ec;
  --success: #52d39b;
  --success-soft: #102c23;
  --warning: #f4bd59;
  --warning-soft: #33260f;
  --danger: #ff8296;
  --danger-soft: #35151e;
  --info: #77a8ff;
  --info-soft: #152747;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .22);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .22);
  --shadow-md: 0 20px 58px rgba(0, 0, 0, .30);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); text-decoration: none; transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition); }
a:hover { color: var(--brand-hover); }
img, svg { max-width: 100%; }
::selection { color: #fff; background: var(--brand); }

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  background: var(--brand-deep);
}
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: var(--header-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
  backdrop-filter: blur(18px) saturate(140%);
}
.header-left, .header-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.header-right { justify-content: flex-end; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
  color: var(--text-strong) !important;
  font-weight: 800;
  letter-spacing: -.025em;
}
.logo-mark, .brandmark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(145deg, #6e70ff 0%, #4e50dc 52%, #2d2f91 100%);
  box-shadow: 0 10px 28px rgba(73, 75, 211, .25), inset 0 1px 0 rgba(255,255,255,.22);
}
.logo-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
.brandmark { width: 56px; height: 56px; margin: 0 0 24px; border-radius: 17px; font-size: 22px; }
.logo-mark::after, .brandmark::after {
  content: "";
  position: absolute;
  width: 26%; height: 26%;
  right: 16%; top: 16%;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.logo-copy { display: grid; line-height: 1.05; }
.logo-text { font-size: 15px; }
.logo-product { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.workspace-context { min-width: 0; padding-left: 24px; color: var(--muted); font-size: 13px; font-weight: 650; }
.workspace-context strong { color: var(--text); font-weight: 750; }
.topnav { display: flex; align-items: center; gap: 3px; }
.topnav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 10px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
}
.topnav a:hover, .topnav a.active { color: var(--text); background: var(--surface-muted); }
.icon-btn, .profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.icon-btn:hover, .profile-btn:hover { color: var(--text); background: var(--surface-muted); }
.icon-btn svg, .profile-btn svg { width: 18px; height: 18px; }
.theme-toggle .sun-icon { display: none; }
html[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
html[data-theme="dark"] .theme-toggle .moon-icon { display: none; }
.mobile-nav-toggle { display: none; }
.profile-menu { position: relative; }
.profile-btn { min-height: 42px; padding: 4px 7px 4px 5px; }
.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  border-radius: 10px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 12px;
  font-weight: 900;
}
.profile-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 750; }
.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  width: 258px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.profile-menu.open .profile-dropdown { display: block; animation: menuIn .14s ease-out; }
.profile-summary { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.profile-summary strong, .profile-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary strong { color: var(--text-strong); font-size: 13px; }
.profile-summary span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.profile-dropdown a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; color: var(--text-soft); font-size: 13px; font-weight: 650; }
.profile-dropdown a:hover { color: var(--text); background: var(--surface-muted); }
.profile-dropdown .menu-danger { color: var(--danger); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Application shell */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--header-h));
}
.sidebar {
  position: sticky;
  top: var(--header-h);
  align-self: start;
  height: calc(100vh - var(--header-h));
  padding: 18px 12px 24px;
  overflow-y: auto;
  border-right: 1px solid #17233a;
  color: #dce6f4;
  background: linear-gradient(180deg, #0d1728 0%, #09111e 100%);
  scrollbar-width: thin;
  scrollbar-color: #32415a transparent;
}
.sidebar-section { margin: 4px 0 18px; }
.sidebar-title {
  padding: 7px 12px 8px;
  color: #788aa2;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.sidebar-nav { display: grid; gap: 3px; }
.sidebar-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #aebdd1;
  font-size: 13px;
  font-weight: 680;
}
.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,.065); }
.sidebar-nav a.active { color: #fff; background: rgba(113,115,255,.17); box-shadow: inset 0 0 0 1px rgba(143,145,255,.13); }
.sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: -12px;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: #8b8cff;
}
.sidebar-nav svg { width: 17px; height: 17px; flex: none; stroke-width: 1.9; }
.sidebar-sep { height: 1px; margin: 14px 10px; background: #1e2a3e; }
.sidebar-note { margin: 18px 8px 0; padding: 12px; border: 1px solid #20304a; border-radius: 12px; color: #8fa1b8; background: rgba(255,255,255,.025); font-size: 11px; }
.sidebar-note strong { display: block; margin-bottom: 3px; color: #c9d5e4; font-size: 12px; }
.sidebar-scrim { display: none; }
.content-shell { min-width: 0; display: flex; flex-direction: column; }
.page-main, .public-main { width: min(100%, var(--content-max)); margin: 0 auto; }
.page-main { padding: 34px 34px 76px; }
.public-main { padding: 0 30px 84px; }
.site-footer { margin-top: auto; padding: 22px 28px 28px; color: var(--muted); font-size: 11px; text-align: center; }

/* Public home */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 560px;
  padding: 86px 0 74px;
  border-bottom: 1px solid var(--border);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 48px;
  right: 2%;
  width: min(42vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 42%, rgba(91,92,240,.18), transparent 48%),
    radial-gradient(circle at 64% 60%, rgba(0,166,199,.12), transparent 55%);
  filter: blur(2px);
}
.hero .eyebrow { display: none; }
.hero h1 {
  max-width: 850px;
  margin: 0 0 24px;
  color: var(--text-strong);
  font-size: clamp(46px, 7vw, 82px);
  font-weight: 780;
  letter-spacing: -.06em;
  line-height: .98;
}
.hero p { max-width: 690px; margin: 0 0 30px; color: var(--text-soft); font-size: clamp(17px, 2vw, 20px); line-height: 1.6; }
.is-public .grid { margin-top: 30px; }
.is-public .grid > .card { position: relative; padding-top: 28px; border-top: 3px solid color-mix(in srgb, var(--brand) 55%, var(--border)); box-shadow: none; }

/* Auth experience */
body.is-auth {
  background:
    radial-gradient(circle at 10% 10%, rgba(91,92,240,.09), transparent 28%),
    var(--bg);
}
body.is-auth .site-header { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.auth-main {
  width: 100%;
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 42px 20px 70px;
}
.auth-card {
  position: relative;
  width: min(100%, 470px);
  padding: 38px 40px 36px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), #7c71ff 55%, var(--accent));
}
.auth-card .brandmark { margin-left: 0; }
.auth-card h1 { margin: 0 0 10px; color: var(--text-strong); font-size: 29px; line-height: 1.15; letter-spacing: -.035em; }
.auth-card > p, .auth-card .muted { color: var(--muted); }
.auth-links { margin: 18px 0 0; text-align: center; font-size: 12px; font-weight: 700; }

/* Headings / layout */
.eyebrow { display: none; }
.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.pagehead > div:first-child { min-width: 0; }
.pagehead h1 { margin: 0 0 8px; color: var(--text-strong); font-size: clamp(30px, 3vw, 40px); font-weight: 760; letter-spacing: -.045em; line-height: 1.1; }
.pagehead p { max-width: 780px; margin: 0; color: var(--muted); font-size: 14px; }
.pagehead code { font-size: 12px; }
.sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 34px 0 14px; }
.sectionhead h2 { margin: 0 0 3px; color: var(--text-strong); font-size: 21px; font-weight: 760; letter-spacing: -.025em; }
.sectionhead p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13px; }
.muted { color: var(--muted) !important; }
.fine, .hint { color: var(--muted); font-size: 12px; }
.hint { display: block; margin-top: 7px; }

/* Buttons */
.actions, .rowactions, .sessionactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pagehead .actions { justify-content: flex-end; }
.sessionactions { justify-content: flex-end; margin: 0 0 16px; }
.rowactions form, .sessionactions form { margin: 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--brand);
  border-radius: 10px;
  color: #fff !important;
  background: var(--brand);
  box-shadow: 0 3px 10px rgba(74,75,211,.13);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.1;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-1px); background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: 0 7px 18px rgba(74,75,211,.20); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, .icon-btn:focus-visible, .profile-btn:focus-visible, .linkbtn:focus-visible, .pager-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent); outline-offset: 2px; }
.btn.secondary { color: var(--text) !important; border-color: var(--border-strong); background: var(--surface); box-shadow: var(--shadow-xs); }
.btn.secondary:hover { border-color: color-mix(in srgb, var(--brand) 34%, var(--border)); background: var(--surface-subtle); }
.btn.full { width: 100%; margin-top: 8px; }
.dangerbtn { border-color: var(--danger) !important; background: var(--danger) !important; box-shadow: 0 3px 10px rgba(180,35,60,.12); }
.dangerbtn:hover { filter: brightness(.95); box-shadow: 0 7px 18px rgba(180,35,60,.18); }
.linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 12px;
  font-weight: 730;
  cursor: pointer;
}
.linkbtn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-muted); }
.dangertext { color: var(--danger) !important; }
.ui-icon { display: inline-grid; place-items: center; flex: 0 0 auto; line-height: 0; }
.ui-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cards / metrics */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card, .metric, .appcard, .tablewrap {
  border: 1px solid var(--border);
  background: var(--surface);
}
.card { padding: 22px; border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.card h1, .card h2, .card h3 { margin-top: 0; color: var(--text-strong); letter-spacing: -.025em; }
.card h3 { margin-bottom: 8px; font-size: 16px; }
.card p { color: var(--text-soft); }
.card p:last-child { margin-bottom: 0; }
.card.success { border-color: color-mix(in srgb, var(--success) 28%, var(--border)); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--success-soft) 58%, var(--surface))); }
.card.warning { border-color: color-mix(in srgb, var(--warning) 28%, var(--border)); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--warning-soft) 58%, var(--surface))); }
.card.danger { border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--danger-soft) 58%, var(--surface))); }
.card.empty { min-height: 180px; display: grid; place-content: center; text-align: center; }
.metricgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 0 0 24px; }
.metricgrid.riskmetrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.metric {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 132px;
  padding: 18px 20px;
  border-radius: 14px;
  color: var(--text) !important;
  box-shadow: var(--shadow-xs);
}
.metric::after { content: ""; position: absolute; right: 18px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
a.metric:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); box-shadow: var(--shadow-sm); }
.metric span { color: var(--muted); font-size: 11px; font-weight: 780; letter-spacing: .03em; text-transform: uppercase; }
.metric strong { margin-top: auto; color: var(--text-strong); font-size: 31px; font-weight: 760; line-height: 1; letter-spacing: -.04em; }
.metric small { color: var(--muted); font-size: 11px; }
.statline { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.statline:last-of-type { border-bottom: 0; }

/* App launcher */
.appgrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.appcard {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 15px;
  align-items: start;
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.appcard > .btn, .appcard > .muted { grid-column: 1 / -1; }
.appcard h3 { margin: 1px 0 3px; color: var(--text-strong); font-size: 16px; }
.appcard p { margin: 0 0 3px; color: var(--text-soft); font-size: 12px; }
.appcard small { color: var(--muted); }
.appicon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius: 13px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 15px;
  font-weight: 900;
}

/* Forms */
.formcard { max-width: 760px; }
.formcard form, .auth-card form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; color: var(--text-soft); font-size: 12px; font-weight: 730; }
label.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  font-size: 13px;
  font-weight: 520;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position: calc(100% - 16px) 18px,calc(100% - 11px) 18px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--brand); }
.password-wrap { position: relative; }
.password-wrap > input { padding-right: 44px !important; }
.password-toggle { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; transform: translateY(-50%); border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.password-toggle:hover { color: var(--text); background: var(--surface-muted); }
.password-toggle svg { width: 17px; height: 17px; }

/* Data tables */
.tablewrap { position: relative; overflow: hidden; border-radius: 14px; box-shadow: var(--shadow-xs); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
thead { background: var(--surface-subtle); }
th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .055em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
th[data-sortable="true"] { cursor: pointer; user-select: none; }
th[data-sortable="true"]::after { content: "↕"; margin-left: 7px; color: var(--muted-2); font-size: 9px; }
th[data-sort-dir="asc"]::after { content: "↑"; color: var(--brand); }
th[data-sort-dir="desc"]::after { content: "↓"; color: var(--brand); }
td { padding: 13px 14px; border-bottom: 1px solid var(--border); color: var(--text-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 34%, transparent); }
td b { color: var(--text); font-weight: 730; }
td small { color: var(--muted); }
td code { font-size: 10px; }
.rowactions { flex-wrap: nowrap; }
.rowactions > a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); background: var(--surface); font-size: 11px; font-weight: 730; white-space: nowrap; }
.rowactions > a:hover { color: var(--text); background: var(--surface-muted); }
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.table-search { position: relative; flex: 1; max-width: 370px; }
.table-search .ui-icon { position: absolute; top: 50%; left: 11px; z-index: 1; color: var(--muted); transform: translateY(-50%); }
.table-search input { min-height: 37px !important; padding: 7px 11px 7px 35px !important; border-color: var(--border) !important; background: var(--surface-subtle) !important; }
.table-size { width: auto; min-width: 92px; min-height: 37px; padding-top: 7px; padding-bottom: 7px; }
.table-scroll { overflow-x: auto; }
.table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: 11px; }
.pager-actions { display: flex; gap: 6px; }
.pager-btn { min-height: 32px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); background: var(--surface); font-size: 11px; font-weight: 720; cursor: pointer; }
.pager-btn:hover:not(:disabled) { color: var(--text); background: var(--surface-muted); }
.pager-btn:disabled { opacity: .42; cursor: not-allowed; }
.empty-row td { padding: 38px 18px; color: var(--muted); text-align: center; }

/* Status / code */
.badge, .security-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 999px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .02em;
  text-transform: capitalize;
}
.badge.success { color: var(--success); border-color: color-mix(in srgb,var(--success) 22%,var(--border)); background: var(--success-soft); }
.badge.warning { color: var(--warning); border-color: color-mix(in srgb,var(--warning) 22%,var(--border)); background: var(--warning-soft); }
.badge.danger { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 22%,var(--border)); background: var(--danger-soft); }
.badge.mutedbadge, .mutedbadge { color: var(--muted); border-color: var(--border); background: var(--surface-muted); }
.notice { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; color: var(--text-soft); background: var(--surface-subtle); font-size: 12px; }
.notice.success { border-color: color-mix(in srgb,var(--success) 28%,var(--border)); border-left-color: var(--success); background: var(--success-soft); }
.notice.warning { border-color: color-mix(in srgb,var(--warning) 28%,var(--border)); border-left-color: var(--warning); background: var(--warning-soft); }
.notice.danger { border-color: color-mix(in srgb,var(--danger) 28%,var(--border)); border-left-color: var(--danger); background: var(--danger-soft); }
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
code { padding: 2px 5px; border: 1px solid var(--border); border-radius: 6px; color: color-mix(in srgb,var(--text) 82%,var(--brand)); background: var(--surface-muted); overflow-wrap: anywhere; }
pre { margin: 12px 0; padding: 15px; overflow: auto; border: 1px solid var(--border); border-radius: 11px; color: var(--text-soft); background: var(--surface-inverse); font-size: 11px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
html:not([data-theme="dark"]) pre { color: #dbe7f5; }
.scope-list { margin: 8px 0 0; padding-left: 20px; }
.scope-list li { margin: 5px 0; }

/* Modal / toast */
.modal-backdrop {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(6, 11, 19, .56);
  backdrop-filter: blur(6px);
}
.modal-backdrop.open { display: grid; }
.modal {
  width: min(100%, 430px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modalIn .16s ease-out;
}
.modal h3 { margin: 0 0 7px; color: var(--text-strong); font-size: 19px; letter-spacing: -.025em; }
.modal p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.modal .actions { justify-content: flex-end; }
@keyframes modalIn { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }
.toast-stack { position: fixed; z-index: 240; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(360px, calc(100vw - 36px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-md); font-size: 12px; animation: toastIn .2s ease-out; }
.toast strong { display: block; margin-bottom: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Accessibility / responsive */
@media (max-width: 1180px) {
  :root { --sidebar-w: 238px; }
  .page-main { padding-inline: 26px; }
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .appgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metricgrid.riskmetrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .site-header { grid-template-columns: auto minmax(0,1fr) auto; padding: 0 12px; }
  .workspace-context { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .topnav { position: fixed; z-index: 95; top: calc(var(--header-h) + 8px); left: 12px; right: 12px; display: none; padding: 8px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-md); }
  body.nav-open .topnav { display: grid; }
  .topnav a { min-height: 42px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; z-index: 100; top: var(--header-h); bottom: 0; left: 0; width: min(292px, 86vw); height: auto; transform: translateX(-103%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  body.sidebar-open .sidebar { transform: none; }
  .sidebar-scrim { position: fixed; z-index: 90; inset: var(--header-h) 0 0; display: block; pointer-events: none; opacity: 0; background: rgba(3,7,14,.48); transition: opacity .2s ease; }
  body.sidebar-open .sidebar-scrim { pointer-events: auto; opacity: 1; }
  .page-main { padding: 26px 18px 60px; }
  .public-main { padding-inline: 18px; }
  .pagehead { align-items: flex-start; flex-direction: column; gap: 16px; }
  .pagehead .actions { justify-content: flex-start; }
  .grid, .appgrid, .metricgrid { grid-template-columns: 1fr; }
  .metricgrid.riskmetrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tablewrap { overflow: visible; }
  .table-scroll { overflow-x: auto; border-radius: inherit; }
  table { min-width: 700px; }
  .profile-label { display: none; }
  .sessionactions { justify-content: stretch; }
  .sessionactions form { flex: 1 1 220px; }
  .sessionactions .btn { width: 100%; }
}

@media (max-width: 580px) {
  .logo-product { display: none; }
  .logo-text { font-size: 14px; }
  .site-header { gap: 6px; }
  .header-right { gap: 2px; }
  .hero { min-height: auto; padding: 58px 0 54px; }
  .hero h1 { font-size: 48px; }
  .hero p { font-size: 16px; }
  .hero .actions .btn { width: 100%; }
  .auth-main { padding: 22px 12px 48px; }
  .auth-card { padding: 30px 22px 28px; border-radius: 18px; }
  .auth-card h1 { font-size: 26px; }
  .page-main { padding: 22px 14px 54px; }
  .pagehead h1 { font-size: 31px; }
  .pagehead .actions { width: 100%; }
  .pagehead .actions .btn { flex: 1 1 100%; }
  .metricgrid.riskmetrics { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .table-search { max-width: none; }
  .table-size { width: 100%; }
  .table-pagination { align-items: flex-start; flex-direction: column; }
  .pager-actions { width: 100%; }
  .pager-btn { flex: 1; }
  .profile-dropdown { right: -4px; width: min(258px, calc(100vw - 20px)); }
  .modal .actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
.copy-shell { position: relative; }
.copy-shell pre { padding-right: 86px; }
.copy-btn { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #cbd8e8; background: rgba(255,255,255,.07); font-size: 10px; font-weight: 750; cursor: pointer; backdrop-filter: blur(6px); }
.copy-btn:hover { color: #fff; background: rgba(255,255,255,.13); }
.copy-btn svg { width: 13px; height: 13px; }

/* v1.8 signature public + authentication compositions */
.identity-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 64px;
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; color: var(--muted); font-size: 11px; font-weight: 720; }
.hero-trust span { position: relative; padding-left: 13px; }
.hero-trust span::before { content: ""; position: absolute; top: 50%; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); transform: translateY(-50%); }
.identity-map {
  position: relative;
  min-height: 390px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in srgb,var(--surface) 96%,transparent), var(--surface-subtle));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.identity-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size: 34px 34px; opacity: .28; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.identity-core, .identity-node { position: absolute; z-index: 2; display: grid; gap: 2px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.identity-core { top: 50%; left: 50%; width: 180px; padding: 18px; border-radius: 18px; text-align: center; transform: translate(-50%,-50%); }
.identity-core .logo-mark { margin: 0 auto 9px; }
.identity-core strong, .identity-node b { color: var(--text-strong); font-size: 13px; }
.identity-core small, .identity-node small { color: var(--muted); font-size: 10px; }
.identity-node { min-width: 126px; padding: 13px 14px; border-radius: 13px; }
.node-a { top: 42px; left: 38px; }
.node-b { top: 54px; right: 34px; }
.node-c { right: 62px; bottom: 42px; }
.identity-line { position: absolute; z-index: 1; height: 1px; transform-origin: left center; background: linear-gradient(90deg, color-mix(in srgb,var(--brand) 72%,transparent), color-mix(in srgb,var(--accent) 42%,transparent)); }
.line-a { top: 124px; left: 140px; width: 154px; transform: rotate(27deg); }
.line-b { top: 123px; left: 282px; width: 138px; transform: rotate(-26deg); }
.line-c { top: 240px; left: 290px; width: 143px; transform: rotate(26deg); }
.capability-rail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-top: 30px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.capability-rail article { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; padding: 28px 28px 30px 0; }
.capability-rail article + article { padding-left: 28px; border-left: 1px solid var(--border); }
.capability-rail article > span { color: var(--brand); font-family: "SFMono-Regular",Consolas,monospace; font-size: 10px; font-weight: 800; }
.capability-rail h3 { margin: 0 0 6px; color: var(--text-strong); font-size: 15px; }
.capability-rail p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.auth-main { min-height: calc(100vh - var(--header-h)); padding: 38px 24px 64px; place-items: stretch; }
.auth-stage { width: min(100%, 1020px); min-height: 640px; margin: auto; display: grid; grid-template-columns: minmax(300px,.9fr) minmax(420px,1.1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-lg); }
.auth-aside { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 42px 38px; overflow: hidden; color: #d9e5f5; background: linear-gradient(155deg,#111e33 0%,#0b1525 56%,#08101d 100%); }
.auth-aside::before { content: ""; position: absolute; width: 360px; height: 360px; right: -160px; top: -120px; border-radius: 50%; background: radial-gradient(circle,rgba(116,118,255,.34),transparent 68%); }
.auth-aside::after { content: ""; position: absolute; width: 260px; height: 260px; left: -130px; bottom: -120px; border-radius: 50%; background: radial-gradient(circle,rgba(0,166,199,.18),transparent 68%); }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 80px; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; color: #fff; background: linear-gradient(145deg,#7173ff,#4c4ed7); box-shadow: 0 14px 32px rgba(0,0,0,.22); font-weight: 900; }
.auth-aside h2 { max-width: 310px; margin: 0 0 14px; color: #fff; font-size: 31px; line-height: 1.08; letter-spacing: -.045em; }
.auth-aside p { max-width: 310px; margin: 0; color: #95a9c3; font-size: 13px; line-height: 1.7; }
.auth-aside ul { display: grid; gap: 12px; margin: 40px 0 0; padding: 0; list-style: none; color: #b5c5d9; font-size: 12px; }
.auth-aside li { display: flex; align-items: center; gap: 10px; }
.auth-aside li span { width: 7px; height: 7px; border: 2px solid #8486ff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(132,134,255,.10); }
.auth-aside > small { color: #70849e; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.auth-pane { display: grid; place-items: center; min-width: 0; padding: 42px 54px; background: var(--surface); }
.auth-pane .auth-card { width: 100%; max-width: 430px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.auth-pane .auth-card::before { display: none; }
.auth-pane .auth-card .brandmark { display: none; }

@media (max-width: 980px) {
  .identity-hero { grid-template-columns: 1fr; gap: 24px; }
  .identity-map { min-height: 330px; }
  .auth-stage { grid-template-columns: 320px minmax(0,1fr); }
  .auth-pane { padding-inline: 38px; }
}
@media (max-width: 760px) {
  .identity-map { display: none; }
  .capability-rail { grid-template-columns: 1fr; }
  .capability-rail article, .capability-rail article + article { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--border); }
  .capability-rail article:last-child { border-bottom: 0; }
  .auth-main { padding: 22px 14px 52px; }
  .auth-stage { display: block; min-height: 0; border-radius: 20px; }
  .auth-aside { display: none; }
  .auth-pane { padding: 32px 24px; }
  .auth-pane .auth-card .brandmark { display: grid; }
}
.sidebar-scrim { border: 0; padding: 0; }