:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#12273f;background:#f2f5fa;font-size:15px;line-height:1.5}*{box-sizing:border-box}body{margin:0}.shell{max-width:1120px;margin:auto;padding:0 28px}header{display:flex;align-items:center;justify-content:space-between;min-height:100px;border-bottom:1px solid #dbe3ed}.brand{display:flex;gap:12px;align-items:center;font-size:26px;font-weight:750;text-decoration:none;color:#11294b}.badge,.status{border-radius:30px;padding:6px 12px;font-size:13px;background:#e3eaf4}.welcome{padding:90px 0 100px;max-width:720px;min-height:70vh}.eyebrow{letter-spacing:.15em;color:#397a7f;font-size:12px;font-weight:750}h1{font-size:44px;line-height:1.18;letter-spacing:-.025em;margin:12px 0 22px}h2{font-size:25px;margin:0 0 22px}h3{font-size:19px;margin:0 0 6px}.lead{font-size:19px;color:#52667b;max-width:530px;margin-bottom:34px}.button,button{display:inline-block;border:0;background:#123c68;color:white;border-radius:9px;padding:11px 17px;font:inherit;font-weight:650;text-decoration:none;cursor:pointer}.quiet{background:#edf2f8;color:#214367}.disabled{background:#dbe3ed;color:#617285;cursor:default}.muted{color:#64758b}.small{font-size:13px}.identity{display:flex;justify-content:flex-end;align-items:center;gap:18px;padding:18px 0}.identity form{margin:0}nav{display:flex;gap:26px;padding:10px 0 24px}nav a{color:#244967;text-decoration:none}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.heading h1{font-size:34px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 40px}.stats>div{background:#112b4b;color:white;border-radius:14px;padding:20px 24px}.stats strong{display:block;font-size:34px}.stats span{color:#b4c9e0}.card{background:white;border:1px solid #dde5ef;border-radius:14px;padding:24px;margin-bottom:16px;box-shadow:0 3px 12px #12273f04}section{margin:38px 0}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}.actions form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0}.on{background:#e2f4ed;color:#206b50}.off{background:#fff0dc;color:#8c601d}label{display:block;margin:16px 0;font-size:14px;font-weight:600}input,select,textarea{font:inherit;border:1px solid #cad5e4;border-radius:8px;padding:10px 12px;background:#fff;color:#12273f}label>input,label>select{display:block;width:100%;margin-top:6px}input:focus,textarea:focus,select:focus{outline:3px solid #b9dada;border-color:#468e92}.check{font-weight:400;display:flex;align-items:center;gap:8px;margin:8px 0}.check input{width:auto;margin:0}.checks{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0}details summary{cursor:pointer;font-weight:650;color:#164b73}details[open] summary{margin-bottom:18px}.notice{padding:15px 20px;border-radius:10px;background:#e1f1ed;margin:18px 0}.error{color:#9e3540}.notice.error{background:#fff0f1}.config{width:100%;font-family:monospace;font-size:13px}.empty{padding:20px;color:#64758b}.wrap{overflow-wrap:anywhere}.table{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th,td{padding:12px 8px;border-bottom:1px solid #e9edf4}footer{padding:36px 0;color:#708297;border-top:1px solid #dbe3ed;font-size:13px}@media(max-width:650px){.shell{padding:0 16px}header{min-height:82px}.badge{display:none}.welcome{padding:55px 0}h1{font-size:36px}.heading{align-items:flex-start;flex-direction:column;gap:8px}.grid{grid-template-columns:1fr}.stats{gap:8px}.stats>div{padding:15px 12px}.stats strong{font-size:28px}.card{padding:18px}nav{gap:16px;flex-wrap:wrap}.identity{font-size:12px}.actions form{width:100%}}

nav.tabs{gap:6px;padding:8px 0 0;border-bottom:1px solid #dbe3ed;flex-wrap:wrap}nav.tabs a{padding:12px 16px;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;color:#61758b}nav.tabs a:hover{background:#e8eef6;color:#123c68}nav.tabs a.active{background:#fff;border-bottom-color:#123c68;color:#123c68;font-weight:700}@media(max-width:650px){nav.tabs a{padding:10px 12px;font-size:14px}}

/* Compact device cards; other panel sections keep their spacing. */
.device-card{padding:16px 20px;margin-bottom:12px}.device-card .card-heading{gap:12px}.device-card .device-owner{margin:2px 0 0;font-size:13px}.device-card h3{margin:0}.device-settings{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}.device-settings .checks{margin:0;gap:14px}.device-settings .check{margin:0}.device-platform{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400}.device-platform>select{width:auto;margin:0}.device-card .actions{margin-top:12px;gap:12px}.device-card button,.device-card select{padding:8px 12px}.device-card .status{white-space:nowrap}@media(max-width:650px){.device-card{padding:14px}.device-card .card-heading{flex-direction:row;align-items:center}.device-settings{gap:10px}.device-card .actions form{width:auto}}

/* Access control belongs beside the device status. */
/* Keep route choices and their save action together in a vertical block. */
.device-settings{flex-direction:column;align-items:flex-start;gap:12px}.device-settings .checks{flex-direction:column;align-items:flex-start;gap:10px;max-width:100%}.device-settings .check{align-items:baseline;overflow-wrap:anywhere}.device-settings .check input{flex-shrink:0}.device-settings>button{align-self:flex-start}
.card-access{margin-left:auto;flex-shrink:0}.card-access form{display:flex;align-items:center;gap:8px;margin:0}.card .access-switch{display:inline-flex;align-items:center;justify-content:center;width:52px;height:40px;padding:0;border:0;background:transparent;border-radius:8px}.switch-track{display:block;width:44px;height:24px;border-radius:20px;background:#99a6b5;position:relative}.switch-track:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #12273f30;transition:transform .15s}.access-switch[aria-checked="true"] .switch-track{background:#248363}.access-switch[aria-checked="true"] .switch-track:after{transform:translateX(20px)}.access-switch:focus-visible{outline:3px solid #b9dada;outline-offset:2px}.access-switch:disabled{cursor:not-allowed;opacity:.65}.access-off{background:#edf0f4;color:#64758b}.device-card>.card-heading{flex-wrap:wrap}.device-card>.card-heading>div:first-child{min-width:0;overflow-wrap:anywhere;flex:1}@media(prefers-reduced-motion:reduce){.switch-track:after{transition:none}}

.card-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.card-heading>h3,.card-heading>h4,.card-heading>div:first-child{min-width:0;overflow-wrap:anywhere;flex:1}.card-heading h3,.card-heading h4{margin:0}.card-heading .status{flex-shrink:0;white-space:nowrap}.status.error{background:#fff0f1;color:#9e3540}button:disabled{cursor:not-allowed;opacity:.55}.device-user details>form+form{margin-top:16px}

.device-card{scroll-margin-top:16px}.device-config{margin-top:16px;padding-top:14px;border-top:1px solid #e9edf4}.device-config[open] summary{margin-bottom:8px}.device-config p{margin:8px 0}.device-config textarea{display:block;resize:vertical}

.app-policy{margin-top:16px;padding-top:14px;border-top:1px solid #e9edf4}.app-policy textarea,.user-card textarea{width:100%;resize:vertical}.app-policy form{width:100%}

.windows-connections{display:grid;gap:12px;margin:16px 0}
.windows-connection-row{padding:14px 16px;border:1px solid var(--line,#d5dfed);border-radius:12px}
.windows-connection-row form{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;align-items:end;gap:16px;margin:0}
.windows-connection-row label,.windows-connection-add label{margin:0;min-width:0}
.proxy-type{align-self:center;margin-top:22px;padding:5px 9px;border-radius:7px;background:#edf2f8;color:#244766;font-size:12px;font-weight:600;white-space:nowrap}
.proxy-actions{display:flex;gap:12px;flex-wrap:wrap}
.proxy-actions button{margin:0;white-space:nowrap}
.windows-connection-add{padding-top:6px}
.windows-connection-add form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(170px,230px) auto;align-items:end;gap:16px}
@media(max-width:760px){.windows-connection-row form{grid-template-columns:minmax(0,1fr) auto;gap:12px}.proxy-actions{grid-column:1/-1}.windows-connection-add form{grid-template-columns:1fr}.proxy-type{margin-top:22px}}

.device-user{border-top:1px solid var(--border,#dce2ec);padding:18px 0;margin-top:12px}.device-user h4{margin:0 0 10px}.device-user details{margin:12px 0}

.route-kind .disk-fields{display:none}.route-kind #route-disk:checked~.disk-fields{display:block}.route-kind #route-disk:checked~.vps-fields{display:none}.route-kind>input[type=radio]{width:auto;display:inline-block;margin-right:.4rem}.route-kind>label{display:inline-block;margin-right:1rem}.route-kind{border:1px solid #d8e2ef;border-radius:10px;padding:14px;margin:16px 0}

.configuration-qr {overflow:auto; padding:12px; background:white; width:fit-content; max-width:100%} .configuration-qr canvas {display:block; max-width:100%; height:auto; image-rendering:pixelated}

textarea[name="app_packages"]:disabled{background:#edf0f4;color:#64758b;cursor:not-allowed}

.device-title{min-width:0;flex:1}.device-name-row{display:flex;align-items:center;gap:6px}.device-name-row h3{margin:0;overflow-wrap:anywhere}.device-card .device-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;padding:6px;background:transparent;color:#64758b;border-radius:8px}.device-icon svg{flex-shrink:0;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.device-icon:hover{background:#edf2f8;color:#214367}.device-trash:hover{background:#fcebed;color:#a52c38}.device-access{display:flex;align-items:center;gap:8px}.device-title>form{margin:0}.device-name-editor input{width:100%;max-width:420px;margin:0 0 8px}.device-name-editor .actions{margin:0}.device-name-editor .actions button{padding:7px 12px}.device-name-row[hidden],.device-name-editor[hidden]{display:none}.device-delete-dialog{width:min(480px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;border:1px solid #dbe3ed;border-radius:16px;padding:24px;color:#12273f;box-shadow:0 24px 80px #12273f40}.device-delete-dialog::backdrop{background:#12273f70}.device-delete-dialog h3{overflow-wrap:anywhere}.device-delete-dialog form{margin-bottom:0}.device-delete-dialog .danger{background:#a52c38;color:#fff}.device-delete-dialog .actions{justify-content:flex-end}.device-icon:focus-visible{outline:2px solid #397a7f;outline-offset:2px}

.device-card>.card-heading>.device-title{flex:1 1 220px}