:root{
  --bg:#0a0a0b;
  --bg-2:#101113;
  --bg-3:#17181b;
  --bg-4:#1e2024;
  --panel:#141518;
  --panel-2:#1b1d21;
  --panel-3:#22252a;
  --line:#2f3339;
  --line-soft:#262a30;
  --text:#f2f4f8;
  --text-2:#cfd5de;
  --text-3:#9da7b4;
  --accent:#77b8ff;
  --accent-2:#5aa9ff;
  --accent-soft:rgba(119,184,255,.14);
  --danger:#ff6b6b;
  --success:#87c7ff;
  --shadow:0 10px 32px rgba(0,0,0,.26);
  --radius-xl:22px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",sans-serif;
}

body{
  overflow:hidden;
}

button,input,select,textarea{
  font-family:inherit;
}

.todo-shell{
  display:grid;
  grid-template-columns: 330px minmax(0,1fr) 420px;
  min-height:100vh;
  background:linear-gradient(180deg,#090909 0%, #101113 100%);
}

.todo-sidebar{
  background:linear-gradient(180deg,#1d1a18 0%, #17181b 100%);
  border-right:1px solid var(--line-soft);
  padding:20px 16px;
  overflow-y:auto;
}

.todo-main{
  padding:22px 28px;
  overflow-y:auto;
  background:#050607;
}

.todo-detail{
  background:linear-gradient(180deg,#16171a 0%, #111214 100%);
  border-left:1px solid var(--line-soft);
  padding:18px 16px;
  overflow-y:auto;
}

.sidebar-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:18px;
}

.brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand-mark{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#66b0ff,#448df3);
  color:#fff;
  box-shadow:0 8px 18px rgba(68,141,243,.34);
  font-size:18px;
}

.brand-name{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
}

.brand-sub{
  font-size:11px;
  color:var(--text-3);
}

.icon-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-2);
  display:grid;
  place-items:center;
  transition:.18s ease;
  cursor:pointer;
  flex:0 0 auto;
}

.icon-btn:hover{
  background:var(--bg-3);
  color:#fff;
  border-color:var(--line);
}

.icon-btn.small{
  width:30px;
  height:30px;
  border-radius:10px;
}

.sidebar-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.04);
  border-radius:16px;
  margin-bottom:18px;
}

.sidebar-user-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--bg-3);
  color:var(--accent);
  font-size:18px;
}

.sidebar-user-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-3);
  margin-bottom:2px;
}

.sidebar-user-name{
  font-size:13px;
  font-weight:700;
  word-break:break-word;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nav-item{
  width:100%;
  border:none;
  background:transparent;
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 12px;
  border-radius:14px;
  cursor:pointer;
  transition:.18s ease;
  text-align:left;
}

.nav-item-left{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:600;
}

.nav-item-left i{
  font-size:18px;
}

.nav-item:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}

.nav-item.active{
  background:rgba(255,255,255,.08);
  color:#fff;
  position:relative;
}

.nav-item.active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:999px;
  background:var(--accent);
}

.nav-count{
  min-width:20px;
  text-align:right;
  font-size:13px;
  font-weight:700;
  color:#fff;
}

.sidebar-divider{
  height:1px;
  background:var(--line);
  margin:16px 0;
}

.sidebar-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  color:#fff;
  font-weight:700;
}

.new-list-form{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  padding:10px;
  margin-bottom:12px;
}

.new-list-form .form-control{
  background:var(--bg-3);
  border-color:var(--line);
  color:#fff;
}

.new-list-form .form-control:focus{
  background:var(--bg-3);
  color:#fff;
  border-color:var(--accent);
  box-shadow:none;
}

.custom-lists{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.custom-list-item{
  width:100%;
  border:none;
  background:transparent;
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 12px;
  border-radius:14px;
  cursor:pointer;
  transition:.18s ease;
}

.custom-list-item:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}

.custom-list-item.active{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.custom-list-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.list-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
}

.custom-list-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
  font-weight:600;
}

.custom-list-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.custom-list-count{
  font-size:12px;
  font-weight:700;
}

.list-delete-btn{
  width:24px;
  height:24px;
  border:none;
  background:transparent;
  color:var(--text-3);
  border-radius:8px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.list-delete-btn:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.main-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.page-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
  font-weight:800;
  margin-bottom:6px;
}

.page-title{
  margin:0;
  font-size:36px;
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:800;
}

.page-subtitle{
  margin:8px 0 0;
  color:var(--text-3);
  font-size:14px;
}

.toolbar-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.toolbar-select{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:10px 12px;
  min-width:210px;
}

.toolbar-select label{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-3);
  font-weight:800;
  margin-bottom:6px;
}

.toolbar-select .form-select{
  background:transparent;
  border:none;
  color:#fff;
  box-shadow:none;
  padding:0;
  font-size:14px;
}

.quick-add-card{
  background:linear-gradient(180deg,#22201e 0%, #1d1b1a 100%);
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
  overflow:hidden;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}

.quick-add-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.quick-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1.5px solid var(--accent);
  color:var(--accent);
  display:grid;
  place-items:center;
  font-size:16px;
  flex:0 0 auto;
}

.quick-task-input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  color:#fff;
  font-size:16px;
  outline:none;
}

.quick-task-input::placeholder{
  color:var(--text-3);
}

.quick-submit-btn{
  border-color:rgba(255,255,255,.16);
  color:#fff;
}

.quick-submit-btn:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.22);
}

.quick-add-bottom{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  flex-wrap:wrap;
}

.mini-chip{
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-2);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:.18s ease;
  cursor:pointer;
}

.mini-chip:hover{
  color:#fff;
  border-color:var(--accent);
}

.mini-chip.active{
  background:var(--accent-soft);
  color:#fff;
  border-color:rgba(119,184,255,.32);
}

.quick-date,
.quick-list-select{
  max-width:210px;
  background:var(--bg-3);
  border-color:var(--line);
  color:#fff;
}

.quick-date:focus,
.quick-list-select:focus{
  background:var(--bg-3);
  color:#fff;
  border-color:var(--accent);
  box-shadow:none;
}

.task-board{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.task-group{
  background:transparent;
}

.group-header{
  width:100%;
  border:none;
  background:transparent;
  color:#fff;
  padding:8px 6px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
}

.group-count{
  color:var(--text-3);
  font-weight:700;
}

.task-list-wrap.collapsed{
  display:none;
}

.task-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.task-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:linear-gradient(180deg,#23211f 0%, #1c1b1a 100%);
  border:1px solid rgba(255,255,255,.05);
  border-radius:16px;
  padding:14px 16px;
  cursor:pointer;
  transition:.18s ease;
}

.task-card:hover{
  border-color:rgba(119,184,255,.22);
  transform:translateY(-1px);
}

.task-card.selected{
  border-color:rgba(119,184,255,.4);
  box-shadow:0 0 0 1px rgba(119,184,255,.22);
}

.task-card.completed{
  opacity:.82;
}

.task-check-wrap{
  padding-top:2px;
}

.task-check{
  appearance:none;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1.6px solid var(--accent);
  background:transparent;
  cursor:pointer;
  position:relative;
}

.task-check:checked{
  background:var(--accent);
}

.task-check:checked::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#081018;
  font-size:12px;
  font-weight:800;
}

.task-main{
  flex:1;
  min-width:0;
}

.task-title{
  font-size:15px;
  font-weight:600;
  color:#fff;
  line-height:1.35;
  word-break:break-word;
}

.task-card.completed .task-title{
  text-decoration:line-through;
  color:#cfd5de;
}

.task-meta{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
}

.task-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.task-star{
  width:34px;
  height:34px;
  border:none;
  background:transparent;
  color:var(--text-3);
  border-radius:12px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.18s ease;
}

.task-star:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.task-star.active{
  color:var(--accent);
}

.empty-state{
  padding:18px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:16px;
  color:var(--text-3);
  text-align:center;
  background:rgba(255,255,255,.02);
}

.detail-empty{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  color:var(--text-3);
  gap:10px;
  padding:24px;
}

.detail-empty-icon{
  width:72px;
  height:72px;
  border-radius:22px;
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  font-size:28px;
  color:var(--accent);
}

.detail-empty-title{
  font-size:18px;
  font-weight:800;
  color:#fff;
}

.detail-content{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.detail-header,
.detail-section,
.detail-footer{
  background:linear-gradient(180deg,#23211f 0%, #1d1c1a 100%);
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
  padding:14px;
}

.detail-title-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.detail-check{
  padding-top:5px;
}

.detail-check input{
  display:none;
}

.detail-check span{
  width:22px;
  height:22px;
  display:block;
  border-radius:50%;
  border:1.6px solid var(--accent);
  position:relative;
  cursor:pointer;
}

.detail-check input:checked + span{
  background:var(--accent);
}

.detail-check input:checked + span::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#081018;
  font-size:12px;
  font-weight:800;
}

.detail-title-input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  color:#fff;
  font-size:18px;
  font-weight:700;
  outline:none;
  line-height:1.3;
}

.detail-star-btn.active{
  color:var(--accent);
}

.detail-flags{
  margin-top:12px;
}

.action-row-btn{
  width:100%;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:var(--text-2);
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  cursor:pointer;
  transition:.18s ease;
}

.action-row-btn:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.action-row-btn.active{
  color:#fff;
  background:var(--accent-soft);
  border:1px solid rgba(119,184,255,.24);
}

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.field-box{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field-box-wide{
  grid-column:1 / -1;
}

.field-box label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-3);
  font-weight:800;
}

.field-box .form-control,
.field-box .form-select{
  background:var(--bg-3);
  border-color:var(--line);
  color:#fff;
}

.field-box .form-control:focus,
.field-box .form-select:focus{
  background:var(--bg-3);
  color:#fff;
  border-color:var(--accent);
  box-shadow:none;
}

.section-title{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-3);
  font-weight:800;
  margin-bottom:10px;
}

.detail-textarea{
  width:100%;
  min-height:130px;
  resize:vertical;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:14px;
  color:#fff;
  padding:12px 14px;
  outline:none;
}

.detail-textarea:focus{
  border-color:var(--accent);
}

.step-add-form{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.step-add-form .form-control{
  background:var(--bg-3);
  border-color:var(--line);
  color:#fff;
}

.step-add-form .form-control:focus{
  background:var(--bg-3);
  color:#fff;
  border-color:var(--accent);
  box-shadow:none;
}

.step-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.step-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  padding:10px 12px;
}

.step-checkbox{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid var(--accent);
  background:transparent;
  cursor:pointer;
  position:relative;
  flex:0 0 auto;
}

.step-checkbox:checked{
  background:var(--accent);
}

.step-checkbox:checked::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#081018;
  font-size:10px;
  font-weight:800;
}

.step-title{
  flex:1;
  min-width:0;
  font-size:14px;
  color:#fff;
  word-break:break-word;
}

.step-item.done .step-title{
  text-decoration:line-through;
  color:var(--text-3);
}

.step-delete{
  width:28px;
  height:28px;
  border:none;
  background:transparent;
  color:var(--text-3);
  border-radius:10px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.step-delete:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.file-toolbar{
  margin-bottom:10px;
}

.attachment-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.attachment-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  padding:10px 12px;
}

.attachment-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.attachment-left i{
  color:var(--accent);
  font-size:16px;
}

.attachment-copy{
  min-width:0;
}

.attachment-name{
  color:#fff;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}

.attachment-meta{
  color:var(--text-3);
  font-size:12px;
}

.attachment-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.attachment-actions a,
.attachment-actions button{
  width:30px;
  height:30px;
  border:none;
  background:transparent;
  color:var(--text-3);
  border-radius:10px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.attachment-actions a:hover,
.attachment-actions button:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.detail-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.detail-meta{
  color:var(--text-3);
  font-size:12px;
}

.toast-stack{
  position:fixed;
  top:18px;
  right:18px;
  z-index:3000;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.toast-note{
  min-width:260px;
  max-width:360px;
  border-radius:14px;
  padding:12px 14px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.08);
}

.toast-note.info{background:#1d2430}
.toast-note.success{background:#113021}
.toast-note.warning{background:#3b2c10}
.toast-note.danger{background:#351717}

.d-none{display:none !important}

@media (max-width: 1500px){
  .todo-shell{
    grid-template-columns: 300px minmax(0,1fr) 380px;
  }
}

@media (max-width: 1280px){
  .todo-shell{
    grid-template-columns: 280px minmax(0,1fr);
  }

  .todo-detail{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:390px;
    z-index:1200;
    box-shadow:-12px 0 30px rgba(0,0,0,.35);
  }
}

@media (max-width: 960px){
  body{
    overflow:auto;
  }

  .todo-shell{
    display:block;
  }

  .todo-sidebar,
  .todo-main,
  .todo-detail{
    min-height:auto;
    overflow:visible;
  }

  .todo-detail{
    position:static;
    width:auto;
    box-shadow:none;
  }

  .main-header{
    flex-direction:column;
  }

  .field-grid{
    grid-template-columns:1fr;
  }

  .quick-add-top{
    flex-wrap:wrap;
  }

  .detail-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}

.todo-shell{
  height:100vh;
  overflow:hidden;
}

.todo-sidebar,
.todo-main,
.todo-detail{
  min-height:0;
}

.todo-detail{
  padding:0;
  overflow:hidden;
}

.detail-scroll{
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px 16px 40px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#3d4550 transparent;
}

.detail-scroll::-webkit-scrollbar{
  width:10px;
}

.detail-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.detail-scroll::-webkit-scrollbar-thumb{
  background:#333b45;
  border-radius:999px;
}

.detail-content{
  padding-bottom:90px;
}

.compact-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.action-field-row{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  padding:12px 14px;
}

.action-field-head{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-2);
  font-weight:600;
  margin-bottom:10px;
}

.action-field-head i{
  color:var(--text-3);
  font-size:16px;
}

.date-inline-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}

.date-inline-wrap .form-control{
  flex:1;
}

.date-picker-btn{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  background:var(--bg-3);
  color:#fff;
  border-radius:12px;
  display:grid;
  place-items:center;
  cursor:pointer;
  flex:0 0 auto;
}

.date-picker-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.tags-help{
  margin-top:8px;
  color:var(--text-3);
  font-size:11px;
}

.created-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:12px;
  font-weight:700;
  margin-bottom:8px;
}

input[type="date"],
input[type="datetime-local"]{
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.95;
  cursor:pointer;
}

@media (max-width: 1280px){
  .todo-detail{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:390px;
    z-index:1200;
    box-shadow:-12px 0 30px rgba(0,0,0,.35);
  }

  .detail-scroll{
    height:100vh;
  }
}

@media (max-width: 960px){
  .todo-detail{
    position:static;
    width:auto;
    box-shadow:none;
    overflow:visible;
  }

  .detail-scroll{
    height:auto;
    overflow:visible;
    padding:18px 16px 28px;
  }
}

.todo-shell{
  display:grid;
  grid-template-columns:330px minmax(0,1fr) 0px;
  height:100vh;
  overflow:hidden;
  transition:grid-template-columns .22s ease;
}

.todo-shell.detail-open{
  grid-template-columns:330px minmax(0,1fr) 420px;
}

.todo-sidebar,
.todo-main,
.todo-detail{
  min-height:0;
}

.todo-detail{
  width:0;
  min-width:0;
  padding:0;
  overflow:hidden;
  opacity:0;
  transform:translateX(18px);
  pointer-events:none;
  border-left:none;
  transition:opacity .18s ease, transform .22s ease;
}

.todo-shell.detail-open .todo-detail{
  width:auto;
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  border-left:1px solid var(--line-soft);
}

.detail-scroll{
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px 16px 40px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#3d4550 transparent;
}

.detail-scroll::-webkit-scrollbar{
  width:10px;
}

.detail-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.detail-scroll::-webkit-scrollbar-thumb{
  background:#333b45;
  border-radius:999px;
}

.detail-pane-bar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:10px;
}

.detail-close-btn{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.detail-close-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.detail-content{
  padding-bottom:90px;
}

@media (max-width: 1280px){
  .todo-shell{
    grid-template-columns:280px minmax(0,1fr);
  }

  .todo-detail{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:390px;
    z-index:1200;
    box-shadow:-12px 0 30px rgba(0,0,0,.35);
    transform:translateX(100%);
    opacity:1;
    pointer-events:none;
    border-left:1px solid var(--line-soft);
  }

  .todo-shell.detail-open .todo-detail{
    transform:translateX(0);
    pointer-events:auto;
  }

  .detail-scroll{
    height:100vh;
  }
}

@media (max-width: 960px){
  .todo-shell{
    display:block;
    height:auto;
  }

  .todo-detail{
    position:fixed;
    width:min(92vw, 390px);
  }
}

#todoShell{
  display:grid !important;
  grid-template-columns:330px minmax(0,1fr) 0 !important;
  height:100vh;
  overflow:hidden;
  transition:grid-template-columns .22s ease;
}

#todoShell.detail-open{
  grid-template-columns:330px minmax(0,1fr) 420px !important;
}

#todoShell.detail-closed{
  grid-template-columns:330px minmax(0,1fr) 0 !important;
}

#todoDetailPane{
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  border-left:none !important;
  transform:translateX(24px);
  transition:all .22s ease;
  padding:0 !important;
}

#todoShell.detail-open #todoDetailPane{
  width:420px !important;
  min-width:420px !important;
  max-width:420px !important;
  opacity:1 !important;
  pointer-events:auto !important;
  border-left:1px solid var(--line-soft, #2f3339) !important;
  transform:translateX(0);
}

#todoShell.detail-closed #todoDetailPane{
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  border-left:none !important;
  transform:translateX(24px);
}

#todoDetailPane .detail-scroll{
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px 16px 40px;
}

.detail-pane-bar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:10px;
}

.detail-close-btn{
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
}

.detail-close-btn:hover{
  border-color:var(--accent, #77b8ff) !important;
  color:var(--accent, #77b8ff) !important;
}

.sidebar-topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.home-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#7bb8ff;
  text-decoration:none;
  font-weight:700;
}

.home-link:hover{
  color:#9acbff;
  text-decoration:none;
}

@media (max-width: 1280px){
  #todoShell{
    grid-template-columns:280px minmax(0,1fr) !important;
  }

  #todoDetailPane{
    position:fixed !important;
    top:0;
    right:0;
    bottom:0;
    width:390px !important;
    min-width:390px !important;
    max-width:390px !important;
    z-index:1200;
    box-shadow:-12px 0 30px rgba(0,0,0,.35);
    transform:translateX(100%);
    opacity:1 !important;
    pointer-events:none !important;
    border-left:1px solid var(--line-soft, #2f3339) !important;
  }

  #todoShell.detail-open #todoDetailPane{
    transform:translateX(0);
    pointer-events:auto !important;
  }

  #todoShell.detail-closed #todoDetailPane{
    transform:translateX(100%);
    pointer-events:none !important;
  }
}