/* Glass Workbench Theme v1
 * Reusable style preset extracted from dashboard visual language.
 * Usage:
 * 1) Add class `theme-glass-workbench` on `body`
 * 2) Wrap content with `.glass-workbench`
 * 3) Use component classes below and keep page-specific layout in local CSS
 */

:root {
  --gw-glass-shell: rgba(245, 251, 255, 0.36);
  --gw-glass-panel: rgba(255, 255, 255, 0.44);
  --gw-glass-line: rgba(255, 255, 255, 0.58);
  --gw-line: rgba(107, 148, 184, 0.14);

  --gw-text: #24476e;
  --gw-text-soft: #7290ae;
  --gw-text-faint: #9db2c8;

  --gw-blue: #1678e6;
  --gw-green: #39ad72;
  --gw-red: #e46f72;

  --gw-radius-xl: 18px;
  --gw-radius-lg: 14px;
  --gw-radius-md: 12px;
  --gw-ease: all 0.28s ease;
}

body.theme-glass-workbench {
  color: var(--gw-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 14% 17%, rgba(224, 245, 255, 0.98), transparent 32%),
    radial-gradient(circle at 74% 58%, rgba(243, 220, 250, 0.72), transparent 33%),
    linear-gradient(135deg, #d7effb 0%, #e6f3fb 42%, #f5e8f0 100%);
}

.gw-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gw-curve {
  position: absolute;
  border-radius: 48% 52% 42% 58%;
  filter: saturate(112%);
}

.gw-curve-blue {
  display: none;
  width: 980px;
  height: 560px;
  left: -310px;
  bottom: -250px;
  transform: rotate(-9deg);
  background: linear-gradient(138deg, rgba(67, 182, 247, 0.68), rgba(79, 142, 242, 0.66) 54%, rgba(78, 106, 220, 0.62));
}

.gw-curve-warm {
  display: none;
  width: 760px;
  height: 470px;
  right: -270px;
  top: -205px;
  transform: rotate(22deg);
  background: linear-gradient(142deg, rgba(255, 212, 143, 0.68), rgba(255, 170, 133, 0.64) 52%, rgba(250, 128, 152, 0.62));
}

.gw-curve-violet {
  display: none;
  width: 600px;
  height: 390px;
  left: 34%;
  bottom: -275px;
  transform: rotate(-6deg);
  background: linear-gradient(120deg, rgba(46, 145, 248, 0.74), rgba(108, 82, 223, 0.72));
}

.glass-workbench {
  position: relative;
  z-index: 1;
  border: 1px solid var(--gw-glass-line);
  border-radius: var(--gw-radius-xl);
  background: var(--gw-glass-shell);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: 0 18px 70px rgba(68, 110, 158, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.54);
  overflow: hidden;
}

.gw-glass-panel {
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: var(--gw-radius-md);
  background: var(--gw-glass-panel);
  backdrop-filter: blur(16px) saturate(125%);
  box-shadow: 0 8px 22px rgba(90, 129, 164, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.gw-title {
  color: #315878;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.gw-subtitle {
  color: #8aa0b4;
  font-size: 14px;
}

.gw-kpi-label {
  color: #8ca4b8;
  font-size: 12px;
  font-weight: 700;
}

.gw-kpi-value {
  color: #315d82;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.07em;
}

.gw-link {
  color: #4385bd;
  text-decoration: none;
  font-weight: 700;
  transition: var(--gw-ease);
}

.gw-link:hover {
  color: #2c6fa9;
}

.gw-card-interactive {
  transition: var(--gw-ease);
}

.gw-card-interactive:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 12px 26px rgba(79, 123, 164, 0.12);
}

.gw-reminder-title {
  color: #58758f;
  font-size: 13px;
  font-weight: 700;
}

.gw-reminder-text {
  color: #7590a7;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1179px) {
  .gw-title {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .gw-title {
    font-size: 18px;
  }

  .gw-subtitle,
  .gw-reminder-text {
    font-size: 12px;
  }
}