body.os-page {
  --bg: #f6f5f2;
  --panel: #fff;
  --ink: #181a1c;
  --text: #181a1c;
  --muted: #62666b;
  --accent: #303236;
  --mint: #303236;
  --gold: #909398;
  --border: #dcdcd8;
}

body.os-page .os-flag {
  height: 1px;
  background: var(--border);
}

body.os-page .button,
body.os-page button {
  background: linear-gradient(135deg, #373a3e, #17191b) !important;
  border-color: #303236 !important;
}

body.os-page :is(.button.secondary, button.secondary, button.back, .text-button) {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

body.os-page :is(.panel, .plan, .device) {
  background: #fff !important;
  border-color: var(--border) !important;
}

body.os-page :is(.notice, .trial-note, .badge, .os-trust) {
  background: #eeede9 !important;
  color: #414449 !important;
}

body.os-page :is(.error, [role="alert"]) { color: #8b2635; }
body.os-page :focus-visible { outline-color: #62666b; }

.os-home .graphite-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: clamp(24px, 6vw, 88px);
  min-height: 0;
  max-width: 1200px;
  margin: auto;
  padding: clamp(36px, 7vw, 90px) 28px;
}

.graphite-hero::after { content: none; }
.graphite-hero .os-hero-copy { padding: 0; }
.graphite-hero .os-hero-copy h1 { margin-top: 0; }
.graphite-hero .os-lead { color: var(--muted); }
.graphite-hero .actions { flex-wrap: wrap; }
.graphite-device {
  display: grid;
  place-items: center;
  gap: 28px;
  padding: 28px;
  border: 1px solid #dcdcd8;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 55%, #fff, #e7e6e2);
}
.graphite-device-brand { font-weight: 800; font-size: 21px; }
.graphite-device-caption { color: #62666b; font-weight: 700; }
.graphite-power {
  display: grid;
  place-items: center;
  position: relative;
  width: clamp(112px, 15vw, 178px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #45484c, #181a1c);
  box-shadow: 0 0 0 9px #fff, 0 12px 32px #181a1c38;
}
.graphite-power::before {
  content: "";
  width: 36%;
  aspect-ratio: 1;
  border: 5px solid #f6f5f2;
  border-top-color: transparent;
  border-radius: 50%;
}
.graphite-power::after {
  content: "";
  position: absolute;
  top: 27%;
  width: 5px;
  height: 24%;
  border-radius: 4px;
  background: #f6f5f2;
}
body.brand-admin :is(.panel, .sidebar, .customer-drawer, dialog) {
  border-radius: 18px;
}
body.brand-admin :is(.page-head, .panel-head) {
  flex-wrap: wrap;
}
body.brand-admin :is(.panel, .panel-body, .customer-drawer) { min-width: 0; }
body.brand-admin .panel-body { overflow-x: auto; }
body.brand-admin :is([role="alert"], .error) { color: #ffb6be; }
body.brand-admin :focus-visible { outline: 2px solid #f6f5f2; outline-offset: 3px; }
@media (max-width: 650px) {
  .os-home .graphite-hero { grid-template-columns: 1fr; padding: 34px 20px; }
  .graphite-hero .os-hero-copy { text-align: left; }
  .graphite-device { gap: 20px; padding: 22px; }
  .graphite-hero .actions { margin-bottom: 0; }
}
body.brand-admin {
  --admin-identity-line: #ffffff24;
  background: #191a1c !important;
}
body.brand-admin :is(.sidebar, .customer-drawer, .drawer-head, .pl-admin-jump) {
  background: #232427 !important;
}
body.brand-admin :is(.panel, .metric, .simple-server) {
  background: #26272a !important;
  border-color: #ffffff24 !important;
}
body.brand-admin :is(button.danger, button[data-revoke-device], button[aria-label^="Отозвать"]) {
  background: #512b31 !important;
  border-color: #b46570 !important;
  color: #fff3f4 !important;
}
body.brand-admin .admin-phone-nav { background: #202124f7; border-color: #ffffff26; }
body.brand-admin .admin-phone-menu { background: #27282b; border-color: #ffffff26; }
body.brand-admin .admin-phone-nav a[aria-current="page"] {
  background: #e9e8e4 !important;
  color: #181a1c !important;
}
@media (max-width: 760px) {
  body.brand-admin .sidebar { border-radius: 0; }
  body.brand-admin .list-toolbar > *, body.brand-admin .list-pagination > * { min-width: 0; }
}
body.brand-admin:has(#login:not([hidden])) :is(.page-head, .admin-phone-install, .admin-phone-nav, .admin-phone-menu) {
  display: none !important;
}
body.brand-admin .sidebar > .brand {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
body.brand-admin .sidebar > .brand svg { width: 40px; height: 40px; }
body.brand-admin #login { max-width: 460px; margin-inline: auto; }
body.brand-admin .page-head > div { flex: 1 1 240px; }
body.graphite-services .hero h1 { font-size: clamp(34px, 5.5vw, 70px); letter-spacing: -.045em; }
body.graphite-services .hero-photo img, body.graphite-services .care img { filter: saturate(.45); }
body.graphite-services .button { box-shadow: none; }
body.graphite-services .request-card :is(input, select, textarea) { min-height: 44px; }
body.os-home .graphite-hero .actions { display: flex; align-items: center; gap: 16px; }
body.os-home .graphite-hero .actions > * { width: auto; }
body.os-home .graphite-hero .actions .secondary { padding-inline: 10px; }
body.graphite-services {
  color-scheme: light;
  --bg: #f6f5f2;
  --surface: #fff;
  --line: #dcdcd8;
  --text: #181a1c;
  --muted: #575b60;
  --mint: #303236;
  background: var(--bg);
}
body.graphite-services :is(.header nav, .eyebrow, .lead, .hero-notes, .reassurance p, .service-card > p, .tags span, .care figcaption, .contact-hint, .request-card label, .footer nav, .footer-city, #request-result > p) {
  color: var(--muted);
}
body.graphite-services :is(.service-card, .request-card, .price-note) {
  background: #fff;
  border-color: var(--line);
  box-shadow: none;
}
body.graphite-services .button {
  background: linear-gradient(135deg, #373a3e, #17191b);
  border-color: #303236;
  color: #fff;
}
body.graphite-services .request-card :is(input:not([type=checkbox]), textarea, select) {
  background: #f6f5f2;
  color: #181a1c;
  border-color: #a6a8ab;
}
body.graphite-services .tags span { border-color: var(--line); }
body.graphite-services .photo-caption { color: #fff; }
body.brand-admin .pl-server-warning, body.brand-admin .warning { color: #f4d49c !important; }
@media (max-width: 650px) {
  body.os-home .graphite-hero .actions { display: grid; }
  body.os-home .graphite-hero .actions > * { width: 100%; }
}