:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --radius-sm: .5rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.5rem;
  --ink: #162033; --muted: #697386; --subtle: #98a2b3; --canvas: #f6f8fc; --surface: #fff; --surface-muted: #f8fafc; --border: #e5eaf1;
  --primary: #335cff; --primary-hover: #2547d8; --primary-soft: #edf0ff; --success: #16845b; --success-soft: #eaf8f1; --warning: #aa6900; --warning-soft: #fff5db; --danger: #c6354d; --danger-soft: #fff0f2;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / .04); --shadow-md: 0 8px 24px rgb(20 31 56 / .07); --shadow-lg: 0 24px 48px rgb(20 31 56 / .12);
}
[data-theme="dark"] { --ink: #eef3fc; --muted: #aab5c6; --subtle: #7d8aa0; --canvas: #101724; --surface: #172131; --surface-muted: #1d2939; --border: #2a374a; --primary: #849cff; --primary-hover: #a8b8ff; --primary-soft: #252f55; --success: #67d6a7; --success-soft: #173b31; --warning: #f5c462; --warning-soft: #473719; --danger: #ff8a9a; --danger-soft: #482633; --shadow-md: 0 8px 24px rgb(0 0 0 / .2); }
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-size: .9rem; line-height: 1.5; }
a { color: inherit; text-decoration: none; } button, input { font: inherit; } button { cursor: pointer; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgb(51 92 255 / .28); outline-offset: 2px; }
.skip-link { position: fixed; z-index: 10000; top: .5rem; inset-inline-start: .5rem; transform: translateY(-200%); padding: .6rem .9rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); transition: transform .2s; }.skip-link:focus { transform: translateY(0); }
.app-shell { min-height: 100vh; display: flex; }.app-sidebar { display: flex; flex: 0 0 264px; flex-direction: column; min-height: 100vh; padding: var(--space-6) var(--space-4); background: var(--surface); border-inline-end: 1px solid var(--border); }.app-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.brand { display: inline-flex; align-items: center; gap: .7rem; padding: 0 var(--space-2); margin-bottom: var(--space-8); }.brand-mark { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .7rem; background: linear-gradient(135deg, #355dfd, #6c52ee); color: #fff; font-size: 1.1rem; box-shadow: 0 5px 10px rgb(51 92 255 / .23); }.brand-name { font-size: 1.25rem; font-weight: 750; letter-spacing: -.05em; }.brand-name span { color: var(--primary); }
.tenant-card, .profile-row { display: flex; align-items: center; gap: .65rem; }.tenant-card { padding: .65rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted); }.tenant-card > span:nth-child(2), .profile-row > span:nth-child(2) { min-width: 0; flex: 1; }.tenant-card strong, .profile-row strong { display: block; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }.tenant-card small, .profile-row small { display: block; color: var(--muted); font-size: .68rem; }.tenant-avatar, .profile-avatar { display: grid; flex: 0 0 auto; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 50%; background: #e7dafb; color: #633cb8; font-size: .67rem; font-weight: 750; }.profile-avatar { background: #d7eee7; color: #146c51; }.profile-avatar.large { width: 3.25rem; height: 3.25rem; font-size: .85rem; }.profile-toggle { transition: transform .2s; }.profile-toggle:hover { transform: scale(1.04); }
.sidebar-nav { display: flex; flex-direction: column; gap: .2rem; padding-top: var(--space-8); }.nav-caption { margin: 0; padding: 0 var(--space-3); color: var(--subtle); font-size: .66rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.nav-caption:not(:first-child) { margin-top: var(--space-5); }.nav-link { display: flex; align-items: center; gap: .75rem; min-height: 2.65rem; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--muted); font-size: .82rem; font-weight: 600; transition: background .16s, color .16s; }.nav-link:hover { background: var(--surface-muted); color: var(--ink); }.nav-link.active { background: var(--primary-soft); color: var(--primary); }.nav-link > i:first-child { width: 1rem; font-size: .95rem; text-align: center; }.nav-link.disabled { cursor: not-allowed; opacity: .55; }.lock-icon { margin-inline-start: auto; font-size: .62rem; }.sidebar-footer { margin-top: auto; }.help-card { display: flex; align-items: center; gap: .65rem; margin-bottom: var(--space-5); padding: .8rem; border-radius: var(--radius-md); background: linear-gradient(120deg, var(--primary-soft), transparent); color: var(--primary); }.help-card i { font-size: 1.1rem; }.help-card strong, .help-card small { display: block; }.help-card strong { font-size: .75rem; }.help-card small { color: var(--muted); font-size: .67rem; }.profile-row { padding: var(--space-3) var(--space-2); border-top: 1px solid var(--border); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 75px; padding: 0 clamp(1.25rem, 3vw, 2.5rem); background: color-mix(in srgb, var(--canvas) 90%, transparent); border-bottom: 1px solid var(--border); }.eyebrow { display: block; color: var(--primary); font-size: .66rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }.breadcrumb-current { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }.topbar-actions { display: flex; align-items: center; gap: .35rem; }.icon-button { display: inline-grid; width: 2.25rem; height: 2.25rem; padding: 0; place-items: center; border: 0; border-radius: .6rem; background: transparent; color: var(--muted); }.icon-button:hover { background: var(--surface-muted); color: var(--ink); }.direction-icon { font-size: .8rem; font-weight: 800; }.mobile-menu { display: none; }.notification-button { position: relative; }.notification-dot { position: absolute; top: .42rem; inset-inline-end: .46rem; width: .38rem; height: .38rem; border: 2px solid var(--canvas); border-radius: 50%; background: var(--danger); }
.page-content { width: min(100%, 1440px); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.5rem); }.hero-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(200px, .75fr); gap: var(--space-8); overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #dce3ff; border-radius: var(--radius-xl); background: linear-gradient(115deg, #f3f5ff, #fff 65%, #eefbfa); box-shadow: var(--shadow-sm); }.hero-panel::after { position: absolute; inset-inline-end: -6rem; bottom: -8rem; width: 20rem; height: 20rem; border: 2.5rem solid rgb(103 115 255 / .07); border-radius: 50%; content: ""; }.hero-panel h1 { max-width: 600px; margin: .65rem 0 .75rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 750; letter-spacing: -.055em; line-height: 1.1; }.hero-panel p { max-width: 570px; margin: 0; color: #56637a; font-size: 1rem; }.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-6); }.hero-orbit { position: relative; z-index: 1; display: grid; min-height: 150px; place-items: center; }.orbit-center { display: grid; width: 5rem; height: 5rem; place-items: center; border: 8px solid #fff; border-radius: 1.5rem; background: linear-gradient(135deg, #355dfd, #6c52ee); color: #fff; font-size: 1.8rem; box-shadow: 0 14px 22px rgb(51 92 255 / .22); transform: rotate(-8deg); }.orbit-chip { position: absolute; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid #e3e6f6; border-radius: .8rem; background: #fff; color: var(--primary); box-shadow: var(--shadow-md); }.chip-one { top: 3%; inset-inline-start: 15%; }.chip-two { bottom: 6%; inset-inline-end: 13%; color: #e4782a; }.chip-three { top: 16%; inset-inline-end: 7%; color: #7654d5; }.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-5) 0 var(--space-10); }.metric-card { display: flex; align-items: center; gap: .75rem; min-height: 5.7rem; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }.metric-icon, .table-icon, .state-icon { display: grid; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: .7rem; }.metric-icon.blue { background: var(--primary-soft); color: var(--primary); }.metric-icon.violet { background: #f0ecff; color: #7155d7; }.metric-icon.amber { background: #fff4dd; color: #c17b0b; }.metric-icon.green { background: var(--success-soft); color: var(--success); }.metric-card strong { display: block; font-size: .95rem; letter-spacing: -.02em; }.metric-card span:not(.metric-icon) { display: block; color: var(--muted); font-size: .68rem; }.metric-arrow { margin-inline-start: auto; color: var(--subtle); }
.content-section { margin-top: var(--space-10); }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }.section-heading h2 { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 720; letter-spacing: -.035em; }.section-heading p { margin: .2rem 0 0; color: var(--muted); }.component-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }.surface-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }.component-card { min-height: 188px; padding: var(--space-5); }.component-header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }.component-header h3 { margin: 0; font-size: .9rem; font-weight: 700; letter-spacing: -.02em; }.component-code { padding: .15rem .4rem; border-radius: .25rem; background: var(--surface-muted); color: var(--subtle); font-family: ui-monospace, monospace; font-size: .62rem; }.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.35rem; padding: .48rem .85rem; border-radius: .6rem; font-size: .78rem; font-weight: 700; transition: transform .16s, background .16s, border-color .16s; }.btn:hover { transform: translateY(-1px); }.btn-primary { border-color: var(--primary); background: var(--primary); color: #fff; }.btn-primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }.btn-secondary { border-color: var(--border); background: var(--surface); color: var(--ink); }.btn-danger { border-color: var(--danger); background: var(--danger); color: #fff; }.btn-quiet { border-color: transparent; background: transparent; color: var(--muted); }.btn-quiet:hover { background: var(--surface-muted); color: var(--ink); }.btn-outline-primary { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary); }.btn-outline-primary:hover { background: var(--primary-soft); color: var(--primary); }.btn-sm { min-height: 2rem; padding: .35rem .55rem; font-size: .7rem; }.btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }.button-row, .badge-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--space-4); }.status-pill { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; padding: .25rem .5rem; border-radius: 100px; font-size: .67rem; font-weight: 700; white-space: nowrap; }.status-pill.success { background: var(--success-soft); color: var(--success); }.status-pill.warning { background: var(--warning-soft); color: var(--warning); }.status-pill.danger { background: var(--danger-soft); color: var(--danger); }.status-pill.neutral { background: var(--surface-muted); color: var(--muted); }.status-dot { width: .36rem; height: .36rem; border-radius: 50%; background: currentColor; }.alert { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .65rem; border: 0; border-radius: var(--radius-sm); font-size: .7rem; }.alert-info { background: var(--primary-soft); color: var(--primary); }.form-label { margin-bottom: .35rem; color: var(--ink); font-size: .7rem; font-weight: 700; }.form-control { min-height: 2.45rem; border-color: var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .78rem; }.form-control::placeholder { color: var(--subtle); }.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .22rem rgb(51 92 255 / .13); }.input-group-custom { position: relative; }.input-group-custom > i { position: absolute; z-index: 1; top: .67rem; inset-inline-start: .75rem; color: var(--subtle); }.input-group-custom .form-control { padding-inline-start: 2.2rem; }.field-hint { display: flex; align-items: center; gap: .3rem; margin-top: .45rem; color: var(--success); font-size: .65rem; }.tabs { display: flex; gap: .15rem; overflow: auto; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }.tab { padding: .3rem .55rem .55rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: .7rem; font-weight: 650; white-space: nowrap; }.tab.active { border-color: var(--primary); color: var(--primary); }.empty-inline { display: flex; align-items: center; gap: .45rem; padding-top: 1.35rem; color: var(--subtle); font-size: .72rem; }.empty-inline i { font-size: 1rem; }
.layout-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: var(--space-5); }.table-card, .state-card { padding: var(--space-5); }.table-card .component-header { margin-bottom: var(--space-3); }.app-table { margin: 0; color: var(--ink); font-size: .75rem; }.app-table > :not(caption) > * > * { padding: .85rem .7rem; border-bottom-color: var(--border); background: transparent; }.app-table th { color: var(--subtle); font-size: .63rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.app-table td:first-child { font-weight: 650; }.table-icon { display: inline-grid; width: 1.85rem; height: 1.85rem; margin-inline-end: .45rem; border-radius: .55rem; background: var(--primary-soft); color: var(--primary); vertical-align: middle; }.state-card h3 { margin: .3rem 0 var(--space-5); font-size: 1.1rem; letter-spacing: -.03em; }.state-list { display: grid; gap: var(--space-5); }.state-list > div { display: flex; align-items: flex-start; gap: .65rem; }.state-list strong, .state-list small { display: block; }.state-list strong { font-size: .76rem; }.state-list small { margin-top: .1rem; color: var(--muted); font-size: .69rem; }.state-icon { width: 1.95rem; height: 1.95rem; border-radius: .55rem; }.state-icon.success { background: var(--success-soft); color: var(--success); }.state-icon.danger { background: var(--danger-soft); color: var(--danger); }.state-icon.neutral { background: var(--surface-muted); color: var(--muted); }.skeleton-section { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-muted); }.skeleton-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }.skeleton-card { display: flex; gap: .75rem; min-height: 76px; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }.skeleton-card > div { flex: 1; }.skeleton { display: block; border-radius: .35rem; background: linear-gradient(90deg, var(--border) 20%, var(--surface-muted) 50%, var(--border) 80%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }.avatar-skeleton { width: 2.6rem; height: 2.6rem; border-radius: 50%; }.block-skeleton { width: 3.4rem; height: 3.4rem; }.line-wide { width: 76%; height: .6rem; margin: .1rem 0 .55rem; }.line-mid { width: 54%; height: .55rem; margin-bottom: .45rem; }.line-short { width: 35%; height: .55rem; } @keyframes shimmer { to { background-position-x: -200%; } }
.app-footer { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: auto; padding: var(--space-5) clamp(1.25rem, 3vw, 2.5rem); border-top: 1px solid var(--border); color: var(--subtle); font-size: .68rem; }.app-footer > span:last-child { display: flex; gap: var(--space-4); }.app-footer a:hover { color: var(--primary); }.footer-status { color: var(--success); }.footer-status i { font-size: .45rem; }
.drawer-backdrop { position: fixed; z-index: 1040; inset: 0; visibility: hidden; opacity: 0; background: rgb(16 24 40 / .3); transition: opacity .2s, visibility .2s; }.profile-drawer { position: fixed; z-index: 1050; top: 0; bottom: 0; inset-inline-end: 0; width: min(100vw - 1rem, 360px); padding: var(--space-6); background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(110%); transition: transform .25s ease; }.drawer-open .profile-drawer { transform: translateX(0); }.drawer-open .drawer-backdrop { visibility: visible; opacity: 1; }.drawer-heading { display: flex; justify-content: space-between; gap: var(--space-3); }.drawer-heading h2 { margin: .2rem 0 0; font-size: 1.2rem; letter-spacing: -.03em; }.drawer-profile { display: flex; align-items: center; gap: .8rem; margin: var(--space-8) 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-muted); }.drawer-profile strong { display: block; }.drawer-profile p { margin: .15rem 0 0; color: var(--muted); font-size: .75rem; }.drawer-menu { display: grid; }.drawer-menu a { display: flex; align-items: center; gap: .7rem; padding: .85rem .35rem; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 600; }.drawer-menu a i:last-child { margin-inline-start: auto; font-size: .7rem; }
.modal-content { border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }.modal-header, .modal-footer { padding: var(--space-5); border-color: var(--border); }.modal-header { align-items: flex-start; }.modal-header h2 { margin: .2rem 0 0; font-size: 1.2rem; letter-spacing: -.03em; }.modal-body { padding: var(--space-5); color: var(--muted); }.modal-body p { margin-top: 0; }.modal-body .form-control { margin-top: 0; }.toast { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }.toast-body { display: flex; align-items: center; gap: .65rem; color: var(--ink); }.toast-body > i { color: var(--success); font-size: 1rem; }
[dir="rtl"] .profile-drawer { transform: translateX(-110%); } [dir="rtl"] .drawer-open .profile-drawer { transform: translateX(0); } [dir="rtl"] .app-table { text-align: start; } [dir="rtl"] .hero-panel { background: linear-gradient(245deg, #f3f5ff, #fff 65%, #eefbfa); }
@media (max-width: 1199px) { .component-grid { grid-template-columns: repeat(2, 1fr); }.stats-grid { grid-template-columns: repeat(2, 1fr); }.app-sidebar { flex-basis: 240px; } }
@media (max-width: 899px) { .app-sidebar { position: fixed; z-index: 1030; inset: 0 auto 0 0; width: min(82vw, 290px); transform: translateX(-105%); transition: transform .24s ease; box-shadow: var(--shadow-lg); }.sidebar-open .app-sidebar { transform: translateX(0); }.sidebar-open::after { position: fixed; z-index: 1020; inset: 0; background: rgb(16 24 40 / .3); content: ""; }.mobile-menu { display: inline-grid; }.layout-grid { grid-template-columns: 1fr; } [dir="rtl"] .app-sidebar { inset: 0 0 0 auto; transform: translateX(105%); } [dir="rtl"] .sidebar-open .app-sidebar { transform: translateX(0); } }
@media (max-width: 640px) { .topbar { min-height: 64px; padding: 0 1rem; }.breadcrumb-wrap { margin-inline-end: auto; }.breadcrumb-current { font-size: .92rem; }.topbar-actions .icon-button:not(.notification-button) { display: none; }.page-content { padding: 1rem; }.hero-panel { grid-template-columns: 1fr; padding: 1.5rem; }.hero-panel h1 { font-size: 2rem; }.hero-orbit { display: none; }.stats-grid, .component-grid, .skeleton-demo { grid-template-columns: 1fr; }.section-heading { align-items: flex-start; flex-direction: column; }.app-footer { align-items: flex-start; flex-direction: column; padding: 1.25rem 1rem; }.app-footer > span:last-child { flex-wrap: wrap; gap: .65rem 1rem; }.table-card, .state-card, .skeleton-section { padding: 1rem; }.component-card { min-height: auto; }.app-table { min-width: 540px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }