:root {
  color-scheme: light;
  --bg: #edf1f4;
  --surface: #ffffff;
  --surface-soft: #f4f6f8;
  --ink: #182129;
  --muted: #687781;
  --line: #dbe2e7;
  --blue: #1266a0;
  --blue-bright: #0e609d;
  --blue-soft: #e5f2fa;
  --dark: #17191b;
  --dark-soft: #222527;
  --good: #17724e;
  --good-soft: #e5f5ed;
  --warn: #936008;
  --warn-soft: #fff3d7;
  --danger: #ad3229;
  --danger-soft: #fde9e7;
  --shadow: 0 24px 70px rgba(20, 32, 40, .14);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 12%, rgba(18, 102, 160, .08), transparent 28%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(18, 102, 160, .25); outline-offset: 2px; }
[hidden] { display: none !important; }

.page {
  min-height: 100vh;
  padding: 24px;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 54px;
  flex: 0 0 auto;
  color: #1670ad;
  font-size: 25px;
  font-weight: 500;
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  border: 4px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 24px 24px 10px 10px;
}
.brand-mark::before { inset: 2px 3px 3px; }
.brand-mark::after { inset: 10px 11px 5px; border-width: 3px; }
.brand-mark span { position: relative; z-index: 1; transform: translateY(8px); }

.auth {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(430px, 1.05fr);
  width: min(1120px, 100%);
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 680px;
  padding: 42px;
  overflow: hidden;
  color: #f7f8f8;
  background:
    radial-gradient(circle at 105% 87%, rgba(18,102,160,.45) 0 15%, transparent 15.5% 25%, rgba(18,102,160,.27) 25.5% 36%, transparent 36.5%),
    linear-gradient(150deg, var(--dark-soft), var(--dark) 62%);
}
.auth-brand::before,
.auth-brand::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 7px;
  background: var(--blue);
}
.auth-brand::before { top: 0; }
.auth-brand::after { bottom: 0; }
.auth.login-hammerpad .auth-brand {
  background:
    radial-gradient(circle at 78% 62%, rgba(18,102,160,.30), transparent 46%),
    linear-gradient(152deg, #1d2226, #0d1114 68%);
}
.auth.login-cwc { --blue: #ff3528; --blue-bright: #ff4a3d; --blue-soft: #fff0ee; }
.auth.login-cwc .auth-brand {
  align-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,53,40,.16), transparent 52%),
    linear-gradient(158deg, #242424, #101010 70%);
  text-align: center;
}
.auth.login-cwc .brand-lockup { flex-direction: column; margin-top: 5px; }
.auth.login-cwc .login-cwc-symbol { width: 150px; height: 150px; border-width: 20px; }
.auth.login-cwc .brand-name { font-size: clamp(58px, 8vw, 88px); font-weight: 500; letter-spacing: -.03em; }
.auth.login-cwc .brand-sub { display: none; }
.auth.login-cwc .auth-message { max-width: 520px; padding-bottom: 0; }
.auth.login-cwc .auth-message h1 { font-size: clamp(20px, 2.6vw, 31px); font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; }
.auth.login-cwc .auth-message p { margin-top: 12px; max-width: 520px; color: #e6e6e6; font-size: 12px; }
.auth.login-cwc .auth-foot { color: #fff; font-family: "Segoe Script", cursive; font-size: 17px; }
.auth.login-systems360 { --blue: #e72820; --blue-bright: #e72820; --blue-soft: #fff0ee; }
.auth.login-systems360 .auth-brand { background: radial-gradient(circle at 50% 26%, rgba(231,40,32,.15), transparent 28%), linear-gradient(145deg, #292929, #0e0e0e 70%); }
.brand-lockup { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
[data-login-brand] { display: none; }
.auth.login-hammerpad [data-login-brand="hammerpad"], .auth.login-cwc [data-login-brand="cwc"], .auth.login-systems360 [data-login-brand="systems360"] { display: flex; }
.login-cwc-symbol { width: 54px; height: 54px; border: 8px solid #ff3528; border-left-color: transparent; border-radius: 50%; transform: rotate(-18deg); }
.login-systems-logo { max-width: 235px; padding: 12px 16px; border-radius: 10px; background: #fff; }
.login-systems-logo img { display: block; width: 100%; max-height: 58px; object-fit: contain; }
.brand-name { font-size: 23px; font-weight: 400; letter-spacing: .05em; }
.brand-sub { display: block; margin-top: 3px; color: #8f9ba3; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.auth-message { position: relative; z-index: 1; max-width: 410px; padding-bottom: 80px; }
.auth-message h1 { margin: 0; color: #f7f8f8; font-size: clamp(38px, 6vw, 62px); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.auth-message p { margin: 22px 0 0; max-width: 360px; color: #aeb8be; font-size: 15px; line-height: 1.6; }
.auth-foot { position: relative; z-index: 1; color: #77848c; font-size: 12px; }
.login-area { position: relative; display: grid; place-items: center; min-width: 0; padding: 46px; }
.login-box { width: min(100%, 410px); }
.auth-portal-switcher { width: 100%; height: 54px; margin: 0 0 28px; box-shadow: 0 8px 22px rgba(18,31,39,.1); }
.auth-portal-switcher .portal-choice { top: 4px; height: 44px; }
.auth-portal-switcher .portal-choice.slot-active { left: 4px; width: 132px; }
.auth-portal-switcher .portal-choice.slot-right { left: 139px; width: 125px; }
.auth-portal-switcher .portal-choice.slot-left { left: 267px; width: 137px; }
.auth-portal-switcher .portal-choice[data-portal-choice="hammerpad"] { left: 4px; width: 132px; }
.auth-portal-switcher .portal-choice[data-portal-choice="cwc"] { left: 139px; width: 125px; }
.auth-portal-switcher .portal-choice[data-portal-choice="systems360"] { left: 267px; width: 137px; }
.auth-portal-switcher .switch-logo { width: 28px; height: 28px; }
.auth-portal-switcher .switch-logo.is-360 { width: 34px; }
.auth-portal-switcher .portal-choice > strong { font-size: 9px; }
.overline { color: var(--blue-bright); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.login-box h2 { margin: 8px 0 0; font-size: 34px; font-weight: 500; letter-spacing: -.04em; }
.login-copy { margin: 9px 0 0; color: var(--muted); font-size: 14px; }
.login-block { margin-top: 31px; }
.login-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sso-button,
.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border-radius: 9px;
  font-weight: 600;
}
.sso-button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.sso-button:hover { border-color: var(--blue); background: var(--blue-soft); }
.sso-button small { color: var(--muted); font-weight: 500; }
.login-button { margin-top: 16px; border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.login-button:hover { background: #0e578a; }
.sso-route { display: block; margin-top: 7px; color: var(--muted); font: 9px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }
.customer-sso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.customer-sso .secondary-button { justify-content: center; width: 100%; min-height: 38px; }
.staff-test-entry { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 13px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-soft); }
.staff-test-entry span { color: var(--muted); font-size: 8px; line-height: 1.35; }
.staff-test-entry button { flex: 0 0 auto; min-height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 8px; font-weight: 600; }
.separator { display: flex; align-items: center; gap: 14px; margin: 27px 0; color: var(--muted); font-size: 11px; }
.separator::before, .separator::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field { display: grid; gap: 7px; margin-top: 14px; }
.field label { font-size: 12px; font-weight: 600; }
.field input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); }
.field input:focus { border-color: var(--blue); background: var(--surface); }
.login-links { display: flex; justify-content: flex-end; margin-top: 11px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--blue-bright); font-size: 12px; }
.login-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 24px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.portal {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  width: min(1440px, 100%);
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--shadow);
}
.sidebar {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 25px 15px 19px;
  overflow: visible;
  color: #f7f8f8;
  background:
    radial-gradient(circle at 105% 78%, rgba(18,102,160,.32) 0 12%, transparent 12.5% 21%, rgba(18,102,160,.2) 21.5% 31%, transparent 31.5%),
    linear-gradient(155deg, var(--dark-soft), var(--dark) 60%);
}
.sidebar::before,
.sidebar::after { content: ""; position: absolute; left: 0; width: 100%; height: 5px; background: var(--blue); }
.sidebar::before { top: 0; }
.sidebar::after { bottom: 0; }
.sidebar .brand-lockup { padding: 0 8px 28px; }
.sidebar .brand-mark { width: 37px; height: 44px; font-size: 19px; }
.sidebar .brand-name { font-size: 17px; }
.sidebar .brand-sub { font-size: 9px; }
.portal:not(.is-cwc) [data-portal-nav="cwc"] { display: none; }
.portal.is-cwc [data-portal-nav="hammerpad"] { display: none; }
.portal:not(.is-360) [data-portal-nav="systems360"] { display: none; }
.portal.is-360 [data-portal-nav="hammerpad"], .portal.is-360 [data-portal-nav="cwc"] { display: none; }
.portal.is-cwc {
  --bg: #171717;
  --surface: #202020;
  --surface-soft: #292929;
  --ink: #f6f6f6;
  --muted: #a7a7a7;
  --line: #383838;
  --blue: #ff3528;
  --blue-bright: #ff4a3d;
  --blue-soft: rgba(255,59,46,.13);
}
.portal.is-cwc .sidebar { background: radial-gradient(circle at 50% 14%, rgba(255,59,46,.08), transparent 24%), linear-gradient(150deg, #252525, #101010 65%); }
.portal.is-cwc .sidebar::before, .portal.is-cwc .sidebar::after { background: #ff3528; }
.portal.is-cwc .nav-caption { color: #777; }
.portal.is-cwc .nav-button i { color: #ff4a3d; }
.portal.is-cwc .nav-button.is-active { background: rgba(255,53,40,.18); }
.portal.is-cwc .help-box button { color: #ff5a4e; }
.portal.is-cwc .topbar { background: #1d1d1d; }
.portal.is-cwc .content {
  background:
    radial-gradient(circle at 82% 12%, rgba(255,53,40,.07), transparent 38%),
    #171717;
}
.portal.is-cwc .avatar { background: #ff3528; }
.portal.is-cwc .customer-icon { background: rgba(255,59,46,.13); color: #ff4a3d; }
.portal.is-360 { --blue: #e72820; --blue-bright: #e72820; --blue-soft: #fff0ee; }
.portal.is-360 .sidebar { background: radial-gradient(circle at 0 88%, rgba(231,40,32,.2), transparent 31%), linear-gradient(150deg, #252525, #0d0d0d 66%); }
.portal.is-360 .sidebar::before, .portal.is-360 .sidebar::after { background: #e72820; }
.portal.is-360 .nav-button i { color: #ff4a42; }
.portal.is-360 .nav-button.is-active { background: rgba(231,40,32,.2); }
.portal.is-360 .help-box button { color: #ff625a; }
.portal.is-360 .avatar { background: #e72820; }
.portal.is-360 .content {
  background:
    radial-gradient(circle at 78% 75%, rgba(231,40,32,.07), transparent 32%),
    linear-gradient(rgba(246,248,249,.94), rgba(246,248,249,.97)),
    url("/inhalt/assets/360systems-logo.png") 82% 72% / min(680px, 68%) auto no-repeat;
}
.portal.is-360 [data-staff-only] { display: none !important; }
.portal.is-360 [data-customer-only] { display: block; }
.nav-caption { padding: 0 11px 8px; color: #849098; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nav { display: grid; gap: 4px; }
.nav-button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #b8c1c7;
  text-align: left;
}
.nav-button:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-button.is-active { color: #fff; background: rgba(18,102,160,.38); }
.nav-button i { color: #70add3; }
.nav-divider { height: 1px; margin: 10px 9px; background: rgba(255,255,255,.09); }
.nav-group-label { padding: 4px 11px 5px; color: #ec5b50; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-button.cwc-nav i { color: #ff4a3d; }
.nav-button.cwc-nav.is-active { background: rgba(255,55,42,.18); }
.side-bottom { position: relative; z-index: 1; margin-top: auto; }
.help-box { padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(0,0,0,.14); }
.help-box strong { display: block; font-size: 13px; font-weight: 600; }
.help-box p { margin: 5px 0 12px; color: #96a2aa; font-size: 11px; line-height: 1.45; }
.help-box button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #78b8df; font-size: 12px; }
.portal-main { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 73px; padding: 12px 26px; border-bottom: 1px solid var(--line); background: var(--surface); }
.customer-picker { display: flex; align-items: center; gap: 11px; min-width: 0; margin-right: auto; margin-left: 300px; }
.customer-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: var(--blue-soft); color: var(--blue-bright); }
.customer-picker label { display: block; color: var(--muted); font-size: 10px; }
.customer-picker select { max-width: 260px; padding: 2px 24px 2px 0; border: 0; background: transparent; color: var(--ink); font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.portal-switcher { position: relative; width: 470px; height: 58px; margin: -2px 0 30px 3px; overflow: hidden; border: 1px solid #d7dfe4; border-radius: 999px; background: #f2f5f7; box-shadow: 0 8px 24px rgba(7,18,25,.16); }
.portal-choice { --switch-color: #1266a0; position: absolute; top: 5px; left: 5px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 7px; width: 150px; height: 46px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #4d5960; opacity: .74; transition: left .9s cubic-bezier(.2,.72,.24,1), width .9s cubic-bezier(.2,.72,.24,1), color .48s ease, background .48s ease, border-color .48s ease, box-shadow .48s ease, opacity .48s ease, transform .48s ease; }
.portal-choice:hover { border-color: color-mix(in srgb, var(--switch-color) 45%, #d7dfe4); background: #fff; color: #161b1e; opacity: 1; }
.portal-choice.slot-active { left: 5px; z-index: 3; width: 151px; border-color: var(--switch-color); background: #fff; color: #111719; opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--switch-color) 22%, transparent), 0 4px 13px rgba(15,28,36,.13); transform: translateY(-1px); }
.portal-choice.slot-right { left: 160px; width: 144px; opacity: .78; }
.portal-choice.slot-left { left: 307px; width: 156px; opacity: .7; }
.portal-choice[data-portal-choice="hammerpad"] { --switch-color: #1266a0; }
.portal-choice[data-portal-choice="cwc"] { --switch-color: #ff3b2e; }
.portal-choice[data-portal-choice="systems360"] { --switch-color: #ef251d; }
.switch-logo { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #fff; color: #111; font-size: 8px; font-weight: 800; }
.switch-logo.is-hammerpad { background: #1266a0; color: #fff; font-size: 10px; }
.switch-logo.is-cwc { position: relative; background: #202020; }
.switch-logo.is-cwc::before { content: ""; position: absolute; width: 20px; height: 20px; border: 4px solid #ff3b2e; border-left-color: transparent; border-radius: 50%; transform: rotate(-20deg); }
.switch-logo.is-360 { width: 37px; border-radius: 8px; }
.switch-logo.is-360 img { display: block; width: 36px; height: 26px; object-fit: contain; }
.portal-choice > strong { overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mobile-portal-switcher { display: none; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); }
.portal-mini-choice { min-width: 29px; height: 29px; padding: 0 6px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: 8px; font-weight: 800; }
.portal-mini-choice.is-active { border-color: var(--blue); background: var(--surface); color: var(--blue-bright); box-shadow: 0 0 0 2px var(--blue-soft); }
.icon-button, .user-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.icon-button { width: 38px; }
.user-button { gap: 8px; padding: 0 11px; }
.avatar { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; }
.mobile-nav { display: none; }
.content {
  min-height: calc(100vh - 122px);
  padding: 27px;
  background:
    radial-gradient(circle at 88% 8%, rgba(18,102,160,.06), transparent 36%),
    #f4f7f9;
}
.view[hidden] { display: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.page-head h1 { margin: 6px 0 0; font-size: clamp(27px, 4vw, 39px); font-weight: 500; letter-spacing: -.045em; }
.page-head p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.service-card { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 15px; min-width: 0; min-height: 180px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.service-card:hover { transform: translateY(-2px); border-color: #b9ccd8; box-shadow: 0 12px 30px rgba(20,32,40,.08); }
.service-card::after { content: ""; position: absolute; right: -40px; bottom: -54px; width: 128px; height: 128px; border: 19px solid var(--blue-soft); border-radius: 50%; opacity: .72; pointer-events: none; }
.service-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-bright); }
.service-icon i { width: 23px; height: 23px; }
.service-main { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.provider { color: var(--muted); font-size: 11px; }
.service-card h2 { margin: 3px 0 0; font-size: 18px; font-weight: 600; }
.service-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.service-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.service-value strong { display: block; font-size: 13px; font-weight: 600; }
.service-value span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.launch-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid var(--blue); border-radius: 9px; background: var(--blue); color: #fff; font-weight: 600; white-space: nowrap; }
.launch-button:hover { background: #0e578a; }
.launch-button:disabled { border-color: var(--line); background: var(--surface-soft); color: var(--muted); cursor: not-allowed; }
.notice { display: none; align-items: center; gap: 9px; margin-top: 14px; padding: 12px 14px; border: 1px solid #bfd7e6; border-radius: 10px; background: var(--blue-soft); color: var(--ink); font-size: 12px; }
.notice.is-visible { display: flex; }
.notice i { color: var(--blue-bright); }
.brand-dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 14px; padding: 23px; border: 1px solid #bcd7e7; border-radius: 15px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(225,241,250,.9)); }
.brand-dashboard-hero h1 { margin: 6px 0 7px; font-size: clamp(29px, 4vw, 42px); font-weight: 500; letter-spacing: -.045em; }
.brand-dashboard-hero p { max-width: 670px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.brand-dashboard-mark { display: grid; place-items: center; width: 86px; height: 86px; flex: 0 0 auto; border-radius: 22px; background: var(--blue); color: #fff; box-shadow: 0 14px 34px rgba(18,102,160,.22); }
.brand-dashboard-mark i { width: 36px; height: 36px; }
.portal.is-360 .brand-dashboard-hero { border-color: #edc0bd; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,238,236,.92)); }
.portal.is-360 .brand-dashboard-mark { background: #e72820; box-shadow: 0 14px 34px rgba(231,40,32,.2); }
.services.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.services.is-compact .service-card { min-height: 210px; }
.dashboard-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.dashboard-section-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.dashboard-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.catalog-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-bottom: 16px; padding: 22px; border: 1px solid #bfd7e6; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(226,241,249,.9)); }
.catalog-hero h1 { margin: 6px 0 7px; font-size: clamp(27px, 4vw, 39px); font-weight: 500; letter-spacing: -.045em; }
.catalog-hero p { max-width: 650px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.catalog-hero-icon { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 20px; background: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(18,102,160,.22); }
.catalog-hero-icon i { width: 34px; height: 34px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.catalog-card { display: flex; flex-direction: column; min-width: 0; min-height: 250px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.catalog-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.catalog-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--blue-soft); color: var(--blue-bright); }
.catalog-card-icon i { width: 20px; height: 20px; }
.catalog-category { padding: 5px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.catalog-card h2 { margin: 17px 0 6px; font-size: 17px; font-weight: 600; }
.catalog-card > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.catalog-features { display: grid; gap: 7px; margin: 15px 0; }
.catalog-feature { display: flex; align-items: flex-start; gap: 7px; font-size: 10px; line-height: 1.35; }
.catalog-feature i { width: 13px; height: 13px; flex: 0 0 auto; color: var(--blue-bright); }
.catalog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); }
.catalog-card-footer small { color: var(--muted); font-size: 9px; }
.dashboard-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr); gap: 14px; margin-top: 14px; }
.panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.activity { display: grid; grid-template-columns: 33px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.activity:first-child { border-top: 0; }
.activity-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 8px; background: var(--surface-soft); color: var(--blue-bright); }
.activity-title { display: block; font-size: 12px; font-weight: 600; }
.activity-meta, .activity-time { color: var(--muted); font-size: 10px; }
.activity-meta { display: block; margin-top: 3px; }
.activity-time { white-space: nowrap; }
.contact { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.contact:first-child { border-top: 0; }
.contact-icon { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 auto; border-radius: 8px; background: var(--blue-soft); color: var(--blue-bright); }
.contact strong { display: block; font-size: 12px; font-weight: 600; }
.contact small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.customer-list { display: grid; gap: 10px; }
.customer-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.customer-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-bright); font-size: 12px; font-weight: 700; }
.customer-name { display: block; font-size: 13px; font-weight: 600; }
.customer-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.product-dots { display: flex; gap: 5px; }
.product-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-bright); opacity: .22; }
.product-dot.is-on { opacity: 1; }
.profile-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 14px; margin-bottom: 14px; }
.company-card { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; align-items: start; }
.company-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.company-card h2 { margin: 2px 0 5px; font-size: 21px; font-weight: 600; }
.company-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.profile-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 10px; }
.profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-fact { min-width: 0; padding: 11px; border-radius: 9px; background: var(--surface-soft); }
.profile-fact span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.profile-fact strong { display: block; margin-top: 5px; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; }
.odoo-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 14px; margin-bottom: 14px; }
.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.metric-box { padding: 12px; border-radius: 9px; background: var(--surface-soft); }
.metric-box span { display: block; color: var(--muted); font-size: 9px; }
.metric-box strong { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; }
.correspondence-list { display: grid; }
.correspondence-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.correspondence-item:first-child { border-top: 0; }
.correspondence-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--blue-soft); color: var(--blue-bright); }
.contract-section { margin-bottom: 14px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.section-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.contract-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contract-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 260px; padding: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.contract-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); }
.contract-card.is-cwc::before { background: #b77a28; }
.contract-card.is-360::before { background: #397a68; }
.contract-provider { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contract-card h3 { margin: 5px 0 3px; font-size: 17px; font-weight: 600; }
.contract-number { color: var(--muted); font-size: 10px; }
.contract-lines { display: grid; gap: 8px; margin: 16px 0; }
.contract-line { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: 11px; line-height: 1.35; }
.contract-line i { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--blue-bright); }
.contract-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); }
.contract-meta span { display: block; color: var(--muted); font-size: 9px; }
.contract-meta strong { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; }
.signature-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 9px; padding: 5px 8px; border-radius: 999px; background: #e7f5ee; color: #277354; font-size: 9px; font-weight: 700; }
.signature-badge i { width: 12px; height: 12px; }
.signature-badge.is-pending { background: #fff2db; color: #95651e; }
.signature-panel { margin-top: 14px; }
.signature-list { display: grid; }
.signature-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(120px, .8fr) minmax(115px, .7fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.signature-row:last-child { border-bottom: 0; }
.signature-document { display: flex; align-items: center; gap: 10px; min-width: 0; }
.signature-document > span:last-child { min-width: 0; }
.signature-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: var(--blue-soft); color: var(--blue-bright); }
.signature-icon i { width: 16px; height: 16px; }
.signature-party { color: var(--muted); font-size: 10px; }
.signature-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.portal.is-cwc .signature-badge { background: rgba(49,174,124,.16); color: #72d7ab; }
.portal.is-cwc .signature-badge.is-pending { background: rgba(244,173,62,.14); color: #f0b95d; }
.asset-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.asset-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 10px; }
.filter-button.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-bright); font-weight: 600; }
.provider-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.provider-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.provider-label.is-cwc::before { background: #b77a28; }
.provider-label.is-360::before { background: #397a68; }
.asset-id { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); font-size: 10px; }
.asset-row[hidden] { display: none; }
.secondary-button { display: inline-flex; align-items: center; gap: 6px; min-height: 37px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.secondary-button:hover { border-color: var(--blue); background: var(--blue-soft); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.setting-card { display: flex; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.setting-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: var(--blue-soft); color: var(--blue-bright); }
.setting-card strong { display: block; font-size: 13px; font-weight: 600; }
.setting-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.source-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #bfd7e6; border-radius: 999px; background: var(--blue-soft); color: var(--blue-bright); font-size: 11px; font-weight: 600; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 0 13px; border: 1px solid var(--blue); border-radius: 9px; background: var(--blue); color: #fff; font-weight: 600; }
.primary-button:hover { background: #0e578a; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.kpi-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: var(--surface-soft); color: var(--blue-bright); }
.kpi-value { margin-top: 15px; font-size: 27px; font-weight: 600; letter-spacing: -.035em; }
.kpi-note { margin-top: 3px; color: var(--muted); font-size: 10px; }
.kpi-note.is-good { color: var(--good); }
.kpi-note.is-warn { color: var(--warn); }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .75fr); gap: 14px; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 600; text-align: left; white-space: nowrap; }
.data-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr[data-ticket] { cursor: pointer; }
.data-table tbody tr[data-ticket]:hover, .data-table tbody tr.is-selected { background: var(--blue-soft); }
.table-title { display: block; font-size: 12px; font-weight: 600; }
.table-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.align-right { text-align: right !important; }
.data-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.data-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.data-status.is-good { color: var(--good); background: var(--good-soft); }
.data-status.is-warn { color: var(--warn); background: var(--warn-soft); }
.data-status.is-danger { color: var(--danger); background: var(--danger-soft); }
.data-status.is-neutral { color: var(--muted); background: var(--surface-soft); }
.sync-time { color: var(--muted); font-size: 10px; }
.preview-screen { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 22px; overflow: hidden; border-radius: 11px; background: linear-gradient(140deg, #243036, #121719); color: #f7f8f8; }
.preview-screen::before { content: ""; position: absolute; right: -50px; bottom: -82px; width: 210px; height: 210px; border: 30px solid rgba(18,102,160,.5); border-radius: 50%; }
.preview-screen::after { content: ""; position: absolute; right: 20px; bottom: -53px; width: 95px; height: 145px; border: 22px solid rgba(18,102,160,.72); border-bottom: 0; border-radius: 60px 60px 0 0; }
.preview-content { position: relative; z-index: 1; max-width: 270px; }
.preview-kicker { color: #79b9df; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.preview-title { margin-top: 6px; font-size: 24px; font-weight: 600; line-height: 1.05; }
.preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.mini-list { display: grid; gap: 2px; }
.mini-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.mini-row:first-child { border-top: 0; }
.mini-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface-soft); color: var(--blue-bright); }
.mini-title { display: block; font-size: 12px; font-weight: 600; }
.mini-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.ticket-detail { min-height: 100%; }
.ticket-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ticket-detail-id { color: var(--muted); font-size: 10px; }
.ticket-detail h2 { margin: 5px 0 0; font-size: 17px; font-weight: 600; }
.ticket-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.ticket-fact { padding: 10px; border-radius: 9px; background: var(--surface-soft); }
.ticket-fact span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.ticket-fact strong { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; }
.ticket-message { margin-top: 16px; padding: 13px; border-left: 3px solid var(--blue); background: var(--blue-soft); color: var(--ink); font-size: 11px; line-height: 1.55; }
.uptime-list { display: grid; }
.uptime-row { display: grid; grid-template-columns: 160px minmax(170px, 1fr) auto; align-items: center; gap: 15px; padding: 14px 0; border-top: 1px solid var(--line); }
.uptime-row:first-child { border-top: 0; }
.uptime-bars { display: grid; grid-template-columns: repeat(24, minmax(3px, 1fr)); gap: 2px; }
.uptime-bar { height: 24px; border-radius: 2px; background: var(--good); opacity: .8; }
.uptime-bar.is-warn { background: var(--warn); }
.uptime-bar.is-down { background: var(--danger); }
.usage { min-width: 140px; }
.usage-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 9px; }
.usage-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.usage-fill { height: 100%; border-radius: inherit; background: var(--blue); }
.usage.is-warn .usage-fill { background: var(--warn); }
.signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.signal span { width: 3px; border-radius: 1px; background: var(--good); }
.signal span:nth-child(1) { height: 4px; }
.signal span:nth-child(2) { height: 7px; }
.signal span:nth-child(3) { height: 10px; }
.signal span:nth-child(4) { height: 14px; }
.request-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 14px; }
.request-form { display: grid; gap: 12px; }
.request-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 600; }
.request-form input, .request-form select, .request-form textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.request-form textarea { min-height: 94px; resize: vertical; }
.request-form input:focus, .request-form select:focus, .request-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.request-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.flow-step { position: relative; min-width: 0; padding: 13px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.flow-step.is-done { border-color: #b9ddcf; background: var(--good-soft); }
.flow-step.is-current { border-color: #9fc8df; background: var(--blue-soft); }
.flow-number { display: grid; place-items: center; width: 23px; height: 23px; margin-bottom: 10px; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 9px; font-weight: 700; }
.flow-step.is-done .flow-number { background: var(--good); color: #fff; }
.flow-step.is-current .flow-number { background: var(--blue); color: #fff; }
.flow-step strong { display: block; font-size: 10px; font-weight: 600; }
.flow-step small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.project-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; margin-bottom: 14px; }
.project-summary h3 { margin: 0 0 5px; font-size: 16px; font-weight: 600; }
.project-summary p { margin: 0; color: var(--muted); font-size: 10px; }
.phase-list { display: grid; }
.phase-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 105px auto; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.phase-row:first-child { border-top: 0; }
.phase-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-soft); color: var(--muted); }
.phase-row.is-done .phase-icon { background: var(--good-soft); color: var(--good); }
.phase-row.is-current .phase-icon { background: var(--blue-soft); color: var(--blue-bright); }
.progress-track { width: 105px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.progress-fill { height: 100%; border-radius: inherit; background: var(--blue); }
.service-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.service-choice { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.service-choice i { width: 17px; height: 17px; flex: 0 0 auto; color: var(--blue-bright); }
.service-choice strong { display: block; font-size: 11px; }
.service-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.idoit-type { display: inline-flex; padding: 4px 6px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 9px; font-weight: 600; }
.cwc-hero { position: relative; display: flex; align-items: flex-end; min-height: 285px; padding: 30px; overflow: hidden; border-radius: 15px; background:
    radial-gradient(circle at 88% 22%, rgba(255,59,46,.22), transparent 44%),
    linear-gradient(112deg, #1f1f1f, #121212 72%);
  color: #fff; }
.cwc-hero-content { position: relative; z-index: 1; max-width: 550px; padding: 18px; border-radius: 12px; background: rgba(20,20,20,.76); backdrop-filter: blur(8px); }
.cwc-hero-kicker { color: #ff4a3d; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cwc-hero h1 { margin: 7px 0 8px; font-size: clamp(31px, 5vw, 48px); font-weight: 600; letter-spacing: -.04em; }
.cwc-hero p { margin: 0; color: #d9d9d9; font-size: 12px; line-height: 1.55; }
.cwc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cwc-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid #ff3b2e; border-radius: 8px; background: #ff3b2e; color: #fff; font-size: 11px; font-weight: 600; }
.cwc-button.is-ghost { border-color: rgba(255,255,255,.34); background: transparent; }
.cwc-section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -27px -27px 25px; padding: 11px 27px; background: #1f1f1f; color: #fff; }
.cwc-mini-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.cwc-orbit { width: 25px; height: 25px; border: 5px solid #ff3b2e; border-left-color: transparent; border-radius: 50%; transform: rotate(-20deg); }
.cwc-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.cwc-tab { min-height: 31px; padding: 0 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: transparent; color: #d4d4d4; font-size: 10px; }
.cwc-tab:hover, .cwc-tab.is-active { border-color: #ff3b2e; background: rgba(255,59,46,.15); color: #fff; }
.project-switcher { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px 0 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; }
.project-switcher i { width: 15px; height: 15px; color: #ff4a3d; }
.project-switcher select { max-width: 230px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }
.project-switcher option { background: #222; color: #fff; }
.cwc-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.cwc-service-card { display: flex; flex-direction: column; min-height: 188px; padding: 17px; border: 1px solid #3a3a3a; border-radius: 12px; background: #242424; color: #fff; }
.cwc-service-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px; border-radius: 9px; background: rgba(255,59,46,.14); color: #ff4a3d; }
.cwc-service-card h2 { margin: 0; font-size: 16px; font-weight: 600; }
.cwc-service-card p { margin: 7px 0 16px; color: #a9a9a9; font-size: 10px; line-height: 1.5; }
.cwc-service-card button { margin-top: auto; align-self: flex-start; }
.contract-logo { display: flex; align-items: center; height: 45px; margin-bottom: 12px; }
.contract-logo img { display: block; max-width: 145px; max-height: 43px; object-fit: contain; object-position: left center; }
.contract-logo.is-dark { margin: -6px -4px 6px; padding: 5px 9px; border-radius: 7px; background: #202020; }
.contract-logo.is-dark img { max-width: 110px; }
.hammerpad-contract-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.hammerpad-contract-brand::before { content: "H"; display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid var(--blue); border-radius: 9px; }
.creative-detail-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); gap: 14px; }
.detail-breadcrumb { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--muted); font-size: 10px; }
.detail-breadcrumb button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #d8463c; font-size: inherit; }
.design-stage { position: relative; display: grid; place-items: center; min-height: 360px; padding: 28px; overflow: hidden; border-radius: 11px; background: #ececeb; }
.design-canvas { position: relative; width: min(100%, 620px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: linear-gradient(135deg, #181818 0 58%, #292929 58% 100%); color: #fff; box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.design-canvas::before { content: ""; position: absolute; right: 7%; top: -22%; width: 43%; aspect-ratio: 1; border: 24px solid #ff3b2e; border-left-color: transparent; border-radius: 50%; transform: rotate(-22deg); }
.design-canvas::after { content: ""; position: absolute; left: 8%; bottom: 11%; width: 25%; height: 5px; background: #ff3b2e; }
.design-copy { position: absolute; z-index: 1; left: 8%; top: 22%; max-width: 52%; }
.design-copy small { color: #ff5145; font-size: clamp(7px, 1vw, 11px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.design-copy strong { display: block; margin-top: 8px; font-size: clamp(21px, 4vw, 48px); line-height: .98; letter-spacing: -.05em; }
.design-copy span { display: block; margin-top: 12px; color: #c4c4c4; font-size: clamp(7px, 1.1vw, 12px); line-height: 1.5; }
.version-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-bottom: 11px; }
.version-tabs { display: flex; gap: 5px; }
.version-tab { min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 9px; }
.version-tab.is-active { border-color: #e34b41; background: #fff1ef; color: #c93c32; font-weight: 700; }
.feedback-list { display: grid; }
.feedback-entry { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid var(--line); }
.feedback-entry:first-child { border-top: 0; }
.feedback-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-bright); font-size: 9px; font-weight: 700; }
.feedback-avatar.is-cwc { background: #fff0ee; color: #d53e34; }
.feedback-entry strong { font-size: 10px; }
.feedback-entry time { margin-left: 6px; color: var(--muted); font-size: 8px; font-weight: 400; }
.feedback-entry p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.approval-box { margin-top: 13px; padding: 13px; border: 1px solid #f0c0bb; border-radius: 10px; background: #fff6f5; }
.approval-box strong { display: block; font-size: 11px; }
.approval-box p { margin: 5px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.45; }
[data-customer-only] { display: none; }
.site-overview-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 18px; padding: 20px; border: 1px solid #bfd7e6; border-radius: 13px; background: linear-gradient(135deg, #f4faff, #e6f3fa); }
.site-overview-head h1 { margin: 5px 0 7px; font-size: clamp(27px, 4vw, 39px); font-weight: 500; letter-spacing: -.045em; }
.site-overview-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.site-overview-score { display: grid; place-items: center; width: 92px; height: 92px; border: 8px solid #cde9dc; border-top-color: var(--good); border-radius: 50%; color: var(--good); text-align: center; }
.site-overview-score strong { display: block; font-size: 22px; line-height: 1; }
.site-overview-score span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.site-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.site-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.site-identity { display: flex; align-items: center; gap: 10px; }
.site-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: var(--blue-soft); color: var(--blue-bright); }
.site-identity h3 { margin: 0; font-size: 14px; font-weight: 600; }
.site-identity p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.site-systems { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0 13px; }
.system-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 9px; }
.system-chip i { width: 12px; height: 12px; color: var(--blue-bright); }
.site-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line); }
.maintenance-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 14px; margin-top: 14px; }
.maintenance-list { display: grid; }
.maintenance-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.maintenance-item:first-child { border-top: 0; }
.maintenance-date { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9px; background: var(--blue-soft); color: var(--blue-bright); }
.maintenance-date strong { display: block; font-size: 15px; line-height: 1; }
.maintenance-date span { display: block; margin-top: 2px; font-size: 8px; text-transform: uppercase; }
.network-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
.network-metric { padding: 11px; border-radius: 9px; background: var(--surface-soft); }
.network-metric span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.network-metric strong { display: block; margin-top: 5px; font-size: 12px; }
.governance-form { display: grid; gap: 11px; }
.governance-form label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 600; }
.governance-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 11px; }
.multi-check { position: relative; }
.multi-check summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 11px; cursor: pointer; list-style: none; }
.multi-check summary::-webkit-details-marker { display: none; }
.multi-check summary::after { content: "⌄"; color: var(--muted); font-size: 14px; }
.multi-check[open] summary { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.multi-check-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.multi-check-options label { display: flex; grid-template-columns: none; align-items: flex-start; gap: 7px; padding: 7px; border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 10px; cursor: pointer; }
.multi-check-options input { width: 14px; height: 14px; flex: 0 0 auto; accent-color: var(--blue); }
.multi-check-options small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.region-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; background: #eef2ff; color: #4b5fb3; font-size: 9px; font-weight: 600; }
.region-badge.is-us { background: #fff1ea; color: #b75a2a; }
.insight-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 14px; }
.heatmap-shell { padding: 14px; border-radius: 12px; background: #172126; color: #fff; }
.heatmap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.heatmap-head h3 { margin: 0; font-size: 14px; }
.heatmap-legend { display: flex; align-items: center; gap: 5px; color: #b9c6cc; font-size: 8px; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; background: #246f93; }
.legend-dot.is-mid { background: #2bb38a; }
.legend-dot.is-high { background: #f1c84a; }
.heatmap { display: grid; grid-template-columns: repeat(12, minmax(10px, 1fr)); gap: 4px; min-height: 205px; }
.heatmap span { border-radius: 5px; background: #26363d; }
.heatmap span:nth-child(7n), .heatmap span:nth-child(11n) { background: #235d79; }
.heatmap span:nth-child(5n), .heatmap span:nth-child(13n) { background: #267e73; }
.heatmap span:nth-child(17n), .heatmap span:nth-child(19n) { background: #2bb38a; }
.heatmap span:nth-child(23n) { background: #dcae39; }
.heatmap.is-wifi span:nth-child(4n), .heatmap.is-wifi span:nth-child(9n) { background: #286b90; }
.heatmap.is-wifi span:nth-child(10n), .heatmap.is-wifi span:nth-child(14n) { background: #2aa480; }
.heatmap.is-wifi span:nth-child(22n) { background: #e4bd43; }
.insight-metrics { display: grid; gap: 9px; }
.insight-metric { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.insight-metric span { color: var(--muted); font-size: 9px; }
.insight-metric strong { display: block; margin-top: 5px; font-size: 18px; }
.recommend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.recommend-card { display: flex; flex-direction: column; min-height: 205px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.recommend-card .recommend-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 17px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-bright); }
.portal.is-cwc .recommend-card .recommend-icon, .portal.is-360 .recommend-card .recommend-icon { background: #fff0ee; color: #d84238; }
.recommend-card h2 { margin: 0; font-size: 15px; }
.recommend-card p { margin: 7px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.recommend-card .recommend-fit { margin-top: auto; margin-bottom: 10px; color: var(--good); font-size: 9px; font-weight: 600; }
.social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.social-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.social-visual { display: flex; align-items: flex-end; min-height: 140px; padding: 15px; background: linear-gradient(135deg, #173143, #0b1115); color: #fff; }
.social-card:nth-child(2) .social-visual { background: linear-gradient(135deg, #17445b, #1266a0); }
.social-card:nth-child(3) .social-visual { background: linear-gradient(135deg, #303d42, #111719); }
.social-visual strong { max-width: 210px; font-size: 18px; line-height: 1.08; }
.social-copy { padding: 13px; }
.social-copy p { margin: 7px 0 10px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.social-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.social-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.social-toolbar-title { margin-right: auto; font-size: 11px; font-weight: 600; }
.connector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.connector-card { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.connector-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; background: var(--blue-soft); color: var(--blue-bright); }
.connector-card strong { display: block; font-size: 10px; }
.connector-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.ticker { display: flex; align-items: center; gap: 14px; overflow: hidden; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: #172126; color: #fff; }
.ticker-label { flex: 0 0 auto; color: #68b7e5; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ticker-track { display: flex; align-items: center; gap: 28px; min-width: max-content; font-size: 10px; animation: tickerMove 24s linear infinite; }
.ticker-track span::before { content: "•"; margin-right: 9px; color: #68b7e5; }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-45%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
.trend-list { display: grid; gap: 11px; }
.trend-row { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(160px, 1.3fr) auto; align-items: center; gap: 12px; }
.trend-row strong { font-size: 11px; }
.trend-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.trend-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #65b9e8); }
.frequency-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.frequency-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.frequency-filter i { width: 15px; height: 15px; color: var(--blue-bright); }
.frequency-filter span { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.frequency-filter select { max-width: 180px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 9px; cursor: pointer; }
.portal-dialog { width: min(560px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 15px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgba(8,20,27,.3); }
.portal-dialog::backdrop { background: rgba(8,20,27,.62); backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 20px 21px 15px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 4px 0 0; font-size: 20px; }
.dialog-close { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--muted); }
.dialog-body { padding: 18px 21px 21px; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pdf-dialog { width: min(1050px, calc(100% - 28px)); }
.pdf-viewer { width: 100%; height: min(72vh, 760px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.catalog-viewer-button { display: grid; place-items: center; width: 86px; height: 86px; flex: 0 0 auto; border: 1px solid #a9cee2; border-radius: 22px; background: rgba(255,255,255,.78); color: var(--blue); box-shadow: 0 12px 30px rgba(18,102,160,.13); }
.catalog-viewer-button i { width: 34px; height: 34px; }
.catalog-viewer-button small { display: block; margin-top: -13px; font-size: 8px; font-weight: 700; }
.language-switch { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); }
.language-switch i { width: 14px; height: 14px; }
.language-switch select { max-width: 48px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 9px; font-weight: 700; cursor: pointer; }
.auth-language-switch { position: absolute; top: 18px; right: 20px; min-height: 30px; border-color: transparent; background: rgba(255,255,255,.7); opacity: .72; }
.auth-language-switch:hover, .auth-language-switch:focus-within { border-color: var(--line); opacity: 1; }
.integration-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 13px 14px; border: 1px dashed #b9cbd6; border-radius: 10px; background: rgba(229,242,250,.55); color: var(--muted); font-size: 11px; line-height: 1.5; }
.customer-mode [data-staff-only] { display: none !important; }
.customer-mode [data-customer-only] { display: block; }
.customer-mode .customer-picker select { pointer-events: none; appearance: none; opacity: 1; padding-right: 0; }

@media (max-width: 900px) {
  .page { padding: 12px; }
  .auth, .portal { min-height: calc(100vh - 24px); }
  .portal { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { justify-content: space-between; }
  .customer-picker { margin-right: auto; margin-left: 0; }
  .mobile-portal-switcher { display: flex; }
  .mobile-nav { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 15px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .mobile-nav .nav-button { width: auto; min-height: 37px; color: var(--muted); }
  .mobile-nav .nav-button.is-active { color: var(--blue-bright); background: var(--blue-soft); }
}
@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { min-height: 290px; padding: 30px; }
  .auth-message { padding: 30px 0 10px; }
  .auth-message h1 { font-size: 42px; }
  .auth-foot { display: none; }
  .login-area { padding: 34px 24px; }
  .services, .services.is-compact, .dashboard-row, .settings-grid, .split-grid, .profile-hero, .odoo-grid, .request-layout, .creative-detail-grid, .maintenance-grid, .catalog-grid, .insight-grid, .recommend-grid, .social-grid { grid-template-columns: 1fr; }
  .connector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-grid { grid-template-columns: 1fr; }
  .contract-grid { grid-template-columns: 1fr; }
  .signature-row { grid-template-columns: 1fr; gap: 7px; padding: 14px 0; }
  .signature-actions { justify-content: flex-start; }
  .cwc-service-grid { grid-template-columns: 1fr; }
  .request-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { min-height: 0; }
}
@media (max-width: 540px) {
  .page { padding: 0; }
  .auth, .portal { min-height: 100vh; border: 0; border-radius: 0; }
  .auth-brand { min-height: 250px; padding: 24px; }
  .auth-message { padding: 20px 0 5px; }
  .auth-message h1 { font-size: 37px; }
  .auth-message p { font-size: 13px; }
  .login-area { padding: 30px 19px; }
  .topbar { padding: 10px 14px; }
  .customer-icon, .user-button > span:not(.avatar) { display: none; }
  .customer-picker select { max-width: 160px; }
  .content { padding: 20px 14px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .status { white-space: normal; }
  .service-card { grid-template-columns: 42px minmax(0, 1fr); padding: 16px; }
  .brand-dashboard-hero { align-items: flex-start; flex-direction: column; }
  .service-icon { width: 42px; height: 42px; }
  .service-bottom { align-items: flex-start; flex-direction: column; }
  .customer-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .product-dots { display: none; }
  .activity { grid-template-columns: 33px minmax(0, 1fr); }
  .activity-time { grid-column: 2; }
  .uptime-row { grid-template-columns: 1fr; gap: 8px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .ticket-facts { grid-template-columns: 1fr; }
  .profile-facts, .metric-strip { grid-template-columns: 1fr; }
  .form-row, .service-choice-grid, .request-flow { grid-template-columns: 1fr; }
  .phase-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .progress-track { display: none; }
  .cwc-section-bar { align-items: flex-start; flex-direction: column; margin: -20px -14px 20px; padding: 11px 14px; }
  .cwc-hero { min-height: 360px; padding: 14px; background-position: 58% center; }
  .mobile-portal-switcher { gap: 2px; }
  .portal-mini-choice { min-width: 26px; height: 26px; padding: 0 5px; font-size: 7px; }
  .design-stage { min-height: 245px; padding: 12px; }
  .site-overview-head { grid-template-columns: 1fr; }
  .site-overview-score { width: 76px; height: 76px; border-width: 6px; }
  .network-summary { grid-template-columns: 1fr; }
  .multi-check-options { grid-template-columns: 1fr; }
  .connector-grid { grid-template-columns: 1fr; }
  .maintenance-item { grid-template-columns: 42px minmax(0, 1fr); }
  .maintenance-item > :last-child { grid-column: 2; }
  .auth-portal-switcher { width: 100%; }
  .auth-portal-switcher .portal-choice[data-portal-choice="hammerpad"] { left: 4px; width: calc(34% - 4px); }
  .auth-portal-switcher .portal-choice[data-portal-choice="cwc"] { left: 34%; width: 32%; }
  .auth-portal-switcher .portal-choice[data-portal-choice="systems360"] { left: 66%; width: calc(34% - 4px); }
  .auth-portal-switcher .portal-choice > strong { display: none; }
}
  
/* Hilfsklassen statt style-Attributen. Die Sicherheitsrichtlinie erlaubt
   keine Stile im Markup (style-src 'self'), und ein Ausnahmeschalter
   ('unsafe-inline') wuerde den Schutz fuer alle Stile aufheben. */
.abstand-oben-10 { margin-top: 10px; }
.abstand-oben-12 { margin-top: 12px; }
.abstand-oben-13 { margin-top: 13px; }
.abstand-oben-14 { margin-top: 14px; }
.mittig-oben-15 { justify-content: center; margin-top: 15px; }

/* Fuellstaende beginnen bei null und werden aus den Daten gesetzt.
   Ein fest verdrahteter Wert im Markup waere eine stille Unwahrheit. */
.progress-fill, .usage-fill, .trend-fill { width: 0; }

/* Echte Markenzeichen statt der im Entwurf nachgezeichneten.
   Das Markup bleibt unveraendert -- getauscht wird nur, was gezeichnet wird. */

/* HAMMERPAD: die Bildmarke von hammerpad.com. */
.brand-mark {
  background: url("/inhalt/assets/hammerpad-marke.png") center / contain no-repeat;
  color: transparent;
}
.brand-mark::before,
.brand-mark::after { content: none; }
.brand-mark span { display: none; }

.switch-logo.is-hammerpad {
  background: #fff url("/inhalt/assets/hammerpad-marke.png") center / 78% no-repeat;
  color: transparent;
  font-size: 0;
}

.hammerpad-contract-brand::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 0;
  background: url("/inhalt/assets/hammerpad-marke.png") center / contain no-repeat;
}

/* CWC Solutions: der Pinselkreis von cwc.solutions. Das Bild traegt den
   Schriftzug in Weiss, deshalb wird er im Markup ausgeblendet, wo das Logo
   vollstaendig steht. */
.login-cwc-symbol {
  border: 0;
  border-radius: 0;
  transform: none;
  background: url("/inhalt/assets/cwc-logo.png") center / contain no-repeat;
}

.switch-logo.is-cwc {
  background: #fff url("/inhalt/assets/cwc-logo.png") center / 74% no-repeat;
}
.switch-logo.is-cwc::before { content: none; }

.cwc-orbit {
  border: 0;
  border-radius: 0;
  transform: none;
  background: url("/inhalt/assets/cwc-logo.png") center / contain no-repeat;
}

/* Auf der CWC-Anmeldung steht das Logo gross; der Schriftzug ist Teil des
   Bildes, ein zweiter danebengesetzter waere doppelt. */
.auth.login-cwc .login-cwc-symbol { width: 260px; height: 280px; border-width: 0; }
.auth.login-cwc .brand-name,
.auth.login-cwc .brand-sub { display: none; }

/* Hinweis in geleerten Listen und Tabellen. Bewusst zurueckhaltend: die Stelle
   soll erkennbar leer sein, nicht wie ein Fehler wirken. */
.liste-leer,
.tabelle-leer {
  margin: 0;
  padding: 18px 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.data-table .tabelle-leer { padding: 22px 10px; }

/* Kennzahl ohne Wert: der Strich steht ruhiger als eine erfundene Zahl. */
.kpi-value:not([data-gefuellt]) { color: var(--muted); }

/* Stand der letzten Aktualisierung in der Kopfleiste. */
.aktualisierung {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.aktualisierung i { width: 13px; height: 13px; }

.aktualisierung.laeuft i {
  animation: drehen 1s linear infinite;
}

@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aktualisierung.laeuft i { animation: none; } }