/* AI interaction layer — exclusive to the alternative system. */
.os-native-loading {
  background: radial-gradient(circle at 50% 44%, #102c38 0, #071720 27%, #eef3f4 28%);
  color: #60747f;
  letter-spacing: .04em;
}
.os-native-loading > span { display: none; }
.os-native-loading p { margin: 22px 0 5px; color: #17333f; font-weight: 800; }
.os-native-loading > small { color: #78909b; font-size: 7px; font-weight: 850; letter-spacing: .2em; }
.ai-core { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.ai-core i { position: absolute; inset: 0; border: 1px solid rgba(70,235,190,.65); border-radius: 50%; box-shadow: 0 0 18px rgba(36,220,167,.2), inset 0 0 18px rgba(36,220,167,.12); animation: core-spin 2.5s linear infinite; }
.ai-core i:nth-child(2) { inset: 12px; border-style: dashed; border-color: #82ccff; animation-direction: reverse; animation-duration: 1.8s; }
.ai-core i:nth-child(3) { inset: 25px; border: 2px solid #baf45c; animation: core-pulse 1.35s ease-in-out infinite; }
.ai-core b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #baf45c; color: #08202b; font: 800 15px Georgia,serif; box-shadow: 0 0 24px rgba(186,244,92,.75); }
.ai-core::before, .ai-core::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #5ce7c0; box-shadow: 0 0 12px #5ce7c0; animation: core-orbit 1.4s linear infinite; }
.ai-core::after { animation-delay: -.7s; }
#os-native-view { animation: view-reveal .42s ease both; }
.native-page-head { position: relative; overflow: hidden; }
.native-page-head::after { content: ""; position: absolute; inset: -120% -45%; background: linear-gradient(100deg,transparent 42%,rgba(145,255,224,.08) 50%,transparent 58%); transform: translateX(-35%); animation: ai-scan 7s ease-in-out infinite; pointer-events: none; }
.native-metric, .native-panel, .native-flow article, .native-account-grid article, .native-timeline article { transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.native-metric { position: relative; overflow: hidden; }
.native-metric::after { content: ""; position: absolute; inset: auto -25% -70% 45%; height: 90px; background: radial-gradient(circle,rgba(34,185,140,.17),transparent 68%); transition: transform .35s ease; }
.native-metric:hover { transform: translateY(-5px); border-color: #9edbc9; box-shadow: 0 18px 35px rgba(14,47,60,.12); }
.native-metric[data-family-mode] { cursor: pointer; }
.native-metric[data-family-mode][aria-pressed="true"] { border-color: #22b98c; box-shadow: 0 0 0 3px rgba(34,185,140,.13), 0 18px 35px rgba(14,47,60,.12); }
.native-metric:hover::after { transform: translate(-30%,-30%) scale(1.35); }
.native-panel:hover { transform: translateY(-3px); border-color: #afd9cd; box-shadow: 0 16px 38px rgba(15,47,60,.1); }
.native-flow article:hover { transform: translateY(-4px); background: #e9f7f2; box-shadow: 0 12px 24px rgba(21,92,72,.1); }
.native-account-grid article:hover { transform: translateY(-6px) rotateX(1deg); box-shadow: 0 22px 45px rgba(4,27,39,.25); }
.native-timeline article:hover { transform: translateX(6px); border-color: #91d9c4; box-shadow: 0 12px 28px rgba(12,63,72,.09); }
.os-domain-card, .os-nav-item, .os-hero-actions button, .native-head-actions a, .native-head-actions button, .os-workspace-bar a, .os-workspace-bar button { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.os-domain-card:hover, .os-hero-actions button:hover, .native-head-actions a:hover, .native-head-actions button:hover, .os-workspace-bar a:hover, .os-workspace-bar button:hover { transform: translateY(-3px); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(18,65,77,.18); }
.os-nav-item:hover { transform: translateX(4px); }
@keyframes core-spin { to { transform: rotate(360deg); } }
@keyframes core-pulse { 0%,100% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes core-orbit { from { transform: rotate(0deg) translateX(48px) rotate(0deg); } to { transform: rotate(360deg) translateX(48px) rotate(-360deg); } }
@keyframes view-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ai-scan { 0%,70% { transform: translateX(-45%); } 90%,100% { transform: translateX(45%); } }
@media (prefers-reduced-motion: reduce) {
  .ai-core i, .ai-core::before, .ai-core::after, .native-page-head::after, #os-native-view { animation: none !important; }
  .native-metric, .native-panel, .native-flow article, .native-account-grid article, .native-timeline article, .os-domain-card, .os-nav-item { transition: none !important; }
}