.service-license-banner {
  --license-color: #16804a;
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--license-color) 25%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--license-color) 8%, white);
  color: var(--license-color);
  text-align: left;
  font-size: var(--pc-font-page-description, 14px);
  line-height: 1.5;
  cursor: pointer;
}
.service-license-banner strong { font-weight: 600; }
.service-license-banner span, .service-license-banner small { font-size: inherit; }
.service-license-banner small { color: var(--muted, #72807c); }
.service-license-banner.EXPIRING { --license-color: #a65b00; }
.service-license-banner.GRACE, .service-license-banner.EXPIRED, .service-license-banner.SUSPENDED, .service-license-banner.urgent { --license-color: var(--red, #bf4a40); }
.service-license-banner.PERMANENT { --license-color: var(--store-theme, var(--mobile-primary, var(--green, #16804a))); }
.service-license-banner:focus-visible { outline: 2px solid var(--store-theme, var(--mobile-primary, #155c49)); outline-offset: 2px; }
#mApp > .service-license-banner { width: calc(100% - 28px); margin: 10px 14px 0; }
#mApp.immersive-mode > .service-license-banner { display: none; }
.service-license-fields { margin: 12px 0; font-size: var(--pc-font-page-description, 14px); line-height: 1.6; }
.service-license-fields > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #e2e9e5); }
.service-license-fields dt { color: var(--muted, #72807c); }
.service-license-fields dd { margin: 0; overflow-wrap: break-word; }
.service-license-rule { color: var(--muted, #72807c); font-size: var(--pc-font-page-description, 14px); line-height: 1.6; }
.service-license-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid var(--line, #e2e9e5); border-radius: 16px; color: var(--ink, #172522); background: var(--card, white); font-family: inherit; }
.service-license-modal::backdrop { background: #102c2460; backdrop-filter: blur(5px); }
.service-license-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-license-modal h2 { margin: 0; font-size: var(--pc-font-section-title, 18px); }
.service-license-modal button { padding: 8px 12px; border: 1px solid var(--line, #e2e9e5); border-radius: 9px; color: var(--store-theme, var(--mobile-primary, var(--green, #155c49))); background: transparent; font-size: var(--pc-font-button, 14px); }
.service-license-system-info { margin: 16px 0; padding: 16px; border-radius: 16px; background: var(--card, white); }
.license-status-bar[hidden] { display: none !important; }
#app > main > header > .license-status-bar {
  --license-color: var(--store-theme, var(--green, #16804a));
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 14px;
  width: auto;
  min-height: 48px;
  margin-left: auto !important;
  order: 100;
  padding: 10px 16px;
  border-radius: var(--radius-md, 12px);
  white-space: nowrap;
  font-size: var(--pc-font-page-description, 14px);
}
#app > main > header > .license-status-bar.EXPIRING { --license-color: #a65b00; }
#app > main > header > .license-status-bar:is(.GRACE,.EXPIRED,.SUSPENDED,.urgent) { --license-color: var(--red, #bf4a40); }
.license-status-full { display: flex; align-items: center; gap: 16px; color: var(--ink); }
.license-status-full > span + span, .license-status-link { padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--license-color) 20%, transparent); }
.license-status-label { display: flex; align-items: center; gap: 8px; }
.license-status-pill { padding: 3px 12px; border: 1px solid color-mix(in srgb, var(--license-color) 30%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--license-color) 12%, white); color: var(--license-color); font-weight: 600; }
.license-status-bar .license-status-remaining b { font-size: var(--pc-font-page-title, 24px); line-height: 1; color: var(--license-color); font-variant-numeric: tabular-nums; }
.license-status-message { color: var(--license-color); font-weight: 600; }
.license-status-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.license-status-link { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.license-status-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.license-status-compact, .license-status-link-short { display: none; }
#app > main > header.has-license-status-bar { gap: 12px; }
#app > main > header.has-license-status-bar .topbar-title { flex: 0 1 auto; }
#app > main > header.has-license-status-bar #dashboardHeaderActions { margin-left: 0; }
@media screen and (min-width: 851px) and (max-width: 1800px) {
  #app > main > header.has-license-status-bar .topbar-context { display: none; }
  #app > main > header > .license-status-bar { padding: 9px 12px; gap: 10px; }
  .license-status-full { gap: 10px; }
  .license-status-full > span + span, .license-status-link { padding-left: 10px; }
}
@media screen and (max-width: 1500px) {
  #app > main > header > .license-status-bar { gap: 8px; padding: 9px 10px; }
  .license-status-bar .license-status-full, .license-status-bar .license-status-icon, .license-status-bar .license-status-link-full { display: none; }
  .license-status-compact, .license-status-link-short { display: inline; }
  #app > main > header.has-license-status-bar { gap: 8px; }
}
@media (max-width: 600px) {
  .service-license-modal { padding: 18px; }
  .service-license-fields > div { grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
}
@media print {
  .service-license-banner, .service-license-modal, [data-service-license-info], .service-license-system-info { display: none !important; }
}