* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Microsoft YaHei","PingFang SC",sans-serif; }
  body {
    color: #2b2440;
    background: linear-gradient(120deg,#f6f0ff 0%,#eef4ff 30%,#e8fbff 60%,#fff2f7 100%);
    background-attachment: fixed;
    min-height: 100vh;
  }
  /* ===== 顶部幻彩头 ===== */
  header {
    background: linear-gradient(115deg,#6d28d9 0%,#4f46e5 35%,#0ea5e9 70%,#06b6d4 100%);
    color: #fff; padding: 30px 28px 26px; position: relative; overflow: hidden;
  }
  header::after {
    content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
    background: radial-gradient(circle, rgba(255,255,255,.25), transparent 65%); border-radius:50%;
  }
  header::before {
    content:""; position:absolute; left:35%; bottom:-90px; width:220px; height:220px;
    background: radial-gradient(circle, rgba(255,190,230,.35), transparent 65%); border-radius:50%;
  }
  header h1 { font-size: 26px; letter-spacing: 1px; position:relative; z-index:1; }
  header p { opacity: .92; margin-top: 8px; font-size: 13px; position:relative; z-index:1; }
  .languageSwitch {
    position: absolute; z-index: 2; top: 18px; right: 22px; display: inline-flex;
    padding: 2px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px;
    background: rgba(38,27,92,.18); backdrop-filter: blur(5px);
  }
  .languageSwitch button {
    min-width: 42px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px;
    color: rgba(255,255,255,.78); background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 700;
  }
  .languageSwitch button.active { color: #3b2f6b; background: #fff; }
  .userSession {
    position: absolute; z-index: 2; top: 18px; right: 132px; display: flex; align-items: center;
    gap: 8px; max-width: calc(100% - 260px); font-size: 12px; font-weight: 700;
  }
  .userSession span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .userSession button {
    flex: 0 0 auto; border: 1px solid rgba(255,255,255,.42); background: rgba(38,27,92,.16);
    color: #fff; height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer; font-weight: 700;
  }

  .wrap { max-width: 1240px; margin: 0 auto; padding: 20px; }

  /* ===== 导航 ===== */
  .nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
  .nav button {
    border: 0; background: #fff; color:#4b4370; padding: 10px 18px; border-radius: 999px;
    cursor: pointer; font-size: 14px; font-weight:600; box-shadow: 0 3px 10px rgba(120,90,220,.12);
    transition: all .2s;
  }
  .nav button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(120,90,220,.2); }
  .nav button.active {
    background: linear-gradient(90deg,#7c3aed,#0ea5e9); color: #fff;
    box-shadow: 0 6px 16px rgba(124,58,237,.35);
  }

  /* ===== 统计卡片（彩色渐变） ===== */
  .cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; }
  .stat {
    border-radius: 16px; padding: 18px 16px; color:#fff; position:relative; overflow:hidden;
    box-shadow: 0 6px 16px rgba(80,60,180,.16);
  }
  .stat .count { font-size: 32px; font-weight: 800; }
  .stat .lbl { opacity: .95; font-size: 12px; margin-top: 6px; line-height:1.4; }
  .g-purple { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
  .g-pink   { background: linear-gradient(135deg,#ec4899,#db2777); }
  .g-blue   { background: linear-gradient(135deg,#38bdf8,#2563eb); }
  .g-teal   { background: linear-gradient(135deg,#2dd4bf,#0d9488); }
  .g-green  { background: linear-gradient(135deg,#4ade80,#16a34a); }
  .g-orange { background: linear-gradient(135deg,#fb923c,#ea580c); }
  .g-red    { background: linear-gradient(135deg,#f87171,#dc2626); }
  .g-slate  { background: linear-gradient(135deg,#94a3b8,#475569); }

  /* ===== 面板 ===== */
  .panel {
    background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
    border-radius: 18px; padding: 20px; box-shadow: 0 8px 24px rgba(90,70,180,.10);
    margin-top: 18px; border:1px solid rgba(255,255,255,.6);
  }
  .panel h3 { margin-bottom: 14px; font-size: 16px; color:#3b2f6b;
    border-left: 5px solid; border-image: linear-gradient(#8b5cf6,#06b6d4) 1; padding-left: 12px; }
  .panelHeading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .panelHeading h3 { margin-bottom: 0; }
  .panelActions, .calendarToolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
  .sortControl label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
  .sortControl label > span { color: #6b6480; font-size: 12px; font-weight: 700; }
  .sortControl select { width: auto; min-width: 174px; margin: 0; padding: 7px 30px 7px 9px; background-color: #fff; }

  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media(max-width:900px){ .grid2{grid-template-columns:1fr;} }

  /* ===== 筛选钮 ===== */
  .filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
  .filters button {
    border: 1.5px solid #ddd6fe; background: #fff; color:#5b4b8a; border-radius: 999px;
    padding: 6px 15px; cursor: pointer; font-size: 13px; font-weight:600; transition: all .15s;
  }
  .filters button:hover { border-color:#8b5cf6; }
  .filters button.on { background: linear-gradient(90deg,#8b5cf6,#06b6d4); color: #fff; border-color: transparent; }

  /* ===== 表格 ===== */
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th, td { padding: 10px 10px; border-bottom: 1px solid #f0ecfb; text-align: left; vertical-align: top; }
  th { background: #f6f2ff; color:#5b4b8a; position: sticky; top: 0; }
  tr:hover td { background: #faf8ff; }

  /* ===== 标签 ===== */
  .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; color: #fff; font-weight:600; }
  .b-red    { background: linear-gradient(90deg,#fb7185,#e11d48); }
  .b-yellow { background: linear-gradient(90deg,#fbbf24,#d97706); }
  .b-green  { background: linear-gradient(90deg,#34d399,#059669); }
  .s-doing  { background: linear-gradient(90deg,#60a5fa,#2563eb); }
  .s-done   { background: linear-gradient(90deg,#4ade80,#16a34a); }
  .s-over   { background: linear-gradient(90deg,#f87171,#b91c1c); }
  .s-todo   { background: linear-gradient(90deg,#a8a29e,#78716c); }

  /* ===== 按钮 ===== */
  .btn-sm { border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 12px; color: #fff; font-weight:600; background: linear-gradient(90deg,#8b5cf6,#6d28d9); box-shadow:0 3px 8px rgba(139,92,246,.3); }
  .btn-green { background: linear-gradient(90deg,#34d399,#059669); box-shadow:0 3px 8px rgba(5,150,105,.3); }
  .btn-gray  { background: linear-gradient(90deg,#94a3b8,#64748b); box-shadow:0 3px 8px rgba(100,116,139,.25); }
  .btn-sm:hover { filter:brightness(1.07); }

  /* ===== 状态三态钮 ===== */
  .stbtn { border: 1.5px solid #e5e0f5; background: #fff; color: #7768a8; border-radius: 999px; padding: 5px 11px; cursor: pointer; font-size: 12px; margin: 0 4px 4px 0; font-weight:600; transition:all .15s; }
  .stbtn:hover { border-color:#8b5cf6; }
  .stbtn.cur-todo  { background: linear-gradient(90deg,#a8a29e,#78716c); color:#fff; border-color:transparent; }
  .stbtn.cur-doing { background: linear-gradient(90deg,#60a5fa,#2563eb); color:#fff; border-color:transparent; }
  .stbtn.cur-done  { background: linear-gradient(90deg,#4ade80,#16a34a); color:#fff; border-color:transparent; }

  details { margin-top: 5px; }
  summary { cursor: pointer; color: #7c3aed; font-size: 12px; font-weight:600; }
  ol { padding-left: 18px; margin-top: 6px; font-size: 12px; color: #555; line-height: 1.8; }
  .taskSteps { display: grid; gap: 6px; margin-top: 8px; }
  .taskStep { display: flex; gap: 5px; align-items: flex-start; color: #555; line-height: 1.5; }
  .taskStepCheck { display: grid; grid-template-columns: 18px minmax(0,auto); gap: 7px; align-items: start; min-width: 0; color: inherit; font-size: 12px; font-weight: 400; }
  .taskStep input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #16a34a; }
  .taskStep.done .taskStepText { text-decoration: line-through; color: #8b84a3; }
  .taskStep.locked { opacity: .72; }
  .stepCommentTrigger {
    flex: 0 0 auto; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    display: inline-grid; place-items: center; background: transparent; cursor: pointer; opacity: .42;
    font-size: 11px; line-height: 1; filter: grayscale(1); transition: opacity .15s, background .15s, filter .15s;
  }
  .taskStep.locked .stepCommentTrigger { opacity: .42; }
  .stepCommentTrigger:hover, .stepCommentTrigger:focus-visible, .stepCommentTrigger[aria-expanded="true"] {
    opacity: 1; background: #ede9fe; filter: none;
  }
  .stepCommentTrigger.hasComment { opacity: .9; background: #ede9fe; filter: none; }
  .stepHint { margin-top: 7px; color: #8b84a3; font-size: 11px; }

  input,select,textarea { width: 100%; padding: 9px 10px; border: 1.5px solid #e5e0f5; border-radius: 10px; font-size: 13px; margin: 4px 0 10px; font-family: inherit; background:#fbfaff; }
  input:focus,select:focus,textarea:focus { outline:none; border-color:#8b5cf6; background:#fff; }
  .formrow { margin-bottom: 4px; }
  label { font-size: 13px; color: #5b4b8a; font-weight:600; }
  .hidden { display: none; }

  /* ===== 进度条（彩虹渐变） ===== */
  .bar { height: 10px; background: #efeafb; border-radius: 999px; overflow: hidden; margin-top: 6px; }
  .bar > div { height: 100%; background: linear-gradient(90deg,#8b5cf6,#06b6d4,#34d399); border-radius:999px; }

  .modtitle { font-weight: 700; color:#3b2f6b; }
  .muted { color: #a79fc6; font-size: 12px; }

  /* ===== 负责人归纳 ===== */
  .ownerWrap { display: grid; grid-template-columns: 230px 1fr; gap: 18px; }
  @media(max-width:900px){ .ownerWrap{grid-template-columns:1fr;} }
  .ownerList { background: rgba(255,255,255,.9); border-radius: 16px; padding: 12px; box-shadow: 0 8px 24px rgba(90,70,180,.10); height: fit-content; }
  .ownerItem { width:100%; border:0; background:transparent; padding: 12px 14px; border-radius: 12px; cursor: pointer; font-size: 14px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; text-align:left; color:#4b4370; font-weight:600; transition:all .15s; }
  .ownerItem:hover { background: #f3efff; }
  .ownerItem.on { background: linear-gradient(90deg,#7c3aed,#0ea5e9); color: #fff; box-shadow:0 4px 12px rgba(124,58,237,.3); }
  .ownerItem .n { font-size: 12px; opacity: .85; background:rgba(255,255,255,.25); padding:1px 8px; border-radius:999px; }
  .ownerItem:not(.on) .n { background:#efeafd; color:#7c3aed; }

  .modGroup { border: 1px solid #eee7fb; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; background: #fbfaff; }
  .modGroup h4 { font-size: 14px; color: #7c3aed; margin-bottom: 10px; }
  .taskLine { padding: 9px 0; border-bottom: 1px dashed #ece5fa; }
  .taskLine:last-child { border-bottom: 0; }
  .statRow { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
  .statPill { background: #f3efff; color:#5b4b8a; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight:600; }

  .card { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(90,70,180,.08); }

  .syncState {
    display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px;
    border-radius: 999px; background: rgba(255,255,255,.18); font-size: 11px; font-weight: 700;
  }
  .syncState::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #fde68a; }
  .syncState.ok::before { background: #86efac; }
  .syncState.error::before { background: #fecaca; }

  .tableScroll { max-height: 620px; overflow: auto; }
  .taskTarget td { animation: taskTargetHighlight 2.4s ease-out; }
  @keyframes taskTargetHighlight {
    0%, 28% { background: #fef3c7; box-shadow: inset 4px 0 #d97706; }
    100% { background: transparent; box-shadow: inset 4px 0 transparent; }
  }
  .taskEditButton {
    border: 0; background: transparent; color: #6d28d9; padding: 6px 0 2px; cursor: pointer;
    font-size: 12px; font-weight: 700;
  }
  .taskEditButton:hover { color: #0e7490; }
  .taskLineActions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
  .taskLineActions .taskEditButton { margin-left: 4px; padding: 5px 8px; }

  .taskEditingRow td { background: #fbfaff; }
  .taskEditingRow:hover td { background: #fbfaff; }
  .taskEditGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; }
  .tableTaskEditGrid { grid-template-columns: 1fr; }
  .taskEditWide { grid-column: span 2; }
  .tableTaskEditGrid .taskEditWide { grid-column: span 1; }
  .taskEditLabel { display: block; min-width: 0; }
  .taskEditLabel > span, .stepEditRow label > span, .taskEditSectionHead {
    color: #5b4b8a; font-size: 11px; font-weight: 700;
  }
  .taskEditLabel input, .taskEditLabel select, .taskEditLabel textarea {
    margin: 3px 0 4px; min-width: 0;
  }
  .taskEditSteps { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2d9f7; }
  .taskEditSectionHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
  .stepEditRow { display: grid; grid-template-columns: minmax(0,1fr) 30px; gap: 7px; align-items: end; }
  .stepEditRow label { min-width: 0; }
  .stepEditRow textarea { margin: 3px 0 7px; resize: vertical; }
  .stepIconButton {
    width: 30px; height: 30px; border: 1.5px solid #c4b5fd; border-radius: 50%;
    background: #fff; color: #6d28d9; cursor: pointer; font-size: 18px; font-weight: 700;
    display: inline-grid; place-items: center; line-height: 1; padding: 0;
  }
  .stepIconButton:hover { background: #f3efff; border-color: #8b5cf6; }
  .stepIconButton.remove { margin-bottom: 7px; color: #be123c; border-color: #fecdd3; }
  .stepIconButton.remove:hover { background: #fff1f2; border-color: #fb7185; }
  .taskEditActions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
  .ownerTaskEditor { padding: 12px; border: 1.5px solid #c4b5fd; border-radius: 10px; background: #fff; }
  .editingTaskLine { padding: 4px 0 12px; }

  .calendarHeading { align-items: flex-start; }
  .calendarNavButtons { display: inline-flex; align-items: center; gap: 6px; }
  .calendarIconButton, .calendarTodayButton {
    height: 34px; border: 1.5px solid #ddd6fe; background: #fff; color: #5b4b8a;
    cursor: pointer; font-weight: 700;
  }
  .calendarIconButton { width: 34px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; }
  .calendarTodayButton { padding: 0 12px; border-radius: 8px; font-size: 12px; }
  .calendarIconButton:hover, .calendarTodayButton:hover { border-color: #8b5cf6; background: #f8f5ff; }
  .calendarScroll { overflow: auto; margin-top: 16px; border-radius: 8px; }
  .calendarWeekdays, .calendarGrid { min-width: 770px; display: grid; grid-template-columns: repeat(7,minmax(110px,1fr)); }
  .calendarWeekdays { border: 1px solid #e5e0f5; border-bottom: 0; background: #f6f2ff; }
  .calendarWeekdays div { padding: 9px 8px; color: #5b4b8a; text-align: center; font-size: 12px; font-weight: 700; }
  .calendarGrid { border-top: 1px solid #e5e0f5; border-left: 1px solid #e5e0f5; }
  .calendarDay {
    min-height: 126px; padding: 8px; border-right: 1px solid #e5e0f5; border-bottom: 1px solid #e5e0f5;
    background: rgba(255,255,255,.92); overflow: hidden;
  }
  .calendarDay.outside { background: #faf9fd; }
  .calendarDay.outside .calendarDayNumber { color: #b9b2ca; }
  .calendarDay.today { box-shadow: inset 0 0 0 2px #7c3aed; }
  .calendarDayNumber { width: 24px; height: 24px; display: grid; place-items: center; color: #544b72; font-size: 12px; font-weight: 800; }
  .calendarDay.today .calendarDayNumber { border-radius: 50%; color: #fff; background: #6d28d9; }
  .calendarTasks { display: grid; gap: 5px; margin-top: 4px; }
  .calendarTask {
    display: -webkit-box; padding: 5px 6px; border-left: 3px solid; border-radius: 4px;
    color: #3f3954; background: #f3f0fa; font-size: 11px; line-height: 1.35; text-decoration: none;
    overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .calendarTask span { margin-right: 4px; font-weight: 800; }
  .calendarTask:hover { filter: brightness(.96); text-decoration: underline; }
  .calendarTask.todo { border-color: #78716c; background: #f5f5f4; }
  .calendarTask.doing { border-color: #2563eb; background: #eff6ff; }
  .calendarTask.done { border-color: #16a34a; background: #f0fdf4; color: #54705d; }
  .calendarTask.overdue { border-color: #dc2626; background: #fff1f2; color: #8f2734; }

  .adminHint { color: #77708f; font-size: 12px; line-height: 1.6; margin: -6px 0 12px; }
  .adminTable { max-height: 560px; }
  .adminTable table { min-width: 940px; }
  .adminTable select { min-width: 220px; min-height: 84px; margin: 0; }
  .adminTable input[type="password"] { min-width: 150px; margin: 0; }
  .adminTable input[type="checkbox"] { width: 17px; height: 17px; margin: 4px; accent-color: #7c3aed; }
  .compactForm { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 12px; align-items: end; }
  .compactForm input { margin: 0; }
  .groupList { display: grid; gap: 6px; }
  .groupListItem { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; align-items: center; }
  .groupListItem input { margin: 0; }
  .permissionForm { display: grid; grid-template-columns: repeat(4,minmax(140px,1fr)); gap: 10px; align-items: end; }
  .permissionForm label > span { display: block; }
  .permissionForm select { margin-bottom: 0; }
  .permissionChecks { grid-column: span 3; border: 1px solid #e5e0f5; border-radius: 10px; padding: 9px 12px; display: flex; gap: 16px; flex-wrap: wrap; }
  .permissionChecks legend { padding: 0 5px; color: #5b4b8a; font-size: 12px; font-weight: 700; }
  .permissionChecks label { display: flex; align-items: center; gap: 5px; }
  .permissionChecks input { width: 16px; height: 16px; margin: 0; accent-color: #7c3aed; }
  .permissionSummary { display: grid; gap: 6px; margin-top: 16px; }
  .permissionGrant { padding: 8px 10px; border: 1px solid #ece7fa; border-radius: 8px; background: #fbfaff; font-size: 12px; }

  .loginPage { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
  .loginShell { width: min(430px,100%); position: relative; }
  .loginPanel { background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.8); border-radius: 18px; padding: 34px; box-shadow: 0 18px 50px rgba(76,55,150,.18); }
  .loginMark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg,#7c3aed,#0ea5e9); font-size: 16px; font-weight: 800; margin-bottom: 18px; }
  .loginPanel h1 { color: #3b2f6b; font-size: 22px; line-height: 1.35; }
  .loginPanel > p { color: #77708f; font-size: 13px; margin: 8px 0 22px; }
  .loginPanel label { display: block; margin-top: 8px; }
  .loginPanel .loginPasswordToggle { display: flex; align-items: center; gap: 7px; width: fit-content; margin: -2px 0 10px; color: #6b6480; font-size: 12px; cursor: pointer; }
  .loginPanel .loginPasswordToggle input { width: 16px; height: 16px; margin: 0; accent-color: #7c3aed; }
  .loginSubmit { width: 100%; height: 42px; margin-top: 8px; font-size: 14px; }
  .loginLanguage { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 10px; }
  .loginLanguage button { border: 1px solid #ddd6fe; background: #fff; color: #6b5c91; padding: 5px 9px; border-radius: 999px; cursor: pointer; font-weight: 700; }
  .loginLanguage button.active { background: #6d28d9; color: #fff; border-color: #6d28d9; }
  .loginPanel .loginError { color: #b91c1c; margin: 12px 0 0; line-height: 1.45; }

  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid rgba(14,165,233,.4); outline-offset: 2px;
  }
  button:disabled { cursor: wait; opacity: .58; filter: grayscale(.15); }

  .loadingState {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    background: rgba(246,240,255,.78); backdrop-filter: blur(6px); color: #4b4370;
    font-size: 15px; font-weight: 700;
  }
  .loadingState.hidden { display: none; }

  .toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 1100; max-width: min(420px,calc(100vw - 40px));
    padding: 11px 15px; border-radius: 10px; color: #fff; background: #4338ca;
    box-shadow: 0 8px 24px rgba(55,48,163,.28); font-size: 13px; font-weight: 700;
  }
  .toast.error { background: #b91c1c; }

  .stepCommentPopover {
    position: fixed; z-index: 1200; width: min(340px,calc(100vw - 20px)); max-height: min(420px,calc(100vh - 20px));
    overflow: auto; padding: 13px; border: 1px solid #d8d1ed; border-radius: 8px; background: #fff;
    box-shadow: 0 14px 38px rgba(53,42,93,.24); color: #49415f;
  }
  .stepCommentPopover.hidden { display: none; }
  .stepCommentHeader { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #3b2f6b; font-size: 13px; }
  .stepCommentClose {
    width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #6b6480; cursor: pointer; font-size: 19px; line-height: 1;
  }
  .stepCommentClose:hover { background: #f1edfa; }
  .stepCommentStep { margin: 6px 0 8px; overflow: hidden; color: #82799a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .stepCommentInput { min-height: 88px; margin: 0 0 7px; resize: vertical; line-height: 1.45; }
  .stepCommentText { padding: 9px 10px; border-left: 3px solid #8b5cf6; border-radius: 4px; background: #f8f6fd; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
  .stepCommentMeta { margin-top: 5px; color: #958da9; font-size: 10px; line-height: 1.4; }
  .stepCommentActions { display: flex; gap: 7px; margin-top: 9px; }

  @media(max-width:700px){
    header { padding: 24px 18px 22px; }
    header h1 { max-width: 100%; font-size: 22px; }
    .languageSwitch { top: 16px; right: 14px; }
    .userSession { position: relative; top: auto; right: auto; max-width: calc(100% - 100px); margin: 0 0 14px; }
    .wrap { padding: 14px; }
    .nav { gap: 7px; }
    .nav button { padding: 9px 13px; font-size: 13px; }
    .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .stat { min-height: 112px; }
    .panel { padding: 16px; }
    .taskListHeading, .calendarHeading { align-items: stretch; flex-direction: column; }
    .panelActions, .calendarToolbar { justify-content: space-between; width: 100%; }
    .sortControl { max-width: 100%; }
    .sortControl label { white-space: normal; }
    .sortControl select { min-width: 0; max-width: 100%; }
    .tableScroll table { min-width: 1180px; }
    .ownerList { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .ownerItem { margin-bottom: 0; padding: 10px; font-size: 12px; }
    .taskEditGrid { grid-template-columns: 1fr; }
    .taskEditWide { grid-column: span 1; }
    .compactForm, .groupListItem, .permissionForm { grid-template-columns: 1fr; }
    .permissionChecks { grid-column: span 1; }
    .loginPanel { padding: 26px 22px; }
  }