/* Lumina Design System — built bundle. Set data-theme on any element. */
*,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%}body{-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility}img,picture,svg,canvas{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}button{cursor: pointer;background: none;border: none}a{color: inherit;text-decoration: none}ul,ol{list-style: none;padding: 0}:where(h1,h2,h3,h4,h5,h6){font-weight: inherit}:root,[data-theme="foundation"]{color-scheme: light;--bg: #f6f7f9;--bg-2: #ffffff;--bg-3: #eef0f3;--bg-inset: #f9fafb;--text: #11181c;--text-2: #5b6770;--text-3: #8c97a0;--border: #e3e7eb;--border-2: #cfd6dc;--bw: 1px;--primary: #2563eb;--primary-2: #1d4ed8;--on-primary: #ffffff;--accent: #7c3aed;--on-accent: #ffffff;--success: #16a34a;--warning: #d97706;--danger: #dc2626;--info: #0891b2;--ring: color-mix(in srgb,var(--primary) 45%,transparent);--font-body: "Inter",system-ui,-apple-system,sans-serif;--font-head: "Inter",system-ui,-apple-system,sans-serif;--font-mono: "JetBrains Mono",ui-monospace,"SF Mono",monospace;--fw-normal: 400;--fw-medium: 500;--fw-bold: 650;--fw-head: 700;--tracking-head: -0.02em;--tracking-body: 0em;--leading: 1.6;--fs-base: 15px;--case-head: none;--radius: 10px;--radius-sm: 7px;--radius-lg: 16px;--radius-pill: 999px;--shadow-color: 220 25% 20%;--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .08);--shadow: 0 4px 12px -2px hsl(var(--shadow-color) / .12);--shadow-lg: 0 18px 40px -12px hsl(var(--shadow-color) / .22);--transition: 180ms cubic-bezier(.2,.7,.3,1);--density: 1;--btn-radius: var(--radius);--btn-weight: var(--fw-bold);--btn-shadow: var(--shadow-sm);--btn-border: transparent;--btn-transform: none;--card-bg: var(--bg-2);--card-radius: var(--radius-lg);--card-shadow: var(--shadow);--card-border: var(--bw) solid var(--border);--input-bg: var(--bg-2);--input-radius: var(--radius-sm);--input-border: var(--bw) solid var(--border-2);--nav-bg: color-mix(in srgb,var(--bg-2) 80%,transparent);--sidenav-bg: var(--bg-2);--topbar-bg: color-mix(in srgb,var(--bg-2) 85%,transparent);--menu-bg: var(--bg-2);--glow: none;--backdrop: none;--surface-grad: none}:root{--s-1: calc(4px * var(--density));--s-2: calc(8px * var(--density));--s-3: calc(12px * var(--density));--s-4: calc(16px * var(--density));--s-5: calc(24px * var(--density));--s-6: calc(32px * var(--density));--s-7: calc(48px * var(--density));--s-8: calc(64px * var(--density))}.demo,[data-theme]{background: var(--bg);color: var(--text);font-family: var(--font-body);font-size: var(--fs-base);font-weight: var(--fw-normal);line-height: var(--leading);letter-spacing: var(--tracking-body);transition: background var(--transition),color var(--transition)}.demo{min-height: 100vh}.wrap{max-width: 1180px;margin: 0 auto;padding: var(--s-6) var(--s-5) var(--s-8)}h1,h2,h3,h4,h5,h6{font-family: var(--font-head);font-weight: var(--fw-head);letter-spacing: var(--tracking-head);line-height: 1.15;color: var(--text);text-transform: var(--case-head)}[data-theme] h1{font-size: clamp(2rem,4vw,3rem)}[data-theme] h2{font-size: 1.7rem}[data-theme] h3{font-size: 1.25rem}[data-theme] p{color: var(--text-2);max-width: 64ch}[data-theme] a.link{color: var(--primary);font-weight: var(--fw-medium);border-bottom: 1px solid color-mix(in srgb,var(--primary) 35%,transparent)}[data-theme] a.link:hover{color: var(--primary-2)}[data-theme] code,[data-theme] .mono{font-family: var(--font-mono);font-size: .85em}[data-theme] .inline-code{background: var(--bg-3);border: var(--bw) solid var(--border);padding: .1em .4em;border-radius: var(--radius-sm)}[data-theme] blockquote{border-left: 3px solid var(--accent);padding: var(--s-2) var(--s-4);color: var(--text-2);font-style: italic;background: color-mix(in srgb,var(--accent) 5%,transparent);border-radius: 0 var(--radius-sm) var(--radius-sm) 0}.eyebrow{font-size: .72rem;font-weight: var(--fw-bold);letter-spacing: .14em;text-transform: uppercase;color: var(--text-3);font-family: var(--font-head)}.muted{color: var(--text-2)}.subtle{color: var(--text-3)}.appbar{position: sticky;top: 0;z-index: 5;display: flex;align-items: center;gap: var(--s-5);padding: var(--s-3) var(--s-5);background: var(--nav-bg);-webkit-backdrop-filter: var(--backdrop);backdrop-filter: var(--backdrop);border-bottom: var(--bw) solid var(--border)}.brand{display: flex;align-items: center;gap: var(--s-2);font-family: var(--font-head);font-weight: var(--fw-head);letter-spacing: var(--tracking-head);font-size: 1.15rem}.brand .logo{width: 30px;height: 30px;border-radius: var(--radius-sm);background: linear-gradient(135deg,var(--primary),var(--accent));box-shadow: var(--glow);display: grid;place-items: center;color: var(--on-primary);font-weight: 800}.appnav{display: flex;gap: var(--s-1);margin-left: var(--s-3)}.appnav a{padding: var(--s-1) var(--s-3);border-radius: var(--radius-sm);color: var(--text-2);font-weight: var(--fw-medium);font-size: .92rem}.appnav a:hover{background: var(--bg-3);color: var(--text)}.appnav a.active{color: var(--text);background: color-mix(in srgb,var(--primary) 12%,transparent)}.appbar .spacer{flex: 1}.btn{display: inline-flex;align-items: center;justify-content: center;gap: var(--s-2);padding: calc(var(--s-2) + 1px) var(--s-4);font-family: var(--font-head);font-weight: var(--btn-weight);font-size: .92rem;border-radius: var(--btn-radius);border: var(--bw) solid var(--btn-border);background: var(--bg-2);color: var(--text);box-shadow: var(--btn-shadow);transition: transform var(--transition),background var(--transition),box-shadow var(--transition),color var(--transition),border-color var(--transition)}.btn:hover{transform: var(--btn-transform)}.btn:active{transform: translateY(1px)}.btn:focus-visible{outline: none;box-shadow: 0 0 0 4px var(--ring)}.btn.primary{background: var(--primary);color: var(--on-primary);border-color: var(--primary)}.btn.primary:hover{background: var(--primary-2);border-color: var(--primary-2)}.btn.accent{background: var(--accent);color: var(--on-accent);border-color: var(--accent)}.btn.secondary{background: var(--bg-3);color: var(--text);border-color: var(--border)}.btn.ghost{background: transparent;color: var(--text);border-color: var(--border);box-shadow: none}.btn.ghost:hover{background: var(--bg-3)}.btn.danger{background: var(--danger);color: #fff;border-color: var(--danger)}.btn.sm{padding: var(--s-1) var(--s-3);font-size: .82rem}.btn.lg{padding: var(--s-3) var(--s-6);font-size: 1rem}.card{background: var(--card-bg);background-image: var(--surface-grad);border: var(--card-border);border-radius: var(--card-radius);box-shadow: var(--card-shadow);padding: var(--s-5);transition: transform var(--transition),box-shadow var(--transition)}.card.hoverable:hover{transform: translateY(-3px);box-shadow: var(--shadow-lg)}.card-head{display: flex;align-items: center;justify-content: space-between;margin-bottom: var(--s-4)}.card-title{font-family: var(--font-head);font-weight: var(--fw-head);font-size: 1.05rem;letter-spacing: var(--tracking-head)}.stat .label{font-size: .8rem;color: var(--text-3);font-weight: var(--fw-medium)}.stat .value{font-family: var(--font-head);font-size: 2.1rem;font-weight: var(--fw-head);letter-spacing: var(--tracking-head);margin: var(--s-1) 0}.badge{display: inline-flex;align-items: center;gap: 6px;padding: 2px 10px;border-radius: var(--radius-pill);font-size: .74rem;font-weight: var(--fw-bold);font-family: var(--font-head);letter-spacing: .02em;background: var(--bg-3);color: var(--text-2);border: var(--bw) solid var(--border)}.badge.up{color: var(--success);background: color-mix(in srgb,var(--success) 12%,transparent);border-color: color-mix(in srgb,var(--success) 30%,transparent)}.badge.down{color: var(--danger);background: color-mix(in srgb,var(--danger) 12%,transparent);border-color: color-mix(in srgb,var(--danger) 30%,transparent)}.badge.brand{color: var(--primary);background: color-mix(in srgb,var(--primary) 12%,transparent);border-color: color-mix(in srgb,var(--primary) 30%,transparent)}.dot{width: 7px;height: 7px;border-radius: 50%;background: currentColor}.alert{display: flex;gap: var(--s-3);align-items: flex-start;padding: var(--s-3) var(--s-4);border-radius: var(--radius);border: var(--bw) solid var(--border);background: var(--bg-2)}.alert .ico{width: 22px;height: 22px;border-radius: 50%;display: grid;place-items: center;color: #fff;font-weight: 700;font-size: .8rem;flex: none}.alert.success{border-color: color-mix(in srgb,var(--success) 40%,transparent);background: color-mix(in srgb,var(--success) 8%,var(--bg-2))}.alert.success .ico{background: var(--success)}.alert.warning{border-color: color-mix(in srgb,var(--warning) 40%,transparent);background: color-mix(in srgb,var(--warning) 8%,var(--bg-2))}.alert.warning .ico{background: var(--warning)}.alert.danger{border-color: color-mix(in srgb,var(--danger) 40%,transparent);background: color-mix(in srgb,var(--danger) 8%,var(--bg-2))}.alert.danger .ico{background: var(--danger)}.alert.info{border-color: color-mix(in srgb,var(--info) 40%,transparent);background: color-mix(in srgb,var(--info) 8%,var(--bg-2))}.alert.info .ico{background: var(--info)}.alert b{color: var(--text)}.field{display: flex;flex-direction: column;gap: var(--s-1)}.field > label{font-size: .82rem;font-weight: var(--fw-bold);color: var(--text-2);font-family: var(--font-head)}.input,.select,.textarea{width: 100%;padding: calc(var(--s-2) + 1px) var(--s-3);background: var(--input-bg);border: var(--input-border);border-radius: var(--input-radius);color: var(--text);transition: border-color var(--transition),box-shadow var(--transition)}.input::placeholder,.textarea::placeholder{color: var(--text-3)}.input:focus,.select:focus,.textarea:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 4px var(--ring)}.textarea{resize: vertical;min-height: 92px}.search{position: relative}.search .input{padding-left: 34px}.search::before{content: "⌕";position: absolute;left: 11px;top: 50%;transform: translateY(-50%);color: var(--text-3);font-size: 1.1rem}.lumina-switcher{padding: calc(var(--s-2) + 1px) var(--s-3);background: var(--input-bg);color: var(--text);border: var(--input-border);border-radius: var(--input-radius);font-family: var(--font-head);font-weight: var(--fw-medium)}.lumina-switcher:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 4px var(--ring)}.check{display: flex;align-items: center;gap: var(--s-2);color: var(--text-2);cursor: pointer}.check input{width: 18px;height: 18px;accent-color: var(--primary)}.switch{position: relative;width: 46px;height: 26px;flex: none}.switch input{opacity: 0;width: 0;height: 0}.switch .track{position: absolute;inset: 0;background: var(--bg-3);border: var(--bw) solid var(--border-2);border-radius: var(--radius-pill);transition: var(--transition)}.switch .track::before{content: "";position: absolute;top: 50%;left: 3px;transform: translateY(-50%);width: 18px;height: 18px;border-radius: 50%;background: var(--bg-2);box-shadow: var(--shadow-sm);transition: var(--transition)}.switch input:checked + .track{background: var(--primary);border-color: var(--primary)}.switch input:checked + .track::before{left: calc(100% - 21px);background: var(--on-primary)}.tabs{display: flex;gap: var(--s-1);border-bottom: var(--bw) solid var(--border)}.tab{padding: var(--s-2) var(--s-3);color: var(--text-2);font-weight: var(--fw-medium);border-bottom: 2px solid transparent;margin-bottom: -1px}.tab.active{color: var(--text);border-bottom-color: var(--primary)}.tab:hover{color: var(--text)}.table{width: 100%;border-collapse: collapse;font-size: .9rem}.table th{text-align: left;font-family: var(--font-head);font-weight: var(--fw-bold);color: var(--text-3);font-size: .74rem;text-transform: uppercase;letter-spacing: .06em;padding: var(--s-2) var(--s-3);border-bottom: var(--bw) solid var(--border)}.table td{padding: var(--s-3);border-bottom: var(--bw) solid var(--border);color: var(--text-2)}.table tr:last-child td{border-bottom: none}.table td b{color: var(--text);font-weight: var(--fw-bold)}.progress{height: 9px;background: var(--bg-3);border-radius: var(--radius-pill);overflow: hidden;border: var(--bw) solid var(--border)}.progress > span{display: block;height: 100%;background: linear-gradient(90deg,var(--primary),var(--accent));box-shadow: var(--glow);border-radius: inherit}.avatar{width: 38px;height: 38px;border-radius: var(--radius-pill);display: grid;place-items: center;font-weight: var(--fw-bold);font-family: var(--font-head);color: #fff;background: linear-gradient(135deg,var(--primary),var(--accent));box-shadow: var(--shadow-sm)}.avatars{display: flex}.avatars .avatar{margin-left: -10px;border: 2px solid var(--bg-2)}.avatars .avatar:first-child{margin-left: 0}.chart{display: flex;align-items: flex-end;gap: var(--s-2);height: 160px;padding-top: var(--s-3)}.chart .bar{flex: 1;border-radius: var(--radius-sm) var(--radius-sm) 0 0;background: linear-gradient(180deg,var(--primary),color-mix(in srgb,var(--accent) 60%,var(--primary)));box-shadow: var(--glow);transition: height var(--transition);min-height: 4px}.chart .bar.muted{background: var(--bg-3)}.grid{display: grid;gap: var(--s-4)}.cols-4{grid-template-columns: repeat(4,1fr)}.cols-3{grid-template-columns: repeat(3,1fr)}.cols-2{grid-template-columns: repeat(2,1fr)}.span-2{grid-column: span 2}.row{display: flex;gap: var(--s-3);align-items: center;flex-wrap: wrap}.between{justify-content: space-between}.stack{display: flex;flex-direction: column;gap: var(--s-4)}.section{margin-top: var(--s-7)}.section > .section-head{margin-bottom: var(--s-4)}.divider{height: var(--bw);background: var(--border);border: none;margin: var(--s-5) 0}.appshell{display: grid;grid-template-columns: var(--sidenav-w,250px) 1fr;align-items: start}.appmain{min-width: 0}.sidenav{position: sticky;top: var(--ctrl-h,0px);height: calc(100vh - var(--ctrl-h,0px));overflow: auto;background: var(--sidenav-bg);border-right: var(--bw) solid var(--border);padding: var(--s-4) var(--s-3);display: flex;flex-direction: column;gap: var(--s-4)}.sidenav .brand{padding: var(--s-1) var(--s-2) var(--s-2)}.nav-group{display: flex;flex-direction: column;gap: 2px}.nav-label{font-size: .68rem;text-transform: uppercase;letter-spacing: .11em;color: var(--text-3);font-weight: var(--fw-bold);font-family: var(--font-head);padding: var(--s-3) var(--s-2) var(--s-1)}.nav-link{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-2) var(--s-2);border-radius: var(--radius-sm);color: var(--text-2);font-weight: var(--fw-medium);font-size: .9rem;transition: background var(--transition),color var(--transition)}.nav-link svg{width: 18px;height: 18px;flex: none;opacity: .8}.nav-link .count{margin-left: auto;font-size: .7rem;font-weight: var(--fw-bold);background: var(--bg-3);color: var(--text-2);padding: 1px 8px;border-radius: var(--radius-pill);border: var(--bw) solid var(--border)}.nav-link:hover{background: var(--bg-3);color: var(--text)}.nav-link.active{background: color-mix(in srgb,var(--primary) 14%,transparent);color: var(--primary);font-weight: var(--fw-bold)}.nav-link.active svg{opacity: 1}.sidenav .grow{flex: 1}.upsell{background: linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,var(--bg-2)),color-mix(in srgb,var(--accent) 14%,var(--bg-2)));border: var(--bw) solid var(--border);border-radius: var(--radius);padding: var(--s-3);display: flex;flex-direction: column;gap: var(--s-2)}.upsell b{font-family: var(--font-head)}.profile{display: flex;align-items: center;gap: var(--s-2);padding: var(--s-2);border-radius: var(--radius);border: var(--bw) solid var(--border);background: var(--bg-2)}.profile .meta{line-height: 1.25;min-width: 0}.profile .meta b{font-size: .85rem;display: block}.profile .meta span{font-size: .72rem;color: var(--text-3);display: block;overflow: hidden;text-overflow: ellipsis}.topbar{position: sticky;top: var(--ctrl-h,0px);z-index: 4;display: flex;align-items: center;gap: var(--s-4);padding: var(--s-3) var(--s-5);background: var(--topbar-bg);-webkit-backdrop-filter: var(--backdrop);backdrop-filter: var(--backdrop);border-bottom: var(--bw) solid var(--border)}.page-title{font-family: var(--font-head);font-weight: var(--fw-head);font-size: 1.1rem;letter-spacing: var(--tracking-head)}.breadcrumb{display: flex;align-items: center;gap: var(--s-2);color: var(--text-3);font-size: .85rem}.breadcrumb a{color: var(--text-2)}.breadcrumb a:hover{color: var(--text)}.breadcrumb .sep{opacity: .45}.icon-btn{position: relative;width: 38px;height: 38px;display: grid;place-items: center;border-radius: var(--radius-sm);color: var(--text-2);border: var(--bw) solid transparent;transition: background var(--transition),color var(--transition)}.icon-btn:hover{background: var(--bg-3);color: var(--text)}.icon-btn svg{width: 19px;height: 19px}.icon-btn .pip{position: absolute;top: 7px;right: 8px;width: 7px;height: 7px;border-radius: 50%;background: var(--danger);border: 2px solid var(--topbar-bg)}.menu{background: var(--menu-bg);-webkit-backdrop-filter: var(--backdrop);backdrop-filter: var(--backdrop);border: var(--bw) solid var(--border);border-radius: var(--radius);box-shadow: var(--shadow-lg);padding: var(--s-1);min-width: 230px}.menu-label{font-size: .68rem;text-transform: uppercase;letter-spacing: .08em;color: var(--text-3);font-weight: var(--fw-bold);padding: var(--s-2) var(--s-2) var(--s-1);font-family: var(--font-head)}.menu-item{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-2) var(--s-2);border-radius: var(--radius-sm);color: var(--text-2);font-size: .9rem;font-weight: var(--fw-medium);cursor: pointer;transition: background var(--transition),color var(--transition)}.menu-item svg{width: 17px;height: 17px;opacity: .8;flex: none}.menu-item:hover{background: var(--bg-3);color: var(--text)}.menu-item.active{background: color-mix(in srgb,var(--primary) 14%,transparent);color: var(--primary)}.menu-item .kbd{margin-left: auto;font-size: .72rem;color: var(--text-3);font-family: var(--font-mono)}.menu-item.danger{color: var(--danger)}.menu-item.danger:hover{background: color-mix(in srgb,var(--danger) 12%,transparent)}.menu-sep{height: var(--bw);background: var(--border);margin: var(--s-1) calc(-1 * var(--s-1))}.menubar{display: flex;align-items: center;gap: 2px;padding: var(--s-1);background: var(--bg-2);border: var(--bw) solid var(--border);border-radius: var(--radius)}.menubar > button{padding: var(--s-1) var(--s-3);border-radius: var(--radius-sm);color: var(--text-2);font-size: .88rem;font-weight: var(--fw-medium)}.menubar > button:hover,.menubar > button.open{background: var(--bg-3);color: var(--text)}.segment{display: inline-flex;background: var(--bg-3);border: var(--bw) solid var(--border);border-radius: var(--radius);padding: 3px;gap: 2px}.segment button{padding: var(--s-1) var(--s-4);border-radius: calc(var(--radius) - 3px);font-size: .86rem;font-weight: var(--fw-medium);color: var(--text-2);font-family: var(--font-head);transition: all var(--transition)}.segment button.on{background: var(--bg-2);color: var(--text);box-shadow: var(--shadow-sm);font-weight: var(--fw-bold)}.card.outlined{box-shadow: none;background: transparent;background-image: none;border: var(--bw) solid var(--border-2)}.card.filled{background: var(--bg-3);background-image: none;box-shadow: none;border: var(--bw) solid transparent}.card.flush{box-shadow: none}.card.callout{border-left: 4px solid var(--accent);background: color-mix(in srgb,var(--accent) 7%,var(--card-bg))}.card.brand-callout{border-left: 4px solid var(--primary);background: color-mix(in srgb,var(--primary) 7%,var(--card-bg))}.card.pad-0{padding: 0;overflow: hidden}.card-foot{margin-top: var(--s-4);padding-top: var(--s-3);border-top: var(--bw) solid var(--border);display: flex;gap: var(--s-2);justify-content: flex-end;align-items: center}.card-body{padding: var(--s-5)}.card-strip{padding: var(--s-3) var(--s-5);border-bottom: var(--bw) solid var(--border)}.well{background: var(--bg-inset);border: var(--bw) solid var(--border);border-radius: var(--radius);padding: var(--s-4)}.tile{background: var(--card-bg);border: var(--card-border);border-radius: var(--radius);padding: var(--s-4);display: flex;align-items: center;gap: var(--s-3)}.tile .tile-ico{width: 40px;height: 40px;border-radius: var(--radius-sm);display: grid;place-items: center;background: color-mix(in srgb,var(--primary) 14%,transparent);color: var(--primary);flex: none}.tile .tile-ico svg{width: 20px;height: 20px}.table tbody tr{transition: background var(--transition)}.table.hover tbody tr:hover td{background: color-mix(in srgb,var(--text) 4%,transparent)}.table tr.sel td{background: color-mix(in srgb,var(--primary) 9%,transparent)}.table.striped tbody tr:nth-child(odd) td{background: color-mix(in srgb,var(--text) 3%,transparent)}.table.bordered,.table.bordered th,.table.bordered td{border: var(--bw) solid var(--border)}.table.bordered{border-collapse: collapse}.table.compact th,.table.compact td{padding: var(--s-1) var(--s-2)}.table .u{display: flex;align-items: center;gap: var(--s-2)}.table .u .avatar{width: 30px;height: 30px;font-size: .75rem}.table .u .meta b{color: var(--text);display: block;font-size: .88rem}.table .u .meta span{color: var(--text-3);font-size: .76rem}.status{display: inline-flex;align-items: center;gap: 6px;font-size: .8rem;font-weight: var(--fw-bold)}.status::before{content: "";width: 7px;height: 7px;border-radius: 50%;background: currentColor}.status.ok{color: var(--success)}.status.pending{color: var(--warning)}.status.off{color: var(--text-3)}.status.bad{color: var(--danger)}.hbar{display: flex;align-items: center;gap: var(--s-3);padding: var(--s-3) var(--s-4);border: var(--bw) solid var(--border);border-radius: var(--radius);background: var(--bg-2)}.hbar.accent-top{border-top: 3px solid var(--primary)}@media (max-width: 1024px){.appshell{grid-template-columns: 1fr}.sidenav{display: none}}@media (max-width: 900px){.cols-4{grid-template-columns: repeat(2,1fr)}.cols-3,.cols-2{grid-template-columns: 1fr}.span-2{grid-column: span 1}.appnav{display: none}}