.picker-input { display:flex; position:relative; min-width:0; }
.picker-input input { padding-right:46px; font-variant-numeric:tabular-nums; }
.picker-input > button { position:absolute; right:1px; top:1px; bottom:1px; width:42px; display:grid; place-items:center; color:var(--blue); border-radius:9px; }
.picker-input > button:hover, .picker-input > button[aria-expanded=true] { background:var(--blue-bg); }
.picker-input .icon { width:19px; height:19px; }
.picker-panel { grid-column:1/-1; border:1px solid var(--line); border-radius:14px; padding:14px; background:white; animation:picker-reveal .18s ease-out; }
.picker-panel button, .repeat-editor button { min-height:40px; border-radius:9px; }
.picker-panel button:disabled, .repeat-editor button:disabled { opacity:.38; cursor:default; }
.picker-month-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.picker-month-head strong { text-transform:capitalize; font-size:15px; font-weight:700; }
.picker-month-head button { width:40px; display:grid; place-items:center; }
.picker-month-head .icon { width:17px; height:17px; }
.picker-weekdays, .picker-days, .repeat-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.picker-weekdays { margin-bottom:5px; color:#647893; text-align:center; font-size:11px; }
.picker-days button { font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink); border:1px solid transparent; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.picker-days .outside { color:#6b7c96; }
.picker-days .weekend:not([aria-pressed=true]) { background:#f5f8fc; }
.picker-days button:hover:not(:disabled), .picker-month-head button:hover:not(:disabled) { background:var(--blue-bg); }
.picker-days button[aria-pressed=true] { background:var(--blue-bg); border-color:var(--blue-edge); color:#155fbd; font-weight:700; }
.picker-days button:focus-visible, .repeat-editor button:focus-visible, .time-panel button:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.repeat-editor { grid-column:1/-1; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.repeat-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.repeat-heading strong { font-size:14px; }
.repeat-heading select { border:1px solid var(--line); border-radius:9px; padding:10px; color:var(--ink); background:white; max-width:65%; font:inherit; font-size:13px; }
.repeat-body { padding-top:14px; }
.repeat-body[hidden], .repeat-weekdays[hidden] { display:none; }
.repeat-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.repeat-presets button { font-size:12px; padding:0 12px; background:#f4f7fb; color:#526986; }
.repeat-presets button[aria-pressed=true], .repeat-weekdays button[aria-pressed=true], .time-panel button[aria-pressed=true] { color:#155fbd; background:var(--blue-bg); box-shadow:inset 0 0 0 1px var(--blue-edge); }
.repeat-weekdays { margin-bottom:16px; }
.repeat-weekdays button { font-size:12px; border:1px solid var(--line); }
.repeat-scope { font-size:12px; color:#60738e; line-height:1.5; margin:0 0 12px; }
.repeat-presets button[aria-pressed=mixed], .repeat-weekdays button[aria-pressed=mixed] { background:#f2f7ff; color:#155fbd; border-bottom:2px solid var(--blue); }
.repeat-editor [hidden] { display:none!important; }
.repeat-month { user-select:none; -webkit-user-select:none; }
.repeat-help { font-size:12px; color:#60738e; line-height:1.5; margin:12px 0 10px; }
.repeat-summary { color:#155fbd; font-size:12px; line-height:1.6; padding:10px 12px; background:#f2f7ff; border-radius:10px; }
.date-painting .repeat-month { cursor:crosshair; }
.time-panel button { font-size:13px; font-variant-numeric:tabular-nums; }
.clock-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.clock-top strong { font-size:14px; }
.clock-entry input { width:105px; height:46px; border:1px solid var(--line); border-radius:10px; text-align:center; color:var(--blue); font:inherit; font-size:25px; font-variant-numeric:tabular-nums; }
.clock-columns { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:8px; align-items:center; margin-top:18px; }
.clock-column > span { display:block; text-align:center; margin-bottom:8px; color:#60738e; font-size:12px; }
.clock-colon { text-align:center; font-size:26px; padding-top:25px; color:var(--blue); }
.clock-wheel-frame { position:relative; border-radius:12px; overflow:hidden; }
.clock-wheel-frame::before { content:''; position:absolute; inset:88px 0 auto; height:44px; border-block:1px solid var(--blue-edge); background:var(--blue-bg); pointer-events:none; }
.clock-wheel-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,white 0,transparent 30%,transparent 70%,white 100%); pointer-events:none; }
.clock-wheel { position:relative; height:220px; overflow-y:auto; padding:88px 0; scrollbar-width:none; scroll-snap-type:y mandatory; overscroll-behavior:contain; touch-action:pan-y; }
.clock-wheel::-webkit-scrollbar { display:none; }
.clock-wheel:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; border-radius:12px; }
.time-panel .clock-wheel button { display:block; width:100%; height:44px; min-height:44px; padding:0; border:0; border-radius:0; font-size:23px; line-height:44px; scroll-snap-align:center; color:#647893; background:transparent; transition:color .12s; }
.time-panel .clock-wheel button.selected { color:#155fbd; font-size:28px; font-weight:700; }
.clock-quick { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:14px; }
.clock-quick button { min-height:44px; background:#f5f8fc; color:#526986; }
.clock-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.clock-bottom > span { color:#60738e; font-size:12px; line-height:1.4; max-width:190px; }
.clock-bottom button { min-height:44px; }
.helper.full { grid-column:1/-1; margin:0; }
.week-scroll { overflow-anchor:none; }
.text-limit-hint { display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:#60738e; font-size:12px; line-height:1.5; }
.text-limit-message { min-width:0; overflow-wrap:anywhere; }
.text-limit-count { flex-shrink:0; font-variant-numeric:tabular-nums; }
.text-limit-hint.at-limit { color:#155fbd; }
.text-limit-hint.is-error { color:#b42338; }
.field [data-text-limit][aria-invalid=true] { border-color:#d94d62; }
.field select[name=icon][hidden] { display:none; }
.icon-picker-trigger { display:flex; align-items:center; gap:9px; width:100%; min-height:46px; padding:10px 12px; border:1px solid #dbe4ed; border-radius:10px; background:#fff; color:var(--ink); text-align:left; font:inherit; }
.icon-picker-trigger > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-picker-trigger:hover { border-color:var(--blue-edge); }
.icon-picker-trigger[aria-expanded=true] { border-color:var(--blue); background:#f8fbff; }
.icon-picker-trigger:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.icon-picker-preview.icon { width:28px; height:28px; flex-shrink:0; color:var(--ink); }
.icon-picker-chevron.icon { width:16px; height:16px; flex-shrink:0; margin-left:auto; transform:rotate(90deg); transition:transform .16s; }
.icon-picker-trigger[aria-expanded=true] .icon-picker-chevron { transform:rotate(-90deg); }
.icon-picker-list { position:fixed; inset:auto; margin:0; padding:5px; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); box-shadow:0 8px 28px #1023451a; z-index:10; font:inherit; font-size:14px; animation:picker-reveal .14s ease-out; }
.icon-picker-list[hidden] { display:none; }
.icon-picker-option { display:flex; align-items:center; gap:11px; min-height:48px; padding:8px 10px; border-radius:9px; cursor:pointer; user-select:none; }
.icon-picker-option > span { flex:1; }
.icon-picker-check.icon { width:18px; height:18px; flex-shrink:0; visibility:hidden; }
.icon-picker-option[aria-selected=true] { color:#155fbd; background:var(--blue-bg); }
.icon-picker-option[aria-selected=true] .icon-picker-preview { color:#155fbd; }
.icon-picker-option[aria-selected=true] .icon-picker-check { visibility:visible; }
.icon-picker-option.is-active { outline:1px solid var(--blue-edge); outline-offset:-1px; }
@media (hover:hover) { .icon-picker-option:hover { background:#f0f6ff; } }
@media (max-width:760px) { .icon-picker-trigger { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { .icon-picker-list { animation:none; } .icon-picker-chevron { transition:none; } }
@keyframes picker-reveal { from { opacity:.5; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) {
  .editor:has(.picker-input) { width:calc(100vw - 8px); max-width:calc(100vw - 8px); }
  .editor:has(.picker-input) .editor-body { padding:16px; }
  .picker-input input { min-height:46px; padding-right:48px; }
  .picker-input > button { width:44px; }
  .picker-month-head button { width:44px; flex-shrink:0; }
  .picker-panel { padding:10px; }
  .picker-days, .picker-weekdays, .repeat-weekdays { gap:2px; }
  .picker-days button, .repeat-editor button, .picker-panel button { min-height:44px; }
  .repeat-heading select { font-size:14px; }
}
@media (max-width:383px) {
  .repeat-month, .repeat-weekdays, .date-panel { margin-inline:-16px; }
  .date-panel { padding:0; border:0; }
  .repeat-month .picker-days, .repeat-month .picker-weekdays, .date-panel .picker-days, .date-panel .picker-weekdays, .repeat-weekdays { gap:0; }
  .picker-month-head { padding-inline:6px; }
}
@media (prefers-reduced-motion:reduce) { .picker-panel { animation:none; } }