.page-simulator {
      background:
        linear-gradient(180deg, rgba(14,107,104,0.08), transparent 320px),
        var(--bg);
      font-size: 15px;
      line-height: 1.48;
    }

    .page {
      width: min(1480px, calc(100% - 32px));
      margin: 0 auto;
      padding: 28px 0 56px;
    }

    header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: end;
      margin-bottom: 18px;
    }

    h1 { font-size: 34px; line-height: 1.12; margin-bottom: 8px; }
    h2 { font-size: 18px; margin-bottom: 12px; }
    h3 { font-size: 14px; margin-bottom: 8px; }
    .toolbar { justify-content: flex-end; }

    .wallet-strip {
      display: grid;
      grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(150px, 0.7fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .wallet-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 14px 16px;
    }

    .wallet-card.primary {
      color: white;
      border-color: #0b4d63;
      background: #0b4d63;
    }

    .wallet-card.primary p,
    .wallet-card.primary span { color: rgba(255,255,255,0.75); }
    .wallet-card strong { display: block; font-size: 24px; margin-top: 4px; }
    .wallet-card.primary strong { font-size: 30px; }

    .wallet-value-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .wallet-delta {
      display: none;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 700;
      color: white !important;
      background: rgba(255,255,255,0.16);
    }

    .wallet-delta.visible { display: inline-flex; animation: delta-pop 520ms ease-out; }

    .change-bar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      border: 1px solid #b7dbc7;
      border-left: 5px solid var(--accent);
      border-radius: var(--radius);
      background: #f1faf5;
      padding: 11px 14px;
      margin-bottom: 14px;
    }

    .change-indicator {
      width: 9px;
      height: 9px;
      margin-top: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 5px rgba(14,107,104,0.12);
    }

    .change-copy strong { display: block; margin-bottom: 2px; }
    .change-copy p { margin-bottom: 7px; font-size: 12px; }
    .change-label { display:block; color:var(--accent); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
    .change-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .change-chip {
      border: 1px solid #c8dfd4;
      border-radius: 999px;
      background: white;
      padding: 3px 8px;
      color: #32594a;
      font-size: 11px;
      font-weight: 600;
    }

    .guide-panel {
      border: 1px solid #8ebcb8;
      border-left: 5px solid var(--accent-2);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
      margin-bottom: 14px;
      overflow: hidden;
    }

    .guide-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: #f2f8f7;
    }

    .guide-head h2 { margin-bottom: 3px; }
    .guide-progress { min-width: 190px; text-align: right; }
    .guide-progress-track { height: 5px; border-radius: 999px; background: #d6e6e3; overflow: hidden; margin-top: 7px; }
    .guide-progress-fill { height: 100%; background: var(--accent); transition: width 220ms ease; }

    .guide-body {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
      gap: 16px;
      padding: 16px;
    }

    .guide-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
    .rule-label { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .rule-label.verified { color: #23533a; background: #e6f3ec; }
    .rule-label.proposed { color: #0b4d63; background: #e4f0f4; }
    .rule-label.open { color: #7a4510; background: #fff1dc; }
    .guide-state { color: var(--muted); font-size: 12px; }

    .guide-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
    .guide-tab { min-height: 30px; padding: 5px 10px; font-size: 12px; }
    .guide-tab.active { color: white; background: var(--ink); border-color: var(--ink); }
    .guide-copy { min-height: 72px; color: var(--ink); }
    .guide-copy p { margin-bottom: 8px; }

    .guide-rules { display: grid; gap: 7px; margin-top: 10px; }
    .guide-rule { border-left: 3px solid var(--line); padding: 5px 8px; background: var(--surface-2); font-size: 12px; }
    .guide-rule.verified { border-left-color: var(--ok); }
    .guide-rule.proposed { border-left-color: var(--accent-2); }
    .guide-rule.open { border-left-color: var(--warn); }
    .guide-rule .rule-label { margin-right: 6px; padding: 2px 6px; font-size: 9px; }

    .guide-checks { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 11px 12px; }
    .guide-checks h3 { margin-bottom: 9px; }
    .guide-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; padding: 5px 0; font-size: 12px; }
    .guide-check-icon { color: var(--muted); font-weight: 800; }
    .guide-check.done .guide-check-icon { color: var(--ok); }

    .guide-controls { display: flex; justify-content: space-between; gap: 8px; padding: 0 16px 16px; flex-wrap: wrap; }
    .guide-controls > div { display: flex; gap: 8px; flex-wrap: wrap; }
    .guide-target { position: relative; border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(14,107,104,.16); animation: guide-pulse 1.8s ease-in-out infinite; }

    @keyframes guide-pulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(14,107,104,.13); }
      50% { box-shadow: 0 0 0 7px rgba(14,107,104,.23); }
    }

    .layout {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr) 370px;
      gap: 14px;
      align-items: start;
    }

    .panel-head {
      padding: 15px 16px 12px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,0.5);
    }

    .panel-body { padding: 14px 16px 16px; }

    .stack { display: grid; gap: 12px; }

    .schema-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .schema-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
      padding: 11px;
    }

    .schema-card strong {
      display: block;
      margin-bottom: 6px;
    }

    .schema-card code {
      display: block;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.45;
    }

    .action-grid {
      display: grid;
      gap: 8px;
    }

    .action-card {
      border: 1px solid var(--line);
      background: var(--surface-2);
      border-radius: 8px;
      padding: 11px;
      display: grid;
      gap: 8px;
    }

    .action-card .row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 12px;
      font-weight: 600;
      background: #edf7f4;
      color: var(--accent);
      white-space: nowrap;
    }

    .pill.warn { background: #fff1dc; color: var(--warn); }
    .pill.ok { background: #e6f3ec; color: var(--ok); }
    .pill.danger { background: #f8dddd; color: var(--danger); }
    .pill.neutral { background: #ece7dc; color: #59636e; }

    .flow {
      display: grid;
      grid-template-columns: 1fr 36px 1fr 36px 1fr;
      align-items: stretch;
      gap: 8px;
      margin-bottom: 14px;
    }

    .flow-box {
      border: 1px solid var(--line);
      background: var(--surface-2);
      border-radius: 8px;
      padding: 12px;
      min-height: 88px;
    }

    .flow-arrow {
      align-self: center;
      color: var(--accent);
      text-align: center;
      font-size: 22px;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .metric {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
      padding: 11px;
    }

    .metric span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 5px;
    }

    .metric strong {
      font-size: 19px;
    }

    table { font-size: 13px; }

    th, td {
      padding: 9px 8px;
    }

    th {
      font-size: 12px;
      background: rgba(248,245,238,0.65);
    }

    tr.selected td {
      background: #e9f7f4;
    }

    tr.row-enter td { animation: row-enter 620ms ease-out both; }
    tr.row-enter:nth-child(2) td { animation-delay: 55ms; }
    tr.row-enter:nth-child(3) td { animation-delay: 110ms; }
    tr.row-enter:nth-child(4) td { animation-delay: 165ms; }
    tr.row-enter:nth-child(5) td { animation-delay: 220ms; }
    tr.row-enter:nth-child(6) td { animation-delay: 275ms; }
    tr.row-enter:nth-child(7) td { animation-delay: 330ms; }
    tr.row-enter:nth-child(n + 8) td { animation-delay: 385ms; }
    tr.balance-changed td { animation: balance-flash 1100ms ease-out both; }

    .balance-value {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 7px;
    }

    .delta-badge {
      border-radius: 999px;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: 700;
      animation: delta-pop 520ms ease-out;
    }

    .delta-badge.up { background: #e6f3ec; color: var(--ok); }
    .delta-badge.down { background: #f8dddd; color: var(--danger); }

    .amount {
      text-align: right;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .scroll {
      max-height: 330px;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
    }

    .timeline {
      display: grid;
      gap: 9px;
      max-height: 380px;
      overflow: auto;
      padding-right: 4px;
    }

    .event {
      border-left: 3px solid var(--accent);
      background: var(--surface-2);
      border-radius: 0 8px 8px 0;
      padding: 9px 10px;
    }

    .event strong { display: block; font-size: 13px; }
    .event span { color: var(--muted); font-size: 12px; }
    .event.event-enter { animation: card-enter 620ms ease-out both; }

    .notice {
      padding: 11px 12px;
      margin-bottom: 12px;
    }

    .tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .tab {
      min-height: 32px;
      padding: 6px 10px;
      border-radius: 999px;
    }

    .tab.active {
      background: var(--ink);
      color: white;
      border-color: var(--ink);
    }

    .doc-list {
      display: grid;
      gap: 8px;
    }

    .doc {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: var(--surface-2);
    }

    .doc.doc-enter { animation: card-enter 620ms ease-out both; border-color: #9bcdb8; }

    .doc-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .doc strong { font-size: 13px; }
    .doc .details {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px 10px;
      color: var(--muted);
      font-size: 12px;
    }

    .comparison {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
    }

    .compare-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--surface-2);
    }

    .compare-card.bad { border-color: #e5bab6; background: #fff4f2; }
    .compare-card.good { border-color: #b7dbc7; background: #f1faf5; }

    .toast-region {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 100;
      display: grid;
      gap: 8px;
      width: min(360px, calc(100vw - 36px));
      pointer-events: none;
    }

    .toast {
      border: 1px solid #b7dbc7;
      border-left: 4px solid var(--ok);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: 0 14px 38px rgba(26, 32, 38, 0.18);
      padding: 11px 13px;
      animation: toast-in 180ms ease-out, toast-out 180ms ease-in 3.2s forwards;
    }

    .toast.warn { border-color: #ead0a8; border-left-color: var(--warn); }
    .toast.danger { border-color: #e5bab6; border-left-color: var(--danger); }
    .toast strong { display: block; margin-bottom: 2px; }
    .toast span { color: var(--muted); font-size: 12px; }

    .flash-update { animation: flash-update 700ms ease-out; }

    .metric.metric-changed { animation: metric-pop 620ms ease-out; border-color: #8bc8af; }

    @keyframes toast-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes toast-out {
      to { opacity: 0; transform: translateY(5px); }
    }

    @keyframes flash-update {
      0% { background-color: #dff4e8; }
      100% { background-color: transparent; }
    }

    @keyframes row-enter {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes card-enter {
      0% { opacity: 0; transform: translateY(-7px); box-shadow: 0 0 0 4px rgba(14,107,104,0.10); }
      100% { opacity: 1; transform: translateY(0); box-shadow: none; }
    }

    @keyframes balance-flash {
      0% { background: #dff4e8; }
      100% { background: transparent; }
    }

    @keyframes metric-pop {
      0% { transform: scale(0.985); background: #dff4e8; }
      100% { transform: scale(1); background: var(--surface-2); }
    }

    @keyframes delta-pop {
      0% { opacity: 0; transform: scale(0.78); }
      100% { opacity: 1; transform: scale(1); }
    }

    @media (max-width: 1180px) {
      .layout { grid-template-columns: 340px minmax(0, 1fr); }
      .right-col { grid-column: 1 / -1; }
      .wallet-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 1360px) {
      header { grid-template-columns: 1fr; }
      .toolbar { justify-content: flex-start; }
    }

    @media (max-width: 820px) {
      .page { width: min(100% - 20px, 1480px); padding-top: 18px; }
      header { grid-template-columns: 1fr; }
      .toolbar { justify-content: flex-start; }
      .layout, .flow, .summary-grid, .split, .comparison, .schema-grid {
        grid-template-columns: 1fr;
      }
      .wallet-strip { grid-template-columns: 1fr; }
      .guide-body { grid-template-columns: 1fr; }
      .guide-head { display: grid; }
      .guide-progress { min-width: 0; text-align: left; width: 100%; }
      .flow-arrow { transform: rotate(90deg); }
      h1 { font-size: 28px; }
    }