/* EasyClaw-CN brand — CN orange / green identity (distinct from Kimi/Pix) */
:root {
  --cn-orange: #e07a3a;
  --cn-orange-light: #f0a060;
  --cn-orange-deep: #c45e28;
  --cn-green: #3d9b6a;
  --cn-green-light: #5fd6a6;
  --cn-green-bright: #6fd9ad;
  --cn-orange-rgb: 224, 122, 58;
  --cn-green-rgb: 61, 155, 106;
  --cn-bg0: #0e1210;
  --cn-bg1: #161c18;
  --cn-bg2: #1e2620;
}

/* ── Ops shell (pix-dense + style.css) ── */
body.app-shell.pix-dense {
  --acc: var(--cn-orange-light);
  --acc2: var(--cn-green);
  --acc-rgb: var(--cn-orange-rgb);
  --acc-d: rgba(var(--cn-orange-rgb), 0.12);
  --acc-glow: rgba(var(--cn-orange-rgb), 0.35);
  --ok: var(--cn-green-light);
  --uk-acc: var(--cn-orange);
  --uk-acc-rgb: var(--cn-orange-rgb);
  --uk-ok: var(--cn-green);
  background:
    radial-gradient(1200px 600px at 8% -8%, rgba(var(--cn-orange-rgb), 0.14), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(var(--cn-green-rgb), 0.1), transparent 50%),
    var(--bg);
}

body.app-shell.pix-dense::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(var(--cn-orange-rgb), 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 10%, rgba(var(--cn-green-rgb), 0.05), transparent 55%);
  animation: ec-aurora 18s ease-in-out infinite alternate;
}

@keyframes ec-aurora {
  0% { opacity: 0.7; transform: translate3d(0, 0, 0); }
  100% { opacity: 1; transform: translate3d(2%, 1%, 0); }
}

body.app-shell.pix-dense .workspace,
body.app-shell.pix-dense .top {
  position: relative;
  z-index: 1;
}

body.app-shell.pix-dense .top {
  background: linear-gradient(180deg, var(--cn-bg1) 0%, var(--panel) 100%);
  border-bottom-color: rgba(var(--cn-orange-rgb), 0.22);
  transition: box-shadow 0.3s ease;
}

body.app-shell.pix-dense.shell-ready .top {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

body.app-shell.pix-dense .brand-mark,
body.app-shell.pix-dense .brand .mark {
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(var(--cn-orange-rgb), 0.25);
  animation: brand-glow 4s ease-in-out infinite;
  transition: transform 0.25s ease;
}

body.app-shell.pix-dense .brand-mark:hover,
body.app-shell.pix-dense .brand .mark:hover {
  transform: scale(1.04) rotate(-2deg);
}

@keyframes brand-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(var(--cn-orange-rgb), 0.22); }
  50% { box-shadow: 0 4px 22px rgba(var(--cn-green-rgb), 0.28); }
}

body.app-shell.pix-dense .chip {
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
}
body.app-shell.pix-dense .chip:hover {
  border-color: rgba(var(--cn-orange-rgb), 0.35);
  transform: translateY(-1px);
}
body.app-shell.pix-dense .chip b { color: var(--cn-orange-light); }
body.app-shell.pix-dense .chip.ok b { color: var(--cn-green-light); }
body.app-shell.pix-dense .chip.pulse b {
  animation: chip-tick 0.45s ease;
}
body.app-shell.pix-dense .panel-primary { border-left: 3px solid var(--cn-orange); }
body.app-shell.pix-dense .panel-codes { border-left-color: var(--cn-green); }
body.app-shell.pix-dense .code-card.on {
  border-color: rgba(var(--cn-orange-rgb), 0.65);
  background: rgba(var(--cn-orange-rgb), 0.08);
  box-shadow: inset 3px 0 0 var(--cn-orange);
}
body.app-shell.pix-dense .code-card .cc-code { color: var(--cn-orange-light); }
body.app-shell.pix-dense .tier-pill.on {
  background: rgba(var(--cn-orange-rgb), 0.18);
  border-color: rgba(var(--cn-orange-rgb), 0.55);
  color: var(--cn-orange-light);
  box-shadow: 0 0 12px rgba(var(--cn-orange-rgb), 0.2);
}
body.app-shell.pix-dense .pane-split {
  background: linear-gradient(
    180deg,
    var(--cn-orange) 0%,
    var(--line2) 40%,
    var(--line2) 60%,
    var(--cn-green) 100%
  );
}

/* Ops buttons micro-interactions */
body.app-shell.pix-dense .ui-btn {
  transition: transform 0.12s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
body.app-shell.pix-dense .ui-btn:not(:disabled):not(.is-busy):hover {
  transform: translateY(-1px);
}
body.app-shell.pix-dense .ui-btn.primary:not(:disabled):hover {
  box-shadow: 0 4px 16px rgba(var(--cn-orange-rgb), 0.3);
}
body.app-shell.pix-dense .ui-btn:not(:disabled):active {
  transform: translateY(0);
}

/* Success row flash */
body.app-shell.pix-dense tr.ok-flash td {
  animation: ec-success-row 0.9s ease;
}
@keyframes ec-success-row {
  0% { background: rgba(var(--cn-green-rgb), 0.28); }
  100% { background: transparent; }
}

/* ── Portal + admin shared tokens ── */
body:has(.shell),
body:has(.login-wrap),
body:has(.app) {
  --acc: var(--cn-orange);
  --acc-rgb: var(--cn-orange-rgb);
  --acc-soft: rgba(var(--cn-orange-rgb), 0.12);
  --on-acc: #fff;
  --ok: var(--cn-green);
}

.brand .mark img,
.brand-mark,
.brand .mark {
  display: block;
  border-radius: 12px;
}

.login-box .mark,
.login-wrap .mark {
  filter: drop-shadow(0 4px 12px rgba(var(--cn-orange-rgb), 0.28));
  transition: transform 0.3s ease;
}
.login-box .mark:hover,
.login-wrap .mark:hover {
  transform: scale(1.05);
}

/* Portal brand bar */
.shell .brand h1 {
  background: linear-gradient(120deg, #f5e8dc, var(--cn-orange-light), var(--cn-green-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shell .brand .mark {
  filter: drop-shadow(0 4px 14px rgba(var(--cn-orange-rgb), 0.4));
}

/* Portal aurora override */
.shell ~ .aurora,
body:has(.shell) .aurora {
  background:
    radial-gradient(50% 60% at 25% 30%, rgba(var(--cn-orange-rgb), 0.16), transparent 70%),
    radial-gradient(45% 55% at 75% 40%, rgba(var(--cn-green-rgb), 0.12), transparent 70%);
}

/* Portal primary button */
body:has(.shell) .primary {
  background: linear-gradient(120deg, var(--cn-orange-light), var(--cn-orange));
  color: #fff;
  box-shadow: 0 8px 24px rgba(var(--cn-orange-rgb), 0.32);
}
body:has(.shell) .primary:hover {
  box-shadow: 0 12px 30px rgba(var(--cn-orange-rgb), 0.42);
}

/* Portal celebrate */
.celebrate-title {
  background: linear-gradient(120deg, #f5e8dc, var(--cn-orange-light), var(--cn-green-light)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.celebrate-logo {
  filter: drop-shadow(0 4px 16px rgba(var(--cn-orange-rgb), 0.5)) !important;
}
.celebrate-kicker { color: var(--cn-green-light) !important; }

/* Admin polish */
body:has(.app) .tab.active {
  background: var(--cn-orange);
  border-color: var(--cn-orange);
  box-shadow: 0 6px 16px rgba(var(--cn-orange-rgb), 0.25);
}
body:has(.app) .btn-primary {
  background: var(--cn-orange);
  border-color: var(--cn-orange);
}
body:has(.app) .btn-primary:hover {
  background: var(--cn-orange-deep);
  color: #fff;
}
body:has(.app) .stat-box .v {
  color: var(--cn-orange);
}
body:has(.app) .live-dot {
  background: var(--cn-green);
  box-shadow: 0 0 8px rgba(var(--cn-green-rgb), 0.5);
}

/* ── Entrance animations ── */
@media (prefers-reduced-motion: no-preference) {
  body.app-shell.pix-dense.shell-ready .panel {
    animation: panel-in 0.35s ease both;
  }
  body.app-shell.pix-dense.shell-ready .panel:nth-child(2) { animation-delay: 0.04s; }
  body.app-shell.pix-dense.shell-ready .panel:nth-child(3) { animation-delay: 0.08s; }
  body.app-shell.pix-dense.shell-ready .panel:nth-child(4) { animation-delay: 0.12s; }
  body.app-shell.pix-dense .code-card {
    transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
  }
  body.app-shell.pix-dense .code-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--cn-orange-rgb), 0.45);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
  .chip b.tick {
    animation: chip-tick 0.35s ease;
  }
  body:has(.shell) .card,
  body:has(.shell) .workspace {
    animation: ec-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  body:has(.app) .section {
    animation: panel-in 0.35s ease both;
  }
  body:has(.app) .section:nth-child(2) { animation-delay: 0.05s; }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes ec-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes chip-tick {
  0% { color: var(--cn-green-light); transform: scale(1.08); }
  100% { color: inherit; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell.pix-dense::before,
  .brand-mark, .panel, .code-card, .chip b.tick,
  body:has(.shell) .card, body:has(.shell) .workspace {
    animation: none !important;
  }
  body.app-shell.pix-dense .ui-btn,
  body.app-shell.pix-dense .chip,
  body.app-shell.pix-dense .code-card,
  body.app-shell.pix-dense .tier-pill {
    transition: none !important;
  }
}