/* tm.hub — визуальный язык взят из ведомости: графа номера слева,
   моноширинные цифры, тонкие разделители граф, двойная линия итога.
   Никаких карточек с тенями: это рабочий документ, а не дашборд. */

:root {
  --steel:      #12324a;
  --steel-soft: #4a6478;
  --paper:      #f3f4f1;
  --paper-deep: #e7e9e4;
  --rule:       #c9cec8;
  --rule-soft:  #dfe2dc;
  --crit:       #a4262c;
  --crit-bg:    #f7e9e9;
  --warn:       #8a6d1f;
  --warn-bg:    #f6f0df;
  --money:      #1f5d42;
  --white:      #fff;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--paper); color: var(--steel);
  font: 15px/1.55 var(--sans); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--steel); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--steel); }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

.shell { display: flex; min-height: 100vh; }

.side { width: 216px; flex: none; border-right: 1px solid var(--rule);
        padding: 22px 0; background: var(--paper-deep); }
.brand { font: 600 17px/1 var(--mono); letter-spacing: .04em; padding: 0 20px 20px; }
.brand span { color: var(--steel-soft); }

.nav a { display: block; padding: 8px 20px; text-decoration: none;
         color: var(--steel-soft); border-left: 3px solid transparent; }
.nav a:hover { color: var(--steel); background: var(--paper); }
.nav a[aria-current] { color: var(--steel); border-left-color: var(--steel); background: var(--paper); }

.side-foot { margin-top: 28px; padding: 16px 20px 0; border-top: 1px solid var(--rule);
             font-size: 12px; color: var(--steel-soft); }
.side-foot b { display: block; font-weight: 500; color: var(--steel); }

.main { flex: 1; min-width: 0; padding: 26px 34px 72px; max-width: 1080px; }

.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
           color: var(--steel-soft); margin-bottom: 10px; }
h1 { font-size: 27px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 6px; }
h2 { font-size: 17px; font-weight: 500; margin: 34px 0 12px; }
.lede { color: var(--steel-soft); margin: 0 0 22px; max-width: 62ch; }

.totals { display: flex; flex-wrap: wrap; gap: 34px; padding: 16px 0 14px;
          border-top: 1px solid var(--steel); border-bottom: 3px double var(--steel);
          margin-bottom: 26px; }
.total-k { font: 500 11px/1 var(--mono); letter-spacing: .12em;
           text-transform: uppercase; color: var(--steel-soft); }
.total-v { font: 400 26px/1.15 var(--mono); margin-top: 7px; }
.total-v.crit { color: var(--crit); }
.total-v.money { color: var(--money); }

.ledger { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 46px 1fr auto; border-bottom: 1px solid var(--rule-soft); }
.row-no { font: 400 13px/1 var(--mono); color: var(--steel-soft);
          padding: 16px 0 0 4px; border-right: 1px solid var(--rule-soft); }
.row-body { padding: 14px 18px; min-width: 0; }
.row-amt { padding: 14px 0 14px 18px; text-align: right; white-space: nowrap;
           font: 400 16px/1.5 var(--mono); }
.row-amt.dim { color: var(--steel-soft); font-size: 13px; }
.row-title { font-size: 15px; }
.row-detail { font-size: 13.5px; color: var(--steel-soft); margin-top: 4px; }
.row-src { font: 12px/1.45 var(--mono); color: var(--steel-soft); margin-top: 7px; }

.tag { display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: .08em;
       text-transform: uppercase; padding: 4px 7px; border: 1px solid currentColor;
       border-radius: 2px; margin-bottom: 8px; }
.tag.crit { color: var(--crit); background: var(--crit-bg); }
.tag.warn { color: var(--warn); background: var(--warn-bg); }

.verdict { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.verdict button { font-size: 12.5px; padding: 4px 10px; }

.cards { border-top: 1px solid var(--rule); }
.card { display: grid; grid-template-columns: 1fr 150px 116px; gap: 20px;
        align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.card h3 { margin: 0 0 5px; font-size: 16px; font-weight: 500; }
.card p { margin: 0; font-size: 13.5px; color: var(--steel-soft); }
.card-cat { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
            color: var(--steel-soft); margin-bottom: 7px; }
.card-price { font: 400 15px/1.4 var(--mono); }
.card-price small { display: block; font-size: 12px; color: var(--steel-soft); }

.state { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.state.live { color: var(--money); }
.state.coming, .state.on_request { color: var(--steel-soft); }

.slot { border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px;
        margin-bottom: 10px; background: var(--white); }
.slot.empty { border-style: dashed; background: none; }
.slot-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.slot-name { font-size: 15px; }
.slot-req { font: 12px/1 var(--mono); color: var(--steel-soft); }
.slot-hint { font-size: 13px; color: var(--steel-soft); margin-top: 4px; }
.file { display: flex; gap: 12px; align-items: baseline; margin-top: 11px;
        padding: 9px 12px; background: var(--paper); border-radius: 2px; }
.file.warn { background: var(--warn-bg); color: var(--warn); }
.file-name { font: 13px/1.4 var(--mono); }
.file-meta { font-size: 12.5px; color: var(--steel-soft); }
.file.warn .file-meta { color: var(--warn); }

.steps { display: flex; flex-wrap: wrap; gap: 5px 14px; font: 12px/1 var(--mono);
         color: var(--steel-soft); margin: 0 0 22px; }
.steps b { font-weight: 400; color: var(--money); }

button, .btn { font: 500 13.5px/1 var(--sans); color: var(--steel); background: var(--white);
               border: 1px solid var(--steel); border-radius: 2px; padding: 9px 15px;
               cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: var(--steel); color: var(--paper); }
button[disabled] { opacity: .4; cursor: not-allowed; }
button[disabled]:hover { background: var(--white); color: var(--steel); }
.btn-primary { background: var(--steel); color: var(--paper); }
.btn-primary:hover { background: #0b2536; }

label { display: block; font-size: 13px; color: var(--steel-soft); margin-bottom: 5px; }
select, input[type=text] { font: 14px var(--sans); padding: 8px 10px; width: 100%;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--white); color: var(--steel); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
          gap: 16px; margin-bottom: 20px; }

.note { border-left: 3px solid var(--steel); padding: 12px 16px; background: var(--paper-deep);
        font-size: 13.5px; margin: 22px 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.actions .hint { font-size: 12.5px; color: var(--steel-soft); }
.empty { border: 1px dashed var(--rule); border-radius: 3px; padding: 34px 20px;
         text-align: center; color: var(--steel-soft); }

.login { max-width: 400px; margin: 14vh auto; padding: 0 20px; }
.login .brand { padding-left: 0; font-size: 21px; }

@media (max-width: 760px) {
  .shell { display: block; }
  .side { width: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 16px 0 8px; }
  .nav { display: flex; gap: 4px; padding: 0 14px; flex-wrap: wrap; }
  .nav a { border-left: 0; border-bottom: 3px solid transparent; padding: 7px 10px; }
  .nav a[aria-current] { border-left: 0; border-bottom-color: var(--steel); }
  .side-foot { display: none; }
  .main { padding: 20px 16px 56px; }
  .card { grid-template-columns: 1fr; gap: 10px; }
  .row { grid-template-columns: 34px 1fr; }
  .row-amt { grid-column: 2; text-align: left; padding: 0 0 14px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }