:root {
      --bg: #050a15;
      --bg-2: #08111f;
      --card: rgba(17, 34, 64, 0.9);
      --card-2: rgba(10, 25, 47, 0.88);
      --line: rgba(0, 209, 255, 0.16);
      --line-2: rgba(255, 255, 255, 0.08);
      --text: #e6f1ff;
      --sub: #c8d7f3;
      --muted: rgba(230, 241, 255, 0.62);
      --neon: #00d1ff;
      --neon-2: #55f0ff;
      --success: #38efc3;
      --warn: #ffd166;
      --danger: #ff6b7a;
      --critical: #ff4d4d;
      --shadow: 0 20px 60px rgba(0,0,0,0.45);
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 20%, rgba(0,209,255,0.12), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(56,239,195,0.10), transparent 22%),
        linear-gradient(180deg, #06101f 0%, #050a15 50%, #03070f 100%);
      overflow: hidden;
    }

    button, a { -webkit-tap-highlight-color: transparent; }

    #app {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .bg-grid {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.15;
      background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    }

    header.app-header {
      display: none;
    }

    .brand-wrap {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-width: 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--sub);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      backdrop-filter: blur(12px);
    }

    .eyebrow .dot-live {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 0 rgba(56,239,195,0.6);
      animation: pulse 2s infinite;
    }

    h1 {
      margin: 0;
      font-size: clamp(22px, 5vw, 34px);
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .header-sub {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.05;
    }

    #scroll-container {
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      display: flex;
      gap: 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-behavior: smooth;
      position: relative;
      z-index: 2;
      margin-top: -2px;
    }
    #scroll-container::-webkit-scrollbar { display: none; }

    #timerList {
      display: flex;
      min-width: 100%;
      height: 100%;
    }

    .card-section {
      width: 100vw;
      min-width: 100vw;
      height: 100%;
      padding: 0 16px calc(30px + var(--safe-bottom));
      display: flex;
      align-items: flex-start;
      justify-content: center;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      position: relative;
    }

    .timer-card {
      width: min(100%, 780px);
      margin: 18px auto auto;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 20px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
      border: 1px solid rgba(255,255,255,0.09);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(0,209,255,0.35) transparent;
      transform: scale(0.96);
      opacity: 0.62;
      transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease, border-color .35s ease;
      isolation: isolate;
    }

    .timer-card::-webkit-scrollbar {
      width: 6px;
    }

    .timer-card::-webkit-scrollbar-thumb {
      background: rgba(0,209,255,0.28);
      border-radius: 999px;
    }

    .card-section.active .timer-card {
      transform: scale(1);
      opacity: 1;
      border-color: rgba(0, 209, 255, 0.28);
      box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,209,255,0.06) inset;
    }

    .timer-card::before {
      content: "";
      position: absolute;
      inset: -30% auto auto -10%;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle, rgba(0,209,255,0.16), transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .corner-logo {
      position: absolute;
      right: 18px;
      bottom: 18px;
      width: 72px;
      height: 72px;
      border-radius: 18px;
      background: url('https://www.genspark.ai/api/files/s/sGmY7Yb9') center center / contain no-repeat;
      opacity: 0.14;
      filter: blur(0.6px) drop-shadow(0 0 10px rgba(255,255,255,0.10));
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 0;
    }

    .timer-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: url('https://www.genspark.ai/api/files/s/3I5BArK0') center center / 52% auto no-repeat;
      opacity: 0.06;
      mix-blend-mode: screen;
      filter: blur(5px) drop-shadow(0 0 14px rgba(255,255,255,0.06));
      transform: scale(1.02);
      pointer-events: none;
      z-index: 0;
    }

    .card-nav-stack {
      position: absolute;
      left: 50%;
      bottom: calc(8px + var(--safe-bottom));
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 3;
      opacity: 0;
      transition: opacity .25s ease, transform .25s ease;
      pointer-events: none;
    }

    .card-section.active .card-nav-stack {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .card-nav-hints {
      position: static;
      transform: none;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 3;
      opacity: 1;
      transition: none;
      pointer-events: auto;
    }

    .card-section.active .card-nav-hints {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    .card-nav-hint {
      appearance: none;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(8,17,31,0.46);
      color: rgba(230,241,255,0.94);
      box-shadow: 0 8px 18px rgba(0,0,0,0.20);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
    }

    .card-nav-hint:hover:not(:disabled) {
      transform: translateY(-1px);
      background: rgba(10, 24, 46, 0.72);
      border-color: rgba(85,240,255,0.34);
    }

    .card-nav-hint:active:not(:disabled) {
      transform: translateY(1px) scale(0.97);
    }

    .card-nav-hint:disabled {
      opacity: 0.34;
      cursor: default;
    }

    .card-nav-hint .hint-arrow {
      color: #55f0ff;
      font-size: 13px;
      line-height: 1;
    }

    .card-nav-hint.prev .hint-arrow {
      order: -1;
    }

    .card-nav-hint.next .hint-arrow {
      order: 2;
    }

    .card-top {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 14px;
      position: relative;
      z-index: 1;
    }

    .card-meta {
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .title {
      margin: 0;
      min-width: 0;
      font-size: clamp(24px, 6vw, 40px);
      line-height: 1.06;
      letter-spacing: -0.04em;
      word-break: keep-all;
    }

    .title-text {
      display: inline;
    }

    .title-sound-anchor {
      display: inline-flex;
      vertical-align: middle;
      margin-left: 8px;
      min-height: 28px;
    }

    .title-sound-anchor .sound-btn {
      position: relative;
      right: auto;
      bottom: auto;
      vertical-align: middle;
    }

    .desc {
      margin: 0;
      color: var(--sub);
      font-size: 15px;
      line-height: 1.6;
      word-break: break-word;
      white-space: pre-wrap;
    }

    .card-share-media {
      position: relative;
      z-index: 1;
      width: 100%;
      aspect-ratio: 16 / 9;
      min-height: 180px;
      max-height: min(42vh, 360px);
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
      box-shadow: 0 14px 34px rgba(0,0,0,0.22);
    }

    .card-share-media-link {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      color: inherit;
      text-decoration: none;
      cursor: zoom-in;
    }

    .card-share-media-link::before {
      content: '원본 크게 보기';
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 2;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(8,17,31,0.62);
      border: 1px solid rgba(255,255,255,0.12);
      color: #e6f1ff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      box-shadow: 0 8px 18px rgba(0,0,0,0.22);
      backdrop-filter: blur(10px);
      pointer-events: none;
    }

    .card-share-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      background: rgba(5, 10, 21, 0.18);
    }

    .card-share-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
      pointer-events: none;
    }

    .desc a {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 36px;
      max-width: 100%;
      margin: 5px 8px 5px 0;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(0,209,255,0.34);
      background: linear-gradient(135deg, rgba(0,209,255,0.18), rgba(56,239,195,0.14));
      box-shadow: 0 10px 24px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.05);
      color: #d9fdff;
      text-decoration: none;
      font-weight: 800;
      line-height: 1.25;
      word-break: break-all;
      vertical-align: middle;
      backdrop-filter: blur(10px);
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    }

    .desc a::before {
      content: '↗';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      color: #ffffff;
      font-size: 11px;
      flex: 0 0 auto;
      box-shadow: 0 0 10px rgba(255,255,255,0.08);
    }

    .desc a::after {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 48%);
      opacity: 0.6;
      pointer-events: none;
    }

    .desc a:hover {
      color: #ffffff;
      border-color: rgba(85,240,255,0.42);
      background: linear-gradient(135deg, rgba(0,209,255,0.30), rgba(56,239,195,0.22));
      box-shadow: 0 14px 30px rgba(0,209,255,0.18), 0 10px 22px rgba(0,0,0,0.28);
      transform: translateY(-2px) scale(1.02);
      animation: linkBtnHoverFloat .9s ease-in-out infinite alternate;
    }

    .desc a:hover::before {
      transform: translateX(1px) scale(1.08);
      background: rgba(255,255,255,0.20);
      box-shadow: 0 0 14px rgba(140,245,255,0.18);
    }

    .desc a:hover::after {
      animation: linkBtnShine 1.15s linear infinite;
    }

    .desc a:active {
      transform: translateY(0) scale(0.99);
      box-shadow: 0 6px 14px rgba(0,0,0,0.22);
      animation: none;
    }

    @keyframes linkBtnHoverFloat {
      0% { transform: translateY(-2px) scale(1.02); }
      100% { transform: translateY(-4px) scale(1.03); }
    }

    @keyframes linkBtnShine {
      0% { opacity: 0.35; }
      50% { opacity: 0.85; }
      100% { opacity: 0.45; }
    }

    .badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      backdrop-filter: blur(8px);
      white-space: nowrap;
    }

    .badge.status-upcoming { color: var(--neon-2); }
    .badge.status-today { color: var(--warn); }
    .badge.status-live { color: var(--success); }
    .badge.status-final { color: #ffb3b3; }
    .badge.status-final10 { color: #fff; background: rgba(255,77,77,0.18); border-color: rgba(255,77,77,0.45); }
    .badge.status-closed {
      color: #fff;
      background: rgba(255,77,77,0.18);
      border-color: rgba(255,77,77,0.45);
      box-shadow: 0 0 12px rgba(255,77,77,0.12);
    }

    .countdown-wrap {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .countdown-sound-anchor {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .countdown-sound-anchor .sound-btn {
      pointer-events: auto;
    }

    .unit {
      min-width: 0;
      border-radius: var(--radius-lg);
      padding: 16px 12px 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border: 1px solid var(--line-2);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .unit-value {
      display: block;
      font-family: "SFMono-Regular", "Roboto Mono", "JetBrains Mono", "Courier New", monospace;
      font-size: clamp(34px, 8.5vw, 60px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 10px rgba(0,209,255,0.20), 0 4px 14px rgba(0,0,0,0.24);
      transition: transform .22s ease, opacity .22s ease, color .22s ease;
      will-change: transform, opacity;
    }

    .unit.flip .unit-value {
      transform: translateY(-4px) scale(1.05);
    }

    .unit-label {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .countdown-caption {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 0 2px;
      color: var(--muted);
      font-size: 13px;
      position: relative;
      z-index: 1;
    }

    .countdown-remaining {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      min-height: 24px;
    }

    body.admin-mode .countdown-wrap,
    body.admin-mode .countdown-remaining,
    body.admin-mode .progress-shell,
    body.user-countdown-hidden:not(.admin-mode) .countdown-wrap,
    body.user-countdown-hidden:not(.admin-mode) .countdown-remaining,
    body.user-countdown-hidden:not(.admin-mode) .progress-shell,
    .card-section.countdown-hidden .countdown-wrap,
    .card-section.countdown-hidden .countdown-remaining,
    .card-section.countdown-hidden .progress-shell {
      display: none !important;
    }

    body.admin-mode .countdown-caption,
    body.user-countdown-hidden:not(.admin-mode) .countdown-caption,
    .card-section.countdown-hidden .countdown-caption {
      justify-content: flex-start;
      align-items: flex-start;
    }

    .remaining-close {
      color: #ff4d4d;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: 0 0 10px rgba(255,77,77,0.26);
    }

    .time-meta {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .time-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .label-mini {
      font-size: 11px;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--sub);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .progress-shell {
      position: relative;
      z-index: 1;
      border-radius: 999px;
      height: 14px;
      overflow: hidden;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 4px rgba(0,0,0,0.24);
    }

    .progress-bar {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, #00d1ff, #38efc3, #8bffb6);
      border-radius: inherit;
      transition: width .24s linear, filter .24s ease;
      box-shadow: 0 0 12px rgba(0,209,255,0.44);
    }

    .progress-text {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #04111d;
      text-shadow: 0 1px 1px rgba(255,255,255,0.2);
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .card-actions {
      position: static;
      z-index: 1;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: max-content;
    }

    .action-btn, .sound-btn, .close-btn {
      appearance: none;
      border: 0;
      text-decoration: none;
      cursor: pointer;
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.01em;
      transition: transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
      will-change: transform;
    }

    .action-btn:hover, .sound-btn:hover, .close-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
    }

    .action-btn:active, .sound-btn:active, .close-btn:active {
      transform: translateY(1px) scale(0.94);
      filter: brightness(0.98);
      animation: buttonPressPulse .18s ease-out;
    }

    .action-btn {
      flex: 0 0 auto;
      min-width: 40px;
      height: 24px;
      padding: 0 7px;
      font-size: 10px;
      border-radius: 9px;
      color: var(--text);
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      backdrop-filter: blur(8px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    }

    .action-btn.primary {
      background: linear-gradient(135deg, rgba(0,209,255,0.20), rgba(56,239,195,0.16));
      border-color: rgba(0,209,255,0.34);
    }

    @keyframes buttonPressPulse {
      0% {
        transform: translateY(-1px) scale(1);
      }
      55% {
        transform: translateY(1px) scale(0.92);
      }
      100% {
        transform: translateY(0) scale(0.97);
      }
    }

    .bottom-nav {
      position: fixed;
      right: 10px;
      bottom: calc(8px + var(--safe-bottom));
      z-index: 5;
      padding: 0;
      background: transparent;
      border: 0;
      backdrop-filter: none;
    }

    .bottom-inner {
      width: auto;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0;
      justify-content: flex-end;
    }

    .dots {
      display: none;
    }
    .dots::-webkit-scrollbar { display: none; }

    .dot {
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.22);
      border: 0;
      padding: 0;
      cursor: pointer;
      position: relative;
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease, width .18s ease;
    }

    .dot.active {
      width: 22px;
      border-radius: 999px;
      background: linear-gradient(90deg, #00d1ff, #38efc3);
      box-shadow: 0 0 12px rgba(0,209,255,0.30);
    }

    .bottom-actions {
      display: block;
      flex: 0 0 auto;
      white-space: nowrap;
      padding: 0;
      background: transparent;
      border: 0;
    }

    .sound-btn {
      position: relative;
      z-index: 6;
      color: rgba(230,241,255,0.94);
      background: rgba(8,17,31,0.18);
      border: 0;
      box-shadow: 0 8px 18px rgba(0,0,0,0.28);
      white-space: nowrap;
      min-width: 28px;
      width: 28px;
      height: 28px;
      padding: 0;
      font-size: 13px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      backdrop-filter: blur(8px);
    }

    .sound-btn.docked {
      position: fixed;
      right: 10px;
      bottom: calc(42px + var(--safe-bottom));
      z-index: 6;
    }

    .sound-btn.on {
      background: rgba(0,209,255,0.14);
      box-shadow: 0 8px 18px rgba(0,209,255,0.18);
    }

    .close-btn {
      position: fixed;
      right: 10px;
      bottom: calc(8px + var(--safe-bottom));
      z-index: 6;
      color: rgba(230,241,255,0.96);
      background: rgba(8,17,31,0.18);
      border: 0;
      box-shadow: 0 8px 18px rgba(0,0,0,0.28);
      white-space: nowrap;
      min-width: 56px;
      height: 28px;
      padding: 0 8px;
      font-size: 10px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      backdrop-filter: blur(8px);
    }

    #toast {
      position: fixed;
      left: 50%;
      bottom: calc(52px + var(--safe-bottom));
      transform: translate(-50%, 14px) scale(0.98);
      min-width: 220px;
      max-width: min(90vw, 560px);
      padding: 13px 18px;
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
        linear-gradient(135deg, rgba(0,209,255,0.18), rgba(56,239,195,0.12) 55%, rgba(8,17,31,0.92));
      color: #eaffff;
      border: 1px solid rgba(0,209,255,0.28);
      box-shadow:
        0 14px 34px rgba(0,0,0,0.28),
        0 8px 20px rgba(0,209,255,0.10),
        inset 0 1px 0 rgba(255,255,255,0.10);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
      z-index: 6;
      text-align: center;
      backdrop-filter: blur(18px) saturate(130%);
      -webkit-backdrop-filter: blur(18px) saturate(130%);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: 0.01em;
    }

    #toast.show {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
      box-shadow:
        0 18px 38px rgba(0,0,0,0.32),
        0 10px 24px rgba(0,209,255,0.14),
        inset 0 1px 0 rgba(255,255,255,0.12);
    }

    #toast.error {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        linear-gradient(135deg, rgba(255,77,77,0.24), rgba(255,107,122,0.16) 58%, rgba(24,10,14,0.92));
      border-color: rgba(255, 77, 77, 0.36);
      color: #ffe5e5;
      box-shadow:
        0 14px 34px rgba(0,0,0,0.30),
        0 10px 22px rgba(255,77,77,0.14),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .empty-state {
      width: min(100%, 720px);
      margin: auto;
      text-align: center;
      padding: 32px 24px;
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: var(--shadow);
    }

    .empty-state h2 {
      margin: 0 0 10px;
      font-size: clamp(24px, 6vw, 34px);
    }

    .empty-state p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }

    .warning-10 .timer-card {
      animation: alarmShake .42s ease-in-out infinite alternate;
      box-shadow: 0 24px 80px rgba(0,0,0,0.56), 0 0 0 1px rgba(255,77,77,0.22) inset, 0 0 30px rgba(255,77,77,0.28);
      border-color: rgba(255,77,77,0.44);
    }

    .warning-10 .unit {
      border-color: rgba(255,77,77,0.42);
      box-shadow: inset 0 0 18px rgba(255,77,77,0.10), 0 0 12px rgba(255,77,77,0.06);
    }

    .warning-10 .unit-value,
    .warning-10 .title {
      color: #fff2f2;
      text-shadow: 0 0 14px rgba(255,77,77,0.42);
    }

    .warning-10 .progress-bar {
      background: linear-gradient(90deg, #ff4d4d, #ff7b7b, #ffd166);
      box-shadow: 0 0 18px rgba(255,77,77,0.36);
      filter: saturate(1.15);
    }

    .live-now .timer-card {
      border-color: rgba(56,239,195,0.34);
      box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 26px rgba(56,239,195,0.12);
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(56,239,195,0.60); }
      70% { box-shadow: 0 0 0 10px rgba(56,239,195,0.0); }
      100% { box-shadow: 0 0 0 0 rgba(56,239,195,0.0); }
    }

    @keyframes alarmShake {
      0% { transform: translateX(-1px) rotate(-0.15deg); }
      100% { transform: translateX(1px) rotate(0.15deg); }
    }

    @keyframes nextHintFloat {
      0% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(-3px); }
      100% { transform: translateX(-50%) translateY(0); }
    }

    @media (max-width: 640px) {
      header.app-header {
        padding: calc(0px + var(--safe-top)) 8px 0;
      }
      .header-sub {
        font-size: 9px;
        line-height: 1;
      }
      .countdown-wrap { grid-template-columns: repeat(2, 1fr); }
      .card-section { padding: 0 12px calc(28px + var(--safe-bottom)); }
      .timer-card { padding: 18px; gap: 16px; margin-top: 14px; }
      .bottom-inner {
        flex-direction: row;
        align-items: center;
        gap: 0;
        justify-content: flex-end;
      }
      .bottom-actions {
        width: auto;
        flex: 0 0 auto;
      }
      .sound-btn, .close-btn {
        flex: 0 0 auto;
        text-align: center;
        justify-content: center;
      }
      .sound-btn {
        min-width: 26px;
        width: 26px;
        height: 26px;
        padding: 0;
        font-size: 12px;
      }
      .sound-btn.docked {
        right: 10px;
        bottom: calc(38px + var(--safe-bottom));
      }
      .close-btn {
        bottom: calc(6px + var(--safe-bottom));
        min-width: 52px;
        height: 26px;
        padding: 0 7px;
        font-size: 9px;
      }
      .corner-logo {
        right: 14px;
        bottom: 14px;
        width: 58px;
        height: 58px;
        border-radius: 14px;
      }
      .action-btn {
        min-width: 34px;
        height: 22px;
        padding: 0 6px;
        font-size: 9px;
      }
      .card-share-media {
        min-height: 140px;
        max-height: 240px;
        border-radius: 18px;
      }
      .next-card-hint {
        bottom: calc(6px + var(--safe-bottom));
        padding: 6px 10px;
        font-size: 10px;
        gap: 6px;
      }
      .card-top { flex-direction: column; }
      .title-sound-anchor {
        margin-left: 6px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    }