:root{
  --bg:#f4f7fb;--surface:#ffffff;--surface-2:#f8fafc;--text:#0f172a;--muted:#64748b;--line:#dde6f1;
  --accent:#2f6df6;--accent-2:#6657f6;--ok:#2fbe65;--warn:#f5b51b;--bad:#ef4444;--violet:#8b5cf6;
  --shadow:0 14px 34px rgba(15,23,42,.07);--radius:18px;--sidebar:250px;--topbar:72px;
}
html[data-theme="dark"]{
  --bg:#0b1220;--surface:#121b2b;--surface-2:#172236;--text:#f5f7fb;--muted:#9aa9bf;--line:#263449;
  --accent:#4f83ff;--accent-2:#7c5cff;--ok:#35c979;--warn:#f7bd2f;--bad:#ff5f70;--violet:#a277ff;
  --shadow:0 18px 42px rgba(0,0,0,.28);
}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45}a{color:inherit;text-decoration:none}img,video{max-width:100%}.container{width:min(1480px,94%);margin:auto}.muted{color:var(--muted)}
.topbar{position:sticky;top:0;z-index:50;height:var(--topbar);background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}html[data-theme="dark"] .topbar{background:rgba(11,18,32,.88)}.nav{height:var(--topbar);display:grid;grid-template-columns:auto minmax(280px,520px) auto;gap:24px;align-items:center}.brand{display:flex;align-items:center;gap:12px;font-weight:900;white-space:nowrap}.brand-mark{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;font-weight:900;box-shadow:0 12px 25px rgba(47,109,246,.25)}.top-search{height:44px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--muted)}.top-search input{border:0;background:transparent;color:var(--muted);padding:0;width:100%;outline:0}.top-nav{display:flex;align-items:center;gap:18px;justify-content:flex-end;white-space:nowrap}.top-nav>a{color:var(--muted);font-weight:700}.top-nav>a:hover{color:var(--accent)}.top-user{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:7px 12px;color:var(--text)!important}.top-user img{width:34px;height:34px;border-radius:11px;object-fit:cover}.top-user span{display:flex;flex-direction:column;line-height:1.1}.top-user small{font-size:12px;color:var(--muted);margin-top:3px}.theme-toggle{width:42px;height:42px;min-height:42px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:none;padding:0;font-size:18px}
main{min-height:calc(100vh - var(--topbar))}.alert{margin-top:18px;border-radius:14px;padding:13px 16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}.alert.success{border-color:rgba(47,190,101,.35)}.alert.error{border-color:rgba(239,68,68,.35)}
.app,.layout{width:min(1480px,94%);margin:0 auto;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);gap:28px;padding:26px 0 60px}.main,.content{min-width:0}.sidebar{position:sticky;top:calc(var(--topbar) + 18px);height:calc(100vh - var(--topbar) - 36px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:20px 14px;box-shadow:none}.sidebar a{height:48px;display:flex;align-items:center;gap:13px;padding:0 16px;border-radius:12px;color:var(--muted);font-weight:800;margin-bottom:5px}.sidebar a:hover{background:var(--surface-2);color:var(--text)}.sidebar a.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;box-shadow:0 16px 28px rgba(47,109,246,.22)}.side-icon{width:20px;text-align:center;opacity:.9;flex:0 0 20px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin:8px 0 24px}.page-head h1,.main>h1,.content>h1{font-size:30px;line-height:1.15;margin:0 0 8px;color:var(--text);letter-spacing:-.02em}.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.date-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:10px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:132px}.date-card small{color:var(--muted)}
.btn,button{min-height:42px;border:1px solid transparent;border-radius:12px;padding:10px 16px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;cursor:pointer;box-shadow:0 12px 24px rgba(47,109,246,.18);display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.secondary,button.secondary{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:var(--shadow)}.btn.small{min-height:36px;padding:8px 12px}.btn.danger,button.danger{background:linear-gradient(135deg,#ff5f70,#dc2626);color:white}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);overflow:hidden}.card h2,.card h3{margin:0 0 14px}.card-head,.task-head{display:flex;justify-content:space-between;align-items:center;gap:14px}.card-head a,.card-link{color:var(--accent);font-weight:800}.grid2,.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.grid3,.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.grid4,.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.toolbar,.actions,.task-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select,textarea{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 13px;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:rgba(47,109,246,.55);box-shadow:0 0 0 4px rgba(47,109,246,.10)}textarea{min-height:130px;resize:vertical}.field label{display:block;margin-bottom:7px;color:var(--muted);font-weight:700}.form{display:grid;gap:14px}.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:block;overflow-x:auto}.table thead,.table tbody{display:table;width:100%}.table th,.table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;white-space:normal}.table th{font-size:13px;color:var(--muted);font-weight:900;background:var(--surface-2)}.table tr:last-child td{border-bottom:0}.badge{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:4px 9px;font-size:12px;font-style:normal;font-weight:800;color:var(--muted);white-space:nowrap}.badge.high{border-color:#fdba74;color:#ea580c;background:#fff7ed}.badge.urgent{border-color:#fda4af;color:#e11d48;background:#fff1f2}.badge.done,.badge.closed{border-color:#86efac;color:#16a34a;background:#f0fdf4}html[data-theme="dark"] .badge.high{background:rgba(245,158,11,.13);color:#ffd390}html[data-theme="dark"] .badge.urgent{background:rgba(239,68,68,.14);color:#ffb6c1}html[data-theme="dark"] .badge.done,html[data-theme="dark"] .badge.closed{background:rgba(47,190,101,.13);color:#9af0bd}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-bottom:18px}.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);display:flex;gap:16px;align-items:center;min-height:120px}.kpi-card small,.kpi-card em{display:block;color:var(--muted);font-style:normal}.kpi-card b{display:block;font-size:30px;line-height:1.1;margin:4px 0;color:var(--text)}.kpi-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:900;font-size:24px;flex:0 0 54px}.kpi-icon.blue{background:linear-gradient(135deg,#2f6df6,#477bff)}.kpi-icon.green{background:linear-gradient(135deg,#2fbe65,#39d378)}.kpi-icon.yellow{background:linear-gradient(135deg,#f7c02e,#f59e0b)}.kpi-icon.red{background:linear-gradient(135deg,#ff7a3d,#ef4444)}.kpi-icon.violet{background:linear-gradient(135deg,#8b5cf6,#6d5dfc)}.dash-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.chart-card,.deadlines-card,.activity-card,.mytasks-card{min-height:250px}.donut-row{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}.donut{width:180px;height:180px;border-radius:50%;background:conic-gradient(#2f6df6 0 var(--a),#2fbe65 var(--a) var(--b),#f5b51b var(--b) var(--c),#8b5cf6 var(--c) var(--d),#ef4444 var(--d) 100%);position:relative;margin:auto}.donut:after{content:'';position:absolute;inset:42px;background:var(--surface);border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}.legend p{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;margin:10px 0;color:var(--muted)}.legend b{color:var(--muted)}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.status-new{background:#2f6df6}.status-in_progress{background:#2fbe65}.status-waiting{background:#f5b51b}.status-done{background:#8b5cf6}.status-closed{background:#ef4444}.deadline-row,.task-row,.activity-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.deadline-row:last-child,.task-row:last-child,.activity-row:last-child{border-bottom:0}.datebox{width:52px;display:flex;flex-direction:column;align-items:center;color:var(--bad);font-weight:900;flex:0 0 52px}.datebox small{font-size:12px;color:var(--muted);text-transform:uppercase}.deadline-row>span:nth-child(2),.task-row span{min-width:0;flex:1}.deadline-row b,.task-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deadline-row small,.task-row small{display:block;color:var(--muted);margin-top:3px}.activity-icon{width:34px;height:34px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;flex:0 0 34px}.activity-row div{min-width:0;flex:1}.activity-row p{margin:3px 0 0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-row small{color:var(--muted)}.empty-state{text-align:center;color:var(--muted);padding:34px 10px}.empty-state div{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:24px}.empty-state b{display:block;color:var(--text);font-size:18px}.empty-state.compact{padding:24px 10px}
.hero{padding:78px 0 68px}.datacenter-hero{background:linear-gradient(135deg,#f8fbff 0%,#eef4ff 100%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}html[data-theme="dark"] .datacenter-hero{background:linear-gradient(135deg,#101a2c 0%,#121733 55%,#0b1220 100%)}.datacenter-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 10%,rgba(47,109,246,.14),transparent 32%),radial-gradient(circle at 90% 35%,rgba(102,87,246,.14),transparent 34%);pointer-events:none}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}.eyebrow{color:var(--accent);font-weight:900;margin-bottom:12px}.hero h1{font-size:clamp(36px,5.5vw,68px);line-height:1.02;margin:0 0 18px;letter-spacing:-.055em;color:var(--text)}.lead{font-size:20px;color:var(--muted);line-height:1.65}.hero-glass{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.metric{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--muted)}.metric:last-child{border-bottom:0}.metric b{color:var(--text);white-space:nowrap}.section{padding:52px 0}.section h2{font-size:34px;letter-spacing:-.03em;margin:0 0 22px}.public-grid .card{height:100%}.price .sum{font-size:30px;font-weight:900}.footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted);background:var(--surface)}.footgrid{display:flex;justify-content:space-between;gap:16px}.login-box{max-width:430px;margin:70px auto}
.task-main-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:18px}.comments,.chat{display:grid;gap:12px}.comment,.chat-bubble{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px;color:var(--text);max-width:min(780px,100%)}.chat-message{display:flex;justify-content:flex-start}.chat-message.mine{justify-content:flex-end}.chat-message.mine .chat-bubble{background:rgba(47,109,246,.10);border-color:rgba(47,109,246,.25)}.chat-meta{display:flex;gap:12px;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:8px}.chat-meta b{color:var(--text)}.chat-file{margin-top:10px}.chat-file img,.chat-file video{max-width:min(520px,100%);max-height:360px;border-radius:14px;border:1px solid var(--line);display:block;background:var(--surface)}.file-pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:9px 12px}.check-row{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.check{width:30px;height:30px;min-height:30px;border-radius:9px;padding:0;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);box-shadow:none;flex:0 0 30px}.check.done{background:var(--accent);color:white}.line-through{text-decoration:line-through;color:var(--muted)}.kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:14px;align-items:start;overflow-x:auto}.kanban-col{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;min-height:300px}.kanban-card{display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:13px;margin:10px 0;box-shadow:var(--shadow)}.gantt-row{display:grid;grid-template-columns:220px 1fr;gap:10px;align-items:center;margin:8px 0}.gantt-line{height:28px;background:var(--surface-2);border-radius:999px;overflow:hidden}.gantt-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.user-cell,.client-cell,.user-edit-head{display:flex;align-items:center;gap:12px}.user-avatar,.client-avatar{width:42px;height:42px;border-radius:14px;object-fit:cover}.user-avatar.big{width:74px;height:74px;border-radius:22px}.cropper-box,.avatar-select-line,.dropzone,.perm,.client-avatar-option,.user-avatar-option{border:1px solid var(--line);background:var(--surface-2);border-radius:16px}.module-list a{display:block;padding:12px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--surface-2)}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-grid{grid-template-columns:1fr}.nav{grid-template-columns:auto 1fr}.top-search{display:none}.hero-grid{grid-template-columns:1fr}.sidebar{position:relative;top:auto;height:auto}.app,.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.sidebar a{margin:0}}
@media(max-width:760px){.container,.app,.layout{width:94%}.topbar{height:auto}.nav{height:auto;padding:12px 0;grid-template-columns:1fr}.top-nav{justify-content:flex-start;overflow:auto;padding-bottom:4px}.page-head,.task-head,.card-head{display:block}.head-actions{justify-content:flex-start}.kpi-grid,.grid2,.grid-2,.grid3,.grid-3,.grid4,.grid-4,.row,.task-main-grid,.donut-row{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr}.hero{padding:50px 0}.hero h1{font-size:38px}.lead{font-size:17px}.footgrid{display:block}.deadline-row b,.task-row b,.activity-row p{white-space:normal}.card{padding:18px}}

/* IT-MSK 2.0: command palette and readable discussion */
.command-trigger{appearance:none;text-align:left;cursor:pointer;color:var(--muted);box-shadow:none;width:100%;justify-content:flex-start}
.command-trigger kbd{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:2px 7px;font-size:12px;color:var(--muted)}
.command-modal[hidden]{display:none}.command-opened{overflow:hidden}.command-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(8px);z-index:90}.command-box{position:fixed;z-index:91;top:92px;left:50%;transform:translateX(-50%);width:min(760px,92vw);max-height:min(720px,78vh);background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 80px rgba(2,6,23,.35);overflow:hidden}.command-input-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--line);background:var(--surface-2)}.command-input-row input{border:0;box-shadow:none;background:transparent;padding:4px 0;font-size:17px}.command-input-row button{min-height:34px;width:34px;padding:0;border-radius:10px;background:var(--surface);border-color:var(--line);color:var(--muted);box-shadow:none;font-size:20px}.command-hint{padding:10px 16px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}.command-results{padding:10px;overflow:auto;max-height:560px}.command-empty{padding:28px;text-align:center;color:var(--muted)}.command-group{padding:6px}.command-group h4{margin:8px 8px 10px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.command-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:14px;color:var(--text);border:1px solid transparent}.command-item:hover{background:var(--surface-2);border-color:var(--line)}.command-item span{min-width:0;display:flex;flex-direction:column;gap:3px}.command-item b,.command-item small,.command-item em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command-item small{color:var(--muted);font-style:normal}.command-item em{color:var(--muted);font-size:13px;font-style:normal}.command-item strong{color:var(--muted)}
.discussion-card{overflow:visible}.discussion-card .chat{display:flex;flex-direction:column;gap:12px}.discussion-card .chat-message{width:100%;display:flex}.discussion-card .chat-message.mine{justify-content:flex-end}.discussion-card .chat-bubble{width:fit-content;max-width:min(760px,86%);min-width:240px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:18px;overflow:hidden}.discussion-card .chat-message.mine .chat-bubble{background:linear-gradient(135deg,rgba(47,109,246,.15),rgba(102,87,246,.13));border-color:rgba(79,131,255,.38)}.discussion-card .chat-meta{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:7px;color:var(--muted);font-size:13px}.discussion-card .chat-meta b{color:var(--text);font-size:14px}.discussion-card .chat-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.55;color:var(--text)}.chat-form{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}.chat-form textarea{min-height:96px;background:var(--surface);border-radius:14px}.chat-actions{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:10px}.chat-actions input[type=file]{width:auto;max-width:100%;padding:8px;background:var(--surface);font-size:13px}.drop-hint{margin-top:8px;color:var(--muted);font-size:13px}.selected-files{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.file-chip{display:inline-flex;padding:6px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;color:var(--muted)}
@media(max-width:760px){.command-box{top:72px}.command-trigger kbd{display:none}.discussion-card .chat-bubble{max-width:100%;min-width:0}.chat-actions{align-items:stretch}.chat-actions button{width:100%}}


/* IT-MSK 2.0 Step 2: unified typography and task page spacing */
.content > h1,
.content .page-head h1,
.content .task-head h1{
  margin:0;
  font-size:clamp(26px,2.2vw,34px);
  line-height:1.16;
  letter-spacing:-.025em;
  font-weight:800;
  color:var(--text);
  overflow-wrap:anywhere;
}
.content .page-head p,
.content .task-head p{margin-top:8px;line-height:1.5}

.content .card > h2:first-child,
.content .card > h3:first-child,
.content .panel-title,
.content .section-title{
  margin:0 0 18px;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.01em;
  font-weight:750;
  color:var(--text);
  overflow-wrap:anywhere;
}
.content .card > h4{font-size:15px;line-height:1.35;margin:22px 0 10px;color:var(--text)}

.task-panels-grid{
  gap:24px;
  margin-top:24px;
  align-items:stretch;
}
.task-panels-grid > .card{
  height:100%;
  padding:24px;
}
.task-discussion-section{
  margin-top:24px;
  padding:24px;
  overflow:hidden;
}
.task-discussion-section .chat{
  padding:2px 4px 4px;
}
.task-discussion-section .chat-message{
  padding-inline:2px;
}
.task-discussion-section .chat-bubble{
  margin:0;
}
.task-discussion-section .chat-form{
  margin:20px 4px 0;
}
.task-history-grid{
  margin-top:24px;
  padding:0;
  gap:24px;
  align-items:start;
}
.task-history-grid > div{min-width:0}
.task-history-grid > div > .card{padding:24px}
.task-history-grid .section-title{margin:0 0 12px}

/* Keep all standard controls visually consistent */
.content .btn,
.content button:not(.check):not(.command-trigger){
  min-height:40px;
  padding:9px 16px;
  border-radius:12px;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
}
.content input,
.content select,
.content textarea{
  font-size:14px;
  line-height:1.45;
}

@media(max-width:760px){
  .task-panels-grid{gap:16px;margin-top:18px}
  .task-panels-grid > .card,
  .task-discussion-section,
  .task-history-grid > div > .card{padding:18px}
  .task-discussion-section{margin-top:16px}
  .task-discussion-section .chat{padding:0}
  .task-discussion-section .chat-form{margin:16px 0 0}
  .task-history-grid{margin-top:16px;gap:16px}
}

/* IT-MSK 2.0 Step 3: global spacing rhythm and unified action buttons */
:root{
  --ui-section-gap:24px;
  --ui-control-height:40px;
  --ui-control-radius:12px;
  --ui-control-pad-x:16px;
}

/* One global vertical rhythm for every application page. */
:where(.main,.content) > *{
  min-width:0;
}
:where(.main,.content) > * + *{
  margin-top:var(--ui-section-gap);
}
:where(.main,.content) > :where(.grid2,.grid-2,.grid3,.grid-3,.grid4,.grid-4,.row,.task-main-grid,.task-panels-grid,.task-history-grid){
  margin-bottom:0;
}

/* Cards inside grids are separated by grid gap; stacked cards get the same gap. */
:where(.main,.content) :where(.grid2,.grid-2,.grid3,.grid-3,.grid4,.grid-4,.task-main-grid,.task-panels-grid,.task-history-grid){
  gap:var(--ui-section-gap);
}
:where(.main,.content) :where(.card,.section,.panel) + :where(.card,.section,.panel){
  margin-top:var(--ui-section-gap);
}

/* All ordinary application buttons share one height, padding and typography. */
:where(.main,.content) :where(a.btn,button.btn,button:not(.check):not(.command-trigger):not(.theme-toggle),input[type="submit"],input[type="button"]){
  box-sizing:border-box;
  min-height:var(--ui-control-height);
  height:var(--ui-control-height);
  padding:0 var(--ui-control-pad-x);
  border-radius:var(--ui-control-radius);
  font-size:14px;
  line-height:1;
  font-weight:700;
  white-space:nowrap;
  vertical-align:middle;
}

/* Legacy .small must not make table actions visually smaller. */
:where(.main,.content) .btn.small{
  min-height:var(--ui-control-height);
  height:var(--ui-control-height);
  padding:0 var(--ui-control-pad-x);
  font-size:14px;
}

/* Consistent action rows and equal action buttons in tables. */
:where(.main,.content) :where(.actions,.toolbar,.task-actions,.head-actions){
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
:where(.main,.content) table td:last-child{
  white-space:nowrap;
}
:where(.main,.content) table td:last-child > form{
  display:inline-flex !important;
  margin:0 0 0 8px;
  vertical-align:middle;
}
:where(.main,.content) table td:last-child > :where(.btn,form > .btn){
  min-width:104px;
}

/* Forms and buttons do not collapse against neighbouring blocks. */
:where(.main,.content) form.card,
:where(.main,.content) .card > form:last-child{
  margin-bottom:0;
}
:where(.main,.content) form > :where(button,.btn,input[type="submit"]):last-child{
  margin-top:4px;
}

@media(max-width:760px){
  :root{--ui-section-gap:16px}
  :where(.main,.content) table td:last-child{
    white-space:normal;
  }
  :where(.main,.content) table td:last-child > form{
    margin:8px 0 0;
  }
  :where(.main,.content) table td:last-child > :where(.btn,form > .btn){
    width:100%;
    min-width:0;
  }
}


/* IT-MSK 2.0 Step 4: robust spacing on task view */
.task-page-stack{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--ui-section-gap,24px);
  margin-top:var(--ui-section-gap,24px);
  min-width:0;
}
.task-page-stack > *{
  min-width:0;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.task-page-stack .task-panels-grid,
.task-page-stack .task-history-grid{
  gap:var(--ui-section-gap,24px);
}
.task-page-stack .task-discussion-section{
  width:100%;
  clear:both;
}
@media(max-width:760px){
  .task-page-stack{gap:16px;margin-top:16px}
  .task-page-stack .task-panels-grid,
  .task-page-stack .task-history-grid{gap:16px}
}

/* IT-MSK 2.0 Step 5: stable global component system
   Fixes grid-card drift and normalises cards, headings, forms and actions. */
:root{
  --ui-gap:24px;
  --ui-card-padding:24px;
  --ui-card-radius:18px;
  --ui-button-height:40px;
}

/* Never apply vertical sibling margins to items that belong to a layout grid. */
:where(.content,.main) :where(
  .grid2,.grid-2,.grid3,.grid-3,.grid4,.grid-4,
  .row,.task-main-grid,.task-panels-grid,.task-history-grid,
  .kpi-grid,.dashboard-grid,.donut-row
) > *{
  min-width:0;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Every grid owns its spacing through gap only. */
:where(.content,.main) :where(
  .grid2,.grid-2,.grid3,.grid-3,.grid4,.grid-4,
  .row,.task-main-grid,.task-panels-grid,.task-history-grid,
  .kpi-grid,.dashboard-grid,.donut-row
){
  gap:var(--ui-gap) !important;
}

/* Disable the earlier generic card-to-card margin inside any structured layout. */
:where(.content,.main) :where(
  .grid2,.grid-2,.grid3,.grid-3,.grid4,.grid-4,
  .row,.task-main-grid,.task-panels-grid,.task-history-grid,
  .kpi-grid,.dashboard-grid,.donut-row
) > :where(.card,.section,.panel) + :where(.card,.section,.panel){
  margin-top:0 !important;
}

/* Task page: rows are separated only by the parent stack gap. */
.task-page-stack{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:var(--ui-gap) !important;
  align-items:start;
}
.task-page-stack > *{
  position:relative;
  width:100%;
  min-width:0;
  margin:0 !important;
}
.task-page-stack > .task-panels-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch !important;
}
.task-page-stack > .task-panels-grid > .card{
  margin:0 !important;
  height:100% !important;
  min-height:0;
}
.task-page-stack > .task-discussion-section{
  display:block;
  clear:both;
  margin:0 !important;
}

/* Shared card component across all application screens. */
:where(.content,.main) :where(.card,.panel,.section){
  border:1px solid var(--line);
  border-radius:var(--ui-card-radius);
  background:var(--surface);
  box-shadow:var(--shadow);
}
:where(.content,.main) .card{
  padding:var(--ui-card-padding);
}

/* Shared heading scale. */
:where(.content,.main) :where(.card,.panel,.section) > :where(h2,h3):first-child,
:where(.content,.main) :where(.panel-title,.section-title){
  margin:0 0 18px !important;
  font-size:18px !important;
  line-height:1.3 !important;
  font-weight:750 !important;
  letter-spacing:-.01em;
  color:var(--text);
}

/* Forms use one vertical rhythm. */
:where(.content,.main) :where(.form,.mini-form){
  display:grid;
  gap:14px;
}
:where(.content,.main) :where(.field,label){
  min-width:0;
}
:where(.content,.main) .field{
  display:grid;
  gap:7px;
}
:where(.content,.main) .field > label{
  margin:0;
  font-weight:650;
  color:var(--muted);
}

/* One button system everywhere. Width may differ by text, height never does. */
:where(.content,.main) :where(
  a.btn,button.btn,
  button:not(.check):not(.command-trigger):not(.theme-toggle),
  input[type="submit"],input[type="button"]
){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:var(--ui-button-height) !important;
  height:var(--ui-button-height) !important;
  padding:0 16px !important;
  border-radius:12px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  white-space:nowrap;
}

/* Action cells: equal visual size for Card/Delete/Edit actions. */
:where(.content,.main) table td:last-child > :where(a.btn,button.btn,form){
  vertical-align:middle;
}
:where(.content,.main) table td:last-child > :where(a.btn,button.btn),
:where(.content,.main) table td:last-child > form > :where(button,.btn){
  min-width:104px;
}

/* Discussion always has breathing room from its card border. */
.task-discussion-section{
  padding:var(--ui-card-padding) !important;
}
.task-discussion-section > .chat{
  padding:0 6px 4px !important;
}
.task-discussion-section > .chat-form{
  margin:20px 6px 0 !important;
}

@media(max-width:900px){
  :root{--ui-gap:18px;--ui-card-padding:20px}
  .task-page-stack > .task-panels-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

@media(max-width:760px){
  :root{--ui-gap:16px;--ui-card-padding:18px}
  :where(.content,.main) table td:last-child > :where(a.btn,button.btn),
  :where(.content,.main) table td:last-child > form > :where(button,.btn){
    width:100%;
    min-width:0;
  }
  .task-discussion-section > .chat{padding:0 !important}
  .task-discussion-section > .chat-form{margin:16px 0 0 !important}
}

/* IT-MSK 2.0 Step 6: dashboard alignment, global date and completion approval workflow */
.top-date{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow);
}
.top-date>span:first-child{color:var(--accent);font-size:17px}
.top-date>span:last-child{display:flex;flex-direction:column;line-height:1.05}
.top-date b{font-size:13px}
.top-date small{margin-top:4px;color:var(--muted);font-size:11px}

.dashboard-page .dash-grid{align-items:stretch}
.dashboard-page .dash-grid>.card{height:100%;min-height:300px}
.dashboard-page .chart-card,
.dashboard-page .deadlines-card{display:flex;flex-direction:column}
.dashboard-page .deadlines-card .empty-state{margin:auto 0}
.dashboard-page .deadlines-card .deadline-row:last-child{margin-bottom:auto}

.btn.success,
button.btn.success{
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,#22b764,#16a34a) !important;
  box-shadow:0 10px 22px rgba(34,183,100,.22);
}
.btn.success:hover,
button.btn.success:hover{filter:brightness(1.04);transform:translateY(-1px)}

.review-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}
.review-status.pending{color:#8a5b00;background:rgba(245,181,27,.16);border:1px solid rgba(245,181,27,.35)}
.review-status.accepted{color:#12743c;background:rgba(34,183,100,.14);border:1px solid rgba(34,183,100,.32)}
.review-status.rejected{color:#b4232e;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.30)}
html[data-theme="dark"] .review-status.pending{color:#ffd36b}
html[data-theme="dark"] .review-status.accepted{color:#72e6a4}
html[data-theme="dark"] .review-status.rejected{color:#ff9098}

.completion-review-card{
  margin:20px 0 0 !important;
  padding:22px 24px !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
  gap:24px;
  align-items:center;
  border-left:4px solid #f5b51b !important;
}
.completion-review-card.accepted{grid-template-columns:1fr;border-left-color:#22b764 !important}
.completion-review-card.rejected{grid-template-columns:1fr;border-left-color:#ef4444 !important}
.completion-review-card h2{margin:10px 0 7px !important;font-size:19px !important}
.completion-review-card p{margin:0}
.completion-review-form{display:grid;gap:12px}
.completion-review-form textarea{min-height:82px;resize:vertical}
.completion-review-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

@media(max-width:1280px){
  .top-date{display:none}
}
@media(max-width:900px){
  .completion-review-card{grid-template-columns:1fr}
  .completion-review-actions{justify-content:flex-start}
}
@media(max-width:760px){
  .dashboard-page .dash-grid>.card{min-height:0}
  .completion-review-card{margin-top:16px !important;padding:18px !important}
  .completion-review-actions>*{width:100%}
}