:root{color-scheme:light;--ink:#153335;--deep:#0f2f32;--petrol:#174749;--petrol-light:#286165;--mint:#b9ded3;--canvas:#f3f6f4;--paper:#fff;--line:#dce8e4;--muted:#718683;--red:#bf514b;--red-bg:#fbe9e8;--amber:#b88320;--amber-bg:#fff2d5;--green:#398266;--green-bg:#e5f4e9;--shadow:0 18px 55px rgba(14,54,55,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #72b9ad;outline-offset:3px}
.app-shell{max-width:1120px;margin:0 auto;min-height:100vh;background:var(--canvas)}
.hero{background:linear-gradient(128deg,#0d292d 0%,#143e40 52%,#1a5451 100%);color:#fff;padding:16px 28px}
.hero-top{display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:11px;direction:ltr}
.brand-mark{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:#e9f7ef;color:var(--deep);font-size:27px;font-weight:900;line-height:1}
.brand-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#57a591;right:5px;bottom:6px}
.brand-name{font-size:18px;letter-spacing:2.2px;font-weight:550}
.brand-name b{font-weight:900;color:#a3d2c2}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:25px;line-height:1}
.icon-button svg{width:22px;height:22px}
.icon-button.on-dark{background:rgba(255,255,255,.11);color:#e4f4ee;border-color:rgba(255,255,255,.16)}
.section-kicker{margin:0 0 5px;color:#609186;font-weight:700;letter-spacing:.02em;font-size:13px}
.main-content{position:relative;margin:12px 28px 0;padding-bottom:105px}
.main-tabs{display:flex;gap:6px;padding:5px;background:#fff;box-shadow:0 8px 32px rgba(14,54,55,.09);border:1px solid #e6eeeb;border-radius:15px;width:max-content;margin:0 0 12px;position:relative;z-index:2}
.tab{border:0;background:transparent;color:var(--muted);padding:11px 24px;border-radius:12px;font-weight:700;min-width:126px}
.tab.is-active{background:var(--petrol);color:#fff;box-shadow:0 5px 12px rgba(20,64,65,.19)}
.tab-icon{font-size:19px;vertical-align:-1px;margin-left:6px}
.calendar-card{background:var(--paper);border:1px solid #e8efec;border-radius:25px;padding:20px 24px 14px;box-shadow:var(--shadow)}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:15px}
h2,h3,p{overflow-wrap:anywhere}
.calendar-toolbar h2,.agenda-header h2,.tasks-heading h2{margin:0;color:var(--ink);font-size:24px;line-height:1.35}
.month-controls{display:flex;gap:7px;align-items:center}
.circle-button,.today-button{border:1px solid var(--line);background:#f8fbf9;color:var(--petrol);height:38px;border-radius:11px;font-weight:700}
.circle-button{width:38px;font-size:25px;line-height:1}
.today-button{padding:0 14px;font-size:12px}
.weekday-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.weekday-row{color:#78908b;text-align:center;font-weight:700;font-size:12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.calendar-grid{row-gap:5px;margin-top:10px;touch-action:pan-y}
.day-cell{border:1px solid transparent;background:transparent;border-radius:13px;color:var(--ink);height:64px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative}
.day-cell:hover{background:#edf6f2}
.day-cell.is-outside{color:#aabcb7}
.day-cell.is-today .day-number{border-bottom:2px solid #53a792}
.day-cell.is-selected{background:var(--petrol);color:white;box-shadow:0 8px 16px rgba(23,71,73,.23)}
.day-cell.is-selected:hover{background:var(--petrol-light)}
.day-cell.is-selected .day-number{border-bottom-color:rgba(255,255,255,.7)}
.day-number{font-weight:700;font-size:16px;line-height:24px;min-width:20px;text-align:center;border-bottom:2px solid transparent}
.day-dots{display:flex;align-items:center;justify-content:center;gap:3px;height:8px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9aa}
.dot.low{background:var(--green)}.dot.medium{background:#e5a632}.dot.high{background:var(--red)}
.day-cell.is-selected .dot{box-shadow:0 0 0 1px rgba(255,255,255,.65)}
.extra-count{font-size:9px;color:#66877f;line-height:1}
.day-cell.is-selected .extra-count{color:#ecf8f2}
.legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);margin-top:15px;padding:13px 1px 1px;color:var(--muted);font-size:11px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .dot{width:8px;height:8px}
.agenda-header{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 12px;gap:14px}
.text-button{border:0;background:#e0f1eb;color:var(--petrol);font-weight:800;padding:10px 17px;border-radius:11px;white-space:nowrap}
.text-button span{font-size:19px;vertical-align:-1px;margin-left:3px}
.item-list{display:grid;gap:11px}
.item-card{position:relative;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e5ede9;border-radius:17px;padding:16px 17px 16px 13px;box-shadow:0 5px 20px rgba(16,55,56,.035);min-width:0}
.item-card::before{content:"";position:absolute;top:15px;bottom:15px;right:0;width:4px;border-radius:4px 0 0 4px;background:var(--green)}
.item-card.priority-medium::before{background:#e2a329}.item-card.priority-high::before{background:var(--red)}
.item-card.is-done{opacity:.65}
.item-card.is-done .item-title{text-decoration:line-through;text-decoration-color:#9bb4aa}
.complete-button{flex:0 0 27px;width:27px;height:27px;border:2px solid #c4d8d0;border-radius:9px;background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;margin-top:2px}
.is-done .complete-button{background:var(--green);border-color:var(--green)}
.item-body{flex:1;min-width:0}
.item-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.item-title{font-weight:800;margin:0;font-size:15px;line-height:1.5}
.item-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:7px;color:var(--muted);font-size:12px}
.meta-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;background:#edf5f2;padding:4px 8px;color:#3d6d64}
.meta-pill.priority-high{background:var(--red-bg);color:#a43834}.meta-pill.priority-medium{background:var(--amber-bg);color:#896014}.meta-pill.priority-low{background:var(--green-bg);color:#317056}
.item-note{margin:7px 0 0;color:#778b87;font-size:12px;line-height:1.5;white-space:pre-line}
.edit-button{border:0;background:#f3f7f5;color:#55766f;border-radius:9px;min-width:34px;height:32px;white-space:nowrap;font-size:12px;font-weight:700;padding:0 9px}
.empty-state{background:#fff;border:1px dashed #bed5cb;border-radius:20px;padding:40px 20px;text-align:center;color:var(--muted)}
.empty-icon{width:61px;height:61px;margin:0 auto 14px;border-radius:20px;background:#e5f3ec;color:var(--petrol);display:grid;place-items:center;font-size:29px}
.empty-state h3{color:var(--ink);margin:0 0 5px;font-size:17px}.empty-state p{margin:0;font-size:13px;line-height:1.7}
.tasks-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:9px 2px 19px}.tasks-heading p:last-child{margin:7px 0 0;color:var(--muted);font-size:13px}
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
.filter{border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);padding:8px 15px;white-space:nowrap;font-weight:700;font-size:12px}.filter.is-active{color:#fff;background:var(--petrol);border-color:var(--petrol)}
.task-list{margin-top:3px}
.fab{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:max(24px,calc((100vw - 1064px)/2));width:60px;height:60px;border:0;border-radius:20px;background:#215c5b;color:white;box-shadow:0 14px 35px rgba(18,65,65,.3);font-size:32px;line-height:1;z-index:10}
.fab:hover{background:#2f7773}
.toast{position:fixed;left:50%;bottom:99px;transform:translate(-50%,12px);background:#173c3e;color:#fff;padding:11px 18px;border-radius:12px;box-shadow:0 14px 30px #0002;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;text-align:center;min-width:230px;max-width:90vw}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.modal{border:0;border-radius:23px;padding:25px;width:min(96vw,550px);max-height:min(92vh,900px);overflow:auto;box-shadow:0 24px 100px rgba(9,40,41,.28);background:#fff;color:var(--ink)}
.modal::backdrop{background:rgba(9,39,40,.55);backdrop-filter:blur(4px)}
.modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:20px}.modal-top h2{margin:0;font-size:23px}
.kind-toggle{display:flex;padding:4px;background:#ecf4f0;border-radius:12px;gap:4px;margin-bottom:18px}.kind-button{width:50%;border:0;background:transparent;border-radius:9px;padding:9px;color:#66817a;font-weight:800}.kind-button.is-active{background:#fff;color:var(--petrol);box-shadow:0 2px 8px #0021}
.field{display:flex;flex-direction:column;gap:7px;margin:14px 0}.field>span,.priority-field legend,.reminder-field legend{color:#365a56;font-weight:800;font-size:13px}.field b{color:var(--red)}.field small{font-size:11px;color:#92a4a0;font-weight:400}
.field input,.field textarea{border:1px solid #d9e5e0;background:#fbfdfb;border-radius:10px;padding:12px 13px;color:var(--ink);width:100%;font-size:16px}.field textarea{resize:vertical;min-height:74px}.field input::placeholder,.field textarea::placeholder{color:#a3b5af}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-row .field{min-width:0}
.priority-field,.reminder-field{border:0;padding:0;margin:17px 0}.priority-field legend,.reminder-field legend{margin-bottom:9px}
.priority-field{display:flex;flex-wrap:wrap;gap:7px}.priority-field legend{width:100%}
.priority-choice{position:relative;display:flex;align-items:center;gap:7px;border:1px solid #dfe9e4;border-radius:10px;padding:10px 11px;color:#5e756f;font-weight:700;font-size:12px;cursor:pointer}.priority-choice input{position:absolute;opacity:0}.priority-choice:has(input:checked){border-color:#5eaaa0;box-shadow:0 0 0 2px #e0f3ed;color:var(--ink)}
.priority-swatch{width:11px;height:11px;border-radius:50%}.priority-swatch.low{background:var(--green)}.priority-swatch.medium{background:#e5a632}.priority-swatch.high{background:var(--red)}
.field-hint,.capability-note{margin:0 0 9px;color:#81958d;font-size:12px;line-height:1.5}.capability-note{margin-top:8px;color:#aa6e22}
.reminder-options{display:flex;flex-wrap:wrap;gap:7px}.reminder-options label{cursor:pointer;position:relative}.reminder-options input{position:absolute;opacity:0}.reminder-options span{display:block;border:1px solid #dfe9e4;border-radius:10px;padding:9px 11px;color:#56756c;font-size:12px;font-weight:700}.reminder-options input:checked+span{background:#e0f1eb;border-color:#64ac9d;color:#175b53}.reminder-options input:focus-visible+span{outline:3px solid #72b9ad}
.modal-actions{display:flex;align-items:center;gap:8px;margin-top:25px}.modal-actions span{flex:1}.primary-button,.secondary-button,.danger-button{border:0;border-radius:10px;padding:11px 17px;font-weight:800;font-size:13px}.primary-button{background:var(--petrol);color:#fff}.secondary-button{background:#eaf3ef;color:var(--petrol)}.danger-button{background:#fff0ee;color:#ae403b}
.settings-modal{max-width:500px}.settings-section{border-top:1px solid var(--line);padding:18px 0}.settings-section h3{font-size:16px;margin:0 0 7px}.settings-section p{color:#697f78;font-size:13px;line-height:1.7;margin:0 0 13px}.settings-actions{display:flex;flex-wrap:wrap;gap:8px}.settings-note{margin:10px 0 0!important}
[hidden]{display:none!important}
@media(max-width:680px){.hero{padding:12px 16px}.main-content{margin:10px 12px 0;padding-bottom:100px}.main-tabs{width:100%;margin-bottom:10px}.tab{width:50%;min-width:0;padding:8px 16px}.calendar-card{padding:14px 10px 11px;border-radius:20px}.calendar-toolbar{padding:0 5px;margin-bottom:10px}.calendar-toolbar h2{font-size:20px}.day-cell{height:44px;border-radius:10px;gap:1px}.day-number{font-size:14px;line-height:21px}.weekday-row{font-size:10px;padding-bottom:7px}.calendar-grid{row-gap:2px;margin-top:6px}.legend{margin-top:7px;padding:8px 5px 0;gap:10px;font-size:10px}.agenda-header{margin:15px 4px 10px}.agenda-header h2,.tasks-heading h2{font-size:19px}.text-button{font-size:12px;padding:9px 12px}.item-card{padding:14px 13px 14px 10px}.fab{left:18px;width:55px;height:55px;border-radius:18px}.tasks-heading{margin:10px 4px 17px}.modal{padding:20px;border-radius:20px}.field-row{gap:9px}}
@media(max-width:380px){.day-cell{height:47px}.calendar-toolbar h2{font-size:17px}.today-button{padding:0 9px}.legend{gap:7px}.priority-choice{padding:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}