:root{--ink:#252525;--muted:#767676;--line:#e8e8e8;--accent:#636363;--bg:#f9f9f9;--secondary:#6f6f6f}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a:hover{color:var(--accent)}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #7e7e7e;outline-offset:3px}.sidebar{position:fixed;inset:0 auto 0 0;width:224px;background:#f3f3f3;border-right:1px solid var(--line);padding:30px 18px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;font-size:24px;font-weight:650;letter-spacing:-.9px;padding:0 8px}.brand small{font-size:9px;letter-spacing:2.7px;display:block;color:#949494;margin-top:-3px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:#373737;color:white;border-radius:10px;font-size:26px;letter-spacing:-2px;padding-right:3px}.workspace{display:flex;align-items:center;gap:10px;margin:32px 0 26px;padding:11px 9px;border:1px solid #e1e1e1;border-radius:7px;background:#fbfbfb;font-weight:550}.workspace small,.user small{display:block;font-size:11px;color:var(--muted);font-weight:400}.workspace>.muted{margin-left:auto}.workspace-icon,.avatar{display:grid;place-items:center;background:#e6e6e6;width:29px;height:29px;border-radius:6px;color:#5d5d5d}.nav-label{font-size:9px;letter-spacing:1.4px;color:#969696;padding-left:12px;font-weight:600}nav{display:grid;gap:5px}nav a{display:flex;gap:13px;padding:10px 13px;color:#777777;border-radius:6px;font-size:12px}nav a span{font-size:17px;line-height:19px;width:18px}nav .selected{background:#e9e9e9;color:#4b4b4b;font-weight:600}.sidebar-bottom{margin-top:auto}.sidebar-bottom>p{font-size:11px;color:#959595;margin:13px 9px 26px}.sidebar-bottom>.badge{background:transparent}.user{border-top:1px solid #e1e1e1;padding-top:20px;display:flex;gap:9px;align-items:center;font-size:11px}.user form{margin-left:auto}.icon-button{background:none;border:0;color:#858585;font-size:20px}.app{margin-left:224px;min-height:100vh}.topbar{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;font-size:11px;background:#fdfdfd}.slash{margin:0 15px;color:#bfbfbf}.top-right{display:flex;align-items:center;gap:9px;color:#858585;font-size:10px}.live-dot{width:5px;height:5px;border-radius:50%;background:#808080}.version{border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:9px;margin-left:7px}main{padding:38px;max-width:1800px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 28px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:1.9px;color:#919191;margin:0 0 9px}h1{font-size:29px;line-height:1.25;font-weight:560;letter-spacing:-1px;margin:0}h2{font-size:13px;font-weight:600;letter-spacing:-.15px;margin:0}.subtitle{color:#8a8a8a;margin:10px 0 0;font-size:12px}.button{display:inline-flex;justify-content:center;align-items:center;gap:7px;border:1px solid #e1e1e1;border-radius:6px;background:#ffffff;min-height:35px;padding:8px 13px;font-size:11px;font-weight:550;white-space:nowrap}.button:hover{background:#f2f2f2;color:#4b4b4b}.primary{background:#474747;color:#ffffff;border-color:#474747;box-shadow:0 1px 2px #00000012}.primary:hover{background:#373737;color:white}.summary-grid{display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:13px;margin:20px 0 30px}.summary-card{padding:18px 20px;background:#ffffff;border:1px solid var(--line);border-radius:8px}.summary-card.total{background:#f0f0f0;border-color:#e4e4e4}.summary-card p{font-size:11px;margin:0 0 12px;display:flex;align-items:center;gap:6px;color:#777777}.summary-card p>span{margin-left:auto;color:#a8a8a8}.summary-card strong{font-size:34px;letter-spacing:-1.3px;line-height:1.2;font-weight:550;display:block}.summary-card small{font-size:10px;color:#9c9c9c;margin-top:8px;display:block}.status-dot,.badge-dot{width:5px;height:5px;display:inline-block;flex-shrink:0;border-radius:50%;background:currentColor}.status-dot.healthy{background:#8c8c8c}.status-dot.warning{background:#a6a6a6}.status-dot.critical{background:#8c8c8c}.status-dot.offline{background:#727272}.section-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 13px}.section-title>.muted{font-size:10px}.attention-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:white;border:1px solid var(--line);border-radius:8px;margin-bottom:15px;overflow:hidden}.attention-card{display:grid;grid-template-columns:1fr auto;gap:10px;padding:18px;border-right:1px solid var(--line)}.attention-card:last-child{border:0}.metric-icon{display:grid;place-items:center;width:29px;height:29px;background:#f2f2f2;border:1px solid #ebebeb;border-radius:6px;font-size:16px;color:#929292}.attention-card strong{font-size:23px;font-weight:500;letter-spacing:-.5px}.attention-card>span:last-child{grid-column:1/-1;font-size:10px;color:#898989}.business-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:32px}.business-strip>a{background:#f2f2f2;border:1px solid #e6e6e6;border-radius:7px;padding:16px 18px;display:flex;gap:13px;align-items:center}.business-strip>a:last-child{background:#f0f0f0;border-color:#e6e6e6}.business-strip strong{display:block;font-size:11px;font-weight:550}.business-strip small{display:block;color:#969696;font-size:10px;margin-top:3px}.business-strip .arrow{margin-left:auto;color:#979797}.purple{color:#8d8d8d;background:#e6e6e6;border-color:#dfdfdf}.panel{background:white;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:22px}.panel-heading{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading p{font-size:10px;color:#979797;margin:4px 0 0}.count{font-size:10px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:#989898;margin-left:7px;font-weight:400}.text-link{font-size:11px;color:#737373}.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 18px;align-items:center}.filters input,.filters select{border:1px solid #e7e7e7;background:white;padding:7px 9px;min-height:32px;border-radius:5px;font-size:10px;max-width:150px;color:#787878}.filters .search{display:flex;align-items:center;gap:6px;border:1px solid #e7e7e7;border-radius:5px;padding-left:10px;flex:1;min-width:175px}.search input{border:0;width:100%;max-width:none}.search span{font-size:18px;color:#9b9b9b}.filters .button{min-height:31px;padding:6px 10px;font-size:10px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}th{background:#fbfbfb;color:#979797;font-size:9px;font-weight:500;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 15px}td{border-bottom:1px solid #efefef;padding:15px;font-size:11px}td:first-child,th:first-child{padding-left:22px}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fcfcfc}.site-cell{display:flex;align-items:center;gap:11px}.site-avatar{width:29px;height:29px;border:1px solid #e8e8e8;background:#f4f4f4;border-radius:7px;display:grid;place-items:center;color:#7b7b7b;font-size:11px;font-weight:600;flex-shrink:0}.site-cell strong{font-size:11px;display:block;font-weight:550}.site-cell small{font-size:9px;display:block;color:#9f9f9f;margin-top:3px}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:4px;background:#f2f2f2;color:#939393;font-size:9px;white-space:nowrap;line-height:1.5}.badge.healthy,.badge.connected,.badge.active,.badge.success{background:#f2f2f2;color:#868686}.badge.warning,.badge.paired,.badge.proposed{background:#f4f4f4;color:#8f8f8f}.badge.critical,.badge.invalid,.badge.failed{background:#f1f1f1;color:#868686}.badge.offline,.badge.lost{background:#eeeeee;color:#7d7d7d}.score{font-size:12px;font-weight:600;color:#868686}.score.warning{color:#959595}.score.critical,.score.offline{color:#8d8d8d}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;letter-spacing:-.3px}.small{font-size:10px}.muted{color:var(--muted)}.update-badge,.update-dot{background:#f2f2f2;color:#8f8f8f;font-size:9px;border-radius:4px;padding:2px 5px;margin-left:4px}.pagination{padding:12px 22px;border-top:1px solid var(--line);color:#9a9a9a;font-size:11px}.pagination nav{display:flex;gap:20px;justify-content:flex-end}.pagination nav a{padding:0;font-size:11px}.footnote{font-size:10px;color:#9b9b9b;margin:16px 0}.demo-note{font-size:8px;font-weight:650;letter-spacing:1px;color:#939393;display:flex;gap:12px;margin:-7px 0 15px}.demo-note span{font-size:10px;font-weight:400;letter-spacing:0;color:#a4a4a4}footer{padding:16px 38px 23px;font-size:8px;font-weight:650;letter-spacing:1.5px;color:#a2a2a2}footer>span{font-weight:400;letter-spacing:0;margin-left:14px;font-size:9px;color:#b0b0b0}.footer-right{float:right}.pad{padding:23px}.pad>h2{margin-bottom:16px}.pad>p{font-size:12px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.detail-metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:8px;background:#ffffff;padding:24px 0;margin-bottom:25px}.detail-metrics>div{padding:0 24px;border-right:1px solid var(--line)}.detail-metrics>div:last-child{border:0}.detail-metrics small{display:block;color:#969696;font-size:9px;letter-spacing:1px}.detail-metrics strong{display:block;font-size:28px;font-weight:550;margin-top:9px}.detail-metrics strong span{font-size:12px;color:#9f9f9f;margin-left:5px}.detail-metrics .compact{font-size:17px;margin-top:16px}.title-row{display:flex;align-items:center;gap:12px}.large{width:43px;height:43px;font-size:17px}.actions{display:flex;align-items:center;gap:9px}.breadcrumbs{display:flex;gap:10px;font-size:10px;color:#9b9b9b;margin-bottom:17px}dl{display:grid;grid-template-columns:140px 1fr;gap:13px;margin:0;font-size:11px}dt{color:#929292}dd{margin:0;overflow-wrap:anywhere}.reason-list{list-style:none;padding:0;margin:20px 0}.reason-list li{display:flex;gap:12px;align-items:center;padding:10px 0;font-size:11px;border-bottom:1px solid var(--line)}.deduction{color:#8b8b8b;background:#f2f2f2;border-radius:4px;padding:3px 5px;min-width:30px;text-align:center;font-size:10px}.inset{padding:14px;background:#f7f7f7;border-radius:5px;font-size:10px;color:#969696}.inset p{margin:5px 0 0}.block{display:block}.activity-list{list-style:none;padding:0}.activity-list li{display:flex;gap:12px;padding:12px 0}.activity-list strong{font-size:11px;font-weight:500}.activity-list small{display:block;color:#9b9b9b;font-size:10px}.activity-dot{width:6px;height:6px;background:#c9c9c9;border-radius:50%;margin-top:6px}.notice{border:1px solid #e3e3e3;background:#f4f4f4;padding:14px;border-radius:7px;margin-bottom:20px;color:#767676;font-size:12px}.error{border-color:#dcdcdc;background:#f6f6f6;color:#7c7c7c}.record-form{max-width:850px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.field{display:flex;flex-direction:column;gap:7px;font-size:11px}.field input,.field select,.field textarea{padding:10px 12px;border:1px solid #e0e0e0;background:white;border-radius:5px;color:#545454;min-width:0;width:100%;font-size:12px}.field.full{grid-column:1/-1}.form-actions{display:flex;gap:10px;border-top:1px solid var(--line);padding-top:20px;margin-top:25px}.field-error{color:#7d7d7d}.preserve{white-space:pre-wrap}.list-row{display:flex;gap:15px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}.list-row>span:last-child{margin-left:auto}.empty{padding:35px!important;text-align:center;color:#959595;font-size:12px}.danger{color:#797979}.token{display:block;word-break:break-all;white-space:pre-wrap;padding:18px;background:#f3f3f3;border:1px solid var(--line);border-radius:5px;font-size:15px;margin:20px 0}.narrow{max-width:730px}.login-page{display:grid;place-items:center;min-height:100vh}.login-box{width:410px;padding:35px;background:white;border:1px solid var(--line);border-radius:12px}.login-box .brand{padding:0;margin-bottom:42px}.login-box h1{font-size:27px}.login-box form{margin-top:25px}.login-box .field{margin-bottom:18px}.full-button{width:100%;margin-top:4px}.login-box .footnote{text-align:center;margin-top:25px}@media(min-width:1600px){main{padding:45px 55px}.topbar{padding:0 55px}.summary-card{padding:23px}}@media(max-width:1200px){.sidebar{width:195px;padding:25px 13px}.app{margin-left:195px}main{padding:25px}.topbar{padding:0 25px}.summary-card{padding:15px}.summary-card small{font-size:9px}.attention-card{padding:13px}.attention-card>span:last-child{font-size:9px}.detail-grid{grid-template-columns:1fr}.summary-grid{gap:8px}.brand{font-size:22px}}@media(max-width:800px){.sidebar{position:static;width:100%;padding:14px;border-right:0;border-bottom:1px solid var(--line)}.sidebar .workspace,.nav-label,.sidebar-bottom{display:none}.brand{font-size:20px}.brand-mark{width:31px;height:31px;font-size:21px}.sidebar nav{display:flex;overflow-x:auto;margin-top:15px;gap:4px}.sidebar nav a{padding:7px 9px;white-space:nowrap;font-size:11px;gap:5px}.sidebar nav a span{display:none}.app{margin-left:0}.topbar{height:45px;padding:0 18px}.top-right{display:none}main{padding:24px 18px}.page-heading{align-items:flex-start}h1{font-size:24px}.page-heading>.button{font-size:10px;padding:7px}.summary-grid{grid-template-columns:repeat(2,1fr)}.summary-card.total{grid-column:1/-1}.summary-card.total strong{display:inline;margin-right:15px}.summary-card.total small{display:inline}.attention-grid{grid-template-columns:repeat(2,1fr)}.attention-card{border-bottom:1px solid var(--line)}.business-strip{grid-template-columns:1fr}.detail-metrics{grid-template-columns:1fr 1fr;row-gap:20px}.detail-metrics>div:nth-child(2){border:0}.detail-metrics strong{font-size:23px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.demo-note{display:block}.demo-note span{display:block;margin-top:4px}.title-row{flex-wrap:wrap}.page-heading .actions{flex-direction:column}.login-box{width:calc(100vw - 30px);max-width:410px}.filters{padding:0 14px 14px}.panel-heading{padding:17px 14px}.filters .search{flex-basis:100%}.footnote{line-height:1.8}.footer-right{display:none}footer{padding:15px 18px}dl{grid-template-columns:115px 1fr}.list-row{flex-wrap:wrap}}

/* Keep secondary information legible on light surfaces. */
.subtitle,.summary-card p,.summary-card small,.attention-card>span:last-child,.panel-heading p,.site-cell small,th,.footnote,.demo-note span,dt{color:#797979}.badge.healthy,.badge.connected,.badge.active,.badge.success{color:#6a6a6a}.badge.warning,.badge.paired,.badge.proposed{color:#6e6e6e}.badge.critical,.badge.invalid,.badge.failed{color:#676767}.badge.offline,.badge.lost{color:#5e5e5e}.badge{font-size:10px}td{font-size:12px}th{font-size:10px}.site-cell strong{font-size:12px}.site-cell small{font-size:10px}

/* Monochrome identity: contrast and labels communicate hierarchy and status. */
:root {
  --ink: #171717;
  --muted: #737373;
  --line: #e5e5e5;
  --accent: #000000;
  --bg: #fafafa;
  --secondary: #525252;
}
.sidebar { background: #f5f5f5; }
.topbar { background: #ffffff; }
.brand-mark, .primary { background: #111111; border-color: #111111; color: #ffffff; }
.primary:hover { background: #333333; border-color: #333333; color: #ffffff; }
nav .selected { background: #e5e5e5; color: #111111; }
.summary-card.total { background: #f0f0f0; border-color: #e0e0e0; }
.business-strip > a, .business-strip > a:last-child { background: #f5f5f5; border-color: #e5e5e5; }
.metric-icon, .purple { background: #ededed; border-color: #e0e0e0; color: #525252; }
.badge.healthy, .badge.connected, .badge.active, .badge.success { background: #f2f2f2; color: #525252; }
.badge.warning, .badge.paired, .badge.proposed { background: #e5e5e5; color: #333333; }
.badge.critical, .badge.invalid, .badge.failed { background: #404040; color: #ffffff; }
.badge.offline, .badge.lost { background: #111111; color: #ffffff; }
.status-dot.healthy { background: #999999; }
.status-dot.warning { background: #737373; }
.status-dot.critical { background: #404040; }
.status-dot.offline, .live-dot { background: #111111; }
.score, .score.warning, .score.critical, .score.offline { color: #171717; }
.update-badge, .update-dot, .deduction { background: #ebebeb; color: #333333; }
.error { background: #f5f5f5; border-color: #737373; color: #171717; }
.field-error, .danger { color: #171717; }

/* Comfortable typography and a quieter, softer monochrome interface. */
body { font-size: 14px; }
.sidebar { width: 248px; padding: 30px 20px; }
.app { margin-left: 248px; }
.brand { gap: 12px; font-size: 26px; }
.brand-mark {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
  background: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
}
.brand small { font-size: 10px; letter-spacing: 2.1px; margin-top: 0; }
.workspace { margin: 30px 0 22px; padding: 13px 11px; border-radius: 12px; font-size: 14px; }
.workspace-logo { display: block; object-fit: contain; flex: 0 0 30px; }
.workspace-chevron { flex: 0 0 18px; margin-left: auto; color: #737373; }
.workspace small, .user small { font-size: 12px; }
nav a { font-size: 14px; padding: 12px; gap: 12px; border-radius: 9px; }
.nav-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
.sidebar-bottom > p, .user { font-size: 12px; }
.topbar { font-size: 13px; padding: 0 32px; }
.top-right { font-size: 12px; }
main { padding: 32px; }
h1 { font-size: 30px; font-weight: 580; }
h2 { font-size: 16px; }
.subtitle { font-size: 14px; line-height: 1.6; }
.button { font-size: 13px; min-height: 40px; padding: 9px 15px; border-radius: 9px; }
.summary-card, .panel, .attention-grid, .detail-metrics, .login-box {
  border-radius: 12px;
  box-shadow: 0 2px 5px #00000003, 0 6px 20px #00000003;
}
.summary-card { padding: 20px; }
.summary-card p { font-size: 13px; }
.summary-card small { font-size: 12px; line-height: 1.5; }
.summary-card strong { font-size: 36px; }
.section-title > .muted, .attention-card > span:last-child { font-size: 12px; }
.business-strip > a { border-radius: 12px; }
.business-strip strong { font-size: 13px; }
.business-strip small { font-size: 12px; color: #737373; }
.metric-icon { border-radius: 8px; }
.panel-heading { padding: 22px; }
.panel-heading p, .text-link, .filters input, .filters select, .filters .button { font-size: 12px; }
.filters input, .filters select, .filters .button { min-height: 36px; border-radius: 7px; }
.filters .search { border-radius: 8px; }
.count, .badge, .update-badge, .update-dot { font-size: 11px; }
.badge { padding: 4px 8px; border-radius: 6px; }
th { font-size: 12px; }
td, .site-cell strong { font-size: 13px; }
.site-cell small, .small, .mono { font-size: 12px; }
.site-avatar { width: 33px; height: 33px; border-radius: 9px; font-size: 13px; }
.score { font-size: 14px; }
.pagination, .pagination nav a { font-size: 12px; }
.footnote { font-size: 12px; line-height: 1.6; }
.demo-note { font-size: 10px; margin-top: 0; }
.demo-note span { font-size: 12px; }
.breadcrumbs, dl, .reason-list li, .pad > p, .activity-list strong, .field { font-size: 13px; }
.field input, .field select, .field textarea { font-size: 14px; padding: 12px; border-radius: 8px; }
.activity-list small, .inset, .detail-metrics small { font-size: 12px; }
.detail-metrics small { letter-spacing: .3px; }
.detail-metrics .compact { font-size: 18px; }
.inset, .notice, .token { border-radius: 10px; }
.notice { font-size: 13px; }
.login-box { width: 440px; text-align: left; }
.login-box .brand { justify-content: flex-start; }
.login-box .footnote { text-align: left; }
.login-shell { padding: 24px 0; max-width: 100%; }
.login-shell .login-box .brand { margin-bottom: 32px; }
.login-shell .subtitle { margin: 12px 0 24px; line-height: 1.6; }
.login-hint { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.login-footer { margin: 20px 15px 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Hover feedback stays in place; only navigation gently slides between views. */
a, button, input, select, textarea, .summary-card, .attention-card {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}
nav a:hover { background: #eaeaea; color: #111111; }
nav a.selected:hover { background: #e2e2e2; }
.button:hover, a.summary-card:hover, .business-strip > a:hover {
  border-color: #cccccc;
  box-shadow: 0 2px 4px #00000005, 0 5px 16px #00000008;
}
.attention-card:hover { background: #fafafa; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #aaaaaa; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  main { view-transition-name: page-content; }
  .sidebar { view-transition-name: sidebar; }
  .topbar { view-transition-name: topbar; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-group(sidebar), ::view-transition-group(topbar) { animation: none; }
  ::view-transition-old(sidebar), ::view-transition-old(topbar) { animation: none; opacity: 0; }
  ::view-transition-new(sidebar), ::view-transition-new(topbar) { animation: none; }
  ::view-transition-old(page-content) { animation: page-leave 180ms ease both; }
  ::view-transition-new(page-content) { animation: page-arrive 240ms cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes page-leave { to { opacity: 0; transform: translateX(-10px); } }
@keyframes page-arrive { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (max-width: 1200px) {
  .sidebar { width: 228px; padding: 26px 16px; }
  .app { margin-left: 228px; }
  main { padding: 26px; }
  .brand { font-size: 24px; }
  .summary-card { padding: 16px; }
  .summary-card small, .attention-card > span:last-child { font-size: 12px; }
}
@media (max-width: 800px) {
  .sidebar { width: 100%; padding: 16px; }
  .app { margin-left: 0; }
  .brand { font-size: 23px; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .sidebar nav a { font-size: 13px; padding: 9px 11px; gap: 8px; }
  .nav-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .topbar { padding: 0 18px; font-size: 12px; }
  main { padding: 24px 18px; }
  h1 { font-size: 25px; }
  .page-heading { flex-wrap: wrap; gap: 16px; }
  .page-heading > .button { font-size: 12px; padding: 9px 12px; }
  .summary-card p { font-size: 13px; }
  .summary-card.total small { display: block; }
  .login-box { width: calc(100vw - 30px); max-width: 440px; }
  .detail-metrics > div { padding: 0 16px; }
  .detail-metrics small { font-size: 10px; }
  .detail-metrics .compact { font-size: 16px; }
  .filters input, .filters select { max-width: 100%; }
}

.time-report-table td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.time-report-table .preserve { max-width: 520px; }
.sidebar nav { overflow-y: auto; min-height: 0; }
details > summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
@media print {
    @page { size: A4 landscape; margin: 12mm; }
    .sidebar, .topbar, footer, .no-print { display: none !important; }
    .app { margin: 0 !important; }
    main { padding: 0 !important; }
    body { background: white; color: black; font-size: 10pt; }
    .panel { box-shadow: none; margin-bottom: 12px; }
    .table-scroll { overflow: visible; }
    table { min-width: 0 !important; width: 100%; }
    thead { display: table-header-group; }
    td, th { padding: 8px; font-size: 10pt; }
    a { color: black; text-decoration: none; }
    .detail-metrics { display: flex; }
    h1 { font-size: 22pt; }
}
@media screen and (min-width: 801px) and (max-height: 900px) {
    .sidebar .workspace { margin: 20px 0 16px; }
    .sidebar nav { gap: 3px; }
    .sidebar nav a { padding-top: 8px; padding-bottom: 8px; }
    .sidebar-bottom > p, .sidebar-bottom > .badge { display: none; }
    .sidebar-bottom { padding-top: 16px; }
}

.timer-dock { position: fixed; z-index: 100; right: 24px; bottom: 24px; width: 350px; max-width: calc(100vw - 32px); padding: 20px; border: 1px solid #333; border-radius: 18px; background: #151515; color: #fff; box-shadow: 0 12px 40px #0003; }
.timer-dock-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #ccc; margin-bottom: 8px; }
.timer-pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.timer-task-link { display: block; font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer-task-link:hover { color: #ddd; }
.timer-dock-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.timer-clock { font-size: 28px; font-weight: 550; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.timer-stop { border: 1px solid #555; background: #fff; color: #111; border-radius: 9px; padding: 10px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.timer-stop:hover { background: #e8e8e8; }
.timer-dock a:focus-visible, .timer-dock button:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.has-running-timer main { padding-bottom: 220px; }
.button:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
    .timer-dock { animation: timer-appear .22s ease-out; }
    .timer-pulse { animation: timer-pulse 2.4s ease-in-out infinite; }
    @keyframes timer-appear { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes timer-pulse { 50% { opacity: .4; } }
}
@media (max-width: 800px) { .timer-dock { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); } }
@media print { .has-running-timer main { padding-bottom: 0; } }

.task-status-form { position: relative; width: 144px; }
.task-status-form select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 44px; padding: 11px 42px 11px 16px; line-height: 1.4; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; }
.task-status-form::after { content: ""; position: absolute; right: 18px; top: 17px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }

.task-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.task-title { white-space: normal; overflow-wrap: anywhere; }
.task-inline-time { display: inline-flex; align-items: center; gap: 6px; color: #71768a; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }
.task-inline-time svg, .task-description-link svg { flex-shrink: 0; }
.task-description-link { display: inline-flex; align-items: center; color: #71768a; padding: 4px; border-radius: 5px; }
.task-description-link:hover { background: #f0f1f5; color: #353b51; }
.task-customer { display: block; margin-top: 5px; }
.task-status-form[data-status="open"] { color: #52617d; }
.task-status-form[data-status="open"] select { color: #52617d; background: #f0f3fa; border-color: #dce3ef; }
.task-status-form[data-status="in_progress"] { color: #91611e; }
.task-status-form[data-status="in_progress"] select { color: #91611e; background: #fff6e7; border-color: #f1dfbc; }
.task-status-form[data-status="done"] { color: #397455; }
.task-status-form[data-status="done"] select { color: #397455; background: #edf7f0; border-color: #d4e8da; }

.task-identity { display: flex; align-items: center; gap: 13px; }
.task-summary { min-width: 0; }
.task-avatar { position: relative; flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #edf0f3; color: #929ba7; }
.task-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #edf0f3; opacity: 0; }
.task-avatar img.is-loaded { opacity: 1; }

.team-list > .list-row:first-child { border-top: 0; }

.task-avatar img.avatar-fallback { position: static; width: 24px; height: 26px; opacity: .55; background: transparent; object-fit: contain; }

.login-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 20px 0; font-size: 13px; }
.login-options label { display: flex; align-items: center; gap: 7px; }
.login-options input { accent-color: #171717; }
.login-options a { text-decoration: underline; text-underline-offset: 3px; }

.invoice-badge { display: inline-flex; white-space: nowrap; padding: 7px 12px; border-radius: 20px; background: #eef0fb; color: #535a92; font-size: 12px; font-weight: 600; }

.profile-identity { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.profile-identity h2 { margin: 0 0 5px; }
.profile-identity p { margin: 4px 0; }
.task-avatar.profile-avatar { width: 72px; height: 72px; flex-basis: 72px; }
.task-avatar.profile-avatar img.avatar-fallback { width: 40px; height: 43px; }
@media (max-width: 600px) { .profile-identity { align-items: flex-start; gap: 14px; } .profile-identity p { overflow-wrap: anywhere; } }

.task-avatar-trigger { display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.task-avatar-trigger:hover .task-avatar { box-shadow: 0 0 0 3px #dce3ef; }
.assignee-dialog { width: min(440px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 18px; padding: 28px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px #0003; }
.assignee-dialog::backdrop { background: #1116; }
.assignee-dialog h2 { margin-top: 0; }
.assignee-dialog .form-actions { flex-wrap: wrap; }

.site-favicon { flex-shrink: 0; background: #767676; border: 1px solid #767676; }
.site-favicon img { width: 28px; height: 28px; object-fit: contain; }

.task-work-date { display: block; margin-top: 5px; font-size: 13px; color: #777; }
.task-work-date strong { font-weight: 550; color: #444; }
.work-date { display: block; white-space: nowrap; }
.work-date strong { font-size: 15px; font-weight: 600; }
.work-date small { display: block; color: #777; margin-top: 3px; }
.delete-time { margin-top: 10px; max-width: 290px; white-space: normal; }
.delete-time summary { cursor: pointer; color: #7e4545; font-size: 13px; }
.delete-time p { font-size: 13px; line-height: 1.5; }

.delete-time .delete-time-trigger { display: inline-flex; align-items: center; gap: 8px; color: #823d3d; border: 1px solid #e6cccc; background: #fff8f8; font-size: 14px; white-space: nowrap; list-style: none; }
.delete-time .delete-time-trigger::-webkit-details-marker { display: none; }
.delete-time .delete-time-trigger:hover { background: #f9eded; border-color: #c99; }
.delete-time-locked { display: block; margin-top: 8px; max-width: 220px; white-space: normal; }

.task-time-entries { margin-top: 12px; white-space: normal; min-width: 260px; max-width: 440px; }
.task-time-entries > summary { cursor: pointer; font-size: 14px; font-weight: 550; color: #444; padding: 6px 0; }
.task-time-entries > ul { list-style: none; padding: 0; margin: 8px 0 0; background: #fafafa; border: 1px solid #e6e6e6; border-radius: 12px; }
.task-time-entries > ul > li { padding: 14px; border-bottom: 1px solid #e6e6e6; }
.task-time-entries > ul > li:last-child { border-bottom: 0; }
.task-entry-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 4px; font-size: 14px; }
.task-time-entries p { overflow-wrap: anywhere; font-size: 13px; }
.delete-task-confirm { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; margin: 12px 0; }
.delete-task-confirm input { flex-shrink: 0; margin-top: 3px; }

.task-delete-cell { width: 56px; text-align: right; padding-left: 8px; }
.task-delete-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #111; cursor: pointer; }
.task-delete-icon:hover { background: #f0f0f0; }
.task-delete-icon:disabled { opacity: .3; cursor: not-allowed; }
.task-delete-dialog { text-align: left; white-space: normal; }
.task-delete-dialog form > button + button { margin-left: 8px; }

.site-update-toolbar{margin:0 0 24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}.site-update-toolbar p{flex-basis:100%;margin:0}.site-update-buttons{display:flex;gap:8px;flex-wrap:wrap;min-width:225px}.site-update-buttons .button{padding:8px 12px;white-space:nowrap}.site-update-buttons small{flex-basis:100%;font-size:12px}.update-count{margin-left:8px;background:#efefef;border-radius:7px;padding:2px 7px;font-variant-numeric:tabular-nums}.update-review{padding:26px;margin-bottom:24px}.update-review p{max-width:900px}.backup-confirm{display:flex;align-items:flex-start;gap:12px;margin:24px 0;max-width:850px}.backup-confirm input{width:18px;height:18px;flex:none;margin-top:4px}.update-review details{margin-top:24px}

.site-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px}.site-summary a{padding:20px;display:flex;flex-direction:column;gap:8px}.site-summary strong{font-size:30px}.site-summary span{color:#737373;font-size:14px}.site-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0}.site-filters>input{min-width:260px;flex:1}.site-filters input,.site-filters select{padding:12px;border:1px solid #ddd;border-radius:10px;background:white;font:inherit}.site-bulk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}.saved-site-views{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.saved-site-views>span{display:flex;gap:8px;padding:6px 12px;border:1px solid #ddd;border-radius:30px}.saved-site-views form{display:inline}.saved-site-views button{border:0;background:none;cursor:pointer}.site-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(620px,94vw);height:100dvh;max-height:100dvh;border:0;border-left:1px solid #ddd;padding:28px;box-shadow:-15px 0 60px #0002;background:#fff;overflow-y:auto}.site-drawer[open]{animation:site-slide .22s ease-out}.site-drawer::backdrop{background:#0004}.drawer-close{position:sticky;top:0;float:right;z-index:2;background:#fff}.site-drawer-content h2{font-size:28px;padding-right:85px}.site-drawer-content h3{margin-top:30px}.site-drawer-content .actions{display:flex;flex-wrap:wrap;gap:8px}.site-drawer-content details{padding:16px 0;border-bottom:1px solid #eee}.site-drawer-content .field{margin:15px 0}#site-selection input[type=checkbox]{width:18px;height:18px;accent-color:#111}@keyframes site-slide{from{transform:translateX(40px);opacity:.4}to{transform:translateX(0);opacity:1}}@media(max-width:850px){.site-summary{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){.site-drawer[open]{animation:none}}

/* Customer economics */
.commerce-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.commerce-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 22px 0; }
.commerce-filters .field { min-width: 160px; }
.commerce-item { border-top: 1px solid var(--line); padding: 18px 0; }
.commerce-item:first-of-type { border-top: 0; }
.commerce-item > summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; align-items: center; }
.commerce-item > summary small { display: block; margin-top: 5px; }
.commerce-item > summary::after { content: '+'; font-size: 20px; }
.commerce-item[open] > summary::after { content: '−'; }
.commerce-item-body { padding: 20px 0 0; }
.commerce-item-body > form, .commerce-item-body > details { margin-top: 22px; }
.commerce-confirm { display: flex; align-items: baseline; gap: 10px; margin: 20px 0; }
.commerce-csv { overflow-x: auto; padding: 16px; background: #f5f5f5; border-radius: 8px; font-size: 12px; }
@media (max-width: 800px) { .commerce-summary { grid-template-columns: 1fr 1fr; } .commerce-item > summary { flex-wrap: wrap; } }
@media print { .commerce-filters, .commerce-item form { display: none; } }

.storage-chart { display: grid; gap: 10px; margin: 20px 0; }
.storage-chart > div { display: grid; grid-template-columns: minmax(60px,1fr) 45px 55px; align-items: center; gap: 12px; font-size: 12px; }
.storage-chart progress { width: 100%; height: 9px; accent-color: #292929; }

.commerce-jump-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.commerce-jump-links a { font-size: 13px; color: var(--ink); }
.sidebar { overflow-y: auto; }
#service-catalog, #assign-service, #customer-services { scroll-margin-top: 24px; }

.customer-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end}.customer-overview{min-width:1100px}.customer-overview td{vertical-align:top;padding-top:24px;padding-bottom:24px}.customer-overview th:first-child{min-width:210px}.customer-meta{display:block;margin-top:6px;color:var(--muted,#777);font-size:13px;line-height:1.5}.customer-meta span,.customer-meta a{display:block;overflow-wrap:anywhere}.customer-tags{display:flex;flex-wrap:wrap;gap:6px;max-width:190px}.customer-tag{display:inline-block;padding:4px 9px;background:#f2f2f2;border-radius:7px;font-size:12px;white-space:nowrap}.customer-number{white-space:nowrap;font-variant-numeric:tabular-nums}.customer-warning{color:#9b631f}.customer-overview .badge{margin-top:8px}@media(max-width:1000px){.customer-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.customer-filters{grid-template-columns:1fr}}
.commerce-jump-links a.button.primary{color:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.team-directory{overflow:hidden}.team-directory-heading{display:flex;justify-content:space-between;padding:16px 26px;background:#fafafa;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}.team-directory-heading span:last-child{width:318px}.team-member{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:23px 26px}.team-member+.team-member{border-top:1px solid var(--line)}.team-member-identity{display:flex;align-items:center;gap:15px;min-width:0}.team-member-details{display:flex;flex-direction:column;gap:5px;min-width:0}.team-member-details strong{font-size:15px;font-weight:600;overflow-wrap:anywhere}.team-member-details>span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.team-self{display:inline-block;vertical-align:middle;font-size:11px;font-weight:500;margin-left:9px;padding:1px 7px;background:#f1f1f1;border-radius:5px;color:#777}.team-role-form{display:grid;grid-template-columns:minmax(0,230px) 76px;align-items:center;gap:12px;margin:0}.team-role-field{position:relative;display:block;min-width:0}.team-role-field:after{content:'';position:absolute;right:17px;top:18px;width:7px;height:7px;border-right:1.5px solid #666;border-bottom:1.5px solid #666;transform:rotate(45deg);pointer-events:none}.team-role-field select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-height:46px;border:1px solid #e1e1e1;border-radius:10px;padding:11px 42px 11px 15px;background:#fff;color:var(--ink);font-size:14px;cursor:pointer}.team-role-form .button{min-height:46px;border-radius:10px}.team-role-badge{justify-self:end;padding:8px 12px;background:#f4f4f4;border-radius:8px;font-size:13px;color:#555}.team-role-help{margin:16px 0 30px;line-height:1.6}@media(max-width:700px){.team-directory-heading span:last-child{display:none}.team-member{grid-template-columns:1fr;gap:17px;padding:20px}.team-role-form{grid-template-columns:minmax(0,1fr) 76px;width:100%;padding-left:0}.team-role-badge{justify-self:start}.team-directory-heading{padding:14px 20px}}
.team-member-actions{display:flex;align-items:center;gap:16px}.team-member-actions .task-delete-icon{flex-shrink:0}.team-directory-heading span:last-child{width:370px}@media(max-width:700px){.team-member-actions{width:100%;gap:10px}.team-member-actions .team-role-form{flex:1;min-width:0}}

.work-group{margin-top:30px}.work-group-heading{display:flex;align-items:center;gap:12px}.work-group-heading h2{margin:0;font-size:21px}.work-group-description{margin:8px 0 18px;font-size:14px}.work-group-archive{border:1px solid var(--border,#e5e5e5);border-radius:16px;padding:20px 24px;background:#fff}.work-group-archive>summary{cursor:pointer;font-weight:600;list-style:none}.work-group-archive>summary::-webkit-details-marker{display:none}.work-group-archive>summary:after{content:'+';margin-left:auto;font-size:22px;font-weight:400}.work-group-archive[open]>summary:after{content:'−'}.work-group-archive:not([open]){margin-top:16px}.work-group-archive .panel{box-shadow:none}.work-group .pagination:empty{display:none}

/* Task detail overview */
.task-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:22px;align-items:start;margin-bottom:26px}
.task-overview>.panel{margin:0;border-radius:20px;box-shadow:0 5px 22px rgba(0,0,0,.025)}
.task-brief{padding:28px 30px;min-height:260px}
.task-brief-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.task-brief-heading h2{font-size:19px;letter-spacing:-.3px}
.task-brief-copy{font-size:16px;line-height:1.85;overflow-wrap:anywhere;max-width:78ch}
.task-state{display:inline-flex;align-items:center;gap:7px;border-radius:30px;padding:6px 11px;font-size:12px;white-space:nowrap;background:#f3f3f3;color:#666}
.task-state>span{width:6px;height:6px;border-radius:50%;background:currentColor}
.task-state-in_progress{background:#eef2fb;color:#526891}.task-state-done{background:#edf7f0;color:#477d60}
.task-context{padding:24px;display:flex;flex-direction:column;gap:20px}
.task-context-person{display:flex;align-items:center;gap:13px}
.task-context-person .task-avatar{width:48px;height:48px;flex:0 0 48px}
.task-context-person>div{min-width:0}.task-context-person strong{display:block;font-size:15px;overflow-wrap:anywhere}
.task-context-label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.task-context-item{font-size:14px;line-height:1.6}.task-context-item small,.task-context-person small{display:block;margin-top:5px;line-height:1.5}
.task-billing-label{font-weight:550}.task-context-invoice{padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:1000px){.task-overview{grid-template-columns:minmax(0,1fr)}.task-brief{min-height:0;padding:24px}.task-context{padding:24px}}
@media(prefers-reduced-motion:no-preference){.task-overview>.panel{transition:box-shadow .2s ease}.task-overview>.panel:hover{box-shadow:0 7px 26px rgba(0,0,0,.045)}}