@import url(plugins.css);@import url(fonts.css);@import url(bootstrap.css);@use "sass:math";@keyframes loaderSpin{0%, 100%{box-shadow:0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em}75%{box-shadow:0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0}87.5%{box-shadow:0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em}}.block-half-spacing{padding-block:50px}@media all and (max-width: 1200px){.block-half-spacing{padding-block:25px}}.block-half-spacing-top{padding-top:50px}@media all and (max-width: 1200px){.block-half-spacing-top{padding-top:25px}}.block-half-spacing-bottom{padding-bottom:50px}@media all and (max-width: 1200px){.block-half-spacing-bottom{padding-bottom:25px}}.block-spacing{padding-block:100px}@media all and (max-width: 1200px){.block-spacing{padding-block:50px}}.block-spacing-top{padding-top:100px}@media all and (max-width: 1200px){.block-spacing-top{padding-top:50px}}.block-spacing-bottom{padding-bottom:100px}@media all and (max-width: 1200px){.block-spacing-bottom{padding-bottom:50px}}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:"Plus Jakarta Sans", sans-serif;font-weight:400;line-height:1.6;background-color:#fff}main{min-height:100vh}p,h1,h2,h3,h4,h5,h6,a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;will-change:transform}.fade-in{opacity:0}.loader-container{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;height:100vh}.loader{color:#fff;font-size:10px;width:1em;height:1em;border-radius:50%;position:relative;text-indent:-9999em;z-index:99999;animation:loaderSpin 1.3s infinite linear;transform:translateZ(0)}.hero-article{background-color:#0a0a32;position:relative;overflow:hidden}.hero-article::before{content:"";position:absolute;top:20%;right:0;width:600px;height:1000px;background-image:url("../../Assets/banner-icon.svg");background-repeat:no-repeat;background-size:cover;z-index:20;transform:translate3d(0, var(--hero-before-y, 0px), 0);will-change:transform}.hero-article .hero-background-media{position:relative;z-index:10}.hero-article .hero-background-media::after{content:"";position:absolute;top:2%;left:0;background:linear-gradient(180deg, rgba(10,10,50,0) 0%, #0a0a32 100%);width:100%;height:100%;z-index:10}.hero-article .hero-background-media .hero-media-container{position:absolute;top:0;left:0;height:100%;width:100%}.hero-article .hero-background-media .hero-media-container video{width:100%;height:100%;display:block;object-fit:cover}.hero-article .hero-background-media .hero-content{min-height:500px;height:100vh;height:100svh;position:relative;z-index:20;display:flex;justify-content:flex-end;align-items:center;flex-direction:column;padding-bottom:150px}.hero-article .hero-background-media .hero-content .hero-subtitle{opacity:0;color:#fff;text-align:center;font-weight:400;line-height:0.9;margin-bottom:15px;text-transform:uppercase}.hero-article .hero-background-media .hero-content .hero-subtitle{font-size:24px}@media screen and (min-width: 320px){.hero-article .hero-background-media .hero-content .hero-subtitle{font-size:calc(24px + 36 * ((100vw - 320px) / 1601))}}@media screen and (min-width: 1921px){.hero-article .hero-background-media .hero-content .hero-subtitle{font-size:60px}}.hero-article .hero-background-media .hero-content .hero-title{opacity:0;color:#fff;text-align:center;font-weight:700;line-height:0.9;text-transform:uppercase;margin-bottom:80px}.hero-article .hero-background-media .hero-content .hero-title{font-size:50px}@media screen and (min-width: 320px){.hero-article .hero-background-media .hero-content .hero-title{font-size:calc(50px + 58 * ((100vw - 320px) / 1601))}}@media screen and (min-width: 1921px){.hero-article .hero-background-media .hero-content .hero-title{font-size:108px}}.hero-article .hero-background-media .hero-content .scroll-down{display:inline-block;width:34px;height:40px;background-color:#fff;mask-image:url("../../Assets/down-ward-arrow.svg");mask-repeat:no-repeat;mask-size:contain;mask-position:center;-webkit-mask-image:url("../../Assets/down-ward-arrow.svg");-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center}.hero-article .hero-illustrations .who-we-are{padding-block:100px 0;width:900px;max-width:90%;margin:auto;text-align:center;padding-bottom:150px}.hero-article .hero-illustrations .who-we-are .subtitle{color:#e6dcdc;font-size:13px;font-weight:600;line-height:1;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:40px;display:inline-block}.hero-article .hero-illustrations .who-we-are .content{color:#fff;text-align:center;font-weight:400;line-height:1.3;letter-spacing:2px}.hero-article .hero-illustrations .who-we-are .content{font-size:24px}@media screen and (min-width: 320px){.hero-article .hero-illustrations .who-we-are .content{font-size:calc(24px + 22 * ((100vw - 320px) / 1601))}}@media screen and (min-width: 1921px){.hero-article .hero-illustrations .who-we-are .content{font-size:46px}}.hero-article .hero-illustrations .illustration-container{width:1060px;height:380px;margin:auto;max-width:100%;position:relative}.hero-article .hero-illustrations .illustration-container .city{position:relative;height:100%}.hero-article .hero-illustrations .illustration-container .city .drone{width:100px;height:20px;object-fit:contain;position:absolute}.hero-article .hero-illustrations .illustration-container .city .drone.first{left:20%;bottom:120%}.hero-article .hero-illustrations .illustration-container .city .drone.second{right:35%;bottom:110%}.hero-article .hero-illustrations .illustration-container .city .sky{position:absolute;left:0;bottom:0;width:auto;height:auto;max-width:100%;object-fit:contain}.hero-article .hero-illustrations .illustration-container .city .sky.first{z-index:30;left:50%;transform:translateX(-50%) !important}.hero-article .hero-illustrations .illustration-container .city .sky.second{left:50%;transform:translateX(-60%) !important;z-index:20}.hero-article .hero-illustrations .illustration-container .city .sky.third{z-index:10}.hero-article .hero-illustrations .illustration-container .city .buildings{position:absolute;left:50%;transform:translateX(-50%);bottom:-20px;z-index:200;max-width:90%}.hero-article .hero-illustrations .illustration-container .wind-container{clip-path:ellipse(48% 90% at 51% 98%);z-index:201}header{position:fixed;top:0;left:0;width:100%;background:transparent;transition:all 0.3s ease;z-index:1000;box-shadow:none}header .showOnSticky{display:none}header:not(.sticky){padding:15px 0}header .nav-container{display:flex;justify-content:space-between;align-items:center}header .hamburger{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:10px;z-index:1001;gap:5px}header .hamburger span{display:block;width:28px;height:3px;background-color:#fff;transition:all 0.3s ease;border-radius:2px}header .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(7px, 7px)}header .hamburger.active span:nth-child(2){opacity:0}header .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -7px)}header .mainMenu *{height:100%}header .mainMenu ul{display:flex;gap:20px}header .mainMenu ul li a{display:block;color:#fff;text-align:center;padding-block:20px;font-size:16px;font-style:normal;font-weight:700;line-height:normal;text-transform:uppercase;transition:all 0.3s ease-in-out;position:relative;align-content:center;cursor:pointer}header .mainMenu ul li a::after{content:"";position:absolute;bottom:0%;inset-inline-start:0;background-color:#00007F;transition:all 0.4s ease-in-out;height:4px;width:0%}header .mainMenu ul li a:hover::after{width:100%}header .logo-container{display:block;width:200px;height:32px;z-index:1001}header .logo-container img{width:100%;height:100%;object-fit:contain}header.sticky{background:rgba(255,255,255,0.95);box-shadow:0 4px 10px rgba(0,0,0,0.1)}header.sticky img{display:none}header.sticky .showOnSticky{display:block}header.sticky .mainMenu a{color:#00007F}header.sticky .hamburger span{background-color:#00007F}@media (max-width: 992px){header .hamburger{display:flex}header .logo-container{width:150px;height:28px;z-index:999}header .mainMenu{position:fixed;top:0;z-index:1000;right:-100%;width:280px;height:100vh;background:rgba(62,54,165,0.98);backdrop-filter:blur(10px);padding:100px 30px 30px;transition:right 0.4s ease;box-shadow:-5px 0 15px rgba(0,0,0,0.2)}header .mainMenu *{height:auto}header .mainMenu ul{flex-direction:column;gap:0;height:auto}header .mainMenu ul li{border-bottom:1px solid rgba(255,255,255,0.1)}header .mainMenu ul li a{color:#fff;text-align:left;padding:20px 0;font-size:15px}header .mainMenu ul li a::after{display:none}header .mainMenu ul li a:hover{padding-left:10px}header .mainMenu.active{right:0}header.sticky .mainMenu{background:rgba(255,255,255,0.98)}header.sticky .mainMenu ul li a{color:#00007F}}@media (max-width: 576px){header .logo-container{width:120px;height:24px}header .mainMenu{z-index:1000;width:100%;max-width:300px}}.whatIsBluesky{padding-block:100px;background:#f1f1f7;text-align:center}.whatIsBluesky .subtitle{color:#1f93d0;margin-bottom:30px;font-size:14px}.whatIsBluesky .title{font-size:46px;line-height:1;color:var(--Dark-Blue, navy);font-weight:400;margin-bottom:50px}.whatIsBluesky .whiteBox{text-align:center;padding-top:80px;display:flex;flex-direction:column;height:100%}.whatIsBluesky .whiteBox .image-container{width:165px;height:165px;margin-inline:auto;margin-bottom:45px}.whatIsBluesky .whiteBox .image-container img{object-fit:contain;width:100%;height:100%}.whatIsBluesky .whiteBox h6{border-top:1px solid #adadad;padding-top:30px;padding-bottom:10px;flex:1;color:#00007F;text-align:center;font-size:26px;font-style:normal;font-weight:400;line-height:32px}.whatIsBluesky .whiteBox p{font-size:16px;font-style:normal;font-weight:300}.whoWeAre{padding-top:120px}.whoWeAre .title{width:900px;margin:0 auto 100px}.whoWeAre .subtitle,.whoWeAre .title{color:#fff}.blue-article{background:#3e36a5;position:relative}.blue-article::before{content:"";position:absolute;top:20%;right:0;width:600px;height:1000px;background-image:url("../../Assets/banner-icon.svg");background-repeat:no-repeat;background-size:cover;z-index:20}.whiteBox{border-radius:24px;background:#fff;padding:32px}.what-can-we-do{z-index:10;position:relative}.what-can-we-do .image-container{position:relative;aspect-ratio:2 / 1;width:100%;overflow:hidden}.what-can-we-do .image-container img{position:absolute;width:100%;height:100%;object-fit:cover}.what-can-we-do .content-container{background:linear-gradient(180deg, rgba(10,10,50,0) 0%, #3e36a5 100%);position:absolute;width:100%;inset-inline-start:0;bottom:0}.what-can-we-do .content-container .header .subtitle{margin-bottom:30px;color:#fff;font-size:14px;font-weight:600;letter-spacing:1.4px;line-height:1;text-transform:uppercase}.what-can-we-do .content-container .header .title{margin-bottom:50px;color:#fff;font-size:46px;font-weight:400;line-height:1}.what-can-we-do .content-container .strength-listing{display:flex;padding:40px;border-radius:25px;border:1px solid rgba(255,255,255,0.18);background:rgba(62,54,165,0.51);backdrop-filter:blur(7.5px)}.what-can-we-do .content-container .strength-listing .item{flex:1;display:flex;align-items:center;gap:30px}.what-can-we-do .content-container .strength-listing .item .image-container{width:70px;height:70px;position:relative;flex:0 0 70px}.what-can-we-do .content-container .strength-listing .item .image-container img{position:absolute;width:100%;height:100%;object-fit:contain}.what-can-we-do .content-container .strength-listing .item p{color:#fff;font-size:18px;font-weight:400;line-height:140%}.what-can-we-do .content-container .strength-listing .item:not(:last-child){padding-inline-end:30px;margin-inline-end:30px;border-inline-end:1px solid rgba(255,255,255,0.17)}.what-can-we-do .content-container .strength-listing .item:first-child{flex:0 1 45%}.whereBlueSky{padding-block:100px;text-align:center;position:relative;z-index:20}.whereBlueSky .subtitle{margin-bottom:30px;color:#fff;font-size:14px;font-weight:600;letter-spacing:1.4px;line-height:1;text-transform:uppercase}.whereBlueSky .title{margin-bottom:50px;color:#fff;font-size:46px;font-weight:400;line-height:1;letter-spacing:2px;width:900px;max-width:90%;margin:auto;margin-bottom:70px}.whereBlueSky .whyInfoWrap{display:flex;gap:30px;justify-content:flex-start;align-items:center;text-align:start;background-color:#3e36a5;border-radius:26px;border:1px solid rgba(255,255,255,0.16);background:var(--Purple, #3e36a5);box-shadow:0 4px 54px 0 rgba(0,0,0,0.01);padding:20px;color:#fff;margin-bottom:30px;font-size:16px;height:100%}.whereBlueSky .whyInfoWrap .image-container{width:75px;height:75px;position:relative;flex-shrink:0}.whereBlueSky .whyInfoWrap .image-container img{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:contain}.whereBlueSky .whyInfoWrap .image-container p{color:#fff;font-size:18px;font-style:normal;text-align:start;font-weight:400;line-height:140%}.whereBlueSky .whyInfoWrap p{font-size:18px}.field-group{display:flex;flex-direction:column;position:relative;margin-bottom:20px}.field-group .field-group-error{position:absolute;right:0;top:0;color:red;font-size:13px;font-weight:400;margin-top:4px;min-height:18px}.requestConsultation{padding-block:100px}.requestConsultation .title{margin-bottom:50px;color:#000080;font-size:46px;font-weight:400;line-height:1.3;width:450px;max-width:90%;letter-spacing:2px}.requestConsultation .subtitle{color:#1f93d0;margin-bottom:10px;font-size:14px;line-height:1;margin-bottom:30px}.requestConsultation .addressInfo{margin-top:40px}.requestConsultation .whyInfoWrap{color:#3e3e47;font-size:20px;justify-content:start;font-size:20px;margin-bottom:20px}.controlForm label,.controlForm .field-group-title{width:100%;color:#3e3e47;font-size:18px;font-style:normal;font-weight:400;line-height:1;margin-bottom:12px;display:inline-block}.controlForm input,.controlForm select,.controlForm textarea{border-radius:10px;border:1px solid #ccc;width:100%;padding:10px}.controlForm .form-control-container,.controlForm .control-container{text-align:end}.controlForm .form-control-container button,.controlForm .control-container button{display:flex;align-items:center;gap:5px;margin-inline-start:auto;border-radius:35px;background:#1f93d0;border:1px solid #1f93d0;color:#fff;padding:17px 23px;transition:all 0.3s ease;font-size:16px;font-weight:700;line-height:0.7;text-transform:uppercase}.controlForm .form-control-container button:hover,.controlForm .control-container button:hover{background-color:#00007F}footer{padding-bottom:40px}footer .container{border-top:1px solid #b9b9b9;padding-top:30px}footer .container *{font-size:15px}footer .row{align-items:end}footer .row .col-sm-6{text-align:center}footer .row .col-sm-3:last-child{text-align:right}footer .footer-logo p{display:block;margin-bottom:10px;color:var(--d-9-d-9-d-9, #3e3e47);font-size:12px;font-weight:400;line-height:1}@media (max-width: 768px){.what-can-we-do .content-container{position:static;padding-top:40px}.what-can-we-do .content-container .strength-listing{flex-direction:column;padding-top:30px;padding-bottom:30px;gap:30px}.what-can-we-do .content-container .strength-listing .item{display:flex;flex-direction:column;align-items:flex-start;gap:15px;border:none;margin:0;padding:0}.what-can-we-do .content-container .strength-listing .item:not(:last-child){padding-inline-end:0;margin-inline-end:0;border-inline-end:none}.what-can-we-do .content-container .strength-listing .item .image-container{width:60px;height:60px}.what-can-we-do .content-container .strength-listing .item .image-container img{width:100%;height:100%;object-fit:contain}.what-can-we-do .content-container .strength-listing .item p{font-size:14px;line-height:1.4}.contact-info{margin-bottom:30px}.credit{display:none}.whatIsBluesky .title{font-size:40px}.what-can-we-do .content-container .header .title{font-size:40px}.whereBlueSky .title{font-size:40px}.requestConsultation .title{font-size:40px}.whereBlueSky .whyInfoWrap{justify-content:flex-start}.footer-logo{margin-bottom:15px}}*,*::before,*::after{direction:ltr;font-family:"DM Sans",sans-serif}

/* JSON-driven home page: style the new Our Strengths description paragraph
   to match the white title/subtitle colors on the dark blue section.       */
.what-can-we-do .description {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.6;
  margin-top: 16px;
  margin-bottom: 24px;
  max-width: 60ch;
}


/* === Contact form success panel: brand-themed radar/intercept animation === */
.contact-success-panel {
  text-align: center;
  padding: 40px 24px 60px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contact-success-panel .success-radar {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-success-panel .radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 2px solid rgba(31, 147, 208, 0.6);
  border-radius: 50%;
  opacity: 0;
  animation: bskySuccessRadar 2.6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.contact-success-panel .radar-ring:nth-child(2) { animation-delay: 0.65s; }
.contact-success-panel .radar-ring:nth-child(3) { animation-delay: 1.30s; }
@keyframes bskySuccessRadar {
  0%   { transform: scale(0.35); opacity: 0.0; border-color: rgba(31, 147, 208, 0.9); }
  20%  { opacity: 0.85; }
  100% { transform: scale(3.0);  opacity: 0.0; border-color: rgba(0, 0, 127, 0.0); }
}
.contact-success-panel .radar-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(31, 147, 208, 0) 0deg, rgba(31, 147, 208, 0.35) 50deg, rgba(31, 147, 208, 0) 60deg);
  animation: bskySuccessSweep 3.2s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}
@keyframes bskySuccessSweep {
  to { transform: rotate(360deg); }
}
.contact-success-panel .success-drone {
  position: absolute;
  top: 18%;
  left: 10%;
  width: 64px;
  height: 24px;
  opacity: 0;
  animation: bskySuccessDrone 3.6s ease-in forwards;
  animation-delay: 0.1s;
  filter: drop-shadow(0 0 3px rgba(31, 147, 208, 0.5));
}
@keyframes bskySuccessDrone {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  18%  { opacity: 1; transform: translate(35px, 8px) scale(1); }
  55%  { opacity: 1; transform: translate(80px, 25px) scale(1); }
  70%  { opacity: 0.8; transform: translate(100px, 35px) scale(0.85); filter: drop-shadow(0 0 12px rgba(31, 147, 208, 1)); }
  80%  { opacity: 0; transform: translate(110px, 45px) scale(0.4); }
  100% { opacity: 0; transform: translate(110px, 45px) scale(0); }
}
.contact-success-panel .success-logo {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(31, 147, 208, 0.45));
  animation: bskySuccessLogo 1.6s ease-out backwards;
}
@keyframes bskySuccessLogo {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.contact-success-panel .success-check {
  position: absolute;
  bottom: 18%;
  right: 18%;
  width: 44px;
  height: 44px;
  z-index: 3;
  opacity: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 127, 0.4));
  animation: bskySuccessCheck 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 2.6s;
}
@keyframes bskySuccessCheck {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.contact-success-panel h3 {
  color: #00007F;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px;
  animation: bskySuccessText 0.6s ease-out backwards;
  animation-delay: 2.0s;
}
.contact-success-panel p {
  color: #3e3e47;
  font-size: 16px;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
  animation: bskySuccessText 0.6s ease-out backwards;
  animation-delay: 2.3s;
}
@keyframes bskySuccessText {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Header polish: bigger logo + bigger nav links ============================
   Overrides the original `.logo-container` and `.mainMenu ul li a` sizes so the
   header reads more confidently on desktop and tablet without crowding mobile. */
header .logo-container {
  width: 260px;
  height: 42px;
}
header .mainMenu ul {
  gap: 28px;
}
header .mainMenu ul li a {
  font-size: 18px;
  padding-block: 24px;
}
@media (max-width: 992px) {
  header .logo-container { width: 200px; height: 36px; }
  /* tablet & below collapses to hamburger; the off-canvas menu items also benefit from a small bump */
  header .mainMenu ul li a { font-size: 17px; padding: 22px 0; }
}
@media (max-width: 576px) {
  header .logo-container { width: 160px; height: 30px; }
}

/* === Header polish v2: larger again ========================================= */
header .logo-container {
  width: 320px;
  height: 52px;
}
header .mainMenu ul {
  gap: 32px;
}
header .mainMenu ul li a {
  font-size: 20px;
  padding-block: 26px;
  letter-spacing: 0.3px;
}
@media (max-width: 992px) {
  header .logo-container { width: 240px; height: 44px; }
  header .mainMenu ul li a { font-size: 18px; padding: 24px 0; }
}
@media (max-width: 576px) {
  header .logo-container { width: 190px; height: 36px; }
}

/* ============================================================================
 * BlueSky Apps tray — drone toggle button + dropdown app launcher
 * ========================================================================== */

/* --- Toggle button (drone billboard) ------------------------------------- */
.apps-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;                         /* white over the transparent hero header */
  transition: color 0.3s ease;
  position: relative;
}
header.sticky .apps-toggle { color: #00007F; }   /* dark when nav is sticky over light bg */

.apps-toggle-billboard {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 14px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: rgba(31, 147, 208, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.apps-toggle:hover .apps-toggle-billboard,
.apps-toggle:focus-visible .apps-toggle-billboard {
  background: rgba(31, 147, 208, 0.22);
  box-shadow: 0 6px 22px rgba(31, 147, 208, 0.35);
  transform: translateY(-1px);
}
.apps-toggle:focus-visible { outline: none; }
.apps-toggle:focus-visible .apps-toggle-billboard {
  box-shadow: 0 0 0 3px rgba(31, 147, 208, 0.4), 0 6px 22px rgba(31, 147, 208, 0.35);
}

.apps-toggle-billboard-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
}

.apps-toggle .drone-svg {
  width: 36px;
  height: 36px;
  display: block;
  overflow: visible;
}
.apps-toggle .drone-body {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.apps-toggle .cage-bars {
  transform-origin: top center;
  transform-box: view-box;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

/* Active (captured) state */
.apps-toggle.is-active .drone-body { transform: scale(0.86); }
.apps-toggle.is-active .cage-bars  { transform: translateY(0); opacity: 1; }

/* --- Apps tray (drop-down panel) ----------------------------------------- */
.apps-tray {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  margin-top: 12px;
  background: rgba(10, 10, 50, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(31, 147, 208, 0.35);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
}
.apps-tray[hidden] { display: none; }
.apps-tray.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.apps-tray::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid rgba(31, 147, 208, 0.35);
  border-top: 1px solid rgba(31, 147, 208, 0.35);
}

.apps-tray-grid {
  display: grid;
  grid-template-columns: repeat(5, 110px);
  gap: 14px;
}

/* --- Individual app tile ------------------------------------------------- */
.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 8px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, opacity 0.4s ease 0s;
  opacity: 0;
  transform: translateY(-14px);
  cursor: pointer;
  position: relative;
  text-align: center;
}
.apps-tray.is-open .app-tile {
  opacity: 1;
  transform: translateY(0);
}
.apps-tray.is-open .app-tile:nth-child(1) { transition-delay: 0.10s; }
.apps-tray.is-open .app-tile:nth-child(2) { transition-delay: 0.18s; }
.apps-tray.is-open .app-tile:nth-child(3) { transition-delay: 0.26s; }
.apps-tray.is-open .app-tile:nth-child(4) { transition-delay: 0.34s; }
.apps-tray.is-open .app-tile:nth-child(5) { transition-delay: 0.42s; }

.app-tile:hover {
  background: rgba(31, 147, 208, 0.18);
  border-color: rgba(31, 147, 208, 0.55);
  transform: translateY(-2px);
}
.app-tile:focus-visible {
  outline: none;
  background: rgba(31, 147, 208, 0.22);
  border-color: rgba(31, 147, 208, 0.7);
}

.app-tile-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f93d0;
  background: rgba(31, 147, 208, 0.10);
  border-radius: 14px;
  margin-bottom: 2px;
}
.app-tile .app-svg { width: 36px; height: 36px; display: block; }

.app-tile-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.app-tile.is-disabled {
  cursor: not-allowed;
  opacity: 0;
  pointer-events: none;
}
.apps-tray.is-open .app-tile.is-disabled { opacity: 0.55; pointer-events: auto; }
.app-tile.is-disabled .app-tile-icon { color: #6b7290; background: rgba(255,255,255,0.04); }
.app-tile.is-disabled .app-tile-name { color: rgba(255,255,255,0.55); }
.app-tile.is-disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  transform: none;
}
.app-tile-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1f93d0;
  background: rgba(31, 147, 208, 0.18);
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 2px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 992px) {
  .apps-toggle { margin-left: auto; margin-right: 8px; }
  .apps-toggle-billboard { padding: 6px 12px 6px 10px; gap: 8px; }
  .apps-toggle-billboard-label { font-size: 12px; }
  .apps-toggle .drone-svg { width: 28px; height: 28px; }

  .apps-tray-grid { grid-template-columns: repeat(3, 96px); }
  .apps-tray { padding: 18px; }
}
@media (max-width: 576px) {
  .apps-tray-grid { grid-template-columns: repeat(2, 110px); }
  .apps-tray { left: auto; right: 12px; transform: translateY(-12px); }
  .apps-tray.is-open { transform: translateY(0); }
  .apps-tray::before { left: auto; right: 36px; transform: rotate(45deg); }
}

/* ============================================================================
 * Administrator Center placeholder login page
 * ========================================================================== */
.admin-center-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 80px;
  background:
    radial-gradient(circle at 20% 20%, rgba(31, 147, 208, 0.15), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(62, 54, 165, 0.18), transparent 55%),
    linear-gradient(180deg, #0a0a32 0%, #15123a 100%);
  position: relative;
  overflow: hidden;
}
.admin-center-section::before {
  content: "";
  position: absolute;
  top: 12%;
  right: -120px;
  width: 600px;
  height: 1000px;
  background-image: url("/Assets/banner-icon.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.25;
  pointer-events: none;
}
.admin-center-shell { position: relative; z-index: 1; width: 100%; max-width: 460px; }
.admin-center-card {
  background: rgba(10, 10, 50, 0.78);
  border: 1px solid rgba(31, 147, 208, 0.35);
  border-radius: 22px;
  padding: 44px 36px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
}
.admin-center-brand { text-align: center; margin-bottom: 28px; }
.admin-center-mark { width: 72px; height: 72px; object-fit: contain; margin-bottom: 16px;
  filter: drop-shadow(0 6px 18px rgba(31, 147, 208, 0.45)); }
.admin-center-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.admin-center-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  letter-spacing: 0.3px;
}

.admin-center-form { display: flex; flex-direction: column; gap: 16px; }
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.admin-field input[type="text"],
.admin-field input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.admin-field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.admin-field input:focus {
  outline: none;
  border-color: rgba(31, 147, 208, 0.7);
  background: rgba(31, 147, 208, 0.08);
}

.admin-field-row { display: flex; align-items: center; justify-content: space-between; }
.admin-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.admin-remember input[type="checkbox"] { accent-color: #1f93d0; width: 16px; height: 16px; }

.admin-submit {
  margin-top: 8px;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid #1f93d0;
  background: #1f93d0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.admin-submit:hover { background: #00007F; border-color: #00007F; transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 127, 0.45); }
.admin-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31, 147, 208, 0.4); }

.admin-notice {
  font-size: 12px;
  text-align: center;
  margin: 6px 0 0;
  color: #ffb84d;
  background: rgba(255, 184, 77, 0.10);
  border: 1px solid rgba(255, 184, 77, 0.30);
  padding: 10px 12px;
  border-radius: 10px;
}
.admin-notice-muted {
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 0;
  padding: 4px 0 0;
}
.admin-center-back {
  display: block;
  margin-top: 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}
.admin-center-back:hover { color: #1f93d0; }

@media (max-width: 480px) {
  .admin-center-card { padding: 32px 22px; }
  .admin-center-title { font-size: 22px; }
}

/* === Wide-screen header polish — bigger items + tighter spread ============ */
@media (min-width: 1200px) {
  /* Constrain the inner nav-container so logo+apps+nav don't spread to the
     full width of the bootstrap container on large monitors. Items keep
     space-between, but the playing field is narrower. */
  header .nav-container {
    max-width: 1100px;
    margin-inline: auto;
  }
  header .logo-container { width: 360px; height: 58px; }
  header .mainMenu ul { gap: 36px; }
  header .mainMenu ul li a {
    font-size: 22px;
    padding-block: 28px;
  }
  header .apps-toggle-billboard {
    padding: 11px 22px 11px 17px;
    gap: 14px;
  }
  header .apps-toggle-billboard-label {
    font-size: 15px;
    letter-spacing: 1.5px;
  }
  header .apps-toggle .drone-svg { width: 42px; height: 42px; }
}

/* Even bigger at 4K-class screens */
@media (min-width: 1600px) {
  header .nav-container { max-width: 1240px; }
  header .logo-container { width: 400px; height: 64px; }
  header .mainMenu ul { gap: 40px; }
  header .mainMenu ul li a { font-size: 23px; }
  header .apps-toggle-billboard {
    padding: 12px 24px 12px 18px;
  }
  header .apps-toggle .drone-svg { width: 46px; height: 46px; }
}

/* === Desktop header layout: explicit 3-zone grid =========================== */
/* 1fr | auto | 1fr puts the logo at left, drone in dead center, nav at right.
   This kicks in at ≥992px (where the hamburger is hidden anyway). Mobile keeps
   the existing flexbox layout (which the user said looks fine). */
@media (min-width: 992px) {
  header .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: none;            /* undo earlier 1100px cap — grid handles spread */
    column-gap: 24px;
  }
  header .logo-container { justify-self: start; }
  header .apps-toggle {
    justify-self: center;
    margin: 0;                  /* override the base margin: 0 24px */
  }
  header .mainMenu { justify-self: end; }

  /* Larger sizes at desktop */
  header .logo-container { width: 400px; height: 64px; }
  header .mainMenu ul { gap: 40px; }
  header .mainMenu ul li a {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding-block: 28px;
  }
}

/* Even larger at wide / 4K-class screens */
@media (min-width: 1600px) {
  header .logo-container { width: 440px; height: 70px; }
  header .mainMenu ul { gap: 44px; }
  header .mainMenu ul li a {
    font-size: 26px;
    font-weight: 800;
  }
  header .apps-toggle-billboard { padding: 12px 26px 12px 20px; }
  header .apps-toggle .drone-svg { width: 48px; height: 48px; }
  header .apps-toggle-billboard-label { font-size: 16px; }
}

/* ============================================================================
 * Apps rail v2 — embossed control-panel track that slides out from the drone
 * button. Replaces the dropdown tray. Lives in the grid's center cell, so as
 * the rail expands rightward the whole area re-centers and the button "swipes
 * left" relative to the page.
 * ========================================================================== */

.apps-toggle-area {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: center;   /* in the desktop grid */
}

/* Override the earlier .apps-toggle { justify-self: center } so the area
   container drives positioning instead. */
.apps-toggle { justify-self: auto; }

/* ----- Embossed rail container -------------------------------------------- */
.apps-rail {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #060624 0%, #14112e 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.65),
    inset 0 -1px 2px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.25);

  /* Initial collapsed state */
  width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  opacity: 0;

  transition:
    width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s ease,
    opacity 0.3s ease;
}
.apps-rail[hidden] { display: none; }
.apps-rail.is-open {
  width: 380px;
  padding-left: 22px;
  padding-right: 22px;
  opacity: 1;
  transition-delay: 0s, 0s, 0.15s;
}

/* ----- Individual slot (each app) ---------------------------------------- */
.app-slot {
  position: relative;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: #4a5172;             /* default = off color */
  transition: color 0.3s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.app-slot-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08), rgba(0,0,0,0.4));
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    inset 0 -1px 1px rgba(255,255,255,0.05),
    0 1px 0 rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease;
}
.app-slot .app-svg { width: 24px; height: 24px; color: inherit; }

/* LED status pip below the slot */
.app-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a1d2c;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
}

/* Status: green (Admin Center) ------------------------------------------- */
.app-slot[data-status="green"]            { color: #2ee06a; }
.app-slot[data-status="green"] .app-led   {
  background: #2ee06a;
  box-shadow: 0 0 4px #2ee06a, 0 0 10px rgba(46, 224, 106, 0.55);
}
.app-slot[data-status="green"] .app-slot-icon {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    0 0 0 1px rgba(46, 224, 106, 0.12),
    0 0 14px rgba(46, 224, 106, 0.28);
}
.app-slot[data-status="green"] .app-svg {
  filter: drop-shadow(0 0 3px rgba(46, 224, 106, 0.85));
}

/* Status: blue (BlueSky C2, KERNEL) -------------------------------------- */
.app-slot[data-status="blue"]             { color: #1f93d0; }
.app-slot[data-status="blue"] .app-led    {
  background: #1f93d0;
  box-shadow: 0 0 4px #1f93d0, 0 0 10px rgba(31, 147, 208, 0.55);
}
.app-slot[data-status="blue"] .app-slot-icon {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    0 0 0 1px rgba(31, 147, 208, 0.12),
    0 0 14px rgba(31, 147, 208, 0.28);
}
.app-slot[data-status="blue"] .app-svg {
  filter: drop-shadow(0 0 3px rgba(31, 147, 208, 0.85));
}

/* Status: off (APEX, Robotics) ------------------------------------------- */
.app-slot[data-status="off"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.app-slot[data-status="off"] .app-svg {
  opacity: 0.7;
  filter: none;
}

/* Slot reveal stagger when the rail opens */
.app-slot {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.apps-rail.is-open .app-slot { opacity: 1; transform: translateY(0); }
.apps-rail.is-open .app-slot[data-status="off"] { opacity: 0.55; }
.apps-rail.is-open .app-slot:nth-child(1) { transition-delay: 0.20s; }
.apps-rail.is-open .app-slot:nth-child(2) { transition-delay: 0.28s; }
.apps-rail.is-open .app-slot:nth-child(3) { transition-delay: 0.36s; }
.apps-rail.is-open .app-slot:nth-child(4) { transition-delay: 0.44s; }
.apps-rail.is-open .app-slot:nth-child(5) { transition-delay: 0.52s; }

/* Heartbeat pulse on live LEDs (slight delay so it starts after reveal) */
@keyframes ledHeartbeat {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.85; }
}
.app-slot[data-status="green"] .app-led,
.app-slot[data-status="blue"]  .app-led {
  animation: ledHeartbeat 2.4s ease-in-out infinite;
  animation-delay: 0.6s;
}

/* Hover lift for clickable slots */
.app-slot[data-status="green"]:hover,
.app-slot[data-status="blue"]:hover { transform: translateY(-2px); }

/* Tooltip beneath each slot on hover --------------------------------------- */
.app-slot-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
  background: rgba(6, 6, 36, 0.95);
  border: 1px solid rgba(31, 147, 208, 0.35);
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.app-slot-tip small { display: block; font-weight: 400; font-size: 10px; color: rgba(255,255,255,0.6); }
.app-slot:hover .app-slot-tip,
.app-slot:focus-visible .app-slot-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ----- Responsive: mobile/tablet — rail wraps below the button instead --- */
@media (max-width: 992px) {
  .apps-toggle-area { gap: 10px; }
  .apps-rail {
    /* On mobile, open downward as a horizontal pill below the header */
    position: absolute;
    top: 100%;
    right: 8px;
    margin-top: 12px;
    width: 0;
    flex-wrap: nowrap;
    gap: 14px;
  }
  .apps-rail.is-open { width: auto; max-width: calc(100vw - 32px); }
  .app-slot { width: 42px; }
  .app-slot-icon { width: 36px; height: 36px; }
}

@media (max-width: 480px) {
  .apps-rail.is-open { padding: 8px 14px; gap: 10px; }
  .app-slot { width: 40px; }
}

/* === Fix: nav items wrapping per-word at desktop ========================== */
/* The 1fr | auto | 1fr grid gives the nav side a finite width. At 24px/800
   the five items + gaps don't fit in 703px on a typical desktop, so each
   item was wrapping its words. white-space: nowrap forces single-line items;
   a tighter gap also helps. */
header .mainMenu ul li a { white-space: nowrap; }

@media (min-width: 992px) and (max-width: 1399px) {
  /* Slight trim so all 5 items fit at common desktop widths */
  header .mainMenu ul { gap: 28px; }
  header .mainMenu ul li a { font-size: 21px; }
}

/* Prevent the rail from shrinking inside the apps-toggle-area flex container.
   Without this the grid's auto column stays at button-width and the rail
   collapses to ~16px even when width: 380px is set. */
.apps-rail { flex-shrink: 0; }
.apps-toggle { flex-shrink: 0; }

/* === Final: rail is absolutely positioned next to the toggle =============
   The CSS Grid auto column wasn't growing to fit the rail's width when the
   .is-open class was added — likely a grid+flex intrinsic-sizing quirk.
   Sidestepping it: the rail floats out of the layout flow, anchored to the
   apps-toggle-area's right edge. The button stays in the grid; the rail
   appears to its right without affecting column widths. */
.apps-toggle-area {
  position: relative;
  display: flex;
  align-items: center;
}
.apps-rail {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  /* Width is now stable — no grid sizing fight */
  width: 380px;
  padding: 8px 22px;
  /* New transition: animate transform instead of width */
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  z-index: 50;
}
.apps-rail.is-open {
  transform: translateY(-50%) scaleX(1);
  /* Inline width/padding set by JS no longer needed */
}

/* The button itself slides left when active so its center re-centers over the
   apps-toggle area + rail combined width. Gives the visual swipe effect. */
.apps-toggle {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}
.apps-toggle.is-active {
  transform: translateX(-195px);
}

/* Slots inside the rail: keep their existing fade-in stagger but trigger on
   the parent's scaleX rather than the inner flex/width animation */
.apps-rail .app-slot {
  flex-shrink: 0;
}

@media (max-width: 992px) {
  /* On mobile, rail still drops below; reset transform-origin */
  .apps-rail {
    left: auto;
    right: 0;
    top: calc(100% + 8px);
    transform: scaleY(0);
    transform-origin: top right;
  }
  .apps-rail.is-open {
    transform: scaleY(1);
  }
  .apps-toggle.is-active {
    transform: none;   /* don't slide button on mobile */
  }
}

/* Override: use width animation, not scaleX (which was stuck) */
.apps-rail {
  /* keep position: absolute from previous block */
  width: 0;
  padding: 8px 0;
  overflow: hidden;
  transform: translateY(-50%);
  transition:
    width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s ease,
    opacity 0.3s ease;
  opacity: 0;
}
.apps-rail.is-open {
  width: 380px;
  padding: 8px 22px;
  opacity: 1;
  transition-delay: 0s, 0s, 0.15s;
  transform: translateY(-50%);    /* no scaleX */
}

/* Final fix: animate clip-path instead of width.
   The width transition was somehow getting stuck at a tiny value (maybe a
   browser bug with absolute-positioned elements inside flex inside grid).
   With clip-path, the rail always has its full 380px width (no layout fight)
   and we just reveal the right edge progressively. */
.apps-rail {
  width: 380px;
  padding: 8px 22px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}
.apps-rail.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  width: 380px;            /* still 380, just unclipped */
  padding: 8px 22px;
}

/* Pull the button back: it overlapped the logo at -195px shift. Smaller
   shift so it stays roughly centered above the rail's center. */
.apps-toggle.is-active {
  transform: translateX(-150px);
}

/* === Animation-based reveal (transitions kept getting stuck) ============== */
.apps-rail {
  width: 380px;
  padding: 8px 22px;
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  transform: translateY(-50%);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: none;     /* disable transition entirely */
}
.apps-rail[hidden] { display: none; }
.apps-rail.is-open {
  animation: bskyRailOpen 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes bskyRailOpen {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* === Final: snap-open the rail (no animation), keep slot stagger ========== */
/* The clip-path / transition / animation kept freezing under test. Snapping
   to the target state is reliable. The 5 slots inside still stagger their
   own fade-in for a sense of motion. */
.apps-rail {
  width: 380px;
  padding: 8px 22px;
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  transform: translateY(-50%);
  clip-path: inset(0 100% 0 0);
  animation: none;
  transition: none;
  opacity: 0;
}
.apps-rail[hidden] { display: none; }
.apps-rail.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
/* Cage bars snap too */
.apps-toggle .cage-bars,
.apps-toggle .drone-body {
  transition: none !important;
}
.apps-toggle.is-active {
  transform: translateX(-150px);
  transition: none;
}

/* The slot fade-in stagger is the only "animation" — gives a sense of life */
.apps-rail .app-slot { transition: opacity 0.35s ease, transform 0.35s ease; }
.apps-rail.is-open .app-slot:nth-child(1) { transition-delay: 0.05s; }
.apps-rail.is-open .app-slot:nth-child(2) { transition-delay: 0.10s; }
.apps-rail.is-open .app-slot:nth-child(3) { transition-delay: 0.15s; }
.apps-rail.is-open .app-slot:nth-child(4) { transition-delay: 0.20s; }
.apps-rail.is-open .app-slot:nth-child(5) { transition-delay: 0.25s; }

/* Don't slide the button left — it was overlapping the logo. Keep the button
   in place; the rail extends to the right next to it. */
.apps-toggle.is-active { transform: none; }

/* ============================================================================
 * HEADER v3 — fluid, container-query-driven, seamless across all viewport widths
 *
 * Goals:
 *  • Logo, nav font size and apps rail scale fluidly via clamp() — no abrupt
 *    media-query "jumps", just smooth scaling as the window resizes.
 *  • Three-zone flexbox: logo | apps-area | nav-or-hamburger.
 *  • When apps is closed: apps button sits centered between logo and nav.
 *  • When apps is open: button slides LEFT (to just after the logo), the rail
 *    expands to its right showing each app's icon + LED + name (in LED color).
 *  • If the inline nav can't fit alongside the apps rail, it collapses to a
 *    hamburger (container query on `header`).
 *  • Disabled apps (APEX, Robotics) appear in gray with COMING SOON micro-tag.
 * ============================================================================ */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  container-type: inline-size;
  container-name: site-header;
}
header.sticky {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

header .container {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: clamp(12px, 1.5vw, 28px);
}

header .nav-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.5vw, 32px);
  padding-block: clamp(8px, 0.7vw, 16px);
  position: relative;
  /* override the earlier grid layout */
  grid-template-columns: none !important;
}

/* === LOGO ================================================================
   Fluid sizing tied to viewport. Always visible, never overflows. */
header .logo-container {
  flex: 0 0 auto !important;
  justify-self: auto !important;
  display: block;
  width: clamp(140px, 22vw, 420px);
  aspect-ratio: 25 / 4;            /* matches Logo.svg's 200x32 viewBox */
  height: auto;
  z-index: 1001;
}
header .logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@container site-header (max-width: 520px) {
  header .logo-container { width: clamp(110px, 28cqw, 170px); }
}

/* === APPS AREA ===========================================================
   Closed: just the button, centered via auto margins.
   Open: button slides left (auto margins shrink), rail expands. */
header .apps-area {
  flex: 0 1 auto !important;
  justify-self: auto !important;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.8vw, 14px);
  margin-inline: auto;             /* centers between logo and nav when closed */
  transition: margin 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;                    /* allow shrink */
  position: relative;
}
header.has-apps-open .apps-area {
  margin-left: clamp(8px, 1vw, 24px);  /* slides up next to the logo */
  margin-right: 0;
  flex: 1 1 auto !important;            /* claim available width */
}

/* === APPS TOGGLE button =================================================
   Stays compact. Smaller on narrow viewports. */
header .apps-toggle {
  flex: 0 0 auto !important;
  justify-self: auto !important;
  transform: none !important;
  margin: 0 !important;
}
header .apps-toggle-billboard {
  padding: clamp(6px, 0.5vw, 11px) clamp(12px, 1vw, 22px) clamp(6px, 0.5vw, 11px) clamp(10px, 0.8vw, 17px);
  gap: clamp(8px, 0.6vw, 14px);
}
header .apps-toggle-billboard-label {
  font-size: clamp(11px, 0.9vw, 15px);
  letter-spacing: 1.2px;
}
header .apps-toggle .drone-svg {
  width: clamp(26px, 2.4vw, 42px);
  height: clamp(26px, 2.4vw, 42px);
}

/* === APPS RAIL ==========================================================
   Static layout-flow element. Width animates from 0 to fill the available
   space when has-apps-open is set. App names always visible, in LED color. */
header .apps-rail {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: clamp(10px, 1vw, 28px);
  padding: 0;
  background:
    linear-gradient(180deg, #060624 0%, #14112e 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.65),
    inset 0 -1px 2px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  width: 0;
  max-width: 0;
  opacity: 0;
  clip-path: none !important;
  transition:
    max-width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.3s ease,
    padding 0.5s ease;
  flex-shrink: 1;
  min-width: 0;
}
header .apps-rail[hidden] { display: none; }

header.has-apps-open .apps-rail {
  width: auto;
  max-width: 1200px;
  opacity: 1;
  padding: clamp(8px, 0.7vw, 14px) clamp(12px, 1.2vw, 28px);
  flex: 1 1 auto;
}

/* === APP SLOT ============================================================
   Now shows icon + LED + name in LED color, always. */
header .app-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #4a5172;                  /* off color */
  transition: color 0.3s ease, transform 0.2s ease;
  flex: 1 1 0;                     /* equal distribution */
  min-width: 0;
  padding: 4px 6px;
  border-radius: 12px;
}
header .app-slot-icon {
  width: clamp(28px, 2.6vw, 40px);
  height: clamp(28px, 2.6vw, 40px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08), rgba(0,0,0,0.4));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease;
  flex: 0 0 auto;
}
header .app-slot .app-svg {
  width: 60%;
  height: 60%;
  color: inherit;
}
header .app-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a1d2c;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
  flex: 0 0 auto;
  margin-top: 1px;
}
header .app-slot-name {
  font-size: clamp(9px, 0.75vw, 12px);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: inherit;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  margin-top: 2px;
}

/* LED color states */
header .app-slot[data-status="green"] { color: #2ee06a; }
header .app-slot[data-status="green"] .app-led {
  background: #2ee06a;
  box-shadow: 0 0 4px #2ee06a, 0 0 10px rgba(46, 224, 106, 0.55);
}
header .app-slot[data-status="green"] .app-slot-icon {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    0 0 0 1px rgba(46, 224, 106, 0.18),
    0 0 14px rgba(46, 224, 106, 0.30);
}
header .app-slot[data-status="green"] .app-svg { filter: drop-shadow(0 0 3px rgba(46, 224, 106, 0.85)); }

header .app-slot[data-status="blue"] { color: #1f93d0; }
header .app-slot[data-status="blue"] .app-led {
  background: #1f93d0;
  box-shadow: 0 0 4px #1f93d0, 0 0 10px rgba(31, 147, 208, 0.55);
}
header .app-slot[data-status="blue"] .app-slot-icon {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    0 0 0 1px rgba(31, 147, 208, 0.18),
    0 0 14px rgba(31, 147, 208, 0.30);
}
header .app-slot[data-status="blue"] .app-svg { filter: drop-shadow(0 0 3px rgba(31, 147, 208, 0.85)); }

header .app-slot[data-status="off"] {
  cursor: not-allowed;
  opacity: 0.55;
  color: #6b7290;
}
header .app-slot[data-status="off"] .app-svg { opacity: 0.7; filter: none; }

@keyframes ledHeartbeatV3 {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.85; }
}
header .app-slot[data-status="green"] .app-led,
header .app-slot[data-status="blue"]  .app-led {
  animation: ledHeartbeatV3 2.4s ease-in-out infinite;
  animation-delay: 0.4s;
}

header .app-slot[data-status="green"]:hover,
header .app-slot[data-status="blue"]:hover  { transform: translateY(-2px); }

/* Slots themselves fade-in with stagger when rail opens */
header .app-slot {
  opacity: 0;
  transform: translateY(4px);
}
header.has-apps-open .app-slot {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
}
header.has-apps-open .app-slot[data-status="off"] { opacity: 0.55; }
header.has-apps-open .app-slot:nth-child(1) { transition-delay: 0.18s; }
header.has-apps-open .app-slot:nth-child(2) { transition-delay: 0.26s; }
header.has-apps-open .app-slot:nth-child(3) { transition-delay: 0.34s; }
header.has-apps-open .app-slot:nth-child(4) { transition-delay: 0.42s; }
header.has-apps-open .app-slot:nth-child(5) { transition-delay: 0.50s; }

/* === NAVIGATION ==========================================================
   Visible inline by default. Collapses to hamburger when:
   - apps is open (free up space), OR
   - the header container is narrow (≤ 900px). */
header .mainMenu {
  flex: 0 1 auto !important;
  justify-self: auto !important;
  display: block;
}
header .hamburger { display: none; flex: 0 0 auto; }

header .mainMenu ul {
  display: flex;
  gap: clamp(12px, 1.8cqw, 36px);
  margin: 0; padding: 0; list-style: none;
}
header .mainMenu ul li a {
  font-size: clamp(13px, 1.4cqw, 22px);
  font-weight: 800;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-block: clamp(14px, 1vw, 26px);
}

@container site-header (max-width: 1100px) {
  header .mainMenu { display: none; }
  header .hamburger { display: flex; }
}
header.has-apps-open .mainMenu { display: none; }
header.has-apps-open .hamburger { display: flex; }

/* === Cage bars (drone captured) ==========================================
   Re-enable transition so the bars drop in smoothly when active. */
header .apps-toggle .cage-bars {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform: translateY(-100%);
  opacity: 0;
}
header .apps-toggle.is-active .cage-bars {
  transform: translateY(0);
  opacity: 1;
}
header .apps-toggle .drone-body {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform-origin: center;
  transform-box: fill-box;
}
header .apps-toggle.is-active .drone-body {
  transform: scale(0.86);
}


/* === v3 follow-up — make the button actually slide next to the logo ====== */

/* Use flex-start + auto margins instead of space-between so we can control
   where each item ends up when state changes. */
header .nav-container {
  justify-content: flex-start !important;
}
header .apps-area {
  margin-inline: auto !important;  /* centers between logo and nav when CLOSED */
}
header.has-apps-open .apps-area {
  margin-left: clamp(16px, 1.5vw, 32px) !important;  /* sticks just after the logo */
  margin-right: auto !important;                     /* push hamburger to right */
  flex: 1 1 auto !important;
}

/* Push hamburger/nav to the right always */
header .mainMenu,
header .hamburger {
  margin-left: auto !important;
}
header.has-apps-open .mainMenu,
header.has-apps-open .hamburger {
  margin-left: 0 !important;       /* already pushed by apps-area's auto */
}

/* Rail: let it really spread out on wide viewports with generous gaps */
header.has-apps-open .apps-rail {
  max-width: none;
  width: 100%;
  gap: clamp(12px, 2.5vw, 56px);
  padding-inline: clamp(16px, 1.5vw, 32px);
}
header.has-apps-open .app-slot {
  flex: 1 1 auto;
  max-width: 130px;
}
header.has-apps-open .app-slot-icon {
  width: clamp(32px, 2.8vw, 44px);
  height: clamp(32px, 2.8vw, 44px);
}
header.has-apps-open .app-slot-name {
  font-size: clamp(10px, 0.9vw, 14px);
}

/* App names: allow wrapping to 2 lines so long names ("Administrator Center")
   don't get clipped on the left when overflow:hidden clips the rail. */
header .app-slot-name {
  white-space: normal;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em;
}
/* Generous padding inside the rail so the first/last slot text never bumps
   the rail edge */
header.has-apps-open .apps-rail {
  padding-inline: clamp(28px, 2.5vw, 60px);
}

/* ============================================================================
 * HEADER v4 — TWO-ROW LAYOUT (final clean design)
 *  Row 1: BlueSky logo (left) ←→ Nav menu / Hamburger (right)
 *  Row 2: Apps menu (centered). Horizontal rail on wide; vertical on narrow.
 *  Everything sized fluidly with clamp() against viewport width.
 * ============================================================================ */

/* The outer wrapper becomes a vertical stack of two rows */
header .nav-container {
  display: block !important;
  grid-template-columns: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* ---- Row 1: logo + nav ---------------------------------------------------- */
header .header-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
  padding-block: clamp(8px, 0.8vw, 18px);
}

header .logo-container {
  flex: 0 0 auto;
  display: block;
  width: clamp(140px, 22vw, 380px);
  aspect-ratio: 25 / 4;
  height: auto;
  margin: 0 !important;
  justify-self: auto !important;
  z-index: 1001;
}
header .logo-container img { width: 100%; height: 100%; object-fit: contain; }

header .mainMenu {
  flex: 0 1 auto;
  margin: 0 !important;
  justify-self: auto !important;
}
header .mainMenu ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 36px);
  margin: 0; padding: 0; list-style: none;
}
header .mainMenu ul li a {
  font-size: clamp(13px, 1.3vw, 22px);
  font-weight: 800;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-block: clamp(10px, 0.8vw, 16px);
}

header .hamburger {
  flex: 0 0 auto;
  margin: 0 !important;
  display: none;
}

/* ---- Row 2: apps menu (always centered) ----------------------------------- */
header .header-row-apps {
  display: flex;
  justify-content: center;
  padding-block: clamp(4px, 0.4vw, 10px) clamp(8px, 0.8vw, 16px);
}

header .apps-area {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 20px);
  position: static !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* --- Apps toggle button --- */
header .apps-toggle {
  flex: 0 0 auto !important;
  transform: none !important;
  margin: 0 !important;
}
header .apps-toggle-billboard {
  padding: clamp(6px, 0.5vw, 11px) clamp(12px, 1vw, 22px) clamp(6px, 0.5vw, 11px) clamp(10px, 0.8vw, 17px);
  gap: clamp(8px, 0.6vw, 14px);
}
header .apps-toggle-billboard-label {
  font-size: clamp(11px, 0.9vw, 15px);
  letter-spacing: 1.2px;
}
header .apps-toggle .drone-svg {
  width: clamp(26px, 2.2vw, 40px);
  height: clamp(26px, 2.2vw, 40px);
}

/* --- Apps rail: horizontal on wide, vertical on narrow --- */
header .apps-rail {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 40px);
  padding: 0;
  background: linear-gradient(180deg, #060624 0%, #14112e 100%);
  border-radius: clamp(20px, 1.5vw, 32px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.65),
    inset 0 -1px 2px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.25);
  width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  position: static !important;
  transform: none !important;
  clip-path: none !important;
  transition:
    max-width 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.3s ease,
    padding 0.4s ease;
}
header .apps-rail[hidden] { display: none; }
header.has-apps-open .apps-rail {
  width: auto;
  max-width: 1100px;
  opacity: 1;
  padding: clamp(8px, 0.7vw, 14px) clamp(18px, 1.5vw, 36px);
}

/* --- App slot --- */
header .app-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #4a5172;
  flex: 0 0 auto;
  padding: 4px 6px;
  border-radius: 12px;
  transition: color 0.3s ease, transform 0.2s ease;
}
header .app-slot-icon {
  width: clamp(32px, 2.6vw, 44px);
  height: clamp(32px, 2.6vw, 44px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08), rgba(0,0,0,0.4));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease;
  flex: 0 0 auto;
}
header .app-slot .app-svg { width: 60%; height: 60%; color: inherit; }
header .app-led {
  width: 5px; height: 5px; border-radius: 50%;
  background: #1a1d2c;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
  flex: 0 0 auto;
  margin-top: 1px;
}
header .app-slot-name {
  font-size: clamp(10px, 0.85vw, 13px);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: inherit;
  white-space: normal;
  text-align: center;
  text-transform: uppercase;
  margin-top: 2px;
  max-width: clamp(80px, 8vw, 130px);
  line-height: 1.1;
}

/* Status colors */
header .app-slot[data-status="green"] { color: #2ee06a; }
header .app-slot[data-status="green"] .app-led {
  background: #2ee06a;
  box-shadow: 0 0 4px #2ee06a, 0 0 10px rgba(46, 224, 106, 0.55);
}
header .app-slot[data-status="green"] .app-slot-icon {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    0 0 0 1px rgba(46, 224, 106, 0.18),
    0 0 14px rgba(46, 224, 106, 0.30);
}
header .app-slot[data-status="green"] .app-svg { filter: drop-shadow(0 0 3px rgba(46, 224, 106, 0.85)); }

header .app-slot[data-status="blue"] { color: #1f93d0; }
header .app-slot[data-status="blue"] .app-led {
  background: #1f93d0;
  box-shadow: 0 0 4px #1f93d0, 0 0 10px rgba(31, 147, 208, 0.55);
}
header .app-slot[data-status="blue"] .app-slot-icon {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.55),
    0 0 0 1px rgba(31, 147, 208, 0.18),
    0 0 14px rgba(31, 147, 208, 0.30);
}
header .app-slot[data-status="blue"] .app-svg { filter: drop-shadow(0 0 3px rgba(31, 147, 208, 0.85)); }

header .app-slot[data-status="off"] { cursor: not-allowed; opacity: 0.55; color: #6b7290; }
header .app-slot[data-status="off"] .app-svg { opacity: 0.7; filter: none; }

@keyframes ledHeartbeatV4 {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.85; }
}
header .app-slot[data-status="green"] .app-led,
header .app-slot[data-status="blue"]  .app-led {
  animation: ledHeartbeatV4 2.4s ease-in-out infinite;
  animation-delay: 0.4s;
}

header .app-slot[data-status="green"]:hover,
header .app-slot[data-status="blue"]:hover  { transform: translateY(-2px); }

/* Slot stagger when rail opens */
header .app-slot { opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease, color 0.3s ease; }
header.has-apps-open .app-slot { opacity: 1; transform: translateY(0); }
header.has-apps-open .app-slot[data-status="off"] { opacity: 0.55; }
header.has-apps-open .app-slot:nth-child(1) { transition-delay: 0.10s; }
header.has-apps-open .app-slot:nth-child(2) { transition-delay: 0.18s; }
header.has-apps-open .app-slot:nth-child(3) { transition-delay: 0.26s; }
header.has-apps-open .app-slot:nth-child(4) { transition-delay: 0.34s; }
header.has-apps-open .app-slot:nth-child(5) { transition-delay: 0.42s; }

/* Cage bars animation */
header .apps-toggle .cage-bars {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
  transform: translateY(-100%);
  opacity: 0;
}
header .apps-toggle.is-active .cage-bars { transform: translateY(0); opacity: 1; }
header .apps-toggle .drone-body {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform-origin: center;
  transform-box: fill-box;
}
header .apps-toggle.is-active .drone-body { transform: scale(0.86); }

/* ============================================================================
 * Responsive: nav → hamburger on narrow viewports; rail → vertical on mobile
 * ============================================================================ */
@media (max-width: 900px) {
  header .mainMenu { display: none; }
  header .hamburger { display: flex; }
}

@media (max-width: 720px) {
  /* Apps rail flows vertically below the button when open */
  header .apps-area { flex-direction: column; align-items: center; gap: clamp(8px, 1vw, 14px); }
  header .apps-rail {
    flex-direction: column;
    width: 0;                /* horizontal width still controls open/close */
    border-radius: clamp(22px, 4vw, 32px);
    padding: 0;
  }
  header.has-apps-open .apps-rail {
    width: clamp(220px, 70vw, 320px);
    max-width: 100%;
    padding: clamp(14px, 3vw, 20px) clamp(16px, 3vw, 22px);
    gap: clamp(10px, 2vw, 18px);
  }
  /* In vertical mode, each slot is a row: icon + name side by side */
  header .apps-rail .app-slot {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 12px;
    padding: 6px 8px;
  }
  header .apps-rail .app-slot-name {
    text-align: left;
    max-width: none;
    margin: 0;
    font-size: clamp(11px, 3.2vw, 14px);
  }
  header .apps-rail .app-led {
    margin-top: 0;
    margin-left: auto;
  }
}

@media (max-width: 480px) {
  header .logo-container { width: clamp(110px, 38vw, 170px); }
}

/* ============================================================================
 * v4 follow-up fixes:
 *  1. Nav → hamburger at <=1100px (was 900; nav doesn't fit at common 1000-1100)
 *  2. Mobile menu opens as a top-down dropdown (was sliding from the right)
 *  3. Mobile apps rail: wider, full names visible, no truncation
 * ============================================================================ */

/* ---- (1) Earlier hamburger breakpoint --------------------------------------- */
@media (max-width: 1100px) {
  header .mainMenu { display: none; }
  header .hamburger { display: flex !important; }
}

/* ---- (2) Mobile menu: top-down dropdown (override Skwid's off-canvas) ------- */
@media (max-width: 1100px) {
  header .mainMenu {
    /* Override the right-slide drawer baked into the original Skwid CSS */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(10, 10, 50, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px clamp(16px, 4vw, 32px) 20px !important;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    z-index: 999;
    border-top: 1px solid rgba(31, 147, 208, 0.18);
  }
  header .mainMenu.active {
    display: block !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    right: 0 !important;          /* override Skwid's right:0 was kept for drawer */
  }
  header .mainMenu ul {
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch;
  }
  header .mainMenu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: auto;
  }
  header .mainMenu ul li:last-child { border-bottom: 0; }
  header .mainMenu ul li a {
    color: #fff !important;
    text-align: left !important;
    padding: 14px 4px !important;
    font-size: clamp(14px, 2vw, 17px);
    width: 100%;
    display: block;
  }
  header .mainMenu ul li a:hover { padding-left: 12px !important; }
  header .mainMenu ul li a::after { display: none; }  /* hide underline marker on mobile */
}

/* ---- (3) Mobile apps rail: full-width rows, full names ---------------------- */
@media (max-width: 720px) {
  /* Override the base name's max-width + line-clamp that was truncating */
  header .apps-rail .app-slot-name {
    max-width: none !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    display: inline !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    text-align: left !important;
    margin: 0 !important;
    font-size: clamp(13px, 4vw, 16px);
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  /* Bigger rail using the available screen width */
  header.has-apps-open .apps-rail {
    width: min(92vw, 460px) !important;
    max-width: 92vw !important;
    gap: clamp(4px, 1.5vw, 10px) !important;
    padding: clamp(14px, 3vw, 20px) clamp(18px, 4vw, 28px) !important;
  }
  /* Each slot is a row spanning the full rail width */
  header .apps-rail .app-slot {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    gap: 14px !important;
    padding: 8px 4px !important;
  }
  header .apps-rail .app-slot-icon {
    width: clamp(36px, 9vw, 44px) !important;
    height: clamp(36px, 9vw, 44px) !important;
    flex: 0 0 auto !important;
  }
  header .apps-rail .app-led {
    margin-left: auto !important;
    margin-top: 0 !important;
    width: 7px;
    height: 7px;
  }
}


/* Nav stays inline even when apps is open — the two are on separate rows now,
   so there's no horizontal collision. Nav only collapses to hamburger when the
   viewport itself is too narrow (≤1100px). */
header.has-apps-open .mainMenu { display: block !important; }
header.has-apps-open .hamburger { display: none !important; }

/* But still collapse to hamburger at narrow widths regardless of apps state */
@media (max-width: 1100px) {
  header .mainMenu,
  header.has-apps-open .mainMenu { display: none !important; }
  header .hamburger,
  header.has-apps-open .hamburger { display: flex !important; }
  /* Re-allow the mobile dropdown to actually open */
  header .mainMenu.active,
  header.has-apps-open .mainMenu.active { display: block !important; }
}

/* Reserve consistent vertical space in the apps row at all times — the button
   stays centered against the rail's potential height, not its own small size. */
header .header-row-apps {
  min-height: clamp(56px, 6vw, 88px);
  align-items: center;
}
header .apps-area {
  align-items: center !important;
  min-height: clamp(56px, 6vw, 88px);
}

/* Mobile: rail goes vertical, so the row should grow to fit it when open,
   but still keep a reasonable min height when closed. */
@media (max-width: 720px) {
  header .header-row-apps {
    min-height: clamp(56px, 14vw, 80px);
    align-items: center;
  }
  header.has-apps-open .header-row-apps {
    /* allow growth for the vertical rail */
    min-height: 0;
  }
  header .apps-area { min-height: 0; }
}

/* ============================================================================
 * HEADER v5 — Glassmorphism + smoother morph transitions
 * Frosted glass surfaces with backdrop-filter blur, longer eases, and a
 * morph effect on the apps button when it activates (its glass tint shifts
 * toward the brand blue, with a soft outer glow).
 * ============================================================================ */

/* --- Apps toggle button: glass capsule ----------------------------------- */
header .apps-toggle-billboard {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transition:
    background 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
header .apps-toggle:hover .apps-toggle-billboard,
header .apps-toggle:focus-visible .apps-toggle-billboard {
  background: rgba(31, 147, 208, 0.16) !important;
  border-color: rgba(31, 147, 208, 0.4) !important;
  box-shadow:
    0 10px 32px rgba(31, 147, 208, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  transform: translateY(-1px);
}
header .apps-toggle.is-active .apps-toggle-billboard {
  background: linear-gradient(135deg, rgba(31, 147, 208, 0.28), rgba(46, 224, 106, 0.18)) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    0 0 32px rgba(31, 147, 208, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
}
header .apps-toggle.is-active .apps-toggle-billboard {
  /* Subtle morph — slightly squashed when "locked" */
  transform: scale(0.97);
}

/* Smoother cage-bar drop + drone capture */
header .apps-toggle .cage-bars {
  transition:
    transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
header .apps-toggle .drone-body {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* --- Apps rail: frosted glass container ---------------------------------- */
header .apps-rail {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
  transition:
    max-width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.55s ease !important;
}
header.sticky .apps-rail {
  background: rgba(10, 10, 50, 0.22) !important;
  border-color: rgba(31, 147, 208, 0.25) !important;
}

/* --- Slot icons: glass orbs ---------------------------------------------- */
header .app-slot-icon {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 14px rgba(0, 0, 0, 0.08) !important;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.45s ease,
    border-color 0.45s ease !important;
}
header .app-slot[data-status="green"] .app-slot-icon {
  border-color: rgba(46, 224, 106, 0.45) !important;
  background: linear-gradient(135deg, rgba(46, 224, 106, 0.14), rgba(255, 255, 255, 0.04)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 18px rgba(46, 224, 106, 0.32),
    0 4px 14px rgba(0, 0, 0, 0.10) !important;
}
header .app-slot[data-status="blue"] .app-slot-icon {
  border-color: rgba(31, 147, 208, 0.50) !important;
  background: linear-gradient(135deg, rgba(31, 147, 208, 0.16), rgba(255, 255, 255, 0.04)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 18px rgba(31, 147, 208, 0.32),
    0 4px 14px rgba(0, 0, 0, 0.10) !important;
}
header .app-slot[data-status="off"] .app-slot-icon {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

header .app-slot[data-status="green"]:hover .app-slot-icon,
header .app-slot[data-status="blue"]:hover .app-slot-icon {
  transform: scale(1.08);
}

/* Smoother slot reveal with longer, more pronounced morph */
header .app-slot {
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.4s ease !important;
}
header .app-slot {
  opacity: 0;
  transform: translateY(10px) scale(0.92);
}
header.has-apps-open .app-slot {
  opacity: 1;
  transform: translateY(0) scale(1);
}
header.has-apps-open .app-slot[data-status="off"] { opacity: 0.55; }

/* Slot name with a hint of glass underline on hover */
header .app-slot-name {
  transition: letter-spacing 0.35s ease, transform 0.35s ease !important;
}
header .app-slot:hover .app-slot-name {
  letter-spacing: 0.7px;
}

/* --- Logo container: subtle glass capsule when sticky -------------------- */
header.sticky .logo-container {
  /* nothing visible by default, but the parent sticky state already gets glass */
}

/* --- Sticky header itself: more pronounced glass ------------------------- */
header.sticky {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition:
    background 0.45s ease,
    backdrop-filter 0.45s ease,
    box-shadow 0.45s ease !important;
}

/* --- Mobile menu dropdown: glassmorphism ------------------------------- */
@media (max-width: 1100px) {
  header .mainMenu {
    background: rgba(10, 10, 50, 0.65) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  }
}


/* ============================================================================
 * Glass: dial it back — more transparent surfaces; off slot names readable.
 * ============================================================================ */

/* APPS button: more glass / less opaque */
header .apps-toggle-billboard {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
header .apps-toggle:hover .apps-toggle-billboard,
header .apps-toggle:focus-visible .apps-toggle-billboard {
  background: rgba(31, 147, 208, 0.10) !important;
  border-color: rgba(31, 147, 208, 0.30) !important;
}
header .apps-toggle.is-active .apps-toggle-billboard {
  background: linear-gradient(135deg, rgba(31, 147, 208, 0.16), rgba(46, 224, 106, 0.10)) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Rail: more transparent */
header .apps-rail {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important;
}
header.sticky .apps-rail {
  background: rgba(10, 10, 50, 0.10) !important;
  border-color: rgba(31, 147, 208, 0.15) !important;
}

/* Slot orbs: lighter glass */
header .app-slot-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
header .app-slot[data-status="green"] .app-slot-icon {
  background: linear-gradient(135deg, rgba(46, 224, 106, 0.08), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(46, 224, 106, 0.32) !important;
}
header .app-slot[data-status="blue"] .app-slot-icon {
  background: linear-gradient(135deg, rgba(31, 147, 208, 0.10), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(31, 147, 208, 0.36) !important;
}
header .app-slot[data-status="off"] .app-slot-icon {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Sticky header: also lighter (was too solid) */
header.sticky {
  background: rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Mobile dropdown: lighter too */
@media (max-width: 1100px) {
  header .mainMenu {
    background: rgba(10, 10, 50, 0.40) !important;
  }
}

/* ============================================================================
 * Off-slot names: stay readable. Only dim the ICON, not the whole slot.
 * ============================================================================ */
header .app-slot[data-status="off"] {
  opacity: 1 !important;                /* don't fade the whole slot */
  color: rgba(255, 255, 255, 0.82) !important;
}
header.has-apps-open .app-slot[data-status="off"] {
  opacity: 1 !important;
}
header .app-slot[data-status="off"] .app-slot-icon {
  opacity: 0.45;                        /* fade the icon orb */
}
header .app-slot[data-status="off"] .app-svg {
  opacity: 0.6;
}
header .app-slot[data-status="off"] .app-slot-name {
  color: rgba(255, 255, 255, 0.85) !important;   /* names stay clearly readable */
  opacity: 1 !important;
}

/* Sticky state: off names get dark text for contrast on the light glass */
header.sticky .app-slot[data-status="off"] .app-slot-name {
  color: rgba(0, 0, 95, 0.85) !important;
}
header.sticky .app-slot[data-status="off"] {
  color: rgba(0, 0, 95, 0.85) !important;
}

/* Allow long names (BlueSky Command & Control, KERNEL Local Private AI) to
   wrap onto 3 lines so they don't get truncated with an ellipsis. */
header .app-slot-name {
  -webkit-line-clamp: 3 !important;
  max-height: 3.4em !important;
  max-width: clamp(96px, 10vw, 170px) !important;
  font-size: clamp(10px, 0.85vw, 13px) !important;
  line-height: 1.1 !important;
}

/* Tighten the rail gaps slightly so the wider slots still fit */
header.has-apps-open .apps-rail {
  gap: clamp(8px, 1.5vw, 28px) !important;
}

/* ============================================================================
 * Administrator Center: success/failure UI
 * ─ Hide the old .admin-notice text completely (we replaced it with the
 *   success animation panel and a fail-shake on the card).
 * ─ Failure shake: a quick lateral wobble when login fails and the form
 *   reappears, so the user gets immediate "wrong credentials" feedback.
 * ─ The success panel reuses the contact-success-panel styles already in
 *   the stylesheet, but here it gets the same dark gradient background as
 *   the admin card so it feels like a continuation of the panel.
 * ========================================================================== */

.admin-notice,
.admin-notice-muted { display: none !important; }

.admin-success-panel {
  background: rgba(10, 10, 50, 0.78);
  border: 1px solid rgba(31, 147, 208, 0.35);
  border-radius: 22px;
  padding: 44px 36px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  text-align: center;
}
.admin-success-panel h3 { color: #2ee06a; }   /* green for "Access Granted" */
.admin-success-panel p  { color: rgba(255, 255, 255, 0.78); }

/* Failure feedback: brief shake on the card when it reappears */
@keyframes adminShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}
.admin-shake {
  animation: adminShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: rgba(255, 80, 80, 0.55) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 80, 80, 0.35),
    0 0 28px rgba(255, 80, 80, 0.18) !important;
}

/* Admin Center: hero-video background, matching the home page */
.admin-center-section {
  background: #0a0a32 !important;   /* fallback while video loads */
  position: relative;
  overflow: hidden;
}
.admin-center-section::before {
  /* Disable the watermark from the previous radial background */
  display: none !important;
}
.admin-center-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.admin-center-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 10, 50, 0.78) 0%,
    rgba(21, 18, 58, 0.62) 50%,
    rgba(10, 10, 50, 0.80) 100%);
  z-index: 1;
  pointer-events: none;
}
.admin-center-shell {
  position: relative;
  z-index: 2;
}


/* ─── Admin Center login error + submit-loading states ─────────────────────── */
.admin-error {
    background: rgba(255, 70, 70, 0.12);
    border: 1px solid rgba(255, 70, 70, 0.45);
    color: #ffb8b8;
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* `display:flex` above would override the HTML `hidden` attribute, leaving an
   empty red banner on first paint. Re-assert hidden so it only shows when JS
   explicitly removes the attribute. */
.admin-error[hidden] { display: none !important; }
.admin-error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: rgba(255, 70, 70, 0.4);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

.admin-submit { position: relative; }
.admin-submit .admin-submit-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: admin-spin 0.7s linear infinite;
    margin-left: 4px;
}
.admin-submit.is-loading {
    cursor: progress;
    opacity: 0.85;
}
.admin-submit.is-loading .admin-submit-arrow { display: none; }
.admin-submit.is-loading .admin-submit-spinner { display: inline-block; }
@keyframes admin-spin { to { transform: rotate(360deg); } }
/* ─── End admin login states ──────────────────────────────────────────────── */

/* ─── Administrator Console (single-page) ─────────────────────────────────
 * The login-gated /admin-center/dashboard surface. Three big tile cards,
 * WRD snapshot widget with PNG/PDF export, and a Project Resources
 * accordion underneath. Sits over the hero video, glassmorphism palette.
 * Brand tokens reused: --bs-blue, --bs-blue-deep, --bs-bg, text #e9f3fb.
 */
:root {
    --bs-blue: #1f93d0;
    --bs-blue-soft: #8ad4f5;
    --bs-blue-deep: #0d2848;
    --bs-bg: #0a1622;
    --bs-text: #e9f3fb;
    --bs-muted: #8aa3b8;
    --bs-line: rgba(255,255,255,0.10);
    --bs-glass-surface: rgba(8, 22, 35, 0.55);
    --bs-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.is-chromeless { background: var(--bs-bg); }
body.is-chromeless .admin-shell-main { padding: 0; margin: 0; }

.admin-console {
    position: relative;
    min-height: 100dvh;
    color: var(--bs-text);
    isolation: isolate;
    background: var(--bs-bg);
}

/* ─── Marketing-site override ─────────────────────────────────────────
 * The compiled marketing CSS has a bare `header { position: fixed; top: 0;
 * left: 0; width: 100%; z-index: 1000; }` rule meant for the home-page nav.
 * It silently stamps `position: fixed` onto every <header> in the admin
 * console too, which makes all our section headers (`.console-view-head`,
 * `.console-portfolio-head`, `.console-wrd-head`, etc.) pile up at viewport
 * top and visually overlap. Reset everywhere inside `.admin-console` —
 * the topbar is excluded because it owns its own `position: sticky`. */
.admin-console header:not(.admin-console-topbar) {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    z-index: auto !important;
    background: transparent !important;
    transition: none !important;
    box-shadow: none !important;
}
/* Re-affirm the topbar's sticky positioning so it wins decisively. */
.admin-console-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50;
}

/* Layer 1: pre-blurred CCOC ops-room photo — ambient "you are in the ops room"
   feel without a video. Sits behind everything, very low opacity. */
.admin-console-bg-image {
    position: fixed; inset: 0;
    background-image: url('/Assets/admin-environment.jpg');
    background-size: cover;
    background-position: center 40%;
    z-index: -3;
    opacity: 0.20;
    /* extra blur on top of the pre-blurred file softens any compression edges */
    filter: blur(6px) saturate(0.85);
    transform: scale(1.05); /* hides the blur halo around the edges */
}

/* Layer 2: brand-coloured gradient wash. Knocks the photo back to pure mood. */
.admin-console-bg-overlay {
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse at 12% 0%,   rgba(31,147,208,0.18), transparent 55%),
      radial-gradient(ellipse at 92% 100%, rgba(13,40,72,0.55),   transparent 60%),
      linear-gradient(180deg, rgba(8,18,28,0.78) 0%, rgba(10,22,34,0.92) 100%);
    z-index: -2;
}

/* Layer 3: ultra-subtle technical grid — references the brand's defense /
   blueprint heritage without becoming busy. Lines repeat every 80px. */
.admin-console-bg-grid {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
      linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    /* Fade the grid at top and bottom so it doesn't compete with the topbar / footer */
    mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

/* Reduced motion: drop the photo entirely. Pure gradient + grid suffices. */
@media (prefers-reduced-motion: reduce) {
    .admin-console-bg-image { display: none; }
}

/* ── Topbar ───────────────────────────────────────────────────────────── */
.admin-console-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px clamp(16px, 3vw, 32px);
    background: var(--bs-glass-surface);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--bs-line);
}
.admin-console-brand {
    display: flex; align-items: center; gap: 12px;
    color: var(--bs-text); text-decoration: none;
    font-weight: 600; font-size: 15px; letter-spacing: 0.04em;
}
.admin-console-brand img { width: 28px; height: 28px; }
.admin-console-brand em  { font-style: normal; opacity: 0.65; font-weight: 400; }

/* Topbar tools cluster (avatar card · settings · sign-out) */
.admin-console-tools { display: flex; align-items: center; gap: 8px; }
.admin-console-user-card {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bs-line);
    transition: background 0.18s, border-color 0.18s;
    cursor: default;
}
.admin-console-user-card:hover,
.admin-console-user-card:focus-visible {
    background: rgba(255,255,255,0.08);
    border-color: rgba(31,147,208,0.45);
    outline: none;
}
.admin-console-avatar {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background:
      linear-gradient(135deg,
        hsl(var(--avatar-hue, 200), 70%, 55%) 0%,
        hsl(calc(var(--avatar-hue, 200) + 40), 65%, 38%) 100%);
    color: #fff;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.35);
}
.admin-console-user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.admin-console-user-name { font-weight: 600; font-size: 13px; color: var(--bs-text); }
.admin-console-user-role { opacity: 0.6; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-muted); }

.admin-console-tool {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bs-line);
    color: var(--bs-text); text-decoration: none;
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.admin-console-tool:hover { background: rgba(255,255,255,0.10); border-color: rgba(31,147,208,0.45); }
.admin-console-tool:active { transform: scale(0.98); }
.admin-console-tool:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }
.admin-console-tool-danger:hover { border-color: rgba(255,90,90,0.55); color: #ff8e8e; }
.admin-console-logout-form { margin: 0; }

@media (max-width: 820px) {
    .admin-console-tool span { display: none; }
    .admin-console-tool { padding: 6px 10px; }
    .admin-console-user-meta { display: none; }
}

/* ── Page main (full-bleed) ─────────────────────────────────────────── */
.admin-console-main {
    padding: clamp(16px, 2vw, 32px) clamp(16px, 2.2vw, 40px) clamp(40px, 5vw, 60px);
    max-width: none;
    width: 100%;
}

/* ── Tile strip ───────────────────────────────────────────────────────── */
/* ─── Marquee favourites bar ────────────────────────────────────────────
   Horizontal-scrolling row of fixed-width tile cards. Each major tile is
   a tab that swaps the views below; empty tiles are "add app" stubs. */
.console-marquee {
    display: flex;
    flex-direction: row;
    gap: 18px;
    margin-bottom: clamp(24px, 4vw, 40px);
    padding: 4px 4px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding: 4px;
    /* Subtle scrollbar styling — show only when scrolling is needed */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
    /* Soft fade on right edge to hint there's more if the bar scrolls */
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.console-marquee::-webkit-scrollbar { height: 6px; }
.console-marquee::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.console-marquee::-webkit-scrollbar-track { background: transparent; }

.console-marquee > .console-tile {
    flex: 0 0 280px;
    width: 280px;
    scroll-snap-align: start;
}

@media (max-width: 600px) {
    /* On a phone, the bar still scrolls horizontally — tiles stay full-width-ish */
    .console-marquee > .console-tile { flex-basis: 78vw; width: 78vw; }
    /* But drop the placeholders so the row doesn't feel empty */
    .console-marquee > .console-tile-empty { display: none; }
}

/* Active tile (the currently-selected view) */
.console-marquee > .console-tile[aria-selected="true"] {
    border-color: rgba(31,147,208,0.85);
    background:
      linear-gradient(135deg, rgba(31,147,208,0.22) 0%, rgba(13,40,72,0.55) 100%);
    box-shadow:
      0 14px 36px rgba(31,147,208,0.22),
      inset 0 0 0 1px rgba(31,147,208,0.30);
}
/* Glowing dot anchored at the bottom of the active tile, pointing at the
   view section below. */
.console-marquee > .console-tile[aria-selected="true"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: rgba(31,147,208,0.85);
    border: 1px solid rgba(31,147,208,0.30);
    border-top: 0; border-left: 0;
    box-shadow: 0 4px 14px rgba(31,147,208,0.55);
}

/* Empty placeholder tile — now interactive ("+ Add app") */
.console-tile-empty {
    min-height: 232px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.015);
    border: 1.5px dashed rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.22s ease-out,
                background 0.22s ease-out,
                color 0.22s ease-out,
                transform 0.22s var(--bs-elastic);
}
.console-tile-empty:hover {
    border-color: rgba(31, 147, 208, 0.55);
    background: rgba(31, 147, 208, 0.06);
    color: rgba(255, 255, 255, 0.65);
    transform: translateY(-2px);
}
.console-tile-empty:focus-visible {
    outline: 2px solid var(--bs-blue);
    outline-offset: 3px;
}
.console-tile-empty-mark {
    font-size: 38px;
    font-weight: 200;
    line-height: 1;
    color: rgba(255, 255, 255, 0.20);
    transition: color 0.22s ease-out;
}
.console-tile-empty:hover .console-tile-empty-mark { color: var(--bs-blue-soft); }
.console-tile-empty-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.console-marquee:hover .console-tile-empty:not(:hover) {
    border-color: rgba(31, 147, 208, 0.16);
    background: rgba(31, 147, 208, 0.02);
}

/* View containers swap based on selected tile */
.console-view[hidden] { display: none; }
.console-view { animation: console-view-in 0.32s var(--bs-elastic) both; }
@keyframes console-view-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Generic head for non-c2-dev views (e.g. c2-prod launcher) */
.console-view-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.console-view-head h2 {
    margin: 0 0 4px;
    font-size: clamp(20px, 2vw, 24px); font-weight: 600; letter-spacing: -0.01em;
}
.console-view-sub { margin: 0; font-size: 13px; color: var(--bs-muted); }
.console-view-sub code {
    background: rgba(255,255,255,0.06);
    padding: 2px 6px; border-radius: 4px;
    font-size: 12px;
}
.console-empty-view {
    padding: 40px 24px;
    text-align: center;
    color: var(--bs-muted);
    border: 1px dashed var(--bs-line);
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
}
.console-tile {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 14px;
    padding: 24px 22px 20px;
    min-height: 220px;
    text-decoration: none;
    color: var(--bs-text);
    background:
      linear-gradient(135deg, rgba(31,147,208,0.10) 0%, rgba(13,40,72,0.40) 100%);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--bs-line);
    border-radius: 18px;
    transition:
      transform 0.28s var(--bs-elastic),
      border-color 0.22s ease-out,
      box-shadow 0.28s ease-out;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
}
.console-tile::before {
    content: '';
    position: absolute; inset: -1px;
    background: radial-gradient(circle at 80% 0%, rgba(31,147,208,0.18), transparent 55%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease-out;
    z-index: -1;
}
.console-tile:hover {
    transform: translateY(-3px) scale(1.012);
    border-color: rgba(31,147,208,0.45);
    box-shadow: 0 12px 38px rgba(31,147,208,0.18);
}
.console-tile:hover::before { opacity: 1; }
.console-tile:active { transform: translateY(-1px) scale(0.998); transition-duration: 0.08s; }
.console-tile:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }

.console-tile-led {
    position: absolute; top: 14px; right: 14px;
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.console-tile-led[data-status="green"] { background: #2ee06a; box-shadow: 0 0 12px rgba(46,224,106,0.55), 0 0 0 3px rgba(46,224,106,0.12); }
.console-tile-led[data-status="blue"]  { background: var(--bs-blue); box-shadow: 0 0 12px rgba(31,147,208,0.55), 0 0 0 3px rgba(31,147,208,0.12); }
.console-tile-led[data-status="amber"] { background: #ffb41e; box-shadow: 0 0 12px rgba(255,180,30,0.55), 0 0 0 3px rgba(255,180,30,0.12); }
.console-tile-led[data-status="off"]   { background: rgba(255,255,255,0.10); box-shadow: none; }

.console-tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 80px; height: 80px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bs-line);
}

.console-tile-label {
    font-size: 17px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--bs-text);
}
.console-tile-label strong { display: block; font-weight: 700; font-size: 19px; }

.console-tile-sub {
    font-size: 12px;
    color: var(--bs-muted);
    opacity: 0.82;
    line-height: 1.5;
}

.console-tile-cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(31,147,208,0.14);
    color: var(--bs-blue-soft);
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: background 0.18s, gap 0.22s var(--bs-elastic);
}
.console-tile:hover .console-tile-cta { background: rgba(31,147,208,0.28); gap: 10px; }

/* ── WRD Development Dashboard widget ─────────────────────────────────── */
.console-wrd {
    background: var(--bs-glass-surface);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--bs-line);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: clamp(24px, 4vw, 40px);
}
.console-wrd-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.console-wrd-head h2 {
    margin: 0 0 4px;
    font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.console-wrd-sub {
    margin: 0; font-size: 12px; color: var(--bs-muted);
}
.console-wrd-sub code {
    font-size: 11px;
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
}
.console-wrd-meta { margin-left: 8px; opacity: 0.7; }
.console-wrd-actions { display: flex; gap: 8px; }

.console-pill-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 6px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--bs-line);
    color: var(--bs-text);
    border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.console-pill-btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(31,147,208,0.45); }
.console-pill-btn:active { transform: scale(0.98); }
.console-pill-btn:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }
.console-pill-btn[disabled] { opacity: 0.55; cursor: progress; }
.console-pill-btn.is-loading svg { animation: console-spin 1.1s linear infinite; }
@keyframes console-spin { to { transform: rotate(360deg); } }

.console-pill-btn-primary {
    background: linear-gradient(135deg, var(--bs-blue), #1879ad);
    border-color: rgba(31,147,208,0.45);
    box-shadow: 0 6px 18px rgba(31,147,208,0.28);
    color: #fff;
}
.console-pill-btn-primary:hover {
    background: linear-gradient(135deg, #2ba6e4, #1879ad);
    border-color: rgba(31,147,208,0.65);
}

.console-wrd-stage {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px),
      var(--bs-blue-deep);
    border: 1px solid var(--bs-line);
}
.console-wrd-stage img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.console-wrd-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 24px; text-align: center;
    color: var(--bs-muted);
}
.console-wrd-empty h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--bs-text); }
.console-wrd-empty p  { margin: 0; font-size: 12px; line-height: 1.5; max-width: 56ch; }
.console-wrd-empty code {
    font-size: 11px;
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--bs-text);
}
@media (max-width: 640px) {
    .console-wrd-stage { aspect-ratio: auto; height: 360px; }
}

/* ── Project Resources accordion ──────────────────────────────────────── */
.console-resources-head { margin-bottom: 16px; }
.console-resources-head h2 {
    margin: 0 0 4px;
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 600; letter-spacing: -0.01em;
}
.console-resources-head p { margin: 0; font-size: 13px; color: var(--bs-muted); }

.console-project {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--bs-line);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.18s, background 0.18s;
}
.console-project[open] {
    border-color: rgba(31,147,208,0.35);
    background: rgba(255,255,255,0.045);
}
.console-project > summary {
    list-style: none;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    min-height: 56px;
}
.console-project > summary::-webkit-details-marker { display: none; }
.console-project > summary:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: -2px; }

.console-project-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bs-blue-soft);
    transition: transform 0.22s var(--bs-elastic);
}
.console-project[open] .console-project-chevron { transform: rotate(90deg); }

.console-project-headline { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.console-project-headline strong {
    font-size: 14px; font-weight: 600; color: var(--bs-text);
    overflow: hidden; text-overflow: ellipsis;
}
.console-project-meta {
    display: flex; flex-wrap: wrap; gap: 6px;
    font-size: 11px;
}
.console-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--bs-muted);
    font-size: 10px;
    letter-spacing: 0.03em;
}
.console-chip-num { color: var(--bs-blue-soft); font-variant-numeric: tabular-nums; font-weight: 600; }

.console-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--bs-muted);
    white-space: nowrap;
}
.console-status-active    { background: rgba(46,224,106,0.18); color: #2ee06a; }
.console-status-delivered { background: rgba(31,147,208,0.18); color: var(--bs-blue-soft); }
.console-status-ongoing,
.console-status-pending   { background: rgba(255,180,30,0.18); color: #ffb41e; }
.console-status-unknown   { opacity: 0.5; }

.console-project-body {
    padding: 6px 18px 18px;
    border-top: 1px solid var(--bs-line);
    background: rgba(0,0,0,0.18);
    animation: console-fade-in 0.28s ease-out;
}
@keyframes console-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.console-asset-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 10px 0 14px;
    border-bottom: 1px solid var(--bs-line);
    padding-bottom: 4px;
}
.console-asset-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--bs-muted);
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.console-asset-tab:hover { color: var(--bs-text); background: rgba(255,255,255,0.04); }
.console-asset-tab.is-active {
    color: var(--bs-text);
    background: rgba(31,147,208,0.14);
    border-color: var(--bs-line);
    border-bottom-color: transparent;
}
.console-asset-tab:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }

.console-asset-panel { min-height: 80px; }
.console-asset-empty { margin: 14px 0; font-size: 12px; color: var(--bs-muted); font-style: italic; }
.console-asset-empty code {
    font-style: normal;
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--bs-text);
}

.console-asset-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.console-asset-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: var(--bs-text);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bs-line);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.22s var(--bs-elastic), border-color 0.18s;
}
.console-asset-card:hover { transform: translateY(-2px); border-color: rgba(31,147,208,0.45); }
.console-asset-card:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }
.console-asset-thumb {
    aspect-ratio: 1; width: 100%;
    background: linear-gradient(135deg, rgba(31,147,208,0.10), rgba(31,147,208,0.02));
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(31,147,208,0.7);
}
.console-asset-name {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.console-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--bs-muted);
    border: 1px dashed var(--bs-line);
    border-radius: 12px;
}

/* ── Toast ───────────────────────────────────────────────────────────── */
.admin-toast-root {
    position: fixed; bottom: 28px; right: 28px;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.admin-toast {
    background: rgba(8, 22, 35, 0.92);
    border: 1px solid var(--bs-line);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--bs-text);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease-out, transform 0.22s var(--bs-elastic);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    pointer-events: auto;
    min-width: 220px;
    max-width: 360px;
}
.admin-toast.is-shown { opacity: 1; transform: none; }
.admin-toast-ok   { border-left: 3px solid #2ee06a; }
.admin-toast-warn { border-left: 3px solid #ffb41e; }
.admin-toast-err  { border-left: 3px solid #ff5a5a; }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .console-tile,
    .console-tile-cta,
    .console-project-chevron,
    .console-asset-card,
    .admin-toast { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* ─── End Administrator Console ───────────────────────────────────────── */

/* ─── Console — filter bar + project card grid + locked WRD ─────────── */

/* WRD locked panel (per-user permission denied) */
.console-wrd-locked {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 24px; text-align: center;
    color: var(--bs-muted);
}
.console-wrd-locked svg { color: rgba(255,180,30,0.85); }
.console-wrd-locked h3 {
    margin: 0; font-size: 15px; font-weight: 600;
    color: var(--bs-text); letter-spacing: 0.02em;
}
.console-wrd-locked p { margin: 0; font-size: 13px; line-height: 1.55; max-width: 52ch; }
.console-wrd-locked-meta { font-size: 11px; opacity: 0.55; }

/* Filter bar */
.console-filters {
    display: grid;
    gap: 14px 24px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    background: rgba(8, 22, 35, 0.40);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    position: sticky;
    top: 70px; /* clear of the topbar */
    z-index: 30;
}
@media (min-width: 1100px) {
    .console-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 2fr) auto; align-items: center; }
}
.console-filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.console-filter-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--bs-muted);
}
.console-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.console-chip-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; min-height: 32px;
    border-radius: 999px;
    border: 1px solid var(--bs-line);
    background: rgba(255,255,255,0.04);
    color: var(--bs-muted);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s var(--bs-elastic);
}
.console-chip-btn em {
    font-style: normal;
    font-size: 10px; font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--bs-text);
}
.console-chip-btn:hover { background: rgba(255,255,255,0.08); color: var(--bs-text); }
.console-chip-btn.is-active {
    background: linear-gradient(135deg, rgba(31,147,208,0.30), rgba(31,147,208,0.16));
    border-color: rgba(31,147,208,0.55);
    color: #fff;
}
.console-chip-btn.is-active em { background: rgba(255,255,255,0.18); color: #fff; }
.console-chip-btn:active { transform: scale(0.96); }
.console-chip-btn:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }

.console-filter-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--bs-muted);
    justify-self: end;
}
.console-link-btn {
    background: none; border: none;
    color: var(--bs-blue-soft);
    font-size: 12px; cursor: pointer; padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.18s;
}
.console-link-btn:hover { background: rgba(31,147,208,0.12); }
.console-link-btn:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }

/* Project card grid */
/* ─── Project cards (bigger, drill-able) ─────────────────────────────── */
.console-project-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    align-items: start;
}

.console-project {
    background: rgba(8, 22, 35, 0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--bs-line);
    border-radius: 18px;
    margin-bottom: 0;
    overflow: hidden;
    transition: transform 0.28s var(--bs-elastic),
                border-color 0.22s ease-out,
                box-shadow 0.28s ease-out,
                background 0.22s ease-out;
}
.console-project:hover {
    transform: translateY(-4px);
    border-color: rgba(31,147,208,0.55);
    box-shadow: 0 18px 38px rgba(0,0,0,0.40), 0 0 0 1px rgba(31,147,208,0.20);
    background: rgba(8, 22, 35, 0.58);
}
.console-project[open] {
    grid-column: 1 / -1;
    transform: none;
    border-color: rgba(31,147,208,0.65);
    background: rgba(8, 22, 35, 0.68);
    box-shadow: 0 22px 56px rgba(0,0,0,0.50);
}

.console-project > summary { all: unset; display: block; cursor: pointer; }
.console-project > summary::-webkit-details-marker { display: none; }
.console-project > summary:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: -2px; }

/* Cover strip — gradient with project initial watermark */
.console-project-cover {
    position: relative;
    height: 92px;
    background:
      radial-gradient(circle at 80% 0%, hsla(var(--cover-hue, 200), 80%, 70%, 0.35), transparent 65%),
      linear-gradient(135deg,
        hsl(var(--cover-hue, 200), 65%, 32%) 0%,
        hsl(calc(var(--cover-hue, 200) + 35), 60%, 22%) 100%);
    overflow: hidden;
    isolation: isolate;
    transition: filter 0.28s ease-out;
}
.console-project:hover .console-project-cover { filter: brightness(1.08); }
.console-project-cover-mark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 56px; font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.12);
    line-height: 1;
    user-select: none;
}
.console-project-cover-pattern {
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(45deg,
        rgba(255,255,255,0.03) 0 14px,
        transparent 14px 28px);
    pointer-events: none;
}
.console-project-cover-status {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 1;
}

/* Card content — bigger spacing, bigger title */
.console-project-card {
    display: flex; flex-direction: column;
    gap: 0;
    min-height: 280px;
    padding: 0; /* cover already has its own; content gets its own padding below */
}
.console-project-content {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 16px 20px 18px;
    flex: 1;
}

.console-project-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.console-project-company {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--bs-muted);
    min-width: 0;
}
.console-project-company img {
    width: 22px; height: 22px; object-fit: contain;
    border-radius: 5px;
    background: rgba(255,255,255,0.06);
    padding: 3px;
}
.console-project-company span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.console-project-name {
    margin: 0 0 2px;
    font-size: 18px; font-weight: 700; line-height: 1.3;
    color: var(--bs-text);
    letter-spacing: -0.012em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.console-project-where {
    display: flex; align-items: center; gap: 6px;
    margin: 0;
    font-size: 12px; color: var(--bs-muted);
}
.console-project-where svg { flex: 0 0 13px; color: var(--bs-blue-soft); opacity: 0.85; }

.console-project-disciplines {
    list-style: none; margin: 2px 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.console-chip-disc {
    font-size: 10px;
    padding: 3px 9px;
    background: rgba(31,147,208,0.18);
    color: var(--bs-blue-soft);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* Asset counts strip */
.console-project-stats {
    list-style: none; margin: 6px 0 4px; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.console-project-stats li {
    display: flex; flex-direction: column; gap: 0;
    text-align: center;
    opacity: 0.45;
    transition: opacity 0.18s;
    min-width: 0;
}
.console-project-stats li.has-assets { opacity: 1; }
.console-project-stats-n {
    font-size: 14px; font-weight: 700; line-height: 1.1;
    color: var(--bs-text);
    font-variant-numeric: tabular-nums;
}
.console-project-stats li.has-assets .console-project-stats-n { color: var(--bs-blue-soft); }
.console-project-stats-l {
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer: meta chips + Open CTA */
.console-project-card-foot {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.console-project-foot-meta {
    display: flex; flex-wrap: wrap; gap: 4px;
    min-width: 0; flex: 1;
}

.console-project-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(31,147,208,0.30), rgba(31,147,208,0.10));
    border: 1px solid rgba(31,147,208,0.40);
    color: var(--bs-blue-soft);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    transition: background 0.22s, gap 0.22s var(--bs-elastic), transform 0.22s var(--bs-elastic);
    white-space: nowrap;
    flex: 0 0 auto;
}
.console-project:hover .console-project-cta {
    background: linear-gradient(135deg, rgba(31,147,208,0.55), rgba(31,147,208,0.22));
    color: #fff;
    gap: 10px;
    transform: scale(1.02);
}
.console-project[open] .console-project-cta { display: none; }
.console-project-cta-chevron {
    transition: transform 0.22s var(--bs-elastic);
}
.console-project[open] .console-project-cta-chevron { transform: rotate(90deg); }

/* Expanded body */
.console-project[open] .console-project-card { border-bottom: 1px solid var(--bs-line); }
.console-project[open] .console-project-content { padding-bottom: 14px; }

/* Asset tab count badge */
.console-asset-tab {
    display: inline-flex; align-items: center; gap: 8px;
}
.console-asset-tab-count {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    padding: 1px 6px;
    background: rgba(255,255,255,0.08);
    color: var(--bs-text);
    border-radius: 999px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.console-asset-tab[data-empty="true"] .console-asset-tab-count {
    opacity: 0.45;
}
.console-asset-tab.is-active .console-asset-tab-count {
    background: var(--bs-blue);
    color: #fff;
}

/* Card grid — settings page */
.console-settings-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.console-card {
    background: var(--bs-glass-surface);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    padding: 18px 20px;
    transition: transform 0.22s var(--bs-elastic), border-color 0.18s;
}
.console-card:hover { transform: translateY(-2px); border-color: rgba(31,147,208,0.30); }
.console-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--bs-text); }
.console-card p { margin: 0 0 8px; font-size: 12px; line-height: 1.55; color: var(--bs-muted); }
.console-card-meta { font-size: 11px !important; }
.console-card code {
    background: rgba(255,255,255,0.06);
    padding: 1px 6px; border-radius: 4px;
    font-size: 11px;
    color: var(--bs-text);
}
/* ─── End filter bar + grid ────────────────────────────────────────── */

/* WRD iframe (live server-proxy embed) */
.console-wrd-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
    border-radius: 12px;
    display: block;
}
.console-wrd-stage:has(> .console-wrd-frame) {
    background: #ffffff;
    aspect-ratio: 16 / 10;
}
@media (min-width: 1280px) {
    .console-wrd-stage:has(> .console-wrd-frame) { aspect-ratio: 16 / 9; height: clamp(560px, 60vh, 820px); }
}
@media (max-width: 640px) {
    .console-wrd-stage:has(> .console-wrd-frame) { aspect-ratio: auto; height: 520px; }
}

/* ─── Console split row: WRD widget (left) + 3 stacked tiles (right) ── */
.console-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: clamp(24px, 4vw, 40px);
}
@media (min-width: 1100px) {
    .console-split {
        grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.6fr);
        align-items: stretch;
    }
}

/* When in split-row, the WRD widget shrinks to the left column.
   Override the prior full-width margin-bottom and let the stage scroll
   inside a fixed-aspect-ratio frame. */
.console-split > .console-wrd { margin-bottom: 0; }
.console-split > .console-wrd .console-wrd-stage {
    aspect-ratio: auto;
    height: clamp(520px, 70vh, 820px);
    overflow: hidden;
}
.console-split > .console-wrd .console-wrd-frame {
    width: 100%; height: 100%;
    overflow: auto;
}

/* Side tiles (right column) — stacked vertical cards */
.console-side-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.console-side-tile {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    color: var(--bs-text);
    text-decoration: none;
    background: var(--bs-glass-surface);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    transition: transform 0.22s var(--bs-elastic),
                border-color 0.18s ease-out,
                background 0.18s ease-out;
    flex: 1 1 0; /* equal-height stacking inside flex column */
    min-height: 92px;
}
.console-side-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(31,147,208,0.45);
    background: rgba(8, 22, 35, 0.65);
}
.console-side-tile:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }
.console-side-tile-static { cursor: default; }
.console-side-tile-static:hover { transform: none; border-color: var(--bs-line); background: var(--bs-glass-surface); }

.console-side-tile-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(31,147,208,0.14);
    color: var(--bs-blue-soft);
}
.console-side-tile-body {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.console-side-tile-body strong {
    font-size: 14px; font-weight: 600; color: var(--bs-text);
    letter-spacing: -0.005em;
}
.console-side-tile-body em {
    font-style: normal;
    font-size: 11px;
    color: var(--bs-muted);
    line-height: 1.4;
}
.console-side-tile-arrow {
    color: var(--bs-muted);
    transition: transform 0.18s var(--bs-elastic), color 0.18s;
}
.console-side-tile:hover .console-side-tile-arrow {
    transform: translateX(3px);
    color: var(--bs-blue-soft);
}

@media (max-width: 1099px) {
    .console-side-tiles { flex-direction: row; flex-wrap: wrap; }
    .console-side-tile { flex: 1 1 240px; }
}
@media (max-width: 600px) {
    .console-side-tiles { flex-direction: column; }
    .console-side-tile { flex: 1 1 auto; }
}
/* ─── End split row ───────────────────────────────────────────────── */

/* ─── Add Project card (lives at the end of a project grid) ──────────── */
.console-project-add {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    min-height: 280px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px dashed rgba(31, 147, 208, 0.45);
    border-radius: 18px;
    color: var(--bs-blue-soft);
    cursor: pointer;
    text-align: center;
    transition: transform 0.22s var(--bs-elastic),
                background 0.22s ease-out,
                border-color 0.22s ease-out,
                color 0.22s ease-out;
}
.console-project-add:hover {
    transform: translateY(-3px);
    background: rgba(31, 147, 208, 0.08);
    border-color: var(--bs-blue);
    color: #fff;
}
.console-project-add:focus-visible {
    outline: 2px solid var(--bs-blue); outline-offset: 3px;
}
.console-project-add-mark {
    font-size: 56px; font-weight: 200; line-height: 1; color: var(--bs-blue-soft);
}
.console-project-add-title {
    font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--bs-text);
}
.console-project-add-sub {
    font-size: 12px; color: var(--bs-muted); max-width: 28ch;
}

/* ─── Add Project modal (native <dialog>) ────────────────────────────── */
.console-modal {
    border: none; padding: 0; margin: auto;
    max-width: 540px; width: calc(100% - 32px);
    border-radius: 18px;
    background: rgba(8, 22, 35, 0.95);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    color: var(--bs-text);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--bs-line);
    overflow: hidden;
}
.console-modal::backdrop {
    background: rgba(2, 8, 14, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.console-modal-form { display: flex; flex-direction: column; max-height: 90vh; }
.console-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bs-line);
}
.console-modal-head h2 {
    margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.005em;
}
.console-modal-close {
    background: transparent; border: none; color: var(--bs-muted);
    cursor: pointer; padding: 4px; border-radius: 6px;
    transition: color 0.18s, background 0.18s;
}
.console-modal-close:hover { color: var(--bs-text); background: rgba(255,255,255,0.08); }
.console-modal-close:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }

.console-modal-body {
    padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
}
.console-modal-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--bs-line);
    display: flex; gap: 10px; justify-content: flex-end;
    background: rgba(0, 0, 0, 0.20);
}

.console-modal-error {
    background: rgba(255, 90, 90, 0.10);
    border: 1px solid rgba(255, 90, 90, 0.45);
    color: #ffb8b8;
    font-size: 12px; line-height: 1.45;
    padding: 8px 12px; border-radius: 8px;
}

.console-field { display: flex; flex-direction: column; gap: 4px; }
.console-field-label {
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--bs-muted); font-weight: 600;
}
.console-field-label em { color: var(--bs-blue-soft); font-style: normal; font-weight: 700; }
.console-field input[type=text],
.console-field input[type=number],
.console-field select {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bs-line);
    color: var(--bs-text);
    padding: 8px 12px; border-radius: 8px;
    font-size: 14px; font-family: inherit;
    min-height: 36px;
    transition: border-color 0.18s, background 0.18s;
}
.console-field input:focus,
.console-field select:focus { outline: none; border-color: var(--bs-blue); background: rgba(255,255,255,0.06); }

.console-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .console-field-row { grid-template-columns: 1fr; } }

.console-field-checks { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.console-field-checks .console-field-label { margin-bottom: 4px; }
.console-check {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--bs-line);
    font-size: 13px; cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
.console-check:hover { background: rgba(255,255,255,0.06); }
.console-check input[type=checkbox] { accent-color: var(--bs-blue); }
.console-check:has(input:checked) {
    background: rgba(31,147,208,0.14);
    border-color: rgba(31,147,208,0.55);
}

.console-view-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ─── End add-project ─────────────────────────────────────────────── */

/* ─── Tile resource list (PDFs / OneDrive / external links) ─────────── */
.console-resource-list {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}
.console-resource {
    background: rgba(8, 22, 35, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--bs-line);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.22s var(--bs-elastic),
                border-color 0.18s ease-out,
                background 0.22s ease-out;
}
.console-resource:hover {
    transform: translateY(-2px);
    border-color: rgba(31,147,208,0.55);
    background: rgba(8, 22, 35, 0.7);
}
.console-resource-link {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    color: var(--bs-text);
    text-decoration: none;
    min-height: 76px;
}
.console-resource-link:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: -2px; }
.console-resource-kind {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(31,147,208,0.14);
    color: var(--bs-blue-soft);
}
.console-resource-kind-pdf      { background: rgba(255, 90, 90, 0.16); color: #ffb8b8; }
.console-resource-kind-onedrive { background: rgba(31, 147, 208, 0.18); color: var(--bs-blue-soft); }
.console-resource-kind-link     { background: rgba(46, 224, 106, 0.16); color: #92e8b3; }
.console-resource-meta {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.console-resource-meta strong {
    font-size: 14px; font-weight: 600; color: var(--bs-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.console-resource-meta em {
    font-style: normal; font-size: 11px; color: var(--bs-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.console-resource-url {
    font-size: 10px; color: var(--bs-muted); opacity: 0.7;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.console-resource-arrow {
    color: var(--bs-muted);
    transition: transform 0.18s var(--bs-elastic), color 0.18s;
}
.console-resource:hover .console-resource-arrow {
    color: var(--bs-blue-soft); transform: translateX(3px);
}
/* ─── End resource list ──────────────────────────────────────────── */

/* ─── Per-tile dashboard widget (rendered inside _TileView) ─────────── */
.console-tile-dashboard {
    background: rgba(8, 22, 35, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--bs-line);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.console-tile-dashboard-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.console-tile-dashboard-head h3 {
    margin: 0 0 4px;
    font-size: 16px; font-weight: 600; letter-spacing: -0.005em;
}
.console-tile-dashboard-sub {
    margin: 0; font-size: 12px; color: var(--bs-muted);
}
.console-tile-dashboard-sub code {
    background: rgba(255,255,255,0.06);
    padding: 2px 6px; border-radius: 4px;
    font-size: 11px;
    overflow-wrap: anywhere;
}
.console-tile-dashboard-stage {
    margin: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--bs-line);
}
@media (min-width: 1280px) {
    .console-tile-dashboard-stage { aspect-ratio: 16 / 9; height: clamp(480px, 60vh, 720px); }
}
@media (max-width: 640px) {
    .console-tile-dashboard-stage { aspect-ratio: auto; height: 420px; }
}
.console-tile-dashboard-frame {
    width: 100%; height: 100%;
    border: 0;
    display: block;
}

/* ── Two-column body: dashboard LEFT, resources RIGHT ───────────────── */
.console-tile-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
@media (min-width: 1100px) {
    .console-tile-body {
        grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.6fr);
    }
}

/* When the body lives inside the split, the dashboard widget loses its own
   margin so it sits flush with the resources aside. */
.console-tile-body > .console-tile-dashboard { margin-bottom: 0; }

/* Empty dashboard variant: slim glass panel that fits the left column
   alongside the resources aside (no longer a big stacking block) */
.console-tile-dashboard-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    text-align: center;
    min-height: clamp(280px, 38vh, 420px);
    border-style: dashed;
    border-color: rgba(31, 147, 208, 0.30);
    background: rgba(31, 147, 208, 0.03);
    color: var(--bs-muted);
}
.console-tile-dashboard-empty h3 {
    margin: 0; font-size: 15px; font-weight: 600; color: var(--bs-text);
}
.console-tile-dashboard-empty p {
    margin: 0; font-size: 12px; max-width: 42ch;
}
.console-tile-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(31, 147, 208, 0.08);
    color: var(--bs-blue-soft);
    margin-bottom: 6px;
}

/* Resources aside (right column) */
.console-tile-resources {
    background: rgba(8, 22, 35, 0.45);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--bs-line);
    border-radius: 16px;
    padding: 14px 16px;
    min-width: 0;
    align-self: stretch;
}
.console-tile-resources-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin: 2px 4px 12px;
}
.console-tile-resources-head h3 {
    margin: 0; font-size: 13px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--bs-muted);
}
.console-tile-resources-count {
    font-size: 11px; font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    color: var(--bs-text);
    padding: 2px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.console-tile-resources-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 30px 14px;
    color: var(--bs-muted);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
}
.console-tile-resources-empty p {
    margin: 0; font-size: 12px;
}
.console-tile-resources-empty .console-tile-resources-hint {
    font-size: 11px; opacity: 0.78; max-width: 30ch; line-height: 1.5;
}
/* Inside the narrower right column, resource cards stack one per row. */
.console-tile-resources .console-resource-list {
    grid-template-columns: 1fr;
}

/* ─── Drag-and-drop marquee reorder ─────────────────────────────────── */
.console-marquee [role="tab"][draggable="true"] { cursor: grab; }
.console-marquee [role="tab"].is-dragging {
    opacity: 0.55;
    cursor: grabbing;
    transform: scale(0.97) rotate(-1deg);
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}
.console-marquee [role="tab"].is-drop-target {
    box-shadow: -3px 0 0 0 var(--bs-blue), 3px 0 0 0 var(--bs-blue);
}
/* ─── End dashboard + drag ──────────────────────────────────────── */

/* ─── C2-Prod launchpad card (lives between header and portfolio) ─────── */
.console-launchpad {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    margin-bottom: clamp(20px, 3vw, 32px);
    background:
      radial-gradient(circle at 0% 0%, rgba(31,147,208,0.18), transparent 55%),
      linear-gradient(135deg, rgba(8,22,35,0.65) 0%, rgba(13,40,72,0.65) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(31,147,208,0.30);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

.console-launchpad-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 14px;
    background: rgba(31,147,208,0.16);
    color: var(--bs-blue-soft);
    flex: 0 0 64px;
}

.console-launchpad-body {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.console-launchpad-body strong {
    font-size: 16px; font-weight: 700; letter-spacing: -0.005em; color: var(--bs-text);
    margin-bottom: 2px;
}
.console-launchpad-body > span:not(.console-launchpad-status) {
    font-size: 12px; color: var(--bs-muted); line-height: 1.5;
}
.console-launchpad-body code {
    background: rgba(255,255,255,0.06);
    padding: 1px 6px; border-radius: 4px;
    font-size: 11px;
    color: var(--bs-text);
}
.console-launchpad-status {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: 11px; color: var(--bs-muted);
}
.console-launchpad-led {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2ee06a;
    box-shadow: 0 0 0 3px rgba(46,224,106,0.18);
}
.console-launchpad-status em {
    font-style: normal; font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #2ee06a;
}

.console-launchpad-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, var(--bs-blue), #1879ad);
    border: 1px solid rgba(31,147,208,0.50);
    color: #fff; text-decoration: none;
    border-radius: 999px;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 0 6px 22px rgba(31,147,208,0.40);
    transition: transform 0.22s var(--bs-elastic), gap 0.22s var(--bs-elastic),
                background 0.22s, box-shadow 0.22s;
    flex: 0 0 auto;
}
.console-launchpad-cta:hover {
    background: linear-gradient(135deg, #2ba6e4, #1a89c6);
    gap: 12px;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(31,147,208,0.55);
}
.console-launchpad-cta:active { transform: translateY(0) scale(0.98); }
.console-launchpad-cta:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }

@media (max-width: 720px) {
    .console-launchpad {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px;
    }
    .console-launchpad-icon { margin: 0 auto; }
    .console-launchpad-cta  { justify-self: center; }
}

/* ─── Portfolio subheader (sits between launchpad and project grid) ──── */
.console-portfolio-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bs-line);
}
.console-portfolio-head h3 {
    margin: 0 0 4px;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--bs-muted);
}
.console-portfolio-head p {
    margin: 0; font-size: 13px; color: var(--bs-muted); opacity: 0.85;
}
/* ─── End C2-Prod launchpad ───────────────────────────────────────── */