/* WingLog Pro — страницы /pro/ и /account/ поверх style.css сайта. */

.pro h2 { font-size: 22px; margin: 44px 0 16px; }
.pro .doc__short { margin-top: 26px; }
.pro .doc__short.ok { border-color: #7cf7c455; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.note { margin: 18px 0 0; padding: 12px 16px; border-left: 2px solid var(--cyan); color: var(--sky); background: rgba(63, 208, 255, .06); border-radius: 0 12px 12px 0; }
.err { margin: 12px 0 0; color: #ff8f8f; }

.pro-card { padding: 24px 26px; }
.pro-card h2 { margin: 0 0 10px; }
.pro-card p + p { margin-top: 12px; }

.doc .pro-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.doc .pro-features li { margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.pro-features b { font-weight: 600; }
.pro-features span { color: var(--muted); font-size: 15px; }

.plans { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; }
.plan--best { border-color: var(--cyan); box-shadow: 0 0 40px -18px #3fd0ff; }
.plan--pick { cursor: pointer; transition: border-color .2s, background .2s; }
.plan--pick input { position: absolute; top: 22px; right: 22px; width: 20px; height: 20px; accent-color: var(--cyan); }
.plan--pick:has(input:checked) { background: rgba(63, 208, 255, .10); border-color: var(--cyan); }
.plan__name { font: 600 15px/1.2 var(--f-body); color: var(--muted); }
.plan__price { font: 600 34px/1.15 var(--f-head); margin-top: 6px; }
.plan__per { color: var(--muted); font-size: 14px; }
.plan__save { margin-top: 8px; font: 600 13px/1 var(--f-mono); letter-spacing: .06em; color: var(--mint); }

.pro-form { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 14px; }
.pro-form--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; color: var(--dim); }
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 380px; }
.field span { font-size: 14px; color: var(--muted); }
.field input {
  height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2);
  background: rgba(4, 12, 30, .6); color: var(--text); font: 500 17px/1 var(--f-body); outline: none;
}
.field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px #3fd0ff22; }
.code-input { letter-spacing: .4em; font-family: var(--f-mono) !important; font-size: 22px !important; }
.consent { display: flex; gap: 12px; align-items: flex-start; max-width: 700px; font-size: 15px; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--cyan); }
.consent a, .pro-card a:not(.btn), .muted a, .pro-foot a { color: var(--sky); border-bottom: 1px solid #9be6ff55; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--sky); cursor: pointer; border-bottom: 1px solid #9be6ff55; }

.pro-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; }
.pro-facts dt { color: var(--muted); }
.pro-facts dd { margin: 0; }
.pro-facts .pro-on { color: var(--mint); font-weight: 600; }

.pro-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pro-table th { text-align: left; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 0 10px 10px 0; }
.pro-table td { padding: 10px 10px 10px 0; border-top: 1px solid var(--line); }

.doc .devices { list-style: none; padding: 0; margin: 0; }
.doc .devices li { margin: 0; }
.devices li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.devices em { color: var(--mint); font-style: normal; font-size: 14px; }
.devices small { display: block; color: var(--dim); font-size: 13px; }

.danger { margin-top: 44px; color: var(--muted); }
.danger summary { cursor: pointer; color: #ff8f8f; }

.pro-foot { padding: 0 20px 50px; max-width: 820px; color: var(--dim); font-size: 14px; }

@media (max-width: 560px) {
  .pro-facts { grid-template-columns: 1fr; gap: 2px; }
  .pro-facts dd { margin-bottom: 10px; }
  .pro-card { padding: 20px; }
}

/* Условия подписки: обычный документ сайта, только таблица тарифов и подвал. */
.pro-foot p { margin: 0 0 6px; }
.pro-seller { color: var(--dim); font-size: 13px; }
.doc .pro-table { margin: 6px 0 16px; }