:root {

  --ink: #02121F;
  --ink-80: #1D2D3A;
  --ink-60: #4A5763;
  --ink-45: #5E6973;
  --ink-30: #98A1A8;
  --ink-20: #C6CACC;
  --ink-08: #E8E5DE;
  --paper: #F5F2EB;
  --paper-hi: #FBF9F5;
  --on-ink: #F5F2EB;
  --on-ink-muted: #A3ADB5;

  --red: #D81023;
  --red-dark: #A90C1B;

  --status-open: #D81023;
  --status-progress: #8A5B06;
  --status-resolved: #2E5E45;
  --flash-ok-mark: #7FB293;

  --console-rule: #13283A;
  --console-warn: #E2B23E;
  --console-warn-bg: #1C2418;
  --console-error-bg: #2A0C18;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-label: 11px;
  --fs-meta: 12px;
  --fs-body: 15px;
  --fs-h3: 24px;
  --fs-h2: 32px;
  --fs-h1: 64px;
  --tracking-label: 0.13em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --rule: 1px solid var(--ink-20);
  --rule-ink: 1px solid var(--ink);
  --rule-strong: 2px solid var(--ink);
  --focus-ring: 2px solid var(--red);

  --page-max: 1280px;
  --page-pad: 32px;
  --side-w: 340px;
  --topbar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--red); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
button { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label, .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow { color: var(--ink-60); }
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: 1; letter-spacing: -0.015em; }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.15; }
.num { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--ink-60); }
.text-red { color: var(--red); }

.topbar {
  background: var(--ink);
  color: var(--on-ink);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav user";
  align-items: stretch;
  column-gap: var(--space-7);
  min-height: var(--topbar-h);
  padding: 0 var(--page-pad);
}
.brand {
  grid-area: brand;
  align-self: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--on-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand::before { content: ""; width: 10px; height: 10px; background: var(--red); }
.brand:hover { color: var(--on-ink); text-decoration: underline; }
.nav { grid-area: nav; display: flex; gap: var(--space-6); }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--on-ink);
  text-decoration: none;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.nav a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 6px; }
.nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); }
.topbar :focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }
.user { grid-area: user; display: flex; align-items: center; gap: var(--space-5); font-size: 13px; }
.user-name { color: var(--on-ink-muted); }
.logout {
  color: var(--on-ink);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--on-ink-muted);
  padding: 7px 12px;
}
.logout:hover { background: var(--on-ink); color: var(--ink); }

.page { max-width: var(--page-max); margin: 0 auto; padding: var(--space-7) var(--page-pad) var(--space-9); }
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-strong);
  margin-bottom: var(--space-6);
}
.page-title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: 0.95; letter-spacing: -0.015em; }
.page-title .num-red { color: var(--red); }
.page-sub { margin-top: var(--space-3); font-size: 14px; color: var(--ink-60); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.page-aside { text-align: right; }
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.back:hover { color: var(--red); text-decoration: underline; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); gap: var(--space-8); align-items: start; }
.layout-detail { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-7); }
.side { display: grid; gap: var(--space-7); }
.block { border-top: var(--rule-strong); padding-top: var(--space-4); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.block-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.15; }
.block-text { font-size: 14px; color: var(--ink-60); margin-bottom: var(--space-4); }

.flash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  margin-bottom: var(--space-6);
  font-size: 14px;
  font-weight: 600;
}
.flash-success { background: var(--ink); color: var(--on-ink); }
.flash-success::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--flash-ok-mark); }
.flash-error, .error-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--paper-hi);
  border: 2px solid var(--red);
  color: var(--ink);
  padding: 12px var(--space-4);
  font-size: 14px;
  font-weight: 500;
}
.flash-tag, .error-box-tag {
  flex: none;
  background: var(--red);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 3px 6px;
  margin-top: 1px;
}
.error-box { margin-bottom: var(--space-5); }

.empty {
  border-top: var(--rule-strong);
  border-bottom: var(--rule);
  padding: var(--space-8) 0 var(--space-7);
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--space-5);
}
.empty-num { font-family: var(--font-display); font-size: 64px; line-height: 0.85; color: var(--red); font-weight: 600; }
.empty-text { font-family: var(--font-display); font-style: italic; font-size: 30px; line-height: 1.2; max-width: 22ch; margin-bottom: var(--space-5); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border: 2px solid transparent;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn-primary { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-primary:active, .btn-primary.is-active { background: var(--red-dark); border-color: var(--red-dark); }
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover, .btn-secondary.is-hover { background: var(--ink); color: var(--paper); }
.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-danger:hover, .btn-danger.is-hover { background: var(--red); color: var(--paper); }
.btn-text {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.btn-text:hover, .btn-text.is-hover { color: var(--red); text-decoration-thickness: 2px; }
.btn-text.btn-text-danger { color: var(--red); }
.btn-text.btn-text-danger:hover { color: var(--ink); }
.btn:focus-visible, .btn.is-focus { outline: var(--focus-ring); outline-offset: 3px; }
.btn:disabled, .btn.is-disabled,
.btn:disabled:hover, .btn.is-disabled:hover {
  background: var(--ink-08);
  border-color: var(--ink-20);
  color: var(--ink-45);
  cursor: not-allowed;
  transform: none;
}
.btn-text:disabled, .btn-text.is-disabled { background: none; text-decoration: none; }
.btn-block { width: 100%; }
.btn-arrow::after { content: "→"; font-size: 15px; letter-spacing: 0; }

.form { display: grid; gap: var(--space-5); }
.field { display: grid; gap: 7px; }
.field-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); display: flex; justify-content: space-between; gap: var(--space-3); }
.field-label .hint-inline { color: var(--ink-60); letter-spacing: 0.04em; text-transform: none; font-weight: 500; }
.input, .textarea, .select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  background: var(--paper-hi);
  border: 1px solid var(--ink-60);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
}
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-45); }
.input:hover, .textarea:hover, .input.is-hover { border-color: var(--ink); }
.input:focus, .textarea:focus, .input.is-focus, .textarea.is-focus { outline: var(--focus-ring); outline-offset: 0; border-color: var(--ink); }
.input.is-error, .textarea.is-error, .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border: 2px solid var(--red); padding: 10px 12px; }
.input:disabled, .textarea:disabled { background: var(--ink-08); border-color: var(--ink-20); color: var(--ink-45); cursor: not-allowed; }
.field-hint { font-size: var(--fs-meta); color: var(--ink-60); }
.field-error { font-size: var(--fs-meta); font-weight: 600; color: var(--red); display: flex; align-items: center; gap: 7px; }
.field-error::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--red); }
.code-area {
  width: 100%;
  min-height: 92px;
  padding: var(--space-4);
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  resize: none;
  white-space: pre-wrap;
  word-break: break-all;
}
.code-area:focus, .code-area.is-focus { outline: var(--focus-ring); outline-offset: 3px; }
.check { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 500; cursor: pointer; min-height: 32px; }
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  background: var(--paper-hi);
  cursor: pointer;
}
.check input:checked { background: var(--red); box-shadow: inset 0 0 0 3px var(--paper-hi); }
.check input:focus-visible, .check input.is-focus { outline: var(--focus-ring); outline-offset: 2px; }
.check input:disabled { border-color: var(--ink-20); background: var(--ink-08); cursor: not-allowed; }
.check.is-disabled { color: var(--ink-45); cursor: not-allowed; }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 7px;
  border: 1px solid currentColor;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.status::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; }
.status-open { color: var(--status-open); }
.status-progress { color: var(--status-progress); }
.status-resolved { color: var(--status-resolved); }
.status-resolved::before { background: transparent; border: 1.5px solid currentColor; }
.status-lg { font-size: 12px; padding: 7px 11px 7px 10px; gap: 9px; }
.status-lg::before { width: 9px; height: 9px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid var(--ink-60);
  color: var(--ink-60);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.1;
}
.tag-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.project-list { border-top: var(--rule-strong); }
.project-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 170px;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.project-row:hover { color: var(--ink); }
.project-row:hover::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--red); }
.project-row:hover .project-name { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.project-row:focus-visible { outline-offset: 0; }
.project-row.is-paused .project-name { color: var(--ink-60); }
.project-index { align-self: start; padding-top: 8px; font-family: var(--font-display); font-size: 17px; color: var(--ink-45); font-variant-numeric: tabular-nums; }
.project-main { display: grid; gap: 6px; min-width: 0; }
.project-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.project-name { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1; }
.project-url { font-size: 13px; color: var(--ink-60); overflow-wrap: anywhere; }
.counts { display: flex; gap: var(--space-5); }
.count { display: grid; justify-items: end; min-width: 64px; }
.count-n { font-family: var(--font-display); font-size: 38px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.count-l { margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-60); white-space: nowrap; }
.count-open .count-n { color: var(--red); }
.count.is-zero .count-n { color: var(--ink-45); font-weight: 400; }
.project-last { font-size: var(--fs-meta); color: var(--ink-60); text-align: right; line-height: 1.4; }

.tabs { display: flex; gap: var(--space-6); border-bottom: var(--rule); overflow-x: auto; scrollbar-width: none; }
.tab {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 12px;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 4px solid transparent;
  color: var(--ink-60);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.tab-count { font-family: var(--font-display); font-size: 17px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tab:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.tab.is-active { color: var(--ink); border-bottom-color: var(--red); }
.tab.is-active .tab-count { color: var(--red); }
.tab:focus-visible { outline-offset: -2px; }

.fb-row {
  position: relative;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.fb-row:hover { color: var(--ink); }
.fb-row:hover::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--red); }
.fb-row:hover .fb-id { color: var(--red); }
.fb-row:hover .thumb { border-color: var(--red); }
.fb-row:focus-visible { outline-offset: 0; }
.thumb { height: 126px; overflow: hidden; border: 1px solid var(--ink); background: var(--paper-hi); }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fb-id { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.fb-msg {
  margin: 10px 0;
  font-size: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 64ch;
}
.meta { display: flex; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--ink-60); }
.meta > span + span::before { content: "·"; margin: 0 8px; color: var(--ink-45); }
.meta .path { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }

.danger-zone { border-top: 2px solid var(--red); padding-top: var(--space-4); }
.danger-zone .block-title { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--red); }

.detail-title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: 0.95; letter-spacing: -0.015em; }
.detail-title .num-red { color: var(--red); }
.detail-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.message { font-family: var(--font-display); font-size: 23px; line-height: 1.5; max-width: 34em; }
.message p + p { margin-top: 0.8em; }
.byline {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: var(--space-6);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule);
  font-size: 13px;
}
.byline dt { font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-60); margin-bottom: 4px; }
.byline dd { font-weight: 600; }
.screenshot-link { display: block; position: relative; margin-top: var(--space-7); color: var(--ink); text-decoration: none; }
.screenshot-link:hover { color: var(--red); }
.screenshot-cap { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: 10px; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }

.thread { margin-top: var(--space-8); }
.thread-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: var(--rule-strong); padding-bottom: var(--space-3); }
.comment { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5) 0; border-bottom: var(--rule); }
.comment-who { display: grid; align-content: start; gap: 6px; }
.comment-author { font-size: 14px; font-weight: 700; }
.comment-time { font-size: var(--fs-meta); color: var(--ink-60); }
.comment-body { font-size: 15px; line-height: 1.6; max-width: 60ch; }
.comment-team { background: var(--ink-08); padding: var(--space-5); margin: var(--space-3) 0 var(--space-3) var(--space-7); border-bottom: 0; }
.comment-team + .comment { border-top: 0; }
.who { justify-self: start; font-size: 9.5px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 3px 6px; line-height: 1.1; }
.who-team { background: var(--ink); color: var(--paper); }
.who-client { border: 1px solid var(--ink); color: var(--ink); }
.reply { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.reply-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.status-select { display: grid; border: var(--rule-strong); }
.status-option {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-bottom: var(--rule);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.status-option:last-child { border-bottom: 0; }
.status-option .sq { width: 12px; height: 12px; border: 2px solid var(--sq, var(--ink)); }
.status-option[data-status="open"] { --sq: var(--status-open); }
.status-option[data-status="progress"] { --sq: var(--status-progress); }
.status-option[data-status="resolved"] { --sq: var(--status-resolved); }
.status-option .cur { font-size: 10px; letter-spacing: var(--tracking-label); font-weight: 600; }
.status-option:hover { background: var(--ink-08); text-decoration: underline; text-underline-offset: 5px; }
.status-option:focus-visible { outline-offset: -4px; }
.status-option.is-current { background: var(--ink); color: var(--paper); text-decoration: none; cursor: default; }
.status-option.is-current .sq { background: var(--red); border-color: var(--red); }
.status-option.is-current:focus-visible { outline-color: var(--paper); }

.details { display: grid; grid-template-columns: 104px minmax(0, 1fr); border-top: var(--rule-ink); font-size: 13px; }
.details dt, .details dd { padding: 9px 0; border-bottom: var(--rule); }
.details dt { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60); padding-top: 11px; }
.details dd { overflow-wrap: anywhere; }
.details .ua { font-size: 12px; color: var(--ink-60); line-height: 1.45; }
.details .sel { font-family: var(--font-mono); font-size: 12px; background: var(--ink-08); padding: 1px 4px; }

.console { background: var(--ink); color: var(--on-ink); }
.console-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--console-rule); }
.console-title { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-ink); }
.console-title .n { font-family: var(--font-display); font-size: 15px; letter-spacing: 0; margin-left: 4px; }
.console-hint { font-family: var(--font-mono); font-size: 11px; color: var(--on-ink-muted); }
.console-line { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: var(--space-3); padding: 10px 14px; border-bottom: 1px solid var(--console-rule); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.console-line:last-child { border-bottom: 0; }
.console-src { display: block; color: var(--on-ink-muted); font-size: 11px; margin-top: 2px; }
.ctag { align-self: start; text-align: center; font-family: var(--font-ui); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 0; line-height: 1.2; }
.ctag-log { color: var(--on-ink-muted); border: 1px solid #3B4B58; }
.ctag-info { color: var(--on-ink); border: 1px solid var(--on-ink-muted); }
.ctag-warn { background: var(--console-warn); color: var(--ink); }
.ctag-error { background: var(--red); color: var(--paper); }
.line-warn { background: var(--console-warn-bg); }
.line-error { background: var(--console-error-bg); }
.console-empty { padding: 22px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--on-ink-muted); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; padding: 0 var(--space-4) 10px 0; border-bottom: var(--rule-strong); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.table td { padding: 18px var(--space-4) 18px 0; border-bottom: var(--rule); vertical-align: baseline; }
.table td.name { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.table .you { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--red); letter-spacing: 0.06em; margin-left: 6px; }
.table .date { color: var(--ink-60); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .act { text-align: right; padding-right: 0; }
.table tbody tr:hover td { background: var(--ink-08); }
.table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--red); }

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.auth-art { background: var(--ink); color: var(--on-ink); padding: var(--space-6) var(--space-7); display: grid; grid-template-rows: auto 1fr auto; }
.auth-art-top, .auth-art-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-ink-muted); }
.auth-art-top { padding-bottom: var(--space-4); border-bottom: 1px solid var(--ink-80); }
.auth-art-top .brand-inv { color: var(--on-ink); display: flex; align-items: center; gap: 10px; }
.auth-art-top .brand-inv::before { content: ""; width: 10px; height: 10px; background: var(--red); }
.auth-art-foot { padding-top: var(--space-4); border-top: 1px solid var(--ink-80); }
.auth-quote { align-self: end; padding: var(--space-8) 0 var(--space-7); font-family: var(--font-display); font-style: italic; font-size: 76px; line-height: 1.04; letter-spacing: -0.01em; max-width: 11ch; }
.auth-quote .anchor { position: relative; }
.auth-main { display: grid; align-content: center; justify-items: start; padding: var(--space-8) var(--space-7); }
.auth-form { width: 100%; max-width: 400px; }
.auth-title { font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.015em; }
.auth-sub { font-size: 15px; color: var(--ink-60); margin-top: 10px; padding-bottom: var(--space-5); margin-bottom: var(--space-6); border-bottom: var(--rule); }
.auth-foot { margin-top: var(--space-6); font-size: var(--fs-meta); color: var(--ink-60); }

.pin { position: absolute; width: 30px; height: 36px; transform: translateY(-100%); font-family: var(--font-ui); font-style: normal; }
.pin::before, .pin::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 80%, 36% 80%, 0 100%); }
.pin::before { background: var(--paper); }
.pin::after { background: var(--red); clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(80% - 2px), calc(36% - 1px) calc(80% - 2px), 2px calc(100% - 5px)); }
.pin b { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 80%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--paper); letter-spacing: 0; }

.user form, .inline-form { margin: 0; }
button.logout { background: transparent; font-family: var(--font-ui); line-height: 1.2; cursor: pointer; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.thumb-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--font-mono); font-size: 11px; color: var(--ink-45); }
.shot-img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); background: var(--paper-hi); }
.screenshot-link:hover .shot-img { border-color: var(--red); }
.status-select form { display: contents; }
.message p { overflow-wrap: anywhere; }
.comment-event { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: var(--rule); font-size: 13px; color: var(--ink-60); }
.comment-event strong { color: var(--ink); font-weight: 700; }
.comment-event .who { margin-left: 6px; vertical-align: 1px; }
.comment-event-mark { flex: none; width: 8px; height: 8px; background: var(--red); }
.comment-event .comment-time { margin-left: auto; }
.comment-body { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  :root { --page-pad: 20px; --fs-h1: 44px; }
  .topbar { grid-template-columns: 1fr auto; grid-template-areas: "brand user" "nav nav"; column-gap: var(--space-4); padding: 0; }
  .brand { padding: 14px var(--page-pad); }
  .user { padding-right: var(--page-pad); gap: var(--space-3); }
  .user-name { display: none; }
  .nav { gap: 0; border-top: 1px solid var(--ink-80); }
  .nav a { flex: 1; justify-content: center; min-height: 46px; }
  .nav a + a { border-left: 1px solid var(--ink-80); }
  .page { padding-top: var(--space-6); padding-bottom: var(--space-8); }
  .page-head { grid-template-columns: 1fr; }
  .page-aside { text-align: left; }
  .layout, .layout-detail { grid-template-columns: 1fr; gap: var(--space-7); }
  .project-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: var(--space-4); }
  .project-index { padding-top: 6px; font-size: 14px; }
  .project-name { font-size: 24px; }
  .counts, .project-last { grid-column: 2; }
  .counts { gap: var(--space-5); }
  .count { justify-items: start; min-width: 0; }
  .count-n { font-size: 30px; }
  .project-last { text-align: left; }
  .fb-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .thumb { height: 150px; }
  .tabs { gap: var(--space-5); }
  .empty { grid-template-columns: 1fr; padding-top: var(--space-6); }
  .empty-num { font-size: 48px; }
  .empty-text { font-size: 24px; }
  .message { font-size: 19px; }
  .byline { grid-template-columns: 1fr; gap: var(--space-3); }
  .comment { grid-template-columns: 1fr; gap: var(--space-3); }
  .comment-who { grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
  .comment-team { margin-left: var(--space-5); padding: var(--space-4); }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { display: grid; grid-template-columns: 1fr auto; padding: var(--space-4) 0; border-bottom: var(--rule); }
  .table td { padding: 2px 0; border: 0; }
  .table td.name { grid-column: 1; }
  .table td.act { grid-column: 2; grid-row: 1; }
  .table tbody tr:first-child { border-top: var(--rule-strong); }
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-art { padding: var(--space-4) var(--page-pad) var(--space-5); grid-template-rows: auto auto; }
  .auth-quote { font-size: 36px; padding: var(--space-6) 0 0; max-width: 13ch; }
  .auth-art-foot { display: none; }
  .auth-main { padding: var(--space-6) var(--page-pad) var(--space-8); }
  .auth-title { font-size: 44px; }
}