:root {
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--tg-theme-bg-color, #10141c);
    color: var(--tg-theme-text-color, #ffffff);
}

.app {
    max-width: 520px;
    margin: 0 auto;
    padding: 22px 18px 40px;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--tg-theme-hint-color, #8a94a5);
}

h1 {
    margin: 4px 0 0;
    font-size: 28px;
}

.dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #777;
}

.dot.ok {
    background: #35d07f;
}

.hero,
.card,
.server {
    background: var(
        --tg-theme-secondary-bg-color,
        #1a202b
    );
    border-radius: 18px;
}

.hero {
    margin-top: 24px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.logo {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(
        --tg-theme-button-color,
        #2787f5
    );
    color: var(
        --tg-theme-button-text-color,
        #ffffff
    );
    font-size: 29px;
    font-weight: 700;
}

.hero-title {
    font-size: 18px;
    font-weight: 700;
}

.muted {
    color: var(--tg-theme-hint-color, #8a94a5);
}

.section-title {
    margin: 28px 2px 12px;
    font-weight: 700;
}

.card {
    padding: 17px;
    margin-bottom: 10px;
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.name {
    font-size: 17px;
    font-weight: 700;
}

.ip {
    margin-top: 5px;
    font-family: monospace;
}

.platform {
    margin-top: 10px;
}

.online {
    color: #35d07f;
}

.offline {
    color: var(--tg-theme-hint-color, #8a94a5);
}

button {
    width: 100%;
    border: 0;
    border-radius: 15px;
    padding: 16px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    background: var(
        --tg-theme-button-color,
        #2787f5
    );
    color: var(
        --tg-theme-button-text-color,
        #ffffff
    );
}

.server {
    margin-top: 26px;
    padding: 17px;
    display: flex;
    justify-content: space-between;
}

.right {
    text-align: right;
}

.hidden {
    display: none !important;
}

.denied {
    margin-top: 28px;
    padding: 22px;
    border-radius: 18px;
    background: var(
        --tg-theme-secondary-bg-color,
        #1a202b
    );
    text-align: center;
}

.denied-title {
    font-size: 20px;
    font-weight: 700;
}

.denied-text {
    margin-top: 8px;
    color: var(--tg-theme-hint-color, #8a94a5);
}
#vpnModal.vpn-modal{position:fixed!important;inset:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;box-sizing:border-box!important;background:rgba(0,0,0,.62)!important;backdrop-filter:blur(5px);overflow:auto}
#vpnModal .vpn-box{width:100%!important;max-width:420px!important;margin:auto!important;padding:22px!important;box-sizing:border-box!important;border-radius:22px!important;background:var(--tg-theme-bg-color,#182533)!important;color:var(--tg-theme-text-color,#fff)!important;box-shadow:0 18px 60px rgba(0,0,0,.45)!important}
#vpnModal h3{margin:0 0 20px!important;font-size:22px!important;line-height:1.2!important}
#vpnModal label{display:block!important;margin:15px 0 7px!important;font-size:13px!important;font-weight:600!important;opacity:.75!important}
#vpnModal input,#vpnModal select{display:block!important;width:100%!important;height:50px!important;margin:0!important;padding:0 14px!important;box-sizing:border-box!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:13px!important;outline:none!important;background:var(--tg-theme-secondary-bg-color,#243447)!important;color:var(--tg-theme-text-color,#fff)!important;font-size:16px!important}
#vpnModal input:focus,#vpnModal select:focus{border-color:var(--tg-theme-button-color,#5794cf)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--tg-theme-button-color,#5794cf) 25%,transparent)!important}
#vpnModal .vpn-note{margin-top:14px!important;font-size:12px!important;line-height:1.45!important;opacity:.6!important}
#vpnModal .vpn-actions{display:grid!important;grid-template-columns:1fr 1.35fr!important;gap:10px!important;margin-top:22px!important}
#vpnModal .vpn-actions button{width:100%!important;min-height:48px!important;margin:0!important;border:0!important;border-radius:13px!important;font-size:15px!important;font-weight:700!important}
#vpnModal #vpnCancel{background:var(--tg-theme-secondary-bg-color,#2b3b4d)!important;color:var(--tg-theme-text-color,#fff)!important}
#vpnModal #vpnCreate{background:var(--tg-theme-button-color,#5794cf)!important;color:var(--tg-theme-button-text-color,#fff)!important}
body.vpn-modal-open{overflow:hidden!important}
#vpnModal .vpn-created{padding:18px 0;text-align:center}
#vpnModal .vpn-created strong{display:block;font-size:21px;margin-bottom:8px}
#vpnModal .vpn-created .vpn-ip{font-size:17px;opacity:.8}
.device-actions{display:flex;align-items:center;gap:12px}
button.device-delete{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;margin:0!important;border-radius:50%!important;background:rgba(255,80,80,.12)!important;color:#ff6b6b!important;font-size:25px!important;font-weight:400!important;line-height:30px!important;border:1px solid rgba(255,80,80,.2)!important}
button.device-delete:active{transform:scale(.92)}
.device-compact{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:0!important;padding:17px 20px!important;cursor:pointer}
.device-compact .name{margin:0!important}
.device-box{position:relative}
.detail-close{position:absolute!important;right:14px!important;top:12px!important;width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;color:inherit!important;font-size:30px!important;opacity:.55}
.detail-status{margin:-8px 0 20px}
.detail-grid{display:grid;grid-template-columns:105px 1fr;gap:11px 14px;margin:18px 0 22px;font-size:14px}
.detail-grid span{opacity:.55}.detail-grid b{font-weight:500;word-break:break-all}
.ping-result{text-align:center;min-height:24px;margin:8px 0;font-size:14px}
.device-box>button:not(.detail-close){width:100%!important;margin-top:10px!important}
.danger-button{background:rgba(255,75,75,.15)!important;color:#ff6b6b!important;border:1px solid rgba(255,75,75,.3)!important}
.device-compact{
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  padding:0 20px!important;
  box-sizing:border-box!important;
}
.device-compact .name,
.device-compact .online,
.device-compact .offline{
  margin:0!important;
}
.traffic-result{
  text-align:center;
  line-height:1.6;
  min-height:24px;
  margin:8px 0;
  font-size:14px;
}
.vpn-confirm-modal{z-index:10050}
.confirm-box{position:relative;text-align:center}
.confirm-close{position:absolute;right:14px;top:10px}
.confirm-device{font-size:16px;line-height:1.6;margin:14px 0}
.confirm-warning{font-size:13px;opacity:.72;margin:12px 0}
.delete-result{min-height:22px;margin:8px 0;font-size:13px}
.vpn-confirm-modal{
  z-index:100001!important;
}
.delete-confirm-layer{position:absolute!important;inset:0!important;z-index:50!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:20px!important;background:rgba(0,0,0,.68)!important;backdrop-filter:blur(5px)}
.delete-confirm-card{position:relative;width:min(360px,100%);padding:24px 18px 18px;box-sizing:border-box;border-radius:20px;background:var(--tg-theme-secondary-bg-color,#202d3a);color:var(--tg-theme-text-color,#fff);text-align:center}
.delete-confirm-card h3{margin:4px 36px 18px;font-size:21px}
.delete-confirm-card p{margin:16px 4px;color:var(--tg-theme-hint-color,#9ba7b4);font-size:14px;line-height:1.45}
.delete-confirm-device{display:flex;flex-direction:column;gap:5px;font-size:17px}
.delete-confirm-device span{font-size:14px;color:var(--tg-theme-hint-color,#9ba7b4)}
.delete-confirm-x{position:absolute!important;right:12px!important;top:10px!important;width:36px!important;height:36px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;font-size:28px!important;line-height:34px!important}
.delete-confirm-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:18px!important}
.delete-confirm-actions button{width:100%!important;margin:0!important}
#serverCard{cursor:pointer}
.server-status-box{position:relative;padding:17px!important;max-height:calc(100vh - 30px);overflow:hidden}
.server-status-box h3{margin:2px 40px 12px;font-size:21px}
.route-state{padding:9px 11px;margin-bottom:9px;border-radius:12px;background:rgba(255,255,255,.05);font-size:14px;font-weight:700}
.route-state span{float:right;font-weight:400;opacity:.7}
.server-node{padding:11px;margin-top:8px;border-radius:15px;background:rgba(255,255,255,.05)}
.server-node-head{display:flex;justify-content:space-between;align-items:center}
.server-node-head>div{display:flex;gap:8px;align-items:baseline}
.server-node-head b{font-size:17px}
.server-node-head small{opacity:.55}
.server-node-head>span{font-size:13px}
.server-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.sm{padding:7px 4px;text-align:center;border-radius:9px;background:rgba(255,255,255,.045)}
.sm small{display:block;font-size:9px;opacity:.55;margin-bottom:2px}
.sm b{font-size:14px}

/* iPhone Telegram share fallback */
.vpn-share-text{
 width:100%;min-height:210px;max-height:42vh;
 box-sizing:border-box;margin:12px 0;padding:12px;
 border-radius:12px;font:13px/1.45 monospace;
 resize:none;
}
.ios-share-actions{margin-top:4px}