:root{
  --navy:#1c2b3a;
  --navy-2:#263b50;
  --steel:#5c7386;
  --paper:#f6f7f5;
  --line:#d8dcdd;
  --accent:#b5651d;
  --good:#3f6f4e;
  --warn:#a63d3d;
  --white:#ffffff;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:"IBM Plex Sans", Arial, sans-serif;
  padding:28px 16px 60px;
}
.wrap{max-width:1180px;margin:0 auto;}

header.top{
  background:var(--navy);
  color:var(--white);
  padding:22px 32px;
  border-radius:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}
header.top h1{
  font-family:"Georgia", serif;
  font-weight:600;
  font-size:1.4rem;
  margin:0;
  letter-spacing:.2px;
}
header.top .sub{color:#b9c6d1;font-size:.8rem;margin-top:4px;}

.login-box{
  max-width:360px;
  margin:80px auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px 30px;
  text-align:center;
}
.login-box h1{font-size:1.3rem;margin:0 0 6px;color:var(--navy);}
.login-box .sub{font-size:.82rem;color:var(--steel);margin-bottom:20px;}
.login-box form{display:flex;flex-direction:column;gap:14px;text-align:left;}
.login-box .field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin-bottom:4px;display:block;}
.login-box input{width:100%;padding:9px 10px;border:1px solid #c7ccc2;border-radius:4px;font-family:inherit;font-size:.92rem;}
.login-box .btn{margin-top:4px;}
.error-msg{color:var(--warn);font-size:.8rem;min-height:1.2em;margin-top:6px;}

.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.whoami{font-size:.8rem;color:#c9d4dd;margin-right:6px;}
.header-actions .btn.secondary{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.35);
}
.header-actions .btn.secondary:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.55);
}

.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 20px;
  margin-bottom:18px;
  display:none;
}
.panel.open{display:block;}
.panel h3{margin:0 0 12px;font-size:.95rem;color:var(--navy-2);}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.inline-form input{padding:8px 10px;border:1px solid #c7ccc2;border-radius:4px;font-family:inherit;font-size:.86rem;}

.controls-bar{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px 20px;
  margin-bottom:18px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);}
.field select, .field input{
  padding:8px 10px;
  border:1px solid #c7ccc2;
  border-radius:4px;
  font-family:inherit;
  font-size:.92rem;
  background:#fffdf7;
  min-width:220px;
}
.field select:focus, .field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,101,29,.15);}

.btn{
  padding:9px 16px;
  border-radius:4px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-family:inherit;
  font-size:.85rem;
  cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:var(--navy-2);}
.btn.secondary{background:transparent;color:var(--navy);border-color:#c7ccc2;}
.btn.secondary:hover{background:#f0f2ee;}
.btn.danger{background:transparent;color:var(--warn);border-color:var(--warn);padding:5px 10px;font-size:.78rem;}
.btn.danger:hover{background:#fbeeee;}
#recalculateBtn{padding:9px 16px;font-size:.85rem;}
.btn.small{padding:6px 12px;font-size:.78rem;}

.status-tag{font-size:.78rem;color:var(--steel);}
.status-tag.saved{color:var(--good);}
.status-tag.dirty{color:var(--accent);}

/* Employee admin panel */
.employee-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;}
.employee-list li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;background:#fafaf8;border:1px solid var(--line);border-radius:4px;font-size:.86rem;
}
.employee-list li.inactive{opacity:.5;}
.employee-list .emp-name{font-weight:600;}
.employee-list .emp-login{color:var(--steel);font-size:.8rem;}
.employee-list .emp-actions{display:flex;gap:6px;}
.add-employee-row{display:flex;gap:10px;flex-wrap:wrap;}
.add-employee-row input{flex:1;min-width:150px;}

section.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  margin-bottom:22px;
  overflow:hidden;
}
.card h2{
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--navy-2);
  background:#eef1ee;
  margin:0;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
}
.card h2 small{display:block;text-transform:none;letter-spacing:normal;color:var(--steel);font-size:.72rem;margin-top:2px;}

table{width:100%;border-collapse:collapse;font-size:.86rem;}
th, td{border:1px solid var(--line);padding:9px 10px;vertical-align:top;text-align:left;}
thead th{background:#f0f2ee;color:var(--navy-2);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;}
tbody tr:nth-child(even){background:#fafaf8;}
.stage-cell{font-weight:600;color:var(--navy);background:#f4f0e8 !important;width:150px;}
.num-cell{text-align:center;color:var(--steel);width:70px;}
.plan-cell{text-align:center;color:var(--steel);width:90px;}
td.crit{width:230px;}
.th-num{width:32px;}
.th-stage{width:150px;}
.th-maxball{width:60px;}
.th-plan{width:90px;}
.th-fact{width:90px;}

input[type="number"], input[type="text"]{
  width:100%;padding:6px 7px;border:1px solid #c7ccc2;border-radius:3px;
  font-family:inherit;font-size:.86rem;background:#fffdf7;color:var(--navy);
  -moz-appearance:textfield;
}
input[type="number"]:focus, input[type="text"]:focus, textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,101,29,.15);
}
/* Chrome/Safari draw built-in up/down spinner arrows on number inputs — on a
   narrow table column these eat almost all the width, leaving no visible
   room for the digits themselves (looks like an empty box). Remove them. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
textarea{
  width:100%;min-height:52px;resize:vertical;padding:6px 7px;border:1px solid #c7ccc2;border-radius:3px;
  font-family:inherit;font-size:.83rem;background:#fffdf7;line-height:1.35;color:var(--navy);
}

table.calc thead th{background:var(--navy);color:#fff;}
table.calc td.result{font-variant-numeric:tabular-nums;text-align:right;}
tr.total-row td{font-weight:700;background:#eef1ee;border-top:2px solid var(--navy);}
.pct-bad{color:var(--warn);}
.pct-good{color:var(--good);}

.base-row{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:16px;
  flex-wrap:wrap;background:#f4f0e8;border-top:1px solid var(--line);
}
.base-row label{font-weight:600;color:var(--navy);}
.hint{font-size:.75rem;color:var(--steel);}
.base-row .hint{display:block;margin-top:3px;}
.base-row input{max-width:220px;font-size:1rem;font-weight:600;}
.base-value{font-size:1.1rem;font-weight:700;color:var(--navy);padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:4px;min-width:140px;text-align:right;}
.frozen-note{font-size:.78rem;color:var(--steel);text-align:right;margin:-8px 0 18px;padding:0 4px;}
.frozen-note.is-frozen{color:var(--good);}

.result-banner{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;border-radius:6px;padding:24px 32px;flex-wrap:wrap;gap:20px;margin-bottom:18px;
}
.result-banner .label{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:#b9c6d1;margin-bottom:6px;}
.result-banner .value{font-size:2.2rem;font-weight:700;font-family:"Georgia", serif;color:var(--accent);}
.result-banner .value span.cur{font-size:1.05rem;color:#dfe6ea;margin-left:6px;}
.breakdown-mini{display:flex;gap:26px;flex-wrap:wrap;}
.breakdown-mini div{text-align:right;}
.breakdown-mini .k{font-size:.7rem;color:#b9c6d1;text-transform:uppercase;letter-spacing:.05em;}
.breakdown-mini .v{font-size:1.02rem;font-weight:600;}

.progress-cell{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.progress-track{
  position:relative;flex:1;max-width:110px;height:8px;border-radius:99px;
  background:#e6e3d8;overflow:hidden;
}
.progress-track.lg{max-width:none;height:14px;}
.progress-fill{
  height:100%;border-radius:99px;
  transition:width .35s ease, background-color .35s ease;
}
.progress-pct{font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}

.overall-progress-card{
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:16px 20px;margin-bottom:18px;
}
.op-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.82rem;color:var(--navy-2);font-weight:600;margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.04em;
}
.op-label .op-pct{font-size:1rem;font-variant-numeric:tabular-nums;color:var(--navy);}

.empty-state{
  padding:40px 20px;text-align:center;color:var(--steel);font-size:.92rem;
}
#mainScreen.in-summary{margin-top:24px;padding-top:22px;border-top:2px solid var(--line);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

.info-tip{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;min-width:16px;border-radius:50%;
  background:var(--steel);color:#fff;font-size:.66rem;font-weight:700;
  cursor:help;margin-left:5px;vertical-align:middle;
  user-select:none;line-height:1;
}
.info-tip:hover, .info-tip:focus, .info-tip.show{outline:none;background:var(--accent);}
.plan-cell .info-tip{margin-left:4px;}
.comment-tip-row{text-align:right;margin-bottom:3px;}

/* The tooltip bubble itself is a single shared element appended to <body>
   and positioned with JS (position:fixed, viewport coordinates) — this way
   it always renders above everything and is never clipped by the table's
   horizontal-scroll container or the card's rounded-corner overflow, no
   matter where in the table the "?" icon sits. */
.tooltip-portal{
  position:fixed;
  max-width:220px;
  background:var(--navy);color:#fff;
  padding:8px 10px;border-radius:5px;
  font-size:.72rem;font-weight:400;line-height:1.4;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  z-index:1000;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .12s ease;
}
.tooltip-portal.visible{opacity:1;visibility:visible;}
.tooltip-portal::after{
  content:'';
  position:absolute;
  left:var(--arrow-left, 50%);
  transform:translateX(-50%);
  border:5px solid transparent;
}
.tooltip-portal.arrow-top::after{top:100%;border-top-color:var(--navy);}
.tooltip-portal.arrow-bottom::after{bottom:100%;border-bottom-color:var(--navy);}


@media (max-width:720px){
  body{padding:16px 10px 40px;}
  header.top{flex-direction:column;align-items:flex-start;padding:18px 20px;}
  .header-actions{width:100%;}
  .header-actions .btn{flex:1 1 auto;text-align:center;}
  .whoami{width:100%;margin:0 0 6px;}

  .controls-bar, .panel, .inline-form{flex-direction:column;align-items:stretch;}
  .controls-bar .field, .controls-bar > .btn, .controls-bar > .status-tag{width:100%;}
  .field select, .field input{min-width:0;width:100%;}
  .inline-form > *{width:100%;}
  .inline-form label{margin-top:6px;}

  table{font-size:.78rem;}
  th, td{padding:7px 8px;}
  .stage-cell{width:auto;}
  td.crit{width:auto;min-width:150px;}
  .progress-track{max-width:60px;}
  .progress-pct{min-width:44px;font-size:.75rem;}

  /* Криterии выполнения: сжимаем второстепенные колонки, чтобы у "Факт" было
     достаточно места под палец на телефоне */
  #criteriaTable .th-num, #criteriaTable .num-cell{width:26px;padding-left:4px;padding-right:4px;}
  #criteriaTable .th-maxball{width:44px;}
  #criteriaTable .th-stage, #criteriaTable .stage-cell{width:70px;font-size:.72rem;}
  #criteriaTable .th-plan, #criteriaTable .plan-cell{width:64px;font-size:.72rem;}
  #criteriaTable .th-fact{width:120px;}
  #criteriaTable td:has(textarea){min-width:160px;}
  #criteriaTable .fact-input{
    min-height:44px;font-size:16px;padding:8px 10px;text-align:center;
  }
  #criteriaTable .comment-input{font-size:16px;min-height:64px;}

  .result-banner{flex-direction:column;align-items:flex-start;}
  .breakdown-mini{width:100%;flex-direction:column;gap:10px;}
  .breakdown-mini div{text-align:left;}

  .base-row{flex-direction:column;align-items:flex-start;gap:8px;}
  .base-value{width:100%;text-align:left;}

  .frozen-note{text-align:left;}
  #recalculateRow{text-align:left !important;}

  .employee-list li{flex-direction:column;align-items:flex-start;gap:8px;}
  .employee-list .emp-actions{width:100%;}
  .employee-list .emp-actions .btn{flex:1;}

  .add-employee-row{flex-direction:column;}
  .add-employee-row input{min-width:0;}

  .login-box{margin:40px auto;padding:26px 20px;}
}

@media (max-width:480px){
  header.top h1{font-size:1.2rem;}
  .card h2{font-size:.85rem;padding:10px 14px;}
  .result-banner .value{font-size:1.8rem;}
  table{font-size:.72rem;}
  th, td{padding:6px 6px;}
  .btn{padding:8px 12px;font-size:.82rem;}
  .btn.small{padding:6px 10px;font-size:.75rem;}
}

/* ==================== CRM: вкладки, таблицы, модалки ==================== */

.main-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.main-tabs button{
  padding:9px 18px;border:1px solid var(--line);background:var(--white);color:var(--steel);
  border-radius:5px;font-family:inherit;font-size:.86rem;cursor:pointer;transition:all .15s;
}
.main-tabs button:hover{border-color:var(--navy);color:var(--navy);}
.main-tabs button.active{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600;}

.crm-view{display:none;}
.crm-view.open{display:block;}

.crm-toolbar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--line);background:#fafaf8;
}
.crm-toolbar input[type="search"]{
  flex:1;min-width:200px;padding:9px 12px;border:1px solid #c7ccc2;border-radius:4px;
  font-family:inherit;font-size:16px;background:#fffdf7;
}
.crm-toolbar input[type="search"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,101,29,.15);}
.count-tag{font-size:.78rem;color:var(--steel);white-space:nowrap;}
.crm-empty{padding:26px 20px;color:var(--steel);font-size:.86rem;text-align:center;}
.card-pad{padding:16px 20px;}

td.crm-dt{white-space:nowrap;color:var(--steel);font-size:.8rem;}
td.crm-name{font-weight:600;}
tbody tr.row-new{animation:crmRowNew 1.6s ease-out;}
@keyframes crmRowNew{0%{background:#fdf0dd;}100%{background:transparent;}}
.src-badge{
  display:inline-block;padding:2px 8px;border-radius:10px;background:#eef1ee;
  color:var(--navy-2);font-size:.74rem;white-space:nowrap;
}
.crm-muted{color:var(--steel);}
.crm-edit-btn{padding:5px 10px;font-size:.76rem;white-space:nowrap;}

.link-chip{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid #cdd8d0;
  border-radius:11px;background:#f2f6f2;color:var(--good);font-size:.76rem;cursor:pointer;white-space:nowrap;
  font-family:inherit;
}
.link-chip:hover{border-color:var(--good);}
.link-chip .rm{color:var(--warn);margin-left:2px;font-weight:700;cursor:pointer;}
.linked-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}

/* Настройки CRM: источники */
.source-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;}
.source-list li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 12px;background:#fafaf8;border:1px solid var(--line);border-radius:4px;font-size:.86rem;
}
.add-source-row{display:flex;gap:10px;flex-wrap:wrap;}
.add-source-row input{flex:1;min-width:180px;padding:8px 10px;border:1px solid #c7ccc2;border-radius:4px;font-family:inherit;font-size:16px;background:#fffdf7;}
.add-source-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,101,29,.15);}

/* Модалки */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(28,43,58,.45);display:none;
  align-items:flex-start;justify-content:center;padding:40px 14px;z-index:100;overflow-y:auto;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--white);border-radius:8px;max-width:640px;width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden;
}
.modal-head{background:var(--navy);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{margin:0;font-size:1rem;font-family:Georgia, serif;font-weight:600;}
.modal-close{background:none;border:none;color:#b9c6d1;font-size:1.3rem;cursor:pointer;line-height:1;padding:2px 6px;}
.modal-close:hover{color:#fff;}
.modal-body{padding:18px 20px;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;background:#fafaf8;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
.form-grid .full{grid-column:1 / -1;}
.form-grid .field input,.form-grid .field select,.form-grid .field textarea{
  padding:8px 10px;border:1px solid #c7ccc2;border-radius:4px;font-family:inherit;
  font-size:16px;background:#fffdf7;color:var(--navy);width:100%;min-height:40px;min-width:0;
}
.form-grid .field textarea{min-height:56px;resize:vertical;line-height:1.35;}
.form-grid .field label .req{color:var(--warn);}

.pick-list{list-style:none;margin:6px 0 0;padding:0;max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:4px;background:#fff;}
.pick-list li{
  padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.86rem;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.pick-list li:last-child{border-bottom:none;}
.pick-list li:hover{background:#fdf6ec;}
.pick-list li .sub{color:var(--steel);font-size:.78rem;}
.pick-list li.pick-empty{cursor:default;color:var(--steel);justify-content:center;}
.pick-list li.pick-empty:hover{background:transparent;}

/* Тост */
.crm-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--navy);color:#fff;padding:11px 22px;border-radius:6px;font-size:.86rem;
  box-shadow:0 6px 24px rgba(0,0,0,.3);transition:transform .25s;z-index:200;max-width:90vw;
}
.crm-toast.show{transform:translateX(-50%) translateY(0);}

@media (max-width:640px){
  .form-grid{grid-template-columns:1fr;}
  .main-tabs button{flex:1 1 45%;}
  .crm-toolbar{padding:12px 14px;}
  .crm-toolbar .btn{width:100%;}
  .modal-backdrop{padding:14px 8px;}
  .source-list li{flex-wrap:wrap;}
}

/* «Войти как»: заметная кнопка возврата в админский режим */
.btn.impersonate-back{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.impersonate-back:hover{background:#9c5518;border-color:#9c5518;}

/* ==================== Этап 2: плюсики и чипы в отчёте ==================== */
.comment-wrap{position:relative;}
.comment-wrap textarea.comment-input{padding-right:34px;}
.add-link-btn{
  position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--accent);background:#fff;color:var(--accent);font-size:1.05rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s;
}
.add-link-btn:hover{background:var(--accent);color:#fff;}
.linked-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.linked-items:empty{margin-top:0;}

.mode-switch{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-bottom:16px;}
.mode-switch button{
  flex:1;padding:9px 10px;border:none;background:#fafaf8;color:var(--steel);
  font-family:inherit;font-size:.84rem;cursor:pointer;
}
.mode-switch button.active{background:var(--navy);color:#fff;font-weight:600;}

.linker-search{
  width:100%;padding:9px 12px;border:1px solid #c7ccc2;border-radius:4px;
  font-family:inherit;font-size:16px;background:#fffdf7;
}
.linker-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,101,29,.15);}
#linkerList{max-height:260px;}

.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.accent:hover{background:#9c5518;border-color:#9c5518;}

@media (max-width:640px){
  .add-link-btn{width:30px;height:30px;top:4px;right:4px;}
  .comment-wrap textarea.comment-input{padding-right:38px;}
}

/* Несколько контактов в ячейке проектов + колонка суммы */
.chip-stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
td.amount-cell{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;}

/* Подвкладки внутри «Мотивации» и «Настроек» */
.subtabs{display:none;gap:8px;flex-wrap:wrap;margin:0 0 12px;}
.subtabs.open{display:flex;}
.subtabs button{
  padding:7px 14px;border:1px solid var(--line);background:var(--white);color:var(--steel);
  border-radius:4px;font-family:inherit;font-size:.8rem;cursor:pointer;transition:all .15s;
}
.subtabs button:hover{border-color:var(--navy);color:var(--navy);}
.subtabs button.active{background:var(--navy-2);border-color:var(--navy-2);color:#fff;font-weight:600;}

/* Комментарий с плашками прямо в тексте (contenteditable) */
.comment-box{
  position:relative;border:1px solid #c7ccc2;border-radius:3px;background:#fffdf7;
}
.comment-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,101,29,.15);}
.comment-editable{
  width:100%;min-height:48px;padding:6px 34px 6px 7px;
  font-family:inherit;font-size:16px;line-height:1.5;color:var(--navy);
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  cursor:text;
}
.comment-editable:focus{outline:none;}
.comment-editable .link-chip{
  display:inline;padding:1px 8px;margin:0 1px;vertical-align:baseline;
  cursor:pointer;user-select:none;white-space:nowrap;
}
.comment-editable .link-chip .rm{cursor:pointer;}
@media (max-width:640px){
  .comment-editable{padding-right:40px;}
}

/* Запросы доступа к контактам + скрытые значения */
.access-requests{
  background:#fdf6ec;border:1px solid var(--accent);border-radius:6px;
  padding:12px 16px;margin-bottom:14px;
}
.access-requests .ar-title{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#7a4a17;
  font-weight:600;margin-bottom:8px;
}
.access-requests .ar-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:7px 0;border-top:1px dashed #e3cfae;font-size:.86rem;
}
.access-requests .ar-row:first-of-type{border-top:none;}
.access-requests .ar-actions{display:flex;gap:8px;}
.hidden-val{color:#b9beb8;letter-spacing:2px;cursor:default;}

/* Закрытый период и режим просмотра РОПа */
.closed-tag{
  display:inline-block;padding:5px 12px;border-radius:4px;font-size:.8rem;
  background:#f4ece0;border:1px solid var(--accent);color:#7a4a17;white-space:nowrap;
}
.comment-editable.locked{background:#f3f4f2;color:var(--steel);cursor:default;}
#criteriaTable input:disabled, #criteriaTable textarea:disabled{background:#f3f4f2;color:var(--steel);}

/* Панель назначения подопечных РОПу */
.rop-panel{
  width:100%;margin-top:10px;padding:12px 14px;background:#fafaf8;
  border:1px dashed var(--line);border-radius:5px;
}
.rop-panel .rop-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin-bottom:8px;}
.rop-check{display:flex;align-items:center;gap:8px;font-size:.88rem;padding:4px 0;cursor:pointer;}
.rop-check input{width:16px;height:16px;min-height:0;}

/* Баннер обновления и заглушка */
.sys-banner{
  position:sticky;top:0;z-index:300;text-align:center;
  background:#fff3cd;border-bottom:2px solid #e0a800;color:#6b5200;
  padding:10px 16px;font-size:.9rem;font-weight:600;
}
.sys-banner.active-mode{background:#fdeaea;border-bottom-color:var(--warn);color:#7a2626;}
.maintenance-overlay{
  position:fixed;inset:0;z-index:500;background:var(--navy);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.mo-box{text-align:center;color:#fff;max-width:520px;}
.mo-box .mo-icon{font-size:3rem;margin-bottom:14px;}
.mo-box h2{font-family:Georgia, serif;font-size:1.6rem;margin:0 0 12px;}
.mo-box p{color:#b9c6d1;line-height:1.6;margin:0 0 8px;}
.mo-box .mo-sub{font-size:.82rem;color:#7d93a6;}
.mnt-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.mnt-row > div{flex:1;min-width:260px;}
.mnt-row .hint{margin-top:4px;}

/* Значок выгрузки в Битрикс24 */
.b24-badge{
  display:inline-block;padding:1px 6px;border-radius:3px;font-size:.66rem;font-weight:700;
  background:#e6f0fa;color:#2066b0;border:1px solid #bcd6ee;vertical-align:middle;white-space:nowrap;
}
button.b24-badge{cursor:pointer;font-family:inherit;}
button.b24-badge:hover{background:#d3e6f8;border-color:#8fbde6;}