.billing-configs-page{--billing-accent:#3f3d56;--billing-soft:#f7f6fb;--billing-line:rgba(63,61,86,.15)}.billing-configs-header{background:linear-gradient(135deg,rgba(63,61,86,.08),rgba(63,61,86,.02));border:1px solid #e4e2ee;border-radius:16px;padding:1.5rem}.stepper{gap:1rem}.stepper,.stepper-item{display:flex;align-items:center}.stepper-item{gap:.6rem}.stepper-circle{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600;background:#f0eef8;color:#6c6a84;border:1px solid #dcd8ef}.stepper-item.active .stepper-circle{background:#3f3d56;color:#fff;border-color:#3f3d56}.stepper-label{font-weight:600;color:#3f3d56}.stepper-line{flex:1 1;height:2px;background:#e1ddee}.stepper-line.active{background:#3f3d56}.app-preview{background:#f9f9fc;border-radius:12px;padding:.75rem 1rem}.billing-timeline{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);grid-gap:1.5rem;gap:1.5rem;padding:2.5rem 1rem 2.75rem;overflow-x:auto;scroll-snap-type:x proximity}.billing-timeline:before{content:"";position:absolute;top:50%;left:1rem;right:1.5rem;height:8px;background:linear-gradient(90deg,rgba(63,61,86,.12),rgba(63,61,86,.05));border-radius:999px}.billing-timeline:after{content:"";position:absolute;top:calc(50% - 7px);right:.75rem;border-left:14px solid rgba(63,61,86,.12);border-top:7px solid transparent;border-bottom:7px solid transparent}.timeline-item{position:relative;display:grid;grid-template-rows:1fr auto 1fr;align-items:stretch;justify-items:center;min-height:220px;scroll-snap-align:center;cursor:pointer}.timeline-item:focus-visible{outline:2px solid rgba(63,61,86,.35);outline-offset:4px;border-radius:12px}.timeline-card{position:relative;width:100%;max-width:260px;border-radius:16px;background:#fff;border:1px solid #e2deef;padding:.85rem .95rem;box-shadow:0 12px 24px rgba(63,61,86,.08);transition:transform .2s ease,box-shadow .2s ease}.timeline-item.top .timeline-card{grid-row:1;margin-bottom:.85rem;align-self:end}.timeline-item.bottom .timeline-card{grid-row:3;margin-top:.85rem;align-self:start}.timeline-item.top:hover .timeline-card{transform:translateY(-3px)}.timeline-item.bottom:hover .timeline-card{transform:translateY(3px)}.timeline-item.paused .timeline-card{opacity:.75}.timeline-card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem}.timeline-card-actions,.timeline-offset-badge{display:inline-flex;align-items:center;gap:.4rem}.timeline-offset-badge{padding:.25rem .65rem;border-radius:999px;background:#f2f0f8;color:#3f3d56;font-weight:600;font-size:.85rem}.timeline-offset-value{font-size:.95rem}.timeline-offset-label{font-size:.7rem;font-weight:600;color:#6a6880;text-transform:uppercase}.timeline-status{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px}.timeline-status.active{background:rgba(60,170,75,.15);color:#2f7a3a}.timeline-status.paused{background:hsla(240,7%,50%,.2);color:#6a687b}.timeline-title{font-weight:600;color:#3f3d56;margin-bottom:.25rem}.timeline-when{font-size:.8rem;color:#5f5c73;margin-bottom:.4rem}.timeline-meta{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.75rem;color:#7a778c}.timeline-meta span{background:#f6f5fb;border-radius:999px;padding:.15rem .5rem}.timeline-connector{grid-row:2;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;align-self:center}.timeline-connector:before{content:"";position:absolute;width:2px;background:var(--billing-line)}.timeline-item.top .timeline-connector:before{bottom:100%;height:52px}.timeline-item.bottom .timeline-connector:before{top:100%;height:52px}.timeline-dot{width:16px;height:16px;border-radius:50%;background:#3f3d56;border:3px solid #fff;box-shadow:0 0 0 4px rgba(63,61,86,.12)}.timeline-item.positive .timeline-dot{background:#37b24d;box-shadow:0 0 0 4px rgba(55,178,77,.15)}.timeline-item.negative .timeline-dot{background:#f03e3e;box-shadow:0 0 0 4px rgba(240,62,62,.14)}.timeline-item.zero .timeline-dot{background:#4c6ef5;box-shadow:0 0 0 4px rgba(76,110,245,.16)}.timeline-item.paused .timeline-dot{background:#b9b7c7;box-shadow:0 0 0 4px rgba(185,183,199,.18)}.timeline-action-btn{width:28px;height:28px;border-radius:50%;border:none;background:#fff;color:#e25563;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(226,85,99,.18);transition:transform .2s ease,color .2s ease}.timeline-action-btn:hover{transform:scale(1.05);color:#c92b38}.rule-summary{margin-top:.4rem}.template-preview{background:#fff;border:1px dashed #d7d4e6;border-radius:12px;padding:.75rem}.template-preview .preview-block{background:#f8f7fb;border-radius:10px;padding:.5rem .75rem}.variable-map{background:#f8f7fb;padding:.75rem}.variable-map,.webhook-help{border-radius:12px}.webhook-url-panel{background:#f9f9fc;border:1px solid #e5e2ef;border-radius:12px;padding:.85rem}.webhook-rules-table{border:1px solid #ebe8f4;border-radius:12px;overflow:hidden}.webhook-rules-table table{margin-bottom:0}.webhook-rules-table td,.webhook-rules-table th{vertical-align:top}.webhook-variable-map{min-width:260px}.webhook-variable-row{display:grid;grid-template-columns:110px 1fr auto;grid-gap:.45rem;gap:.45rem;margin-bottom:.45rem}.message-preview{background:#fff;border:1px dashed #d7d4e6;border-radius:12px;padding:.65rem .75rem}.preview-text{font-size:.9rem;color:#3f3d56;word-break:break-word}.variable-map-row{display:grid;grid-template-columns:1.2fr 1fr;grid-gap:.5rem;gap:.5rem;align-items:start;margin-bottom:.5rem}.config-list-table tbody tr td{vertical-align:middle}.quick-add{display:inline-flex;gap:.35rem;flex-wrap:wrap}@media(max-width:767px){.billing-timeline{grid-auto-flow:row;grid-auto-columns:1fr;padding:1rem 0}.billing-timeline:after,.billing-timeline:before{display:none}.timeline-item{grid-template-rows:auto;min-height:auto;justify-items:stretch}.timeline-item.bottom .timeline-card,.timeline-item.top .timeline-card{grid-row:auto;margin:0}.timeline-connector{display:none}.timeline-card{width:100%}.variable-map-row,.webhook-variable-row{grid-template-columns:1fr}.billing-configs-header{padding:1rem}}