:root {
  color-scheme: light;
  --color-primary: #2563eb;
  --page-bg: #f9fafb;
  --surface-bg: #ffffff;
  --text-color: #111827;
  --muted-color: #6b7280;
  --border-color: rgb(17 24 39 / 12%);
  --bg: var(--page-bg);
  --surface: var(--surface-bg);
  --ink: var(--text-color);
  --muted: var(--muted-color);
  --border: var(--border-color);
  --green: #2563eb;
  --green-dark: #1d4ed8;
  --soft: #eff4fc;
  --subtle-bg: #fcfcfd;
  --upload-bg: #f8fafc;
  --upload-hover: #eff4fc;
  --accent-border: #b7c6da;
  --success-bg: #eff4fc;
  --success-text: #1d4ed8;
  --button-bg: #2563eb;
  --button-hover: #1d4ed8;
  --button-text: #ffffff;
}
:root.dark {
  color-scheme: dark;
  --page-bg: #050505;
  --surface-bg: #111111;
  --text-color: #ffffff;
  --muted-color: #8b9099;
  --border-color: rgb(255 255 255 / 10%);
  --color-primary: #7ba7f7;
  --green: #7ba7f7;
  --green-dark: #a4c4ff;
  --soft: #19202d;
  --subtle-bg: #131313;
  --upload-bg: #15171b;
  --upload-hover: #1b2230;
  --accent-border: #3f506c;
  --success-bg: #19202d;
  --success-text: #a4c4ff;
  --button-bg: #2563eb;
  --button-hover: #1d4ed8;
  --error: #fca5a5;
}
body { background: var(--page-bg); color: var(--text-color); }
.workspace { background: var(--surface-bg); box-shadow: 0 16px 50px -26px #0002; }
.apps-panel { background: var(--subtle-bg); }
.app-icon { overflow: hidden; background: transparent; }
.app-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.check-button { background: var(--surface-bg); border: 1px solid var(--border-color); color: var(--green); min-height: 44px; border-radius: 10px; padding: 10px 14px; margin-top: 18px; width: 100%; font-size: 13px; font-weight: 600; }
.check-button:hover { background: var(--soft); }
.certificate-result, .job-status { font-size: 12px; line-height: 1.8; color: var(--green); overflow-wrap: anywhere; }
.failed { color: var(--error); }
#install-result { margin-top: 14px; }
button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
input:disabled { cursor: wait; }
.footer-contacts { margin-left: auto; display: flex; gap: 16px; }
.footer-contacts a { padding: 8px 0; min-height: 44px; background: transparent; border: 0; color: var(--muted-color); font-size: 12px; }
.footer-contacts a:hover { color: var(--green); }
.footer-contacts a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 44px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); font-size: 13px; }
.footer-contacts svg { width: 19px; height: 19px; color: var(--green); }
.footer-contacts { flex-wrap: wrap; gap: 10px; }
.nav-shop { display: flex; align-items: center; min-height: 44px; color: var(--muted-color); }
.nav-shop:hover { color: var(--green); }
.purchase-section { margin: 48px 0; scroll-margin-top: 24px; }
.purchase-heading { text-align: center; margin-bottom: 24px; }
.purchase-heading .eyebrow { margin: 0 0 12px; font-size: 10px; }
.purchase-heading :is(h1,h2) { font-size: 28px; letter-spacing: -1px; }
.purchase-heading>p { font-size: 14px; color: var(--muted-color); line-height: 1.7; margin: 10px 0 0; }
.price-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.price-card { padding: 22px 16px 16px; background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 16px; display: flex; flex-direction: column; }
.plan-delivery { font-size: 11px; color: var(--muted-color); line-height: 1.6; margin: 0 0 12px; }
.price-card :is(h2,h3) { font-size: 29px; letter-spacing: -1.2px; margin: 0; color: var(--text-color); white-space: nowrap; font-weight: 650; }
.price-card :is(h2,h3) span { font-size: 16px; margin-left: 3px; font-weight: 500; }
.price-card ul { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.price-card li { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; line-height: 1.6; color: var(--muted-color); }
.price-card li svg { width: 14px; height: 18px; color: var(--green); }
.plan-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border: 1px solid var(--border-color); border-radius: 9px; padding: 10px; font-size: 11px; font-weight: 600; color: var(--green); margin-top: auto; background: var(--soft); }
.plan-buy svg { width: 15px; height: 15px; }
.plan-buy:hover { border-color: var(--color-primary); }
.warranty-policy { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--border-color); border-radius: 14px; margin-top: 16px; background: var(--subtle-bg); }
.warranty-policy>svg { color: var(--green); width: 26px; height: 26px; }
.warranty-policy :is(h2,h3) { font-size: 14px; margin: 0 0 6px; }
.warranty-policy p { font-size: 13px; color: var(--muted-color); margin: 0; line-height: 1.7; }
@media(max-width:900px) { .price-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .price-card li,.plan-buy { font-size: 12px; } }
@media(max-width:600px) { .price-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .purchase-section { margin: 36px 0; } .purchase-heading :is(h1,h2) { font-size: 25px; } }
@media(max-width:380px) { .price-grid { grid-template-columns: 1fr; } .price-card { padding: 22px; } .price-card li,.plan-buy { font-size: 13px; } }
.lan-setup { border: 1px solid var(--border-color); background: var(--surface-bg); border-radius: 16px; padding: 20px 24px; margin-bottom: 20px; }
.lan-setup-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lan-setup strong { font-size: 14px; }
.lan-setup p { color: var(--muted-color); font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
.lan-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lan-actions .check-button { display: flex; align-items: center; justify-content: center; margin: 0; width: auto; }
.lan-setup details { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--muted-color); }
.lan-setup summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--green); }
.lan-setup ol { margin-top: 0; padding-left: 20px; }
.lan-setup li { margin: 6px 0; }
@media (max-width: 700px) { .lan-setup { padding: 18px 20px; } .lan-setup-top { flex-direction: column; align-items: stretch; } .lan-actions { flex-direction: column; } }
.step-number { background: var(--subtle-bg); }
.brand-icon { background: #171717; border: 1px solid var(--border-color); }
.local-tag { border-color: var(--border-color); color: var(--muted-color); }
.local-tag i, .eyebrow span { background: var(--color-primary); }
.dropzone { background: var(--upload-bg); border-color: var(--accent-border); }
.dropzone:hover, .dropzone.dragging { background: var(--upload-hover); border-color: var(--color-primary); }
.upload-icon { background: var(--surface-bg); border-color: var(--border-color); }
.password-wrap { background: var(--surface-bg); border-color: var(--border-color); }
.password-wrap input { color: var(--text-color); }
.password-wrap input::placeholder, .password-wrap>svg { color: var(--muted-color); }
.password-label>span { background: var(--subtle-bg); border-color: var(--border-color); }
.privacy-note { border-color: var(--border-color); }
.app-option { background: var(--surface-bg); }
.app-option:hover { background: var(--upload-bg); }
.app-option:has(input:checked) { background: var(--upload-bg); border-color: var(--color-primary); box-shadow: none; }
.app-badge, .cert-contents span { background: var(--success-bg); color: var(--success-text); }
.radio-mark { border-color: var(--muted-color); }
.app-option:has(input:checked) .radio-mark { background: var(--color-primary); border-color: var(--color-primary); color: var(--button-text); }
.primary-button { background: var(--button-bg); color: var(--button-text); font-weight: 650; }
.primary-button:hover { background: var(--button-hover); box-shadow: 0 3px 12px #2563eb20; }
.file-summary { background: var(--upload-bg); border-color: var(--accent-border); }
.guide-title, .guide-steps>div>span, .footer-brand { color: var(--muted-color); }
.guide-steps strong { color: var(--text-color); }
.guide-steps>div>span { border-color: var(--border-color); }
.guide-connector, .tiny-line { background: var(--border-color); }
dialog { background: var(--surface-bg); }
:focus-visible { outline-color: var(--color-primary); }
.dropzone:focus-within, .password-wrap:focus-within, .app-option:has(input:focus-visible) { outline-color: var(--color-primary); }
.theme-toggle { border: 1px solid var(--border-color); background: var(--surface-bg); border-radius: 10px; color: var(--color-primary); box-shadow: 0 1px 3px #0001; }
.theme-toggle .moon-icon { display: none; }
.dark .theme-toggle .moon-icon { display: block; }
.dark .theme-toggle .sun-icon { display: none; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; z-index: 0; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; z-index: 1; }
@media (max-width: 700px) {
  .brand { font-size: 20px; letter-spacing: -.8px; }
  .header { flex-wrap: wrap; min-height: 80px; height: auto; padding-top: 18px; padding-bottom: 18px; }
  .header nav { margin-left: auto; gap: 12px; }
}
@media (max-width: 360px) {
  .header { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .brand { font-size: 18px; }
  .brand-icon { width: 32px; height: 32px; }
  .header nav { gap: 8px; }
  .help-link { font-size: 10px; }
}
.price-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 8px; max-width: 100%; }
.price-grid::-webkit-scrollbar { display: none; }
.price-card { scroll-snap-align: start; min-width: 0; }
.price-controls { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.price-controls>span { margin-right: 6px; font-size: 12px; color: var(--muted-color); }
.price-controls .icon-button { border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--green); }
.purchase-section { margin-top: 28px; margin-bottom: 30px; }
@media(max-width:900px) { .price-grid { grid-auto-columns: calc((100% - 12px) / 2); grid-template-columns: none; } }
@media(max-width:600px) { .price-grid { grid-auto-columns: calc(100% - 24px); grid-template-columns: none; } .price-card { padding: 22px; } .price-card li,.plan-buy { font-size: 13px; } .price-card :is(h2,h3) { font-size: 32px; } }

.purchase-heading h1 { margin: 0; font-weight: 650; }
.header { height: auto; min-height: 124px; padding-top: 14px; padding-bottom: 14px; }
.header-identity { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.header .header-contacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.header-contacts a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; min-height: 44px; border: 1px solid var(--border-color); border-radius: 10px; color: var(--muted-color); background: var(--surface-bg); font-size: 12px; font-weight: 550; }
.header-contacts a:hover,.footer-contacts a:hover { border-color: var(--color-primary); color: var(--text-color); }
.contact-mark { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: #fff; border: 1px solid #e1ebfa; }
.contact-mark img { width: 26px; height: 26px; display: block; }
.footer-contacts a { gap: 9px; padding: 7px 12px; }
@media(max-width:700px) { .header { gap: 8px 12px; } }
.price-card h2.plan-name { margin: 0 0 8px; font-size: 20px; letter-spacing: -.4px; }
.plan-price { margin: 0; font-size: 29px; letter-spacing: -1.2px; color: var(--text-color); white-space: nowrap; font-weight: 650; }
.plan-price span { font-size: 16px; margin-left: 3px; font-weight: 500; }
@media(max-width:600px) { .plan-price { font-size: 32px; } }
html { scroll-padding-top: var(--header-offset, 180px); }
.header { position: sticky; top: 0; z-index: 40; background: var(--page-bg); border-bottom: 1px solid var(--border-color); box-shadow: 0 6px 20px #00000008; }
footer { flex-wrap: wrap; gap: 16px; }
.footer-legal { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--muted-color); }
.footer-legal:hover { color: var(--color-primary); }