/* Reveali Boardroom V5 — phone skin follows the turquoise / midnight design of
   the Reveali homepage. Only presentation and styling: all dashboard labels,
   categories, example values, and phone mockup information remain unchanged. */

/* Layered devices and the signal environment */
.engine .phone-halo {
  background:radial-gradient(ellipse at 48% 43%,rgba(55,197,218,.31) 0%,rgba(32,114,141,.17) 37%,transparent 70%);
  filter:blur(20px);
}
.engine .realistic-phone {
  background:linear-gradient(143deg,#80c8d5 0%,#123e4c 20%,#04141e 58%,#559bab 100%);
  border-color:#8bcbd5;
  box-shadow:0 30px 82px rgba(0,0,0,.48),0 0 0 1px rgba(173,245,249,.15),0 0 45px rgba(75,202,219,.11),inset 0 0 0 3px #092d3b;
}
.engine .phone-camera{background:#04151e;box-shadow:inset 0 -1px 0 rgba(138,224,233,.12)}
.engine .phone-display {
  color:#e8f8f9;
  background:radial-gradient(ellipse at 75% 18%,rgba(42,133,153,.23),transparent 60%),linear-gradient(163deg,#0e3441 0%,#061b28 72%,#091b25 100%);
  border:1px solid rgba(164,234,242,.11);
}
.engine .app-head {
  border-color:rgba(153,223,234,.21);
  padding-bottom:10px;
}
.engine .app-head span{
  color:#f0fcfb;
  font-size:23px;
  font-weight:700;
}
.engine .app-head span b{color:#a6f3f2}
.engine .app-head>small{
  border:1px solid rgba(139,226,235,.3);
  border-radius:2px;
  background:rgba(150,240,245,.08);
  color:#a0e1e8;
  padding:5px 7px;
}
.engine .sample-member{border-bottom:1px solid rgba(169,234,241,.08);padding-bottom:11px}
.engine .sample-avatar{background:#174b5a;color:#a8f1f3;border:1px solid rgba(172,243,247,.21)}
.engine .sample-member strong{color:#f2fefe}
.engine .sample-member small{color:#84b8c4}
.engine .sample-member>i{color:#a6f4f3}
.engine .app-card {
  color:#e6f7fa;
  background:linear-gradient(140deg,rgba(19,67,81,.98),rgba(8,38,51,.99));
  border:1px solid rgba(138,217,232,.19);
  border-radius:9px;
  box-shadow:0 8px 18px rgba(0,0,0,.11),inset 0 1px 0 rgba(204,255,255,.035);
}
.engine .app-card>small{color:#9cdae3;letter-spacing:.065em}
.engine .risk-top strong,.engine .phone-stream-card strong{color:#ecfcfd}
.engine .risk-top span{color:#80b4c1}
.engine .risk-dial{color:#f0bf74}
.engine .risk-dial span{color:#d0ad84}
.engine .risk-track {
  height:7px;
  border-radius:3px;
  background:linear-gradient(90deg,#56b9aa 35%,#e0b557 65%,#df7774 100%);
}
.engine .risk-track i{background:#fff5df;box-shadow:0 0 8px rgba(255,243,219,.7)}
.engine .diagnosis-cells>div{
  border-color:rgba(153,229,241,.14);
  background:linear-gradient(145deg,#1d5666,#133a4b);
  color:#e8f8fb;
}
.engine .diagnosis-cells span{color:#a9f7f3}
.engine .diagnosis-cells b{color:#d9f1f5}
.engine .diagnosis-cells small{color:#8cb8c4}
.engine .diagnosis-meta{border-color:rgba(161,228,239,.14);color:#a6cbd3}
.engine .zone-row{gap:4px}
.engine .zone-row span:nth-child(1){background:#b95962;color:#fff9f9}
.engine .zone-row span:nth-child(2){background:#d0aa56;color:#172f3a}
.engine .zone-row span:nth-child(3){background:#69baa0;color:#102c33}
.engine .zone-desc small{color:#afcbd3;font-size:7px;line-height:1.45}
.engine .observed-bars{
  border-color:rgba(163,227,235,.17);
  background:repeating-linear-gradient(0deg,transparent 0,transparent 19px,rgba(135,210,221,.08) 20px);
}
.engine .observed-bars i{border-radius:2px 2px 0 0;box-shadow:0 0 7px rgba(134,229,238,.04)}
.engine .observations p,.engine .insights p{color:#a1c0cb}
.engine .insights strong{color:#d9f8f8}
.engine .app-tabbar{
  background:#0c2c3a;
  border-top:1px solid rgba(159,228,237,.22);
  color:#a8ebf0;
  left:10px;right:10px;bottom:8px;
}
.engine .app-tabbar small{color:#88b9c4}
.engine .phone-callout{
  border-color:rgba(168,241,247,.35);
  background:rgba(8,43,56,.92);
  color:#92c4cd;
  box-shadow:0 9px 28px rgba(0,0,0,.14);
}
.engine .phone-callout b{color:#d2fefe}

/* Rear phone gets the same visual language without changing its login content. */
.engine .phone-secondary{
  background:linear-gradient(145deg,#81bbca,#0b2b39 32%,#04141c 76%,#4c8497);
  border-color:#699dac;
  box-shadow:0 20px 54px rgba(0,0,0,.4),0 0 32px rgba(93,217,233,.09);
}
.engine .phone-secondary .secondary-notch{background:#041720}
.engine .phone-secondary .secondary-interface{
  background:radial-gradient(ellipse at 57% 24%,rgba(65,159,177,.17),transparent 69%),linear-gradient(145deg,#133947,#061e2c);
  color:#e7f8fa;
}
.engine .secondary-brand{color:#e8fcfc;letter-spacing:-.07em}
.engine .secondary-brand sup{color:#8bdfe8}
.engine .secondary-interface p{color:#a7cbd2}
.engine .secondary-interface h4{color:#efffff}
.engine .secondary-field{
  color:#b1cbd4;
  background:rgba(6,30,43,.7);
  border-color:rgba(165,230,239,.2);
  border-radius:5px;
}
.engine .secondary-login{
  color:#072d38;
  background:#9fe7e9;
  box-shadow:0 7px 23px rgba(106,232,243,.16);
  border-radius:4px;
}
.engine .secondary-interface>small{color:#8db1ba}
.engine .phone-disclaimer{background:rgba(5,25,36,.76);color:#9dc0cb}

/* Ambient activity: the mock UI gently draws a data trend while the engine
   is presented; the scrolling screen uses existing content and stays readable. */
@keyframes signalPlot {
  0%,12%{stroke-dashoffset:235;opacity:.4}
  42%,80%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-235;opacity:.4}
}
@keyframes acuityMarker{
  0%,100%{box-shadow:0 0 8px rgba(255,243,219,.4)}
  50%{box-shadow:0 0 13px rgba(255,243,219,.95)}
}
@keyframes phoneAmbient {
  0%,100%{border-color:rgba(138,217,232,.19)}
  50%{border-color:rgba(154,228,238,.3)}
}
.engine .phone-scrolling {animation:none}
@media(prefers-reduced-motion:no-preference) {
  .slide.active.engine .phone-scrolling {animation:scrollDashboard 16s ease-in-out infinite alternate}
  .slide.active.engine .risk-track i {animation:acuityMarker 4s ease-in-out infinite}
  .slide.active.engine .app-card {animation:phoneAmbient 7s ease-in-out infinite}
  .slide.active.engine .app-card:nth-child(2) {animation-delay:-2s}
  .slide.active.engine .app-card:nth-child(3) {animation-delay:-3.5s}
  .slide.active.engine .app-card:nth-child(4) {animation-delay:-5s}
}
@media(prefers-reduced-motion:reduce){
  .engine .phone-scrolling{transform:none!important;animation:none!important}
  .engine .app-card,.engine .risk-track i{animation:none!important}
}