/* ============================================================
   MIHOMO BUILDER — PREVIEW PANEL
   ============================================================ */

.mihomo-preview-card {
  position: sticky;
  top: calc(var(--mihomo-navbar-offset, 132px) - 24px);
  height: calc(100vh - var(--mihomo-navbar-offset, 132px));
  max-height: calc(100vh - var(--mihomo-navbar-offset, 132px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mihomo-preview-card > .card-header {
  flex: 0 0 auto;
}

.mihomo-preview-card > .card-body.mihomo-preview-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.mihomo-code-box {
  --mihomo-line-no-width: 3.25rem;
  --mihomo-line-gap: 1.35rem;
  --mihomo-divider-offset: 0.68rem;

  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  overflow: visible;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  color: #0f172a;
  padding: 0.95rem 1rem 0.95rem 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.34;
  counter-reset: mihomo-line;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 30px rgba(15, 23, 42, 0.04);
}

/* ============================================================
   CODE LINE — TABLE LAYOUT
   ============================================================ */

.mihomo-code-line,
.mihomo-code-line-no,
.mihomo-code-line-text,
.mihomo-code-line-text * {
  box-sizing: border-box;
}

.mihomo-code-line {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0;
  counter-increment: mihomo-line;
  border-collapse: collapse;
}

.mihomo-code-line + .mihomo-code-line {
  margin-top: 0;
}

.mihomo-code-line-no,
.mihomo-code-line-text {
  display: table-cell;
  vertical-align: top;
}

.mihomo-code-line-no {
  position: relative;
  width: var(--mihomo-line-no-width);
  min-width: var(--mihomo-line-no-width);
  max-width: var(--mihomo-line-no-width);
  padding: 0;
  padding-right: var(--mihomo-line-gap);
  text-align: right;
  color: #94a3b8;
  font-size: 0.74rem;
  line-height: 1.34;
  font-weight: 400 !important;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.mihomo-code-line-no::before {
  content: counter(mihomo-line);
  display: block;
  line-height: 1.34;
}

.mihomo-code-line-no::after {
  content: "";
  position: absolute;
  top: 0.08rem;
  bottom: 0.08rem;
  right: calc(var(--mihomo-line-gap) / 2);
  width: 1px;
  background: rgba(148, 163, 184, 0.22);
}

.mihomo-code-line-text {
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.34;
  font-weight: 400;
  color: inherit;
}

.mihomo-code-line-text,
.mihomo-code-line-text * {
  line-height: inherit !important;
}

.mihomo-code-line--section {
  margin-top: 0.42rem;
  margin-bottom: 0.12rem;
}

.mihomo-code-line--section .mihomo-code-line-no {
  color: #64748b;
  font-weight: 400 !important;
}

.mihomo-code-line--section .mihomo-code-line-text {
  font-weight: 700;
  color: #0f172a;
}

/* ============================================================
   YAML GROUP HIGHLIGHT
   ============================================================ */

.mihomo-code-group {
  position: relative;
  margin: 0.16rem 0 0.2rem;
}

.mihomo-code-group-inner {
  position: relative;
  padding: 0.22rem 0.74rem 0.22rem 0;
  border-left: 3px solid transparent;
  border-radius: 12px;
  background-clip: padding-box;
  overflow: visible;
}

.mihomo-code-group-inner .mihomo-code-line {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0;
  border-collapse: collapse;
}

.mihomo-code-group-inner .mihomo-code-line-no,
.mihomo-code-group-inner .mihomo-code-line-text {
  display: table-cell;
  vertical-align: top;
}

.mihomo-code-group-inner .mihomo-code-line-no {
  width: var(--mihomo-line-no-width);
  min-width: var(--mihomo-line-no-width);
  max-width: var(--mihomo-line-no-width);
  padding-right: var(--mihomo-line-gap);
}

.mihomo-code-group-inner .mihomo-code-line-no::after {
  right: calc(var(--mihomo-line-gap) / 2);
}

.mihomo-code-group::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  right: 0.42rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 17px;
  padding: 0.04rem 0.3rem;
  border-radius: 999px;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}

.mihomo-code-group--block .mihomo-code-group-inner {
  background: rgba(248, 113, 113, 0.08);
  border-left-color: rgba(239, 68, 68, 0.9);
}

.mihomo-code-group--block::after {
  content: "BLOCK";
  background: rgba(248, 113, 113, 0.14);
  color: #7f1d1d;
}

.mihomo-code-group--vpn .mihomo-code-group-inner {
  background: rgba(59, 130, 246, 0.08);
  border-left-color: rgba(59, 130, 246, 0.9);
}

.mihomo-code-group--vpn::after {
  content: "VPN";
  background: rgba(96, 165, 250, 0.16);
  color: #153e8a;
}

.mihomo-code-group--direct .mihomo-code-group-inner {
  background: rgba(34, 197, 94, 0.08);
  border-left-color: rgba(34, 197, 94, 0.9);
}

.mihomo-code-group--direct::after {
  content: "DIRECT";
  background: rgba(74, 222, 128, 0.16);
  color: #14532d;
}

.mihomo-code-group--skip .mihomo-code-group-inner {
  background: rgba(139, 92, 246, 0.08);
  border-left-color: rgba(139, 92, 246, 0.95);
}

.mihomo-code-group--skip::after {
  content: "SKIP-DOMAIN";
  background: rgba(139, 92, 246, 0.14);
  color: #5b21b6;
}

/* ============================================================
   PRISM HYBRID
   ============================================================ */

.mihomo-code-box--prism {
  background: #ffffff;
}

.mihomo-code-line-text .token {
  background: transparent !important;
  font-style: normal;
  font-weight: 400 !important;
}

.mihomo-code-line-text .token.comment,
.mihomo-code-line-text .token.prolog,
.mihomo-code-line-text .token.doctype,
.mihomo-code-line-text .token.cdata {
  color: #94a3b8;
}

.mihomo-code-line-text .token.punctuation {
  color: #64748b;
}

.mihomo-code-line-text .token.atrule,
.mihomo-code-line-text .token.key,
.mihomo-code-line-text .token.property,
.mihomo-code-line-text .token.tag {
  color: #2563eb;
}

.mihomo-code-line-text .token.string,
.mihomo-code-line-text .token.scalar,
.mihomo-code-line-text .token.value,
.mihomo-code-line-text .token.plain {
  color: #7c3aed;
}

.mihomo-code-line-text .token.number,
.mihomo-code-line-text .token.boolean,
.mihomo-code-line-text .token.important {
  color: #d97706;
}

.mihomo-code-line-text .token.keyword,
.mihomo-code-line-text .token.selector,
.mihomo-code-line-text .token.anchor,
.mihomo-code-line-text .token.alias {
  color: #0f766e;
}

.mihomo-code-line-text > .token.key,
.mihomo-code-line-text > .token.atrule,
.mihomo-code-line-text > .token.property {
  color: #2563eb;
}

.mihomo-code-line-text .token.operator {
  color: #64748b;
}

.mihomo-code-line-text .mihomo-token-key {
  color: #2563eb;
}

.mihomo-code-line-text .mihomo-token-key--core,
.mihomo-code-line-text .mihomo-token-keyword {
  color: #1d4ed8;
  font-weight: 600 !important;
}

.mihomo-code-line-text .mihomo-token-proto {
  color: #0f766e;
  font-weight: 600 !important;
}

.mihomo-code-line-text .mihomo-token-provider {
  color: #7c3aed;
  font-weight: 600 !important;
}

.mihomo-code-line-text .mihomo-token-rule-op {
  color: #dc2626;
  font-weight: 700 !important;
}

.mihomo-code-line-text .mihomo-token-target-direct {
  color: #059669;
  font-weight: 700 !important;
}

.mihomo-code-line-text .mihomo-token-target-reject {
  color: #dc2626;
  font-weight: 700 !important;
}

.mihomo-code-line-text .mihomo-token-target-proxy {
  color: #2563eb;
  font-weight: 700 !important;
}

.mihomo-code-line-text .mihomo-token-target-option {
  color: #b45309;
  font-weight: 600 !important;
}

.mihomo-code-line-text .mihomo-token-url {
  color: #0f766e;
  word-break: break-all;
}

/* ============================================================
   INFO BANNER / META
   ============================================================ */

.mihomo-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-bottom: 0.85rem;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #334155;
  font-size: 0.76rem;
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .mihomo-preview-card {
    position: static;
    height: auto;
    max-height: none;
    min-height: auto;
    overflow: visible;
  }

  .mihomo-preview-card > .card-body.mihomo-preview-body {
    overflow: visible;
  }

  .mihomo-code-box {
    min-height: 52vh;
  }
}

@media (max-width: 576px) {
  .mihomo-code-box {
    --mihomo-line-no-width: 2.7rem;
    --mihomo-line-gap: 1rem;

    font-size: 0.78rem;
    line-height: 1.28;
    border-radius: 18px;
    padding: 0.82rem 0.8rem 0.82rem 0.72rem;
  }

  .mihomo-code-line-no {
    font-size: 0.68rem;
  }

  .mihomo-code-line--section {
    margin-top: 0.3rem;
    margin-bottom: 0.08rem;
  }

  .mihomo-code-group {
    margin: 0.12rem 0 0.14rem;
  }

  .mihomo-code-group-inner {
    padding: 0.18rem 0.58rem 0.18rem 0.18rem;
    border-radius: 10px;
  }

  .mihomo-code-group::after {
    top: 0.16rem;
    right: 0.28rem;
    min-width: 42px;
    min-height: 16px;
    padding: 0.04rem 0.24rem;
    font-size: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mihomo-code-group {
    transition: none !important;
  }
}