/* ============================================================
   Kanban Timeline App — app.css
   Style: red-webapp-ui (full-bleed, hero gradient, tab badge số,
   panel bo góc lớn, nút pill). Toàn bộ hệ màu suy từ MỘT biến
   --acc (màu nhấn), đổi được ngay trong app.
   Mọi selector đều prefix #ktl-app để không rò style ra theme.
   ============================================================ */

#ktl-app {
  /* ---- màu nhấn: JS ghi đè bằng inline style ---- */
  --acc: #3aa935;
  --acc-deep:   color-mix(in srgb, var(--acc) 78%, #05070d);
  --acc-bright: color-mix(in srgb, var(--acc) 74%, var(--mix-hi));

  --tint-05: color-mix(in srgb, var(--acc)  5%, var(--mix));
  --tint-08: color-mix(in srgb, var(--acc)  8%, var(--mix));
  --tint-14: color-mix(in srgb, var(--acc) 14%, var(--mix));
  --tint-22: color-mix(in srgb, var(--acc) 22%, var(--mix));
  --tint-ink: color-mix(in srgb, var(--acc-deep) 76%, #333a48);

  /* ---- THEME SÁNG (mặc định của biến, dùng khi .ktl-light) ---- */
  --mix:     #ffffff;   /* nền để trộn ra các sắc độ nhạt của màu nhấn */
  --mix-hi:  #ffffff;
  --acc-ink: var(--acc-deep);   /* màu chữ nhấn trên nền app */

  --bg:      #f6f8fb;
  --surface: #ffffff;
  --surface-hi: #fcfdff;
  --surface-done: #fbfdfc;
  --soft:    #f2f5f9;
  --line:    #e3e8ef;
  --line-2:  #eef2f7;
  --ink:     #16202f;
  --muted:   #6b7889;
  --muted-2: #93a0b1;
  --opt-ink: #16202f;
  --weekend: #f7f9fc;

  --scroll:    #cfd8e3;
  --scroll-hi: #b6c2d1;
  --tip-bg:  #10192a;
  --tip-ink: #ffffff;
  --scrim: color-mix(in srgb, var(--acc-deep) 46%, rgba(6,10,18,.6));

  --ok:      #12805c;
  --ok-soft: #e6f6f0;
  --warn:    #b45309;
  --warn-soft:#fdf3e3;
  --warn-ink: #8a4a06;
  --danger:  #c2334d;
  --danger-soft:#fdecef;
  --danger-ink: #96253a;
  --toast-ok: #0f6b4f;
  --toast-err:#9b2440;

  --sh-sm: 0 2px 6px color-mix(in srgb, var(--acc-deep) 12%, transparent);
  --sh-md: 0 10px 26px color-mix(in srgb, var(--acc-deep) 14%, transparent);
  --sh-lg: 0 26px 64px color-mix(in srgb, var(--acc-deep) 22%, transparent);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* ============================================================
   THEME TỐI (mặc định của app) — chỉ ghi đè các biến,
   không sửa một selector thành phần nào.
   ============================================================ */
#ktl-app.ktl-dark {
  --mix:     #131a25;   /* trộn màu nhấn với nền tối, không phải trắng */
  --mix-hi:  #cfeecb;
  --acc-deep:   color-mix(in srgb, var(--acc) 82%, #04070c);
  --acc-bright: color-mix(in srgb, var(--acc) 62%, #eafbe8);
  --acc-ink:    color-mix(in srgb, var(--acc) 55%, #eafbe8);
  --tint-ink:   color-mix(in srgb, var(--acc) 48%, #dfe9f5);

  --bg:      #0c1119;
  --surface: #161e2a;
  --surface-hi: #1b2431;
  --surface-done: #141d22;
  --soft:    #111823;
  --line:    #2a3547;
  --line-2:  #202a39;
  --ink:     #e8eef7;
  --muted:   #93a3b8;
  --muted-2: #6d7d92;
  --opt-ink: #e8eef7;
  --weekend: #101724;

  --scroll:    #33415a;
  --scroll-hi: #445069;
  --tip-bg:  #f2f6fc;
  --tip-ink: #0d1420;
  --scrim: rgba(4,7,12,.74);

  --ok:      #34d399;
  --ok-soft: #10291f;
  --warn:    #f0b429;
  --warn-soft:#2a1f0c;
  --warn-ink: #f7cd6b;
  --danger:  #f2707f;
  --danger-soft:#2c141b;
  --danger-ink: #ffa5b0;
  --toast-ok: #0f6b4f;
  --toast-err:#9b2440;

  --sh-sm: 0 2px 6px rgba(0,0,0,.36);
  --sh-md: 0 10px 26px rgba(0,0,0,.46);
  --sh-lg: 0 26px 64px rgba(0,0,0,.62);

  color-scheme: dark;
}

/* Thanh ứng dụng ở nền tối: hạ độ chói của dải xanh cho đỡ gắt mắt */
#ktl-app.ktl-dark .ktl-appbar {
  background: linear-gradient(105deg,
      color-mix(in srgb, var(--acc) 44%, #070c14) 0%,
      color-mix(in srgb, var(--acc) 62%, #0a1119) 58%,
      color-mix(in srgb, var(--acc) 74%, #0d1620) 150%);
  box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.42);
}
#ktl-app.ktl-dark .ktl-vtab.is-active,
#ktl-app.ktl-dark .ktl-newbtn { background: #eaf6e9; }
#ktl-app.ktl-dark .ktl-appbar .ktl-search:focus {
  background: #0b1119; color: var(--ink); border-color: color-mix(in srgb, var(--acc) 60%, #0b1119);
}

/* ---------- chế độ full-bleed đè theme ---------- */
#ktl-app.ktl-mode-fullscreen {
  position: fixed; inset: 0; z-index: 2147483000;
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
html.ktl-locked, body.ktl-locked { overflow: hidden !important; }

/* ---------- chế độ inline ---------- */
#ktl-app.ktl-mode-inline {
  position: relative;
  height: var(--ktl-inline-h, 82vh);
  overflow: auto;
  background: var(--bg);
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
#ktl-app.ktl-mode-inline.ktl-forced-full {
  position: fixed; inset: 0; height: auto; border-radius: 0; border: 0; z-index: 2147483000;
}

#ktl-app .ktl-shell {
  width: 100%; min-height: 100%;
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column;
}

#ktl-app * { box-sizing: border-box; }
#ktl-app button { font: inherit; cursor: pointer; }
#ktl-app input, #ktl-app select, #ktl-app textarea { font: inherit; color: inherit; }
#ktl-app ::-webkit-scrollbar { width: 10px; height: 10px; }
#ktl-app ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
#ktl-app ::-webkit-scrollbar-thumb:hover { background: var(--scroll-hi); background-clip: padding-box; }
#ktl-app ::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   BỐ CỤC: app là một cột dọc, vùng bảng chiếm hết chỗ còn lại
   ============================================================ */
#ktl-app.ktl-mode-fullscreen,
#ktl-app.ktl-mode-inline.ktl-forced-full {
  display: flex; flex-direction: column; overflow: hidden;
}
#ktl-app.ktl-mode-fullscreen .ktl-shell,
#ktl-app.ktl-mode-inline.ktl-forced-full .ktl-shell { flex: 1 1 auto; min-height: 0; }
#ktl-app.ktl-mode-inline .ktl-shell { min-height: var(--ktl-inline-h, 82vh); }

/* ============================================================
   THANH ỨNG DỤNG — một dòng duy nhất, cao 56px
   ============================================================ */
#ktl-app .ktl-appbar {
  flex: 0 0 auto; position: relative; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; min-height: 56px;
  color: #fff;
  background: linear-gradient(105deg, var(--acc-deep) 0%, var(--acc) 58%, var(--acc-bright) 150%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--acc-deep) 30%, transparent),
              0 6px 18px color-mix(in srgb, var(--acc-deep) 16%, transparent);
}

#ktl-app .ktl-logo {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.36);
  position: relative; padding: 0;
  transition: background .16s ease;
}
#ktl-app .ktl-logo:hover { background: rgba(255,255,255,.32); }
#ktl-app .ktl-logo-mark { position: absolute; inset: 0; }
#ktl-app .ktl-logo-mark::before,
#ktl-app .ktl-logo-mark::after {
  content: ""; position: absolute; top: 8px; width: 5px; border-radius: 3px; background: #fff;
}
#ktl-app .ktl-logo-mark::before { left: 10px; height: 16px; }
#ktl-app .ktl-logo-mark::after { left: 18px; height: 10px; opacity: .74; }

/* ---- ô chọn bảng ---- */
#ktl-app .ktl-boardbox { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; }
#ktl-app .ktl-boardsel {
  min-height: 36px; max-width: 230px; min-width: 96px;
  padding: 0 30px 0 12px; border-radius: 10px;
  background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 13.5px; font-weight: 750; letter-spacing: -.01em; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  text-overflow: ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-repeat: no-repeat;
}
#ktl-app .ktl-boardsel:hover { background-color: rgba(255,255,255,.27); }
#ktl-app .ktl-boardsel option { color: var(--opt-ink); }
#ktl-app .ktl-iconbtn {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; padding: 0;
  background: transparent; border: 0; color: rgba(255,255,255,.86);
  font-size: 16px; font-weight: 800; line-height: 1;
}
#ktl-app .ktl-iconbtn:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ---- chuyển chế độ xem ---- */
#ktl-app .ktl-viewseg {
  display: flex; gap: 3px; padding: 3px; border-radius: 99px; flex: 0 0 auto;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
}
#ktl-app .ktl-vtab {
  min-height: 30px; padding: 0 15px; border: 0; border-radius: 99px;
  background: transparent; color: rgba(255,255,255,.86);
  font-size: 13px; font-weight: 720; white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
#ktl-app .ktl-vtab:hover { background: rgba(255,255,255,.16); color: #fff; }
#ktl-app .ktl-vtab.is-active { background: #fff; color: var(--acc-deep); font-weight: 800; }

/* ---- tìm kiếm ---- */
#ktl-app .ktl-search-wrap { position: relative; flex: 1 1 160px; min-width: 0; max-width: 320px; }
#ktl-app .ktl-search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.7); font-size: 15px; pointer-events: none;
}
#ktl-app .ktl-search {
  width: 100%; min-height: 36px; max-height: 36px; padding: 0 12px 0 32px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.15); color: #fff; outline: none; min-width: 0;
  font-size: 13px; -webkit-appearance: none; appearance: none;
}
#ktl-app .ktl-search::placeholder { color: rgba(255,255,255,.72); }
#ktl-app .ktl-search:focus {
  background: var(--surface); color: var(--ink); border-color: var(--surface);
}
#ktl-app .ktl-search:focus::placeholder { color: var(--muted-2); }
#ktl-app .ktl-search:focus + .ktl-search-ico,
#ktl-app .ktl-search-wrap:focus-within .ktl-search-ico { color: var(--muted); }

/* ---- cụm bên phải ---- */
#ktl-app .ktl-appbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
#ktl-app .ktl-newbtn {
  min-height: 36px; padding: 0 15px; border-radius: 99px;
  background: #fff; color: var(--acc-deep); border: 0;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease;
}
#ktl-app .ktl-newbtn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(6,32,10,.24); }
#ktl-app .ktl-acct {
  width: 34px; height: 34px; border-radius: 99px; padding: 0;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.36);
  color: #fff; font-size: 11.5px; font-weight: 850; letter-spacing: .02em;
}
#ktl-app .ktl-acct:hover { background: rgba(255,255,255,.34); }

/* ---- chip trạng thái lưu ---- */
#ktl-app .ktl-savechip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 30px; padding: 0 12px; border-radius: 99px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.94); font-size: 11.5px; font-weight: 750;
}
#ktl-app .ktl-savechip:hover { background: rgba(255,255,255,.28); }
#ktl-app .ktl-savechip::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; flex: 0 0 auto; background: #fff; opacity: .8;
}
#ktl-app .ktl-savechip.is-ok::before { background: #9ff5c8; opacity: 1; }
#ktl-app .ktl-savechip.is-wait::before { background: #ffd88a; opacity: 1; }
#ktl-app .ktl-savechip.is-err::before { background: #ffb3c0; opacity: 1; }
#ktl-app .ktl-savechip.is-saving::before { background: #fff; animation: ktl-pulse 1s ease-in-out infinite; }
@keyframes ktl-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* ============================================================
   THANH LỌC — mỏng, cuộn ngang khi chật
   ============================================================ */
#ktl-app .ktl-toolbar {
  flex: 0 0 auto; position: relative; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; min-height: 46px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
#ktl-app .ktl-toolbar::-webkit-scrollbar { height: 0; }
#ktl-app .ktl-filters { display: flex; gap: 7px; align-items: center; flex: 0 0 auto; }
#ktl-app .ktl-toolbar-right {
  display: flex; gap: 7px; align-items: center; margin-left: auto; flex: 0 0 auto; padding-left: 8px;
}
#ktl-app .ktl-fbtn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 12.5px; font-weight: 680; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease;
}
#ktl-app .ktl-fbtn:hover { background: var(--tint-05); border-color: var(--tint-22); }
#ktl-app .ktl-fbtn.is-on { background: var(--acc-deep); border-color: var(--acc-deep); color: #fff; }
#ktl-app .ktl-fbtn .ktl-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--tint-14); color: var(--acc-ink); font-size: 10.5px; font-weight: 800;
}
#ktl-app .ktl-fbtn.is-on .ktl-count { background: rgba(255,255,255,.24); color: #fff; }
#ktl-app .ktl-tbstats {
  display: flex; gap: 9px; align-items: center; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
}
#ktl-app .ktl-tbstats b { color: var(--ink); font-weight: 850; }
#ktl-app .ktl-tbstats .is-late { color: var(--danger); }
#ktl-app .ktl-tbsep { width: 1px; height: 20px; background: var(--line); flex: 0 0 auto; }

#ktl-app .ktl-seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px;
  background: var(--soft); border: 1px solid var(--line); flex: 0 0 auto;
}
#ktl-app .ktl-seg button {
  min-height: 26px; padding: 0 11px; border: 0; border-radius: 99px;
  background: transparent; color: var(--muted); font-size: 12px; font-weight: 720;
}
#ktl-app .ktl-seg button.is-on { background: var(--surface); color: var(--acc-deep); box-shadow: var(--sh-sm); }

/* ============================================================
   PANEL
   ============================================================ */
#ktl-app .ktl-main {
  flex: 1 1 auto; min-height: 0; padding: 14px 16px 16px;
  display: flex; flex-direction: column;
}
#ktl-app .ktl-panel { display: none; flex: 1 1 auto; min-height: 0; }
#ktl-app .ktl-panel.is-active { display: flex; flex-direction: column; animation: ktl-in .22s ease both; }
#ktl-app .ktl-panel[data-panel="data"].is-active { overflow: auto; }
/* Timeline: cho bảng Gantt kéo dài hết chiều cao còn lại, không để trống mảng lớn */
#ktl-app .ktl-panel[data-panel="timeline"].is-active { display: block; overflow: auto; }
#ktl-app .ktl-timeline-wrap { min-height: 100%; display: flex; flex-direction: column; }
#ktl-app .ktl-timeline-wrap > .ktl-tl { flex: 1 1 auto; display: flex; flex-direction: column; }
#ktl-app .ktl-timeline-wrap > .ktl-tl > .ktl-tl-grid { flex: 1 1 auto; }
@keyframes ktl-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ============================================================
   NÚT & FORM DÙNG CHUNG
   ============================================================ */
#ktl-app .ktl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 99px; border: 1px solid transparent;
  font-size: 14px; font-weight: 730; letter-spacing: -.01em;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
#ktl-app .ktl-btn-primary {
  background: var(--acc-deep); color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--acc-deep) 30%, transparent);
}
#ktl-app .ktl-btn-primary:hover { background: color-mix(in srgb, var(--acc-deep) 88%, #000); transform: translateY(-1px); }
#ktl-app .ktl-btn-ghost { background: var(--surface); border-color: var(--tint-22); color: var(--acc-ink); }
#ktl-app .ktl-btn-ghost:hover { background: var(--tint-05); }
#ktl-app .ktl-btn-soft { background: var(--soft); border-color: var(--line); color: var(--ink); }
#ktl-app .ktl-btn-soft:hover { background: var(--tint-05); border-color: var(--tint-22); }
#ktl-app .ktl-btn-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, var(--mix)); }
#ktl-app .ktl-btn-danger:hover { background: var(--danger); color: #fff; }
#ktl-app .ktl-btn-sm { min-height: 40px; padding: 0 15px; font-size: 13px; }
#ktl-app .ktl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

#ktl-app .ktl-field { display: block; }
#ktl-app .ktl-label {
  display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 720; color: var(--tint-ink);
}
#ktl-app .ktl-input, #ktl-app .ktl-select {
  width: 100%; min-height: 48px; max-height: 48px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--soft);
  outline: none; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none;
}
#ktl-app textarea.ktl-input {
  min-height: 108px; max-height: none; padding: 12px 14px; resize: vertical; line-height: 1.6;
}
#ktl-app .ktl-select {
  padding-right: 40px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--acc-deep) 50%),
    linear-gradient(135deg, var(--acc-deep) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-repeat: no-repeat;
}
#ktl-app .ktl-input:focus, #ktl-app .ktl-select:focus {
  border-color: var(--acc); background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 15%, transparent);
}
#ktl-app input[type="date"].ktl-input { box-sizing: border-box; min-width: 0; max-width: 100%; }
#ktl-app .ktl-note {
  padding: 11px 14px; border-radius: 13px; font-size: 12px; line-height: 1.55;
  background: var(--tint-05); border: 1px solid var(--tint-14); color: var(--tint-ink);
}
#ktl-app .ktl-note-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 24%, var(--mix)); color: var(--warn-ink); }
#ktl-app .ktl-note-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, var(--mix)); color: var(--danger-ink); }

/* ============================================================
   KANBAN
   ============================================================ */
#ktl-app .ktl-board-scroll {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch; gap: 13px;
  overflow-x: auto; overflow-y: hidden; padding: 2px 2px 10px;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
}
#ktl-app .ktl-list {
  flex: 0 0 296px; width: 296px; height: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--sh-sm); overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
#ktl-app .ktl-list.is-drop { border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 15%, transparent); }
#ktl-app .ktl-list.is-collapsed { flex-basis: 62px; width: 62px; }
#ktl-app .ktl-list.is-collapsed .ktl-list-body,
#ktl-app .ktl-list.is-collapsed .ktl-list-foot { display: none; }
#ktl-app .ktl-list.is-collapsed .ktl-list-head {
  writing-mode: vertical-rl; height: 100%; justify-content: flex-start; padding: 16px 0;
}

#ktl-app .ktl-list-head {
  display: flex; align-items: center; gap: 9px; padding: 13px 14px 11px;
  border-bottom: 1px solid var(--line-2); background: var(--surface);
}
#ktl-app .ktl-list-dot { width: 10px; height: 10px; border-radius: 99px; flex: 0 0 auto; }
#ktl-app .ktl-list-name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 780; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; background: transparent; padding: 2px 4px; border-radius: 7px;
}
#ktl-app .ktl-list-name:focus { outline: none; background: var(--tint-05); }
#ktl-app .ktl-list-count {
  flex: 0 0 auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--muted); font-size: 11.5px; font-weight: 800;
}
#ktl-app .ktl-list-count.is-over { background: var(--danger-soft); color: var(--danger); }
#ktl-app .ktl-list-menu {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; border: 0;
  background: transparent; color: var(--muted-2); font-size: 16px; font-weight: 800;
}
#ktl-app .ktl-list-menu:hover { background: var(--soft); color: var(--ink); }

#ktl-app .ktl-list-body {
  flex: 1 1 auto; min-height: 46px; padding: 10px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px;
  overscroll-behavior: contain; background: linear-gradient(180deg, var(--surface-hi), var(--surface));
}
#ktl-app .ktl-list-foot { padding: 8px 10px 11px; border-top: 1px solid var(--line-2); }
#ktl-app .ktl-add-card {
  width: 100%; min-height: 40px; border-radius: 12px; border: 1px dashed var(--tint-22);
  background: var(--tint-05); color: var(--acc-ink); font-size: 13px; font-weight: 700;
  transition: background .16s ease;
}
#ktl-app .ktl-add-card:hover { background: var(--tint-14); }

/* ---- thẻ công việc ---- */
#ktl-app .ktl-card {
  position: relative; padding: 11px 12px 10px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.05);
  cursor: grab; touch-action: manipulation; user-select: none;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
  /* Bảng nhiều thẻ (hàng trăm tới hàng nghìn): bỏ qua việc bố trí & vẽ những
     thẻ đang nằm ngoài tầm nhìn. Trình duyệt cũ không hiểu thì bỏ qua dòng này,
     app vẫn chạy như cũ. */
  content-visibility: auto;
  contain-intrinsic-size: auto 128px;   /* thẻ nay có thêm mô tả + việc con */
}
/* Thẻ đang kéo phải được bố trí đầy đủ để đo đúng vị trí */
#ktl-app .ktl-card.is-dragging, #ktl-app .ktl-card.is-ghost,
#ktl-app .ktl-card-drag { content-visibility: visible; }
#ktl-app .ktl-card::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--card-color, var(--acc));
}
#ktl-app .ktl-card:hover { box-shadow: var(--sh-md); transform: translateY(-1px); border-color: var(--tint-22); }

/* ---- nút "Xoá" nhanh ở góc thẻ ---- */
#ktl-app .ktl-card-del {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  min-height: 22px; padding: 0 9px; border-radius: 99px;
  border: 1px solid var(--danger-soft); background: var(--danger-soft); color: var(--danger);
  font-size: 11px; font-weight: 800; letter-spacing: .01em; line-height: 1;
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}
#ktl-app .ktl-card:hover .ktl-card-del,
#ktl-app .ktl-card-del:focus-visible { opacity: 1; pointer-events: auto; }
#ktl-app .ktl-card-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
/* Thẻ đã xong thì nút rõ hơn một chút — đây là chỗ hay dọn dẹp nhất */
#ktl-app .ktl-card.is-done:hover .ktl-card-del { background: var(--danger); color: #fff; border-color: var(--danger); }
/* Chừa chỗ cho nút, tránh đè lên nhãn hoặc tên việc */
#ktl-app .ktl-card:hover .ktl-card-labels,
#ktl-app .ktl-card:hover .ktl-card-title { padding-right: 46px; }
/* Màn hình cảm ứng không có "rê chuột" -> luôn hiện */
@media (hover: none) {
  #ktl-app .ktl-card-del { opacity: 1; pointer-events: auto; }
  #ktl-app .ktl-card-labels, #ktl-app .ktl-card-title { padding-right: 46px; }
}
#ktl-app .ktl-card.is-ghost { opacity: .35; }
#ktl-app .ktl-card.is-done { background: var(--surface-done); }
#ktl-app .ktl-card.is-done .ktl-card-title { text-decoration: line-through; color: var(--muted); }

#ktl-app .ktl-card-drag {
  position: fixed; z-index: 2147483020; pointer-events: none;
  width: 278px; box-shadow: var(--sh-lg); transform: rotate(2.4deg) scale(1.02);
  cursor: grabbing; opacity: .97;
}
#ktl-app .ktl-drop-mark {
  height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--acc) 40%, var(--mix));
  border: 1px dashed var(--acc); margin: -2px 0;
}

#ktl-app .ktl-card-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
#ktl-app .ktl-lb {
  height: 18px; padding: 0 8px; border-radius: 99px; display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 780; letter-spacing: .01em; color: #fff; white-space: nowrap;
}
#ktl-app .ktl-card-title { font-size: 13.5px; font-weight: 650; line-height: 1.45; word-break: break-word; }
/* ---- mô tả rút gọn trên thẻ: đúng 2 dòng ---- */
#ktl-app .ktl-card-desc {
  margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
#ktl-app .ktl-card.is-done .ktl-card-desc { opacity: .7; }

/* ---- việc con hiện ngay trên thẻ ---- */
#ktl-app .ktl-card-cl { margin-top: 8px; display: grid; gap: 3px; }
#ktl-app .ktl-card-cli {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink);
}
#ktl-app .ktl-card-clbox {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; border-radius: 4px;
  border: 1.4px solid var(--muted-2); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #fff; line-height: 1;
}
#ktl-app .ktl-card-cli.is-done .ktl-card-clbox { background: var(--ok); border-color: var(--ok); }
#ktl-app .ktl-card-cltx { min-width: 0; overflow-wrap: anywhere; }
#ktl-app .ktl-card-cli.is-done .ktl-card-cltx { color: var(--muted); text-decoration: line-through; }
#ktl-app .ktl-card-more {
  justify-self: start; margin-top: 2px; padding: 2px 8px 2px 0;
  border: 0; background: transparent; color: var(--acc-ink);
  font-size: 12px; font-weight: 750; text-align: left;
}
#ktl-app .ktl-card-more:hover { text-decoration: underline; text-underline-offset: 2px; }

#ktl-app .ktl-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 11px; color: var(--muted);
}
#ktl-app .ktl-pillmeta {
  display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 8px; border-radius: 99px; background: var(--soft); font-weight: 680;
}
#ktl-app .ktl-pillmeta.is-late { background: var(--danger-soft); color: var(--danger); }
#ktl-app .ktl-pillmeta.is-soon { background: var(--warn-soft); color: var(--warn); }
#ktl-app .ktl-pillmeta.is-done { background: var(--ok-soft); color: var(--ok); }
#ktl-app .ktl-prio { font-weight: 800; letter-spacing: .04em; }
#ktl-app .ktl-prio-high { background: var(--danger-soft); color: var(--danger); }
#ktl-app .ktl-prio-med  { background: var(--warn-soft);  color: var(--warn); }
#ktl-app .ktl-prio-low  { background: var(--tint-08);    color: var(--tint-ink); }

#ktl-app .ktl-avs { display: inline-flex; margin-left: auto; }
#ktl-app .ktl-av {
  width: 22px; height: 22px; border-radius: 99px; margin-left: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: #fff; border: 2px solid var(--surface);
}
#ktl-app .ktl-av:first-child { margin-left: 0; }

#ktl-app .ktl-prog { margin-top: 9px; height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
#ktl-app .ktl-prog i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--acc), var(--acc-bright)); transition: width .22s ease;
}
#ktl-app .ktl-prog.is-full i { background: linear-gradient(90deg, var(--ok), #35b48a); }

#ktl-app .ktl-list-add {
  flex: 0 0 232px; width: 232px; align-self: flex-start; min-height: 58px; border-radius: 20px;
  border: 1px dashed var(--tint-22); background: color-mix(in srgb, var(--acc) 4%, var(--mix));
  color: var(--acc-ink); font-size: 13.5px; font-weight: 720;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .16s ease;
}
#ktl-app .ktl-list-add:hover { background: var(--tint-14); }

#ktl-app .ktl-empty {
  padding: 18px 12px; text-align: center; color: var(--muted-2); font-size: 12.5px;
  border: 1px dashed var(--line); border-radius: 13px;
}

/* ============================================================
   TIMELINE
   ============================================================ */
#ktl-app .ktl-tl {
  background: var(--surface); border: 1px solid var(--line); border-radius: 26px;
  box-shadow: var(--sh-sm); overflow: hidden;
  /* chừa một dải trắng ở đáy để thanh cuộn ngang không bị góc bo cắt mất */
  padding-bottom: 8px;
}
#ktl-app .ktl-tl-right { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
#ktl-app .ktl-tl-right::-webkit-scrollbar { height: 10px; }
#ktl-app .ktl-tl-right::-webkit-scrollbar-track { background: transparent; margin: 0 10px; }
#ktl-app .ktl-tl-right::-webkit-scrollbar-thumb {
  background: var(--scroll); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}
#ktl-app .ktl-tl-grid {
  display: grid; grid-template-columns: var(--tl-left, 268px) 1fr; align-items: stretch;
}
#ktl-app .ktl-tl-left { border-right: 1px solid var(--line); background: var(--surface); min-width: 0; }
#ktl-app .ktl-tl-right { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; min-width: 0; }

#ktl-app .ktl-tl-headrow {
  height: 62px; display: flex; align-items: center; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: var(--tint-05);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tint-ink);
}
#ktl-app .ktl-tl-scale { position: relative; height: 62px; border-bottom: 1px solid var(--line); background: var(--tint-05); }
#ktl-app .ktl-tl-scale-top, #ktl-app .ktl-tl-scale-bot { position: relative; height: 31px; }
#ktl-app .ktl-tl-scale-bot { border-top: 1px solid color-mix(in srgb, var(--acc) 14%, var(--mix)); }
#ktl-app .ktl-sc {
  position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 720; color: var(--tint-ink);
  border-left: 1px solid color-mix(in srgb, var(--acc) 14%, var(--mix)); white-space: nowrap; overflow: hidden;
}
#ktl-app .ktl-sc.is-weekend { color: var(--danger); }
#ktl-app .ktl-sc-top { font-weight: 800; letter-spacing: .04em; }

#ktl-app .ktl-tl-rows { position: relative; }
#ktl-app .ktl-tl-canvas { position: relative; }
#ktl-app .ktl-tl-bg { position: absolute; inset: 0; pointer-events: none; }
#ktl-app .ktl-tl-col { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
#ktl-app .ktl-tl-col.is-weekend { background: var(--weekend); }
#ktl-app .ktl-tl-today {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); opacity: .75; z-index: 4;
}
#ktl-app .ktl-tl-today::before {
  content: "Hôm nay"; position: absolute; top: 2px; left: 5px;
  font-size: 10px; font-weight: 800; color: var(--danger); white-space: nowrap;
}

#ktl-app .ktl-tl-grouprow, #ktl-app .ktl-tl-groupband {
  height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: var(--soft); border-bottom: 1px solid var(--line-2);
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--tint-ink);
}
#ktl-app .ktl-tl-groupband { padding: 0; }

#ktl-app .ktl-tl-namerow {
  height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  border-bottom: 1px solid var(--line-2); cursor: pointer; min-width: 0;
}
#ktl-app .ktl-tl-namerow:hover { background: var(--tint-05); }
#ktl-app .ktl-tl-namerow .ktl-tl-nm {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 640;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ktl-app .ktl-tl-namerow.is-done .ktl-tl-nm { text-decoration: line-through; color: var(--muted); }
#ktl-app .ktl-tl-row {
  content-visibility: auto; contain-intrinsic-size: auto 44px; height: 44px; border-bottom: 1px solid var(--line-2); position: relative; }
#ktl-app .ktl-tl-row:hover { background: color-mix(in srgb, var(--acc) 3%, transparent); }

#ktl-app .ktl-bar {
  position: absolute; top: 9px; height: 26px; border-radius: 8px;
  background: var(--bar, var(--acc)); color: #fff; z-index: 5;
  display: flex; align-items: center; padding: 0 9px; gap: 6px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden;
  cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 2px 6px rgba(16,24,40,.18);
  transition: box-shadow .16s ease, filter .16s ease;
}
#ktl-app .ktl-bar:hover { filter: brightness(1.06); box-shadow: var(--sh-md); }
#ktl-app .ktl-bar.is-dragging { cursor: grabbing; box-shadow: var(--sh-lg); z-index: 9; }
#ktl-app .ktl-bar.is-late { outline: 2px solid var(--danger); outline-offset: 1px; }
#ktl-app .ktl-bar.is-done { opacity: .62; }
#ktl-app .ktl-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px 0 0 8px;
  background: rgba(255,255,255,.3); pointer-events: none;
}
#ktl-app .ktl-bar-txt { position: relative; z-index: 2; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
/* ngày bắt đầu / kết thúc in ở hai đầu thanh */
#ktl-app .ktl-bar.has-dates { padding: 0 7px; gap: 7px; justify-content: space-between; }
#ktl-app .ktl-bar-d {
  position: relative; z-index: 2; flex: 0 0 auto;
  font-size: 10.5px; font-weight: 800; letter-spacing: .01em;
  color: rgba(255,255,255,.94); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.32); pointer-events: none;
}
#ktl-app .ktl-bar-d.is-s { order: 0; }
#ktl-app .ktl-bar-txt   { order: 1; text-align: center; }
#ktl-app .ktl-bar-d.is-e { order: 2; }
#ktl-app .ktl-bar.is-done .ktl-bar-d { text-decoration: line-through; opacity: .85; }
#ktl-app .ktl-bar-h {
  position: absolute; top: 0; bottom: 0; width: 9px; z-index: 3;
  cursor: ew-resize; touch-action: none;
}
#ktl-app .ktl-bar-h.l { left: 0; border-radius: 8px 0 0 8px; }
#ktl-app .ktl-bar-h.r { right: 0; border-radius: 0 8px 8px 0; }
#ktl-app .ktl-bar-h::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 2px; height: 12px; border-radius: 2px; background: rgba(255,255,255,.72); opacity: 0;
  transition: opacity .16s ease;
}
#ktl-app .ktl-bar:hover .ktl-bar-h::after { opacity: 1; }
#ktl-app .ktl-milestone {
  position: absolute; top: 11px; width: 22px; height: 22px; z-index: 6;
  background: var(--bar, var(--acc)); transform: rotate(45deg); border-radius: 4px;
  cursor: grab; touch-action: none; box-shadow: 0 2px 6px rgba(16,24,40,.2);
}
#ktl-app .ktl-tl-deps { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: visible; }
#ktl-app .ktl-tl-deps path { fill: none; stroke: var(--muted-2); stroke-width: 1.6; }
#ktl-app .ktl-tl-deps path.is-bad { stroke: var(--danger); stroke-dasharray: 4 3; }
#ktl-app .ktl-tl-deps polygon { fill: var(--muted-2); }
#ktl-app .ktl-tl-deps polygon.is-bad { fill: var(--danger); }

#ktl-app .ktl-tl-tip {
  position: fixed; z-index: 2147483030; pointer-events: none;
  background: var(--tip-bg); color: var(--tip-ink); padding: 8px 11px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.5; box-shadow: var(--sh-lg); max-width: 260px;
}

/* ============================================================
   MODAL
   ============================================================ */
#ktl-app .ktl-modal-root { position: fixed; inset: 0; z-index: 2147483040; }
/* Mỗi hộp thoại là một LỚP riêng, có màn che riêng -> xếp chồng được */
#ktl-app .ktl-modal-layer {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(8px); animation: ktl-fade .18s ease both;
}
#ktl-app .ktl-modal-layer + .ktl-modal-layer { background: rgba(4,7,12,.5); }
#ktl-app .ktl-modal-root[hidden] { display: none !important; }
#ktl-app .ktl-toast-root:empty { display: none; }
@keyframes ktl-fade { from { opacity: 0 } to { opacity: 1 } }
#ktl-app .ktl-modal {
  width: min(760px, 100%); max-height: min(88vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: 27px; box-shadow: var(--sh-lg);
  animation: ktl-pop .2s ease both; position: relative;
}
#ktl-app .ktl-modal-sm { width: min(480px, 100%); }
@keyframes ktl-pop { from { opacity: 0; transform: scale(.975) translateY(8px) } to { opacity: 1; transform: none } }
#ktl-app .ktl-modal-head {
  flex: 0 0 auto; z-index: 3; padding: 22px 26px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line-2); display: flex; align-items: flex-start; gap: 12px;
  border-radius: 27px 27px 0 0;
}
#ktl-app .ktl-modal-title {
  flex: 1 1 auto; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.03em;
  border: 0; background: transparent; padding: 4px 6px; border-radius: 9px; width: 100%;
}
#ktl-app .ktl-modal-title:focus { outline: none; background: var(--tint-05); }
#ktl-app .ktl-close {
  flex: 0 0 auto; width: 35px; height: 35px; border-radius: 99px; border: 0;
  background: var(--soft); color: var(--muted); font-size: 17px; font-weight: 700;
}
#ktl-app .ktl-close:hover { background: var(--danger-soft); color: var(--danger); }
#ktl-app .ktl-modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 26px 24px; display: grid; gap: 17px;
  scrollbar-width: thin; scrollbar-color: var(--scroll) transparent;
}
#ktl-app .ktl-modal-foot {
  flex: 0 0 auto; padding: 14px 26px 18px; background: var(--surface);
  border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  border-radius: 0 0 27px 27px;
}
#ktl-app .ktl-modal-foot .ktl-spacer { margin-left: auto; }
#ktl-app .ktl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#ktl-app .ktl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#ktl-app .ktl-full { grid-column: 1 / -1; }

#ktl-app input[type="range"] { accent-color: var(--acc); }
#ktl-app input[type="date"], #ktl-app input[type="color"] { color-scheme: inherit; }

#ktl-app .ktl-sec-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acc-ink); margin-bottom: 9px;
}
#ktl-app .ktl-chipbox { display: flex; flex-wrap: wrap; gap: 7px; }
#ktl-app .ktl-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 33px; padding: 0 12px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; font-weight: 680; color: var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
}
#ktl-app .ktl-chip:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
#ktl-app .ktl-chip.is-on { color: #fff; border-color: transparent; }
#ktl-app .ktl-chip-dot { width: 10px; height: 10px; border-radius: 99px; }

#ktl-app .ktl-cl { display: grid; gap: 7px; }
#ktl-app .ktl-cl-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 12px; background: var(--soft); border: 1px solid var(--line-2);
}
#ktl-app .ktl-cl-item.is-done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 18%, var(--mix)); }
#ktl-app .ktl-cl-item.is-done .ktl-cl-txt { text-decoration: line-through; color: var(--muted); }
#ktl-app .ktl-cl-txt { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: 13px; padding: 2px 4px; border-radius: 7px; }
#ktl-app .ktl-cl-txt:focus { outline: none; background: var(--surface); }
#ktl-app .ktl-cb {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px; border: 1.6px solid var(--muted-2);
  background: var(--surface); display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; font-weight: 900;
}
#ktl-app .ktl-cb.is-on { background: var(--ok); border-color: var(--ok); }
#ktl-app .ktl-x {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 99px; border: 0;
  background: transparent; color: var(--muted-2); font-size: 14px; font-weight: 800;
}
#ktl-app .ktl-x:hover { background: var(--danger-soft); color: var(--danger); }

/* ---- khung XEM mô tả: hiện liên kết bấm được, bấm vào là sửa ---- */
#ktl-app .ktl-rich {
  min-height: 96px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 14px; line-height: 1.65; cursor: text;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  transition: border-color .16s ease, background .16s ease;
}
#ktl-app .ktl-rich:hover { border-color: var(--tint-22); background: var(--tint-05); }
#ktl-app .ktl-rich:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
#ktl-app .ktl-rich-empty { color: var(--muted-2); }

/* ---- liên kết trong mô tả & bình luận ---- */
#ktl-app .ktl-rich a, #ktl-app .ktl-cmt a {
  color: var(--acc-ink); font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  overflow-wrap: anywhere; cursor: pointer;
}
#ktl-app .ktl-rich a:hover, #ktl-app .ktl-cmt a:hover {
  color: var(--acc); text-decoration-thickness: 2px;
}
/* dấu hiệu mở ở tab mới */
#ktl-app .ktl-rich a::after, #ktl-app .ktl-cmt a::after {
  content: "↗"; font-size: .82em; margin-left: 2px; opacity: .7; text-decoration: none;
}
#ktl-app .ktl-rich a[href^="mailto:"]::after,
#ktl-app .ktl-cmt a[href^="mailto:"]::after { content: "✉"; }

/* ============================================================
   THẺ RIÊNG CỦA VIỆC CON — soạn Markdown + ảnh
   ============================================================ */
#ktl-app .ktl-cl-more { flex: 0 0 auto; white-space: nowrap; font-size: 12px; }
#ktl-app .ktl-cl-badge {
  display: inline-block; margin-left: 3px; padding: 0 5px; border-radius: 99px;
  background: var(--tint-14); color: var(--acc-ink); font-size: 10.5px; font-weight: 800;
}
#ktl-app .ktl-note-slim { padding: 9px 12px; font-size: 12.5px; }

/* ---- thanh công cụ soạn thảo ---- */
#ktl-app .ktl-mdbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 7px 8px; margin-bottom: -1px;
  border: 1px solid var(--line); border-radius: 12px 12px 0 0;
  background: var(--soft);
}
#ktl-app .ktl-mdbtn {
  min-height: 28px; padding: 0 9px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
}
#ktl-app .ktl-mdbtn:hover { background: var(--surface); border-color: var(--line); }
#ktl-app .ktl-mdbtn.is-on { background: var(--acc-deep); border-color: var(--acc-deep); color: #fff; }
#ktl-app .ktl-mdbtn-h { font-weight: 850; color: var(--acc-ink); min-width: 30px; }
#ktl-app .ktl-mdbtn-img { color: var(--acc-ink); font-weight: 800; }
#ktl-app .ktl-mdsep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
#ktl-app .ktl-mdspacer { flex: 1 1 auto; }

/* Chế độ XEM TRƯỚC (mặc định khi mở thẻ việc con): ẩn bớt nút định dạng */
#ktl-app .ktl-mdbar.is-preview .ktl-mdbtn:not(.ktl-mdbtn-keep),
#ktl-app .ktl-mdbar.is-preview .ktl-mdsep { display: none; }
#ktl-app .ktl-mdbar.is-preview { border-radius: 12px 12px 0 0; }
#ktl-app .ktl-mdview { cursor: text; }
#ktl-app .ktl-mdview:hover { border-color: var(--tint-22); }
#ktl-app .ktl-mdview:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 1px; }
#ktl-app .ktl-mdview a, #ktl-app .ktl-mdview img { cursor: pointer; }

#ktl-app .ktl-mdedit {
  min-height: 190px; border-radius: 0 0 12px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6;
}
#ktl-app .ktl-mdview {
  min-height: 190px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 0 0 12px 12px;
  background: var(--surface); overflow-wrap: anywhere;
}

/* ---- Markdown đã dựng ---- */
#ktl-app .ktl-md-h { margin: 14px 0 6px; line-height: 1.3; font-weight: 850; color: var(--ink); }
#ktl-app .ktl-md-h:first-child { margin-top: 0; }
#ktl-app .ktl-md-h1 { font-size: 21px; letter-spacing: -.02em; }
#ktl-app .ktl-md-h2 { font-size: 18px; letter-spacing: -.015em; }
#ktl-app .ktl-md-h3 { font-size: 16px; }
#ktl-app .ktl-md-h4 { font-size: 14.5px; }
#ktl-app .ktl-md-h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
#ktl-app .ktl-mdview p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.65; }
#ktl-app .ktl-mdview ul, #ktl-app .ktl-mdview ol { margin: 0 0 9px; padding-left: 22px; font-size: 13.5px; line-height: 1.65; }
#ktl-app .ktl-mdview li { margin: 2px 0; }
#ktl-app .ktl-mdview blockquote {
  margin: 0 0 9px; padding: 6px 12px; border-left: 3px solid var(--tint-22);
  background: var(--tint-05); color: var(--muted); font-size: 13.5px;
}
#ktl-app .ktl-mdview code {
  background: var(--tint-08); padding: 1px 5px; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
}
#ktl-app .ktl-mdview hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
#ktl-app .ktl-mdview a { color: var(--acc-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
#ktl-app .ktl-md-table { border-collapse: collapse; margin: 0 0 10px; font-size: 13px; width: 100%; }
#ktl-app .ktl-md-table th, #ktl-app .ktl-md-table td {
  border: 1px solid var(--line); padding: 6px 9px; text-align: left;
}
#ktl-app .ktl-md-table th { background: var(--tint-08); font-weight: 800; }
/* CHIỀU RỘNG ẢNH TRONG GHI CHÚ — cố định để mọi ảnh bằng nhau, khỏi phải căn chỉnh.
   Muốn đổi thì sửa ĐÚNG MỘT SỐ này (--ktl-anh-rong). Màn hình hẹp thì tự co lại. */
#ktl-app { --ktl-anh-rong: 440px; --ktl-anh-cao: 560px; }
#ktl-app .ktl-md-img {
  width: var(--ktl-anh-rong); max-width: 100%;
  height: auto; max-height: var(--ktl-anh-cao); object-fit: contain;
  border-radius: 12px; border: 1px solid var(--line);
  display: block; margin: 10px 0;
  background: var(--soft);
}
#ktl-app .ktl-md-imgmiss {
  display: inline-block; padding: 3px 9px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn-ink); font-size: 12px; font-weight: 700;
}

/* ---- lưới ảnh đính kèm ---- */
#ktl-app .ktl-imggrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px;
}
#ktl-app .ktl-imggrid > .ktl-note { grid-column: 1 / -1; }
#ktl-app .ktl-imgcell {
  margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface); position: relative;
}
#ktl-app .ktl-imgcell img { width: 100%; height: 96px; object-fit: cover; display: block; cursor: zoom-in; }
#ktl-app .ktl-imgload {
  height: 96px; display: flex; align-items: center; justify-content: center;
  color: var(--muted-2); font-size: 12px; background: var(--soft);
}
#ktl-app .ktl-imgcell figcaption {
  padding: 5px 8px; font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ktl-app .ktl-imgact { display: flex; border-top: 1px solid var(--line); }
#ktl-app .ktl-imgact button {
  flex: 1 1 0; min-height: 26px; border: 0; background: transparent;
  color: var(--acc-ink); font-size: 11.5px; font-weight: 750;
}
#ktl-app .ktl-imgact button + button { border-left: 1px solid var(--line); color: var(--danger); }
#ktl-app .ktl-imgact button:hover { background: var(--tint-05); }
#ktl-app .ktl-imgfull { text-align: center; }
#ktl-app .ktl-imgfull img { max-width: 100%; max-height: 70vh; border-radius: 12px; }

#ktl-app .ktl-cmt { display: grid; gap: 9px; }
#ktl-app .ktl-cmt-item { padding: 10px 12px; border-radius: 13px; background: var(--soft); font-size: 12.5px; line-height: 1.55; }
#ktl-app .ktl-cmt-meta { font-size: 10.5px; font-weight: 750; color: var(--muted); margin-bottom: 3px; letter-spacing: .02em; }
#ktl-app .ktl-log { display: grid; gap: 4px; }
#ktl-app .ktl-log-item { font-size: 11.5px; color: var(--muted); padding: 5px 0; border-bottom: 1px dashed var(--line-2); }


/* ---- khung cuộn có viền: thanh cuộn nằm GỌN trong khung,
   không bao giờ chạm mép trên / mép dưới của hộp thoại ---- */
#ktl-app .ktl-scrollbox {
  max-height: var(--sb-h, 176px); overflow-y: auto; overscroll-behavior: contain;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--soft);
  scrollbar-width: thin; scrollbar-color: var(--scroll) transparent;
}
#ktl-app .ktl-scrollbox::-webkit-scrollbar { width: 9px; }
#ktl-app .ktl-scrollbox::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
#ktl-app .ktl-scrollbox::-webkit-scrollbar-thumb {
  background: var(--scroll); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}
#ktl-app .ktl-scrollbox::-webkit-scrollbar-thumb:hover { background: var(--scroll-hi); background-clip: padding-box; }
#ktl-app .ktl-scrollbox .ktl-cl-item { background: var(--surface); }
#ktl-app .ktl-scrollbox .ktl-empty { border-color: var(--line); background: var(--surface); }
#ktl-app .ktl-scrollbox-tall { --sb-h: 232px; }
#ktl-app .ktl-scrollbox-short { --sb-h: 148px; }

#ktl-app .ktl-modal-body::-webkit-scrollbar { width: 10px; }
#ktl-app .ktl-modal-body::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
#ktl-app .ktl-modal-body::-webkit-scrollbar-thumb {
  background: var(--scroll); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box;
}

/* hàng tiêu đề của một khu vực: chữ trái + nút phụ bên phải */
#ktl-app .ktl-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px;
}
#ktl-app .ktl-sec-head .ktl-sec-title { margin-bottom: 0; }
#ktl-app .ktl-linkbtn {
  border: 0; background: transparent; padding: 2px 6px; border-radius: 8px;
  color: var(--acc-ink); font-size: 12px; font-weight: 750; white-space: nowrap;
}
#ktl-app .ktl-linkbtn:hover { background: var(--tint-08); }
#ktl-app .ktl-sec-count { font-size: 11px; font-weight: 700; color: var(--muted); }


/* ============================================================
   TRẠNG THÁI LƯU & ĐỒNG BỘ DRIVE
   ============================================================ */
#ktl-app .ktl-savestate {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 650; color: var(--muted);
}
#ktl-app .ktl-savestate::before {
  content: ""; width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto;
  background: var(--muted-2);
}
#ktl-app .ktl-savestate.is-ok::before { background: var(--ok); }
#ktl-app .ktl-savestate.is-wait::before { background: var(--warn); }
#ktl-app .ktl-savestate.is-err::before { background: var(--danger); }
#ktl-app .ktl-savestate.is-saving::before { background: var(--acc); animation: ktl-pulse 1s ease-in-out infinite; }
#ktl-app .ktl-savestate.is-err { color: var(--danger); }
@keyframes ktl-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

#ktl-app .ktl-drive-box code {
  background: var(--tint-08); padding: 1px 6px; border-radius: 6px;
  font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#ktl-app a.ktl-btn { display: inline-flex; }


/* ---- hộp chọn nơi lưu dữ liệu (lần đầu mở app) ---- */
#ktl-app .ktl-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
#ktl-app .ktl-choice {
  display: grid; gap: 7px; text-align: left; padding: 20px 19px 17px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#ktl-app .ktl-choice:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--tint-22); }
#ktl-app .ktl-choice.is-primary { background: var(--tint-05); border-color: var(--tint-22); }
#ktl-app .ktl-choice-ico {
  width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--tint-14); color: var(--acc-ink); font-size: 19px; font-weight: 800;
}
#ktl-app .ktl-choice.is-primary .ktl-choice-ico { background: var(--acc); color: #fff; }
#ktl-app .ktl-choice-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
#ktl-app .ktl-choice-desc { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
#ktl-app .ktl-choice-desc b { color: var(--tint-ink); font-weight: 750; }
#ktl-app .ktl-choice-go {
  margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--acc-ink);
}

/* ---- danh sách file trong thư mục Drive ---- */
#ktl-app .ktl-filelist { display: grid; gap: 8px; }
#ktl-app .ktl-filerow {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--surface); text-align: left; transition: border-color .16s ease, transform .16s ease;
}
#ktl-app .ktl-filerow:hover { border-color: var(--acc); transform: translateY(-1px); }
#ktl-app .ktl-filerow.is-current { border-color: var(--acc); background: var(--tint-05); }
#ktl-app .ktl-filerow-ico {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--tint-14); color: var(--acc-ink); font-size: 13px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#ktl-app .ktl-filerow-main { min-width: 0; display: grid; gap: 2px; }
#ktl-app .ktl-filerow-name {
  font-size: 13.5px; font-weight: 730; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ktl-app .ktl-filerow-meta { font-size: 11px; color: var(--muted); }
#ktl-app .ktl-filerow-go { font-size: 12px; font-weight: 800; color: var(--acc-ink); white-space: nowrap; }

@media (max-width: 720px) {
  #ktl-app .ktl-choices { grid-template-columns: 1fr; }
}

/* ---- popover menu ---- */
#ktl-app .ktl-pop {
  position: fixed; z-index: 2147483050; min-width: 210px; padding: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-lg);
}
#ktl-app .ktl-pop button {
  display: flex; width: 100%; align-items: center; gap: 9px; text-align: left;
  min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; font-size: 13px; font-weight: 640; color: var(--ink);
}
#ktl-app .ktl-pop button:hover { background: var(--tint-05); }
#ktl-app .ktl-pop button.is-danger { color: var(--danger); }
#ktl-app .ktl-pop button.is-danger:hover { background: var(--danger-soft); }
#ktl-app .ktl-pop button.has-note { align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }
#ktl-app .ktl-pop button small {
  display: block; margin-top: 2px; font-size: 11px; font-weight: 600;
  color: var(--muted); line-height: 1.4; white-space: normal; max-width: 250px;
}

/* ---- hộp thoại Giới thiệu ---- */
#ktl-app .ktl-about { display: grid; gap: 13px; }
#ktl-app .ktl-about-row { display: flex; gap: 11px; align-items: flex-start; }
#ktl-app .ktl-about-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--tint-08); color: var(--acc-ink); font-size: 15px;
}
#ktl-app .ktl-about-row b { font-size: 13.5px; font-weight: 850; color: var(--ink); }
#ktl-app .ktl-about-row .ktl-sub { margin: 0; font-size: 12.5px; line-height: 1.55; }
#ktl-app .ktl-pop hr { border: 0; border-top: 1px solid var(--line-2); margin: 5px 4px; }

/* ---- toast ---- */
#ktl-app .ktl-toast-root {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 2147483060; display: grid; gap: 8px; justify-items: center; pointer-events: none;
  max-width: min(560px, calc(100vw - 28px));
}
#ktl-app .ktl-toast {
  padding: 11px 19px; border-radius: 99px; text-align: center; background: var(--tip-bg); color: var(--tip-ink);
  font-size: 13px; font-weight: 650; box-shadow: var(--sh-lg);
  animation: ktl-drop .22s ease both;
}
#ktl-app .ktl-toast.is-ok { background: var(--toast-ok); color: #fff; }
#ktl-app .ktl-toast.is-err { background: var(--toast-err); color: #fff; }
@keyframes ktl-drop { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ============================================================
   PANEL DỮ LIỆU
   ============================================================ */
#ktl-app .ktl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
#ktl-app .ktl-card-box {
  padding: 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px; box-shadow: var(--sh-sm);
}
#ktl-app .ktl-card-box h3 {
  margin: 0 0 5px; font-size: 19px; font-weight: 800; letter-spacing: -.03em;
}
#ktl-app .ktl-card-box p.ktl-sub { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
#ktl-app .ktl-drop {
  border: 1px dashed var(--tint-22); background: var(--tint-05); border-radius: 17px;
  padding: 24px 18px; text-align: center; transition: background .16s ease, border-color .16s ease;
}
#ktl-app .ktl-drop.is-over { border-color: var(--acc); background: var(--tint-14); }
#ktl-app .ktl-drop-title { font-size: 14px; font-weight: 750; color: var(--acc-ink); margin-bottom: 5px; }
#ktl-app .ktl-drop-sub { font-size: 12px; color: var(--muted); }
/* ---- chọn giao diện tối / sáng ---- */
#ktl-app .ktl-themepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#ktl-app .ktl-themebtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 13px; border-radius: 16px; text-align: left;
  border: 1.6px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 780;
  transition: border-color .16s ease, background .16s ease, transform .14s ease;
}
#ktl-app .ktl-themebtn:hover { border-color: var(--tint-22); transform: translateY(-1px); }
#ktl-app .ktl-themebtn.is-on { border-color: var(--acc); background: var(--tint-08); }
#ktl-app .ktl-themebtn small { font-size: 11.5px; font-weight: 650; color: var(--muted); }
#ktl-app .ktl-themesw {
  width: 100%; height: 34px; border-radius: 10px; margin-bottom: 5px;
  border: 1px solid var(--line); display: block; position: relative; overflow: hidden;
}
#ktl-app .ktl-themesw::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 9px; height: 5px; border-radius: 3px;
  background: var(--acc);
}
#ktl-app .ktl-themesw-dark  { background: #0c1119; border-color: #2a3547; }
#ktl-app .ktl-themesw-dark::before {
  content: ""; position: absolute; left: 8px; right: 30px; bottom: 8px; height: 5px;
  border-radius: 3px; background: #2a3547;
}
#ktl-app .ktl-themesw-light { background: #f6f8fb; border-color: #e3e8ef; }
#ktl-app .ktl-themesw-light::before {
  content: ""; position: absolute; left: 8px; right: 30px; bottom: 8px; height: 5px;
  border-radius: 3px; background: #dbe2ec;
}

#ktl-app .ktl-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
#ktl-app .ktl-sw {
  width: 38px; height: 38px; border-radius: 12px; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line); transition: transform .14s ease;
}
#ktl-app .ktl-sw:hover { transform: translateY(-2px); }
#ktl-app .ktl-sw.is-on { box-shadow: 0 0 0 3px var(--acc); }
#ktl-app .ktl-hr { height:1px; background: var(--line); border:0; margin: 18px 0 16px; }
#ktl-app .ktl-kv { display: grid; gap: 8px; }
#ktl-app .ktl-kv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px;
}
#ktl-app .ktl-kv-row b { font-weight: 780; }



/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  #ktl-app .ktl-search-wrap { max-width: 200px; }
  #ktl-app .ktl-savechip { display: none; }
}
@media (max-width: 900px) {
  #ktl-app .ktl-appbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  #ktl-app .ktl-viewseg { order: 3; flex: 1 1 100%; }
  #ktl-app .ktl-vtab { flex: 1 1 auto; }
  #ktl-app .ktl-search-wrap { order: 2; flex: 1 1 120px; max-width: none; }
  #ktl-app .ktl-newbtn span.ktl-hide-sm { display: none; }
  #ktl-app .ktl-boardsel { max-width: 150px; }
}
@media (max-width: 620px) {
  /* điện thoại: nén thanh trên cùng để bảng chiếm phần lớn màn hình */
  #ktl-app .ktl-appbar { padding: 6px 9px; gap: 6px; min-height: 0; }
  #ktl-app .ktl-logo { display: none; }
  #ktl-app .ktl-boardbox { flex: 1 1 auto; }
  #ktl-app .ktl-boardsel { min-height: 32px; max-width: none; width: 100%; font-size: 13px; }
  #ktl-app .ktl-iconbtn { width: 28px; height: 28px; }
  #ktl-app .ktl-search { min-height: 32px; max-height: 32px; }
  #ktl-app .ktl-viewseg { padding: 2px; }
  #ktl-app .ktl-vtab { min-height: 28px; font-size: 12.5px; padding: 0 10px; }
  #ktl-app .ktl-newbtn { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
  #ktl-app .ktl-acct { width: 32px; height: 32px; }
  #ktl-app .ktl-main { padding: 10px 10px 12px; }
  #ktl-app .ktl-toolbar { padding: 6px 10px; min-height: 42px; }
  #ktl-app .ktl-fbtn { min-height: 30px; font-size: 12px; }
  #ktl-app .ktl-list { flex-basis: 86vw; width: 86vw; }
  #ktl-app .ktl-tbstats { display: none; }
  #ktl-app .ktl-grid-2, #ktl-app .ktl-grid-3 { grid-template-columns: 1fr; }
  #ktl-app .ktl-modal { border-radius: 22px; max-height: 92vh; }
  #ktl-app .ktl-modal-head { border-radius: 22px 22px 0 0; padding: 18px 18px 14px; }
  #ktl-app .ktl-modal-foot { border-radius: 0 0 22px 22px; padding: 12px 18px 16px; }
  #ktl-app .ktl-modal-body { padding: 16px 18px 20px; }
  #ktl-app .ktl-modal-foot .ktl-btn { flex: 1 1 auto; }
  #ktl-app .ktl-scrollbox { --sb-h: 150px; }
  #ktl-app .ktl-choices { grid-template-columns: 1fr; }
  #ktl-app .ktl-card-drag { width: 74vw; }
  #ktl-app input[type="date"].ktl-input { -webkit-appearance: none; appearance: none; }
  #ktl-app .ktl-tl-grid { --tl-left: 140px; }
}
@media (max-width: 1040px) { #ktl-app .ktl-tl-grid { --tl-left: 208px; } }

@media (prefers-reduced-motion: reduce) {
  #ktl-app *, #ktl-app *::before, #ktl-app *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  #ktl-app .ktl-appbar, #ktl-app .ktl-toolbar,
  #ktl-app .ktl-list-foot { display: none !important; }
  #ktl-app.ktl-mode-fullscreen { position: static; overflow: visible; }
  #ktl-app .ktl-main, #ktl-app .ktl-panel { overflow: visible; }
}