oncord-timepicker{display:inline-block;position:relative;& input[type="text"]{width:8em!important}& .timepicker-dropdown{display:none;position:absolute;top:calc(100% + 4px);background:#ffffff;border:1px solid #cccccc;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.1);padding:16px;z-index:1000;min-width:11em}& oncord-effect-attach[show="true"] .timepicker-dropdown{display:flex!important;gap:8px;align-items:stretch}& .timepicker-dropdown .timepicker-field{display:flex;flex-direction:column;gap:4px;& label{display:none}& oncord-combobox{display:flex;height:100%;& select{box-sizing:border-box;padding:10px 32px 10px 12px;border:1px solid #cccccc;border-radius:6px;font-size:16px;background-color:#ffffff;cursor:pointer;min-width:70px;height:44px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:all 0.15s ease;&:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px rgba(74,144,226,0.1)}&:hover{border-color:#999999}}}&.timepicker-period{& .period-buttons{display:flex;gap:4px;border:1px solid #cccccc;border-radius:6px;padding:2px;background:#f5f5f5;height:44px;box-sizing:border-box;& button{padding:0 16px;border:none;border-radius:4px;background:transparent;color:#333333;font-size:16px;font-weight:500;cursor:pointer;transition:all 0.15s ease;min-width:48px;&:hover{background:#e8e8e8}&.active{background:#4a90e2;color:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,0.15)}}}}}}