:root{
  --bg:#f7f7f7;
  --panel:#ffffff;
  --line:#e9e9e9;
  --line-strong:#dfdfdf;
  --text:#6a7783;
  --text-strong:#20262d;
  --blue:#2e95ef;
  --blue-soft:#55a6ef;
  --side:#fbfbfb;
  --side-border:#dcdcdc;
  --side-icon:#8ea0b3;
  --clock:#bdc9d7;
  --row-highlight:#faf3c3;
  --danger:#e27d72;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  color:var(--text);
}
button,input,select,textarea{font:inherit}
.hours-layout{display:grid;grid-template-columns:60px 1fr;min-height:100vh}
.sidebar{background:var(--side);border-right:1px solid var(--side-border);display:flex;flex-direction:column;justify-content:space-between;padding:18px 0 10px}
.side-top{display:flex;flex-direction:column;align-items:center;gap:34px;padding-top:2px}
.nav-icon{width:38px;height:38px;border-radius:999px;border:2px solid var(--side-icon);background:transparent;display:grid;place-items:center;padding:0;color:var(--side-icon);cursor:pointer;transition:.18s ease}
.nav-icon.active,.nav-icon:hover{border-color:var(--blue);color:var(--blue)}
.side-bottom{display:flex;flex-direction:column;gap:10px;padding:0 8px;color:#94a0ab;font-size:12px;line-height:1.2}
.side-link{background:transparent;border:none;color:inherit;text-align:left;padding:0;cursor:pointer}
.icon{display:block;position:relative}
.icon.clock{width:14px;height:14px;border:2px solid currentColor;border-radius:999px}
.icon.clock::before,.icon.clock::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform-origin:bottom center}
.icon.clock::before{width:2px;height:5px;transform:translate(-50%,-100%)}
.icon.clock::after{width:2px;height:7px;transform:translate(-50%,-100%) rotate(42deg)}
.icon.report{width:16px;height:20px;border:2px solid currentColor;border-radius:2px}
.icon.report::before,.icon.report::after{content:"";position:absolute;left:3px;right:3px;height:2px;background:currentColor}
.icon.report::before{top:6px}
.icon.report::after{top:11px}
.icon.download{width:16px;height:18px;border-bottom:2px solid currentColor}
.icon.download::before{content:"";position:absolute;left:7px;top:1px;width:2px;height:10px;background:currentColor}
.icon.download::after{content:"";position:absolute;left:4px;top:8px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid currentColor}
.icon.gear{width:18px;height:18px;border:2px solid currentColor;border-radius:999px}
.icon.gear::before{content:"";position:absolute;inset:-4px;border:2px dashed currentColor;border-radius:999px;opacity:.55}
.icon.archive{width:16px;height:14px;border:2px solid currentColor;border-top:none}
.icon.archive::before{content:"";position:absolute;left:-2px;right:-2px;top:-4px;height:4px;border:2px solid currentColor;border-bottom:none;border-radius:2px}
.icon.projects{width:18px;height:16px;border:2px solid currentColor;border-radius:3px}
.icon.projects::before,.icon.projects::after{content:"";position:absolute;left:3px;right:3px;height:2px;background:currentColor}
.icon.projects::before{top:5px}
.icon.projects::after{top:10px}

.main-shell{min-width:0;display:flex;flex-direction:column}
.view.hidden{display:none}

.calendar-panel{background:var(--panel);box-shadow:inset 0 -1px 0 var(--line)}
.week-range-bar{height:42px;background:var(--blue);display:flex;align-items:center;justify-content:center;gap:14px;color:#dff1ff;font-size:13px;font-weight:600;letter-spacing:.01em}
.range-arrow{background:transparent;border:none;color:#dff1ff;padding:0;font-size:14px;cursor:pointer;line-height:1}
.range-title{min-width:172px;text-align:center}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);background:var(--blue);padding:0 28px 0 66px}
.day-cell{height:74px;background:var(--blue-soft);border-right:1px solid rgba(255,255,255,.14);color:#dcedff;border:none;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:background .15s ease,color .15s ease}
.day-cell:first-child{border-top-left-radius:6px}
.day-cell:last-child{border-top-right-radius:6px;border-right:none}
.day-cell.active{background:#f3f3f3;color:var(--text-strong)}
.day-label{font-size:13px;line-height:1.2;font-weight:500}
.day-hours{margin-top:6px;font-size:12px;opacity:.96}
.day-track-panel{background:#f9f9f9;border-bottom:1px solid var(--line);padding:14px 18px 12px 0;position:relative}
.hour-labels{display:grid;grid-template-columns:repeat(24,1fr);color:#b6b6b6;font-size:11px;padding-left:0}
.hour-label{text-align:center;position:relative;min-height:28px}
.hour-label::after{content:"";position:absolute;right:0;top:22px;width:1px;height:34px;background:#e3e3e3}
.day-track{position:relative;height:28px;background:#ececec;margin-top:18px;overflow:visible;border-top:1px solid #ededed;border-bottom:1px solid #dfdfdf}
.track-grid{position:absolute;inset:0;background:repeating-linear-gradient(to right, transparent 0, transparent calc(100%/24 - 1px), #dfdfdf calc(100%/24 - 1px), #dfdfdf calc(100%/24));opacity:.22}
.track-empty-slots,.track-entries{position:absolute;inset:0}
.empty-slot{position:absolute;top:0;bottom:0;border:none;background:transparent;opacity:0;cursor:pointer}
.empty-slot:hover{opacity:1;background:rgba(0,0,0,.03)}
.slot-plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:6px;background:#cfcfcf;color:#666;display:grid;place-items:center;font-size:30px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.track-entry{position:absolute;top:-1px;height:28px;border-radius:2px;color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 10px;overflow:visible;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06)}
.track-entry.track-running{opacity:.9}
.track-label{pointer-events:none}
.resize-handle{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize}
.resize-handle.left{left:-2px}
.resize-handle.right{right:-2px}
.current-time-line{position:absolute;top:-46px;bottom:-1px;width:2px;background:#1f1f1f;display:none}
.current-time-line::before{content:"";position:absolute;top:-4px;left:-2px;width:6px;height:6px;background:#1f1f1f;border-radius:999px}

.timers-toolbar{display:flex;justify-content:space-between;align-items:center;padding:26px 58px 14px;background:var(--bg)}
.pill-btn{height:46px;border-radius:999px;border:1px solid #d9d9d9;background:#fafafa;color:#6b7782;padding:0 22px;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:11px;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.92) inset}
.plus-circle,.grid-dot{width:22px;height:22px;border-radius:999px;background:#56c05d;color:white;display:grid;place-items:center;font-weight:700;font-size:18px;line-height:1;position:relative;flex:0 0 auto}
.grid-dot::before,.grid-dot::after{content:"";position:absolute;background:white;border-radius:1px}
.grid-dot::before{width:10px;height:2px;top:10px;left:6px}
.grid-dot::after{width:2px;height:10px;left:10px;top:6px}

.project-list-wrap{padding:0 58px 40px;background:var(--bg)}
.project-row{border-top:1px solid var(--line);padding:10px 2px;background:transparent}
.project-row:last-child{border-bottom:1px solid var(--line)}
.project-row.selected{background:#f8f8f8}
.project-row.running-selected{box-shadow:inset 0 10px 0 var(--row-highlight), inset 0 -10px 0 var(--row-highlight)}
.project-row.selected .row-main{min-height:84px}
.row-main{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:18px;min-height:72px;cursor:pointer}
.project-badge{width:48px;height:48px;border-radius:4px;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600;letter-spacing:.01em}
.project-name{font-size:16px;color:#5e6974;display:flex;align-items:center;gap:12px;background:transparent;border:none;padding:0;text-align:left;cursor:inherit;font-weight:400}
.project-name .client,.project-name .project{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-name.static{cursor:default}
.sep{opacity:.56;font-size:10px;line-height:1}
.project-action{display:flex;align-items:center;gap:12px}
.clock-btn{width:56px;height:56px;border-radius:999px;border:none;background:var(--clock);display:grid;place-items:center;color:#fff;cursor:pointer;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.clock-btn .icon.clock{border-color:#fff;color:#fff;width:17px;height:17px}
.clock-btn.running{padding:0 18px;width:auto;min-width:154px;border-radius:999px;font-weight:600;font-size:14px;display:flex;justify-content:center;gap:12px;box-shadow:none}
.clock-btn.running .run-prefix{opacity:.98;font-size:14px;letter-spacing:.01em}
.row-actions{display:flex;gap:12px}
.small-action{min-width:116px;height:48px;border-radius:8px;border:1px solid #b9bec5;background:#fafafa;color:#66717c;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;font-weight:500}
.small-action.done{border-color:#d4ae33;background:#fff;color:#5e6a74}
.small-action.archive{color:#8f9499}
.small-action .mini-icon{display:inline-block;width:22px;height:22px;border-radius:999px;background:#8da0d8;color:#fff;font-size:12px;line-height:22px;text-align:center;margin-right:10px}
.small-action.archive .mini-icon{background:transparent;border:1px solid #cdd3d8;color:#b7bcc1;border-radius:4px;line-height:20px}

.row-detail{margin-top:0;border-top:1px solid #e6e6e6;padding:0 8px 0 8px;color:#8c959d;font-size:13px}
.detail-entry{display:grid;grid-template-columns:72px 1px 178px 1px 1fr auto;align-items:center;gap:18px;padding:18px 18px;border-bottom:1px solid #ececec;min-height:60px}
.detail-sep{width:1px;height:22px;background:#e6e6e6}
.detail-duration{font-size:18px;color:#111;font-weight:600;letter-spacing:.01em}
.detail-range{display:flex;align-items:center;gap:6px;color:#acb0b4;font-size:18px}
.detail-note-input{border:none;background:transparent;padding:0;color:#9ea4aa;font-size:18px;outline:none;width:100%}
.detail-note-input::placeholder{color:#b2b2b2}
.detail-delete{color:var(--danger);background:transparent;border:none;padding:0;font-size:18px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.add-non-timeline{display:inline-block;margin:22px 0 22px 18px;color:#a4aab0;background:transparent;border:none;padding:0;font-size:18px;cursor:pointer}
.empty-detail{padding:18px;color:#9da6ae}
.time-adjust{display:inline-block;position:relative;margin-right:0}
.time-adjust-value{background:transparent;border:none;border-bottom:1px dotted #ccc;color:#a6a9ad;font-size:18px;cursor:pointer;padding:0;line-height:1.2}
.time-adjust-popup{display:none;position:absolute;left:0;top:-8px;transform:translateY(-100%);background:white;border:1px solid #d7d7d7;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:4px 8px;align-items:center;gap:8px;z-index:5}
.time-adjust.open .time-adjust-popup{display:inline-flex}
.time-adjust-popup button{border:none;background:transparent;color:#909090;cursor:pointer;font-size:16px}

.simple-page{padding:28px}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.toolbar-inline{display:flex;gap:8px;align-items:center}
.secondary-btn{height:38px;border-radius:10px;border:1px solid #d6dbe1;background:#f7f8f9;color:#56626d;padding:0 14px;cursor:pointer}
.report-box{background:white;border:1px solid #e5e5e5;border-radius:12px;padding:18px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #e6e6e6;text-align:left}

.dialog-actions-hidden{display:none}
dialog{border:none;border-radius:18px;padding:0;background:#fff;color:#44505a;box-shadow:0 18px 60px rgba(0,0,0,.25);width:min(560px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:hidden}
dialog::backdrop{background:rgba(0,0,0,.3)}
.modal-form{display:grid;gap:12px;padding:24px;max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden}
.modal-form label{display:grid;gap:6px;color:#687481}
.modal-form input,.modal-form select,.modal-form textarea{width:100%;background:#fafafa;color:#3e4a54;border:1px solid #d8dde3;border-radius:10px;padding:10px 12px}

.project-modal{width:min(760px,calc(100vw - 48px));max-width:calc(100vw - 48px);max-height:min(88vh,860px);box-sizing:border-box;gap:18px;padding:28px 32px 24px;overscroll-behavior:contain;overflow-y:auto;overflow-x:hidden}
.project-modal h3{margin:0 0 8px;color:#56626d;font-size:30px;line-height:1.1}
.dialog-field{display:grid;gap:10px;min-width:0}
.dialog-field > label{font-size:16px;font-weight:700;color:#56626d}
.dialog-field select,.dialog-field input{height:52px;background:#fff;max-width:100%;min-width:0;box-sizing:border-box;font-size:17px;color:#49545f}
.dialog-field select{color:#49545f}
.field-help{font-size:13px;color:#8a95a2;line-height:1.45}
.project-color-grid{display:grid;grid-template-columns:repeat(5,64px);gap:14px;align-items:center}
.color-choice{position:relative;width:64px;height:64px;border-radius:14px;border:3px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);outline:none;display:grid;place-items:center;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.color-choice:hover{transform:translateY(-1px)}
.color-choice.selected{border-color:#2f90ea;box-shadow:0 0 0 4px rgba(47,144,234,.20)}
.color-choice.locked{opacity:1;cursor:default}
.color-choice .color-check{color:#fff;font-size:24px;font-weight:800;opacity:0;transform:scale(.65);transition:opacity .12s ease,transform .12s ease;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.color-choice.selected .color-check{opacity:1;transform:scale(1)}
.project-modal select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8ea0b3 50%),linear-gradient(135deg,#8ea0b3 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}
.project-modal .modal-actions{position:static;background:#fff;padding-top:10px;margin-top:8px;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.project-modal .modal-actions button{height:46px;padding:0 22px;font-size:16px;min-width:120px;box-sizing:border-box}

.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.modal-actions button{height:38px;border-radius:10px;border:1px solid #d6dbe1;background:#f7f8f9;color:#56626d;padding:0 14px;cursor:pointer}
.modal-actions button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.modal-actions button.danger{background:#fff5f4;border-color:#efc4bf;color:#ca6457}

.project-picker-list{max-height:56vh;overflow:auto;display:grid;gap:8px}
.picker-project{border:none;background:#fff;padding:8px 10px;text-align:left;font-size:20px;color:#444;cursor:pointer}
.picker-project:hover{background:#f4f4f4}

.edit-timer-form{width:min(1180px,96vw);height:min(86vh,920px);display:grid;grid-template-rows:122px 1fr 110px;background:#f7f7f7}
.edit-head{background:var(--blue);color:white;font-size:46px;display:grid;place-items:center}
.edit-body{overflow:auto;padding:26px 40px}
.edit-stack{display:grid;justify-items:center;gap:18px}
.big-edit-btn{min-width:180px;height:72px;border-radius:12px;border:1px solid #cfcfcf;background:#fff;color:#40484f;font-size:22px;cursor:pointer}
.color-btn{background:#d9b744;color:#fff;border-color:#d9b744}
.color-palette{display:grid;grid-template-columns:repeat(4,78px);gap:18px;padding:18px;background:#fff;border:1px solid #cfcfcf;border-radius:10px;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.hidden{display:none !important}
.swatch{width:78px;height:78px;border:none;border-radius:8px;cursor:pointer}
.swatch.selected{outline:4px solid #333}
.edit-panel{width:min(790px,100%);background:#f7f7f7;padding:18px}
.edit-panel h4{margin:0 0 8px;text-align:center;font-size:34px;color:#2d4258}
.edit-panel p{text-align:center;margin:0 0 18px;font-size:22px;color:#666}
.edit-panel input{width:100%;height:62px;border:1px solid #cfcfcf;border-radius:8px;background:#fff;padding:0 18px;font-size:22px;margin-bottom:18px}
.chip-grid{display:flex;flex-wrap:wrap;gap:12px}
.chip{height:52px;border-radius:12px;border:1px solid #d4d4d4;background:#fff;padding:0 20px;font-size:20px;color:#4c5965;cursor:pointer}
.chip.selected{border-color:var(--blue);box-shadow:0 0 0 2px rgba(47,144,234,.18)}
.project-chip{display:flex;align-items:center;gap:12px}
.chip-color{width:34px;height:34px;border-radius:8px;display:inline-block}
.edit-footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 28px;border-top:1px solid #ddd;background:#fff}
.edit-footer button{height:72px;border-radius:12px;border:1px solid #cfcfcf;background:#fff;color:#444;font-size:24px;padding:0 26px}
.primary-outline{border-color:#2f90ea !important;color:#2f90ea !important}
.edit-project-preview{display:flex;align-items:center;gap:20px;padding:0 36px;font-size:28px;color:#55616c}
.preview-color{width:60px;height:60px;border-radius:8px;background:#d9b744;display:inline-block}

@media (max-width:980px){
  .week-strip{padding:0 12px 0 12px}
  .timers-toolbar{padding:16px 12px 12px}
  .project-list-wrap{padding:0 10px 20px}
  .row-main{grid-template-columns:72px 1fr auto}
  .project-badge{width:42px;height:42px;font-size:13px}
  .project-name{font-size:15px}
  .detail-entry{grid-template-columns:1fr;gap:8px}
}


/* Projects panel */
.projects-shell{min-height:100%;background:#f5f5f5}
.projects-bluebar{height:42px;background:var(--blue);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;color:#fff;position:relative}
.projects-bar-left{position:relative}
.projects-title-btn{background:transparent;border:none;color:#fff;font-size:22px;font-weight:500;cursor:pointer;padding:0}
.projects-title-btn .caret{font-size:14px;vertical-align:middle}
.projects-mode-menu{position:absolute;top:34px;left:0;background:#fff;border:1px solid #d6d9de;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.12);overflow:hidden;z-index:12;min-width:180px}
.projects-mode-menu button{display:block;width:100%;text-align:left;border:none;background:#fff;padding:12px 16px;font-size:15px;color:#47545f;cursor:pointer}
.projects-mode-menu button:hover{background:#f3f6f8}
.projects-bar-center{display:flex;align-items:center;gap:12px;justify-self:center}
.projects-arrow{background:transparent;border:none;color:#dff1ff;font-size:15px;cursor:pointer}
.projects-range-label{min-width:220px;text-align:center;font-size:16px;font-weight:500;color:#eaf5ff}
.projects-segments{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--blue);padding:6px 20px 0 20px;gap:1px}
.segment-cell{background:rgba(255,255,255,.12);border-top-left-radius:6px;border-top-right-radius:6px;min-height:42px;padding:8px 6px 10px;text-align:center;color:#dcecff;font-size:12px}
.segment-cell.active{background:#f5f5f5;color:#2d343a}
.segment-cell .seg-main{display:block;font-size:16px;margin-bottom:4px;color:inherit}
.segment-cell .seg-sub{display:block;font-size:12px;opacity:.9}
.projects-content{padding:18px 20px 26px}
.projects-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.segmented-tabs{display:inline-flex;border:1px solid #d7d7d7;border-radius:8px;overflow:hidden;background:#fff}
.seg-tab{height:34px;min-width:106px;border:none;background:#f8f8f8;color:#57626d;cursor:pointer}
.seg-tab.active{background:#ededed;color:#39434d}
.toolbar-select,.toolbar-share{height:34px;border:1px solid #d7d7d7;border-radius:8px;background:#fff;color:#57626d;padding:0 12px;font-size:14px}
.toolbar-select.light{background:#f7f7f7;color:#737d87}
.toolbar-share{cursor:pointer}
.toolbar-spacer{flex:1}
.projects-overview{display:grid;grid-template-columns:minmax(200px,340px) 1px minmax(120px,180px) 1px 1fr;gap:24px;align-items:center;padding:28px 0 22px;border-top:1px solid #dfdfdf;margin-top:18px;color:#4a5660}
.overview-range{font-size:18px;color:#59636d}
.overview-divider{width:1px;height:22px;background:#e2e2e2}
.overview-total{font-size:18px;text-align:center;color:#525f69}
.projects-visuals{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start;margin-bottom:16px}
.visual-left{display:flex;flex-direction:column;gap:14px}
.donut-wrap{display:flex;align-items:center;justify-content:flex-start;min-height:120px}
.projects-donut{width:110px;height:110px;border-radius:999px;position:relative;background:#ddd}
.projects-donut::after{content:"";position:absolute;inset:28px;background:#f5f5f5;border-radius:999px}
.projects-legend{display:flex;gap:10px;flex-wrap:wrap}
.legend-item{display:inline-flex;align-items:center;gap:8px;color:#66717b;font-size:14px}
.legend-item .legend-badge{padding:4px 8px;border-radius:6px;color:#fff;font-size:13px;min-width:38px;text-align:center}
.projects-bars{display:flex;align-items:flex-end;gap:18px;min-height:160px;padding-top:12px;border-bottom:1px solid transparent}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:36px}
.bar-stack{display:flex;align-items:flex-end;gap:2px;height:120px}
.bar-seg{width:10px;border-radius:2px 2px 0 0}
.bar-label{font-size:12px;color:#7e8790;white-space:nowrap}
.projects-table{margin-top:6px;border-top:1px solid #e4e4e4;background:#fff0}
.projects-group-head{display:grid;grid-template-columns:110px 1fr;background:#ececec;color:#444;padding:12px 14px;font-size:16px;margin-top:2px}
.projects-group-head .group-hours{font-weight:600;text-align:center}
.projects-group-head .group-date{padding-left:8px}
.projects-table-row{display:grid;grid-template-columns:110px 1fr 1fr;background:#fff0;border-bottom:1px solid #ececec;color:#58636d;padding:12px 14px;font-size:16px}
.projects-table-row .bold{font-weight:600;color:#111}
.projects-table-row.summary{grid-template-columns:1fr 160px 160px}
.projects-table-empty{padding:42px 20px;color:#9aa4ad;text-align:center}
.archived-row-detail{margin:0 8px 12px;border-top:1px solid #e4e4e4;padding:0}
.archived-footer{display:flex;justify-content:flex-end;padding:18px}
.restore-btn{min-width:112px;height:42px;border-radius:8px;border:1px solid #2f90ea;background:#fff;color:#2f90ea;cursor:pointer}
.archived-detail-row{display:grid;grid-template-columns:220px 120px 1fr;gap:20px;padding:16px 18px;border-bottom:1px solid #ececec;color:#5d6771;font-size:16px}
.archived-head-row{display:grid;grid-template-columns:220px 120px 1fr;gap:20px;padding:16px 18px;border-bottom:1px solid #ececec;color:#9aa2aa;font-size:14px;text-transform:none}
.archived-row.expanded{background:#f8f8f8}
@media (max-width:980px){
  .projects-toolbar{align-items:flex-start}
  .projects-overview{grid-template-columns:1fr;gap:12px}
  .overview-divider{display:none}
  .projects-visuals{grid-template-columns:1fr}
  .projects-table-row,.projects-group-head,.archived-detail-row,.archived-head-row{grid-template-columns:1fr}
}

/* E7 refined */
.project-row.selected{background:#fafafa}
.project-row.selected .row-main{min-height:96px;padding:4px 10px}
.row-main{gap:22px}
.project-badge{width:54px;height:54px;border-radius:6px;font-size:16px;font-weight:500}
.project-name{font-size:20px;color:#56626c;gap:14px}
.project-name .sep{font-size:12px;opacity:.55}
.project-action{gap:14px}
.small-action{min-width:108px;height:48px;border-radius:8px;border:1px solid #b8bcc2;background:#fbfbfb;color:#616c76;font-size:15px;font-weight:500}
.small-action.done{border-color:#d9b744;background:#fff;color:#4f5962}
.row-detail{margin-top:0;border-top:1px solid #e7e7e7;padding:0 18px 10px;background:#fafafa}
.detail-entry{grid-template-columns:82px 1px 180px 1px 1fr 90px;gap:16px;padding:18px 10px;border-bottom:1px solid #ededed;min-height:58px}
.detail-duration{font-size:16px;font-weight:700;color:#101316;letter-spacing:0}
.detail-range{font-size:16px;color:#adb2b7;gap:4px}
.time-adjust-value{font-size:16px;color:#b0b4b8;border-bottom:1px solid #d4d4d4;text-decoration:none}
.detail-note-input{font-size:16px;color:#8e949a}
.detail-note-input::placeholder{color:#b4b4b4}
.detail-delete{font-size:16px;color:#eb8a7d;text-underline-offset:1px;justify-self:end}
.add-non-timeline{margin:18px 0 18px 2px;font-size:16px;color:#a8adb2}

/* Projects panel refined */
.projects-shell{background:#f3f3f3}
.projects-bluebar{height:40px;padding:0 26px;grid-template-columns:1fr auto 1fr}
.projects-title-btn{font-size:16px;font-weight:400;letter-spacing:.01em}
.projects-title-btn .caret{font-size:12px;margin-left:8px}
.projects-range-label{min-width:280px;font-size:15px;font-weight:500;color:#eef7ff}
.projects-arrow{font-size:14px;color:#dcedff}
.projects-mode-menu{top:30px;left:-10px;width:484px;min-width:484px;border-radius:8px;padding:0;overflow:hidden;background:#f6f6f6;box-shadow:0 12px 24px rgba(0,0,0,.14);border:1px solid #bfc8d0}
.projects-mode-menu .mode-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 26px;border:none;border-bottom:1px solid transparent;background:#f6f6f6;color:#1f252c;font-size:22px;line-height:1.2;cursor:pointer}
.projects-mode-menu .mode-item:hover{background:#f0f4f8}
.projects-mode-menu .mode-item.custom-row{border:1px solid #2f90ea;border-left:none;border-right:none;background:#f7f7f7}
.projects-mode-menu .custom-period-label{font-size:22px;color:#1f252c}
.projects-custom-controls{display:flex;align-items:center;gap:8px;padding:20px 20px 10px}
.custom-date-btn{min-width:168px;height:68px;border-radius:10px;border:2px solid #d0d0d0;background:#fff;color:#6d6d6d;font-size:22px;cursor:pointer}
.custom-date-btn.is-active{border-color:#2f90ea;box-shadow:0 0 0 2px rgba(47,144,234,.12) inset}
.custom-date-to{width:80px;height:68px;border-radius:6px;border:1px solid #d0d0d0;background:#efefef;color:#666;display:grid;place-items:center;font-size:22px}
.projects-calendar-wrap{padding:16px 18px 24px}
.projects-calendar-nav{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;margin-bottom:12px;color:#333}
.projects-calendar-nav button{border:none;background:transparent;font-size:28px;color:#333;cursor:pointer}
#projectsCalLabel{text-align:center;font-size:28px;font-weight:600;color:#303236}
.projects-calendar-weekdays,.projects-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.projects-calendar-weekdays{margin-bottom:10px}
.projects-calendar-weekdays div{text-align:center;font-size:18px;color:#303236}
.cal-day{border:none;background:transparent;height:42px;border-radius:8px;font-size:18px;color:#2e3135;cursor:pointer}
.cal-day.outside{color:#b6b6b6}
.cal-day.in-range{background:#eef5ff}
.cal-day.selected{background:#2f90ea;color:#fff}
.projects-segments{padding:12px 26px 0;gap:0}
.segment-cell{min-height:46px;border-right:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.16);border-top-left-radius:0;border-top-right-radius:0;padding:6px 8px 8px;font-size:12px}
.segment-cell.active{background:#f3f3f3}
.segment-cell .seg-main{font-size:15px;font-weight:500;margin-bottom:3px}
.segment-cell .seg-sub{font-size:14px}
.projects-content{padding:18px 26px 30px}
.projects-toolbar{gap:12px}
.segmented-tabs{border-radius:6px;border-color:#d7d7d7;background:#f8f8f8}
.seg-tab{height:34px;min-width:108px;background:#f9f9f9;font-size:14px}
.seg-tab.active{background:#ededed}
.toolbar-select,.toolbar-share{height:34px;border-radius:6px;background:#fff;font-size:14px;color:#515b66;padding:0 12px}
.toolbar-icon-btn{height:34px;min-width:42px;border:1px solid #d7d7d7;border-radius:6px;background:#fff;color:#6d7780;padding:0 12px;cursor:pointer}
.projects-overview{padding:34px 0 22px;border-top:1px solid #dddddd;margin-top:18px;grid-template-columns:1.5fr 1px 180px 1px 1fr}
.overview-range{font-size:16px;color:#56616b}
.overview-total{font-size:17px;color:#515b66}
.projects-empty-state{padding:26px 0 24px;border-top:1px solid #dfdfdf;margin-top:18px;text-align:center;color:#56616b}
.projects-empty-text{font-size:16px;color:#4e5963;margin-bottom:16px}
.inline-share-pill,.inline-csv-pill{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border-radius:8px;border:1px solid #d7d7d7;background:#fff;color:#56616b;font-size:14px;margin:0 4px}
.projects-empty-card{width:min(620px,100%);margin:0 auto;background:#f8f8f8;border:1px solid #e1e1e1;border-radius:12px;padding:18px 20px 26px;position:relative}
.empty-card-close{position:absolute;left:18px;top:12px;color:#b5b5b5;font-size:28px}
.empty-card-preview{width:420px;max-width:100%;height:240px;margin:18px auto 24px;background:#fff;border-radius:10px;box-shadow:0 8px 18px rgba(0,0,0,.08);overflow:hidden}
.mini-report-bar{height:26px;background:#53a6ef}
.mini-report-body{display:grid;grid-template-columns:110px 1fr;gap:26px;padding:26px}
.mini-donut{width:90px;height:90px;border-radius:999px;background:conic-gradient(#52b5b8 0 35%, #6db765 35% 62%, #e57c69 62% 76%, #7c8ece 76% 100%);position:relative}
.mini-donut::after{content:'';position:absolute;inset:24px;background:#fff;border-radius:999px}
.mini-bars{display:flex;align-items:flex-end;gap:10px}
.mini-bars span{display:block;width:16px;background:#53b5b8;border-radius:3px 3px 0 0}
.mini-bars span:nth-child(1){height:60px}.mini-bars span:nth-child(2){height:100px;background:#7e8fd0}.mini-bars span:nth-child(3){height:78px;background:#e17a66}.mini-bars span:nth-child(4){height:120px;background:#6eb961}.mini-bars span:nth-child(5){height:74px}.mini-bars span:nth-child(6){height:92px;background:#d9b744}
.empty-card-message{max-width:520px;margin:0 auto 26px;font-size:16px;color:#8a949d;line-height:1.4}
.tour-btn{height:44px;border-radius:999px;border:1px solid #d9d9d9;background:#fff;color:#5f6973;padding:0 18px;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.tour-btn span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;border:2px solid #84b8ef;color:#84b8ef;font-size:11px}
.projects-visuals{grid-template-columns:250px 1fr;gap:26px;margin-bottom:22px}
.donut-wrap{min-height:140px}
.projects-donut{width:96px;height:96px}
.projects-donut::after{inset:24px;background:#f3f3f3}
.projects-legend{gap:12px 14px}
.legend-item{font-size:15px}
.legend-item .legend-badge{font-size:12px;padding:4px 8px;min-width:40px}
.projects-bars{display:flex;align-items:flex-end;gap:34px;min-height:150px;padding-top:0}
.bar-col{min-width:62px}
.bar-stack{height:112px}
.bar-seg{width:10px}
.bar-label{font-size:12px;color:#7f8790;text-align:center;line-height:1.15}
.projects-table{margin-top:8px}
.projects-group-head{grid-template-columns:110px 1fr;background:#ececec;padding:10px 14px;font-size:14px;color:#41484f}
.projects-table-row{grid-template-columns:110px 1fr 1fr;padding:9px 14px;font-size:14px;color:#556069;background:#f8f8f8;border-bottom:1px solid #ececec}
.projects-table-row:nth-child(odd){background:#fbfbfb}
.projects-table-row.summary{grid-template-columns:1fr 120px 1fr}
.archived-row-detail{background:#fafafa}
.restore-btn{min-width:120px;height:44px;border-radius:8px}

@media (max-width:1100px){
  .projects-mode-menu{width:min(92vw,484px);min-width:0}
  .projects-visuals{grid-template-columns:1fr}
  .projects-overview{grid-template-columns:1fr;gap:12px}
}


/* Projects custom menu retry fix */
.projects-mode-menu{top:30px;left:-2px;width:240px;min-width:240px;max-width:240px;background:#f7f7f7;border:1px solid #c7cdd4;border-radius:8px;box-shadow:0 10px 22px rgba(0,0,0,.18);padding:0;overflow:hidden;z-index:2000}
.projects-mode-menu .mode-item{padding:12px 20px;font-size:17px;line-height:1.15;color:#1e2328;background:#f7f7f7}
.projects-mode-menu .mode-item.custom-row{padding:10px 18px;border-top:1px solid #2f90ea;border-bottom:1px solid #2f90ea}
.projects-mode-menu .custom-period-label{font-size:17px}
.projects-custom-controls{display:flex;align-items:center;gap:8px;padding:10px 10px 8px}
.custom-date-btn{min-width:76px;width:76px;height:32px;border-radius:6px;border:2px solid #d0d4d8;background:#fff;color:#626a73;font-size:14px;font-weight:500;padding:0}
.custom-date-btn.is-active{border-color:#49a2f5;box-shadow:0 0 0 2px rgba(73,162,245,.12) inset}
.custom-date-to{width:38px;height:32px;border-radius:2px;border:1px solid #d0d4d8;background:#ececec;color:#6b7075;font-size:14px}
.projects-calendar-wrap{padding:8px 10px 12px}
.projects-calendar-nav{grid-template-columns:28px 1fr 28px;align-items:center;margin-bottom:8px}
.projects-calendar-nav button{font-size:18px}
#projectsCalLabel{text-align:center;font-size:14px;font-weight:700;color:#2e3237}
.projects-calendar-weekdays,.projects-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.projects-calendar-weekdays{margin-bottom:4px}
.projects-calendar-weekdays div{text-align:center;font-size:12px;font-weight:500;color:#31353a}
.cal-day{height:24px;border:none;border-radius:4px;background:transparent;font-size:12px;color:#2f3439;cursor:pointer;padding:0}
.cal-day.outside{color:#bdbdbd}
.cal-day.in-range{background:#eef6ff}
.cal-day.selected,.cal-day.selected-start,.cal-day.selected-end{background:#4aa2f5;color:#fff;font-weight:600}
.cal-day.range-edge{box-shadow:0 0 0 1px rgba(74,162,245,.24) inset}
.projects-title-btn{font-size:15px}
.projects-range-label{font-size:15px}



/* --- final visual tune 2026-03-23 --- */
.sidebar{width:68px;padding-top:18px}
.nav-icon{width:44px;height:44px;border-radius:999px;border-width:2.5px;box-shadow:0 1px 0 rgba(255,255,255,.65) inset}
.nav-icon + .nav-icon{margin-top:18px}
.icon.clock{width:18px;height:18px;border-width:2.5px}
.icon.clock::before{width:2.5px;height:6px}
.icon.clock::after{width:2.5px;height:8px}
.icon.report{width:18px;height:22px;border-width:2.5px}
.icon.download{width:18px;height:20px}
.icon.download::before{left:8px;width:2.5px;height:11px}
.icon.gear{width:20px;height:20px;border-width:2.5px}
.icon.archive{width:18px;height:16px}
.icon.projects{width:19px;height:17px;border-width:2.5px}
.sidebar-bottom a,.sidebar-bottom button,.sidebar-help{font-size:12px;color:#94a1ad}

.project-row .row-main{min-height:92px;padding:0 28px 0 20px}
.project-badge{width:68px;height:68px;border-radius:6px;font-size:17px;font-weight:500}
.project-name.static{font-size:21px;line-height:1.2;color:#59646d}
.project-name .client,.project-name .project{font-weight:400}
.project-name .sep{margin:0 12px;color:#77848e}
.clock-btn{width:76px;height:76px;border-radius:999px;background:#bcc7d5}
.clock-btn .icon.clock{width:19px;height:19px}
.clock-btn.running{min-width:170px;height:60px;border-radius:12px;display:inline-flex;justify-content:space-between;padding:0 18px 0 20px}
.clock-btn.running .run-prefix{font-size:19px;font-weight:500;letter-spacing:.01em}
.top-actions{padding:18px 28px 16px}
.ghost-pill{height:54px;border-radius:27px;padding:0 26px;font-size:18px}
.ghost-pill .plus{width:22px;height:22px;font-size:20px}
.track-head{padding:0 0 14px}
.hour-grid{height:52px}
.current-time-line{width:2px}
.day-cell{height:84px}
.day-label{font-size:14px}
.day-hours{font-size:16px}
.week-head{height:58px}
.week-range{font-size:15px}
.segment-cell{padding:10px 8px 9px}
.seg-main{font-size:14px}
.seg-sub{font-size:15px}

.row-detail{padding:0 18px 12px}
.detail-entry{grid-template-columns:74px 1px 170px 1px 1fr 86px;gap:18px;padding:18px 18px;border-bottom:1px solid #ececec;min-height:58px}
.detail-duration{font-size:17px;font-weight:600;color:#111}
.detail-sep{height:22px;background:#ececec}
.detail-range{font-size:16px;color:#a7adb3}
.time-adjust-value{font-size:16px;padding-bottom:1px;border-bottom:1px solid #d5d9de;color:#a5aaaf}
.time-adjust-popup{min-width:124px;height:32px;border-radius:6px;box-shadow:0 5px 16px rgba(0,0,0,.12)}
.time-adjust-popup button{width:28px;font-size:12px}
.time-adjust-popup span{font-size:16px}
.detail-note-input{font-size:16px;color:#a6acb2}
.detail-note-input::placeholder{color:#aeb4ba}
.detail-delete{font-size:16px}
.add-non-timeline{margin:22px 0 18px 22px;font-size:16px}

.projects-shell{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.projects-bluebar{min-height:54px}
.projects-title-btn{font-size:15px;padding:0 8px;height:38px}
.projects-range-label{font-size:16px}
.projects-mode-menu{top:42px;left:-4px;width:470px;min-width:470px;max-width:470px;background:#f4f4f4;border:1px solid #c8cfd6;border-radius:8px;box-shadow:0 12px 28px rgba(0,0,0,.18);padding:0;overflow:hidden;z-index:3000}
.projects-mode-menu .mode-item{padding:14px 20px;font-size:17px;line-height:1.2;color:#161a1e;background:#f6f6f6}
.projects-mode-menu .mode-item.custom-row{padding:10px 18px;border-top:1px solid #2f90ea;border-bottom:1px solid #2f90ea}
.projects-mode-menu .custom-period-label{font-size:17px}
.projects-custom-controls{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;background:#f6f6f6}
.custom-date-btn{min-width:76px;width:76px;height:32px;border-radius:6px;border:2px solid #d0d4d8;background:#fff;color:#606872;font-size:14px;font-weight:500;padding:0}
.custom-date-btn.is-active{border-color:#49a2f5;box-shadow:0 0 0 2px rgba(73,162,245,.12) inset}
.custom-date-sep{width:36px;height:32px;border:2px solid #d0d4d8;border-radius:0;background:#ececec;color:#666;font-size:14px}
.projects-calendar-wrap{padding:8px 10px 12px;background:#f6f6f6}
.projects-calendar-nav{grid-template-columns:28px 1fr 28px;align-items:center;margin-bottom:8px}
.projects-calendar-nav button{font-size:18px}
#projectsCalLabel{font-size:18px;font-weight:600;color:#31343a;text-align:center}
.projects-calendar-weekdays,.projects-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.projects-calendar-weekdays{margin-bottom:4px}
.projects-calendar-weekdays div{text-align:center;font-size:12px;font-weight:500;color:#32363b}
.cal-day{height:24px;border:none;border-radius:4px;background:transparent;font-size:12px;color:#2f3439;cursor:pointer;padding:0;position:relative;z-index:1}
.cal-day:hover{background:#edf4fd}
.cal-day.outside{color:#bdbdbd}
.cal-day.in-range{background:#eef6ff}
.cal-day.selected,.cal-day.selected-start,.cal-day.selected-end{background:#4aa2f5;color:#fff;font-weight:600}
.cal-day.range-edge{box-shadow:0 0 0 1px rgba(74,162,245,.24) inset}

.projects-toolbar{padding:18px 20px 16px;gap:12px}
.seg-tabs{height:40px}
.seg-tab{font-size:14px;padding:0 18px}
.toolbar-select,.toolbar-share,.toolbar-icon-btn{height:40px;font-size:14px}
.projects-overview{padding:22px 20px 10px}
.overview-range,.overview-total{font-size:20px}
.projects-empty-card{width:630px;max-width:92%;min-height:468px;border-radius:10px}
.projects-empty-text{font-size:17px}
.projects-empty-card button{height:46px;border-radius:23px;font-size:16px}
.projects-visuals{padding:8px 20px 12px}
.projects-donut-wrap{width:150px;height:150px}
.projects-donut{width:96px;height:96px}
.projects-table{margin:12px 20px 24px;border:1px solid #e5e5e5;border-radius:4px;overflow:hidden}
.projects-group-head,.projects-table-row{grid-template-columns:110px 1.5fr 1fr;min-height:36px}
.projects-group-head{font-size:14px}
.projects-table-row{font-size:13px}

@media (max-width: 1200px){
  .projects-mode-menu{width:440px;min-width:440px;max-width:440px}
}

/* --- v7 overrides --- */
.sidebar{
  width:74px;
  padding:16px 0 12px;
  background:#f7f8fa;
  border-right:1px solid #d7dee6;
}
.side-top{gap:18px;padding-top:0}
.nav-item{
  width:100%;
  height:auto;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:0;
  color:#8ea0b3;
}
.nav-item .icon-shell{
  width:42px;
  height:42px;
  border-radius:999px;
  border:2px solid currentColor;
  display:grid;
  place-items:center;
  background:#fbfcfd;
  transition:.18s ease;
}
.nav-item .icon{position:relative;display:block}
.nav-item.active,.nav-item:hover{color:#2f90ea}
.nav-item.active .icon-shell,.nav-item:hover .icon-shell{background:#fff;border-color:currentColor;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.nav-label{font-size:11px;line-height:1;color:inherit;font-weight:500;letter-spacing:.01em}
.side-bottom{padding:0 8px 0 10px;gap:6px}
.side-link{font-size:11px;color:#97a3af}

.projects-toolbar{gap:10px;align-items:center}
.toolbar-icon-btn.export{width:42px;min-width:42px;padding:0;border:none;background:transparent;position:relative}
.toolbar-icon-btn.export .export-doc{
  display:inline-grid;place-items:center;
  width:28px;height:32px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.02em;
  border:1px solid currentColor;
  color:inherit;background:#fff;position:relative;
}
.toolbar-icon-btn.export .export-doc::after{
  content:'';position:absolute;right:-1px;top:-1px;width:10px;height:10px;
  background:linear-gradient(135deg, transparent 49%, currentColor 50%);
  border-top-right-radius:4px;
}
.toolbar-icon-btn.export.csv{color:#7fb341}
.toolbar-icon-btn.export.excel{color:#2c9f5f}
.toolbar-icon-btn.export.pdf{color:#d46a5d}
.toolbar-icon-btn.export.print{color:#8b76d4}
.export-printer{display:block;position:relative;width:28px;height:28px}
.export-printer::before{content:'';position:absolute;left:4px;top:5px;width:20px;height:10px;border:2px solid currentColor;border-radius:4px;background:#fff}
.export-printer::after{content:'';position:absolute;left:7px;top:0;width:14px;height:9px;border:2px solid currentColor;border-bottom:none;background:#fff;border-radius:2px 2px 0 0}
.toolbar-icon-btn.export.print .export-printer{color:currentColor}
.toolbar-icon-btn.export.pulse{animation:exportPulse 1.2s ease}
@keyframes exportPulse{0%{transform:scale(1)}20%{transform:scale(1.12)}100%{transform:scale(1)}}

.row-detail{
  margin-top:0;
  border-top:1px solid #e5e7ea;
  padding:0 10px 6px;
  color:#9aa1a8;
  font-size:14px;
  background:#fbfbfb;
}
.detail-entry{
  grid-template-columns:74px 1px 148px 1px 1fr auto;
  gap:16px;
  padding:14px 16px;
  min-height:58px;
  border-bottom:1px solid #ebedef;
}
.detail-duration{font-size:16px;font-weight:700;color:#111}
.detail-range{font-size:15px;color:#a5aaaf}
.time-adjust-value{font-size:15px;color:#a7adb3}
.detail-note-input{font-size:15px;color:#a4aab0}
.detail-delete{font-size:15px;color:#ef7f74}
.add-non-timeline{margin:18px 0 16px 16px;font-size:15px;color:#a9b0b6}
.small-action{min-width:110px;height:46px;border-radius:8px;font-size:15px}
.project-badge{width:62px;height:62px;border-radius:6px;font-size:14px;font-weight:600}
.row-main{grid-template-columns:92px 1fr auto;min-height:78px}
.project-name{font-size:18px;color:#5d6771;gap:14px}
.project-row.selected .row-main{min-height:78px}

.projects-bluebar{min-height:48px;height:48px;padding:0 18px}
.projects-title-btn{font-size:16px;font-weight:500;color:#fff}
.projects-range-label{font-size:14px;font-weight:600}
.projects-arrow{font-size:18px}
.projects-segments{min-height:44px}
.segment-cell{min-height:44px;padding:8px 10px}
.seg-main{font-size:13px}
.seg-sub{font-size:12px}
.projects-content{padding:18px 18px 26px}
.segmented-tabs .seg-tab{height:30px;padding:0 18px;font-size:13px}
.toolbar-select,.toolbar-share,.toolbar-icon-btn{height:32px;font-size:13px;border-radius:6px}
.projects-overview{margin-top:10px;padding-top:18px}
.overview-range,.overview-total{font-size:18px}
.projects-empty-state{padding-top:18px}
.projects-empty-text{font-size:14px}
.projects-empty-card{width:600px;min-height:400px;padding:16px 20px 24px}
.empty-card-message{font-size:14px;line-height:1.45}
.tour-btn{height:40px;border-radius:20px;font-size:14px}
.projects-table{margin-top:18px;border-radius:6px;overflow:hidden;border:1px solid #e7e8ea}
.projects-group-head{padding:10px 14px;background:#ececec;font-size:14px}
.projects-table-row{padding:10px 14px;font-size:14px;grid-template-columns:96px 1.3fr 1fr}
.projects-table-row.summary{grid-template-columns:1.5fr 120px 1fr}

.projects-mode-menu{
  top:38px;left:-8px;width:428px;min-width:428px;max-width:428px;
  background:#f7f7f7;border:1px solid #c8d0d8;border-radius:10px;
  box-shadow:0 14px 26px rgba(0,0,0,.16);
}
.projects-mode-menu .mode-item{padding:14px 20px;font-size:16px;line-height:1.15;color:#1f2327;background:#f7f7f7}
.projects-mode-menu .mode-item.custom-row{padding:10px 16px;border-top:1px solid #2f90ea;border-bottom:1px solid #2f90ea;background:#f7f7f7}
.projects-mode-menu .custom-period-label{font-size:16px;font-weight:500}
.projects-custom-controls{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;background:#f7f7f7}
.custom-date-btn{
  width:116px;min-width:116px;height:36px;padding:0 12px;text-align:left;
  border-radius:6px;border:1px solid #cfd5db;background:#fff;
  color:#59636c;font-size:14px;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.custom-date-btn.is-active{border-color:#4ca4f6;box-shadow:0 0 0 2px rgba(76,164,246,.10) inset}
.custom-date-to{
  width:34px;height:34px;border-radius:4px;border:1px solid #d4d8dc;background:#ebebeb;
  display:grid;place-items:center;font-size:13px;color:#6f767d;flex:0 0 auto;
}
.projects-calendar-wrap{padding:8px 10px 12px;background:#f7f7f7}
.projects-calendar-nav{grid-template-columns:28px 1fr 28px;align-items:center;margin-bottom:8px}
.projects-calendar-nav button{font-size:18px;color:#333}
#projectsCalLabel{font-size:15px;font-weight:700;color:#31363b;text-align:center}
.projects-calendar-weekdays,.projects-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.projects-calendar-weekdays div{font-size:12px;font-weight:500;color:#31363b;text-align:center;padding:3px 0}
.cal-day{
  height:34px;border:none;border-radius:6px;background:transparent;font-size:13px;color:#2f3439;cursor:pointer;padding:0;position:relative;z-index:1;
}
.cal-day:hover{background:#edf4fd}
.cal-day.outside{color:#bcc1c7}
.cal-day.in-range{background:#dcedff;border-radius:0}
.cal-day.selected,.cal-day.selected-start,.cal-day.selected-end{background:#4aa2f5;color:#fff;font-weight:600}
.cal-day.selected-start{border-radius:6px 0 0 6px}
.cal-day.selected-end{border-radius:0 6px 6px 0}
.cal-day.selected-start.selected-end{border-radius:6px}

@media (max-width: 1100px){
  .sidebar{width:68px}
  .nav-label{font-size:10px}
  .projects-mode-menu{width:min(94vw,428px);min-width:0;max-width:94vw}
}


/* --- v8 layout polish --- */
.hours-layout{
  grid-template-columns:118px 1fr;
}
.sidebar{
  width:118px;
  padding:18px 0 14px;
  background:#f5f6f8;
  border-right:1px solid #d5dce3;
}
.side-top{
  align-items:center;
  gap:22px;
  padding:2px 0 8px;
}
.nav-item{
  width:100%;
  gap:10px;
  padding:0 0 2px;
}
.nav-item .icon-shell{
  width:58px;
  height:58px;
  border-width:2.5px;
  background:#f8fafc;
}
.nav-item .icon.clock{width:20px;height:20px;border-width:2.5px}
.nav-item .icon.clock::before{width:2px;height:7px}
.nav-item .icon.clock::after{width:2px;height:9px}
.nav-item .icon.projects{width:22px;height:19px;border-width:2.5px;border-radius:4px}
.nav-item .icon.projects::before{top:6px;height:2.5px}
.nav-item .icon.projects::after{top:12px;height:2.5px}
.nav-item .icon.report{width:20px;height:24px;border-width:2.5px;border-radius:3px}
.nav-item .icon.report::before{top:7px;height:2.5px}
.nav-item .icon.report::after{top:13px;height:2.5px}
.nav-item .icon.archive{width:20px;height:18px;border-width:2.5px}
.nav-item .icon.archive::before{top:-5px;height:5px;border-width:2.5px;border-radius:3px 3px 0 0}
.nav-item .icon.download{width:20px;height:22px;border-bottom-width:2.5px}
.nav-item .icon.download::before{left:9px;width:2.5px;height:12px}
.nav-item .icon.download::after{left:5px;top:10px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid currentColor}
.nav-item .icon.gear{width:22px;height:22px;border-width:2.5px}
.nav-item .icon.gear::before{inset:-5px;border-width:2px}
.nav-item.active,.nav-item:hover{color:#2f90ea}
.nav-item.active .icon-shell,.nav-item:hover .icon-shell{
  background:#ffffff;
  border-color:currentColor;
  box-shadow:0 2px 6px rgba(24,66,120,.08);
}
.nav-label{
  font-size:13px;
  line-height:1.1;
  font-weight:500;
  color:inherit;
  letter-spacing:.01em;
}
.side-bottom{
  padding:10px 14px 0;
  gap:8px;
}
.side-link{
  font-size:12px;
  color:#99a6b3;
}
.main-shell{
  background:#f7f7f7;
}
.week-range-bar{
  height:40px;
  font-size:13px;
}
.range-title{min-width:188px}
.week-strip{padding:0 28px 0 34px}
.day-cell{height:70px}
.day-name{font-size:12px}
.day-hours{font-size:11px}
.hour-labels{padding:0 28px 0 34px}
.hour-label{font-size:11px}
.day-track{height:38px}
.timers-toolbar{padding:22px 24px 18px 58px}
.pill-btn{height:42px;border-radius:21px;font-size:14px;padding:0 18px}
.project-row .row-main{
  min-height:66px;
  padding:0 22px 0 18px;
}
.project-badge{
  width:46px;
  height:46px;
  border-radius:5px;
  font-size:13px;
  font-weight:600;
}
.row-main{grid-template-columns:74px 1fr auto}
.project-name.static,.project-name{
  font-size:17px;
  color:#616c76;
  gap:10px;
}
.project-name .sep{margin:0 10px;color:#7f8992}
.clock-btn{
  width:54px;
  height:54px;
}
.clock-btn.running .clock-pill{
  height:54px;
  border-radius:14px;
}
.row-detail{
  padding:0 16px 10px;
  background:#fafafa;
}
.detail-entry{
  grid-template-columns:72px 1px 148px 1px 1fr auto;
  gap:14px;
  min-height:56px;
  padding:14px 10px;
}
.detail-duration{font-size:15px}
.detail-range{font-size:14px}
.detail-note-input{font-size:14px}
.detail-delete{font-size:14px}
.add-non-timeline{font-size:14px;margin:14px 0 12px 10px}
.small-action{min-width:106px;height:44px;font-size:14px;border-radius:8px}
.projects-shell,.simple-page{font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif}
.page-head h2{font-size:48px;line-height:1;font-weight:700;color:#6c7987;margin:0 0 24px}
.report-box, .simple-page .card{border-radius:20px}
@media (max-width: 1200px){
  .hours-layout{grid-template-columns:108px 1fr}
  .sidebar{width:108px}
  .nav-item .icon-shell{width:52px;height:52px}
}


/* --- v10 sidebar + typography cleanup --- */
.hours-layout{grid-template-columns:142px 1fr;min-height:100vh;background:#f6f7f8}
.sidebar{width:142px;background:#f5f6f8;border-right:1px solid #d7dde4;padding:18px 0 18px;position:relative;z-index:3}
.side-top{gap:24px;align-items:center;padding:4px 0 10px}
.nav-item{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0;color:#94a2b1;background:transparent;border:none}
.nav-item .icon-shell{width:56px;height:56px;border:3px solid currentColor;background:#f8f9fb;box-shadow:none}
.nav-item.active,.nav-item:hover{color:#2f90ea}
.nav-item.active .icon-shell,.nav-item:hover .icon-shell{background:#fff;border-color:currentColor;box-shadow:0 1px 4px rgba(24,66,120,.08)}
.nav-label{display:block;font-size:15px;line-height:1.1;font-weight:500;letter-spacing:.01em;color:inherit}
.side-bottom{padding:12px 14px 0;gap:10px}
.side-link{font-size:12px;color:#98a5b2}
.main-shell{background:#f6f7f8;padding-left:0}
#homeView,#projectsView,#reportsView,#archivedView,#settingsView{background:#f6f7f8}
.calendar-panel{background:#f6f7f8}
.week-range-bar{height:42px;padding:0 18px;font-size:15px}
.range-title{min-width:200px;font-size:15px;font-weight:500}
.week-strip{padding:0 18px 0 28px}
.day-cell{height:72px}
.day-name{font-size:13px;font-weight:500}
.day-hours{font-size:12px}
.hour-labels{padding:0 18px 0 28px}
.hour-label{font-size:11px;color:#b2b8be}
.day-track{height:36px}
.timers-toolbar{padding:20px 24px 18px 40px}
.pill-btn{height:42px;border-radius:24px;font-size:14px;padding:0 18px;color:#697580}
.project-list-wrap{padding:0 18px 0 40px}
.project-row .row-main{min-height:66px;padding:0 18px 0 18px}
.row-main{gap:18px;grid-template-columns:88px 1fr auto}
.project-badge{width:46px;height:46px;border-radius:5px;font-size:13px;font-weight:600}
.project-name,.project-name.static{font-size:16px;line-height:1.25;color:#5c6670;gap:10px}
.project-name .sep{font-size:11px;margin:0 8px;color:#9099a2}
.clock-btn{width:54px;height:54px;border-radius:999px}
.clock-btn.running .clock-pill{height:54px;border-radius:16px}
.row-detail{padding:0 16px 12px;background:#fafafa;border-top:1px solid #e6e6e6}
.small-action{min-width:108px;height:46px;border-radius:8px;font-size:15px}
.detail-entry{grid-template-columns:76px 1px 160px 1px 1fr auto;gap:14px;padding:16px 10px;min-height:56px}
.detail-duration{font-size:15px;font-weight:700}
.detail-range,.detail-note-input,.detail-delete{font-size:15px}
.add-non-timeline{font-size:15px;color:#a3a9af;margin:16px 0 14px 10px}
.simple-page{padding:26px 28px 32px}
.page-head h2{font-size:44px;line-height:1.02;color:#6c7987;margin-bottom:22px}
.projects-shell{background:#f6f7f8}
.projects-content{padding:18px 22px 28px}
.projects-toolbar{gap:12px}
.toolbar-select,.toolbar-share,.toolbar-icon-btn,.seg-tab{font-size:14px}
@media (max-width:1200px){
  .hours-layout{grid-template-columns:120px 1fr}
  .sidebar{width:120px}
  .nav-item .icon-shell{width:52px;height:52px}
  .nav-label{font-size:13px}
  .timers-toolbar,.project-list-wrap{padding-left:24px}
}

.project-modal select:disabled,.project-modal input:disabled{background:#f4f6f8;color:#98a2ad}
.project-modal .field-help{margin-top:-2px}


/* v13 add timer popup refinements */
.project-modal{
  width:min(760px, calc(100vw - 48px));
  max-width:calc(100vw - 48px);
  max-height:min(86vh, 900px);
  overflow-x:hidden;
}
.project-modal h3{font-size:32px; margin-bottom:10px;}
.project-modal .dialog-field{gap:8px;}
.project-modal .dialog-field > label{font-size:15px; font-weight:700; color:#586571;}
.project-modal .dialog-field select,
.project-modal .dialog-field input{height:48px; font-size:16px; border-radius:12px; background:#fff;}
.project-modal .field-help{font-size:12px; color:#8f99a4;}
.project-color-grid{grid-template-columns:repeat(5,58px); gap:12px;}
.color-choice{width:58px; height:58px; border-radius:13px;}
.color-choice .color-check{font-size:22px;}
.project-modal .modal-actions{
  margin-top:10px;
  padding-top:18px;
  border-top:1px solid #edf0f3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.project-modal .modal-actions button{min-width:132px; height:48px; font-size:16px; flex:0 0 auto;}
.project-modal .modal-actions #cancelProjectBtn{margin-right:auto;}
.project-modal .modal-actions .primary{margin-left:auto; background:var(--blue); border-color:var(--blue); color:#fff;}
#projectClientSelect, #projectExistingProject{font-weight:500;}
#projectClientName::placeholder, #projectName::placeholder{color:#b3bac2;}
@media (max-width: 720px){
  .project-modal{width:min(92vw, 640px); padding:22px 20px 18px;}
  .project-modal .modal-actions{padding-top:14px; gap:10px;}
  .project-modal .modal-actions button{min-width:116px;}
}

.project-modal select:disabled{background:#f2f4f7;color:#a2aab4;cursor:not-allowed;}


/* v15 add timer modal layout */
#projectDialog{padding:0;border:none;background:transparent;}
#projectDialog::backdrop{background:rgba(0,0,0,.32);}
.project-modal{width:min(92vw,820px);max-width:min(92vw,820px);max-height:min(88vh,920px);padding:28px 28px 22px;border:none;border-radius:26px;box-shadow:0 26px 60px rgba(0,0,0,.22);background:#fff;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:16px;overflow:hidden;}
.project-modal h3{font-size:46px;line-height:1.02;margin:0 0 6px;color:#55616d;font-weight:800;}
.project-modal .dialog-field{gap:10px;min-width:0;}
.project-modal .dialog-field>label{font-size:16px;font-weight:800;color:#55616d;}
.project-modal .dialog-field select,.project-modal .dialog-field input{width:100%;max-width:100%;box-sizing:border-box;height:56px;padding:0 18px;font-size:17px;border-radius:18px;background:#fff;border:1px solid #d7dde4;color:#49545f;}
.project-modal .dialog-field input::placeholder{color:#a6b0bb;}
.project-modal .field-help{font-size:13px;color:#8a95a2;line-height:1.35;margin:0;}
.project-color-grid{grid-template-columns:repeat(5,74px);gap:16px;}
.color-choice{width:74px;height:74px;border-radius:18px;border:3px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.color-choice.selected{border-color:#2f90ea;box-shadow:0 0 0 6px rgba(47,144,234,.18);}
.color-choice .color-check{font-size:28px;}
.project-modal .modal-actions{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding-top:18px;margin-top:4px;border-top:1px solid #edf0f3;background:#fff;}
.project-modal .modal-actions button{min-width:132px;height:54px;padding:0 24px;border-radius:16px;font-size:16px;font-weight:700;box-sizing:border-box;}
.project-modal .modal-actions #cancelProjectBtn{grid-column:2;}
.project-modal .modal-actions .primary{grid-column:3;background:var(--blue);border-color:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;}
.project-modal select:disabled{background:#f2f4f7;color:#a2aab4;cursor:not-allowed;}
@media (max-width:760px){
  .project-modal{width:min(94vw,680px);max-width:94vw;padding:22px 20px 18px;border-radius:22px;}
  .project-modal h3{font-size:40px;}
  .project-color-grid{grid-template-columns:repeat(5,62px);gap:12px;}
  .color-choice{width:62px;height:62px;}
  .project-modal .modal-actions{grid-template-columns:1fr 1fr;gap:12px;}
  .project-modal .modal-actions #cancelProjectBtn,.project-modal .modal-actions .primary{grid-column:auto;width:100%;min-width:0;}
}


/* v16 final overrides */
#navExport{display:none !important}
.sidebar{width:152px !important;background:#f6f7f9 !important;border-right:1px solid #d7dde4 !important;padding:18px 0 !important}
.side-top{display:flex;flex-direction:column;gap:22px}
.nav-item{padding:0 14px !important;align-items:flex-start !important;gap:10px !important}
.nav-item .icon-shell{width:58px !important;height:58px !important}
.nav-label{font-size:16px !important;font-weight:500 !important;margin-left:6px !important}
.main-shell{padding-left:0}
#homeView .calendar-panel,#homeView .timers-toolbar,#homeView .project-list-wrap{margin-left:0}
.project-modal{width:min(780px, calc(100vw - 80px)) !important;max-width:min(780px, calc(100vw - 80px)) !important;max-height:min(88vh, 860px) !important;padding:32px 28px 22px !important;border-radius:28px !important;display:flex !important;flex-direction:column !important;gap:18px !important;overflow:hidden !important;box-sizing:border-box !important}
.project-modal h3{font-size:44px !important;line-height:1.02 !important;margin:0 0 8px !important;color:#55616d !important;font-weight:800 !important}
.project-modal .dialog-field{display:grid !important;gap:10px !important;min-width:0 !important}
.project-modal .dialog-field>label{font-size:16px !important;font-weight:800 !important;color:#55616d !important}
.project-modal .dialog-field select,.project-modal .dialog-field input{height:58px !important;border-radius:18px !important;border:1px solid #d6dde4 !important;background:#fff !important;padding:0 18px !important;font-size:18px !important;color:#4a5560 !important;box-sizing:border-box !important;max-width:100% !important}
.project-modal .dialog-field input::placeholder{color:#adb5bf !important}
.project-modal .field-help{font-size:13px !important;color:#8f99a4 !important;line-height:1.35 !important}
.project-color-grid{display:grid !important;grid-template-columns:repeat(5,72px) !important;gap:14px !important}
.color-choice{width:72px !important;height:72px !important;border-radius:18px !important;border:3px solid transparent !important}
.color-choice.selected{border-color:#2f90ea !important;box-shadow:0 0 0 6px rgba(47,144,234,.18) !important}
.color-choice .color-check{font-size:30px !important;opacity:0}
.color-choice.selected .color-check{opacity:1}
.project-modal .modal-actions{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:16px !important;padding-top:18px !important;margin-top:auto !important;border-top:1px solid #edf0f3 !important;flex-wrap:nowrap !important;overflow:visible !important}
.project-modal .modal-actions button{min-width:140px !important;height:54px !important;border-radius:16px !important;padding:0 24px !important;font-size:16px !important;font-weight:700 !important;box-sizing:border-box !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;white-space:nowrap !important}
.project-modal .modal-actions #cancelProjectBtn{margin-right:auto !important}
.project-modal .modal-actions .primary{margin-left:auto !important;background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important}
@media (max-width: 900px){
  .project-modal{width:min(94vw, 680px) !important;max-width:94vw !important;padding:24px 20px 18px !important}
  .project-modal h3{font-size:40px !important}
  .project-color-grid{grid-template-columns:repeat(5,60px) !important;gap:12px !important}
  .color-choice{width:60px !important;height:60px !important}
}
.edit-timer-form{width:min(920px, calc(100vw - 80px)) !important;max-width:min(920px, calc(100vw - 80px)) !important;height:min(86vh, 820px) !important;border-radius:28px !important;overflow:hidden !important;display:grid !important;grid-template-rows:120px 1fr 108px !important;background:#f7f7f7 !important}
.edit-head{font-size:48px !important;font-weight:500 !important;padding:0 42px !important;display:flex !important;align-items:center !important;justify-content:center !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.edit-body{padding:28px 34px !important;overflow:auto !important}
.edit-stack{display:flex !important;flex-direction:column !important;align-items:center !important;gap:18px !important}
.big-edit-btn{min-width:220px !important;height:82px !important;border-radius:16px !important;font-size:22px !important}
.edit-footer{display:grid !important;grid-template-columns:auto 1fr auto !important;align-items:center !important;gap:18px !important;padding:0 28px !important;background:#fff !important;border-top:1px solid #ddd !important}
.edit-footer button{height:58px !important;font-size:20px !important;border-radius:14px !important}
.edit-project-preview{display:flex !important;align-items:center !important;gap:16px !important;justify-self:center !important;overflow:hidden !important;white-space:nowrap !important}
.edit-project-preview .preview-color{width:68px !important;height:68px !important;border-radius:8px !important;flex:0 0 auto}
.edit-project-preview #editProjectPreviewText{font-size:18px !important;color:#55616d !important;overflow:hidden !important;text-overflow:ellipsis !important}


/* v17 final modal fixes */
#projectDialog::backdrop,#editProjectDialog::backdrop{background:rgba(0,0,0,.26)}
#projectDialog{padding:0;border:none;background:transparent}
.project-modal{
  width:min(760px, calc(100vw - 64px)) !important;
  max-width:min(760px, calc(100vw - 64px)) !important;
  max-height:min(88vh, 860px) !important;
  padding:28px 28px 20px !important;
  border-radius:28px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}
.project-modal h3{
  font-size:42px !important;
  line-height:1.05 !important;
  margin:0 0 6px !important;
  color:#56626d !important;
  font-weight:800 !important;
}
.project-modal .dialog-field{display:grid !important;gap:8px !important;min-width:0 !important}
.project-modal .dialog-field>label{font-size:16px !important;font-weight:800 !important;color:#56626d !important}
.project-modal .dialog-field select,
.project-modal .dialog-field input{
  width:100% !important;
  max-width:100% !important;
  height:54px !important;
  border-radius:16px !important;
  border:1px solid #d6dde4 !important;
  background:#fff !important;
  padding:0 16px !important;
  font-size:16px !important;
  box-sizing:border-box !important;
}
.project-modal .field-help{font-size:12px !important;line-height:1.3 !important;color:#8f99a4 !important;margin:0 !important}
.project-color-grid{display:grid !important;grid-template-columns:repeat(5,72px) !important;gap:14px !important;justify-content:flex-start !important}
.color-choice{width:72px !important;height:72px !important;border-radius:18px !important;position:relative !important}
.color-choice .color-check{font-size:24px !important;font-weight:800 !important}
.project-modal .modal-actions{
  margin-top:auto !important;
  padding-top:16px !important;
  border-top:1px solid #edf0f3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  flex-wrap:nowrap !important;
}
.project-modal .modal-actions button{
  min-width:140px !important;
  height:52px !important;
  border-radius:16px !important;
  padding:0 22px !important;
  font-size:16px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
.project-modal .modal-actions #cancelProjectBtn{margin-right:auto !important}
.project-modal .modal-actions .primary{margin-left:auto !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important}
@media (max-width: 760px){
  .project-modal{width:min(94vw, 640px) !important;max-width:94vw !important;padding:22px 20px 18px !important}
  .project-modal h3{font-size:36px !important}
  .project-color-grid{grid-template-columns:repeat(5,60px) !important;gap:10px !important}
  .color-choice{width:60px !important;height:60px !important}
  .project-modal .modal-actions{gap:12px !important}
  .project-modal .modal-actions button{min-width:120px !important;height:48px !important;font-size:15px !important}
}

#editProjectDialog{padding:0;border:none;background:transparent}
.edit-timer-form{
  width:min(820px, calc(100vw - 72px)) !important;
  max-width:min(820px, calc(100vw - 72px)) !important;
  height:min(84vh, 760px) !important;
  border-radius:28px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:108px 1fr 108px !important;
  box-sizing:border-box !important;
}
.edit-head{
  font-size:34px !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
  padding:0 24px !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:visible !important;
  white-space:normal !important;
}
.edit-body{padding:24px 28px !important;overflow:auto !important}
.edit-stack{display:flex !important;flex-direction:column !important;align-items:center !important;gap:18px !important}
.big-edit-btn{min-width:260px !important;height:76px !important;border-radius:16px !important;font-size:18px !important}
.edit-panel{width:min(680px,100%) !important;padding:16px 8px !important;background:#f7f7f7 !important}
.edit-panel h4{font-size:30px !important}
.edit-panel p{font-size:18px !important}
.edit-panel input{height:56px !important;font-size:18px !important}
.edit-footer{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:16px !important;
  padding:0 22px !important;
  background:#fff !important;
  border-top:1px solid #ddd !important;
  min-width:0 !important;
}
.edit-footer button{height:52px !important;font-size:16px !important;border-radius:14px !important;padding:0 20px !important;min-width:140px !important;white-space:nowrap !important}
.edit-footer .primary-outline{justify-self:end !important;background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important}
.edit-project-preview{display:flex !important;align-items:center !important;gap:16px !important;min-width:0 !important;overflow:hidden !important}
.edit-project-preview .preview-color{width:56px !important;height:56px !important;border-radius:10px !important;flex:0 0 auto !important}
.edit-project-preview #editProjectPreviewText{font-size:16px !important;line-height:1.2 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
@media (max-width: 760px){
  .edit-timer-form{width:min(94vw, 680px) !important;max-width:94vw !important;height:min(84vh,700px) !important;grid-template-rows:92px 1fr 96px !important}
  .edit-head{font-size:28px !important}
  .big-edit-btn{min-width:220px !important;height:68px !important}
  .edit-footer{grid-template-columns:1fr 1fr !important;grid-template-areas:'cancel save' 'preview preview' !important;padding:14px 18px !important}
  #editProjectCancel{grid-area:cancel !important;min-width:0 !important;width:100% !important}
  .edit-footer .primary-outline{grid-area:save !important;min-width:0 !important;width:100% !important}
  .edit-project-preview{grid-area:preview !important;justify-self:start !important}
}


/* v18 modal hotfix */
#projectDialog{padding:0 !important;border:none !important;background:transparent !important;max-width:none !important;width:auto !important;overflow:visible !important}
#projectDialog::backdrop{background:rgba(0,0,0,.34) !important}
#projectForm.project-modal{
  width:min(700px, calc(100vw - 40px)) !important;
  max-width:min(700px, calc(100vw - 40px)) !important;
  max-height:min(86vh, 760px) !important;
  min-height:0 !important;
  padding:26px 30px 20px !important;
  border-radius:28px !important;
  background:#fff !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  overflow:hidden !important;
}
#projectForm.project-modal h3{
  font-size:44px !important;
  line-height:1.02 !important;
  margin:0 0 4px !important;
  font-weight:800 !important;
  color:#55616d !important;
}
#projectForm.project-modal .dialog-field{display:grid !important;gap:8px !important;min-width:0 !important}
#projectForm.project-modal .dialog-field>label{font-size:15px !important;font-weight:800 !important;color:#56626d !important}
#projectForm.project-modal .dialog-field select,
#projectForm.project-modal .dialog-field input{
  width:100% !important;
  max-width:100% !important;
  height:50px !important;
  min-height:50px !important;
  border-radius:16px !important;
  border:1px solid #d6dde4 !important;
  background:#fff !important;
  padding:0 16px !important;
  font-size:16px !important;
  color:#49545f !important;
  box-sizing:border-box !important;
}
#projectForm.project-modal .field-help{font-size:12px !important;line-height:1.28 !important;color:#8f99a4 !important;margin:0 !important}
#projectForm.project-modal .dialog-field:last-of-type{margin-bottom:0 !important}
#projectColorGrid.project-color-grid{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  max-width:480px !important;
  gap:14px !important;
}
#projectColorGrid .color-choice{
  width:72px !important;
  height:72px !important;
  border-radius:18px !important;
}
#projectForm.project-modal .modal-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:14px !important;
  margin-top:auto !important;
  padding-top:14px !important;
  border-top:1px solid #edf0f3 !important;
  flex:0 0 auto !important;
}
#projectForm.project-modal .modal-actions button{
  min-width:138px !important;
  height:50px !important;
  padding:0 22px !important;
  border-radius:16px !important;
  font-size:16px !important;
  font-weight:700 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
#projectForm.project-modal .modal-actions #cancelProjectBtn{margin-right:auto !important}
#projectForm.project-modal .modal-actions .primary{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important;opacity:1 !important;visibility:visible !important}

#editProjectDialog{padding:0 !important;border:none !important;background:transparent !important;max-width:none !important;width:auto !important;overflow:visible !important}
#editProjectDialog::backdrop{background:rgba(0,0,0,.34) !important}
#editProjectForm.edit-timer-form{
  width:min(760px, calc(100vw - 44px)) !important;
  max-width:min(760px, calc(100vw - 44px)) !important;
  max-height:min(86vh, 760px) !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:90px minmax(0,1fr) 96px !important;
  overflow:hidden !important;
  border-radius:28px !important;
}
#editProjectForm .edit-head{
  font-size:42px !important;
  line-height:1 !important;
  font-weight:700 !important;
  text-align:center !important;
  padding:0 26px !important;
}
#editProjectForm .edit-body{padding:22px 24px !important;overflow:auto !important}
#editProjectForm .big-edit-btn{min-width:260px !important;height:74px !important;font-size:18px !important;border-radius:16px !important}
#editProjectForm .edit-footer{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:16px !important;
  padding:16px 22px !important;
  border-top:1px solid #edf0f3 !important;
  background:#fff !important;
}
#editProjectForm .edit-footer button{min-width:140px !important;height:50px !important;border-radius:16px !important;font-size:16px !important}
#editProjectForm .edit-footer .primary-outline{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important}
#editProjectForm .edit-project-preview{overflow:hidden !important}
#editProjectForm .edit-project-preview #editProjectPreviewText{font-size:16px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}

@media (max-width: 760px){
  #projectForm.project-modal{width:min(94vw, 620px) !important;max-width:94vw !important;padding:22px 18px 18px !important}
  #projectForm.project-modal h3{font-size:36px !important}
  #projectColorGrid.project-color-grid{grid-template-columns:repeat(5, 56px) !important;gap:10px !important;max-width:320px !important}
  #projectColorGrid .color-choice{width:56px !important;height:56px !important;border-radius:14px !important}
  #projectForm.project-modal .modal-actions button{min-width:118px !important;height:46px !important;font-size:15px !important}
  #editProjectForm.edit-timer-form{width:min(94vw, 640px) !important;max-width:94vw !important;grid-template-rows:82px minmax(0,1fr) 104px !important}
  #editProjectForm .edit-head{font-size:32px !important}
  #editProjectForm .edit-footer{grid-template-columns:1fr 1fr !important;grid-template-areas:'cancel save' 'preview preview' !important;padding:14px 18px !important}
  #editProjectCancel{grid-area:cancel !important;min-width:0 !important;width:100% !important}
  #editProjectForm .edit-footer .primary-outline{grid-area:save !important;min-width:0 !important;width:100% !important}
  #editProjectForm .edit-project-preview{grid-area:preview !important}
}

/* v19 timers layout cleanup */
.hours-layout{grid-template-columns:78px 1fr !important;}
.sidebar{
  width:78px !important;
  padding:14px 0 10px !important;
  background:#f5f6f8 !important;
  border-right:1px solid #d7dde4 !important;
}
.side-top{
  align-items:center !important;
  gap:26px !important;
  padding:0 !important;
}
.nav-item{
  width:100% !important;
  padding:0 !important;
  align-items:center !important;
  gap:0 !important;
}
.nav-item .icon-shell{
  width:46px !important;
  height:46px !important;
  border-width:2px !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
.nav-item .icon.clock{width:16px !important;height:16px !important;border-width:2px !important;}
.nav-item .icon.clock::before{height:6px !important;}
.nav-item .icon.clock::after{height:8px !important;}
.nav-item .icon.projects{width:18px !important;height:16px !important;border-width:2px !important;border-radius:3px !important;}
.nav-item .icon.report{width:17px !important;height:21px !important;border-width:2px !important;}
.nav-item .icon.archive{width:17px !important;height:15px !important;border-width:2px !important;}
.nav-item .icon.archive::before{top:-4px !important;height:4px !important;border-width:2px !important;}
.nav-item .icon.gear{width:18px !important;height:18px !important;border-width:2px !important;}
.nav-item .icon.gear::before{inset:-4px !important;border-width:2px !important;}
.nav-label{display:none !important;}
.side-bottom{display:none !important;}

.main-shell{background:#f7f7f7 !important;}
.week-range-bar{height:44px !important;font-size:12px !important;}
.range-title{min-width:170px !important;font-size:12px !important;}
.week-strip{padding:0 20px 0 18px !important;}
.day-cell{height:58px !important;}
.day-label{font-size:11px !important;font-weight:500 !important;}
.day-hours{margin-top:4px !important;font-size:10px !important;}
.day-track-panel{padding:10px 18px 10px 0 !important;}
.hour-labels{padding-left:0 !important;}
.hour-label{font-size:10px !important;min-height:22px !important;}
.hour-label::after{top:18px !important;height:26px !important;}
.day-track{height:26px !important;margin-top:14px !important;}
.current-time-line{top:-34px !important;}

.timers-toolbar{padding:18px 44px 12px 50px !important;}
.pill-btn{height:42px !important;padding:0 18px !important;font-size:13px !important;border-radius:22px !important;gap:10px !important;}
.plus-circle,.grid-dot{width:24px !important;height:24px !important;font-size:18px !important;}
.project-list-wrap{padding:0 44px 32px 50px !important;}
.project-row{padding:0 !important;}
.project-row .row-main{min-height:72px !important;padding:0 12px 0 8px !important;gap:16px !important;grid-template-columns:72px 1fr auto !important;}
.project-badge{width:48px !important;height:48px !important;border-radius:5px !important;font-size:13px !important;font-weight:600 !important;}
.project-name{font-size:15px !important;gap:10px !important;color:#616b75 !important;}
.project-name .client,.project-name .project{font-weight:400 !important;}
.sep{font-size:9px !important;opacity:.48 !important;}
.clock-btn{width:64px !important;height:64px !important;}
.clock-btn .icon.clock{width:18px !important;height:18px !important;}
.clock-btn.running{min-width:148px !important;height:64px !important;font-size:13px !important;padding:0 16px !important;}
.clock-btn.running .run-prefix{font-size:13px !important;}
.row-actions{gap:10px !important;}
.small-action{min-width:104px !important;height:44px !important;font-size:14px !important;}

.project-row.selected .row-main{min-height:74px !important;}
.row-detail{padding:0 10px 4px 10px !important;font-size:13px !important;background:#fbfbfb !important;}
.detail-entry{grid-template-columns:64px 1px 140px 1px 1fr auto !important;gap:14px !important;padding:14px 14px !important;min-height:54px !important;}
.detail-duration{font-size:15px !important;}
.detail-range,.time-adjust-value,.detail-note-input,.detail-delete,.add-non-timeline{font-size:15px !important;}
.add-non-timeline{margin:16px 0 16px 16px !important;}

@media (max-width: 980px){
  .hours-layout{grid-template-columns:64px 1fr !important;}
  .sidebar{width:64px !important;}
  .nav-item .icon-shell{width:40px !important;height:40px !important;}
  .week-strip{padding:0 10px 0 10px !important;}
  .timers-toolbar{padding:14px 16px 10px 18px !important;}
  .project-list-wrap{padding:0 16px 24px 18px !important;}
}


/* v20 modal centering + typography cleanup */
#projectDialog[open],
#editProjectDialog[open]{
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
}
#projectDialog,
#editProjectDialog{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
}
#projectForm.project-modal{
  width:min(540px, calc(100vw - 64px)) !important;
  max-width:min(540px, calc(100vw - 64px)) !important;
  max-height:min(82vh, 720px) !important;
  padding:0 !important;
  border-radius:26px !important;
  background:#fff !important;
  box-shadow:0 24px 60px rgba(0,0,0,.24) !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto 1fr auto !important;
  gap:0 !important;
}
#projectForm.project-modal h3{
  margin:0 !important;
  padding:18px 24px !important;
  background:var(--blue) !important;
  color:#fff !important;
  text-align:center !important;
  font-size:24px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
#projectForm.project-modal .dialog-field,
#projectForm.project-modal .field-help,
#projectForm.project-modal .project-color-grid{
  margin-left:28px !important;
  margin-right:28px !important;
}
#projectForm.project-modal .dialog-field:first-of-type{margin-top:22px !important;}
#projectForm.project-modal .dialog-field{gap:8px !important;}
#projectForm.project-modal .dialog-field>label{
  font-size:13px !important;
  font-weight:700 !important;
  color:#586571 !important;
}
#projectForm.project-modal .dialog-field select,
#projectForm.project-modal .dialog-field input{
  height:42px !important;
  min-height:42px !important;
  border-radius:14px !important;
  font-size:13px !important;
  padding:0 14px !important;
}
#projectForm.project-modal .field-help{
  font-size:11px !important;
  line-height:1.35 !important;
  margin-top:6px !important;
  margin-bottom:0 !important;
}
#projectColorGrid.project-color-grid{
  grid-template-columns:repeat(5,52px) !important;
  gap:12px !important;
  max-width:340px !important;
  justify-content:flex-start !important;
  margin-top:8px !important;
  margin-bottom:10px !important;
}
#projectColorGrid .color-choice{
  width:52px !important;
  height:52px !important;
  border-radius:14px !important;
}
#projectForm.project-modal .modal-actions{
  margin:14px 0 0 !important;
  padding:14px 28px 18px !important;
  border-top:1px solid #edf0f3 !important;
  display:grid !important;
  grid-template-columns:1fr auto auto !important;
  align-items:center !important;
  gap:12px !important;
  background:#fff !important;
}
#projectForm.project-modal .modal-actions button{
  min-width:116px !important;
  height:44px !important;
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:600 !important;
  padding:0 18px !important;
}
#projectForm.project-modal .modal-actions #cancelProjectBtn{
  justify-self:start !important;
  margin:0 !important;
}
#projectForm.project-modal .modal-actions .primary{
  justify-self:end !important;
  margin:0 !important;
}

#editProjectForm.edit-timer-form{
  width:min(620px, calc(100vw - 64px)) !important;
  max-width:min(620px, calc(100vw - 64px)) !important;
  max-height:min(82vh, 740px) !important;
  grid-template-rows:auto 1fr auto !important;
  border-radius:26px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.24) !important;
}
#editProjectForm .edit-head{
  background:var(--blue) !important;
  color:#fff !important;
  font-size:26px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  padding:18px 24px !important;
}
#editProjectForm .edit-body{
  padding:22px 28px !important;
}
#editProjectForm .big-edit-btn{
  min-width:220px !important;
  height:54px !important;
  font-size:16px !important;
  border-radius:14px !important;
}
#editProjectForm .edit-footer{
  grid-template-columns:auto 1fr auto !important;
  gap:14px !important;
  padding:14px 24px 18px !important;
}
#editProjectForm .edit-footer button{
  min-width:120px !important;
  height:44px !important;
  font-size:14px !important;
  border-radius:14px !important;
  padding:0 18px !important;
}
#editProjectForm .edit-project-preview #editProjectPreviewText{
  font-size:14px !important;
}
#editProjectForm .preview-color{
  width:48px !important;
  height:48px !important;
  border-radius:10px !important;
}

@media (max-width: 760px){
  #projectForm.project-modal{
    width:min(92vw, 540px) !important;
    max-width:92vw !important;
  }
  #projectForm.project-modal h3{font-size:22px !important; padding:16px 20px !important;}
  #projectForm.project-modal .dialog-field,
  #projectForm.project-modal .field-help,
  #projectForm.project-modal .project-color-grid{margin-left:20px !important; margin-right:20px !important;}
  #projectColorGrid.project-color-grid{grid-template-columns:repeat(5,48px) !important; gap:10px !important;}
  #projectColorGrid .color-choice{width:48px !important; height:48px !important;}
  #projectForm.project-modal .modal-actions{padding:14px 20px 18px !important; grid-template-columns:1fr 1fr !important;}
  #projectForm.project-modal .modal-actions #cancelProjectBtn{justify-self:stretch !important;}
  #projectForm.project-modal .modal-actions .primary{justify-self:stretch !important;}

  #editProjectForm.edit-timer-form{width:min(92vw, 620px) !important; max-width:92vw !important;}
  #editProjectForm .edit-head{font-size:22px !important; padding:16px 20px !important;}
  #editProjectForm .edit-body{padding:18px 20px !important;}
  #editProjectForm .big-edit-btn{min-width:0 !important; width:100% !important;}
  #editProjectForm .edit-footer{grid-template-columns:1fr 1fr !important; grid-template-areas:"cancel save" "preview preview" !important; padding:14px 20px 18px !important;}
  #editProjectCancel{grid-area:cancel !important; width:100% !important;}
  #editProjectForm .primary-outline{grid-area:save !important; width:100% !important;}
  #editProjectForm .edit-project-preview{grid-area:preview !important;}
}


/* v21 modal centering + sizing only */
#projectDialog,
#editProjectDialog{
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  width:auto !important;
  max-width:calc(100vw - 48px) !important;
  overflow:visible !important;
}
#projectDialog[open],
#editProjectDialog[open]{
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;
  width:max-content !important;
  height:max-content !important;
}
#projectDialog::backdrop,
#editProjectDialog::backdrop{background:rgba(0,0,0,.28) !important;}

#projectForm.project-modal{
  width:min(640px, calc(100vw - 64px)) !important;
  max-width:min(640px, calc(100vw - 64px)) !important;
  max-height:min(84vh, 760px) !important;
  padding:0 !important;
  border-radius:26px !important;
  background:#fff !important;
  box-shadow:0 26px 70px rgba(0,0,0,.24) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#projectForm.project-modal h3{
  margin:0 !important;
  padding:22px 28px !important;
  background:var(--blue) !important;
  color:#fff !important;
  text-align:center !important;
  font-size:26px !important;
  line-height:1.15 !important;
  font-weight:500 !important;
}
#projectForm.project-modal .dialog-field,
#projectForm.project-modal .field-help,
#projectColorGrid.project-color-grid{
  margin-left:26px !important;
  margin-right:26px !important;
}
#projectForm.project-modal .dialog-field:first-of-type{margin-top:22px !important;}
#projectForm.project-modal .dialog-field{display:grid !important; gap:8px !important;}
#projectForm.project-modal .dialog-field>label{
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#56626d !important;
}
#projectForm.project-modal .dialog-field select,
#projectForm.project-modal .dialog-field input{
  height:46px !important;
  min-height:46px !important;
  border-radius:14px !important;
  font-size:15px !important;
  padding:0 16px !important;
}
#projectForm.project-modal .field-help{
  font-size:12px !important;
  line-height:1.35 !important;
  color:#8f99a4 !important;
  margin-top:4px !important;
}
#projectColorGrid.project-color-grid{
  grid-template-columns:repeat(5,56px) !important;
  gap:14px !important;
  margin-top:8px !important;
  margin-bottom:8px !important;
}
#projectColorGrid .color-choice{
  width:56px !important;
  height:56px !important;
  border-radius:16px !important;
}
#projectForm.project-modal .modal-actions{
  margin-top:16px !important;
  padding:16px 26px 20px !important;
  border-top:1px solid #eef1f4 !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}
#projectForm.project-modal .modal-actions button{
  min-width:128px !important;
  height:46px !important;
  padding:0 22px !important;
  font-size:15px !important;
  border-radius:14px !important;
  font-weight:600 !important;
}
#projectForm.project-modal .modal-actions #cancelProjectBtn{margin-right:auto !important;}
#projectForm.project-modal .modal-actions .primary{margin-left:auto !important;}

#editProjectForm.edit-timer-form{
  width:min(640px, calc(100vw - 64px)) !important;
  max-width:min(640px, calc(100vw - 64px)) !important;
  max-height:min(84vh, 780px) !important;
  border-radius:26px !important;
  box-shadow:0 26px 70px rgba(0,0,0,.24) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
#editProjectForm .edit-head{
  padding:22px 28px !important;
  background:var(--blue) !important;
  color:#fff !important;
  text-align:center !important;
  font-size:26px !important;
  line-height:1.15 !important;
  font-weight:500 !important;
}
#editProjectForm .edit-body{
  padding:24px 28px !important;
  overflow:auto !important;
}
#editProjectForm .big-edit-btn{
  min-width:240px !important;
  height:54px !important;
  border-radius:14px !important;
  font-size:16px !important;
}
#editProjectForm .edit-footer{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:14px !important;
  padding:16px 26px 20px !important;
  border-top:1px solid #eef1f4 !important;
}
#editProjectForm .edit-footer button{
  min-width:128px !important;
  height:46px !important;
  padding:0 20px !important;
  font-size:15px !important;
  border-radius:14px !important;
}
#editProjectForm .preview-color{
  width:54px !important;
  height:54px !important;
  border-radius:12px !important;
}
#editProjectForm .edit-project-preview #editProjectPreviewText{
  font-size:15px !important;
}
@media (max-width: 760px){
  #projectDialog[open], #editProjectDialog[open]{width:100vw !important;}
  #projectForm.project-modal,
  #editProjectForm.edit-timer-form{
    width:min(92vw, 560px) !important;
    max-width:92vw !important;
  }
  #projectForm.project-modal h3,
  #editProjectForm .edit-head{font-size:22px !important; padding:18px 20px !important;}
  #projectForm.project-modal .dialog-field,
  #projectForm.project-modal .field-help,
  #projectColorGrid.project-color-grid{margin-left:20px !important; margin-right:20px !important;}
  #projectForm.project-modal .modal-actions,
  #editProjectForm .edit-footer{padding:14px 20px 18px !important;}
}

/* FINAL MODAL CLEANUP v22 */
#projectDialog,
#editProjectDialog{
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  max-width:none !important;
  width:auto !important;
  overflow:visible !important;
}
#projectDialog::backdrop,
#editProjectDialog::backdrop{
  background:rgba(27,39,51,.32) !important;
}
#projectDialog[open],
#editProjectDialog[open]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#projectForm.project-modal{
  width:min(92vw, 620px) !important;
  max-width:min(92vw, 620px) !important;
  max-height:min(86vh, 760px) !important;
  min-height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:24px !important;
  background:#fff !important;
  box-shadow:0 30px 70px rgba(17,24,39,.22) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  overflow:hidden !important;
}
#projectForm.project-modal h3{
  margin:0 !important;
  padding:18px 24px !important;
  background:linear-gradient(180deg,#6f93bf,#6a8cb5) !important;
  color:#fff !important;
  font-size:24px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
}
#projectForm.project-modal .dialog-field,
#projectForm.project-modal .project-color-grid,
#projectForm.project-modal .field-help{
  margin-left:24px !important;
  margin-right:24px !important;
}
#projectForm.project-modal .dialog-field:first-of-type{margin-top:20px !important;}
#projectForm.project-modal .dialog-field{display:grid !important;gap:8px !important;margin-bottom:14px !important;}
#projectForm.project-modal .dialog-field>label{
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#5f6975 !important;
}
#projectForm.project-modal .dialog-field select,
#projectForm.project-modal .dialog-field input{
  width:100% !important;
  max-width:100% !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  border:1px solid #d6dde5 !important;
  background:#fff !important;
  color:#4d5965 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  box-sizing:border-box !important;
}
#projectForm.project-modal .dialog-field input::placeholder{color:#a4adb7 !important;}
#projectForm.project-modal .field-help{
  margin-top:-6px !important;
  margin-bottom:12px !important;
  font-size:11px !important;
  line-height:1.35 !important;
  color:#8c96a1 !important;
}
#projectColorGrid.project-color-grid{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  gap:10px !important;
  margin-top:2px !important;
  margin-bottom:4px !important;
}
#projectColorGrid .color-choice{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-height:40px !important;
  border-radius:12px !important;
  border:2px solid transparent !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35) !important;
}
#projectColorGrid .color-choice.selected{outline:3px solid #4c84c7 !important; outline-offset:2px !important;}
#projectColorGrid .color-check{font-size:15px !important;}
#projectForm.project-modal .modal-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  padding:16px 24px 20px !important;
  margin:0 !important;
  margin-top:auto !important;
  border-top:1px solid #edf1f4 !important;
  background:#fff !important;
}
#projectForm.project-modal .modal-actions button{
  min-width:112px !important;
  height:42px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#projectForm.project-modal .modal-actions #cancelProjectBtn{margin-right:0 !important;}
#projectForm.project-modal .modal-actions .primary{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important;opacity:1 !important;visibility:visible !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}

#editProjectForm.edit-timer-form{
  width:min(92vw, 740px) !important;
  max-width:min(92vw, 740px) !important;
  max-height:min(88vh, 760px) !important;
  margin:0 !important;
  border:none !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-shadow:0 30px 70px rgba(17,24,39,.22) !important;
  background:#fff !important;
  display:flex !important;
  flex-direction:column !important;
}
#editProjectForm .edit-head{
  padding:18px 24px !important;
  font-size:24px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  background:linear-gradient(180deg,#6f93bf,#6a8cb5) !important;
  color:#fff !important;
}
#editProjectForm .edit-body{padding:20px 24px !important; overflow:auto !important;}
#editProjectForm .edit-stack{gap:12px !important;}
#editProjectForm .big-edit-btn{
  min-height:52px !important;
  border-radius:14px !important;
  font-size:15px !important;
  font-weight:700 !important;
  padding:0 16px !important;
}
#editProjectForm .edit-panel{
  border-radius:16px !important;
  padding:16px !important;
}
#editProjectForm .edit-panel h4{font-size:13px !important; letter-spacing:.02em !important;}
#editProjectForm .edit-panel p{font-size:12px !important; line-height:1.4 !important;}
#editProjectForm .edit-panel input{
  height:42px !important;
  border-radius:12px !important;
  font-size:14px !important;
  padding:0 14px !important;
}
#editProjectForm .chip-grid{gap:8px !important;}
#editProjectForm .chip-grid button{height:34px !important; border-radius:10px !important; font-size:13px !important; padding:0 12px !important;}
#editProjectForm .color-palette{gap:10px !important;}
#editProjectForm .color-palette button{width:40px !important; height:40px !important; border-radius:12px !important;}
#editProjectForm .edit-footer{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:12px !important;
  padding:16px 24px 20px !important;
  border-top:1px solid #edf1f4 !important;
  background:#fff !important;
}
#editProjectForm .edit-footer button{
  min-width:118px !important;
  height:42px !important;
  border-radius:12px !important;
  font-size:14px !important;
  font-weight:700 !important;
  padding:0 16px !important;
}
#editProjectForm .edit-project-preview{
  min-width:0 !important;
  padding:8px 12px !important;
  border-radius:14px !important;
  gap:10px !important;
}
#editProjectForm .preview-color{
  width:40px !important;
  height:40px !important;
  border-radius:10px !important;
}
#editProjectForm #editProjectPreviewText{
  font-size:13px !important;
  line-height:1.3 !important;
}
@media (max-width: 760px){
  #projectForm.project-modal,
  #editProjectForm.edit-timer-form{
    width:min(94vw, 620px) !important;
    max-width:94vw !important;
  }
  #projectForm.project-modal h3,
  #editProjectForm .edit-head{font-size:22px !important; padding:16px 20px !important;}
  #projectForm.project-modal .dialog-field,
  #projectForm.project-modal .project-color-grid,
  #projectForm.project-modal .field-help,
  #editProjectForm .edit-body{margin-left:0 !important; margin-right:0 !important;}
  #projectForm.project-modal .dialog-field,
  #projectForm.project-modal .project-color-grid,
  #projectForm.project-modal .field-help{margin-left:20px !important; margin-right:20px !important;}
  #projectForm.project-modal .modal-actions,
  #editProjectForm .edit-footer{padding:14px 20px 18px !important;}
}


/* v23 targeted cleanup: stabilize clickable project rows and keep sidebar/modal styles untouched */
.project-row { overflow: visible; }
.project-row .row-main { cursor: pointer; }
.project-row .project-action, .project-row .project-action * { cursor: default; }
.project-name.row-open-btn { display:flex; align-items:center; gap:8px; min-width:0; }
.project-name.row-open-btn .client, .project-name.row-open-btn .project { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* v24 timeline geometry and sidebar labels */
.hours-layout{grid-template-columns:132px 1fr !important;}
.sidebar{
  width:132px !important;
  padding:14px 10px !important;
  background:#f6f8fb !important;
}
.side-top{gap:12px !important;align-items:stretch !important;}
.nav-item{
  width:100% !important;
  min-height:54px !important;
  border:0 !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  padding:0 10px !important;
  color:#7e90a3 !important;
  background:transparent !important;
}
.nav-item.active,.nav-item:hover{
  color:var(--blue) !important;
  background:#fff !important;
  box-shadow:0 1px 4px rgba(28,74,124,.08) !important;
}
.nav-item .icon-shell{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  border:2px solid currentColor !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:transparent !important;
}
.nav-label{
  display:block !important;
  font-size:12px !important;
  line-height:1.1 !important;
  font-weight:600 !important;
  color:currentColor !important;
  white-space:normal !important;
  text-align:left !important;
}
.side-bottom{
  display:flex !important;
  padding:10px 8px 0 !important;
  gap:8px !important;
  font-size:12px !important;
}
.side-link{
  text-align:left !important;
  color:#8a98a8 !important;
  padding:4px 2px !important;
}
.nav-item .icon.clock{width:15px !important;height:15px !important;border-width:2px !important;}
.nav-item .icon.projects{width:17px !important;height:15px !important;border-width:2px !important;}
.nav-item .icon.report{width:16px !important;height:20px !important;border-width:2px !important;}
.nav-item .icon.archive{width:16px !important;height:14px !important;border-width:2px !important;}
.nav-item .icon.gear{width:17px !important;height:17px !important;border-width:2px !important;}

.hour-labels{
  position:relative !important;
  display:block !important;
  height:22px !important;
  padding-left:0 !important;
}
.hour-label{
  position:absolute !important;
  top:0 !important;
  transform:translateX(-50%) !important;
  width:44px !important;
  min-height:22px !important;
  text-align:center !important;
}
.hour-label:first-child{transform:translateX(0) !important;text-align:left !important;}
.hour-label:last-child{transform:translateX(-100%) !important;text-align:right !important;}
.hour-label::after{
  left:50% !important;
  right:auto !important;
  top:18px !important;
  height:30px !important;
}
.hour-label:first-child::after{left:0 !important;}
.hour-label:last-child::after{left:auto !important;right:0 !important;}
.track-grid{
  background:
    repeating-linear-gradient(to right, transparent 0, transparent calc(100%/48 - 1px), rgba(210,210,210,.85) calc(100%/48 - 1px), rgba(210,210,210,.85) calc(100%/48)),
    repeating-linear-gradient(to right, transparent 0, transparent calc(100%/24 - 1px), rgba(170,170,170,.95) calc(100%/24 - 1px), rgba(170,170,170,.95) calc(100%/24)) !important;
  opacity:.38 !important;
}
.empty-slot{
  width:calc(100% / 48) !important;
  transform:none !important;
  z-index:1 !important;
}
.empty-slot:hover{background:transparent !important;}
.slot-plus{
  top:50% !important;
  left:0 !important;
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid #cfd6de !important;
  color:#8b99a8 !important;
  font-size:20px !important;
  box-shadow:0 2px 7px rgba(30,60,90,.14) !important;
}
.track-entries{z-index:2 !important;pointer-events:none !important;}
.track-entry{
  cursor:grab !important;
  pointer-events:auto !important;
  touch-action:none !important;
}
.track-entry.dragging{
  cursor:grabbing !important;
  box-shadow:0 4px 12px rgba(35,35,35,.18), inset 0 -1px 0 rgba(0,0,0,.08) !important;
}
.resize-handle{pointer-events:auto !important;}
.small-action .mini-icon{display:none !important;}
.small-action{gap:0 !important;padding:0 20px !important;}

@media (max-width: 980px){
  .hours-layout{grid-template-columns:96px 1fr !important;}
  .sidebar{width:96px !important;padding:12px 8px !important;}
  .nav-item{min-height:48px !important;gap:6px !important;padding:0 6px !important;}
  .nav-item .icon-shell{width:30px !important;height:30px !important;flex-basis:30px !important;}
  .nav-label{font-size:10px !important;}
}

/* v25 visual polish */
.hours-layout{grid-template-columns:128px 1fr !important;}
.sidebar{
  width:128px !important;
  padding:0 12px 18px !important;
  background:#f5f8fb !important;
}
.side-top{
  padding-top:198px !important;
  gap:14px !important;
  align-items:stretch !important;
}
.nav-item{
  min-height:58px !important;
  border-radius:14px !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:8px 8px 7px !important;
  color:#7890a8 !important;
}
.nav-item.active,.nav-item:hover{
  background:#fff !important;
  color:#238feb !important;
  box-shadow:0 6px 18px rgba(39,94,143,.10), 0 1px 0 rgba(255,255,255,.9) inset !important;
}
.nav-item .icon-shell{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  border:2px solid currentColor !important;
  background:#f8fbff !important;
}
.nav-label{
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.05 !important;
  text-align:center !important;
  letter-spacing:.01em !important;
}
.side-bottom{
  padding:0 4px !important;
  gap:10px !important;
}
.side-link{
  text-align:left !important;
  color:#8da0b4 !important;
  font-size:12px !important;
}
.nav-item .icon{
  width:18px !important;
  height:18px !important;
  border:0 !important;
  border-radius:0 !important;
  background:currentColor !important;
  display:block !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}
.nav-item .icon::before,.nav-item .icon::after{display:none !important;}
.nav-item .icon.clock{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5-2.2'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5-2.2'/%3E%3C/svg%3E") !important;
}
.nav-item .icon.projects{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2.5'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2.5'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E") !important;
}
.nav-item .icon.report{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V5M5 19h14'/%3E%3Crect x='8' y='11' width='2.8' height='5' rx='1'/%3E%3Crect x='13' y='7' width='2.8' height='9' rx='1'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V5M5 19h14'/%3E%3Crect x='8' y='11' width='2.8' height='5' rx='1'/%3E%3Crect x='13' y='7' width='2.8' height='9' rx='1'/%3E%3C/svg%3E") !important;
}
.nav-item .icon.archive{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v12H4z'/%3E%3Cpath d='M3 5h18v4H3zM9 12h6'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v12H4z'/%3E%3Cpath d='M3 5h18v4H3zM9 12h6'/%3E%3C/svg%3E") !important;
}
.nav-item .icon.gear{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.2 2.1 2.4.5.7 2.3 2 1.4-1 2.2.3 2.4-2 1.3-.8 2.3-2.4.3L12 21l-1.4-2.1-2.4-.3-.8-2.3-2-1.3.3-2.4-1-2.2 2-1.4.7-2.3 2.4-.5L12 3z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.2 2.1 2.4.5.7 2.3 2 1.4-1 2.2.3 2.4-2 1.3-.8 2.3-2.4.3L12 21l-1.4-2.1-2.4-.3-.8-2.3-2-1.3.3-2.4-1-2.2 2-1.4.7-2.3 2.4-.5L12 3z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}
.pill-btn{
  align-items:center !important;
  gap:12px !important;
}
.plus-circle,.grid-dot{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  text-indent:-999px !important;
  overflow:hidden !important;
}
.plus-circle::before,.grid-dot::before{
  content:"+" !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  color:#fff !important;
  font-size:21px !important;
  line-height:1 !important;
  font-weight:800 !important;
  text-indent:0 !important;
}
.grid-dot::after{display:none !important;}
.slot-plus{left:50% !important;}

@media (max-width: 980px){
  .hours-layout{grid-template-columns:92px 1fr !important;}
  .sidebar{width:92px !important;padding:0 8px 14px !important;}
  .side-top{padding-top:184px !important;gap:10px !important;}
  .nav-item{min-height:54px !important;padding:7px 5px 6px !important;}
  .nav-item .icon-shell{width:32px !important;height:32px !important;flex-basis:32px !important;}
  .nav-label{font-size:10.5px !important;}
}

/* v26 sidebar logo */
.sidebar{position:relative !important;}
.sidebar-logo{
  position:absolute !important;
  top:88px !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:70px !important;
  height:70px !important;
  display:grid !important;
  place-items:center !important;
  pointer-events:none !important;
}
.sidebar-logo img{
  display:block !important;
  width:62px !important;
  height:62px !important;
  border-radius:16px !important;
  object-fit:cover !important;
  box-shadow:0 8px 20px rgba(31,92,150,.16) !important;
}
@media (max-width: 980px){
  .sidebar-logo{top:82px !important;width:56px !important;height:56px !important;}
  .sidebar-logo img{width:50px !important;}
}

/* v27 current-week guard */
.range-arrow.hidden{
  visibility:hidden !important;
  pointer-events:none !important;
}
.day-label{
  font-size:13px !important;
  font-weight:650 !important;
  line-height:1.16 !important;
}
.day-hours{
  font-size:12px !important;
  margin-top:5px !important;
}
.day-cell.future{
  opacity:.42 !important;
  cursor:default !important;
  filter:saturate(.75) !important;
}
.day-cell.future:hover{
  background:var(--blue-soft) !important;
  color:#dcedff !important;
}

/* v28 timeline picker polish */
.slot-plus{
  width:26px !important;
  height:26px !important;
  border-radius:7px !important;
  font-size:19px !important;
  background:#ffffff !important;
  border:1px solid #c9d2dc !important;
  color:#7f91a4 !important;
  box-shadow:0 2px 7px rgba(40,70,105,.13) !important;
}
#timelinePickerDialog{
  border-radius:20px !important;
  width:min(560px, calc(100vw - 32px)) !important;
  background:#fff !important;
}
#timelinePickerDialog[open]{
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;
  height:max-content !important;
  max-height:min(76vh, 720px) !important;
  overflow:hidden !important;
}
#timelinePickerDialog::backdrop{
  background:rgba(20,27,34,.42) !important;
  backdrop-filter:blur(1px) !important;
}
.timeline-picker-form{
  padding:0 !important;
  display:grid !important;
  gap:0 !important;
  overflow:hidden !important;
}
.timeline-picker-head{
  padding:28px 30px 18px !important;
  border-bottom:1px solid #edf1f5 !important;
}
.timeline-picker-head h3{
  margin:0 !important;
  color:#2f3d4a !important;
  font-size:25px !important;
  line-height:1.15 !important;
  font-weight:750 !important;
}
.timeline-picker-head p{
  margin:7px 0 0 !important;
  color:#8a98a8 !important;
  font-size:14px !important;
  line-height:1.35 !important;
}
.project-picker-list{
  max-height:48vh !important;
  overflow:auto !important;
  display:grid !important;
  gap:0 !important;
  padding:10px 14px !important;
}
.picker-project{
  min-height:64px !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#34414d !important;
  padding:10px 12px !important;
  display:grid !important;
  grid-template-columns:12px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:13px !important;
  text-align:left !important;
  cursor:pointer !important;
  font-size:15px !important;
}
.picker-project:hover,.picker-project:focus{
  background:#f6f9fc !important;
  border-color:#dce5ee !important;
  outline:none !important;
}
.picker-color{
  width:12px !important;
  height:36px !important;
  border-radius:6px !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
.picker-copy{
  display:grid !important;
  min-width:0 !important;
  gap:3px !important;
}
.picker-client{
  color:#2f3b46 !important;
  font-size:16px !important;
  font-weight:650 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.picker-title{
  color:#8493a4 !important;
  font-size:12px !important;
  font-weight:650 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.picker-total{
  justify-self:end !important;
  min-width:48px !important;
  padding:6px 8px !important;
  border-radius:8px !important;
  background:#f0f4f8 !important;
  color:#627386 !important;
  font-size:13px !important;
  font-weight:750 !important;
  text-align:center !important;
}
.timeline-picker-form .modal-actions{
  margin:0 !important;
  padding:16px 28px 24px !important;
  border-top:1px solid #edf1f5 !important;
  background:#fbfcfd !important;
}
.timeline-picker-form .modal-actions button{
  height:42px !important;
  border-radius:10px !important;
}

/* v29 projects header aligned with timers */
.projects-bluebar{
  height:44px !important;
  min-height:44px !important;
  background:var(--blue) !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  padding:0 20px !important;
  color:#dff1ff !important;
}
.projects-title-btn{
  color:#dff1ff !important;
  font-size:12px !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
}
.projects-title-btn .caret{
  font-size:10px !important;
  margin-left:5px !important;
}
.projects-bar-center{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}
.projects-arrow{
  background:transparent !important;
  border:none !important;
  color:#dff1ff !important;
  padding:0 !important;
  font-size:14px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.projects-range-label{
  min-width:170px !important;
  text-align:center !important;
  color:#dff1ff !important;
  font-size:12px !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
}
.projects-segments{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:1fr !important;
  background:var(--blue) !important;
  padding:0 20px 0 18px !important;
  gap:0 !important;
}
.segment-cell{
  min-height:58px !important;
  height:58px !important;
  background:var(--blue-soft) !important;
  border-right:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  color:#dcedff !important;
  padding:0 6px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.segment-cell:first-child{border-top-left-radius:6px !important;}
.segment-cell:last-child{border-top-right-radius:6px !important;border-right:none !important;}
.segment-cell.active{
  background:#f3f3f3 !important;
  color:var(--text-strong) !important;
}
.segment-cell .seg-main{
  display:block !important;
  margin:0 !important;
  color:inherit !important;
  font-size:13px !important;
  font-weight:650 !important;
  line-height:1.16 !important;
}
.segment-cell .seg-sub{
  display:block !important;
  margin-top:5px !important;
  color:inherit !important;
  font-size:12px !important;
  line-height:1 !important;
  opacity:.96 !important;
}
.sidebar-logo img{
  min-width:62px !important;
  opacity:1 !important;
}

.pull-refresh-indicator{
  position:fixed;
  top:-54px;
  left:50%;
  width:52px;
  height:52px;
  border-radius:18px;
  border:1px solid rgba(203,216,230,.9);
  background:rgba(255,255,255,.96);
  color:#2798f0;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  box-shadow:0 14px 32px rgba(42,69,96,.16);
  z-index:90;
  pointer-events:none;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
  opacity:0;
}
.pull-refresh-indicator.ready{
  background:#2798f0;
  color:#fff;
}
.pull-refresh-indicator.refreshing{
  width:auto;
  min-width:92px;
  padding:0 16px;
  border-radius:18px;
  font-size:13px;
}
.pull-refresh-active .pull-refresh-indicator,
.pull-refresh-loading .pull-refresh-indicator{
  display:flex;
  opacity:1;
}

/* v33 mobile app layout */
@media (max-width: 760px){
  html,body{
    min-height:100% !important;
    overflow-x:hidden !important;
  }
  body{
    background:#f6f8fb !important;
    padding-bottom:78px !important;
    color:#56626d !important;
  }
  .hours-layout{
    display:block !important;
    min-height:100vh !important;
    background:#f6f8fb !important;
  }
  .sidebar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:72px !important;
    padding:6px 10px calc(6px + env(safe-area-inset-bottom)) !important;
    border-right:0 !important;
    border-top:1px solid #dbe3ec !important;
    background:rgba(248,251,254,.96) !important;
    backdrop-filter:blur(18px) !important;
    z-index:50 !important;
    display:block !important;
  }
  .sidebar-logo,.side-bottom{
    display:none !important;
  }
  .side-top{
    height:100% !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:4px !important;
    align-items:center !important;
    justify-items:center !important;
  }
  .nav-item{
    min-width:0 !important;
    width:100% !important;
    min-height:56px !important;
    height:56px !important;
    margin:0 !important;
    padding:5px 2px 4px !important;
    border-radius:15px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .nav-item.active{
    background:#fff !important;
    box-shadow:0 6px 18px rgba(39,94,143,.12) !important;
  }
  .nav-item .icon-shell{
    width:27px !important;
    height:27px !important;
    flex:0 0 27px !important;
    border-width:2px !important;
  }
  .nav-label{
    display:block !important;
    max-width:100% !important;
    font-size:10px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .main-shell{
    width:100% !important;
    min-width:0 !important;
    padding:0 0 14px !important;
    background:#f6f8fb !important;
  }
  .calendar-panel{
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    background:#f6f8fb !important;
    box-shadow:0 1px 0 #dfe6ee, 0 10px 24px rgba(26,60,94,.07) !important;
    width:100vw !important;
    max-width:100vw !important;
  }
  .week-range-bar{
    position:sticky !important;
    left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    box-sizing:border-box !important;
    height:44px !important;
    padding:0 12px !important;
    justify-content:space-between !important;
    gap:6px !important;
    z-index:3 !important;
  }
  .range-title{
    min-width:0 !important;
    flex:1 !important;
    font-size:13px !important;
  }
  .range-arrow{
    width:42px !important;
    height:42px !important;
    display:grid !important;
    place-items:center !important;
    font-size:18px !important;
  }
  .week-strip{
    display:grid !important;
    grid-template-columns:repeat(7,minmax(96px,1fr)) !important;
    min-width:672px !important;
    padding:0 !important;
  }
  .calendar-panel{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  .calendar-panel::-webkit-scrollbar{display:none !important;}
  .day-cell{
    height:62px !important;
    border-radius:0 !important;
  }
  .day-label{
    font-size:12px !important;
    white-space:nowrap !important;
  }
  .day-hours{
    font-size:11px !important;
  }
  .day-track-panel{
    min-width:960px !important;
    padding:10px 12px 12px !important;
  }
  .hour-labels{
    height:24px !important;
  }
  .hour-label{
    font-size:10px !important;
    width:38px !important;
  }
  .day-track{
    height:34px !important;
    margin-top:12px !important;
    border-radius:8px !important;
    overflow:visible !important;
  }
  .track-entry{
    height:34px !important;
    top:0 !important;
    border-radius:8px !important;
    font-size:12px !important;
    padding:0 8px !important;
  }
  .slot-plus{
    width:30px !important;
    height:30px !important;
    border-radius:8px !important;
    font-size:20px !important;
  }
  .current-time-line{
    top:-38px !important;
  }
  .timers-toolbar{
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:16px 14px 10px !important;
    background:#f6f8fb !important;
  }
  .pill-btn{
    width:100% !important;
    height:46px !important;
    justify-content:center !important;
    padding:0 12px !important;
    font-size:13px !important;
    white-space:nowrap !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 4px 14px rgba(32,64,96,.06) !important;
  }
  .plus-circle,.grid-dot{
    width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
  }
  .project-list-wrap{
    padding:0 12px 18px !important;
    background:#f6f8fb !important;
  }
  .project-row{
    margin:0 0 10px !important;
    border:1px solid #e3e9f0 !important;
    border-radius:14px !important;
    background:#fff !important;
    overflow:hidden !important;
    box-shadow:0 6px 18px rgba(30,64,96,.05) !important;
  }
  .project-row:last-child{border-bottom:1px solid #e3e9f0 !important;}
  .project-row.selected{
    background:#fff !important;
  }
  .project-row .row-main{
    min-height:76px !important;
    padding:10px 12px !important;
    grid-template-columns:54px minmax(0,1fr) auto !important;
    gap:10px !important;
  }
  .project-row.selected .row-main{
    min-height:76px !important;
  }
  .project-badge{
    width:46px !important;
    height:46px !important;
    border-radius:10px !important;
    font-size:13px !important;
  }
  .project-name{
    min-width:0 !important;
    display:grid !important;
    gap:3px !important;
    font-size:15px !important;
    line-height:1.15 !important;
  }
  .project-name .sep{display:none !important;}
  .project-name .client,.project-name .project{
    display:block !important;
    min-width:0 !important;
  }
  .project-name .client{
    color:#2f3b46 !important;
    font-weight:700 !important;
  }
  .project-name .project{
    color:#8793a0 !important;
    font-size:12px !important;
    font-weight:650 !important;
  }
  .project-action{
    gap:6px !important;
    justify-content:flex-end !important;
  }
  .clock-btn{
    width:52px !important;
    height:52px !important;
  }
  .clock-btn.running{
    min-width:94px !important;
    height:48px !important;
    padding:0 10px !important;
    gap:7px !important;
  }
  .clock-btn.running .run-prefix{
    font-size:11px !important;
  }
  .small-action{
    min-width:0 !important;
    height:38px !important;
    padding:0 10px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }
  .row-detail{
    padding:0 !important;
    background:#fbfcfe !important;
  }
  .detail-entry{
    display:grid !important;
    grid-template-columns:58px 1fr auto !important;
    grid-template-areas:
      "duration range delete"
      "note note note" !important;
    gap:8px 10px !important;
    padding:12px !important;
    min-height:0 !important;
  }
  .detail-duration{grid-area:duration !important;font-size:15px !important;}
  .detail-range{grid-area:range !important;font-size:14px !important;}
  .detail-delete{grid-area:delete !important;font-size:13px !important;}
  .detail-note-input{
    grid-area:note !important;
    height:38px !important;
    padding:0 10px !important;
    border:1px solid #e1e7ee !important;
    border-radius:10px !important;
    background:#fff !important;
    font-size:14px !important;
  }
  .detail-sep{display:none !important;}
  .time-adjust-value{font-size:14px !important;}
  .add-non-timeline{
    margin:12px !important;
    font-size:14px !important;
  }
  dialog{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
    border-radius:18px !important;
  }
  .modal-form{
    padding:18px !important;
    max-height:calc(100dvh - 20px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  .modal-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .modal-actions button{
    width:100% !important;
    min-width:0 !important;
    height:44px !important;
  }
  #projectDialog[open],#editProjectDialog[open]{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
  }
  #projectForm.project-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - 20px) !important;
    padding:0 !important;
    border-radius:18px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  #projectForm.project-modal h3{
    font-size:22px !important;
    padding:16px 18px !important;
  }
  #projectForm.project-modal .dialog-field,
  #projectForm.project-modal .field-help,
  #projectForm.project-modal .project-color-grid{
    margin-left:18px !important;
    margin-right:18px !important;
  }
  #projectForm.project-modal .dialog-field select,
  #projectForm.project-modal .dialog-field input{
    height:48px !important;
    border-radius:14px !important;
    font-size:16px !important;
  }
  #projectColorGrid.project-color-grid{
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    gap:8px !important;
    max-width:none !important;
  }
  #projectColorGrid .color-choice{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 !important;
    border-radius:12px !important;
  }
  #projectForm.project-modal .modal-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:14px 18px 18px !important;
    margin-top:0 !important;
  }
  #projectForm.project-modal .modal-actions #cancelProjectBtn,
  #projectForm.project-modal .modal-actions .primary{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    justify-self:stretch !important;
  }
  .timeline-picker-form{
    width:100% !important;
  }
  .picker-project{
    min-height:62px !important;
    grid-template-columns:10px minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:10px !important;
  }
  .picker-client{font-size:15px !important;}
  .picker-title{font-size:12px !important;}
  .projects-bluebar{
    height:auto !important;
    min-height:50px !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px 12px !important;
  }
  .projects-bar-center{
    width:100% !important;
    justify-content:space-between !important;
  }
  .projects-range-label{
    min-width:0 !important;
    font-size:14px !important;
  }
  .projects-title-btn{
    font-size:15px !important;
  }
  .projects-segments{
    display:flex !important;
    overflow-x:auto !important;
    gap:1px !important;
    padding:0 0 0 12px !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .segment-cell{
    min-width:92px !important;
    min-height:50px !important;
    flex:0 0 auto !important;
  }
  .projects-content,.simple-page{
    padding:14px 12px 96px !important;
  }
  .projects-toolbar{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .toolbar-spacer{display:none !important;}
  .segmented-tabs,.toolbar-select,.toolbar-share{
    width:100% !important;
  }
  .segmented-tabs,
  .toolbar-select,
  .toolbar-share{
    grid-column:1 / -1 !important;
  }
  #projectsGroupBy,
  #projectsViewOptions,
  #projectsClientFilter,
  #projectsProjectFilter{
    grid-column:span 2 !important;
    min-width:0 !important;
  }
  .toolbar-icon-btn.export{
    width:100% !important;
    min-width:0 !important;
    height:44px !important;
    justify-self:stretch !important;
  }
  .projects-overview{
    grid-template-columns:1fr !important;
    gap:10px !important;
    text-align:left !important;
  }
  .overview-divider{display:none !important;}
  .projects-visuals{
    grid-template-columns:1fr !important;
    gap:18px !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .visual-left,
  .visual-right,
  .projects-legend,
  .projects-bars{
    min-width:0 !important;
    max-width:100% !important;
  }
  .visual-right{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .projects-bars{
    width:max-content !important;
    min-width:100% !important;
    gap:18px !important;
    padding-bottom:8px !important;
  }
  .projects-legend{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .legend-item{
    min-width:0 !important;
    max-width:100% !important;
  }
  .projects-table-row,.projects-group-head{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:12px !important;
  }
  table{
    display:block !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
  }
}