body { font-family: 'Noto Sans KR', sans-serif; }
    .mono { font-family: 'DM Mono', monospace; }
    #webcam-canvas { transform: scaleX(-1); }
    .dot-bg {
      background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    #timer-display {
      color: #c2d9ff;
      text-shadow: 0 0 22px rgba(147,197,253,0.55), 0 0 48px rgba(147,197,253,0.22);
      transition: color 0.5s, text-shadow 0.5s;
    }
    .timer-alert #timer-display {
      color: #ffb8aa;
      text-shadow: 0 0 22px rgba(255,140,110,0.65), 0 0 50px rgba(255,100,80,0.28);
    }
    @keyframes timerAlert {
      0%, 100% { background-color: #161f2e; }
      50%       { background-color: #3b1212; }
    }
    .timer-alert { animation: timerAlert 1s ease-in-out infinite; }
    @keyframes spinGlossy {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .btn-glossy-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      padding: 3px;
      overflow: hidden;
    }
    .btn-glossy-wrap::before {
      content: '';
      position: absolute;
      inset: -80%;
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 55deg,
        rgba(99, 102, 241, 0.0) 55deg,
        rgba(99, 102, 241, 0.85) 80deg,
        rgba(167, 139, 250, 1.0) 100deg,
        rgba(99, 102, 241, 0.85) 120deg,
        rgba(99, 102, 241, 0.0) 145deg,
        transparent 145deg,
        transparent 360deg
      );
      animation: spinGlossy 2.8s linear infinite;
      pointer-events: none;
    }
    /* ── Result Card ── */
    #result-card {
      --accent: 251,191,36;
      --glow-opacity: 0.35;
      --inner-opacity: 0.18;
      width: 340px;
      height: 476px;
      border-radius: 21px;
      flex-shrink: 0;
    }
    .rc-outer {
      width: 100%; height: 100%;
      border-radius: 21px;
      padding: 7px;
      transition: box-shadow .3s;
    }
    .rc-frame {
      width: 100%; height: 100%;
      border-radius: 16px;
      padding: 17px 17px 14px;
      display: flex; flex-direction: column;
      position: relative; overflow: hidden;
    }
    .rc-frame::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 28% 22%,
        rgba(var(--accent), var(--inner-opacity)) 0%, transparent 55%),
        radial-gradient(ellipse at 78% 75%,
        rgba(var(--accent), calc(var(--inner-opacity) * 0.6)) 0%, transparent 50%);
    }
    .rc-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
    .rc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
    .rc-brand { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
      color: rgba(var(--accent), .85); margin-bottom: 2px; }
    .rc-grade { font-size: 34px; font-weight: 900; line-height: 1; margin-bottom: 3px;
      color: rgba(var(--accent), 1);
      text-shadow: 0 0 12px rgba(var(--accent), var(--glow-opacity)); }
    .rc-grade-name { font-size: 12px; font-weight: 700; letter-spacing: .1em;
      color: rgba(var(--accent), .7); text-transform: uppercase; }
    .rc-header-right { text-align: right; }
    .rc-date { font-size: 12px; color: rgba(var(--accent), .5); margin-bottom: 2px; }
    .rc-time { font-size: 13px; font-weight: 700; color: rgba(var(--accent), .75); }
    .rc-art {
      flex: 0 0 170px; border-radius: 10px;
      background: radial-gradient(ellipse at 50% 40%,
        rgba(var(--accent), var(--inner-opacity)) 0%, transparent 65%),
        linear-gradient(160deg, rgba(0,0,0,.8), rgba(0,0,0,.95));
      position: relative; display: flex; align-items: center; justify-content: center;
      margin-bottom: 13px; overflow: hidden;
    }
    .rc-ring-wrap {
      width: 141px; height: 141px;
      position: relative; display: flex; align-items: center; justify-content: center;
    }
    .rc-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .rc-center-symbol {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      opacity: .85; z-index: 2;
    }
    .rc-focus-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
      color: rgba(var(--accent), .45); margin-top: 2px; }
    .rc-ring-legend {
      position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
      display: flex; flex-direction: column; gap: 10px;
    }
    .rc-legend-item { display: flex; align-items: center; gap: 4px; }
    .rc-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
    .rc-legend-label { font-size: 9px; color: rgba(var(--accent), .45); }
    .rc-legend-val { font-size: 10px; font-weight: 700; color: rgba(var(--accent), .85); }
    .rc-stats {
      border-radius: 8px; padding: 10px 12px;
      background: rgba(var(--accent), .07);
      border: 1px solid rgba(var(--accent), .14);
      display: flex; flex-direction: column; gap: 5px;
      margin-bottom: 10px;
    }
    .rc-stat-row { display: flex; justify-content: space-between; align-items: center; }
    .rc-stat-l { font-size: 12px; color: rgba(var(--accent), .45); }
    .rc-stat-r { font-size: 12px; font-weight: 700; color: rgba(var(--accent), .9); }
    .rc-stat-divider { border: none; border-top: 1px solid rgba(var(--accent), .1); margin: 2px 0; }
    .rc-accum {
      border-radius: 7px; padding: 7px 10px;
      background: rgba(var(--accent), .04);
      border: 1px solid rgba(var(--accent), .08);
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 10px;
    }
    .rc-accum-item { text-align: center; }
    .rc-accum > .rc-accum-item:first-child { text-align: left; }
    .rc-accum > .rc-accum-item:last-child  { text-align: right; }
    .rc-accum-val { font-size: 11px; font-weight: 700; color: rgba(var(--accent), .7); }
    .rc-accum-lbl { font-size: 8px; text-transform: uppercase; letter-spacing: .08em;
      color: rgba(var(--accent), .3); margin-bottom: 2px; }
    .rc-accum-div { width: 1px; background: rgba(var(--accent), .1); align-self: stretch; }
    .rc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
    .rc-session-num { font-size: 9px; color: rgba(var(--accent), .7); letter-spacing: .05em; }
    .rc-dots { font-size: 9px; color: rgba(var(--accent), .8); letter-spacing: 2px; }
    .rc-rarity { font-size: 9px; font-weight: 700; color: rgba(var(--accent), .7); letter-spacing: .1em; }
    #screen-result {
      background:
        radial-gradient(ellipse 60% 50% at 50% 50%,
          rgba(29, 78, 216, 0.22) 0%,
          rgba(15, 23, 42, 0.0) 65%),
        rgba(3, 7, 18, 0.93);
    }
    #screen-result-inner {
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }
    .rc-btn-row { display: flex; gap: 10px; width: 340px; }
    .rc-btn {
      flex: 1; padding: 11px 0; border-radius: 10px; font-size: 13px; font-weight: 600;
      letter-spacing: .03em; border: none; cursor: pointer; transition: opacity .15s;
    }
    .rc-btn:hover { opacity: .82; }
    .rc-btn-restart { background: #1f2937; color: #9ca3af; }
    .rc-btn-download { background: linear-gradient(135deg, rgba(var(--accent),.8), rgba(var(--accent),1));
      color: #111; }
    .backup-float {
      animation: slideUp 0.4s ease-out both;
    }
    @keyframes slideUp {
      from { transform: translateY(16px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    /* playlist switcher scrollbar */
    #playlist-switcher::-webkit-scrollbar { height: 10px; }
    #playlist-switcher::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.04);
      border-radius: 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    #playlist-switcher::-webkit-scrollbar-thumb {
      background: linear-gradient(90deg, rgba(79,70,229,0.45), rgba(124,58,237,0.45), rgba(79,70,229,0.45));
      border-radius: 0;
      border-top: 1px solid rgba(139,92,246,0.25);
      box-shadow: 0 0 6px rgba(99,102,241,0.25);
    }
    #playlist-switcher::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(90deg, rgba(99,102,241,0.65), rgba(139,92,246,0.65), rgba(99,102,241,0.65));
      box-shadow: 0 0 10px rgba(99,102,241,0.45);
    }
    /* playlist tooltip */
    .pl-tooltip {
      position: fixed;
      transform: translate(-50%, calc(-100% - 10px));
      background: rgba(10, 14, 28, 0.97);
      border: 1px solid rgba(99,102,241,0.4);
      border-radius: 9px;
      padding: 7px 11px;
      white-space: pre-line;
      max-width: 220px;
      overflow-wrap: break-word;
      font-size: 11px;
      line-height: 1.45;
      color: rgba(255,255,255,0.82);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
      z-index: 9999;
      box-shadow: 0 6px 24px rgba(0,0,0,0.65), inset 0 0 0 0.5px rgba(255,255,255,0.05);
    }
    .pl-tooltip::before {
      content: '';
      position: absolute;
      top: 100%; left: calc(50% + var(--arrow-shift, 0px));
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: rgba(99,102,241,0.5);
    }
    .pl-tooltip::after {
      content: '';
      position: absolute;
      top: calc(100% - 1px); left: calc(50% + var(--arrow-shift, 0px));
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(10, 14, 28, 0.97);
    }
    .pl-tooltip.visible { opacity: 1; }