@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url('assets/templates/sdbx/fonts/MaterialIcons-Regular.woff2') format('woff2')}
.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
body.sdbx-console-page{--demo-strip:36px;padding-top:calc(var(--panel-top) + var(--demo-strip))}
.sdbx-panel-topbar{top:var(--demo-strip)}.sdbx-panel-sidebar{top:var(--demo-strip);height:calc(100dvh - var(--demo-strip))}
.demo-banner{position:fixed;inset:0 0 auto;z-index:10100;height:var(--demo-strip);background:#2a2144;color:#ddd2f5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;font:500 12px/1.4 SdbxPanelInter,Arial,sans-serif;border-bottom:1px solid #65428e}
.demo-banner>div{display:flex;align-items:center;gap:20px}.demo-banner button{border:0;background:none;color:#ddd2f5;cursor:pointer;padding:6px}.demo-banner a{color:#fff;text-decoration:none;font-weight:650}.demo-banner button:hover,.demo-banner a:hover{color:#d7b9ff}
.demo-preview,.demo-info{background:#172236!important;color:#f5f7fc!important;border-radius:16px!important;padding:30px!important;font-family:SdbxPanelInter,Arial,sans-serif!important}
.remodal-wrapper.demo-preview-wrapper{padding-top:calc(var(--demo-strip) + 10px)}
.sdbx-console-page .remodal.demo-preview{max-height:calc(100dvh - var(--demo-strip) - 20px);overflow-y:auto}
.demo-preview{max-width:1100px!important}.demo-info{max-width:540px!important}.demo-preview h2,.demo-info h2{font-size:24px;line-height:1.25;font-weight:700;margin:0 0 12px}.demo-preview p,.demo-info p{color:#b5c1d7;line-height:1.6;margin:0 0 20px}.demo-preview img{display:block;width:100%;height:auto;border-radius:10px}.demo-confirm-actions{display:flex;gap:12px;justify-content:flex-end}
.demo-feedback{position:fixed;bottom:24px;right:24px;z-index:11000;background:#213a38;color:#d8fff2;border:1px solid #3a7463;border-radius:12px;padding:14px 20px;max-width:min(440px,calc(100vw - 32px));box-shadow:0 10px 35px #0005;font:500 13px/1.5 SdbxPanelInter,Arial,sans-serif}
.remodal .demo-modal-close{position:absolute;top:7px;right:7px;left:auto;z-index:5;border-radius:50%;background:#152037aa;color:white;width:32px;height:32px;cursor:pointer}
.remodal .demo-modal-close:before{line-height:32px;font-size:24px}
.demo-form-note{font-size:11px;color:#a5b4fc;margin:12px 0 0}.demo-preview[aria-hidden=true]{display:none}
.sdbx-panel-favorite-art{pointer-events:none}
/* Quota picker: isolated from the real console and its shared styles. */
.remodal-wrapper.demo-storage-wrapper{padding-top:calc(var(--demo-strip) + 10px)}
.sdbx-console-page .remodal.demo-storage{max-height:calc(100dvh - var(--demo-strip) - 20px);overflow-y:auto}
.remodal.demo-storage{max-width:540px;padding:0;overflow:hidden;text-align:left;border:1px solid #55436f;border-radius:24px;background:#172236;color:#f5f7fc;font-family:SdbxPanelInter,Arial,sans-serif;box-shadow:0 30px 100px #0008}
.demo-storage-heading{padding:30px 32px 24px;background:radial-gradient(ellipse at 85% 0,#8040c844,transparent 70%),linear-gradient(135deg,#29223e,#1b273c);border-bottom:1px solid #ffffff0d}
.demo-storage-icon{display:flex;width:46px;height:46px;align-items:center;justify-content:center;margin-bottom:18px;border:1px solid #b48aff55;border-radius:14px;background:#a271ef22;color:#c8a5ff}
.demo-storage-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;color:#c4a4ef}
.demo-storage h2{margin:8px 0 9px;font-size:26px;font-weight:750;line-height:1.2;letter-spacing:-.7px}
.demo-storage-heading p{margin:0;color:#b5c1d7;font-size:13px;line-height:1.6}
.demo-storage-body{padding:24px 32px}
.demo-storage-selection{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.demo-storage-selection label{font-size:13px;font-weight:500;color:#c5cee0}
.demo-storage-selection output{font-size:60px;line-height:1.1;font-weight:750;letter-spacing:-2px;color:#fff}
.demo-storage-selection output span{font-size:24px;color:#b69bdc;letter-spacing:0}
.demo-storage-current{font-size:12px;color:#9eaec7}.demo-storage-current strong{color:#d7dfee;font-weight:550}
#demo-storage-slider{display:block;appearance:none;-webkit-appearance:none;width:100%;height:8px;margin:30px 0 16px;border:0;border-radius:8px;background:linear-gradient(to right,#a36af7 0%,#a36af7 var(--quota-progress,0%),#34425c var(--quota-progress,0%),#34425c 100%);cursor:pointer;touch-action:pan-y}
#demo-storage-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;border:4px solid #e7d8ff;border-radius:50%;background:#9757ef;box-shadow:0 0 0 6px #9e62f41a,0 3px 12px #0004}
#demo-storage-slider::-moz-range-thumb{width:18px;height:18px;border:4px solid #e7d8ff;border-radius:50%;background:#9757ef;box-shadow:0 0 0 6px #9e62f41a}
#demo-storage-slider:focus-visible{outline:2px solid #c6a1ff;outline-offset:10px}
.demo-storage-limits{display:flex;justify-content:space-between;font-size:12px;color:#9eaec7}
.demo-storage-summary{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;padding:18px;border:1px solid #ffffff0e;border-radius:14px;background:#0d172633}
.demo-storage-summary>div:not(.demo-storage-meter){display:flex;flex-direction:column;gap:6px}.demo-storage-summary>div:nth-child(2){text-align:right}
.demo-storage-summary span{font-size:11px;color:#a5b3ca}.demo-storage-summary strong{font-size:17px;font-weight:650}.demo-storage-summary>div:nth-child(2) strong{color:#bca1f5}
.demo-storage-meter{grid-column:1/-1;height:5px;overflow:hidden;background:#34425c;border-radius:5px}.demo-storage-meter span{display:block;height:100%;background:linear-gradient(90deg,#2ed3de,#b980fc);border-radius:5px}
.demo-storage-note{display:flex;align-items:flex-start;gap:8px;margin:20px 0 0;font-size:11px;line-height:1.6;color:#a5b3ca}.demo-storage-note .material-icons{font-size:16px}
.demo-storage-actions{display:flex;justify-content:flex-end;gap:12px;padding:18px 32px;border-top:1px solid #ffffff0d;background:#111b2b55}.demo-storage-actions .sdbx-panel-button{min-height:44px;padding:0 24px}
@media(max-width:599px){.remodal.demo-storage{border-radius:20px}.demo-storage-heading{padding:24px 22px 20px}.demo-storage h2{font-size:23px}.demo-storage-body{padding:22px}.demo-storage-icon{margin-bottom:14px;width:40px;height:40px}.demo-storage-selection output{font-size:52px}.demo-storage-actions{padding:16px 22px}.demo-storage-actions .sdbx-panel-button{flex:1;padding:0 12px}.demo-storage-eyebrow{font-size:9px;letter-spacing:1.2px}}
#sdbx-kebab-uninstall-icon,#sdbx-uninstall-submit-icon{width:1em;max-width:1em;flex:0 0 1em;overflow:hidden}
.sdbx-wg-qr-stage img[src$="vpn-demo-qr.png"]{background:#fff;image-rendering:pixelated}
@media(max-width:699px){body.sdbx-console-page{--demo-strip:62px}.demo-banner{padding:7px 12px;flex-wrap:wrap;justify-content:center;gap:0 12px;font-size:11px}.demo-banner>div{gap:14px}.demo-banner button{padding:3px}.demo-preview,.demo-info{padding:26px 16px!important}.demo-preview h2,.demo-info h2{font-size:21px}.demo-feedback{right:16px;bottom:16px}.demo-confirm-actions{flex-wrap:wrap}}