:root {
    color-scheme: dark;
    --ink: #f4f4fa;
    --muted: #85869d;
    --line: #343448;
    --canvas: #1c1c2a;
    --panel: #27283b;
    --pink: #ff4388;
    --orange: #ff613d;
    --font-body: "DM Sans", sans-serif;
    --font-heading: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 10; inset: 60px auto 7px 14px; display: flex; width: 180px; flex-direction: column; padding: 13px 10px 10px; border-radius: 4px; background: linear-gradient(165deg, var(--sidebar-start, #ff826d) 0%, var(--sidebar-mid, #ff5e83) 55%, var(--sidebar-end, #fa4a8d) 100%); color: #fff1f3; transition: transform .25s ease, width .25s ease, padding .25s ease; }
.brand { display: flex; align-items: center; gap: 9px; padding: 0 8px; color: white; font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.6px; }
.brand-mark { display: grid; width: 20px; height: 20px; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark span { border-radius: 3px; background: #fff; }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { opacity: .72; }
.side-nav { flex: 1; overflow-x: hidden; overflow-y: auto; margin-top: 16px; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.nav-label { margin: 0 9px 6px; color: #fff0f1; font-size: 11px; font-weight: 700; letter-spacing: .6px; }
.nav-label-spaced { margin-top: 12px; }
.nav-link { display: flex; min-height: 31px; align-items: center; gap: 9px; margin: 1px 0; padding: 0 8px; border-radius: 5px; color: #fff3f4; font-size: 11px; line-height: 1.2; text-transform: uppercase; transition: color .2s ease, background .2s ease; }
.nav-link:hover, .nav-link.active { background: #df314d44; color: #fff; }
.nav-link.active { font-weight: 700; }
.nav-link > span:nth-child(2) { flex: 1; min-width: 0; overflow: visible; white-space: nowrap; }
.examples-parent > span:nth-child(2) { font-size: 10px; text-transform: none; letter-spacing: -.2px; }
.nav-icon { display: grid; width: 17px; height: 19px; flex: 0 0 17px; place-items: center; color: #fff4f6; font-size: 16px; text-align: center; }
.nav-chevron { margin-left: auto; color: #ffe1e8; font-size: 12px; }
.nav-parent[aria-expanded="false"] .nav-chevron { transform: rotate(-90deg); }
.nav-badge { display: grid; min-width: 18px; height: 18px; margin-left: auto; place-items: center; border-radius: 6px; background: #f52e52; color: white; font-size: 10px; }
.sub-nav { display: grid; gap: 0; padding: 2px 0 3px 23px; }
.sub-nav[hidden] { display: none; }
.sub-nav-link { display: flex; min-width: 0; align-items: center; gap: 7px; min-height: 25px; padding: 0 6px; border-radius: 4px; color: #fff0f2; font-size: 11px; line-height: 1.2; text-transform: uppercase; transition: .2s ease; }
.sub-nav-link > span:last-child { white-space: nowrap; }
.example-links .sub-nav-link { min-height: 25px; padding-left: 8px; font-size: 10px; }
.example-links .sub-nav-link > span { white-space: normal; }
.sub-nav-link:hover, .sub-nav-link.selected { background: #ed294c55; color: #fff; }
.sub-nav-dot { width: 4px; height: 4px; border: 1px solid #ffe6eb; border-radius: 50%; }
.sub-nav-link.selected .sub-nav-dot { border-color: white; background: white; box-shadow: 0 0 0 2px #ffffff55; }
.sidebar-bottom { padding-top: 8px; }
.profile-mini { display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 2px 2px; border: 0; border-top: 1px solid #ffffff4a; background: transparent; text-align: left; }
.avatar { display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #ffb4b6, #b34c7e); color: #fff; font-size: 10px; font-weight: 700; }
.avatar-small { width: 29px; height: 29px; }
.profile-copy { display: grid; gap: 3px; min-width: 0; }
.profile-copy strong { overflow: hidden; color: white; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { color: #ffe0e8; font-size: 10px; }
.profile-more { margin-left: auto; color: white; font-size: 18px; }
.main-column { min-height: 100vh; margin-left: 194px; }
.topbar { position: fixed; z-index: 9; inset: 0 0 auto; display: flex; height: 60px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 29px 0 73px; border-bottom: 1px solid #2b2b3b; background: rgba(30, 30, 44, .97); }
.topbar-title { display: flex; align-items: center; gap: 15px; color: #eeeef5; font-family: var(--font-heading); font-size: 13px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.header-cta { display: inline-flex; height: 34px; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 0; border-radius: 5px; color: white; font-size: 12px; font-weight: 700; white-space: nowrap; transition: .2s ease; }
.header-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.header-cta span { font-size: 12px; }
.cta-pink { background: linear-gradient(110deg, #ff3757, #ff5278); }
.cta-cyan { background: linear-gradient(110deg, #05b5d6, #00c9d2); }
.cta-blue { background: linear-gradient(110deg, #206ae8, #287cf8); }
.search-box { display: flex; width: 30px; height: 31px; align-items: center; justify-content: center; gap: 5px; padding: 0 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.search-icon { color: #d8d8e4; font-size: 20px; line-height: 1; }
.search-box input { width: 0; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-box:focus-within { width: 155px; justify-content: flex-start; border-color: #47475d; background: #262638; }
.search-box:focus-within input { width: 100%; }
.search-box input::placeholder { color: #89899d; }
.icon-button { position: relative; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #dbdbe5; font-size: 15px; }
.icon-button:hover, .more-button:hover { background: #3a3a50; }
.notification-dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border: 1px solid #1e1e2c; border-radius: 50%; background: #ff477c; }
.top-profile { display: flex; align-items: center; padding: 0; border: 0; background: transparent; }
.avatar-top { width: 27px; height: 27px; background: linear-gradient(145deg, #bba2d8, #72547e); }
.account-menu-wrap { position: relative; }
.account-menu-sidebar { width: 100%; }
.account-menu-caret { margin-left: 3px; color: #c8c7d6; font-size: 10px; }
.account-dropdown { position: absolute; z-index: 30; display: grid; width: 165px; padding: 5px; border: 1px solid #e4e4ea; border-radius: 5px; background: #fff; box-shadow: 0 9px 26px #11111b55; }
.account-dropdown[hidden] { display: none; }
.account-menu-top .account-dropdown { top: calc(100% + 10px); right: 0; }
.account-menu-sidebar .account-dropdown { right: 0; bottom: calc(100% + 10px); }
.account-dropdown a { display: flex; min-height: 37px; align-items: center; padding: 0 11px; border-radius: 3px; color: #555566; font-size: 12px; font-weight: 500; transition: background .15s ease, color .15s ease; }
.account-dropdown a + a { border-top: 1px solid #ededf1; border-radius: 0 0 3px 3px; }
.account-dropdown a:hover, .account-dropdown a:focus-visible { outline: none; background: #f1eff8; color: #7552aa; }
.account-menu-top .top-profile { gap: 3px; }
.menu-toggle { display: none; }
.dashboard-content { max-width: 1700px; margin: 0 auto; padding: 78px 21px 17px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.eyebrow { margin-bottom: 3px; color: #a6a6b8; font-size: 11px; letter-spacing: .25px; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--font-heading); }
h1 { margin-bottom: 0; color: #eeeef5; font-size: 20px; font-weight: 500; letter-spacing: -.4px; }
h1 span { color: #818197; }
.page-description { display: none; margin: 4px 0 0; color: #8a8a9e; font-size: 10px; }
.heading-actions { display: flex; gap: 2px; }
.button { display: inline-flex; height: 31px; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 1px solid #414154; border-radius: 2px; background: #28283a; color: #e4e4ed; font-size: 11px; font-weight: 600; white-space: nowrap; transition: .2s ease; }
.button-primary { border-color: #ff476d; background: #ff476d; color: white; }
.chart-tab.is-active { border-color: #ff667e; background: #ff667e; color: #fff; }
.button-secondary:hover, .button-primary:hover { filter: brightness(1.12); }
.button-caret, .download-icon { display: none; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin: 19px 0 18px; }
.metric-card, .panel { border: 0; border-radius: 3px; background: var(--panel); box-shadow: 0 3px 10px #11111b14; }
.metric-card { min-width: 0; min-height: 112px; padding: 13px 14px 11px; }
.metric-top, .metric-bottom { display: flex; align-items: center; justify-content: space-between; }
.metric-top { gap: 9px; }
.metric-label { max-width: calc(100% - 44px); margin-left: auto; color: #b6b6c7; font-size: 12px; line-height: 1.3; text-align: right; }
.metric-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: white; font-size: 15px; font-weight: 700; }
.metric-icon-blue { background: #0ec7df; }
.metric-icon-violet { background: #c637dc; }
.metric-icon-orange { background: #ff647f; }
.metric-icon-green { background: #12bfc5; }
.metric-icon-red { background: #fa3d50; }
.metric-bottom { justify-content: space-between; gap: 7px; margin-top: 8px; padding-right: 1px; }
.metric-value { color: #f6f6fb; font-family: var(--font-heading); font-size: 18px; font-weight: 500; letter-spacing: -.3px; white-space: nowrap; }
.metric-change { color: #68d7c7; font-size: 11px; }
.metric-change.change-neutral { color: #f6ba73; }
.metric-footnote { margin: 7px 0 0; color: #b0b0c0; font-size: 11px; }
.chart-panel { min-height: 300px; padding: 16px 15px 11px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-heading h2 { margin: 1px 0 0; color: #eeeef7; font-size: 20px; font-weight: 500; letter-spacing: -.25px; }
.panel-heading p { margin: 4px 0 0; color: #b0b0c0; font-size: 12px; }
.chart-heading-actions { display: flex; align-items: flex-start; gap: 10px; }
.chart-settings { color: #eeeef5; }
.chart-overline, .insight-overline { display: block; margin-bottom: 3px; color: #b0b0c0; font-size: 11px; }
.select-button { display: inline-flex; align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid #44445a; border-radius: 3px; background: #2c2c40; color: #b5b5c7; font-size: 11px; }
.select-button span { color: #a0a0b4; }
.chart-legend { display: flex; align-items: center; gap: 7px; margin: 3px 0 0 2px; color: #b0b0c0; font-size: 11px; }
.legend-dot { width: 7px; height: 7px; border-radius: 1px; background: #ff6344; }
.line-chart-wrap { position: relative; height: 220px; margin-top: 3px; padding-left: 35px; }
.chart-y-labels { position: absolute; inset: 4px auto 21px 0; display: flex; width: 29px; flex-direction: column; justify-content: space-between; color: #bfc0ce; font-size: 11px; text-align: right; }
.line-chart { display: block; width: 100%; height: calc(100% - 22px); overflow: visible; }
.chart-grid-line { stroke: #333348; stroke-width: .7; }
.chart-line { fill: none; stroke: #ff633e; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-point { fill: #ff6744; stroke: #29293c; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: r .15s ease; }
.chart-point:hover { r: 5; }
.chart-hit-area { fill: transparent; cursor: crosshair; outline: none; }
.chart-hit-area:focus + .chart-point { r: 6; stroke: #fff; }
.chart-hover-line { stroke: #8b8ba3; stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; pointer-events: none; vector-effect: non-scaling-stroke; }
.chart-hover-line[hidden] { display: none; }
.chart-tooltip { position: absolute; z-index: 2; min-width: 142px; padding: 9px 11px; border: 1px solid #44445b; border-radius: 4px; background: #fff; box-shadow: 0 4px 14px #08081166; color: #34364a; pointer-events: none; transform: translateX(-50%); }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip > strong { display: block; margin-bottom: 6px; color: #5f6173; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.chart-tooltip > span { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.chart-tooltip i { width: 7px; height: 7px; border-radius: 1px; background: #ff6744; }
.chart-tooltip b { margin-left: auto; color: #282a3d; font-size: 11px; }
.line-chart-months { display: flex; justify-content: space-between; padding: 3px 1px 0; color: #c0c0ce; font-size: 11px; }
.insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-bottom: 18px; }
.insight-panel { min-height: 220px; padding: 12px; }
.insight-panel .panel-heading h2 { font-size: 13px; font-weight: 500; }
.more-button { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #9d9db1; font-size: 18px; }
.insight-total { margin-top: 7px; color: #e4e4ee; font-family: var(--font-heading); font-size: 17px; }
.insight-total span { margin-left: 7px; color: #b0b0c0; font-family: var(--font-body); font-size: 10px; }
.mini-chart { display: flex; height: 112px; align-items: flex-end; justify-content: space-around; gap: 12px; margin-top: 7px; padding: 0 12px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 26px, #36364b 27px, transparent 28px); }
.mini-chart > span { width: 12%; min-width: 7px; border: 1px solid currentColor; border-bottom: 0; background: #ffffff08; }
.mini-chart-pink > span { color: #d22fae; }
.mini-chart-blue > span { color: #148bf3; }
.mini-chart-green > span { color: #00c7a4; border-radius: 50%; background: transparent; border: 0; width: 8px; position: relative; }
.mini-chart-green > span::before { position: absolute; top: 40%; left: 50%; width: 250%; height: 1px; background: currentColor; content: ""; transform: rotate(-22deg); transform-origin: left; }
.mini-chart-labels { display: flex; justify-content: space-between; padding: 7px 9px 0; color: #b0b0c0; font-size: 10px; }
.lower-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 17px; margin-bottom: 18px; }
.tasks-panel, .management-panel { min-width: 0; padding: 13px; }
.lower-panel-heading { align-items: center; min-height: 35px; padding-bottom: 10px; border-bottom: 1px solid #38384c; }
.lower-panel-heading h2 { font-size: 12px; }
.count-badge { margin-left: 4px; color: #b4b4c5; font-family: var(--font-body); font-size: 10px; font-weight: 500; }
.lower-panel-heading p { font-size: 10px; }
.task-list { max-height: 278px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #54546a transparent; }
.task-row { display: flex; min-height: 48px; align-items: center; gap: 10px; border-bottom: 1px solid #38384c; }
.task-row input { width: 14px; height: 14px; flex: 0 0 14px; accent-color: #e449b9; }
.task-copy { display: grid; flex: 1; min-width: 0; gap: 3px; padding: 7px 0; cursor: pointer; }
.task-copy strong { overflow-wrap: anywhere; color: #e4e4ed; font-size: 12px; font-weight: 600; }
.task-copy small { overflow-wrap: anywhere; color: #b0b0c0; font-size: 10px; line-height: 1.4; }
.task-row input:checked + .task-copy strong { color: #bcbccd; }
.task-edit { display: grid; width: 25px; height: 28px; flex: 0 0 25px; place-items: center; border: 0; background: transparent; color: #c0c0ce; font-size: 16px; }
.task-edit:hover { color: #ff6b91; }
.management-scroll { overflow-x: auto; }
.management-table { min-width: 590px; }
.management-table th { height: 36px; padding: 0 8px; color: #c2c2d1; font-size: 11px; text-transform: uppercase; }
.management-table td { height: 43px; padding: 0 8px; font-size: 11px; }
.management-table th:first-child, .management-table td:first-child { padding-left: 7px; }
.member-avatar { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #73738c; border-radius: 50%; background: linear-gradient(145deg, #7a91a8, #c07670); color: white; font-size: 10px; font-weight: 700; }
.progress-cell { display: flex; min-width: 100px; align-items: center; gap: 6px; color: #d0d0dc; font-size: 10px; }
.progress-cell > span:first-child { width: 25px; }
.progress-track { display: block; width: 67px; height: 7px; overflow: hidden; border-radius: 10px; background: #191927; }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: #536ba7; }
.row-actions { white-space: nowrap; }
.row-actions button { width: 19px; height: 25px; padding: 0; border: 0; background: transparent; color: #d2d2de; font-size: 15px; }
.row-actions button:first-child:hover { color: #14ccb3; }
.row-actions button:last-child:hover { color: #ff4e87; }
.locations-panel { margin-bottom: 18px; padding: 14px; }
.locations-heading { align-items: center; padding-bottom: 11px; }
.locations-heading h2 { font-size: 13px; }
.locations-heading p { font-size: 10px; }
.locations-content { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 20px; }
.location-list { display: grid; }
.location-row { display: grid; min-height: 38px; grid-template-columns: 26px minmax(100px, 1fr) 65px 67px; align-items: center; gap: 8px; border-top: 1px solid #38384c; color: #c1c1d0; font-size: 11px; }
.location-row:first-child { border-top: 0; }
.location-row strong { color: #e0e0ea; font-weight: 500; }
.location-row > span:nth-last-child(-n+2) { text-align: right; }
.location-flag { font-size: 14px; }
.world-map { min-width: 0; padding: 5px; }
.world-map svg { display: block; width: 100%; min-height: 160px; max-height: 270px; }
.map-land { fill: #9293a2; stroke: #292a3d; stroke-width: 2; stroke-linejoin: round; }
.map-grid { fill: none; stroke: #626377; stroke-width: .7; opacity: .3; }
.map-pins { fill: #ff6385; stroke: #27283b; stroke-width: 3; }
.table-panel { padding: 13px 0 0; }
.table-heading { align-items: center; padding: 0 13px 11px; }
.table-panel .panel-heading h2 { margin: 0 0 4px; font-size: 12px; }
.table-panel .panel-heading p { margin: 0; }
.table-filter { height: 25px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
thead { background: #303146; }
th { height: 34px; padding: 0 13px; color: #d0d0dc; font-size: 10px; font-weight: 600; }
th:first-child, td:first-child { padding-left: 16px; }
td { height: 41px; padding: 0 13px; border-top: 1px solid #35354a; color: #c4c4d1; font-size: 10px; }
td:first-child { color: #ececf4; font-weight: 600; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 2px; background: #124839; color: #73ddba; font-size: 10px; font-weight: 600; }
.status-pill > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pending { background: #58402b; color: #ffc17c; }
.status-progress { background: #293d63; color: #9db8ff; }
.table-footer { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 15px; padding: 0 13px; border-top: 1px solid #35354a; color: #b0b0c0; font-size: 10px; }
.table-footer strong { color: #dedee8; font-weight: 600; }
.pagination { display: flex; align-items: center; gap: 4px; }
.pagination button { display: grid; min-width: 23px; height: 23px; place-items: center; padding: 0 4px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #c0c0cd; font-size: 10px; }
.pagination button:hover:not(:disabled), .pagination button.page-current { border-color: #47475e; background: #34344a; color: #fff; }
.pagination button:disabled { color: #6c6c80; }
.pagination > span { color: #85859a; }
.page-footer { display: flex; justify-content: space-between; padding: 14px 2px 0; color: #a6a6b8; font-size: 10px; }
.footer-heart { color: #f268a0; }
.toast { position: fixed; z-index: 20; right: 20px; bottom: 20px; max-width: calc(100vw - 32px); padding: 11px 15px; border: 1px solid #424257; border-radius: 5px; background: #303044; box-shadow: 0 10px 32px #10101970; color: #f3f3f8; font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .22s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.table-showcase-stack { display: grid; gap: 30px; min-width: 0; overflow-x: clip; }
html.table-showcase-page { overflow-x: clip; }
body.table-showcase-page { overflow-x: clip; }
.table-demo-panel { min-width: 0; padding: 14px 15px 20px !important; border: 0; border-radius: 4px; background: #27283b; }
.table-demo-panel > h2, .table-section-title h2 { margin: 0 0 15px; color: #e8e7ef; font-family: var(--font-heading); font-size: 16px; font-weight: 500; }
.table-scroll { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.showcase-table { width: 100%; border-collapse: collapse; color: #c7c6d3; font-size: 12px; text-align: left; }
.showcase-table th { color: #d9d8e2; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.showcase-table th, .showcase-table td { height: 42px; padding: 8px 9px; border-bottom: 1px solid #3a3b50; white-space: nowrap; }
.showcase-table thead th { height: 35px; }
.showcase-table tbody tr:last-child td { border-bottom: 0; }
.regular-table th:not(:first-child), .regular-table td:not(:first-child),
.plain-table th:not(:first-child), .plain-table td:not(:first-child),
.color-table th:not(:first-child), .color-table td:not(:first-child) { text-align: left; }
.showcase-table thead th span { float: right; color: #9d9caf; font-size: 10px; }
.table-plain-section { min-width: 0; padding: 22px 10px 4px; }
.table-section-title h2 { margin-bottom: 4px; }
.table-section-title p { margin: 0 0 13px; color: #d2d1dd; font-size: 11px; }
.plain-table th, .plain-table td { border-color: #323344; }
.color-table tbody tr td { transition: background .15s ease; }
.color-table .table-color-0 td { background: #04bd9a; color: #fff; }
.color-table .table-color-1 td { background: #27283b; }
.color-table .table-color-2 td { background: #2586ef; color: #fff; }
.color-table .table-color-3 td { background: #f64d91; color: #fff; }
.color-table .table-color-4 td { background: #27283b; }
.color-table .table-color-5 td { background: #ff8a76; color: #fff; }
.color-table .table-color-1 td, .color-table .table-color-4 td { border-color: #3a3b50; }
.extended-employee-table th:first-child, .extended-employee-table td:first-child { width: 55px; text-align: center; }
.extended-employee-table th:last-child, .extended-employee-table td:last-child { width: 88px; text-align: right; }
.table-avatar { display: inline-grid; width: 27px; height: 27px; place-items: center; border: 2px solid #a9b5d0; border-radius: 50%; background: #44526c; color: #f4f3f8; font-size: 9px; font-weight: 700; }
.avatar-tone-1 { background: #8c5142; }.avatar-tone-2 { background: #946a39; }.avatar-tone-3 { background: #695078; }.avatar-tone-4 { background: #3c7380; }.avatar-tone-5 { background: #8b4669; }
.table-icon-action { width: 28px; height: 28px; border: 0; background: transparent; color: #11c5a0; font-size: 17px; cursor: pointer; }
.table-icon-action.is-danger { color: #ed4c78; }
.table-milestone { position: relative; display: grid; grid-template-columns: 1fr auto; width: 125px; gap: 3px; font-size: 10px; }
.table-milestone small { color: #c7c6d3; font-size: 9px; }
.table-milestone i { height: 6px; overflow: hidden; border-radius: 5px; background: #191a28; }
.table-milestone i::after { display: block; width: var(--milestone); height: 100%; border-radius: inherit; background: #546aab; content: ""; }
.striped-table tbody tr:nth-child(odd) td { background: #232437; }
.striped-table input { width: 13px; height: 13px; accent-color: #d84fd0; }
.striped-table tfoot td, .striped-table tfoot th, .shopping-table tfoot td, .shopping-table tfoot th { height: 54px; border: 0; }
.table-total { color: #e7e6ef; font-size: 22px !important; font-weight: 400 !important; text-align: right; }
.shopping-table-panel { padding-bottom: 18px !important; }
.shopping-table th, .shopping-table td { height: 105px; text-align: center; }
.shopping-table th:first-child, .shopping-table td:first-child { min-width: 260px; text-align: left; }
.cart-product { display: flex; align-items: center; gap: 14px; }
.cart-product > span:last-child { display: grid; gap: 5px; }
.cart-product strong { color: #cb56ea; font-size: 15px; font-weight: 500; }
.cart-product small { color: #9998ab; font-size: 12px; }
.cart-product-art { display: grid; width: 72px; height: 72px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #30354a; color: #d6d5e0; font-size: 44px; }
.cart-art-jacket { background: linear-gradient(145deg, #252734, #51464b); color: #a4a0a9; }
.cart-art-shirt { background: linear-gradient(145deg, #ad2587, #ed41b7); color: #ffd3f3; }
.cart-art-shorts { background: linear-gradient(145deg, #376994, #66a9dc); color: #d9edff; }
.cart-quantity { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid #2783ed; border-radius: 4px; }
.cart-quantity button { width: 29px; height: 27px; border: 0; background: #277fe0; color: #fff; font-size: 17px; cursor: pointer; }
.cart-quantity button:first-child { background: #26314a; }
.cart-quantity output { min-width: 27px; color: #d6d5df; }
.shopping-table .table-total { font-size: 20px !important; }
.shopping-table-actions { display: flex; justify-content: flex-end; padding-top: 8px; }
.shopping-table-actions .showcase-primary-button { min-width: 165px; }
.datatable-heading { justify-content: center; text-align: center; }
.datatable-heading > div { width: min(100%, 800px); }
.datatable-heading h1 { color: #d9d8e4; font-family: var(--font-heading); font-size: 25px; font-weight: 500; }
.datatable-heading > div > p { max-width: none; font-size: 13px; }
.datatable-heading a { color: #cc61e7; text-decoration: none; }
.datatable-panel { min-width: 0; padding: 14px 15px 15px !important; border: 0; border-radius: 4px; background: #27283b; }
.datatable-controls, .datatable-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.datatable-controls { margin-bottom: 10px; }
.datatable-length, .datatable-search { display: flex; align-items: center; gap: 7px; color: #bcbac9; font-size: 11px; }
.datatable-length select, .datatable-search input { min-height: 29px; padding: 0 8px; border: 1px solid #414258; border-radius: 4px; background: #222336; color: #e5e4ed; font: inherit; }
.datatable-search input { width: 170px; }
.data-table th:first-child, .data-table td:first-child { width: 35px; }
.data-table th button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.data-table th button span { color: #85869c; font-size: 12px; }
.data-table th button[aria-sort="ascending"] span::after { content: " ↑"; color: #dc68de; }
.data-table th button[aria-sort="descending"] span::after { content: " ↓"; color: #dc68de; }
.data-table tbody td { height: 33px; padding-top: 5px; padding-bottom: 5px; }
.data-table tbody tr:nth-child(even):not(.table-detail-row) td { background: #242538; }
.datatable-expand { display: inline-grid; width: 14px; height: 14px; place-items: center; padding: 0; border: 1px solid #5ca7f5; border-radius: 50%; background: #1988e8; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; }
.datatable-expand[aria-expanded="true"] { background: #ed4c78; border-color: #ed4c78; }
.data-table .table-detail-row td { height: auto; padding: 12px 20px; background: #202133; color: #aaa9bb; white-space: normal; }
.data-table tfoot th { height: 33px; }
.datatable-footer { margin-top: 9px; }
.datatable-footer > p { margin: 0; color: #bcbac9; font-size: 11px; }
.datatable-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.datatable-pagination button { min-width: 27px; height: 27px; padding: 0 7px; border: 0; border-radius: 50%; background: transparent; color: #c8c7d3; font-size: 11px; cursor: pointer; }
.datatable-pagination button.is-active { background: #d84fd0; color: white; }
.datatable-pagination button:disabled { color: #69697d; cursor: not-allowed; }
.saas-dashboard { display: grid; gap: 17px; }
.saas-dashboard .panel { min-width: 0; padding: 17px; border: 1px solid #343448; border-radius: 5px; background: #27283b; }
.saas-profile-strip { display: grid; min-height: 84px; grid-template-columns: minmax(210px, 1.1fr) minmax(280px, 1.4fr) auto; align-items: center; gap: 20px; }
.saas-profile { display: flex; align-items: center; gap: 12px; }
.saas-avatar { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 3px solid #45465e; border-radius: 50%; background: linear-gradient(145deg, #dba38d, #8c618d); color: white; font-size: 14px; font-weight: 700; }
.saas-profile > div { display: grid; gap: 3px; }
.saas-profile > div > span { color: #b5b5c7; font-size: 11px; }
.saas-profile strong { color: #f0f0f6; font-size: 14px; font-weight: 600; }
.saas-profile small { color: #a1a1b5; font-size: 11px; }
.saas-workspace-stats { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 15px; }
.saas-workspace-stats > div { display: grid; gap: 4px; text-align: center; }
.saas-workspace-stats span { color: #adaebe; font-size: 11px; }
.saas-workspace-stats strong { color: #f1f1f7; font-family: var(--font-heading); font-size: 19px; font-weight: 600; }
.saas-setting-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 4px; background: #5368df; color: white; font-size: 11px; }
.saas-welcome-row { display: grid; grid-template-columns: minmax(250px, 1.55fr) repeat(3, minmax(145px, 1fr)); gap: 15px; }
.saas-welcome-card { position: relative; display: flex; min-height: 145px; align-items: center; overflow: hidden; padding: 18px 20px !important; background: #303657 !important; }
.saas-welcome-card > div { position: relative; z-index: 1; max-width: 72%; }
.saas-welcome-kicker { color: #c1c9ff; font-size: 10px; font-weight: 700; letter-spacing: .6px; }
.saas-welcome-card h1 { margin: 7px 0 3px; color: #f5f6ff; font-size: 20px; font-weight: 700; }
.saas-welcome-card p { margin: 0; color: #d2d6ff; font-size: 12px; }
.saas-welcome-card ul { display: grid; gap: 5px; margin: 12px 0 0; padding-left: 15px; color: #c1c9ff; font-size: 10px; }
.saas-welcome-art { position: absolute; right: 8px; bottom: 3px; width: 41%; max-width: 210px; height: auto; }
.saas-kpi-card { display: flex; min-height: 145px; flex-direction: column; justify-content: center; padding: 16px !important; }
.saas-kpi-heading { display: flex; align-items: center; gap: 9px; color: #c1c1d0; font-size: 11px; }
.saas-kpi-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #393c5c; color: #aab5ff; font-size: 14px; font-weight: 700; }
.saas-kpi-violet { background: #463966; color: #c6a6ff; }
.saas-kpi-cyan { background: #254858; color: #83deec; }
.saas-kpi-value { margin: 10px 0 4px; color: #f4f4fa; font-family: var(--font-heading); font-size: 23px; font-weight: 600; letter-spacing: -.5px; }
.saas-kpi-card p { margin: 0; color: #a8a8bc; font-size: 10px; }
.saas-kpi-card p span { display: inline-block; margin-right: 4px; padding: 3px 5px; border-radius: 3px; background: #21483f; color: #82dfbd; font-size: 10px; font-weight: 600; }
.saas-analytics-row { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(270px, .95fr); gap: 17px; }
.saas-earning-panel, .saas-sales-panel { min-height: 320px; }
.saas-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.saas-panel-heading h2 { margin: 0 0 5px; color: #f0f0f7; font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
.saas-panel-heading p { margin: 0; color: #a7a7ba; font-size: 11px; }
.saas-chart-controls { display: flex; align-items: center; gap: 5px; }
.saas-select-label select, .saas-period-button { min-height: 29px; max-width: 105px; padding: 0 8px; border: 1px solid #45465c; border-radius: 3px; background: #2c2d42; color: #d8d8e5; font-size: 10px; }
.saas-period-button { cursor: pointer; }
.saas-earning-layout { display: grid; grid-template-columns: minmax(145px, .62fr) minmax(0, 1.8fr); align-items: center; gap: 15px; margin-top: 21px; }
.saas-earning-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.saas-earning-summary > span { color: #b0b0c0; font-size: 11px; }
.saas-earning-summary > strong { color: #f1f1f7; font-family: var(--font-heading); font-size: 22px; font-weight: 600; }
.saas-earning-summary > small { color: #b0b0c0; font-size: 10px; }
.saas-earning-summary > small b, .saas-product-total small b { margin-right: 4px; padding: 3px 5px; border-radius: 3px; background: #21483f; color: #82dfbd; font-weight: 600; }
.saas-earning-summary > button { min-height: 30px; margin: 5px 0 9px; padding: 0 10px; border: 0; border-radius: 3px; background: #596de4; color: #fff; font-size: 10px; }
.saas-earning-summary > button span { margin-left: 4px; }
.saas-earning-summary > .saas-last-month { margin-top: 3px; }
.saas-earning-summary > .saas-last-value { font-size: 16px; }
.saas-line-chart-wrap { position: relative; min-width: 0; height: 218px; padding-left: 25px; }
.saas-line-y { position: absolute; inset: 0 0 19px 0; display: flex; width: 20px; flex-direction: column; justify-content: space-between; color: #b1b1c3; font-size: 10px; }
.saas-line-chart { display: block; width: 100%; height: calc(100% - 19px); overflow: visible; }
.saas-chart-grid { fill: none; stroke: #3b3c52; stroke-width: 1; }
.saas-line-shadow { fill: none; stroke: #6676f2; stroke-width: 9; opacity: .1; }
.saas-line { fill: none; stroke: #8190ff; stroke-width: 3; stroke-linecap: round; }
.saas-chart-hits circle { fill: transparent; stroke: transparent; stroke-width: 11; cursor: crosshair; }
.saas-chart-hits circle:focus { outline: none; fill: #8190ff; stroke: #8190ff66; }
.saas-line-x { display: flex; justify-content: space-between; padding-top: 3px; color: #b0b0c0; font-size: 10px; }
.saas-sales-panel { display: flex; flex-direction: column; }
.saas-donut { position: relative; width: min(190px, 70%); aspect-ratio: 1; margin: 18px auto 15px; border-radius: 50%; background: conic-gradient(#6877f3 0 46.7%, #35c391 46.7% 78.4%, #ff6d70 78.4% 100%); }
.saas-donut::after { position: absolute; inset: 20%; border-radius: inherit; background: #27283b; content: ""; }
.saas-donut-hole { position: absolute; z-index: 1; inset: 28%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.saas-donut-hole strong { color: #f3f3fa; font-family: var(--font-heading); font-size: 18px; }
.saas-donut-hole span { margin-top: 3px; color: #aaaabd; font-size: 10px; }
.saas-donut-label { position: absolute; z-index: 2; color: white; font-size: 10px; font-weight: 700; text-shadow: 0 1px 3px #171725; }
.saas-donut-label-a { top: 29%; right: 2%; }
.saas-donut-label-b { bottom: 9%; left: 23%; }
.saas-donut-label-c { top: 10%; left: 17%; }
.saas-sales-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.saas-sales-legend > div { display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 5px; color: #c3c3d1; font-size: 10px; }
.saas-sales-legend strong { grid-column: 2; color: #f1f1f7; font-size: 11px; font-weight: 600; }
.legend-product { width: 7px; height: 7px; border-radius: 50%; }
.legend-product-a { background: #6877f3; }
.legend-product-b { background: #35c391; }
.legend-product-c { background: #ff6d70; }
.saas-bottom-grid { display: grid; grid-template-columns: minmax(245px, 1fr) minmax(270px, 1fr) minmax(280px, 1fr); align-items: start; gap: 17px; }
.saas-products-panel, .saas-tasks-panel, .saas-chat-panel { min-height: 330px; }
.saas-products-panel .saas-panel-heading { align-items: center; }
.saas-products-panel .saas-panel-heading h2, .saas-tasks-panel .saas-panel-heading h2, .saas-chat-panel .saas-panel-heading h2 { font-size: 13px; }
.saas-product-total { display: grid; justify-items: center; gap: 4px; padding: 14px 0 9px; }
.saas-product-total > span { color: #b7b7c8; font-size: 10px; }
.saas-product-total > strong { color: #f1f1f8; font-family: var(--font-heading); font-size: 21px; }
.saas-product-total > small { margin-top: 3px; color: #aeaec0; font-size: 10px; }
.saas-product-list { display: grid; }
.saas-product-row { display: grid; min-height: 64px; grid-template-columns: minmax(90px, 1fr) 43px 43px; align-items: center; gap: 12px; border-top: 1px solid #393a50; }
.saas-product-copy { display: grid; gap: 4px; }
.saas-product-copy strong { color: #ebebf3; font-size: 11px; font-weight: 500; }
.saas-product-copy small { color: #a7a7ba; font-size: 10px; }
.saas-product-ring { width: 39px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--product-value), #3b3c50 0); }
.saas-product-ring::after { display: block; width: 65%; height: 65%; margin: 17.5%; border-radius: 50%; background: #27283b; content: ""; }
.saas-ring-a { --ring-color: #6877f3; }
.saas-ring-b { --ring-color: #35c391; }
.saas-ring-c { --ring-color: #ff6d70; }
.saas-product-sales { display: grid; gap: 4px; justify-items: end; }
.saas-product-sales span { color: #aaaabd; font-size: 10px; }
.saas-product-sales strong { color: #e8e8f0; font-size: 11px; font-weight: 500; }
.saas-task-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 13px 0 5px; padding: 4px; border-radius: 4px; background: #323348; }
.saas-task-tabs button { min-height: 29px; border: 0; border-radius: 3px; background: transparent; color: #b7b7c8; font-size: 10px; }
.saas-task-tabs button.is-active { background: #6174ee; color: #fff; font-weight: 600; }
.saas-task-row { display: flex; min-height: 59px; align-items: center; gap: 9px; border-bottom: 1px solid #393a50; }
.saas-task-row[hidden] { display: none; }
.saas-task-row input { width: 14px; height: 14px; accent-color: #6678f2; }
.saas-task-row > span:nth-of-type(1) { display: grid; flex: 1; gap: 4px; }
.saas-task-row strong { color: #e5e5ef; font-size: 11px; font-weight: 500; }
.saas-task-row small { color: #aaaabd; font-size: 10px; }
.saas-task-row input:checked + span strong { color: #9393a8; text-decoration: line-through; }
.saas-task-edit { color: #8795ff; font-size: 14px; }
.saas-add-task-button { display: block; min-height: 31px; margin: 12px auto 0; padding: 0 13px; border: 0; border-radius: 4px; background: #596de4; color: white; font-size: 10px; }
.saas-add-task { display: flex; gap: 6px; margin-top: 10px; }
.saas-add-task[hidden] { display: none; }
.saas-add-task input { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid #45465c; border-radius: 3px; background: #222336; color: #f0f0f6; font-size: 10px; }
.saas-add-task button { padding: 0 10px; border: 0; border-radius: 3px; background: #596de4; color: white; font-size: 10px; }
.saas-chat-panel { display: flex; flex-direction: column; }
.saas-chat-heading { align-items: center; padding-bottom: 12px; border-bottom: 1px solid #393a50; }
.saas-chat-heading > div:last-child { display: flex; gap: 2px; }
.saas-chat-heading p { display: flex; align-items: center; gap: 5px; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #35c391; }
.saas-chat-messages { display: flex; min-height: 185px; flex: 1; flex-direction: column; gap: 12px; padding: 12px 0; }
.chat-date { align-self: center; color: #aaaabd; font-size: 9px; }
.chat-bubble { max-width: 88%; padding: 9px 10px; border-radius: 5px; }
.chat-bubble strong { font-size: 10px; font-weight: 600; }
.chat-bubble p { margin: 4px 0 5px; font-size: 10px; line-height: 1.45; }
.chat-bubble small { display: block; color: #aaaabd; font-size: 9px; text-align: right; }
.chat-incoming { align-self: flex-start; background: #343651; color: #e6e6f0; }
.chat-incoming strong { color: #aeb8ff; }
.chat-outgoing { align-self: flex-end; background: #30374f; color: #e6e8f2; }
.chat-outgoing strong { color: #c1c9ff; }
.saas-chat-form { display: flex; gap: 7px; padding-top: 10px; border-top: 1px solid #393a50; }
.saas-chat-form input { width: 100%; min-width: 0; height: 35px; padding: 0 10px; border: 1px solid #45465c; border-radius: 18px; outline: none; background: #222336; color: #f0f0f6; font-size: 10px; }
.saas-chat-form input::placeholder { color: #a4a4b8; }
.saas-chat-form input:focus { border-color: #7382f4; }
.saas-chat-form button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 4px; background: #596de4; color: white; font-size: 10px; }
.saas-chat-form button span { font-size: 12px; }
.saas-dashboard .page-footer { padding-bottom: 3px; }
.crypto-dashboard { display: grid; gap: 16px; }
.crypto-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.crypto-eyebrow { color: #ffc0cf; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.crypto-page-heading h1 { margin: 4px 0 3px; color: #f3f3f9; font-family: var(--font-heading); font-size: 23px; font-weight: 600; }
.crypto-page-heading p { margin: 0; color: #adaebe; font-size: 12px; }
.crypto-live { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #3b3c50; border-radius: 4px; background: #27283b; color: #c8c8d5; font-size: 10px; }
.crypto-live i { width: 7px; height: 7px; border-radius: 50%; background: #48ca99; box-shadow: 0 0 0 3px #48ca9922; }
.crypto-dashboard .panel { min-width: 0; padding: 16px; border: 1px solid #343448; border-radius: 5px; background: #27283b; }
.crypto-top-grid { display: grid; grid-template-columns: minmax(300px, .88fr) minmax(0, 1.32fr); gap: 16px; }
.crypto-account-card { display: flex; min-height: 191px; flex-direction: column; }
.crypto-account-heading { display: flex; align-items: center; gap: 10px; }
.crypto-user-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 2px solid #49465e; border-radius: 50%; background: linear-gradient(145deg, #e3aa91, #8b617e); color: white; font-size: 10px; font-weight: 700; }
.crypto-account-heading > div { display: grid; gap: 3px; }
.crypto-account-heading strong { color: #f0f0f6; font-size: 13px; font-weight: 600; }
.crypto-account-heading > div > span { color: #aaaabc; font-size: 10px; }
.crypto-more { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; margin-left: auto; border: 0; border-radius: 4px; background: transparent; color: #b4b4c5; font-size: 18px; }
.crypto-more:hover { background: #38394e; color: #fff; }
.crypto-account-id { display: flex; align-items: center; gap: 9px; margin-top: 17px; padding: 10px 0; border-top: 1px solid #3a3b50; border-bottom: 1px solid #3a3b50; color: #aaaabc; font-size: 10px; }
.crypto-account-id strong { color: #d9d9e4; font-size: 10px; font-weight: 600; }
.crypto-verified { margin-left: auto; color: #80dab8; font-size: 9px; }
.crypto-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 13px; }
.crypto-balance-row > div:first-child { display: grid; gap: 4px; }
.crypto-balance-row > div:first-child > span { color: #b3b3c4; font-size: 10px; }
.crypto-balance-row > div:first-child > strong { color: #f4f4fa; font-family: var(--font-heading); font-size: 23px; font-weight: 600; }
.crypto-balance-row > div:first-child > small { color: #b3b3c4; font-size: 10px; }
.crypto-balance-row > div:first-child > small b { margin-right: 3px; color: #7cdbb6; font-weight: 600; }
.crypto-account-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.crypto-account-actions button { min-height: 31px; padding: 0 10px; border: 1px solid #4a4b62; border-radius: 4px; background: #2d2e42; color: #e2e2ec; font-size: 10px; white-space: nowrap; }
.crypto-account-actions .crypto-accent-button { border-color: #ff6684; background: #ff6684; color: white; }
.crypto-welcome-card { position: relative; display: flex; min-height: 191px; align-items: center; overflow: hidden; background: linear-gradient(115deg, #30334f, #292a40 70%) !important; }
.crypto-welcome-copy { position: relative; z-index: 1; max-width: 67%; }
.crypto-welcome-kicker { color: #ffbdcc; font-size: 10px; font-weight: 700; letter-spacing: .6px; }
.crypto-welcome-copy h2 { margin: 7px 0 4px; color: #f4f4fa; font-family: var(--font-heading); font-size: 21px; font-weight: 600; }
.crypto-welcome-copy p { margin: 0; color: #c1c1d2; font-size: 11px; line-height: 1.5; }
.crypto-welcome-copy ul { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 16px; color: #c6c6d6; font-size: 10px; }
.crypto-welcome-copy li::marker { color: #ff758f; }
.crypto-welcome-art { position: absolute; right: 5px; bottom: 6px; width: 39%; max-width: 250px; height: auto; }
.crypto-market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.crypto-market-card { min-height: 119px; padding: 13px 14px !important; }
.crypto-market-title { display: flex; align-items: center; gap: 9px; }
.coin-mark, .transaction-coin { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 700; }
.coin-btc { background: #5b452f; color: #ffba63; }
.coin-eth { background: #3c3c61; color: #b7b5ff; }
.coin-ltc { background: #314b5b; color: #8ed2ff; }
.crypto-market-title > span:nth-child(2) { display: grid; gap: 3px; }
.crypto-market-title strong { color: #efeff6; font-size: 12px; font-weight: 600; }
.crypto-market-title small { color: #a6a6ba; font-size: 9px; }
.coin-watch { display: grid; width: 24px; height: 24px; place-items: center; margin-left: auto; border: 1px solid #424359; border-radius: 4px; background: #2c2d41; color: #c1c1d0; font-size: 15px; opacity: 0; transition: opacity .15s ease; }
.crypto-market-card:hover .coin-watch, .coin-watch:focus { opacity: 1; }
.crypto-market-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 11px; }
.crypto-market-bottom > div { display: grid; gap: 5px; }
.crypto-market-bottom > div > strong { color: #f4f4f9; font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
.crypto-up, .crypto-down { color: #80d9b7; font-size: 10px; }
.crypto-down { color: #ff829a; }
.crypto-up small, .crypto-down small { color: #9e9eaf; font-size: 9px; }
.coin-sparkline { display: block; width: 36%; height: 39px; overflow: visible; }
.coin-sparkline polyline { fill: none; stroke: #ffb959; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.coin-eth + span + .coin-watch ~ .crypto-market-bottom .coin-sparkline polyline { stroke: #9a91ff; }
.coin-sparkline.spark-down polyline { stroke: #74c9ff; }
.crypto-main-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(290px, .95fr); gap: 16px; }
.crypto-wallet-panel, .crypto-overview-panel { min-height: 300px; }
.crypto-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crypto-panel-heading h2 { margin: 0 0 4px; color: #f0f0f6; font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
.crypto-panel-heading p { margin: 0; color: #a7a7ba; font-size: 10px; }
.crypto-select select { max-width: 130px; min-height: 29px; padding: 0 9px; border: 1px solid #46475d; border-radius: 4px; background: #2d2e42; color: #d7d7e2; font-size: 10px; }
.wallet-balance-layout { display: grid; min-height: 226px; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.55fr); align-items: center; gap: 9px; padding-top: 10px; }
.wallet-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wallet-summary > span { color: #b2b2c2; font-size: 11px; }
.wallet-summary > strong { color: #f4f4fa; font-family: var(--font-heading); font-size: 23px; font-weight: 600; }
.wallet-summary > small { color: #b0b0c0; font-size: 10px; }
.wallet-summary > small b { color: #7bdbb6; font-weight: 600; }
.wallet-income-expense { display: flex; gap: 21px; margin-top: 6px; }
.wallet-income-expense > div { display: grid; gap: 5px; }
.wallet-income-expense span { color: #a9a9bb; font-size: 10px; }
.wallet-income-expense strong { color: #e8e8f0; font-size: 12px; font-weight: 500; }
.wallet-summary > button { min-height: 30px; margin-top: 5px; padding: 0 10px; border: 0; border-radius: 4px; background: #ff6684; color: white; font-size: 10px; }
.wallet-summary > button span { margin-left: 4px; }
.wallet-allocation { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(125px, .9fr); align-items: center; gap: 8px; }
.wallet-rings { position: relative; width: min(215px, 100%); aspect-ratio: 1; margin: auto; }
.wallet-rings svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track, .ring-value { fill: none; stroke-linecap: round; }
.ring-track { stroke: #3a3b50; stroke-width: 8; }
.ring-value { stroke-width: 8; transform-origin: 120px 120px; }
.ring-value-btc { stroke: #6878f4; stroke-dasharray: 285 603; }
.ring-value-eth { stroke: #ffb857; stroke-dasharray: 185 478; }
.ring-value-ltc { stroke: #fb788f; stroke-dasharray: 164 352; }
.wallet-rings > div { position: absolute; inset: 38%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wallet-rings > div strong { color: #f1f1f7; font-family: var(--font-heading); font-size: 16px; }
.wallet-rings > div span { margin-top: 3px; color: #aaaabc; font-size: 9px; }
.wallet-assets { display: grid; gap: 12px; }
.wallet-assets > div { display: grid; grid-template-columns: 8px minmax(72px, 1fr) auto; align-items: center; gap: 7px; }
.wallet-assets > div > span { display: grid; gap: 3px; }
.wallet-assets strong { color: #e0e0ea; font-size: 10px; font-weight: 500; }
.wallet-assets small { color: #a8a8ba; font-size: 9px; }
.wallet-assets b { color: #e5e5ed; font-size: 10px; font-weight: 500; white-space: nowrap; }
.asset-dot { width: 7px; height: 7px; border-radius: 50%; }
.asset-btc { background: #ffb959; }.asset-eth { background: #a198ff; }.asset-ltc { background: #76c9ff; }
.crypto-overview-panel { display: flex; flex-direction: column; }
.crypto-period-tabs { display: flex; justify-content: flex-end; gap: 4px; margin: 9px 0 4px; }
.crypto-period-tabs button { min-width: 28px; height: 25px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #b7b7c7; font-size: 9px; }
.crypto-period-tabs button:hover, .crypto-period-tabs button.is-active { border-color: #ff718c; background: #ff6684; color: #fff; }
.crypto-overview-chart { position: relative; min-height: 195px; flex: 1; padding: 3px 0 18px 34px; }
.crypto-overview-y { position: absolute; inset: 4px auto 22px 0; display: flex; width: 29px; flex-direction: column; justify-content: space-between; color: #b6b6c7; font-size: 9px; text-align: right; }
.crypto-overview-chart svg { display: block; width: 100%; height: 100%; min-height: 170px; overflow: visible; }
.crypto-overview-grid { fill: none; stroke: #3a3b50; stroke-width: 1; }
.crypto-overview-area { fill: url(#cryptoChartFill); }
.crypto-overview-line { fill: none; stroke: #ff9b49; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.crypto-overview-x { position: absolute; right: 0; bottom: 0; left: 34px; display: flex; justify-content: space-between; color: #b3b3c3; font-size: 9px; }
.crypto-bottom-grid { display: grid; grid-template-columns: minmax(245px, 1fr) minmax(260px, 1fr) minmax(270px, 1fr); align-items: start; gap: 16px; }
.crypto-transactions-panel, .crypto-notifications-panel, .crypto-trade-panel { min-height: 360px; }
.crypto-filter-tabs, .crypto-trade-tabs { display: flex; gap: 3px; margin: 12px 0 3px; padding: 4px; border-radius: 4px; background: #34354a; }
.crypto-filter-tabs button, .crypto-trade-tabs button { min-width: 45px; min-height: 27px; padding: 0 11px; border: 0; border-radius: 3px; background: transparent; color: #b9b9c9; font-size: 10px; }
.crypto-filter-tabs button.is-active, .crypto-trade-tabs button.is-active { background: #ff6684; color: white; font-weight: 600; }
.crypto-transaction-list { display: grid; }
.crypto-transaction-row { display: grid; min-height: 57px; grid-template-columns: 31px minmax(85px, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #3a3b50; }
.crypto-transaction-row[hidden] { display: none; }
.transaction-coin { width: 28px; height: 28px; font-size: 13px; }
.transaction-details, .transaction-amount { display: grid; gap: 4px; }
.transaction-details strong { color: #e7e7ef; font-size: 11px; font-weight: 500; }
.transaction-details small, .transaction-amount small { color: #aaaabd; font-size: 9px; }
.transaction-amount { justify-items: end; }
.transaction-amount strong { color: #e7e7ef; font-size: 10px; font-weight: 500; white-space: nowrap; }
.crypto-view-all { display: block; margin: 11px auto 0; padding: 5px; border: 0; background: transparent; color: #ff8aa0; font-size: 10px; }
.crypto-view-all span { margin-left: 4px; }
.crypto-notification-count { padding: 5px 7px; border-radius: 3px; background: #533243; color: #ff9cb0; font-size: 9px; white-space: nowrap; }
.crypto-notification-list { display: grid; max-height: 315px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #55566a transparent; }
.crypto-notification-item { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 9px; padding: 13px 0; border-bottom: 1px solid #393a50; }
.notification-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; }
.notification-pink { background: #533243; color: #ff8aa0; }.notification-green { background: #21473f; color: #76d8b5; }.notification-violet { background: #3b3557; color: #beb0ff; }.notification-orange { background: #55412f; color: #ffc477; }
.crypto-notification-item > div > strong { color: #ececf3; font-size: 11px; font-weight: 600; }
.crypto-notification-item p { margin: 5px 0 8px; color: #b5b5c5; font-size: 10px; line-height: 1.45; }
.crypto-notification-item > div > div { display: flex; justify-content: space-between; gap: 8px; color: #a4a4b7; font-size: 9px; }
.crypto-secure { color: #81dcb8; font-size: 9px; white-space: nowrap; }
.crypto-trade-tabs button { flex: 1; }
.crypto-trade-form { display: grid; gap: 10px; margin-top: 13px; }
.trade-field { display: grid; gap: 5px; color: #c9c9d5; font-size: 10px; }
.trade-field select, .trade-input-wrap, .trade-output { width: 100%; min-height: 34px; padding: 0 9px; border: 1px solid #45465c; border-radius: 3px; background: #222336; color: #e6e6ef; font: inherit; }
.trade-field select { font-size: 10px; }
.trade-input-wrap { display: flex; align-items: center; justify-content: space-between; padding-right: 10px; }
.trade-input-wrap input { width: 100%; min-width: 0; height: 31px; border: 0; outline: 0; background: transparent; color: #f2f2f7; font-size: 11px; }
.trade-input-wrap input::placeholder { color: #89899f; }
.trade-input-wrap > span { color: #ff9aaf; font-size: 10px; font-weight: 600; }
.trade-output { display: flex; align-items: center; justify-content: space-between; }
.trade-output small { color: #a5a5b7; font-size: 9px; }
.trade-total { color: #fff; font-weight: 700; }
.crypto-trade-submit { min-height: 34px; margin-top: 2px; border: 0; border-radius: 4px; background: #ff6684; color: white; font-size: 11px; font-weight: 600; }
.crypto-trade-submit:hover { background: #ff7892; }
.crypto-trade-submit span { margin-left: 5px; }
.trade-disclaimer { margin: -3px 0 0; color: #a5a5b7; font-size: 9px; text-align: center; }
.crypto-dashboard .page-footer { padding-bottom: 3px; }

@media (min-width: 1600px) {
    .dashboard-content { padding-top: 78px; }
    .chart-panel { min-height: 350px; }
    .line-chart-wrap { height: 260px; }
    .insight-panel { min-height: 260px; }
    .mini-chart { height: 150px; }
    .task-list { max-height: 310px; }
}
@media (max-width: 1100px) {
    .topbar { padding: 0 18px 0 73px; }
    .topbar-actions { gap: 7px; }
    .header-cta { padding: 0 8px; font-size: 10px; }
    .dashboard-content { padding-right: 18px; padding-left: 18px; }
    .metric-grid, .insights-grid { gap: 11px; }
    .metric-value { font-size: 16px; }
    .saas-welcome-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .saas-welcome-card { grid-column: 1 / -1; min-height: 155px; }
    .saas-analytics-row { grid-template-columns: minmax(0, 1.5fr) minmax(255px, .9fr); }
    .saas-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .saas-chat-panel { grid-column: 1 / -1; }
}
@media (max-width: 850px) {
    .sidebar { inset: 60px auto 0 0; width: 235px; transform: translateX(-100%); box-shadow: 12px 0 30px #11111b55; }
    .sidebar.sidebar-open { transform: translateX(0); }
    .main-column { margin-left: 0; }
    .menu-toggle { display: grid; }
    .topbar { justify-content: space-between; padding-left: 18px; }
    .topbar-title { gap: 8px; }
    .header-cta { height: 29px; padding: 0 7px; }
    .header-cta:nth-child(2) { display: none; }
    .lower-grid { grid-template-columns: 1fr; }
    .saas-dashboard { gap: 13px; }
    .saas-dashboard .panel { padding: 14px; }
    .saas-profile-strip { grid-template-columns: minmax(180px, 1fr) 1.3fr auto; gap: 10px; }
    .saas-analytics-row { grid-template-columns: minmax(0, 1.5fr) minmax(210px, .9fr); gap: 12px; }
    .saas-bottom-grid { gap: 12px; }
}
@media (max-width: 620px) {
    .topbar { height: 55px; padding: 0 11px; }
    .topbar-actions { gap: 3px; }
    .topbar-title { font-size: 10px; }
    .header-cta { height: 28px; padding: 0 7px; font-size: 10px; }
    .header-cta span { font-size: 13px; }
    .header-cta:nth-child(2) { display: none; }
    .header-cta:nth-child(3) { display: none; }
    .search-box { width: 27px; }
    .top-action { display: none; }
    .sidebar { inset: 55px auto 0 0; }
    .dashboard-content { padding: 72px 11px 14px; }
    .saas-dashboard { gap: 11px; }
    .saas-dashboard .panel { padding: 12px; }
    .saas-profile-strip { grid-template-columns: minmax(0, 1fr) auto; }
    .saas-workspace-stats { grid-column: 1 / -1; grid-row: 2; gap: 5px; padding: 10px 0 3px; border-top: 1px solid #393a50; }
    .saas-workspace-stats span { font-size: 10px; }
    .saas-workspace-stats strong { font-size: 17px; }
    .saas-setting-button { grid-column: 2; grid-row: 1; min-height: 30px; padding: 0 8px; font-size: 10px; }
    .saas-setting-button span { display: none; }
    .saas-welcome-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .saas-welcome-card { grid-column: 1 / -1; min-height: 155px; }
    .saas-welcome-card > div { max-width: 76%; }
    .saas-welcome-card h1 { font-size: 19px; }
    .saas-welcome-card ul { max-width: 230px; font-size: 10px; }
    .saas-welcome-art { right: 3px; width: 38%; }
    .saas-kpi-card { min-height: 122px; padding: 11px !important; }
    .saas-kpi-heading { gap: 6px; font-size: 10px; }
    .saas-kpi-icon { width: 27px; height: 27px; }
    .saas-kpi-value { font-size: 19px; }
    .saas-kpi-card p { font-size: 9px; }
    .saas-analytics-row, .saas-bottom-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .saas-chat-panel { grid-column: auto; }
    .saas-earning-panel, .saas-sales-panel { min-height: 0; }
    .saas-earning-layout { grid-template-columns: minmax(110px, .7fr) minmax(0, 1.5fr); gap: 8px; margin-top: 16px; }
    .saas-earning-summary > strong { font-size: 18px; }
    .saas-line-chart-wrap { height: 180px; padding-left: 21px; }
    .saas-line-y { width: 17px; font-size: 9px; }
    .saas-line-x { font-size: 9px; }
    .saas-donut { width: min(190px, 58%); }
    .saas-sales-legend > div { font-size: 10px; }
    .saas-sales-legend strong { font-size: 11px; }
    .saas-products-panel, .saas-tasks-panel, .saas-chat-panel { min-height: 0; }
    .saas-task-row { min-height: 56px; }
    .saas-chat-messages { min-height: 175px; }
    .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 10px; }
    .heading-actions { align-self: flex-end; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
    .metric-card { min-height: 96px; padding: 10px; }
    .metric-icon { width: 28px; height: 28px; font-size: 12px; }
    .metric-bottom { gap: 5px; margin-top: 8px; }
    .metric-value { font-size: 15px; }
    .metric-change { font-size: 10px; }
    .metric-footnote { font-size: 10px; }
    .chart-panel { min-height: 260px; padding: 13px 11px 10px; }
    .panel-heading h2 { font-size: 16px; }
    .chart-heading-actions { gap: 4px; }
    .chart-heading-actions .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
    .chart-heading-actions .button { height: 27px; padding: 0 8px; font-size: 10px; }
    .chart-settings { display: none; }
    .select-button { padding: 5px; font-size: 10px; }
    .line-chart-wrap { height: 185px; padding-left: 26px; }
    .chart-y-labels { width: 22px; font-size: 10px; }
    .line-chart-months { font-size: 10px; }
    .insights-grid { grid-template-columns: 1fr; gap: 9px; margin: 12px 0; }
    .insight-panel { min-height: 182px; padding: 11px; }
    .mini-chart { height: 95px; }
    .table-heading { align-items: flex-start; padding: 0 10px 10px; }
    .locations-content { grid-template-columns: 1fr; gap: 8px; }
    .world-map svg { min-height: 130px; max-height: 180px; }
    .location-row { grid-template-columns: 24px minmax(70px, 1fr) 54px 58px; gap: 5px; font-size: 10px; }
    th { padding: 0 10px; }
    td { padding: 0 10px; }
    th:first-child, td:first-child { padding-left: 11px; }
    .table-footer { align-items: flex-start; flex-direction: column; padding: 9px 10px; }
    .pagination { align-self: flex-end; }
    .page-footer { gap: 12px; font-size: 10px; }
}

@media (max-width: 1100px) {
    .crypto-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crypto-trade-panel { grid-column: 1 / -1; }
    .crypto-market-grid, .crypto-top-grid, .crypto-main-grid { gap: 12px; }
}
@media (max-width: 850px) {
    .crypto-top-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
    .crypto-main-grid { grid-template-columns: minmax(0, 1.4fr) minmax(250px, .9fr); }
    .wallet-balance-layout { grid-template-columns: minmax(125px, .7fr) minmax(0, 1.3fr); }
    .wallet-allocation { grid-template-columns: 1fr; }
    .wallet-assets { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .crypto-dashboard { gap: 11px; }
    .crypto-page-heading h1 { font-size: 21px; }
    .crypto-page-heading p { font-size: 11px; }
    .crypto-dashboard .panel { padding: 13px; }
    .crypto-top-grid, .crypto-main-grid, .crypto-bottom-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .crypto-account-card, .crypto-welcome-card { min-height: 0; }
    .crypto-account-card { min-height: 175px; }
    .crypto-balance-row { align-items: flex-start; flex-direction: column; }
    .crypto-account-actions { align-self: stretch; }
    .crypto-account-actions button { flex: 1; }
    .crypto-welcome-card { min-height: 175px; }
    .crypto-welcome-copy { max-width: 76%; }
    .crypto-welcome-copy h2 { font-size: 19px; }
    .crypto-welcome-art { right: -8px; width: 39%; }
    .crypto-market-grid { grid-template-columns: 1fr; gap: 9px; }
    .crypto-market-card { min-height: 100px; }
    .coin-watch { opacity: 1; }
    .crypto-main-grid { grid-template-columns: minmax(0, 1fr); }
    .crypto-wallet-panel, .crypto-overview-panel { min-height: 0; }
    .wallet-balance-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); min-height: 0; gap: 8px; }
    .wallet-summary > strong { font-size: 19px; }
    .wallet-income-expense { gap: 10px; }
    .wallet-allocation { grid-template-columns: minmax(110px, .9fr) minmax(105px, 1fr); gap: 5px; }
    .wallet-rings { width: 100%; }
    .wallet-assets { gap: 10px; }
    .wallet-assets > div { grid-template-columns: 7px minmax(55px, 1fr) auto; gap: 5px; }
    .wallet-assets b { font-size: 9px; }
    .crypto-overview-chart { min-height: 215px; }
    .crypto-bottom-grid { grid-template-columns: minmax(0, 1fr); }
    .crypto-transactions-panel, .crypto-notifications-panel, .crypto-trade-panel { min-height: 0; }
    .crypto-notification-list { max-height: none; }
    .crypto-trade-panel { grid-column: auto; }
    .transaction-details strong, .crypto-notification-item > div > strong { font-size: 12px; }
}

    .blog-dashboard, .jobs-dashboard { display: grid; gap: 16px; }
    .blog-dashboard .panel, .jobs-dashboard .panel { min-width: 0; padding: 18px; border: 1px solid #343448; border-radius: 5px; background: #27283b; }
    .blog-welcome, .jobs-welcome { display: flex; min-height: 116px; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 23px !important; background: linear-gradient(110deg, #38283e, #292a3d 66%) !important; }
    .blog-eyebrow, .jobs-eyebrow { display: block; margin-bottom: 6px; color: #ff91a8; font-size: 10px; font-weight: 700; letter-spacing: .9px; }
    .blog-welcome h1, .jobs-welcome h1 { margin: 0 0 5px; color: #f4f3fa; font-size: 22px; font-weight: 700; }
    .blog-welcome p, .jobs-welcome p { margin: 0; color: #b2b1c2; font-size: 12px; }
    .blog-welcome-actions, .jobs-welcome-actions { display: flex; align-items: center; gap: 9px; }
    .blog-date, .jobs-range { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 15px; padding: 0 10px; border: 1px solid #48485e; border-radius: 4px; background: #292a3e; color: #d4d3df; font-size: 10px; white-space: nowrap; }
    .blog-primary-button, .jobs-primary-button { min-height: 35px; padding: 0 13px; border: 0; border-radius: 4px; background: linear-gradient(110deg, #ff4a76, #ff6b82); color: white; font-size: 11px; font-weight: 700; white-space: nowrap; }
    .blog-metrics, .jobs-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .blog-dashboard .blog-metric, .jobs-dashboard .jobs-metric { min-height: 120px; padding: 15px 16px; }
    .blog-metric-top, .jobs-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #b6b5c6; font-size: 11px; }
    .blog-metric-icon, .jobs-metric-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 9px; font-size: 14px; font-style: normal; }
    .blog-tone-blue, .jobs-tone-blue { background: #263d55; color: #75b8fa; }.blog-tone-violet, .jobs-tone-violet { background: #3a3154; color: #b89bff; }.blog-tone-green, .jobs-tone-green { background: #23453f; color: #6ed4ad; }.blog-tone-red, .jobs-tone-red { background: #50313d; color: #ff8a9e; }
    .blog-metric > strong, .jobs-metric > strong { display: block; margin-top: 8px; color: #f4f3f9; font-family: var(--font-heading); font-size: 23px; font-weight: 700; letter-spacing: -.5px; }
    .blog-metric > small, .jobs-metric > small { display: block; margin-top: 5px; color: #a4a3b6; font-size: 10px; }
    .blog-metric > small b, .jobs-metric > small b { margin-right: 3px; color: #79d8b3; font-weight: 600; }
    .jobs-metric > small b.jobs-neutral { color: #b3b3c3; }
    .blog-main-grid, .jobs-main-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .95fr); gap: 16px; }
    .blog-engagement-panel, .blog-highlights-panel, .jobs-pipeline-panel, .jobs-roles-panel { min-height: 316px; }
    .blog-panel-heading, .jobs-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .blog-panel-heading .blog-eyebrow, .jobs-panel-heading .jobs-eyebrow { margin-bottom: 4px; }
    .blog-panel-heading h2, .jobs-panel-heading h2 { margin: 0 0 4px; color: #f0eff6; font-family: var(--font-heading); font-size: 15px; font-weight: 700; }
    .blog-panel-heading p, .jobs-panel-heading p { margin: 0; color: #a6a5b8; font-size: 10px; }
    .blog-chart-summary { display: flex; align-items: baseline; gap: 8px; margin: 19px 0 6px 31px; }
    .blog-chart-summary strong { color: #f3f2f9; font-family: var(--font-heading); font-size: 22px; }
    .blog-chart-summary span { color: #a6a5b8; font-size: 10px; }
    .blog-chart-summary b { margin-left: auto; padding: 4px 7px; border-radius: 4px; background: #21483f; color: #7cdbb5; font-size: 10px; }
    .blog-chart { display: grid; height: 180px; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; }
    .blog-chart-y { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 17px; color: #a5a4b6; font-size: 9px; text-align: right; }
    .blog-chart-plot { position: relative; min-width: 0; }
    .blog-chart-grid { position: absolute; inset: 2px 0 19px; display: flex; flex-direction: column; justify-content: space-between; }
    .blog-chart-grid i { border-top: 1px dashed #45455b; }
    .blog-chart-plot svg { position: relative; z-index: 1; display: block; width: 100%; height: calc(100% - 19px); overflow: visible; }
    .blog-chart-area { fill: url(#blog-chart-fill); }
    .blog-chart-line { fill: none; stroke: #ff6686; stroke-width: 3; vector-effect: non-scaling-stroke; }
    .blog-chart-plot circle { fill: #ff6686; stroke: #292a3d; stroke-width: 3; vector-effect: non-scaling-stroke; }
    .blog-chart-x { display: flex; justify-content: space-between; padding-top: 4px; color: #a5a4b6; font-size: 9px; }
    .blog-chart-legend { display: flex; gap: 17px; margin: 8px 0 0 33px; color: #aaa9bb; font-size: 9px; }
    .blog-chart-legend span { display: flex; align-items: center; gap: 6px; }.blog-chart-legend i { width: 7px; height: 7px; border-radius: 50%; background: #ff6686; }.blog-chart-legend span + span i { background: #8375de; }
    .blog-more, .jobs-more { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #c4c3d0; font-size: 19px; }
    .blog-more:hover, .jobs-more:hover { background: #38394e; }
    .blog-top-list { margin-top: 17px; }
    .blog-top-item { display: grid; min-height: 59px; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #3a3b50; }
    .blog-rank { color: #ff8da4; font-family: var(--font-heading); font-size: 12px; font-weight: 700; }
    .blog-top-copy, .blog-article-title { display: grid; min-width: 0; gap: 5px; }
    .blog-top-copy strong, .blog-article-title strong { overflow: hidden; color: #e9e8f0; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .blog-top-copy small, .blog-article-title span { overflow: hidden; color: #a9a8ba; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .blog-top-item > b { color: #e6e5ee; font-size: 10px; white-space: nowrap; }
    .blog-text-button, .jobs-text-button { display: block; margin: 10px 0 0 auto; padding: 4px 2px; border: 0; background: transparent; color: #ff8aa1; font-size: 10px; }
    .blog-text-button span, .jobs-text-button span { margin-left: 5px; }
    .blog-articles-heading, .jobs-candidates-heading { align-items: center; margin-bottom: 11px; }
    .blog-filter-tabs, .jobs-filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid #3e3f55; border-radius: 5px; background: #222336; }
    .blog-filter-tabs button, .jobs-filter-tabs button { min-height: 27px; padding: 0 9px; border: 0; border-radius: 3px; background: transparent; color: #b7b6c7; font-size: 9px; white-space: nowrap; }
    .blog-filter-tabs button.is-active, .jobs-filter-tabs button.is-active { background: #ff5d80; color: white; font-weight: 600; }
    .blog-article-row { display: grid; min-height: 69px; grid-template-columns: 42px minmax(140px, 1fr) 75px 83px 28px; align-items: center; gap: 12px; padding: 5px 3px; border-top: 1px solid #3a3b50; }
    .blog-article-row[hidden], .jobs-candidate-row[hidden] { display: none; }
    .blog-article-cover { display: grid; width: 39px; height: 43px; place-items: center; overflow: hidden; border-radius: 4px; background: linear-gradient(145deg, #564579, #ba6b89); }
    .blog-article-cover span { color: #ffffffb8; font-family: var(--font-heading); font-size: 12px; font-weight: 700; }
    .blog-cover-2 { background: linear-gradient(145deg, #225b63, #59a78e); }.blog-cover-3 { background: linear-gradient(145deg, #804e42, #e4a86b); }.blog-cover-4 { background: linear-gradient(145deg, #3c4f77, #7896c9); }.blog-cover-5 { background: linear-gradient(145deg, #624276, #b27bb0); }
    .blog-article-title span i { padding: 0 3px; color: #ff8da4; font-style: normal; }
    .blog-article-views { display: grid; gap: 4px; text-align: right; }
    .blog-article-views strong { color: #e9e8f0; font-size: 10px; }.blog-article-views span { color: #a9a8ba; font-size: 9px; }
    .blog-status, .jobs-stage { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border-radius: 4px; background: #21483f; color: #85ddb9; font-size: 9px; white-space: nowrap; }
    .blog-status i, .jobs-stage i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
    .blog-status-draft { background: #3d3556; color: #c3a8ff; }.blog-status-review { background: #51422e; color: #f0bd76; }
    .blog-list-footer, .jobs-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid #3a3b50; color: #a9a8ba; font-size: 9px; }
    .blog-list-footer .blog-text-button, .jobs-list-footer .jobs-text-button { margin-top: 4px; }
    .jobs-hiring-status { display: inline-flex; align-items: center; gap: 6px; color: #a9d9c3; font-size: 10px; white-space: nowrap; }.jobs-hiring-status i { width: 7px; height: 7px; border-radius: 50%; background: #62d2a3; box-shadow: 0 0 0 3px #62d2a322; }
    .jobs-range { gap: 12px; }
    .jobs-funnel { display: grid; gap: 18px; margin: 23px 2px 18px; }
    .jobs-funnel-row { display: grid; grid-template-columns: 75px minmax(0, 1fr) 34px; align-items: center; gap: 10px; color: #c7c6d2; font-size: 10px; }
    .jobs-funnel-row > strong { color: #f0eff6; font-size: 11px; text-align: right; }
    .jobs-funnel-track { height: 10px; overflow: hidden; border-radius: 8px; background: #393a50; }
    .jobs-funnel-track i { display: block; height: 100%; border-radius: inherit; }.jobs-funnel-pink { background: linear-gradient(90deg, #f14f7a, #ff8797); }.jobs-funnel-violet { background: linear-gradient(90deg, #7866d5, #a890f4); }.jobs-funnel-blue { background: linear-gradient(90deg, #488be4, #6eb5ff); }.jobs-funnel-green { background: linear-gradient(90deg, #35a881, #73d8ad); }
    .jobs-funnel-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #3a3b50; color: #aaa9bb; font-size: 10px; }.jobs-funnel-footer > span { display: flex; align-items: center; gap: 6px; }.jobs-funnel-footer i { width: 7px; height: 7px; border-radius: 50%; background: #ff6686; }.jobs-funnel-footer strong { color: #efeff5; font-size: 12px; }.jobs-funnel-footer small { color: #a7a6b8; font-size: 9px; font-weight: 400; }
    .jobs-role-list { margin-top: 12px; }
    .jobs-role-row { display: grid; min-height: 53px; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #3a3b50; }
    .jobs-role-avatar, .jobs-candidate-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: #503241; color: #ff9db0; font-size: 9px; font-weight: 700; }.jobs-role-blue { background: #263d55; color: #82beff; }.jobs-role-violet { background: #3b3456; color: #c2aaff; }.jobs-role-orange { background: #50402f; color: #f4bd7c; }
    .jobs-role-copy, .jobs-candidate-name { display: grid; min-width: 0; gap: 4px; }.jobs-role-copy strong, .jobs-candidate-name strong { overflow: hidden; color: #eae9f1; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.jobs-role-copy small, .jobs-candidate-name small { overflow: hidden; color: #aaa9bb; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.jobs-role-copy i { padding: 0 3px; color: #ff8da4; font-style: normal; }
    .jobs-role-open { padding: 4px 6px; border-radius: 4px; background: #21483f; color: #83dcb7; font-size: 8px; }
    .jobs-text-button { color: #ff8aa1; }
    .jobs-candidate-row { display: grid; min-height: 62px; grid-template-columns: 31px minmax(135px, 1fr) minmax(100px, .8fr) 90px 76px 28px; align-items: center; gap: 11px; padding: 4px 3px; border-top: 1px solid #3a3b50; }
    .jobs-candidate-avatar { width: 30px; height: 30px; border-radius: 50%; background: #3f3755; color: #cfb5ff; font-size: 10px; }.jobs-avatar-2 { background: #254858; color: #8ed9e5; }.jobs-avatar-3 { background: #51402f; color: #ffcb86; }.jobs-avatar-4 { background: #533243; color: #ff9bb0; }.jobs-avatar-5 { background: #23463f; color: #82dbb8; }
    .jobs-candidate-date { display: grid; gap: 4px; color: #dedde7; font-size: 9px; }.jobs-candidate-date small { color: #a9a8ba; font-size: 8px; }
    .jobs-stage-screening { background: #263d55; color: #83bfff; }.jobs-stage-interview { background: #3c3557; color: #c2adff; }.jobs-stage-offer { background: #51402f; color: #f1c17c; }
    .jobs-candidate-state { color: #b9b8c7; font-size: 9px; }
    @media (max-width: 1100px) {
        .blog-main-grid, .jobs-main-grid { grid-template-columns: minmax(0, 1.3fr) minmax(270px, .9fr); gap: 12px; }
        .blog-dashboard .panel, .jobs-dashboard .panel { padding: 14px; }
        .blog-metrics, .jobs-metrics { gap: 10px; }
        .jobs-candidate-row { grid-template-columns: 31px minmax(120px, 1fr) minmax(85px, .7fr) 85px 28px; }.jobs-candidate-state { display: none; }
    }
    @media (max-width: 850px) {
        .blog-main-grid, .jobs-main-grid { grid-template-columns: minmax(0, 1fr); }
        .blog-highlights-panel, .jobs-roles-panel { min-height: 0; }
        .blog-articles-heading, .jobs-candidates-heading { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 620px) {
        .blog-dashboard, .jobs-dashboard { gap: 11px; }
        .blog-dashboard .panel, .jobs-dashboard .panel { padding: 12px; }
        .blog-welcome, .jobs-welcome { align-items: flex-start; flex-direction: column; gap: 12px; padding: 15px !important; }
        .blog-welcome h1, .jobs-welcome h1 { font-size: 19px; }
        .blog-welcome-actions, .jobs-welcome-actions { width: 100%; justify-content: space-between; }
        .blog-metrics, .jobs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .blog-dashboard .blog-metric, .jobs-dashboard .jobs-metric { min-height: 104px; padding: 11px; }
        .blog-metric-top, .jobs-metric-top { font-size: 10px; }.blog-metric-icon, .jobs-metric-icon { width: 27px; height: 27px; }.blog-metric > strong, .jobs-metric > strong { font-size: 20px; }
        .blog-main-grid, .jobs-main-grid { gap: 10px; }.blog-engagement-panel, .blog-highlights-panel, .jobs-pipeline-panel { min-height: 0; }
        .blog-panel-heading, .jobs-panel-heading { gap: 7px; }.blog-panel-heading h2, .jobs-panel-heading h2 { font-size: 14px; }
        .blog-date, .jobs-range { min-height: 29px; gap: 6px; padding: 0 7px; font-size: 9px; }
        .blog-chart { height: 160px; }.blog-chart-summary { margin-top: 14px; }.blog-chart-legend { margin-left: 31px; }
        .blog-filter-tabs, .jobs-filter-tabs { width: 100%; justify-content: space-between; }.blog-filter-tabs button, .jobs-filter-tabs button { flex: 1; min-width: 0; padding: 0 5px; font-size: 8px; }
        .blog-article-row { grid-template-columns: 35px minmax(0, 1fr) 58px 26px; gap: 7px; }
        .blog-article-cover { width: 33px; height: 38px; }.blog-article-views { font-size: 9px; }.blog-status { grid-column: 2; grid-row: 2; justify-self: start; min-height: 20px; margin: -6px 0 3px; }.blog-article-row { padding: 7px 2px; }.blog-article-title { grid-column: 2; }.blog-article-views { grid-column: 3; grid-row: 1; }.blog-article-row > .blog-more { grid-column: 4; grid-row: 1; }
        .jobs-funnel-row { grid-template-columns: 62px minmax(0, 1fr) 30px; gap: 7px; }.jobs-funnel { gap: 15px; margin-top: 18px; }
        .jobs-candidate-row { grid-template-columns: 30px minmax(0, 1fr) 77px 27px; gap: 7px; }.jobs-candidate-date { display: none; }.jobs-stage { font-size: 8px; padding: 0 5px; }.jobs-candidate-state { display: none; }
        .blog-list-footer, .jobs-list-footer { font-size: 8px; }
    }

    .app-shell[data-sidebar-theme="blue"] { --sidebar-start: #438df2; --sidebar-mid: #3078df; --sidebar-end: #245bc4; }
    .app-shell[data-sidebar-theme="teal"] { --sidebar-start: #19bda9; --sidebar-mid: #08a995; --sidebar-end: #078a85; }
    .app-shell[data-sidebar-theme="orange"] { --sidebar-start: #ffad65; --sidebar-mid: #fb8054; --sidebar-end: #e96047; }
    .app-shell[data-sidebar-theme="coral"] { --sidebar-start: #ff647e; --sidebar-mid: #fb456c; --sidebar-end: #e93051; }
    .app-shell[data-sidebar-theme="pink"] { --sidebar-start: #eb63c9; --sidebar-mid: #df49b7; --sidebar-end: #c8349b; }
    .dashboard-settings { position: fixed; z-index: 30; top: 132px; right: 14px; }
    .settings-trigger { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #424257; border-radius: 5px; background: #292a3e; box-shadow: 0 5px 18px #10101955; color: #fff; font-size: 19px; transition: background .2s ease, transform .2s ease; }
    .settings-trigger:hover, .settings-trigger[aria-expanded="true"] { background: #3b3c53; transform: rotate(20deg); }
    .settings-panel { position: absolute; top: 0; right: 50px; width: 250px; padding: 19px 17px 14px; border: 1px solid #393a51; border-radius: 7px; background: #25263a; box-shadow: 0 14px 40px #10101999; color: #f3f2f9; }
    .settings-panel[hidden] { display: none; }
    .settings-panel h2 { margin: 0 0 18px; color: #f4f3fa; font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-align: center; }
    .settings-close { position: absolute; top: 7px; right: 8px; display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #aeadbf; font-size: 19px; }
    .settings-close:hover { background: #38394e; color: white; }
    .settings-colors { margin: 0; padding: 0; border: 0; }
    .settings-colors legend { width: 100%; margin-bottom: 11px; color: #c9c8d5; font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; }
    .settings-swatches { display: flex; justify-content: center; gap: 9px; }
    .settings-swatch { width: 17px; height: 17px; padding: 0; border: 2px solid #ffffff70; border-radius: 50%; box-shadow: 0 0 0 1px #131421; transition: transform .18s ease, box-shadow .18s ease; }
    .settings-swatch:hover { transform: scale(1.15); }
    .settings-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #25263a; }
    .theme-pink { background: #e74fc3; }.theme-blue { background: #3089ff; }.theme-teal { background: #06b99f; }.theme-orange { background: #ff9277; }.theme-coral { background: #ff4d80; }
    .settings-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 15px; border-top: 1px solid #3c3d52; }
    .settings-mini-row > div { display: grid; gap: 4px; }.settings-mini-row strong { color: #eeeef5; font-size: 11px; font-weight: 600; }.settings-mini-row small { color: #a6a5b8; font-size: 9px; }
    .settings-switch { position: relative; display: inline-flex; width: 42px; height: 23px; flex: 0 0 auto; align-items: center; cursor: pointer; }
    .settings-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .settings-switch > span:first-of-type { position: relative; width: 42px; height: 22px; border-radius: 12px; background: #45465b; transition: background .2s ease; }
    .settings-switch > span:first-of-type::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #e7e6ee; content: ""; transition: transform .2s ease; }
    .settings-switch input:checked + span:first-of-type { background: #ff5880; }
    .settings-switch input:checked + span:first-of-type::after { transform: translateX(20px); }
    .settings-switch input:focus-visible + span:first-of-type { outline: 2px solid #fff; outline-offset: 2px; }
    .settings-note { margin: 13px 0 0; color: #89899f; font-size: 9px; text-align: center; }
    .toast { top: 72px; right: 22px; bottom: auto; z-index: 40; display: flex; min-height: 48px; align-items: center; gap: 11px; padding: 11px 17px; border-color: #ff72d2; background: linear-gradient(105deg, #e94bbb, #cf4ed8); color: #fff; font-size: 11px; font-weight: 600; }
    .toast::before { color: #fff; content: "♧"; font-size: 15px; }
    .app-shell.sidebar-mini .sidebar { width: 58px; padding-right: 7px; padding-left: 7px; }
    .app-shell.sidebar-mini .brand { justify-content: center; padding: 0; }
    .app-shell.sidebar-mini .brand > span:not(.brand-mark), .app-shell.sidebar-mini .nav-label, .app-shell.sidebar-mini .nav-link > span:nth-child(2), .app-shell.sidebar-mini .nav-chevron, .app-shell.sidebar-mini .sub-nav, .app-shell.sidebar-mini .profile-copy, .app-shell.sidebar-mini .profile-more { display: none; }
    .app-shell.sidebar-mini .nav-link { justify-content: center; gap: 0; padding: 0; }
    .app-shell.sidebar-mini .nav-icon { width: 100%; flex-basis: 100%; }
    .app-shell.sidebar-mini .sidebar-bottom { padding-top: 8px; }
    .app-shell.sidebar-mini .profile-mini { justify-content: center; padding: 10px 0 2px; }
    .app-shell.sidebar-mini .main-column { margin-left: 72px; transition: margin-left .25s ease; }
    @media (max-width: 850px) {
        .app-shell.sidebar-mini .main-column { margin-left: 0; }
    }
    @media (max-width: 620px) {
        .dashboard-settings { top: 72px; right: 10px; }
        .settings-trigger { width: 36px; height: 36px; }
        .settings-panel { right: 44px; width: min(250px, calc(100vw - 68px)); padding: 17px 13px 12px; }
        .toast { top: 61px; right: 10px; max-width: calc(100vw - 20px); }
    }

    body { font-size: 15px; }
    .sidebar { width: 190px; }
    .main-column { margin-left: 204px; }
    .nav-label, .nav-link, .sub-nav-link, .examples-parent > span:nth-child(2) { font-size: 12px; }
    .example-links .sub-nav-link { font-size: 12px; }
    .nav-link { min-height: 34px; }
    .sub-nav-link, .example-links .sub-nav-link { min-height: 28px; }
    .profile-copy strong { font-size: 12px; }
    .profile-copy small { font-size: 11px; }
    .topbar-title { font-size: 14px; }
    .header-cta { font-size: 13px; }
    .dashboard-content { padding-right: 24px; padding-left: 24px; }
    .eyebrow, .chart-overline, .insight-overline { font-size: 12px; }
    h1 { font-size: 23px; }
    .panel-heading h2, .table-heading h2, .locations-heading h2 { font-size: 17px; }
    .page-description, .chart-heading p, .panel-heading p { font-size: 12px; }
    .button, .search-box input, .select-button { font-size: 12px; }
    .metric-label { font-size: 13px; }
    .metric-value { font-size: 20px; }
    .metric-change, .metric-footnote { font-size: 12px; }
    .insight-total { font-size: 24px; }
    .mini-chart-labels, .chart-legend, .line-chart-months { font-size: 11px; }
    .task-copy strong, .management-table td, table td { font-size: 12px; }
    .task-copy small, .table-heading p, th, .table-footer, .page-footer { font-size: 11px; }
    .saas-profile > div > span, .saas-profile small, .saas-workspace-stats span,
    .saas-welcome-card p, .saas-welcome-card ul, .saas-kpi-heading,
    .saas-kpi-card p, .saas-panel-heading p, .saas-earning-summary > span,
    .saas-earning-summary > small, .saas-line-y, .saas-line-x,
    .saas-sales-legend > div, .saas-product-row small, .saas-task-row small,
    .saas-chat-message small { font-size: 12px; }
    .saas-panel-heading h2 { font-size: 17px; }
    .saas-kpi-value, .saas-earning-summary > strong { font-size: 25px; }
    .crypto-dashboard p, .crypto-dashboard small, .crypto-dashboard button,
    .crypto-page-heading p, .crypto-live, .crypto-account-heading > div > span,
    .crypto-account-id, .crypto-balance-row small, .crypto-market-title small,
    .crypto-market-bottom span, .crypto-panel-heading p, .wallet-summary > span,
    .wallet-summary > small, .wallet-income-expense span, .wallet-assets small,
    .wallet-assets b, .crypto-overview-y, .crypto-overview-x,
    .transaction-details small, .transaction-amount small,
    .crypto-notification-item p, .crypto-notification-item > div > div,
    .trade-field, .trade-disclaimer { font-size: 12px; }
    .crypto-page-heading h1, .crypto-panel-heading h2 { font-size: 19px; }
    .crypto-account-heading > div > strong, .crypto-market-title strong,
    .wallet-summary > strong, .transaction-details strong { font-size: 14px; }
    .blog-eyebrow, .jobs-eyebrow { font-size: 11px; }
    .blog-welcome h1, .jobs-welcome h1 { font-size: 25px; }
    .blog-welcome p, .jobs-welcome p, .blog-date, .jobs-range,
    .blog-primary-button, .jobs-primary-button, .blog-metric-top,
    .jobs-metric-top, .blog-metric > small, .jobs-metric > small,
    .blog-panel-heading p, .jobs-panel-heading p, .blog-chart-y, .blog-chart-x,
    .blog-chart-legend, .blog-chart-summary span, .blog-chart-summary b,
    .blog-top-copy strong, .blog-top-copy small, .blog-top-item > b,
    .blog-text-button, .jobs-text-button, .blog-filter-tabs button,
    .jobs-filter-tabs button, .blog-article-title strong,
    .blog-article-title span, .blog-article-views strong,
    .blog-article-views span, .blog-status, .blog-list-footer,
    .jobs-hiring-status, .jobs-funnel-row, .jobs-role-copy strong,
    .jobs-role-copy small, .jobs-role-open, .jobs-candidate-name strong,
    .jobs-candidate-name small, .jobs-candidate-date, .jobs-stage,
    .jobs-candidate-state, .jobs-list-footer { font-size: 12px; }
    .blog-panel-heading h2, .jobs-panel-heading h2 { font-size: 17px; }
    .blog-metric > strong, .jobs-metric > strong { font-size: 25px; }
    .settings-colors legend, .settings-mini-row small, .settings-note { font-size: 11px; }
    .settings-mini-row strong, .settings-panel h2 { font-size: 14px; }
    .toast { font-size: 13px; }
    @media (max-width: 850px) {
        .main-column { margin-left: 0; }
        .sidebar { width: 235px; }
        .dashboard-content { padding-right: 18px; padding-left: 18px; }
    }
    @media (max-width: 620px) {
        .dashboard-content { padding-right: 12px; padding-left: 12px; }
        .metric-value { font-size: 18px; }
        .blog-welcome h1, .jobs-welcome h1 { font-size: 22px; }
    }

    .examples-content { display: flex; min-height: 100vh; flex-direction: column; gap: 17px; }
    .examples-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
    .examples-eyebrow { display: block; margin-bottom: 5px; color: #ff93a9; font-size: 12px; font-weight: 700; letter-spacing: .8px; }
    .examples-page-heading h1 { margin: 0 0 5px; color: #f4f3fa; font-size: 26px; font-weight: 700; }
    .examples-page-heading p { margin: 0; color: #b3b2c2; font-size: 14px; }
    .examples-primary-button, .examples-back-button, .examples-secondary-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 0; border-radius: 5px; color: white; font-size: 13px; font-weight: 700; white-space: nowrap; }
    .examples-primary-button { background: linear-gradient(110deg, #f34e7c, #d951d4); box-shadow: 0 6px 18px #e344771e; }
    .examples-primary-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .examples-back-button, .examples-secondary-button { border: 1px solid #48495f; background: #2b2c41; color: #e4e3ed; }
    .examples-back-button:hover, .examples-secondary-button:hover { background: #36374d; }
    .examples-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .examples-stat { display: grid; min-height: 112px; gap: 8px; padding: 16px 18px; border: 1px solid #35364b; border-radius: 5px; background: linear-gradient(145deg, #2a2b40, #26273a); }
    .examples-stat > span { color: #bbbaca; font-size: 13px; }.examples-stat > strong { color: #f5f4fa; font-family: var(--font-heading); font-size: 24px; }.examples-stat > small { color: #a4a3b7; font-size: 12px; }
    .examples-table-panel, .example-form-panel, .profile-preview, .examples-help-card { border: 1px solid #35364b; border-radius: 6px; background: #27283b; box-shadow: 0 8px 24px #11111b18; }
    .examples-table-heading, .examples-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 20px; }
    .examples-table-heading h2, .examples-panel-heading h2 { margin: 0 0 4px; color: #f1f0f7; font-family: var(--font-heading); font-size: 19px; font-weight: 700; }
    .examples-table-heading p, .examples-panel-heading p { margin: 0; color: #aaa9bd; font-size: 13px; }
    .examples-search { display: flex; width: min(300px, 40%); min-height: 39px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #44455c; border-radius: 5px; background: #222336; color: #bab9ca; }
    .examples-search > span { font-size: 19px; }.examples-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #f2f1f7; font-size: 13px; }.examples-search input::placeholder { color: #8f8ea3; }
    .examples-table-scroll { overflow-x: auto; }
    .examples-table { width: 100%; border-collapse: collapse; text-align: left; }
    .examples-table th { height: 46px; padding: 0 18px; border-top: 1px solid #393a50; border-bottom: 1px solid #393a50; color: #b0afc0; font-size: 11px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; white-space: nowrap; }
    .examples-table td { min-height: 58px; padding: 15px 18px; border-bottom: 1px solid #393a50; color: #dedde8; font-size: 13px; }
    .examples-table tbody tr:hover { background: #ffffff05; }
    .examples-table tbody tr:last-child td { border-bottom: 0; }
    .examples-table th:last-child, .examples-table td:last-child { width: 94px; text-align: right; }
    .example-status { display: inline-flex; min-height: 25px; align-items: center; gap: 6px; padding: 0 9px; border-radius: 13px; background: #21483f; color: #83dcb8; font-size: 11px; font-weight: 600; white-space: nowrap; }
    .example-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
    .example-status.invited, .example-status.review, .example-status.draft { background: #51422e; color: #f0bf7b; }.example-status.inactive, .example-status.archived, .example-status.suspended { background: #49323d; color: #f38ea2; }
    .example-color-value { display: inline-flex; align-items: center; gap: 8px; color: #cac9d5; font-size: 12px; }.example-color-value i { width: 15px; height: 15px; border: 2px solid #ffffffaa; border-radius: 50%; box-shadow: 0 0 0 1px #111; }
    .example-user-identity { display: inline-flex; align-items: center; gap: 10px; }.example-user-identity i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #4a3b68; color: #d2baff; font-size: 10px; font-style: normal; font-weight: 700; }.example-user-identity strong { color: #efedf5; font-size: 13px; font-weight: 600; }
    .example-row-actions { display: flex; justify-content: flex-end; gap: 5px; }.example-action-button { display: inline-grid; width: 31px; height: 31px; place-items: center; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #ff8da3; font-size: 16px; }.example-action-button:hover { border-color: #45465d; background: #35364b; }.example-action-button.danger { color: #ff7189; font-size: 20px; }
    .examples-table-footer { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-top: 1px solid #393a50; color: #aaa9bb; font-size: 12px; }.examples-table-footer strong { color: #efedf5; }.local-data-note { color: #88889d; font-size: 11px; }
    .examples-empty { display: grid; min-height: 185px; align-content: center; justify-items: center; gap: 8px; color: #aaa9bb; text-align: center; }.examples-empty[hidden] { display: none; }.examples-empty > span { font-size: 24px; }.examples-empty strong { color: #ecebf3; font-size: 15px; }.examples-empty small { font-size: 12px; }
    .example-form-panel { padding-bottom: 0; }.examples-panel-heading { align-items: flex-start; padding-bottom: 15px; }.examples-secure-label { padding: 6px 9px; border-radius: 4px; background: #21483f; color: #8bdcbb; font-size: 11px; white-space: nowrap; }
    .example-form { padding: 5px 20px 19px; }.examples-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
    .example-field { display: grid; min-width: 0; gap: 8px; color: #c7c6d3; font-size: 13px; font-weight: 600; }.example-field > span i { color: #ff8098; font-style: normal; }
    .example-field input, .example-field select, .example-field textarea { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #414258; border-radius: 5px; outline: 0; background: #222336; color: #f0eff7; font-size: 13px; transition: border-color .2s ease, box-shadow .2s ease; }
    .example-field input:focus, .example-field select:focus, .example-field textarea:focus { border-color: #d65ad3; box-shadow: 0 0 0 3px #d65ad322; }.example-field input::placeholder, .example-field textarea::placeholder { color: #85859b; }
    .example-field select { appearance: auto; }.example-field input[type="color"] { width: 100%; padding: 5px; }.example-field textarea { min-height: 112px; padding: 11px 12px; resize: vertical; line-height: 1.55; }.example-field-wide { grid-column: 1 / -1; }
    .example-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 3px 0; }.example-check-grid label { display: flex; align-items: center; gap: 8px; color: #c8c7d4; font-size: 12px; font-weight: 400; }.example-check-grid input { width: 16px; min-height: 16px; height: 16px; accent-color: #eb5789; }
    .example-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 21px; padding-top: 16px; border-top: 1px solid #393a50; color: #9998ac; font-size: 12px; }.example-form-footer .examples-primary-button { cursor: pointer; }
    .profile-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); align-items: start; gap: 16px; }.profile-edit-panel .example-form { padding-top: 3px; }
    .profile-photo-row { display: flex; align-items: center; gap: 13px; margin: 0 0 19px; padding: 15px; border: 1px solid #3c3d53; border-radius: 5px; background: #242538; }.profile-photo-avatar, .profile-preview-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border: 3px solid #51516b; border-radius: 50%; background: linear-gradient(145deg, #eaa18b, #8660a2); color: white; font-size: 16px; font-weight: 700; }.profile-photo-row > div { display: grid; flex: 1; gap: 5px; }.profile-photo-row > div strong { color: #eeeef5; font-size: 13px; }.profile-photo-row > div span { color: #aaa9bb; font-size: 11px; }.profile-photo-row .examples-secondary-button { min-height: 34px; padding: 0 10px; font-size: 11px; }
    .profile-preview { position: relative; overflow: hidden; padding: 0 19px 19px; text-align: center; }.profile-cover { position: absolute; inset: 0 0 auto; height: 108px; overflow: hidden; background: linear-gradient(145deg, #43295a, #ad4a9c 50%, #353b65); }.profile-cover::before, .profile-cover::after { position: absolute; width: 180px; height: 180px; border: 1px solid #ffffff18; background: #ffffff0c; content: ""; transform: rotate(35deg); }.profile-cover::before { top: -100px; left: -20px; }.profile-cover::after { top: -120px; right: -20px; }.profile-cover > span { position: absolute; top: 15px; left: 0; width: 100%; color: #ffffffa8; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
    .profile-preview-avatar { position: relative; z-index: 1; width: 76px; height: 76px; margin: 64px auto 10px; border-width: 4px; font-size: 18px; }.profile-preview h2 { margin: 0 0 4px; color: #f0eff6; font-family: var(--font-heading); font-size: 17px; }.profile-preview-role { color: #d6c2e5; font-size: 12px; }.profile-preview-location { display: block; margin-top: 5px; color: #a5a4b7; font-size: 11px; }.profile-preview p { min-height: 57px; margin: 16px 0; color: #b5b4c4; font-size: 12px; line-height: 1.55; text-align: left; }.profile-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 -3px 15px; padding: 13px 0; border-top: 1px solid #3d3e53; border-bottom: 1px solid #3d3e53; }.profile-preview-stats > div { display: grid; gap: 4px; }.profile-preview-stats strong { color: #f3f2f8; font-size: 15px; }.profile-preview-stats span { color: #a7a6b8; font-size: 10px; }.profile-preview > .examples-secondary-button { width: 100%; min-height: 35px; font-size: 11px; }
    .examples-help-card { display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 15px 18px; }.examples-help-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #483457; color: #df9fff; font-size: 16px; }.examples-help-card > div { flex: 1; }.examples-help-card strong { color: #eeeef5; font-size: 13px; }.examples-help-card p { margin: 4px 0 0; color: #aaa9bb; font-size: 12px; line-height: 1.45; }.examples-help-card > button { border: 0; background: transparent; color: #ff91a9; font-size: 12px; white-space: nowrap; }
    .examples-footer { display: flex; justify-content: space-between; gap: 14px; margin-top: auto; padding: 25px 1px 0; color: #9998ac; font-size: 11px; }.examples-footer i { color: #ff7592; font-style: normal; }
    @media (max-width: 1100px) {
        .profile-layout { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: 12px; }
        .examples-table th, .examples-table td { padding-right: 12px; padding-left: 12px; }
    }
    @media (max-width: 850px) {
        .profile-layout { grid-template-columns: minmax(0, 1fr); }
        .profile-preview { display: none; }
    }
    @media (max-width: 620px) {
        .examples-content { gap: 13px; }
        .examples-page-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
        .examples-page-heading h1 { font-size: 22px; }.examples-page-heading p { font-size: 13px; }
        .examples-primary-button, .examples-back-button { min-height: 37px; }
        .examples-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.examples-stat { min-height: 94px; gap: 6px; padding: 11px 9px; }.examples-stat > span, .examples-stat > small { font-size: 10px; }.examples-stat > strong { font-size: 18px; }
        .examples-table-heading, .examples-panel-heading { align-items: flex-start; flex-direction: column; padding: 15px 13px; }.examples-search { width: 100%; }
        .examples-table { min-width: 670px; }.examples-table th { height: 42px; font-size: 10px; }.examples-table td { padding: 12px; font-size: 12px; }
        .examples-table-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; padding: 9px 13px; }.local-data-note { font-size: 10px; }
        .example-form { padding: 3px 13px 15px; }.examples-form-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }.example-field-wide { grid-column: auto; }.example-field, .example-field input, .example-field select, .example-field textarea { font-size: 13px; }
        .example-form-footer { align-items: flex-start; flex-direction: column; }.example-form-footer .examples-primary-button { width: 100%; }
        .profile-photo-row { flex-wrap: wrap; padding: 11px; }.profile-photo-row > div { min-width: calc(100% - 75px); }.profile-photo-row .examples-secondary-button { margin-left: 71px; }
        .examples-help-card { align-items: flex-start; flex-wrap: wrap; padding: 13px; }.examples-help-card > div { min-width: calc(100% - 55px); }.examples-help-card > button { margin-left: 49px; }
        .examples-footer { flex-direction: column; gap: 6px; padding-top: 14px; font-size: 10px; }
    }

    .showcase-content { display: grid; align-content: start; gap: 20px; min-height: calc(100vh - 78px); }
    .showcase-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
    .showcase-heading h1 { margin: 0 0 6px; color: #f4f3fa; font-size: 27px; font-weight: 700; letter-spacing: -.5px; }
    .showcase-heading > div > p, .showcase-heading > p { max-width: 680px; margin: 0; color: #b4b3c3; font-size: 14px; line-height: 1.55; }
    .showcase-eyebrow { display: block; margin-bottom: 7px; color: #ff92aa; font-size: 11px; font-weight: 700; letter-spacing: .9px; }
    .showcase-primary-button, .showcase-secondary-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 0; border-radius: 5px; background: linear-gradient(110deg, #f44d7c, #d84fd0); box-shadow: 0 7px 20px #df4c7c20; color: white; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .2s ease, transform .2s ease; }
    .showcase-primary-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .showcase-secondary-button { border: 1px solid #45465d; background: #292a3e; box-shadow: none; color: #e5e4ed; }
    .centered-showcase-heading { display: grid; justify-items: center; margin: 0 auto 3px; text-align: center; }.centered-showcase-heading > p { max-width: 650px; }
    .billing-switch { display: flex; gap: 4px; margin-top: 12px; padding: 4px; border: 1px solid #3e3f55; border-radius: 7px; background: #222336; }
    .billing-switch button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: #b5b4c5; font-size: 12px; font-weight: 600; }.billing-switch button.is-active { background: #3a3b52; color: #fff; }.billing-switch button span { margin-left: 5px; color: #81dfbb; font-size: 10px; }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; max-width: 1120px; width: 100%; margin: 0 auto; padding: 10px 0; }
    .pricing-card { position: relative; display: flex; min-height: 430px; flex-direction: column; padding: 22px !important; border: 1px solid #3a3b51 !important; border-radius: 7px !important; background: linear-gradient(150deg, #292a3e, #252638) !important; box-shadow: 0 14px 35px #11111b2b !important; }
    .pricing-card-featured { z-index: 1; border-color: #c853c4 !important; background: linear-gradient(160deg, #36304a, #28283d 60%) !important; box-shadow: 0 12px 42px #cb4eb12a !important; transform: translateY(-9px); }
    .pricing-popular { position: absolute; top: 0; right: 18px; padding: 6px 10px; border-radius: 0 0 5px 5px; background: linear-gradient(110deg, #e7489c, #be4edb); color: white; font-size: 9px; font-weight: 700; letter-spacing: .65px; }
    .pricing-plan-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: #39344e; color: #d0a0ff; font-size: 20px; }.pricing-icon-growth { background: #4a3151; color: #ff91c6; }.pricing-icon-scale { background: #263d55; color: #82c4ff; }
    .pricing-card h2 { margin: 17px 0 5px; color: #f4f3fa; font-family: var(--font-heading); font-size: 21px; }.pricing-card > p { min-height: 39px; margin: 0; color: #aaa9bb; font-size: 12px; line-height: 1.5; }
    .pricing-price { display: flex; align-items: baseline; margin-top: 19px; color: #f6f5fb; }.pricing-price > span { align-self: flex-start; margin: 7px 3px 0 0; color: #d7d6e0; font-size: 15px; }.pricing-price > strong { font-family: var(--font-heading); font-size: 43px; font-weight: 700; letter-spacing: -1.5px; }.pricing-price > small { margin-left: 6px; color: #aaa9bb; font-size: 12px; }.pricing-card > .pricing-billed { min-height: 19px; margin: 0 0 16px; color: #89899f; font-size: 10px; }
    .pricing-card > .showcase-primary-button { width: 100%; }.pricing-divider { height: 1px; margin: 21px 0 16px; background: #3e3f55; }.pricing-includes { margin-bottom: 11px; color: #d9d8e3; font-size: 12px; }.pricing-card ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }.pricing-card li { display: flex; align-items: center; gap: 9px; color: #b9b8c8; font-size: 12px; }.pricing-card li span { color: #7bdbb7; font-weight: 700; }
    .pricing-compare { display: grid; gap: 0; max-width: 1120px; width: 100%; margin: 0 auto; padding: 18px 21px !important; }.pricing-compare h2 { margin: 0 0 4px; color: #f0eff6; font-family: var(--font-heading); font-size: 17px; }.pricing-compare > div:first-child p { margin: 0 0 13px; color: #a9a8bb; font-size: 12px; }.pricing-compare-row { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #3b3c50; color: #c7c6d2; font-size: 12px; text-align: center; }.pricing-compare-row strong { color: #e8e7ef; text-align: left; }
    .rtl-control-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px !important; border: 1px solid #3c3d53; border-radius: 6px; }.rtl-control-panel > div:first-child { display: grid; gap: 4px; }.rtl-control-panel > div:first-child strong { color: #f0eff6; font-size: 14px; }.rtl-control-panel > div:first-child span { color: #aaa9bb; font-size: 12px; }
    .rtl-direction-toggle { display: flex; gap: 4px; padding: 4px; border-radius: 6px; background: #202133; }.rtl-direction-toggle button { display: flex; min-height: 39px; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: #b5b4c5; font-size: 12px; font-weight: 700; }.rtl-direction-toggle button span { color: #9695a9; font-size: 10px; font-weight: 400; }.rtl-direction-toggle button.is-active { background: #44405d; color: white; }.rtl-direction-toggle button.is-active span { color: #d3b9ff; }
    .rtl-demo-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .85fr); gap: 15px; transition: direction .2s ease; }.rtl-demo-grid[dir="rtl"] { text-align: right; }.rtl-welcome-card, .rtl-stats-card, .rtl-message-card, .rtl-settings-card { min-width: 0; padding: 19px !important; border: 1px solid #38394f; border-radius: 6px; background: #292a3e; }.rtl-welcome-card { position: relative; display: flex; min-height: 235px; align-items: center; overflow: hidden; background: linear-gradient(115deg, #373252, #292b40 65%) !important; }.rtl-welcome-card > div:first-child { position: relative; z-index: 1; max-width: 68%; }.rtl-welcome-card h2 { margin: 0 0 8px; color: #f6f4fb; font-family: var(--font-heading); font-size: 24px; }.rtl-welcome-card p, .rtl-settings-card p { margin: 0 0 16px; color: #b6b5c5; font-size: 13px; line-height: 1.6; }.rtl-art { position: absolute; top: 35px; right: 28px; display: grid; width: 150px; height: 150px; place-items: center; border: 1px solid #9a7fe655; border-radius: 50%; background: radial-gradient(circle, #6b5ebc44, transparent 69%); color: #e9b6ff; }.rtl-art::before, .rtl-art::after { position: absolute; width: 92px; height: 92px; border: 1px solid #9e8bff66; content: ""; transform: rotate(45deg); }.rtl-art::after { width: 63px; height: 63px; border-color: #ff83ae80; transform: rotate(15deg); }.rtl-art > span { position: absolute; top: 12px; right: 26px; z-index: 1; color: #75dfc2; font-size: 25px; }.rtl-art > i { position: absolute; bottom: 17px; left: 25px; width: 11px; height: 11px; border-radius: 50%; background: #ff7899; }.rtl-art > b { z-index: 1; font-family: var(--font-heading); font-size: 24px; }
    .showcase-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.showcase-section-heading h2, .rtl-settings-card h2 { margin: 0; color: #f0eff6; font-family: var(--font-heading); font-size: 16px; }.rtl-period { color: #b0afc0; font-size: 10px; white-space: nowrap; }.rtl-stats-card { display: grid; align-content: start; gap: 12px; }.rtl-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; color: #b9b8c8; font-size: 12px; }.rtl-stat-row strong { color: #f0eff6; font-size: 13px; white-space: nowrap; }.rtl-stat-row small { margin-left: 5px; color: #7bd9b4; font-size: 10px; font-weight: 500; }.rtl-progress-track { height: 7px; overflow: hidden; border-radius: 7px; background: #3b3c51; }.rtl-progress-track > i { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d24ca8, #ff7796); }.rtl-progress-track.green > i { width: 86%; background: linear-gradient(90deg, #20a984, #71d6ac); }.rtl-message-card { display: flex; grid-column: 1 / 2; align-items: flex-start; gap: 12px; }.rtl-message-avatar { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #c26a9c, #6650a5); color: white; font-size: 11px; font-weight: 700; }.rtl-message-card > div { flex: 1; }.rtl-message-card strong { color: #ecebf3; font-size: 13px; }.rtl-message-card p { margin: 7px 0; color: #b2b1c2; font-size: 12px; line-height: 1.5; }.rtl-message-card small { color: #9190a5; font-size: 10px; }.rtl-message-action { width: 29px; height: 29px; border: 1px solid #44455c; border-radius: 5px; background: #303147; color: #e5a7ff; }.rtl-settings-card { grid-column: 2; grid-row: 2; }.rtl-settings-card h2 { margin-bottom: 9px; }.rtl-settings-card p { font-size: 12px; }.rtl-settings-card > div { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid #3c3d52; color: #aaa9bb; font-size: 11px; }.rtl-settings-card > div strong { color: #e6e5ee; font-size: 11px; }
    .timeline-heading { align-items: center; }.timeline-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.timeline-summary-grid > article { display: grid; min-height: 105px; gap: 6px; padding: 15px 17px !important; border: 1px solid #38394f; border-radius: 6px; background: #292a3e; }.timeline-summary-grid > article > span { color: #b5b4c4; font-size: 12px; }.timeline-summary-grid > article > strong { color: #f4f3fa; font-family: var(--font-heading); font-size: 23px; }.timeline-summary-grid > article > small { color: #7fddb6; font-size: 11px; }
    .timeline-panel { padding: 20px !important; border: 1px solid #38394f; border-radius: 6px; background: #27283b; }.timeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 14px; border-bottom: 1px solid #3b3c50; }.timeline-toolbar h2 { margin: 0; color: #f0eff6; font-family: var(--font-heading); font-size: 18px; }.timeline-filters { display: flex; gap: 3px; padding: 3px; border-radius: 5px; background: #212234; }.timeline-filters button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: #b5b4c4; font-size: 11px; }.timeline-filters button.is-active { background: #44405b; color: #fff; }.timeline-day-label { display: flex; align-items: center; gap: 11px; margin: 19px 0 6px; }.timeline-day-label span { color: #f1eff6; font-family: var(--font-heading); font-size: 15px; font-weight: 700; }.timeline-day-label small { color: #9b9aad; font-size: 11px; }.timeline-list { position: relative; display: grid; gap: 0; }.timeline-list::before { position: absolute; top: 16px; bottom: 22px; left: 19px; width: 1px; background: #48445c; content: ""; }.timeline-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 12px 0; }.timeline-item[hidden] { display: none; }.timeline-marker { position: relative; z-index: 1; display: grid; width: 39px; height: 39px; place-items: center; border: 4px solid #27283b; border-radius: 50%; color: white; font-size: 13px; box-shadow: 0 0 0 1px #ffffff12; }.marker-pink { background: #ec4d88; }.marker-blue { background: #347ee8; }.marker-green { background: #17ac8e; }.marker-orange { background: #fa8266; }.timeline-event { min-width: 0; padding: 14px 16px; border: 1px solid #393a50; border-radius: 6px; background: #2b2c40; }.timeline-event-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.timeline-tag { padding: 4px 7px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: .4px; }.tag-pink { background: #513044; color: #ff9ab5; }.tag-blue { background: #293d59; color: #91c4ff; }.tag-green { background: #23473f; color: #89dfbd; }.tag-orange { background: #523d32; color: #ffc18a; }.timeline-event time { color: #9f9eaf; font-size: 10px; }.timeline-event h3 { margin: 10px 0 5px; color: #f0eff6; font-size: 14px; font-weight: 600; }.timeline-event > p { margin: 0; color: #b4b3c2; font-size: 12px; line-height: 1.5; }.timeline-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; }.timeline-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #52406a; color: #e8d3ff; font-size: 9px; font-weight: 700; }.avatar-marcus { background: #294b61; color: #a4daff; }.avatar-sofia { background: #285447; color: #9ce3c3; }.avatar-jordan { background: #62433c; color: #ffc0a9; }.timeline-meta > span:nth-child(2) { display: grid; gap: 3px; }.timeline-meta strong { color: #e8e7ef; font-size: 10px; }.timeline-meta small { color: #9d9cad; font-size: 9px; }.timeline-meta button { margin-left: auto; border: 0; background: transparent; color: #ff91a8; font-size: 10px; }.timeline-progress { display: flex; align-items: center; gap: 8px; margin: 12px 0; }.timeline-progress > span { height: 6px; flex: 1; overflow: hidden; border-radius: 6px; background: #414258; }.timeline-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #518fe9, #7bafff); }.timeline-progress b { color: #bcbad0; font-size: 10px; }.timeline-empty { padding: 30px; color: #aaa9bb; text-align: center; }.timeline-empty[hidden] { display: none; }.timeline-load-more { display: block; margin: 12px auto 0; padding: 8px 13px; border: 1px solid #44455c; border-radius: 5px; background: #2b2c40; color: #d8d7e3; font-size: 11px; }
    .calendar-heading { align-items: center; }.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(285px, .8fr); align-items: start; gap: 16px; }.calendar-main, .calendar-agenda, .calendar-upcoming { padding: 18px !important; border: 1px solid #38394f; border-radius: 6px; background: #292a3e; }.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }.calendar-toolbar h2, .calendar-agenda h2, .calendar-upcoming h2 { margin: 0; color: #f0eff6; font-family: var(--font-heading); font-size: 19px; }.calendar-nav { display: flex; align-items: center; gap: 5px; }.calendar-nav button { min-width: 33px; height: 32px; padding: 0 8px; border: 1px solid #45465c; border-radius: 4px; background: #252639; color: #dedde8; font-size: 13px; }.calendar-nav button:hover { background: #393a50; }.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.calendar-weekdays { border-top: 1px solid #414258; border-bottom: 1px solid #414258; }.calendar-weekdays span { padding: 10px 3px; color: #aaa9bb; font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; }.calendar-day { display: flex; min-width: 0; min-height: 91px; flex-direction: column; align-items: flex-start; gap: 5px; padding: 7px 6px; border: 0; border-right: 1px solid #393a50; border-bottom: 1px solid #393a50; background: transparent; color: #d8d7e3; text-align: left; }.calendar-day:nth-child(7n) { border-right: 0; }.calendar-day:hover { background: #ffffff08; }.calendar-day.outside-month { color: #68687d; }.calendar-day.selected-day { background: #e6498316; box-shadow: inset 0 0 0 1px #e7658a66; }.calendar-day-number { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; font-size: 11px; }.calendar-day.selected-day .calendar-day-number { background: #ee5988; color: #fff; font-weight: 700; }.calendar-event-chip { display: block; width: 100%; overflow: hidden; padding: 4px 5px; border-radius: 3px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.event-pink { background: #503044; color: #ff9db5; }.event-blue { background: #2e405b; color: #9acaff; }.event-green { background: #24483f; color: #93e0bf; }.event-orange { background: #554032; color: #ffc68b; }.event-violet { background: #403759; color: #c3b2ff; }.calendar-more { color: #aaa9bb; font-size: 8px; }.calendar-side { display: grid; gap: 14px; }.calendar-agenda .showcase-section-heading { align-items: center; margin-bottom: 11px; }.agenda-count { padding: 5px 7px; border-radius: 4px; background: #3c3555; color: #c5aeff; font-size: 9px; }.agenda-event { display: grid; grid-template-columns: 45px 3px minmax(0, 1fr); align-items: start; gap: 9px; padding: 13px 0; border-top: 1px solid #3d3e53; }.agenda-event time { padding-top: 2px; color: #c2c1ce; font-size: 10px; }.agenda-event-mark { width: 3px; height: 44px; border-radius: 3px; }.mark-pink { background: #f15e8d; }.mark-blue { background: #5893ec; }.mark-green { background: #3cc29d; }.agenda-event > div { display: grid; gap: 5px; }.agenda-event > div > strong { color: #ecebf3; font-size: 12px; }.agenda-event > div > small { color: #a5a4b7; font-size: 10px; }.agenda-attendees { display: flex; align-items: center; padding-top: 3px; }.agenda-attendees i { display: grid; width: 21px; height: 21px; margin-right: -4px; place-items: center; border: 2px solid #292a3e; border-radius: 50%; background: #655080; color: white; font-size: 7px; font-style: normal; }.agenda-attendees i:nth-child(2) { background: #3b6c75; }.agenda-attendees i:nth-child(3) { background: #8a5d62; }.agenda-attendees b { margin-left: 8px; color: #aaa9bb; font-size: 8px; }.calendar-upcoming h2 { margin-bottom: 12px; }.calendar-upcoming > div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #3d3e53; }.calendar-upcoming > div > b { display: grid; width: 34px; height: 36px; place-items: center; border-radius: 4px; background: #3a3152; color: #d1b4ff; font-size: 12px; }.calendar-upcoming > div > span { display: grid; gap: 4px; }.calendar-upcoming > div strong { color: #e9e8f0; font-size: 11px; }.calendar-upcoming > div small { color: #a5a4b7; font-size: 9px; }
    .lock-screen-body { min-height: 100vh; background: #1c1c2a; }.lock-screen-page { display: flex; min-height: 100vh; flex-direction: column; padding: 23px 32px; background: radial-gradient(ellipse at 50% 45%, #29243f 0, #1c1c2a 52%); }.lock-screen-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.lock-brand { display: inline-flex; align-items: center; gap: 9px; color: #f3f2f8; font-family: var(--font-heading); font-size: 17px; font-weight: 800; }.lock-screen-header nav { display: flex; gap: 21px; }.lock-screen-header nav a { color: #d0a1ef; font-size: 12px; }.lock-screen-header nav a:hover { color: #fff; }.lock-card { width: min(410px, 100%); margin: auto; padding: 36px 34px 30px; border: 1px solid #ffffff1d; border-radius: 10px; background: linear-gradient(145deg, #fff, #f2eff8); box-shadow: 0 24px 80px #0a0918a6; color: #292a3d; text-align: center; }.lock-emblem { display: grid; width: 88px; height: 88px; margin: -79px auto 18px; place-items: center; border: 5px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #e9a18b, #725497); box-shadow: 0 8px 20px #19162655; color: white; font-size: 20px; font-weight: 700; }.lock-card .showcase-eyebrow { color: #a74ec2; font-size: 10px; }.lock-card h1 { margin: 0 0 5px; color: #292a3d; font-size: 21px; font-weight: 700; }.lock-card > p { margin: 0; color: #727287; font-size: 12px; }.unlock-form { display: grid; gap: 10px; margin-top: 23px; text-align: left; }.unlock-form > label { color: #45455a; font-size: 11px; font-weight: 700; }.unlock-input-wrap { display: flex; height: 43px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #d8d7e2; border-radius: 5px; background: white; color: #8e8da2; }.unlock-input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #28293b; font-size: 12px; }.unlock-input-wrap input::placeholder { color: #aaa9b8; }.unlock-input-wrap button { border: 0; background: transparent; color: #9850be; font-size: 10px; font-weight: 700; }.unlock-form > small { color: #77768a; font-size: 10px; }.unlock-form > .showcase-primary-button { width: 100%; margin-top: 9px; }.unlock-success { display: grid; justify-items: center; gap: 9px; margin-top: 24px; }.unlock-success[hidden] { display: none; }.unlock-success > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #d9f5e9; color: #188d66; font-size: 20px; }.unlock-success strong { color: #292a3d; font-size: 15px; }.unlock-success small { color: #77768a; font-size: 10px; }.unlock-success a { width: 100%; margin-top: 7px; }.lock-screen-footer { display: flex; justify-content: space-between; gap: 12px; color: #a4a3b8; font-size: 10px; }.lock-screen-footer span:last-child { color: #d0a1ef; }
    @media (max-width: 1100px) {
        .pricing-grid { max-width: 920px; gap: 11px; }.pricing-card { padding: 17px !important; }
        .calendar-layout { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: 12px; }
    }
    @media (max-width: 850px) {
        .pricing-card { min-height: 405px; }.pricing-card h2 { font-size: 19px; }.pricing-price > strong { font-size: 36px; }
        .rtl-demo-grid { grid-template-columns: minmax(0, 1fr) minmax(245px, .85fr); }.rtl-message-card { grid-column: 1 / -1; }.rtl-settings-card { grid-column: 2; grid-row: 2; }
        .calendar-layout { grid-template-columns: minmax(0, 1fr); }.calendar-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .timeline-toolbar { align-items: flex-start; flex-direction: column; }.timeline-filters { width: 100%; justify-content: space-between; }.timeline-filters button { flex: 1; }
    }
    @media (max-width: 620px) {
        .showcase-content { gap: 14px; }.showcase-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.showcase-heading h1 { font-size: 22px; }.showcase-heading > div > p, .showcase-heading > p { font-size: 13px; }
        .centered-showcase-heading { align-items: center; text-align: center; }.showcase-primary-button, .showcase-secondary-button { min-height: 37px; font-size: 12px; }
        .pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }.pricing-card { min-height: 0; padding: 18px !important; }.pricing-card-featured { transform: none; }.pricing-card h2 { margin-top: 12px; }.pricing-card > p { min-height: 0; }.pricing-price { margin-top: 12px; }.pricing-divider { margin: 15px 0 13px; }.pricing-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.pricing-card li { font-size: 11px; }.pricing-compare { padding: 14px !important; }.pricing-compare-row { grid-template-columns: 1.25fr repeat(3, .8fr); gap: 5px; font-size: 9px; }.pricing-compare-row strong { font-size: 10px; }
        .rtl-control-panel { align-items: flex-start; flex-direction: column; padding: 13px !important; }.rtl-direction-toggle { width: 100%; }.rtl-direction-toggle button { flex: 1; justify-content: center; }.rtl-demo-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }.rtl-welcome-card, .rtl-stats-card, .rtl-message-card, .rtl-settings-card { padding: 14px !important; }.rtl-welcome-card { min-height: 210px; }.rtl-welcome-card > div:first-child { max-width: 77%; }.rtl-welcome-card h2 { font-size: 20px; }.rtl-art { top: 54px; right: -25px; width: 120px; height: 120px; opacity: .8; }.rtl-message-card, .rtl-settings-card { grid-column: auto; grid-row: auto; }
        .timeline-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.timeline-summary-grid > article { min-height: 89px; gap: 5px; padding: 11px 8px !important; }.timeline-summary-grid > article > span { font-size: 9px; }.timeline-summary-grid > article > strong { font-size: 19px; }.timeline-summary-grid > article > small { font-size: 8px; }.timeline-panel { padding: 13px !important; }.timeline-filters button { padding: 0 5px; font-size: 9px; }.timeline-item { grid-template-columns: 31px minmax(0, 1fr); gap: 8px; }.timeline-list::before { left: 14px; }.timeline-marker { width: 30px; height: 30px; border-width: 3px; font-size: 11px; }.timeline-event { padding: 11px; }.timeline-event h3 { font-size: 13px; }.timeline-event > p { font-size: 11px; }.timeline-meta button { font-size: 9px; }
        .calendar-layout { gap: 10px; }.calendar-main { padding: 12px !important; }.calendar-toolbar h2 { font-size: 17px; }.calendar-day { min-height: 68px; padding: 4px 3px; gap: 3px; }.calendar-weekdays span { padding: 8px 1px; font-size: 8px; }.calendar-event-chip { padding: 3px 2px; font-size: 7px; }.calendar-day-number { width: 20px; height: 20px; font-size: 10px; }.calendar-side { grid-template-columns: minmax(0, 1fr); }.calendar-agenda, .calendar-upcoming { padding: 14px !important; }
        .lock-screen-page { padding: 17px 14px; }.lock-screen-header { align-items: flex-start; flex-direction: column; }.lock-screen-header nav { flex-wrap: wrap; gap: 11px; }.lock-screen-header nav a { font-size: 10px; }.lock-card { margin-top: 90px; margin-bottom: auto; padding: 32px 20px 22px; }.lock-screen-footer { margin-top: 28px; flex-direction: column; gap: 6px; }
    }

    .component-version-pill, .menu-state-pill { display: inline-flex; min-height: 27px; align-items: center; padding: 0 9px; border: 1px solid #45465d; border-radius: 15px; background: #2d2e43; color: #c7c6d4; font-size: 10px; font-weight: 600; white-space: nowrap; }
    .button-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
    .component-demo-panel { min-width: 0; padding: 19px !important; border: 1px solid #393a50; border-radius: 6px; background: #292a3e; }
    .component-demo-panel h2, .grid-demo-heading h2, .grid-example-card h2, .component-demo-panel > h2 { margin: 0 0 4px; color: #f0eff6; font-family: var(--font-heading); font-size: 16px; }
    .component-demo-panel > p { margin: 0 0 16px; color: #a9a8ba; font-size: 12px; }
    .button-sample-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.button-sample-row.align-bottom { align-items: flex-end; }
    .demo-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid transparent; border-radius: 5px; color: #fff; font-size: 11px; font-weight: 700; transition: filter .18s ease, transform .18s ease, background .18s ease; }.demo-button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }.demo-button:disabled { cursor: not-allowed; opacity: .48; }
    .demo-default { background: #44455c; }.demo-primary { background: linear-gradient(110deg, #d64bc6, #ab4fdf); }.demo-info { background: #347fe5; }.demo-success { background: #16a981; }.demo-warning { background: #ec895e; }.demo-danger { background: #e94c73; }.demo-outline { border-color: #b553cf; background: transparent; color: #dc94f1; }
    .demo-small { min-height: 28px; padding: 0 9px; font-size: 10px; }.demo-large { min-height: 45px; padding: 0 19px; font-size: 13px; }.demo-round { border-radius: 22px; padding: 0 18px; }
    .demo-button-group { display: inline-flex; overflow: hidden; border-radius: 5px; background: #222336; }.demo-button-group button { min-width: 82px; min-height: 36px; padding: 0 12px; border: 0; border-right: 1px solid #38394e; background: transparent; color: #c0bfce; font-size: 11px; }.demo-button-group button:last-child { border-right: 0; }.demo-button-group button.is-active { background: #367fe8; color: white; }.demo-number-group { display: flex; margin: 13px 0 0 12px; border-radius: 22px; }.demo-number-group button { min-width: 43px; border: 0; }.demo-number-group button:first-child { border-radius: 22px 0 0 22px; }.demo-number-group button:last-child { border-radius: 0 22px 22px 0; }.demo-pagination { display: inline-flex; gap: 5px; margin-top: 12px; }.demo-pagination button { display: grid; min-width: 34px; height: 34px; place-items: center; border: 1px solid #414258; border-radius: 5px; background: #252639; color: #d2d1de; font-size: 11px; }.demo-pagination button.is-active { border-color: #ee658f; background: #ee658f; color: white; }.pagination-demo-label { display: block; margin-top: 10px; color: #aaa9bb; font-size: 10px; }
    .grid-view-controls { display: flex; gap: 4px; padding: 4px; border-radius: 5px; background: #222336; }.grid-view-controls button { min-height: 30px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #b5b4c5; font-size: 10px; }.grid-view-controls button.is-active { background: #45415f; color: white; }.grid-demo-panel, .grid-example-card { padding: 19px !important; border: 1px solid #393a50; border-radius: 6px; background: #292a3e; }.grid-demo-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.grid-demo-heading p { margin: 0; color: #a9a8ba; font-size: 12px; }.grid-breakpoints { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 19px 0 14px; padding: 12px; border-radius: 5px; background: #232437; }.grid-breakpoints > div { display: grid; gap: 3px; }.grid-breakpoints strong { color: #df91ed; font-size: 11px; }.grid-breakpoints span { color: #aaa9bb; font-size: 10px; }.grid-columns-demo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }.grid-columns-demo[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }.grid-demo-cell { display: grid; min-height: 68px; place-items: center; border: 1px solid #bf4db8; border-radius: 4px; background: linear-gradient(145deg, #683e7755, #343046); color: #e8a6ef; font-family: ui-monospace, Consolas, monospace; font-size: 9px; }.grid-example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.grid-equal-demo, .grid-mixed-demo { display: grid; gap: 6px; margin-top: 13px; }.grid-equal-demo { grid-template-columns: repeat(3, 1fr); }.grid-mixed-demo { grid-template-columns: 2fr 1fr; }.grid-equal-demo span, .grid-mixed-demo span, .grid-offset-demo span { display: grid; min-height: 51px; place-items: center; padding: 5px; border: 1px solid #b950c6; border-radius: 4px; background: #49335066; color: #e6a1ef; font-family: ui-monospace, Consolas, monospace; font-size: 9px; text-align: center; }.grid-offset-demo { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 13px; }.grid-offset-demo span { grid-column: 2 / 6; }
    .panel-variants-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }.showcase-content-panel { min-width: 0; padding: 19px !important; border: 1px solid #3a3b50; border-radius: 6px; background: #292a3e; transition: padding .2s ease; }.panel-compact .showcase-content-panel { padding: 12px !important; }.panel-demo-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }.panel-demo-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 9px; background: #483754; color: #dc9df4; }.panel-icon-purple { background: #483754; }.component-more { width: 28px; height: 28px; border: 0; background: transparent; color: #c1c0ce; font-size: 18px; }.showcase-content-panel h2 { margin: 0 0 6px; color: #f0eff6; font-family: var(--font-heading); font-size: 17px; }.showcase-content-panel > p { color: #aaa9bb; font-size: 12px; line-height: 1.5; }.panel-progress { display: flex; align-items: center; gap: 9px; }.panel-progress > span { height: 7px; flex: 1; overflow: hidden; border-radius: 5px; background: #414258; }.panel-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ca4dc5, #f27e9e); }.panel-progress strong { color: #cfb4ff; font-size: 10px; }.showcase-content-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #3c3d52; color: #a5a4b7; font-size: 10px; }.panel-avatars { display: flex; }.panel-avatars i { display: grid; width: 23px; height: 23px; margin-left: -4px; place-items: center; border: 2px solid #292a3e; border-radius: 50%; background: #69527e; color: white; font-size: 7px; font-style: normal; }.panel-avatars i:nth-child(2) { background: #397281; }.panel-avatars i:nth-child(3) { background: #514767; }.panel-gradient { overflow: hidden; background: linear-gradient(135deg, #403256, #2b2d43 70%) !important; }.panel-metric { margin: 12px 0 3px; color: #f4f2fa; font-family: var(--font-heading); font-size: 30px; font-weight: 700; }.panel-trend { color: #83dcb7; font-weight: 700; }.panel-sparkline { display: flex; height: 56px; align-items: end; gap: 6px; margin-top: 8px; }.panel-sparkline i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, #9f55bd, #e96db2); opacity: .8; }.panel-gradient footer button, .panel-view-all { border: 0; background: transparent; color: #ff91a8; font-size: 10px; }.panel-live-pill { display: inline-flex; align-items: center; gap: 5px; color: #89dfbd; font-size: 10px; }.panel-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #4dd2a1; }.panel-activity { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #3a3b50; }.panel-activity > span:last-child { display: grid; gap: 4px; }.panel-activity strong { color: #e8e7ef; font-size: 11px; }.panel-activity small { color: #aaa9bb; font-size: 9px; }.panel-view-all { display: block; margin: 12px 0 0 auto; }.panel-notice { display: flex; align-items: center; gap: 12px; background: linear-gradient(100deg, #24483f, #292a3e) !important; }.panel-notice[hidden] { display: none; }.panel-notice-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #29644f; color: #9ce6c2; }.panel-notice > div { flex: 1; }.panel-notice strong { color: #e6f7ee; font-size: 12px; }.panel-notice p { margin: 4px 0 0; color: #b0d3c1; font-size: 10px; }.panel-notice > button { align-self: flex-start; border: 0; background: transparent; color: #b4d2c2; font-size: 17px; }
    .alert-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.alert-demo-card { display: grid; align-content: start; justify-items: start; gap: 9px; min-height: 248px; padding: 18px !important; border: 1px solid #3a3b50; border-radius: 6px; background: #292a3e; }.alert-demo-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 20px; font-weight: 600; }.alert-icon-info { color: #78b4ff; }.alert-icon-warning { color: #ffc37d; }.alert-icon-success { color: #77dbb0; }.alert-demo-card h2 { margin: 0; color: #f0eff6; font-family: var(--font-heading); font-size: 16px; }.alert-demo-card p { flex: 1; margin: 0; color: #aaa9bb; font-size: 11px; line-height: 1.55; }.alert-code-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px !important; border: 1px solid #38394e; border-radius: 6px; background: #292a3e; }.alert-code-panel h2 { margin: 0 0 6px; color: #eeeef5; font-family: var(--font-heading); font-size: 16px; }.alert-code-panel p { max-width: 600px; margin: 0; color: #aaa9bb; font-size: 11px; line-height: 1.5; }.alert-checklist { display: grid; gap: 8px; color: #b5d9c7; font-size: 10px; white-space: nowrap; }.demo-modal-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 18px; background: #10111bc9; backdrop-filter: blur(4px); }.demo-modal-backdrop[hidden] { display: none; }.demo-modal { position: relative; display: grid; width: min(400px, 100%); justify-items: center; gap: 11px; padding: 28px 26px 22px; border: 1px solid #4b4b64; border-radius: 9px; background: #2a2b40; box-shadow: 0 25px 80px #080812aa; text-align: center; }.demo-modal-close { position: absolute; top: 8px; right: 9px; width: 27px; height: 27px; border: 0; border-radius: 4px; background: transparent; color: #aaa9bc; font-size: 20px; }.demo-modal h2 { margin: 0; color: #f1f0f7; font-family: var(--font-heading); font-size: 19px; }.demo-modal p { margin: 0; color: #b1b0c0; font-size: 12px; line-height: 1.5; }.demo-modal > div { display: flex; gap: 8px; margin-top: 5px; }.demo-modal > div button { min-height: 35px; font-size: 11px; }
    .notification-demo-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .9fr); gap: 15px; }.notification-style-panel, .notification-live-panel, .notification-position-panel { padding: 19px !important; border: 1px solid #393a50; border-radius: 6px; background: #292a3e; }.notification-style-panel h2, .notification-live-panel h2, .notification-position-panel h2 { margin: 0 0 5px; color: #f0eff6; font-family: var(--font-heading); font-size: 17px; }.notification-style-panel > p, .notification-position-panel p { margin: 0 0 14px; color: #aaa9bb; font-size: 11px; }.demo-alert { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; padding: 11px; border: 1px solid transparent; border-radius: 5px; }.demo-alert > span { font-size: 13px; font-weight: 700; }.demo-alert > div { flex: 1; }.demo-alert strong { display: block; font-size: 11px; }.demo-alert p { margin: 4px 0 0; font-size: 10px; line-height: 1.45; }.demo-alert > button { border: 0; background: transparent; color: inherit; font-size: 15px; }.alert-primary { border-color: #59405f; background: #443047; color: #edb2f1; }.alert-success { border-color: #2a594a; background: #24443c; color: #a1e6c4; }.alert-warning { border-color: #614c38; background: #4a3c31; color: #f2ca8f; }.alert-danger { border-color: #64394b; background: #4b303e; color: #ff9cb5; }.notification-live-panel .showcase-section-heading { align-items: center; margin-bottom: 10px; }.notification-unread { padding: 5px 7px; border-radius: 4px; background: #57334a; color: #ff9aba; font-size: 9px; }.notification-live-item { display: flex; align-items: flex-start; gap: 9px; padding: 14px 0; border-top: 1px solid #3b3c51; }.notification-live-item.is-read { opacity: .55; }.notification-live-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 12px; }.live-icon-pink { background: #513348; color: #ff98b2; }.live-icon-blue { background: #2e4159; color: #97caff; }.live-icon-green { background: #24473f; color: #91e0bd; }.notification-live-item > div { flex: 1; }.notification-live-item strong { color: #eae9f1; font-size: 11px; }.notification-live-item p { margin: 4px 0; color: #aaa9bb; font-size: 10px; }.notification-live-item small { color: #86869c; font-size: 9px; }.notification-live-item > button { border: 0; background: transparent; color: #a7a6b8; font-size: 17px; }.notification-position-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }.notification-position-panel > div:first-child { flex: 1; }.notification-position-controls { display: flex; flex-wrap: wrap; gap: 5px; }.notification-position-controls button { min-height: 30px; padding: 0 9px; border: 1px solid #46475d; border-radius: 4px; background: #232437; color: #b9b8c8; font-size: 9px; }.notification-position-controls button.is-active { border-color: #d253c8; color: #f4b2ed; }.notification-position-panel > .demo-button { min-height: 31px; }
    .icon-search { width: min(290px, 40%); }.icons-library-panel { padding: 18px !important; border: 1px solid #393a50; border-radius: 6px; background: #292a3e; }.icons-library-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 15px; }.icons-library-heading > div { display: grid; gap: 4px; }.icons-library-heading strong { color: #eae9f1; font-size: 13px; }.icons-library-heading small { color: #aaa9bb; font-size: 10px; }.icons-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }.icon-tile { display: grid; min-height: 100px; align-content: center; justify-items: center; gap: 10px; border: 1px solid #b04ec466; border-radius: 5px; background: #26273a; color: #eeeaf7; transition: border-color .18s ease, transform .18s ease, background .18s ease; }.icon-tile:hover { transform: translateY(-2px); border-color: #e65cd5; background: #393047; }.icon-tile[hidden] { display: none; }.icon-tile > span { font-size: 22px; }.icon-tile small { color: #dc86e3; font-size: 9px; }.icons-empty { padding: 40px 10px; color: #aaa9bb; text-align: center; }.icons-empty[hidden] { display: none; }
    .type-specimen { padding: 20px !important; border: 1px solid #393a50; border-radius: 6px; background: #292a3e; transition: font-size .2s ease; }.type-specimen.type-scale-up { font-size: 1.1em; }.type-specimen-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 17px; border-bottom: 1px solid #3b3c51; }.type-specimen-head h2 { margin: 0 0 5px; color: #f1f0f7; font-family: var(--font-heading); font-size: 20px; }.type-specimen-head p { margin: 0; color: #aaa9bb; font-size: 12px; }.type-font-label { color: #dc9ff0; font-family: var(--font-heading); font-size: 16px; }.type-specimen-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; gap: 15px; padding: 15px 0; border-bottom: 1px solid #38394f; }.type-specimen-row > span, .type-body-sample > span { display: flex; justify-content: space-between; color: #aaa9bb; font-size: 10px; }.type-specimen-row > span small { color: #77778c; font-family: ui-monospace, Consolas, monospace; font-size: 9px; }.type-specimen-row strong { color: #eeedf5; font-family: var(--font-heading); font-weight: 600; }.type-heading-1 { font-size: 30px; }.type-heading-2 { font-size: 24px; }.type-heading-3 { font-size: 20px; }.type-heading-4 { font-size: 17px; }.type-body-sample { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 15px; padding: 16px 0; }.type-body-sample p { max-width: 800px; margin: 0; color: #c5c4d0; font-size: 13px; line-height: 1.7; }.type-quote { margin: 8px 0 14px 165px; padding: 15px 18px; border: 1px solid #b54fca; border-radius: 5px; color: #df76d7; }.type-quote p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }.type-quote cite { color: #baabc8; font-size: 10px; font-style: normal; }.type-color-samples { margin-left: 165px; }.type-color-samples p { margin: 8px 0; font-size: 12px; }.type-muted { color: #848399; }.type-accent { color: #e45cca; }
    .multi-level-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(270px, .8fr); align-items: start; gap: 15px; }.nested-menu-panel, .nested-guide-panel, .nested-current-panel { padding: 18px !important; border: 1px solid #393a50; border-radius: 6px; background: #292a3e; }.nested-menu-panel .showcase-section-heading { align-items: center; margin-bottom: 12px; }.nested-menu-panel .showcase-section-heading h2 { margin: 0; color: #f0eff6; font-family: var(--font-heading); font-size: 17px; }.nested-menu-item { display: flex; width: 100%; min-height: 61px; align-items: center; gap: 11px; padding: 9px 10px; border: 0; border-top: 1px solid #3b3c51; background: transparent; color: #e8e7ef; text-align: left; }.nested-menu-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #453456; color: #d9a0fa; }.nested-icon-green { background: #26483f; color: #81dab5; }.nested-icon-blue { background: #2e405a; color: #92c3ff; }.nested-menu-item > span:nth-child(2) { display: grid; flex: 1; gap: 4px; }.nested-menu-item strong { font-size: 12px; }.nested-menu-item small { color: #a2a1b4; font-size: 10px; }.nested-chevron { color: #aaa9bb; transition: transform .2s ease; }.nested-menu-item[aria-expanded="true"] .nested-chevron, .nested-subgroup-toggle[aria-expanded="true"] .nested-chevron { transform: rotate(180deg); }.nested-menu-content { display: grid; gap: 2px; padding: 2px 8px 12px 56px; }.nested-menu-content[hidden], .nested-subgroup-content[hidden] { display: none; }.nested-menu-content > a { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; border-radius: 4px; color: #bebdcb; font-size: 11px; }.nested-menu-content > a:hover { background: #ffffff09; color: #fff; }.nested-menu-badge { padding: 4px 6px; border-radius: 4px; background: #443357; color: #ceadf4; font-size: 8px; }.nested-subgroup-toggle { display: flex; min-height: 34px; align-items: center; justify-content: space-between; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: #c6c5d1; font-size: 11px; text-align: left; }.nested-subgroup-content { display: grid; gap: 2px; padding-left: 13px; border-left: 1px solid #615178; }.multi-level-aside { display: grid; gap: 13px; }.nested-guide-panel h2 { margin: 0 0 8px; color: #f0eff6; font-family: var(--font-heading); font-size: 17px; }.nested-guide-panel > p { color: #aaa9bb; font-size: 11px; line-height: 1.55; }.nested-guide-panel > div { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid #3b3c51; color: #c5c4d1; font-size: 10px; }.nested-guide-panel > div strong { color: #e48be9; font-family: var(--font-heading); }.nested-current-panel p { margin: 10px 0 7px; color: #dedde8; font-size: 11px; }.nested-current-panel p b { padding: 0 5px; color: #df7fe2; }.nested-current-panel > small { color: #9998ac; font-size: 10px; }
    .toast.toast-top-right { top: 72px; right: 22px; bottom: auto; left: auto; }.toast.toast-bottom-right { top: auto; right: 20px; bottom: 20px; left: auto; }.toast.toast-top-center { top: 72px; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -8px); }.toast.toast-top-center.visible { transform: translate(-50%, 0); }.toast.toast-bottom-center { top: auto; right: auto; bottom: 20px; left: 50%; transform: translate(-50%, 8px); }.toast.toast-bottom-center.visible { transform: translate(-50%, 0); }
    @media (max-width: 850px) {
        .grid-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.notification-demo-grid { grid-template-columns: minmax(0, 1fr); }.multi-level-layout { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 620px) {
        .button-demo-grid, .panel-variants-grid, .alert-demo-grid { grid-template-columns: minmax(0, 1fr); }.component-demo-panel, .grid-demo-panel, .grid-example-card, .showcase-content-panel, .notification-style-panel, .notification-live-panel, .notification-position-panel, .icons-library-panel, .type-specimen, .nested-menu-panel, .nested-guide-panel, .nested-current-panel { padding: 13px !important; }.button-sample-row { gap: 6px; }.demo-button-group { max-width: 100%; }.demo-button-group button { min-width: 65px; }.demo-number-group { margin-left: 0; }.grid-view-controls { width: 100%; }.grid-view-controls button { flex: 1; }.grid-columns-demo { gap: 4px; }.grid-columns-demo[data-columns="12"] .grid-demo-cell { min-height: 52px; font-size: 7px; }.grid-example-grid { grid-template-columns: minmax(0, 1fr); }.grid-breakpoints { gap: 5px; padding: 9px; }.grid-breakpoints span { font-size: 8px; }.alert-code-panel { align-items: flex-start; flex-direction: column; }.alert-checklist { white-space: normal; }.notification-position-panel { align-items: flex-start; flex-direction: column; }.notification-position-controls { width: 100%; }.notification-position-controls button { flex: 1; }.icon-search { width: 100%; }.icons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.icon-tile { min-height: 81px; }.icons-library-heading { align-items: flex-start; flex-direction: column; }.type-specimen-head { align-items: flex-start; flex-direction: column; }.type-specimen-row, .type-body-sample { grid-template-columns: minmax(0, 1fr); gap: 8px; }.type-specimen-row > span { max-width: 150px; }.type-heading-1 { font-size: 24px; }.type-heading-2 { font-size: 20px; }.type-heading-3 { font-size: 17px; }.type-heading-4 { font-size: 15px; }.type-quote, .type-color-samples { margin-left: 0; }.timeline-toolbar .timeline-filters { flex-wrap: wrap; }.nested-menu-panel, .multi-level-aside { min-width: 0; }
    }

    .component-columns, .component-showcase-grid, .component-grid-examples, .typography-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
    .component-panel { min-width: 0; padding: 19px !important; border: 1px solid #3a3b50; border-radius: 6px; background: #292a3e; }
    .component-panel h2 { margin: 0 0 9px; color: #f0eff6; font-family: var(--font-heading); font-size: 18px; }
    .component-panel > p { color: #aaa9bb; font-size: 13px; line-height: 1.6; }
    .component-panel-heading, .icon-library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .component-panel-heading h2, .icon-library-toolbar h2 { margin: 0; }
    .component-status { padding: 5px 9px; border-radius: 15px; background: #20463d; color: #82dcb6; font-size: 11px; }
    .nested-menu { display: grid; gap: 5px; margin-top: 15px; }
    .nested-menu a, .nested-menu summary { display: flex; min-height: 39px; align-items: center; gap: 11px; padding: 0 11px; border-radius: 5px; color: #c8c7d4; font-size: 13px; text-decoration: none; cursor: pointer; list-style: none; }
    .nested-menu summary::-webkit-details-marker { display: none; }.nested-menu summary > span { width: 17px; color: #d28be5; }.nested-menu summary > b, .nested-menu > a > small { margin-left: auto; color: #aaa9bb; font-size: 12px; font-weight: 400; }
    .nested-menu details[open] > summary, .nested-menu a:hover, .nested-menu summary:hover { background: #35354b; color: #fff; }
    .nested-menu details > a { min-height: 33px; margin-left: 21px; padding-left: 15px; border-left: 1px solid #4a4960; font-size: 12px; }
    .nested-menu details > a > i { margin-left: auto; color: #aaa9bb; font-size: 11px; font-style: normal; }
    .nested-menu .nested-submenu > summary { min-height: 32px; margin-left: 21px; padding-left: 15px; border-left: 1px solid #4a4960; font-size: 12px; }
    .nested-menu .nested-submenu > a { margin-left: 43px; }
    .nested-guide-row { display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; border-top: 1px solid #3a3b50; }
    .nested-guide-row > span { color: #db83e2; font-size: 12px; font-weight: 700; }.nested-guide-row > div { display: grid; gap: 5px; }.nested-guide-row strong { color: #e7e6ef; font-size: 13px; }.nested-guide-row small { color: #aaa9bb; font-size: 12px; }
    .component-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 15px 0; }
    .component-quiet-button, .component-danger-button, .component-size-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #45465d; border-radius: 5px; background: #303147; color: #e6e5ee; font-size: 12px; font-weight: 600; cursor: pointer; }
    .component-quiet-button { border-color: transparent; background: transparent; color: #d690e4; }.component-danger-button { border-color: #a64860; background: #a53e59; color: white; }.component-size-button:hover, .component-quiet-button:hover { filter: brightness(1.18); }
    .component-size-button.size-small { min-height: 30px; padding: 0 10px; font-size: 11px; }.component-size-button.size-large { min-height: 46px; padding: 0 18px; font-size: 14px; }.component-round-button { width: 40px; padding: 0; border-radius: 50%; font-size: 19px; }
    .component-segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 5px; background: #222336; }.component-segmented button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: #bbbaca; font-size: 12px; cursor: pointer; }.component-segmented button.is-active { background: #45415f; color: white; }.component-panel [disabled] { opacity: .48; cursor: not-allowed; }
    [data-button-loading] { min-width: 160px; }.component-panel-stat { display: flex; align-items: baseline; gap: 10px; padding-top: 12px; border-top: 1px solid #3a3b50; }.component-panel-stat strong { color: #fff; font-size: 28px; }.component-panel-stat span { color: #aaa9bb; font-size: 12px; }.component-panel-stat small { margin-left: auto; color: #83dcb7; }
    .component-panel-action, .component-modal-close { width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: #bebdca; font-size: 22px; cursor: pointer; }.component-panel-action:hover, .component-modal-close:hover { background: #3a3b50; }
    .panel-showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
    .reference-panel { min-height: 215px; padding: 14px 15px !important; border: 0; border-radius: 3px; background: #27283b; }
    .reference-panel-eyebrow { display: block; margin-bottom: 5px; color: #8c8da5; font-size: 10px; }
    .reference-panel > h2 { margin: 0 0 12px; color: #f1eff7; font-size: 17px; font-weight: 500; }
    .reference-tabs { display: flex; gap: 7px; }
    .reference-tabs button { min-height: 34px; padding: 0 20px; border: 0; border-radius: 20px; background: #1d2031; color: #aaaabd; font-size: 11px; cursor: pointer; transition: background .18s ease, color .18s ease; }
    .reference-tabs button:hover:not([aria-selected="true"]) { background: #303147; color: #f2f0f8; }
    .reference-tabs button[aria-selected="true"] { background: #c846dd; color: white; }
    .reference-tabs button:focus-visible, .reference-accordion button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .reference-tabs-horizontal { margin: 18px 0 16px; }
    .reference-tab-content { min-width: 0; color: #aaaabd; font-size: 11px; line-height: 1.55; }
    .reference-tab-content p { margin: 0 0 12px; }
    .reference-tab-content p:last-child { margin-bottom: 0; }
    .reference-vertical-tabs { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); align-items: start; gap: 17px; margin-top: 18px; }
    .reference-tabs-vertical { flex-direction: column; gap: 10px; }
    .reference-tabs-vertical button { width: 100%; min-height: 34px; }
    .reference-accordion-panel { padding: 14px 0 !important; }
    .reference-accordion-panel > .reference-panel-eyebrow, .reference-accordion-panel > h2 { margin-right: 15px; margin-left: 15px; }
    .reference-accordion-item { border-bottom: 1px solid #3a3b50; }
    .reference-accordion-item h3 { margin: 0; }
    .reference-accordion-item button { display: flex; width: 100%; min-height: 39px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px; border: 0; background: transparent; color: #b8b7c8; font-size: 11px; text-align: left; cursor: pointer; }
    .reference-accordion-item button:hover, .reference-accordion-item button[aria-expanded="true"] { color: #f1eff7; }
    .accordion-chevron { color: #dd4bd8; font-size: 15px; transition: transform .18s ease; }
    .reference-accordion-item button[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
    .reference-accordion-item [data-panel-accordion-panel] { padding: 0 16px 14px; color: #aaaabd; font-size: 11px; line-height: 1.55; }
    .reference-accordion-item [data-panel-accordion-panel] p { margin: 0; }
    .reference-accordion-item [data-panel-accordion-panel] strong { color: #d5d4e0; font-weight: 600; }
    .reference-icon-tabs .reference-tabs-vertical button { display: grid; min-height: 72px; align-content: center; justify-items: center; gap: 6px; border-radius: 3px; }
    .reference-icon-tabs .reference-tabs-vertical button > span { font-size: 17px; }
    [data-panel-tabpanel][hidden], [data-panel-accordion-panel][hidden] { display: none; }
    .component-accent-panel { background: linear-gradient(135deg, #42334e, #292a3e 72%) !important; }.component-accent-progress { height: 8px; overflow: hidden; margin: 18px 0 7px; border-radius: 8px; background: #44435a; }.component-accent-progress span { display: block; width: 86%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #cc51c1, #f1709b); }.component-accent-panel > small { color: #aaa9bb; font-size: 11px; }
    .panel-team-row, .panel-activity-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #3a3b50; }.panel-team-row > span:nth-child(2), .panel-activity-row > span:nth-child(2) { display: grid; flex: 1; gap: 4px; }.panel-team-row strong, .panel-activity-row strong { color: #e8e7ef; font-size: 12px; }.panel-team-row small, .panel-activity-row small { color: #aaa9bb; font-size: 11px; }.panel-team-row > b { color: #d994e5; font-size: 11px; font-weight: 500; }
    [data-density-panel].is-compact .panel-activity-row { padding: 5px 0; }.component-density-button { padding: 6px 9px; border: 1px solid #48495f; border-radius: 4px; background: #303147; color: #d6d5e0; font-size: 11px; cursor: pointer; }.component-demo-note { margin: 0; color: #9897aa; font-size: 12px; }
    .demo-grid-12, .demo-grid-2, .demo-grid-3, .demo-grid-mixed { display: grid; gap: 8px; margin-top: 17px; }.demo-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }.demo-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.demo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }.demo-grid-mixed { grid-template-columns: 2fr 1fr; }.demo-grid-12 span, .demo-grid-2 span, .demo-grid-3 span, .demo-grid-mixed span { display: grid; min-height: 55px; place-items: center; border: 1px solid #ba58c3; border-radius: 4px; background: #57376066; color: #e5a2ed; font: 11px ui-monospace, Consolas, monospace; }.demo-grid-12 span { min-height: 54px; font-size: 10px; }.grid-demo-panel { padding: 19px !important; }.grid-demo-labels { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; color: #aaa9bb; font-size: 11px; }
    .component-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: #10101bc9; }.component-modal-backdrop[hidden] { display: none; }.component-alert-modal { position: relative; width: min(440px, 100%); padding: 32px; border: 1px solid #48495f; border-radius: 9px; background: #292a3e; box-shadow: 0 20px 70px #0008; text-align: center; }.component-modal-close { position: absolute; top: 8px; right: 9px; }.component-alert-icon { display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto 17px; border: 2px solid #e7b46b; border-radius: 50%; color: #e7b46b; font-size: 25px; }.component-alert-icon[data-tone="success"] { border-color: #72d8ae; color: #72d8ae; }.component-alert-icon[data-tone="danger"] { border-color: #f07892; color: #f07892; }.component-alert-icon[data-tone="info"] { border-color: #78b4ff; color: #78b4ff; }.component-alert-modal h2 { margin: 0 0 8px; color: #f1f0f7; font-size: 21px; }.component-alert-modal p { color: #b1b0c0; font-size: 13px; line-height: 1.5; }.component-alert-actions { display: flex; justify-content: center; gap: 10px; margin-top: 23px; }
    .demo-notice { display: flex; align-items: flex-start; gap: 11px; margin-top: 11px; padding: 12px; border: 1px solid #3e6759; border-radius: 5px; background: #214238; }.demo-notice > span { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #326c56; color: #a0e6c4; font-weight: 700; }.demo-notice > div { flex: 1; }.demo-notice strong { color: #e6f7ee; font-size: 12px; }.demo-notice p { margin: 4px 0 0; color: #b7d5c6; font-size: 11px; }.demo-notice > button, .component-notification-preview > button { border: 0; background: transparent; color: #c3c2cf; font-size: 19px; cursor: pointer; }.notice-warning { border-color: #685738; background: #433a29; }.notice-warning > span { background: #665532; color: #ffda8e; }.notice-warning strong { color: #fff2d3; }.notice-warning p { color: #ddcba5; }.notice-error { border-color: #68404e; background: #432c38; }.notice-error > span { background: #703c4c; color: #ffb1c1; }.notice-error strong { color: #ffe7ec; }.notice-error p { color: #dbb8c1; }
    .component-notification-preview { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px; border: 1px solid #424359; border-radius: 6px; background: #222336; }.component-notification-preview > div { display: grid; flex: 1; gap: 4px; }.component-notification-preview strong { color: #ecebf3; font-size: 12px; }.component-notification-preview small { color: #aaa9bb; font-size: 11px; }.component-notification-preview .component-alert-icon { width: 32px; height: 32px; margin: 0; border: 0; background: #275340; color: #8fe0b9; font-size: 16px; }
    .icon-search { display: flex; width: min(280px, 100%); min-height: 40px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #424359; border-radius: 5px; background: #222336; color: #aeadbd; }.icon-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #f1f0f7; font: inherit; font-size: 12px; }.icon-library-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }.icon-library-item { display: grid; min-height: 86px; align-content: center; justify-items: center; gap: 8px; border: 1px solid #3b3c51; border-radius: 5px; background: #252639; color: #d8d7e1; cursor: pointer; }.icon-library-item:hover { border-color: #bd5bc5; background: #343047; }.icon-library-item > span { color: #df9bea; font-size: 22px; }.icon-library-item small { color: #aaa9bb; font-size: 11px; }.icon-library-item[hidden] { display: none; }.icon-empty-state { color: #aaa9bb; text-align: center; }
    .typography-demo.type-scale-large { font-size: 1.12em; }.type-display { margin: 14px 0; color: #f5f3fa; font-family: var(--font-heading); font-size: 32px; line-height: 1.2; }.type-lead { max-width: 620px; color: #c1c0cf; font-size: 16px !important; }.typography-meta { display: flex; gap: 20px; margin-top: 23px; padding-top: 12px; border-top: 1px solid #3a3b50; color: #9998ab; font-size: 11px; }.typography-hierarchy h1, .typography-hierarchy h2, .typography-hierarchy h3, .typography-hierarchy h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #efedf5; }.typography-hierarchy h1 { font-size: 25px; }.typography-hierarchy h2 { font-size: 21px; }.typography-hierarchy h3 { font-size: 17px; }.typography-hierarchy h4 { font-size: 14px; }.typography-hierarchy small { color: #9998ab; font-size: 11px; font-weight: 400; }.typography-body p { color: #bcbac9; font-size: 13px; line-height: 1.7; }.typography-body a { color: #ee91d9; }.typography-body > small { color: #9998ab; font-size: 11px; }.typography-quote { margin-top: 19px; padding: 14px; border-left: 3px solid #d65cc7; background: #242538; color: #dedce8; font-size: 13px; }.typography-quote span { display: block; margin-top: 8px; color: #9998ab; font-size: 11px; }.type-muted { color: #9291a5 !important; }.type-success { color: #80dcb4 !important; }.type-warning { color: #f0c17a !important; }.type-danger { color: #f08099 !important; }
    .toast.toast-bottom { top: auto; bottom: 22px; }
    .button-demo-panel > p { margin: 0 0 13px; }
    .reference-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
    .reference-button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 1px solid transparent; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: filter .16s ease, transform .16s ease, box-shadow .16s ease; }
    .reference-button:hover, .social-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
    .reference-button:focus-visible, .social-button:focus-visible, .reference-pagination button:focus-visible, .reference-button-group button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .button-default { background: linear-gradient(110deg, #344669, #3b4c70); }.button-primary { background: linear-gradient(110deg, #bd42d5, #dd4fc8); }.button-info { background: linear-gradient(110deg, #2875ea, #3389f4); }.button-success { background: linear-gradient(110deg, #00b9c8, #04c8bb); }.button-warning { background: linear-gradient(110deg, #ff5d87, #ff807f); }.button-danger { background: linear-gradient(110deg, #f13b55, #ee4c67); }
    .button-size-row { align-items: flex-end; }.reference-button.button-small { min-height: 29px; padding: 0 11px; font-size: 11px; }.reference-button.button-regular { min-height: 38px; padding: 0 17px; }.reference-button.button-large { min-height: 47px; padding: 0 21px; font-size: 13px; }.reference-button.button-round { min-height: 38px; border-radius: 22px; padding: 0 18px; }.reference-button.button-circle { width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 15px; }.reference-button.button-outline { min-height: 38px; border-color: #c24bd1; background: transparent; color: #e29aed; }.reference-link-button { padding: 7px 4px; border: 0; background: transparent; color: #ec62ce; font-size: 12px; font-weight: 700; cursor: pointer; }.reference-button:disabled { opacity: .5; cursor: not-allowed; }
    .reference-pagination { display: flex; align-items: center; gap: 4px; margin: 3px 0 10px; }.reference-pagination button { display: grid; min-width: 31px; height: 31px; place-items: center; padding: 0 7px; border: 0; border-radius: 50%; background: transparent; color: #e1e0ea; font-size: 12px; cursor: pointer; }.reference-pagination button.is-active { background: #ff698a; color: #fff; }.reference-pagination button:hover:not(.is-active) { background: #414258; }.reference-pagination.pagination-arrows { gap: 6px; }.reference-pagination.pagination-arrows button:first-child, .reference-pagination.pagination-arrows button:last-child { font-size: 18px; }.reference-pagination.pagination-arrows button.is-active { background: #c64cd1; }.button-group-feedback { min-height: 16px; margin: 10px 0 0 !important; color: #9e9daf !important; font-size: 11px !important; }
    .reference-button-group { display: inline-flex; max-width: 100%; overflow: hidden; margin: 3px 0 10px; border-radius: 5px; background: #25263a; }.reference-button-group button { min-width: 76px; min-height: 36px; padding: 0 13px; border: 0; border-right: 1px solid #383a50; background: linear-gradient(110deg, #2672e5, #2589f4); color: white; font-size: 12px; font-weight: 700; cursor: pointer; }.reference-button-group button:last-child { border-right: 0; }.reference-button-group button.is-active { background: linear-gradient(110deg, #2864c7, #367bec); box-shadow: inset 0 0 0 1px #ffffff20; }.reference-number-group { display: flex; width: min(100%, 250px); border-radius: 22px; }.reference-number-group button { min-width: 0; flex: 1; border-right: 1px solid #ffffff18; }
    .social-button-panel { grid-column: 1 / -1; }.social-button-table { overflow-x: auto; }.social-button-header, .social-button-row { display: grid; min-width: 675px; grid-template-columns: 86px minmax(150px, 1fr) 48px 48px minmax(150px, 1fr); align-items: center; gap: 10px; }.social-button-header { padding: 0 0 8px; color: #aeadbd; font-size: 11px; }.social-button-row { min-height: 35px; padding: 3px 0; border-top: 1px solid #3a3b50; }.social-button-row > strong { color: #d3d2df; font-size: 11px; }.social-button { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid transparent; border-radius: 4px; color: white; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }.social-button > span { font-weight: 800; }.social-button.social-icon-only { width: 34px; height: 30px; justify-self: center; padding: 0; font-size: 13px; }.social-button.social-circle { width: 31px; height: 31px; border-radius: 50%; }.social-button.social-outline { justify-content: flex-start; border-color: currentColor; background: transparent; }
    .social-twitter { background-color: #3297dc; }.social-facebook { background-color: #35588c; }.social-google { background-color: #dc4a35; }.social-linkedin { background-color: #08769c; }.social-pinterest { background-color: #c91e35; }.social-youtube { background-color: #d52925; }.social-tumblr { background-color: #26384c; }
    .social-button.social-outline { background: transparent; }.social-button.social-outline.social-twitter { color: #4ca6e4; }.social-button.social-outline.social-facebook { color: #7296d0; }.social-button.social-outline.social-google { color: #f07a68; }.social-button.social-outline.social-linkedin { color: #29a6cb; }.social-button.social-outline.social-pinterest { color: #ed6272; }.social-button.social-outline.social-youtube { color: #f06760; }.social-button.social-outline.social-tumblr { color: #8294a8; }
    @media (max-width: 850px) { .component-columns, .component-showcase-grid, .component-grid-examples, .typography-demo { grid-template-columns: minmax(0, 1fr); }.panel-showcase-grid { grid-template-columns: minmax(0, 1fr); }.pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }.pricing-card-featured { transform: none; }.pricing-compare-row { grid-template-columns: 1.2fr repeat(3, 1fr); }.rtl-demo-grid, .calendar-layout { grid-template-columns: minmax(0, 1fr); }.calendar-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
    @media (max-width: 620px) { .showcase-heading, .rtl-control-panel, .component-panel-heading, .icon-library-toolbar { align-items: flex-start; flex-direction: column; }.billing-switch { justify-self: center; }.pricing-compare-row { grid-template-columns: 1.25fr repeat(3, .75fr); gap: 6px; font-size: 10px; }.component-panel { padding: 14px !important; }.icon-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.demo-grid-12 { gap: 3px; }.demo-grid-12 span { min-height: 38px; font-size: 8px; }.demo-grid-labels { flex-wrap: wrap; }.calendar-side { grid-template-columns: minmax(0, 1fr); }.button-demo-grid { grid-template-columns: minmax(0, 1fr); }.reference-button-group { width: 100%; }.reference-button-group button { min-width: 0; flex: 1; }.social-button-header, .social-button-row { min-width: 630px; grid-template-columns: 70px minmax(135px, 1fr) 40px 40px minmax(135px, 1fr); gap: 7px; } }
    .grid-reference-page { display: grid; align-content: start; gap: 17px; }
    .grid-reference-section { min-width: 0; }
    .grid-reference-section > h2 { margin: 0 0 10px 10px; color: #d7d6e2; font-family: var(--font-body); font-size: 12px; font-weight: 400; }
    .grid-reference-section > h2 strong { color: #f0eff7; font-size: 13px; font-weight: 700; }
    .grid-reference-row { display: grid; gap: 20px; }
    .grid-reference-cell { display: grid; min-width: 0; min-height: 84px; place-items: center; border-radius: 4px; background: #27283b; color: #ff8da7; font-family: ui-monospace, Consolas, monospace; font-size: 9px; text-align: center; }
    .grid-reference-xs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-reference-sm, .grid-reference-md, .grid-reference-lg, .grid-reference-xl, .grid-reference-mixed { grid-template-columns: minmax(0, 1fr); }
    .grid-reference-offset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    @media (min-width: 576px) {
        .grid-reference-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .grid-reference-mixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 768px) {
        .grid-reference-md { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .grid-reference-offset { grid-template-columns: repeat(12, minmax(0, 1fr)); }
        .grid-reference-offset > :nth-child(1) { grid-column: span 3; }
        .grid-reference-offset > .offset-right { grid-column: 10 / span 3; }
        .grid-reference-offset > .offset-center-four { grid-column: 5 / span 4; }
        .grid-reference-offset > .offset-center-six { grid-column: 4 / span 6; }
    }
    @media (min-width: 992px) {
        .grid-reference-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .grid-reference-mixed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (min-width: 1200px) {
        .grid-reference-xl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .sweet-alert-heading { display: grid; justify-items: center; gap: 7px; margin: 2px 0 12px; text-align: center; }
    .sweet-alert-heading h1 { margin: 0; color: #f1eff7; font-family: var(--font-heading); font-size: 22px; font-weight: 600; }
    .sweet-alert-heading p { margin: 0; color: #9292a8; font-size: 11px; line-height: 1.5; }
    .sweet-alert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; }
    .sweet-alert-card { display: grid; min-width: 0; min-height: 96px; align-content: center; justify-items: center; gap: 10px; padding: 13px; border-radius: 4px; background: #191a29; text-align: center; }
    .sweet-alert-card p { margin: 0; color: #aeadc0; font-size: 11px; line-height: 1.45; }
    .sweet-alert-card button { min-width: 96px; min-height: 34px; padding: 0 17px; border: 0; border-radius: 5px; background: linear-gradient(110deg, #ac42d4, #cf42d8); color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; transition: filter .16s ease, transform .16s ease; }
    .sweet-alert-card button:hover { filter: brightness(1.12); transform: translateY(-1px); }
    .sweet-alert-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: #080810b8; }
    .sweet-alert-backdrop[hidden] { display: none; }
    .sweet-alert-dialog { width: min(356px, 100%); padding: 27px 24px 22px; border-radius: 4px; background: #fff; box-shadow: 0 12px 45px #0005; color: #595959; text-align: center; animation: sweet-alert-enter .18s ease-out; }
    @keyframes sweet-alert-enter { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
    .sweet-alert-icon { display: grid; width: 60px; height: 60px; place-items: center; margin: 0 auto 14px; border: 3px solid #f8bb86; border-radius: 50%; color: #f8bb86; font-family: var(--font-heading); font-size: 35px; font-weight: 400; line-height: 1; }
    .sweet-alert-icon[data-tone="success"] { border-color: #a5dc86; color: #79c947; }
    .sweet-alert-icon[data-tone="warning"] { border-color: #f8bb86; color: #f8bb86; }
    .sweet-alert-icon[data-tone="danger"] { border-color: #f27474; color: #f27474; }
    .sweet-alert-icon[data-tone="info"] { border-color: #9de0f6; color: #3fc3ee; }
    .sweet-alert-dialog h2 { margin: 0 0 9px; color: #595959; font-family: var(--font-body); font-size: 23px; font-weight: 600; }
    .sweet-alert-dialog > p { margin: 0; color: #797979; font-size: 13px; line-height: 1.5; }
    .sweet-alert-input-wrap { display: block; margin-top: 15px; }
    .sweet-alert-input-wrap[hidden] { display: none; }
    .sweet-alert-input-wrap input { display: block; width: 100%; height: 39px; padding: 0 10px; border: 1px solid #9a9a9a; border-radius: 4px; outline: 0; background: #fff; color: #444; font-size: 14px; }
    .sweet-alert-input-wrap input:focus { border-color: #6a8bea; box-shadow: 0 0 0 2px #6a8bea22; }
    .sweet-alert-timer { height: 4px; overflow: hidden; margin-top: 18px; border-radius: 4px; background: #e6e6e6; }
    .sweet-alert-timer[hidden] { display: none; }
    .sweet-alert-timer span { display: block; width: 100%; height: 100%; transform-origin: left; background: #a5dc86; animation: sweet-alert-countdown linear forwards; }
    @keyframes sweet-alert-countdown { to { transform: scaleX(0); } }
    .sweet-alert-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 19px; }
    .sweet-alert-button { min-width: 72px; min-height: 34px; padding: 0 15px; border: 0; border-radius: 5px; color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; transition: filter .15s ease; }
    .sweet-alert-button:hover { filter: brightness(1.06); }
    .sweet-alert-confirm { background: linear-gradient(110deg, #08aeea, #09d5c4); }
    .sweet-alert-confirm.is-danger { background: linear-gradient(110deg, #ed5265, #f34257); }
    .sweet-alert-cancel { background: linear-gradient(110deg, #f13e48, #fa5266); }
    .sweet-alert-cancel[hidden] { display: none; }
    @media (max-width: 992px) { .sweet-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 520px) { .sweet-alert-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }.sweet-alert-card { min-height: 82px; }.sweet-alert-dialog { padding: 24px 18px 19px; }.sweet-alert-dialog h2 { font-size: 21px; } }
    .notification-demo-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; gap: 20px; }
    .notification-style-panel, .notification-state-panel { min-width: 0; padding: 15px !important; border: 0; border-radius: 3px; background: #27283b; }
    .notification-style-panel h2, .notification-state-panel h2 { margin: 0 0 15px; color: #e7e6ef; font-family: var(--font-body); font-size: 13px; font-weight: 400; }
    .notification-sample { display: flex; min-height: 36px; align-items: center; gap: 11px; margin-top: 9px; padding: 9px 12px; border: 0; border-radius: 4px; color: #fff; font-size: 11px; line-height: 1.4; }
    .notification-sample:first-of-type { margin-top: 0; }
    .notification-sample-info { background: #398fe8; }
    .notification-sample > span:not(.notification-sample-icon) { min-width: 0; flex: 1; }
    .notification-sample-icon { flex: 0 0 auto; font-size: 16px; }
    .notification-sample > button { width: 22px; height: 26px; flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
    .notification-state { min-height: 36px; margin-top: 9px; padding: 8px 12px; }
    .notification-state > span { flex: 1; }
    .notification-state-primary { background: #d957c9; }
    .notification-state-info { background: #398fe8; }
    .notification-state-success { background: #00b894; }
    .notification-state-warning { background: #ff987f; }
    .notification-state-danger { background: #f5689a; }
    .notification-state strong { font-weight: 700; }
    .notification-places-panel { display: grid; justify-items: center; gap: 5px; padding: 16px !important; border: 0; border-radius: 3px; background: #27283b; text-align: center; }
    .notification-places-panel > h2 { margin: 0; color: #e7e6ef; font-family: var(--font-body); font-size: 13px; font-weight: 400; }
    .notification-places-panel > p { margin: 0 0 9px; color: #aaa9bb; font-size: 10px; }
    .notification-place-grid { display: grid; width: min(100%, 760px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; }
    .notification-place-button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 5px; background: linear-gradient(110deg, #b648d7, #d342cf); color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
    .notification-place-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .notification-places-panel > h3 { margin: 10px 0 5px; color: #d9d8e4; font-size: 12px; font-weight: 500; }
    .notification-modal-buttons { display: flex; width: min(100%, 410px); gap: 6px; }
    .notification-modal-buttons > button { min-width: 0; flex: 1; }
    .notification-modal-blue { background: linear-gradient(110deg, #2864e7, #287df4); }
    .notification-modal-dark { background: #303b60; }
    .notification-float-layer { position: fixed; z-index: 80; inset: 0; overflow: hidden; pointer-events: none; }
    .notification-floating-item { position: absolute; display: flex; width: min(360px, calc(100vw - 32px)); min-height: 50px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 8px 24px #10101b33; color: #fff; font-size: 11px; line-height: 1.4; pointer-events: auto; animation: notification-pop-in .18s ease-out; }
    @keyframes notification-pop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
    .notification-floating-item > span:nth-child(2) { flex: 1; }
    .notification-floating-item strong { font-weight: 700; }
    .notification-floating-item > button { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
    .notification-floating-item .notification-float-icon { font-size: 16px; }
    .notification-floating-item.notice-success { border-color: #2a594a; background: #24443c; color: #a1e6c4; }
    .notification-floating-item.notice-warning { border-color: #614c38; background: #4a3c31; color: #f2ca8f; }
    .notification-floating-item.notice-error { border-color: #64394b; background: #4b303e; color: #ff9cb5; }
    .notification-float-top-left { top: 74px; left: 14px; }
    .notification-float-top-center { top: 74px; left: 50%; transform: translateX(-50%); }
    .notification-float-top-right { top: 74px; right: 14px; }
    .notification-float-bottom-left { bottom: 14px; left: 14px; }
    .notification-float-bottom-center { bottom: 14px; left: 50%; transform: translateX(-50%); }
    .notification-float-bottom-right { right: 14px; bottom: 14px; }
    .notification-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: #10101bc9; }
    .notification-modal-backdrop[hidden] { display: none; }
    .notification-modal-dialog { position: relative; width: min(440px, 100%); padding: 25px; border: 1px solid #48495f; border-radius: 7px; background: #292a3e; box-shadow: 0 20px 70px #0008; text-align: center; }
    .notification-modal-backdrop[data-modal-type="small"] .notification-modal-dialog { width: min(330px, 100%); padding: 22px; }
    .notification-modal-close { position: absolute; top: 7px; right: 9px; width: 30px; height: 30px; border: 0; background: transparent; color: #aaa9bb; font-size: 21px; cursor: pointer; }
    .notification-modal-dialog .showcase-eyebrow { margin-bottom: 8px; }
    .notification-modal-dialog h2 { margin: 0 0 10px; color: #f0eff6; font-family: var(--font-heading); font-size: 18px; }
    .notification-modal-dialog > p { margin: 0; color: #b1b0c0; font-size: 12px; line-height: 1.6; }
    .notification-modal-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
    .notification-modal-actions > button { min-height: 35px; font-size: 11px; }
    .icon-library-count { margin-left: 6px; color: #aaa9bb; font-size: 10px; font-weight: 400; }
    .typography-demo .showcase-eyebrow { font-size: 12px; }
    .typography-demo .type-display { font-size: 32px; }
    .typography-demo .type-lead { font-size: 17px !important; }
    .typography-demo .typography-meta { font-size: 12px; }
    .typography-demo .typography-hierarchy h1 { font-size: 32px; }
    .typography-demo .typography-hierarchy h2 { font-size: 24px; }
    .typography-demo .typography-hierarchy h3 { font-size: 19px; }
    .typography-demo .typography-hierarchy h4 { font-size: 16px; }
    .typography-demo .typography-hierarchy small { font-size: 12px; }
    .typography-demo .typography-body p { font-size: 15px; line-height: 1.7; }
    .typography-demo .typography-body > small { font-size: 13px; }
    .typography-demo .typography-quote { font-size: 15px; line-height: 1.6; }
    .typography-demo .typography-quote span { font-size: 12px; }
    .typography-demo .typography-colors p { font-size: 14px; }
    .typography-demo.type-scale-large .type-display { font-size: 38px; }
    .typography-demo.type-scale-large .type-lead { font-size: 19px !important; }
    .typography-demo.type-scale-large .typography-meta,
    .typography-demo.type-scale-large .typography-hierarchy small,
    .typography-demo.type-scale-large .typography-quote span { font-size: 14px; }
    .typography-demo.type-scale-large .typography-hierarchy h1 { font-size: 36px; }
    .typography-demo.type-scale-large .typography-hierarchy h2 { font-size: 28px; }
    .typography-demo.type-scale-large .typography-hierarchy h3 { font-size: 23px; }
    .typography-demo.type-scale-large .typography-hierarchy h4 { font-size: 19px; }
    .typography-demo.type-scale-large .typography-body p,
    .typography-demo.type-scale-large .typography-quote { font-size: 17px; }
    .typography-demo.type-scale-large .typography-body > small { font-size: 15px; }
    .typography-demo.type-scale-large .typography-colors p { font-size: 16px; }
    .form-showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
    .form-demo { display: grid; gap: 12px; }
    .form-demo h2 { margin: 0 0 3px; }
    .form-demo form { display: grid; gap: 14px; }
    .form-demo-field { display: grid; min-width: 0; gap: 7px; color: #c7c6d3; font-size: 13px; }
    .form-demo-field > span i { color: #ff8098; font-style: normal; }
    .form-demo-input, .form-demo-field input, .form-demo-field select, .form-demo-field textarea,
    .form-horizontal .form-demo-field input { width: 100%; min-width: 0; min-height: 40px; padding: 0 11px; border: 1px solid #414258; border-radius: 5px; outline: 0; background: #222336; color: #f0eff7; font: inherit; font-size: 13px; transition: border-color .2s ease, box-shadow .2s ease; }
    .form-demo-field textarea { min-height: 82px; padding-top: 10px; resize: vertical; }
    .form-demo-input:focus, .form-demo-field input:focus, .form-demo-field select:focus, .form-demo-field textarea:focus { border-color: #d65ad3; box-shadow: 0 0 0 3px #d65ad322; }
    .form-demo-input::placeholder, .form-demo-field input::placeholder, .form-demo-field textarea::placeholder { color: #85859b; }
    .form-demo-field input:disabled, .form-demo-input:disabled { background: #20243a; color: #8888a0; cursor: not-allowed; }
    .form-demo-field input[type="color"] { padding: 4px; }
    .form-demo-field input[type="range"] { accent-color: #d84fd0; }
    .form-demo-check, .form-choice-list label, .form-inline-choices label, .extended-choice-column label { display: flex; align-items: center; gap: 8px; color: #c7c6d3; font-size: 12px; }
    .form-demo-check input, .form-choice-list input, .form-inline-choices input, .extended-choice-column input { width: 14px; height: 14px; margin: 0; accent-color: #d84fd0; }
    .form-demo .showcase-primary-button { justify-self: start; min-width: 92px; }
    .form-horizontal { gap: 11px !important; }
    .form-horizontal .form-demo-field { grid-template-columns: 105px minmax(0, 1fr); align-items: center; }
    .form-horizontal .form-demo-field > span { text-align: right; }
    .form-horizontal .form-demo-check, .form-horizontal .form-demo-actions { display: grid; grid-template-columns: 105px minmax(0, 1fr); }
    .form-check-label { display: flex; align-items: center; gap: 8px; color: #c7c6d3; font-size: 12px; }
    .form-horizontal .showcase-primary-button { grid-column: 2; justify-self: start; }
    .form-demo-wide { grid-column: 1 / -1; }
    .form-element-row { display: grid; grid-template-columns: 115px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
    .form-element-row > label, .form-element-label { color: #c7c6d3; font-size: 12px; text-align: right; }
    .form-element-row > div { display: grid; gap: 7px; }
    .form-element-row > div > small { color: #aaa9bb; font-size: 11px; }
    .form-element-row .form-demo-input { grid-column: 2; }
    .form-static-value { grid-column: 2 / -1; margin: 0; color: #f0eff7; font-size: 13px; }
    .form-choice-list, .form-inline-choices { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
    .form-inline-choices { display: flex; flex-wrap: wrap; gap: 22px; }
    .form-element-row fieldset { grid-column: 2 / -1; }
    .extended-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 2px 0 8px; }
    .extended-choice-column { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
    .extended-choice-column legend { margin-bottom: 10px; color: #c7c6d3; font-size: 12px; }
    .extended-choice-column .is-disabled { opacity: .48; }
    .form-input-success { border-color: #368e75; color: #8fe0b9; }
    .form-input-error { border-color: #b2465d; color: #ff8098; }
    .form-state-mark { grid-column: 3; font-size: 15px; }
    .form-state-mark.success { color: #66d6aa; }
    .form-state-mark.error { color: #ff8098; }
    .form-column-examples { display: grid; grid-template-columns: .75fr 1fr 1.25fr; gap: 12px; grid-column: 2 / -1; }
    .form-column-examples .form-demo-input { min-width: 0; }
    .form-control-stack { gap: 12px !important; }
    .form-required-note { color: #aaa9bb; font-size: 11px; }
    .form-register-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .form-register-actions > a { color: #d690e4; font-size: 12px; text-decoration: none; }
    .type-validation-form { gap: 16px !important; }
    .validation-field { display: grid; grid-template-columns: 118px minmax(0, 1fr) minmax(100px, .45fr); align-items: center; gap: 12px; }
    .validation-field > span { color: #c7c6d3; font-size: 12px; text-align: right; }
    .validation-field code { color: #df7fe2; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
    .form-equal-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .validation-submit { display: flex; justify-content: center; margin-top: 4px; }
    .validation-submit .showcase-primary-button { min-width: 150px; }
    .wizard-demo { display: grid; gap: 25px; width: min(100%, 920px); margin: 4px auto 0; }
    .wizard-heading { text-align: center; }
    .wizard-heading h2 { margin: 0 0 7px; color: #f0eff6; font-family: var(--font-heading); font-size: 24px; font-weight: 500; }
    .wizard-heading p { margin: 0; color: #c1c0cf; font-size: 14px; }
    .wizard-progress { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
    .wizard-progress::before { position: absolute; top: 16px; right: 16.6%; left: 16.6%; height: 3px; background: #515165; content: ""; }
    .wizard-progress::after { position: absolute; top: 16px; left: 16.6%; width: var(--wizard-progress-width, 0%); height: 3px; background: #d84fd0; content: ""; transition: width .2s ease; }
    .wizard-progress li { z-index: 1; display: grid; justify-items: center; gap: 6px; color: #aaa9bb; }
    .wizard-progress li > span { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid #55556b; border-radius: 50%; background: #292a3e; color: #d78ce3; font-size: 15px; }
    .wizard-progress li.is-current > span, .wizard-progress li.is-complete > span { border-color: #d84fd0; background: #d84fd0; color: #fff; }
    .wizard-progress li > small { color: #c7c6d3; font-size: 11px; font-weight: 700; }
    .wizard-card { display: grid; min-height: 255px; align-content: space-between; gap: 20px; padding: 30px clamp(18px, 8%, 74px); border: 1px solid #34364e; border-radius: 6px; background: #242b43; }
    .wizard-step > p { margin: 0 0 28px; color: #d2d1dd; font-size: 13px; text-align: center; }
    .wizard-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
    .wizard-fields-single { max-width: 580px; margin: 0 auto; }
    .wizard-fields-half { gap: 12px; }
    .wizard-input { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #363c57; border-radius: 5px; background: #222a40; color: #a8a7bb; }
    .wizard-input:focus-within { border-color: #d65ad3; box-shadow: 0 0 0 3px #d65ad322; }
    .wizard-input > span { font-size: 13px; }
    .wizard-input input { width: 100%; min-width: 0; min-height: 39px; border: 0; outline: 0; background: transparent; color: #f0eff7; font: inherit; font-size: 12px; }
    .wizard-input input::placeholder { color: #85859b; }
    .wizard-input-wide { grid-column: 1 / -1; }
    .wizard-actions { display: flex; justify-content: flex-end; gap: 10px; }
    .wizard-actions [hidden] { display: none; }
    .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
    @media (max-width: 850px) {
        .form-showcase-grid { grid-template-columns: minmax(0, 1fr); }
        .form-demo-wide { grid-column: auto; }
    }
    @media (max-width: 620px) {
        .form-horizontal .form-demo-field { grid-template-columns: minmax(0, 1fr); }
        .form-horizontal .form-demo-field > span { text-align: left; }
        .form-horizontal .form-demo-check, .form-horizontal .form-demo-actions { grid-template-columns: minmax(0, 1fr); }
        .form-horizontal .showcase-primary-button { grid-column: 1; }
        .form-element-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
        .form-element-row > label, .form-element-label { text-align: left; }
        .form-element-row .form-demo-input, .form-element-row fieldset, .form-static-value, .form-column-examples { grid-column: 1; }
        .form-state-mark { display: none; }
        .extended-form-grid { grid-template-columns: minmax(0, 1fr); }
        .validation-field { grid-template-columns: minmax(0, 1fr); gap: 7px; }
        .validation-field > span { text-align: left; }
        .validation-field code { padding-left: 2px; }
        .form-equal-inputs { grid-template-columns: minmax(0, 1fr); }
        .wizard-demo { gap: 19px; }
        .wizard-heading h2 { font-size: 21px; }
        .wizard-progress::before, .wizard-progress::after { top: 15px; }
        .wizard-progress li > span { width: 32px; height: 32px; }
        .wizard-card { min-height: 0; padding: 21px 15px; }
        .wizard-step > p { margin-bottom: 19px; }
        .wizard-fields { grid-template-columns: minmax(0, 1fr); }
        .wizard-input-wide { grid-column: auto; }
    }
    .map-showcase-stack { display: grid; gap: 26px; min-width: 0; }
    .map-section { min-width: 0; }
    .map-section-heading { display: flex; min-height: 31px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .map-section-heading h2 { margin: 0; color: #d7d6e2; font-family: var(--font-body); font-size: 13px; font-weight: 400; }
    .map-type-toggle { display: inline-flex; overflow: hidden; border: 1px solid #424359; border-radius: 4px; background: #222336; }
    .map-type-toggle button { min-height: 30px; padding: 0 12px; border: 0; border-right: 1px solid #424359; background: transparent; color: #c9c8d4; font-size: 11px; cursor: pointer; }
    .map-type-toggle button:last-child { border-right: 0; }
    .map-type-toggle button.is-active { background: #d84fd0; color: #fff; }
    .google-map-frame { position: relative; min-width: 0; height: 360px; overflow: hidden; border: 1px solid #393a50; border-radius: 4px; background: #242538; }
    .google-map-frame iframe, .fullscreen-map-shell > iframe { display: block; width: 100%; height: 100%; border: 0; }
    .map-section:first-child .google-map-frame { height: 420px; }
    .google-map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .google-map-grid .google-map-frame { height: 310px; }
    .google-map-grid .map-section:last-child .google-map-frame iframe { filter: saturate(.78) hue-rotate(9deg) contrast(1.03); }
    .fullscreen-map-page .showcase-content { display: block; width: 100%; max-width: none; height: 100vh; min-height: 0; overflow: hidden; padding: 60px 0 0; }
    .fullscreen-map-shell { position: relative; width: 100%; height: calc(100vh - 60px); min-height: 360px; overflow: hidden; background: #20243a; }
    .fullscreen-map-shell > iframe { position: absolute; inset: 0; }
    .fullscreen-map-toggle { position: absolute; z-index: 2; top: 10px; left: 10px; }
    .map-fullscreen-button { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #44465b; border-radius: 5px; background: #222336eF; color: #f0eff7; font-size: 22px; cursor: pointer; }
    .fullscreen-map-back { position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 8px 12px; border: 1px solid #44465b; border-radius: 5px; background: #222336eF; color: #f0eff7; font-size: 12px; text-decoration: none; }
    .vector-map-panel { position: relative; display: grid; min-height: 480px; place-items: center; overflow: hidden; padding: 32px 20px 18px !important; border: 1px solid #343549; background: #20202f; }
    .world-vector-map { display: block; width: min(100%, 1000px); max-height: 62vh; overflow: visible; }
    .vector-land { fill: #a5a5a7; stroke: #353543; stroke-width: 1.4; cursor: pointer; transition: fill .16s ease, stroke .16s ease; }
    .vector-land:hover, .vector-land:focus { fill: #d5b6e4; outline: none; stroke: #e9c9f5; stroke-width: 2.6; }
    .vector-land.is-selected { fill: #e1b9ec; stroke: #f2d6f6; stroke-width: 2.6; }
    .vector-map-pins circle { fill: #de59d0; stroke: #fff; stroke-width: 2; }
    .vector-map-tools { position: absolute; top: 16px; left: 16px; z-index: 1; display: grid; overflow: hidden; border: 1px solid #3b3c50; border-radius: 4px; }
    .vector-map-tools button { width: 30px; height: 29px; border: 0; border-bottom: 1px solid #3b3c50; background: #28293d; color: #e5e4ed; font-size: 16px; cursor: pointer; }
    .vector-map-tools button:last-child { border-bottom: 0; }
    .vector-map-caption { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px 0; border-top: 1px solid #3a3b50; color: #e6e5ee; font-family: var(--font-heading); font-size: 14px; }
    .vector-map-caption small { color: #aaa9bb; font-family: var(--font-body); font-size: 11px; }
    @media (max-width: 850px) {
        .google-map-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
        .google-map-grid .google-map-frame { height: 330px; }
        .vector-map-panel { min-height: 380px; }
    }
    @media (max-width: 620px) {
        .map-section:first-child .google-map-frame { height: 300px; }
        .google-map-grid .google-map-frame { height: 280px; }
        .map-section-heading { align-items: flex-start; }
        .vector-map-panel { min-height: 300px; padding: 36px 8px 12px !important; }
        .world-vector-map { max-height: 45vh; }
        .vector-map-caption { align-items: flex-start; flex-direction: column; }
        .fullscreen-map-page .dashboard-content.showcase-content { padding-top: 60px; }
        .fullscreen-map-page .topbar { padding-right: 10px; padding-left: 12px; }
        .fullscreen-map-page .topbar-actions .header-cta:not(.cta-pink) { display: none; }
    }
    @media (max-width: 850px) { .notification-demo-grid { grid-template-columns: minmax(0, 1fr); } }
    @media (max-width: 620px) { .notification-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }.notification-modal-buttons { flex-direction: column; }.notification-modal-buttons > button { flex: initial; }.notification-modal-actions { flex-wrap: wrap; }.notification-modal-actions > button { flex: 1; } }

    .widget-showcase-grid, .chart-showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
    .widget-card, .showcase-chart-card { min-width: 0; padding: 19px !important; border: 1px solid #393a50; border-radius: 6px; background: #292a3e; }
    .widget-card-heading, .chart-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .widget-card-heading h2, .chart-card-heading h2 { margin: 3px 0 0; color: #f0eff6; font-family: var(--font-heading); font-size: 17px; }
    .widget-more, .chart-menu { width: 30px; height: 30px; border: 1px solid #424359; border-radius: 5px; background: #303147; color: #d3d1e0; font-size: 18px; line-height: 1; }
    .widget-task-list { display: grid; gap: 0; margin-top: 13px; }
    .widget-task-list label { display: flex; min-width: 0; min-height: 59px; align-items: center; gap: 10px; border-bottom: 1px solid #3b3c51; cursor: pointer; }
    .widget-task-list input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .widget-check { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border: 1px solid #64647b; border-radius: 5px; color: white; }
    .widget-task-list input:checked + .widget-check { border-color: #d45ac3; background: #c64ab7; }
    .widget-task-list input:checked + .widget-check::after { content: "✓"; font-size: 11px; }
    .widget-task-list input:checked ~ span strong { color: #89899d; text-decoration: line-through; }
    .widget-task-list label > span:nth-of-type(2) { display: grid; min-width: 0; flex: 1; gap: 4px; }
    .widget-task-list strong { overflow: hidden; color: #e7e6ef; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .widget-task-list small { color: #9291a6; font-size: 10px; }
    .task-tag { padding: 5px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; white-space: nowrap; }
    .task-tag-pink { background: #56354d; color: #f2a3d0; }.task-tag-blue { background: #2f4258; color: #94c9fa; }.task-tag-green { background: #29483f; color: #8de0bd; }.task-tag-purple { background: #433750; color: #d3a7f3; }
    .widget-add-task { width: 100%; margin-top: 13px; padding: 9px; border: 1px dashed #55556d; border-radius: 5px; background: transparent; color: #ce8de5; font-size: 11px; font-weight: 600; }
    .widget-activity-list { display: grid; gap: 15px; margin-top: 16px; }
    .widget-activity-list > div { display: flex; align-items: flex-start; gap: 10px; }
    .widget-avatar { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; }
    .avatar-lilac { background: linear-gradient(145deg, #9872d9, #574a83); }.avatar-coral { background: linear-gradient(145deg, #ed8f86, #a95376); }.avatar-teal { background: linear-gradient(145deg, #64baa9, #426e83); }
    .widget-activity-list p { display: grid; gap: 4px; margin: 0; color: #b7b6c6; font-size: 11px; line-height: 1.45; }
    .widget-activity-list strong, .widget-activity-list b { color: #e9e8f0; font-weight: 600; }
    .widget-activity-list small { color: #c4c2d0; font-size: 11px; }
    .widget-activity-list time { color: #8e8da2; font-size: 9px; }
    .widget-card-heading select { max-width: 112px; min-height: 31px; padding: 0 7px; border: 1px solid #45465d; border-radius: 4px; background: #242538; color: #c8c7d4; font-size: 10px; }
    .contribution-total { display: flex; align-items: baseline; gap: 8px; margin-top: 19px; }
    .contribution-total strong { color: #f5f3fb; font-family: var(--font-heading); font-size: 32px; }.contribution-total > span { color: #aeadbd; font-size: 11px; }.contribution-total b { margin-left: auto; color: #79d8b2; font-size: 10px; }
    .contribution-bars { margin-top: 18px; }
    .contribution-bars > div { display: flex; height: 97px; align-items: end; justify-content: space-between; gap: 6px; padding: 8px 5px 0; border-bottom: 1px solid #414258; background: repeating-linear-gradient(to bottom, transparent 0 23px, #3b3c50 24px); }
    .contribution-bars i { width: 6%; height: var(--bar); min-height: 8px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #df6ac9, #8659d6); }
    .contribution-bars small { display: flex; justify-content: space-between; padding-top: 7px; color: #85849a; font-size: 9px; }
    .contribution-legend { display: flex; gap: 15px; margin-top: 14px; color: #b0afbf; font-size: 10px; }
    .contribution-legend span { display: inline-flex; align-items: center; gap: 6px; }.contribution-legend i { width: 7px; height: 7px; border-radius: 50%; background: #d45abf; }.contribution-legend span + span i { background: #8272dc; }
    .widget-testimonial { position: relative; display: flex; min-height: 220px; flex-direction: column; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #34304d, #292a3e 75%) !important; }
    .testimonial-quote { position: absolute; top: -21px; right: 13px; color: #ffffff0b; font-family: Georgia, serif; font-size: 190px; line-height: 1; }
    .widget-testimonial blockquote { position: relative; margin: 14px 0 20px; color: #e3e1ed; font-family: var(--font-heading); font-size: 16px; line-height: 1.6; }
    .testimonial-author { display: flex; align-items: center; gap: 9px; }.testimonial-author > span:nth-child(2) { display: grid; gap: 3px; }.testimonial-author strong { color: #f0eff6; font-size: 11px; }.testimonial-author small { color: #a3a2b5; font-size: 9px; }.testimonial-stars { margin-left: auto; color: #f2bd68; font-size: 12px; letter-spacing: 2px; }
    .widget-plan-card { position: relative; display: grid; align-content: start; justify-items: start; min-height: 245px; padding: 20px !important; overflow: hidden; border: 1px solid #493b57; border-radius: 6px; background: linear-gradient(140deg, #413354, #292a3e 75%) !important; }
    .widget-plan-card::after { position: absolute; top: -42px; right: -43px; width: 135px; height: 135px; border: 1px solid #e3a4fa30; border-radius: 50%; box-shadow: 0 0 0 18px #e3a4fa0a, 0 0 0 38px #e3a4fa08; content: ""; }
    .widget-plan-card .plan-symbol { display: grid; width: 34px; height: 34px; margin-bottom: 13px; place-items: center; border-radius: 9px; background: #e28bd42b; color: #f4a5df; font-size: 20px; }
    .plan-team { background: linear-gradient(140deg, #304058, #292a3e 75%) !important; border-color: #3b4e65; }.plan-team .plan-symbol { background: #70b7eb25; color: #9bd4fa; }
    .widget-plan-card h2 { margin: 6px 0 4px; color: #f2f0f8; font-family: var(--font-heading); font-size: 18px; }.widget-plan-card > p { max-width: 290px; margin: 0; color: #b2b0c1; font-size: 11px; line-height: 1.5; }
    .widget-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0; }.widget-plan-price strong { color: #fff; font-family: var(--font-heading); font-size: 28px; }.widget-plan-price span { color: #aaa9ba; font-size: 10px; }
    .widget-plan-card .showcase-primary-button { min-height: 34px; padding: 0 13px; font-size: 10px; }.widget-plan-card > small { margin-top: 9px; color: #9695a9; font-size: 9px; }

    .chart-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-chart-card { min-height: 300px; padding: 18px !important; }
    .showcase-chart { display: block; width: 100%; height: auto; margin-top: 15px; overflow: visible; }
    .chart-gridline { fill: none; stroke: #414258; stroke-width: 1; stroke-dasharray: 3 4; }.chart-axis { fill: none; stroke: #68687b; stroke-width: 1; }
    .chart-labels { fill: #9695a9; font-family: inherit; font-size: 10px; }.chart-labels text { text-anchor: middle; }.chart-y-labels text { text-anchor: start; }
    .chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.chart-line-purple { stroke: #bd72e7; }.chart-line-blue { stroke: #5da8f1; }
    .chart-points circle { fill: #26273a; stroke: #79b9f4; stroke-width: 3; }.bar-pink { fill: #de66b8; }.bar-purple { fill: #9772df; }.bar-blue { fill: #5ba7e8; }
    .chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 4px; color: #b5b4c3; font-size: 10px; }.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }.chart-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
    .legend-pink { background: #de66b8; }.legend-purple { background: #9772df; }.legend-blue { background: #5ba7e8; }.legend-muted { background: #525367; }
    .chart-donut-card { min-height: 262px; }.donut-layout { display: flex; align-items: center; justify-content: space-evenly; gap: 15px; min-height: 185px; }
    .donut-chart { display: grid; width: 145px; height: 145px; flex: 0 0 auto; place-items: center; border-radius: 50%; }
    .donut-simple { background: conic-gradient(#a575df 0 72%, #dc66b9 72% 90%, #4c4d62 90% 100%); }.donut-multiple { background: conic-gradient(#a575df 0 36%, #dc66b9 36% 64%, #5ba7e8 64% 86%, #4c4d62 86% 100%); }
    .donut-chart > div { display: grid; width: 98px; height: 98px; align-content: center; justify-items: center; border-radius: 50%; background: #292a3e; }.donut-chart strong { color: #f5f3fa; font-family: var(--font-heading); font-size: 23px; }.donut-chart span { color: #aaa9bb; font-size: 9px; }
    .chart-legend-stacked { display: grid; justify-content: stretch; gap: 12px; margin: 0; }.chart-legend-stacked span { display: grid; grid-template-columns: 8px minmax(66px, 1fr) auto; align-items: center; gap: 7px; white-space: nowrap; }.chart-legend-stacked b { color: #e6e4ed; font-weight: 600; }

    .calendar-showcase { padding: 0 !important; overflow: hidden; border: 1px solid #3b3c51; border-radius: 6px; background: #292a3e; }
    .calendar-showcase .calendar-toolbar { min-height: 67px; margin: 0; padding: 12px 16px; border-bottom: 1px solid #414258; }
    .calendar-showcase .calendar-toolbar h2 { margin: 0; font-size: 17px; text-align: center; }
    .calendar-nav { display: flex; align-items: center; gap: 4px; }.calendar-nav button { min-width: 35px; height: 32px; padding: 0 9px; border: 1px solid #44455c; border-radius: 4px; background: #303147; color: #d0cfda; font-size: 12px; }.calendar-nav button:first-child, .calendar-nav button:nth-child(2) { font-size: 20px; line-height: 1; }.calendar-nav button:hover, .calendar-view-switch button.is-active { border-color: #805ac0; background: #554174; color: #fff; }
    .calendar-view-switch { display: flex; padding: 3px; border: 1px solid #424359; border-radius: 5px; background: #232437; }.calendar-view-switch button { min-width: 54px; min-height: 27px; border: 0; border-radius: 3px; background: transparent; color: #b9b8c8; font-size: 10px; }
    .calendar-showcase .calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid #414258; background: #252639; }.calendar-showcase .calendar-weekdays span { padding: 10px 8px; border-right: 1px solid #3c3d52; color: #aaa9ba; font-size: 10px; font-weight: 600; text-align: right; text-transform: uppercase; }.calendar-showcase .calendar-weekdays span:last-child { border-right: 0; }
    .calendar-showcase [data-calendar-weekdays][hidden] { display: none; }
    .calendar-showcase .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }.calendar-showcase .calendar-grid.calendar-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }.calendar-showcase .calendar-grid.calendar-day-grid { grid-template-columns: minmax(0, 1fr); }
    .calendar-showcase .calendar-day { display: flex; min-width: 0; min-height: 118px; align-items: flex-start; flex-direction: column; gap: 5px; padding: 8px; border: 0; border-right: 1px solid #3c3d52; border-bottom: 1px solid #3c3d52; border-radius: 0; background: transparent; color: #d8d7e2; text-align: left; }.calendar-showcase .calendar-day:nth-child(7n) { border-right: 0; }.calendar-showcase .calendar-week-grid .calendar-day { min-height: 360px; }.calendar-showcase .calendar-day-grid .calendar-day { min-height: 470px; }.calendar-showcase .calendar-day:hover { background: #303147; }.calendar-showcase .calendar-day.selected-day { box-shadow: inset 0 0 0 1px #8b65c9; background: #322b45; }
    .calendar-showcase .calendar-day.outside-month { color: #66667b; }.calendar-showcase .calendar-day-number { width: auto; height: auto; border-radius: 0; background: transparent; color: inherit; font-size: 11px; font-weight: 600; }.calendar-showcase .calendar-day-number::first-letter { color: #c9c7d5; }
    .calendar-showcase .calendar-event-chip { display: block; width: 100%; min-width: 0; overflow: hidden; padding: 4px 6px; border-radius: 3px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.calendar-showcase .event-pink { background: #75445e; color: #f3b0d1; }.calendar-showcase .event-blue { background: #385775; color: #acd5f7; }.calendar-showcase .event-green { background: #35604f; color: #a1e4c4; }.calendar-showcase .event-orange { background: #705338; color: #f3c38e; }.calendar-showcase .event-violet { background: #574674; color: #d3b4fa; }
    @media (max-width: 900px) { .widget-showcase-grid, .chart-showcase-grid { gap: 10px; }.widget-card, .showcase-chart-card { padding: 14px !important; }.donut-layout { gap: 8px; }.donut-chart { width: 120px; height: 120px; }.donut-chart > div { width: 82px; height: 82px; } }
    @media (max-width: 620px) {
        .widget-showcase-grid, .chart-showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }.widget-card, .showcase-chart-card { padding: 15px !important; }.widget-plan-card { min-height: 220px; }.showcase-chart-card { min-height: 0; }
        .calendar-showcase .calendar-toolbar { align-items: center; flex-wrap: wrap; gap: 9px; padding: 10px; }.calendar-showcase .calendar-toolbar h2 { order: -1; width: 100%; text-align: left; }.calendar-nav button { min-width: 31px; padding: 0 7px; }.calendar-view-switch { margin-left: auto; }.calendar-view-switch button { min-width: 46px; }.calendar-showcase .calendar-weekdays span { padding: 8px 2px; font-size: 8px; text-align: center; }.calendar-showcase .calendar-day { min-height: 77px; gap: 3px; padding: 5px 3px; }.calendar-showcase .calendar-week-grid .calendar-day { min-height: 240px; }.calendar-showcase .calendar-day-grid .calendar-day { min-height: 340px; }.calendar-showcase .calendar-event-chip { padding: 3px 2px; font-size: 7px; }.calendar-showcase .calendar-day-number { font-size: 9px; }
    }

    @media (min-width: 851px) {
        .sidebar { width: 250px; padding-right: 14px; padding-left: 14px; }
        .main-column { margin-left: 264px; }
        .nav-label, .nav-link { font-size: 13px; }
        .sub-nav-link, .example-links .sub-nav-link { min-height: 30px; font-size: 12px; }
        .examples-parent > span:nth-child(2) { font-size: 13px; letter-spacing: 0; }
    }
    @media (max-width: 850px) {
        .sidebar { width: min(260px, calc(100vw - 20px)); padding-right: 13px; padding-left: 13px; }
        .nav-label, .nav-link, .sub-nav-link, .example-links .sub-nav-link, .examples-parent > span:nth-child(2) { font-size: 12px; }
        .nav-link { min-height: 35px; }
        .sub-nav-link, .example-links .sub-nav-link { min-height: 29px; }
    }
    .sub-nav-link, .example-links .sub-nav-link { white-space: nowrap; }
    .example-links .sub-nav-link > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }