html, body { height: 100%; }
    body{
      background:
        radial-gradient(1200px 520px at 50% -120px, rgba(77,163,255,0.18), transparent 70%),
        radial-gradient(900px 520px at 10% 0%, rgba(244,215,130,0.10), transparent 65%),
        radial-gradient(900px 520px at 90% 10%, rgba(199,167,84,0.10), transparent 68%),
        #0b0f17;
      overflow-x: hidden;
      font-family: sans-serif;
    }

    /* 로고 폰트 규격 통일 */
    .logo-font { font-size: 1.25rem; font-weight: 900; font-style: italic; tracking-tighter; }

    /* 사이드바 애니메이션 */
    #sidebar { transition: transform 0.3s ease-in-out; z-index: 100; }
    .sidebar-open { transform: translateX(0); }
    .sidebar-closed { transform: translateX(-100%); }

    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

    /* Inputs / Select */
    .ui-input, .ui-select{
      background: rgba(10,15,24,0.78);
      border: 1px solid rgba(255,255,255,0.14);
      outline: none;
      transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease, background .12s ease;
      backdrop-filter: blur(8px);
      color: #e5e7eb;
    }
    .ui-input:focus, .ui-select:focus{
      border-color: rgba(77,163,255,0.55);
      box-shadow: 0 0 0 4px rgba(37,99,235,0.18);
      background: rgba(10,15,24,0.92);
    }

    /* Presets */
    .preset-btn{
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.03);
      transition: transform .08s ease, background .12s ease, border-color .12s ease, color .12s ease;
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 10px 14px;
      font-weight: 900;
      line-height: 1;
    }
    .preset-btn:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.22);
    }
    .preset-btn.is-active{
      background: rgba(37,99,235,0.92);
      border-color: rgba(77,163,255,0.75);
      color: #ffffff;
      box-shadow: 0 12px 24px rgba(37,99,235,0.20);
    }

    /* Calendar */
    .calendar-th{ font-size: 0.95rem; font-weight: 900; padding: 10px 0; }
    .cal-day{
      padding: 10px 0;
      cursor: pointer;
      border-radius: 10px;
      font-size: 0.95rem;
      user-select: none;
      transition: transform .08s ease, background .12s ease, color .12s ease;
    }
    .cal-day:hover{ transform: translateY(-1px); background: rgba(77,163,255,0.12); }
    .cal-day.reg{ font-weight: 900; color: #f9fafb; }
    .cal-day.noreg{ color: rgba(255,255,255,0.38); }
    .cal-day.sel{
      background: rgba(37,99,235,0.85);
      color: white !important;
      box-shadow: 0 10px 18px rgba(37,99,235,0.25);
    }

    /* Tables */
    .hairline{ border-color: rgba(255,255,255,0.10) !important; }
    .row-hover:hover{ background: rgba(77,163,255,0.07); }
    table { width: 100%; table-layout: fixed; }
    th, td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Recent win/lose highlight */
    .tr-win-row  { background: rgba(37, 99, 235, 0.11); }
    .tr-lose-row { background: rgba(239, 68, 68, 0.10); }
    .td-win  { color: #7db7ff; font-weight: 900; }
    .td-lose { color: #ff8f8f; font-weight: 900; }

    /* Summary badges */
    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.03);
      padding: 8px 12px;
      border-radius: 999px;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.25);
      font-weight: 900;
    }
    .dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      display:inline-block;
    }
    .dot-win{ background: rgba(77,163,255,0.95); box-shadow: 0 0 0 4px rgba(77,163,255,0.18); }
    .dot-pog{ background: rgba(244,215,130,0.95); box-shadow: 0 0 0 4px rgba(244,215,130,0.16); }

    .num-win{
      background: linear-gradient(90deg, rgba(77,163,255,1), rgba(125,183,255,1));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 950;
    }
    .num-pog{
      background: linear-gradient(90deg, rgba(244,215,130,1), rgba(199,167,84,1));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 950;
    }

    @media (max-width: 480px){
      .preset-btn{ padding: 9px 10px; border-radius: 10px; font-size: 0.92rem; }
      .tight-py td, .tight-py th{ padding-top: 10px; padding-bottom: 10px; }
      .tight-py td{ padding-top: 8px; padding-bottom: 8px; }
      .card-pad{ padding: 14px !important; }
      .badge{ padding: 7px 10px; gap: 8px; }
    }