.proxy-page {
  --proxy-control:46px;
  width:100%; max-width:980px; margin:0 auto; padding:20px 0 130px;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.proxy-page * { box-sizing:border-box; }
.proxy-page button { font:inherit; cursor:pointer; }
.proxy-page button:disabled { opacity:.55; cursor:not-allowed; }
.proxy-page :is(button,a):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.proxy-header { display:grid; grid-template-columns:46px minmax(0,1fr) 46px; align-items:center; gap:12px; margin:0 0 19px; }
.proxy-header h1 { margin:0; font-size:26px; font-weight:680; text-align:center; letter-spacing:-.035em; }
.proxy-icon-button,.proxy-icon-tile {
  display:grid; place-items:center; flex:none;
  width:var(--proxy-control); height:var(--proxy-control); border-radius:14px;
  border:1px solid var(--line); background:var(--paper); color:var(--icon);
  box-shadow:var(--shadow-small); backdrop-filter:blur(18px) saturate(1.18);
}
.proxy-icon-button { transition:transform var(--t-tap) var(--spring),box-shadow var(--t-expand) var(--spring); }
.proxy-icon-button:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.proxy-icon-button:active { transform:scale(.96); }
.proxy-icon-button svg,.proxy-icon-tile svg { width:22px; height:22px; }
.proxy-icon-tile.small { width:36px; height:36px; border-radius:12px; }
.proxy-icon-tile.small svg { width:19px; height:19px; }
.proxy-hero,.proxy-connection,.proxy-guide-card,.proxy-empty {
  background:var(--paper); border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
}
.proxy-hero { min-height:247px; display:flex; align-items:stretch; justify-content:space-between; gap:20px; padding:25px 27px; }
.proxy-hero-main { display:flex; align-items:flex-start; gap:22px; min-width:0; }
.proxy-telegram-icon { width:78px; height:78px; flex:none; display:grid; place-items:center; border-radius:24px; border:1px solid rgba(34,158,217,.13); background:rgba(34,158,217,.08); box-shadow:var(--shadow-small); }
.proxy-telegram-icon .telegram-logo { width:56px; height:56px; object-fit:contain; }
.proxy-hero h2 { margin:3px 0 8px; font-size:25px; letter-spacing:-.035em; line-height:1.15; }
.proxy-access-badge,.proxy-badge,.proxy-server-line em { display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; border-radius:999px; font-style:normal; white-space:nowrap; }
.proxy-access-badge { padding:6px 11px; background:rgba(52,199,89,.11); color:#188341; font-size:13px; font-weight:570; }
.proxy-access-badge::before,.proxy-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.proxy-hero p { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.4; }
.proxy-hero-metrics { display:flex; align-items:center; gap:0; margin-top:21px; }
.proxy-hero-metrics>div { min-width:110px; padding-right:20px; }
.proxy-hero-metrics>div+div { border-left:1px solid var(--line); padding-left:20px; }
.proxy-hero-metrics strong,.proxy-hero-metrics small { display:block; }
.proxy-hero-metrics strong { font-size:25px; font-weight:660; line-height:1; }
.proxy-hero-metrics small { margin-top:5px; color:var(--muted); font-size:12px; }
.proxy-hero-side { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:12px; }
.proxy-create,.proxy-purchase button,.proxy-action.primary {
  min-height:var(--proxy-control); border:0; border-radius:14px; padding:0 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--system-button); color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 8px 19px rgba(0,90,190,.17),inset 0 1px rgba(255,255,255,.23);
  transition:transform var(--t-tap) var(--spring),box-shadow var(--t-expand) var(--spring),background var(--t-tab-color) var(--ease-out);
}
.proxy-create:hover,.proxy-purchase button:hover,.proxy-action.primary:hover { background:var(--system-button-hover); transform:translateY(-2px); box-shadow:0 11px 23px rgba(0,90,190,.22); }
.proxy-create:active,.proxy-purchase button:active,.proxy-action:active { transform:scale(.975); }
.proxy-create svg { width:18px; height:18px; }
.proxy-progress { width:120px; height:120px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; isolation:isolate; background:conic-gradient(var(--accent) var(--progress),rgba(118,118,128,.12) 0); box-shadow:var(--shadow-small); }
.proxy-progress::before { content:""; position:absolute; inset:11px; border-radius:50%; background:var(--paper); z-index:-1; }
.proxy-progress strong { font-size:31px; line-height:1; }
.proxy-progress small { margin-top:3px; font-size:11px; color:var(--muted); }
.proxy-purchase { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-end; gap:8px; max-width:315px; }
.proxy-purchase button { min-width:0; padding:0 12px; }
.proxy-purchase button.soft,.proxy-purchase button.link-button { background:var(--paper); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-small); }
.proxy-purchase button.link-button { width:100%; }
.proxy-connections { margin-top:24px; }
.proxy-connections>h2,.proxy-guide>h2 { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:22px; font-weight:660; letter-spacing:-.03em; }
.proxy-connections>h2 span { display:grid; place-items:center; min-width:29px; height:29px; padding:0 6px; border-radius:10px; background:rgba(118,118,128,.09); font-size:14px; }
.proxy-connection { padding:15px 18px; margin-bottom:10px; }
.proxy-connection-head { display:flex; align-items:center; gap:15px; }
.proxy-connection-head>.proxy-icon-tile { width:48px; height:48px; border-radius:16px; }
.proxy-connection-title { flex:1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:6px 9px; }
.proxy-connection-title strong { font-size:16px; font-weight:640; }
.proxy-connection-title small { width:100%; color:var(--muted); font-size:12px; }
.proxy-badge { padding:4px 8px; background:rgba(118,118,128,.09); color:var(--muted); font-size:11px; }
.proxy-badge.online { color:#188341; background:rgba(52,199,89,.11); }
.proxy-expand { width:38px; height:38px; border-radius:13px; }
.proxy-expand svg { width:18px; height:18px; }
.proxy-connection-detail { margin:16px 0 0 63px; padding:15px; border:1px solid var(--line); border-radius:18px; background:rgba(118,118,128,.035); }
.proxy-server-line { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.proxy-server-line em { margin-left:auto; padding:5px 9px; background:rgba(52,199,89,.10); color:#188341; font-size:11px; }
.proxy-server-line em.paid { color:var(--muted); background:rgba(118,118,128,.09); }
.proxy-link-row { display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:8px; margin-top:13px; }
.proxy-link-row code { display:flex; align-items:center; height:46px; min-width:0; padding:0 13px; border-radius:13px; background:rgba(118,118,128,.07); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--ink); }
.proxy-connection-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }
.proxy-action { min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 11px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-small); font-size:12px; font-weight:590; text-decoration:none; text-align:center; transition:transform var(--t-tap) var(--spring),box-shadow var(--t-expand) var(--spring); }
.proxy-action:not(.primary):hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.proxy-action svg { width:17px; height:17px; }
.proxy-action .telegram-logo { width:19px; height:19px; }
.proxy-action[aria-disabled="true"] { opacity:.5; pointer-events:none; }
.proxy-unavailable { margin:12px 0 0; font-size:12px; color:var(--muted); }
.proxy-empty { padding:24px; color:var(--muted); font-size:13px; }
.proxy-guide { margin-top:24px; }
.proxy-guide-card { padding:18px 22px 3px; }
.proxy-guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-bottom:17px; }
.proxy-guide-step { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.proxy-guide-step>b { flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-deep); font-size:12px; }
.proxy-guide-step .proxy-icon-tile { width:36px; height:36px; border-radius:12px; }
.proxy-guide-step .proxy-icon-tile svg { width:18px; height:18px; }
.proxy-guide-step strong,.proxy-guide-step small { display:block; }
.proxy-guide-step strong { margin:2px 0 3px; font-size:12px; line-height:1.3; }
.proxy-guide-step small { color:var(--muted); font-size:11px; line-height:1.35; }
.proxy-guide-open { width:100%; min-height:60px; display:flex; align-items:center; gap:12px; padding:9px 0; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; font-size:14px; }
.proxy-guide-open>.aegis-svg { width:18px; height:18px; margin-left:auto; }
.proxy-guide-more { border-top:1px solid var(--line); padding:11px 0 18px; color:var(--muted); font-size:12px; line-height:1.5; }
.proxy-guide-more p { margin:5px 0 10px; }
.proxy-guide-more button { min-height:40px; padding:0 13px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-small); }
html[data-theme="dark"] .proxy-access-badge,html[data-theme="dark"] .proxy-badge.online,html[data-theme="dark"] .proxy-server-line em.included { color:#75d89a; background:rgba(52,199,89,.13); }

/* One icon surface for standalone controls throughout the cabinet. */
.screen :is(.simple-header>button,.keys-header>button:first-child,.head-theme,.support-chat-back,.ref-header button,.proxy-header button),
.screen :is(.contact-row>span:not(.telegram),.row-icon,.news-icon,.service-card>span,.ref-link-icon,.ref-step-icon,.ref-history-icon,.support-shortcuts button>span,.support-new-card>span,.ticket-type-icon,.access-key-icon,.keys-buy-row>span,.key-art) {
  background:var(--paper)!important; border:1px solid var(--line)!important; box-shadow:var(--shadow-small)!important;
  border-radius:13px; backdrop-filter:blur(18px) saturate(1.15);
}
.screen .contact-row>span.telegram { width:35px; height:35px; display:grid; place-items:center; border:1px solid var(--line); border-radius:13px; background:var(--paper); box-shadow:var(--shadow-small); }
.screen .contact-row>span:not(.telegram),.screen .row-icon { width:35px; height:35px; display:grid; place-items:center; }
.screen .news-icon { background:var(--paper)!important; }
.screen .service-card>span { background:var(--paper)!important; }
.screen .contact-row { min-height:52px; }
@media (hover:hover) {
  .mobile-nav button:hover:not(.active) { color:var(--muted)!important; }
  .mobile-nav button.active:hover { color:var(--accent-deep)!important; }
  .mobile-nav button:hover span { color:inherit!important; }
}
@media (max-width:720px) {
  .proxy-page { padding:15px 0 130px; }
  .proxy-header h1 { font-size:18px; }
  .proxy-header { grid-template-columns:42px minmax(0,1fr) 42px; }
  .proxy-header .proxy-icon-button { width:42px; height:42px; }
  .proxy-hero { display:block; padding:19px; }
  .proxy-hero-main { gap:12px; }
  .proxy-telegram-icon { width:54px; height:54px; border-radius:18px; }
  .proxy-telegram-icon .telegram-logo { width:39px; height:39px; }
  .proxy-hero h2 { font-size:19px; }
  .proxy-hero p { font-size:12px; }
  .proxy-hero-metrics { margin-top:14px; }
  .proxy-hero-metrics>div { min-width:0; padding-right:14px; }
  .proxy-hero-metrics>div+div { padding-left:14px; }
  .proxy-hero-metrics strong { font-size:21px; }
  .proxy-hero-side { margin-top:18px; align-items:stretch; flex-direction:row; }
  .proxy-create { flex:1; text-align:center; }
  .proxy-progress { width:58px; height:58px; }
  .proxy-progress::before { inset:6px; }
  .proxy-progress strong { font-size:16px; }
  .proxy-progress small { font-size:8px; }
  .proxy-purchase { max-width:none; justify-content:stretch; }
  .proxy-purchase button { flex:1; }
  .proxy-connections>h2,.proxy-guide>h2 { font-size:20px; }
  .proxy-connection { padding:13px; }
  .proxy-connection-head { gap:9px; }
  .proxy-connection-head>.proxy-icon-tile { width:40px; height:40px; border-radius:13px; }
  .proxy-connection-title strong { font-size:14px; }
  .proxy-connection-title small { font-size:11px; }
  .proxy-connection-detail { margin-left:0; padding:11px; }
  .proxy-server-line em { font-size:10px; }
  .proxy-connection-actions { grid-template-columns:1fr; }
  .proxy-guide-card { padding:15px 15px 2px; }
  .proxy-guide-steps { grid-template-columns:1fr; gap:14px; }
}

/* Compact proxy status and disclosure cards. Details are data, not another card. */
.proxy-page .proxy-hero {
  min-height:0; display:grid; grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center; gap:18px; padding:22px 24px;
}
.proxy-page .proxy-telegram-icon { width:64px; height:64px; border-radius:23px; }
.proxy-page .proxy-telegram-icon .telegram-logo { width:46px; height:46px; }
.proxy-hero-copy h2 { margin:0 0 8px; font-size:21px; }
.proxy-hero-copy p { margin:7px 0 0; }
.proxy-hero-copy p strong { color:var(--ink); font-weight:620; }
.proxy-sync-note { display:block; margin-top:7px; color:var(--muted); font-size:11px; }
.proxy-page .proxy-hero-side { align-self:center; align-items:stretch; justify-content:center; }
.proxy-page .proxy-hero-side>.proxy-action { min-width:188px; }
.proxy-access-badge.is-idle { background:rgba(118,118,128,.10); color:var(--muted); }
.proxy-page .proxy-icon-button,.proxy-page .proxy-icon-tile { border-radius:17px; }
.proxy-page .proxy-icon-tile.small { border-radius:15px; }
.proxy-demo-label { width:max-content; margin:0 0 10px auto; color:var(--muted); font-size:11px; }
.proxy-page .proxy-connection { padding:0; overflow:hidden; }
.proxy-page .proxy-connection-head {
  width:100%; min-height:86px; padding:15px 18px; border:0; background:transparent;
  color:var(--ink); text-align:left; cursor:pointer;
}
.proxy-page .proxy-connection-head:hover { background:rgba(118,118,128,.035); }
.proxy-page .proxy-connection-head:focus-visible { outline-offset:-4px; }
.proxy-page .proxy-connection-title { flex:1; }
.proxy-page .proxy-connection-detail {
  margin:0 18px; padding:14px 0 18px; border:0; border-top:1px solid var(--line);
  border-radius:0; background:transparent;
}
.proxy-detail-list { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; }
.proxy-detail-list>div { min-width:0; }
.proxy-detail-list dt { margin-bottom:3px; color:var(--muted); font-size:11px; }
.proxy-detail-list dd { margin:0; color:var(--ink); font-size:13px; font-weight:560; overflow-wrap:anywhere; }
.proxy-stats-time { margin:14px 0; color:var(--muted); font-size:11px; line-height:1.4; }
.proxy-page .proxy-connection-detail>.proxy-action { width:100%; margin-top:16px; }
.proxy-page .proxy-connection-detail>.proxy-unavailable { margin-top:16px; }
.proxy-page .proxy-purchase { max-width:340px; }
.keys-buy-row.buy-key,.keys-buy-row.buy-key:hover { background:rgba(52,199,89,.075)!important; }
.keys-buy-row>span { color:#248a50!important; background:rgba(52,199,89,.11)!important; border-radius:16px!important; }
.keys-buy-row>span .aegis-svg { width:22px; height:22px; }
.screen :is(.contact-row>span:not(.telegram),.row-icon,.news-icon,.service-card>span,.ref-link-icon,.ref-step-icon,.ref-history-icon,.support-shortcuts button>span,.support-new-card>span,.ticket-type-icon,.access-key-icon,.keys-buy-row>span,.key-art,.plan-overview>span,.purchase-title>span,.new-ticket>span,.device-row>span,.key-card>span) {
  border-radius:16px!important; background:var(--paper)!important;
  border:1px solid var(--line)!important; box-shadow:var(--shadow-small)!important;
}
.keys-buy-row>span svg { color:#248a50!important; }
.screen .keys-buy-row>span { color:#248a50!important; background:rgba(52,199,89,.11)!important; }
.screen .balance-service>span { color:#248a50!important; background:rgba(52,199,89,.10)!important; }
.screen :is(.device-row>button,.mini.danger)>span { border-radius:16px; }
@media (max-width:720px) {
  .proxy-page .proxy-hero { grid-template-columns:48px minmax(0,1fr); gap:10px 12px; padding:17px; }
  .proxy-page .proxy-telegram-icon { width:48px; height:48px; border-radius:17px; }
  .proxy-page .proxy-telegram-icon .telegram-logo { width:36px; height:36px; }
  .proxy-hero-copy h2 { font-size:18px; }
  .proxy-page .proxy-hero-side { grid-column:1 / -1; width:100%; margin:6px 0 0; }
  .proxy-page .proxy-hero-side>.proxy-action { width:100%; }
  .proxy-page .proxy-connection-head { min-height:76px; padding:13px; }
  .proxy-page .proxy-connection-detail { margin:0 13px; }
  .proxy-detail-list { gap:10px 14px; }
}