/* NiuNiuBot · motion and finish. Existing layouts, table scrolling and actions stay native. */
:root {
  --nn-accent: #165dff;
  --nn-radius: 12px;
  --nn-ease: cubic-bezier(.22, 1, .36, 1);
  --nn-line: rgba(50, 81, 138, .13);
  --nn-shadow: 0 3px 14px rgba(22, 45, 90, .035);
}
body[arco-theme="dark"] { --nn-line: rgba(152, 180, 224, .12); --nn-shadow: 0 3px 14px rgba(0, 0, 0, .10); }
.nn-experience body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.nn-experience :is(.page-title, .arco-card-header-title, .arco-modal-title, .arco-drawer-title) { letter-spacing: .01em; overflow-wrap: anywhere; }
.nn-experience .page-title { line-height: 1.4; }
.nn-experience :is(.page-subtitle, .arco-form-item-extra, .arco-alert-content) { line-height: 1.65; }
.nn-experience .arco-statistic-content { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
/* A focused, two-column sign-in scene using the original robot mark. */
body .login-page.nn-login-ready {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 440px);
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: clamp(36px, 7vw, 112px);
  padding: 48px clamp(24px, 5vw, 80px);
  background: radial-gradient(ellipse at 12% 12%, rgba(22, 93, 255, .075), transparent 52%), radial-gradient(ellipse at 94% 94%, rgba(32, 145, 226, .055), transparent 45%), #f6f8fc;
}
body[arco-theme="dark"] .login-page.nn-login-ready { background: radial-gradient(ellipse at 15% 28%, rgba(22, 93, 255, .09), transparent 50%), #14171e; }
.nn-login-story { position: relative; min-width: 0; padding: 36px 44px 44px; border-radius: 28px; background: #101d36; color: #f1f6ff; overflow: hidden; }
.nn-login-story::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(108, 153, 239, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 153, 239, .13) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(#000, transparent 85%); }
body[arco-theme="dark"] .nn-login-story { background: rgba(26, 43, 72, .27); border: 1px solid rgba(127, 167, 238, .12); }
.nn-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; color: #b8cce9; position: relative; }
.nn-brand-dot { width: 6px; height: 6px; border-radius: 50%; background: #73a8ff; box-shadow: 0 0 0 5px rgba(72, 135, 255, .10); flex: 0 0 auto; }
.nn-login-orbit { width: 280px; height: 260px; max-width: 100%; margin: 18px auto 8px; position: relative; display: grid; place-items: center; }
.nn-login-orbit::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 110, 255, .23), transparent 68%); }
.nn-orbit { position: absolute; border: 1px solid rgba(142, 181, 255, .18); border-radius: 50%; pointer-events: none; }
.nn-orbit-outer { width: 90%; aspect-ratio: 1; border-top-color: rgba(119, 164, 255, .5); transform: rotate(-35deg); }
.nn-orbit-inner { width: 71%; aspect-ratio: 1; border-style: dashed; border-color: rgba(143, 183, 255, .21); }
.nn-orbit-axis { position: absolute; width: 104%; height: 35%; border: 1px solid rgba(143, 183, 255, .17); border-radius: 50%; transform: rotate(-30deg); }
.nn-orbit-dot { position: absolute; width: 7px; height: 7px; top: 12%; right: 20%; background: #89b7ff; box-shadow: 0 0 15px rgba(94, 147, 255, .65); border-radius: 50%; }
.nn-robot-core { position: relative; width: 126px; height: 126px; display: grid; place-items: center; border: 1px solid rgba(168, 198, 255, .18); border-radius: 34px; background: linear-gradient(145deg, #233b66, #132848); box-shadow: 0 24px 50px rgba(0, 0, 0, .20), inset 0 1px rgba(220, 234, 255, .08); transform: rotate(-7deg); }
.nn-robot { display: block; width: 78px; height: 78px; object-fit: contain; transform: rotate(7deg); }
.nn-story-title { position: relative; font-size: clamp(30px, 3vw, 40px); font-weight: 650; line-height: 1.5; letter-spacing: .025em; margin: 0 0 12px; }
.nn-story-title > span { color: #82b2ff; }
.nn-story-copy { position: relative; margin: 0; color: #acbed8; font-size: 14px; line-height: 1.8; }
.nn-story-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.nn-story-chips > span { color: #c4d4e9; font-size: 12px; line-height: 1.5; padding: 7px 12px; border: 1px solid rgba(172, 194, 232, .15); border-radius: 7px; background: rgba(126, 159, 212, .045); }
body .nn-login-ready .login-container { width: 100%; min-width: 0; max-width: 440px; }
body .nn-login-ready .login-card { border: 1px solid var(--nn-line); border-radius: 20px; box-shadow: 0 18px 65px -25px rgba(36, 63, 109, .20); background: var(--color-bg-2); }
body .nn-login-ready .login-card > .arco-card-body { padding: clamp(24px, 3vw, 36px); }
body .nn-login-ready .login-header { text-align: left; margin-bottom: 24px; }
body .nn-login-ready .login-logo { height: 38px; max-width: 100%; object-fit: contain; object-position: left center; }
body .nn-login-ready .login-title { font-size: 20px; line-height: 1.45; font-weight: 600; margin: 18px 0 0; overflow-wrap: anywhere; }
body .nn-login-ready .api-status { justify-content: flex-start; border-radius: 8px; font-size: 12px; margin-bottom: 22px; padding: 8px 10px; }
body .nn-login-ready .login-footer { line-height: 1.6; margin-top: 20px; color: var(--color-text-3); overflow-wrap: anywhere; }
body .nn-login-ready .api-info { line-height: 1.7; overflow-wrap: anywhere; }
body .nn-login-ready .contact-info { overflow-wrap: anywhere; }
body .nn-login-ready .arco-radio-group-button { display: flex; box-sizing: border-box; padding: 4px; height: auto; min-height: 40px; border-radius: 9px; }
body .nn-login-ready .arco-radio-button { border-radius: 6px; height: auto; min-height: 32px; display: flex; align-items: center; justify-content: center; white-space: normal; }
body .nn-login-ready .arco-input-wrapper { min-height: 44px; border-radius: 9px; }
body .nn-login-ready .arco-input { min-width: 0; }
body .nn-login-ready .arco-btn-size-large { min-height: 44px; height: auto; padding-top: 10px; padding-bottom: 10px; border-radius: 9px; }
body .nn-login-ready .arco-form-item-label { font-size: 13px; }
/* Application surface: subtle hierarchy, one shared finish across both roles. */
.nn-experience .layout-container { background-color: var(--color-bg-1); }
.nn-experience .content-inner :is(.arco-card, .page-header, .ticket-card, .tcl-card, .tgm-panel, .ops-safety-panel) { border-radius: var(--nn-radius); border-color: var(--nn-line); box-shadow: var(--nn-shadow); }
.nn-experience .page-header { margin-bottom: 20px; }
.nn-experience .arco-card-header { border-bottom-color: var(--nn-line); }
.nn-experience .arco-card-header-title { font-weight: 600; }
.nn-experience .arco-menu-item { border-radius: 7px; }
.nn-experience .arco-menu-selected { box-shadow: inset 3px 0 0 rgb(var(--primary-6)); }
.nn-experience :is(.arco-input-wrapper, .arco-select-view-single, .arco-input-number, .arco-btn) { border-radius: 7px; }
.nn-experience .arco-btn { transition: background-color .18s, border-color .18s, box-shadow .18s, color .18s; }
.nn-experience :is(.arco-input-wrapper, .arco-select-view-single, .arco-textarea-wrapper) { transition: border-color .18s, box-shadow .18s, background-color .18s; }
.nn-experience :is(.arco-input-focus, .arco-textarea-focus) { box-shadow: 0 0 0 3px rgba(22, 93, 255, .10); }
.nn-experience .arco-table-th { font-weight: 550; }
.nn-experience .arco-table-td { transition: background-color .18s; }
.nn-experience .arco-tag { border-radius: 5px; }
.nn-experience :is(.arco-modal, .arco-drawer) { border-radius: 14px; }
.nn-experience .arco-modal-title { line-height: 1.5; }
.nn-experience :is(.arco-statistic-title, .arco-descriptions-item-label) { line-height: 1.5; }
.nn-experience :is(.client-instance-heading, .header-actions) { min-width: 0; }
.nn-experience .client-instance-heading h4 { line-height: 1.5; overflow-wrap: anywhere; }
.nn-experience button:focus-visible, .nn-experience a:focus-visible { outline: 2px solid rgb(var(--primary-6)); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .nn-experience .arco-btn-primary:not(:disabled):hover { box-shadow: 0 4px 12px rgba(22, 93, 255, .18); }
  .nn-experience .arco-card-hoverable:hover { border-color: rgba(22, 93, 255, .35); box-shadow: 0 6px 22px rgba(22, 93, 255, .08); }
  .nn-experience .logo img { transition: transform .3s var(--nn-ease); }
  .nn-experience .logo:hover img { transform: translateY(-2px); }
}
/* A welcome animation, not a loading gate. The authenticated page stays usable. */
.nn-welcome { position: fixed; z-index: 1050; bottom: max(28px, env(safe-area-inset-bottom)); right: max(28px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 12px; width: 260px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 20px 12px 8px; border: 1px solid var(--nn-line); border-radius: 16px; color: var(--color-text-1); background: var(--color-bg-2); box-shadow: 0 12px 38px rgba(16, 42, 88, .16); pointer-events: none; animation: nn-welcome 1.65s both; }
.nn-welcome-orbit { flex: 0 0 76px; height: 76px; position: relative; display: grid; place-items: center; }
.nn-welcome .nn-robot-core { width: 48px; height: 48px; border-radius: 13px; }
.nn-welcome .nn-robot { width: 33px; height: 33px; }
.nn-welcome .nn-orbit { border-color: rgba(22, 93, 255, .22); }
.nn-welcome .nn-orbit-axis { display: none; }
.nn-welcome .nn-orbit-outer { animation: nn-orbit-turn 1.5s var(--nn-ease); }
.nn-welcome .nn-robot-core { animation: nn-robot-arrive .8s var(--nn-ease) both; }
.nn-welcome-caption { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nn-welcome-caption strong { font-size: 15px; font-weight: 600; }
.nn-welcome-caption span { font-size: 12px; line-height: 1.5; color: var(--color-text-3); }
@keyframes nn-welcome { 0% { opacity: 0; transform: translateY(-8px); } 18%, 78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes nn-orbit-turn { from { transform: rotate(-110deg); } to { transform: rotate(250deg); } }
@keyframes nn-robot-arrive { from { opacity: .1; transform: translateY(12px) rotate(-14deg) scale(.82); } to { opacity: 1; transform: translateY(0) rotate(-7deg) scale(1); } }
@keyframes nn-page-in { from { opacity: .65; } to { opacity: 1; } }
@keyframes nn-login-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .nn-login-ready .login-container { animation: nn-login-in .55s var(--nn-ease) both; }
  .nn-login-orbit .nn-robot-core { animation: nn-robot-arrive .9s var(--nn-ease) both; }
  .nn-login-orbit .nn-orbit-outer { animation: nn-orbit-turn 8s var(--nn-ease) 1; }
  .nn-page-enter { animation: nn-page-in .3s ease-out; }
}
@media (max-width: 1023px) {
  body .login-page.nn-login-ready { grid-template-columns: minmax(0, 440px); padding: 32px 24px; gap: 24px; align-content: start; }
  .nn-login-story { padding: 24px; border-radius: 20px; }
  .nn-login-orbit { position: absolute; right: -10px; top: 12px; width: 154px; height: 154px; margin: 0; opacity: .85; }
  .nn-login-orbit .nn-robot-core { width: 66px; height: 66px; border-radius: 20px; }
  .nn-login-orbit .nn-robot { width: 44px; height: 44px; }
  .nn-story-title { font-size: 27px; line-height: 1.45; margin: 22px 120px 12px 0; }
  .nn-story-copy { font-size: 12px; }
  .nn-story-chips { margin-top: 16px; gap: 6px; }
  .nn-story-chips > span { padding: 4px 8px; font-size: 11px; }
  .nn-eyebrow { font-size: 10px; letter-spacing: .10em; }
}
@media (max-width: 600px) {
  body .login-page.nn-login-ready { padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); gap: 18px; }
  .nn-login-story { padding: 20px; border-radius: 16px; }
  .nn-login-orbit { width: 126px; height: 126px; right: 0; top: 23px; }
  .nn-story-title { font-size: 24px; margin-top: 18px; margin-right: 102px; }
  .nn-story-copy { max-width: 100%; line-height: 1.7; }
  .nn-story-chips { display: none; }
  body .nn-login-ready .login-card { border-radius: 16px; }
  body .nn-login-ready .login-card > .arco-card-body { padding: 22px 20px; }
  body .nn-login-ready .login-header { margin-bottom: 20px; }
  body .nn-login-ready .login-title { font-size: 19px; margin-top: 14px; }
  .nn-experience .page-title { font-size: 19px; }
  .nn-experience .page-subtitle { font-size: 12px; }
  .nn-welcome { bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; width: 232px; }
  /* Avoid iOS focus zoom; keep the existing form controls and validation intact. */
  .nn-experience .login-page :is(input, textarea) { font-size: 16px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  body .login-page.nn-login-ready { grid-template-columns: minmax(0, 220px) minmax(0, 420px); align-items: start; gap: 24px; padding: 24px; }
  .nn-login-story { padding: 20px; }
  .nn-login-orbit { position: relative; width: 154px; height: 140px; top: auto; right: auto; margin: 12px auto; }
  .nn-story-title { margin: 10px 0; font-size: 25px; }
  .nn-story-chips { display: none; }
  .nn-welcome { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .nn-experience *, .nn-experience *::before, .nn-experience *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .nn-welcome { display: none !important; }
}
@media print { .nn-login-story, .nn-welcome { display: none !important; } }

@media (max-width: 360px) { .nn-story-title { font-size: 20px; } }
body .nn-login-ready .api-status.status-ok { color: #187348; background: rgba(36, 162, 105, .08); }
body[arco-theme="dark"] .nn-login-ready .api-status.status-ok { color: #7cdbab; background: rgba(36, 162, 105, .10); }