:root{--ovpn-orange:#f28a24;--ovpn-orange-2:#ffab3e;--ovpn-green:#68c879;--ovpn-navy:#071d2d;--ovpn-panel:#09263a;--ovpn-panel-2:#061b2a;--ovpn-line:rgba(255,255,255,.11);--ovpn-muted:#91a9b8}
.ovpn-page{max-width:1480px!important;margin:0 auto 60px!important;min-width:0}
.ovpn-hero{position:relative;overflow:hidden;min-height:0;border-radius:22px;margin-bottom:24px;background:#071b2b}
.ovpn-hero img{width:100%;height:auto;min-height:0;object-fit:contain;display:block}
.ovpn-shell{width:100%!important;max-width:none!important;margin:0!important;padding:30px!important;box-sizing:border-box}
.ovpn-heading{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;margin-bottom:24px}
.ovpn-heading h2{font-size:34px;margin:0}
.ovpn-heading h2 code{font-size:.78em;color:var(--ovpn-orange-2)}
.ovpn-heading .muted{max-width:850px;margin:8px 0 0}
.ovpn-privacy{display:grid;grid-template-columns:28px auto;grid-template-areas:"icon title" "icon sub";align-items:center;padding:12px 15px;border:1px solid rgba(104,200,121,.35);background:rgba(27,99,57,.18);border-radius:13px;white-space:nowrap}
.ovpn-privacy>span{grid-area:icon;color:var(--ovpn-green);font-size:20px}
.ovpn-privacy strong{grid-area:title;font-size:13px}
.ovpn-privacy small{grid-area:sub;color:var(--ovpn-muted)}
.ovpn-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--ovpn-line);border-bottom:1px solid var(--ovpn-line);padding:15px 0;margin-bottom:22px}
.ovpn-mode-switch{display:flex;padding:4px;background:#061b2a;border:1px solid var(--ovpn-line);border-radius:13px}
.ovpn-mode{border:0;background:transparent;color:var(--ovpn-muted);padding:10px 15px;border-radius:9px;font-weight:850;cursor:pointer}
.ovpn-mode.active{background:#123b52;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.ovpn-toolbar-actions,.ovpn-import-actions{display:flex;gap:9px}
.qdf-ovpn-btn{appearance:none;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:#102f43;color:#fff;padding:10px 15px;font:inherit;font-size:13px;font-weight:850;cursor:pointer;transition:.16s ease}
.qdf-ovpn-btn:hover{transform:translateY(-1px);border-color:rgba(242,138,36,.7);background:#163b50}
.qdf-ovpn-btn.primary{background:linear-gradient(135deg,#e87618,#f39936);border-color:#ffad58;color:#111820;box-shadow:0 7px 20px rgba(242,138,36,.18)}
.qdf-ovpn-btn.primary:hover{background:linear-gradient(135deg,#f08a27,#ffad4d)}
.qdf-ovpn-btn.secondary{background:#12384e}
.qdf-ovpn-btn.ghost{background:transparent;color:var(--ovpn-muted)}
.qdf-ovpn-btn.small{padding:7px 11px;font-size:12px}
.ovpn-import{padding:19px;border:1px solid var(--ovpn-line);border-radius:16px;background:var(--ovpn-panel-2);margin-bottom:20px}
.ovpn-dropzone{display:flex;align-items:center;gap:15px;padding:22px;border:1px dashed rgba(242,138,36,.45);border-radius:14px;background:rgba(242,138,36,.045);cursor:pointer}
.ovpn-dropzone.dragging{border-color:var(--ovpn-green);background:rgba(104,200,121,.08)}
.ovpn-dropzone>div:nth-child(2){flex:1}
.ovpn-dropzone strong,.ovpn-dropzone span{display:block}
.ovpn-dropzone span{color:var(--ovpn-muted);font-size:13px;margin-top:3px}
.ovpn-drop-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(242,138,36,.14);color:var(--ovpn-orange-2);font-size:23px;font-weight:900}
.ovpn-import-divider{display:flex;align-items:center;gap:12px;color:var(--ovpn-muted);font-size:11px;margin:15px 0}
.ovpn-import-divider:before,.ovpn-import-divider:after{content:"";height:1px;background:var(--ovpn-line);flex:1}
.ovpn-import textarea,.ovpn-codearea{width:100%;box-sizing:border-box;border:1px solid var(--ovpn-line);border-radius:12px;background:#041722;color:#dcebf3;padding:14px;font:13px/1.55 Consolas,Monaco,monospace;resize:vertical;outline:none}
.ovpn-import textarea:focus,.ovpn-codearea:focus{border-color:rgba(242,138,36,.65)}
.ovpn-import-actions{justify-content:flex-end;margin-top:10px}
.ovpn-workspace{display:grid;grid-template-columns:235px minmax(0,1fr) minmax(310px,390px);gap:18px;align-items:start}
.ovpn-sidebar{position:sticky;top:90px;padding:10px;border:1px solid var(--ovpn-line);border-radius:16px;background:var(--ovpn-panel-2)}
.ovpn-sidebar-title{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--ovpn-muted);padding:8px 10px 12px;text-transform:uppercase}
.ovpn-nav{display:grid;grid-template-columns:28px 1fr auto;align-items:center;width:100%;gap:9px;border:1px solid transparent;border-radius:11px;background:transparent;color:#fff;text-align:left;padding:10px;cursor:pointer}
.ovpn-nav:hover{background:rgba(255,255,255,.045)}
.ovpn-nav.active{background:rgba(242,138,36,.1);border-color:rgba(242,138,36,.35)}
.ovpn-nav>span:first-child{color:var(--ovpn-orange-2);font-size:19px;text-align:center}
.ovpn-nav strong,.ovpn-nav small{display:block}
.ovpn-nav strong{font-size:13px}
.ovpn-nav small{font-size:10px;color:var(--ovpn-muted);margin-top:2px}
.ovpn-nav>b{min-width:22px;padding:3px 5px;text-align:center;border-radius:7px;background:rgba(255,255,255,.07);font-size:10px;color:var(--ovpn-muted)}
.ovpn-content{min-width:0}
.ovpn-panel{display:none;border:1px solid var(--ovpn-line);border-radius:17px;background:var(--ovpn-panel-2);padding:22px}
.ovpn-panel.active{display:block}
.ovpn-panel-head,.ovpn-subsection-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.ovpn-panel-head{padding-bottom:17px;margin-bottom:18px;border-bottom:1px solid var(--ovpn-line)}
.ovpn-panel-head h3,.ovpn-subsection-head h4{margin:0}
.ovpn-panel-head h3{font-size:23px}
.ovpn-panel-head p,.ovpn-subsection-head p{color:var(--ovpn-muted);margin:4px 0 0;font-size:12px}
.ovpn-level{padding:6px 9px;border-radius:7px;background:rgba(242,138,36,.13);color:var(--ovpn-orange-2);font-size:9px;font-weight:950;letter-spacing:.08em}
.ovpn-level.secure{background:rgba(104,200,121,.12);color:#8ee89e}
.ovpn-level.warning{background:rgba(255,201,83,.12);color:#ffd369}
.ovpn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.ovpn-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ovpn-field.full{grid-column:1/-1}
.ovpn-field>span{font-size:12px;font-weight:850;color:#dce9ef}
.ovpn-field small,.ovpn-help{color:var(--ovpn-muted);font-size:10px;line-height:1.45}
.ovpn-field input,.ovpn-field select,.ovpn-field textarea,.ovpn-repeat-row input,.ovpn-repeat-row select{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#041722;color:#fff;padding:10px 11px;font:inherit;outline:none}
.ovpn-field input:focus,.ovpn-field select:focus,.ovpn-field textarea:focus,.ovpn-repeat-row input:focus{border-color:rgba(242,138,36,.72);box-shadow:0 0 0 3px rgba(242,138,36,.07)}
.ovpn-field input[type=range]{padding:8px 0;accent-color:var(--ovpn-orange)}
.ovpn-field output{font-size:11px;color:var(--ovpn-orange-2)}
.ovpn-subsection-head{align-items:center;margin:24px 0 11px}
.ovpn-repeat-list{display:flex;flex-direction:column;gap:8px}
.ovpn-repeat-row{display:grid;grid-template-columns:minmax(0,1fr) 105px 100px 36px;gap:7px}
.ovpn-repeat-row.route{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px}
.ovpn-repeat-row.dns{grid-template-columns:minmax(0,1fr) 36px}
.ovpn-remove{width:36px;height:39px;border:1px solid rgba(255,118,118,.2);border-radius:9px;background:rgba(180,40,40,.08);color:#ff9696;cursor:pointer}
.ovpn-remove:hover{background:rgba(180,40,40,.18)}
.ovpn-switch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px}
.ovpn-switch{display:grid;grid-template-columns:37px 1fr;gap:10px;align-items:center;padding:11px;border:1px solid var(--ovpn-line);border-radius:11px;background:rgba(255,255,255,.025);cursor:pointer}
.ovpn-switch input{position:absolute;opacity:0;pointer-events:none}
.ovpn-switch i{position:relative;width:35px;height:20px;border-radius:20px;background:#294250;transition:.18s}
.ovpn-switch i:after{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#9eb1bb;transition:.18s}
.ovpn-switch input:checked+i{background:#c96b20}
.ovpn-switch input:checked+i:after{left:18px;background:#fff}
.ovpn-switch strong,.ovpn-switch small{display:block}
.ovpn-switch strong{font-size:11px}
.ovpn-switch small{font-size:9px;color:var(--ovpn-muted);margin-top:2px}
.ovpn-switch.danger:has(input:checked){border-color:rgba(255,109,109,.45);background:rgba(170,35,35,.08)}
.ovpn-roaming-preset{margin-top:18px;border:1px solid rgba(242,138,36,.22);border-radius:14px;background:rgba(242,138,36,.035);padding:10px}
.ovpn-switch-master{border-color:rgba(242,138,36,.35);background:rgba(242,138,36,.075)}
.ovpn-switch-master strong{font-size:13px}
.ovpn-switch-master small{font-size:10px}
.ovpn-roaming-options{margin-top:9px;padding:0 5px 5px}
.ovpn-roaming-options .ovpn-switch{padding:9px 10px;background:rgba(3,23,34,.48)}
.ovpn-roaming-options .ovpn-switch strong{font-size:10px}
.ovpn-switch input:indeterminate+i{background:linear-gradient(90deg,#c96b20 50%,#294250 50%)}
.ovpn-dependent{margin-top:14px}
.ovpn-cert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.ovpn-sensitive-note{border:1px solid rgba(255,190,88,.3);background:rgba(255,169,43,.075);color:#ffd69a;padding:12px 14px;border-radius:11px;margin-bottom:17px;font-size:11px}
.ovpn-preview{position:sticky;top:90px;border:1px solid var(--ovpn-line);border-radius:16px;background:#041722;overflow:hidden}
.ovpn-preview-head,.ovpn-analysis-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#0b293d;border-bottom:1px solid var(--ovpn-line)}
.ovpn-preview-head>div,.ovpn-analysis-head>div{display:flex;flex-direction:column}
.ovpn-preview-head span,.ovpn-analysis-head span{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--ovpn-muted)}
.ovpn-preview-head strong,.ovpn-analysis-head strong{font-size:11px;margin-top:3px}
.icon-action{border:1px solid var(--ovpn-line);border-radius:8px;background:rgba(255,255,255,.05);color:#fff;width:31px;height:31px;cursor:pointer}
.ovpn-preview pre{height:390px;margin:0;padding:15px;overflow:auto;white-space:pre;tab-size:2;color:#bfe4cd;font:11px/1.55 Consolas,Monaco,monospace}
.ovpn-analysis-head{border-top:1px solid var(--ovpn-line)}
.ovpn-analysis{max-height:270px;overflow:auto;padding:9px}
.analysis-item{display:grid;grid-template-columns:22px 1fr;gap:7px;padding:9px;border-radius:9px;margin-bottom:5px;font-size:10px;line-height:1.45}
.analysis-item strong{display:block;font-size:11px;margin-bottom:2px}
.analysis-item.error{background:rgba(205,57,57,.12);color:#ffc0c0}
.analysis-item.warning{background:rgba(215,145,32,.11);color:#ffe0a3}
.analysis-item.ok{background:rgba(52,154,81,.11);color:#b8edc5}
.analysis-item.info{background:rgba(49,127,177,.1);color:#bcdff2}
.ovpn-preview.fullscreen{position:fixed;z-index:9999;inset:18px;max-width:none;background:#041722}
.ovpn-preview.fullscreen pre{height:calc(100vh - 250px);font-size:13px}
.ovpn-toast{position:fixed;right:22px;bottom:22px;z-index:10000;background:#102f43;border:1px solid rgba(104,200,121,.45);color:#fff;padding:12px 16px;border-radius:11px;box-shadow:0 15px 40px rgba(0,0,0,.35);font-size:12px;animation:ovpnIn .18s ease}
@keyframes ovpnIn{from{transform:translateY(8px);opacity:0}
}
@media(max-width:1250px){.ovpn-workspace{grid-template-columns:220px minmax(0,1fr)}
.ovpn-preview{grid-column:1/-1;position:relative;top:auto;display:grid;grid-template-columns:1fr 1fr}
.ovpn-preview-head{grid-column:1/-1}
.ovpn-preview pre{height:310px}
.ovpn-analysis-head{border-top:0;border-left:1px solid var(--ovpn-line)}
.ovpn-analysis{border-left:1px solid var(--ovpn-line);max-height:310px}
}
@media(max-width:850px){.ovpn-page{padding-left:0!important;padding-right:0!important}
.ovpn-shell{padding:20px!important}
.ovpn-heading,.ovpn-toolbar{align-items:flex-start;flex-direction:column}
.ovpn-privacy{white-space:normal}
.ovpn-workspace{grid-template-columns:1fr}
.ovpn-sidebar{position:relative;top:auto;display:flex;overflow:auto;gap:5px}
.ovpn-sidebar-title{display:none}
.ovpn-nav{min-width:150px}
.ovpn-content{grid-column:1}
.ovpn-preview{grid-column:1;grid-template-columns:1fr}
.ovpn-analysis-head,.ovpn-analysis{border-left:0}
.ovpn-grid,.ovpn-cert-grid{grid-template-columns:1fr}
.ovpn-field.full{grid-column:auto}
.ovpn-hero{min-height:0}
.ovpn-hero img{min-height:0}
.ovpn-repeat-row{grid-template-columns:1fr 80px}
.ovpn-repeat-row select{grid-column:1}
.ovpn-repeat-row .ovpn-remove{grid-column:2;grid-row:1}
.ovpn-repeat-row.route{grid-template-columns:1fr 36px}
.ovpn-repeat-row.route input:nth-child(2){grid-column:1}
.ovpn-repeat-row.route .ovpn-remove{grid-column:2;grid-row:1}
.ovpn-switch-grid{grid-template-columns:1fr}
}
@media(max-width:560px){.ovpn-shell{padding:15px!important}
.ovpn-heading h2{font-size:27px}
.ovpn-toolbar-actions{width:100%;flex-wrap:wrap}
.qdf-ovpn-btn{flex:1}
.ovpn-mode-switch{width:100%}
.ovpn-mode{flex:1;padding:9px 7px;font-size:11px}
.ovpn-dropzone{align-items:flex-start;flex-wrap:wrap}
.ovpn-panel{padding:16px}
}