:root{--bg:#f7fafc;--panel:#fff;--text:#0f172a;--muted:#64748b;--line:#e2e8f0}
html,body{margin:0;padding:0;background:var(--bg);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text)}

/* ====== Лэйаут ====== */
.shell{
  max-width:1480px;
  margin:24px auto;
  padding:0 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;  /* справа узкая колонка */
  gap:24px;
  align-items:start;
}
/* Переключаемся на 1 колонку раньше, чтобы избежать скролла */
@media (max-width: 1400px){
  .shell{ grid-template-columns:1fr; }
}

/* ====== Твой исходный контейнер (левый) ====== */
.wrap{
  background:var(--panel);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 6px 18px rgba(2,6,23,.06);
  padding:16px 18px;
  /* убрал transform: scale(.85) чтобы не ломать сетку; 
     если захочешь «сжать», можно снижать font-size в wrap, например 0.95em */
}
h1{margin:0 0 12px;font-size:24px}
h2{margin:18px 0 10px;font-size:18px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;align-items:center}
button{border:0;border-radius:10px;padding:10px 14px;font-weight:700;color:#fff;cursor:pointer}
.b-copydown{background:#0d9488}
.b-copyword{background:#4f46e5}
.b-snap{background:#0ea5e9}
.b-add{background:#334155}
.b-clearall{background:#e11d48;margin-left:auto}
.b-clear{background:#e11d48;padding:6px 10px;font-size:12px}
.b-remove{background:#475569;padding:6px 10px;font-size:12px}

.tablebox{
  border:1px solid var(--line);
  border-radius:12px;
  overflow-x:auto;
  overflow-y:visible;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
.tablebox::-webkit-scrollbar{height:8px}
.tablebox::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}
.tablebox::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.tablebox::-webkit-scrollbar-thumb:hover{background:#94a3b8}
table{width:100%;min-width:950px;border-collapse:collapse;table-layout:fixed;font-size:10px}

/* different table headers */
thead.thead-repay th{background:#e0f2fe}
thead.thead-io    th{background:#fef3c7}
thead th{
  border-bottom:1px solid var(--line);padding:6px 10px;color:#0f172a;
  text-transform:uppercase;letter-spacing:.04em;font-size:11px;text-align:left
}

td{padding:6px 10px;border-top:1px solid var(--line);vertical-align:middle;overflow:hidden}
th,td{border-right:1px solid var(--line)}
tr > th:last-child, tr > td:last-child{border-right:none}

/* column widths */
col.c-yrs   {width:58px}
col.c-mths  {width:58px}
col.c-val   {width:110px}
col.c-loan  {width:110px}
col.c-ltv   {width:55px}
col.c-pty   {width:57px}
col.c-rate  {width:79px}
col.c-fee   {width:86px}
col.c-added {width:57px}
col.c-mon   {width:66px}
col.c-tot   {width:100px}
col.c-act   {width:150px}

td.col-mon{background:#ecfdf5;font-weight:700;white-space:nowrap}
td.col-tot{font-weight:700;white-space:nowrap}

td.num, th.num{text-align:right}
.muted{color:var(--muted);font-size:12px;margin:8px 4px 0}

/* inputs */
input[type="number"], input[type="text"]{
  width:100%; min-width:0; box-sizing:border-box;
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; outline:none;
  text-align:right; line-height:18px;
}
td.chk{text-align:center}
.out{white-space:nowrap;font-weight:600; line-height:18px}
.ltv.bad{background:#fff1f2} .ltv.warn{background:#fffbeb} .ltv.ok{background:#ecfdf5}
.actions{display:flex;gap:6px;justify-content:flex-end}

/* remove number spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

/* conditional colouring (TOTAL) */
.cmp-low  { background:#ecfdf5 !important; color:#065f46; }
.cmp-2nd  { background:#eff6ff !important; color:#1e3a8a; }
.cmp-mid  { background:#fffbeb !important; color:#92400e; }
.cmp-high { background:#fef2f2 !important; color:#991b1b; }

/* toasts */
.toast-stack{ position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; z-index:9999; pointer-events:none; }
.toast{
  min-width:240px; max-width:380px; padding:10px 12px; border-radius:10px; box-shadow:0 6px 18px rgba(2,6,23,.15);
  background:#111827; color:#fff; font-size:13px; line-height:1.25; pointer-events:auto;
  opacity:0; transform:translateY(10px); transition:transform .2s ease, opacity .2s ease;
}
.toast.show{ opacity:1; transform:translateY(0) }
.toast.success{ background:#065f46 } .toast.info{ background:#1e40af } .toast.error{ background:#991b1b }

/* screenshot clone */
.snap-clone{ display:inline-block !important; width:auto !important; overflow:visible !important; background:#fff;border:1px solid var(--line);border-radius:12px; }
.snap-clone table{width:auto !important;table-layout:auto !important}
.snap-clone, .snap-clone table, .snap-clone th, .snap-clone td, .snap-clone input{font-size:11px !important}
.snap-clone th, .snap-clone td{padding:8px 6px}
.snap-clone input{padding:7px 6px;height:auto;line-height:18px}
.snap-clone .out{line-height:18px}
.snap-clone th:nth-child(1), .snap-clone td:nth-child(1){width:50px}
.snap-clone th:nth-child(2), .snap-clone td:nth-child(2){width:50px}
.snap-clone th:nth-child(6), .snap-clone td:nth-child(6){width:52px}
.snap-clone th:nth-child(7), .snap-clone td:nth-child(7){width:58px}
.snap-clone th:nth-child(8), .snap-clone td:nth-child(8){width:68px}
.snap-clone th:nth-child(9), .snap-clone td:nth-child(9){width:56px}
.snap-clone th:nth-child(10), .snap-clone td:nth-child(10){width:68px}

/* tutorial */
.help-card{ border:1px solid var(--line); background:#f8fafc; border-radius:12px; padding:10px 12px; margin:10px 0 14px; }
.help-card summary{ cursor:pointer; list-style:none; font-weight:700; color:#0f172a; }
.help-card .help-body{margin-top:8px; color:#334155; font-size:13px}
.legend{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 2px}
.swatch{display:inline-block; border:1px solid var(--line); border-radius:6px; padding:2px 6px; font-size:12px}
.sw-low{background:#ecfdf5; color:#065f46} .sw-2nd{background:#eff6ff; color:#1e3a8a}
.sw-mid{background:#fffbeb; color:#92400e} .sw-high{background:#fef2f2; color:#991b1b}

/* ====== правая колонка (контейнер aside) ====== */
.aside{ display:block; }