*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:#f4f6fb;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#f4f6fb}.auth-card{width:100%;max-width:420px}.auth-box{position:relative;width:100%;max-width:420px}.auth-lang{position:absolute;right:0;bottom:calc(100% + 8px);z-index:10}.lang-toggle{position:relative;display:inline-flex;width:96px;height:34px;padding:3px;border:1px solid #d0d5dd;border-radius:6px;background:transparent;cursor:pointer}.lang-toggle .lang-thumb{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:26px;border-radius:4px;background:#fff;box-shadow:0 1px 2px #10182824;transition:transform .18s ease}.lang-toggle[data-lang=en] .lang-thumb{transform:translate(100%)}.lang-toggle span:not(.lang-thumb){position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:400;color:#667085;-webkit-user-select:none;user-select:none}.lang-toggle span.active{color:#101828}.app-header{display:flex;align-items:center;gap:16px;padding:0 24px}.app-logo{font-weight:700;font-size:17px;white-space:nowrap}.app-nav{flex:1;min-width:0;border-bottom:none!important;background:transparent!important}.app-user{color:#475467;font-size:13px;white-space:nowrap}.page{max-width:1180px;margin:0 auto;padding:12px 24px 24px}.page-title{margin-bottom:20px}.vpn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.vpn-card .ant-card-head-title{font-size:16px}.vpn-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;color:#475467;font-size:13px}.vpn-actions{display:flex;flex-wrap:wrap;gap:8px}.legend{color:#667085;font-size:12px}.instr-step{margin-bottom:24px}.instr-step img{width:100%;max-width:620px;border:1px solid #e4e7ec;border-radius:10px;display:block;margin:12px 0}.instr-step h4{margin:0 0 4px}.instr-step p{margin:0;color:#475467}.traffic-cell{font-size:12px;color:#475467;white-space:nowrap}.settings-tabs .ant-tabs-nav{margin-bottom:0}.settings-tabs .ant-tabs-content-holder{background:#fff;border:1px solid #e4e7ec;border-radius:0 0 12px 12px;padding:24px}@media (max-width: 768px){.settings-tabs .ant-tabs-content-holder{padding:16px}}@media (max-width: 768px){.settings-tabs .ant-col{flex:0 0 100%;max-width:100%}}.status-dot{display:inline-block;width:6px;height:6px;margin-left:3px;border-radius:50%;background:#12b76a;vertical-align:super;position:relative;top:-3px}.host-stats{font-size:13px;color:#475467;margin-bottom:12px}.host-stale{color:#b54708}.graphs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.vpn-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}.vpn-column{display:flex;flex-direction:column;gap:12px;height:100%}.vpn-tile{border-radius:16px;border:1px solid #e4e7ec;padding:24px;height:130px;min-height:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:6px;font:inherit;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}.vpn-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px #1018281a}.vpn-tile.selected{outline:3px solid #4f46e5;outline-offset:2px}.vpn-tile-name{font-size:28px;font-weight:700;line-height:1.1}.vpn-tile-state{font-size:14px;font-weight:500}.vpn-tile-stale{font-size:12px;color:#b54708}.tile-up{background:#e8f5e9;border-color:#a5d6a7;color:#1b5e20}.tile-down{background:#ffebee;border-color:#ef9a9a;color:#b71c1c}.tile-protected{background:#c8e6c9;border-color:#81c784;color:#33691e}.tile-unknown{background:#f2f4f7;border-color:#e4e7ec;color:#667085}.vpn-metric{flex:1;background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:14px 16px}.uptime{margin-top:8px}.uptime-bar{display:flex;align-items:flex-end}.day-box{flex:1 1 0;height:28px;border-radius:2px;background:#28a745;box-sizing:border-box;cursor:default}.day-box.status-green{opacity:.45}.day-box.status-yellow-green{background:#95a920}.day-box.status-yellow{background:#d7ab0a}.day-box.status-orange{background:#e07d09}.day-box.status-red{background:#dd3841}.day-box.status-protected{background:#c8e6c9;outline:1px solid #81c784;outline-offset:-1px}.day-box.status-no-data{background:transparent;outline:1px solid #bbb;outline-offset:-1px}.uptime-caption{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#667085;margin-top:6px}.uptime-tooltip{position:fixed;z-index:30;width:360px;padding:12px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 10px 30px #1018282e}.uptime-tooltip .tt-date{font-weight:600;margin-bottom:4px}.uptime-tooltip .tt-degradation{font-size:12px;color:#667085;margin-bottom:8px}.uptime-tooltip img{width:100%;height:auto;display:block;border-radius:6px}.vpn-detail{background:#fff;border:1px solid #e4e7ec;border-radius:16px;padding:20px}.vpn-detail-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}.vpn-detail-head h3{margin:0;font-size:20px}.vpn-detail-graphs{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.vpn-detail-graphs img{width:100%;height:auto;display:block}.traffic-graphs{display:flex;flex-direction:column;gap:16px}@media (max-width: 900px){.graphs-grid,.vpn-cards{grid-template-columns:1fr}}.graphs-grid img{display:block;width:100%;height:auto;border:1px solid #e4e7ec;border-radius:8px;background:#fff}@media (max-width: 900px){.graphs-grid{grid-template-columns:1fr}}
