/* 상태 점 색상 (학생 화면) */
.status-indicator-floating .pulse-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.status-indicator-floating .pulse-dot.green {
  background: #28a745;
  box-shadow: 0 0 2.6px rgb(40 167 69 / 70%);
}

.status-indicator-floating .pulse-dot.yellow {
  background: #ffb300;
  box-shadow: 0 0 2.6px rgb(255 179 0 / 70%);
}

.status-indicator-floating .pulse-dot.gray {
  background: #9e9e9e;
  box-shadow: none;
}

.status-indicator-floating .pulse-dot.red {
  background: #e53935;
  box-shadow: 0 0 2.6px rgb(229 57 53 / 70%);
}

.status-indicator-floating .status-text {
  font-weight: 600;
  font-size: 0.65rem;
}

/* Utilities - token-based helpers mapped to variables.css */

/* Surfaces */
.u-bg-surface {
  background: var(--bg-card, rgb(44 47 72 / 80%));
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%));
  border-radius: var(--border-radius, 20px);
  box-shadow:
    var(--shadow-light, 8px 8px 16px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -8px -8px 16px rgb(255 255 255 / 10%));
}

.u-bg-tint {
  background:
    linear-gradient(
      0deg,
      rgb(139 156 247 / 6%),
      rgb(139 156 247 / 6%)
    );
  border: 1px solid rgb(139 156 247 / 18%);
  border-radius: var(--border-radius-small, 10px);
}

.u-bg-gradient {
  background:
    var(
      --gradient-bg,
      linear-gradient(
        135deg,
        var(--bg-primary),
        var(--bg-secondary),
        var(--bg-tertiary)
      )
    );
}

/* Text */
.u-text-primary {
  color: var(--text-primary, #e0e0e0);
}

.u-text-secondary {
  color: var(--text-secondary, #c1c3e0);
}

.u-text-muted {
  color: var(--text-muted, #b0b0b0);
}

/* Borders */
.u-border-brand {
  border: 1px solid rgb(139 156 247 / 25%);
}

.u-border-light {
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%));
}

/* Buttons */
.u-btn-brand {
  background:
    var(
      --gradient-button,
      linear-gradient(135deg, #6366f1, #8b5cf6)
    );
  color: #fff;
  border: 1px solid rgb(139 156 247 / 30%);
}

/* Progress/Log */
.u-progress-container {
  background: rgb(139 156 247 / 18%);
}

.u-log-surface {
  background:
    linear-gradient(
      0deg,
      rgb(139 156 247 / 6%),
      rgb(139 156 247 / 6%)
    );
  border: 1px solid rgb(139 156 247 / 22%);
}