:root{font-family:Arial,sans-serif;color:#111827;background:#f8fafc}*{box-sizing:border-box}body{margin:0;direction:rtl}button,input{font:inherit}main{max-width:620px;margin:auto;padding:20px 16px 100px}header{margin:8px 0 24px}h1{margin:0;font-size:28px}header p{color:#64748b;margin:8px 0}.progress{height:8px;background:#e2e8f0;border-radius:9px;overflow:hidden}.progress span{display:block;height:100%;background:#111827;transition:.2s}form{display:flex;gap:8px;position:sticky;top:0;background:#f8fafc;padding:8px 0 14px;z-index:2}input{flex:1;padding:14px;border:1px solid #cbd5e1;border-radius:14px;background:#fff}form button,.finish{border:0;border-radius:14px;background:#111827;color:#fff;padding:0 18px;font-weight:700}h2{font-size:15px;color:#64748b;margin:24px 4px 8px}article{display:flex;align-items:center;gap:10px;background:#fff;padding:12px;border:1px solid #e2e8f0;border-radius:16px;margin:7px 0}.check{width:28px;height:28px;border-radius:50%;border:2px solid #94a3b8;background:#fff;font-weight:700}.done .check{background:#111827;color:#fff}.done .label{text-decoration:line-through;color:#94a3b8}.label{flex:1}.qty{display:flex;align-items:center;gap:8px}.qty button,.delete{border:0;background:#f1f5f9;border-radius:9px;width:30px;height:30px}.delete{font-size:20px}.finish{position:fixed;bottom:18px;left:50%;transform:translate(-50%);height:52px;width:min(588px,calc(100% - 32px))}.finish:disabled{opacity:.35}.empty{text-align:center;padding:60px 0;color:#64748b}.error{background:#fee2e2;padding:10px;border-radius:10px;color:#991b1b}