/* spec 3 design tokens -- one accent color, generous whitespace, no
   gradients, no rounded-card excess, no emoji (SVG icons only). Shared by
   the login page and the app shell so both read as one product. */
:root {
  --accent: #4c5fd6;
  --accent-strong: #3a4bc4;
  --ink: #16181d;
  --ink-soft: #52565f;
  --paper: #ffffff;
  --line: #e3e4e8;
  --surface: #f6f6f8;
  --match-exact-ink: #1e6b3a;
  --match-exact-surface: #e3f3e8;
  --match-partial-ink: #9a4a06;
  --match-partial-surface: #fdecd8;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  /* 한국어는 글자 단위가 아니라 어절 단위로 줄바꿈한다("것입니/다" 사고,
     운영 1788px·390px 에서 실측) -- 로그인 카드만이 아니라 앱 전체 텍스트에
     적용한다. overflow-wrap 은 keep-all 이 막지 못하는 긴 영문 토큰(URL 등)
     이 줄을 넘치게 하는 것만 마지막 수단으로 끊는다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: var(--accent); }

button, .btn {
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}

button:disabled, .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button.primary, .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button.primary:hover:not(:disabled), .btn.primary:hover:not(:disabled) { background: var(--accent-strong); }

.playlist-bulk-actions[hidden] { display: none !important; }

.loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation: none; }
}