@font-face { font-family: Inter; src: url(/assets/fonts/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url(/assets/fonts/Inter-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url(/assets/fonts/Inter-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url(/assets/fonts/Inter-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Inter, "Noto Sans", sans-serif; color: #1c2434; background: #f4f6fb; font-size: 16px; line-height: 1.45; }
button, input, select { font-family: inherit; }
a { color: #2f6bff; text-decoration: none; font-weight: 600; }
button { cursor: pointer; }
.top { position: sticky; top: 0; z-index: 20; background: white; border-bottom: 1px solid #e7edf5; padding: 14px 28px; display: flex; align-items: center; gap: 14px; }
.brandlink { display: flex; align-items: center; gap: 14px; color: inherit; font-weight: 400; }
.logo { width: 44px; height: 44px; background: #2f6bff; border-radius: 13px; color: white; display: grid; place-items: center; font-weight: 700; }
.brand { font-size: 20px; font-weight: 700; line-height: 1.15; }
.brand small { display: block; font-size: 12px; font-weight: 400; color: #68768b; }
.nav { margin-left: auto; display: flex; gap: 4px; font-size: 14px; }
.nav a { padding: 10px 12px; border-radius: 10px; color: #68768b; font-weight: 500; white-space: nowrap; }
.nav a.on { background: #2f6bff; color: white; }
.userbox { display: flex; align-items: center; gap: 8px; }
.userchip { padding: 9px 13px; background: #eef4ff; color: #285dc8; border: 1px solid #d9e5ff; border-radius: 99px; font-size: 13px; white-space: nowrap; }
.textlink { border: 0; background: transparent; color: #68768b; font-size: 13px; font-weight: 600; }
.site-context { padding: 10px 28px 0; color: #68768b; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
.site-context b { color: #1c2434; }
.demo { color: #9a5d00; }
.stale { margin: 10px 28px 0; background: #fdecec; color: #9f1d1d; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
main { padding: 16px 28px 36px; }
.eyebrow { font-size: 12px; letter-spacing: .08em; color: #2f6bff; text-transform: uppercase; font-weight: 700; }
h1 { font-size: 29px; line-height: 1.15; margin: 6px 0; letter-spacing: -.4px; }
h2 { font-size: 22px; margin: 0 0 12px; }
.sub { font-size: 13px; color: #68768b; margin: 0 0 12px; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.card { background: white; border: 1px solid #e7edf5; border-radius: 20px; }
.kpi { padding: 10px 12px; }
.kpi small { display: block; color: #68768b; font-size: 12px; line-height: 1.25; }
.kpi .value { font-size: 26px; font-weight: 700; margin: 4px 0 0; line-height: 1.1; }
.kpi .value.red { color: #ce3131; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; align-items: center; }
.chip, .search { background: white; border: 1px solid #e7edf5; border-radius: 9px; padding: 6px 10px; font-size: 13px; color: #1c2434; }
.chip.on { background: #2f6bff; color: white; border-color: #2f6bff; }
.search { min-width: 180px; }
.menuwrap { position: relative; }
.menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: white; border: 1px solid #dce4f0; border-radius: 11px; box-shadow: 0 8px 24px #1c243426; min-width: 180px; padding: 6px; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px; border-radius: 6px; font-size: 13px; }
.menu button:hover, .menu button.on { background: #eff5ff; }
.leg { font-size: 12px; line-height: 1.4; color: #68768b; margin: 8px 0; }
.leg b { color: #1c2434; }
.badge { font-size: 12px; display: inline-block; border-radius: 8px; padding: 3px 7px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.badge.high { background: #fee2e2; color: #bc2424; }
.badge.medium { background: #fff0c9; color: #8b5a00; }
.badge.normal { background: #dcf6e7; color: #087b43; }
.badge.low { background: #e9edf2; color: #626c7b; }
.tablewrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
.registry { min-width: 1180px; }
th { text-align: left; font-weight: 500; color: #68768b; background: #f6f8fc; }
td, th { border-bottom: 1px solid #e7edf5; padding: 7px 6px; vertical-align: top; font-size: 12px; line-height: 1.3; }
td small, .muted { color: #68768b; }
.chev { color: #2f6bff; font-weight: 700; background: none; border: 0; padding: 0; text-align: left; font-size: 12px; }
.trackrow td { padding-top: 0; background: white; }
.trackline { display: flex; gap: 10px; align-items: center; }
.trackcap { width: 230px; flex: none; font-size: 10px; color: #68768b; }
.track { display: flex; gap: 4px; flex: 1; }
.track span { flex: 1; text-align: center; background: #e9edf4; border-radius: 5px; padding: 3px 2px; color: #7c8799; font-size: 10px; line-height: 1.15; }
.track .done { background: #d8e5ff; color: #285dc8; }
.track .current { background: #2f6bff; color: white; }
.track .stuck { background: #fee2e2; color: #ba2626; border: 1px solid #ef4444; }
.track .unknown { border: 1px dashed #aab4c3; background: white; color: #68768b; }
.expanded td { background: #f2f6fe; border-left: 3px solid #2f6bff; font-size: 12px; }
.expanded.redex td { background: #fff5f5; border-left-color: #ef4444; }
.delete-button { border: 0; background: #fff0f0; color: #bd3131; border-radius: 6px; padding: 4px 6px; font-size: 10px; }
.delete-button svg { display: block; width: 13px; height: 13px; margin: 0 auto 2px; }
.priority-menu { position: absolute; z-index: 40; width: 180px; padding: 6px; background: white; border: 1px solid #dce4f0; border-radius: 11px; box-shadow: 0 8px 24px #1c243426; }
.priority-menu button { display: flex; width: 100%; gap: 8px; align-items: center; border: 0; background: transparent; padding: 8px; border-radius: 6px; font-size: 13px; }
.priority-menu button.on { background: #eff5ff; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.high { background: #bc2424; }
.dot.medium { background: #d59a00; }
.dot.normal { background: #087b43; }
.dot.low { background: #8b95a6; }
.overlay { position: fixed; inset: 0; background: #14203370; display: flex; align-items: center; justify-content: center; z-index: 80; padding: 18px; }
.modal { width: min(860px, 100%); background: white; border-radius: 23px; box-shadow: 0 18px 60px #0d183950; padding: 28px; max-height: calc(100vh - 36px); overflow: auto; }
.modal h1 { font-size: 32px; }
.leadline { font-size: 18px; margin: 12px 0; }
.confirm-option { display: flex; gap: 12px; width: 100%; text-align: left; padding: 16px; border: 1px solid #dce4ef; border-radius: 13px; margin-top: 12px; font-size: 16px; background: white; color: inherit; }
.confirm-option.on { border-color: #2f6bff; }
.confirm-option.danger { border-color: #f4b3b3; background: #fff5f5; color: #b92e2e; }
.confirm-option small, .modal small { font-size: 13px; color: #68768b; font-weight: 400; }
.radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid #a2adc0; margin-top: 3px; }
.confirm-option.on .radio { border-color: #2f6bff; box-shadow: inset 0 0 0 4px #2f6bff; }
.callout { padding: 12px 14px; border-radius: 12px; background: #fff4e5; color: #8a5300; font-size: 13px; margin-top: 14px; }
.modalfooter { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 18px; }
.button { border: 1px solid #dce4ef; background: white; border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: 15px; color: #1c2434; }
.button.primary { color: white; background: #2f6bff; border-color: #2f6bff; }
.button.danger { color: white; background: #d83d3d; border-color: #d83d3d; }
.button:disabled { color: #a4adbb; background: #f2f4f8; border-color: #e7edf5; cursor: default; }
.field { margin-top: 12px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input { width: 100%; padding: 12px 14px; border: 1px solid #e0e7f1; border-radius: 10px; background: #f6f8fc; font-size: 15px; }
.toast { margin-top: 10px; font-size: 14px; font-weight: 600; }
.toast.bad { color: #b92e2e; }
.toast.ok { color: #087f49; }
.foot { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #e0e6ef; margin: 16px 28px 0; padding: 10px 0 18px; font-size: 12px; color: #68768b; }
.split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.channels { display: grid; grid-template-columns: 1.38fr 1fr; gap: 16px; align-items: start; margin-top: 16px; }
.pad { padding: 18px; }
.summary { display: flex; gap: 16px; align-items: center; padding: 14px 18px; margin: 12px 0; background: white; border: 1px solid #e7edf5; border-radius: 15px; }
.summary .metric { margin-left: auto; text-align: right; }
.summary .metric strong { color: #087f49; font-size: 25px; }
.summary small, .metric small { display: block; color: #68768b; font-size: 13px; }
.timeline { border-left: 3px solid #dce6ff; margin-left: 8px; padding-left: 22px; }
.event { position: relative; padding: 0 0 12px; }
.event:before { content: ""; position: absolute; width: 11px; height: 11px; border: 3px solid #2f6bff; background: white; border-radius: 50%; left: -30px; top: 4px; }
.event p { margin: 4px 0 0; color: #68768b; }
.soft { background: #f6f8fc; border-radius: 12px; padding: 12px; font-size: 14px; }
.rowline { padding: 8px 0; border-bottom: 1px solid #e7edf5; display: flex; justify-content: space-between; gap: 16px; }
.state-note { border-left: 4px solid #f79009; background: #fff8ea; padding: 10px 12px; border-radius: 9px; font-size: 14px; margin-top: 10px; }
.mailentry { padding: 10px 0; border-bottom: 1px solid #e7edf5; font-size: 14px; }
.mailentry:last-child { border-bottom: 0; }
.mailtop { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.direction { font-size: 11px; padding: 3px 8px; background: #f0f3f8; border-radius: 99px; color: #68768b; font-weight: 600; }
.direction.out { background: #eaf1ff; color: #285dc8; }
.empty { background: #f6f8fc; border: 1px dashed #d4deeb; border-radius: 12px; padding: 12px; font-size: 14px; }
.fileitem { padding: 10px 0; border-bottom: 1px solid #e7edf5; }
.fileitem:last-child { border-bottom: 0; }
.pill { display: inline-block; padding: 3px 8px; border-radius: 99px; background: #f0f3f9; font-size: 12px; font-weight: 600; }
.pill.r { background: #fdecec; color: #c42e2e; }
.pill.y { background: #fff4e5; color: #9a5d00; }
.pill.g { background: #e9f8ef; color: #087f49; }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stack { display: grid; gap: 14px; }
.list p { padding-bottom: 12px; border-bottom: 1px solid #e7edf5; }
.rights { width: 100%; }
.rights th, .rights td { font-size: 14px; padding: 6px 12px; vertical-align: middle; }
.rights th:not(:first-child), .rights td:not(:first-child) { text-align: center; }
.rights .group td { background: #eef3fb; color: #38537b; font-size: 12px; font-weight: 700; }
.check { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #b5c1d3; border-radius: 5px; background: white; color: transparent; }
.check.on { color: white; background: #2f6bff; border-color: #2f6bff; }
.check.locked { background: #7b96cf; border-color: #7b96cf; color: white; }
.rights-footer, .role-key { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 12px; }
.role-key { justify-content: flex-start; font-size: 12px; color: #68768b; }
.user-add { color: #2f6bff; border: 1px dashed #a9bde5; background: #f8faff; border-radius: 9px; padding: 8px; font-size: 12px; font-weight: 600; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { width: min(460px, 100%); padding: 28px; }
.login-card h1 { font-size: 32px; }
.scope { padding: 12px 14px; background: #eef4ff; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.manager { min-width: 720px; }
.manager td, .manager th { font-size: 14px; padding: 12px 8px; }
.note { padding: 12px 14px; background: #fff4e5; border-radius: 12px; color: #8a5300; font-size: 14px; }
.sources { font-size: 12px; color: #68768b; margin-top: 8px; }
@media (max-width: 900px) {
  .top { flex-wrap: wrap; padding: 12px; }
  .nav { order: 3; width: 100%; margin-left: 0; overflow: auto; }
  .site-context, .stale, main, .foot { padding-left: 12px; padding-right: 12px; margin-left: 0; margin-right: 0; }
  .site-context { flex-direction: column; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .split, .channels, .grid-two { grid-template-columns: 1fr; }
  h1 { font-size: 26px; }
  .summary { flex-direction: column; align-items: flex-start; }
  .summary .metric { margin-left: 0; text-align: left; }
  .trackcap { display: none; }
  .modalfooter { flex-direction: column; align-items: stretch; }
}