#home-content { max-width: 1200px; }
.home-quadrants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.home-card { padding: 20px; border: 1px solid #e5e7eb; border-top: 4px solid var(--accent, #285ccc); border-radius: 10px; background: #fff; min-width: 0; }
.home-card.q1 { --accent: #cf4141; }
.home-card.q2 { --accent: #c57718; }
.home-card.q3 { --accent: #3979ce; }
.home-card.q4 { --accent: #7b8492; }
.home-card h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 17px; color: var(--accent); }
.home-count { font-size: 12px; border-radius: 20px; padding: 2px 8px; background: #f0f2f6; }
.home-card ul { list-style: none; margin: 0 0 16px; padding: 0; }
.home-tasks { min-height: 92px; }
.home-card li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.home-tasks label { flex: 1; display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.home-tasks label span, .home-goal-list strong { overflow-wrap: anywhere; }
.home-tasks input { margin-top: 5px; accent-color: var(--accent); }
.home-tasks .is-done label span { text-decoration: line-through; color: #7b8492; }
.home-card button { flex-shrink: 0; padding: 6px 10px; font-size: 14px; }
.home-card form { display: flex; gap: 8px; }
.home-card form input { min-width: 0; padding: 9px 10px; border: 1px solid #d6dce5; border-radius: 6px; font: inherit; }
.home-card input:focus-visible { outline: 2px solid #285ccc; outline-offset: 2px; }
.home-task-form input, .home-goal-form input[name="name"] { flex: 1; }
.home-card form button { background: #edf2fb; color: #285ccc; }
.home-empty { color: #7b8492; font-size: 14px; }
.home-goals { margin-top: 24px; }
.home-goal-list li > div { flex: 1; min-width: 0; }
.home-goal-list strong, .home-goal-list time { display: block; }
.home-goal-list time { color: #7b8492; font-size: 13px; margin-top: 5px; }
.home-countdown { color: #285ccc; white-space: nowrap; }
@media (max-width: 760px) { .home-quadrants { grid-template-columns: 1fr; } .home-goal-form { flex-wrap: wrap; } }
/* UI-6: dimensions, gradients and severity colors from the legacy home skin. */
#home-content { max-width:none; display:grid; grid-template-columns:312px minmax(0,1fr); gap:18px; align-items:start; }
#home-content .home-quadrants { grid-column:2; grid-row:1; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; height:calc(100vh - 158px); min-height:520px; }
#home-content .home-quadrants .home-card { display:flex; flex-direction:column; padding:0; border:1px solid var(--card-bd); border-radius:var(--r); background:var(--card-bg); box-shadow:var(--sh-card),var(--card-hl); overflow:hidden; position:relative; min-height:0; }
#home-content .home-quadrants .home-card:before { content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:var(--r) var(--r) 0 0; }
#home-content .q1:before { background:linear-gradient(90deg,var(--red),#f2958f); }
#home-content .q2:before { background:linear-gradient(90deg,var(--amber),#f5bd6b); }
#home-content .q3:before { background:linear-gradient(90deg,var(--accent),#8fb4ff); }
#home-content .q4:before { background:linear-gradient(90deg,#9aa6bb,#c6cfdd); }
#home-content .home-quadrants h2 { height:50px; flex:none; display:flex; align-items:center; gap:8px; padding:0 10px 0 16px; margin:3px 0 0; border-bottom:1px solid var(--line2); font-size:13.5px; font-weight:700; letter-spacing:-.1px; }
#home-content .q1 h2 { color:var(--red); } #home-content .q2 h2 { color:var(--amber); } #home-content .q3 h2 { color:var(--accent); } #home-content .q4 h2 { color:#8b98ad; }
#home-content .home-count { font-size:10.5px; font-weight:700; color:var(--tx-faint); background:var(--tab-bg); padding:2px 7px; border-radius:20px; line-height:1.5; }
#home-content .home-hint { margin-left:auto; font-size:10.5px; font-weight:400; color:var(--tx-faint); white-space:nowrap; }
#home-content .home-tasks { flex:1; min-height:96px; overflow:auto; margin:0; padding:0 8px; background-image:linear-gradient(to bottom,var(--line2) 0,rgba(0,0,0,0) 1px); background-size:100% 48px; }
#home-content .home-tasks li[data-task-id] { display:flex; align-items:center; gap:10px; height:48px; padding:0; border-radius:9px; }
#home-content .home-tasks li:hover { background:var(--tab-bg); }
#home-content .home-tasks label { align-items:center; font-size:14px; }
#home-content .home-tasks input { margin:0; width:18px; height:18px; }
#home-content .home-task-drag { flex:none; width:16px; padding:0; border:0; background:transparent; color:var(--tx-faint); cursor:grab; font-size:17px; }
#home-content .home-tasks [data-action="delete-task"] { flex:none; width:22px; height:22px; padding:0; border-radius:6px; color:var(--tx-faint); font-size:15px; opacity:0; }
#home-content .home-tasks li:hover [data-action="delete-task"], #home-content .home-tasks [data-action="delete-task"]:focus-visible { opacity:1; }
#home-content .home-tasks [data-action="delete-task"]:hover { color:var(--red); background:var(--red-soft); }
#home-content .home-task-form { padding:8px; border-top:1px solid var(--line2); }
#home-content .qdragging { opacity:.4; } #home-content .qdrop-before { box-shadow:inset 0 2px var(--accent); } #home-content .qdrop-after { box-shadow:inset 0 -2px var(--accent); } #home-content .qdrop-active { background-color:var(--accent-soft); }
#home-content .home-goals { grid-column:1; grid-row:1; padding:0; margin:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
#home-content .home-goals > h2 { font-size:15.5px; margin-bottom:12px; color:var(--tx); }
#home-content .home-goal-list { display:flex; flex-direction:column; gap:12px; margin:0 0 12px; }
#home-content .home-goal { display:block; padding:16px 17px 15px; border:1px solid var(--card-bd); border-radius:var(--r); background:var(--card-bg); position:relative; box-shadow:var(--sh-card),var(--card-hl); }
#home-content .home-goal-details strong { font-size:15.5px; padding:2px 26px 2px 0; font-weight:700; letter-spacing:-.2px; }
#home-content .home-goal-details time { margin-top:11px; padding:8px 10px; border:1px solid var(--field-bd); border-radius:var(--r-sm); background:var(--field-bg); color:var(--tx-sub); font-size:12.5px; }
#home-content .home-countdown { display:flex; align-items:baseline; gap:6px; margin:16px 0 11px; }
#home-content .home-countdown b { font-size:36px; font-weight:800; letter-spacing:-1.8px; line-height:1; font-variant-numeric:tabular-nums; }
#home-content .home-countdown span { font-size:13px; color:var(--tx-sub); }
#home-content .home-countdown.g b { color:var(--green); } #home-content .home-countdown.a b { color:var(--amber); } #home-content .home-countdown.r b { color:var(--red); }
#home-content .home-goal-track { height:7px; border-radius:5px; background:var(--tab-bg); overflow:hidden; }
#home-content .home-goal-track i { display:block; height:100%; border-radius:5px; transition:width .5s; }
#home-content .home-goal [data-action="delete-goal"] { position:absolute; right:11px; top:11px; color:var(--tx-faint); font-size:16px; line-height:1; padding:3px 5px; border-radius:6px; }
#home-content .home-goal-form { display:grid; gap:8px; padding:15px; border:1.5px dashed var(--field-bd); border-radius:var(--r); }
@media(max-width:1100px) { #home-content { grid-template-columns:1fr; } #home-content .home-goals,#home-content .home-quadrants { grid-column:auto; grid-row:auto; } #home-content .home-quadrants { height:auto; min-height:520px; } }
@media(max-width:760px) { #home-content .home-quadrants { grid-template-columns:1fr; grid-template-rows:none; } #home-content .home-quadrants .home-card { min-height:200px; } }
/* Legacy circular completion control; retain the native checkbox semantics. */
#home-content .home-tasks input[type="checkbox"] { appearance:none; flex:none; width:18px; height:18px; border:1.7px solid var(--field-bd); border-radius:50%; display:grid; place-items:center; background:transparent; cursor:pointer; }
#home-content .home-tasks input[type="checkbox"]:checked { background:var(--green); border-color:var(--green); }
#home-content .home-tasks input[type="checkbox"]:checked:after { content:""; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(.5px,-1px); }
#home-content .home-tasks input[type="checkbox"]:hover { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }