.payment-prototype-page{--prototype-line:rgba(255,255,255,.1);--prototype-card:#111516;--prototype-card-2:#151b1b}
.payment-prototype-page .cf-promo-bar a{margin-left:14px;color:#a6fff0;font-size:11px}
.payment-prototype-page .cf-content{max-width:1440px;padding-top:28px}
.prototype-intro{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;overflow:hidden;min-height:190px;padding:30px 34px;border:1px solid rgba(41,216,194,.2);border-radius:20px;background:linear-gradient(112deg,rgba(15,56,54,.92),rgba(16,29,32,.98) 62%,rgba(10,28,37,.96));box-shadow:0 18px 45px rgba(0,0,0,.18)}
.prototype-intro:before{position:absolute;inset:0;pointer-events:none;content:"";opacity:.22;background-image:linear-gradient(rgba(137,234,222,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(137,234,222,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
.prototype-intro>div:first-child{position:relative;z-index:1}.prototype-intro h1{margin:12px 0 10px;color:#f4fffb;font-size:34px;letter-spacing:-.04em}.prototype-intro p{max-width:690px;margin:0;color:#8da6a2;font-size:12px;line-height:1.8}
.prototype-safety{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-width:245px;padding:13px 15px;border:1px solid rgba(242,212,139,.28);border-radius:12px;background:rgba(44,40,24,.74);color:#f2d48b}.prototype-safety i{width:8px;height:8px;border-radius:50%;background:#f2d48b;box-shadow:0 0 0 5px rgba(242,212,139,.1)}.prototype-safety strong,.prototype-safety small{display:block}.prototype-safety strong{font-size:12px}.prototype-safety small{margin-top:2px;color:#c9bd91;font-size:10px}
.scenario-bar{display:none;align-items:center;gap:6px;flex-wrap:wrap;margin:15px 0;padding:10px 12px;border:1px solid var(--prototype-line);border-radius:13px;background:#111516}.payment-prototype-page.debug-mode .scenario-bar{display:flex}.scenario-bar>span{margin:0 8px 0 3px;color:#7d8d89;font-size:11px}.scenario-bar button{min-height:33px;padding:6px 11px;border:1px solid transparent;border-radius:7px;color:#899996;background:transparent;cursor:pointer;font-size:11px}.scenario-bar button:hover,.scenario-bar button.active{border-color:rgba(41,216,194,.32);color:#dffff7;background:rgba(41,216,194,.12)}
.billing-switch{display:flex;gap:4px;justify-content:flex-end;margin:16px 0}.billing-switch button{padding:7px 13px;border:1px solid var(--prototype-line);border-radius:8px;background:#111516;color:#82938f;cursor:pointer}.billing-switch button.active{border-color:rgba(41,216,194,.5);color:#dffff7;background:rgba(41,216,194,.12)}.billing-switch b{color:var(--cf-accent);font-size:10px}.business-steps{display:grid;gap:10px;margin:15px 0}.business-steps>div{display:flex;align-items:center;gap:10px;color:#b9c8c3;font-size:12px}.business-steps b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;color:#11211c;background:var(--cf-accent);font-size:11px}.business-contact-card{background:linear-gradient(145deg,#192321,#151b1b)}
.prototype-stage{min-width:0}.screen{min-height:580px;padding:30px;border:1px solid var(--prototype-line);border-radius:18px;background:#111516;box-shadow:0 14px 35px rgba(0,0,0,.15)}
.screen-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}.screen-header h2{margin:8px 0 5px;color:#ecf4f2;font-size:24px;letter-spacing:-.035em}.screen-header p{margin:0;color:#788583;font-size:12px}.screen-header .eyebrow{margin-bottom:8px}.screen-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.status-pill,.demo-tag{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border:1px solid rgba(242,212,139,.3);border-radius:6px;color:#f2d48b;background:rgba(74,61,25,.38);font-size:10px;white-space:nowrap}
.primary-button,.secondary-button,.ghost-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.16);border-radius:9px;color:#dce7e4;background:rgba(255,255,255,.06);cursor:pointer;font-size:12px}.primary-button{border-color:transparent;color:#052823;background:linear-gradient(110deg,#87f0d7,#2bd1bd);font-weight:700}.primary-button:hover{background:linear-gradient(110deg,#b6ffed,#4ce4ce)}.secondary-button:hover,.ghost-button:hover{border-color:var(--cf-accent);color:#fff;background:rgba(41,216,194,.12)}.danger-button{border-color:rgba(255,140,140,.3);color:#ffaaa7}
.button-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:20px}.button-row .primary-button{min-width:125px}.muted{color:#788583}.notice{padding:12px 14px;border:1px solid rgba(242,212,139,.24);border-radius:10px;color:#f2d48b;background:rgba(74,61,25,.28);font-size:12px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.package-card{position:relative;min-height:164px;padding:18px;text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:var(--cf-ink);background:#151b1b;cursor:pointer}.package-card:hover,.package-card.selected{border-color:rgba(41,216,194,.6);background:linear-gradient(145deg,rgba(20,86,79,.42),#151b1b 70%)}.package-card.selected:after{content:"✓";position:absolute;top:12px;right:12px;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;color:#052823;background:var(--cf-accent);font-size:11px;font-weight:700}.package-card small,.package-card span{display:block;color:#8fa19c}.package-card strong{display:block;margin:7px 0 4px;color:#effffb;font-size:16px}.package-card .package-points{margin:14px 0 2px;color:#a9ffec;font-size:23px;font-weight:550}.package-card .package-price{color:var(--cf-accent);font-size:15px;font-weight:650}.package-card .tag{display:inline-block;padding:2px 6px;border:1px solid rgba(41,216,194,.24);border-radius:5px;color:var(--cf-accent);font-size:10px}
.two-column{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr);gap:14px}.summary-card,.method-card,.result-card,.order-card,.team-card,.upgrade-card,.state-card{border:1px solid var(--prototype-line);border-radius:14px;background:#151b1b;padding:19px}.summary-card h3,.method-card h3,.result-card h3,.order-card h3,.team-card h3,.upgrade-card h3{margin:0 0 13px;color:#dce9e5;font-size:15px}.summary-row{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-top:1px solid rgba(255,255,255,.075);color:#879793;font-size:12px}.summary-row:first-of-type{border-top:0}.summary-row strong{color:#eaf5f1;text-align:right}.summary-row .highlight{color:#8ff2d6;font-size:20px}.method-list{display:grid;gap:8px}.method-option{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.1);border-radius:9px;cursor:pointer}.method-option:has(input:checked){border-color:rgba(41,216,194,.55);background:rgba(41,216,194,.1)}.method-option input{accent-color:var(--cf-accent);width:16px;height:16px}.method-option b{display:block;color:#eaf5f1;font-size:12px}.method-option small{display:block;color:#7f918d;font-size:10px}.method-logo{display:grid;width:30px;height:30px;place-items:center;border-radius:8px;color:var(--cf-accent);background:rgba(41,216,194,.12);font-size:12px;font-weight:700}.agreement-line{display:flex;align-items:flex-start;gap:8px;margin-top:15px;color:#82938f;font-size:11px}.agreement-line input{accent-color:var(--cf-accent);margin-top:3px}
.state-center{display:grid;place-items:center;min-height:400px;text-align:center}.state-icon{display:grid;width:60px;height:60px;place-items:center;margin-bottom:17px;border-radius:50%;color:var(--cf-accent);background:rgba(41,216,194,.14);font-size:28px}.state-icon.warning{color:#f2d48b;background:rgba(242,212,139,.13)}.state-icon.error{color:#ffaaa7;background:rgba(255,140,140,.13)}.state-center h2{margin:0 0 8px;color:#eff8f5;font-size:25px}.state-center>p{max-width:560px;margin:0;color:#82938f;font-size:12px}.state-detail{width:min(100%,490px);margin:20px auto 0;padding:5px 17px;border:1px solid var(--prototype-line);border-radius:11px;text-align:left}.timeline{display:grid;gap:13px;width:min(100%,600px);margin:22px auto 0;padding:0;text-align:left}.timeline-item{display:grid;grid-template-columns:21px 1fr;gap:10px;align-items:start;color:#7e8f8a}.timeline-dot{width:18px;height:18px;margin-top:1px;border:2px solid #3a4a47;border-radius:50%}.timeline-item.done{color:#e1eeea}.timeline-item.done .timeline-dot{border-color:var(--cf-accent);background:var(--cf-accent);box-shadow:inset 0 0 0 4px #183c35}.timeline-item strong,.timeline-item small{display:block}.timeline-item strong{font-size:12px}.timeline-item small{margin-top:2px;color:#7e8f8a;font-size:10px}
.state-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:16px}.state-card span,.state-card strong{display:block}.state-card span{color:#7f918d;font-size:11px}.state-card strong{margin-top:4px;color:#eaf5f1;font-size:16px}.state-card small{display:block;margin-top:5px;font-size:10px}.accent-text{color:var(--cf-accent)!important}
.order-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}.filter-chip{padding:6px 11px;border:1px solid var(--prototype-line);border-radius:20px;color:#82938f;background:transparent;cursor:pointer;font-size:11px}.filter-chip.active{border-color:rgba(41,216,194,.55);color:#eafff9;background:rgba(41,216,194,.12)}.orders{display:grid;gap:9px}.order-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:16px}.order-card h3{margin:0 0 4px;font-size:14px}.order-card p{margin:0;color:#7e8f8a;font-size:10px}.order-card .order-amount{color:var(--cf-accent);font-size:16px}.order-card .order-status{text-align:right}.order-card .order-status span{display:block;margin-bottom:5px;color:#f2d48b;font-size:10px}.order-card .order-status span.success{color:var(--cf-accent)}.order-card .order-status span.expired{color:#ffaaa7}
.team-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:17px}.team-head h2{margin:0 0 5px;color:#edf7f4;font-size:20px}.team-head p{margin:0;color:#7e8f8a;font-size:11px}.seat-meter{min-width:185px;text-align:right}.seat-meter strong{color:var(--cf-accent);font-size:23px}.seat-meter small{display:block;color:#7f918d;font-size:10px}.seat-bar{height:6px;margin-top:7px;border-radius:99px;background:#293a36;overflow:hidden}.seat-bar i{display:block;width:60%;height:100%;border-radius:inherit;background:var(--cf-accent)}.member-table{width:100%;border-collapse:collapse}.member-table th,.member-table td{padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.075);text-align:left}.member-table th{color:#758681;font-size:10px;font-weight:400}.member-table td{color:#d6e3df;font-size:11px}.member-table td small{display:block;color:#71827e;font-size:9px}.member-avatar{display:inline-grid;width:28px;height:28px;margin-right:7px;place-items:center;border-radius:50%;color:#082d27;background:linear-gradient(135deg,#a0f6dd,#2bbcae);font-size:10px;font-weight:800;vertical-align:middle}.usage-chip{display:inline-block;padding:3px 7px;border-radius:99px;color:var(--cf-accent);background:rgba(41,216,194,.1);font-size:10px}
.upgrade-card{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;gap:13px}.plan-block{padding:14px;border:1px solid var(--prototype-line);border-radius:10px}.plan-block small,.plan-block span{display:block;color:#7e8f8a;font-size:10px}.plan-block strong{display:block;margin:5px 0;color:#eaf5f1;font-size:18px}.upgrade-arrow{text-align:center;color:var(--cf-accent);font-size:20px}.price-breakdown{margin-top:12px;padding:11px 13px;border:1px solid rgba(41,216,194,.13);border-radius:9px;background:rgba(41,216,194,.05)}.price-breakdown .summary-row{padding:7px 0}.price-breakdown .summary-row:last-child{border-top-color:rgba(41,216,194,.23)}
.modal-root{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:18px;background:rgba(2,10,10,.74);backdrop-filter:blur(5px)}.modal-root[hidden]{display:none}.modal{width:min(100%,500px);max-height:90vh;overflow:auto;padding:23px;border:1px solid rgba(41,216,194,.3);border-radius:16px;background:linear-gradient(145deg,#1c3733,#101a1b);box-shadow:0 22px 60px rgba(0,0,0,.48)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:13px}.modal-head h2{margin:0 0 4px;color:#effffb;font-size:20px}.modal-head p{margin:0;color:#91a59f;font-size:11px}.close-button{width:31px;height:31px;border-radius:8px;color:#93a6a0;background:transparent;cursor:pointer;font-size:20px}.close-button:hover{color:#fff;background:rgba(255,255,255,.08)}.modal-form{display:grid;gap:12px;margin-top:18px}.modal-form label{display:grid;gap:5px;color:#93a59f;font-size:11px}.modal-form input,.modal-form select{width:100%;min-height:39px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:8px;outline:0;color:#eaf5f1;background:#101919;font-size:12px}.modal-form input:focus,.modal-form select:focus{border-color:var(--cf-accent)}.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.prototype-toast{position:fixed;right:22px;bottom:22px;z-index:50;max-width:350px;padding:11px 14px;border:1px solid rgba(41,216,194,.3);border-radius:9px;color:#eafff9;background:#163530;box-shadow:0 16px 38px rgba(0,0,0,.35);transform:translateY(14px);opacity:0;pointer-events:none;transition:.2s}.prototype-toast.show{transform:translateY(0);opacity:1}
@media(max-width:900px){.prototype-intro{display:block}.prototype-safety{max-width:300px;margin-top:16px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.two-column{grid-template-columns:1fr}.team-head{display:block}.seat-meter{margin-top:12px;text-align:left}.payment-prototype-page .cf-content{padding-right:28px;padding-left:28px}}
@media(max-width:720px){.payment-prototype-page .cf-content{padding:22px 17px 45px}.prototype-intro{padding:25px 22px}.prototype-intro h1{font-size:29px}.screen{padding:21px;min-height:550px}.screen-header{display:block}.screen-actions{margin-top:13px}.cards,.state-card-grid{grid-template-columns:1fr}.scenario-bar{max-height:150px;overflow:auto}.scenario-bar>span{width:100%;margin-bottom:2px}.upgrade-card{grid-template-columns:1fr}.upgrade-arrow{transform:rotate(90deg)}.team-head{margin-bottom:13px}.member-table{min-width:560px}.team-card{overflow:auto}.order-card{grid-template-columns:1fr}.order-card .order-status{text-align:left}.payment-prototype-page .cf-promo-bar>a{display:none}}