@import url("fonts/tajawal/tajawal.css");
:root{--ink:#24302f;--muted:#6f7c77;--paper:#fffaf0;--surface:#fffffb;--line:#d9ddcf;--accent:#0f7c72;--accent-dark:#09524d;--danger:#be4b45;--shadow:0 24px 70px rgba(35,48,47,.18)}
/* Owner standard UI font: Tajawal (self-hosted, CSP-safe). Applied globally. */
body,button,input,textarea,select,h1,h2,h3,h4,h5,h6,p,a,span,label,li,td,th,div{font-family:'Tajawal','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif !important}*{box-sizing:border-box}body{min-height:100vh;margin:0;font-family:Manrope,sans-serif;color:var(--ink);background:linear-gradient(135deg,#f7eedb,#dcebdd 48%,#d6e3e7)}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;place-items:center;padding:32px 16px}.task-panel{width:min(760px,100%);min-height:620px;padding:clamp(22px,4vw,40px);background:rgba(255,255,251,.92);border:1px solid rgba(255,255,255,.76);border-radius:8px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}.app-header,.task-form,.toolbar,.app-footer{display:flex;align-items:center;gap:12px}.app-header{justify-content:space-between;margin-bottom:28px}.eyebrow{margin:0 0 6px;color:var(--accent-dark);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-family:Fraunces,serif;font-size:clamp(2.5rem,8vw,5rem);line-height:.95}.task-count{width:88px;height:88px;display:grid;place-items:center;align-content:center;flex:0 0 auto;color:var(--surface);background:var(--ink);border-radius:50%}.task-count span:first-child{font-size:1.7rem;font-weight:800;line-height:1}.task-count span:last-child{font-size:.72rem;font-weight:700;text-transform:uppercase}.task-form{padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.task-form input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:1rem}.task-form .date-input{flex:0 1 220px;color:var(--muted)}.task-form button,.filter-button,.ghost-button,.delete-button{min-height:42px;border:0;border-radius:6px;font-weight:800;transition:transform 160ms ease}.task-form button{padding:0 22px;color:#fff;background:var(--accent)}.toolbar{margin:22px 0 14px;flex-wrap:wrap}.filter-button,.ghost-button{color:var(--muted);background:transparent}.filter-button{padding:0 16px;border:1px solid transparent}.filter-button.active{color:var(--accent-dark);background:#d9efea;border-color:#b9dad4}.task-list{min-height:260px;margin:0;padding:0;list-style:none}.task-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);animation:rise-in 220ms ease both}.task-checkbox{width:22px;height:22px;accent-color:var(--accent)}.task-content{display:grid;gap:4px;min-width:0}.task-title{overflow-wrap:anywhere;font-weight:700}.due-date{color:var(--muted);font-size:.85rem;font-weight:700}.due-date:before{content:"Due ";color:var(--accent-dark)}.task-item.completed .task-title{color:var(--muted);text-decoration:line-through}.delete-button{width:42px;color:var(--danger);background:#f9e4dc}.app-footer{justify-content:flex-end;padding-top:18px}.ghost-button{padding:0 14px}.empty-state{display:none;min-height:250px;place-items:center;align-content:center;text-align:center;color:var(--muted)}.empty-state.visible{display:grid}.empty-state h2{margin-bottom:6px;color:var(--ink);font-family:Fraunces,serif;font-size:2rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:hover{transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline:3px solid rgba(15,124,114,.32);outline-offset:3px}@keyframes rise-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:560px){.app-header{align-items:flex-start}.task-count{width:70px;height:70px}.task-form{align-items:stretch;flex-direction:column}.task-form input{min-height:44px}.task-form .date-input,.task-form button{width:100%;flex:auto}}