/* Калькуляторы Ventrola — оболочка и компоненты (доп. к vf-ui.css) */
body{min-height:100vh}
.cx-top{display:flex;align-items:center;gap:20px;padding:14px 26px;border-bottom:1px solid var(--panel-bd);
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.cx-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-family:var(--font)}
.cx-brand img{height:26px} .cx-brand b{font-size:18px;letter-spacing:-.02em}
.cx-nav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.cx-nav a{padding:7px 13px;border-radius:9px;color:var(--text-dim);font-weight:500;font-size:13.5px}
.cx-nav a:hover{background:var(--panel);color:var(--text)}
.cx-nav a.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}
.cx-login{white-space:nowrap}

.cx-page{max-width:1200px;margin:0 auto;padding:26px 22px 50px}
.cx-hero{text-align:center;margin:18px 0 28px}
.cx-hero h1{font-size:clamp(24px,4vw,34px);font-family:var(--font);letter-spacing:-.02em}
.cx-hero p{max-width:680px;margin:12px auto 0;color:var(--text-dim);font-size:15px;line-height:1.6}

.cx-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:860px){.cx-grid{grid-template-columns:1fr}}

.cx-fld{display:block;margin-bottom:16px}
.cx-l{display:block;font-size:13px;color:var(--text-dim);margin-bottom:8px;font-weight:500}
.cx-l i{color:var(--text-mut);font-style:normal;font-size:12px}
.cx-slider{display:flex;gap:12px;align-items:center}
.cx-slider input[type=range]{flex:1;accent-color:var(--accent);height:5px}
.cx-num{width:96px;text-align:center}
.cx-seg{display:flex;gap:6px;flex-wrap:wrap}
.cx-seg button{padding:9px 14px;border-radius:10px;border:1px solid var(--panel-bd2);background:var(--panel);
  color:var(--text-dim);cursor:pointer;font-size:13px;font-weight:500;font-family:var(--font-body);transition:.14s}
.cx-seg button:hover{border-color:var(--accent)}
.cx-seg button.on{background:var(--grad-accent);color:#06121d;border:none;font-weight:600}
.cx-presets{display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 16px}
.cx-presets button{padding:6px 12px;border-radius:8px;border:1px solid var(--panel-bd2);background:var(--panel);color:var(--text-dim);cursor:pointer;font-family:var(--mono);font-size:12.5px}
.cx-presets button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);border-color:var(--accent)}

.cx-status{padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px}
.cx-ok{background:color-mix(in srgb,var(--vt-cyan) 16%,transparent);color:var(--vt-cyan)}
.cx-good{background:color-mix(in srgb,var(--vt-money) 18%,transparent);color:var(--vt-money)}
.cx-warning{background:color-mix(in srgb,var(--vt-warn) 20%,transparent);color:var(--vt-warn)}
.cx-danger{background:color-mix(in srgb,var(--vt-red) 18%,transparent);color:var(--vt-red)}
.cx-advice{color:var(--text-dim);font-size:13px;line-height:1.55;margin:12px 0 0}
.cx-meter{height:8px;border-radius:6px;background:var(--bg3);margin-top:16px;overflow:hidden;
  background-image:linear-gradient(90deg,var(--vt-cyan),var(--vt-money) 35%,var(--vt-warn) 65%,var(--vt-red))}
.cx-meter>div{height:100%;background:var(--bg3);float:right;transition:.25s;opacity:.86}
.cx-scale{display:flex;justify-content:space-between;color:var(--text-mut);font-size:11px;margin-top:4px;font-family:var(--mono)}

.cx-big{padding:8px 0}
.cx-big-l{color:var(--text-dim);font-size:13px}
.cx-big-v{font-family:var(--font);font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.cx-big-v span{font-size:18px;color:var(--text-mut);font-weight:600}
.cx-channels{margin-top:16px;padding-top:14px;border-top:1px solid var(--panel-bd);font-size:14px;line-height:2}
.cx-break{color:var(--text-mut);font-size:12px;margin-top:8px;font-family:var(--mono)}
.cx-params{color:var(--text-dim);font-size:12.5px;margin-top:12px;padding-top:12px;border-top:1px solid var(--panel-bd)}
.cx-req{color:var(--vt-warn)}

.cx-actions{display:flex;gap:8px;margin:14px 0}
.cx-lead{margin-top:14px}
.cx-lead h3{font-size:15px}
.cx-msg{margin-left:12px;font-size:13px}

.cx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.cx-card{padding:24px;border-radius:var(--r);background:var(--panel);border:1px solid var(--panel-bd);text-decoration:none;color:var(--text);transition:.16s;display:block}
.cx-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}
.cx-card .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);margin-bottom:14px;color:var(--accent)}
.cx-card .ic svg{width:26px;height:26px}
.cx-card h3{font-size:18px;margin-bottom:8px}
.cx-card p{color:var(--text-dim);font-size:13.5px;line-height:1.55}

.cx-foot{border-top:1px solid var(--panel-bd);padding:24px 26px;text-align:center;color:var(--text-mut);font-size:12.5px;max-width:1200px;margin:0 auto}