/* VPN Control Plane — Stage 1 additions. Base visual system remains public/style.css. */
.cp-shell{max-width:1200px;margin:0 auto;padding:16px 20px 40px}
.cp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cp-title{font-size:20px;font-weight:700}.cp-subtitle{font-size:12px;color:var(--muted)}
.cp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.cp-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;box-shadow:var(--shadow-sm)}
.cp-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cp-stat-value{font-family:var(--mono);font-size:24px;font-weight:700;margin-top:2px}
.cp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:12px}
.cp-card-head{padding:10px 14px;background:var(--surface2);border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;gap:10px}
.cp-card-head h2{font-size:13px;font-weight:700}.cp-card-body{padding:14px}
.cp-table{width:100%;border-collapse:collapse;font-size:12px}.cp-table th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:7px 8px;border-bottom:2px solid var(--blue)}.cp-table td{padding:8px;border-bottom:1px solid var(--border2);vertical-align:middle}.cp-table tr:hover td{background:var(--blue-bg)}
.cp-table th[data-sort-key]{cursor:pointer;user-select:none;white-space:nowrap}.cp-table th[data-sort-key]:hover{color:var(--blue)}.cp-table th[data-sort-key] .cp-sort-arrow{display:inline-block;margin-left:4px;opacity:.35;font-size:9px}.cp-table th[data-sort-key].sorted-asc .cp-sort-arrow,.cp-table th[data-sort-key].sorted-desc .cp-sort-arrow{opacity:1;color:var(--blue)}.cp-table th[data-sort-key].sorted-asc .cp-sort-arrow::before{content:"▲"}.cp-table th[data-sort-key].sorted-desc .cp-sort-arrow::before{content:"▼"}.cp-table th[data-sort-key]:not(.sorted-asc):not(.sorted-desc) .cp-sort-arrow::before{content:"↕"}
.cp-badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700}.cp-badge.ok{color:var(--green);background:#f3fbf3}.cp-badge.warn{color:var(--orange);background:#fff7f3}.cp-badge.dark{color:var(--text2);background:var(--bg)}
.cp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.cp-actions{display:flex;gap:6px;flex-wrap:wrap}.cp-actions .btn{white-space:nowrap}
.cp-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cp-form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.cp-field{display:flex;flex-direction:column;gap:3px}.cp-field.full{grid-column:1/-1}.cp-field label{font-size:11px;font-weight:600;color:var(--text2)}.cp-field input,.cp-field select,.cp-field textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:7px 9px;font:13px var(--font);color:var(--text);outline:none}.cp-field input:focus,.cp-field select:focus,.cp-field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}.cp-field textarea{min-height:70px;resize:vertical}
.cp-muted{color:var(--muted);font-size:11px}.cp-mono{font-family:var(--mono)}.cp-right{text-align:right}.cp-empty{padding:20px;text-align:center;color:var(--muted);font-size:12px}.cp-empty strong{display:block;color:var(--text);margin-bottom:3px}
.cp-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}.cp-login-card{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:24px}.cp-login-logo{display:flex;align-items:center;gap:9px;margin-bottom:18px}.cp-login-logo .logo-icon{flex:none}.cp-login-logo strong{font-size:16px}.cp-login-step{display:none}.cp-login-step.active{display:block}.cp-login h1{font-size:20px;margin-bottom:3px}.cp-login p{font-size:12px;color:var(--muted);margin-bottom:16px}.cp-login .admin-input{margin-bottom:10px}.cp-login .admin-btn{width:100%}.cp-link-btn{border:0;background:none;color:var(--blue);cursor:pointer;font:12px var(--font);padding:7px 0}.cp-top-user{display:flex;align-items:center;gap:8px}.cp-top-user .cp-muted{font-family:var(--mono)}
.cp-modal{position:fixed;inset:0;background:rgba(32,31,30,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:500}.cp-modal.open{display:flex}.cp-modal-box{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);width:min(480px,100%);max-height:90vh;overflow:auto}.cp-modal-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.cp-modal-body{padding:18px;text-align:center}.cp-qr{display:flex;justify-content:center;min-height:380px;align-items:center}.cp-qr img,.cp-qr canvas{max-width:380px}#qr-modal .cp-modal-box{width:min(640px,100%)}#qr-modal .cp-qr{min-height:512px}#qr-modal .cp-qr img,#qr-modal .cp-qr canvas{max-width:512px}#qr-box,#peer-qr-box{background:#fff;border:2px solid #000;padding:24px;box-sizing:content-box;line-height:0}.cp-config{font:11px/1.5 var(--mono);text-align:left;background:var(--bg);border:1px solid var(--border);padding:10px;border-radius:var(--radius);white-space:pre-wrap;overflow:auto;max-height:240px;margin-top:12px}
.cp-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:12px;overflow:auto}.cp-tabs button{border:0;background:none;padding:8px 12px;font:12px var(--font);color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}.cp-tabs button.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:700}.cp-panel{display:none}.cp-panel.active{display:block}
@media(max-width:860px){.cp-grid{grid-template-columns:1fr}.cp-form-grid,.cp-form-grid.three{grid-template-columns:1fr}.cp-field.full{grid-column:auto}.cp-table{min-width:760px}.cp-card-body{overflow-x:auto}}
.cp-user-modal{width:min(620px,100%)}
.cp-modal-form{text-align:left}.cp-modal-form .cp-form-grid{margin-top:4px}.cp-modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:0;padding:14px 18px;border-top:1px solid var(--border2);flex-wrap:wrap}.cp-modal-actions .btn{flex:0 0 auto}
.cp-modal-head button{flex:none}.cp-modal[aria-hidden="true"]{display:none}.cp-modal[aria-hidden="false"]{display:flex}

.hidden {
    display: none !important;
}
.cp-badge.muted{color:var(--text2);background:var(--bg)}
.cp-node-audit-modal{width:min(1180px,100%)}
.cp-audit-summary{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:8px;margin-bottom:14px}
.cp-audit-stat{border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;background:var(--surface2);display:flex;justify-content:space-between;gap:10px}
.cp-audit-stat span{color:var(--text2);font-size:11px}.cp-audit-stat strong{font-size:13px}
.cp-audit-table{min-width:760px}.cp-audit-table td,.cp-audit-table th{vertical-align:top}
@media(max-width:860px){.cp-audit-summary{grid-template-columns:repeat(2,minmax(100px,1fr))}}
.cp-peer-calendar-modal{width:min(760px,100%)}
.cp-calendar-explain{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:11px 12px;margin-bottom:16px;font-size:12px;line-height:1.45}
.cp-calendar-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border2)}
.cp-calendar-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cp-calendar-blocks{display:flex;flex-direction:column;gap:8px}
.cp-calendar-block{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.cp-calendar-empty{padding:12px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--text2);text-align:center}
@media(max-width:860px){.cp-peer-calendar-modal{width:100%}.cp-calendar-block{align-items:flex-start;flex-direction:column}.cp-calendar-block .btn{align-self:flex-end}}
.cp-renew-modal{width:min(560px,100%)}
.cp-renew-peer{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.cp-renew-peer>div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2)}
.cp-renew-peer strong{font-family:var(--mono);font-size:13px}
.cp-renew-tariffs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cp-renew-tariff{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;font:12px var(--font)}
.cp-renew-tariff:hover{border-color:var(--blue);background:var(--blue-bg)}
.cp-renew-tariff.active{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);background:var(--blue-bg)}
.cp-renew-tariff strong{display:block}.cp-renew-tariff span{font-family:var(--mono);font-weight:700;white-space:nowrap}
.cp-renew-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg)}
.cp-renew-summary>div{display:flex;flex-direction:column;gap:3px}.cp-renew-summary span{font-size:11px;color:var(--muted)}.cp-renew-summary strong{font-size:13px}
@media(max-width:600px){.cp-renew-tariffs,.cp-renew-peer,.cp-renew-summary{grid-template-columns:1fr}}

.cp-node-edit-modal .cp-modal-body{padding-bottom:18px}.cp-node-edit-modal .cp-modal-actions{margin-top:0}

/* QR: exact 320x320 canvas, never rescaled (integer module size) */
#qr-box,#peer-qr-box{padding:0;border:0;background:#fff;width:320px;height:320px;min-height:0;max-width:100%;margin:0 auto;flex:none}
#qr-box canvas,#peer-qr-box canvas,#qr-box img,#peer-qr-box img{width:320px!important;height:320px!important;max-width:none!important;image-rendering:pixelated;display:block}
#qr-modal .cp-qr,#peer-qr-modal .cp-qr{min-height:0}
@media(max-width:400px){.cp-modal{padding:8px}#qr-box,#peer-qr-box{max-width:none}}