:root{
  --bg:            var(--tg-theme-bg-color, #ffffff);
  --sec-bg:        var(--tg-theme-secondary-bg-color, #f2f3f5);
  --text:          var(--tg-theme-text-color, #12161c);
  --hint:          var(--tg-theme-hint-color, #8a8f98);
  --link:          var(--tg-theme-link-color, #2f7cf6);
  --btn:           var(--tg-theme-button-color, #2f7cf6);
  --btn-text:      var(--tg-theme-button-text-color, #ffffff);
  --border:        rgba(128,128,128,.22);
  --danger:        #d9483f;
  --ok:           #2e9a5a;
  --warn:         #c98a12;
  --radius: 12px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- шапка ---------- */
#topbar{
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding:calc(8px + env(safe-area-inset-top)) 12px 0;
  border-bottom:1px solid var(--border);
}
.quick{display:flex; gap:8px; margin-bottom:8px}
.quick input{
  flex:1; min-width:0; padding:11px 12px; font-size:16px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--sec-bg); color:var(--text);
}
.quick input:focus{outline:2px solid var(--btn); outline-offset:-1px}
.quick button{
  width:46px; flex:0 0 46px; font-size:24px; line-height:1;
  border:0; border-radius:var(--radius);
  background:var(--btn); color:var(--btn-text); cursor:pointer;
}
.quick button:active{opacity:.7}

#tabs{display:flex; gap:4px}
.tab{
  flex:1; padding:10px 4px; font-size:14px; cursor:pointer;
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--hint); font-weight:500;
}
.tab.active{color:var(--text); border-bottom-color:var(--btn)}

/* ---------- контент ---------- */
#main{padding:12px 12px 40px}
.center{text-align:center}
.muted{color:var(--hint)}
.section-title{
  font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--hint); margin:18px 0 8px;
}
.section-title:first-child{margin-top:4px}

.card{
  background:var(--sec-bg); border-radius:var(--radius);
  padding:11px 12px; margin-bottom:8px; cursor:pointer;
  border:1px solid transparent;
}
.card:active{border-color:var(--btn)}
.card .row{display:flex; align-items:baseline; gap:8px}
.card .title{flex:1; font-weight:500; word-break:break-word}
.card .meta{font-size:12px; color:var(--hint); margin-top:3px;
  display:flex; gap:8px; flex-wrap:wrap}
.card.done .title{text-decoration:line-through; opacity:.55}

.badge{
  font-size:11px; padding:2px 7px; border-radius:20px;
  background:rgba(128,128,128,.18); color:var(--hint); white-space:nowrap;
}
.badge.overdue{background:rgba(217,72,63,.16); color:var(--danger)}
.badge.soon{background:rgba(201,138,18,.16); color:var(--warn)}
.badge.done{background:rgba(46,154,90,.16); color:var(--ok)}

.empty{padding:28px 12px; text-align:center; color:var(--hint)}

/* ---------- карточка ---------- */
.detail h2{font-size:19px; margin:0 0 4px; word-break:break-word}
.detail .field{margin:14px 0}
.detail label{
  display:block; font-size:12px; color:var(--hint); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.03em;
}
.detail input[type=text], .detail textarea, .detail select,
.detail input[type=datetime-local]{
  width:100%; padding:10px; font-size:16px; color:var(--text);
  background:var(--sec-bg); border:1px solid var(--border);
  border-radius:10px; font-family:inherit;
}
.detail textarea{min-height:90px; resize:vertical}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.btnrow{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0}
button.action{
  padding:10px 14px; border:0; border-radius:10px; font-size:14px;
  background:var(--btn); color:var(--btn-text); cursor:pointer;
}
button.action.ghost{background:var(--sec-bg); color:var(--text)}
button.action.danger{background:rgba(217,72,63,.14); color:var(--danger)}
button.action:active{opacity:.75}

.list-line{
  padding:9px 0; border-bottom:1px solid var(--border);
  font-size:14px; word-break:break-word;
}
.list-line:last-child{border-bottom:0}
.list-line .when{font-size:12px; color:var(--hint); display:block; margin-top:2px}
.link-item{cursor:pointer; color:var(--link)}

.comment-box{display:flex; gap:8px; margin-top:10px}
.comment-box input{flex:1}

#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:rgba(20,20,20,.92); color:#fff; padding:10px 16px; border-radius:20px;
  font-size:14px; opacity:0; pointer-events:none; transition:.2s; z-index:100;
  max-width:88vw; text-align:center;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- папки ---------- */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  font-size:13px; margin-bottom:6px; color:var(--hint);
}
.crumb{cursor:pointer; color:var(--link); padding:3px 0}
.crumb:last-child{color:var(--text); cursor:default}
.crumb-sep{opacity:.5; padding:0 2px}
.card.folder-row .title{font-weight:500}
.card .ct{font-size:12px; color:var(--hint); flex:0 0 auto}