#rssiApp{ --bg:#f4f7f7; --surface:#fff; --text:#172a32; --muted:#60727a; --line:#dbe5e6; --accent:#167768; --accent-dark:#0c5b53; --mint:#eaf6f1; --bad:#bd4340; --radius:17px; }
#rssiApp *{ box-sizing:border-box; }
#rssiApp{ scroll-behavior:smooth; }
#rssiApp{ margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
#rssiApp button, #rssiApp input, #rssiApp select{ font:inherit; }
#rssiApp .wrap{ max-width:1150px; margin:0 auto; padding:24px 22px 70px; }
#rssiApp .hero{ padding:28px 32px 31px; border-radius:22px; background:linear-gradient(110deg,#102f3a,#175c5a 72%,#1b7864); color:white; position:relative; overflow:hidden; }
#rssiApp .hero:after{ content:""; position:absolute; width:360px; height:360px; right:-110px; top:-165px; border:1px solid #ffffff33; border-radius:50%; box-shadow:0 0 0 50px #ffffff08,0 0 0 100px #ffffff06; pointer-events:none; }
#rssiApp .topline{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; }
#rssiApp .brand{ font-size:15px; font-weight:800; letter-spacing:.055em; }
#rssiApp .brand span{ color:#9fe4cf; }
#rssiApp .testlabel{ color:#defff5; background:#ffffff1c; border:1px solid #ffffff4d; border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.085em; padding:7px 12px; }
#rssiApp h1{ font-size:clamp(27px,4vw,42px); line-height:1.13; margin:27px 0 9px; letter-spacing:-.035em; }
#rssiApp .hero p{ color:#d3e5e5; max-width:700px; margin:0; font-size:15px; line-height:1.55; }
#rssiApp .subhead{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:23px 2px 15px; }
#rssiApp .subhead p{ color:var(--muted); margin:0; font-size:13px; }
#rssiApp .reset{ cursor:pointer; border:1px solid #bed2d0; background:white; color:#28675c; border-radius:10px; padding:10px 14px; font-size:13px; font-weight:700; }
#rssiApp .reset:hover{ background:#e9f5f0; }
#rssiApp .device-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch; }
#rssiApp .panel{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); box-shadow:0 5px 24px #16323808; }
#rssiApp .device{ padding:23px 24px 22px; }
#rssiApp .panel-head{ display:flex; align-items:center; gap:12px; padding-bottom:17px; margin-bottom:16px; border-bottom:1px solid #edf1f1; }
#rssiApp .panel-icon{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--mint); color:var(--accent); flex-shrink:0; }
#rssiApp .panel-head h2{ margin:0; font-size:20px; letter-spacing:-.025em; }
#rssiApp .panel-head p{ color:var(--muted); font-size:12px; margin:3px 0 0; }
#rssiApp .fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 14px; }
#rssiApp .field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
#rssiApp .field.wide{ grid-column:1/-1; }
#rssiApp .field label{ font-size:13px; font-weight:680; line-height:1.35; }
#rssiApp .star{ color:#b04c29; font-weight:800; }
#rssiApp .field small{ font-size:11px; line-height:1.4; color:var(--muted); }
#rssiApp .control{ display:flex; min-height:45px; border:1px solid #cbd9d9; border-radius:10px; overflow:hidden; background:#fff; transition:border-color .15s,box-shadow .15s; }
#rssiApp .control:focus-within{ border-color:#21917b; box-shadow:0 0 0 3px #b8e9db75; }
#rssiApp .control.invalid{ border-color:var(--bad); background:#fff9f8; }
#rssiApp .control input{ width:100%; min-width:0; border:0; background:transparent; padding:10px 12px; color:var(--text); outline:none; font-weight:650; font-variant-numeric:tabular-nums; }
#rssiApp .control input::placeholder{ font-weight:400; color:#96a4aa; }
#rssiApp .unit{ background:#f3f7f6; border:0; border-left:1px solid #dce5e3; padding:0 12px; min-width:62px; font-weight:700; font-size:12px; color:#52696a; white-space:nowrap; }
#rssiApp select.unit{ cursor:pointer; outline-offset:-2px; }
#rssiApp .unit.fixed{ display:flex; align-items:center; justify-content:center; }
#rssiApp .section{ padding:23px 24px; margin-top:16px; }
#rssiApp .section h2{ margin:0 0 17px; font-size:18px; letter-spacing:-.02em; }
#rssiApp .route-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
#rssiApp .info{ display:flex; align-items:flex-start; gap:9px; color:#506c72; font-size:12px; line-height:1.5; margin-top:16px; }
#rssiApp .info b{ color:#2c6670; }
#rssiApp .info svg{ flex-shrink:0; margin-top:1px; }
#rssiApp .status{ margin:18px 0 0; border:1px solid #ecd7a5; background:#fffbf0; color:#835919; font-size:13px; padding:12px 15px; border-radius:12px; line-height:1.5; }
#rssiApp .status[hidden]{ display:none; }
#rssiApp .result-heading{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:8px; margin:28px 0 14px; }
#rssiApp .result-heading h2{ margin:0; font-size:23px; letter-spacing:-.02em; }
#rssiApp .result-heading p{ margin:0; font-size:12px; color:var(--muted); }
#rssiApp .results{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
#rssiApp .result{ background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:20px 18px; min-height:148px; }
#rssiApp .result.main{ border-color:#87c6b2; background:linear-gradient(160deg,#e7f5ee,#ffffff 84%); }
#rssiApp .result .caption{ display:block; font-size:12px; line-height:1.45; color:#526970; min-height:36px; }
#rssiApp .result .number{ display:block; margin:13px 0 5px; color:var(--text); font-size:clamp(22px,2.8vw,31px); font-weight:820; letter-spacing:-.05em; font-variant-numeric:tabular-nums; white-space:nowrap; }
#rssiApp .result.main .number{ color:#006a52; }
#rssiApp .result .unit-label{ color:#667a81; font-size:12px; }
#rssiApp .result .unit-label.warn{ color:var(--bad); }
#rssiApp .metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:6px 18px; margin-top:13px; }
#rssiApp .metric{ padding:15px 12px; border-right:1px solid #edf1f1; }
#rssiApp .metric:last-child{ border:0; }
#rssiApp .metric b{ display:block; font-size:20px; margin:6px 0 0; font-variant-numeric:tabular-nums; }
#rssiApp .metric span{ font-size:12px; color:var(--muted); }
#rssiApp .beam-panel{ margin-top:19px; padding:24px 24px 17px; }
#rssiApp .beam-panel h2{ font-size:20px; margin:0 0 6px; letter-spacing:-.025em; }
#rssiApp .beam-panel .lead{ color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 15px; }
#rssiApp .graphic{ border:1px solid #d9eae5; border-radius:13px; background:linear-gradient(#f8fcfa,#f5faf9); overflow:hidden; }
#rssiApp .graphic svg{ width:100%; height:auto; display:block; }
#rssiApp .graphic .muted-note{ font-size:15px; fill:#728a8f; }
#rssiApp .graphic #svgWidth{ fill:#145f58; font-size:45px; font-weight:800; letter-spacing:-2px; }
#rssiApp .graphic #svgAngle, #rssiApp #svgDistance{ fill:#173e45; font-size:27px; font-weight:700; }
#rssiApp .mobile-diagram-summary{ display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:9px; }
#rssiApp .mobile-diagram-summary div{ background:#f2f8f5; border:1px solid #dcece5; border-radius:10px; padding:10px 8px; }
#rssiApp .mobile-diagram-summary small{ display:block; color:#607879; font-size:11px; }
#rssiApp .mobile-diagram-summary b{ display:block; font-size:14px; margin-top:5px; }
#rssiApp .model-footer{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:15px; }
#rssiApp .model-hint{ padding:13px 15px; background:#f4f8f7; border-radius:12px; color:#526970; font-size:12px; line-height:1.5; }
#rssiApp .model-hint strong{ display:block; color:#233f45; font-size:13px; margin-bottom:4px; }
#rssiApp .clearance{ margin-top:18px; }
#rssiApp .clearance .inline-result{ display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:15px 17px; background:#f5f9f8; border-radius:12px; }
#rssiApp .inline-result .name{ font-weight:700; font-size:13px; }
#rssiApp .inline-result .value{ font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; }
#rssiApp .inline-result .value.negative{ color:#b13f3f; }
#rssiApp .help-text{ color:var(--muted); font-size:12px; line-height:1.6; margin:10px 0 0; }
#rssiApp details{ margin-top:18px; border-radius:14px; background:#ffffff; border:1px solid var(--line); padding:17px 20px; }
#rssiApp details summary{ cursor:pointer; font-weight:750; color:#29454a; }
#rssiApp details p{ color:#566a70; font-size:13px; line-height:1.7; margin-bottom:0; }
#rssiApp details code{ background:#eff5f4; padding:2px 5px; border-radius:5px; overflow-wrap:anywhere; }
#rssiApp .footer{ margin-top:24px; font-size:12px; color:#7b8b91; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
@media  (max-width:900px) {#rssiApp .results{ grid-template-columns:repeat(2,minmax(0,1fr)); }
#rssiApp .wrap{ padding:14px 14px 45px; }
#rssiApp .hero{ padding:25px; }}
@media  (max-width:680px) {#rssiApp .device-grid{ grid-template-columns:1fr; }
#rssiApp .device{ padding:18px; }
#rssiApp .section{ padding:18px; }
#rssiApp .hero{ padding:21px; border-radius:17px; }
#rssiApp .model-footer{ grid-template-columns:1fr; }
#rssiApp .beam-panel{ padding:18px; }
#rssiApp .mobile-diagram-summary{ display:grid; }}
@media  (max-width:400px) {#rssiApp .fields{ grid-template-columns:1fr; }
#rssiApp .field.wide{ grid-column:auto; }
#rssiApp .route-grid{ grid-template-columns:1fr 1fr; }
#rssiApp .results{ gap:8px; }
#rssiApp .result{ padding:15px 11px; min-height:145px; }
#rssiApp .result .number{ font-size:22px; }
#rssiApp .result .caption{ font-size:11px; }
#rssiApp .metric{ padding:11px 5px; }
#rssiApp .metric b{ font-size:16px; }
#rssiApp .metrics{ padding:2px 7px; }
#rssiApp .unit{ min-width:51px; padding:0 7px; }}
@media  (prefers-reduced-motion:reduce) {#rssiApp *, #rssiApp *:before, #rssiApp *:after{ scroll-behavior:auto!important; transition:none!important; }}

#rssiApp{--bg:#f4f5f5;--surface:#fff;--text:#24203a;--muted:#687479;--line:#dfe5e5;--accent:#28734c;--accent-dark:#205d40;--mint:#edf6ee; font-family:var(--font-rubik),Arial,sans-serif; background:linear-gradient(90deg,#ededed,#f8f8f8);color:#24203a}
#rssiApp.wrap{max-width:1200px;box-sizing:border-box;padding:14px 20px 60px}
#rssiApp .rssiHeading{padding:0 3px 8px}
#rssiApp .rssiHeading h1{margin:0 0 7px;font-size:clamp(25px,3vw,33px);color:#24203a}
#rssiApp .rssiHeading p{font-size:14px;color:#596477;line-height:1.5;margin:0}
#rssiApp .panel,#rssiApp .result{box-shadow:0 3px 16px rgba(0,0,0,.035)}
#rssiApp .result.main{background:linear-gradient(160deg,#eaf5ee,#fff 84%);border-color:#adccb2}
#rssiApp .result.main .number{color:#23623c}
#rssiApp .graphic{border-color:#dfe6df;background:#f7fbf8}
@media(max-width:680px){#rssiApp.wrap{padding:13px 11px 50px}}