:root { --dt-font:"Segoe UI", Roboto, Arial, sans-serif; --dt-radius:12px; --dt-radius-sm:6px; --dt-shadow:0 8px 24px rgba(0,0,0,0.15); --dt-bg-overlay:rgba(0,0,0,0.35); --dt-bg-surface:#ffffff; --dt-bg-muted:#f6f8fa; --dt-text:#2c3e50; --dt-primary:#3498db; --dt-positive:#27ae60; --dt-danger:#e74c3c; --dt-border:#e6e8eb; --dt-input-border:#dcdcdc; --dt-input-focus:#69b9ea; --dt-focus-ring:0 0 0 3px rgba(52,152,219,0.35); }
.dtpicker-overlay { z-index:2000; display:none; min-width:460px; background:var(--dt-bg-overlay); font-size:17px; -webkit-user-select:none; user-select:none; }
.dtpicker-mobile { position:fixed; inset:0; width:100%; height:100%; }
.dtpicker-bg { width:100%; height:100%; font-family:var(--dt-font); display:grid; place-items:center; padding:20px; }
.dtpicker-cont { width:100%; max-width:740px; border-radius:var(--dt-radius); overflow:hidden; box-shadow:var(--dt-shadow); border:1px solid var(--dt-border); background:var(--dt-bg-surface); }
.dtpicker-content { margin:0 auto; padding:16px; background:var(--dt-bg-surface); }
.dtpicker-header { margin:0; padding:14px 16px; position:relative; text-align:center; border-bottom:1px solid var(--dt-border); }
.dtpicker-header .dtpicker-title { color:var(--dt-text); font-size:1.2em; font-weight:600; }
.dtpicker-header .dtpicker-close { position:absolute; top:12px; right:14px; color:var(--dt-danger); font-size:1.4em; cursor:pointer; }
.dtpicker-header .dtpicker-value { margin-top:10px; color:var(--dt-primary); font-size:1.4em; font-weight:bold; }
.dtpicker-components { display:flex; flex-wrap:nowrap; gap:14px; margin:20px; font-size:1.1em; }
.dtpicker-components .dtpicker-comp { flex:1 1 120px; min-width:100px; text-align:center; }
.dtpicker-components .dtpicker-comp > * { display:block; height:40px; line-height:40px; border-radius:var(--dt-radius-sm); cursor:pointer; }
.dtpicker-components .dtpicker-compButton.decrement.dtpicker-compButtonEnable, .dtpicker-components .dtpicker-compButton.increment.dtpicker-compButtonEnable { background:#fff; border:1px solid var(--dt-border); color:var(--dt-primary); font-size:130%; cursor:pointer; padding-bottom:0; }
.dtpicker-components .dtpicker-compValue { width:100%; padding:6px 8px; border:1px solid var(--dt-input-border); border-radius:var(--dt-radius-sm); background:#fff; font-size:1em; }
.dtpicker-components .dtpicker-compValue:focus { border-color:var(--dt-input-focus); outline:none; box-shadow:var(--dt-focus-ring); }
.dtpicker-buttonCont { display:flex; justify-content:flex-end; gap:12px; margin:16px 20px; }
.dtpicker-buttonCont .dtpicker-button { padding:10px 18px; border-radius:8px; font-size:1em; font-weight:600; color:#fff; cursor:pointer; }
@media (max-width:768px){ .dtpicker-cont { max-width:95%; } .dtpicker-components { margin:14px; gap:10px; } .dtpicker-buttonCont { margin:14px; } }
.dtpicker-twoButtons .dtpicker-buttonSet, .dtpicker-twoButtons .dtpicker-buttonClear { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 20px; border-radius:8px; font-size:1em; font-weight:600; color:#fff; border:0; cursor:pointer; min-width:120px; }
.dtpicker-twoButtons .dtpicker-buttonSet { background:var(--dt-positive); }
.dtpicker-twoButtons .dtpicker-buttonClear { background:var(--dt-danger); }
.dtpicker-twoButtons .dtpicker-buttonSet::before, .dtpicker-twoButtons .dtpicker-buttonClear::before { font:var(--fa-font-solid); font-size:1.2em; line-height:1; margin-right:8px; display:inline-block; }
.dtpicker-twoButtons .dtpicker-buttonSet::before { content:"\f00c"; color:green; }
.dtpicker-twoButtons .dtpicker-buttonClear::before { content:"\f00d"; color:red; }
.dtpicker-value { display:inline-flex; align-items:center; gap:8px; color:var(--dt-primary); font-size:1.4em; font-weight:bold; }
.dtpicker-value::before { font:var(--fa-font-solid); content:"\f133"; font-size:1.1em; margin-right:8px; }