@rxxuzi/gumi/dist/gumi.css

Clean & minimal design system with delightful interactions

/*!
 * Gumi.css v1.0.0
 * https://github.com/rxxuzi/gumi
 */@import"https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap";:root{--gumi-bg-primary: #ffffff;--gumi-bg-secondary: #f5f5f7;--gumi-bg-tertiary: #e8e8ed;--gumi-foreground: #000000;--gumi-muted: #6e6e73;--gumi-muted-dark: #86868b;--gumi-primary: #007aff;--gumi-primary-rgb: 0, 122, 255;--gumi-primary-hover: #0051d5;--gumi-primary-light: rgba(0, 122, 255, 0.1);--gumi-secondary: #5ac8fa;--gumi-success: #34c759;--gumi-warning: #ff9500;--gumi-error: #ff3b30;--gumi-border: #d2d2d7;--gumi-border-light: #e5e5ea;--gumi-surface: #f5f5f7;--gumi-surface-hover: #e8e8ed;--gumi-surface-dark: #1d1d1f;--gumi-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;--gumi-font-mono: "Geist Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;--gumi-background: var(--gumi-bg-primary);--gumi-muted-alpha: rgba(110, 110, 115, 0.1);--gumi-border-dark: var(--gumi-border);--gumi-foreground-dark: var(--gumi-foreground);--gumi-text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8rem);--gumi-text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 0.95rem);--gumi-text-base: clamp(1rem, 0.9rem + 0.4vw, 1.1rem);--gumi-text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);--gumi-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.4rem);--gumi-text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);--gumi-text-3xl: clamp(1.875rem, 1.6rem + 1vw, 2.25rem);--gumi-text-4xl: clamp(2.25rem, 2rem + 1.2vw, 3rem);--gumi-text-5xl: clamp(3rem, 2.5rem + 2vw, 4rem);--gumi-font-light: 300;--gumi-font-normal: 400;--gumi-font-medium: 500;--gumi-font-semibold: 600;--gumi-font-bold: 700;--gumi-leading-tight: 1.25;--gumi-leading-normal: 1.5;--gumi-leading-relaxed: 1.625;--gumi-space-1: 0.25rem;--gumi-space-2: 0.5rem;--gumi-space-3: 0.75rem;--gumi-space-4: 1rem;--gumi-space-5: 1.25rem;--gumi-space-6: 1.5rem;--gumi-space-8: 2rem;--gumi-space-10: 2.5rem;--gumi-space-12: 3rem;--gumi-space-16: 4rem;--gumi-space-20: 5rem;--gumi-space-24: 6rem;--gumi-space-32: 8rem;--gumi-space-fluid-xs: clamp(0.5rem, 1vw, 1rem);--gumi-space-fluid-sm: clamp(1rem, 2vw, 2rem);--gumi-space-fluid-md: clamp(2rem, 4vw, 4rem);--gumi-space-fluid-lg: clamp(3rem, 6vw, 6rem);--gumi-space-fluid-xl: clamp(4rem, 8vw, 8rem);--gumi-radius-sm: 0.375rem;--gumi-radius-base: 0.625rem;--gumi-radius-md: 0.875rem;--gumi-radius-lg: 1.125rem;--gumi-radius-xl: 1.5rem;--gumi-radius-2xl: 2rem;--gumi-radius-full: 9999px;--gumi-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--gumi-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);--gumi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--gumi-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);--gumi-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--gumi-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);--gumi-transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);--gumi-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--gumi-container-sm: min(90%, 40rem);--gumi-container-md: min(92%, 48rem);--gumi-container-lg: min(94%, 64rem);--gumi-container-xl: min(95%, 80rem);--gumi-container-2xl: min(96%, 87.5rem);--gumi-z-dropdown: 1000;--gumi-z-sticky: 1020;--gumi-z-fixed: 1030;--gumi-z-modal: 1040;--gumi-z-popover: 1050;--gumi-z-tooltip: 1060;--gumi-hover-darken: rgba(0, 0, 0, 0.1);--gumi-hover-lighten: rgba(255, 255, 255, 0.1);--gumi-active-darken: rgba(0, 0, 0, 0.2);--gumi-active-lighten: rgba(255, 255, 255, 0.2)}[data-theme=dark],.dark{--gumi-bg-primary: #000000;--gumi-bg-secondary: #1c1c1e;--gumi-bg-tertiary: #2c2c2e;--gumi-foreground: #ffffff;--gumi-muted: #a1a1aa;--gumi-muted-dark: #71717a;--gumi-primary: #0a84ff;--gumi-primary-rgb: 10, 132, 255;--gumi-primary-hover: #0066cc;--gumi-primary-light: rgba(10, 132, 255, 0.15);--gumi-secondary: #64d2ff;--gumi-success: #30d158;--gumi-warning: #ff9f0a;--gumi-error: #ff453a;--gumi-border: #38383a;--gumi-border-light: #48484a;--gumi-surface: #1c1c1e;--gumi-surface-hover: #2c2c2e;--gumi-surface-dark: #000000;--gumi-background: var(--gumi-bg-primary);--gumi-muted-alpha: rgba(161, 161, 170, 0.15);--gumi-border-dark: #48484a;--gumi-foreground-dark: #e5e5e7;--gumi-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);--gumi-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);--gumi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);--gumi-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);--gumi-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;line-height:1.5;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--gumi-surface);border-radius:var(--gumi-radius-full)}::-webkit-scrollbar-thumb{background:var(--gumi-muted);border-radius:var(--gumi-radius-full);border:3px solid var(--gumi-surface)}::-webkit-scrollbar-thumb:hover{background:var(--gumi-muted-dark)}*{scrollbar-width:thin;scrollbar-color:var(--gumi-muted) var(--gumi-surface)}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}html{scroll-behavior:auto}}body{font-family:var(--gumi-font-sans);background-color:var(--gumi-bg-primary);color:var(--gumi-foreground);font-weight:var(--gumi-font-normal);line-height:var(--gumi-leading-normal);min-height:100vh;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;transition:background-color .3s ease,color .3s ease}:focus{outline:2px solid var(--gumi-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--gumi-primary);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media print{body{background:#fff;color:#000}.header,.footer,.no-print{display:none}}a{color:var(--gumi-primary);text-decoration:none;transition:all var(--gumi-transition-base)}a:hover{color:var(--gumi-primary-hover);text-decoration:underline}a:focus-visible{outline:2px solid var(--gumi-primary);outline-offset:2px;border-radius:var(--gumi-radius-sm)}ul,ol{margin-bottom:var(--gumi-space-4);padding-left:var(--gumi-space-6)}li{margin-bottom:var(--gumi-space-1);color:var(--gumi-muted);line-height:var(--gumi-leading-relaxed)}nav ul,nav ol{list-style:none;padding:0;margin:0}code{font-family:var(--gumi-font-mono);background-color:var(--gumi-surface);color:var(--gumi-secondary);padding:var(--gumi-space-1) var(--gumi-space-2);border-radius:var(--gumi-radius-sm);font-size:var(--gumi-text-sm);border:1px solid var(--gumi-border)}pre{background-color:var(--gumi-surface);color:var(--gumi-foreground);padding:var(--gumi-space-4);border-radius:var(--gumi-radius-lg);overflow-x:auto;margin-bottom:var(--gumi-space-4);border:1px solid var(--gumi-border);line-height:var(--gumi-leading-relaxed);position:relative}pre code{background:none;padding:0;color:var(--gumi-foreground);border:none}table{width:100%;border-collapse:collapse;margin-bottom:var(--gumi-space-4);border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-lg);overflow:hidden}th,td{padding:var(--gumi-space-3);text-align:left;border-bottom:1px solid var(--gumi-border)}th{background-color:var(--gumi-surface);font-weight:var(--gumi-font-semibold);color:var(--gumi-foreground)}td{color:var(--gumi-muted)}tr:hover{background-color:var(--gumi-surface-hover)}img{max-width:100%;height:auto;display:block}.icon{width:1em;height:1em;display:inline-block;fill:currentColor;vertical-align:middle}.icon-sm{width:.875em;height:.875em}.icon-lg{width:1.25em;height:1.25em}.icon-xl{width:1.5em;height:1.5em}h1,h2,h3,h4,h5,h6{font-weight:var(--gumi-font-semibold);line-height:var(--gumi-leading-tight);margin-bottom:var(--gumi-space-2);color:var(--gumi-foreground);letter-spacing:-0.02em}h1{font-size:var(--gumi-text-5xl);font-weight:var(--gumi-font-bold);letter-spacing:-0.04em}h2{font-size:var(--gumi-text-4xl);letter-spacing:-0.03em}h3{font-size:var(--gumi-text-2xl)}h4{font-size:var(--gumi-text-xl)}h5{font-size:var(--gumi-text-lg)}h6{font-size:var(--gumi-text-base)}p{margin-bottom:var(--gumi-space-4);color:var(--gumi-muted);line-height:var(--gumi-leading-relaxed)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-sm{font-size:var(--gumi-text-sm)}.text-lg{font-size:var(--gumi-text-lg)}.text-xl{font-size:var(--gumi-text-xl)}.text-2xl{font-size:var(--gumi-text-2xl)}.text-3xl{font-size:var(--gumi-text-3xl)}.text-4xl{font-size:var(--gumi-text-4xl)}.text-5xl{font-size:var(--gumi-text-5xl)}.text-primary{color:var(--gumi-primary)}.text-secondary{color:var(--gumi-secondary)}.text-success{color:var(--gumi-success)}.text-warning{color:var(--gumi-warning)}.text-error{color:var(--gumi-error)}.text-muted{color:var(--gumi-muted)}.font-light{font-weight:var(--gumi-font-light)}.font-normal{font-weight:var(--gumi-font-normal)}.font-medium{font-weight:var(--gumi-font-medium)}.font-semibold{font-weight:var(--gumi-font-semibold)}.font-bold{font-weight:var(--gumi-font-bold)}.font-sans{font-family:var(--gumi-font-sans)}.font-mono{font-family:var(--gumi-font-mono)}.leading-tight{line-height:var(--gumi-leading-tight)}.leading-normal{line-height:var(--gumi-leading-normal)}.leading-relaxed{line-height:var(--gumi-leading-relaxed)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}input,textarea,select{font-family:inherit;font-size:var(--gumi-text-base);padding:var(--gumi-space-3) var(--gumi-space-4);border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-base);background-color:var(--gumi-surface);color:var(--gumi-foreground);width:100%;transition:all var(--gumi-transition-base)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gumi-primary);box-shadow:0 0 0 3px var(--gumi-primary-light)}input::placeholder,textarea::placeholder,select::placeholder{color:var(--gumi-muted-dark)}input.error,textarea.error,select.error{border-color:var(--gumi-error) !important}input:disabled,textarea:disabled,select:disabled{opacity:.5;cursor:not-allowed}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{-webkit-text-fill-color:var(--gumi-foreground);-webkit-box-shadow:0 0 0px 1000px var(--gumi-surface) inset;transition:background-color 5000s ease-in-out 0s}textarea{resize:vertical;min-height:100px}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--gumi-space-3) center;background-size:20px;padding-right:var(--gumi-space-10)}input[type=checkbox],input[type=radio]{width:18px;height:18px;padding:0;cursor:pointer;margin-right:var(--gumi-space-2);flex-shrink:0}input[type=checkbox]:checked,input[type=radio]:checked{accent-color:var(--gumi-primary)}input[type=radio]{border-radius:50%}label{display:block;margin-bottom:var(--gumi-space-2);font-weight:var(--gumi-font-medium);color:var(--gumi-foreground)}label.inline{display:inline-flex;align-items:center;margin-bottom:0;font-weight:var(--gumi-font-normal)}.form-group{margin-bottom:var(--gumi-space-4)}.form-grid{display:grid;gap:var(--gumi-space-4)}.form-grid-2{grid-template-columns:repeat(2, 1fr)}.form-grid-3{grid-template-columns:repeat(3, 1fr)}@media(max-width: 767px){.form-grid-2,.form-grid-3{grid-template-columns:1fr}}.input-group{display:flex;align-items:stretch}.input-group input{border-radius:0;flex:1}.input-group input:first-child{border-top-left-radius:var(--gumi-radius-base);border-bottom-left-radius:var(--gumi-radius-base)}.input-group input:last-child{border-top-right-radius:var(--gumi-radius-base);border-bottom-right-radius:var(--gumi-radius-base)}.input-group .input-group-text{display:flex;align-items:center;padding:var(--gumi-space-3) var(--gumi-space-4);background-color:var(--gumi-surface-hover);border:1px solid var(--gumi-border);border-radius:0;color:var(--gumi-muted);font-size:var(--gumi-text-sm)}.input-group .input-group-text:first-child{border-top-left-radius:var(--gumi-radius-base);border-bottom-left-radius:var(--gumi-radius-base);border-right:0}.input-group .input-group-text:last-child{border-top-right-radius:var(--gumi-radius-base);border-bottom-right-radius:var(--gumi-radius-base);border-left:0}.switch{position:relative;display:inline-flex;align-items:center;gap:var(--gumi-space-2);cursor:pointer;user-select:none}.switch input{position:absolute;opacity:0;width:0;height:0}.switch input:checked+.switch-slider{background-color:var(--gumi-primary);border-color:var(--gumi-primary)}.switch input:checked+.switch-slider:before{transform:translateX(20px);background-color:#fff}.switch input:focus+.switch-slider{outline:2px solid var(--gumi-primary);outline-offset:2px}.switch input:disabled+.switch-slider{opacity:.5;cursor:not-allowed}.switch input:disabled+.switch-slider:before{opacity:.7}.switch-slider{position:relative;width:44px;height:24px;background-color:var(--gumi-muted-alpha);border:1px solid var(--gumi-border);border-radius:12px;transition:all .2s cubic-bezier(0.4, 0, 0.2, 1)}.switch-slider:before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background-color:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:all .2s cubic-bezier(0.4, 0, 0.2, 1)}.switch-slider:hover:before{box-shadow:0 2px 6px rgba(0,0,0,.15)}.switch.switch-sm .switch-slider{width:36px;height:20px;border-radius:10px}.switch.switch-sm .switch-slider:before{width:14px;height:14px;top:2px;left:2px}.switch.switch-sm input:checked+.switch-slider:before{transform:translateX(16px)}.switch.switch-lg .switch-slider{width:52px;height:28px;border-radius:14px}.switch.switch-lg .switch-slider:before{width:22px;height:22px;top:2px;left:2px}.switch.switch-lg input:checked+.switch-slider:before{transform:translateX(24px)}input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:var(--gumi-radius-full);background:var(--gumi-surface);outline:none;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gumi-primary);cursor:pointer;transition:all var(--gumi-transition-base)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gumi-primary);cursor:pointer;border:none;transition:all var(--gumi-transition-base)}input[type=range]::-moz-range-thumb:hover{transform:scale(1.1)}input[type=file]{padding:var(--gumi-space-2);background:rgba(0,0,0,0);cursor:pointer}input[type=file]::file-selector-button{padding:var(--gumi-space-2) var(--gumi-space-4);margin-right:var(--gumi-space-3);border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-base);background-color:var(--gumi-surface);color:var(--gumi-foreground);font-weight:var(--gumi-font-medium);cursor:pointer;transition:all var(--gumi-transition-base)}input[type=file]::file-selector-button:hover{background-color:var(--gumi-surface-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:var(--gumi-radius-md);font-size:var(--gumi-text-sm);font-weight:var(--gumi-font-medium);font-family:inherit;line-height:1;height:2.5rem;padding:0 1rem;border:1px solid rgba(0,0,0,0);cursor:pointer;text-decoration:none;transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--gumi-foreground);color:var(--gumi-background);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.btn:focus{outline:2px solid var(--gumi-primary);outline-offset:2px}.btn:focus:not(:focus-visible){outline:none}.btn:focus-visible{outline:2px solid var(--gumi-primary);outline-offset:2px}.btn:disabled{pointer-events:none;opacity:.5;cursor:not-allowed}.btn:hover:not(:disabled){opacity:.9}.btn:active:not(:disabled){opacity:.8}.btn.btn-sm{height:2rem;padding:0 .75rem;font-size:var(--gumi-text-xs)}.btn.btn-lg{height:3rem;padding:0 1.5rem;font-size:var(--gumi-text-base)}.btn.btn-icon{width:2.5rem;padding:0}.btn.btn-icon.btn-sm{width:2rem;height:2rem}.btn.btn-icon.btn-lg{width:3rem;height:3rem}.btn.btn-secondary{background-color:var(--gumi-bg-secondary);color:var(--gumi-foreground);box-shadow:none}.btn.btn-secondary:hover:not(:disabled){background-color:var(--gumi-bg-tertiary)}.btn.btn-secondary:active:not(:disabled){background-color:var(--gumi-bg-tertiary);opacity:.9}.btn.btn-outline{background-color:rgba(0,0,0,0);color:var(--gumi-foreground);border:2px solid var(--gumi-foreground);box-shadow:none}.btn.btn-outline:hover:not(:disabled){background-color:var(--gumi-hover-darken)}.btn.btn-outline:active:not(:disabled){background-color:var(--gumi-active-darken)}.btn.btn-ghost{background-color:rgba(0,0,0,0);color:var(--gumi-foreground);border:1px solid rgba(0,0,0,0);box-shadow:none}.btn.btn-ghost:hover:not(:disabled){background-color:var(--gumi-bg-secondary)}.btn.btn-ghost:active:not(:disabled){background-color:var(--gumi-bg-tertiary)}.btn.btn-link{background-color:rgba(0,0,0,0);color:var(--gumi-primary);border:1px solid rgba(0,0,0,0);text-decoration:underline;text-underline-offset:4px;height:auto;box-shadow:none}.btn.btn-link:hover:not(:disabled){opacity:.8}.btn.btn-link:active:not(:disabled){opacity:.6}.btn.btn-destructive{background-color:var(--gumi-error);color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.btn.btn-destructive:hover:not(:disabled){opacity:.9}.btn.btn-destructive:active:not(:disabled){opacity:.8}.btn.btn-success{background-color:var(--gumi-success);color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.btn.btn-success:hover:not(:disabled){opacity:.9}.btn.btn-success:active:not(:disabled){opacity:.8}.btn.btn-warning{background-color:var(--gumi-warning);color:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.btn.btn-warning:hover:not(:disabled){opacity:.9}.btn.btn-warning:active:not(:disabled){opacity:.8}.btn[data-loading=true]{position:relative;color:rgba(0,0,0,0) !important;pointer-events:none}.btn[data-loading=true]::after{content:"";position:absolute;width:1rem;height:1rem;top:50%;left:50%;margin-left:-0.5rem;margin-top:-0.5rem;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;animation:button-loading-spinner .8s linear infinite}.btn[data-loading=true]::before{content:"";position:absolute;width:1rem;height:1rem;top:50%;left:50%;margin-left:-0.5rem;margin-top:-0.5rem;border:2px solid rgba(0,0,0,0);border-top-color:currentColor;border-radius:50%;animation:button-loading-spinner .8s linear infinite}.btn[data-loading=true]:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-link):not(.btn-destructive):not(.btn-success):not(.btn-warning)::before{border-top-color:var(--gumi-background)}.btn.btn-secondary[data-loading=true]::after,.btn.btn-ghost[data-loading=true]::after{border-color:rgba(0,0,0,.1)}.btn.btn-secondary[data-loading=true]::before,.btn.btn-ghost[data-loading=true]::before{border-top-color:var(--gumi-foreground)}.btn.btn-outline[data-loading=true]::after{border-color:rgba(0,0,0,0)}.btn.btn-outline[data-loading=true]::before{border-top-color:var(--gumi-foreground)}@keyframes button-loading-spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.btn-group{display:inline-flex}.btn-group>.btn:not(:first-child){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:hover,.btn-group>.btn:focus{z-index:1}.btn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn.btn-sm svg{width:.875rem;height:.875rem}.btn.btn-lg svg{width:1.125rem;height:1.125rem}.btn-with-icon{gap:.5rem}.btn-block{width:100%}[data-theme=dark] .btn.btn-outline:hover:not(:disabled){background-color:var(--gumi-hover-lighten)}[data-theme=dark] .btn.btn-outline:active:not(:disabled){background-color:var(--gumi-active-lighten)}.fab{position:fixed;bottom:var(--gumi-space-6);right:var(--gumi-space-6);width:3.5rem;height:3.5rem;border-radius:var(--gumi-radius-full);background-color:var(--gumi-foreground);color:var(--gumi-background);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--gumi-shadow-lg);z-index:var(--gumi-z-fixed);transition:all 150ms ease}.fab:hover{opacity:.9;box-shadow:var(--gumi-shadow-xl)}.fab.fab-sm{width:2.5rem;height:2.5rem}.fab.fab-extended{width:auto;padding:0 var(--gumi-space-6);gap:var(--gumi-space-2)}.btn-close{background:rgba(0,0,0,0);border:none;width:2rem;height:2rem;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--gumi-radius-sm);color:var(--gumi-muted);transition:all 150ms ease}.btn-close:hover{background-color:var(--gumi-bg-secondary);color:var(--gumi-foreground)}.btn-close svg{width:1.25rem;height:1.25rem}.card{background:var(--gumi-bg-primary);border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-lg);padding:var(--gumi-space-6)}.card-sm{padding:var(--gumi-space-4)}.card-lg{padding:var(--gumi-space-8)}.card-header{padding:var(--gumi-space-4) var(--gumi-space-6);margin:calc(var(--gumi-space-6)*-1) calc(var(--gumi-space-6)*-1) var(--gumi-space-4);border-bottom:1px solid var(--gumi-border);font-weight:var(--gumi-font-semibold)}.card-footer{padding:var(--gumi-space-4) var(--gumi-space-6);margin:var(--gumi-space-4) calc(var(--gumi-space-6)*-1) calc(var(--gumi-space-6)*-1);border-top:1px solid var(--gumi-border)}.badge{display:inline-flex;align-items:center;padding:var(--gumi-space-1) var(--gumi-space-3);border-radius:var(--gumi-radius-full);background:var(--gumi-primary-light);color:var(--gumi-primary);font-size:var(--gumi-text-xs);font-weight:var(--gumi-font-medium)}.badge-secondary{background:var(--gumi-surface);color:var(--gumi-muted);border:1px solid var(--gumi-border)}.badge-success{background:rgba(52,199,89,.1);color:var(--gumi-success)}.badge-warning{background:rgba(255,149,0,.1);color:var(--gumi-warning)}.badge-error{background:rgba(255,59,48,.1);color:var(--gumi-error)}.badge-lg{padding:var(--gumi-space-2) var(--gumi-space-4);font-size:var(--gumi-text-sm)}.badge-pill{padding-left:var(--gumi-space-4);padding-right:var(--gumi-space-4)}.alert{padding:var(--gumi-space-4) var(--gumi-space-6);border-radius:var(--gumi-radius-lg);margin-bottom:var(--gumi-space-4);display:flex;align-items:center;gap:var(--gumi-space-3);border:1px solid}.alert svg{width:20px;height:20px;flex-shrink:0}.alert-info{background-color:var(--gumi-primary-light);color:var(--gumi-primary);border-color:var(--gumi-primary)}.alert-success{background-color:rgba(52,199,89,.1);color:var(--gumi-success);border-color:var(--gumi-success)}.alert-warning{background-color:rgba(255,149,0,.1);color:var(--gumi-warning);border-color:var(--gumi-warning)}.alert-error{background-color:rgba(255,59,48,.1);color:var(--gumi-error);border-color:var(--gumi-error)}.alert-dismissible{padding-right:var(--gumi-space-12);position:relative}.alert-dismissible .btn-close{position:absolute;top:var(--gumi-space-3);right:var(--gumi-space-3)}.progress{width:100%;height:6px;background-color:var(--gumi-surface);border-radius:var(--gumi-radius-full);overflow:hidden;margin-bottom:var(--gumi-space-4)}.progress-bar{height:100%;background-color:var(--gumi-primary);border-radius:var(--gumi-radius-full);transition:width .3s ease,background-color .3s ease}.progress-sm{height:4px}.progress-lg{height:10px}.progress-striped .progress-bar{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:1rem 1rem}.progress-animated .progress-bar{animation:progress-bar-stripes 1s linear infinite}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.tabs{margin-bottom:var(--gumi-space-4)}.tabs .tab-list{display:flex;border-bottom:1px solid var(--gumi-border)}.tabs .tab-list.tabs-vertical{flex-direction:column;border-bottom:none;border-right:1px solid var(--gumi-border);margin-right:var(--gumi-space-4)}.tabs .tab-content{position:relative;overflow:hidden}.tab-button{padding:var(--gumi-space-3) var(--gumi-space-6);border:none;background:none;color:var(--gumi-muted);cursor:pointer;font-weight:var(--gumi-font-medium);position:relative;transition:all .2s ease}.tab-button:hover{color:var(--gumi-foreground);background:var(--gumi-muted-alpha)}.tab-button.active{color:var(--gumi-primary)}.tab-button.active::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--gumi-primary);transition:all .2s ease}.tabs-vertical .tab-button.active::after{bottom:0;right:-1px;left:auto;width:2px;height:100%}.tab-pane{display:none}.tab-pane.active{display:block}.tab-pane.tab-panel-enter{opacity:0;transform:translateX(10px);transition:opacity .2s ease,transform .2s ease}.tab-pane.tab-panel-exit{opacity:1;transform:translateX(0);transition:opacity .15s ease,transform .15s ease}.accordion{border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-lg);overflow:hidden;margin-bottom:var(--gumi-space-4)}.accordion-item{border-bottom:1px solid var(--gumi-border)}.accordion-item:last-child{border-bottom:none}.accordion-header{padding:var(--gumi-space-4) var(--gumi-space-6);background:var(--gumi-surface);cursor:pointer;display:flex;align-items:center;font-weight:var(--gumi-font-medium);transition:background-color .2s ease;border:none;width:100%;text-align:left}.accordion-header:hover{background:var(--gumi-muted-alpha)}.accordion-header:focus{outline:2px solid var(--gumi-primary);outline-offset:-2px}.accordion-content{padding:var(--gumi-space-4) var(--gumi-space-6);display:none}.accordion-item.active .accordion-content{display:block}.accordion-item.active .accordion-icon{transform:rotate(180deg)}.accordion-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(0.4, 0, 0.2, 1);margin-left:auto}.accordion-icon svg{width:100%;height:100%}.skeleton{background:linear-gradient(90deg, var(--gumi-surface) 25%, var(--gumi-surface-hover) 50%, var(--gumi-surface) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--gumi-radius-base)}.skeleton-text{height:1em;margin-bottom:var(--gumi-space-2)}.skeleton-title{height:2em;margin-bottom:var(--gumi-space-4)}.skeleton-button{height:44px;width:120px}.skeleton-avatar{width:48px;height:48px;border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--gumi-border);border-radius:50%;border-top-color:var(--gumi-primary);animation:gumi-spin .8s linear infinite}.spinner-sm{width:16px;height:16px}.spinner-lg{width:32px;height:32px;border-width:3px}@keyframes gumi-spin{to{transform:rotate(360deg)}}.tooltip{position:relative;display:inline-block}.tooltip-text{visibility:hidden;background-color:var(--gumi-surface-dark);color:var(--gumi-foreground);text-align:center;padding:var(--gumi-space-2) var(--gumi-space-3);border-radius:var(--gumi-radius-base);position:absolute;z-index:var(--gumi-z-tooltip);bottom:125%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:var(--gumi-text-sm);opacity:0;transition:opacity .3s}.tooltip-text::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--gumi-surface-dark) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}.dropdown{position:relative;display:inline-block}.dropdown:hover .dropdown-menu{display:block;opacity:1;visibility:visible;transform:translateY(0)}.dropdown:hover .dropdown-toggle,.dropdown .dropdown-toggle:focus{background:var(--gumi-surface-hover);border-color:var(--gumi-primary)}.dropdown:hover .dropdown-icon{transform:rotate(180deg)}.dropdown.dropdown-click:hover .dropdown-menu{display:none;opacity:0;visibility:hidden;transform:translateY(-10px)}.dropdown.dropdown-click:hover .dropdown-icon{transform:none}.dropdown.dropdown-click.active .dropdown-menu{display:block;opacity:1;visibility:visible;transform:translateY(0)}.dropdown.dropdown-click.active .dropdown-icon{transform:rotate(180deg)}.dropdown.dropdown-click.active .dropdown-toggle{background:var(--gumi-surface-hover);border-color:var(--gumi-primary)}.dropdown-toggle{display:inline-flex;align-items:center;gap:var(--gumi-space-2);padding:var(--gumi-space-3) var(--gumi-space-4);background:var(--gumi-surface);border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-base);color:var(--gumi-foreground);text-decoration:none;cursor:pointer;transition:all .2s ease}.dropdown-toggle:focus{outline:2px solid var(--gumi-primary);outline-offset:2px}.dropdown-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;margin-left:auto}.dropdown-icon svg{width:100%;height:100%}.dropdown-menu{display:none;position:absolute;top:calc(100% - 2px);left:0;min-width:180px;padding:var(--gumi-space-1);background:var(--gumi-surface);border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-lg);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:1000;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);backdrop-filter:blur(12px);background:hsla(0,0%,100%,.95)}[data-theme=dark] .dropdown-menu{background:rgba(28,28,30,.95);border-color:hsla(0,0%,100%,.1)}.dropdown-item{display:flex;align-items:center;width:100%;padding:var(--gumi-space-2) var(--gumi-space-3);margin:2px;color:var(--gumi-foreground);text-decoration:none;border:none;background:none;cursor:pointer;border-radius:var(--gumi-radius-base);font-size:var(--gumi-text-sm);transition:all .15s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden}.dropdown-item::before{content:"";position:absolute;inset:0;background:var(--gumi-primary);opacity:0;transition:opacity .15s ease}.dropdown-item:hover,.dropdown-item:focus{color:var(--gumi-foreground);outline:none;transform:translateX(2px)}.dropdown-item:hover::before,.dropdown-item:focus::before{opacity:.08}.dropdown-item:active{transform:translateX(2px) scale(0.98)}.dropdown-item:active::before{opacity:.12}.dropdown-item[disabled]{color:var(--gumi-muted);cursor:not-allowed;opacity:.5}.dropdown-item[disabled]:hover{transform:none}.dropdown-item[disabled]:hover::before{opacity:0}.dropdown-item svg,.dropdown-item .icon{width:16px;height:16px;margin-right:var(--gumi-space-2);flex-shrink:0}.dropdown-divider{height:1px;margin:var(--gumi-space-2) var(--gumi-space-1);background:linear-gradient(to right, transparent, var(--gumi-border) 20%, var(--gumi-border) 80%, transparent)}.dropdown-header{display:block;padding:var(--gumi-space-2) var(--gumi-space-3);margin-bottom:var(--gumi-space-1);color:var(--gumi-muted);font-size:var(--gumi-text-xs);font-weight:var(--gumi-font-semibold);text-transform:uppercase;letter-spacing:.05em;opacity:.7}.dropdown-submenu{position:relative}.dropdown-submenu:hover>.dropdown-menu{display:block;opacity:1;visibility:visible;transform:translateY(0)}.dropdown-submenu .dropdown-submenu-icon{width:16px;height:16px;margin-left:auto}.dropdown-submenu .dropdown-submenu-icon svg{width:100%;height:100%}.dropdown-submenu .dropdown-menu{top:0;left:100%;margin-left:var(--gumi-space-1);margin-top:0}.dropdown-menu-end{right:0;left:auto}.dropdown-menu-dark{background:var(--gumi-surface-dark);border-color:var(--gumi-border-dark)}.dropdown-menu-dark .dropdown-item{color:var(--gumi-foreground-dark)}.dropdown-menu-dark .dropdown-item:hover,.dropdown-menu-dark .dropdown-item:focus{background:hsla(0,0%,100%,.1)}.dropdown-menu-dark .dropdown-divider{background:var(--gumi-border-dark)}.btn-group{position:relative;display:inline-flex;vertical-align:middle}.btn-group .btn+.btn{margin-left:-1px}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0}.btn-group .btn:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group .btn:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle-split{padding-left:var(--gumi-space-2);padding-right:var(--gumi-space-2)}.btn-group .dropdown-toggle-split::after{margin-left:0}@media(max-width: 639px){.dropdown-menu{min-width:calc(100vw - 32px);max-width:calc(100vw - 32px);left:50% !important;transform:translateX(-50%)}.dropdown-menu.show{transform:translateX(-50%) translateY(0)}}.container{max-width:var(--gumi-container-xl);margin:0 auto;padding:0 var(--gumi-space-fluid-sm);width:100%}.container-sm{max-width:var(--gumi-container-sm)}.container-md{max-width:var(--gumi-container-md)}.container-lg{max-width:var(--gumi-container-lg)}.container-2xl{max-width:var(--gumi-container-2xl)}.container-fluid{max-width:100%}.content{padding:var(--gumi-space-fluid-md) 0}.section{padding:var(--gumi-space-fluid-lg) 0}.header{position:relative;z-index:var(--gumi-z-sticky);backdrop-filter:blur(20px);background:var(--gumi-background);border-bottom:1px solid var(--gumi-border);padding:var(--gumi-space-4) 0;transition:all var(--gumi-transition-base)}.header.lock-header{position:sticky;top:0}.navbar{display:flex;align-items:center;justify-content:space-between;gap:var(--gumi-space-4)}.navbar-brand{display:flex;align-items:center;gap:var(--gumi-space-3);font-weight:var(--gumi-font-semibold);font-size:var(--gumi-text-lg);color:var(--gumi-foreground);text-decoration:none}.navbar-brand:hover{text-decoration:none}.navbar-nav{display:flex;align-items:center;list-style:none;padding:0;margin:0;gap:var(--gumi-space-6)}.navbar-link{color:var(--gumi-muted);font-weight:var(--gumi-font-medium);text-decoration:none;transition:all var(--gumi-transition-base)}.navbar-link:hover,.navbar-link.active{color:var(--gumi-foreground);text-decoration:none}.navbar-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--gumi-space-2);color:var(--gumi-foreground)}@media(max-width: 767px){.navbar-toggle{display:block}}@media(max-width: 767px){.navbar{flex-wrap:wrap}.navbar-nav{flex-basis:100%;flex-direction:column;gap:var(--gumi-space-3);padding:var(--gumi-space-4) 0;display:none}.navbar-nav.show{display:flex}}.sidebar{position:fixed;top:0;left:0;height:100vh;width:260px;background:var(--gumi-surface);border-right:1px solid var(--gumi-border);padding:var(--gumi-space-6);overflow-y:auto;z-index:var(--gumi-z-fixed);transform:translateX(-100%);transition:all var(--gumi-transition-base)}.sidebar.show{transform:translateX(0)}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:var(--gumi-z-fixed-1);opacity:0;visibility:hidden;transition:all var(--gumi-transition-base)}.sidebar-overlay.show{opacity:1;visibility:visible}@media(min-width: 1024px){.sidebar{position:sticky;top:var(--gumi-space-4);height:auto;transform:none;z-index:auto}}.hero{padding:var(--gumi-space-fluid-xl) 0;text-align:center;background:radial-gradient(ellipse at center, var(--gumi-primary-light) 0%, transparent 70%)}.hero h1{margin-bottom:var(--gumi-space-4);background:linear-gradient(135deg, var(--gumi-foreground), var(--gumi-primary));-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.hero p{max-width:600px;margin:0 auto var(--gumi-space-8)}.footer{padding:var(--gumi-space-16) 0;border-top:1px solid var(--gumi-border);background:var(--gumi-surface);margin-top:auto}.footer-links{display:flex;gap:var(--gumi-space-6);justify-content:center;flex-wrap:wrap;margin-bottom:var(--gumi-space-4)}.footer-links a{color:var(--gumi-muted)}.footer-links a:hover{color:var(--gumi-foreground)}.grid{display:grid;gap:var(--gumi-space-4)}.grid-cols-1{grid-template-columns:repeat(1, 1fr)}.grid-cols-2{grid-template-columns:repeat(2, 1fr)}.grid-cols-3{grid-template-columns:repeat(3, 1fr)}.grid-cols-4{grid-template-columns:repeat(4, 1fr)}.grid-cols-5{grid-template-columns:repeat(5, 1fr)}.grid-cols-6{grid-template-columns:repeat(6, 1fr)}@media(max-width: 639px){.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-5,.grid-cols-6{grid-template-columns:1fr}}@media(min-width: 640px)and (max-width: 767px){.grid-cols-3,.grid-cols-4,.grid-cols-5,.grid-cols-6{grid-template-columns:repeat(2, 1fr)}}@media(min-width: 768px)and (max-width: 1023px){.grid-cols-4,.grid-cols-5,.grid-cols-6{grid-template-columns:repeat(3, 1fr)}}@media(min-width: 640px){.grid-sm-cols-1{grid-template-columns:repeat(1, 1fr)}.grid-sm-cols-2{grid-template-columns:repeat(2, 1fr)}.grid-sm-cols-3{grid-template-columns:repeat(3, 1fr)}}@media(min-width: 768px){.grid-md-cols-1{grid-template-columns:repeat(1, 1fr)}.grid-md-cols-2{grid-template-columns:repeat(2, 1fr)}.grid-md-cols-3{grid-template-columns:repeat(3, 1fr)}.grid-md-cols-4{grid-template-columns:repeat(4, 1fr)}}@media(min-width: 1024px){.grid-lg-cols-1{grid-template-columns:repeat(1, 1fr)}.grid-lg-cols-2{grid-template-columns:repeat(2, 1fr)}.grid-lg-cols-3{grid-template-columns:repeat(3, 1fr)}.grid-lg-cols-4{grid-template-columns:repeat(4, 1fr)}.grid-lg-cols-5{grid-template-columns:repeat(5, 1fr)}.grid-lg-cols-6{grid-template-columns:repeat(6, 1fr)}}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1}.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-baseline{align-items:baseline}.items-stretch{align-items:stretch}.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}.gap-0{gap:0}.gap-1{gap:var(--gumi-space-1)}.gap-2{gap:var(--gumi-space-2)}.gap-3{gap:var(--gumi-space-3)}.gap-4{gap:var(--gumi-space-4)}.gap-5{gap:var(--gumi-space-5)}.gap-6{gap:var(--gumi-space-6)}.gap-8{gap:var(--gumi-space-8)}@media(min-width: 640px){.flex-sm-row{flex-direction:row}.flex-sm-col{flex-direction:column}.flex-sm-wrap{flex-wrap:wrap}.flex-sm-nowrap{flex-wrap:nowrap}.items-sm-start{align-items:flex-start}.items-sm-center{align-items:center}.items-sm-end{align-items:flex-end}.justify-sm-start{justify-content:flex-start}.justify-sm-center{justify-content:center}.justify-sm-end{justify-content:flex-end}.justify-sm-between{justify-content:space-between}}@media(min-width: 768px){.flex-md-row{flex-direction:row}.flex-md-col{flex-direction:column}.flex-md-wrap{flex-wrap:wrap}.flex-md-nowrap{flex-wrap:nowrap}.items-md-start{align-items:flex-start}.items-md-center{align-items:center}.items-md-end{align-items:flex-end}.justify-md-start{justify-content:flex-start}.justify-md-center{justify-content:center}.justify-md-end{justify-content:flex-end}.justify-md-between{justify-content:space-between}}@media(min-width: 1024px){.flex-lg-row{flex-direction:row}.flex-lg-col{flex-direction:column}.flex-lg-wrap{flex-wrap:wrap}.flex-lg-nowrap{flex-wrap:nowrap}.items-lg-start{align-items:flex-start}.items-lg-center{align-items:center}.items-lg-end{align-items:flex-end}.justify-lg-start{justify-content:flex-start}.justify-lg-center{justify-content:center}.justify-lg-end{justify-content:flex-end}.justify-lg-between{justify-content:space-between}}@media(min-width: 640px){.p-sm-0{padding:0}.p-sm-1{padding:var(--gumi-space-1)}.p-sm-2{padding:var(--gumi-space-2)}.p-sm-3{padding:var(--gumi-space-3)}.p-sm-4{padding:var(--gumi-space-4)}.p-sm-6{padding:var(--gumi-space-6)}.p-sm-8{padding:var(--gumi-space-8)}.m-sm-0{margin:0}.m-sm-1{margin:var(--gumi-space-1)}.m-sm-2{margin:var(--gumi-space-2)}.m-sm-3{margin:var(--gumi-space-3)}.m-sm-4{margin:var(--gumi-space-4)}.m-sm-6{margin:var(--gumi-space-6)}.m-sm-8{margin:var(--gumi-space-8)}}@media(min-width: 768px){.p-md-0{padding:0}.p-md-1{padding:var(--gumi-space-1)}.p-md-2{padding:var(--gumi-space-2)}.p-md-3{padding:var(--gumi-space-3)}.p-md-4{padding:var(--gumi-space-4)}.p-md-6{padding:var(--gumi-space-6)}.p-md-8{padding:var(--gumi-space-8)}.m-md-0{margin:0}.m-md-1{margin:var(--gumi-space-1)}.m-md-2{margin:var(--gumi-space-2)}.m-md-3{margin:var(--gumi-space-3)}.m-md-4{margin:var(--gumi-space-4)}.m-md-6{margin:var(--gumi-space-6)}.m-md-8{margin:var(--gumi-space-8)}}@media(min-width: 1024px){.p-lg-0{padding:0}.p-lg-1{padding:var(--gumi-space-1)}.p-lg-2{padding:var(--gumi-space-2)}.p-lg-3{padding:var(--gumi-space-3)}.p-lg-4{padding:var(--gumi-space-4)}.p-lg-6{padding:var(--gumi-space-6)}.p-lg-8{padding:var(--gumi-space-8)}.m-lg-0{margin:0}.m-lg-1{margin:var(--gumi-space-1)}.m-lg-2{margin:var(--gumi-space-2)}.m-lg-3{margin:var(--gumi-space-3)}.m-lg-4{margin:var(--gumi-space-4)}.m-lg-6{margin:var(--gumi-space-6)}.m-lg-8{margin:var(--gumi-space-8)}}@media(min-width: 640px){.text-sm-left{text-align:left}.text-sm-center{text-align:center}.text-sm-right{text-align:right}}@media(min-width: 768px){.text-md-left{text-align:left}.text-md-center{text-align:center}.text-md-right{text-align:right}}@media(min-width: 1024px){.text-lg-left{text-align:left}.text-lg-center{text-align:center}.text-lg-right{text-align:right}}.dropdown{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;left:0;background:var(--gumi-bg-primary);border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-lg);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1),0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);min-width:200px;z-index:var(--gumi-z-dropdown);display:none;opacity:0;transform:translateY(-10px) scale(0.95);transform-origin:top center;padding:var(--gumi-space-2);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95)}@supports(backdrop-filter: blur(10px)){.dropdown-menu{background:hsla(0,0%,100%,.85)}}.dropdown-menu.show{display:block}[data-theme=dark] .dropdown-menu{background:rgba(28,28,30,.95);border-color:hsla(0,0%,100%,.1)}@supports(backdrop-filter: blur(10px)){[data-theme=dark] .dropdown-menu{background:rgba(28,28,30,.9)}}.dropdown-item{display:flex;align-items:center;gap:var(--gumi-space-3);width:100%;padding:var(--gumi-space-3) var(--gumi-space-4);color:var(--gumi-foreground);text-decoration:none;border:none;background:none;cursor:pointer;font-size:var(--gumi-text-base);font-weight:var(--gumi-font-normal);transition:all .15s cubic-bezier(0.4, 0, 0.2, 1);border-radius:var(--gumi-radius-base);margin:var(--gumi-space-1) 0;position:relative;overflow:hidden}.dropdown-item::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--gumi-primary);opacity:0;transition:opacity .15s cubic-bezier(0.4, 0, 0.2, 1);z-index:-1}.dropdown-item:hover,.dropdown-item:focus{color:var(--gumi-foreground);outline:none;transform:translateX(2px)}.dropdown-item:hover::before,.dropdown-item:focus::before{opacity:.08}.dropdown-item:active{transform:translateX(2px) scale(0.98)}.dropdown-item:active::before{opacity:.12}.dropdown-item.active{color:var(--gumi-primary);font-weight:var(--gumi-font-medium)}.dropdown-item.active::before{opacity:.1}.dropdown-item:disabled{color:var(--gumi-muted);cursor:not-allowed;opacity:.5}.dropdown-item:disabled:hover{transform:none}.dropdown-item:disabled:hover::before{opacity:0}.dropdown-item .dropdown-item-icon{width:20px;height:20px;flex-shrink:0;opacity:.8}.dropdown-item .dropdown-item-icon svg{width:100%;height:100%}.dropdown-item .dropdown-item-label{flex:1;text-align:left}.dropdown-item .dropdown-item-badge{margin-left:auto;font-size:var(--gumi-text-xs);padding:var(--gumi-space-1) var(--gumi-space-2);background:var(--gumi-primary);color:#fff;border-radius:var(--gumi-radius-full);line-height:1}.dropdown-divider{height:1px;margin:var(--gumi-space-3) var(--gumi-space-2);background:linear-gradient(to right, transparent, var(--gumi-border) 20%, var(--gumi-border) 80%, transparent)}.dropdown-header{display:block;padding:var(--gumi-space-2) var(--gumi-space-4);margin-bottom:var(--gumi-space-2);color:var(--gumi-muted);font-size:var(--gumi-text-xs);font-weight:var(--gumi-font-semibold);text-transform:uppercase;letter-spacing:.1em;opacity:.7}.dropdown-trigger,[data-dropdown]{position:relative}.dropdown-trigger .dropdown-icon,.dropdown-trigger .dropdown-arrow,[data-dropdown] .dropdown-icon,[data-dropdown] .dropdown-arrow{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:var(--gumi-space-2);transition:transform .2s cubic-bezier(0.4, 0, 0.2, 1)}.dropdown-trigger .dropdown-icon svg,.dropdown-trigger .dropdown-arrow svg,[data-dropdown] .dropdown-icon svg,[data-dropdown] .dropdown-arrow svg{width:14px;height:14px}.dropdown-trigger[aria-expanded=true] .dropdown-icon,.dropdown-trigger[aria-expanded=true] .dropdown-arrow,[data-dropdown][aria-expanded=true] .dropdown-icon,[data-dropdown][aria-expanded=true] .dropdown-arrow{transform:rotate(180deg)}.dropdown-menu-compact{padding:var(--gumi-space-1)}.dropdown-menu-compact .dropdown-item{padding:var(--gumi-space-2) var(--gumi-space-3);font-size:var(--gumi-text-sm);margin:2px 0}.dropdown-menu-compact .dropdown-divider{margin:var(--gumi-space-2) var(--gumi-space-1)}.dropdown-menu-wide{min-width:300px}.dropdown-menu-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--gumi-space-2);padding:var(--gumi-space-3)}.dropdown-menu-grid .dropdown-item{flex-direction:column;text-align:center;padding:var(--gumi-space-3)}.dropdown-menu-grid .dropdown-item .dropdown-item-icon{width:32px;height:32px;margin-bottom:var(--gumi-space-2)}.dropdown-menu-end{right:0;left:auto}.dropdown-menu-center{left:50%;transform:translateX(-50%) translateY(-10px) scale(0.95)}.dropdown-menu-center.show{transform:translateX(-50%) translateY(0) scale(1)}@media(max-width: 640px){.dropdown-menu{position:fixed;top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;width:100%;max-width:100%;border-radius:var(--gumi-radius-lg) var(--gumi-radius-lg) 0 0;transform:translateY(100%);box-shadow:0 -20px 25px -5px rgba(0,0,0,.1),0 -8px 10px -6px rgba(0,0,0,.1)}.dropdown-menu.show{transform:translateY(0)}.dropdown-menu::before{content:"";position:absolute;top:var(--gumi-space-2);left:50%;transform:translateX(-50%);width:40px;height:4px;background:var(--gumi-border);border-radius:var(--gumi-radius-full)}}.accordion{border:1px solid var(--gumi-border);border-radius:var(--gumi-radius-lg);overflow:hidden;background:var(--gumi-bg-primary)}.accordion-item{border-bottom:1px solid var(--gumi-border)}.accordion-item:last-child{border-bottom:none}.accordion-header{width:100%;padding:var(--gumi-space-4) var(--gumi-space-6);background:rgba(0,0,0,0);border:none;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:var(--gumi-font-medium);color:var(--gumi-foreground);transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);position:relative}.accordion-header::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gumi-primary);transform:scaleY(0);transition:transform .2s cubic-bezier(0.4, 0, 0.2, 1)}.accordion-header:hover{background-color:var(--gumi-surface-hover)}.accordion-header.active{color:var(--gumi-foreground)}.accordion-header.active::before{transform:scaleY(1)}.accordion-header .accordion-icon{transition:transform .2s cubic-bezier(0.4, 0, 0.2, 1)}.accordion-header .accordion-icon svg{width:20px;height:20px}.accordion-header.active .accordion-icon{transform:rotate(180deg)}.accordion-content{padding:0 var(--gumi-space-6);background:var(--gumi-bg-primary);max-height:0;overflow:hidden;opacity:0;transition:max-height .3s cubic-bezier(0.4, 0, 0.2, 1),padding .3s cubic-bezier(0.4, 0, 0.2, 1),opacity .3s cubic-bezier(0.4, 0, 0.2, 1)}.accordion-content p{margin-bottom:var(--gumi-space-4);color:var(--gumi-muted);line-height:var(--gumi-leading-relaxed)}.accordion-item.active .accordion-content{max-height:500px;padding:var(--gumi-space-4) var(--gumi-space-6);opacity:1}.tabs{width:100%}.tab-list{display:flex;border-bottom:1px solid var(--gumi-border);margin-bottom:var(--gumi-space-4);position:relative}.tab-button{padding:var(--gumi-space-3) var(--gumi-space-6);background:none;border:none;border-bottom:2px solid rgba(0,0,0,0);cursor:pointer;font-weight:var(--gumi-font-medium);color:var(--gumi-muted);transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);position:relative}.tab-button::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--gumi-primary);transform:scaleX(0);transition:transform .2s cubic-bezier(0.4, 0, 0.2, 1)}.tab-button:hover{color:var(--gumi-foreground);background-color:var(--gumi-surface-hover)}.tab-button.active{color:var(--gumi-primary)}.tab-button.active::after{transform:scaleX(1)