/* Halaga Dark Motion System
 * Motion language inspired by polished vector/UI animation:
 * soft ambient gradients, precise micro-interactions, and restrained easing.
 * Dark mode only; no financial state is animated or transformed.
 */

body.dark #appView{
  --motion-bg:#091017;
  --motion-surface:#101923;
  --motion-surface-2:#151F2A;
  --motion-surface-3:#1B2732;
  --motion-line:#2B3A46;
  --motion-text:#F1F5F6;
  --motion-muted:#A7B7BE;
  --motion-emerald:#68D8A4;
  --motion-emerald-strong:#3EC68A;
  --motion-violet:#A994FF;
  --motion-teal:#69D9CF;
  --motion-sand:#D7C79B;
  --motion-danger:#FF929C;
  --motion-info:#7EC8FF;
  --motion-shadow:0 22px 52px rgba(0,0,0,.28);
  --motion-ease:cubic-bezier(.22,.8,.24,1);
  background:
    radial-gradient(900px 520px at 78% -5%,rgba(169,148,255,.10),transparent 62%),
    radial-gradient(760px 480px at 12% 0%,rgba(104,216,164,.07),transparent 60%),
    var(--motion-bg);
  color:var(--motion-text);
}

body.dark #appView .shell{
  position:relative;
  isolation:isolate;
  background:transparent;
}

body.dark #appView .shell::before{
  content:"";
  position:fixed;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  opacity:.24;
  background:
    radial-gradient(34% 28% at 18% 22%,rgba(105,217,207,.12),transparent 70%),
    radial-gradient(28% 24% at 82% 16%,rgba(169,148,255,.14),transparent 72%);
  filter:blur(42px);
  transform:translate3d(0,0,0);
  animation:halaga-dark-ambient 20s ease-in-out infinite alternate;
}

body.dark #appView .sidebar,
body.dark #appView .main{position:relative;z-index:1}

body.dark #appView .topbar{
  background:rgba(16,25,35,.88);
  border-bottom-color:rgba(169,148,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  backdrop-filter:blur(16px);
}

body.dark #appView .sidebar{
  background:
    linear-gradient(180deg,rgba(10,17,23,.98),rgba(15,24,31,.98));
  border-right-color:rgba(104,216,164,.12);
}

body.dark #appView .card,
body.dark #appView .settings-card,
body.dark #appView .partner,
body.dark #appView .modal-box,
body.dark #appView .asset-analytics-card,
body.dark #appView .asset-slicer-bar{
  background:linear-gradient(145deg,rgba(21,31,42,.97),rgba(15,24,32,.97));
  border-color:var(--motion-line);
  box-shadow:var(--motion-shadow);
  color:var(--motion-text);
}

body.dark #appView .metric{
  background:
    radial-gradient(120% 120% at 100% 0%,rgba(105,217,207,.07),transparent 55%),
    linear-gradient(145deg,rgba(22,34,44,.98),rgba(15,24,32,.98));
}

body.dark #appView .nav button{
  position:relative;
  overflow:hidden;
  transition:
    background-color .24s var(--motion-ease),
    color .24s var(--motion-ease),
    border-color .24s var(--motion-ease),
    transform .24s var(--motion-ease);
}

body.dark #appView .nav button::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -30%;
  width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-16deg);
  opacity:0;
  transition:transform .38s var(--motion-ease),opacity .25s ease;
}

body.dark #appView .nav button:hover::after{
  opacity:1;
  transform:translateX(420%) skewX(-16deg);
}

body.dark #appView .nav button.active{
  background:
    linear-gradient(135deg,rgba(104,216,164,.12),rgba(169,148,255,.10)),
    #17232D;
  border-color:rgba(169,148,255,.46);
  box-shadow:
    inset 3px 0 0 var(--motion-violet),
    0 8px 22px rgba(0,0,0,.18);
}

body.dark #appView .nav button.active .icon,
body.dark #appView .nav button.active .icon-svg,
body.dark #appView .nav-group.has-active>.nav-group-toggle .nav-chevron{
  color:var(--motion-teal);
}

body.dark #appView .nav-group.has-active>.nav-group-toggle{
  background:rgba(104,216,164,.06);
  border-color:rgba(104,216,164,.10);
}

body.dark #appView .btn{
  transition:
    transform .18s var(--motion-ease),
    box-shadow .18s var(--motion-ease),
    border-color .18s ease,
    background-color .18s ease;
}

body.dark #appView .btn-primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--motion-emerald-strong),#4BD39A);
  box-shadow:0 8px 22px rgba(62,198,138,.18);
}

body.dark #appView .btn-primary::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -40%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  opacity:0;
}

body.dark #appView .btn-primary:hover::after{
  opacity:1;
  animation:halaga-button-sheen .72s var(--motion-ease) 1;
}

body.dark #appView .btn-primary:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(62,198,138,.22);
}

body.dark #appView .btn-secondary{
  background:linear-gradient(145deg,#1D2A35,#18242E);
  color:var(--motion-text)!important;
  border:1px solid #334653;
}

body.dark #appView .btn-secondary:hover:not(:disabled){
  background:#22313D;
  border-color:#4B6270;
  transform:translateY(-1px);
}

body.dark #appView .sync-status{
  position:relative;
  overflow:hidden;
  background:#14212B;
  border-color:#314552;
  color:#C6D2D7;
}

body.dark #appView .sync-status.syncing{
  color:var(--motion-info);
  border-color:rgba(126,200,255,.30);
}

body.dark #appView .sync-status.syncing::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(126,200,255,.12),transparent);
  transform:translateX(-120%);
  animation:halaga-sync-sheen 1.5s ease-in-out infinite;
}

body.dark #appView input,
body.dark #appView select,
body.dark #appView textarea{
  background:#0F1922!important;
  color:var(--motion-text)!important;
  border-color:#334652!important;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}

body.dark #appView input:focus,
body.dark #appView select:focus,
body.dark #appView textarea:focus{
  border-color:rgba(105,217,207,.68)!important;
  box-shadow:0 0 0 3px rgba(105,217,207,.10),0 8px 22px rgba(0,0,0,.18);
}

body.dark #appView .table th{
  background:#131F29!important;
  color:#DCE6E9!important;
  border-color:#2F414D!important;
}

body.dark #appView .table td{
  background:#101A23!important;
  color:#E7EEF0!important;
  border-color:#283944!important;
}

body.dark #appView .table tbody tr{
  transition:background-color .16s ease;
}

body.dark #appView .table tbody tr:hover{
  background:rgba(105,217,207,.045);
}

body.dark #appView .modal-box{
  animation:halaga-modal-in .28s var(--motion-ease);
}

body.dark #appView .section.active{
  animation:halaga-section-in-dark .28s var(--motion-ease);
}

body.dark #appView .premium-badge,
body.dark #appView .tool-chip{
  border-color:rgba(169,148,255,.18);
  background:rgba(169,148,255,.08);
}

body.dark #appView .settings-toggle-row .switch{
  background:#24333E;
  box-shadow:inset 0 0 0 1px #38505D;
}

body.dark #appView .settings-toggle-row.is-on .switch,
body.dark #appView #themeToggle:checked + .switch{
  background:linear-gradient(135deg,var(--motion-violet),var(--motion-teal));
  box-shadow:0 0 0 2px rgba(169,148,255,.14),0 8px 20px rgba(105,217,207,.10);
}

body.dark #appView .settings-toggle-row.is-on .switch::after,
body.dark #appView #themeToggle:checked + .switch::after{
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}

body.dark #appView #themePreferenceStatus{
  color:var(--motion-muted);
  display:block;
  margin-top:7px;
  font-size:11px;
}

body.dark #authView.auth{
  color:var(--motion-text);
  background:
    radial-gradient(680px 420px at 14% 8%,rgba(105,217,207,.11),transparent 65%),
    radial-gradient(600px 380px at 88% 12%,rgba(169,148,255,.12),transparent 68%),
    #091017;
}

body.dark #authView .auth-card{
  background:linear-gradient(145deg,#131E28,#0F1820);
  color:var(--motion-text);
  border:1px solid #2A3D49;
  box-shadow:0 30px 90px rgba(0,0,0,.36);
  animation:halaga-modal-in .32s var(--motion-ease);
}

body.dark #authView .auth-card .tabs{
  background:#101923;
  border:1px solid #263945;
}

body.dark #authView .auth-card .tabs button.active{
  background:#1B2935;
  color:#F3F7F8;
  box-shadow:0 6px 18px rgba(0,0,0,.20);
}

body.dark #authView .auth-card .field input,
body.dark #authView .auth-card .field select,
body.dark #authView .auth-card .field textarea{
  background:#0D171F!important;
  color:#F0F5F6!important;
  border-color:#334652!important;
}

@keyframes halaga-dark-ambient{
  from{transform:translate3d(-1.2%,0,0) scale(1)}
  to{transform:translate3d(1.4%,-1%,0) scale(1.03)}
}

@keyframes halaga-button-sheen{
  from{transform:translateX(0) skewX(-18deg)}
  to{transform:translateX(360%) skewX(-18deg)}
}

@keyframes halaga-sync-sheen{
  0%,25%{transform:translateX(-120%)}
  60%,100%{transform:translateX(120%)}
}

@keyframes halaga-modal-in{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}
}

@keyframes halaga-section-in-dark{
  from{opacity:.80;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

@media(max-width:700px){
  body.dark #appView .shell::before{opacity:.18;filter:blur(34px)}
  body.dark #appView .card,
  body.dark #appView .settings-card,
  body.dark #appView .partner{
    box-shadow:0 16px 34px rgba(0,0,0,.22);
  }
}

@media(prefers-reduced-motion:reduce){
  body.dark #appView .shell::before,
  body.dark #appView .btn-primary:hover::after,
  body.dark #appView .sync-status.syncing::after,
  body.dark #appView .modal-box,
  body.dark #appView .section.active,
  body.dark #authView .auth-card{
    animation:none!important;
  }
  body.dark #appView .nav button,
  body.dark #appView .btn,
  body.dark #appView input,
  body.dark #appView select,
  body.dark #appView textarea{
    transition:none!important;
  }
}