.task-priority-flag {display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap;color:#35414c}
.task-priority-flag svg {width:18px;height:20px;stroke:var(--priority-color);fill:var(--priority-color);stroke-width:1.6;stroke-linecap:round}
.task-priority-picker {position:relative;min-width:120px;font-size:14px}
.task-priority-picker > summary {cursor:pointer;list-style:none;border:1px solid #d5e2e4;border-radius:6px;padding:8px;background:white}
.task-priority-picker > summary::-webkit-details-marker {display:none}
.task-priority-menu {position:absolute;z-index:30;top:100%;left:0;min-width:165px;padding:6px;background:white;border:1px solid #d5e2e4;box-shadow:0 8px 24px #132d4020;border-radius:8px}
.task-priority-menu button {display:block;width:100%;background:white;text-align:left;padding:9px;border:0}
.task-priority-menu button:hover {background:#edf7f7}
.task-avatar {display:inline-grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:var(--avatar-color,#008c95);color:white;font-size:12px;font-weight:700;line-height:1}
.task-person-display {display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.task-participant-avatars {display:flex;gap:6px;flex-wrap:wrap}
.task-person-chip .task-avatar {width:23px;height:23px;flex-basis:23px}
.task-color-tag {display:inline-block;background:var(--tag-color,#6d54cf);color:white;border-radius:14px;padding:3px 9px;font-size:12px;line-height:1.4;font-weight:500;max-width:100%;overflow-wrap:anywhere;margin:2px 0}
.task-tag-picker {min-width:0;font-weight:400}
.task-tag-picker > input {width:100%}
.task-selected-tags {display:flex;flex-wrap:wrap;gap:4px;margin:5px 0}
.task-tag-picker details > summary {font-size:12px;color:#087b83;cursor:pointer;margin:5px 0}
.task-tag-options {display:flex;flex-wrap:wrap;gap:5px;max-height:150px;overflow:auto;background:#f5f9fa;border-radius:6px;padding:6px}
.task-tag-option {background:white;border:1px solid transparent;padding:2px;border-radius:16px}
.task-tag-option.selected {border-color:#35414c}
.task-tag-create {display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:8px}
.task-tag-create input[data-new-tag] {min-width:95px;flex:1}
.task-tag-create input[type=color] {width:36px;min-width:36px;height:34px;padding:2px}
.task-tag-create button {font-size:11px;padding:7px}
.task-tag-picker [data-tag-error] {color:#b32635}
.task-card .task-priority-flag {font-size:12px}
.task-notice-popup {position:fixed;inset:auto 20px 20px auto;z-index:120000;margin:0;width:min(400px,calc(100vw - 30px));padding:20px;border:1px solid #80c8cc;border-left:5px solid #008c95;border-radius:10px;background:white;color:#1f2933;box-shadow:0 12px 40px #112d4030;font:14px/1.45 Arial,sans-serif}
.task-notice-popup[hidden] {display:none}
.task-notice-popup h3 {font-size:18px;margin:10px 0}
.task-notice-popup > div {display:flex;gap:6px;flex-wrap:wrap}
.task-notice-popup button {font-size:12px;padding:8px 10px}
.task-field-label {display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#667080}
.task-detail-meta,.task-create-grid {align-items:start}
.task-detail-meta > label,.task-create-grid > label {align-content:start}
.task-detail-meta input:not([type=checkbox]):not([type=color]),.task-create-grid input:not([type=checkbox]):not([type=color]) {height:40px}

.task-date-range {grid-column:span 2;min-width:0;margin:0;padding:10px 12px 12px;border:1px solid #d5e2e4;border-radius:8px;background:#f7fbfb}
.task-date-range legend {padding:0 5px;color:#667080;font-size:13px;font-weight:600}
.task-date-inputs {display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) minmax(0,.8fr);gap:8px;align-items:start}
.task-date-inputs label {display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px;font-weight:600;color:#667080}
.task-date-inputs input {width:100%;min-width:0;height:40px;background:white}
.task-date-arrow {align-self:start;margin-top:26px;text-align:center;color:#008c95;font-size:20px}
.task-date-inputs .task-date-time {grid-column:4}
.task-date-time small {font-size:10px;font-weight:400}
@media(max-width:700px) {.task-date-range {grid-column:1 / -1;padding:8px}.task-date-inputs .task-date-time {grid-column:3}.task-date-inputs {grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:5px}.task-date-inputs input {padding:6px;font-size:12px}}