/* Astikan Home UX Lab visual refinement v2
   UX structure stays unchanged. This layer only improves hierarchy, spacing,
   widget grammar and brand expression for live review. */

.uxlab-root.uxlab-root {
  --ux-navy:#041a3d;
  --ux-navy2:#072654;
  --ux-blue:#144d91;
  --ux-blue-bright:#2a78cc;
  --ux-sky:#eef7ff;
  --ux-sky-2:#f7fbff;
  --ux-mint:#49cbbd;
  --ux-violet:#8c66ff;
  --ux-gold:#e7af43;
  --ux-text:#0f2548;
  --ux-muted:#687a91;
  --ux-line:#dfe9f3;
  --ux-soft-shadow:0 18px 52px rgba(7,38,84,.08);
  --ux-card-shadow:0 14px 40px rgba(7,38,84,.075);
  background:
    radial-gradient(circle at 80% 18%, rgba(140,102,255,.10), transparent 28%),
    radial-gradient(circle at 55% 72%, rgba(73,203,189,.10), transparent 28%),
    linear-gradient(135deg,#f7fbff 0%,#eef7ff 46%,#f8f6ff 100%);
}

/* Lab controls: quieter, more product-like */
.uxlab-root .uxlab-controls {
  padding:36px 30px 40px;
  background:rgba(250,252,255,.86);
  border-right:1px solid rgba(7,38,84,.07);
  box-shadow:18px 0 55px rgba(7,38,84,.035);
}
.uxlab-root .uxlab-mark {
  border-radius:14px;
  background:linear-gradient(145deg,#072654,#144d91);
  box-shadow:0 12px 30px rgba(7,38,84,.22);
}
.uxlab-root .uxlab-brandline h1 {
  font-size:24px;
  letter-spacing:-.045em;
}
.uxlab-root .uxlab-intro {
  max-width:285px;
  margin-top:16px;
  color:#6f8198;
}
.uxlab-root .uxlab-scenario-list { gap:6px; }
.uxlab-root .uxlab-scenario {
  padding:11px 12px;
  border-radius:15px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.uxlab-root .uxlab-scenario:hover { transform:translateX(2px); }
.uxlab-root .uxlab-scenario.is-active {
  background:linear-gradient(135deg,#edf6ff,#f5f8ff);
  border-color:#cbdff3;
  box-shadow:0 8px 24px rgba(20,77,145,.06);
}
.uxlab-root .uxlab-segmented {
  padding:4px;
  border-radius:14px;
  background:#eef3f8;
  border:0;
}
.uxlab-root .uxlab-segmented button {
  padding:9px 5px;
  border-radius:11px;
}
.uxlab-root .uxlab-segmented button.is-active {
  box-shadow:0 6px 18px rgba(7,38,84,.09);
}
.uxlab-root .uxlab-reset {
  border-color:#d8e4ef;
  box-shadow:0 7px 20px rgba(7,38,84,.04);
}
.uxlab-root .uxlab-principles {
  border-radius:20px;
  background:
    radial-gradient(circle at 95% 8%, rgba(42,122,204,.38), transparent 35%),
    linear-gradient(145deg,#041a3d,#082f66);
  box-shadow:0 20px 44px rgba(4,26,61,.18);
}

/* Stage */
.uxlab-root .uxlab-stage {
  padding:30px 28px 54px;
  justify-content:flex-start;
}
.uxlab-root .uxlab-stage-head {
  width:min(100%,470px);
  margin-bottom:14px;
  padding:0 12px;
}
.uxlab-root .uxlab-stage-head strong {
  border:0;
  background:rgba(255,255,255,.76);
  box-shadow:0 7px 20px rgba(7,38,84,.05);
  backdrop-filter:blur(12px);
}

/* Device: slightly slimmer, less toy-like */
.uxlab-root .uxlab-phone {
  width:min(100%,414px);
  height:min(874px,calc(100vh - 108px));
  min-height:680px;
  border:6px solid #051a3b;
  border-radius:46px;
  background:#f9fbfd;
  box-shadow:
    0 44px 110px rgba(4,26,61,.25),
    0 8px 32px rgba(4,26,61,.10),
    0 0 0 1px rgba(255,255,255,.88) inset;
}
.uxlab-root .uxlab-phone:before {
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  width:92px;
  height:22px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#051a3b;
  z-index:20;
  pointer-events:none;
}
.uxlab-root .uxlab-phone-status {
  height:31px;
  padding:9px 20px 0;
  background:#fff;
  color:#223b5b;
}
.uxlab-root .uxlab-app-header {
  height:58px;
  padding:0 20px;
  border-bottom:0;
  box-shadow:0 1px 0 rgba(4,26,61,.055);
}
.uxlab-root .uxlab-app-logo {
  font-size:20px;
  font-weight:800;
  letter-spacing:-.065em;
  color:#062754;
}
.uxlab-root .uxlab-header-actions button {
  width:35px;
  height:35px;
  border:0;
  background:#f3f7fb;
  color:#173f70;
  transition:transform .16s ease,background .16s ease;
}
.uxlab-root .uxlab-header-actions button:hover {
  transform:translateY(-1px);
  background:#eaf3fb;
}
.uxlab-root .uxlab-scroll {
  padding:26px 20px 108px;
}

/* Orientation: editorial rather than dashboard heading */
.uxlab-root .uxlab-orientation {
  padding:2px 1px 7px;
}
.uxlab-root .uxlab-orientation > p {
  font-size:11px;
  letter-spacing:.01em;
  color:#74869c;
}
.uxlab-root .uxlab-orientation h2 {
  max-width:330px;
  margin-top:6px;
  font-size:30px;
  line-height:1.04;
  letter-spacing:-.058em;
  font-weight:780;
  text-wrap:balance;
}
.uxlab-root .uxlab-degraded {
  margin-top:14px;
  border:0;
  border-left:3px solid #d4a13c;
  border-radius:12px;
  background:#fff9ea;
  padding:10px 12px;
}

/* Primary guidance: one strong editorial object, not another card */
.uxlab-root .uxlab-primary {
  position:relative;
  overflow:hidden;
  margin-top:19px;
  padding:22px 21px 20px;
  border:0;
  border-radius:28px;
  box-shadow:var(--ux-card-shadow);
  isolation:isolate;
}
.uxlab-root .uxlab-primary:before {
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-48px;
  top:-56px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(42,122,204,.16),rgba(42,122,204,0));
  z-index:-1;
}
.uxlab-root .uxlab-primary.tone-health {
  background:linear-gradient(145deg,#ffffff 0%,#f4faff 58%,#edf7ff 100%);
}
.uxlab-root .uxlab-primary.tone-info {
  background:linear-gradient(145deg,#fff 0%,#f7f5ff 100%);
}
.uxlab-root .uxlab-primary.tone-caution {
  background:linear-gradient(145deg,#fff 0%,#fffaf0 100%);
}
.uxlab-root .uxlab-primary.tone-danger {
  background:linear-gradient(145deg,#fff 0%,#fff3f5 100%);
}
.uxlab-root .uxlab-widget-top {
  margin-bottom:13px;
}
.uxlab-root .uxlab-tone-icon {
  width:34px;
  height:34px;
  border-radius:12px;
  background:#eaf4ff;
  box-shadow:inset 0 0 0 1px rgba(20,77,145,.06);
}
.uxlab-root .uxlab-primary h3 {
  max-width:315px;
  font-size:23px;
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:780;
  text-wrap:balance;
}
.uxlab-root .uxlab-primary > p {
  max-width:325px;
  margin-top:9px;
  font-size:11.5px;
  line-height:1.65;
  color:#657890;
}
.uxlab-root .uxlab-primary-cta {
  margin-top:18px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(135deg,#072654,#0b3974);
  box-shadow:0 12px 28px rgba(7,38,84,.20);
  transition:transform .16s ease,box-shadow .16s ease;
}
.uxlab-root .uxlab-primary-cta:hover {
  transform:translateY(-1px);
  box-shadow:0 15px 32px rgba(7,38,84,.24);
}
.uxlab-root .tone-caution .uxlab-primary-cta { background:linear-gradient(135deg,#8b6515,#aa7b20); }
.uxlab-root .tone-danger .uxlab-primary-cta { background:linear-gradient(135deg,#a93543,#c44956); }
.uxlab-root .tone-info .uxlab-primary-cta { background:linear-gradient(135deg,#7452ea,#8c66ff); }
.uxlab-root .uxlab-why {
  margin-top:15px;
  padding-top:13px;
  border-top:1px solid rgba(4,26,61,.075);
  color:#405670;
}
.uxlab-root .uxlab-why-panel {
  padding-top:12px;
}
.uxlab-root .uxlab-why-panel p {
  padding:0 0 0 12px;
  border-left:2px solid #cfe1f2;
  font-size:9.75px;
  line-height:1.52;
}

/* Today becomes a clean journey timeline */
.uxlab-root .uxlab-today {
  margin-top:22px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.uxlab-root .uxlab-section-title {
  padding:0 1px 11px;
}
.uxlab-root .uxlab-section-title h3,
.uxlab-root .uxlab-explore h3 {
  font-size:15px;
  font-weight:780;
}
.uxlab-root .uxlab-action-list {
  position:relative;
  border:0;
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 34px rgba(7,38,84,.055);
  overflow:hidden;
}
.uxlab-root .uxlab-action {
  position:relative;
  min-height:70px;
  padding:13px 15px;
  border-bottom:1px solid #edf2f6;
  background:#fff;
  transition:background .16s ease;
}
.uxlab-root .uxlab-action.is-next {
  background:linear-gradient(90deg,#eef7ff 0%,#f8fbff 72%);
}
.uxlab-root .uxlab-action.is-next:before {
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:99px;
  background:#2a78cc;
}
.uxlab-root .uxlab-action.is-held {
  background:#fffaf1;
}
.uxlab-root .uxlab-action.is-completed {
  opacity:.58;
  background:#fbfcfd;
}
.uxlab-root .uxlab-action-state {
  width:30px;
  height:30px;
  border-radius:50%;
  background:#f1f5f8;
  color:#90a0b3;
}
.uxlab-root .uxlab-action.is-next .uxlab-action-state {
  background:#dceeff;
  color:#175fa4;
}
.uxlab-root .uxlab-action.is-completed .uxlab-action-state {
  background:#e6f7f2;
  color:#16816b;
}
.uxlab-root .uxlab-action.is-held .uxlab-action-state {
  background:#fff2d2;
  color:#9a741f;
}
.uxlab-root .uxlab-action-copy strong {
  font-size:11px;
  font-weight:780;
  letter-spacing:-.01em;
}
.uxlab-root .uxlab-action-copy small {
  margin-top:1px;
  font-size:9.2px;
  line-height:1.45;
}

/* Insights are contextual strips, not more competing cards */
.uxlab-root .uxlab-insight {
  position:relative;
  margin-top:12px;
  padding:15px 3px 15px 1px;
  border:0;
  border-radius:0;
  border-top:1px solid #e7eef5;
  background:transparent;
  box-shadow:none;
  gap:12px;
}
.uxlab-root .uxlab-insight:first-of-type { margin-top:20px; }
.uxlab-root .uxlab-insight-icon {
  width:34px;
  height:34px;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(20,77,145,.045);
}
.uxlab-root .uxlab-insight h3 {
  margin-top:5px;
  font-size:12.5px;
  line-height:1.35;
  letter-spacing:-.012em;
}
.uxlab-root .uxlab-insight p {
  max-width:300px;
  margin-top:5px;
  font-size:9.7px;
  line-height:1.52;
}

/* Explore recedes intentionally */
.uxlab-root .uxlab-explore {
  margin-top:24px;
  padding:15px 1px 4px;
  border-top:1px solid #e5edf5;
}
.uxlab-root .uxlab-explore-grid {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.uxlab-root .uxlab-explore-grid button {
  width:auto;
  min-width:calc(50% - 4px);
  height:41px;
  flex:1 1 44%;
  border:0;
  border-radius:13px;
  background:#f1f6fa;
  color:#3f5570;
  box-shadow:none;
}
.uxlab-root .uxlab-explore-grid button:hover {
  background:#eaf2f8;
}

/* Bottom nav: quiet frosted dock */
.uxlab-root .uxlab-bottom-nav {
  left:14px;
  right:14px;
  bottom:11px;
  height:68px;
  border:1px solid rgba(220,232,243,.88);
  border-radius:22px;
  background:rgba(255,255,255,.89);
  box-shadow:0 14px 38px rgba(4,26,61,.14);
  backdrop-filter:blur(18px);
}
.uxlab-root .uxlab-bottom-nav button {
  color:#8797aa;
}
.uxlab-root .uxlab-bottom-nav button.is-active {
  color:#0d4f8c;
}
.uxlab-root .uxlab-bottom-nav button.is-active svg {
  filter:drop-shadow(0 4px 7px rgba(20,77,145,.18));
}

/* Subtle motion */
.uxlab-root .uxlab-primary,
.uxlab-root .uxlab-action-list,
.uxlab-root .uxlab-insight,
.uxlab-root .uxlab-explore {
  animation:uxlab-enter .34s ease both;
}
@keyframes uxlab-enter {
  from { opacity:.72; transform:translateY(4px); }
  to { opacity:1; transform:translateY(0); }
}

/* Responsive lab framing */
@media (max-width:900px) {
  .uxlab-root.uxlab-root { grid-template-columns:1fr; }
  .uxlab-root .uxlab-controls {
    min-height:auto;
    border-right:0;
    border-bottom:1px solid rgba(7,38,84,.07);
  }
  .uxlab-root .uxlab-stage {
    padding-top:24px;
  }
  .uxlab-root .uxlab-phone {
    height:820px;
    max-height:calc(100vh - 40px);
  }
}
@media (max-width:520px) {
  .uxlab-root .uxlab-controls { padding:28px 20px 30px; }
  .uxlab-root .uxlab-stage { padding:18px 8px 30px; }
  .uxlab-root .uxlab-stage-head { width:100%; padding:0 10px; }
  .uxlab-root .uxlab-phone {
    width:100%;
    height:calc(100vh - 72px);
    min-height:650px;
    border-width:0;
    border-radius:0;
    box-shadow:none;
  }
  .uxlab-root .uxlab-phone:before { display:none; }
  .uxlab-root .uxlab-scroll { padding-left:18px; padding-right:18px; }
}