/* Атрибут hidden должен побеждать любые display-правила ниже. */
[hidden] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --canvas: #121212; --surface: #191919; --surface-2: #1F1F1F;
  --ink: #EDEDEA; --ink-2: #A5A59F; --ink-3: #75756F;
  --line: #2A2A2A; --line-2: #383836;
  --red: #D96A62; --red-bg: #2A1C1B;
  --amber: #D6A052; --green: #6FA98A;
}

body {
  background: var(--canvas); color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 13px; font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 1440px; margin: 0 auto; }

.top { display: flex; align-items: flex-end; gap: 16px; padding: 18px 24px 14px; border-bottom: 1px solid var(--line); }
.top h1 { font-size: 19px; font-weight: 630; letter-spacing: -.4px; }
.sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search { width: 210px; height: 31px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface);
          padding: 0 10px; color: var(--ink-3); font-size: 12.5px; font-family: inherit; }
.search:focus { outline: 2px solid #3E3E3A; color: var(--ink); }
.btn { height: 31px; padding: 0 13px; border-radius: 7px; background: #EDEDEA; color: #141414; font-size: 12.5px;
       font-weight: 560; border: none; cursor: pointer; font-family: inherit; }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.stale { margin: 14px 24px 0; background: var(--red-bg); border: 1px solid #432A28; border-radius: 9px;
         padding: 10px 13px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #EFC9C6; }
.stale .dot { width: 6px; height: 6px; border-radius: 1px; background: var(--red); flex: none; }
.stale b { color: #F4D7D4; font-weight: 600; }
.stale button { margin-left: auto; background: none; border: 1px solid #5A3633; color: #EFC9C6; border-radius: 6px;
                padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }

.blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 24px 0; }
.block { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
         cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
.block:hover { border-color: #3E3E3A; }
.block.on { border-color: #4A4A45; background: var(--surface-2); }
.block .t { font-size: 11.5px; color: var(--ink-3); }
.block .v { font-size: 22px; font-weight: 620; letter-spacing: -.8px; margin-top: 3px; }
.block .d { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.block.b1 .v { color: var(--amber); } .block.b3 .v { color: var(--red); }

.bar { display: flex; align-items: center; gap: 14px; padding: 14px 24px 10px; }
.cnt { font-size: 12px; color: var(--ink-3); }
.chips { display: flex; gap: 12px; margin-left: auto; }
.chip { background: none; border: none; color: var(--ink-3); font-size: 12.5px; cursor: pointer;
        padding: 2px 0; border-bottom: 1.5px solid transparent; font-family: inherit; }
.chip:hover { color: var(--ink-2); }
.chip.on { color: var(--ink); border-bottom-color: var(--ink); }

table { width: calc(100% - 48px); margin: 0 24px; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
th { text-align: left; font-size: 10.5px; font-weight: 500; color: var(--ink-3); padding: 8px 8px;
     border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 8px 8px; border-bottom: 1px solid #232323; font-size: 12px; vertical-align: middle; }
tbody tr.row { cursor: pointer; }
tbody tr.row:hover td { background: #1E1E1E; }
tbody tr.row.open td { background: #202020; }
.num { font-weight: 570; font-size: 13px; }
.days { display: inline-flex; align-items: center; gap: 6px; }
.days i { width: 6px; height: 6px; border-radius: 1px; flex: none; }
.days.r i { background: var(--red); } .days.a i { background: var(--amber); } .days.g i { background: var(--green); }
.days span { color: var(--ink-2); }

.cc { font-size: 11.5px; white-space: nowrap; }
.cc.ok { color: var(--green); } .cc.mid { color: var(--amber); } .cc.bad { color: var(--red); }
.cc.off, .cc.none { color: #5F5F5A; }

.flags { display: flex; flex-wrap: wrap; gap: 4px; }
.fl { font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.fl.b1 { color: #E4C08B; border-color: #4A3B24; background: #241E15; }
.fl.b2 { color: #B9B9B3; border-color: #3A3A36; background: #232322; }
.fl.b3 { color: #EDA9A3; border-color: #4A2A27; background: #241A19; }
.fl.b4 { color: #9FC4B2; border-color: #2C4A3C; background: #17221D; }
.who { font-size: 12px; color: var(--ink-2); }
.none-label { color: var(--ink-3); font-size: 11.5px; }
.act button { height: 26px; min-width: 88px; border: 1px solid var(--line-2); background: transparent; color: var(--ink);
              border-radius: 6px; font-size: 11.5px; cursor: pointer; font-family: inherit; padding: 0 9px; }
.act button:hover { background: var(--surface-2); }
.act button.done { border-color: #3B5548; color: var(--green); }

tr.detail td { background: #1B1B1B; border-bottom: 1px solid #262626; padding: 12px 14px 14px; }
.det { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.det h4 { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-bottom: 6px; }
.kv { display: flex; gap: 8px; font-size: 12px; padding: 3px 0; }
.kv b { color: var(--ink-2); font-weight: 400; min-width: 96px; }
.kv span { color: var(--ink); }
.kv span.miss { color: var(--ink-3); }
.det .hint { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid #262626; padding-top: 9px; }

.empty { padding: 40px 24px; color: var(--ink-3); font-size: 13px; }
.foot { display: flex; gap: 18px; padding: 12px 24px 24px; font-size: 11.5px; color: var(--ink-3); }
.foot .sp { margin-left: auto; }

/* --- вход и служебные ссылки --- */
.btn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
a.btn.ghost { text-decoration: none; display: inline-flex; align-items: center; }
.login { display: flex; justify-content: center; padding: 70px 24px; }
.login-card { width: 330px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.login-card .t { font-size: 15px; font-weight: 600; }
.login-card .d { font-size: 12px; color: var(--ink-3); margin: 4px 0 16px; }
.login-card form { display: flex; flex-direction: column; gap: 9px; }
.login-card input { height: 34px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-2);
                    padding: 0 10px; color: var(--ink); font-family: inherit; font-size: 13px; }
.login-card input:focus { outline: 2px solid #3E3E3A; }
.login-card .btn { margin-top: 6px; }
.err { margin-top: 10px; font-size: 12px; color: var(--red); }

/* --- шаг 1 --- */
.hero { padding: 26px 24px 16px; }
.hero-t { font-size: 17px; font-weight: 620; letter-spacing: -.3px; }
.hero-d { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; max-width: 620px; }
.blocks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.blocks.big .block { padding: 16px 18px; }
.blocks.big .block .v { font-size: 30px; margin-top: 6px; }
.blocks.big .block .t { font-size: 12.5px; }
.block.b1 .v { color: var(--ink); }
.block.off { opacity: .5; cursor: default; }
.block.off:hover { border-color: var(--line); }
.block.off .v { color: var(--ink-3); }

/* --- крошки --- */
.crumbs { padding: 18px 24px 0; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.crumbs a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.crumbs .sep { color: #4A4A45; }

/* --- категории --- */
.cat-group { padding: 16px 24px 0; }
.cat-group-t { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; margin-bottom: 9px;
               display: flex; align-items: center; gap: 8px; }
.cat-group-n { color: #4F4F4A; }
.cards-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
       text-align: left; font-family: inherit; color: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.cat:hover { border-color: #43433E; background: var(--surface-2); }
.cat.empty { opacity: .55; }
.cat .t { font-size: 12px; color: var(--ink-2); }
.cat .v { font-size: 21px; font-weight: 620; letter-spacing: -.6px; margin-top: 4px; }
.cat .d { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* --- таблица --- */
.table-wrap { margin: 0 24px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.table-wrap table { width: 100%; margin: 0; border: none; background: transparent; }
.table-wrap thead th { position: sticky; top: 0; background: #171717; z-index: 1; }
tbody tr.row:hover td { background: #1F1F1F; }
td.reason { color: var(--ink-2); }
.who.strong { color: var(--ink); font-weight: 520; }
.empty-cell { padding: 22px 12px; color: var(--ink-3); font-size: 12px; }

/* --- пагинация --- */
.pager { display: flex; align-items: center; gap: 10px; padding: 12px 24px 30px; }
.pager .cnt { margin-right: auto; }
.pager-btns { display: flex; gap: 4px; }
.page-btn { min-width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line-2);
            background: transparent; color: var(--ink-2); font-family: inherit; font-size: 12px; cursor: pointer; }
.page-btn:hover:not(:disabled) { border-color: #4A4A45; color: var(--ink); }
.page-btn.on { background: #EDEDEA; color: #141414; border-color: #EDEDEA; }
.page-btn:disabled { opacity: .35; cursor: default; }

.foot { padding: 4px 24px 34px; color: var(--ink-3); font-size: 12px; }