.deadlines-page,.deadlines-overview { min-width: 0; }
.deadlines-overview.card { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(125deg,#fffdf4,#fff6d5); border-color: #ead89b; padding: 26px; box-shadow: 0 6px 24px #9b75100a; }
.deadlines-clock-watermark { position: absolute; z-index: -1; width: 230px; height: 230px; top: -42px; right: -36px; stroke: #b88c25; stroke-width: 3; stroke-linecap: round; opacity: .12; pointer-events: none; transform: rotate(-12deg); }
.deadlines-overview .deadlines-heading h2 { color: #704c16; font-size: 18px; }
.deadlines-help { background: #fff7f0; border: 1px solid #f2d9c9; border-radius: 10px; padding: 18px 20px; margin: 24px 0; font-size: 13px; }
.deadlines-help p { margin: 8px 0 0; }
.deadlines-level { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin: 28px 0; }
.deadlines-level legend { padding: 0 12px; font-size: 18px; font-weight: 600; color: #a1491c; }
.deadlines-form-grid,.deadlines-dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.deadlines-step { min-width: 0; }
.deadlines-step h3 { margin-bottom: 22px; }
.deadlines-step > .field { margin: 0 0 24px; line-height: 1.7; }
.deadlines-page .calendar-date-trigger { white-space: normal; }
.deadlines-page .calendar-date-trigger:hover { border-color: #e2a98a; background: #fffaf6; }
.deadline-picker > label { display: block; }
.deadlines-page .deadline-clear { margin: 8px 0 0; padding: 4px 8px; min-height: 30px; font-size: 11px; color: var(--muted); background: #f4f5f7; }
.deadlines-page .deadline-clear:hover { color: #a23d3b; background: #fdefee; }
.deadlines-page .actions { border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 0; }
.deadlines-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 24px; }
.deadlines-heading h2 { margin: 0; }
.deadlines-heading p { margin: 8px 0 0; color: #86734d; }
.deadlines-timezone { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; margin-top: 4px; border: 1px solid #e6d79f; border-radius: 8px; background: #ffffffa6; color: #796128; font-size: 11px; white-space: nowrap; }
.deadlines-timezone::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #b58a28; }
.deadlines-status { display: flex; flex-direction: column; min-width: 0; padding: 22px; background: #fffffff0; border: 1px solid #ecdfa9; border-radius: 14px; box-shadow: 0 3px 10px #9b751005; }
.deadlines-status.is-closed { background: #fff9f7f5; border-color: #edcfca; }
.deadlines-status-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.deadlines-status-head h3 { margin: 0; font-size: 17px; }
.deadlines-date { font-size: 11px; color: #81765d; line-height: 1.8; margin: 22px 0; }
.deadlines-date time { display: block; margin-top: 5px; font-size: 16px; font-weight: 600; color: #46391e; }
.deadlines-timer { margin-top: auto; border-top: 1px solid #eee6cd; padding-top: 16px; }
.deadlines-timer > span { font-size: 11px; color: #86734d; }
.deadlines-timer-parts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.deadlines-timer-parts > span { position: relative; min-width: 0; text-align: center; padding: 12px 4px 9px; background: linear-gradient(#fffdf5,#fff8df); border: 1px solid #ecdfa9; border-radius: 10px; }
.deadlines-timer-parts > span:not(:last-child)::after { content: ':'; position: absolute; right: -9px; top: 16px; color: #baa566; font-size: 20px; }
.deadlines-timer b { display: block; font-size: clamp(25px,2.5vw,34px); font-variant-numeric: tabular-nums; font-weight: 600; color: #75500e; line-height: 1.2; letter-spacing: 1px; }
.deadlines-timer small { display: block; margin-top: 6px; font-size: 10px; color: #86734d; }
.deadlines-closed-text { display: block; margin-top: auto; border-top: 1px solid #f0deda; padding-top: 16px; font-size: 13px; color: #a23d3b; }
@media(max-width:900px) { .deadlines-form-grid,.deadlines-dashboard-grid { grid-template-columns: 1fr; } }
@media(max-width:720px) { .deadlines-level { padding: 18px; } .deadlines-overview.card { padding: 18px; } .deadlines-status { padding: 18px; } .deadlines-heading { gap: 10px; margin-bottom: 18px; } .deadlines-clock-watermark { width: 180px; height: 180px; top: 4px; right: -60px; } .deadlines-date time { font-size: 14px; } .deadlines-timer b { font-size: 28px; } }