:root {
  --tool-ink: #243047;
  --tool-muted: #667085;
  --tool-blue: #4fb7e8;
  --tool-green: #5fd6b4;
  --tool-pink: #ef5f86;
  --tool-yellow: #ffd97a;
  --tool-glass: rgba(255, 255, 255, 0.56);
  --tool-glass-strong: rgba(255, 255, 255, 0.76);
  --tool-line: rgba(255, 255, 255, 0.8);
  --tool-soft-line: rgba(119, 204, 224, 0.28);
  --tool-shadow: 0 22px 58px rgba(82, 104, 138, 0.13);
  --tool-radius: 28px;
  --tool-font: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 236, 150, 0.46) 0 12%, transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(159, 225, 249, 0.42) 0 12%, transparent 27%),
    radial-gradient(circle at 76% 78%, rgba(255, 186, 222, 0.36) 0 12%, transparent 29%),
    radial-gradient(circle at 18% 80%, rgba(165, 238, 210, 0.38) 0 13%, transparent 28%),
    linear-gradient(135deg, #f6fbff 0%, #fff9e7 32%, #f7f4ff 66%, #f0fff9 100%);
}

body {
  margin: 0 !important;
  min-height: 100vh;
  padding: 76px 0 52px !important;
  font-family: var(--tool-font) !important;
  color: var(--tool-ink) !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 236, 150, 0.46) 0 12%, transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(159, 225, 249, 0.42) 0 12%, transparent 27%),
    radial-gradient(circle at 76% 78%, rgba(255, 186, 222, 0.36) 0 12%, transparent 29%),
    radial-gradient(circle at 18% 80%, rgba(165, 238, 210, 0.38) 0 13%, transparent 28%),
    linear-gradient(135deg, #f6fbff 0%, #fff9e7 32%, #f7f4ff 66%, #f0fff9 100%) !important;
  background-attachment: fixed !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-x: hidden !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: 0.55;
}

body::before {
  width: 220px;
  height: 220px;
  left: -74px;
  bottom: -76px;
  background: conic-gradient(from 180deg, rgba(255, 217, 122, 0.55), rgba(110, 210, 235, 0.46), rgba(255, 180, 216, 0.52), rgba(255, 217, 122, 0.55));
}

body::after {
  width: 170px;
  height: 170px;
  right: -54px;
  top: 96px;
  background: conic-gradient(from 45deg, rgba(105, 211, 185, 0.32), rgba(112, 191, 238, 0.4), rgba(255, 226, 132, 0.38), rgba(105, 211, 185, 0.32));
}

.background-animation,
.bg-anim,
.floating-elements {
  display: none !important;
}

.workbench-home-link {
  top: 18px !important;
  left: 18px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 999px !important;
  color: #3b5274 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 14px 34px rgba(76, 94, 154, 0.14) !important;
  backdrop-filter: blur(18px) !important;
}

.container,
.app {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, calc(100vw - 36px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 26px !important;
  border: 1px solid var(--tool-line) !important;
  border-radius: var(--tool-radius) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.44)),
    radial-gradient(circle at 88% 12%, rgba(141, 225, 242, 0.26), transparent 34%),
    radial-gradient(circle at 9% 88%, rgba(255, 217, 122, 0.2), transparent 34%) !important;
  box-shadow: var(--tool-shadow) !important;
  backdrop-filter: blur(18px) !important;
  max-height: none !important;
  overflow: visible !important;
  animation: none !important;
}

.container::before,
.app::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: calc(var(--tool-radius) - 8px);
  background-image: radial-gradient(rgba(96, 183, 200, 0.15) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
  opacity: 0.35;
}

h1,
header h1 {
  margin: 0 0 18px !important;
  color: var(--tool-ink) !important;
  text-align: left !important;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.container > h1::before,
header h1::before {
  content: "TOOLS";
  display: block;
  margin-bottom: 8px;
  color: var(--tool-pink);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.14em;
  font-weight: 900;
}

header {
  padding: 0 0 20px !important;
  color: var(--tool-ink) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.72) !important;
  text-align: left !important;
}

header p {
  color: var(--tool-muted) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.panel {
  padding: 20px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.72) !important;
}

.panel:last-child {
  border-bottom: 0 !important;
}

.input-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}

.input-group,
.form-group {
  margin-bottom: 14px !important;
  gap: 7px !important;
}

label,
.form-group label {
  color: #41546f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
}

input[type="number"],
select,
textarea {
  width: 100% !important;
  min-height: 43px !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(148, 195, 218, 0.52) !important;
  border-radius: 15px !important;
  color: var(--tool-ink) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 8px 20px rgba(71, 122, 157, 0.07) !important;
  font-family: var(--tool-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(95, 214, 180, 0.85) !important;
  box-shadow: 0 0 0 4px rgba(95, 214, 180, 0.18), 0 10px 24px rgba(71, 122, 157, 0.1) !important;
  transform: translateY(-1px);
}

.hint,
.footer,
.status-bar {
  color: var(--tool-muted) !important;
}

.flex-inputs,
.btn-group,
.group-btns {
  gap: 12px !important;
}

.type-row {
  padding: 12px !important;
  border: 1px solid rgba(143, 214, 232, 0.28) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.36) !important;
}

.type-row span {
  color: #41546f !important;
  font-weight: 900 !important;
}

.nested-group.active {
  max-height: 360px !important;
}

button,
.btn,
.group-btn {
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--tool-font) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

button:not(.group-btn),
.btn {
  min-height: 43px !important;
  color: white !important;
  background: linear-gradient(135deg, var(--tool-blue), var(--tool-green)) !important;
  box-shadow: 0 14px 28px rgba(71, 183, 207, 0.22) !important;
}

button#optimizeBtn {
  background: linear-gradient(135deg, #ffd36a, #ff9f88) !important;
  box-shadow: 0 14px 28px rgba(255, 172, 94, 0.2) !important;
}

.group-btn {
  min-height: 38px !important;
  color: #456078 !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 8px 18px rgba(71, 122, 157, 0.08) !important;
}

.group-btn.active {
  color: white !important;
  background: linear-gradient(135deg, var(--tool-blue), var(--tool-green)) !important;
}

button:hover,
.btn:hover,
.group-btn:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.03) !important;
}

button:disabled,
.btn:disabled {
  color: rgba(36, 48, 71, 0.42) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  box-shadow: none !important;
}

.preview-area,
.preview-container {
  margin-top: 18px !important;
  min-height: 320px !important;
  padding: 18px !important;
  border: 1px solid rgba(122, 207, 226, 0.36) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(231, 249, 255, 0.72), rgba(255, 251, 234, 0.68)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 14px 32px rgba(82, 104, 138, 0.1) !important;
}

canvas {
  max-width: 100% !important;
  border: 1px solid rgba(148, 195, 218, 0.38) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

.preview-label,
.mode-tag {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.preview-label {
  top: 12px !important;
  left: 14px !important;
  color: #3f7894 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  padding: 5px 10px !important;
}

.mode-tag {
  top: 12px !important;
  right: 14px !important;
  background: rgba(95, 214, 180, 0.85) !important;
}

.status-bar {
  background: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 16px !important;
}

.toast {
  border-radius: 999px !important;
  background: rgba(36, 48, 71, 0.88) !important;
  box-shadow: 0 16px 36px rgba(36, 48, 71, 0.18) !important;
  backdrop-filter: blur(12px) !important;
}

body:has(.app-container) {
  padding: 72px 18px 32px !important;
  align-items: stretch !important;
}

.app-container {
  position: relative !important;
  z-index: 1 !important;
  width: min(1360px, calc(100vw - 36px)) !important;
  height: calc(100vh - 104px) !important;
  margin: auto !important;
  border: 1px solid var(--tool-line) !important;
  border-radius: var(--tool-radius) !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.44)),
    radial-gradient(circle at 88% 12%, rgba(141, 225, 242, 0.26), transparent 34%) !important;
  box-shadow: var(--tool-shadow) !important;
  backdrop-filter: blur(18px) !important;
}

.header {
  padding: 14px 20px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: none !important;
}

.header::after {
  display: none !important;
}

.logo {
  color: var(--tool-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
}

.logo-icon {
  animation: none !important;
}

.sidebar {
  width: 280px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.36)) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.72) !important;
  padding: 14px !important;
}

.sidebar-section {
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: 0 10px 24px rgba(82, 104, 138, 0.08) !important;
}

.sidebar-title {
  color: var(--tool-pink) !important;
}

.file-info span {
  color: #2f91b7 !important;
}

.layer-item {
  color: var(--tool-ink) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

.canvas-area {
  margin: 14px 14px 14px 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 20% 80%, rgba(79, 183, 232, 0.12), transparent 48%),
    radial-gradient(circle at 80% 20%, rgba(95, 214, 180, 0.12), transparent 48%),
    #172033 !important;
  overflow: hidden !important;
}

.canvas-area canvas {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.drop-zone-content {
  border: 1px dashed rgba(255, 255, 255, 0.46) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

.toolbar,
.zoom-indicator {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.13) !important;
}

.toolbar .btn-icon,
.btn-icon {
  color: #466079 !important;
  background: rgba(255, 255, 255, 0.64) !important;
}

.toolbar .btn-icon.active {
  color: white !important;
  background: linear-gradient(135deg, var(--tool-blue), var(--tool-green)) !important;
}

.toggle-switch.active {
  background: linear-gradient(135deg, var(--tool-blue), var(--tool-green)) !important;
}

.color-scheme-btn.active {
  border-color: var(--tool-blue) !important;
  box-shadow: 0 0 0 4px rgba(79, 183, 232, 0.16) !important;
}

@media (max-width: 760px) {
  body {
    padding: 70px 0 34px !important;
  }

  .container,
  .app {
    width: min(100vw - 24px, 1180px) !important;
    padding: 18px !important;
    border-radius: 24px !important;
  }

  h1,
  header h1 {
    font-size: 28px !important;
  }

  .flex-inputs,
  .btn-group {
    flex-direction: column !important;
  }

  body:has(.app-container) {
    padding: 68px 10px 18px !important;
  }

  .app-container {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 86px) !important;
    border-radius: 22px !important;
  }

  .sidebar {
    width: 210px !important;
  }

  .header-actions {
    gap: 6px !important;
  }
}