:root{font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18243b;background:#f3f6fb}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:#176acb;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,p{margin-top:0}h1{font-size:1.9rem;letter-spacing:-.04em}h2{font-size:1.13rem;letter-spacing:-.02em}p{color:#5f6c7f}.app-shell{min-height:100vh;display:grid;grid-template-columns:252px 1fr}.sidebar{background:#101b32;color:#d4e0f5;padding:25px 16px;display:flex;flex-direction:column;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-size:1.35rem;font-weight:800;color:#fff;padding:8px}.brand-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:#42d3a4;color:#093a2f;font-size:1.5rem}.brand small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#a7bad5;font-weight:600}.nav-list{display:flex;flex-direction:column;gap:6px}.nav-list button{display:flex;width:100%;align-items:center;text-align:left;gap:12px;color:#bfcee8;border:0;border-radius:11px;padding:12px 14px;background:transparent;font-weight:550}.nav-list button.active,.nav-list button:hover{background:#263b5c;color:#fff}.sidebar-foot{margin-top:auto;font-size:.78rem;color:#9caecb;padding:12px}.main{min-width:0}.topbar{height:78px;background:#fff;border-bottom:1px solid #e4eaf2;display:flex;align-items:center;justify-content:space-between;padding:0 40px;gap:20px}.topbar .chip{border-radius:30px;background:#e7f8f0;color:#13795d;font-weight:700;font-size:.75rem;padding:7px 12px}.top-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.email{color:#66778d;font-size:.82rem}.content{max-width:1300px;margin:auto;padding:34px 40px 90px}.eyebrow{font-size:.77rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#2876bd;margin:0 0 8px}.sub{margin:-8px 0 26px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:24px}.metric,.panel{border-radius:17px;background:#fff;border:1px solid #e1e8f0;box-shadow:0 6px 24px rgba(24,46,83,.04)}.metric{padding:21px}.metric span{display:block;color:#6a7a90;font-size:.8rem;font-weight:650}.metric strong{display:block;font-size:2rem;letter-spacing:-.05em;margin-top:8px}.metric em{display:block;margin-top:8px;font-size:.78rem;color:#8090a3;font-style:normal}.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:21px}.panel{padding:25px;margin:0 0 21px;overflow-x:auto}.panel h2{margin-bottom:5px}.muted{color:#6b798c;font-size:.85rem}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}table{border-collapse:collapse;width:100%;min-width:460px}th{text-align:left;font-size:.72rem;color:#748198;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #e7edf4;padding:12px 10px}td{padding:15px 10px;border-bottom:1px solid #edf1f7;font-size:.9rem;vertical-align:middle}td code,.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82rem;word-break:break-all}td code{background:#f1f5fa;padding:4px 8px;border-radius:6px}.status{display:inline-block;padding:4px 9px;border-radius:20px;font-size:.74rem;font-weight:750;background:#e7f8f0;color:#15795c}.status.blocked{background:#fff0ef;color:#b83d3d}.status.off{background:#f0f2f7;color:#728094}.btn{border:0;border-radius:9px;background:#236acb;color:white;font-weight:700;padding:10px 17px;font-size:.86rem}.btn:hover{filter:brightness(.94)}.btn.secondary{background:#edf4ff;color:#236acb}.btn.ghost{border:1px solid #dce4ef;background:white;color:#4d6080}.btn.danger{background:#fff0f1;color:#bd3f4a}.btn.small{padding:6px 10px;font-size:.76rem}.actions{display:flex;flex-wrap:wrap;gap:6px}label{display:block;color:#42516a;font-weight:700;font-size:.79rem;margin-bottom:6px}input,select,textarea{border:1px solid #d6e0ed;border-radius:9px;padding:11px 12px;background:white;color:#1b2b43;width:100%;outline:none}input:focus,select:focus,textarea:focus{border-color:#3b88d2;box-shadow:0 0 0 3px #dbecff}textarea{min-height:130px;resize:vertical}form .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:16px 0}.form-actions{display:flex;align-items:end;gap:10px}.form-actions button{flex-shrink:0}.notice{padding:15px 18px;background:#eaf5ff;border:1px solid #c6e2fa;color:#2a567b;border-radius:12px;margin:20px 0;font-size:.86rem}.notice.warning{background:#fff8e9;border-color:#f5e2ae;color:#846315}.empty{padding:30px;text-align:center;color:#8996a8}.login-screen{min-height:100vh;background:radial-gradient(circle at 15% 10%,#234d74,#0c1930 58%);display:flex;align-items:center;justify-content:center;padding:24px}.login-box{width:100%;max-width:450px;background:#fff;border-radius:23px;padding:39px;box-shadow:0 30px 80px #06152d70}.login-box .brand{color:#101b32;padding:0;margin-bottom:31px}.login-box .brand small{color:#647992}.login-box h1{font-size:1.8rem}.login-box label{margin-top:20px}.login-box .btn{width:100%;margin-top:22px;padding:13px}.login-box .note{margin:23px 0 0;font-size:.8rem}.loading{padding:100px;text-align:center}.hint{font-size:.76rem;color:#7d8b9f}.url{display:block;max-width:440px;white-space:normal;overflow-wrap:anywhere;font-size:.77rem;color:#48688a}.toast{position:fixed;z-index:5;bottom:22px;right:22px;border-radius:12px;background:#193c35;color:white;padding:13px 19px;box-shadow:0 8px 24px #0002;max-width:420px}.toast.error{background:#8e303b}.footer{margin-top:25px;color:#8190a4;font-size:.75rem}@media(max-width:1080px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:1fr}}@media(max-width:780px){.app-shell{grid-template-columns:1fr}.sidebar{gap:10px;padding:14px}.brand{padding:3px 8px}.nav-list{flex-direction:row;overflow-x:auto;padding-bottom:4px}.nav-list button{white-space:nowrap;width:auto}.sidebar-foot{display:none}.topbar{padding:15px 20px;height:auto;min-height:65px}.content{padding:24px 17px}.top-right{gap:8px}.email{display:none}}@media(max-width:500px){.metrics{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:14px}.metric strong{font-size:1.5rem}.panel{padding:16px}.form-actions{flex-direction:column;align-items:stretch}form .fields{grid-template-columns:1fr}.login-box{padding:26px}}

/* PasPuss brand and small-screen usability overrides */
.brand-logo{width:43px;height:48px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.16))}
.brand{min-width:0;line-height:1.2}
.brand>span:last-child{min-width:0}
.brand small{margin-top:4px;line-height:1.35}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px}
a.btn{text-decoration:none}
.btn.ios-install{background:#11775f;color:#fff}
.btn.ios-install:hover{background:#095d49}
button,.btn,a{touch-action:manipulation}
:focus-visible{outline:3px solid #38afc6;outline-offset:3px}
.mobile-setup ol{padding-left:22px;margin:12px 0 16px;color:#334762}
.mobile-setup li{margin:10px 0}
.device-table .actions{margin-top:8px}
.device-table .url{max-width:300px}
#toast:empty{display:none}
@media(max-width:780px){
 html,body{max-width:100%;overflow-x:hidden}
 .app-shell{display:block;width:100%;min-width:0}
 .sidebar{position:sticky;top:0;z-index:15;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;gap:6px;box-shadow:0 8px 20px #06152d16}
 .sidebar .brand{margin-bottom:4px}
 .sidebar .brand-logo{width:36px;height:40px}
 .nav-list{display:flex;flex-direction:row;flex-wrap:nowrap;gap:5px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:2px 0 6px}
 .nav-list button{flex:0 0 auto;min-height:44px;scroll-snap-align:start;white-space:nowrap;padding:10px 13px;font-size:.88rem}
 .main{min-width:0}
 .topbar{padding:12px 16px;gap:8px}
 .topbar .chip{flex:none}
 .topbar .top-right{gap:7px;justify-content:flex-end}
 .topbar .btn{min-height:43px}
 .content{padding:23px 14px calc(42px + env(safe-area-inset-bottom,0px));min-width:0}
 .panel{min-width:0;overflow-x:auto}
 .metrics{gap:12px}
 .device-table{min-width:0;width:100%;border:0}
 .device-table thead{display:none}
 .device-table tbody,.device-table tr,.device-table td{display:block;width:100%}
 .device-table .device-row{margin:0 0 15px;padding:0;background:#fff;border:1px solid #dfe7f1;border-radius:13px;overflow:hidden}
 .device-table td{padding:13px 14px;border-bottom:1px solid #eef1f5;min-width:0}
 .device-table td:last-child{border-bottom:0}
 .device-table td::before{content:attr(data-label);display:block;margin-bottom:6px;color:#718096;text-transform:uppercase;letter-spacing:.08em;font-weight:750;font-size:.67rem}
 .device-table .actions{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 0}
 .device-table .btn{min-height:44px;padding:11px 14px;flex-grow:1}
 .device-table .url{font-size:.85rem}
 .form-actions input{min-height:46px}
 .form-actions .btn{min-height:46px}
 .notice{line-height:1.6}
 .login-screen{min-height:100svh;padding:20px 15px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 .login-box{max-width:480px}
}
@media(max-width:500px){
 .sidebar .brand{font-size:1.2rem}
 .sidebar .brand small{font-size:.61rem}
 .content{padding-left:12px;padding-right:12px}
 .content h1{font-size:1.62rem}
 .metric{padding:14px 12px}
 .metric strong{font-size:1.45rem}
 .topbar .chip{font-size:.67rem;padding:6px 9px}
 .topbar .btn.small{min-height:42px;padding:9px 11px}
 .panel{padding:16px 13px}
 .panel-top{align-items:flex-start;flex-wrap:wrap}
 .login-box{padding:25px 20px}
 .login-box input{min-height:48px;font-size:16px}
 .login-box .btn{min-height:48px}
 .device-table .actions .btn{width:100%}
 .toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:none}
}
@media(max-width:365px){
 .metrics{grid-template-columns:1fr}
 .topbar{flex-wrap:wrap}
 .topbar .top-right{width:100%}
}

/* Mobile YouTube helper */
.setup-steps{padding-left:23px;color:#324762;line-height:1.7}
.setup-steps li{margin:9px 0}
@media(max-width:500px){.setup-steps{padding-left:20px}.content .actions>.btn{min-height:44px}.content .actions>a.btn{flex:1 1 auto}}