/* BLAQPLOYMENT cinematic product system. Loaded after feature CSS. */
:root{
  --bg:#040a13;--panel:#081425;--panel-2:#0b192c;--panel-3:#0e2036;
  --text:#edf6ff;--muted:#8298b7;--line:rgba(124,174,236,.16);
  --accent:#5bbcff;--accent-ink:#03101d;--accent-soft:rgba(91,188,255,.11);
  --ok:#50e8ad;--ok-soft:rgba(80,232,173,.11);--warn:#f4bd63;--warn-soft:rgba(244,189,99,.11);
  --bad:#ff7594;--bad-soft:rgba(255,117,148,.11);--idle:#8197b4;--idle-soft:rgba(129,151,180,.09);
  --code-bg:#020711;--code-text:#d9ecff;--radius:14px;
  --shadow:0 18px 52px rgba(0,0,0,.22);--tap:44px;
  --pointer-x:65vw;--pointer-y:18vh;color-scheme:dark;
}
html,body{background:#040a13;color:var(--text)}
body{background:
  radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(45,123,255,.12),transparent 25rem),
  radial-gradient(circle at 92% 70%,rgba(103,73,255,.08),transparent 28rem),
  linear-gradient(180deg,#06101e 0,#040a13 54%,#030711 100%);background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.17;z-index:0;
  background-image:linear-gradient(rgba(85,154,241,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(85,154,241,.045) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.topbar{background:rgba(5,14,27,.94);border-right:1px solid rgba(122,174,241,.13);
  box-shadow:18px 0 55px rgba(0,0,0,.2);backdrop-filter:blur(18px)}
.topbar .brand{color:#f3f8ff}.topbar .brand img{filter:drop-shadow(0 0 12px rgba(90,190,255,.28))}
.topbar nav a{color:#8197b3;position:relative;overflow:hidden;transition:.18s ease}
.topbar nav a:before{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,rgba(74,152,255,.15),rgba(91,188,255,.03));transition:.18s}
.topbar nav a:hover,.topbar nav a.active{color:#ecf7ff;background:rgba(58,112,176,.13);transform:translateX(2px)}
.topbar nav a.active{box-shadow:inset 3px 0 #5fc8ff,0 0 28px rgba(53,142,255,.07)}
.topbar nav a:hover:before,.topbar nav a.active:before{opacity:1}
.sidebar-label{color:#617997}.sidebar-foot{color:#607996;border-top-color:rgba(124,174,236,.13)}
.sidebar-foot a{color:#62bdff}
main:not(.cc-main){position:relative;z-index:1;color:var(--text)}
h1,h2,h3{color:#eff7ff}h1{letter-spacing:-.045em}
a{color:#72c6ff}.muted,.hint{color:var(--muted)}
.card{background:linear-gradient(145deg,rgba(11,27,48,.9),rgba(7,18,33,.88));
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
a.card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
a.card:hover{border-color:rgba(91,188,255,.4);transform:translateY(-3px);box-shadow:0 24px 58px rgba(0,0,0,.26),0 0 28px rgba(48,139,255,.07)}
.btn{background:rgba(9,24,43,.9);border-color:rgba(125,169,223,.2);color:#dcecff;transition:.18s ease;position:relative;overflow:hidden}
.btn:hover{background:rgba(17,39,65,.96);border-color:rgba(91,188,255,.44);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#68d1ff,#6683ff);border-color:transparent;color:#04111f;box-shadow:0 10px 30px rgba(55,131,255,.2)}
.btn.primary:hover{background:linear-gradient(135deg,#7cdbff,#7b92ff);box-shadow:0 14px 36px rgba(55,131,255,.28)}
.btn.danger{color:#ff8ba4;border-color:rgba(255,117,148,.34);background:rgba(255,117,148,.05)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],select,textarea{
  background:rgba(3,11,22,.78);border-color:rgba(121,166,222,.18);color:#e8f4ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
input:focus,select:focus,textarea:focus{border-color:#55b9ff;outline:2px solid rgba(85,185,255,.2);outline-offset:1px}
input::placeholder,textarea::placeholder{color:#4f6683}
.choice{border-color:rgba(124,174,236,.16);background:rgba(7,19,34,.6)}
.choice:has(input:checked){border-color:rgba(91,188,255,.45);background:rgba(91,188,255,.08);box-shadow:0 0 24px rgba(67,149,255,.07)}
.tabs{border-color:rgba(123,171,231,.14)}
.tabs a{color:#7188a5}.tabs a:hover{color:#dceeff}.tabs a.active{color:#80cdff;border-bottom-color:#5fc8ff}
.badge{background:rgba(129,151,180,.1);color:#91a6c1;border:1px solid rgba(129,151,180,.12)}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(80,232,173,.16)}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(244,189,99,.16)}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:rgba(255,117,148,.16)}
.notice{background:rgba(106,142,188,.08);border:1px solid rgba(126,169,222,.13);color:#b8cce3}
.notice.ok{background:var(--ok-soft);border-color:rgba(80,232,173,.18);color:#86efc8}
.notice.warn{background:var(--warn-soft);border-color:rgba(244,189,99,.18);color:#f3ca80}
.notice.bad{background:var(--bad-soft);border-color:rgba(255,117,148,.18);color:#ff91a9}
.list>li{border-top-color:rgba(124,174,236,.1)}
.secret code{background:rgba(2,8,17,.66);border-color:rgba(121,167,221,.15);color:#cfe6fa}
pre.log{background:linear-gradient(180deg,#020711,#040b15);border:1px solid rgba(95,151,218,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.toast{background:#e7f4ff;color:#081424;box-shadow:0 18px 55px rgba(0,0,0,.35)}
.toast.bad{background:#ff7895;color:#1e050a}
table{border-color:rgba(124,174,236,.12)}th{color:#8fa5c1}
tr{border-color:rgba(124,174,236,.09)}
code{color:#b9ddff}
details>summary{color:#9fb4cc}
hr{border-color:rgba(124,174,236,.12)}
.projects-hero,.project-hero,.launch-intro{border:1px solid rgba(105,166,239,.16);
  background:
    radial-gradient(circle at 84% 10%,rgba(91,188,255,.17),transparent 24rem),
    radial-gradient(circle at 22% 120%,rgba(117,80,255,.12),transparent 25rem),
    linear-gradient(145deg,#0a1b31,#06101f);box-shadow:0 20px 60px rgba(0,0,0,.22)}
.projects-hero:after,.project-hero:after,.launch-intro:after{background:radial-gradient(circle,rgba(77,167,255,.18),transparent 68%)}
.projects-hero p,.project-hero p,.launch-intro p{color:#91a7c3}
.section-kicker{color:#64bfff}
.projects-hero .btn,.project-hero .btn{background:linear-gradient(135deg,#67d0ff,#7185ff);border-color:transparent;color:#03101d}
.metric-card{background:linear-gradient(145deg,rgba(12,30,52,.92),rgba(7,18,33,.9));border-color:rgba(124,174,236,.15);box-shadow:0 14px 40px rgba(0,0,0,.14)}
.metric-card>span{color:#6d87a6}.metric-card strong{color:#eff8ff}.metric-card small{color:#66809e}
.project-tile{background:linear-gradient(145deg,rgba(10,26,46,.9),rgba(6,16,30,.9))}
.tile-icon{background:rgba(91,188,255,.12);color:#70caff;border:1px solid rgba(91,188,255,.12)}
.tile-sub{color:#7088a7}.tile-link{color:#69c1ff}
.flow-card{background:rgba(9,23,41,.8);border-color:rgba(124,174,236,.14);color:#d9eaff}
.flow-card:hover{border-color:rgba(91,188,255,.42);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.flow-card span{color:#61bfff}.flow-card small{color:#7188a5}
.service-intro{background:rgba(76,139,211,.08);border-color:rgba(107,162,224,.16);color:#9db2ca}
.service-intro strong{color:#dceeff}
.auth{background:#040a13}.auth-story{position:relative;overflow:hidden;background:
  radial-gradient(circle at 28% 22%,rgba(44,126,255,.25),transparent 27rem),
  radial-gradient(circle at 84% 78%,rgba(112,77,255,.15),transparent 24rem),
  linear-gradient(145deg,#07162a,#040a13);border-right:1px solid rgba(124,174,236,.12)}
.auth-story:after{content:"";position:absolute;inset:auto -14rem -14rem auto;width:30rem;height:30rem;border:1px solid rgba(91,188,255,.16);border-radius:50%;box-shadow:0 0 0 5rem rgba(91,188,255,.025),0 0 0 10rem rgba(91,188,255,.018)}
.auth-story h2 span{color:#68c7ff}.auth-story p{color:#8ea3be}.auth-points span{border-color:rgba(122,174,237,.2);color:#9fb5cf;background:rgba(99,158,226,.05)}
.auth-content{background:linear-gradient(180deg,rgba(7,17,31,.68),rgba(3,8,15,.88))}
.auth-content>.card{background:linear-gradient(145deg,rgba(11,28,49,.96),rgba(6,17,31,.96));border-color:rgba(124,174,236,.18);box-shadow:0 30px 80px rgba(0,0,0,.32)}
.workspace-bar{background:rgba(7,19,34,.88)!important;border-color:rgba(124,174,236,.14)!important;backdrop-filter:blur(14px)}
.workspace-dialog,.variable-manager,.notifications-panel,.project-settings{color:var(--text)}
.workspace-create,.settings-index,.service-context,.service-source{background:rgba(8,21,38,.76)!important;border-color:rgba(124,174,236,.14)!important}
.settings-tools,.configuration-actions,.variable-toolbar,.variable-filterbar,.variable-footer{border-color:rgba(124,174,236,.12)!important}
.settings-revision,.variable-count,.variable-kind,.variable-source{color:#7891af!important}
.shared-variable-row,.variable-row,.replica-settings-card,.replica-region,.release-card,.release-detail,.observability-block{
  background:linear-gradient(145deg,rgba(10,26,46,.78),rgba(6,17,31,.76))!important;border-color:rgba(124,174,236,.13)!important}
.variable-mask,.variable-raw,.variable-preview,.configuration-preview,.edge-preview{background:#030a13!important;border-color:rgba(124,174,236,.12)!important;color:#cde7ff!important}
.variable-menu,.log-copy-menu{background:#08182b!important;border-color:rgba(124,174,236,.16)!important;box-shadow:0 20px 50px rgba(0,0,0,.35)!important}
.variable-dialog-head{border-color:rgba(124,174,236,.12)!important}
.variable-database-banner{background:rgba(72,150,237,.08)!important;border-color:rgba(104,164,229,.16)!important}
.observability-page,.release-workspace,.usage-breakdown,.native-configuration,.networking-settings{color:var(--text)}
.observability-hero{background:
  radial-gradient(circle at 82% 20%,rgba(66,161,255,.16),transparent 19rem),
  linear-gradient(145deg,#0a1d35,#06101f)!important;border-color:rgba(113,172,239,.17)!important}
.observability-grid,.observability-controls,.observability-control-grid{border-color:rgba(124,174,236,.12)!important}
.observability-spark,.metric-bars{border-color:rgba(124,174,236,.12)!important}
.observability-value{color:#eff8ff!important}
.metric-bar{background:linear-gradient(180deg,#5fd0ff,#656dff)!important;box-shadow:0 0 12px rgba(86,172,255,.18)}
.log-filter-card,.log-table-wrap,.console-session,.file-editor{background:rgba(8,21,38,.78)!important}
.log-table th,.file-table th{background:#081526!important;color:#92a9c4;border-color:rgba(124,174,236,.12)!important}
.log-table td,.file-table td{border-color:rgba(124,174,236,.09)!important}
.log-source{border-color:rgba(124,174,236,.16)!important}.log-source-build{color:#69c7ff!important}
.console-command{background:#020811!important;border-color:rgba(124,174,236,.13)!important}
.console-output{background:#01050b!important;color:#d8edff!important}
.file-kind{border-color:rgba(124,174,236,.16)!important;color:#8fc7ff!important}
.release-timeline:before{background:rgba(91,188,255,.18)!important}.release-image{background:rgba(85,151,233,.08)!important}
.activity-feed li,.notification-item{transition:background .18s ease,border-color .18s ease}
.activity-feed li:hover,.notification-item:hover{background:rgba(78,146,226,.055)}
.activity-filters,.notification-filters{background:rgba(5,15,28,.42)}
.notification-item{border-color:rgba(124,174,236,.13)!important}
.danger-details{border-top-color:rgba(255,117,148,.15)!important}
.danger-details>summary{color:#ff8aa3}
.machine-region-editor,.replica-settings,.network-tcp,.networking-facts{border-color:rgba(124,174,236,.13)!important}
.table-scroll{border:1px solid rgba(124,174,236,.11);border-radius:12px;background:rgba(5,14,26,.45)}
.empty{color:#6f87a5}.empty:before{content:"";display:block;width:34px;height:34px;margin:0 auto 10px;border:1px solid rgba(91,188,255,.2);border-radius:10px;background:radial-gradient(circle,#5dbfff22,transparent 70%)}
body.cinematic-ready main:not(.cc-main)>*:not(.crumbs){animation:bq-rise .42s cubic-bezier(.2,.7,.2,1) both}
body.cinematic-ready main:not(.cc-main)>*:nth-child(2){animation-delay:.025s}
body.cinematic-ready main:not(.cc-main)>*:nth-child(3){animation-delay:.05s}
body.cinematic-ready main:not(.cc-main)>*:nth-child(4){animation-delay:.075s}
body.cinematic-ready .card:hover{will-change:transform}
@keyframes bq-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bq-glow{0%,100%{box-shadow:0 0 0 rgba(91,188,255,0)}50%{box-shadow:0 0 22px rgba(91,188,255,.08)}}
.badge.ok,.cc-pill.ok{animation:bq-glow 3s ease-in-out infinite}
@media(max-width:900px){
  .topbar{background:rgba(5,14,27,.96);border-right:0;border-bottom:1px solid rgba(124,174,236,.13)}
  main:not(.cc-main){background:transparent}.topbar nav a:hover,.topbar nav a.active{transform:none}
}
@media(max-width:640px){
  body:before{background-size:34px 34px}.topbar nav{overflow-x:auto;scrollbar-width:none}
  .topbar nav a{white-space:nowrap}.card{backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
  body{background-attachment:scroll}
}

body[data-product="owner"]{--accent:#5bbcff;--accent-soft:rgba(91,188,255,.11)}
body[data-product="saas"]{--accent:#55e0bd;--accent-soft:rgba(85,224,189,.10)}
body[data-product="owner"] .topbar .brand:after,body[data-product="saas"] .topbar .brand:after{
  margin-left:auto;padding:3px 6px;border:1px solid rgba(124,174,236,.15);border-radius:999px;
  color:#7089a7;font-size:8px;font-weight:850;letter-spacing:.1em
}
body[data-product="owner"] .topbar .brand:after{content:"OWNER"}
body[data-product="saas"] .topbar .brand:after{content:"CUSTOMER";color:#69cfae;border-color:rgba(85,224,189,.16)}

/* Pointer-aware depth layer shared by every authenticated product route. */
body:after{content:"";position:fixed;inset:-18vh -12vw;z-index:0;pointer-events:none;opacity:.22;
  background:linear-gradient(112deg,transparent 22%,rgba(77,167,255,.045) 42%,transparent 58%);
  transform:translate3d(-18%,0,0) rotate(-6deg);animation:bq-ambient-sweep 13s ease-in-out infinite alternate}
body.cinematic-ready [data-cinematic-bound="1"]{
  --bq-tilt-x:0deg;--bq-tilt-y:0deg;transform-style:preserve-3d;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s ease,box-shadow .2s ease}
body.cinematic-ready .btn:active{transform:translateY(1px) scale(.985)}
@media(hover:hover) and (pointer:fine){
  body.cinematic-ready [data-cinematic-bound="1"]:hover{
    transform:perspective(1100px) rotateX(var(--bq-tilt-x)) rotateY(var(--bq-tilt-y)) translateY(-4px);
    border-color:rgba(94,193,255,.4);box-shadow:0 28px 70px rgba(0,0,0,.28),0 0 34px rgba(63,151,255,.08)}
}
@keyframes bq-ambient-sweep{
  0%{transform:translate3d(-18%,0,0) rotate(-6deg);opacity:.12}
  55%{opacity:.28}
  100%{transform:translate3d(18%,4%,0) rotate(-2deg);opacity:.16}
}
@media(max-width:900px),(prefers-reduced-motion:reduce){
  body:after{animation:none;opacity:.1}
  body.cinematic-ready [data-cinematic-bound="1"]:hover{transform:none}
}

/* Billing and late-integrated surface completion. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:18px}
.card-grid>.card{display:flex;flex-direction:column;gap:12px;min-height:270px}
.card-grid>.card .btn,.card-grid>.card>p:last-child{margin-top:auto}
.metric-value{margin:4px 0 8px;color:#f2f8ff;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:850;letter-spacing:-.045em}
.metric-value .small{font-size:.82rem;font-weight:650;letter-spacing:0}
.plain-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:#9fb3ca}
.plain-list li{position:relative;padding-left:18px;line-height:1.5}
.plain-list li:before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:#5fc8ff;box-shadow:0 0 10px rgba(95,200,255,.32)}
.serverless-settings,.release-log-slot,.shared-list{min-width:0}
@media(max-width:520px){.card-grid{grid-template-columns:1fr}.card-grid>.card{min-height:0}}

/* Operational click targets stay spatially stable; visual cards retain depth animation. */
.topbar nav a:hover,.topbar nav a.active,a.card:hover,.btn:hover{transform:none}

/* Readable labels and keyboard focus on the existing dark authentication panel. */
.auth-content .field > label{color:#d9e7f5}
.auth-content :is(input,button,a):focus-visible{outline:3px solid #9acbff;outline-offset:3px}