/* Site-wide finish for the shared browser workspace and its tool pages. */
:root{
  --fh-void:#101017;
  --fh-chrome:#0b0b10;
  --fh-surface:#1c1c28;
  --fh-surface-2:#252534;
  --fh-ink:#d7cdd2;
  --fh-strong:#f6e6ea;
  --fh-muted:#b8afb8;
  --fh-line:#403844;
  --fh-cyan:#1ec1cb;
  --fh-violet:#1ec1cb;
  --fh-mint:#57d3b4;
  --fh-burgundy:#1a0a0f;
  --fh-blush:#f6e6ea;
  --fh-radius:10px;
}

body.fh-app-body{line-height:1.55;letter-spacing:0}
body.fh-app-body .fh-rail,
.fh-root-rail{width:56px!important;min-width:56px!important;padding:10px 5px max(10px,env(safe-area-inset-bottom))!important;gap:4px!important}
body.fh-app-body .fh-rail-brand,
body.fh-app-body .fh-rail-item,
.fh-root-brand,
.fh-root-rail-link{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
body.fh-app-body .fh-rail-nav{gap:3px}
body.fh-app-body .fh-rail-divider,.fh-root-rail-divider{width:30px;margin:4px 0}

body.fh-app-body .fh-tab-strip,.fh-root-chrome{height:42px;min-height:42px;padding-inline:9px;gap:5px}
body.fh-app-body .fh-tab,.fh-root-tab{height:36px!important;min-height:36px;flex-basis:clamp(132px,18vw,210px);padding-inline:9px!important;gap:7px;font-size:.74rem}
body.fh-app-body .fh-tab-close{width:32px;min-width:32px;height:32px;min-height:32px}
body.fh-app-body .fh-new-tab,.fh-root-new-tab{width:36px;min-width:36px;height:36px;min-height:36px;margin-bottom:1px}
body.fh-app-body .fh-toolbar,.fh-root-toolbar{height:46px;min-height:46px;padding-inline:10px;gap:8px}
body.fh-app-body .fh-tool-btn,.fh-root-toolbar-btn{width:36px;min-width:36px;height:36px;min-height:36px}
body.fh-app-body .fh-route-display,.fh-root-route{height:36px;font-size:12px;border-radius:8px;background:var(--fh-burgundy)}
body.fh-app-body .fh-toolbar-link,.fh-root-signin{min-height:36px;padding:6px 11px;font-size:.75rem}
body.fh-app-body .fh-route-display:focus-within,.fh-root-route:focus-within{border-color:var(--fh-cyan);box-shadow:0 0 0 2px rgba(30,193,203,.18)}
body.fh-app-body .fh-route-display input::placeholder,.fh-root-route input::placeholder{color:#a89ba1;opacity:1}

body.fh-app-body .page{padding:24px clamp(16px,3vw,36px) 36px}
body.fh-app-body .page h1{font-size:clamp(1.75rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.04em}
body.fh-app-body .page h2{line-height:1.25;letter-spacing:-.025em}
body.fh-app-body .card,
body.fh-app-body .glass-card,
body.fh-app-body .service-hero,
body.fh-app-body .service-card,
body.fh-app-body .mail-panel,
body.fh-app-body .ai-shell,
body.fh-app-body .plan{border-radius:12px!important}
body.fh-app-body .card,
body.fh-app-body .glass-card,
body.fh-app-body .service-card{padding:clamp(16px,2vw,22px)}
body.fh-app-body .card h1,
body.fh-app-body .card h2,
body.fh-app-body .card h3,
body.fh-app-body .service-hero h1,
body.fh-app-body .service-card h1,
body.fh-app-body .service-card h2,
body.fh-app-body .service-card h3{color:var(--fh-strong)}
body.fh-app-body .card p,
body.fh-app-body .card li,
body.fh-app-body .service-card p,
body.fh-app-body .service-card li{line-height:1.65}
body.fh-app-body .card a,body.fh-app-body .article a{color:#57e0e4;text-underline-offset:3px}
body.fh-app-body .card a:hover,body.fh-app-body .article a:hover{text-decoration:underline}

body.fh-app-body .btn-primary-custom,
body.fh-app-body .service-btn:not(.secondary),
body.fh-app-body .card .btn:not(.ghost),
body.fh-app-body .btn-nav,
body.fh-app-body .send,
body.fh-app-body .mail-compose,
body.fh-app-body #ai-go,
body.fh-app-body .btn1{
  min-height:40px!important;
  padding-inline:16px!important;
  border:1px solid var(--fh-cyan)!important;
  border-radius:8px!important;
  background:var(--fh-cyan)!important;
  color:#071315!important;
  font-weight:700;
  box-shadow:none!important;
}
body.fh-app-body .btn-primary-custom:hover,
body.fh-app-body .service-btn:not(.secondary):hover,
body.fh-app-body .card .btn:not(.ghost):hover,
body.fh-app-body .send:hover,
body.fh-app-body #ai-go:hover{background:#53dce1!important;border-color:#53dce1!important;color:#071315!important}
body.fh-app-body .service-btn.secondary,
body.fh-app-body .card .btn.ghost{min-height:40px;border:1px solid var(--fh-line)!important;border-radius:8px!important;background:transparent!important;color:var(--fh-strong)!important}
body.fh-app-body .service-btn.secondary:hover,
body.fh-app-body .card .btn.ghost:hover{border-color:var(--fh-cyan)!important;background:var(--fh-surface-2)!important}

body.fh-app-body input,
body.fh-app-body textarea,
body.fh-app-body select,
body.fh-app-body .input,
body.fh-app-body .form-control{min-height:40px;border-radius:8px!important}
body.fh-app-body :focus-visible{outline:2px solid var(--fh-cyan)!important;outline-offset:2px!important}
body.fh-app-body button:disabled,
body.fh-app-body [aria-disabled="true"]{cursor:not-allowed}
body.fh-app-body .fh-foot{margin-top:42px;padding-top:20px}

body.fh-home-body .fh-root-inner{max-width:740px!important}
body.fh-home-body .fh-root-hero h1{font-size:clamp(34px,4vw,48px)!important;letter-spacing:-.055em!important}
body.fh-home-body .fh-root-search{width:min(100%,520px);height:48px;margin:20px auto 12px;padding-inline:14px;border:1px solid var(--fh-line);border-radius:8px;background:var(--fh-burgundy)}
body.fh-home-body .fh-root-search input{font-size:14px}
.fh-home-shortcuts{gap:8px;margin:10px 0 18px}
.fh-home-shortcuts a{min-width:72px;gap:7px;padding:8px 6px;font-size:11px}
.fh-home-shortcuts a i{width:42px;height:42px;font-size:15px}
.fh-home-all-apps{width:min(100%,520px);padding-top:12px}
.fh-home-all-apps nav{gap:8px}

/* The public VPN service page keeps the hub palette while giving the quota and
   location choices a more deliberate reading order. */
body.fh-vpn-page{--bg:var(--fh-void);--card:var(--fh-surface);--line:var(--fh-line);--text:var(--fh-strong);--muted:var(--fh-muted);--ok:var(--fh-mint);--warn:#f0bd73;--bad:#ff8f9f;min-height:100dvh;background:var(--fh-void);font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif}
body.fh-vpn-page .bg{display:none}
body.fh-vpn-page .wrap{width:min(100%,1040px);max-width:1040px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(14px,3vw,28px) 48px}
body.fh-vpn-page .wrap>h1{font-size:clamp(1.8rem,3.2vw,2.4rem);letter-spacing:-.045em;line-height:1.1}
body.fh-vpn-page .sub{max-width:760px;font-size:.96rem;line-height:1.65;color:var(--fh-muted);margin:.55rem 0 1.5rem}
body.fh-vpn-page .sub strong{color:var(--fh-strong)!important}
body.fh-vpn-page .card{padding:clamp(16px,2.6vw,24px);margin-bottom:14px;background:var(--fh-surface);border:1px solid var(--fh-line);border-radius:12px}
body.fh-vpn-page .card h2{margin-bottom:.7rem;color:var(--fh-strong);font-size:1.05rem}
body.fh-vpn-page .card p,body.fh-vpn-page .card li{color:var(--fh-ink);line-height:1.65}
body.fh-vpn-page .badge{border:1px solid rgba(30,193,203,.48);border-radius:6px;background:rgba(30,193,203,.1);color:#63e1e6;letter-spacing:.04em}
body.fh-vpn-page .badge.prem{border-color:rgba(240,189,115,.42);background:rgba(240,189,115,.1);color:#f0bd73}
body.fh-vpn-page .quota-hero{padding:1.2rem .5rem .5rem}
body.fh-vpn-page .quota-left{font-size:clamp(2.2rem,4vw,3rem)}
body.fh-vpn-page .quota-bar{height:8px;border-radius:5px;background:#34303a}
body.fh-vpn-page .quota-fill,body.fh-vpn-page .quota-fill.warn,body.fh-vpn-page .quota-fill.bad{border-radius:5px;background:var(--fh-cyan)}
body.fh-vpn-page .quota-fill.warn{background:#f0bd73}
body.fh-vpn-page .quota-fill.bad{background:#ff8f9f}
body.fh-vpn-page .qcell,body.fh-vpn-page .plan{border:1px solid var(--fh-line);border-radius:9px;background:var(--fh-surface-2)}
body.fh-vpn-page .qcell .k{color:var(--fh-muted)}
body.fh-vpn-page .qcell .v,body.fh-vpn-page .plan h3,body.fh-vpn-page .plan .gb{color:var(--fh-strong)}
body.fh-vpn-page .plan.active,body.fh-vpn-page .plan.prem.active{border-color:var(--fh-cyan)}
body.fh-vpn-page .location-card{background:var(--fh-surface);border-color:var(--fh-line)}
body.fh-vpn-page .loc-btn{min-height:54px;border-color:var(--fh-line);border-radius:9px;background:#15151d;color:var(--fh-strong)}
body.fh-vpn-page .loc-btn:hover,body.fh-vpn-page .loc-btn[aria-pressed="true"]{border-color:var(--fh-cyan);background:rgba(30,193,203,.1);transform:none}
body.fh-vpn-page .loc-btn small,body.fh-vpn-page .loc-state,body.fh-vpn-page .muted{color:var(--fh-muted)}
body.fh-vpn-page .loc-state i{color:var(--fh-mint)}
body.fh-vpn-page .link-input{min-height:42px;border:1px solid var(--fh-line);border-radius:8px;background:#0b0b10;color:var(--fh-strong)}
body.fh-vpn-page .btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--fh-cyan);border-radius:8px;background:var(--fh-cyan);color:#071315}
body.fh-vpn-page .btn.ghost{border-color:var(--fh-line);background:transparent;color:var(--fh-strong)}
body.fh-vpn-page .btn:hover{filter:brightness(1.08)}
body.fh-vpn-page .btn.ghost:hover{border-color:var(--fh-cyan);background:var(--fh-surface-2)}

/* Motion purpose: short color and border transitions make real hover, focus,
   selection, and press states easier to track without adding page-load motion. */
body.fh-app-body .fh-rail-item,
body.fh-app-body .fh-rail-item::before,
.fh-root-rail-link,
.fh-root-rail-link::before,
body.fh-app-body .fh-tab,
.fh-root-tab,
body.fh-app-body .fh-tab-close,
body.fh-app-body .fh-new-tab,
.fh-root-new-tab,
body.fh-app-body .fh-tool-btn,
.fh-root-toolbar-btn,
body.fh-app-body .fh-toolbar-link,
.fh-root-signin,
body.fh-app-body .fh-root-card,
body.fh-app-body .fh-home-shortcuts a,
body.fh-app-body .card,
body.fh-app-body .service-card,
body.fh-vpn-page .card,
body.fh-vpn-page .plan,
body.fh-vpn-page .loc-btn,
body.fh-app-body .btn-primary-custom,
body.fh-app-body .service-btn,
body.fh-app-body .card .btn,
body.fh-app-body .btn-nav,
body.fh-app-body .send,
body.fh-app-body .mail-compose,
body.fh-app-body #ai-go,
body.fh-app-body .btn1,
body.fh-vpn-page .btn,
body.fh-app-body input,
body.fh-app-body textarea,
body.fh-app-body select,
body.fh-vpn-page input,
body.fh-vpn-page select{
  transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,box-shadow 140ms ease,filter 140ms ease;
}

body.fh-app-body .fh-route-display,
.fh-root-route,
body.fh-vpn-page .link-input{
  transition:background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease;
}

body.fh-app-body :is(button,a,[role="button"]):active:not(:disabled),
body.fh-vpn-page :is(button,a,[role="button"]):active:not(:disabled){
  filter:brightness(1.08);
}

@media(max-width:780px){
  body.fh-app-body .page{padding:20px 14px 30px}
  body.fh-vpn-page .wrap{padding-top:22px}
}
@media(max-width:600px){
  body.fh-app-body .fh-tab-strip,.fh-root-chrome{height:48px;min-height:48px}
  body.fh-app-body .fh-tab,.fh-root-tab{height:44px!important;min-height:44px;flex-basis:clamp(120px,40vw,180px)}
  body.fh-app-body .fh-tab-close{width:44px;min-width:44px;height:44px;min-height:44px}
  body.fh-app-body .fh-new-tab,.fh-root-new-tab,
  body.fh-app-body .fh-tool-btn,.fh-root-toolbar-btn{width:44px;min-width:44px;height:44px;min-height:44px}
  body.fh-app-body .fh-toolbar,.fh-root-toolbar{height:52px;min-height:52px}
  body.fh-app-body .fh-route-display,.fh-root-route{height:44px}
  body.fh-app-body .fh-toolbar-link,.fh-root-signin{min-height:44px}
  body.fh-home-body .fh-root-content{padding-inline:14px!important}
  body.fh-vpn-page .location-switch,body.fh-vpn-page .plans{grid-template-columns:1fr}
  body.fh-vpn-page .quota-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  body.fh-app-body *,body.fh-app-body *::before,body.fh-app-body *::after,
  body.fh-vpn-page *,body.fh-vpn-page *::before,body.fh-vpn-page *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}