@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--primary: #3b82f6;--primary-glow: rgba(59, 130, 246, .4);--secondary: #6366f1;--bg: #0f172a;--card-bg: rgba(30, 41, 59, 1);--text: #f8fafc;--text-dim: #94a3b8;--border: rgba(255, 255, 255, .1);--border-active: rgba(59, 130, 246, .5);--glass: rgba(15, 23, 42, .6);--hover-overlay: rgba(255, 255, 255, .1);--shadow-heavy: rgba(0, 0, 0, .5);--mobile-sheet-bg: rgba(15, 23, 42, 1);--radius: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:light){:root{--bg: #f1f5f9;--card-bg: rgba(255, 255, 255, 1);--text: #0f172a;--text-dim: #64748b;--border: rgba(0, 0, 0, .1);--glass: rgba(255, 255, 255, .8);--hover-overlay: rgba(0, 0, 0, .05);--shadow-heavy: rgba(0, 0, 0, .15);--mobile-sheet-bg: rgba(255, 255, 255, 1)}}*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg);color:var(--text);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;background-image:radial-gradient(at 0% 0%,rgba(59,130,246,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(99,102,241,.15) 0px,transparent 50%)}#root{width:100%;max-width:1200px}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;-moz-appearance:none;appearance:none;-webkit-appearance:none}input{font-family:inherit;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.scroll-columns:after{content:"";position:absolute;top:44px;left:5%;width:90%;height:32px;background:var(--hover-overlay);border-top:1px solid var(--border);border-bottom:1px solid var(--border);pointer-events:none;border-radius:8px;transform:none}.datepicker-wrapper,.datepicker-wrapper *,.timepicker-wrapper,.timepicker-wrapper *,.datepicker-mobile-portal,.datepicker-mobile-portal *,.timepicker-mobile-portal,.timepicker-mobile-portal *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text)}.datepicker-wrapper button,.timepicker-wrapper button{cursor:pointer;border:none;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;outline:none;color:inherit}.datepicker-wrapper input,.timepicker-wrapper input{outline:none;border:none;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;box-shadow:none;color:inherit}:root,.datepicker-wrapper,.timepicker-wrapper,.datepicker-mobile-portal,.timepicker-mobile-portal{--primary: #3b82f6;--primary-glow: rgba(59, 130, 246, .4);--secondary: #6366f1;--bg: #0f172a;--card-bg: rgba(30, 41, 59, 1);--text: #f8fafc;--text-dim: #94a3b8;--border: rgba(255, 255, 255, .1);--border-active: rgba(59, 130, 246, .5);--glass: rgba(15, 23, 42, .6);--hover-overlay: rgba(255, 255, 255, .1);--shadow-heavy: rgba(0, 0, 0, .5);--mobile-sheet-bg: rgba(15, 23, 42, 1);--radius: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:light){:root:not(.dark-theme),.datepicker-wrapper:not(.dark-theme),.timepicker-wrapper:not(.dark-theme),.datepicker-mobile-portal:not(.dark-theme),.timepicker-mobile-portal:not(.dark-theme){--bg: #f1f5f9;--card-bg: rgba(255, 255, 255, 1);--text: #0f172a;--text-dim: #64748b;--border: rgba(0, 0, 0, .1);--glass: rgba(255, 255, 255, .8);--hover-overlay: rgba(0, 0, 0, .05);--shadow-heavy: rgba(0, 0, 0, .15);--mobile-sheet-bg: rgba(255, 255, 255, 1)}}.datepicker-wrapper.light-theme,.timepicker-wrapper.light-theme,.datepicker-mobile-portal.light-theme,.timepicker-mobile-portal.light-theme{--bg: #f1f5f9;--card-bg: rgba(255, 255, 255, 1);--text: #0f172a;--text-dim: #64748b;--border: rgba(0, 0, 0, .1);--glass: rgba(255, 255, 255, .8);--hover-overlay: rgba(0, 0, 0, .05);--shadow-heavy: rgba(0, 0, 0, .15);--mobile-sheet-bg: rgba(255, 255, 255, 1)}.datepicker-wrapper.dark-theme,.timepicker-wrapper.dark-theme,.datepicker-mobile-portal.dark-theme,.timepicker-mobile-portal.dark-theme{--bg: #0f172a;--card-bg: rgba(30, 41, 59, 1);--text: #f8fafc;--text-dim: #94a3b8;--border: rgba(255, 255, 255, .1);--glass: rgba(15, 23, 42, .6);--hover-overlay: rgba(255, 255, 255, .1);--shadow-heavy: rgba(0, 0, 0, .5);--mobile-sheet-bg: rgba(15, 23, 42, 1)}.glass-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #0000004d}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}.animate-scale{transition:transform .2s ease}.animate-scale:active{transform:scale(.95)}.picker-dropdown{position:absolute;z-index:999999;margin-top:8px;overflow:hidden;box-shadow:0 10px 40px var(--shadow-heavy);background:var(--card-bg)!important}.picker-dropdown.mobile{position:fixed!important;inset:auto 0 0!important;border-radius:20px 20px 0 0!important;margin:0!important;max-height:48vh!important;width:100%!important;padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 32px var(--shadow-heavy);background:var(--mobile-sheet-bg)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}@media(max-width:768px){.picker-dropdown.desktop{display:none!important}}.mobile-backdrop{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999998}.input-container.drop-up+.picker-dropdown{top:auto!important;bottom:100%!important;margin-bottom:8px;margin-top:0}.input-container.drop-down+.picker-dropdown{top:100%!important;bottom:auto!important}.scroll-columns{display:flex;justify-content:center;height:120px;min-height:120px;max-height:120px;overflow:hidden;position:relative;width:100%;margin:0 auto}.scroll-columns:after{content:"";position:absolute;top:44px;left:5%;width:90%;height:32px;background:var(--hover-overlay);border-top:1px solid var(--border);border-bottom:1px solid var(--border);pointer-events:none;border-radius:8px}.scroll-col{flex:1;max-width:70px;height:100%;max-height:120px;overflow-y:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;scroll-snap-type:y mandatory;padding:0;overscroll-behavior:none;position:relative;z-index:2}.scroll-col:before,.scroll-col:after{content:"";display:block;min-height:44px;flex-shrink:0;width:100%}.scroll-col::-webkit-scrollbar{display:none}.scroll-item{height:32px;min-height:32px;line-height:32px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-dim);transition:var(--transition);cursor:pointer;width:100%;scroll-snap-align:center;margin:0}.scroll-item.selected{font-weight:700;color:var(--primary);opacity:1;font-size:1.15rem}.mobile-scroll-picker{padding:16px 8px}.mobile-header{text-align:center;margin-bottom:12px;padding:0 16px}.mobile-header h3{margin-bottom:2px;font-size:1.2rem}.selected-preview{font-size:.9rem;color:var(--primary);font-weight:600}.confirm-btn{margin-top:16px;background-color:var(--primary)!important;padding:12px;border-radius:12px;font-weight:700;width:calc(100% - 32px);margin-left:16px;margin-right:16px;font-size:1rem;box-shadow:0 4px 12px var(--shadow-heavy);color:#fff!important;display:flex;justify-content:center;align-items:center}.input-container{display:flex;align-items:center;padding:10px 16px;gap:12px;transition:var(--transition);border:1px solid var(--border);width:100%;max-width:320px;position:relative;cursor:pointer}.input-container.focused{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:var(--card-bg)}.input-icon-wrapper{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:var(--transition)}.input-container.focused .input-icon-wrapper{color:var(--primary)}.shared-input{background:transparent;border:none;color:var(--text);font-size:16px;width:100%;font-weight:500;padding:0;margin:0;line-height:1.2}.shared-input:focus{outline:none!important;box-shadow:none!important}.shared-input::-moz-placeholder{color:var(--text-dim);opacity:.5}.shared-input::placeholder{color:var(--text-dim);opacity:.5}.clear-btn{color:var(--text-dim);opacity:.6;transition:var(--transition);display:flex;align-items:center;padding:4px;border-radius:50%}.clear-btn:hover{opacity:1;background:var(--hover-overlay);color:#ef4444}.input-container.error{border-color:#ef4444}.datepicker-wrapper{position:relative;width:-moz-fit-content;width:fit-content}.selector-view{width:320px;padding:16px}.grid-selector{display:grid;gap:8px;padding:8px}.grid-selector.column-3{grid-template-columns:repeat(3,1fr)}.grid-selector.column-4{grid-template-columns:repeat(4,1fr)}.select-cell{padding:12px 8px;border-radius:8px;font-size:.9rem;transition:var(--transition)}.select-cell:hover{background:var(--primary-glow);color:var(--primary)}.select-cell.active{background:var(--primary);color:#fff}.desktop-calendar{width:320px;padding:16px}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:600}.header-nav{display:flex;gap:4px}.nav-btn{cursor:pointer;padding:4px 8px;border-radius:6px;transition:var(--transition)}.nav-btn:hover{background:var(--hover-overlay);color:var(--primary)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.calendar-day-header{font-size:.8rem;color:var(--text-dim);text-align:center;font-weight:600}.calendar-day-cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:.9rem;transition:var(--transition);cursor:pointer}.calendar-day-cell:hover{background:var(--primary-glow);color:var(--primary)}.calendar-day-cell.active{background:var(--primary)!important;color:#fff!important}.calendar-day-cell.today{border:1px solid var(--primary);font-weight:700}.timepicker-wrapper{position:relative;width:-moz-fit-content;width:fit-content}.desktop-time-picker{width:260px;padding:12px;transition:width .3s ease}.desktop-time-picker.with-seconds{width:340px}.time-select-grid{display:flex;gap:12px}.time-col{flex:1;display:flex;flex-direction:column}.col-label{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px;text-align:center}.time-scroll{height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.time-btn{padding:8px;border-radius:6px;font-size:.9rem;transition:var(--transition)}.time-btn:hover{background:var(--hover-overlay);color:var(--primary)}.time-btn.active{background:var(--primary);color:#fff}.desktop-footer{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}.confirm-btn.small{padding:6px 12px;font-size:.85rem;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;font-weight:600}.app-container{display:flex;flex-direction:column;gap:40px;align-items:center;padding:40px 20px;max-width:900px;margin:0 auto}.hero{text-align:center}.title{font-size:3.5rem;font-weight:800;background:linear-gradient(135deg,#fff,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.subtitle{color:var(--text-dim);font-size:1.25rem;font-weight:300}.showcase{width:100%;padding:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px}.picker-section h2{font-size:1.5rem;font-weight:600;margin-bottom:8px;color:var(--text)}.picker-section p{color:var(--text-dim);font-size:.95rem;margin-bottom:24px}.picker-demo{display:flex;flex-direction:column;gap:16px}.status-badge{padding:8px 12px;background:#3b82f61a;border:1px solid var(--primary-glow);border-radius:8px;font-size:.85rem;color:var(--primary);font-weight:500;width:-moz-fit-content;width:fit-content}.info{text-align:center;color:var(--text-dim);font-size:.9rem}.features{display:flex;gap:16px;margin-top:12px;opacity:.6}.features span{padding:4px 10px;background:#ffffff0d;border-radius:20px;font-size:.75rem}@media(max-width:768px){.app-container{padding:20px 12px;gap:24px}.title{font-size:2rem}.subtitle{font-size:1rem}.showcase{padding:20px 16px;grid-template-columns:1fr;gap:24px;border-radius:16px}.picker-demo{align-items:center}.picker-section h2{font-size:1.3rem}}