#clash-admin-root[hidden]{display:none!important}
.clash-page{max-width:1160px;margin:0 auto;padding:28px 24px 48px;color:var(--bs-body-color,#e9edf4)}
.clash-page h1{font-size:clamp(24px,3vw,32px);font-weight:650;margin:5px 0 10px}
.clash-page h2{font-size:20px;font-weight:600;margin:0}
.clash-page h3{font-size:18px;font-weight:600;margin:0 0 10px}
.clash-page p{line-height:1.55;color:var(--bs-secondary-color,#aab3c2);margin:0}
.clash-eyebrow{font-size:11px;letter-spacing:.16em;font-weight:700;color:#71b8fa}
.clash-header,.clash-form-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.clash-header{margin-bottom:26px}.clash-form-top{margin-bottom:20px}
.clash-create,.clash-devices{padding:24px;border:1px solid var(--bs-border-color,#404751);border-radius:14px;background:var(--bs-body-bg,#212529)}
.clash-page button,.clash-action{border:1px solid var(--bs-border-color,#545e6c);border-radius:8px;background:transparent;color:inherit;padding:10px 15px;line-height:1.35;font:inherit;font-size:14px;text-decoration:none;cursor:pointer;text-align:center}
.clash-page button:hover,.clash-action:hover{background:rgba(119,170,230,.1);color:inherit}
.clash-page button:focus-visible,.clash-page input:focus-visible,.clash-action:focus-visible{outline:3px solid #6db4fa;outline-offset:3px}
.clash-page button:disabled{opacity:.5;cursor:default}
.clash-page .clash-primary{background:#2076c8;color:#fff;border-color:#2076c8}
.clash-page .clash-primary:hover{background:#1768b5}
.clash-page label{display:block;font-size:13px;font-weight:550;margin-bottom:8px}
.clash-page input{display:block;width:100%;border:1px solid var(--bs-border-color,#545e6c);background:var(--bs-tertiary-bg,#292e35);color:inherit;border-radius:8px;padding:12px 14px;font-size:16px;box-sizing:border-box}
.clash-page input[readonly]{opacity:.9}
.clash-buttons{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;margin-top:18px}
.clash-buttons button{padding:13px 15px;font-weight:550}
.clash-page .clash-error{margin-top:18px;padding:12px 14px;border:1px solid #b85b5b;background:rgba(200,60,60,.09);border-radius:8px;color:#f3a5a5}
.clash-page .clash-note:not(:empty),.clash-page .clash-progress{margin-top:15px}
.clash-note{color:#77c79d!important}
.clash-results{margin-top:30px}.clash-results>p{margin:10px 0 20px}
.clash-profile-grid{display:grid;grid-template-columns:1fr;gap:16px}
.clash-profile{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:24px;border:1px solid var(--bs-border-color,#404751);border-radius:14px;background:var(--bs-body-bg,#212529)}
.clash-profile-copy{flex:1;min-width:0}
.clash-profile p{font-size:14px}.clash-countries{display:inline-block;margin:14px 0 18px;padding:5px 10px;border-radius:6px;background:rgba(80,150,230,.12);font-size:12px;color:#91c6fa}
.clash-page .clash-url{font-family:ui-monospace,monospace;font-size:12px;margin-top:7px}
.clash-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.clash-card-actions button,.clash-card-actions a{font-size:12px;padding:9px 11px}
.clash-qr{display:block;flex:0 0 220px;width:220px;height:220px;max-width:100%;background:white;border-radius:8px;image-rendering:pixelated}
.clash-devices{margin-top:30px}.clash-devices h2 span{font-size:13px;color:var(--bs-secondary-color,#aab3c2);margin-left:7px}
.clash-device-list{margin-top:18px}.clash-device-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--bs-border-color,#404751)}
.clash-device-row>div{flex:1;min-width:0}.clash-device-row strong{font-size:14px;overflow-wrap:anywhere}
.clash-device-row small{display:block;font-size:12px;color:var(--bs-secondary-color,#aab3c2);margin-top:5px}
.clash-status{font-size:11px;border-radius:5px;padding:5px 8px;background:rgba(45,160,95,.1);color:#80cca3}
.clash-inactive{color:#d9a1a1;background:rgba(180,70,70,.1)}
.clash-empty{margin-top:18px!important}#clash-nav a{display:block}
@media(max-width:680px){
 .clash-page{padding:22px 14px 36px}.clash-header{align-items:flex-start;gap:10px}
 .clash-header>button{padding:8px 10px;font-size:12px}
 .clash-create,.clash-devices{padding:18px}.clash-buttons{grid-template-columns:1fr;gap:10px}
 .clash-form-top{align-items:flex-start}.clash-form-top button{font-size:12px;padding:8px}
 .clash-profile{flex-direction:column;padding:18px;gap:20px;align-items:stretch}
 .clash-qr{align-self:center;flex-basis:auto}.clash-device-row{gap:10px;flex-wrap:wrap}
 .clash-device-row>div{flex-basis:65%}.clash-device-row>button{padding:8px 10px;font-size:12px}
 .clash-status{font-size:10px}.clash-card-actions>*{flex:1}.clash-page h2{font-size:18px}
}