:root {
  --ink: #101828;
  --ink-muted: #667085;
  --ink-faint: #98a2b3;
  --canvas: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #e7ecf3;
  --brand: #ff3d52;
  --brand-dark: #de1d36;
  --brand-soft: #fff0f2;
  --green: #12b76a;
  --green-soft: #e9fff4;
  --yellow: #f4b400;
  --yellow-soft: #fff8df;
  --blue: #3478f6;
  --blue-soft: #eaf2ff;
  --orange: #f97316;
  --orange-soft: #fff2e6;
  --danger: #e11d48;
  --danger-soft: #fff0f3;
  --shadow: 0 18px 44px rgba(16, 24, 40, .08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 11px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.boot-screen, .login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 61, 82, .15), transparent 31%),
    radial-gradient(circle at 85% 70%, rgba(52, 120, 246, .13), transparent 30%),
    linear-gradient(135deg, #f9fbff 0%, #f4f6fa 100%);
}
.boot-screen { align-content: center; gap: 12px; color: var(--ink-muted); font-weight: 700; }
.boot-mark, .brand-mark {
  width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff5a6b, #ed1d3c); color: #fff; font-size: 25px; font-weight: 900;
  box-shadow: 0 16px 28px rgba(237, 29, 60, .24);
}

.login-page { padding: 28px; }
.login-shell { width: min(1020px, 100%); display: grid; grid-template-columns: 1.2fr .8fr; background: var(--surface); border: 1px solid rgba(255,255,255,.9); border-radius: 32px; box-shadow: var(--shadow); overflow: hidden; }
.login-visual { padding: 52px; color: #fff; position: relative; min-height: 540px; background: linear-gradient(145deg, #101828 5%, #1e293b 58%, #ff3d52 180%); overflow: hidden; }
.login-visual::before, .login-visual::after { content: ""; position: absolute; border-radius: 999px; filter: blur(1px); opacity: .8; }
.login-visual::before { width: 300px; height: 300px; background: rgba(255, 61, 82, .5); right: -110px; top: -95px; }
.login-visual::after { width: 260px; height: 260px; background: rgba(52, 120, 246, .48); left: -100px; bottom: -115px; }
.login-visual > * { position: relative; z-index: 1; }
.login-visual .brand-line { display: flex; gap: 14px; align-items: center; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.login-visual h1 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.055em; line-height: 1.04; margin: 95px 0 18px; max-width: 560px; }
.login-visual p { color: rgba(255,255,255,.72); max-width: 480px; font-size: 16px; line-height: 1.7; }
.login-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.login-chips span { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); padding: 9px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.login-card { padding: 54px; display: grid; align-content: center; }
.login-card h2 { margin: 0; font-size: 29px; letter-spacing: -.04em; }
.login-card > p { color: var(--ink-muted); line-height: 1.6; margin: 10px 0 26px; }

.form-stack { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field label { color: #344054; font-size: 13px; font-weight: 800; }
.field input, .field select { border: 1px solid #d9e1ec; background: #fff; border-radius: 11px; min-height: 46px; padding: 0 13px; outline: none; transition: border .2s, box-shadow .2s; }
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(52,120,246,.13); }
.field small { color: var(--ink-faint); line-height: 1.45; }

.button { border: 0; min-height: 42px; padding: 0 15px; border-radius: 11px; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; justify-content: center; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.button-primary { color: #fff; background: linear-gradient(135deg, #ff5365, #ef2342); box-shadow: 0 10px 18px rgba(239,35,66,.18); }
.button-dark { color: #fff; background: var(--ink); }
.button-light { color: #344054; background: var(--surface); border: 1px solid var(--line); }
.button-blue { color: #fff; background: var(--blue); }
.button-danger { color: #fff; background: var(--danger); }
.button-sm { min-height: 35px; padding: 0 11px; border-radius: 9px; font-size: 12px; }
.button-block { width: 100%; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px 1fr; }
.sidebar { background: #111827; color: #e5e7eb; padding: 24px 16px; position: sticky; height: 100vh; top: 0; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 8px 9px 28px; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px; font-size: 18px; }
.brand-copy strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.brand-copy span { color: #98a2b3; font-size: 11px; display: block; margin-top: 2px; letter-spacing: .04em; text-transform: uppercase; }
.nav-label { padding: 16px 12px 8px; color: #718096; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: grid; gap: 5px; }
.nav-link { text-decoration: none; padding: 11px 12px; border-radius: 11px; color: #cbd5e1; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(255,61,82,.95), rgba(255,61,82,.72)); box-shadow: 0 8px 17px rgba(255,61,82,.16); }
.nav-icon { width: 19px; text-align: center; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 10px; padding: 16px 8px 4px; }
.profile-mini { display: flex; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.045); }
.avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #ff5c6d, #ff2f4b); color: #fff; font-size: 13px; font-weight: 900; }
.profile-mini strong { display:block; color:#fff; font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-mini span { display:block; margin-top: 3px; color:#98a2b3; font-size: 11px; }

.main-panel { min-width: 0; }
.topbar { padding: 23px 34px 17px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.breadcrumb { color: var(--ink-muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); }
.live-indicator { display: inline-flex; align-items: center; gap: 8px; color: #16794c; background: var(--green-soft); padding: 9px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.live-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--green); box-shadow: 0 0 0 4px rgba(18,183,106,.12); }
.content { padding: 8px 34px 42px; max-width: 1600px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 10px 0 25px; }
.page-head h1 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.055em; }
.page-head p { color: var(--ink-muted); margin: 8px 0 0; line-height: 1.5; }

.grid-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 21px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; box-shadow: 0 7px 16px rgba(16,24,40,.035); position: relative; overflow: hidden; }
.stat-card::after { content:""; position:absolute; width: 70px; height:70px; border-radius:100%; right:-28px; top:-28px; background: var(--accent-soft, var(--brand-soft)); }
.stat-card small { display: block; color: var(--ink-muted); font-weight: 800; letter-spacing: .035em; text-transform: uppercase; font-size: 10px; }
.stat-card strong { display: block; margin-top: 12px; font-size: 31px; line-height: 1; letter-spacing: -.065em; color: var(--accent, var(--ink)); }
.stat-card span { display:block; margin-top: 8px; color: var(--ink-muted); font-size: 12px; }
.accent-red { --accent: var(--brand); --accent-soft: var(--brand-soft); }
.accent-green { --accent: var(--green); --accent-soft: var(--green-soft); }
.accent-blue { --accent: var(--blue); --accent-soft: var(--blue-soft); }
.accent-yellow { --accent: #bd8200; --accent-soft: var(--yellow-soft); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 18px rgba(16,24,40,.03); }
.panel-pad { padding: 23px; }
.panel-head { padding: 21px 23px 17px; border-bottom: 1px solid var(--line); display:flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-head h2, .section-title { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.panel-head p { color:var(--ink-muted); margin:5px 0 0; font-size:13px; }
.company-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.company-card { border: 1px solid var(--line); border-radius: 19px; padding: 19px; background: linear-gradient(160deg, #fff, #fbfcff); display: grid; gap: 18px; }
.company-card:hover { border-color: #d5dce8; box-shadow: 0 14px 22px rgba(16,24,40,.055); }
.company-top { display:flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.company-identity { display:flex; gap:12px; min-width: 0; }
.company-logo { width: 42px; height:42px; border-radius: 14px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-size: 21px; font-weight: 900; flex:0 0 auto; }
.company-identity h3 { margin:1px 0 5px; font-size:17px; letter-spacing:-.03em; overflow-wrap:anywhere; }
.company-identity p { color:var(--ink-muted); font-size:11px; margin:0; font-weight:700; }
.metric-row { display:grid; grid-template-columns: repeat(3,1fr); border-top:1px solid var(--line); padding-top:14px; }
.metric-row div { padding: 0 8px; border-right:1px solid var(--line); }
.metric-row div:first-child { padding-left:0; }
.metric-row div:last-child { border-right:0; }
.metric-row span { display:block; color:var(--ink-faint); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.metric-row strong { display:block; margin-top:5px; font-size:20px; letter-spacing:-.05em; }
.text-green { color:var(--green); }.text-red{color:var(--danger)}.text-yellow{color:#bc8500}.text-blue{color:var(--blue)}

.table-wrap { overflow-x: auto; }
table { width:100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 15px 16px; border-bottom: 1px solid var(--line); text-align:left; vertical-align:middle; }
th { color:#667085; font-size: 11px; text-transform: uppercase; letter-spacing:.05em; font-weight: 900; background: #fcfdff; }
td { font-size: 13px; color: #344054; }
tbody tr:hover { background:#fcfdff; }
.cell-title { color:var(--ink); font-weight:800; }
.cell-sub { color:var(--ink-muted); font-size:11px; display:block; margin-top:3px; }

.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 9px; font-size:11px; font-weight:900; white-space:nowrap; }
.badge::before { content:""; width:6px; height:6px; border-radius:999px; background:currentColor; }
.badge-online { color:#108957; background:var(--green-soft); }.badge-offline{color:#c32643;background:var(--danger-soft)}.badge-unknown{color:#a16800;background:var(--yellow-soft)}.badge-pending{color:#2b70d7;background:var(--blue-soft)}.badge-revoked{color:#667085;background:#eef2f6}
.toner-set { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.toner-pill { display:inline-flex; align-items:center; gap:5px; border-radius:8px; background:#f4f6f9; padding:4px 6px; font-size:11px; font-weight:900; color:#344054; }
.toner-dot { width:8px; height:8px; border-radius:100%; background:#171717; }.toner-dot.cyan{background:#05a9d6}.toner-dot.magenta{background:#d92d8a}.toner-dot.yellow{background:#f4c30f}
.low { color: #c32643; background:var(--danger-soft); }

.empty { padding: 48px 22px; text-align:center; color:var(--ink-muted); }
.empty .empty-icon { width:50px; height:50px; margin:0 auto 12px; border-radius:16px; background:var(--surface-soft); display:grid; place-items:center; font-size:21px; }
.empty h3 { margin:0 0 6px; color:var(--ink); font-size:16px; }.empty p{margin:0; font-size:13px; line-height:1.6;}

.detail-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap:18px; }
.info-card { padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.info-card h3 { margin:0 0 12px; letter-spacing:-.03em; font-size:16px; }
.kv { display:grid; grid-template-columns: 1fr auto; gap: 12px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:13px; }.kv:last-child{border-bottom:0}.kv span{color:var(--ink-muted)}.kv strong{color:var(--ink);text-align:right;overflow-wrap:anywhere;max-width: 240px;}

.modal-backdrop { position:fixed; inset:0; z-index:30; background:rgba(16,24,40,.52); backdrop-filter: blur(4px); display:grid; place-items:center; padding:18px; }
.modal { width:min(610px, 100%); max-height: calc(100vh - 36px); overflow:auto; background:var(--surface); border-radius:24px; box-shadow:0 28px 70px rgba(0,0,0,.28); }
.modal-head { padding:21px 23px 17px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:start; gap:15px; }.modal-head h2{margin:0;font-size:20px;letter-spacing:-.04em}.modal-head p{margin:6px 0 0;color:var(--ink-muted);font-size:13px;line-height:1.5}.modal-body{padding:22px 23px}.modal-foot{padding:16px 23px 22px;display:flex;justify-content:flex-end;gap:9px}
.icon-button { width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:10px; font-size:20px; line-height:1; color:var(--ink-muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.form-grid .span-2{grid-column:span 2}
.activation-card { border:1px solid #ffd8de; background:linear-gradient(135deg,#fff6f7,#fff); padding:16px; border-radius:15px; margin-top:15px; }.activation-card strong{display:block;font-size:12px;color:#a61c35;text-transform:uppercase;letter-spacing:.06em}.activation-code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;color:var(--ink);font-size:19px;font-weight:900;letter-spacing:.08em;margin:8px 0;overflow-wrap:anywhere}.code-block{margin:12px 0 0;padding:12px;border-radius:10px;background:#111827;color:#d4d9e2;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow:auto}

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 50; display:grid; gap:10px; width:min(380px, calc(100vw - 36px)); }.toast{background:#111827;color:#fff;border-radius:13px;padding:13px 14px;box-shadow:0 14px 28px rgba(0,0,0,.2);font-size:13px;font-weight:700;line-height:1.45}.toast.error{background:#b42340}.toast.success{background:#13734b}
.loading-block { padding:36px; text-align:center; color:var(--ink-muted); font-weight:700; }
.muted { color:var(--ink-muted); }.hint{color:var(--ink-faint);font-size:12px;line-height:1.55}.right{margin-left:auto}.hidden{display:none!important}

@media (max-width: 1050px) { .grid-stats{grid-template-columns:repeat(2,1fr)}.company-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.app-shell{grid-template-columns:220px 1fr}.topbar,.content{padding-left:24px;padding-right:24px}.sidebar{padding:20px 12px}.login-shell{grid-template-columns:1fr}.login-visual{min-height:330px;padding:38px}.login-visual h1{margin-top:45px}.login-card{padding:38px} }
@media (max-width: 740px) { .app-shell{display:block}.sidebar{position:relative;height:auto;padding:14px;display:block}.brand{padding-bottom:12px}.nav-label{display:none}.nav-links{display:flex;overflow-x:auto;padding:4px 0}.nav-link{white-space:nowrap}.sidebar-bottom{display:none}.topbar,.content{padding-left:16px;padding-right:16px}.topbar{padding-top:16px}.page-head{display:grid}.grid-stats{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px}.stat-card strong{font-size:25px}.panel-head{padding:17px}.panel-pad{padding:16px}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.login-page{padding:0}.login-shell{border-radius:0;min-height:100vh}.login-visual{display:none}.login-card{padding:30px 24px}.live-indicator{display:none} }


/* Newton MPS 4.0 branding and data refresh controls */
.boot-logo { width: 82px; height: 82px; padding: 7px; border-radius: 25px; background: #fff; display: grid; place-items: center; box-shadow: 0 18px 35px rgba(16,24,40,.14); }
.boot-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark.brand-logo { padding: 3px; overflow: hidden; background: #fff; box-shadow: 0 10px 18px rgba(0,0,0,.2); }
.brand-mark.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-copy b, .login-visual b, .login-product b { color: #ff8b98; font-weight: 900; }
.brand-copy b { color: #ff6575; }
.version-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 7px; margin-left: 3px; color: #fff; background: linear-gradient(135deg, #ff5365, #ef2342); font-size: 10px; font-weight: 900; letter-spacing: .04em; vertical-align: middle; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.button-refresh { white-space: nowrap; }
.refresh-glyph { display: inline-block; font-size: 16px; line-height: 1; font-weight: 900; }
.button-refresh.is-loading .refresh-glyph { animation: newton-spin .8s linear infinite; }
@keyframes newton-spin { to { transform: rotate(360deg); } }
.login-logo { width: 44px; height: 44px; padding: 4px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: 0 12px 25px rgba(0,0,0,.18); }
.login-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login-product { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--ink); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.login-product img { width: 30px; height: 30px; object-fit: contain; border-radius: 9px; border: 1px solid var(--line); padding: 2px; }
@media (max-width: 740px) { .topbar-actions { justify-content: flex-start; } .button-refresh { min-height: 34px; } }

/* =========================================================
   NEWTON MPS 4.0 — RED / WHITE / BLACK LOGIN EXPERIENCE
   ========================================================= */
:root {
  --ink: #090909;
  --ink-muted: #686868;
  --ink-faint: #969696;
  --canvas: #f5f5f5;
  --surface: #ffffff;
  --surface-soft: #fafafa;
  --line: #e6e6e6;
  --brand: #e31d25;
  --brand-dark: #b80d14;
  --brand-soft: #fff1f2;
  --blue: #111111;
  --blue-soft: #f0f0f0;
  --shadow: 0 24px 64px rgba(0,0,0,.12);
}

body {
  background: #f7f7f7;
}

.button-primary {
  background: linear-gradient(135deg, #ee2830, #c90812);
  box-shadow: 0 12px 24px rgba(201, 8, 18, .25);
}

.button-primary:hover {
  box-shadow: 0 16px 30px rgba(201, 8, 18, .32);
}

.sidebar {
  background: linear-gradient(165deg, #050505 0%, #111111 58%, #1e0607 100%);
  border-right: 1px solid rgba(227,29,37,.2);
}

.nav-link.active {
  background: linear-gradient(90deg, #e31d25, #bd0b14);
  box-shadow: 0 10px 20px rgba(227,29,37,.25);
}

.brand-copy b,
.login-visual b,
.login-product b {
  color: #e31d25;
}

.brand-copy b {
  color: #ff676d;
}

/* Minimal centered login, matching the requested sign-in layout. */
.login-page.login-page-minimal {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: 28px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.92), transparent 42%),
    linear-gradient(140deg, #050505 0%, #151515 45%, #36080b 100%);
}

.login-page.login-page-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(110deg, rgba(255,255,255,.05) 0 1px, transparent 1px 82px),
    linear-gradient(25deg, rgba(227,29,37,.07) 0 1px, transparent 1px 112px);
  background-size: 82px 82px, 112px 112px;
  opacity: .52;
}

.login-smoke {
  position: absolute;
  inset: -24%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.smoke {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(52px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

.smoke-one {
  width: 34rem;
  height: 20rem;
  top: 2%;
  left: -14%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.36), rgba(255,255,255,.08) 48%, transparent 73%);
  animation: smoke-drift-one 17s ease-in-out infinite alternate;
}

.smoke-two {
  width: 38rem;
  height: 25rem;
  right: -18%;
  top: 24%;
  background: radial-gradient(ellipse at center, rgba(227,29,37,.45), rgba(227,29,37,.1) 48%, transparent 74%);
  animation: smoke-drift-two 22s ease-in-out infinite alternate;
}

.smoke-three {
  width: 31rem;
  height: 21rem;
  bottom: -12%;
  left: 12%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.22), rgba(255,255,255,.04) 50%, transparent 74%);
  animation: smoke-drift-three 19s ease-in-out infinite alternate;
}

.smoke-four {
  width: 28rem;
  height: 18rem;
  right: 17%;
  bottom: -7%;
  background: radial-gradient(ellipse at center, rgba(255,57,63,.28), rgba(255,57,63,.03) 50%, transparent 74%);
  animation: smoke-drift-four 15s ease-in-out infinite alternate;
}

@keyframes smoke-drift-one {
  0% { transform: translate3d(-7%, -3%, 0) rotate(-8deg) scale(.94); opacity: .42; }
  100% { transform: translate3d(42%, 16%, 0) rotate(11deg) scale(1.16); opacity: .72; }
}

@keyframes smoke-drift-two {
  0% { transform: translate3d(11%, -4%, 0) rotate(12deg) scale(1.06); opacity: .38; }
  100% { transform: translate3d(-38%, 23%, 0) rotate(-8deg) scale(.88); opacity: .7; }
}

@keyframes smoke-drift-three {
  0% { transform: translate3d(-5%, 6%, 0) rotate(8deg) scale(.88); opacity: .2; }
  100% { transform: translate3d(35%, -22%, 0) rotate(-14deg) scale(1.18); opacity: .6; }
}

@keyframes smoke-drift-four {
  0% { transform: translate3d(17%, -9%, 0) rotate(-5deg) scale(1.12); opacity: .24; }
  100% { transform: translate3d(-35%, -27%, 0) rotate(14deg) scale(.86); opacity: .58; }
}

.login-shell.login-shell-minimal {
  position: relative;
  z-index: 1;
  width: min(552px, 100%);
  min-height: auto;
  display: block;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(227,29,37,.06);
  overflow: hidden;
}

.login-card.login-card-minimal {
  display: block;
  padding: 50px 52px 46px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.login-logo-area {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  margin-bottom: 30px;
}

.login-main-logo {
  display: block;
  width: min(292px, 100%);
  max-height: 100px;
  object-fit: contain;
}

.login-version {
  margin: 0 0 10px;
  text-align: center;
  color: #c50e16;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

.login-card.login-card-minimal h1 {
  margin: 0;
  text-align: center;
  color: #0b0b0b;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.035em;
}

.login-description {
  max-width: 360px;
  margin: 12px auto 30px !important;
  color: #747474 !important;
  text-align: center;
  font-size: 13px;
  line-height: 1.65;
}

.login-form-minimal {
  gap: 20px;
}

.login-form-minimal .field {
  gap: 8px;
}

.login-form-minimal .field label {
  color: #111111;
  font-size: 14px;
  font-weight: 750;
}

.login-form-minimal .field input {
  min-height: 50px;
  border-color: #dedede;
  background: #ffffff;
  border-radius: 11px;
  color: #111111;
  padding: 0 15px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.015);
}

.login-form-minimal .field input::placeholder {
  color: #a6a6a6;
}

.login-form-minimal .field input:focus {
  border-color: #e31d25;
  box-shadow: 0 0 0 4px rgba(227,29,37,.12);
}

.login-submit {
  min-height: 52px;
  margin-top: 4px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -.015em;
}

@media (max-width: 640px) {
  .login-page.login-page-minimal { padding: 16px; }
  .login-card.login-card-minimal { padding: 38px 24px 34px; }
  .login-logo-area { margin-bottom: 24px; }
  .login-card.login-card-minimal h1 { font-size: 23px; }
  .smoke { filter: blur(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .smoke,
  .button-refresh.is-loading .refresh-glyph {
    animation: none !important;
  }
}

/* =========================================================
   Newton MPS 4.0 — company detail, activation, counter and health
   ========================================================= */
.company-extra-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 2px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
}
.company-extra-metrics > span:not(.company-alert) {
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  padding: 7px 9px;
}
.company-alert {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 900;
}
.company-alert.normal { background: var(--green-soft); color: #147348; }
.company-alert.warning { background: var(--yellow-soft); color: #8d5d00; }
.company-alert.critical { background: var(--danger-soft); color: #b42340; }

.health-badge { margin-bottom: 4px; }
.health-normal { background: var(--green-soft); color: #147348; }
.health-warning { background: var(--yellow-soft); color: #8d5d00; }
.health-critical { background: var(--danger-soft); color: #b42340; }
.health-unknown { background: #f1f3f5; color: #667085; }
.health-message { max-width: 235px; white-space: normal; line-height: 1.35; }

.counter-set {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.counter-set span {
  min-width: 62px;
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}
.counter-set b {
  color: var(--ink-faint);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.row-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.form-error { display: none; margin-bottom: 15px; padding: 11px 12px; border: 1px solid #fecdd3; border-radius: 11px; background: #fff1f2; color: #b42340; font-size: 13px; font-weight: 750; line-height: 1.45; }
.form-error.show { display: block; }
.check-field { padding: 3px 0; }
.check-label { display: flex !important; align-items: center; gap: 10px; cursor: pointer; }
.check-label input { width: 17px; height: 17px; accent-color: var(--brand); }
.activation-steps { border: 1px solid var(--line); background: var(--surface-soft); border-radius: 13px; padding: 14px 15px; margin-top: 14px; color: #344054; font-size: 13px; line-height: 1.55; }
.activation-steps ol { margin: 8px 0 0 18px; padding: 0; }
.activation-device-code { font-size: clamp(12px, 2vw, 16px) !important; letter-spacing: .04em !important; overflow-wrap: anywhere; }

@media (max-width: 740px) {
  .company-extra-metrics { gap: 6px; }
  .company-extra-metrics > span:not(.company-alert), .company-alert { padding: 6px 8px; }
  .counter-set { min-width: 178px; }
  .counter-set span { min-width: 53px; }
  .health-message { max-width: 180px; }
}


/* Newton MPS 4.5 — concise server identity and live 10-second sync */
.sidebar-product {
  color: #98a2b3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  padding: 0 0 12px;
}
.row-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.health-message { max-width: 220px; overflow-wrap: anywhere; }


/* Newton MPS 4.5 live alert board */
.brand-copy span, .profile-mini { display:none !important; }
.alert-list { display:grid; gap:10px; }
.alert-row { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-left-width:5px; border-radius:14px; padding:13px 14px; background:#fff; }
.alert-row.critical { border-color:#f3a3ae; border-left-color:#cf1530; background:#fff6f7; }
.alert-row.warning { border-color:#f1cf89; border-left-color:#c68400; background:#fffaf0; }
.alert-severity { min-width:78px; text-align:center; border-radius:999px; padding:5px 8px; font-size:10px; letter-spacing:.05em; font-weight:900; }
.alert-row.critical .alert-severity { background:#cf1530; color:#fff; }
.alert-row.warning .alert-severity { background:#fff0bd; color:#7d5200; }
.alert-main { min-width:0; }
.alert-main strong { color:var(--ink); font-size:13px; }
.alert-main p { margin:3px 0; color:var(--ink-muted); font-size:12px; }
.alert-main small { color:var(--ink-faint); display:block; line-height:1.45; }
.alert-empty { padding:18px; border:1px dashed #a7d8bc; background:#f2fff7; color:#177046; border-radius:13px; font-size:13px; font-weight:700; }


/* Newton MPS 4.0 — compact sidebar: icons remain visible, labels expand on hover. */
.page-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.modal-danger-head { border-bottom-color:#fecdd3; background:linear-gradient(135deg,#fff6f7,#fff); }
.delete-company-warning { display:grid; gap:8px; margin-bottom:18px; padding:14px 15px; border:1px solid #fecdd3; border-left:5px solid #cf1530; border-radius:13px; background:#fff6f7; color:#7f1d1d; }
.delete-company-warning strong { color:#9f1239; font-size:15px; }
.delete-company-warning span { font-size:13px; }
.delete-company-warning p { margin:0; font-size:12px; line-height:1.5; color:#9f1239; }

@media (min-width: 741px) {
  .app-shell { grid-template-columns: 78px minmax(0, 1fr); }
  .sidebar.sidebar-hover {
    width:78px;
    min-width:78px;
    padding:18px 10px;
    overflow:visible;
    z-index:50;
    transition:width .22s ease, box-shadow .22s ease;
  }
  .sidebar.sidebar-hover:hover,
  .sidebar.sidebar-hover:focus-within {
    width:272px;
    min-width:272px;
    box-shadow:18px 0 38px rgba(0,0,0,.26);
  }
  .sidebar.sidebar-hover .brand {
    width:250px;
    padding:7px 9px 24px;
    gap:12px;
  }
  .sidebar.sidebar-hover .nav-label,
  .sidebar.sidebar-hover .brand-copy,
  .sidebar.sidebar-hover .nav-text,
  .sidebar.sidebar-hover .sidebar-product {
    opacity:0;
    visibility:hidden;
    max-width:0;
    overflow:hidden;
    white-space:nowrap;
    transition:opacity .14s ease .02s, max-width .18s ease, visibility .18s ease;
  }
  .sidebar.sidebar-hover:hover .nav-label,
  .sidebar.sidebar-hover:focus-within .nav-label,
  .sidebar.sidebar-hover:hover .brand-copy,
  .sidebar.sidebar-hover:focus-within .brand-copy,
  .sidebar.sidebar-hover:hover .nav-text,
  .sidebar.sidebar-hover:focus-within .nav-text,
  .sidebar.sidebar-hover:hover .sidebar-product,
  .sidebar.sidebar-hover:focus-within .sidebar-product {
    opacity:1;
    visibility:visible;
    max-width:220px;
  }
  .sidebar.sidebar-hover .nav-label { padding-left:12px; }
  .sidebar.sidebar-hover .nav-links { width:250px; }
  .sidebar.sidebar-hover .nav-link {
    width:250px;
    min-height:44px;
    padding:11px 12px;
    overflow:hidden;
  }
  .sidebar.sidebar-hover .nav-icon { flex:0 0 19px; }
  .sidebar.sidebar-hover .sidebar-bottom { width:250px; padding:16px 8px 4px; }
  .sidebar.sidebar-hover .sidebar-product { min-height:16px; text-align:left; padding-left:5px; }
  .sidebar.sidebar-hover .sidebar-logout { width:250px; justify-content:flex-start; }
  .sidebar.sidebar-hover .sidebar-logout .nav-icon { flex:0 0 19px; text-align:center; }
}

@media (max-width: 740px) {
  .page-actions { justify-content:stretch; }
  .page-actions .button { flex:1 1 auto; }
}


@media (min-width: 741px) {
  .sidebar.sidebar-hover:not(:hover):not(:focus-within) .nav-link.active {
    background: transparent !important;
    box-shadow: none !important;
    color: #cbd5e1 !important;
  }

  .sidebar.sidebar-hover:not(:hover):not(:focus-within)
    .nav-link.active
    .nav-icon {
    color: #cbd5e1 !important;
  }

  .sidebar.sidebar-hover:hover .nav-link.active,
  .sidebar.sidebar-hover:focus-within .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(90deg, #e31d25, #bd0b14) !important;
    box-shadow: 0 10px 20px rgba(227, 29, 37, 0.25) !important;
  }
}


/* Sidebar tertutup: tombol Keluar hanya tampil ikon tanpa kotak putih. */
@media (min-width: 741px) {
  .sidebar.sidebar-hover:not(:hover):not(:focus-within) .sidebar-logout {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #cbd5e1 !important;
  }

  .sidebar.sidebar-hover:not(:hover):not(:focus-within)
    .sidebar-logout
    .nav-icon {
    color: #cbd5e1 !important;
  }

  .sidebar.sidebar-hover:not(:hover):not(:focus-within)
    .sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }

  /* Sidebar terbuka saat cursor diarahkan: tombol Keluar tampil normal. */
  .sidebar.sidebar-hover:hover .sidebar-logout,
  .sidebar.sidebar-hover:focus-within .sidebar-logout {
    width: 250px !important;
    min-width: 250px !important;
    height: auto !important;
    padding: 0 11px !important;
    justify-content: flex-start !important;

    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    color: #344054 !important;
  }
}


/* Newton Cloud 4.0 multi-brand telemetry cards */
.supply-list { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width: 150px; }
.supply-pill { display:inline-flex; align-items:center; gap:6px; border-radius:10px; background:#f4f6f9; padding:5px 7px; font-size:11px; font-weight:800; color:#344054; max-width:220px; }
.supply-pill b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.supply-ok { background:#ecfdf3; color:#13734b; }
.supply-warning { background:#fff8dc; color:#a16800; }
.supply-critical { background:#fff1f3; color:#c32643; }
.supply-unknown { background:#f4f6f9; color:#667085; }
.usage-set { min-width: 180px; }
.printer-detail-modal { display:grid; gap:16px; }
.mini-table { min-width: 560px; }
.mini-table th, .mini-table td { padding:10px 12px; font-size:12px; }
@media (max-width: 900px) {
  table { min-width: 980px; }
  .supply-pill { max-width: 180px; }
  .content { overflow-x:hidden; }
}
@media (max-width: 740px) {
  .company-top { display:grid; }
  .metric-row { grid-template-columns:1fr; gap:10px; }
  .metric-row div { border-right:0; border-bottom:1px solid var(--line); padding:0 0 10px; }
  .metric-row div:last-child { border-bottom:0; }
  .supply-list, .toner-set, .counter-set { align-items:flex-start; }
  .modal { border-radius:18px; }
  .modal-body { padding:16px; }
  .detail-grid { grid-template-columns:1fr; }
}

/* Newton cloud refresh UX fix: auto sync runs silently, no page reload label */
.topbar-actions .live-indicator:empty { display: none; }

/* Responsive polish for printer detail and monitoring tables */
.printer-detail-modal .detail-grid { align-items: stretch; }
.printer-detail-modal .info-card { min-width: 0; }
.printer-detail-modal .counter-set { display: flex; flex-wrap: wrap; gap: 8px; }
.printer-detail-modal .counter-set span { min-width: 78px; }

@media (max-width: 740px) {
  .modal-backdrop { align-items: stretch; justify-items: stretch; padding: 10px; }
  .modal { width: 100%; max-height: calc(100vh - 20px); border-radius: 18px; }
  .modal-head { padding: 18px 16px 14px; }
  .modal-head h2 { font-size: 18px; line-height: 1.2; }
  .modal-body { padding: 16px; }
  .modal-foot { padding: 12px 16px 16px; }
  .printer-detail-modal .detail-grid { grid-template-columns: 1fr; gap: 12px; }
  .printer-detail-modal .info-card { padding: 16px; border-radius: 16px; }
  .printer-detail-modal .table-wrap { margin-left: -4px; margin-right: -4px; }
  .topbar-actions { width: 100%; justify-content: flex-start; }
  .button-refresh { width: auto; }
}

/* Newton 4.0 local/cloud dual usage detail */
.dual-usage-mini {
  display: grid;
  gap: 10px;
  min-width: 220px;
}
.counter-block {
  display: grid;
  gap: 8px;
}
.counter-title {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  font-weight: 900;
}
.compact-source-table {
  margin-top: 12px;
}
@media (max-width: 760px) {
  .printer-detail-modal .detail-grid {
    grid-template-columns: 1fr !important;
  }
  .printer-detail-modal .info-card {
    padding: 16px;
  }
  .dual-usage-mini {
    min-width: 0;
  }
  .counter-set {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Newton Cloud monthly report pull */
.report-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.report-month-field {
  min-width: 210px;
  padding: 12px 14px;
  border: 1px solid #f2d7d9;
  border-radius: 18px;
  background: #fff8f8;
  display: grid;
  gap: 7px;
}
.report-month-field span {
  color: #e51b2a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.report-month-field input {
  width: 100%;
  border: 1px solid #f2d7d9;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  color: #101828;
  font: inherit;
  font-weight: 700;
}
.report-stats { margin-bottom: 18px; }
.report-table table { min-width: 1380px; }
.report-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.report-uploaded { background: #ecfdf3; color: #027a48; border-color: #abefc6; }
.report-processing { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.report-failed { background: #fff1f3; color: #c01048; border-color: #fecdd6; }
.report-empty { background: #f2f4f7; color: #475467; border-color: #e4e7ec; }
.report-error { max-width: 240px; color: #d92d20; line-height: 1.45; }
.report-bw { color: #2457ff; font-weight: 900; }
.report-actions { min-width: 230px; flex-wrap: wrap; }
.report-actions .button { white-space: nowrap; }

@media (max-width: 740px) {
  .report-toolbar { width: 100%; align-items: stretch; }
  .report-month-field { width: 100%; min-width: 0; }
  .report-toolbar .button { width: 100%; }
}

/* Newton MPS 4.0 cloud-controlled reporting and drill-down */
.report-range-toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.report-company-link{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit}.report-company-link:disabled{cursor:default}.report-company-link:not(:disabled) .cell-title{text-decoration:underline;text-decoration-color:#ffb5ba;text-underline-offset:4px}.report-detail-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px;margin-bottom:18px}.report-chart-card{margin-bottom:18px}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:48px;min-height:270px}.report-donut{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;position:relative}.report-donut:after{content:"";position:absolute;inset:32px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px #f1f1f1}.report-donut>div{position:relative;z-index:1;display:grid;text-align:center}.report-donut strong{font-size:32px}.report-donut span{font-size:12px;color:#667085;font-weight:800}.donut-legend{display:grid;gap:15px;min-width:180px}.donut-legend>div{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:12px 14px;border:1px solid #f0f0f0;border-radius:16px}.donut-legend i{width:12px;height:12px;border-radius:4px}.legend-color{background:#ff3f4d}.legend-bw{background:#17171a}.usage-chart{width:100%;min-height:280px;overflow:visible}.usage-chart text{font-size:10px;fill:#667085}.chart-axis{stroke:#d0d5dd;stroke-width:1}.chart-line{stroke:#ff3f4d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.chart-dot{fill:#ff3f4d;stroke:#fff;stroke-width:2}.report-chart-empty{padding:70px 20px;text-align:center;color:#667085;font-weight:800;background:#fafafa;border-radius:22px}.printer-bars{display:grid;gap:12px}.printer-bar-row{display:grid;grid-template-columns:30px minmax(180px,1fr) minmax(180px,3fr) 90px 70px;gap:12px;align-items:center;background:#fff;border:1px solid #f2f2f2;border-radius:18px;padding:13px 15px;text-align:left;cursor:pointer}.printer-bar-row:hover{border-color:#ffb5ba;background:#fffafb}.printer-bar-rank{width:28px;height:28px;border-radius:10px;background:#ffe7e9;color:#d92d3a;display:grid;place-items:center;font-weight:900}.printer-bar-name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.printer-bar-track{height:14px;border-radius:99px;background:#f2f4f7;overflow:hidden}.printer-bar-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff3f4d,#ff737e)}.printer-bar-row strong{text-align:right}.printer-bar-row small{color:#667085}.report-kv{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid #f0f0f0}.report-kv span{color:#667085}.report-kv strong{text-align:right;overflow-wrap:anywhere}.report-printer-detail{grid-template-columns:repeat(2,minmax(0,1fr))}.report-detail-stats{margin-bottom:18px}@media(max-width:900px){.report-detail-grid{grid-template-columns:1fr}.donut-wrap{flex-direction:column;gap:24px}.printer-bar-row{grid-template-columns:28px 1fr 80px}.printer-bar-track,.printer-bar-row small{display:none}.report-printer-detail{grid-template-columns:1fr}}

/* =========================================================
   MONTH-TO-MONTH REPORT COMPARISON
   Build: report-month-comparison-v4-20260714-2
   ========================================================= */
.comparison-page-actions{align-items:end;max-width:100%;}
.comparison-month-field{min-width:185px;}
.comparison-missing-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:20px 22px;border-color:#fedf89;background:#fffcf5;}
.comparison-missing-panel h3{margin:0 0 5px;font-size:16px;}
.comparison-missing-panel p{margin:0;color:#667085;}
.comparison-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.comparison-stat{min-height:164px;}
.comparison-stat>.stat-label{display:block;margin:0 0 14px;color:#475467;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.comparison-stat-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;z-index:1;}
.comparison-stat-values>div{min-width:0;}
.comparison-stat-values small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comparison-stat-values strong{font-size:26px;margin-top:7px;}
.comparison-stat .comparison-delta{display:inline-flex;width:max-content;max-width:100%;margin-top:14px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900;position:relative;z-index:1;}
.comparison-delta.is-up{color:#067647;background:#ecfdf3;}
.comparison-delta.is-down{color:#b42318;background:#fef3f2;}
.comparison-delta.is-flat{color:#475467;background:#f2f4f7;}
.comparison-donut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px;}
.comparison-donut-card{margin-bottom:0;}
.comparison-donut-card .donut-wrap{gap:28px;min-height:245px;}
.comparison-donut-card .report-donut{width:170px;height:170px;}
.comparison-donut-card .report-donut:after{inset:29px;}
.monthly-comparison-chart{display:grid;gap:18px;padding:6px 2px 4px;}
.comparison-chart-legend{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;color:#475467;font-size:12px;font-weight:800;}
.comparison-chart-legend span{display:inline-flex;align-items:center;gap:7px;}
.comparison-chart-legend i{width:12px;height:12px;border-radius:4px;}
.comparison-chart-legend .current-series{background:#ff3f4d;}
.comparison-chart-legend .previous-series{background:#667085;}
.comparison-metric-row{display:grid;gap:8px;padding:14px 0;border-bottom:1px solid #f2f4f7;}
.comparison-metric-row:last-child{border-bottom:0;}
.comparison-metric-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.comparison-metric-head strong{font-size:14px;}
.comparison-metric-head span{color:#667085;font-size:12px;font-weight:900;}
.comparison-series-row{display:grid;grid-template-columns:minmax(115px,170px) minmax(140px,1fr) 80px;gap:12px;align-items:center;}
.comparison-series-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#667085;font-weight:800;}
.comparison-series-row b{text-align:right;font-size:13px;}
.comparison-track{height:15px;border-radius:999px;background:#f2f4f7;overflow:hidden;}
.comparison-bar{display:block;height:100%;border-radius:999px;min-width:0;}
.comparison-bar.current-series{background:linear-gradient(90deg,#ff3f4d,#ff7a85);}
.comparison-bar.previous-series{background:linear-gradient(90deg,#475467,#98a2b3);}
.report-info-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:0 0 8px;}
.report-info-comparison-grid>div{padding:16px;border:1px solid #eaecf0;border-radius:18px;background:#fcfcfd;}
.report-info-comparison-grid h3{margin:0 0 5px;font-size:15px;}
.report-info-comparison-grid .report-kv{grid-template-columns:92px 1fr;padding:11px 0;}

@media(max-width:1180px){
  .comparison-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .comparison-donut-card .donut-wrap{flex-direction:column;gap:20px;}
}
@media(max-width:900px){
  .comparison-page-actions{justify-content:stretch;}
  .comparison-page-actions .comparison-month-field{width:100%;min-width:0;}
  .comparison-page-actions .button{flex:1 1 180px;}
  .comparison-donut-grid{grid-template-columns:1fr;}
  .report-info-comparison-grid{grid-template-columns:1fr;}
  .comparison-missing-panel{align-items:flex-start;flex-direction:column;}
}
@media(max-width:620px){
  .comparison-stats-grid{grid-template-columns:1fr;}
  .comparison-series-row{grid-template-columns:95px 1fr 62px;gap:8px;}
  .comparison-stat-values strong{font-size:23px;}
}

/* =========================================================
   MONTHLY TREND COMPARISON
   Build: report-manual-date-clean-ui-v4-20260714-8
   ========================================================= */
.monthly-trend-chart{display:grid;gap:18px;padding:4px 0 2px;}
.trend-metric-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:0 2px;}
.trend-metric-tab{appearance:none;border:1px solid #d0d5dd;background:#fff;color:#475467;border-radius:999px;padding:9px 16px;font:inherit;font-size:12px;font-weight:900;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;}
.trend-metric-tab:hover{border-color:#98a2b3;transform:translateY(-1px);}
.trend-metric-tab.is-active{border-color:#ff3f4d;background:#ff3f4d;color:#fff;box-shadow:0 8px 18px rgba(255,63,77,.18);}
.monthly-trend-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:stretch;}
.monthly-trend-main{min-width:0;padding:4px 0 0;}
.trend-chart-legend{margin-bottom:8px;}
.trend-chart-legend .current-series{background:#ff3f4d;}
.trend-chart-legend .previous-series{background:#17171a;}
.monthly-trend-svg-wrap{width:100%;overflow-x:auto;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#fcfcfd 100%);}
.monthly-trend-svg{display:block;width:100%;min-width:720px;height:auto;overflow:visible;}
.trend-grid-line{stroke:#eaecf0;stroke-width:1;shape-rendering:crispEdges;}
.trend-axis-label{fill:#98a2b3;font-size:12px;font-weight:700;}
.trend-line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.trend-line.current-series{stroke:#ff3f4d;filter:drop-shadow(0 5px 7px rgba(255,63,77,.16));}
.trend-line.previous-series{stroke:#17171a;opacity:.9;}
.trend-point{stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;cursor:help;}
.trend-point.current-series{fill:#ff3f4d;}
.trend-point.previous-series{fill:#17171a;}
.trend-axis-caption{display:flex;justify-content:space-between;gap:16px;padding:7px 10px 0 58px;color:#98a2b3;font-size:11px;font-weight:800;}
.monthly-trend-insights{display:grid;grid-template-rows:auto 1fr 1fr;gap:10px;}
.trend-change-card,.trend-insight-row{border:1px solid #eaecf0;border-radius:18px;background:#fff;padding:16px;}
.trend-change-card{display:grid;gap:5px;align-content:start;}
.trend-change-card span,.trend-insight-row span{color:#667085;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;}
.trend-change-card strong{font-size:32px;line-height:1.05;}
.trend-change-card small{color:#667085;font-weight:800;}
.trend-change-card.is-up{border-color:#abefc6;background:#ecfdf3;color:#067647;}
.trend-change-card.is-down{border-color:#fecdca;background:#fef3f2;color:#b42318;}
.trend-change-card.is-flat{background:#f9fafb;color:#475467;}
.trend-insight-row{display:grid;gap:5px;align-content:center;}
.trend-insight-row strong{font-size:25px;color:#17171a;}
.trend-insight-row small{display:block;color:#667085;font-size:11px;line-height:1.45;}
.trend-insight-row.is-current{border-color:#ffd5d9;background:#fff8f8;}
.trend-insight-row.is-current strong{color:#ff3f4d;}

@media (max-width:1100px){
  .monthly-trend-layout{grid-template-columns:1fr;}
  .monthly-trend-insights{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;}
}
@media (max-width:720px){
  .trend-metric-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .trend-metric-tab{padding:9px 10px;}
  .monthly-trend-insights{grid-template-columns:1fr;}
  .trend-axis-caption{padding-left:8px;}
}

/* =========================================================
   CLICK-ONLY SIDEBAR + ZERO-LINE MONTH NAVIGATION
   Build: report-manual-date-clean-ui-v4-20260714-8
   ========================================================= */
.app-shell{display:block!important;min-height:100vh;}
.main-panel{width:100%;min-width:0;}
.topbar-leading{display:flex;align-items:center;gap:12px;min-width:0;}
.sidebar-toggle,.sidebar-close,.month-nav-button{appearance:none;border:0;font:inherit;cursor:pointer;}
.sidebar-toggle{width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);color:#101828;font-size:21px;display:grid;place-items:center;box-shadow:0 5px 14px rgba(16,24,40,.06);flex:0 0 auto;}
.sidebar-toggle:hover{background:#fff5f6;border-color:#ffb8bf;color:#d91f35;}
.sidebar-backdrop{position:fixed;inset:0;border:0;background:rgba(15,23,42,.46);backdrop-filter:blur(2px);opacity:0;visibility:hidden;pointer-events:none;z-index:1000;transition:opacity .2s ease,visibility .2s ease;}
body .sidebar.sidebar-drawer{position:fixed!important;left:0;top:0;bottom:0;width:286px!important;min-width:286px!important;height:100vh!important;padding:20px 14px!important;overflow-y:auto!important;transform:translateX(-104%);transition:transform .22s ease,box-shadow .22s ease;z-index:1001;box-shadow:none;display:flex!important;flex-direction:column!important;}
.app-shell.sidebar-open .sidebar.sidebar-drawer{transform:translateX(0);box-shadow:22px 0 48px rgba(0,0,0,.30);}
.app-shell.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto;}
body.sidebar-lock{overflow:hidden;}
.sidebar.sidebar-drawer .brand{width:100%;padding:7px 8px 24px;gap:12px;}
.sidebar.sidebar-drawer .brand-copy,.sidebar.sidebar-drawer .nav-label,.sidebar.sidebar-drawer .nav-text,.sidebar.sidebar-drawer .sidebar-product{opacity:1!important;visibility:visible!important;max-width:none!important;overflow:visible!important;white-space:normal!important;}
.sidebar.sidebar-drawer .nav-links,.sidebar.sidebar-drawer .nav-link,.sidebar.sidebar-drawer .sidebar-bottom,.sidebar.sidebar-drawer .sidebar-logout{width:100%!important;min-width:0!important;}
.sidebar.sidebar-drawer .nav-link{min-height:46px;padding:12px 13px;}
.sidebar-close{margin-left:auto;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;display:grid;place-items:center;}
.sidebar-close:hover{background:rgba(255,255,255,.16);}

.traffic-panel-head{align-items:flex-start;gap:20px;}
.traffic-panel-head>div:first-child{min-width:0;}
.traffic-comparison-hint{display:block;margin-top:8px;line-height:1.45;}
.traffic-compare-controls{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #eaecf0;border-radius:16px;background:#fcfcfd;flex:0 0 auto;}
.month-nav-button{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid #d0d5dd;color:#344054;font-weight:900;font-size:18px;display:grid;place-items:center;}
.month-nav-button:hover{border-color:#ff8f9a;color:#d91f35;background:#fff6f7;}
.month-nav-button:disabled{opacity:.55;cursor:wait;}
.comparison-month-display{display:grid;gap:2px;min-width:150px;text-align:center;}
.comparison-month-display span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#98a2b3;}
.comparison-month-display strong{font-size:13px;color:#101828;}

.trend-chart-legend .comparison-series{background:#17171a;}
.trend-chart-legend .zero-series{background:#98a2b3;}
.trend-line.comparison-series{stroke:#17171a;opacity:.92;}
.trend-line.comparison-series.is-zero-line{stroke:#667085;stroke-width:3;stroke-dasharray:10 8;opacity:1;}
.trend-point.comparison-series{fill:#17171a;}
.trend-point.zero-series{fill:#98a2b3;stroke:#fff;}
.trend-insight-row.is-zero{background:#f8fafc;border-style:dashed;}
.trend-insight-row.is-zero strong{color:#667085;}

@media(max-width:760px){
  .topbar{padding-left:16px;padding-right:16px;}
  .content{padding-left:16px;padding-right:16px;}
  .breadcrumb span:not(.version-chip){display:none;}
  .traffic-panel-head{display:grid;}
  .traffic-compare-controls{width:100%;justify-content:space-between;}
  .comparison-month-display{min-width:0;flex:1;}
  body .sidebar.sidebar-drawer{width:min(286px,88vw)!important;min-width:0!important;}
}

/* v4.0 month-to-month traffic picker */
.traffic-month-picker{display:flex;align-items:flex-end;gap:10px;padding:10px;border:1px solid #eaecf0;border-radius:16px;background:#fcfcfd;flex:0 0 auto;box-shadow:0 8px 24px rgba(16,24,40,.04)}
.traffic-month-picker label{display:grid;gap:5px;min-width:145px}
.traffic-month-picker label span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#667085}
.traffic-month-picker input[type="month"]{height:38px;border:1px solid #d0d5dd;border-radius:11px;background:#fff;color:#101828;font:inherit;font-size:13px;font-weight:800;padding:0 10px;outline:none}
.traffic-month-picker input[type="month"]:focus{border-color:#ff4050;box-shadow:0 0 0 3px rgba(255,64,80,.12)}
.traffic-month-vs{align-self:center;margin-top:16px;font-size:11px;font-weight:900;text-transform:uppercase;color:#98a2b3}
.traffic-month-picker .button{height:38px;white-space:nowrap}
.trend-line.current-series,.trend-line.comparison-series{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.trend-line.current-series.is-zero-line,.trend-line.comparison-series.is-zero-line{stroke-width:3;stroke-dasharray:8 7;opacity:.78}
@media (max-width:900px){.traffic-month-picker{width:100%;display:grid;grid-template-columns:1fr auto 1fr}.traffic-month-picker .button{grid-column:1/-1}.traffic-month-picker label{min-width:0}.traffic-month-vs{margin-top:14px}}
@media (max-width:560px){.traffic-month-picker{grid-template-columns:1fr}.traffic-month-vs{display:none}.traffic-month-picker .button{grid-column:auto}}


/* =========================================================
   DATE RANGE TRAFFIC FILTER + CLICKABLE DAY DETAIL
   Build: report-manual-date-clean-ui-v4-20260714-8
   ========================================================= */
.traffic-chart-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 0 6px}
.traffic-date-filter{display:flex;align-items:flex-end;gap:8px;padding:8px;border:1px solid #eaecf0;border-radius:14px;background:#fcfcfd}
.traffic-date-filter label{display:grid;gap:4px}
.traffic-date-filter label span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#667085}
.traffic-day-editor{display:grid;grid-template-columns:30px 58px 30px;align-items:center;border:1px solid #d0d5dd;border-radius:10px;background:#fff;overflow:hidden}
.traffic-day-editor:focus-within{border-color:#ff4050;box-shadow:0 0 0 3px rgba(255,64,80,.12)}
.traffic-day-editor input{width:58px;height:36px;border:0;background:#fff;color:#101828;font:inherit;font-weight:850;text-align:center;padding:0 4px;outline:none}
.traffic-day-editor button{width:30px;height:36px;border:0;background:#f9fafb;color:#344054;font:inherit;font-size:17px;font-weight:900;cursor:pointer}
.traffic-day-editor button:hover{background:#fff0f2;color:#d91f35}
.traffic-date-arrow{align-self:center;margin-top:14px;color:#98a2b3;font-weight:900}
.traffic-date-presets{display:flex;flex-wrap:wrap;gap:8px;margin:7px 0 16px}
.traffic-date-preset{appearance:none;border:1px solid #d0d5dd;border-radius:999px;background:#fff;color:#344054;font:inherit;font-size:11px;font-weight:850;padding:8px 13px;cursor:pointer}
.traffic-date-preset:hover,.traffic-date-preset.is-active{border-color:#ff4050;background:#fff2f3;color:#d91f35}
.trend-hit-point{fill:transparent;stroke:none;cursor:pointer;pointer-events:all}
.trend-point.is-selected{stroke:#fff;stroke-width:3;filter:drop-shadow(0 4px 8px rgba(16,24,40,.22))}
.trend-selected-line{stroke:#98a2b3;stroke-width:1.5;stroke-dasharray:5 5;pointer-events:none}
.traffic-date-detail{margin-top:14px;border:1px solid #e4e7ec;border-radius:16px;background:#fff;overflow:hidden}
.traffic-date-detail.is-empty{display:flex;align-items:center;justify-content:center;gap:10px;min-height:68px;padding:16px;color:#667085;text-align:center}
.traffic-date-detail.is-empty strong{color:#344054}
.traffic-date-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #eaecf0;background:#fcfcfd}
.traffic-date-detail-head>div{display:flex;align-items:baseline;gap:9px}
.traffic-date-detail-head span{font-size:11px;font-weight:850;text-transform:uppercase;color:#667085}
.traffic-date-detail-head strong{font-size:25px;color:#101828}
.traffic-date-detail table{min-width:640px}
.text-red{color:#d92d20!important}
@media(max-width:980px){.traffic-chart-toolbar{display:grid}.traffic-date-filter{width:100%;justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:560px){.traffic-date-filter{display:grid;grid-template-columns:1fr 1fr}.traffic-date-filter .button{grid-column:1/-1}.traffic-date-arrow{display:none}.traffic-day-editor{grid-template-columns:34px minmax(52px,1fr) 34px}.traffic-day-editor input{width:100%}.traffic-date-detail-head{align-items:flex-start}}

/* v9 exact manual date range */
.traffic-chart-full{width:100%;min-width:0}
.traffic-chart-full .monthly-trend-svg-wrap{width:100%}
.traffic-chart-full .trend-chart-legend{justify-content:flex-end;gap:22px;margin:8px 4px 4px}
.traffic-chart-layout{display:block!important}
.traffic-chart-layout .monthly-trend-insights{display:none!important}
.traffic-date-filter input{caret-color:#111;user-select:text}
@media (max-width:900px){.traffic-chart-toolbar{align-items:stretch}.traffic-date-filter{width:100%;justify-content:flex-start;flex-wrap:wrap}}

/* Newton traffic exact date selector v10 */
.traffic-date-filter select{
  min-width:78px;
  height:38px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  color:#101828;
  font:inherit;
  font-weight:850;
  text-align:center;
  padding:0 30px 0 12px;
  cursor:pointer;
  outline:none;
}
.traffic-date-filter select:focus{
  border-color:#ff4050;
  box-shadow:0 0 0 3px rgba(255,64,80,.12);
}
.traffic-date-presets{display:none!important}
.trend-point.is-zero-point{opacity:.45}
@media(max-width:560px){.traffic-date-filter select{width:100%;min-width:0}.traffic-date-filter label{min-width:0}}

/* =========================================================
   GOOGLE-TRENDS STYLE TRAFFIC SUMMARY
   Build: report-traffic-trends-summary-v4-20260714-11
   ========================================================= */
.traffic-trends-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 248px;
  gap:20px;
  align-items:stretch;
  width:100%;
}
.traffic-chart-main{min-width:0}
.traffic-trends-summary{
  display:grid;
  gap:12px;
  align-content:start;
  min-width:0;
}
.traffic-average-card,
.traffic-summary-card{
  border:1px solid #e4e7ec;
  border-radius:18px;
  background:#fff;
  padding:16px;
}
.traffic-average-card{background:#fcfcfd}
.traffic-summary-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
.traffic-summary-heading strong{
  color:#101828;
  font-size:16px;
}
.traffic-summary-heading span{
  color:#98a2b3;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  text-align:right;
}
.traffic-average-bars{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:28px;
  min-height:166px;
  padding-top:4px;
}
.traffic-average-column{
  display:grid;
  justify-items:center;
  gap:7px;
  min-width:62px;
}
.traffic-average-value{
  color:#101828;
  font-size:15px;
  font-weight:900;
}
.traffic-average-track{
  width:34px;
  height:116px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border-bottom:2px solid #e4e7ec;
}
.traffic-average-track i{
  display:block;
  width:20px;
  min-height:2px;
  border-radius:9px 9px 4px 4px;
  transition:height .25s ease;
}
.traffic-average-track i.current-series{background:#ff3f4d}
.traffic-average-track i.comparison-series{background:#17171a}
.traffic-average-column small{
  color:#667085;
  font-size:10px;
  font-weight:850;
  text-align:center;
}
.traffic-summary-card{
  display:grid;
  gap:6px;
}
.traffic-summary-card span{
  color:#667085;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.traffic-summary-card strong{
  color:#101828;
  font-size:14px;
  line-height:1.35;
}
.traffic-summary-card small{
  color:#98a2b3;
  font-size:11px;
  line-height:1.4;
}
.traffic-summary-card.is-comparison{background:#f8fafc}
.traffic-trends-layout .trend-line{
  transition:opacity .2s ease,stroke-width .2s ease;
}
.traffic-trends-layout .monthly-trend-svg:hover .trend-line{opacity:.8}
.traffic-trends-layout .trend-point{cursor:crosshair}
@media(max-width:1100px){
  .traffic-trends-layout{grid-template-columns:1fr}
  .traffic-trends-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
  .traffic-average-card{grid-column:span 2}
}
@media(max-width:760px){
  .traffic-trends-summary{grid-template-columns:1fr 1fr}
  .traffic-average-card{grid-column:1/-1}
}
@media(max-width:520px){
  .traffic-trends-summary{grid-template-columns:1fr}
  .traffic-average-card{grid-column:auto}
}


/* =========================================================
   SMOOTH TRAFFIC + COMPACT MONTH TILES
   Build: report-monthly-square-points-v4-20260714-14
   ========================================================= */
.traffic-trends-layout .trend-line{
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:opacity .2s ease,stroke-width .2s ease,filter .2s ease;
}
.traffic-trends-layout .trend-line.current-series{
  filter:drop-shadow(0 7px 12px rgba(255,63,77,.14));
}
.traffic-trends-layout .trend-line.comparison-series{
  filter:drop-shadow(0 5px 10px rgba(23,23,26,.08));
}
.traffic-trends-layout .monthly-trend-svg:hover .trend-line{
  opacity:.94;
  stroke-width:4;
}
.traffic-trends-layout .trend-point{
  transition:r .16s ease,filter .16s ease;
}
.traffic-trends-layout .trend-point:hover{
  r:6;
  filter:drop-shadow(0 4px 8px rgba(16,24,40,.24));
}

.year-tiles-layout{display:grid;gap:18px;padding:2px 0 4px}
.month-tile-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.month-trend-tile{position:relative;display:grid;grid-template-columns:1fr 18px;grid-template-rows:auto auto auto 1fr;column-gap:12px;min-height:150px;padding:15px;border:1px solid #e4e7ec;border-radius:16px;background:#fff;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.month-trend-tile:hover{transform:translateY(-2px);border-color:#cfd4dc;box-shadow:0 10px 26px rgba(16,24,40,.07)}
.month-trend-tile.is-empty{background:#fafbfc;color:#98a2b3}
.month-trend-tile.is-peak{border-color:#ff9ba4;background:linear-gradient(150deg,#fff 0%,#fff4f5 100%);box-shadow:0 10px 26px rgba(255,63,77,.10)}
.month-tile-head{grid-column:1;display:flex;align-items:baseline;gap:5px}
.month-tile-head span{font-size:13px;font-weight:950;color:#101828}
.month-tile-head small{font-size:9px;font-weight:800;color:#98a2b3}
.month-trend-tile>strong{grid-column:1;margin-top:8px;font-size:26px;line-height:1;color:#101828}
.month-trend-tile.is-peak>strong{color:#ff3f4d}
.month-tile-unit{grid-column:1;margin-top:4px;color:#667085;font-size:10px;font-weight:800}
.month-tile-meter{grid-column:2;grid-row:1/5;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:98px;padding:4px;border-radius:999px;background:#f2f4f7;overflow:hidden}
.month-tile-meter i{display:block;width:100%;min-height:3px;border-radius:999px;background:#cbd2dc;transition:height .35s ease}
.month-trend-tile.has-report .month-tile-meter i{background:linear-gradient(180deg,#ff707c 0%,#ff3f4d 100%)}
.month-trend-tile.is-peak .month-tile-meter i{background:linear-gradient(180deg,#ff8f99 0%,#e5102b 100%)}
.month-tile-detail{grid-column:1;align-self:end;margin-top:12px;color:#98a2b3;font-size:9px;line-height:1.35;font-weight:700}
.year-tiles-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.year-summary-card{display:grid;gap:5px;padding:14px 16px;border:1px solid #e4e7ec;border-radius:15px;background:#fcfcfd}
.year-summary-card span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:#667085}
.year-summary-card strong{font-size:22px;line-height:1.1;color:#101828}
.year-summary-card small{font-size:10px;line-height:1.35;color:#98a2b3}
.year-summary-card.is-accent{border-color:#ffd3d7;background:#fff8f8}
.year-summary-card.is-accent strong{color:#ff3f4d}
.year-tiles-footnote{display:flex;justify-content:space-between;gap:12px;color:#98a2b3;font-size:10px;font-weight:750;padding:0 2px}
@media(max-width:1180px){.month-tile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.year-tiles-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.month-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.month-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.year-tiles-summary{grid-template-columns:1fr}.year-tiles-footnote{display:grid}}

/* Build: report-monthly-square-points-v4-20260714-14 */
.year-square-chart-layout{padding-top:2px}
.year-square-chart .year-trend-square{transition:transform .15s ease,filter .15s ease;transform-box:fill-box;transform-origin:center}
.year-square-chart .year-trend-square:hover{transform:scale(1.35);filter:drop-shadow(0 4px 7px rgba(255,63,77,.2))}
.year-square-chart .year-trend-square.is-active{fill:#ff3f4d;stroke:#fff;stroke-width:2}
.year-square-chart .year-trend-square.has-report{fill:#fff;stroke:#ff3f4d;stroke-width:2}
.year-square-chart .year-trend-square.is-empty{fill:#cfd5df;stroke:#fff;stroke-width:1.5}

/* Build: report-monthly-pixel-columns-v4-20260714-15 */
.year-pixel-layout .monthly-trend-main{min-width:0}
.year-pixel-wrap{overflow-x:auto;padding:6px 2px 0}
.year-pixel-chart{min-width:900px;height:auto}
.year-pixel-cell{transition:transform .14s ease,filter .14s ease,opacity .14s ease;transform-box:fill-box;transform-origin:center}
.year-pixel-cell:hover{transform:scale(1.22);filter:drop-shadow(0 3px 6px rgba(255,63,77,.18))}
.year-pixel-cell.is-grid{fill:#f2f4f8;stroke:#e1e6ee;stroke-width:1}
.year-pixel-cell.is-filled{fill:#ff3f4d;stroke:#ff3f4d;stroke-width:1}
.year-pixel-cell.has-report{fill:#fff;stroke:#ff3f4d;stroke-width:2}
.year-pixel-cell.is-empty{fill:#cfd5df;stroke:#cfd5df;stroke-width:1}
.year-pixel-value{font-size:12px;font-weight:800;fill:#8e98aa}
.year-pixel-value.is-active{fill:#ff3f4d}
@media (max-width:900px){.year-pixel-chart{min-width:820px}}

/* Build v16: smooth monthly wave rendered with many compact square pixels. */
.year-wave-layout .monthly-trend-main{min-width:0}
.year-wave-wrap{overflow-x:auto;padding:4px 2px 0}
.year-wave-chart{min-width:880px;height:auto}
.year-wave-guide{fill:none;stroke:#ff3f4d;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.24;vector-effect:non-scaling-stroke}
.year-wave-square{fill:#ff3f4d;opacity:.94;transition:transform .12s ease,opacity .12s ease;transform-box:fill-box;transform-origin:center}
.year-wave-square:hover{transform:scale(1.65);opacity:1}
.year-wave-month-square{stroke-width:1.5;transition:transform .12s ease,filter .12s ease;transform-box:fill-box;transform-origin:center}
.year-wave-month-square:hover{transform:scale(1.32);filter:drop-shadow(0 3px 5px rgba(255,63,77,.25))}
.year-wave-month-square.is-active{fill:#ff3f4d;stroke:#fff}
.year-wave-month-square.has-report{fill:#fff;stroke:#ff3f4d}
.year-wave-month-square.is-empty{fill:#d3d8e1;stroke:#fff}
@media (max-width:900px){.year-wave-chart{min-width:820px}}