:root { --ink:#24424b; --muted:#78929b; --line:#e4eeee; --cream:#fbfbf6; --panel:#f4faf9; --aqua:#9ccfd7; --blue:#a8d1f0; --shadow:0 18px 50px rgba(73,123,132,.10); }
* { box-sizing:border-box; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:14px; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } .app-shell { min-height:100vh; display:grid; grid-template-columns:244px minmax(640px,1fr) 316px; }
.sidebar { padding:37px 28px 25px; background:#f1f8f7; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:100vh; } .brand { color:#167f9f; font-family:Allura,cursive; font-size:48px; line-height:.7; text-decoration:none; } .brand span { color:#91aeb6; } .brand-caption { color:#88a0a6; margin:14px 0 37px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.primary-button { border:0; border-radius:10px; padding:12px 15px; color:#fff; background:#2996b4; font-weight:700; box-shadow:0 7px 16px rgba(41,150,180,.18); transition:.2s; } .primary-button:hover { background:#157e9a; transform:translateY(-1px); } .side-section { margin-top:36px; } .eyebrow { color:#83a0a7; font-size:10px; font-weight:700; letter-spacing:.12em; margin:0 0 10px; } .work-hours { color:#5d808a; display:flex; align-items:center; gap:9px; font-size:13px; } .work-hours i { display:block; width:18px; height:1px; background:#bfd1d4; }.section-heading { display:flex; justify-content:space-between; align-items:flex-start; }.text-button { border:0; padding:0; background:none; color:#91a7ac; font-size:11px; }
.filter-chip { width:100%; display:flex; gap:9px; align-items:center; padding:8px 7px; border:0; border-radius:7px; text-align:left; color:#637f88; background:transparent; } .filter-chip:hover,.filter-chip.is-active { background:#e3f0ef; color:#24424b; } .filter-chip b { margin-left:auto; font-size:11px; }.dot { display:block; width:8px;height:8px;border-radius:50%; }.dot.all{background:#7aabb4}.dot.planned{background:#b3d2e3}.dot.progress{background:#8dcbd6}.dot.waiting{background:#c4d6d4}.up-next { display:grid; gap:8px;}.mini-project { background:#fff;border-radius:8px;padding:9px 10px;border-left:4px solid var(--aqua);font-size:11px;line-height:1.35;}.mini-project span { display:block;color:#8aa0a5;font-size:10px;margin-top:3px; }.sidebar-footer{margin-top:auto;display:grid;gap:6px;padding-top:25px}.footer-action{border:0;background:none;color:#7c999f;text-align:left;padding:4px 0;font-size:11px;cursor:pointer}
.calendar-area { padding:42px clamp(22px,4vw,64px) 25px; min-width:0; }.calendar-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:29px; }.calendar-header h1 { margin:0; color:#187f9f;font-family:Allura,cursive;font-weight:400;font-size:65px;line-height:.75; }.calendar-header h1 span{color:#a1b7bc;font-family:"DM Sans",sans-serif;font-size:17px;font-weight:500;margin-left:4px;vertical-align:middle}.month-actions{display:flex;align-items:center;gap:10px}.soft-button { border:1px solid #d7e7e7;border-radius:8px;padding:8px 12px;color:#66828a;background:#fff;font-size:12px; }.month-navigation{display:flex;border:1px solid #d7e7e7;border-radius:8px;overflow:hidden;background:#fff}.month-navigation button{border:0;background:none;color:#60828a;width:30px;height:31px;font-size:22px;line-height:1}.month-navigation button+button{border-left:1px solid #d7e7e7}
.calendar-card { overflow:hidden; border:1px solid var(--line);border-radius:13px;background:white;box-shadow:var(--shadow);}.weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(86px,1fr));}.weekdays{background:#f3f8f7;border-bottom:1px solid var(--line);}.weekdays span{padding:12px 8px 9px;text-align:center;color:#5b8290;font-family:Allura,cursive;font-size:18px;line-height:1}.calendar-grid{grid-template-rows:repeat(6,108px)}.day-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 7px;min-width:0;position:relative;overflow:hidden}.day-cell:nth-child(7n){border-right:0}.day-cell:nth-last-child(-n+7){border-bottom:0}.day-cell.is-muted{background:#fcfdfd}.day-cell.is-today .day-number{color:#fff;background:#2696b4}.day-number{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;color:#6d858c;font-size:11px;font-weight:600;margin-bottom:4px}.project-pill{width:100%;border:0;border-left:3px solid rgba(36,91,100,.23);border-radius:5px;margin:2px 0;padding:4px 5px;background:var(--pill);color:#315967;overflow:hidden;text-align:left;white-space:nowrap;text-overflow:ellipsis;font-size:10px;font-weight:600;transition:.15s}.project-pill:hover{filter:brightness(.96);transform:translateX(1px)}.project-pill .priority-mark{float:right;color:#397785;font-size:9px}.install-mark{position:absolute;right:8px;top:10px;color:#dfaa61;font-size:13px}.calendar-hint{margin:14px 2px;color:#98aeb2;font-size:11px}
.detail-panel{border-left:1px solid var(--line);background:#f8fbfa;padding:34px 28px;min-height:100vh;overflow:auto}.empty-state{margin-top:170px;text-align:center;color:#8ba3a8}.star{color:#91c4cc;font-size:45px}.empty-state h2{font-family:Allura,cursive;color:#2d8197;font-size:42px;font-weight:400;line-height:.85;margin:8px 0 20px}.empty-state h2 em{color:#93b5bb;font-style:normal}.empty-state p{font-size:12px;line-height:1.65}.detail-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.detail-top h2{font-size:20px;line-height:1.25;margin:3px 0 4px}.close-detail,.edit-detail{border:0;background:none;color:#7e9ca2;padding:3px}.detail-meta{color:#78939a;font-size:11px;margin-top:22px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);line-height:1.8}.tag{display:inline-block;border-radius:99px;padding:2px 8px;background:#e6f2f1;font-size:10px;margin:0 3px 0 0}.tag.high{background:#fde9d8;color:#af6c35}.tag.medium{background:#e8f1d9;color:#71854c}.detail-section{margin-top:24px}.detail-section h3{color:#72929a;font-size:10px;letter-spacing:.1em;margin:0 0 10px}.notes{color:#55757c;font-size:12px;line-height:1.65;white-space:pre-wrap}.dropbox-link{color:#1984a0;font-size:12px;word-break:break-all}.todo-list{display:grid;gap:7px}.todo-row{display:flex;gap:8px;align-items:center;color:#4d717a;font-size:12px}.todo-row input{accent-color:#3b9cb3}.todo-row.done span{text-decoration:line-through;color:#9dafb3}.todo-row button{border:0;background:none;color:#adbec1;font-size:14px}.add-todo{display:flex;gap:7px;margin-top:10px}.add-todo input{min-width:0;flex:1;border:1px solid #d7e7e7;border-radius:7px;padding:7px;background:#fff;font-size:11px}.add-todo button{border:0;background:none;color:#1487a3;font-size:18px}
dialog{padding:0;border:0;border-radius:15px;max-width:550px;width:calc(100% - 30px);box-shadow:0 20px 70px rgba(34,71,80,.25)}dialog::backdrop{background:rgba(42,74,79,.28);backdrop-filter:blur(2px)}dialog form{padding:28px;display:grid;gap:15px}.dialog-heading{display:flex;justify-content:space-between;align-items:start}.dialog-heading h2{margin:0;color:#197e9e;font-family:Allura,cursive;font-size:43px;font-weight:400;line-height:.7}.dialog-heading h2 em{color:#92b3b9;font-style:normal}.icon-button{border:0;background:none;font-size:23px;color:#78959a}.dialog-heading .eyebrow{margin-bottom:8px}label{display:grid;gap:6px;color:#607d85;font-size:11px;font-weight:600}input,select,textarea{width:100%;border:1px solid #d9e8e8;border-radius:7px;padding:9px;background:#fcfefd;color:#31555e;font-size:12px;font-weight:400}textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.colour-options{display:flex;flex-wrap:wrap;gap:9px}.colour-options button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;background:var(--colour)}.colour-options button.is-selected{outline:2px solid #578b94;outline-offset:2px}.dialog-actions{display:flex;justify-content:space-between;align-items:center;margin-top:3px}.delete-button{color:#bd6a67;border-color:#efd0ce}.dialog-actions .primary-button{padding-left:20px;padding-right:20px}
@media (max-width:1050px){.app-shell{grid-template-columns:210px minmax(580px,1fr)}.detail-panel{position:fixed;right:0;top:0;bottom:0;width:330px;z-index:4;transform:translateX(100%);transition:.25s;box-shadow:-14px 0 50px rgba(46,88,94,.08)}.detail-panel.is-open{transform:translateX(0)}.calendar-area{padding:35px 25px}.calendar-grid{grid-template-rows:repeat(6,100px)}}
@media (max-width:700px){.app-shell{display:block}.sidebar{min-height:auto;padding:20px;display:block}.brand-caption,.side-section,.sidebar-footer{display:none}.primary-button{float:right;margin-top:-30px}.calendar-area{padding:30px 14px}.calendar-header h1{font-size:53px}.calendar-header{align-items:end}.calendar-grid{grid-template-rows:repeat(6,92px)}.day-cell{padding:6px 4px}.weekdays span{font-size:15px}.project-pill{font-size:9px;padding:3px}.detail-panel{width:min(100%,360px)}.month-actions{gap:5px}.soft-button{padding:7px 9px}.calendar-hint{display:none}}