/* Roobera design layer. Loaded last by panel.html and user.html; removing its <link> restores the previous look. */

/* Tokens: charcoal + orange from the Roobera logo. Text-on-white accents use the darker orange for contrast. */
html:root{--rb-orange:#e8640c;--rb-orange-strong:#c4520a;--rb-orange-hover:#a94707;--rb-radius:12px;--rb-radius-sm:8px;--rb-shadow:0 1px 2px rgba(17,24,39,.05),0 1px 3px rgba(17,24,39,.04);--rb-danger:#b42318;
 --studio-bg:#f4f5f7;--studio-surface:#fff;--studio-elevated:#f8f9fa;--studio-ink:#1b1e22;--studio-muted:#5c636c;--studio-border:#e3e6ea;--studio-accent:#b34a05;--studio-soft:#fff1e6;--studio-positive:#17704b;
 --pf-ground:#f4f5f7;--pf-surface:#fff;--pf-raised:#f8f9fa;--pf-ink:#1b1e22;--pf-muted:#5c636c;--pf-line:#e3e6ea;--pf-accent:#b34a05;
 --ui-bg:#f4f5f7;--ui-surface:#fff;--ui-ink:#1b1e22;--ui-muted:#5c636c;--ui-border:#e3e6ea;--ui-accent:#b34a05;--ui-accent-soft:#fff1e6}
html[data-theme=dark]:root{--rb-orange-strong:#e8640c;--rb-orange-hover:#ff7a26;--rb-shadow:0 1px 2px rgba(0,0,0,.35);--rb-danger:#ff8a80;
 --studio-bg:#121417;--studio-surface:#1b1e22;--studio-elevated:#23272c;--studio-ink:#eef0f3;--studio-muted:#a7aeb7;--studio-border:#30353b;--studio-accent:#ff9a57;--studio-soft:#3a2516;--studio-positive:#7fd3ab;
 --pf-ground:#121417;--pf-surface:#1b1e22;--pf-raised:#23272c;--pf-ink:#eef0f3;--pf-muted:#a7aeb7;--pf-line:#30353b;--pf-accent:#ff9a57;
 --ui-bg:#121417;--ui-surface:#1b1e22;--ui-ink:#eef0f3;--ui-muted:#a7aeb7;--ui-border:#30353b;--ui-accent:#ff9a57;--ui-accent-soft:#3a2516}
html body.studio-shell.user-portal{--studio-bg:#f4f5f7;--studio-surface:#fff;--studio-ink:#1b1e22;--studio-muted:#5c636c;--studio-border:#e3e6ea;--studio-accent:#b34a05;--studio-soft:#fff1e6}
html[data-theme=dark] body.studio-shell.user-portal{--studio-bg:#121417;--studio-surface:#1b1e22;--studio-ink:#eef0f3;--studio-muted:#a7aeb7;--studio-border:#30353b;--studio-accent:#ff9a57;--studio-soft:#3a2516}
html[data-theme=dark] body{background:var(--studio-bg)}

/* Brand */
html:root body img[src*="roobera-logo"]{filter:none!important;height:22px;width:auto}
html[data-theme=dark]:root body img[src*="roobera-logo"]{content:url("/static/roobera-logo-dark.png")}
html:root body.user-portal img[src*="roobera-logo"]{height:28px;width:auto!important}

/* Numbers line up in tables and cards */
html body.studio-shell.ui-refreshed :is(td.ltr,.health-cards strong,#health-rx,#health-tx){font-variant-numeric:tabular-nums}

/* Dashboard cards: quiet label, prominent value */
html body.studio-shell.ui-refreshed #dashboard .health-label{font-size:12.5px;font-weight:600;color:var(--studio-muted)}
html body.studio-shell.ui-refreshed #dashboard .health-cards small{color:var(--studio-muted)}
html body.studio-shell.ui-refreshed #dashboard .health-link{transition:border-color .15s,box-shadow .15s}
html body.studio-shell.ui-refreshed #dashboard .health-link:hover{border-color:var(--rb-orange);outline:0}
html body.studio-shell.ui-refreshed #dashboard .health-link:focus-visible{outline:2px solid var(--rb-orange);outline-offset:2px}

/* Status: coloured dot + text */
html body.studio-shell.ui-refreshed td:is(.health-good,.health-bad){font-weight:600;white-space:nowrap}
html body.studio-shell.ui-refreshed td.health-good{color:var(--studio-positive)}
html body.studio-shell.ui-refreshed td.health-bad{color:var(--rb-danger)}
html body.studio-shell.ui-refreshed td:is(.health-good,.health-bad)::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-inline-end:8px;vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}

/* Tables */
html body.studio-shell.ui-refreshed table th{font-size:12px;font-weight:600;color:var(--studio-muted)}
html body.studio-shell.ui-refreshed table tbody tr{transition:background-color .12s}
html body.studio-shell.ui-refreshed table tbody tr:hover{background:var(--studio-elevated)}

/* Navigation: clear active item with an inline-start indicator */
html body.studio-shell.ui-refreshed .nav button[data-tab].active{background:var(--studio-soft);color:var(--studio-accent);font-weight:600}
html[dir=rtl] body.studio-shell.ui-refreshed .nav button[data-tab].active{box-shadow:inset -3px 0 0 var(--rb-orange)!important}
html[dir=ltr] body.studio-shell.ui-refreshed .nav button[data-tab].active{box-shadow:inset 3px 0 0 var(--rb-orange)!important}
html body.studio-shell.ui-refreshed .nav-section-toggle{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--studio-muted)}

/* Controls */
html body.studio-shell.ui-refreshed :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--rb-orange);outline-offset:2px}
html body.studio-shell.ui-refreshed :is(input,select,textarea):focus{border-color:var(--rb-orange)}
html body.studio-shell.ui-refreshed .primary,html body.studio-shell.ui-refreshed button.primary{background:var(--rb-orange-strong);border-color:var(--rb-orange-strong);color:#fff}
html body.studio-shell.ui-refreshed .primary:hover,html body.studio-shell.ui-refreshed button.primary:hover{background:var(--rb-orange-hover);border-color:var(--rb-orange-hover)}
html[data-theme=dark] body.studio-shell.ui-refreshed :is(.primary,button.primary){color:#16181b}
html body.studio-shell.ui-refreshed :is(.badge,.inline-note){border-radius:999px}

@media (prefers-reduced-motion:reduce){.studio-shell *{transition:none!important}}

/* User portal: account bar, "Connect to VPN" steps, downloads, security grid (user-layout.js) */
html body.studio-shell.user-portal .rb-account-bar{display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
html body.studio-shell.user-portal .rb-account-bar>*{margin:0}
html body.studio-shell.user-portal .rb-account-bar .portal-profile-label{flex-basis:100%;color:var(--studio-muted);font-size:12.5px}
html body.studio-shell.user-portal .rb-section-title{font-size:17px;font-weight:700;margin:28px 0 12px;color:var(--studio-ink)}
html body.studio-shell.user-portal .rb-video summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;font-weight:700}
html body.studio-shell.user-portal .rb-video summary::-webkit-details-marker{display:none}
html body.studio-shell.user-portal .rb-video summary::before{content:'▶';flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rb-orange);color:#fff;font-size:12px}
html body.studio-shell.user-portal .rb-video[open] summary{margin-bottom:12px}
html body.studio-shell.user-portal .rb-video video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--rb-radius-sm);background:#111}
html body.studio-shell.user-portal .rb-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
html body.studio-shell.user-portal .rb-step h3{margin:0 0 6px;font-size:15px;font-weight:700}
html body.studio-shell.user-portal .rb-step-code #vpn-code-box{border:0;padding:0;margin:0;background:none;box-shadow:none}
html body.studio-shell.user-portal .rb-downloads{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
html body.studio-shell.user-portal .rb-download{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--studio-border);border-radius:10px;text-decoration:none;color:var(--studio-ink);background:var(--studio-surface);transition:border-color .15s}
html body.studio-shell.user-portal .rb-download:hover{border-color:var(--rb-orange)}
html body.studio-shell.user-portal .rb-download small{color:var(--studio-muted);font-size:12px}
html body.studio-shell.user-portal .rb-download.is-recommended{border-color:var(--rb-orange);background:var(--studio-soft)}
html body.studio-shell.user-portal .rb-recommended{font-size:11.5px;font-weight:600;color:var(--studio-accent)}
html body.studio-shell.user-portal .rb-import-url{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 14px}
html body.studio-shell.user-portal .rb-import-url code{padding:8px 12px;border-radius:8px;background:var(--studio-elevated);border:1px solid var(--studio-border);font-size:13px;color:var(--studio-ink)}
html body.studio-shell.user-portal .rb-security-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
html body.studio-shell.user-portal .rb-renew img{display:block;margin:10px 0;background:#fff;padding:8px;border-radius:8px}
html body.studio-shell.user-portal .rb-renew-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}html body.studio-shell.user-portal #account:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
html body.studio-shell.user-portal #account>*{grid-column:1/-1!important}
html body.studio-shell.user-portal #account>.rb-section-title{margin:14px 0 0}
html body.studio-shell.user-portal .rb-account-bar #account-name{flex:1 1 auto;width:auto}
html body.studio-shell.user-portal .rb-security-grid :is(h2,h3){font-size:15px;font-weight:700;margin:0 0 6px}