:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  color: #22373e;
  background: #f4f7f8;
  font-synthesis: none;
  --ink: #19333c;
  --muted: #829096;
  --line: #e7edef;
  --teal: #117d72;
  --green: #e9f6f1;
  --nav: #112c34;
  --shadow: 0 4px 24px #16343d05;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
a {
  color: var(--teal);
  text-decoration: none;
}
button {
  color: inherit;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #60c3b3;
  outline-offset: 3px;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #27978b;
  box-shadow: 0 0 0 3px #117d7210;
}
button svg,
a svg {
  flex-shrink: 0;
}
svg {
  vertical-align: middle;
}
.boot {
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 40px;
  background: #72e0c5;
  border-radius: 11px;
  color: #123c3a;
  font-size: 22px;
  font-weight: 750;
  box-shadow: inset 0 0 0 1px #ffffff40;
}
.boot .brand-mark {
  margin: auto;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12px;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2.3px;
  font-weight: 700;
  color: #8da0a7;
}
.shell {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 224px;
  background: var(--nav);
  z-index: 25;
  color: #c7d8dc;
  display: flex;
  flex-direction: column;
  padding: 29px 17px 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  margin-bottom: 42px;
}
.brand strong {
  display: block;
  font-size: 19px;
  letter-spacing: 3px;
  color: #f4fbfc;
}
.brand small {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 2.1px;
  color: #809ea6;
}
.nav-section {
  font-size: 10px;
  color: #6e9099;
  letter-spacing: 1.6px;
  padding: 0 15px;
  margin: 0 0 10px;
}
.nav-list {
  display: grid;
  gap: 5px;
  margin-bottom: 26px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  text-align: left;
  padding: 13px 15px;
  color: #9eb7be;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  width: 100%;
  text-decoration: none;
}
.nav-link svg {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}
.nav-link:hover {
  background: #ffffff07;
  color: #e8fffa;
}
.nav-link.active {
  background: #24474d;
  color: #8fe6d1;
  box-shadow: inset 3px 0 #78dfc7;
}
.nav-link.active svg {
  opacity: 1;
}
.nav-badge {
  margin-left: auto;
  font-size: 10px;
  background: #ffffff10;
  padding: 2px 6px;
  border-radius: 4px;
}
.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid #ffffff0c;
  padding: 22px 12px 0;
  font-size: 11px;
  color: #7c9ba3;
}
.sidebar-foot strong {
  display: block;
  font-weight: 500;
  color: #c3d8dc;
  margin-bottom: 8px;
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #63d9b5;
  vertical-align: middle;
  margin-right: 6px;
}
.workspace {
  margin-left: 224px;
}
.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 38px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  gap: 16px;
}
.breadcrumbs {
  font-size: 12px;
  color: #8c9ba0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.breadcrumbs strong {
  font-weight: 500;
  color: #41545c;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.env-tag {
  font-size: 11px;
  padding: 6px 9px;
  color: #56746f;
  background: #eef5f2;
  border-radius: 5px;
}
.user-avatar {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #eef4f2;
  color: #267a6c;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.user-info {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #70838a;
}
.icon-button:hover {
  background: #eef4f3;
  color: var(--teal);
}
.mobile-menu {
  display: none;
}
.content {
  padding: 32px 38px 44px;
  max-width: 1600px;
  margin: auto;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 27px;
}
.page-head h1 {
  font-size: 26px;
  letter-spacing: 0.2px;
  margin: 7px 0 10px;
  font-weight: 650;
  color: var(--ink);
}
.page-head p {
  font-size: 12px;
  color: #819198;
  line-height: 1.7;
  margin: 0;
}
.page-head .eyebrow {
  font-size: 9px;
  color: #768d94;
}
.head-actions,
.actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 7px;
  min-height: 37px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
}
.btn:hover {
  border-color: #90b8b0;
  background: #fafdfc;
}
.btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 3px 7px #117d7214;
}
.btn.primary:hover {
  background: #0b6e64;
}
.btn.danger {
  color: #b64b4b;
  border-color: #eecaca;
  background: #fff9f9;
}
.btn.text {
  border-color: transparent;
  background: transparent;
  color: var(--teal);
  padding: 6px 8px;
  min-height: 32px;
}
.btn.small {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 11px;
}
.btn svg {
  width: 15px;
  height: 15px;
}
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(115deg, #163b43, #214d51);
  color: white;
  border-radius: 12px;
  padding: 28px 30px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  min-height: 148px;
}
.hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid #91dfd119;
  border-radius: 50%;
  right: 205px;
  top: -95px;
  box-shadow:
    0 0 0 30px #91dfd108,
    0 0 0 60px #91dfd105;
  pointer-events: none;
}
.hero h2 {
  font-size: 20px;
  font-weight: 550;
  letter-spacing: 0.5px;
  margin: 8px 0 12px;
}
.hero p {
  font-size: 12px;
  color: #b0c8ca;
  line-height: 1.9;
  margin: 0;
  max-width: 520px;
}
.hero .eyebrow {
  color: #83c5bb;
  font-size: 9px;
  letter-spacing: 2px;
}
.hero-status {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 175px;
  z-index: 1;
}
.hero-number {
  font-size: 38px;
  letter-spacing: -1.5px;
  font-weight: 550;
  color: #adf1dc;
}
.hero-status p {
  font-size: 11px;
}
.hero-status .divider {
  height: 45px;
  width: 1px;
  background: #ffffff22;
  margin: 0 8px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
  margin-bottom: 23px;
}
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 21px 21px 17px;
  box-shadow: var(--shadow);
}
.stat-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #75878d;
}
.stat-icon {
  background: #f0f6f4;
  border-radius: 8px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #648b80;
}
.stat-icon svg {
  height: 16px;
  width: 16px;
}
.stat-number {
  font-size: 31px;
  letter-spacing: -0.6px;
  font-weight: 600;
  margin: 12px 0 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-bottom {
  font-size: 10px;
  color: #98a5aa;
  display: flex;
  gap: 6px;
}
.stat-bottom b {
  color: #4e8b79;
  font-weight: 500;
}
.grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr);
  gap: 22px;
  align-items: start;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
  min-width: 0;
  overflow: hidden;
}
.panel + .panel {
  margin-top: 22px;
}
.panel-head {
  padding: 20px 23px 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f3f4;
  gap: 12px;
}
.panel-title {
  font-size: 14px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-title .count {
  font-size: 10px;
  padding: 2px 7px;
  background: #f1f5f4;
  border-radius: 5px;
  color: #82978e;
  font-weight: 500;
}
.panel-subtitle {
  margin-top: 6px;
  color: #91a0a5;
  font-size: 11px;
}
.panel-body {
  padding: 22px 23px;
}
.empty {
  text-align: center;
  padding: 38px 22px;
  color: #87999f;
}
.empty .empty-icon {
  margin: 0 auto 16px;
  background: #f2f7f6;
  color: #86aca0;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
}
.empty-icon svg {
  width: 24px;
  height: 24px;
}
.empty strong {
  display: block;
  font-size: 14px;
  font-weight: 550;
  color: #5d777d;
  margin: 0 0 8px;
}
.empty p {
  font-size: 12px;
  line-height: 1.9;
  max-width: 380px;
  margin: 0 auto 17px;
}
.table-wrap {
  overflow-x: auto;
  width: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  text-align: left;
}
th {
  font-size: 10px;
  font-weight: 500;
  color: #82969d;
  padding: 12px 22px;
  background: #fafcfc;
  border-bottom: 1px solid #eef2f3;
  white-space: nowrap;
}
td {
  padding: 16px 22px;
  border-bottom: 1px solid #eff3f4;
  line-height: 1.6;
  vertical-align: middle;
}
tr:last-child td {
  border-bottom: 0;
}
td strong {
  font-weight: 550;
  color: #334b54;
}
.table-secondary {
  display: block;
  font-size: 10px;
  color: #97a7ad;
  margin-top: 4px;
}
.row-name {
  display: flex;
  align-items: center;
  gap: 11px;
}
.zone-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eff5f3;
  color: #498173;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
  background: #f1f4f5;
  color: #7f9197;
}
.badge.good {
  background: #eaf7f1;
  color: #32906c;
}
.badge.warning {
  background: #fff5e3;
  color: #ac853a;
}
.badge.error {
  background: #fceeee;
  color: #be6969;
}
.badge.blue {
  background: #eff3fb;
  color: #718bb8;
}
.badge .dot {
  margin: 0;
  width: 4px;
  height: 4px;
  background: currentColor;
}
.panel-foot {
  border-top: 1px solid #f0f3f4;
  padding: 13px 23px;
  font-size: 10px;
  color: #99a7ac;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sdk-mini {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 0;
}
.sdk-mini + .sdk-mini {
  border-top: 1px solid #eef2f2;
}
.platform-icon {
  height: 43px;
  width: 43px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f2f5f5;
  color: #36535d;
}
.platform-icon.android {
  background: #eff6e9;
  color: #719847;
}
.platform-icon svg {
  width: 23px;
  height: 23px;
}
.sdk-mini strong {
  font-size: 12px;
  font-weight: 550;
}
.sdk-mini p {
  font-size: 10px;
  color: #93a2a7;
  margin: 5px 0 0;
}
.sdk-mini .badge {
  margin-left: auto;
}
.progress-steps {
  display: grid;
  gap: 19px;
}
.step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.step-number {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f2f5f6;
  color: #9aaeb5;
  font-size: 10px;
}
.step.done .step-number {
  background: #eaf6f0;
  color: #308a6b;
}
.step strong {
  font-size: 11px;
  font-weight: 550;
  color: #5b747c;
}
.step p {
  font-size: 10px;
  line-height: 1.8;
  color: #99a7ad;
  margin: 5px 0 0;
}
.timeline {
  display: grid;
  gap: 0;
}
.timeline-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  align-items: flex-start;
}
.timeline-mark {
  width: 7px;
  height: 7px;
  border: 2px solid #83b8a7;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.timeline-item strong {
  font-size: 11px;
  font-weight: 500;
  display: block;
  line-height: 1.6;
}
.timeline-item p {
  margin: 5px 0 0;
  font-size: 10px;
  color: #9aabb1;
}
.timeline-item time {
  font-size: 10px;
  white-space: nowrap;
  margin-left: auto;
  color: #96a8ae;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.search {
  position: relative;
  width: 270px;
}
.search svg {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 16px;
  height: 16px;
  color: #94a6ad;
}
.search input {
  padding-left: 37px !important;
}
.field input,
.field textarea,
.field select,
.search input,
select.filter {
  width: 100%;
  border: 1px solid #dfe8e9;
  border-radius: 7px;
  padding: 11px 12px;
  background: #fff;
  color: #314e58;
  font-size: 12px;
  min-width: 0;
  transition:
    border 0.15s,
    box-shadow 0.15s;
}
.field textarea {
  min-height: 106px;
  resize: vertical;
  line-height: 1.8;
}
.field label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: #49616a;
  margin: 0 0 9px;
}
.field label .optional {
  color: #a4b0b5;
  font-size: 10px;
  font-weight: 400;
  margin-left: 5px;
}
.field .hint {
  font-size: 10px;
  line-height: 1.8;
  color: #91a2a8;
  margin: 7px 0 0;
}
.field {
  min-width: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px;
}
.form-grid .full {
  grid-column: 1/-1;
}
.form-stack {
  display: grid;
  gap: 20px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #acb9be;
  font-size: 11px;
}
.switch-label {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: 12px;
  color: #556e76;
}
.switch-label input {
  appearance: none;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  background: #d8e0e3;
  border: 0;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  margin: 0;
  transition: background 0.2s;
}
.switch-label input::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px #0001;
}
.switch-label input:checked {
  background: var(--teal);
}
.switch-label input:checked::after {
  transform: translateX(14px);
}
.switch-label input:focus-visible {
  outline: 3px solid #84c7b9;
  outline-offset: 3px;
}
.notice {
  display: flex;
  gap: 10px;
  border: 1px solid #deece7;
  border-radius: 7px;
  background: #f2f8f5;
  padding: 13px 15px;
  font-size: 11px;
  color: #6b8d81;
  line-height: 1.8;
  margin-bottom: 20px;
}
.notice svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}
.notice.warning {
  background: #fffbf2;
  border-color: #f1e8d3;
  color: #9c864e;
}
.notice.error {
  background: #fff3f3;
  border-color: #efd7d7;
  color: #b66565;
}
.platform-tabs {
  display: flex;
  padding: 5px;
  border-radius: 10px;
  background: #eaf0f1;
  gap: 5px;
  max-width: 390px;
  margin-bottom: 24px;
}
.platform-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #90a0a6;
  font-size: 12px;
}
.platform-tab.active {
  background: #fff;
  color: #234f57;
  box-shadow: 0 2px 5px #213d4210;
}
.platform-tab svg {
  width: 18px;
  height: 18px;
}
.sdk-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr);
  gap: 24px;
  align-items: start;
}
.section-label {
  font-size: 10px;
  font-weight: 550;
  color: #9baab0;
  letter-spacing: 0.4px;
  margin: 25px 0 19px;
  padding-top: 20px;
  border-top: 1px solid #eef2f2;
}
.section-label:first-child {
  border: 0;
  margin-top: 0;
  padding-top: 0;
}
.save-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 18px 23px;
  border-top: 1px solid #eef2f2;
  background: #fbfcfc;
}
.save-bar p {
  font-size: 10px;
  color: #9aabb2;
  margin: 0;
}
.preview-wrap {
  padding: 27px 23px;
  background: linear-gradient(150deg, #f0f5f4, #e9f1ef);
}
.preview-label {
  font-size: 10px;
  letter-spacing: 1.7px;
  color: #8aa39b;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
}
.phone {
  width: 230px;
  margin: auto;
  border: 6px solid #24464c;
  border-radius: 30px;
  background: #f4f8f7;
  box-shadow: 0 13px 25px #25433f14;
  overflow: hidden;
  min-height: 410px;
  position: relative;
}
.phone-notch {
  width: 76px;
  height: 15px;
  border-radius: 0 0 10px 10px;
  background: #24464c;
  margin: auto;
}
.phone-body {
  padding: 25px 17px;
}
.phone-logo {
  width: 38px;
  height: 38px;
  margin: 0 auto 13px;
  background: #174c4d;
  color: #a9eddb;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 21px;
}
.phone h3 {
  font-size: 15px;
  text-align: center;
  margin: 0 0 8px;
  font-weight: 600;
  word-break: break-word;
}
.phone p {
  font-size: 8px;
  color: #9baca9;
  text-align: center;
  line-height: 1.8;
}
.mock-field {
  height: 32px;
  border: 1px solid #dde8e4;
  background: #fff;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 8px;
  padding: 10px;
  color: #a7b8b1;
}
.mock-btn {
  background: #168171;
  color: #fff;
  border-radius: 5px;
  height: 32px;
  font-size: 9px;
  display: grid;
  place-items: center;
  margin-top: 14px;
}
.mock-links {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: #97b1a7;
  margin: 12px 0 22px;
}
.phone .mock-notice {
  padding: 10px;
  border-radius: 5px;
  background: #eaf2ef;
  color: #749589;
  text-align: left;
  min-height: 42px;
  overflow-wrap: anywhere;
}
.preview-foot {
  font-size: 10px;
  line-height: 1.8;
  color: #8da29a;
  text-align: center;
  margin: 23px auto 0;
  max-width: 240px;
}
.text-danger {
  color: #bd6a6a;
}
.detail-list {
  display: grid;
  gap: 15px;
}
.detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
}
.detail-row dt {
  color: #98a8ad;
}
.detail-row dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.role-card {
  padding: 22px;
}
.role-card h3 {
  font-size: 18px;
  margin: 14px 0 6px;
}
.role-card .actions {
  border-top: 1px solid #edf2f2;
  padding-top: 17px;
  margin-top: 20px;
}
.contract-list {
  display: grid;
  gap: 12px;
}
.contract-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 17px;
  border: 1px solid #e9eeef;
  border-radius: 8px;
}
.contract-item code {
  font-size: 11px;
  display: block;
  margin: 6px 0;
  color: #68858c;
  overflow-wrap: anywhere;
}
.contract-item strong {
  font-size: 12px;
}
.contract-item .badge {
  margin-left: auto;
}
.contract-item svg {
  color: #8ca69e;
  width: 20px;
  height: 20px;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
}
.login-art {
  background:
    radial-gradient(ellipse at 10% 90%, #225b5b 0, transparent 50%), #112f38;
  color: #fff;
  padding: 45px 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-art .brand {
  padding: 0;
}
.login-art::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border: 1px solid #8bd1bb17;
  border-radius: 50%;
  left: 20%;
  top: 30%;
  box-shadow:
    0 0 0 55px #aee6d606,
    0 0 0 110px #aee6d604;
  pointer-events: none;
}
.login-art-content {
  position: relative;
  z-index: 1;
  margin: 40px 0 75px;
  max-width: 470px;
}
.login-art-content h1 {
  font-size: 42px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 18px 0 24px;
}
.login-art-content h1 span {
  color: #91ddc8;
}
.login-art-content p {
  font-size: 13px;
  line-height: 2.2;
  color: #91b5bc;
  max-width: 320px;
}
.login-art-footer {
  font-size: 10px;
  color: #638c97;
  letter-spacing: 1px;
}
.login-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}
.login-form {
  width: 100%;
  max-width: 340px;
}
.login-form h2 {
  font-size: 25px;
  font-weight: 600;
  color: #24434c;
  margin: 15px 0 13px;
}
.login-form > p {
  font-size: 12px;
  color: #92a5ac;
  line-height: 1.9;
  margin: 0 0 33px;
}
.login-form .field {
  margin-bottom: 20px;
}
.login-form .field input {
  padding: 13px 14px;
}
.login-form .btn {
  width: 100%;
  min-height: 43px;
  margin-top: 8px;
}
.login-help {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 25px;
  font-size: 10px;
  color: #a2b2b8;
}
.form-error {
  font-size: 12px;
  color: #b65c5c;
  line-height: 1.8;
  margin: 10px 0;
  min-height: 20px;
}
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 15px);
  opacity: 0;
  z-index: 100;
  background: #24473f;
  color: #fff;
  box-shadow: 0 7px 30px #16362e25;
  border-radius: 9px;
  padding: 13px 21px;
  font-size: 12px;
  max-width: min(90vw, 520px);
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  line-height: 1.7;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast.error {
  background: #8f4d4d;
}
dialog {
  border: 1px solid #dce7e5;
  border-radius: 13px;
  width: min(580px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
  max-height: 88vh;
  box-shadow: 0 24px 70px #0b302d30;
}
dialog::backdrop {
  background: #102e3b55;
  backdrop-filter: blur(3px);
}
.dialog-head {
  padding: 21px 24px;
  border-bottom: 1px solid #eef2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.dialog-body {
  padding: 23px 24px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 17px 24px;
  background: #f9fbfb;
  border-top: 1px solid #edf2f2;
}
.page-error {
  padding: 25px;
  border: 1px solid #eedddd;
  border-radius: 10px;
  background: #fffaf9;
  color: #ad6960;
  font-size: 13px;
  line-height: 1.8;
}
.loading {
  padding: 55px;
  text-align: center;
  color: #9aadb2;
  font-size: 12px;
}
.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid #bdcfc9;
  border-top-color: #267f71;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 9px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.mobile-bottom,
.nav-scrim {
  display: none;
}
.inline-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.inline-form .field {
  flex: 1;
}
.inline-form .btn {
  min-height: 40px;
}
.muted-line {
  font-size: 11px;
  line-height: 1.9;
  color: #95a5ab;
}
.code-block {
  background: #f4f7f7;
  border: 1px solid #e7eded;
  color: #57777c;
  padding: 15px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}
.copyline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.copyline code {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  font-size: 11px;
  color: #719189;
}
.banner-note {
  font-size: 11px;
  line-height: 1.9;
  color: #8ba29e;
  background: #f0f6f4;
  border-radius: 7px;
  padding: 15px;
  margin-top: 22px;
}
.cards-list {
  display: grid;
  gap: 15px;
}
.announcement-card {
  padding: 23px;
}
.announcement-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.announcement-card .card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.announcement-card .message-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  color: #758e95;
  line-height: 1.9;
  margin: 17px 0;
}
.announcement-card .card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #edf2f2;
  padding-top: 14px;
  margin-top: 16px;
  font-size: 10px;
  color: #95a7ad;
  gap: 10px;
}
.scroll-cell {
  max-width: 240px;
  word-break: break-word;
}
.filter {
  width: auto !important;
  min-width: 135px !important;
}
.table-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.empty-inline {
  font-size: 11px;
  color: #9aabb2;
  padding: 13px 0;
  line-height: 1.9;
}
.mobile-brand {
  display: none;
}
@media (min-width: 1600px) {
  .content {
    padding-top: 40px;
  }
  .hero {
    padding: 35px;
    min-height: 165px;
  }
  .stat {
    padding: 25px;
  }
  .stat-number {
    font-size: 36px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 200px;
    padding-inline: 12px;
  }
  .workspace {
    margin-left: 200px;
  }
  .content {
    padding: 26px;
  }
  .topbar {
    padding: 0 26px;
  }
  .grid-main {
    grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
    gap: 17px;
  }
  .stat-grid {
    gap: 12px;
  }
  .stat {
    padding: 17px;
  }
  .hero {
    padding: 24px;
  }
  .hero-status {
    min-width: 145px;
  }
  .hero h2 {
    font-size: 18px;
  }
  .sdk-editor {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
  }
  th,
  td {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 1000px) {
  .sidebar {
    width: 186px;
  }
  .workspace {
    margin-left: 186px;
  }
  .brand {
    padding: 0 7px;
    gap: 10px;
  }
  .brand strong {
    font-size: 17px;
  }
  .brand small {
    font-size: 8px;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-main {
    grid-template-columns: 1fr;
  }
  .grid-main > .side-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
  }
  .side-stack > .panel + .panel {
    margin: 0;
  }
  .hero-status {
    display: none;
  }
  .sdk-editor {
    grid-template-columns: 1fr;
  }
  .preview-panel {
    display: none;
  }
  .topbar {
    height: 68px;
  }
  .top-actions {
    gap: 10px;
  }
  .env-tag {
    display: none;
  }
  .login-art {
    padding: 35px;
  }
  .login-art-content h1 {
    font-size: 34px;
  }
  .login-area {
    padding: 35px;
  }
  .role-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .sidebar {
    width: 247px;
    transform: translateX(-100%);
    transition: transform 0.2s;
    padding: 28px 18px;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar.open + .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: #102f4355;
    z-index: 24;
    border: 0;
  }
  .workspace {
    margin-left: 0;
  }
  .topbar {
    height: 63px;
    padding: 0 18px;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .breadcrumbs {
    gap: 8px;
    font-size: 11px;
  }
  .breadcrumbs > .crumb-home,
  .breadcrumbs > .crumb-divider {
    display: none;
  }
  .content {
    padding: 23px 18px 90px;
  }
  .user-info > span {
    display: none;
  }
  .top-actions {
    gap: 4px;
  }
  .page-head {
    align-items: flex-start;
    margin-bottom: 22px;
    gap: 10px;
  }
  .page-head h1 {
    font-size: 23px;
    margin-top: 8px;
  }
  .page-head p {
    font-size: 11px;
    max-width: 265px;
  }
  .page-head .head-actions {
    padding-top: 16px;
  }
  .head-actions .btn {
    padding: 8px 10px;
    font-size: 11px;
  }
  .head-actions .desktop-label {
    display: none;
  }
  .hero {
    padding: 24px 22px;
    border-radius: 10px;
    min-height: 150px;
    margin-bottom: 17px;
  }
  .hero h2 {
    font-size: 18px;
    margin-top: 11px;
  }
  .hero p {
    font-size: 11px;
    max-width: 270px;
  }
  .hero::after {
    right: -100px;
  }
  .stat-grid {
    gap: 11px;
    margin-bottom: 18px;
  }
  .stat {
    padding: 16px 15px;
    border-radius: 9px;
  }
  .stat-label {
    font-size: 10px;
  }
  .stat-icon {
    width: 26px;
    height: 26px;
  }
  .stat-icon svg {
    width: 14px;
    height: 14px;
  }
  .stat-number {
    font-size: 27px;
    margin: 10px 0;
  }
  .stat-bottom {
    font-size: 9px;
    display: block;
    line-height: 1.8;
  }
  .stat-bottom b {
    margin-right: 5px;
  }
  .grid-main {
    gap: 18px;
  }
  .grid-main > .side-stack {
    display: block;
  }
  .side-stack > .panel + .panel {
    margin-top: 18px;
  }
  .panel + .panel {
    margin-top: 18px;
  }
  .panel-head {
    padding: 17px 18px;
  }
  .panel-body {
    padding: 19px 18px;
  }
  .panel-title {
    font-size: 13px;
  }
  .panel-subtitle {
    font-size: 10px;
  }
  .panel-foot {
    padding: 12px 18px;
    font-size: 9px;
  }
  .panel-foot > .desktop-label {
    display: none;
  }
  .empty {
    padding: 29px 18px;
  }
  .empty p {
    font-size: 11px;
  }
  .empty strong {
    font-size: 13px;
  }
  .mobile-bottom {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffffee;
    backdrop-filter: blur(12px);
    border-top: 1px solid #e5edeb;
    z-index: 23;
    padding: 8px 15px calc(8px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .mobile-bottom a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    color: #96aaa9;
    padding: 3px 15px;
  }
  .mobile-bottom a svg {
    height: 20px;
    width: 20px;
  }
  .mobile-bottom a.active {
    color: #167e70;
  }
  .toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .search {
    flex: 1;
    min-width: 150px;
    width: auto;
  }
  .filter {
    min-width: 110px !important;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .form-grid .full {
    grid-column: auto;
  }
  .sdk-editor {
    gap: 18px;
  }
  .platform-tabs {
    max-width: none;
    margin-bottom: 19px;
  }
  .platform-tab {
    padding: 11px;
  }
  .save-bar {
    padding: 16px 18px;
  }
  .save-bar p {
    font-size: 9px;
    max-width: 160px;
    line-height: 1.8;
  }
  .save-bar .btn {
    min-width: 90px;
  }
  .form-stack {
    gap: 18px;
  }
  .notice {
    font-size: 10px;
    padding: 12px;
  }
  .section-label {
    margin: 21px 0 17px;
  }
  .inline-form {
    flex-wrap: wrap;
  }
  .inline-form .field {
    flex-basis: calc(50% - 12px);
  }
  .inline-form .btn {
    width: 100%;
  }
  .table-wrap.responsive table,
  .table-wrap.responsive tbody,
  .table-wrap.responsive tr,
  .table-wrap.responsive td {
    display: block;
  }
  .table-wrap.responsive thead {
    display: none;
  }
  .table-wrap.responsive tr {
    padding: 10px 18px;
    border-bottom: 1px solid #edf2f2;
  }
  .table-wrap.responsive tr:last-child {
    border: 0;
  }
  .table-wrap.responsive td {
    padding: 6px 0;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-size: 11px;
    min-height: 28px;
  }
  .table-wrap.responsive td:first-child {
    padding: 8px 0 11px;
  }
  .table-wrap.responsive td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    color: #9aadb2;
    flex-shrink: 0;
  }
  .table-wrap.responsive .table-secondary {
    font-size: 9px;
  }
  .table-wrap.responsive .table-actions {
    margin-left: auto;
  }
  .table-wrap.responsive .scroll-cell {
    max-width: none;
  }
  .table-wrap.responsive .audit-action {
    margin-left: auto;
    text-align: right;
  }
  .role-card h3 {
    font-size: 19px;
  }
  .contract-item {
    padding: 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .contract-item strong {
    font-size: 11px;
  }
  .contract-item code {
    font-size: 10px;
  }
  .contract-item .badge {
    margin-left: 30px;
  }
  .toast {
    bottom: 83px;
    width: max-content;
    font-size: 11px;
  }
  .login-shell {
    display: block;
    background: #fff;
  }
  .login-art {
    padding: 25px 27px;
    min-height: 225px;
    justify-content: flex-start;
  }
  .login-art .brand {
    margin-bottom: 0;
  }
  .login-art-content {
    margin: 22px 0 0;
  }
  .login-art-content h1 {
    font-size: 24px;
    margin: 0 0 8px;
    line-height: 1.6;
  }
  .login-art-content h1 br {
    display: none;
  }
  .login-art-content p {
    font-size: 11px;
    margin: 0;
  }
  .login-art-content .eyebrow,
  .login-art-footer {
    display: none;
  }
  .login-art::after {
    width: 230px;
    height: 230px;
    left: 55%;
    top: 0;
  }
  .login-area {
    padding: 31px 30px 40px;
    align-items: flex-start;
  }
  .login-form {
    max-width: 400px;
  }
  .login-form h2 {
    font-size: 22px;
    margin-top: 8px;
  }
  .login-form > p {
    margin-bottom: 25px;
    font-size: 11px;
  }
  .login-help {
    font-size: 9px;
  }
  dialog {
    width: calc(100vw - 24px);
    max-height: 90dvh;
  }
  .dialog-head {
    padding: 18px;
  }
  .dialog-body {
    padding: 20px 18px;
  }
  .dialog-actions {
    padding: 16px 18px;
    position: sticky;
    bottom: 0;
  }
  .dialog-head h2 {
    font-size: 17px;
  }
  .announcement-card {
    padding: 18px;
  }
  .announcement-card .card-top {
    align-items: flex-start;
  }
  .announcement-card h3 {
    font-size: 14px;
  }
  .announcement-card .card-bottom {
    flex-wrap: wrap;
  }
  .announcement-card .message-content {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.flush-y {
  padding-top: 0;
  padding-bottom: 0;
}
.space-top {
  margin-top: 22px;
}
.space-top-small {
  margin-top: 16px;
}
.message-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.9;
  color: #758e95;
}

@media(max-width:700px){.sidebar{visibility:hidden}.sidebar.open{visibility:visible}.field input,.field select,.field textarea,.search input{font-size:16px}}

[hidden] { display: none !important; }
.access-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.access-card { display: flex; gap: 13px; align-items: flex-start; padding: 21px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.access-card > svg { color: var(--teal); flex-shrink: 0; margin-top: 3px; }
.access-card strong { font-size: 13px; font-weight: 600; }
.access-card p { color: var(--muted); font-size: 11px; margin: 7px 0 0; line-height: 1.7; }
.scope-text { font-size: 12px; color: #6d858c; }
.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.permission-option { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 10px; background: #f5f8f8; border-radius: 6px; cursor: pointer; }
.permission-option input { accent-color: var(--teal); width: 16px; height: 16px; }
.access-shortcuts { display: flex; flex-wrap: wrap; gap: 12px; }
.release-summary { display: flex; justify-content: space-between; gap: 24px; background: #153b40; color: #fff; border-radius: 12px; padding: 25px 27px; margin-bottom: 20px; }
.release-summary > div:first-child { display: flex; align-items: center; gap: 18px; min-width: 0; }
.release-summary .eyebrow { display: block; color: #8cc6bb; font-size: 9px; }
.release-summary strong { display: block; font-size: 21px; font-weight: 550; margin-top: 10px; overflow-wrap: anywhere; }
.release-summary p { color: #a0bebf; font-size: 11px; line-height: 1.9; margin: 8px 0 0; overflow-wrap: anywhere; }
.release-status { width: 12px; height: 12px; border-radius: 50%; background: #779d9b; box-shadow: 0 0 0 6px #ffffff0a; flex-shrink: 0; }
.release-status.live { background: #8de6c2; }
.release-draft { flex-shrink: 0; border-left: 1px solid #ffffff20; padding-left: 25px; font-size: 11px; min-width: 120px; color: #a0bebf; }
.release-draft strong { font-size: 26px; margin: 7px 0; color: #fff; }
.release-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 23px; align-items: start; }
.config-detail { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.config-detail summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; }
.config-detail summary span:first-child { display: flex; gap: 8px; align-items: center; }
.config-detail summary::after { content: '+'; color: #8ca7a1; font-size: 18px; font-weight: 400; }
.config-detail[open] summary::after { content: '−'; }
.config-detail summary .count,.config-detail summary .badge { margin-left: auto; }
.config-detail > .field { margin-top: 18px; }
.config-detail .json-editor { min-height: 230px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.7; background: #f8fafb; tab-size: 2; white-space: pre; overflow-x: auto; }
.release-actions { display: grid; gap: 10px; margin-top: 24px; }
.release-actions .btn { justify-content: center; }
.validation-result { margin-top: 20px; border-radius: 7px; padding: 14px; background: #fff4ee; color: #a65a41; font-size: 11px; overflow-wrap: anywhere; }
.validation-result.valid { background: #edf7f3; color: #387a68; }
.validation-result strong { font-size: 12px; }
.validation-result p { line-height: 1.8; }
.validation-result ul { padding-left: 17px; line-height: 1.8; }
.validation-file { border-top: 1px solid #8ec0b330; padding: 11px 0 0; margin-top: 11px; display: grid; gap: 5px; font-size: 10px; }
.validation-file code { font-size: 9px; color: #83a297; }
.release-history { display: grid; gap: 18px; }
.release-history article { border-bottom: 1px solid var(--line); padding-bottom: 16px; min-width: 0; }
.release-history article:last-child { border: 0; padding-bottom: 0; }
.release-history article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.release-history time { color: var(--muted); font-size: 10px; }
.release-history strong { display: block; overflow-wrap: anywhere; font-size: 11px; font-weight: 500; margin-top: 12px; }
.release-history p { color: #7c9297; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.release-history .btn { margin-left: 6px; }
@media (max-width: 1150px) { .release-layout { grid-template-columns: minmax(0, 1fr); } .release-layout > .side-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .release-layout > .side-stack > .panel { margin: 0; } }
@media (max-width: 700px) {
  .access-cards { grid-template-columns: 1fr; gap: 9px; margin-bottom: 18px; }
  .access-card { padding: 15px 17px; gap: 12px; }
  .access-card p { margin-top: 3px; }
  .permission-grid { grid-template-columns: 1fr; }
  .permission-option { padding: 12px; }
  .release-summary { padding: 20px 18px; gap: 12px; align-items: flex-start; }
  .release-summary strong { font-size: 17px; }
  .release-summary > div:first-child { gap: 12px; align-items: flex-start; }
  .release-status { width: 8px; height: 8px; margin-top: 4px; }
  .release-draft { padding-left: 12px; min-width: 68px; font-size: 9px; }
  .release-draft strong { font-size: 23px; }
  .release-layout { gap: 18px; }
  .release-layout > .side-stack { display: block; }
  .release-layout > .side-stack > .panel + .panel { margin-top: 18px; }
  .config-detail .json-editor { font-size: 16px; min-height: 230px; }
  .release-summary .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .mobile-bottom a { padding-inline: 10px; }
}
.sidebar { overflow-y: auto; overscroll-behavior: contain; }
.sidebar > * { flex-shrink: 0; }
.field input[readonly], .field textarea[readonly] { background: #f2f5f5; color: #7a9295; }
.groups-panel { margin-bottom: 24px; }
.group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.group-card { border: 1px solid var(--line); border-radius: 10px; padding: 17px; min-width: 0; }
.group-card > div { display: flex; align-items: center; gap: 11px; }
.group-card > div > div { min-width: 0; flex: 1; }
.group-card strong { font-size: 13px; overflow-wrap: anywhere; }
.group-card p { color: var(--muted); font-size: 10px; margin: 6px 0 0; }
.group-card .btn { padding: 5px; }
.group-card footer { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); }
.sync-states { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.sync-states > div { padding: 15px 17px; min-width: 0; }
.sync-states > div + div { border-left: 1px solid var(--line); }
.sync-states > div > span:first-child { font-size: 12px; font-weight: 600; margin-right: 12px; }
.sync-states p,.sync-states small { font-size: 11px; line-height: 1.8; color: #80969b; overflow-wrap: anywhere; margin: 10px 0 0; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 23px; align-items: start; }
.secret-note { display: flex; gap: 9px; align-items: flex-start; font-size: 11px; line-height: 1.8; color: #66817c; padding: 13px; border-radius: 7px; background: #edf7f3; }
.secret-note svg { margin-top: 2px; }
.provider-summary { display: grid; gap: 15px; }
.provider-summary .badge { justify-self: start; }
.provider-summary strong { font-size: 16px; font-weight: 550; }
.provider-summary p { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 0; }
.update-hero { padding: 28px; background: linear-gradient(115deg,#163c42,#23534e); border-radius: 12px; color: #f1fffa; display: flex; gap: 30px; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.update-hero > div { min-width: 0; }
.update-hero .eyebrow { color: #8bbeb3; }
.update-hero h2 { font-size: 23px; font-weight: 550; margin: 13px 0 10px; }
.update-hero p { font-size: 12px; line-height: 1.9; color: #b0ceca; max-width: 570px; margin: 0; }
.update-hero .btn { flex-shrink: 0; background: #92e5ca; color: #173f36; border-color: #92e5ca; }
.update-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 10px; background: var(--line); margin-bottom: 23px; overflow: hidden; }
.update-metrics > div { background: white; padding: 20px 22px; min-width: 0; }
.update-metrics span { color: var(--muted); font-size: 11px; }
.update-metrics strong { display: block; font-size: 20px; font-weight: 550; margin: 10px 0 5px; overflow-wrap: anywhere; }
.update-metrics small { color: #8ba0a4; font-size: 10px; line-height: 1.7; }
.job-progress { margin-bottom: 23px; padding: 21px 24px; border: 1px solid #cce8dc; border-radius: 10px; background: #f1f9f5; }
.job-progress.failed { border-color: #eed5cc; background: #fff5ef; }
.job-progress header { display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 13px; }
.job-progress p { font-size: 12px; line-height: 1.8; color: #7b9294; overflow-wrap: anywhere; }
.job-track { margin-top: 15px; height: 5px; border-radius: 8px; background: #d9eae3; overflow: hidden; }
.job-track span { height: 100%; display: block; background: #208a6e; transition: width .4s ease; }
.resource-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 450px; }
.resource-list { border-right: 1px solid var(--line); padding: 12px; max-height: 650px; overflow-y: auto; }
.resource-file { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 13px 11px; }
.resource-file:hover { background: #f2f7f5; }
.resource-file.active { background: #e9f5ef; color: #26705b; }
.resource-file > svg { margin-top: 1px; width: 16px; height: 16px; }
.resource-file span { min-width: 0; overflow-wrap: anywhere; font-size: 11px; line-height: 1.6; }
.resource-file small { display: block; font-size: 9px; margin-top: 5px; color: #8aa099; }
.resource-body { padding: 22px; min-width: 0; }
.resource-body .empty { min-height: 320px; }
.resource-body .field > label { overflow-wrap: anywhere; }
.resource-body textarea { width: 100%; min-height: 350px; font: 12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; resize: vertical; background: #f8fafb; white-space: pre; tab-size: 2; }
.resource-file-meta { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 17px; font-size: 10px; color: var(--muted); }
.resource-help { display: flex; gap: 12px; margin-top: 20px; font-size: 11px; color: #8aa0a6; line-height: 1.9; }
.resource-help svg { color: #6c9b8d; flex-shrink: 0; margin-top: 2px; }
.resource-toolbar { display: flex; gap: 14px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.resource-toolbar > label { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.resource-toolbar select { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; color: var(--ink); background: #f8fafb; font-size: 12px; }
.resource-toolbar > div { flex-shrink: 0; }
.provider-template { min-height: 230px; font: 12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; background: #f8fafb; }
@media(max-width:1150px) { .group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .settings-layout { grid-template-columns: minmax(0,1fr); } .settings-layout > .side-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .settings-layout > .side-stack > .panel { margin: 0; } }
@media(max-width:700px) {
 .group-grid,.sync-states,.settings-layout > .side-stack { grid-template-columns: minmax(0,1fr); }
 .sync-states > div + div { border-left: 0; border-top: 1px solid var(--line); }
 .group-card { padding: 15px; }
 .update-hero { padding: 22px 20px; display: block; }
 .update-hero h2 { font-size: 22px; }
 .update-hero .btn { margin-top: 20px; width: 100%; justify-content: center; }
 .update-metrics { gap: 0; }
 .update-metrics > div { padding: 15px 12px; }
 .update-metrics > div + div { border-left: 1px solid var(--line); }
 .update-metrics strong { font-size: 16px; }
 .update-metrics small { font-size: 9px; }
 .job-progress { padding: 17px; }
 .job-progress header { flex-wrap: wrap; }
 .resource-layout { grid-template-columns: minmax(0,1fr); }
 .resource-list { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
 .resource-file { padding: 11px; }
 .resource-body { padding: 18px; }
 .resource-body textarea { font-size: 16px; min-height: 350px; }
 .resource-file-meta { flex-wrap: wrap; }
 .resource-body .save-bar { padding: 15px 0 0; gap: 15px; }
 .group-card .btn { font-size: 12px; min-height: 36px; }
 .resource-toolbar { padding: 15px 18px; flex-wrap: wrap; gap: 10px; }
 .resource-toolbar > label { width: 100%; }
 .resource-toolbar select { width: 100%; flex-basis: 100%; font-size: 16px; }
 .provider-template { font-size: 16px; }
}

.resource-search { display:flex; gap:14px; align-items:center; padding:12px 22px; border-bottom:1px solid var(--line); }
.resource-search label { flex-shrink:0; font-size:11px; color:var(--muted); }
.resource-search input { flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-size:13px; background:#f8fafb; color:var(--ink); }
@media(max-width:700px) { .resource-search {padding:12px 18px;flex-wrap:wrap} .resource-search label{width:100%} .resource-search input{font-size:16px;width:100%} }

.captcha-row{display:flex;gap:12px;align-items:stretch}.captcha-row input{flex:1;min-width:0}.captcha-refresh{width:142px;min-width:142px;border:1px solid var(--line);border-radius:7px;background:#f1f6f3;overflow:hidden;padding:0;cursor:pointer}.captcha-refresh img{display:block;width:100%;height:48px;object-fit:contain}.login-captcha small{font-size:11px;color:var(--muted);line-height:1.6}.security-intro{display:flex;gap:20px;margin-bottom:26px}.security-intro>svg{width:42px;height:42px;flex-shrink:0;color:#368575;background:#eef7f2;border-radius:12px;padding:9px}.security-intro h2{font-size:19px;margin:0 0 10px}.security-intro p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.security-summary{display:flex;align-items:center;gap:20px;padding:20px;border:1px solid var(--line);border-radius:10px;margin-bottom:26px;font-size:12px}.security-summary strong{font-size:28px;color:var(--green)}.security-summary small{color:var(--muted)}.security-steps p{display:flex;gap:12px;align-items:center;font-size:12px;margin:0 0 22px}.security-steps span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#edf7f1;color:#4e8f7f;font-size:10px}.setup-key{display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:22px;background:#f1f7f4;border-radius:10px;border:1px solid #d9e9e0}.setup-key span{font-size:12px;color:var(--muted)}.setup-key strong{font-size:14px}.setup-key code{font-size:16px;letter-spacing:2px;overflow-wrap:anywhere;line-height:1.8;user-select:all}.recovery-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}.recovery-code-grid code{padding:12px;text-align:center;border:1px solid var(--line);border-radius:6px;font-size:14px;background:#f6f9f7;user-select:all}.security-intro+.form-stack{max-width:540px}@media(max-width:700px){.captcha-row input{font-size:16px}.captcha-refresh{width:130px;min-width:130px}.security-summary{flex-wrap:wrap}.recovery-code-grid code{font-size:12px}.setup-key{padding:16px}.security-intro{gap:12px}.security-intro h2{font-size:17px}}

.settings-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:22px;align-items:start}.grow{flex:1;min-width:0}.mail-lookup,.mail-item-picker,.mail-item-search{display:flex;gap:10px;align-items:flex-end}.mail-item-search input{flex:1;min-width:0;border:1px solid var(--line);padding:11px 13px;border-radius:7px;background:#f9fbfc;color:var(--ink)}.mail-item-picker{margin-top:12px}.mail-lookup>.field:first-child{width:145px}.selection-results{max-height:180px;overflow:auto;margin:12px 0}.recipient-result{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;border:1px solid var(--line);background:#fafcfb;padding:11px 13px;border-radius:6px;margin-bottom:6px;color:var(--ink);font-size:12px}.recipient-result small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.selected-chips{display:flex;flex-wrap:wrap;gap:7px}.selected-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #cde5da;border-radius:6px;background:#edf7f1;color:#286a57;font-size:11px}.selected-chip svg{width:13px;height:13px}.selected-chip small{color:var(--muted)}.manual-recipients{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.manual-recipients summary{cursor:pointer;font-size:11px;color:var(--muted);margin-bottom:12px}.mail-attachment{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.attachment-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#edf5ef;color:#4b8873}.mail-attachment strong{font-size:12px}.mail-attachment small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.mail-attachment label{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}.mail-attachment input{width:85px;border:1px solid var(--line);border-radius:5px;padding:8px;background:#f9fbfc;color:var(--ink)}.mail-preview{padding:18px;border:1px solid var(--line);background:#f7faf8;border-radius:9px}.mail-preview strong,.mail-preview small{display:block;line-height:1.8;font-size:12px}.mail-preview small{font-size:10px;color:var(--muted)}#mail-preview-result:not(:empty){padding-top:14px}#mail-confirm-all{margin-top:12px}@media(max-width:800px){.settings-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mail-lookup{flex-wrap:wrap}.mail-lookup>.field:first-child{width:100%}.mail-lookup>.grow{flex-basis:calc(100% - 85px)}.mail-item-search input,.mail-attachment input{font-size:16px}.mail-item-picker{flex-wrap:wrap}.mail-item-picker>.grow{flex-basis:100%}.mail-attachment{gap:8px}.mail-attachment label{flex-direction:column;align-items:flex-start;gap:5px}.mail-attachment input{width:72px}.mail-attachment .attachment-icon{display:none}.mail-preview{padding:13px}}

.order-filters{grid-template-columns:repeat(4,minmax(0,1fr))}.order-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:20px}.order-metrics>div{padding:22px;border-right:1px solid var(--line)}.order-metrics>div:last-child{border:0}.order-metrics span,.order-metrics small{display:block;font-size:11px;color:var(--muted);line-height:1.8}.order-metrics strong{display:block;font-size:25px;letter-spacing:-.5px;margin:9px 0}.order-metrics small{font-size:10px}.orders-table td{max-width:260px;overflow-wrap:anywhere}.payment-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:22px}.payment-channel{border:1px solid var(--line);border-radius:10px;padding:20px;background:linear-gradient(130deg,#fff,#f6faf8)}.payment-channel header{display:flex;align-items:center;gap:11px}.payment-channel h3{font-size:15px;margin:0 0 7px}.payment-channel small{font-size:10px;color:var(--muted)}.payment-channel .detail-list{margin:18px 0 0}.payment-channel footer{border-top:1px solid var(--line);padding-top:12px;text-align:right}.payment-channel header>.badge{max-width:90px}@media(max-width:1200px){.order-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-channel-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.order-filters{grid-template-columns:minmax(0,1fr)}.order-metrics{grid-template-columns:minmax(0,1fr)}.order-metrics>div{border-right:0;border-bottom:1px solid var(--line);padding:16px 20px}.order-metrics strong{font-size:23px}.payment-channel-grid{padding:16px}.payment-channel{padding:16px}}

/* GM 接口 v1：能力标签、最近操作提示、玩家详情与数据分区浏览、维护与停服 */
.cap-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.badge.muted-badge{background:#f3f5f6;color:#9aa8ad;border-color:#e7ecee}.cap-missing{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#9c864e;background:#fffbf2;border:1px dashed #ecdcb5;border-radius:5px;padding:4px 8px;margin:2px 6px 2px 0}.cap-missing svg{width:13px;height:13px}.cap-note{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px}
.op-banner{margin-bottom:18px;align-items:flex-start}.op-banner p{margin:5px 0 0;overflow-wrap:anywhere;line-height:1.7}.op-banner .actions{flex-shrink:0;align-items:center}
.player-detail{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:20px;align-items:start;margin-top:12px}.player-detail>.panel{margin:0}.player-main{min-width:0;display:grid;gap:20px}.player-main>.panel{margin:0}.player-detail .role-card dd{overflow-wrap:anywhere;text-align:right}
.section-browser{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:420px}.section-list{border-right:1px solid var(--line);padding:12px;max-height:760px;overflow-y:auto}.section-list .search{width:100%;margin-bottom:10px}.section-list .resource-file small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.section-view{padding:18px 22px;min-width:0}.section-view-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px;flex-wrap:wrap}.section-view-head strong{font-size:14px}.section-view-head small{display:block;color:var(--muted);font-size:10px;margin-top:5px}
.gm-table{margin-bottom:16px}.gm-table th,.gm-table td{padding:9px 12px}.gm-table table{width:max-content;min-width:100%}.gm-table th{white-space:nowrap}.gm-table td{max-width:360px;min-width:48px;overflow-wrap:break-word;white-space:pre-wrap;font-size:11px;vertical-align:top}.btn[data-action="player-back"] svg{transform:rotate(180deg)}.gm-table-tools{display:flex;gap:10px;align-items:center;margin-bottom:8px}.gm-table-tools .search{width:240px}.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:8px 0;flex-wrap:wrap}.pager>span:first-child{margin-right:auto}
.kv-list{gap:10px}.kv-list .detail-row dd{overflow-wrap:anywhere;text-align:right;white-space:pre-wrap}.raw-json{margin-top:16px}.raw-json summary{cursor:pointer;font-size:11px;color:var(--muted)}.raw-json pre{max-height:420px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:10px}
.op-mini{display:grid;gap:12px}.op-mini>div{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;font-size:12px;border-bottom:1px solid var(--line);padding-bottom:10px}.op-mini>div:last-child{border:0}.op-mini small{width:100%;color:var(--muted);font-size:10px;overflow-wrap:anywhere}.op-mini .table-actions{width:100%}
.maint-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}.maint-grid>.panel{margin:0}
@media(max-width:1200px){.player-detail{grid-template-columns:minmax(0,1fr)}}@media(max-width:1000px){.maint-grid{grid-template-columns:minmax(0,1fr)}.section-browser{grid-template-columns:minmax(0,1fr)}.section-list{border-right:0;border-bottom:1px solid var(--line);max-height:280px}}
@media(max-width:700px){.gm-table-tools .search{width:100%}.section-view{padding:14px}.op-banner{flex-direction:column}.op-banner .actions{flex-wrap:wrap}}

/* Account-source attribution filters keep labels and actions readable on phones. */
.registration-filters { display:grid;grid-template-columns:minmax(130px,.7fr) minmax(180px,1fr) minmax(220px,1.5fr) auto;gap:14px;align-items:end; }
.registration-filters .field { margin:0; }
@media (min-width:701px) and (max-width:1100px) { .registration-filters { grid-template-columns:1fr 1fr; } }
@media (max-width:700px) { .registration-filters { grid-template-columns:1fr; } .registration-filters button { width:100%; } }