*{box-sizing:border-box}body{margin:0;background:#f5f5f6;color:#222;font-family:Arial,Helvetica,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:12px;background:#eee;padding:12px 18px;color:#222}button:hover{filter:brightness(.92)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #1968c9;outline-offset:2px}header{max-width:1100px;margin:auto;display:flex;align-items:center;gap:20px;padding:20px 24px;font-size:12px;letter-spacing:2px}#sync{margin-left:auto;letter-spacing:0;color:#777}main{max-width:1040px;margin:12px auto 40px;display:grid;grid-template-columns:1fr 1fr;background:white;border-radius:28px;overflow:hidden;min-height:740px}.calendar{padding:28px 24px}.tools{display:flex;justify-content:flex-end;align-items:center;gap:12px}.tools #today{margin-right:auto;background:none;color:#777}.circle{background:#808083;color:white;border-radius:50%;width:50px;height:50px;padding:0;font-size:30px}.month{display:flex;align-items:center;justify-content:space-between;margin:20px 0}.month button{background:none;font-size:36px}.month h1{font-size:28px;margin:0}.week,#dates{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.week{color:#949499;font-weight:bold;margin-bottom:14px}#dates{row-gap:13px}.date{position:relative;height:59px;border-radius:50%;width:48px;justify-self:center;padding:0;background:none;font-size:23px}.date.today{font-weight:bold}.date.selected{background:#808083;color:white}.dot{position:absolute;bottom:2px;left:calc(50% - 3px);width:6px;height:6px;background:currentColor;border-radius:50%}.day{background:#e3e3e7;padding:24px 32px 60px;border-radius:32px 0 0 0}.handle{width:70px;height:6px;background:white;border-radius:10px;margin:0 auto 30px}h2{font-size:28px;margin:0 0 5px}#daySubtitle{margin:0;color:#919196}h3{font-size:16px;letter-spacing:1px;color:#555;margin:32px 0 14px}.test{background:white;border-left:6px solid #222;border-radius:14px;padding:16px;margin-bottom:12px;display:flex;gap:12px;align-items:center}.itemtext{flex:1;min-width:0;overflow-wrap:anywhere}.itemtext strong{display:block;font-size:20px}.itemtext small{display:block;color:#85858a;font-size:16px;margin-top:5px}.badge{background:#222;color:white;border-radius:20px;padding:6px 10px;font-size:12px}.task{display:flex;align-items:center;gap:14px;padding:12px 0}.task input{width:24px;height:24px;accent-color:#555;flex-shrink:0}.task.done strong{text-decoration:line-through;color:#888}.edit{background:none;padding:8px;color:#666;font-size:13px}.muted,.empty{color:#777;font-size:14px;line-height:1.6}dialog{border:0;border-radius:24px;padding:28px;width:min(500px,94vw);max-height:90dvh;overflow:auto}dialog::backdrop{background:#0006}label{display:block;margin:16px 0 0;font-size:14px}input,select,textarea{display:block;width:100%;padding:14px;border:1px solid #ccc;border-radius:12px;background:white;margin-top:7px;color:#222}textarea{resize:vertical}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.primary{background:#808083;color:white}.danger{margin-right:auto;background:#222;color:white}.inline{display:flex;gap:8px;align-items:center}.inline input{margin:0}.classrow{display:flex;gap:8px;align-items:center;margin:8px 0}.classrow input{margin:0}.check{display:flex;gap:10px;align-items:center;line-height:1.5}.check input{width:20px;margin:0}.plain{background:none}#login{max-width:400px;margin:10vh auto;padding:24px}#login h1{font-size:36px}#loginForm button{width:100%;margin-top:20px;background:#222;color:white}#message{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#222;color:white;padding:15px 24px;border-radius:12px;max-width:90vw;z-index:10}[hidden]{display:none!important}@media(max-width:740px){header{padding:14px 20px}main{display:block;margin:0 auto;max-width:540px;border-radius:0;min-height:100dvh}.calendar{padding:20px 30px 36px}.day{border-radius:40px 40px 0 0;min-height:60vh;padding:24px 36px 60px}.date{height:62px}#dates{row-gap:16px}.month h1{font-size:28px}}@media(max-width:360px){.calendar{padding:18px 12px}.date{width:40px}.day{padding:24px}}