@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
  --bg: #f7f8f7;
  --page: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f5f3;
  --text: #151716;
  --muted: #66716c;
  --subtle: #909a95;
  --line: #dde4df;
  --line-strong: #cad5cf;
  --primary: #07c160;
  --primary-2: #10d978;
  --primary-soft: #e6f7ee;
  --primary-soft-2: #f1fbf6;
  --accent: #2d8cff;
  --warning: #fa8c16;
  --error: #f5222d;
  --shadow: 0 24px 70px rgba(20, 36, 27, 0.1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090d0b;
  --page: #0d1110;
  --surface: #121817;
  --surface-2: #18211e;
  --text: #f4f7f5;
  --muted: #aab5af;
  --subtle: #7f8c85;
  --line: #24302b;
  --line-strong: #34423c;
  --primary: #07c160;
  --primary-2: #0ed46e;
  --primary-soft: #0d2a1b;
  --primary-soft-2: #10251a;
  --accent: #2d8cff;
  --warning: #fa8c16;
  --error: #ff4d4f;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(7, 193, 96, 0.11), transparent 30%),
    radial-gradient(circle at 86% 4%, rgba(45, 140, 255, 0.1), transparent 24%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

@layer components {
  .app-window {
    position: relative;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.54),
      inset 0 -1px 0 rgba(128, 128, 128, 0.08),
      var(--shadow);
    background:
      radial-gradient(circle at 16% 4%, rgba(7, 193, 96, 0.12), transparent 28%),
      radial-gradient(circle at 86% 2%, rgba(45, 140, 255, 0.11), transparent 24%),
      radial-gradient(circle at 50% 36%, rgba(7, 193, 96, 0.08), transparent 30%),
      linear-gradient(180deg, color-mix(in srgb, var(--page) 68%, transparent), color-mix(in srgb, var(--page) 82%, transparent) 72%);
  }

  html[data-theme="dark"] .app-window {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04),
      var(--shadow);
  }

  .glass-bar {
    background:
      linear-gradient(10deg, color-mix(in srgb, var(--surface) 44%, transparent), color-mix(in srgb, var(--surface) 22%, transparent));
    backdrop-filter: blur(10px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.36),
      0 10px 28px rgba(20, 36, 27, 0.06);
  }

  .panel {
    @apply rounded-[18px] border border-line bg-surface shadow-panel;
  }

  .engine-panel {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 30%, rgba(7, 193, 96, 0.16), transparent 26%),
      radial-gradient(circle at 35% 12%, rgba(45, 140, 255, 0.08), transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), var(--surface));
  }

  .engine-panel > * {
    position: relative;
    z-index: 1;
  }

  .engine-panel::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 34%, rgba(7, 193, 96, 0.18), transparent 22%),
      radial-gradient(circle at 50% 46%, rgba(7, 193, 96, 0.1), transparent 34%);
    filter: blur(18px);
    pointer-events: none;
  }

  .btn-primary {
    @apply inline-flex h-10 items-center justify-center rounded-full border-0 bg-primary px-5 text-[14px] font-extrabold text-white shadow-[0_10px_28px_rgba(7,193,96,.22)] transition hover:bg-[#05964d];
  }

  .btn-danger {
    @apply inline-flex h-10 items-center justify-center rounded-full border-0 bg-error px-5 text-[14px] font-extrabold text-white shadow-[0_10px_28px_rgba(245,34,45,.22)] transition hover:bg-[#cf1322];
  }

  .btn-secondary {
    @apply inline-flex h-10 items-center justify-center rounded-full border border-line bg-surface px-4 text-[14px] font-bold text-text transition hover:bg-surface2;
  }

  .btn-test {
    @apply inline-flex h-10 items-center justify-center rounded-full border border-[#b8dec9] bg-[#f2faf5] px-4 text-[14px] font-bold text-[#3d7a58] transition hover:bg-[#e8f5ee];
  }

  html[data-theme="dark"] .btn-test {
    @apply border-[#294236] bg-[#101b16] text-[#8fbea3] hover:bg-[#14251d];
  }

  .btn-ghost {
    @apply inline-flex h-9 items-center justify-center rounded-[10px] border-0 bg-transparent px-3 text-[13px] font-bold text-muted transition hover:bg-surface2 hover:text-text;
  }

  .icon-btn {
    @apply grid h-9 w-9 place-items-center rounded-[10px] border-0 bg-transparent text-[12px] font-black text-muted transition hover:bg-transparent hover:text-text active:bg-transparent focus:bg-transparent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
    -webkit-tap-highlight-color: transparent;
  }

  .icon-action {
    @apply grid h-10 w-10 place-items-center rounded-full border border-line bg-surface text-[13px] font-black text-muted shadow-[0_10px_30px_rgba(0,0,0,.04)] transition hover:bg-surface2 hover:text-primary;
  }

  .icon-box,
  .icon-box-sm {
    @apply grid shrink-0 place-items-center rounded-[12px] border border-line bg-surface2 text-[12px] font-black text-muted;
  }

  .icon-box {
    @apply h-10 w-10;
  }

  .icon-box-sm {
    @apply h-7 w-7 rounded-[9px] text-[11px];
  }

  .icon-box-strong {
    @apply border-0 bg-primary text-white shadow-[0_10px_28px_rgba(7,193,96,.24)];
  }

  .icon-active {
    @apply border-primary bg-[var(--primary-soft)] text-primary;
  }

  .badge {
    @apply absolute right-4 top-1 rounded-full bg-error px-1.5 py-0.5 text-[10px] font-black leading-none text-white;
  }

  .status {
    @apply inline-flex h-6 items-center rounded-full px-2.5 text-[11px] font-black;
  }

  .status-success {
    color: var(--primary);
  }

  .status-warning {
    color: var(--warning);
  }

  html[data-theme="dark"] .status-warning {
    color: #ffad4a;
  }

  .status-muted {
    color: var(--muted);
  }

  .terminal {
    background:
      radial-gradient(circle at 12% 0%, rgba(7, 193, 96, 0.08), transparent 30%),
      linear-gradient(145deg, #0b100d, #101814 52%, #090f0c);
    @apply overflow-hidden rounded-[10px] border border-line p-4 shadow-panel;
  }

  .terminal-line-info {
    color: #8ff0b3;
  }

  .terminal-line-warning {
    color: #ffd166;
  }

  .terminal-line-error {
    color: #ff6b7a;
  }

  .list-card {
    @apply flex items-start justify-between gap-3 rounded-[8px] border border-line bg-surface p-3 shadow-panel;
  }

  .tag {
    @apply rounded-full border border-line bg-surface2 px-3 py-1 text-[10px] font-bold text-muted;
  }

  .tag-tone-green {
    @apply border-[#bfe8d1] bg-[#edf9f2] text-[#2f8a57];
  }

  .tag-tone-orange {
    @apply border-[#f3d6a6] bg-[#fff7e8] text-[#9a651b];
  }

  .tag-tone-purple {
    @apply border-[#dfd1f2] bg-[#f7f0ff] text-[#7650a8];
  }

  .skill-type{
    color: var(--warning);
  }

  .skill-state-enabled {
    @apply text-primary;
  }

  .skill-state-disabled {
    @apply text-muted;
  }

  html[data-theme="dark"] .tag-tone-green {
    @apply border-[#244735] bg-[#102119] text-[#8bd6a8];
  }

  html[data-theme="dark"] .tag-tone-orange {
    @apply border-[#4b3720] bg-[#241a0e] text-[#e5ba70];
  }

  html[data-theme="dark"] .tag-tone-purple {
    @apply border-[#3e3153] bg-[#1f182b] text-[#c4a2ef];
  }

  html[data-theme="dark"] .skill-type[data-skill-type="内置"] {
    color: #d2a75d;
  }

  html[data-theme="dark"] .skill-type[data-skill-type="自定义"] {
    color: #c4a2ef;
  }

  .fab {
    @apply fixed bottom-24 right-[max(24px,calc((100vw-750px)/2+24px))] grid h-14 w-14 place-items-center rounded-full bg-primary text-[30px] font-light leading-none text-white shadow-[0_18px_36px_rgba(7,193,96,.28)] transition hover:bg-[#05964d];
  }

  .input-like {
    @apply flex h-[42px] w-full items-center rounded-[11px] border border-lineStrong bg-surface px-3 text-[13px] font-semibold text-text outline-none transition placeholder:text-subtle focus:border-primary disabled:cursor-not-allowed disabled:bg-surface2 disabled:text-muted;
  }

  .editor {
    @apply min-h-[160px] w-full resize-none overflow-y-auto rounded-[8px] border border-lineStrong bg-surface p-2 font-mono text-[13px] leading-6 text-text outline-none transition focus:border-primary disabled:text-muted;
  }

  .mini-switch {
    @apply relative h-7 w-12 shrink-0 rounded-full bg-lineStrong p-[3px] transition;
  }

  .mini-switch span {
    @apply block h-[22px] w-[22px] rounded-full bg-white transition-transform;
  }

  .mini-switch.is-on {
    @apply bg-primary;
  }

  .mini-switch.is-on span {
    @apply translate-x-5;
  }
}

.engine-sphere {
  position: relative;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 12%),
    radial-gradient(circle at 42% 36%, rgba(255, 255, 255, 0.38), transparent 20%),
    radial-gradient(circle at 62% 72%, rgba(0, 0, 0, 0.22), transparent 34%),
    linear-gradient(145deg, #10d978, #07c160 48%, #047a40);
  box-shadow:
    inset -22px -28px 54px rgba(0, 0, 0, 0.24),
    inset 18px 18px 40px rgba(255, 255, 255, 0.18),
    0 34px 80px rgba(7, 193, 96, 0.28);
  animation: floatSphere 4.8s ease-in-out infinite;
}

.engine-sphere::before,
.engine-sphere::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  transform: rotate(-24deg);
}

.engine-sphere::after {
  inset: 42px 18px;
  opacity: 0.68;
  transform: rotate(22deg);
}

@keyframes floatSphere {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -12px, 0) rotate(8deg);
  }
}

@media (max-width: 640px) {
  .engine-sphere {
    width: 154px;
    height: 154px;
  }

  .fab {
    right: 22px;
  }
}