/* ============================================================================ CleanBrowsing dashboard design system · cb.css Drop in /assets/css/cb.css and load it LAST in the shell : All classes are cb-* prefixed so they never collide with Bootstrap/theme CSS. Fonts are loaded via @import for now; self-host later for performance. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@500;600&display=swap'); .cb, .cb *, .cb-auth, .cb-auth *{box-sizing:border-box} :root{ --cb-bg:#F4F6F9; --cb-surface:#fff; --cb-surface-2:#FAFBFD; --cb-ink:#12161E; --cb-ink-2:#586173; --cb-ink-3:#98A1B1; --cb-line:#E8ECF2; --cb-line-2:#F1F4F8; --cb-primary:#2F56D4; --cb-primary-2:#2347BC; --cb-primary-tint:#ECF1FE; --cb-coral:#E5573D; --cb-coral-2:#CC4329; --cb-coral-tint:#FBEDE9; --cb-good:#159A6B; --cb-good-tint:#E6F5EF; --cb-amber:#B7791F; --cb-amber-tint:#FBF1DF; --cb-r-card:16px; --cb-r-ctl:10px; --cb-sh-sm:0 1px 2px rgba(17,22,30,.05); --cb-sh:0 1px 2px rgba(17,22,30,.04), 0 10px 28px rgba(17,22,30,.06); --cb-disp:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; --cb-body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --cb-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* base scope — applies inside any .cb container without touching the rest */ .cb{font-family:var(--cb-body); color:var(--cb-ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"} .cb .cb-mono{font-family:var(--cb-mono); font-variant-numeric:tabular-nums} .cb button{font-family:inherit; cursor:pointer} .cb a{color:var(--cb-primary); text-decoration:none} .cb h1,.cb h2,.cb h3,.cb h4{margin:0} /* ---- page heading ---- */ .cb-h1{font-family:var(--cb-disp); font-weight:700; font-size:22px; letter-spacing:-.02em; margin:0 0 3px} .cb-sub{color:var(--cb-ink-2); font-size:13.5px; margin:0 0 22px} /* ---- layout helpers ---- */ .cb-grid{display:grid; gap:18px} .cb-grid.cols-2{grid-template-columns:repeat(2,1fr)} .cb-grid.cols-3{grid-template-columns:repeat(3,1fr)} .cb-grid.cols-4{grid-template-columns:repeat(4,1fr)} .cb-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .cb-spacer{flex:1} /* ---- card ---- */ .cb-card{background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:var(--cb-r-card); box-shadow:var(--cb-sh-sm)} .cb-card .cb-pad{padding:20px} .cb-ttl{font-family:var(--cb-disp); font-weight:600; font-size:15px; letter-spacing:-.01em; margin:0} .cb-cap{color:var(--cb-ink-2); font-size:13px; margin:2px 0 0} /* ---- buttons ---- */ .cb-btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--cb-line); background:var(--cb-surface); color:var(--cb-ink); font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:var(--cb-r-ctl); transition:.13s} .cb-btn:hover{border-color:#D6DCE7} .cb-btn svg{width:16px; height:16px} .cb-btn.primary{background:var(--cb-primary); border-color:var(--cb-primary); color:#fff} .cb-btn.primary:hover{background:var(--cb-primary-2); border-color:var(--cb-primary-2)} .cb-btn.coral{background:var(--cb-coral); border-color:var(--cb-coral); color:#fff} .cb-btn.coral:hover{background:var(--cb-coral-2); border-color:var(--cb-coral-2)} .cb-btn.ghost{background:transparent; border-color:transparent; color:var(--cb-ink-2)} .cb-btn.ghost:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-btn.sm{padding:6px 11px; font-size:12.5px} /* ---- inputs / forms ---- */ .cb-field{margin-bottom:16px} .cb-label{display:block; font-size:12.5px; font-weight:600; color:var(--cb-ink-2); margin-bottom:6px} .cb-input, .cb-select{width:100%; border:1px solid var(--cb-line); background:var(--cb-surface); border-radius:var(--cb-r-ctl); padding:10px 12px; font-family:inherit; font-size:13.5px; color:var(--cb-ink); outline:0; transition:.13s} .cb-input:focus, .cb-select:focus{border-color:var(--cb-primary); box-shadow:0 0 0 3px var(--cb-primary-tint)} .cb-input.mono{font-family:var(--cb-mono)} .cb-hint{font-size:11.5px; color:var(--cb-ink-3); margin-top:5px} .cb-search{display:flex; align-items:center; gap:8px; border:1px solid var(--cb-line); background:var(--cb-surface); border-radius:var(--cb-r-ctl); padding:8px 12px; min-width:200px} .cb-search input{border:0; outline:0; font-family:inherit; font-size:13px; width:100%; background:transparent; color:var(--cb-ink)} .cb-search svg{color:var(--cb-ink-3); width:16px; height:16px; flex:none} /* ---- toggle switch ---- */ .cb-tg{appearance:none; width:42px; height:24px; border-radius:99px; background:#D7DCE5; position:relative; flex:none; transition:background .18s; border:0; padding:0; cursor:pointer; margin:0} .cb-tg::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s} .cb-tg:checked, .cb-tg.on{background:var(--cb-coral)} .cb-tg:checked::after, .cb-tg.on::after{transform:translateX(18px)} .cb-tg.is-good:checked, .cb-tg.is-good.on{background:var(--cb-good)} .cb-tg.is-primary:checked, .cb-tg.is-primary.on{background:var(--cb-primary)} /* ---- pills / badges ---- */ .cb-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; letter-spacing:.01em} .cb-pill.coral{color:var(--cb-coral); background:var(--cb-coral-tint)} .cb-pill.good{color:var(--cb-good); background:var(--cb-good-tint)} .cb-pill.amber{color:var(--cb-amber); background:var(--cb-amber-tint)} .cb-pill.slate{color:var(--cb-ink-2); background:#EEF1F6} /* ---- alerts ---- */ .cb-alert{display:flex; gap:11px; padding:13px 15px; border-radius:12px; font-size:13.5px; margin-bottom:18px; border:1px solid transparent} .cb-alert svg{width:18px; height:18px; flex:none; margin-top:1px} .cb-alert.err{background:var(--cb-coral-tint); border-color:#F3D2CB; color:var(--cb-coral-2)} .cb-alert.ok{background:var(--cb-good-tint); border-color:#C9E9DB; color:#0F7A53} .cb-alert.info{background:var(--cb-primary-tint); border-color:#D4E0FC; color:var(--cb-primary-2)} /* ---- stat cards ---- */ .cb-stat{padding:18px 20px} .cb-stat .lab{display:flex; align-items:center; gap:8px; color:var(--cb-ink-2); font-size:12.5px; font-weight:500} .cb-stat .lab .ic{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none} .cb-stat .val{font-family:var(--cb-disp); font-weight:700; font-size:27px; letter-spacing:-.02em; margin-top:10px; line-height:1} .cb-stat .val small{font-family:var(--cb-mono); font-size:12px; font-weight:500; color:var(--cb-ink-3); margin-left:6px} .cb-ic.blue{background:var(--cb-primary-tint); color:var(--cb-primary)} .cb-ic.coral{background:var(--cb-coral-tint); color:var(--cb-coral)} .cb-ic.green{background:var(--cb-good-tint); color:var(--cb-good)} .cb-ic.slate{background:#EEF1F6; color:var(--cb-ink-2)} /* ---- preset chips ---- */ .cb-presets{display:flex; gap:8px; flex-wrap:wrap} .cb-preset{border:1px solid var(--cb-line); background:var(--cb-surface); border-radius:10px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--cb-ink-2); display:flex; align-items:center; gap:7px} .cb-preset:hover{border-color:#D6DCE7; color:var(--cb-ink)} .cb-preset.on{background:var(--cb-ink); color:#fff; border-color:var(--cb-ink)} .cb-preset small{font-family:var(--cb-mono); font-weight:500; font-size:10.5px; opacity:.7} /* ---- category grid (the redesign centerpiece) ---- */ .cb-cats{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)} .cb-cat{background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:13px; padding:15px 16px; display:flex; align-items:flex-start; gap:12px; position:relative; overflow:hidden; transition:border-color .15s, box-shadow .15s} .cb-cat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .15s} .cb-cat.blocked{border-color:#F0CFC6} .cb-cat.blocked::before{background:var(--cb-coral)} .cb-cat:hover{box-shadow:var(--cb-sh-sm)} .cb-cat .cic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--cb-surface-2); color:var(--cb-ink-2); transition:.15s} .cb-cat .cic svg{width:18px; height:18px} .cb-cat.blocked .cic{background:var(--cb-coral-tint); color:var(--cb-coral)} .cb-cat .body{min-width:0; flex:1} .cb-cat .nm{font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:7px} .cb-cat .desc{color:var(--cb-ink-3); font-size:11.5px; margin-top:3px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .cb-cat .foot{display:flex; align-items:center; gap:8px; margin-top:11px} .cb-cat .foot form{margin:0; display:flex; align-items:center; gap:8px; width:100%} .cb-state{font-size:11px; font-weight:600} .cb-state.b{color:var(--cb-coral)} .cb-state.a{color:var(--cb-ink-3)} .cb-cat .cb-tg{margin-left:auto} /* ---- data tables (for list pages) ---- */ .cb-table{width:100%; border-collapse:collapse} .cb-table th{text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cb-ink-3); padding:10px 12px; border-bottom:1px solid var(--cb-line)} .cb-table td{padding:13px 12px; border-bottom:1px solid var(--cb-line-2); font-size:13.5px; vertical-align:middle} .cb-table tr:last-child td{border-bottom:0} .cb-table tr:hover td{background:var(--cb-surface-2)} .cb-table .domain{font-family:var(--cb-mono); font-size:13px; color:var(--cb-ink)} .cb-empty{text-align:center; padding:44px 20px; color:var(--cb-ink-3)} .cb-empty svg{width:34px; height:34px; opacity:.5; margin-bottom:10px} .cb-empty b{display:block; color:var(--cb-ink-2); font-weight:600; margin-bottom:3px} /* ============================================================================ SHELL (used by the converted internal-sidebar-new.php — ready for next pass) ========================================================================== */ .cb-app{display:grid; grid-template-columns:248px minmax(0, 1fr); min-height:100vh; background:var(--cb-bg)} .cb-sidebar{background:var(--cb-surface); border-right:1px solid var(--cb-line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh} .cb-brand{display:flex; align-items:center; gap:10px; padding:20px 20px 18px} .cb-brand img{height:26px} .cb-nav{padding:6px 12px; overflow-y:auto; flex:1} .cb-nav .grp{padding:14px 10px 6px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--cb-ink-3)} .cb-nav a{display:flex; align-items:center; gap:11px; padding:9px 10px; margin:2px 0; border-radius:10px; color:var(--cb-ink-2); font-weight:500; font-size:13.5px; transition:background .12s,color .12s} .cb-nav a svg, .cb-nav a iconify-icon{width:18px; height:18px; font-size:18px; flex:none; opacity:.85} .cb-nav a:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-nav a.active{background:var(--cb-primary-tint); color:var(--cb-primary-2)} .cb-nav .sub{margin:0 0 4px 14px; padding-left:14px; border-left:1px solid var(--cb-line)} .cb-nav .sub a{font-size:13px; padding:7px 10px; color:var(--cb-ink-2)} .cb-nav .sub a.active{background:transparent; color:var(--cb-primary-2); font-weight:600} .cb-topbar{height:64px; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--cb-line); display:flex; align-items:center; gap:14px; padding:0 28px; position:sticky; top:0; z-index:20} .cb-crumb{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--cb-ink-3)} .cb-crumb .here{color:var(--cb-ink); font-weight:600} .cb-statuschip{display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--cb-line); border-radius:999px; background:var(--cb-surface); font-size:12.5px; font-weight:500} .cb-statuschip .dot{width:7px; height:7px; border-radius:50%} .cb-statuschip.up .dot{background:var(--cb-good)} .cb-statuschip.up b{color:var(--cb-good)} .cb-statuschip.down .dot{background:var(--cb-coral)} .cb-statuschip.down b{color:var(--cb-coral)} .cb-content{padding:28px; max-width:1600px; width:100%; margin:0 auto} @media(max-width:1080px){.cb-cats{grid-template-columns:repeat(2,1fr)} .cb-grid.cols-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:860px){.cb-cats,.cb-grid.cols-2,.cb-grid.cols-3,.cb-grid.cols-4{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.cb *{animation:none!important; transition:none!important}} /* ============================================================================ SHELL INTERACTIONS (added for the converted internal-sidebar.php) ========================================================================== */ body{margin:0} .cb-app{position:relative} .cb-main{display:flex; flex-direction:column; min-width:0} .cb-brand b{font-family:var(--cb-disp); font-weight:700; font-size:16.5px; letter-spacing:-.01em; color:var(--cb-ink)} .cb-brand .logo-ic{width:30px; height:30px; border-radius:9px; background:linear-gradient(140deg,#F2734B,#E5573D); display:grid; place-items:center; flex:none; box-shadow:0 2px 8px rgba(229,87,61,.35)} .cb-brand .logo-ic svg{width:17px; height:17px; color:#fff} /* collapsible nav groups */ .cb-nav .cb-navparent{display:flex; align-items:center; gap:11px; width:100%; border:0; background:transparent; padding:9px 10px; margin:2px 0; border-radius:10px; color:var(--cb-ink-2); font-weight:500; font-size:13.5px; text-align:left; transition:background .12s,color .12s} .cb-nav .cb-navparent:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-nav .cb-navparent svg.lead, .cb-nav a svg.lead{width:18px; height:18px; flex:none; opacity:.85} .cb-nav .cb-navparent .chev{margin-left:auto; width:15px; height:15px; opacity:.6; transition:transform .18s} .cb-nav .cb-navgroup.open .cb-navparent .chev{transform:rotate(90deg)} .cb-nav .cb-navparent.section-active{color:var(--cb-primary-2)} .cb-nav .cb-tagnew{margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.04em; background:var(--cb-good-tint); color:var(--cb-good); padding:2px 6px; border-radius:6px} .cb-nav .cb-navparent .chev + .cb-tagnew, .cb-nav .cb-tagnew + .chev{margin-left:8px} .cb-nav .cb-sub{display:none; margin:2px 0 6px 23px; padding-left:13px; border-left:1px solid var(--cb-line)} .cb-nav .cb-navgroup.open .cb-sub{display:block} .cb-nav .cb-sub a{display:block; padding:7px 10px; margin:1px 0; border-radius:8px; font-size:12.8px; color:var(--cb-ink-2); font-weight:500} .cb-nav .cb-sub a:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-nav .cb-sub a.active{color:var(--cb-primary-2); font-weight:600; background:var(--cb-primary-tint)} .cb-nav a.cb-navlink{display:flex; align-items:center; gap:11px; padding:9px 10px; margin:2px 0; border-radius:10px; color:var(--cb-ink-2); font-weight:500; font-size:13.5px; transition:background .12s,color .12s} .cb-nav a.cb-navlink:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-nav a.cb-navlink.active{background:var(--cb-primary-tint); color:var(--cb-primary-2)} .cb-nav a.cb-navlink.danger{color:var(--cb-coral)} .cb-nav a.cb-navlink.danger:hover{background:var(--cb-coral-tint)} .cb-nav .cb-grp{padding:14px 10px 6px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--cb-ink-3)} /* sidebar account footer */ .cb-acct{margin:8px 12px 14px; padding:10px; border:1px solid var(--cb-line); border-radius:12px; display:flex; align-items:center; gap:10px; background:var(--cb-surface-2)} .cb-acct img{width:30px; height:30px; border-radius:8px; flex:none; object-fit:cover} .cb-acct .who{min-width:0} .cb-acct .who b{display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .cb-acct .who span{display:block; font-size:11px; color:var(--cb-ink-3)} /* topbar bits */ .cb-burger{display:none; place-items:center; width:38px; height:38px; border-radius:9px; border:1px solid var(--cb-line); background:var(--cb-surface); color:var(--cb-ink-2)} .cb-topbar .cb-switch{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--cb-ink-2)} .cb-topbar .cb-switch select{border:1px solid var(--cb-line); background:var(--cb-surface); border-radius:9px; padding:6px 10px; font-family:inherit; font-size:12.5px; color:var(--cb-ink); outline:0} .cb-topbar .cb-switch select:focus{border-color:var(--cb-primary)} .cb-statuschip .dot{position:relative} .cb-statuschip.up .dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; background:var(--cb-good); opacity:.3; animation:cbpulse 2.4s ease-out infinite} @keyframes cbpulse{0%{transform:scale(.6);opacity:.4}70%,100%{transform:scale(1.9);opacity:0}} /* profile menu */ .cb-profilewrap{position:relative} .cb-profilebtn{display:flex; align-items:center; gap:9px; border:1px solid var(--cb-line); background:var(--cb-surface); border-radius:999px; padding:4px 6px 4px 5px} .cb-profilebtn img{width:28px; height:28px; border-radius:50%; object-fit:cover} .cb-profilebtn .cv{color:var(--cb-ink-3); width:15px; height:15px} .cb-menu{position:absolute; top:46px; right:0; width:290px; background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:14px; box-shadow:var(--cb-sh); padding:8px; z-index:60; opacity:0; transform:translateY(-6px); pointer-events:none; transition:.16s} .cb-menu.open{opacity:1; transform:none; pointer-events:auto} .cb-menu .head{display:flex; gap:11px; align-items:center; padding:10px 10px 12px} .cb-menu .head img{width:38px; height:38px; border-radius:10px; object-fit:cover} .cb-menu .head b{font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px} .cb-menu .head span{font-size:11.5px; color:var(--cb-ink-3)} .cb-menu .sep{height:1px; background:var(--cb-line); margin:6px 4px} .cb-menu a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; color:var(--cb-ink-2); font-size:13px; font-weight:500} .cb-menu a svg, .cb-menu a iconify-icon{width:16px; height:16px; font-size:16px; opacity:.7} .cb-menu a:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-menu a.danger{color:var(--cb-coral)} .cb-menu a.danger:hover{background:var(--cb-coral-tint)} .cb-menu .info{padding:8px 10px; font-size:11.5px; color:var(--cb-ink-3); line-height:1.7} .cb-menu .info b{color:var(--cb-ink); font-weight:600} /* overlay for mobile sidebar */ .cb-overlay{display:none; position:fixed; inset:0; background:rgba(17,22,30,.4); z-index:45} .cb-overlay.show{display:block} /* Drawer / off-canvas sidebar: phones AND small tablets — incl. phone landscape (~915px) and iPad portrait. */ @media(max-width:1024px){ .cb-app{grid-template-columns:minmax(0, 1fr)} .cb-sidebar{position:fixed; left:0; top:0; z-index:50; width:248px; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--cb-sh)} .cb-sidebar.show{transform:none} .cb-burger{display:grid} } /* Topbar / content compaction stays tied to genuinely narrow widths. */ @media(max-width:860px){ .cb-topbar{padding:0 16px} .cb-content{padding:18px} .cb-topbar .cb-switch .lbl{display:none} } /* ============================================================================ FIX: breadcrumb must never wrap or get squeezed in the topbar ========================================================================== */ .cb-crumb{flex-shrink:0; white-space:nowrap; overflow:hidden} .cb-crumb a, .cb-crumb span{white-space:nowrap} .cb-topbar .cb-switch, .cb-topbar .cb-statuschip{flex-shrink:0} /* Top-bar "Set up / Add a device" CTA */ .cb-setupcta{flex-shrink:0; white-space:nowrap} .cb-setupcta svg{width:15px; height:15px} /* Mobile: keep the topbar from overflowing sideways (it must fit the viewport) */ @media(max-width:860px){ .cb-topbar{gap:10px} .cb-setupcta .lbl{display:none} .cb-setupcta{padding-left:9px; padding-right:9px} } @media(max-width:520px){ .cb-crumb{display:none} .cb-statuschip .txt{display:none} .cb-statuschip{padding:7px 8px; gap:0} .cb-topbar{padding:0 12px} } /* ============================================================================ LIST PAGES (allowed / blocked / local mapping / tlds) ========================================================================== */ .cb-addrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0 4px} .cb-addrow .cb-input{flex:1; min-width:220px} .cb-listbar{display:flex; align-items:center; gap:14px; margin:18px 0 12px; flex-wrap:wrap} .cb-listbar .count{font-size:13px; color:var(--cb-ink-2)} .cb-listbar .count b{font-family:var(--cb-mono); color:var(--cb-ink)} .cb-selectall{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--cb-ink-2); font-weight:500; cursor:pointer} .cb-domainlist{display:grid; grid-template-columns:repeat(3,1fr); gap:8px} .cb-checkitem{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--cb-line); border-radius:10px; background:var(--cb-surface); cursor:pointer; transition:.12s; min-width:0} .cb-checkitem:hover{border-color:#D6DCE7; background:var(--cb-surface-2)} .cb-checkitem:has(input:checked){border-color:var(--cb-coral); background:var(--cb-coral-tint)} .cb-checkitem input{accent-color:var(--cb-coral); width:16px; height:16px; flex:none; cursor:pointer} .cb-checkitem .d{font-family:var(--cb-mono); font-size:12.5px; color:var(--cb-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .cb-checkitem .ip{margin-left:auto; font-family:var(--cb-mono); font-size:11.5px; color:var(--cb-ink-3); flex:none} .cb-pager{display:flex; align-items:center; justify-content:space-between; margin-top:18px; flex-wrap:wrap; gap:10px} .cb-pager .entries{font-size:12.5px; color:var(--cb-ink-3)} .cb-pager .entries b{font-family:var(--cb-mono); color:var(--cb-ink-2)} .cb-pager ul{display:flex; gap:4px; list-style:none; margin:0; padding:0} .cb-pager a{display:grid; place-items:center; min-width:32px; height:32px; padding:0 8px; border:1px solid var(--cb-line); border-radius:8px; font-size:13px; font-weight:500; color:var(--cb-ink-2); background:var(--cb-surface)} .cb-pager a:hover{border-color:#D6DCE7; color:var(--cb-ink)} .cb-pager li.active a{background:var(--cb-primary); border-color:var(--cb-primary); color:#fff} .cb-pager li.disabled a{opacity:.4; pointer-events:none} @media(max-width:1080px){.cb-domainlist{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.cb-domainlist{grid-template-columns:1fr}} /* ---- modal ---- */ .cb-modal{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:20px} .cb-modal.open{display:flex} .cb-modal .backdrop{position:absolute; inset:0; background:rgba(17,22,30,.45)} .cb-modal .dialog{position:relative; width:100%; max-width:560px; background:var(--cb-surface); border-radius:16px; box-shadow:var(--cb-sh); border:1px solid var(--cb-line); overflow:hidden} .cb-modal .mhead{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--cb-line)} .cb-modal .mhead h3{font-family:var(--cb-disp); font-size:15px; font-weight:600} .cb-modal .mclose{border:0; background:transparent; color:var(--cb-ink-3); width:30px; height:30px; border-radius:8px; display:grid; place-items:center} .cb-modal .mclose:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-modal .mbody{padding:20px} .cb-modal textarea{width:100%; border:1px solid var(--cb-line); border-radius:10px; padding:12px; font-family:var(--cb-mono); font-size:12.5px; resize:vertical; outline:0; color:var(--cb-ink)} .cb-modal textarea:focus{border-color:var(--cb-primary); box-shadow:0 0 0 3px var(--cb-primary-tint)} .cb-modal .mfoot{display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--cb-line); background:var(--cb-surface-2)} /* ============================================================================ FIX: add-row input was filling the whole card; disabled buttons not dimmed ========================================================================== */ .cb-addrow .cb-input{flex:0 1 420px; min-width:200px; max-width:100%} .cb-addrow .arrow{color:var(--cb-ink-3); flex:none} .cb-btn:disabled{opacity:.5; pointer-events:none} /* ============================================================================ TLD grid + block-page options + profiles table helpers ========================================================================== */ .cb-tldgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:8px; margin-top:10px} .cb-tld{display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--cb-line); border-radius:10px; background:var(--cb-surface); cursor:pointer; font-family:var(--cb-mono); font-size:12.5px; color:var(--cb-ink); transition:.12s} .cb-tld:hover{border-color:#D6DCE7} .cb-tld input{accent-color:var(--cb-coral); width:15px; height:15px; flex:none; cursor:pointer; margin:0} .cb-tld.blocked{border-color:#F0CFC6; background:var(--cb-coral-tint); color:var(--cb-coral-2)} .cb-preset.block-active{background:var(--cb-coral); color:#fff; border-color:var(--cb-coral)} .cb-optset{display:flex; gap:22px; flex-wrap:wrap} .cb-optnav{display:flex; flex-direction:column; gap:6px; flex:0 0 250px; min-width:220px} .cb-opt{display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--cb-line); border-radius:10px; cursor:pointer; font-size:13px; font-weight:500; color:var(--cb-ink-2); transition:.12s} .cb-opt:hover{border-color:#D6DCE7; color:var(--cb-ink)} .cb-opt.active{border-color:var(--cb-primary); background:var(--cb-primary-tint); color:var(--cb-primary-2)} .cb-opt input{accent-color:var(--cb-primary); width:15px; height:15px; margin:0; flex:none} .cb-opt.is-disabled{opacity:.5; cursor:not-allowed} .cb-optpanes{flex:1; min-width:0} .cb-optpane{display:none} .cb-optpane.active{display:block} .cb-optpane h4{font-family:var(--cb-disp); font-size:15px; margin-bottom:8px} .cb-optpane p{font-size:13.5px; color:var(--cb-ink-2); margin:0 0 12px} .cb-table .pcode{font-family:var(--cb-mono); font-size:12px; color:var(--cb-ink-2)} .cb-iconbtn{border:0; background:transparent; color:var(--cb-ink-3); cursor:pointer; padding:6px; border-radius:8px} .cb-iconbtn:hover{background:var(--cb-coral-tint); color:var(--cb-coral)} .cb-iconbtn svg{width:18px; height:18px} /* ============================================================================ Data retention: privacy choice cards + log list ========================================================================== */ .cb-choicegrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 4px} .cb-choice{border:1px solid var(--cb-line); border-radius:13px; padding:16px; cursor:pointer; transition:.13s} .cb-choice:hover{border-color:#D6DCE7} .cb-choice.active{border-color:var(--cb-primary); background:var(--cb-primary-tint)} .cb-choice .ch-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px} .cb-choice h4{font-family:var(--cb-disp); font-size:14px} .cb-choice p{font-size:12.5px; color:var(--cb-ink-2); margin:0; line-height:1.5} .cb-choice input{accent-color:var(--cb-primary); width:16px; height:16px; margin:0} .cb-loglist{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px} .cb-logitem{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--cb-line); border-radius:10px; background:var(--cb-surface)} .cb-logitem input{accent-color:var(--cb-coral); width:16px; height:16px; flex:none; margin:0} .cb-logitem .lname{font-size:13px} .cb-logitem .lsize{color:var(--cb-ink-3); font-family:var(--cb-mono); font-size:11px} .cb-logitem .dl{margin-left:auto; color:var(--cb-ink-3); display:grid; place-items:center; width:30px; height:30px; border-radius:8px; flex:none} .cb-logitem .dl:hover{background:var(--cb-primary-tint); color:var(--cb-primary)} @media(max-width:860px){.cb-choicegrid,.cb-loglist{grid-template-columns:1fr}} .cb-choicegrid.cb-c4{grid-template-columns:repeat(4,1fr)} .cb-replist{display:flex; flex-direction:column} .cb-replist .cb-check{padding:13px 2px; border-top:1px solid var(--cb-line); font-size:13.5px; align-items:flex-start} .cb-replist .cb-check:first-child{border-top:0} .cb-replist .cb-check input{width:16px; height:16px; margin-top:2px} .cb-replist .cb-check .cb-cap{font-weight:400} .cb .mono{font-family:var(--cb-mono)} .cb-ccgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px} @media(max-width:680px){.cb-ccgrid{grid-template-columns:1fr}} @media(max-width:860px){.cb-choicegrid.cb-c4{grid-template-columns:1fr}} /* ============================================================================ Configurations: tabs, value boxes, code blocks, step labels ========================================================================== */ .cb-tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--cb-line); margin:8px 0 22px} .cb-tab{display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border:0; background:transparent; border-bottom:2px solid transparent; margin-bottom:-1px; font:inherit; font-size:13.5px; font-weight:500; color:var(--cb-ink-2); cursor:pointer} .cb-tab:hover{color:var(--cb-ink)} .cb-tab.active{color:var(--cb-primary); border-bottom-color:var(--cb-primary)} .cb-tab svg{width:17px; height:17px} .cb-tabpane{display:none} .cb-tabpane.active{display:block; animation:cbfade .18s ease} @keyframes cbfade{from{opacity:0}to{opacity:1}} .cb-valbox{border:1px solid var(--cb-line); border-radius:12px; padding:14px 16px; background:var(--cb-surface)} .cb-valbox .vlabel{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--cb-ink-3); margin-bottom:8px} .cb-valrow{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:13px; align-items:baseline} .cb-valrow+.cb-valrow{border-top:1px dashed var(--cb-line)} .cb-valrow .k{color:var(--cb-ink-2)} .cb-valrow .v{font-family:var(--cb-mono); color:var(--cb-ink); text-align:right; word-break:break-all} .cb-codewrap{position:relative; margin:6px 0} .cb-code{background:#0E1320; color:#D7DEEC; border-radius:11px; padding:14px 44px 14px 16px; font-family:var(--cb-mono); font-size:12.5px; line-height:1.7; overflow-x:auto; white-space:pre-wrap; word-break:break-all; margin:0} .cb-code .b{color:#6FA8FF} .cb-code .t{color:#7FE0B0} .cb-code .r{color:#FF9B8A} .cb-copy{position:absolute; top:9px; right:9px; border:1px solid #2A3346; background:#1A2233; color:#AEB9D0; border-radius:7px; padding:5px 9px; font-size:11px; cursor:pointer; font-family:var(--cb-body)} .cb-copy:hover{background:#232d42; color:#fff} .cb-step{display:inline-flex; align-items:center; gap:8px; font-family:var(--cb-disp); font-size:13.5px; font-weight:600; color:var(--cb-ink); margin-bottom:6px} .cb-step .n{display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--cb-primary); color:#fff; font-size:12px; font-family:var(--cb-body)} .cb-iplist{display:flex; flex-direction:column; gap:6px; margin:10px 0} .cb-ipopt{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--cb-line); border-radius:9px; cursor:pointer; font-size:13px} .cb-ipopt:hover{border-color:#D6DCE7} .cb-ipopt input{accent-color:var(--cb-coral); width:15px; height:15px; flex:none; margin:0} .cb-ipopt .mono{font-family:var(--cb-mono)} .cb-ipopt small{color:var(--cb-ink-3)} .cb-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media(max-width:780px){.cb-grid2{grid-template-columns:1fr}} /* ============================================================================ Platforms tiles ========================================================================== */ .cb-platgroups{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 18px} .cb-platgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px} .cb-plat{display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--cb-line); border-radius:12px; background:var(--cb-surface)} .cb-plat .ic{font-size:21px; color:var(--cb-ink-2); flex:none; width:24px; text-align:center; line-height:1} .cb-plat .pname{font-weight:500; font-size:13.5px} .cb-plat .pmenu{margin-left:auto; position:relative} .cb-plat .pmenu>a{color:var(--cb-ink-3); cursor:pointer; display:inline-flex} .cb-statusbadge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap} .s-allowed .cb-statusbadge,.cb-statusbadge.s-allowed{background:#E7F4EE; color:#0F7A52} .s-blocked .cb-statusbadge,.cb-statusbadge.s-blocked{background:#FCEBE7; color:#C0392B} .s-moderate-filtered .cb-statusbadge,.cb-statusbadge.s-moderate-filtered{background:#FBF0DD; color:#9A6400} .s-strict-filtered .cb-statusbadge,.cb-statusbadge.s-strict-filtered{background:#F3EAF8; color:#7D3C98} .cb-plat.s-blocked{border-color:#F2D6CF} .cb-platgroup-btn{display:inline-flex; flex-direction:column; gap:3px; padding:9px 14px; border:1px solid var(--cb-line); border-radius:10px; background:var(--cb-surface); cursor:pointer; min-width:120px; text-align:left} .cb-platgroup-btn .title{font-size:13px; font-weight:600; color:var(--cb-ink)} .cb-platgroup-btn .status{font-size:11px; color:var(--cb-ink-3)} /* ============================================================================ FIX: Bootstrap dropdown caret overlapped the badge text on Platforms. Suppress it and draw a properly-spaced chevron instead. ========================================================================== */ .cb-plat .dropdown-toggle::after{display:none !important} .cb-statusbadge{position:relative; padding-right:24px} .cb-statusbadge::after{content:""; display:block; position:absolute; right:9px; top:50%; width:6px; height:6px; border:0; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-70%) rotate(45deg); opacity:.7} .cb-platgroup-btn{position:relative; padding-right:30px} .cb-platgroup-btn::after{content:""; display:block; position:absolute; right:13px; top:50%; width:6px; height:6px; margin:0; border:0; border-right:1.6px solid var(--cb-ink-3); border-bottom:1.6px solid var(--cb-ink-3); transform:translateY(-70%) rotate(45deg); vertical-align:initial} /* platform tile icons now render as SVG images */ .cb-plat img.ic{width:22px; height:22px; object-fit:contain; display:block} /* ============================================================================ Platforms grouped into collapsible boxed sections ========================================================================== */ .cb-platsec{margin-bottom:16px} .cb-platsec-head{display:flex; align-items:center; gap:12px; margin-bottom:14px} .cb-platsec-toggle{flex:1; display:flex; align-items:center; gap:11px; border:0; background:transparent; cursor:pointer; padding:0; text-align:left; font:inherit; min-width:0} .cb-platsec-toggle .gico{display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--cb-primary-tint); color:var(--cb-primary); flex:none} .cb-platsec-toggle .gico svg{width:18px; height:18px} .cb-platsec-toggle h3{font-family:var(--cb-disp); font-size:15px; font-weight:600; margin:0; color:var(--cb-ink)} .cb-platsec-toggle .cnt{font-size:11px; font-weight:600; color:var(--cb-ink-3); background:var(--cb-surface-2); border:1px solid var(--cb-line); padding:1px 8px; border-radius:999px} .cb-platsec-toggle .chev{width:16px; height:16px; color:var(--cb-ink-3); transition:transform .18s; flex:none} .cb-platsec.collapsed .cb-platsec-toggle .chev{transform:rotate(-90deg)} .cb-platsec.collapsed .cb-platgrid{display:none} .cb-setall{display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border:1px solid var(--cb-line); border-radius:9px; background:var(--cb-surface); cursor:pointer; font-size:12.5px; font-weight:600; color:var(--cb-ink-2); flex:none; white-space:nowrap} .cb-setall:hover{border-color:#D6DCE7; color:var(--cb-ink)} .cb-setall::after{display:none !important} .cb-platsec .cb-platgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} /* ============================================================================ Scheduler ========================================================================== */ .cb-formgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:14px; margin-bottom:20px} @media(max-width:820px){.cb-formgrid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.cb-formgrid{grid-template-columns:1fr}} .cb-label{display:block; font-size:12px; font-weight:600; color:var(--cb-ink-2); margin-bottom:6px} .cb-select{width:100%; padding:10px 12px; border:1px solid var(--cb-line); border-radius:9px; background:var(--cb-surface); font:inherit; font-size:13px; color:var(--cb-ink); outline:0} .cb-select:focus{border-color:var(--cb-primary); box-shadow:0 0 0 3px var(--cb-primary-tint)} .cb-sech{display:flex; align-items:center; gap:8px; font-family:var(--cb-disp); font-size:14px; font-weight:600; color:var(--cb-ink); margin:22px 0 12px} .cb-sech .n{display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--cb-primary-tint); color:var(--cb-primary); font-size:12px; font-family:var(--cb-body)} .cb-schedgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px} @media(max-width:720px){.cb-schedgrid{grid-template-columns:1fr}} .cb-schedcat{display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid var(--cb-line); border-radius:10px; background:var(--cb-surface)} .cb-schedcat .nm{font-size:13px; font-weight:500; color:var(--cb-ink)} .cb-schedcat .tag{font-size:10px; font-weight:600; padding:1px 7px; border-radius:999px; white-space:nowrap} .cb-schedcat .tag.b{background:#FCEBE7; color:#C0392B} .cb-schedcat .tag.a{background:#E7F4EE; color:#0F7A52} .cb-schedcat .sp{flex:1} .cb-toggle{position:relative; display:inline-block; width:38px; height:22px; flex:none; cursor:pointer} .cb-toggle input{opacity:0; width:0; height:0; position:absolute} .cb-toggle .tk{position:absolute; inset:0; background:var(--cb-line); border-radius:999px; transition:.18s} .cb-toggle .tk::before{content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 2px rgba(0,0,0,.25)} .cb-toggle input:checked + .tk{background:var(--cb-coral)} .cb-toggle input:checked + .tk::before{transform:translateX(16px)} .cb-toggle input:disabled + .tk{opacity:.5} .cb-schedplat{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--cb-line); border-radius:10px; background:var(--cb-surface)} .cb-schedplat img{width:20px; height:20px; object-fit:contain; flex:none} .cb-schedplat .nm{font-size:13px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .cb-schedplat .cb-select{width:auto; flex:none; padding:6px 10px; font-size:12.5px} .cb-schedtbl-status{display:flex; flex-direction:column; gap:3px} .cb-schedtbl-status .cb-pill{font-size:10.5px} /* ============================================================================ Dashboard (main) ========================================================================== */ .cb-statrow{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px} @media(max-width:680px){.cb-statrow{grid-template-columns:1fr}} .cb-stat{background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:14px; padding:15px 18px; display:flex; flex-direction:column; gap:7px} .cb-stat .l{font-size:11px; font-weight:600; color:var(--cb-ink-3); text-transform:uppercase; letter-spacing:.05em} .cb-stat .v{font-family:var(--cb-disp); font-size:25px; font-weight:600; color:var(--cb-ink); line-height:1} .cb-stat.accent{border-left:3px solid var(--cb-primary)} .cb-stat.coral{border-left:3px solid var(--cb-coral)} .cb-dashgrid{display:grid; gap:16px; margin-bottom:16px; align-items:start} @media(max-width:900px){.cb-dashgrid{grid-template-columns:1fr !important}} .cb-cardhead{display:flex; align-items:baseline; gap:10px; margin-bottom:14px} .cb-cardhead .cb-ttl{margin:0} .cb-cardhead .cb-cap{margin-left:auto; text-align:right} .cb-scroll{max-height:430px; overflow:auto} .cb-scroll::-webkit-scrollbar{width:8px} .cb-scroll::-webkit-scrollbar-thumb{background:var(--cb-line); border-radius:8px} /* ============================================================================ Activity log (query-logs) ========================================================================== */ .cb-actbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px} .cb-search{display:flex; align-items:stretch} .cb-search input{border-top-right-radius:0; border-bottom-right-radius:0; min-width:220px} .cb-search button{border:1px solid var(--cb-primary); border-left:0; background:var(--cb-primary); color:#fff; border-radius:0 9px 9px 0; padding:0 13px; cursor:pointer; display:grid; place-items:center} .cb-search button:hover{background:#2647B8} .cb-fdrop{position:relative; display:inline-block} .cb-fdrop-panel{position:absolute; right:0; top:calc(100% + 8px); width:340px; max-height:62vh; overflow:auto; background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:12px; box-shadow:0 14px 34px rgba(20,30,50,.14); padding:14px 16px; z-index:50; display:none} .cb-fdrop.open .cb-fdrop-panel{display:block} .cb-fgrouphdr{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cb-ink-3); margin:14px 0 6px} .cb-fgrouphdr:first-child{margin-top:0} .cb-fopt{display:flex; align-items:flex-start; gap:9px; padding:6px 2px; font-size:12.5px; line-height:1.45; color:var(--cb-ink-2); cursor:pointer} .cb-fopt input{margin-top:2px; accent-color:var(--cb-primary); flex:none; width:15px; height:15px} .cb-fopt:hover{color:var(--cb-ink)} .cb-badge{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--cb-primary); color:#fff; font-size:11px; font-weight:700; margin-left:5px} .cb-actcell{white-space:nowrap} .cb-logtbl td{vertical-align:middle} .cb-logtbl tbody tr:hover{background:var(--cb-surface-2)} /* ============================================================================ API docs (settings-api) — scoped compat layer ========================================================================== */ .cb-apidocs .container-fluid{padding:0} .cb-apidocs .row{display:block; margin:0} .cb-apidocs [class^="col-"], .cb-apidocs [class*=" col-"]{width:100%; padding:0} .cb-apidocs .card{background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:16px; box-shadow:var(--cb-sh); margin:0} .cb-apidocs .card-header{padding:18px 22px; border-bottom:1px solid var(--cb-line)} .cb-apidocs .card-body{padding:22px} .cb-apidocs .header-top h5{font-family:var(--cb-disp); font-size:17px; font-weight:600; color:var(--cb-ink); margin:0} .cb-apidocs h6{font-family:var(--cb-disp); font-size:14px; font-weight:600; color:var(--cb-ink); margin:0 0 6px} .cb-apidocs .tab-pane p{color:var(--cb-ink-2); font-size:13px; line-height:1.6; margin:0 0 8px} .cb-apidocs .f-w-600{font-weight:600; color:var(--cb-ink)} .cb-apidocs .f-w-500{font-weight:500} .cb-apidocs .f-14{font-size:13px} .cb-apidocs .txt-primary{color:var(--cb-primary)} .cb-apidocs .txt-grey900{font-family:var(--cb-mono); color:var(--cb-ink)} .cb-apidocs iconify-icon, .cb-apidocs .icofont{display:none !important} .cb-apidocs .d-flex{display:flex} .cb-apidocs .align-items-center{align-items:center} .cb-apidocs .d-inline-block{display:inline-block} .cb-apidocs .d-block{display:block} .cb-apidocs .me-1{margin-right:4px} .cb-apidocs .me-2{margin-right:8px} .cb-apidocs .ms-0{margin-left:0} .cb-apidocs .mb-0{margin-bottom:0} .cb-apidocs .mb-1{margin-bottom:4px} .cb-apidocs .mb-2{margin-bottom:8px} .cb-apidocs .mb-3{margin-bottom:12px} .cb-apidocs .mb-4{margin-bottom:18px} .cb-apidocs .mt-3{margin-top:14px} .cb-apidocs .mt-4{margin-top:18px} .cb-apidocs .alert{padding:12px 14px; border-radius:10px; font-size:13px; margin-bottom:16px} .cb-apidocs .alert-danger{background:var(--cb-coral-tint); color:var(--cb-coral-2); border:1px solid var(--cb-coral)} .cb-apidocs .nav{display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; gap:4px} .cb-apidocs .nav-item{list-style:none} .cb-apidocs .general-tabs{border-bottom:1px solid var(--cb-line); margin:18px 0; gap:2px} .cb-apidocs .general-tabs .nav-link{display:inline-block; padding:9px 14px; font-size:13px; font-weight:500; color:var(--cb-ink-3); border-bottom:2px solid transparent; cursor:pointer; text-decoration:none; margin-bottom:-1px} .cb-apidocs .general-tabs .nav-link:hover{color:var(--cb-ink)} .cb-apidocs .general-tabs .nav-link.active{color:var(--cb-primary); border-bottom-color:var(--cb-primary)} .cb-apidocs .child-tabs{gap:6px; margin:4px 0 16px; align-items:center} .cb-apidocs .child-tabs li{list-style:none} .cb-apidocs .child-tabs .text-black{color:var(--cb-ink-3); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em} .cb-apidocs .child-tabs .nav-link{display:inline-block; padding:6px 11px; font-size:12.5px; font-weight:500; color:var(--cb-ink-2); background:var(--cb-surface-2); border:1px solid var(--cb-line); border-radius:8px; cursor:pointer; text-decoration:none} .cb-apidocs .child-tabs .nav-link:hover{border-color:#D6DCE7} .cb-apidocs .child-tabs .nav-link.active{background:var(--cb-primary); border-color:var(--cb-primary); color:#fff} .cb-apidocs .tab-content > .tab-pane{display:none} .cb-apidocs .tab-content > .tab-pane.active{display:block} .cb-apidocs .bg-black{background:var(--cb-surface-2); color:var(--cb-ink); border:1px solid var(--cb-line); font-family:var(--cb-mono); font-size:12.5px; padding:12px 14px; border-radius:10px; word-break:break-all; line-height:1.55; margin-top:4px} .cb-apidocs .bg-black pre{color:var(--cb-coral); background:none; margin:0; padding:0; display:inline; font-family:var(--cb-mono); font-size:12.5px; font-weight:600} .cb-apidocs .rounded-3{border-radius:10px} /* API page: light code blocks (scoped, leaves the dark Configurations blocks alone) */ .cb-apidocs .cb-code{background:var(--cb-surface-2); color:var(--cb-ink); border:1px solid var(--cb-line)} .cb-apidocs .cb-copy{background:var(--cb-surface); border:1px solid var(--cb-line); color:var(--cb-ink-2)} .cb-apidocs .cb-copy:hover{background:var(--cb-primary); border-color:var(--cb-primary); color:#fff} /* DoH/DoT transport pill */ .cb-pill.proto{color:#3D63E0; background:#E9EEFB} /* Account security log list */ .cb-seclog{list-style:none; margin:0; padding:0; max-height:360px; overflow:auto} .cb-seclog li{font-family:var(--cb-mono); font-size:12px; color:var(--cb-ink-2); padding:9px 2px; border-bottom:1px solid var(--cb-line); word-break:break-word} .cb-seclog li:last-child{border-bottom:0} .cb-seclog li b{color:var(--cb-ink); font-weight:600; font-family:var(--cb-mono)} .cb-seclog li{color:var(--cb-ink-3)} /* radio rows (user edit) */ .cb-radio{display:flex; align-items:flex-start; gap:9px; padding:7px 0; font-size:13px; color:var(--cb-ink-2); cursor:pointer} .cb-radio input{margin-top:2px; accent-color:var(--cb-primary); width:15px; height:15px; flex:none} .cb-radio b{color:var(--cb-ink)} /* ============================================================================ Billing — scoped compat layer (keeps Stripe echo markup, renders it natively) ========================================================================== */ .cb-billing .content{color:var(--cb-ink-2); font-size:13.5px; line-height:1.6; margin:0 0 10px} .cb-billing .content.mt-3{margin-top:14px} .cb-billing .my-3{margin:14px 0; padding:14px 16px; background:var(--cb-surface-2); border:1px solid var(--cb-line); border-radius:11px} .cb-billing .my-3 .mb-1{margin:0 0 7px; font-size:13px; color:var(--cb-ink-2)} .cb-billing .my-3 .mb-1:last-child{margin-bottom:0} .cb-billing .f-w-600{font-weight:600; color:var(--cb-ink); font-family:var(--cb-mono)} .cb-billing .alert{padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; border:1px solid} .cb-billing .alert-warning{background:var(--cb-amber-tint); color:#8A6D1A; border-color:var(--cb-amber)} .cb-billing .alert-success{background:var(--cb-good-tint); color:var(--cb-good); border-color:var(--cb-good)} .cb-billing .alert-danger{background:var(--cb-coral-tint); color:var(--cb-coral-2); border-color:var(--cb-coral)} .cb-billing .security-logs{list-style:none; margin:0; padding:0; max-height:340px; overflow:auto} .cb-billing .security-logs li{font-family:var(--cb-mono); font-size:12px; color:var(--cb-ink-3); padding:8px 2px; border-bottom:1px solid var(--cb-line)} .cb-billing .security-logs li:last-child{border-bottom:0} .cb-billing .security-logs li b{color:var(--cb-ink); font-weight:600} .cb-billing iconify-icon{display:none} .cb-billing .stripe-button-el{margin-top:4px} /* general prose + light inline code block (onboarding, etc.) */ .cb-prose{color:var(--cb-ink-2); font-size:13.5px; line-height:1.65; margin:0 0 12px} .cb-prose:last-child{margin-bottom:0} .cb-prose b{color:var(--cb-ink); font-weight:600} .cb-prose a{color:var(--cb-primary)} .cb-codeblock{background:var(--cb-surface-2); border:1px solid var(--cb-line); border-radius:10px; padding:11px 14px; font-family:var(--cb-mono); font-size:12.5px; color:var(--cb-ink); margin:6px 0 12px; word-break:break-all; line-height:1.7} .cb-codeblock b{color:var(--cb-primary); font-weight:600} /* ============================================================================ AUTH PAGES — login / logout / 2fa / forgot / verify / payment Standalone pre-auth screens. Centered card on a soft background, cb only. ========================================================================== */ .cb-auth{min-height:100svh; display:flex; align-items:flex-start; justify-content:center; padding:62px 20px 40px; background: radial-gradient(640px 420px at 14% 6%, rgba(47,86,212,.11), transparent 60%), radial-gradient(720px 500px at 90% 18%, rgba(229,87,61,.07), transparent 60%), radial-gradient(900px 560px at 50% 116%, rgba(47,86,212,.10), transparent 55%), #F1F4F8; margin:0; font-family:var(--cb-body); color:var(--cb-ink)} .cb-authbox{width:100%; max-width:418px} .cb-authlogo{text-align:center; margin-bottom:24px} .cb-authlogo img{height:34px; width:auto} .cb-authcard{background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:16px; box-shadow:0 18px 50px -12px rgba(18,22,30,.20), 0 4px 12px -4px rgba(18,22,30,.08); padding:30px 30px 28px} .cb-auth .cb-input{background:#F5F7FA; border-color:#E2E7EF} .cb-auth .cb-input:focus{background:var(--cb-surface)} .cb-authcard h1{font-family:var(--cb-disp); font-size:21px; font-weight:600; letter-spacing:-.01em; color:var(--cb-ink); margin:0 0 6px} .cb-authcard .sub{font-size:13.5px; color:var(--cb-ink-3); margin:0 0 22px; line-height:1.55} .cb-authcard .sub b{color:var(--cb-ink); font-weight:600} .cb-authcard form .cb-field{margin-bottom:15px} .cb-authrow{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 18px; font-size:12.5px} .cb-authrow a{color:var(--cb-primary); text-decoration:none} .cb-authrow a:hover{text-decoration:underline} .cb-check{display:inline-flex; align-items:flex-start; gap:8px; color:var(--cb-ink-2); cursor:pointer; user-select:none; font-size:13px; line-height:1.45} .cb-check input{accent-color:var(--cb-primary); width:15px; height:15px; margin:1px 0 0; flex:none} .cb-check a{color:var(--cb-primary); text-decoration:none} .cb-check a:hover{text-decoration:underline} .cb-btn.full{width:100%; justify-content:center} .cb-pwwrap{position:relative} .cb-pwwrap .cb-input{padding-right:60px} .cb-pwtoggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--cb-ink-3); background:none; border:0; font-size:11.5px; font-weight:600; padding:6px 10px; letter-spacing:.02em} .cb-pwtoggle:hover{color:var(--cb-ink)} .cb-authfoot{text-align:center; font-size:13px; color:var(--cb-ink-3); margin:20px 0 0} .cb-authfoot a{color:var(--cb-primary); font-weight:500; text-decoration:none} .cb-authfoot a:hover{text-decoration:underline} .cb-support{display:flex; align-items:center; gap:11px; margin-top:22px; padding-top:18px; border-top:1px solid var(--cb-line); font-size:12.5px; color:var(--cb-ink-3); line-height:1.45} .cb-support a{color:var(--cb-primary); text-decoration:none} .cb-support svg{width:22px; height:22px; color:var(--cb-ink-3); flex:none} .g-recaptcha{margin:0 0 16px} /* scoped compat for payment's echoed $pagetext (plan dropdown + buttons) */ .cb-auth .form-info{font-size:13.5px; color:var(--cb-ink-2); line-height:1.6; margin:0 0 16px} .cb-auth .form-info b{color:var(--cb-ink); font-weight:600} .cb-auth .form-info p{margin:0 0 10px} .cb-auth .row.mb-3{display:flex; align-items:center; gap:8px; margin:10px 0} .cb-auth .col-form-label{font-weight:600; color:var(--cb-ink); font-size:13px} .cb-auth .dropdown{position:relative; display:inline-block} .cb-auth .dropdown-toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--cb-line); background:var(--cb-surface-2); border-radius:9px; font:inherit; font-size:13px; color:var(--cb-ink); cursor:pointer} .cb-auth .dropdown-toggle::after{content:"▾"; color:var(--cb-ink-3)} .cb-auth .dropdown-menu{display:none; position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:300px; background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:11px; box-shadow:var(--cb-sh); padding:6px; list-style:none; margin:0} .cb-auth .dropdown-menu.show{display:block} .cb-auth .dropdown-item{display:block; padding:8px 11px; font-size:12.5px; color:var(--cb-ink-2); text-decoration:none; border-radius:7px} .cb-auth .dropdown-item:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-auth .dropdown-item.disabled{color:var(--cb-ink-3); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; pointer-events:none; padding-bottom:3px} .cb-auth .btn-light,.cb-auth .btn-block{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; background:var(--cb-primary); color:#fff; font-weight:600; font-size:13.5px; text-decoration:none; border:0; margin-top:8px} .cb-auth .btn-light:hover{filter:brightness(1.05)} .cb-auth .stripe-button-el{margin-top:4px} /* register — plan summary box */ .cb-auth .cb-planbox{background:var(--cb-surface-2); border:1px solid var(--cb-line); border-radius:11px; padding:12px 15px 13px; margin:0 0 18px; font-size:13px} .cb-auth .cb-planhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; padding-bottom:9px; border-bottom:1px solid var(--cb-line)} .cb-auth .cb-planttl{font-family:var(--cb-disp); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--cb-ink-3)} .cb-auth .cb-planlink{font-size:12px; color:var(--cb-primary); text-decoration:none; white-space:nowrap} .cb-auth .cb-planlink:hover{text-decoration:underline} .cb-auth .cb-planrow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:2px 0} .cb-auth .cb-planrow > span{color:var(--cb-ink-3)} .cb-auth .cb-planrow b{color:var(--cb-ink); font-weight:600; text-align:right} .cb-auth .cb-planrow b .cb-freq{color:var(--cb-ink-3); font-weight:400; font-size:12px} .cb-auth .cb-planupsell{display:flex; align-items:center; gap:8px; margin-top:11px; padding:8px 11px; background:var(--cb-amber-tint); border-radius:8px; font-size:12px; color:#8A6D1A; line-height:1.35} .cb-auth .cb-planupsell svg{width:15px; height:15px; flex:none; color:#B58A12} .cb-auth .cb-planupsell small{font-size:12px} .cb-auth .cb-planupsell a{color:#7A5E0F; font-weight:600; text-decoration:underline} /* billing — subscription + payments side by side; readable history log */ .cb-billing-top{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; margin-bottom:16px} @media (max-width:900px){ .cb-billing-top{grid-template-columns:1fr} } .cb-billing .cb-grid2 > div:only-child{grid-column:1 / -1} .cb-billing .cb-paylog{list-style:none; margin:0; padding:0; max-height:440px; overflow:auto} .cb-billing .cb-paylog li{display:flex; align-items:baseline; gap:13px; padding:9px 2px; border-bottom:1px solid var(--cb-line); font-size:13px; color:var(--cb-ink); line-height:1.45} .cb-billing .cb-paylog li:last-child{border-bottom:0} .cb-billing .cb-paylog .pdate{font-family:var(--cb-mono); font-size:11px; color:var(--cb-ink-3); flex:none; min-width:74px; padding-top:1px} .cb-billing .cb-paylog .pmsg{flex:1} .cb-billing .cb-paylog .pamt{font-family:var(--cb-mono); font-weight:600} .cb-billing .cb-paylog .ppay .pamt{color:var(--cb-good)} .cb-billing .cb-paylog .pcancel .pmsg{color:var(--cb-coral); font-weight:500} /* onboarding wizard — wide standalone card + step bar */ .cb-authbox.cb-wide{max-width:520px} /* ---- plan lock (gated features) ---- */ .cb-lockwrap{display:flex; justify-content:center; padding:24px 0} .cb-lock{position:relative; max-height:560px; overflow:hidden; border-radius:14px} .cb-lock-preview{filter:blur(3px) saturate(.65); opacity:.5; pointer-events:none; user-select:none} .cb-lock-overlay{position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:radial-gradient(700px 340px at 50% 40%, rgba(244,246,249,.4), rgba(244,246,249,.74))} .cb-lockcard{max-width:410px; width:100%; background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:16px; box-shadow:0 18px 50px -12px rgba(18,22,30,.22), 0 4px 12px -4px rgba(18,22,30,.08); padding:30px 30px 26px; text-align:center} .cb-lockcard .ic{width:54px; height:54px; border-radius:15px; background:var(--cb-primary-tint); color:var(--cb-primary); display:grid; place-items:center; margin:0 auto 16px} .cb-lockcard .ic svg{width:26px; height:26px} .cb-lockcard h3{font-family:var(--cb-disp); font-size:19px; font-weight:600; color:var(--cb-ink); margin:0 0 8px; letter-spacing:-.01em} .cb-lockcard p{font-size:13.5px; color:var(--cb-ink-2); line-height:1.55; margin:0 0 8px} .cb-lockcard .plan{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cb-primary-2); background:var(--cb-primary-tint); border-radius:7px; padding:3px 9px; margin:2px 0 18px} .cb-lockcard .cb-btn{width:100%; justify-content:center; margin-bottom:12px} .cb-lockcard .sec{font-size:12.5px; color:var(--cb-ink-3)} .cb-lockcard .sec a{color:var(--cb-primary); text-decoration:none} .cb-lockcard .sec a:hover{text-decoration:underline} .cb-tagupgrade{font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1; background:var(--cb-coral); color:#fff; padding:3px 6px; border-radius:6px; margin-left:auto} .cb-nav .cb-sub a.cb-haslock{display:flex; align-items:center; gap:8px} .cb-steps{display:flex; align-items:center; margin:0 0 24px} .cb-stepdot{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; font-family:var(--cb-mono); background:var(--cb-surface-2); border:1px solid var(--cb-line); color:var(--cb-ink-3); flex:none} .cb-stepdot.active{background:var(--cb-primary); border-color:var(--cb-primary); color:#fff} .cb-stepdot.done{background:var(--cb-primary-tint); border-color:var(--cb-primary); color:var(--cb-primary)} .cb-stepline{height:2px; flex:1; background:var(--cb-line); margin:0 5px} .cb-stepline.done{background:var(--cb-primary)} .cb-onboard h3{font-family:var(--cb-disp); font-size:18px; font-weight:600; color:var(--cb-ink); margin:0 0 10px; letter-spacing:-.01em} .cb-onboard p{font-size:13.5px; color:var(--cb-ink-2); line-height:1.6; margin:0 0 12px} .cb-onboard p b, .cb-onboard b{color:var(--cb-ink); font-weight:600} .cb-onboard a{color:var(--cb-primary); text-decoration:none} .cb-onboard a:hover{text-decoration:underline} .cb-onboard img{max-width:100%; height:auto; border-radius:9px; border:1px solid var(--cb-line); margin:4px 6px 14px 0} .cb-onboard pre{background:var(--cb-ink); color:#E6EAF2; font-family:var(--cb-mono); font-size:12px; line-height:1.65; padding:12px 14px; border-radius:9px; overflow-x:auto; margin:8px 0 14px; white-space:pre-wrap; word-break:break-word} .cb-onboard hr{border:0; border-top:1px solid var(--cb-line); margin:18px 0} .cb-onboard .btn{display:inline-flex; align-items:center; justify-content:center; width:100%; padding:11px 18px; border-radius:10px; background:var(--cb-primary); color:#fff !important; font-weight:600; font-size:13.5px; text-decoration:none !important; border:0; text-transform:none !important; margin:8px 0; box-sizing:border-box} .cb-onboard .btn:hover{filter:brightness(1.05)} .cb-onboard small{font-size:12px; color:var(--cb-ink-3)} .cb-onboard small a{color:var(--cb-primary)} /* ===== admin panel — scoped compat layer (restyles legacy Cuba/Bootstrap markup) ===== */ .cb-adminpanel .page-wrapper, .cb-adminpanel .container-fluid{padding:0; margin:0; width:100%; background:transparent} .cb-adminpanel .row{display:flex; flex-wrap:wrap; gap:16px; margin:0 0 16px; align-items:stretch} .cb-adminpanel [class*="col-"]{flex:1 1 100%; min-width:0; padding:0} .cb-adminpanel .col-6{flex:1 1 calc(50% - 8px)} .cb-adminpanel .col-xl-4{flex:1 1 calc(33.333% - 11px)} .cb-adminpanel .col-xl-8{flex:1 1 calc(66.666% - 8px)} @media (max-width:1000px){ .cb-adminpanel .col-6, .cb-adminpanel .col-xl-4, .cb-adminpanel .col-xl-8{flex:1 1 100%} } /* page header + sub-nav (breadcrumb) */ .cb-adminpanel .page-titles{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin:0 0 20px; padding:0} .cb-adminpanel .page-titles h3{font-family:var(--cb-disp); font-size:22px; font-weight:600; color:var(--cb-ink); margin:0 0 10px; letter-spacing:-.01em} .cb-adminpanel .breadcrumb{display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:0} .cb-adminpanel .breadcrumb-item{margin:0} .cb-adminpanel .breadcrumb-item a{display:inline-block; padding:4px 11px; border-radius:7px; background:var(--cb-surface-2); border:1px solid var(--cb-line); color:var(--cb-ink-2); font-size:12.5px; font-weight:500; text-decoration:none} .cb-adminpanel .breadcrumb-item a:hover{border-color:var(--cb-primary); color:var(--cb-primary)} .cb-adminpanel .chart-text h4{font-family:var(--cb-disp); font-size:14px; font-weight:600; color:var(--cb-ink); margin:0; white-space:nowrap} .cb-adminpanel .chart-text .mdi{color:var(--cb-good)} /* cards */ .cb-adminpanel .card{background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:14px; box-shadow:var(--cb-sh); margin:0 0 16px; overflow:hidden} .cb-adminpanel .card-body{padding:20px 22px} .cb-adminpanel .card-title, .cb-adminpanel h4.card-title{font-family:var(--cb-disp); font-size:15px; font-weight:600; color:var(--cb-ink); margin:0 0 4px} /* search form lives inside the "Configured Users" card title — keep it compact & contained */ .cb-adminpanel .card-title{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 14px} .cb-adminpanel .card-title form{display:flex; align-items:center; gap:8px; margin:0; float:none !important} .cb-adminpanel .card-title form input{width:210px !important; max-width:48vw; margin:0} .cb-adminpanel .card-title form button{margin:0; white-space:nowrap} .cb-adminpanel h3.card-title{font-size:16px} .cb-adminpanel .card-subtitle{font-size:12.5px; color:var(--cb-ink-3); margin:0 0 14px; display:block; font-weight:400} .cb-adminpanel .card p{font-size:13px; color:var(--cb-ink-2); line-height:1.55; margin:0 0 8px} .cb-adminpanel .card p b{color:var(--cb-ink); font-weight:600} .cb-adminpanel .card a{color:var(--cb-primary); text-decoration:none} .cb-adminpanel .card a:hover{text-decoration:underline} .cb-adminpanel hr{border:0; border-top:1px solid var(--cb-line); margin:14px 0} /* alerts */ .cb-adminpanel .alert{border-radius:10px; padding:11px 14px; font-size:13px; margin:0 0 16px; border:1px solid transparent; line-height:1.5} .cb-adminpanel .alert-danger{background:var(--cb-coral-tint); border-color:var(--cb-coral); color:#8a2c1c} .cb-adminpanel .alert-success{background:var(--cb-good-tint); border-color:var(--cb-good); color:#15683f} /* forms */ .cb-adminpanel .form-group{margin:0 0 14px} .cb-adminpanel .form-group.row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px} .cb-adminpanel label{font-size:12.5px; font-weight:600; color:var(--cb-ink-2); margin:0 0 5px; display:inline-block} .cb-adminpanel .col-form-label{flex:0 0 auto; margin:0} .cb-adminpanel input:not([type=radio]):not([type=checkbox]):not([type=hidden]), .cb-adminpanel select, .cb-adminpanel textarea, .cb-adminpanel .form-control{ width:100%; max-width:100%; box-sizing:border-box; padding:9px 12px; font-size:13px; font-family:var(--cb-body); color:var(--cb-ink); background:var(--cb-surface); border:1px solid var(--cb-line); border-radius:9px; outline:none} .cb-adminpanel input:focus, .cb-adminpanel select:focus, .cb-adminpanel textarea:focus{border-color:var(--cb-primary); box-shadow:0 0 0 3px var(--cb-primary-tint)} .cb-adminpanel textarea{font-family:var(--cb-mono); font-size:12px; line-height:1.5; resize:vertical} .cb-adminpanel .form-group.row .col-7, .cb-adminpanel .form-group.row .col-8{flex:1 1 240px} .cb-adminpanel .form-check{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px} .cb-adminpanel .form-check input{width:auto} .cb-adminpanel .form-check-label{font-weight:400; color:var(--cb-ink-2); margin:0} /* buttons */ .cb-adminpanel button, .cb-adminpanel .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; padding:9px 16px; border-radius:9px; font-size:13px; font-weight:600; font-family:var(--cb-body); border:1px solid var(--cb-primary); background:var(--cb-primary); color:#fff; text-decoration:none; margin-top:8px} .cb-adminpanel button:hover, .cb-adminpanel .btn:hover{filter:brightness(1.05)} .cb-adminpanel .btn-warning{background:var(--cb-coral); border-color:var(--cb-coral); color:#fff} .cb-adminpanel .mt-3{margin-top:14px !important} /* table */ .cb-adminpanel .table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border:1px solid var(--cb-line); border-radius:11px} .cb-adminpanel .card, .cb-adminpanel .card-body{min-width:0} .cb-adminpanel table{min-width:640px} .cb-adminpanel table{width:100%; border-collapse:collapse; font-size:12.5px} .cb-adminpanel table thead th{text-align:left; padding:10px 12px; background:var(--cb-surface-2); color:var(--cb-ink-3); font-family:var(--cb-disp); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--cb-line); white-space:nowrap} .cb-adminpanel table tbody td{padding:9px 12px; border-bottom:1px solid var(--cb-line); color:var(--cb-ink-2); vertical-align:top} .cb-adminpanel table tbody tr:last-child td{border-bottom:0} .cb-adminpanel table tbody td b{color:var(--cb-ink); font-weight:600} .cb-adminpanel table tbody td small{color:var(--cb-ink-3); font-size:11px} .cb-adminpanel table a{color:var(--cb-primary); text-decoration:none} .cb-adminpanel table tr[bgcolor="#E1DDDC"]{background:var(--cb-surface-2) !important} .cb-adminpanel table tr[bgcolor="white"]{background:var(--cb-surface) !important} /* misc utilities used in markup */ .cb-adminpanel .pull-right, .cb-adminpanel .float-right{float:right} .cb-adminpanel .list-inline{list-style:none; display:flex; gap:14px; padding:0; margin:0} .cb-adminpanel .list-inline h6{font-size:12px; color:var(--cb-ink-3); margin:0; display:flex; align-items:center; gap:5px} .cb-adminpanel .text-muted{color:var(--cb-ink-3)} .cb-adminpanel .clear{clear:both} .cb-adminpanel #dns-requests-per-day{min-height:210px} /* billing — Stripe invoices list with PDF download */ .cb-billing .cb-invlist{list-style:none; margin:0; padding:0; max-height:440px; overflow:auto} .cb-billing .cb-invrow{display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--cb-line); font-size:13px} .cb-billing .cb-invrow:last-child{border-bottom:0} .cb-billing .cb-invleft{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1} .cb-billing .cb-invdate{color:var(--cb-ink); font-weight:600; white-space:nowrap} .cb-billing .cb-invnum{font-family:var(--cb-mono); font-size:10.5px; color:var(--cb-ink-3); overflow:hidden; text-overflow:ellipsis} .cb-billing .cb-invamt{font-family:var(--cb-mono); font-weight:600; color:var(--cb-ink); white-space:nowrap} .cb-billing .cb-invstatus{font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:20px; white-space:nowrap} .cb-billing .cb-inv-paid .cb-invstatus{background:var(--cb-good-tint); color:#15683f} .cb-billing .cb-inv-open .cb-invstatus{background:var(--cb-amber-tint); color:#8a6d1a} .cb-billing .cb-inv-void .cb-invstatus,.cb-billing .cb-inv-uncollectible .cb-invstatus{background:var(--cb-coral-tint); color:#8a2c1c} .cb-billing .cb-inv-draft .cb-invstatus{background:var(--cb-surface-2); color:var(--cb-ink-3)} .cb-billing .cb-invactions{display:flex; gap:6px; white-space:nowrap} .cb-billing .cb-invactions a{display:inline-flex; align-items:center; padding:5px 11px; border-radius:7px; font-size:11.5px; font-weight:600; text-decoration:none; border:1px solid var(--cb-line)} .cb-billing .cb-invpdf{background:var(--cb-primary); color:#fff !important; border-color:var(--cb-primary) !important} .cb-billing .cb-invpdf:hover{filter:brightness(1.05)} .cb-billing .cb-invview{color:var(--cb-primary); background:var(--cb-surface)} .cb-billing .cb-invview:hover{border-color:var(--cb-primary)} /* billing — editable billing details form (syncs to Stripe customer) */ .cb-billing .cb-bdform{margin:0} .cb-billing .cb-bdgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px} .cb-billing .cb-bdfull{grid-column:1 / -1} .cb-billing .cb-bdform .cb-field{margin:0} .cb-billing .cb-bdform .cb-label .cb-cap{font-weight:400; text-transform:none; letter-spacing:0; font-size:11px} @media (max-width:680px){ .cb-billing .cb-bdgrid{grid-template-columns:1fr} .cb-billing .cb-bdfull{grid-column:auto} } /* billing — upgrade confirmation modal (current vs new comparison) */ .cb-upgcompare{display:flex; align-items:stretch; gap:10px; margin:0 0 16px} .cb-upgcol{flex:1; border:1px solid var(--cb-line); border-radius:11px; padding:14px 12px; display:flex; flex-direction:column; gap:4px; text-align:center} .cb-upgcol.cb-upgnew{border-color:var(--cb-primary); background:var(--cb-primary-tint)} .cb-upglbl{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--cb-ink-3)} .cb-upgnew .cb-upglbl{color:var(--cb-primary)} .cb-upgplan{font-family:var(--cb-disp); font-weight:600; font-size:15px; color:var(--cb-ink)} .cb-upgprice{font-family:var(--cb-mono); font-size:13px; color:var(--cb-ink-2)} .cb-upgarrow{display:flex; align-items:center; color:var(--cb-ink-3); font-size:18px} .cb-upgnotes{list-style:none; margin:0; padding:0} .cb-upgnotes li{position:relative; padding:5px 0 5px 22px; font-size:13px; color:var(--cb-ink-2); line-height:1.5} .cb-upgnotes li:before{content:''; position:absolute; left:3px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--cb-primary)} .cb-upgnotes b{color:var(--cb-ink); font-weight:600} /* ============================================================ OPTIONAL NAV LAYOUT + COLOR (additive — sidebar+current = default, untouched) Activated only when internal-sidebar.php adds cb-top / cbtheme-* classes. ============================================================ */ .cb-app.cb-top{display:block} .cb-app.cb-top .cb-sidebar{display:none} .cb-app.cb-top .cb-burger{display:none} .cb-topnav{position:sticky; top:0; z-index:40} .cb-topnav-bar{display:flex; align-items:center; height:60px; background:var(--cb-surface); border-bottom:1px solid var(--cb-line); padding:0 22px} .cb-topnav-bar .cb-brand{padding:0; margin:0 6px 0 0} .cb-topnav-bar .cb-brand img{height:26px} .cb-topnav-nav{display:flex; align-items:center; gap:4px; margin-left:18px; overflow-x:auto} .cb-tnlink{display:flex; align-items:center; padding:8px 13px; border-radius:10px; font-family:var(--cb-body); font-weight:500; font-size:13.5px; color:var(--cb-ink-2); text-decoration:none; white-space:nowrap} .cb-tnlink:hover{background:var(--cb-surface-2); color:var(--cb-ink)} .cb-tnlink.active{background:var(--cb-primary-tint); color:var(--cb-primary-2); font-weight:600} .cb-topnav-sub{display:flex; align-items:center; gap:2px; height:47px; background:var(--cb-surface); border-bottom:1px solid var(--cb-line); padding:0 22px; overflow-x:auto} .cb-tnsub{position:relative; padding:7px 11px; border-radius:8px; font-family:var(--cb-body); font-weight:500; font-size:12.8px; color:var(--cb-ink-3); text-decoration:none; white-space:nowrap} .cb-tnsub:hover{color:var(--cb-ink)} .cb-tnsub.active{color:var(--cb-primary-2); font-weight:600} .cb-tnsub.active:after{content:""; position:absolute; left:11px; right:11px; bottom:-12px; height:2px; background:var(--cb-primary-2); border-radius:2px} /* color themes: scoped variable overrides on the nav chrome only (content stays light) */ .cbtheme-mid .cb-sidebar, .cbtheme-mid .cb-topnav-bar, .cbtheme-mid .cb-topnav-sub{ --cb-surface:#ECEEF2; --cb-surface-2:#DEE2E9; --cb-line:#D6DBE3; --cb-ink-2:#3C4350; --cb-ink-3:#586073; } .cbtheme-darkgray .cb-sidebar, .cbtheme-darkgray .cb-topnav-bar, .cbtheme-darkgray .cb-topnav-sub{ --cb-surface:#2B3038; --cb-surface-2:rgba(255,255,255,.07); --cb-line:#373D47; --cb-ink:#ffffff; --cb-ink-2:#B4BBC7; --cb-ink-3:#828B99; --cb-primary-tint:rgba(120,150,255,.16); --cb-primary-2:#A9BCFF; } .cbtheme-darkblue .cb-sidebar, .cbtheme-darkblue .cb-topnav-bar, .cbtheme-darkblue .cb-topnav-sub{ --cb-surface:#1B2333; --cb-surface-2:rgba(255,255,255,.06); --cb-line:#2A3450; --cb-ink:#ffffff; --cb-ink-2:#AAB4C9; --cb-ink-3:#79859E; --cb-primary-tint:rgba(120,150,255,.18); --cb-primary-2:#9DB4FF; } /* dark themes: the logo is multi-tone (fox mark), which a flat white filter would destroy — so show the real logo on a small white chip instead. */ .cbtheme-darkgray .cb-brand a, .cbtheme-darkblue .cb-brand a{background:#fff; padding:5px 10px; border-radius:10px} /* Devices tab: per-device config rows */ .cb-devhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px} .cb-devname{font-family:var(--cb-disp);font-weight:600;font-size:16px;color:var(--cb-ink);margin-right:8px} .cb-cfgrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0} .cb-cfglabel{flex:0 0 auto;min-width:184px;font-size:12.5px;font-weight:600;color:var(--cb-ink-2)} .cb-cfgval{flex:1 1 240px;min-width:0;font-family:var(--cb-mono);font-size:12.5px;line-height:1.5;background:var(--cb-surface-2);border:1px solid var(--cb-line);border-radius:8px;padding:8px 11px;color:var(--cb-ink);word-break:break-all} /* inline UI/menu reference chip (config steps) */ .cb-ui{display:inline-block;font-family:var(--cb-body);font-weight:600;font-size:.9em;color:var(--cb-ink);background:var(--cb-surface-2);border:1px solid var(--cb-line);border-radius:6px;padding:1px 7px;white-space:nowrap;vertical-align:baseline}