@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

:root {
  color-scheme: light;
  --tn-bg: #ffffff;
  --tn-bg-subtle: #f7f8f9;
  --tn-bg-muted: #fafbfc;
  --tn-surface: #ffffff;
  --tn-border: #ececec;
  --tn-border-subtle: #f2f3f4;
  --tn-border-faint: #f6f7f8;
  --tn-input-border: #e7e8ea;
  --tn-text: #16181d;
  --tn-text-primary: #2b3138;
  --tn-text-secondary: #3a4047;
  --tn-text-muted: #9aa0a6;
  --tn-text-faint: #7b818a;
  --tn-text-label: #878d93;
  --tn-text-section: #a4a9ae;
  --tn-text-placeholder: #b3b8bd;
  --tn-text-nav: #56606a;
  --tn-text-nav-count: #aeb3b8;
  --tn-accent: #2f6df0;
  --tn-accent-hover: #2a62d6;
  --tn-accent-bg: rgba(47,109,240,.1);
  --tn-accent-border: #bcd0fb;
  --tn-accent-soft: #d8e2fb;
  --tn-accent-soft-bg: #f3f6fd;
  --tn-accent-panel: #f6f9ff;
  --tn-row-hover: rgba(20,24,30,.03);
  --tn-row-unseen: rgba(47,109,240,.07);
  --tn-overlay: rgba(20,24,30,.4);
  --tn-shadow: rgba(20,24,30,.18);
  --tn-chip-bg: #f1f2f4;
  --tn-danger: #d4493b;
  --tn-danger-border: #f0d2cd;
  --tn-danger-bg: #fdf4f3;
  --tn-nav-icon-bg: #ebedf0;
  --tn-nav-icon-color: #8a9199;
  --tn-toggle-off: #dfe2e5;
  --tn-scrollbar: rgba(20,24,30,.12);
  --tn-selection: rgba(47,109,240,.16);
  --tn-attach-bg: #fafbfc;
  --tn-attach-border: #eceded;
  --tn-note-internal-bg: #fff8ed;
  --tn-note-internal-border: #f5e6c8;
  --tn-note-badge-bg: #fff3dc;
  --tn-note-badge-text: #b97e12;
  --tn-login-bg: #f7f8f9;
  --tn-logo-bg: #16181d;
  --tn-demo-bar-bg: #16181d;
  --tn-demo-bar-text: #e8eaed;
  --tn-demo-bar-muted: #9aa3ad;
}

html, body.demo-layout { display: flex; flex-direction: column; height: 100%; }

.demo-role-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 0 16px;
  background: var(--tn-demo-bar-bg);
  color: var(--tn-demo-bar-text);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex: none;
  font-size: 13px;
}
.demo-role-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  color: #f4c560;
}
.demo-role-label { color: var(--tn-demo-bar-muted); font-weight: 500; }
.demo-role-select {
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--tn-demo-bar-text);
  font-size: 12.5px;
  font-weight: 600;
  max-width: 280px;
}
.demo-role-hint {
  margin-left: auto;
  color: var(--tn-demo-bar-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dispatch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--tn-accent-border);
  background: var(--tn-surface);
  color: var(--tn-accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.dispatch-btn-primary {
  background: var(--tn-accent);
  color: #fff;
  border-color: var(--tn-accent);
}
.dispatch-choice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--tn-border);
  border-radius: 10px;
  background: var(--tn-surface);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--tn-text-primary);
  text-align: left;
}
.dispatch-choice-btn:hover { background: var(--tn-accent-soft-bg); border-color: var(--tn-accent-border); }

html[data-theme="dark"] {
  color-scheme: dark;
  --tn-bg: #0f1114;
  --tn-bg-subtle: #14171c;
  --tn-bg-muted: #181b21;
  --tn-surface: #1a1d23;
  --tn-border: #2a2f38;
  --tn-border-subtle: #252932;
  --tn-border-faint: #22262d;
  --tn-input-border: #343a45;
  --tn-text: #e8eaed;
  --tn-text-primary: #e8eaed;
  --tn-text-secondary: #c4c8ce;
  --tn-text-muted: #9aa3ad;
  --tn-text-faint: #8b939d;
  --tn-text-label: #8b939d;
  --tn-text-section: #7a828c;
  --tn-text-placeholder: #6e7681;
  --tn-text-nav: #b0b7c0;
  --tn-text-nav-count: #7a828c;
  --tn-accent: #5b8af7;
  --tn-accent-hover: #6b96f8;
  --tn-accent-bg: rgba(91,138,247,.16);
  --tn-accent-border: #3d5a9e;
  --tn-accent-soft: #2a3f6b;
  --tn-accent-soft-bg: #1e2a42;
  --tn-accent-panel: #1a2438;
  --tn-row-hover: rgba(255,255,255,.04);
  --tn-row-unseen: rgba(91,138,247,.14);
  --tn-overlay: rgba(0,0,0,.58);
  --tn-shadow: rgba(0,0,0,.45);
  --tn-chip-bg: #252932;
  --tn-danger: #e86457;
  --tn-danger-border: #5a3530;
  --tn-danger-bg: #2a1816;
  --tn-nav-icon-bg: #252932;
  --tn-nav-icon-color: #9aa3ad;
  --tn-toggle-off: #3a4048;
  --tn-scrollbar: rgba(255,255,255,.14);
  --tn-selection: rgba(91,138,247,.28);
  --tn-attach-bg: #181b21;
  --tn-attach-border: #2a2f38;
  --tn-note-internal-bg: #2a2318;
  --tn-note-internal-border: #4a3d24;
  --tn-note-badge-bg: #3a2e18;
  --tn-note-badge-text: #e0b04a;
  --tn-login-bg: #0f1114;
  --tn-logo-bg: #e8eaed;
}

body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--tn-text);
  background: var(--tn-bg);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--tn-selection); }
input, select, button, textarea { font-family: inherit; }
input:focus { outline: none; }
button { font-family: inherit; }

.flok-scroll::-webkit-scrollbar { width: 9px; }
.flok-scroll::-webkit-scrollbar-thumb {
  background: var(--tn-scrollbar);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

@keyframes flokPop {
  from { transform: translateY(-4px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.flok-toolbar {
  max-height: 0; opacity: 0;
  padding-top: 0 !important; padding-bottom: 0 !important;
  border-bottom-color: transparent !important;
  overflow: hidden;
  transition: max-height .18s ease, opacity .14s ease;
}
.flok-rte-wrap:focus-within .flok-toolbar {
  max-height: 46px; opacity: 1;
  padding-top: 6px !important; padding-bottom: 6px !important;
  border-bottom-color: var(--tn-border-subtle) !important;
}
.flok-srow-actions { opacity: 0; transition: opacity .12s ease; }
.flok-srow:hover .flok-srow-actions { opacity: 1; }

.fl { position: relative; }
.fl > label {
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  margin: 0; font-size: 13.5px; font-weight: 500; color: var(--tn-text-muted);
  pointer-events: none; background: var(--tn-surface); padding: 0 5px;
  transition: top .14s ease, transform .14s ease, color .14s ease;
}
.fl.flf > label, .fl > input:focus + label, .fl > input:not(:placeholder-shown) + label, .fl > select:focus + label {
  top: 0; transform: translateY(-50%) scale(.8); color: var(--tn-text-faint); font-weight: 600;
}
.fl > input:focus + label, .fl > select:focus + label, .fl.flf:focus-within > label { color: var(--tn-accent); }

.flok-rte:empty:before { content: attr(data-placeholder); color: var(--tn-text-placeholder); pointer-events: none; }
.flok-rte ul, .flok-rte ol { margin: 6px 0; padding-left: 22px; }
.flok-rte p { margin: 0 0 8px 0; }
.flok-rte p:last-child { margin-bottom: 0; }
.flok-rte img { max-width: 100%; height: auto; border-radius: 9px; margin: 8px 0; display: block; border: 1px solid var(--tn-attach-border); }
[contenteditable]:focus { outline: none; }

#app-root { display: flex; flex: 1; min-height: 0; width: 100%; overflow: hidden; }
.sidebar { width: 254px; flex: none; background: var(--tn-bg-subtle); border-right: 1px solid var(--tn-border); display: flex; flex-direction: column; padding: 14px 12px; min-height: 0; }
.sidebar-middle { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar-brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 2px; }
.sidebar-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--tn-logo-bg); color: var(--tn-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.sidebar-title { font-weight: 700; font-size: 15px; color: var(--tn-text); }
.nav-btn { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; text-align: left; background: transparent; color: var(--tn-text-secondary); width: 100%; }
.nav-btn:hover { background: var(--tn-row-hover); }
.nav-btn.active { background: var(--tn-accent-bg); color: var(--tn-accent); }
.nav-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tn-text-nav-count); }
.nav-section-label { padding: 18px 9px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tn-text-section); }
.sidebar-spacer { margin-top: auto; }
.nav-icon-circle {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--tn-nav-icon-bg); color: var(--tn-nav-icon-color);
  display: flex; align-items: center; justify-content: center;
}
.nav-btn.active .nav-icon-circle { background: var(--tn-accent-bg); color: var(--tn-accent); }
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; container-type: inline-size; container-name: main; }
.main-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 28px 0; }
.main-header h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.4px; color: var(--tn-text); }
.header-title-wrap { min-width: 0; flex: 1; }
.header-sub { font-size: 13px; color: var(--tn-text-muted); margin-top: 2px; }
.nav-badge-neutral { background: var(--tn-nav-badge-neutral, #25252f); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.case-layout-segment { flex: none; }
.case-layout-segment .theme-segment-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; padding: 0;
}
.case-layout-segment .theme-segment-btn-icon svg { display: block; }
.main-scroll { flex: 1; overflow-y: auto; padding: 0 28px 60px; }
.case-view-narrow { max-width: 724px; margin: 0 auto; width: 100%; }
.case-view-full { width: 100%; max-width: none; margin: 0; }

.btn-primary { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 10px; border: none; border-radius: 9px; background: var(--tn-accent); color: #fff; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.btn-primary:hover { background: var(--tn-accent-hover); }
.btn-primary:disabled { background: #bccbf2; cursor: default; }
.btn-secondary { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--tn-border); background: var(--tn-surface); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tn-text-nav); }
.btn-secondary:hover { border-color: var(--tn-input-border); }
.btn-secondary.active { background: var(--tn-accent-bg); border-color: var(--tn-accent-border); color: var(--tn-accent); }

.overlay-backdrop { position: fixed; inset: 0; z-index: 30; }
.popover { position: absolute; top: 38px; left: 0; background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: 13px; box-shadow: 0 16px 44px var(--tn-shadow); z-index: 31; animation: flokPop .12s ease; }
.popover-wide { width: 320px; max-width: 92vw; padding: 6px 4px; }
.popover-sort { width: 208px; padding: 6px; }

.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.task-row-desc { font-size: 13px; line-height: 1.45; color: #7b818a; margin-top: 1px; }
.task-row:hover { background: rgba(20,24,30,.03); }
.task-row.unseen { background: rgba(47,109,240,.07); }

.case-list-card {
  padding: 14px 4px;
  border-bottom: 1px solid var(--tn-border-subtle, #eceef2);
  cursor: pointer;
}
.case-list-card:hover { background: var(--tn-row-hover, rgba(20,24,30,.03)); }
.case-list-card.unseen { background: var(--tn-row-unseen, rgba(47,109,240,.07)); }
.case-list-card-head {
  display: grid;
  grid-template-columns: 4.75rem 8px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
}
.case-list-card-no-dot .case-list-card-head {
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
}
.case-list-card-ref {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tn-text-muted, #9aa0a6);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.case-list-card-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.case-list-card-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tn-text, #15181c);
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-list-card-title.done {
  color: var(--tn-text-placeholder, #b3b8bd);
  text-decoration: line-through;
}
.case-list-card-activity {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  line-height: 1;
}
.case-list-card-activity-count {
  font-size: 12px;
  font-weight: 600;
}
.case-list-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--tn-text-muted, #9aa0a6);
}
.case-list-card-sep {
  color: var(--tn-text-placeholder, #c2c7cc);
  user-select: none;
}
.case-list-card-due { font-weight: 500; }
.case-list-card-overdue { color: var(--tn-danger, #d4493b); font-weight: 600; }
.case-list-card-prio-soft { color: var(--tn-text-muted, #9aa0a6); font-weight: 500; }
.case-list-card-urgent {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.case-list-card-no-dot .case-list-card-actions {
  padding-left: calc(4.75rem + 10px);
}
.case-list-card-actions { margin-top: 8px; padding-left: calc(4.75rem + 18px); }
.case-list-card-takeover {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d8e2fb;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #2f6df0;
}

.drawer-overlay { position: absolute; inset: 0; background: #fff; z-index: 51; overflow-y: auto; animation: flokPop .16s ease; }
.drawer-content-wrap {
  max-width: 1060px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}
.drawer-header {
  position: sticky;
  top: 0;
  z-index: 6;
  border-bottom: 1px solid var(--tn-border-subtle, #f2f3f4);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
}
.drawer-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.drawer-ref {
  font-size: 19px;
  font-weight: 700;
  color: #9aa0a6;
  flex: none;
}
.drawer-title-input {
  flex: 1;
  min-width: 0;
  font-size: 19px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 9px;
  background: transparent;
  font-family: inherit;
  color: var(--tn-text, #1c1f24);
}
.drawer-body-wrap {
  padding-top: 26px;
  padding-bottom: 90px;
}
.drawer-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 42px; align-items: start;
}
@media (max-width: 640px) {
  .drawer-body { grid-template-columns: 1fr; gap: 28px; }
  .drawer-aside { position: static; max-width: none; }
}
.drawer-main { min-width: 0; overflow: hidden; }
.drawer-aside {
  position: sticky; top: 84px; display: flex; flex-direction: column;
  border: 1px solid var(--tn-border); border-radius: 14px; overflow: hidden; align-self: start; background: var(--tn-surface);
}
.drawer-field-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 36px;
}
.drawer-field-row-relative { position: relative; }
.drawer-field-label {
  font-size: 12px;
  color: #878d93;
  font-weight: 500;
}
.drawer-field-value {
  min-width: 0;
  font-size: 13px;
}
.drawer-field-value select,
.drawer-field-value input[type="date"] {
  width: 100%;
  height: 32px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.drawer-field-value select { font-weight: 600; }
.drawer-field-value button[data-action="status-menu"] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.drawer-main .flok-rte-wrap { width: 100%; max-width: 100%; }
.drawer-main .flok-rte { width: 100%; max-width: 100%; word-break: break-word; }
.modal-overlay { position: absolute; inset: 0; background: var(--tn-overlay); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 44px 24px; }
.modal-panel { background: var(--tn-surface); border-radius: 16px; box-shadow: 0 24px 60px var(--tn-shadow); overflow: hidden; animation: flokPop .16s ease; display: flex; flex-direction: column; max-height: 100%; color: var(--tn-text); }
.modal-create { width: 640px; max-width: 100%; }
.modal-service { width: 760px; max-width: 100%; }
.hidden { display: none !important; }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--tn-login-bg); }
.login-card { width: 100%; max-width: 400px; background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: 16px; padding: 36px 32px; box-shadow: 0 8px 32px var(--tn-shadow); }
.login-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }
.login-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--tn-logo-bg); color: var(--tn-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.login-title { font-weight: 700; font-size: 17px; color: var(--tn-text); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--tn-text); }
.login-sub { margin: 0 0 24px; font-size: 14px; color: var(--tn-text-muted); }
.login-error { background: var(--tn-danger-bg); border: 1px solid var(--tn-danger-border); color: var(--tn-danger); padding: 10px 12px; border-radius: 9px; font-size: 13px; margin-bottom: 16px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form .fl > input { width: 100%; height: 44px; padding: 0 11px; border: 1px solid var(--tn-input-border); border-radius: 10px; font-size: 13.5px; background: var(--tn-surface); color: var(--tn-text); }
.login-form .fl > input:focus { border-color: var(--tn-accent-border); box-shadow: 0 0 0 3px var(--tn-accent-bg); }
.btn-full { width: 100%; height: 42px; justify-content: center; font-size: 14px; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--tn-input-border); background: var(--tn-surface); cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--tn-text-secondary); }
.chip:hover { border-color: var(--tn-border); }
.chip.active { background: var(--tn-accent-bg); border-color: var(--tn-accent-border); color: var(--tn-accent); font-weight: 600; }

.section-header { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tn-text-section); }
.section-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #fff; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--tn-text-placeholder); }

.avatar { border-radius: 50%; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
.avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }
.avatar-md { width: 28px; height: 28px; font-size: 11px; }
.team-icon { width: 22px; height: 22px; flex: none; border-radius: 6px; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.team-overview {
  max-width: 980px;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.team-overview-block {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border-subtle);
  border-radius: 14px;
  overflow: hidden;
}
.team-overview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--tn-border-subtle);
}
.team-overview-trend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
}
.team-trend-caption {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tn-text-faint);
}
.team-trend {
  display: block;
  color: var(--tn-text-muted);
}
.team-trend-up { color: #d4493b; }
.team-trend-down { color: #1f9d63; }
.team-trend-flat { color: #9aa0a6; }
.team-table-col-trend,
.team-table-trend { text-align: center; }
.team-table-trend { padding: 10px 8px; }
.team-table-trend .team-trend { margin: 0 auto; }
.team-overview-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tn-text-primary);
}
.team-inbox-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 12px 24px;
  background: var(--tn-chip-bg, #fafbfc);
  border-bottom: 1px solid var(--tn-border-subtle);
}
.team-inbox-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tn-text-section);
  margin-right: 4px;
}
.team-inbox-stat {
  font-size: 13px;
  color: var(--tn-text-secondary);
}
.team-inbox-stat strong { font-weight: 700; }
.team-inbox-stat-muted strong { color: var(--tn-text-placeholder); font-weight: 600; }
.team-inbox-stat-alert strong { color: #d4493b; }
.team-inbox-stat-warn strong { color: #b97e12; }
.team-table-wrap { padding: 0 8px 8px; }
.team-table {
  width: 100%;
  border-collapse: collapse;
}
.team-table thead th {
  padding: 10px 16px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tn-text-faint);
  text-align: left;
  border-bottom: 1px solid var(--tn-border-subtle);
}
.team-table-col-stat,
.team-table-col-status,
.team-table-stat,
.team-table-status { text-align: center; }
.team-table-col-person { width: 34%; }
.team-table-col-status { width: 18%; }
.team-table-row { border-bottom: 1px solid var(--tn-border-subtle); }
.team-table-row:last-child { border-bottom: none; }
.team-table-row-concern { box-shadow: inset 3px 0 0 #d4493b; }
.team-table-row-warn { box-shadow: inset 3px 0 0 #b97e12; }
.team-table-row-ok { box-shadow: inset 3px 0 0 transparent; }
.team-table-person { padding: 14px 16px; }
.team-person-cell { display: flex; align-items: flex-start; gap: 12px; }
.team-person-avatar { width: 36px; height: 36px; font-size: 13px; flex: none; }
.team-person-text { min-width: 0; }
.team-person-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--tn-text-primary);
  line-height: 1.25;
}
.team-person-role {
  margin-top: 2px;
  font-size: 12px;
  color: var(--tn-text-muted);
}
.team-table-stat {
  padding: 14px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tn-text-primary);
}
.team-table-stat-muted { color: var(--tn-text-placeholder); font-weight: 600; }
.team-table-stat-alert { color: #d4493b; }
.team-table-stat-warn { color: #b97e12; }
.team-table-status { padding: 14px 16px; }
.team-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.team-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.team-status-concern .team-status-dot { background: #d4493b; }
.team-status-warn .team-status-dot { background: #b97e12; }
.team-status-ok .team-status-dot { background: #1f9d63; }
.team-table-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--tn-text-muted);
}
@media (max-width: 760px) {
  .team-overview-top { flex-direction: column; align-items: flex-start; }
  .team-overview-trend { align-items: flex-start; }
  .team-table-wrap { overflow-x: auto; }
  .team-table { min-width: 720px; }
}

.attach-tile { position: relative; border-radius: 9px; overflow: hidden; border: 1px solid var(--tn-attach-border); background: var(--tn-attach-bg); }
.attach-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-tile-sm { width: 92px; height: 68px; }
.attach-tile-lg { width: 120px; height: 90px; }
.attach-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(255,255,255,.9); cursor: pointer; color: #9aa0a6; display: flex; align-items: center; justify-content: center; }

.attach-list { display: flex; flex-direction: column; gap: 2px; }
.attach-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px; border-radius: 6px; position: relative;
}
.attach-row:hover { background: var(--tn-row-hover); }
.attach-row:hover .attach-remove { opacity: 1; }
.attach-row a {
  color: var(--tn-accent); font-size: 13.5px; font-weight: 500;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-row a:hover { text-decoration: underline; }
.attach-row .attach-remove {
  position: static; opacity: 0; width: 20px; height: 20px;
  background: transparent; border-radius: 5px; flex: none;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.attach-row .attach-remove:hover { background: var(--tn-chip-bg); color: var(--tn-text-nav); }
.attach-add-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 4px 0; border: none; background: none;
  color: var(--tn-accent); font-size: 13px; font-weight: 600; cursor: pointer;
}
.attach-add-link:hover { color: var(--tn-accent-hover); }

.flok-rte .attach-file-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.flok-rte .attach-file-row a,
.attach-file-row a {
  color: var(--tn-accent); font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.flok-rte .attach-file-row a:hover,
.attach-file-row a:hover { text-decoration: underline; }

.rte-attach-btn {
  width: 30px; height: 30px; border: none; background: transparent;
  border-radius: 7px; cursor: pointer; color: var(--tn-text-nav);
  display: inline-flex; align-items: center; justify-content: center;
}
.rte-attach-btn:hover { background: var(--tn-chip-bg); }

.contact-field-wrap { position: relative; flex: 1; min-width: 0; }
.drawer-contact-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.drawer-contact-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  background: transparent;
}
.drawer-contact-input:focus {
  border-color: var(--tn-input-border);
  background: var(--tn-surface);
}
.drawer-contact-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-info-btn {
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: #9aa0a6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.contact-info-btn:hover,
.contact-info-btn:focus-visible {
  color: var(--tn-accent);
  background: var(--tn-accent-bg);
}
.contact-card {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: 12px;
  box-shadow: 0 12px 34px var(--tn-shadow); z-index: 30; padding: 14px 16px;
  animation: flokPop .12s ease;
}
.contact-field-wrap.show-card .contact-card { display: block; }
.contact-card-header { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.contact-card-name { font-size: 14px; font-weight: 600; color: var(--tn-text-primary); }
.contact-card-role { font-size: 12.5px; color: var(--tn-text-muted); margin-top: 1px; }
.contact-card-org { font-size: 12.5px; color: var(--tn-text-faint); margin-bottom: 10px; }
.contact-card-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tn-text-secondary); padding: 3px 0; }
.contact-card-line a { color: var(--tn-accent); text-decoration: none; }
.contact-card-line a:hover { text-decoration: underline; }
.contact-card-badge {
  display: inline-flex; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--tn-text-muted); background: var(--tn-chip-bg);
  border-radius: 5px; padding: 2px 6px; margin-left: 6px;
}
.field-hint { font-size: 12px; color: var(--tn-danger); margin-top: 4px; padding-left: 84px; }

.quick-input-wrap { position: relative; margin: 16px 0 8px; }
.quick-input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--tn-input-border); border-radius: 11px; font-size: 14px; background: var(--tn-surface); color: var(--tn-text); }
.quick-input:focus { border-color: var(--tn-accent-border); box-shadow: 0 0 0 3px var(--tn-accent-bg); }
.autocomplete { position: absolute; top: 46px; left: 0; right: 0; background: var(--tn-surface); border: 1px solid var(--tn-border); border-radius: 11px; box-shadow: 0 12px 32px var(--tn-shadow); z-index: 20; padding: 4px; }
.ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--tn-text); }
.ac-item:hover { background: var(--tn-bg-subtle); }

.toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 2px; }
.toolbar-search {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 9px;
  border-radius: 9px; border: 1px solid var(--tn-border); background: var(--tn-surface); min-width: 150px; flex: 1; max-width: 260px;
}
.toolbar-search:hover { border-color: var(--tn-input-border); }
.toolbar-search:focus-within, .toolbar-search.active { border-color: var(--tn-accent-border); box-shadow: 0 0 0 3px var(--tn-accent-bg); }
.toolbar-search svg { flex: none; color: var(--tn-text-muted); }
.toolbar-search input {
  flex: 1; min-width: 0; border: none; background: transparent; font-size: 12.5px; font-weight: 500;
  color: var(--tn-text-primary); outline: none; font-family: inherit;
}
.toolbar-search input::-webkit-search-cancel-button { display: none; }
.toolbar-search-clear {
  width: 18px; height: 18px; border: none; background: transparent; border-radius: 5px; cursor: pointer;
  color: var(--tn-text-muted); display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
}
.toolbar-search-clear:hover { color: var(--tn-text-nav); background: var(--tn-chip-bg); }

.filter-quick-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.filter-quick-chip {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 36px; padding: 0 12px; border: 1px solid var(--tn-border); border-radius: 9px;
  background: var(--tn-surface); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tn-text-nav);
}
.filter-quick-chip:hover { border-color: var(--tn-input-border); background: var(--tn-bg-muted); }
.filter-quick-chip.active { border-color: var(--tn-accent-border); background: var(--tn-accent-soft-bg); color: var(--tn-accent); }
.filter-quick-chip.zero { opacity: .55; }
.filter-quick-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--tn-chip-bg); font-size: 11.5px; font-weight: 700; color: var(--tn-text-nav);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.filter-quick-chip.active .filter-quick-count { background: var(--tn-accent); color: #fff; }

.activity-note {
  font-size: 13.5px; line-height: 1.5; color: var(--tn-text-secondary); margin-top: 4px;
  border-radius: 9px; padding: 9px 12px; white-space: pre-wrap;
}
.activity-note-public { background: var(--tn-bg-subtle); }
.activity-note-internal { background: var(--tn-note-internal-bg); border: 1px solid var(--tn-note-internal-border); }
.activity-note-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: 6px; background: var(--tn-note-badge-bg); color: var(--tn-note-badge-text); font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
}
.note-composer {
  margin-top: 8px; border: 1px solid var(--tn-input-border); border-radius: 11px; background: var(--tn-surface); overflow: hidden;
}
.note-composer-input {
  display: block; width: 100%; min-height: 72px; padding: 12px 14px; border: none;
  font-size: 13.5px; line-height: 1.5; font-family: inherit; color: var(--tn-text-primary); resize: vertical;
  background: transparent;
}
.note-composer-input:focus { outline: none; }
.note-composer-footer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-top: 1px solid var(--tn-border-subtle); background: var(--tn-bg-muted);
}
.note-composer-check {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--tn-text-nav); cursor: pointer;
}
.note-composer-check input { width: 14px; height: 14px; accent-color: var(--tn-accent); cursor: pointer; }
.note-composer-hint {
  display: none; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tn-accent);
}
.note-composer-hint.visible { display: inline-flex; }
.note-composer-submit {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 12px; border: none; border-radius: 8px; background: var(--tn-accent); color: #fff;
  cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.note-composer-submit:hover { background: var(--tn-accent-hover); }

.drawer-history-trigger {
  flex: 1; min-width: 0; padding: 0; border: none; background: transparent; cursor: pointer;
  text-align: left; font-size: 13px; line-height: 1.45; color: var(--tn-text-primary); border-radius: 7px;
}
.drawer-history-trigger:hover .drawer-history-link { color: var(--tn-accent); }
.drawer-history-trigger:hover .drawer-history-value { color: var(--tn-text-primary); }
.drawer-history-link {
  display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--tn-text-muted);
}
.modal-history { width: min(760px, 100%); }
.case-history-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.case-history-table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tn-text-section); padding: 12px 10px 8px; border-bottom: 1px solid var(--tn-border-subtle);
}
.case-history-table td {
  padding: 11px 10px; border-bottom: 1px solid var(--tn-border-faint); color: var(--tn-text-secondary); vertical-align: top;
}
.case-history-table td:first-child { font-weight: 600; color: var(--tn-text-primary); white-space: nowrap; }
.case-history-table td:nth-child(3) { white-space: nowrap; color: var(--tn-text-faint); }
.case-history-table tbody tr:hover { background: var(--tn-bg-muted); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.settings-toggle { width: 40px; height: 24px; flex: none; border-radius: 24px; position: relative; border: none; cursor: pointer; padding: 0; }
.settings-toggle.on { background: var(--tn-accent); }
.settings-toggle.off { background: var(--tn-toggle-off); }
.settings-toggle span { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.settings-toggle.on span { right: 2px; }
.settings-toggle.off span { left: 2px; }

.settings-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 4px;
  border: none; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.settings-row:hover { background: var(--tn-row-hover); border-radius: 8px; }
.settings-theme-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  width: 100%; padding: 13px 4px; text-align: left;
}
.theme-segment {
  display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px;
  padding: 3px; border-radius: 10px; background: var(--tn-chip-bg); border: 1px solid var(--tn-border);
  flex: none; max-width: 100%;
}
.theme-segment-btn {
  height: 30px; padding: 0 11px; border: none; border-radius: 8px; background: transparent;
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--tn-text-nav); white-space: nowrap;
  font-family: inherit;
}
.theme-segment-btn:hover { color: var(--tn-text-primary); }
.theme-segment-btn.active {
  background: var(--tn-surface); color: var(--tn-accent);
  box-shadow: 0 1px 3px var(--tn-shadow);
}
.settings-row-desc { font-size: 12.5px; color: var(--tn-text-muted); }
.settings-row-title { font-size: 14px; font-weight: 500; color: var(--tn-text-primary); }
.settings-divider { border-bottom: 1px solid var(--tn-border-faint); }

.mine-calendar { margin-top: 4px; width: 100%; }
.mine-calendar-columns {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) repeat(7, minmax(0, 1fr));
  gap: 10px; align-items: stretch; width: 100%; padding-bottom: 4px;
}
.mine-calendar-col {
  display: flex; flex-direction: column;
  border: 1px solid var(--tn-border-subtle); border-radius: 12px; background: var(--tn-surface);
}
.mine-calendar-col-today { border-color: var(--tn-accent-border); background: var(--tn-accent-panel); }
.mine-calendar-col-header {
  padding: 10px 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tn-text-section); border-bottom: 1px solid var(--tn-border-subtle);
}
.mine-calendar-col-body { padding: 8px; }
.mine-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mine-card-drag-ghost {
  position: fixed; z-index: 200; pointer-events: none; max-width: 240px;
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--tn-accent-border);
  background: var(--tn-surface); box-shadow: 0 10px 28px var(--tn-shadow);
  font-size: 13px; font-weight: 600; color: var(--tn-text); line-height: 1.35;
}
.mine-calendar-card {
  display: flex; flex-direction: column; padding: 10px 10px 9px;
  margin-bottom: 8px; border-radius: 9px; border: 1px solid var(--tn-border-subtle);
  background: var(--tn-bg-muted); cursor: grab; touch-action: none;
}
.mine-calendar-card:hover { border-color: var(--tn-input-border); background: var(--tn-row-hover); }
.mine-calendar-card.dragging { opacity: .35; cursor: grabbing; }
body.is-case-dragging { cursor: grabbing; }
body.is-case-dragging .mine-kanban-card:not(.dragging),
body.is-case-dragging .mine-calendar-card:not(.dragging) {
  pointer-events: none;
}
.mine-calendar-col-body[data-drop-due].drag-over {
  background: var(--tn-accent-soft-bg); outline: 2px dashed var(--tn-accent-border);
  outline-offset: -2px; border-radius: 0 0 11px 11px;
}
.mine-calendar-overdue { font-size: 11px; font-weight: 700; color: var(--tn-danger); }
.mine-calendar-today { font-size: 11px; font-weight: 700; color: var(--tn-text-muted); }
.mine-calendar-nodue { font-size: 11px; font-weight: 700; color: var(--tn-text-muted); }
.mine-calendar-card-title { font-size: 13px; font-weight: 600; color: var(--tn-text); line-height: 1.35; }
.mine-calendar-card-title.done { color: var(--tn-text-placeholder); text-decoration: line-through; }
.mine-calendar-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mine-calendar-status, .mine-calendar-prio {
  font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 1px 6px;
}
.mine-calendar-unassigned { font-size: 10.5px; font-weight: 600; color: var(--tn-text-muted); }
.mine-calendar-empty { padding: 12px 4px; font-size: 12px; color: var(--tn-text-placeholder); text-align: center; }
.mine-calendar-toggle {
  display: block; width: 100%; margin: 4px 0 8px; padding: 6px 8px; border: none; border-radius: 8px;
  background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--tn-accent);
  text-align: left; font-family: inherit;
}
.mine-calendar-toggle:hover { background: var(--tn-row-hover); }

.mine-kanban { margin-top: 4px; width: 100%; padding-bottom: 8px; }
.mine-kanban-hint {
  margin: 0 0 10px 2px; font-size: 12.5px; line-height: 1.45; color: var(--tn-text-muted);
}
.mine-kanban-board {
  display: flex; flex-wrap: nowrap; gap: 12px; align-items: flex-start;
  min-height: 360px; width: 100%; overflow-x: auto; padding-bottom: 4px;
}
.mine-kanban-col {
  flex: 0 0 220px; width: 220px; min-width: 220px; max-width: 220px;
  display: flex; flex-direction: column;
  border: 1px solid var(--tn-border-subtle); border-radius: 12px; background: var(--tn-bg-muted);
}
.mine-kanban-col-header {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  font-size: 12px; font-weight: 700; color: var(--tn-text-primary);
  border-bottom: 1px solid var(--tn-border-subtle); white-space: nowrap;
}
.mine-kanban-col-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.mine-kanban-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mine-kanban-count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--tn-text-muted);
  background: var(--tn-chip-bg); border-radius: 999px; padding: 1px 7px;
}
.mine-kanban-col-body { flex: 1; padding: 8px; min-height: 120px; max-height: calc(100vh - 260px); overflow-y: auto; }
.mine-kanban-col-body-no-drop { cursor: default; }
.mine-kanban-col-body.drag-over { background: var(--tn-accent-soft-bg); outline: 2px dashed var(--tn-accent-border); outline-offset: -2px; border-radius: 0 0 11px 11px; }
.mine-kanban-card {
  display: flex; flex-direction: column; padding: 10px; margin-bottom: 8px;
  border-radius: 9px; border: 1px solid var(--tn-border-subtle); background: var(--tn-surface);
  cursor: grab; touch-action: none;
}
.mine-kanban-card.mine-kanban-card-static { cursor: pointer; }
.mine-kanban-card:hover { border-color: var(--tn-input-border); box-shadow: 0 2px 8px var(--tn-shadow); }
.mine-kanban-card.dragging { opacity: .35; cursor: grabbing; }
.kanban-col-avatar, .kanban-col-team { flex: none; }
.mine-calendar-unassigned {
  display: inline-block; margin-bottom: 6px; font-size: 10.5px; font-weight: 600;
  color: var(--tn-text-muted); background: var(--tn-chip-bg); border-radius: 5px; padding: 1px 6px;
}
.drawer-more-toggle, .create-more-toggle {
  display: block; width: calc(100% - 28px); margin: 0 14px 12px; padding: 9px 12px;
  border: 1px solid var(--tn-border); border-radius: 9px; background: var(--tn-bg-muted);
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tn-text-nav); font-family: inherit;
}
.drawer-more-toggle:hover, .create-more-toggle:hover { background: var(--tn-row-hover); }
.create-more-section {
  display: flex; flex-direction: column; gap: 18px; padding-top: 4px;
  border-top: 1px solid var(--tn-border-subtle);
}
.mine-kanban-card-title { font-size: 13px; font-weight: 600; color: var(--tn-text); line-height: 1.35; }
.mine-kanban-card-title.done { color: var(--tn-text-placeholder); text-decoration: line-through; }
.mine-kanban-card-context { font-size: 12px; color: var(--tn-text-muted); margin-top: 5px; }
.mine-kanban-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.mine-kanban-due { font-size: 11px; font-weight: 600; }
.mine-kanban-prio { font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 1px 6px; }
.mine-kanban-category {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 5px;
  padding: 2px 6px;
  background: var(--tn-surface-muted, #f1f2f4);
  color: var(--tn-text-secondary, #5c6369);
}
.mine-kanban-unassigned { font-size: 10.5px; font-weight: 600; color: var(--tn-text-muted); }

.drawer-overlay input[type="text"],
.drawer-overlay input[type="date"],
.drawer-overlay input[type="search"],
.drawer-overlay select,
.modal-panel input[type="text"],
.modal-panel input[type="date"],
.modal-panel select,
.note-composer-input {
  color: var(--tn-text-primary);
}
.drawer-overlay select option,
.modal-panel select option {
  background: var(--tn-surface);
  color: var(--tn-text-primary);
}
.flok-rte-wrap { background: var(--tn-surface); }
.flok-toolbar { background: var(--tn-surface); border-bottom: 1px solid var(--tn-border-subtle); }