.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; padding: 0 20px; font-weight: 800; cursor: pointer; transition: transform var(--transition), border-color var(--transition), background var(--transition), opacity var(--transition); }
.button:hover { transform: translateY(-2px); }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.button--primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color: #07101d; box-shadow: 0 12px 36px rgba(124,156,255,.28); }
.button--ghost { border-color: var(--line); background: rgba(255,255,255,.035); }
.button--ghost:hover { border-color: var(--line-strong); background: rgba(255,255,255,.075); }
.button--compact { min-height: 40px; padding: 0 15px; font-size: .86rem; }
.button--full { width: 100%; }
.icon-button { min-width: 42px; min-height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.035); color: var(--text); cursor: pointer; display: inline-grid; place-items: center; transition: var(--transition); }
.icon-button:hover { background: rgba(255,255,255,.09); border-color: var(--line-strong); }
.status-chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; border-radius: 999px; padding: 7px 11px; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.status-chip--free { background: rgba(78,232,212,.11); color: var(--cyan); border: 1px solid rgba(78,232,212,.25); }
.status-chip--premium { background: rgba(255,203,112,.12); color: var(--amber); border: 1px solid rgba(255,203,112,.26); }
.card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.glass { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.metric { display: grid; gap: 6px; padding: 18px; }
.metric strong { font-size: 1.9rem; letter-spacing: -.04em; }
.metric span { color: var(--muted); font-size: .82rem; }
.tag { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: rgba(124,156,255,.11); color: #bdcaff; font-weight: 700; font-size: .76rem; }
.input, .textarea, .select { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,11,22,.72); color: var(--text); padding: 14px 15px; }
.textarea { min-height: 180px; resize: vertical; line-height: 1.65; }
.range { width: 100%; accent-color: var(--primary); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.segmented button { border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; }
.segmented button.is-active { color: var(--text); border-color: rgba(124,156,255,.65); background: rgba(124,156,255,.13); }
.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: grid; gap: 10px; }
.toast { max-width: 360px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #101a2d; box-shadow: var(--shadow); animation: toastIn .25s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
.modal { width: min(92vw, 520px); color: var(--text); border: 1px solid var(--line-strong); border-radius: 28px; background: linear-gradient(160deg, #13213b, #09111f 72%); box-shadow: 0 38px 110px rgba(0,0,0,.66); padding: 32px; }
.modal::backdrop { background: rgba(0,4,12,.72); backdrop-filter: blur(12px); }
.modal--wide { width: min(94vw, 760px); }
.modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; }
.modal__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: conic-gradient(from 30deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4); font-weight: 900; margin-bottom: 22px; }
.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.price-card { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; padding: 22px; border: 1px solid rgba(255,203,112,.28); border-radius: 20px; background: rgba(255,203,112,.055); }
.price-card strong { display: block; font-size: 3.7rem; letter-spacing: -.06em; }
.price-card ul { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.9; }
.fine-print { margin: 18px 0 0; font-size: .78rem; }