canny-ui 1.0.0

package/dist/canny-ui.min.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Geist+Mono:wght@300..700&family=Geist:wght@300..700&display=swap";:root{--bg-base: #fafafa;--bg-surface-low: #f4f4f5;--bg-surface-lowest: #ffffff;--bg-surface-edge: #e4e4e7;--text-primary: #09090b;--text-secondary: #3f3f46;--text-muted: #71717a;--text-disabled: #a1a1aa;--text-on-solid: #ffffff;--text-accent: #4f46e5;--color-primary: #4f46e5;--color-primary-hover: #4338ca;--color-primary-active:#3730a3;--color-primary-soft: #eef2ff;--color-primary-on: #ffffff;--color-neutral: #18181b;--color-neutral-hover: #27272a;--color-neutral-soft: #f4f4f5;--color-neutral-on: #ffffff;--color-danger: #dc2626;--color-danger-hover: #b91c1c;--color-danger-soft: #fef2f2;--color-danger-on: #ffffff;--color-warning: #d97706;--color-warning-hover: #b45309;--color-warning-soft: #fffbeb;--color-warning-on: #ffffff;--color-success: #059669;--color-success-hover: #047857;--color-success-soft: #ecfdf5;--color-success-on: #ffffff;--color-info: #0284c7;--color-info-hover: #0369a1;--color-info-soft: #f0f9ff;--color-info-on: #ffffff;--border-color: #e4e4e7;--border-color-strong: #d4d4d8;--border-focus: #6366f1;--ring-color: rgba(79, 70, 229, 0.28);--ring-width: 3px;--shadow-xs: 0 1px 2px 0 rgba(9, 9, 11, 0.05);--shadow-sm: 0 1px 2px 0 rgba(9, 9, 11, 0.06), 0 1px 3px 0 rgba(9, 9, 11, 0.04);--shadow-md: 0 4px 6px -1px rgba(9, 9, 11, 0.07), 0 2px 4px -2px rgba(9, 9, 11, 0.05);--shadow-lg: 0 10px 15px -3px rgba(9, 9, 11, 0.08), 0 4px 6px -4px rgba(9, 9, 11, 0.05);--shadow-card: var(--shadow-sm);--shadow-lift: var(--shadow-lg);--shadow-ambient: 0 0 0 3px var(--ring-color);--ease-standard: cubic-bezier(0.2, 0, 0, 1);--transition-fast: 120ms var(--ease-standard);--transition-base: 180ms var(--ease-standard);--transition-slow: 260ms var(--ease-standard);--radius-xs: 3px;--radius-sm: 5px;--radius-md: 7px;--radius-lg: 10px;--radius-xl: 14px;--radius-full: 9999px;--font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--font-display: 'Fraunces', Georgia, serif;--hairline-color: #e4e4e7;--hairline-strong: #d4d4d8;--text-xs: 0.75rem;--text-sm: 0.875rem;--text-base: 0.9375rem;--text-lg: 1.0625rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--track-tight: -0.015em;--track-normal: 0;--track-wide: 0.04em;--track-wider: 0.08em}@media(prefers-color-scheme: dark){:root{--bg-base: #09090b;--bg-surface-low: #18181b;--bg-surface-lowest: #27272a;--bg-surface-edge: #3f3f46;--text-primary: #fafafa;--text-secondary: #d4d4d8;--text-muted: #a1a1aa;--text-disabled: #52525b;--text-accent: #818cf8;--color-primary: #6366f1;--color-primary-hover: #818cf8;--color-primary-active:#4f46e5;--color-primary-soft: rgba(99, 102, 241, 0.15);--color-neutral: #fafafa;--color-neutral-hover: #ffffff;--color-neutral-soft: #27272a;--color-neutral-on: #09090b;--color-danger-soft: rgba(220, 38, 38, 0.16);--color-warning-soft: rgba(217, 119, 6, 0.16);--color-success-soft: rgba(5, 150, 105, 0.16);--color-info-soft: rgba(2, 132, 199, 0.16);--border-color: #27272a;--border-color-strong: #3f3f46;--border-focus: #818cf8;--ring-color: rgba(99, 102, 241, 0.45);--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 0 rgba(0, 0, 0, 0.3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);--shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);--hairline-color: #27272a;--hairline-strong: #3f3f46}}.cny-dark{--bg-base: #09090b;--bg-surface-low: #18181b;--bg-surface-lowest: #27272a;--bg-surface-edge: #3f3f46;--text-primary: #fafafa;--text-secondary: #d4d4d8;--text-muted: #a1a1aa;--text-disabled: #52525b;--text-accent: #818cf8;--color-primary: #6366f1;--color-primary-hover: #818cf8;--color-primary-active:#4f46e5;--color-primary-soft: rgba(99, 102, 241, 0.15);--color-neutral: #fafafa;--color-neutral-hover: #ffffff;--color-neutral-soft: #27272a;--color-neutral-on: #09090b;--color-danger-soft: rgba(220, 38, 38, 0.16);--color-warning-soft: rgba(217, 119, 6, 0.16);--color-success-soft: rgba(5, 150, 105, 0.16);--color-info-soft: rgba(2, 132, 199, 0.16);--border-color: #27272a;--border-color-strong: #3f3f46;--border-focus: #818cf8;--ring-color: rgba(99, 102, 241, 0.45);--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 0 rgba(0, 0, 0, 0.3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);--shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);--hairline-color: #27272a;--hairline-strong: #3f3f46}*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg-base);color:var(--text-primary)}.cny-app{font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;color:var(--text-primary);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.cny-app h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;letter-spacing:var(--track-tight);line-height:1.15;margin:0 0 20px;color:var(--text-primary)}.cny-app h2{font-family:var(--font-body);font-size:var(--text-2xl);font-weight:600;letter-spacing:var(--track-tight);line-height:1.2;margin:0 0 16px}.cny-app h3{font-family:var(--font-body);font-size:var(--text-xl);font-weight:600;letter-spacing:-0.005em;line-height:1.3;margin:0 0 12px}.cny-app h4{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600;line-height:1.35;margin:0 0 8px}.cny-app p{margin:0 0 16px;max-width:72ch;color:var(--text-secondary)}.cny-app a:not([class]){color:var(--text-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:color var(--transition-fast)}.cny-app a:not([class]):hover{color:var(--color-primary-hover)}.cny-app small,.cny-app .cny-meta{font-size:var(--text-xs);color:var(--text-muted)}.cny-app code,.cny-app kbd,.cny-app pre,.cny-app samp{font-family:var(--font-mono);font-size:.92em}.cny-app .cny-tabular{font-variant-numeric:tabular-nums slashed-zero}.cny-display{font-family:var(--font-display);font-weight:400;font-variation-settings:"opsz" 144;letter-spacing:var(--track-tight)}.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;min-height:36px;border:0;border-radius:var(--radius-sm);background:rgba(0,0,0,0);color:var(--text-primary);text-decoration:none;font-family:var(--font-body);font-size:.875rem;font-weight:500;letter-spacing:-0.005em;line-height:1;cursor:pointer;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow 180ms var(--ease-standard),color var(--transition-fast)}.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn:focus-visible{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.btn .btn-content{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:inherit}.btn .btn-ripple{position:absolute;z-index:0;border-radius:50%;pointer-events:none;transform-origin:center;background:rgba(0,0,0,.18)}.btn.solid .btn-ripple,.btn.secondary .btn-ripple{background:hsla(0,0%,100%,.55)}@media(prefers-reduced-motion: reduce){.btn .btn-ripple{display:none}}.btn.solid{background:var(--color-primary);color:var(--color-primary-on);box-shadow:var(--shadow-xs)}.btn.solid:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-sm)}.btn.solid:active:not(:disabled){background:var(--color-primary-active);box-shadow:var(--shadow-xs),inset 0 1px 0 0 rgba(0,0,0,.08)}.btn.solid.danger{background:var(--color-danger);color:var(--color-danger-on)}.btn.solid.danger:hover:not(:disabled){background:var(--color-danger-hover)}.btn.solid.warning{background:var(--color-warning);color:var(--color-warning-on)}.btn.solid.warning:hover:not(:disabled){background:var(--color-warning-hover)}.btn.solid.success{background:var(--color-success);color:var(--color-success-on)}.btn.solid.success:hover:not(:disabled){background:var(--color-success-hover)}.btn.solid.info{background:var(--color-info);color:var(--color-info-on)}.btn.solid.info:hover:not(:disabled){background:var(--color-info-hover)}.btn.secondary{background:var(--color-neutral);color:var(--color-neutral-on);box-shadow:var(--shadow-xs)}.btn.secondary:hover:not(:disabled){background:var(--color-neutral-hover);box-shadow:var(--shadow-sm)}.btn.secondary:active:not(:disabled){box-shadow:var(--shadow-xs),inset 0 1px 0 0 rgba(0,0,0,.12)}.btn.outline{background:var(--bg-surface-lowest);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-color),var(--shadow-xs)}.btn.outline:hover:not(:disabled){background:var(--bg-surface-low);box-shadow:inset 0 0 0 1px var(--border-color-strong),var(--shadow-sm)}.btn.outline:active:not(:disabled){box-shadow:inset 0 0 0 1px var(--border-color-strong),inset 0 1px 0 0 rgba(0,0,0,.04)}.btn.outline.danger{color:var(--color-danger)}.btn.outline.warning{color:var(--color-warning)}.btn.outline.success{color:var(--color-success)}.btn.outline.info{color:var(--color-info)}.btn.dashed{background:var(--bg-surface-lowest);color:var(--text-primary);border:1px dashed var(--border-color);transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow 180ms var(--ease-standard)}.btn.dashed:hover:not(:disabled){background:var(--bg-surface-low);border-color:var(--color-primary);color:var(--color-primary)}.btn.dashed:active:not(:disabled){background:var(--bg-surface-edge);border-color:var(--color-primary-active)}.btn.dashed.danger:hover:not(:disabled){border-color:var(--color-danger);color:var(--color-danger)}.btn.dashed.warning:hover:not(:disabled){border-color:var(--color-warning);color:var(--color-warning)}.btn.dashed.success:hover:not(:disabled){border-color:var(--color-success);color:var(--color-success)}.btn.dashed.info:hover:not(:disabled){border-color:var(--color-info);color:var(--color-info)}.btn.ghost{background:rgba(0,0,0,0);color:var(--text-primary)}.btn.ghost:hover:not(:disabled){background:var(--bg-surface-low)}.btn.ghost:active:not(:disabled){background:var(--bg-surface-edge)}.btn.ghost.danger{color:var(--color-danger)}.btn.ghost.danger:hover:not(:disabled){background:var(--color-danger-soft)}.btn.ghost.warning{color:var(--color-warning)}.btn.ghost.warning:hover:not(:disabled){background:var(--color-warning-soft)}.btn.ghost.success{color:var(--color-success)}.btn.ghost.success:hover:not(:disabled){background:var(--color-success-soft)}.btn.ghost.info{color:var(--color-info)}.btn.ghost.info:hover:not(:disabled){background:var(--color-info-soft)}.btn.soft{background:var(--color-primary-soft);color:var(--color-primary)}.btn.soft:hover:not(:disabled){background:var(--bg-surface-edge)}.btn.soft.danger{background:var(--color-danger-soft);color:var(--color-danger)}.btn.soft.warning{background:var(--color-warning-soft);color:var(--color-warning)}.btn.soft.success{background:var(--color-success-soft);color:var(--color-success)}.btn.soft.info{background:var(--color-info-soft);color:var(--color-info)}.btn.link{overflow:visible;background:rgba(0,0,0,0);color:var(--text-accent);padding:0;min-height:auto;border-radius:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}.btn.link:hover:not(:disabled){color:var(--color-primary-hover)}.btn.link .btn-ripple{display:none}.btn.sm{padding:0 12px;min-height:28px;font-size:.8125rem}.btn.lg{padding:0 20px;min-height:44px;font-size:.9375rem}.btn.icon{padding:0;width:36px}.btn.icon.sm{width:28px}.btn.icon.lg{width:44px}.btn.round{border-radius:999px}.btn.circle{padding:0;width:36px;border-radius:50%}.btn.circle.sm{width:28px}.btn.circle.lg{width:44px}.btn.block{display:flex;width:100%}.btn.loading{pointer-events:none;cursor:default}.btn[aria-pressed=true].ghost,.btn[data-state=on].ghost{background:var(--color-primary-soft);color:var(--color-primary)}.btn[aria-pressed=true].outline,.btn[data-state=on].outline{background:var(--color-primary-soft);color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary),var(--shadow-xs)}.btn[aria-pressed=true].soft,.btn[data-state=on].soft{background:var(--color-primary);color:var(--color-primary-on)}.btn[aria-pressed=true].dashed,.btn[data-state=on].dashed{background:var(--color-primary-soft);color:var(--color-primary);border-color:var(--color-primary)}.btn.fab{width:56px;min-height:56px;padding:0;border-radius:50%;box-shadow:var(--shadow-lg);font-weight:600}.btn.fab:hover:not(:disabled){box-shadow:0 12px 20px -6px rgba(9,9,11,.16),0 4px 8px -2px rgba(9,9,11,.08)}.btn.fab:active:not(:disabled){box-shadow:var(--shadow-md),inset 0 1px 0 0 rgba(0,0,0,.08)}.btn.fab.sm{width:40px;min-height:40px;font-size:.875rem}.btn.fab.lg{width:64px;min-height:64px;font-size:1rem}.btn.fab.extended{width:auto;border-radius:999px;padding:0 20px;gap:8px;min-width:80px}.btn.fab.extended.sm{padding:0 16px;min-width:64px}.btn.fab.extended.lg{padding:0 24px;min-width:96px}.btn.fab.fixed-bottom-right{position:fixed;bottom:24px;right:24px;z-index:50}.btn.fab.fixed-bottom-left{position:fixed;bottom:24px;left:24px;z-index:50}.btn.fab.fixed-top-right{position:fixed;top:24px;right:24px;z-index:50}.btn.fab.fixed-top-left{position:fixed;top:24px;left:24px;z-index:50}.btn-group{display:inline-flex;vertical-align:middle;isolation:isolate}.btn-group>.btn{border-radius:0;position:relative}.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn:first-child{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}.btn-group>.btn:last-child{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.btn-group>.btn:hover:not(:disabled),.btn-group>.btn:focus-visible,.btn-group>.btn[aria-pressed=true],.btn-group>.btn[data-state=on]{z-index:1}.btn-group.vertical{flex-direction:column}.btn-group.vertical>.btn:not(:first-child){margin-left:0;margin-top:-1px}.btn-group.vertical>.btn:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0}.btn-group.vertical>.btn:last-child{border-radius:0 0 var(--radius-sm) var(--radius-sm)}.btn-group.spaced{gap:4px}.btn-group.spaced>.btn{border-radius:var(--radius-sm)}.btn-group.spaced>.btn:not(:first-child){margin-left:0}.btn-group.spaced>.btn:not(:last-child){margin-right:0}.btn-group.round>.btn:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px;padding-left:20px}.btn-group.round>.btn:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px;padding-right:20px}.btn-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:rgba(0,0,0,0);border-radius:50%;animation:cny-btn-spin 700ms linear infinite;flex-shrink:0;vertical-align:-0.125em}@keyframes cny-btn-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion: reduce){.btn-spinner{animation-duration:1400ms}}@media(forced-colors: active){.btn{border:1px solid ButtonBorder;forced-color-adjust:none;color:ButtonText;background:ButtonFace}.btn:focus-visible{outline:2px solid SelectedItem;outline-offset:2px;box-shadow:none}.btn.solid,.btn.secondary{background:SelectedItem;color:SelectedItemText;border-color:SelectedItem}.btn[aria-pressed=true],.btn[data-state=on]{background:SelectedItem;color:SelectedItemText}.btn:disabled,.btn[aria-disabled=true]{color:GrayText;border-color:GrayText}.btn .btn-ripple{display:none}.btn-spinner{border-color:ButtonText;border-right-color:rgba(0,0,0,0)}}.input{display:block;width:100%;min-height:36px;padding:0 12px;background:var(--bg-surface-lowest);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);outline:none;font-family:var(--font-body);font-size:.875rem;line-height:1.4;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input::placeholder{color:var(--text-muted)}.input:hover:not(:disabled):not(:focus){border-color:var(--border-color-strong)}.input:focus{border-color:var(--border-focus);box-shadow:none}.input:disabled{background:var(--bg-surface-low);color:var(--text-disabled);cursor:not-allowed}.input.sm{min-height:28px;font-size:.8125rem;padding:0 8px}.input.lg{min-height:44px;font-size:.9375rem;padding:0 16px}.input.danger{border-color:var(--color-danger)}.input.danger:focus{border-color:var(--color-danger);box-shadow:none}.input.warning{border-color:var(--color-warning)}.input.warning:focus{border-color:var(--color-warning);box-shadow:none}.input.success{border-color:var(--color-success)}.input.success:focus{border-color:var(--color-success);box-shadow:none}textarea.input{min-height:88px;padding:8px 12px;line-height:1.55;resize:vertical}.input-label{display:block;font-family:var(--font-body);font-size:.8125rem;font-weight:500;color:var(--text-secondary);margin-bottom:8px}.input-hint{display:block;font-size:.75rem;color:var(--text-muted);margin-top:8px}.input-hint.danger{color:var(--color-danger)}.input-hint.warning{color:var(--color-warning)}.input-hint.success{color:var(--color-success)}.card{position:relative;background:var(--bg-surface-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:24px;transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}.card.interactive{cursor:pointer}.card.interactive:hover{box-shadow:var(--shadow-lift)}.card.danger,.card.warning,.card.success,.card.info{overflow:hidden}.card.danger::before,.card.warning::before,.card.success::before,.card.info::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;border-radius:1px}.card.danger::before{background:var(--color-danger)}.card.warning::before{background:var(--color-warning)}.card.success::before{background:var(--color-success)}.card.info::before{background:var(--color-info)}.card.flush{background:rgba(0,0,0,0);box-shadow:none;border-top:1px solid var(--hairline-color);border-radius:0;padding:20px 0}.card-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}.card-footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline-color);display:flex;align-items:center;justify-content:space-between;gap:12px}.alert{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:var(--bg-surface-lowest);color:var(--text-primary);border:1px solid var(--border-color);border-left-width:3px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:.875rem;line-height:1.5}.alert-title{font-weight:600;line-height:1.3;margin:0 0 2px}.alert-body{color:var(--text-secondary);margin:0}.alert-close{margin-left:auto;background:rgba(0,0,0,0);border:0;color:var(--text-muted);cursor:pointer;padding:2px;border-radius:var(--radius-xs);line-height:1;font-size:1rem}.alert-close:hover{color:var(--text-primary);background:var(--bg-surface-low)}.alert.danger{background:var(--color-danger-soft);border-color:var(--color-danger)}.alert.danger .alert-title{color:var(--color-danger)}.alert.warning{background:var(--color-warning-soft);border-color:var(--color-warning)}.alert.warning .alert-title{color:var(--color-warning)}.alert.success{background:var(--color-success-soft);border-color:var(--color-success)}.alert.success .alert-title{color:var(--color-success)}.alert.info{background:var(--color-info-soft);border-color:var(--color-info)}.alert.info .alert-title{color:var(--color-info)}.alert.solid{border:0;background:var(--color-neutral);color:var(--color-neutral-on)}.alert.solid .alert-body{color:var(--color-neutral-on);opacity:.8}.alert.solid .alert-close{color:var(--color-neutral-on);opacity:.7}.alert.solid .alert-close:hover{opacity:1;background:hsla(0,0%,100%,.1)}.alert.solid.danger{background:var(--color-danger);color:var(--color-danger-on)}.alert.solid.warning{background:var(--color-warning);color:var(--color-warning-on)}.alert.solid.success{background:var(--color-success);color:var(--color-success-on)}.alert.solid.info{background:var(--color-info);color:var(--color-info-on)}.checkbox,.radio{appearance:none;-webkit-appearance:none;display:inline-block;width:16px;height:16px;margin:0;padding:0;background:var(--bg-surface-lowest);border:1px solid var(--border-color-strong);cursor:pointer;vertical-align:middle;transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.checkbox:hover:not(:disabled),.radio:hover:not(:disabled){border-color:var(--color-primary)}.checkbox:focus-visible,.radio:focus-visible{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.checkbox:disabled,.radio:disabled{opacity:.5;cursor:not-allowed}.checkbox{border-radius:var(--radius-xs)}.checkbox:checked{background-color:var(--color-primary);border-color:var(--color-primary);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5L6.5 11.5L12.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:center}.checkbox:indeterminate{background-color:var(--color-primary);border-color:var(--color-primary);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' fill='white' rx='1'/></svg>");background-repeat:no-repeat;background-position:center}.radio{border-radius:50%}.radio:checked{border-color:var(--color-primary);background-color:var(--bg-surface-lowest);background-image:radial-gradient(circle, var(--color-primary) 0 4px, transparent 5px)}.control{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.875rem;color:var(--text-primary);cursor:pointer;user-select:none}.control:has(:disabled){cursor:not-allowed;color:var(--text-disabled)}.switch{appearance:none;-webkit-appearance:none;position:relative;width:32px;height:18px;margin:0;padding:0;background:var(--border-color-strong);border-radius:var(--radius-full);cursor:pointer;vertical-align:middle;transition:background-color var(--transition-fast)}.switch::before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:var(--shadow-xs);transition:transform var(--transition-fast)}.switch:checked{background:var(--color-primary)}.switch:checked::before{transform:translateX(14px)}.switch:focus-visible{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.switch:disabled{opacity:.5;cursor:not-allowed}.select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-height:36px;padding:0 32px 0 12px;background:var(--bg-surface-lowest);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.875rem;line-height:1.4;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.select:hover:not(:disabled):not(:focus){border-color:var(--border-color-strong)}.select:focus{outline:none;border-color:var(--border-focus);box-shadow:none}.select:disabled{background-color:var(--bg-surface-low);color:var(--text-disabled);cursor:not-allowed}.select.sm{min-height:28px;font-size:.8125rem;padding:0 24px 0 8px}.select.lg{min-height:44px;font-size:.9375rem;padding:0 40px 0 16px}.table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:.875rem;color:var(--text-primary);background:var(--bg-surface-lowest)}.table th,.table td{padding:12px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--hairline-color)}.table thead th{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;background:var(--bg-surface-low);border-bottom:1px solid var(--border-color);white-space:nowrap}.table tbody tr{transition:background-color var(--transition-fast)}.table tbody tr:last-child td{border-bottom:0}.table.hoverable tbody tr:hover{background:var(--bg-surface-low)}.table.striped tbody tr:nth-child(odd){background:var(--bg-surface-low)}.table.compact th,.table.compact td{padding:8px 12px}.table.bordered{border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.table.bordered th,.table.bordered td{border-right:1px solid var(--hairline-color)}.table.bordered th:last-child,.table.bordered td:last-child{border-right:0}.table .num{text-align:right;font-variant-numeric:tabular-nums}.table.resizable{table-layout:fixed}.table.resizable thead th,.table.resizable tbody td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table.resizable thead th{position:relative}.table.resizable tbody td>.cny-row{min-width:0}.table.resizable .th-resizer{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;user-select:none;touch-action:none;z-index:1;background:rgba(0,0,0,0);transition:background-color var(--transition-fast)}.table.resizable .th-resizer::after{content:"";position:absolute;top:20%;right:2px;width:1px;height:60%;background:var(--border-color);transition:background-color var(--transition-fast)}.table.resizable .th-resizer:hover::after,.table.resizable .th-resizer.resizing::after{background:var(--color-primary);width:2px}.table.resizable .th-resizer:hover,.table.resizable .th-resizer.resizing{background:color-mix(in srgb, var(--color-primary) 8%, transparent)}.table.resizable.is-resizing{cursor:col-resize;user-select:none}.table-wrap{overflow-x:auto;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-surface-lowest)}.table-wrap .table{background:rgba(0,0,0,0)}.table-wrap .table th,.table-wrap .table td{white-space:nowrap}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;background:var(--color-primary-soft);color:var(--color-primary);border-radius:50%;font-family:var(--font-body);font-size:.8125rem;font-weight:600;letter-spacing:-0.01em;user-select:none}.avatar img,.avatar svg{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}.avatar.online::after,.avatar.offline::after,.avatar.busy::after{content:"";position:absolute;bottom:0;right:0;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;transform:translate(15%, 15%);box-shadow:0 0 0 2px var(--bg-surface-lowest);z-index:1}.avatar.online::after{background:var(--color-success)}.avatar.offline::after{background:var(--text-muted)}.avatar.busy::after{background:var(--color-danger)}.avatar.xs{width:20px;height:20px;font-size:.625rem}.avatar.sm{width:24px;height:24px;font-size:.6875rem}.avatar.lg{width:40px;height:40px;font-size:.9375rem}.avatar.xl{width:56px;height:56px;font-size:1.125rem}.avatar.square{border-radius:var(--radius-sm)}.avatar-stack{display:inline-flex;isolation:isolate}.avatar-stack .avatar{box-shadow:0 0 0 2px var(--bg-surface-lowest)}.avatar-stack .avatar+.avatar{margin-left:-8px}.avatar-stack .avatar:hover,.avatar-stack .avatar.online,.avatar-stack .avatar.offline,.avatar-stack .avatar.busy{z-index:2}.avatar-stack .avatar.xs+.avatar.xs{margin-left:-6px}.avatar-stack .avatar.sm+.avatar.sm{margin-left:-7px}.avatar-stack .avatar.lg+.avatar.lg{margin-left:-10px}.avatar-stack .avatar.xl+.avatar.xl{margin-left:-14px}.avatar-stack .avatar.online::after,.avatar-stack .avatar.offline::after,.avatar-stack .avatar.busy::after{box-shadow:0 0 0 2px var(--bg-surface-lowest)}.progress{position:relative;display:block;width:100%;height:6px;background:var(--bg-surface-edge);border-radius:var(--radius-full);overflow:hidden}.progress-bar{display:block;height:100%;width:var(--value, 0%);background:var(--color-primary);border-radius:inherit;transition:width var(--transition-base)}.progress.danger .progress-bar{background:var(--color-danger)}.progress.warning .progress-bar{background:var(--color-warning)}.progress.success .progress-bar{background:var(--color-success)}.progress.info .progress-bar{background:var(--color-info)}.progress.sm{height:4px}.progress.lg{height:10px}.progress.indeterminate .progress-bar{width:40%;animation:cny-progress-slide 1.4s var(--ease-standard) infinite}@keyframes cny-progress-slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}.progress-ring{--value: 0;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:conic-gradient(var(--color-primary) calc(var(--value) * 1%), var(--bg-surface-edge) 0);font-family:var(--font-body);font-size:.6875rem;font-weight:600;color:var(--text-primary)}.progress-ring::before{content:"";grid-area:1/1;width:calc(100% - 6px);height:calc(100% - 6px);background:var(--bg-surface-lowest);border-radius:50%}.progress-ring>*{grid-area:1/1}.progress-ring.sm{width:28px;height:28px;font-size:.5625rem}.progress-ring.lg{width:56px;height:56px;font-size:.8125rem}.skeleton{display:block;background:var(--bg-surface-edge);border-radius:var(--radius-sm);position:relative;overflow:hidden;color:rgba(0,0,0,0);user-select:none}.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);animation:cny-skeleton-shimmer 1.6s infinite}.skeleton.text{height:.875rem;border-radius:var(--radius-xs);margin:4px 0}.skeleton.title{height:1.25rem;width:60%;border-radius:var(--radius-xs)}.skeleton.circle{border-radius:50%}.skeleton.button{height:36px;width:96px;border-radius:var(--radius-sm)}.skeleton.avatar{width:32px;height:32px;border-radius:50%}@keyframes cny-skeleton-shimmer{100%{transform:translateX(100%)}}@media(prefers-reduced-motion: reduce){.skeleton::after{animation:none}}.cny-dark .skeleton::after{background:linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%)}@media(prefers-color-scheme: dark){.skeleton::after{background:linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%)}}.has-tooltip{position:relative}.has-tooltip::before,.has-tooltip::after{position:absolute;left:50%;opacity:0;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast);z-index:50}.has-tooltip::before{content:attr(data-tooltip);bottom:calc(100% + 8px);transform:translate(-50%, 4px);padding:6px 10px;background:var(--color-neutral);color:var(--color-neutral-on);font-family:var(--font-body);font-size:.75rem;font-weight:500;line-height:1.3;white-space:nowrap;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);max-width:240px}.has-tooltip::after{content:"";bottom:calc(100% + 2px);transform:translate(-50%, 4px);border:4px solid rgba(0,0,0,0);border-top-color:var(--color-neutral)}.has-tooltip:hover::before,.has-tooltip:hover::after,.has-tooltip:focus-visible::before,.has-tooltip:focus-visible::after{opacity:1;transform:translate(-50%, 0)}.has-tooltip.tooltip-bottom::before{bottom:auto;top:calc(100% + 8px)}.has-tooltip.tooltip-bottom::after{bottom:auto;top:calc(100% + 2px);border-top-color:rgba(0,0,0,0);border-bottom-color:var(--color-neutral)}@media(prefers-reduced-motion: reduce){.has-tooltip::before,.has-tooltip::after{transition:opacity var(--transition-fast)}}.cny-scroll,.cny-scroll-region{scrollbar-width:thin;scrollbar-color:var(--border-color) rgba(0,0,0,0)}.cny-scroll::-webkit-scrollbar,.cny-scroll-region::-webkit-scrollbar{width:12px;height:12px}.cny-scroll::-webkit-scrollbar-track,.cny-scroll-region::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.cny-scroll::-webkit-scrollbar-thumb,.cny-scroll-region::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:var(--radius-full);border:3px solid rgba(0,0,0,0);background-clip:content-box;transition:background-color var(--transition-fast)}.cny-scroll::-webkit-scrollbar-thumb:hover,.cny-scroll-region::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted);background-clip:content-box}.cny-scroll::-webkit-scrollbar-thumb:active,.cny-scroll-region::-webkit-scrollbar-thumb:active{background-color:var(--text-secondary);background-clip:content-box}.cny-scroll::-webkit-scrollbar-corner,.cny-scroll-region::-webkit-scrollbar-corner{background:rgba(0,0,0,0)}.cny-scroll.thin::-webkit-scrollbar,.thin.cny-scroll-region::-webkit-scrollbar{width:8px;height:8px}.cny-scroll.thin::-webkit-scrollbar-thumb,.thin.cny-scroll-region::-webkit-scrollbar-thumb{border-width:2px}.cny-scroll.subtle::-webkit-scrollbar-thumb,.subtle.cny-scroll-region::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0)}.cny-scroll.subtle:hover::-webkit-scrollbar-thumb,.subtle.cny-scroll-region:hover::-webkit-scrollbar-thumb,.cny-scroll.subtle:focus-within::-webkit-scrollbar-thumb,.subtle.cny-scroll-region:focus-within::-webkit-scrollbar-thumb{background-color:var(--border-color);background-clip:content-box}.cny-scroll.overlay::-webkit-scrollbar,.overlay.cny-scroll-region::-webkit-scrollbar{width:10px;height:10px}.cny-scroll.overlay::-webkit-scrollbar-track,.overlay.cny-scroll-region::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.cny-scroll.overlay::-webkit-scrollbar-thumb,.overlay.cny-scroll-region::-webkit-scrollbar-thumb{background-color:color-mix(in srgb, var(--text-muted) 40%, transparent);border-width:2px}.cny-scroll.overlay::-webkit-scrollbar-thumb:hover,.overlay.cny-scroll-region::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb, var(--text-muted) 70%, transparent);background-clip:content-box}.cny-scroll.expand,.expand.cny-scroll-region{scrollbar-width:auto}.cny-scroll.expand::-webkit-scrollbar,.expand.cny-scroll-region::-webkit-scrollbar{width:16px;height:16px;background:rgba(0,0,0,0)}.cny-scroll.expand::-webkit-scrollbar-thumb,.expand.cny-scroll-region::-webkit-scrollbar-thumb{border-width:4px;background-color:var(--border-color-strong);transition:border-width .15s ease,background-color var(--transition-fast)}.cny-scroll.expand::-webkit-scrollbar-thumb:hover,.expand.cny-scroll-region::-webkit-scrollbar-thumb:hover,.cny-scroll.expand::-webkit-scrollbar-thumb:active,.expand.cny-scroll-region::-webkit-scrollbar-thumb:active{border-width:1px;background-color:var(--text-muted)}.cny-scroll.primary,.primary.cny-scroll-region{scrollbar-color:var(--color-primary) rgba(0,0,0,0)}.cny-scroll.primary::-webkit-scrollbar-thumb,.primary.cny-scroll-region::-webkit-scrollbar-thumb{background-color:var(--color-primary);background-clip:content-box}.cny-scroll.primary::-webkit-scrollbar-thumb:hover,.primary.cny-scroll-region::-webkit-scrollbar-thumb:hover{background-color:var(--color-primary);background-clip:content-box}.cny-scroll-region{border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-surface-lowest);overflow:auto;background:linear-gradient(var(--bg-surface-lowest) 30%, rgba(0, 0, 0, 0)) center top,linear-gradient(rgba(0, 0, 0, 0), var(--bg-surface-lowest) 70%) center bottom,radial-gradient(farthest-side at center top, var(--hairline-color), transparent) center top,radial-gradient(farthest-side at center bottom, var(--hairline-color), transparent) center bottom;background-repeat:no-repeat;background-size:100% 24px,100% 24px,100% 8px,100% 8px;background-attachment:local,local,scroll,scroll;background-color:var(--bg-surface-lowest)}.cny-navbar{display:flex;align-items:center;gap:16px;height:56px;padding:0 24px;background:color-mix(in srgb, var(--bg-base) 78%, transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hairline-color);position:sticky;top:0;z-index:20;transition:background-color var(--transition-fast),border-color var(--transition-fast)}.cny-navbar.solid{background:var(--bg-base);backdrop-filter:none;-webkit-backdrop-filter:none}.cny-navbar.bordered{border-bottom-color:var(--border-color)}.cny-navbar-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-primary);font-weight:650;letter-spacing:-0.012em;font-size:.9375rem;line-height:1;padding:6px 8px;margin-left:-8px;border-radius:var(--radius-sm);flex-shrink:0;transition:background-color var(--transition-fast)}.cny-navbar-brand:hover{background:var(--bg-surface-low)}.cny-navbar-brand:focus-visible{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.cny-navbar-brand .brand-mark{position:relative;width:22px;height:22px;border-radius:6px;background:radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, white 22%, transparent), transparent 55%),linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, black));box-shadow:inset 0 1px 0 color-mix(in srgb, white 25%, transparent),inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, black),0 1px 2px rgba(0,0,0,.18);flex-shrink:0}.cny-navbar-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.cny-navbar-nav::-webkit-scrollbar{display:none}.cny-navbar-item{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;color:var(--text-secondary);text-decoration:none;white-space:nowrap;transition:background-color var(--transition-fast),color var(--transition-fast)}.cny-navbar-item:hover{background:var(--bg-surface-low);color:var(--text-primary)}.cny-navbar-item:focus-visible{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.cny-navbar-item.active{color:var(--text-primary);font-weight:550}.cny-navbar-item.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-10px;height:2px;border-radius:2px 2px 0 0;background:var(--color-primary)}.cny-navbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.cny-navbar-divider{width:1px;height:20px;background:var(--hairline-color);margin:0 4px;flex-shrink:0}@media(max-width: 640px){.cny-navbar{height:52px;padding:0 16px;gap:8px}.cny-navbar-nav{display:none}}.cny-sidebar{display:flex;flex-direction:column;width:240px;flex-shrink:0;padding:24px 20px;border-right:1px solid var(--hairline-color);background:var(--bg-base);overflow-y:auto}.cny-sidebar.sticky{position:sticky;top:52px;align-self:flex-start;max-height:calc(100vh - 52px)}.cny-sidebar.thin{width:200px;padding:20px 16px}.cny-sidebar.wide{width:280px}.cny-sidebar-section{margin-bottom:24px}.cny-sidebar-section:last-child{margin-bottom:0}.cny-sidebar-title{font-size:.6875rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:0 8px;margin:0 0 12px}.cny-sidebar-nav{display:flex;flex-direction:column;gap:1px}.cny-sidebar-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);font-size:.84375rem;color:var(--text-secondary);text-decoration:none;position:relative;transition:background-color var(--transition-fast),color var(--transition-fast)}.cny-sidebar-item:hover{background:var(--bg-surface-low);color:var(--text-primary)}.cny-sidebar-item.active{color:var(--color-primary);font-weight:550;background:color-mix(in srgb, var(--color-primary) 8%, transparent)}.cny-sidebar-item.active::before{content:"";position:absolute;left:calc(-1*20px);top:50%;transform:translateY(-50%);width:2px;height:16px;background:var(--color-primary);border-radius:0 2px 2px 0}.cny-sidebar-item.disabled{color:var(--text-muted);pointer-events:none;opacity:.55}.cny-sidebar-item .cny-sidebar-item-icon{width:14px;height:14px;flex-shrink:0;opacity:.75}.cny-sidebar-item .cny-sidebar-item-badge{margin-left:auto}.cny-sidebar.collapsed{width:60px;padding:20px 8px;align-items:center}.cny-sidebar.collapsed .cny-sidebar-title{display:none}.cny-sidebar.collapsed .cny-sidebar-item{justify-content:center;padding:8px}.cny-sidebar.collapsed .cny-sidebar-item span:not(.cny-sidebar-item-icon):not(.cny-sidebar-item-badge){display:none}.cny-sidebar.collapsed .cny-sidebar-item .cny-sidebar-item-badge{display:none}.cny-sidebar.collapsed .cny-sidebar-item.active::before{left:-8px}@media(max-width: 900px){.cny-sidebar.responsive{display:none}}.cny-text{font-family:var(--font-body);color:var(--text-primary);margin:0}.cny-text-display{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:500;line-height:1.05;letter-spacing:-0.03em}.cny-text-h1{font-family:var(--font-display);font-size:clamp(1.875rem,3.2vw,2.5rem);font-weight:500;line-height:1.15;letter-spacing:-0.025em}.cny-text-h2{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,1.875rem);font-weight:500;line-height:1.2;letter-spacing:-0.02em}.cny-text-h3{font-family:var(--font-body);font-size:1.25rem;font-weight:600;line-height:1.3;letter-spacing:-0.015em}.cny-text-h4{font-family:var(--font-body);font-size:1.0625rem;font-weight:600;line-height:1.35;letter-spacing:-0.01em}.cny-text-h5{font-family:var(--font-body);font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:-0.005em}.cny-text-h6{font-family:var(--font-body);font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-muted)}.cny-text-lead{font-family:var(--font-body);font-size:1.125rem;font-weight:400;line-height:1.55;color:var(--text-secondary)}.cny-text-body{font-family:var(--font-body);font-size:.9375rem;font-weight:400;line-height:1.6}.cny-text-small{font-family:var(--font-body);font-size:.8125rem;font-weight:400;line-height:1.5;color:var(--text-secondary)}.cny-text-caption{font-family:var(--font-body);font-size:.75rem;font-weight:400;line-height:1.5;color:var(--text-muted)}.cny-text-code{font-family:var(--font-mono);font-size:.8125rem;padding:.1em .35em;border-radius:var(--radius-xs);background:var(--bg-surface-low);color:var(--text-primary)}.cny-text-kbd{font-family:var(--font-mono);font-size:.75rem;padding:.1em .4em;border-radius:var(--radius-xs);background:var(--bg-surface-lowest);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-color),0 1px 0 0 var(--border-color)}.cny-weight-regular{font-weight:400}.cny-weight-medium{font-weight:500}.cny-weight-semibold{font-weight:600}.cny-weight-bold{font-weight:700}.cny-text-left{text-align:left}.cny-text-center{text-align:center}.cny-text-right{text-align:right}.cny-text-justify{text-align:justify}.cny-field{display:flex;flex-direction:column;gap:8px}.cny-field-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.cny-field-label{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-body);font-size:.8125rem;font-weight:500;color:var(--text-secondary)}.cny-field-label .cny-field-required{color:var(--color-danger);font-weight:500}.cny-field-label .cny-field-optional{font-size:.6875rem;font-weight:400;color:var(--text-muted);padding:1px 6px;border-radius:var(--radius-full);background:var(--bg-surface-low)}.cny-field-counter{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.cny-field-counter.danger{color:var(--color-danger)}.cny-field-hint{font-size:.75rem;color:var(--text-muted);line-height:1.5}.cny-field-hint.danger{color:var(--color-danger)}.cny-field-hint.warning{color:var(--color-warning)}.cny-field-hint.success{color:var(--color-success)}.cny-input-affix{position:relative;display:flex;align-items:stretch;width:100%}.cny-input-affix .cny-input-prefix,.cny-input-affix .cny-input-suffix{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);pointer-events:none}.cny-input-affix .cny-input-prefix{left:12px}.cny-input-affix .cny-input-suffix{right:12px}.cny-input-affix .cny-input-action{position:absolute;top:50%;transform:translateY(-50%);right:6px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;border-radius:var(--radius-xs);background:rgba(0,0,0,0);color:var(--text-muted);cursor:pointer;transition:background-color 120ms,color 120ms}.cny-input-affix .cny-input-action:hover{background:var(--bg-surface-low);color:var(--text-primary)}.cny-input-affix .cny-input-action:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ring-color)}.cny-input-affix.has-prefix>.input{padding-left:calc(12px + 18px + 6px)}.cny-input-affix.has-suffix>.input{padding-right:calc(12px + 18px + 6px)}.cny-input-affix.has-action>.input{padding-right:32px}.cny-select-trigger{display:inline-flex;align-items:center;justify-content:space-between;width:100%;min-height:36px;gap:8px;padding:0 12px;background:var(--bg-surface-lowest);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.875rem;line-height:1;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.cny-select-trigger[data-placeholder]{color:var(--text-muted)}.cny-select-trigger:hover:not([data-disabled]){border-color:var(--border-color-strong)}.cny-select-trigger:focus-visible,.cny-select-trigger[data-state=open]{outline:none;border-color:var(--border-focus);box-shadow:none}.cny-select-trigger[data-disabled]{background:var(--bg-surface-low);color:var(--text-disabled);cursor:not-allowed}.cny-select-trigger.sm{min-height:28px;font-size:.8125rem;padding:0 8px}.cny-select-trigger.lg{min-height:44px;font-size:.9375rem;padding:0 16px}.cny-select-trigger.danger{border-color:var(--color-danger)}.cny-select-trigger.danger:focus-visible,.cny-select-trigger.danger[data-state=open]{border-color:var(--color-danger);box-shadow:none}.cny-select-trigger.warning{border-color:var(--color-warning)}.cny-select-trigger.warning:focus-visible,.cny-select-trigger.warning[data-state=open]{border-color:var(--color-warning);box-shadow:none}.cny-select-trigger.success{border-color:var(--color-success)}.cny-select-trigger.success:focus-visible,.cny-select-trigger.success[data-state=open]{border-color:var(--color-success);box-shadow:none}.cny-select-chevron{color:var(--text-muted);flex-shrink:0;transition:transform 150ms var(--ease-standard)}[data-state=open] .cny-select-chevron{transform:rotate(180deg)}.cny-select-content{z-index:60;min-width:var(--radix-select-trigger-width);max-height:var(--radix-select-content-available-height);padding:4px;border-radius:var(--radius-md);background:var(--bg-surface-lowest);box-shadow:var(--shadow-lg),0 0 0 1px var(--border-color);overflow:hidden;animation:cny-select-pop 160ms cubic-bezier(0.2, 0, 0, 1)}@keyframes cny-select-pop{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}.cny-select-viewport{padding:2px}.cny-select-item{position:relative;display:flex;align-items:center;gap:8px;padding:6px 28px 6px 10px;border-radius:var(--radius-sm);font-size:.875rem;color:var(--text-primary);cursor:pointer;user-select:none}.cny-select-item[data-highlighted]{outline:none;background:var(--bg-surface-low)}.cny-select-item[data-state=checked]{color:var(--color-primary);font-weight:500}.cny-select-item[data-disabled]{color:var(--text-disabled);cursor:not-allowed}.cny-select-indicator{position:absolute;right:8px;display:inline-flex;color:var(--color-primary)}.cny-select-group-label{padding:6px 10px 4px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.cny-select-separator{height:1px;background:var(--hairline-color);margin:4px 0}.cny-multiselect-trigger{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;width:100%;min-height:36px;padding:3px 32px 3px 6px;background:var(--bg-surface-lowest);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.875rem;cursor:text;position:relative;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.cny-multiselect-trigger:hover:not([data-disabled]){border-color:var(--border-color-strong)}.cny-multiselect-trigger[data-state=open],.cny-multiselect-trigger:focus-within{border-color:var(--border-focus);box-shadow:none}.cny-multiselect-trigger[data-disabled]{background:var(--bg-surface-low);color:var(--text-disabled);cursor:not-allowed}.cny-multiselect-trigger.sm{min-height:28px;font-size:.8125rem}.cny-multiselect-trigger.lg{min-height:44px;font-size:.9375rem}.cny-multiselect-trigger.danger{border-color:var(--color-danger)}.cny-multiselect-trigger.danger:focus-within,.cny-multiselect-trigger.danger[data-state=open]{border-color:var(--color-danger);box-shadow:none}.cny-multiselect-trigger.warning{border-color:var(--color-warning)}.cny-multiselect-trigger.warning:focus-within,.cny-multiselect-trigger.warning[data-state=open]{border-color:var(--color-warning);box-shadow:none}.cny-multiselect-trigger.success{border-color:var(--color-success)}.cny-multiselect-trigger.success:focus-within,.cny-multiselect-trigger.success[data-state=open]{border-color:var(--color-success);box-shadow:none}.cny-multiselect-trigger .cny-multiselect-placeholder{color:var(--text-muted);padding:4px 6px}.cny-multiselect-trigger .cny-multiselect-input{flex:1 1 60px;min-width:60px;border:0;outline:none;background:rgba(0,0,0,0);color:inherit;font:inherit;padding:4px 6px}.cny-multiselect-trigger .cny-multiselect-chevron{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;transition:transform 150ms var(--ease-standard)}.cny-multiselect-trigger[data-state=open] .cny-multiselect-chevron{transform:translateY(-50%) rotate(180deg)}.cny-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;border-radius:var(--radius-sm);background:var(--color-primary-soft);color:var(--color-primary);font-size:.8125rem;line-height:1.3;max-width:100%}.cny-chip .cny-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cny-chip .cny-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;border-radius:3px;background:rgba(0,0,0,0);color:inherit;cursor:pointer;opacity:.7}.cny-chip .cny-chip-remove:hover{opacity:1;background:hsla(0,0%,100%,.4)}.cny-chip .cny-chip-remove:focus-visible{outline:none;box-shadow:0 0 0 2px currentColor}.cny-chip.danger{background:var(--color-danger-soft);color:var(--color-danger)}.cny-chip.warning{background:var(--color-warning-soft);color:var(--color-warning)}.cny-chip.success{background:var(--color-success-soft);color:var(--color-success)}.cny-chip.neutral{background:var(--bg-surface-low);color:var(--text-secondary)}.cny-popover{z-index:60;min-width:var(--radix-popover-trigger-width);max-height:min(320px,var(--radix-popover-content-available-height));padding:4px;border-radius:var(--radius-md);background:var(--bg-surface-lowest);box-shadow:var(--shadow-lg),0 0 0 1px var(--border-color);overflow:hidden;animation:cny-select-pop 160ms cubic-bezier(0.2, 0, 0, 1)}.cny-popover [cmdk-list]{max-height:280px;overflow-y:auto;scrollbar-width:thin;padding:2px}.cny-popover [cmdk-input]{width:100%;margin:2px 0 4px;padding:6px 10px;border:0;outline:none;background:rgba(0,0,0,0);color:var(--text-primary);font-size:.875rem;border-bottom:1px solid var(--hairline-color)}.cny-popover [cmdk-input]::placeholder{color:var(--text-muted)}.cny-popover [cmdk-item]{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius-sm);font-size:.875rem;color:var(--text-primary);cursor:pointer;user-select:none}.cny-popover [cmdk-item][data-selected=true]{background:var(--bg-surface-low)}.cny-popover [cmdk-item] .cny-check{margin-left:auto;color:var(--color-primary)}.cny-popover [cmdk-empty]{padding:20px 12px;text-align:center;color:var(--text-muted);font-size:.875rem}.cny-popover [cmdk-group-heading]{padding:6px 10px 4px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.cny-textarea-autogrow{display:block;width:100%;resize:none;overflow:hidden}.p-0{padding:0}.m-0{margin:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.gap-0{gap:0}.gap-x-0{column-gap:0}.gap-y-0{row-gap:0}.p-1{padding:4px}.m-1{margin:4px}.px-1{padding-left:4px;padding-right:4px}.py-1{padding-top:4px;padding-bottom:4px}.mx-1{margin-left:4px;margin-right:4px}.my-1{margin-top:4px;margin-bottom:4px}.pt-1{padding-top:4px}.pr-1{padding-right:4px}.pb-1{padding-bottom:4px}.pl-1{padding-left:4px}.mt-1{margin-top:4px}.mr-1{margin-right:4px}.mb-1{margin-bottom:4px}.ml-1{margin-left:4px}.gap-1{gap:4px}.gap-x-1{column-gap:4px}.gap-y-1{row-gap:4px}.p-2{padding:8px}.m-2{margin:8px}.px-2{padding-left:8px;padding-right:8px}.py-2{padding-top:8px;padding-bottom:8px}.mx-2{margin-left:8px;margin-right:8px}.my-2{margin-top:8px;margin-bottom:8px}.pt-2{padding-top:8px}.pr-2{padding-right:8px}.pb-2{padding-bottom:8px}.pl-2{padding-left:8px}.mt-2{margin-top:8px}.mr-2{margin-right:8px}.mb-2{margin-bottom:8px}.ml-2{margin-left:8px}.gap-2{gap:8px}.gap-x-2{column-gap:8px}.gap-y-2{row-gap:8px}.p-3{padding:12px}.m-3{margin:12px}.px-3{padding-left:12px;padding-right:12px}.py-3{padding-top:12px;padding-bottom:12px}.mx-3{margin-left:12px;margin-right:12px}.my-3{margin-top:12px;margin-bottom:12px}.pt-3{padding-top:12px}.pr-3{padding-right:12px}.pb-3{padding-bottom:12px}.pl-3{padding-left:12px}.mt-3{margin-top:12px}.mr-3{margin-right:12px}.mb-3{margin-bottom:12px}.ml-3{margin-left:12px}.gap-3{gap:12px}.gap-x-3{column-gap:12px}.gap-y-3{row-gap:12px}.p-4{padding:16px}.m-4{margin:16px}.px-4{padding-left:16px;padding-right:16px}.py-4{padding-top:16px;padding-bottom:16px}.mx-4{margin-left:16px;margin-right:16px}.my-4{margin-top:16px;margin-bottom:16px}.pt-4{padding-top:16px}.pr-4{padding-right:16px}.pb-4{padding-bottom:16px}.pl-4{padding-left:16px}.mt-4{margin-top:16px}.mr-4{margin-right:16px}.mb-4{margin-bottom:16px}.ml-4{margin-left:16px}.gap-4{gap:16px}.gap-x-4{column-gap:16px}.gap-y-4{row-gap:16px}.p-5{padding:20px}.m-5{margin:20px}.px-5{padding-left:20px;padding-right:20px}.py-5{padding-top:20px;padding-bottom:20px}.mx-5{margin-left:20px;margin-right:20px}.my-5{margin-top:20px;margin-bottom:20px}.pt-5{padding-top:20px}.pr-5{padding-right:20px}.pb-5{padding-bottom:20px}.pl-5{padding-left:20px}.mt-5{margin-top:20px}.mr-5{margin-right:20px}.mb-5{margin-bottom:20px}.ml-5{margin-left:20px}.gap-5{gap:20px}.gap-x-5{column-gap:20px}.gap-y-5{row-gap:20px}.p-6{padding:24px}.m-6{margin:24px}.px-6{padding-left:24px;padding-right:24px}.py-6{padding-top:24px;padding-bottom:24px}.mx-6{margin-left:24px;margin-right:24px}.my-6{margin-top:24px;margin-bottom:24px}.pt-6{padding-top:24px}.pr-6{padding-right:24px}.pb-6{padding-bottom:24px}.pl-6{padding-left:24px}.mt-6{margin-top:24px}.mr-6{margin-right:24px}.mb-6{margin-bottom:24px}.ml-6{margin-left:24px}.gap-6{gap:24px}.gap-x-6{column-gap:24px}.gap-y-6{row-gap:24px}.p-8{padding:32px}.m-8{margin:32px}.px-8{padding-left:32px;padding-right:32px}.py-8{padding-top:32px;padding-bottom:32px}.mx-8{margin-left:32px;margin-right:32px}.my-8{margin-top:32px;margin-bottom:32px}.pt-8{padding-top:32px}.pr-8{padding-right:32px}.pb-8{padding-bottom:32px}.pl-8{padding-left:32px}.mt-8{margin-top:32px}.mr-8{margin-right:32px}.mb-8{margin-bottom:32px}.ml-8{margin-left:32px}.gap-8{gap:32px}.gap-x-8{column-gap:32px}.gap-y-8{row-gap:32px}.p-10{padding:40px}.m-10{margin:40px}.px-10{padding-left:40px;padding-right:40px}.py-10{padding-top:40px;padding-bottom:40px}.mx-10{margin-left:40px;margin-right:40px}.my-10{margin-top:40px;margin-bottom:40px}.pt-10{padding-top:40px}.pr-10{padding-right:40px}.pb-10{padding-bottom:40px}.pl-10{padding-left:40px}.mt-10{margin-top:40px}.mr-10{margin-right:40px}.mb-10{margin-bottom:40px}.ml-10{margin-left:40px}.gap-10{gap:40px}.gap-x-10{column-gap:40px}.gap-y-10{row-gap:40px}.p-12{padding:48px}.m-12{margin:48px}.px-12{padding-left:48px;padding-right:48px}.py-12{padding-top:48px;padding-bottom:48px}.mx-12{margin-left:48px;margin-right:48px}.my-12{margin-top:48px;margin-bottom:48px}.pt-12{padding-top:48px}.pr-12{padding-right:48px}.pb-12{padding-bottom:48px}.pl-12{padding-left:48px}.mt-12{margin-top:48px}.mr-12{margin-right:48px}.mb-12{margin-bottom:48px}.ml-12{margin-left:48px}.gap-12{gap:48px}.gap-x-12{column-gap:48px}.gap-y-12{row-gap:48px}.p-16{padding:64px}.m-16{margin:64px}.px-16{padding-left:64px;padding-right:64px}.py-16{padding-top:64px;padding-bottom:64px}.mx-16{margin-left:64px;margin-right:64px}.my-16{margin-top:64px;margin-bottom:64px}.pt-16{padding-top:64px}.pr-16{padding-right:64px}.pb-16{padding-bottom:64px}.pl-16{padding-left:64px}.mt-16{margin-top:64px}.mr-16{margin-right:64px}.mb-16{margin-bottom:64px}.ml-16{margin-left:64px}.gap-16{gap:64px}.gap-x-16{column-gap:64px}.gap-y-16{row-gap:64px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-grid{display:inline-grid}.hidden{display:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1 1 0%}.flex-auto{flex:auto}.flex-none{flex:none}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.w-full{width:100%}.w-auto{width:auto}.w-fit{width:fit-content}.h-full{height:100%}.h-auto{height:auto}.h-fit{height:fit-content}.cny-container{width:100%;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}.cny-container.sm{max-width:640px}.cny-container.md{max-width:768px}.cny-container.lg{max-width:1024px}.cny-container.xl{max-width:1280px}.cny-container.full{max-width:none}.cny-divider{display:block;flex-shrink:0;background:var(--hairline-color);border:0}.cny-divider.horizontal{width:100%;height:1px}.cny-divider.vertical{width:1px;align-self:stretch}.cny-spacer{flex:1 1 auto}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--text-accent)}.text-danger{color:var(--color-danger)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-info{color:var(--color-info)}.cny-label{font-family:var(--font-body);font-size:.6875rem;font-weight:600;letter-spacing:var(--track-wider);text-transform:uppercase;color:var(--text-muted)}.cny-mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1,"zero" 1;letter-spacing:-0.005em}.cny-rule{height:1px;width:100%;background:var(--hairline-color);border:0;margin:24px 0}.cny-index{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:var(--track-wide);color:var(--color-primary);margin-right:12px}.cny-index::after{content:"  —";color:var(--text-muted);margin-left:.25em}.cny-grid-paper{background-image:linear-gradient(var(--hairline-color) 1px, transparent 1px),linear-gradient(90deg, var(--hairline-color) 1px, transparent 1px);background-size:4px 4px,4px 4px;background-position:-1px -1px}.cny-grain{position:relative;isolation:isolate}.cny-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0 0.08  0 0 0 0.25 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}.cny-divide-top{box-shadow:0 -1px 0 0 var(--hairline-color)}.cny-divide-bottom{box-shadow:0 1px 0 0 var(--hairline-color)}@keyframes cny-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.cny-rise{animation:cny-rise 400ms var(--ease-standard) both}.cny-stack{display:flex;flex-direction:column}.cny-row{display:flex;flex-direction:row;align-items:center}.cny-wrap{flex-wrap:wrap}.truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cny-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);background:var(--color-neutral-soft);color:var(--text-secondary);font-family:var(--font-body);font-size:.6875rem;font-weight:500;line-height:1.4}.cny-badge.danger{background:var(--color-danger-soft);color:var(--color-danger)}.cny-badge.warning{background:var(--color-warning-soft);color:var(--color-warning)}.cny-badge.success{background:var(--color-success-soft);color:var(--color-success)}.cny-badge.info{background:var(--color-info-soft);color:var(--color-info)}.cny-badge.primary{background:var(--color-primary-soft);color:var(--color-primary)}

package/dist/table-resize.js

@@ -0,0 +1,104 @@
+/**
+ * Canny UI — table column resizer.
+ * Attaches drag handles to every `.table.resizable` on the page.
+ *
+ * Usage:
+ *   <script src="canny-ui/dist/table-resize.js" defer></script>
+ *   <table class="table resizable"> ... </table>
+ *
+ * Or, for dynamically inserted tables:
+ *   window.CannyUI.makeTableResizable(tableEl);
+ */
+(function () {
+  var MIN_WIDTH = 40;
+
+  function measureAndFix(table, ths) {
+    // Measure under auto layout, then freeze with table-layout: fixed.
+    var widths = [];
+    for (var i = 0; i < ths.length; i++) widths.push(ths[i].offsetWidth);
+    table.style.tableLayout = 'fixed';
+    for (var j = 0; j < ths.length; j++) ths[j].style.width = widths[j] + 'px';
+  }
+
+  function makeResizable(table) {
+    if (table.dataset.resizableInit === '1') return;
+    var ths = table.querySelectorAll('thead th');
+    if (!ths.length) return;
+
+    measureAndFix(table, ths);
+    table.dataset.resizableInit = '1';
+
+    for (var i = 0; i < ths.length; i++) {
+      // Last column has nothing to drag against.
+      if (i === ths.length - 1) continue;
+      attachHandle(table, ths[i]);
+    }
+  }
+
+  function attachHandle(table, th) {
+    var resizer = th.querySelector('.th-resizer');
+    if (!resizer) {
+      resizer = document.createElement('span');
+      resizer.className = 'th-resizer';
+      resizer.setAttribute('aria-hidden', 'true');
+      th.appendChild(resizer);
+    }
+
+    function pointerDown(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var isTouch = e.type === 'touchstart';
+      var startX = isTouch ? e.touches[0].clientX : e.clientX;
+      var startWidth = th.offsetWidth;
+
+      resizer.classList.add('resizing');
+      table.classList.add('is-resizing');
+      document.body.style.cursor = 'col-resize';
+
+      function move(ev) {
+        var clientX = ev.touches ? ev.touches[0].clientX : ev.clientX;
+        var next = Math.max(MIN_WIDTH, startWidth + (clientX - startX));
+        th.style.width = next + 'px';
+      }
+
+      function stop() {
+        resizer.classList.remove('resizing');
+        table.classList.remove('is-resizing');
+        document.body.style.cursor = '';
+        document.removeEventListener('mousemove', move);
+        document.removeEventListener('mouseup', stop);
+        document.removeEventListener('touchmove', move);
+        document.removeEventListener('touchend', stop);
+        document.removeEventListener('touchcancel', stop);
+      }
+
+      document.addEventListener('mousemove', move);
+      document.addEventListener('mouseup', stop);
+      document.addEventListener('touchmove', move, { passive: false });
+      document.addEventListener('touchend', stop);
+      document.addEventListener('touchcancel', stop);
+    }
+
+    resizer.addEventListener('mousedown', pointerDown);
+    resizer.addEventListener('touchstart', pointerDown, { passive: false });
+  }
+
+  function init() {
+    var tables = document.querySelectorAll('.table.resizable');
+    for (var i = 0; i < tables.length; i++) makeResizable(tables[i]);
+  }
+
+  if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  }
+
+  if (typeof window !== 'undefined') {
+    window.CannyUI = window.CannyUI || {};
+    window.CannyUI.makeTableResizable = makeResizable;
+  }
+})();

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "canny-ui",
+  "version": "1.0.0",
+  "description": "Pure CSS foundation for the Canny-UI design system — tokens, layout utilities, and a battery of enterprise components, shipped as one flat stylesheet.",
+  "main": "dist/canny-ui.min.css",
+  "style": "dist/canny-ui.min.css",
+  "files": [
+    "dist",
+    "src/tokens",
+    "src/base",
+    "src/components",
+    "src/_utilities.scss",
+    "src/canny-ui.scss",
+    "src/scripts",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./dist/canny-ui.min.css",
+    "./dist/canny-ui.min.css": "./dist/canny-ui.min.css",
+    "./table-resize": "./dist/table-resize.js",
+    "./table-resize.js": "./dist/table-resize.js",
+    "./scss": "./src/canny-ui.scss",
+    "./scss/*": "./src/*"
+  },
+  "devDependencies": {
+    "sass": "^1.83.0",
+    "vitest": "^2.1.8",
+    "@playwright/test": "^1.49.0",
+    "serve": "^14.2.4"
+  },
+  "keywords": [
+    "css",
+    "scss",
+    "design-system",
+    "ui",
+    "components",
+    "enterprise",
+    "dashboard",
+    "admin"
+  ],
+  "license": "MIT",
+  "author": "CannyMinds <prem@cannymindstech.com>",
+  "homepage": "https://github.com/CannyMinds/Canny-UI#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CannyMinds/Canny-UI.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/CannyMinds/Canny-UI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "sass src/canny-ui.scss dist/canny-ui.min.css --style=compressed --no-source-map && cp src/scripts/table-resize.js dist/table-resize.js",
+    "build:expanded": "sass src/canny-ui.scss dist/canny-ui.css --style=expanded --no-source-map",
+    "watch": "sass src/canny-ui.scss dist/canny-ui.css --watch",
+    "test": "vitest run",
+    "test:unit": "vitest run",
+    "test:visual": "playwright test"
+  }
+}

package/src/_utilities.scss

@@ -0,0 +1,215 @@
+@use 'tokens/primitives' as *;
+
+// ── Spacing ──────────────────────────────────────────────────────────────
+$spaces: (
+  0: $space-0, 1: $space-1, 2: $space-2, 3: $space-3, 4: $space-4,
+  5: $space-5, 6: $space-6, 8: $space-8, 10: $space-10, 12: $space-12, 16: $space-16
+);
+
+@each $key, $value in $spaces {
+  .p-#{$key}  { padding: $value; }
+  .m-#{$key}  { margin: $value; }
+  .px-#{$key} { padding-left: $value; padding-right: $value; }
+  .py-#{$key} { padding-top: $value; padding-bottom: $value; }
+  .mx-#{$key} { margin-left: $value; margin-right: $value; }
+  .my-#{$key} { margin-top: $value; margin-bottom: $value; }
+  .pt-#{$key} { padding-top: $value; }
+  .pr-#{$key} { padding-right: $value; }
+  .pb-#{$key} { padding-bottom: $value; }
+  .pl-#{$key} { padding-left: $value; }
+  .mt-#{$key} { margin-top: $value; }
+  .mr-#{$key} { margin-right: $value; }
+  .mb-#{$key} { margin-bottom: $value; }
+  .ml-#{$key} { margin-left: $value; }
+  .gap-#{$key}   { gap: $value; }
+  .gap-x-#{$key} { column-gap: $value; }
+  .gap-y-#{$key} { row-gap: $value; }
+}
+
+// ── Display ──────────────────────────────────────────────────────────────
+.block        { display: block; }
+.inline-block { display: inline-block; }
+.inline       { display: inline; }
+.flex         { display: flex; }
+.inline-flex  { display: inline-flex; }
+.grid         { display: grid; }
+.inline-grid  { display: inline-grid; }
+.hidden       { display: none; }
+
+// ── Flex ─────────────────────────────────────────────────────────────────
+.flex-row         { flex-direction: row; }
+.flex-col         { flex-direction: column; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-col-reverse { flex-direction: column-reverse; }
+.flex-wrap        { flex-wrap: wrap; }
+.flex-nowrap      { flex-wrap: nowrap; }
+.flex-1           { flex: 1 1 0%; }
+.flex-auto        { flex: auto; }
+.flex-none        { flex: none; }
+
+.items-start    { align-items: flex-start; }
+.items-center   { align-items: center; }
+.items-end      { align-items: flex-end; }
+.items-stretch  { align-items: stretch; }
+.items-baseline { align-items: baseline; }
+
+.justify-start   { justify-content: flex-start; }
+.justify-center  { justify-content: center; }
+.justify-end     { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+.justify-evenly  { justify-content: space-evenly; }
+
+// ── Grid columns (1–12) ──────────────────────────────────────────────────
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} { grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); }
+}
+
+// ── Size ─────────────────────────────────────────────────────────────────
+.w-full { width: 100%; }
+.w-auto { width: auto; }
+.w-fit  { width: fit-content; }
+.h-full { height: 100%; }
+.h-auto { height: auto; }
+.h-fit  { height: fit-content; }
+
+// ── Container (max-width with responsive inline padding) ─────────────────
+.cny-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: #{$space-4};
+  padding-right: #{$space-4};
+
+  &.sm { max-width: 640px; }
+  &.md { max-width: 768px; }
+  &.lg { max-width: 1024px; }
+  &.xl { max-width: 1280px; }
+  &.full { max-width: none; }
+}
+
+// ── Divider ──────────────────────────────────────────────────────────────
+.cny-divider {
+  display: block;
+  flex-shrink: 0;
+  background: var(--hairline-color);
+  border: 0;
+
+  &.horizontal { width: 100%; height: 1px; }
+  &.vertical   { width: 1px; align-self: stretch; }
+}
+
+// ── Spacer (flex filler) ─────────────────────────────────────────────────
+.cny-spacer { flex: 1 1 auto; }
+
+// ── Text colors ──────────────────────────────────────────────────────────
+.text-primary   { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-muted     { color: var(--text-muted); }
+.text-accent    { color: var(--text-accent); }
+.text-danger    { color: var(--color-danger); }
+.text-success   { color: var(--color-success); }
+.text-warning   { color: var(--color-warning); }
+.text-info      { color: var(--color-info); }
+
+// ── Primitives ───────────────────────────────────────────────────────────
+.cny-label {
+  font-family: var(--font-body);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: var(--track-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.cny-mono {
+  font-family: var(--font-mono);
+  font-feature-settings: 'tnum' 1, 'zero' 1;
+  letter-spacing: -0.005em;
+}
+
+.cny-rule {
+  height: 1px;
+  width: 100%;
+  background: var(--hairline-color);
+  border: 0;
+  margin: #{$space-6} 0;
+}
+
+.cny-index {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: var(--track-wide);
+  color: var(--color-primary);
+  margin-right: #{$space-3};
+  &::after { content: '  —'; color: var(--text-muted); margin-left: 0.25em; }
+}
+
+.cny-grid-paper {
+  background-image:
+    linear-gradient(var(--hairline-color) 1px, transparent 1px),
+    linear-gradient(90deg, var(--hairline-color) 1px, transparent 1px);
+  background-size: #{$grid-unit} #{$grid-unit}, #{$grid-unit} #{$grid-unit};
+  background-position: -1px -1px;
+}
+
+.cny-grain {
+  position: relative;
+  isolation: isolate;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: -1;
+    opacity: 0.35;
+    mix-blend-mode: multiply;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0 0.08  0 0 0 0.25 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
+  }
+}
+
+.cny-divide-top    { box-shadow: 0 -1px 0 0 var(--hairline-color); }
+.cny-divide-bottom { box-shadow: 0 1px 0 0 var(--hairline-color); }
+
+@keyframes cny-rise {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.cny-rise {
+  animation: cny-rise 400ms var(--ease-standard) both;
+}
+
+.cny-stack { display: flex; flex-direction: column; }
+.cny-row   { display: flex; flex-direction: row; align-items: center; }
+.cny-wrap  { flex-wrap: wrap; }
+
+// Truncate — ellipsizes overflowing text; works inside flex rows.
+.truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Badge — small inline status pill
+.cny-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-1;
+  padding: 2px $space-2;
+  border-radius: var(--radius-full);
+  background: var(--color-neutral-soft);
+  color: var(--text-secondary);
+  font-family: var(--font-body);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.4;
+
+  &.danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
+  &.warning { background: var(--color-warning-soft); color: var(--color-warning); }
+  &.success { background: var(--color-success-soft); color: var(--color-success); }
+  &.info    { background: var(--color-info-soft);    color: var(--color-info); }
+  &.primary { background: var(--color-primary-soft); color: var(--color-primary); }
+}

package/src/base/_reset.scss

@@ -0,0 +1,16 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--bg-base);
+  color: var(--text-primary);
+}

package/src/base/_typography.scss

@@ -0,0 +1,93 @@
+@use '../tokens/primitives' as *;
+
+// Restrained typography — Geist sans for everything by default.
+// Fraunces available as opt-in via `.cny-display` utility.
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Geist+Mono:wght@300..700&family=Geist:wght@300..700&display=swap');
+
+.cny-app {
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: 1.55;
+  color: var(--text-primary);
+  font-feature-settings: 'ss01', 'cv11';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+
+  h1 {
+    font-family: var(--font-display);
+    font-size: var(--text-3xl);
+    font-weight: 600;
+    letter-spacing: var(--track-tight);
+    line-height: 1.15;
+    margin: 0 0 $space-5;
+    color: var(--text-primary);
+  }
+
+  h2 {
+    font-family: var(--font-body);
+    font-size: var(--text-2xl);
+    font-weight: 600;
+    letter-spacing: var(--track-tight);
+    line-height: 1.2;
+    margin: 0 0 $space-4;
+  }
+
+  h3 {
+    font-family: var(--font-body);
+    font-size: var(--text-xl);
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    line-height: 1.3;
+    margin: 0 0 $space-3;
+  }
+
+  h4 {
+    font-family: var(--font-body);
+    font-size: var(--text-lg);
+    font-weight: 600;
+    line-height: 1.35;
+    margin: 0 0 $space-2;
+  }
+
+  p {
+    margin: 0 0 $space-4;
+    max-width: 72ch;
+    color: var(--text-secondary);
+  }
+
+  // Prose anchors only — component classes (e.g. cny-sidebar-item,
+  // cny-navbar-item, docs-toc-link) manage their own link styling.
+  a:not([class]) {
+    color: var(--text-accent);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.18em;
+    transition: color var(--transition-fast);
+
+    &:hover { color: var(--color-primary-hover); }
+  }
+
+  small,
+  .cny-meta {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+
+  code, kbd, pre, samp {
+    font-family: var(--font-mono);
+    font-size: 0.92em;
+  }
+
+  .cny-tabular {
+    font-variant-numeric: tabular-nums slashed-zero;
+  }
+}
+
+// Opt-in editorial display — use sparingly on marketing/landing surfaces.
+.cny-display {
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-variation-settings: 'opsz' 144;
+  letter-spacing: var(--track-tight);
+}

package/src/canny-ui.scss

@@ -0,0 +1,21 @@
+// Canny-UI master manifest — order matters.
+@use 'tokens/primitives';
+@use 'tokens/semantic';
+@use 'base/reset';
+@use 'base/typography';
+@use 'components/buttons';
+@use 'components/inputs';
+@use 'components/cards';
+@use 'components/alerts';
+@use 'components/forms';
+@use 'components/table';
+@use 'components/avatar';
+@use 'components/progress';
+@use 'components/skeleton';
+@use 'components/tooltip';
+@use 'components/scrollbar';
+@use 'components/navbar';
+@use 'components/sidebar';
+@use 'components/text';
+@use 'components/fields';
+@use 'utilities';