.flip-page { max-width: 1200px; margin: auto; padding: 54px 24px 72px; }
.flip-intro { margin-bottom: 27px; }.flip-kicker,.flip-panel-heading span,.flip-main-result > span { color: #c4b5fd; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.flip-intro h1 { margin: 3px 0 8px; color: #f8fafc; font-size: clamp(32px,4vw,44px); font-weight: 700; letter-spacing: -.04em; }.flip-intro p:last-child { color: #aeb8c8; line-height: 1.6; }
.flip-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 21px; align-items: start; }.flip-inputs,.flip-results { display: grid; min-width: 0; gap: 18px; }
.flip-panel { min-width: 0; padding: 22px; border: 1px solid rgba(100,116,139,.36); border-radius: 17px; background: linear-gradient(145deg,rgba(30,41,59,.78),rgba(15,23,42,.78)); box-shadow: 0 14px 36px rgba(0,0,0,.16); backdrop-filter: blur(14px); }.flip-panel-heading { margin-bottom: 16px; }.flip-panel h2 { color: #f8fafc; font-size: 19px; font-weight: 700; }.flip-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.flip-fields label,.flip-panel > label,.flip-price-targets label,.flip-save-preset label,.flip-fee-presets label { display: grid; gap: 6px; min-width: 0; color: #cbd5e1; font-size: 12px; font-weight: 600; }.flip-panel input,.flip-panel select { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #475569; border-radius: 8px; background: #1e293b; color: #f8fafc; font-size: 15px; font-variant-numeric: tabular-nums; }.flip-panel input:focus-visible,.flip-panel select:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }.flip-panel input::placeholder { color: #718096; }
.flip-fee-presets { margin: 17px 0; padding: 14px 0; border-top: 1px solid rgba(100,116,139,.3); border-bottom: 1px solid rgba(100,116,139,.3); }.flip-fee-presets p,.flip-note { margin-top: 8px; color: #aab7c7; font-size: 12px; line-height: 1.5; }.flip-advanced { margin-top: 17px; padding-top: 14px; border-top: 1px solid rgba(100,116,139,.3); }.flip-advanced summary { color: #c4b5fd; font-size: 13px; font-weight: 700; cursor: pointer; }.flip-advanced .flip-fields { margin-top: 14px; }.flip-save-preset { margin-top: 17px; padding-top: 14px; border-top: 1px solid rgba(100,116,139,.3); }.flip-save-preset > div { display: flex; gap: 8px; margin-top: 7px; }.flip-save-preset button,.flip-reset { padding: 8px 13px; border: 1px solid #a78bfa; border-radius: 8px; background: #6d28d9; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }.flip-save-preset button:hover,.flip-reset:hover { background: #7c3aed; }.flip-reset { justify-self: start; border-color: #475569; background: #263449; }.flip-error { padding: 11px 13px; border: 1px solid rgba(251,113,133,.5); border-radius: 9px; background: rgba(127,29,29,.2); color: #fecdd3; font-size: 13px; }.flip-error[hidden] { display: none; }
.flip-main-result { border-color: rgba(192,132,252,.58); background: radial-gradient(circle at 0 0,rgba(139,92,246,.3),transparent 65%),linear-gradient(145deg,rgba(35,31,67,.9),rgba(18,25,44,.85)); }.flip-main-result h2 { margin-top: 8px; color: #e9d5ff; font-size: 14px; letter-spacing: .08em; }.flip-main-result strong { display: block; margin: 8px 0; color: #f5d0fe; font-size: clamp(42px,6vw,66px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.05em; }.flip-main-result strong.loss { color: #fda4af; }.flip-main-result p { color: #b9c4d3; font-size: 12px; }
.flip-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.flip-kpis > div { padding: 17px; border: 1px solid rgba(100,116,139,.36); border-radius: 13px; background: rgba(30,41,59,.7); }.flip-kpis span,.flip-price-targets span { display: block; color: #aab7c7; font-size: 12px; font-weight: 600; }.flip-kpis strong { display: block; margin: 5px 0; color: #a7f3d0; font-size: 25px; font-variant-numeric: tabular-nums; }.flip-kpis small { color: #8fa0b4; font-size: 11px; }.flip-breakdown { display: grid; gap: 0; }.flip-breakdown > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(100,116,139,.22); color: #bdc9d8; font-size: 13px; }.flip-breakdown > div:last-child { border: 0; color: #e9d5ff; font-weight: 700; }.flip-breakdown dd { color: #f1f5f9; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.flip-price-targets { display: grid; gap: 13px; }.flip-price-targets > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px; border: 1px solid #334155; border-radius: 9px; background: rgba(15,23,42,.6); }.flip-price-targets strong { color: #d8b4fe; font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }.flip-price-targets label { grid-template-columns: 1fr 130px; align-items: center; }.flip-offer-result { margin-top: 12px; color: #a7f3d0; font-size: 13px; font-weight: 700; }
@media (max-width: 850px) { .flip-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 530px) { .flip-page { padding: 35px 16px 54px; }.flip-panel { padding: 17px; }.flip-fields { grid-template-columns: minmax(0,1fr); }.flip-price-targets label { grid-template-columns: minmax(0,1fr); }.flip-kpis strong { font-size: 21px; } }