/* Forced comfortable dark palette — independent of Telegram's theme so the look
   is consistent (desktop Telegram otherwise injects a white theme). */
:root {
  --bg: #14161e;          /* app background — deep slate, not pure black */
  --secondary-bg: #1d2130; /* panels / columns / inputs */
  --card-bg: #252a3b;      /* raised cards */
  --card-bg2: #2b3145;     /* hover / accents */
  --text: #e8eaf2;
  --hint: #8b93a8;
  --border: rgba(255, 255, 255, 0.09);

  --link: #6aa0ff;
  --button: #5b82f0;       /* primary action (blue) */
  --button-text: #ffffff;
  --button-hover: #6f93f5;
  --button-active: #4a6ee0;

  --c-frontend: #5b9bd5;
  --c-backend: #e0954a;
  --c-server: #e0635c;
  --c-done: #34c277;       /* success / Мужик */
  --c-danger: #ec5b57;     /* fail / Лох / delete */
  --c-panic: #f0883c;      /* горит очко */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-btn: 0 2px 8px rgba(0,0,0,.25);
  --shadow-card: 0 2px 10px rgba(0,0,0,.18);
  --shadow-fab: 0 6px 20px rgba(0,0,0,.40);
  --shadow-sheet: 0 -4px 24px rgba(0,0,0,.30);

  --focus-ring: 0 0 0 3px rgba(91,130,240,.45);
}

/* ===== Themes (switchable via [data-theme]) ===== */
/* Blue — deep ocean */
[data-theme="blue"] {
  --bg: #0b1a2c;
  --secondary-bg: #112a45;
  --card-bg: #173554;
  --card-bg2: #1e4167;
  --text: #e6f0fb;
  --hint: #82a1c4;
  --border: rgba(120,170,230,0.15);
  --link: #5bb0ff;
  --button: #2f80e7;
  --button-text: #ffffff;
  --button-hover: #4090ef;
  --button-active: #1f6fd0;
  --c-frontend: #4aa3e0;
  --c-backend: #e0954a;
  --c-server: #e0635c;
  --c-done: #2fc28a;
  --c-danger: #ef6b66;
  --c-panic: #f0a13c;
  --focus-ring: 0 0 0 3px rgba(47,128,231,.45);
}

/* Light */
[data-theme="light"] {
  --bg: #eef1f6;
  --secondary-bg: #dde3ef;
  --card-bg: #ffffff;
  --card-bg2: #f0f4fb;
  --text: #1b2230;
  --hint: #5e6b82;
  --border: rgba(0,0,0,0.12);
  --link: #2f6fd0;
  --button: #3b7ddd;
  --button-text: #ffffff;
  --button-hover: #2f6fd0;
  --button-active: #2560c0;
  --c-frontend: #2f72c0;
  --c-backend: #b5701e;
  --c-server: #cf4a44;
  --c-done: #1f9d63;
  --c-danger: #d94a44;
  --c-panic: #d97e2a;
  --shadow-btn: 0 2px 6px rgba(0,0,0,.12);
  --shadow-card: 0 1px 6px rgba(0,0,0,.10);
  --focus-ring: 0 0 0 3px rgba(59,125,221,.40);
}

/* Light-theme overrides for coloured pills / chips */
[data-theme="light"] .status.st-idle  { background: rgba(0,0,0,.07);  color: #4e5a6e; }
[data-theme="light"] .status.st-wip   { background: rgba(47,114,192,.14); color: #1f5db0; }
[data-theme="light"] .status.st-wait  { background: rgba(181,112,30,.15); color: #8f5c0e; }
[data-theme="light"] .status.st-panic,
[data-theme="light"] .status.st-fail  { background: rgba(207,74,68,.14); color: #b0302a; }
[data-theme="light"] .status.st-done  { background: rgba(31,157,99,.15); color: #177a4e; }

[data-theme="light"] .who             { background: rgba(0,0,0,.07);  color: #2a3140; }
[data-theme="light"] .who-empty       { background: transparent; color: #5e6b82; border-color: rgba(0,0,0,.18); }
[data-theme="light"] .who-analyst     { background: rgba(47,114,192,.14); color: #1f5db0; }
[data-theme="light"] .who-dev         { background: rgba(181,112,30,.15); color: #8f5c0e; }

[data-theme="light"] .chip            { background: rgba(0,0,0,.07); color: #4e5a6e; }

[data-theme="light"] .imp-pill.imp-urgent { background: rgba(207,74,68,.13); color: #b0302a; }
[data-theme="light"] .imp-pill.imp-normal { background: rgba(181,112,30,.15); color: #8f5c0e; }
[data-theme="light"] .imp-pill.imp-low    { background: rgba(31,157,99,.15); color: #177a4e; }

[data-theme="light"] .btn-done        { background: #1f9d63; color: #ffffff; }
[data-theme="light"] .btn-panic       { background: #d97e2a; color: #ffffff; }
[data-theme="light"] .btn-danger      { background: rgba(207,74,68,.12); color: #b0302a; border-color: rgba(207,74,68,.45); }
[data-theme="light"] .btn-danger:hover { background: rgba(207,74,68,.22); }
[data-theme="light"] .btn-ghost       { background: var(--secondary-bg); color: var(--text); border-color: var(--border); }
[data-theme="light"] .btn-ghost:hover { background: var(--card-bg2); }

[data-theme="light"] .col-count       { background: rgba(0,0,0,.08); color: #4e5a6e; }
[data-theme="light"] .col-empty       { color: #8992a8; }
[data-theme="light"] .card-prob       { background: rgba(207,74,68,.09); color: #b0302a; }

[data-theme="light"] .seg button        { color: var(--text); }
[data-theme="light"] .seg button:hover  { background: var(--card-bg2); }
[data-theme="light"] .seg button.sel    {
  background: var(--button);
  color: var(--button-text);
  border-color: var(--button);
  box-shadow: 0 2px 8px rgba(59,125,221,.30);
}

[data-theme="light"] .subpanel        { background: rgba(0,0,0,.04); border-color: var(--border); }
[data-theme="light"] .theme-btn       { background: var(--secondary-bg); border-color: var(--border); color: var(--text); }
[data-theme="light"] .theme-btn:hover { background: var(--card-bg2); }
[data-theme="light"] #toast           { background: #2c3a50; color: #fff; }
[data-theme="light"] .tab             { color: var(--hint); }
[data-theme="light"] .tab.active      { background: var(--button); color: var(--button-text); }

/* ===== Base reset ===== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: 80px;
}

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: calc(12px + var(--safe-top, 0px)) 16px 12px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
}
.topbar-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.topbar-links { display: flex; gap: 8px; }
.topbar .title { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

/* external-link pills in the topbar (prod dashboard / matcher) */
.link-btn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  display: flex; align-items: center;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.link-btn:hover { background: var(--card-bg2); box-shadow: var(--shadow-btn); }
.link-btn:active { transform: scale(.96); }
.link-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 480px) {
  .topbar { gap: 6px; }
  .topbar-actions { gap: 6px; }
  .link-btn { padding: 0 9px; font-size: 12px; }
}

/* theme-btn is the shared style for ALL icon buttons in the topbar (fsBtn, themeBtn) */
.theme-btn {
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  color: var(--text);
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.theme-btn:hover { background: var(--card-bg2); box-shadow: var(--shadow-btn); }
.theme-btn:active { transform: scale(.92); background: var(--card-bg); }
.theme-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.theme-menu {
  position: fixed;
  top: calc(96px + var(--safe-top, 0px));
  right: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px;
  z-index: 25;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 150px;
}
.theme-menu button {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}
.theme-menu button:hover { background: var(--secondary-bg); }
.theme-menu button.cur  { background: var(--button); color: var(--button-text); }
.theme-menu button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.role-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--secondary-bg);
  color: var(--hint);
}

/* ===== Tabs ===== */
.tabs {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
  position: sticky;
  top: calc(90px + var(--safe-top, 0px));
  background: var(--bg);
  z-index: 5;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  color: var(--hint);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.tab:hover { background: var(--card-bg); color: var(--text); }
.tab:active { transform: scale(.97); }
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tab.active {
  background: var(--button);
  color: var(--button-text);
  border-color: var(--button);
  box-shadow: 0 3px 10px rgba(91,130,240,.30);
}
[data-theme="blue"] .tab.active  { box-shadow: 0 3px 10px rgba(47,128,231,.35); }
[data-theme="light"] .tab.active { box-shadow: 0 3px 10px rgba(59,125,221,.28); }

.tab .count {
  display: inline-block;
  min-width: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  background: rgba(0,0,0,.20);
  color: inherit;
  opacity: .85;
}
.tab.active .count { background: rgba(0,0,0,.22); opacity: 1; }

/* ===== List layout ===== */
.list { padding: 8px 12px; display: flex; flex-direction: column; gap: 10px; }

/* ===== Cards (flat list) ===== */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 14px;
  border-left: 4px solid var(--hint);
  cursor: pointer;
  transition: transform .12s, background .12s, box-shadow .12s;
  box-shadow: var(--shadow-card);
}
.card:hover  { background: var(--card-bg2); box-shadow: 0 4px 16px rgba(0,0,0,.24); }
.card:active { transform: scale(.99); }
.card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.card.frontend { border-left-color: var(--c-frontend); }
.card.backend  { border-left-color: var(--c-backend); }
.card.server   { border-left-color: var(--c-server); }

.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-id   { color: var(--hint); font-size: 12px; font-weight: 600; }
.card-title { font-size: 15px; font-weight: 600; margin: 4px 0 8px; line-height: 1.3; }
.card-meta  { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ===== Badges ===== */
.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 7px;
  color: #fff;
  letter-spacing: .01em;
}
.badge.frontend { background: var(--c-frontend); }
.badge.backend  { background: var(--c-backend); }
.badge.server   { background: var(--c-server); }

/* On light background badges need slightly more saturation + shadow for legibility */
[data-theme="light"] .badge.frontend { background: #2a6cb8; }
[data-theme="light"] .badge.backend  { background: #a0610e; }
[data-theme="light"] .badge.server   { background: #bf3f3a; }

/* ===== Chips ===== */
.chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.09);
  color: var(--hint);
}

/* ===== Status pill ===== */
.status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: .01em;
}
.status.st-idle  { background: rgba(125,139,153,.20); color: var(--hint); }
.status.st-wip   { background: rgba(74,144,217,.20);  color: #72baf5; }
.status.st-wait  { background: rgba(224,142,60,.20);  color: #ecaf6a; }
.status.st-panic { background: rgba(217,83,79,.24);   color: #ff837e; }
.status.st-done  { background: rgba(65,176,110,.20);  color: #62d498; }
.status.st-fail  { background: rgba(217,83,79,.20);   color: #ff928e; }

/* ===== Assignee chip ===== */
.who {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: var(--text);
}
.who-empty   { color: var(--hint); border: 1px dashed rgba(255,255,255,.18); background: transparent; }
.who-analyst { background: rgba(74,144,217,.18); color: #72baf5; }
.who-dev     { background: rgba(224,142,60,.18); color: #ecaf6a; }

/* ===== Panic card glow (горит очко) ===== */
.card.panic {
  box-shadow:
    0 0 0 1.5px rgba(240,136,60,.55),
    0 0 18px rgba(240,136,60,.28),
    var(--shadow-card);
  animation: pulseGlow 2.2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(240,136,60,.55), 0 0 18px rgba(240,136,60,.28); }
  50%       { box-shadow: 0 0 0 1.5px rgba(240,136,60,.80), 0 0 28px rgba(240,136,60,.45); }
}

.empty { text-align: center; color: var(--hint); padding: 48px 16px; font-size: 14px; }

/* ===== FAB ===== */
.fab {
  position: fixed;
  right: 18px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--button);
  color: var(--button-text);
  font-size: 30px;
  line-height: 1;
  box-shadow: var(--shadow-fab);
  cursor: pointer;
  z-index: 8;
  transition: background .15s, transform .12s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center;
}
.fab:hover   { background: var(--button-hover, #6f93f5); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.fab:active  { transform: scale(.93); }
.fab:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-fab); }

/* ===== Sheet / bottom panel ===== */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9;
  backdrop-filter: blur(2px);
}
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 20px 16px 36px;
  z-index: 10;
  box-shadow: var(--shadow-sheet);
  animation: slideUp .22s cubic-bezier(.25,.8,.25,1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* sheet drag handle */
.sheet::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: -6px auto 16px;
  opacity: .7;
}

.sheet h2 { margin: 4px 0 14px; font-size: 18px; }
.sheet .section-label {
  font-size: 11px;
  color: var(--hint);
  margin: 18px 0 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.sheet .desc { white-space: pre-wrap; line-height: 1.5; font-size: 15px; }
.sheet .notes-box {
  background: var(--secondary-bg);
  border-left: 3px solid var(--c-backend);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 14px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
}

/* ===== Screenshots ===== */
.shots { display: flex; gap: 8px; flex-wrap: wrap; }
.shots img {
  width: 90px; height: 90px;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  border: 1px solid var(--border);
}
.shots img:hover { transform: scale(1.04); box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* ===== Lightbox ===== */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 30;
}
#lightbox.show { display: flex; }
#lightbox img  { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
#lightbox .lb-close {
  position: absolute;
  top: 14px; right: 18px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  opacity: .8;
  cursor: pointer;
  transition: opacity .12s;
}
#lightbox .lb-close:hover { opacity: 1; }

/* ===== Comments ===== */
.comment {
  background: var(--secondary-bg);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}
.comment .who { font-size: 11px; color: var(--hint); margin-bottom: 2px; }

/* ===== Inputs ===== */
textarea, input[type=text] {
  width: 100%;
  background: var(--secondary-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
textarea { min-height: 80px; }
textarea:focus, input[type=text]:focus {
  border-color: var(--button);
  box-shadow: 0 0 0 3px rgba(91,130,240,.20);
}
[data-theme="light"] textarea:focus,
[data-theme="light"] input[type=text]:focus {
  box-shadow: 0 0 0 3px rgba(59,125,221,.18);
}

/* ===== Buttons ===== */
.btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: filter .12s, transform .08s, background .12s, box-shadow .12s;
  outline: none;
  letter-spacing: .01em;
}
.btn:hover  { filter: brightness(1.10); }
.btn:active { transform: scale(.984); filter: brightness(.96); }
.btn:focus-visible { box-shadow: var(--focus-ring); }

.btn-primary {
  background: var(--button);
  color: var(--button-text);
  box-shadow: 0 4px 14px rgba(91,130,240,.35);
}
.btn-primary:hover { filter: none; background: var(--button-hover, #6f93f5); box-shadow: 0 6px 18px rgba(91,130,240,.45); }

.btn-done {
  background: var(--c-done);
  color: #fff;
  box-shadow: 0 4px 14px rgba(52,194,119,.28);
}
.btn-done:hover { filter: none; background: #3ed386; box-shadow: 0 6px 18px rgba(52,194,119,.40); }

.btn-panic {
  background: var(--c-panic);
  color: #fff;
  box-shadow: 0 4px 14px rgba(240,136,60,.28);
}
.btn-panic:hover { filter: none; background: #f59a4a; box-shadow: 0 6px 18px rgba(240,136,60,.40); }

.btn-danger {
  background: rgba(236,91,87,.14);
  color: #ff8e8a;
  border: 1.5px solid rgba(236,91,87,.45);
}
.btn-danger:hover { background: rgba(236,91,87,.24); filter: none; border-color: rgba(236,91,87,.65); }

.btn-ghost {
  background: var(--secondary-bg);
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--card-bg2); filter: none; border-color: rgba(255,255,255,.16); }

/* label-styled file picker */
.file-label { text-align: center; }

/* hint lines under action rows */
.hint-line { font-size: 12px; color: var(--hint); margin: 14px 0 2px; }
.hint-split { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.hint-split span { flex: 1; }
.hint-split span:last-child { text-align: right; }

/* ===== Segment controls ===== */
.seg { display: flex; gap: 6px; margin-top: 6px; }
.seg button {
  flex: 1;
  padding: 10px 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
  outline: none;
}
.seg button:hover {
  background: var(--card-bg2);
  border-color: rgba(255,255,255,.18);
}
.seg button:active { transform: scale(.97); }
.seg button:focus-visible { box-shadow: var(--focus-ring); }

/* SELECTED state — must be very obvious */
.seg button.sel {
  background: var(--button);
  color: var(--button-text);
  border-color: var(--button);
  box-shadow: 0 2px 10px rgba(91,130,240,.35);
}
.seg button.sel:hover { filter: brightness(1.10); }
[data-theme="blue"] .seg button.sel  { box-shadow: 0 2px 10px rgba(47,128,231,.40); }

.seg.hidden { display: none; }

.row-actions { display: flex; gap: 8px; }
.row-actions .btn { margin-top: 10px; }

/* ===== Toast ===== */
#toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(20px);
  background: #20293a;
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  max-width: 86%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 20;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 3-column importance board ===== */
.board3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 8px 90px;
  align-items: start;
}

.col {
  background: var(--secondary-bg);
  border-radius: var(--radius-lg);
  padding: 8px 6px 10px;
  border-top: 3px solid var(--hint);
  min-height: 60px;
  box-shadow: var(--shadow-card);
}
.col.imp-urgent { border-top-color: #d95452; }
.col.imp-normal { border-top-color: #e0a93c; }
.col.imp-low    { border-top-color: #41b06e; }

.col h3 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 4px 4px 8px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.col.imp-urgent h3 { color: #e06060; }
.col.imp-normal h3 { color: #d4a040; }
.col.imp-low    h3 { color: #4ab876; }

.col-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--hint);
  background: rgba(0,0,0,.22);
  border-radius: 8px;
  padding: 1px 6px;
  letter-spacing: 0;
}
.col-body  { display: flex; flex-direction: column; gap: 6px; }
.col-empty { color: var(--hint); font-size: 12px; text-align: center; padding: 8px 0; opacity: .45; }

/* ===== Mini card (board columns) ===== */
.card.mini {
  padding: 8px 8px 9px;
  border-radius: var(--radius-md);
  border-left-width: 3px;
  box-shadow: none;
}
.card.mini:hover { box-shadow: 0 3px 10px rgba(0,0,0,.22); }

.mini-head  { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.mini-head .badge   { font-size: 9px; padding: 2px 5px; border-radius: 5px; }
.mini-head .card-id { font-size: 10px; }
.mini-title { font-size: 12px; font-weight: 600; line-height: 1.3; margin: 5px 0 6px; word-break: break-word; color: var(--text); }
.mini-foot  { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-foot .who,
.mini-foot .status { font-size: 9px; padding: 2px 5px; }

/* ===== Importance pill (detail sheet) ===== */
.imp-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-sm); }
.imp-pill.imp-urgent { background: rgba(217,83,79,.22);  color: #ff8a86; }
.imp-pill.imp-normal { background: rgba(224,169,60,.22); color: #ecc06e; }
.imp-pill.imp-low    { background: rgba(65,176,110,.20); color: #5cc98a; }

/* ===== Flat list extras (Сделано / Проблемы) ===== */
.card-sub  { font-size: 12px; color: var(--hint); margin-top: 6px; }
.card-prob {
  font-size: 13px;
  margin-top: 4px;
  padding: 7px 10px;
  background: rgba(217,83,79,.12);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  color: #ff928e;
}
[data-theme="light"] .card-prob { color: #b0302a; }

/* ===== Outcome sub-form panel ===== */
.subpanel {
  margin-top: 12px;
  padding: 12px 14px 6px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
}

/* seg-lied selected: match the same visual as .seg button.sel */
.seg-lied.sel {
  outline: 2px solid var(--button);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(91,130,240,.20);
}

/* ===== Drag and drop ===== */
.card.mini { touch-action: none; }
.card.dragging { opacity: .30; }

.drag-ghost {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  opacity: .94;
  transform: rotate(2deg) scale(1.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}

.col.drop-target {
  background: rgba(80,168,235,.14);
  outline: 2px dashed var(--button);
  outline-offset: -2px;
}

/* ===== News / Claude feeds ===== */
.news-item {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--c-panic);
  padding: 14px 40px 12px 14px;
  box-shadow: var(--shadow-card);
}
/* Claude work-report cards get a distinct (blue) accent. */
.news-item.news-claude { border-left-color: var(--button); }
.news-text {
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.news-foot {
  margin-top: 8px;
  font-size: 12px;
  color: var(--hint);
  font-weight: 600;
}
.news-del {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--hint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.news-del:hover { background: rgba(236,91,87,.15); color: var(--c-danger); }
.news-del:focus-visible { outline: none; box-shadow: var(--focus-ring); }