:root{
    --bg: #f4faff;
    --bg-alt: #e8f3fd;
    --card: #ffffff;
    --card-hi: #eaf4fe;
    --line: #cfe6f8;
    --text: #0f2c47;
    --text-dim: #4c6f8c;
    --text-faint: #8aa8c2;
    --accent-a: #2f8fef;
    --accent-b: #0a5fc9;
    --gold: #f5a623;
    --blue: #2f8fef;
    --red: #e05a5a;
    --green: #29a86c;
    --radius: 16px;
    --radius-sm: 10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background: radial-gradient(120% 100% at 15% -10%, #d9edfc 0%, var(--bg) 55%);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    min-height:100vh;
    padding-bottom: 60px;
  }
  .display{ font-family:'Baloo 2', sans-serif; }
  a{color:inherit;}

  header{
    position: sticky; top:0; z-index:50;
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .header-inner{
    max-width: 1360px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 20px;
    gap: 16px;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Baloo 2', sans-serif;
    font-weight:700; font-size:1.25rem;
    letter-spacing: 0.01em;
  }
  .logo svg{ flex-shrink:0; }
  .logo .sub{ font-family:'Inter',sans-serif; font-weight:500; font-size:0.68rem; color:var(--text-faint); display:block; margin-top:-2px;}
  .header-actions{ display:flex; align-items:center; gap:10px; }

  .controls{
    max-width: 1360px; margin: 26px auto 0; padding: 0 20px;
    display:grid; grid-template-columns: 1fr 300px; gap: 22px;
  }
  .controls-left{
    display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  }
  .search-wrap{
    position:relative; flex: 1 1 240px; max-width: 340px;
  }
  .search-wrap input{
    width:100%; background: var(--card); border:1px solid var(--line);
    color: var(--text); border-radius: 999px; padding: 10px 16px 10px 38px;
    font-size: 0.88rem; font-family:'Inter';
  }
  .search-wrap input::placeholder{ color: var(--text-faint); }
  .search-wrap svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:0.55;}

  .refresh-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    background: var(--card); color: var(--text-dim); cursor:pointer;
    font-size:1.1rem; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition: transform 0.2s;
  }
  .refresh-btn:hover{ border-color: var(--accent-a); color: var(--accent-a); }
  .refresh-btn.spinning{ animation: spin 0.7s linear infinite; }
  @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

  .view-toggle{
    display:flex; background: var(--card); border:1px solid var(--line);
    border-radius: 999px; padding: 3px; gap:2px;
  }
  .view-toggle button{
    border:none; background:transparent; color: var(--text-dim);
    font-family:'Inter'; font-weight:600; font-size:0.82rem;
    padding: 8px 16px; border-radius: 999px; cursor:pointer;
    transition: background .18s ease, color .18s ease;
  }
  .view-toggle button.active{
    background: linear-gradient(100deg, var(--accent-a), var(--accent-b));
    color: #ffffff;
  }

  .filter-row{
    max-width: 1360px; margin: 16px auto 0; padding: 0 20px;
    display:grid; grid-template-columns: 1fr 300px; gap: 22px;
  }
  .filter-row-left{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  }
  .filter-row-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .filter-row-actions{ display:flex; gap:8px; align-items:center; flex-shrink:0; margin-left:auto; }
  .chip{
    border:1px solid var(--line); background: var(--card);
    color: var(--text-dim); font-family:'Inter'; font-weight:600; font-size:0.8rem;
    padding: 7px 14px; border-radius: 999px; cursor:pointer;
    display:flex; align-items:center; gap:7px;
    transition: border-color .15s ease, color .15s ease;
  }
  .chip .dot{ width:8px; height:8px; border-radius:50%; }
  .chip.active{ border-color: var(--dotcolor, var(--accent-a)); color: var(--text); }
  .chip:hover{ color: var(--text); }

  main{ max-width: 1360px; margin: 30px auto 0; padding: 0 20px; display:grid; grid-template-columns: 1fr 300px; gap: 22px;}
  @media (max-width: 800px){ main{ grid-template-columns: 1fr; } .controls{ grid-template-columns: 1fr; } .filter-row{ grid-template-columns: 1fr; } }

  .panel{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 4px 24px rgba(15,44,71,0.06); }

  .month-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .month-nav h2{ font-family:'Baloo 2'; font-size:1.3rem; font-weight:700; }
  .month-nav .btns{ display:flex; gap:6px; }
  .month-nav button{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
    background: var(--bg-alt); color: var(--text); cursor:pointer; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
  }
  .month-nav button:hover{ background: var(--card-hi); }

  .grid-week{
    display:grid; grid-template-columns: repeat(7,1fr); gap:0;
    margin-bottom:8px; background: var(--accent-a); border-radius: 10px;
    overflow:hidden;
  }
  .grid-week span{
    text-align:center; font-size:0.76rem; color:#fff; font-weight:700;
    padding: 8px 2px; letter-spacing:.01em;
  }
  .grid-days{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; grid-auto-rows: minmax(96px, auto); }
  .day-cell{
    border-radius: 10px; padding: 6px;
    background: var(--bg-alt); border:1px solid transparent;
    display:flex; flex-direction:column; gap:4px;
    transition: border-color .15s ease, background .15s ease;
    position:relative; min-width:0;
  }
  .day-cell.other{ opacity:0.28; }
  .day-cell:hover{ border-color: var(--accent-b); }
  .day-cell.today .day-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:50%;
    background: var(--accent-a); color:#fff;
  }
  .day-num{ font-size:0.78rem; font-weight:600; }

  .day-pills{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .day-pill{
    display:flex; align-items:center; gap:4px;
    padding: 3px 6px; border-radius: 6px; cursor:pointer;
    font-size:0.68rem; font-weight:600; color: var(--text);
    white-space:nowrap; overflow:hidden;
    width:100%; min-width:0; box-sizing:border-box;
  }
  .day-pill-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
  .day-pill-badge{
    flex-shrink:0; background: var(--text); color:#fff;
    font-size:0.56rem; font-weight:800; text-transform:uppercase;
    padding: 1px 4px; border-radius:4px; letter-spacing:.02em;
  }
  .day-pill-more{ font-size:0.66rem; color: var(--text-faint); padding: 1px 6px; font-weight:600; }

  .empty-msg{ color: var(--text-faint); font-size:0.85rem; padding: 10px 2px; }

  .upcoming-item{
    border-left: 3px solid var(--accent-a); padding-left:10px;
    margin-bottom:12px; cursor:pointer;
  }
  .upcoming-date{ font-size:0.72rem; color:var(--text-faint); font-weight:600; }
  .upcoming-title{ font-size:0.85rem; font-weight:600; margin-top:2px; }

  .list-date-group{ margin-bottom: 20px; }
  .list-date-header{
    background: var(--bg-alt); color: var(--accent-a);
    font-weight: 700; font-size: 0.85rem;
    padding: 9px 14px; border-radius: 10px;
    margin-bottom: 8px;
  }
  .list-row{
    display:flex; align-items:center; gap:10px;
    padding: 12px 16px; border-radius: 14px;
    margin-bottom: 8px;
  }
  .list-row-body{ flex:1; min-width:0; }
  .list-row-time{
    font-size:0.72rem; font-weight:700; color: var(--text);
    opacity:0.7; margin-bottom:2px;
  }
  .list-row-title{ font-size:0.92rem; font-weight:700; color: var(--text); }
  .list-row-actions{ margin-left:auto; flex-shrink:0; }

  .side-panel h3{ font-family:'Baloo 2'; font-size:1rem; margin-bottom:12px; }
  .legend-item{ display:flex; align-items:center; gap:8px; font-size:0.82rem; color: var(--text-dim); margin-bottom:8px; }
  .legend-item i{ width:9px; height:9px; border-radius:50%; }

  footer{
    max-width: 1360px; margin: 46px auto 0; padding: 22px 20px 0;
    border-top: 1px solid var(--line);
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
    color: var(--text-faint); font-size:0.8rem;
  }
  footer a{ color: var(--accent-a); text-decoration:none; font-weight:600; }
  footer a:hover{ text-decoration:underline; }

  .admin-btn{
    background: var(--card); color: var(--text-dim);
    border:1px solid var(--line); border-radius: 999px;
    padding: 7px 14px; font-size:0.8rem; font-family:'Inter'; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:6px;
  }
  .admin-btn.on{ background: linear-gradient(100deg, var(--accent-a), var(--accent-b)); color:#fff; border-color: transparent; }
  .admin-btn .pip{ width:7px; height:7px; border-radius:50%; background: var(--text-faint); }
  .admin-btn.on .pip{ background:#fff; }

  .add-btn{
    background: linear-gradient(100deg, var(--accent-a), var(--accent-b)); color:#fff;
    border:none; border-radius: 999px; padding: 9px 16px; font-family:'Inter'; font-weight:700;
    font-size:0.85rem; cursor:pointer; display:flex; align-items:center; gap:6px;
  }

  .event-actions{ display:flex; gap:6px; margin-left:auto; flex-shrink:0; }
  .event-actions button{
    width:26px; height:26px; border-radius:8px; border:1px solid var(--line);
    background: var(--card); color: var(--text-dim); cursor:pointer; font-size:0.75rem;
    display:flex; align-items:center; justify-content:center;
  }
  .event-actions button:hover{ border-color: var(--accent-a); color: var(--accent-a); }
  .event-actions button.danger:hover{ border-color: var(--red); color: var(--red); }

  .modal-overlay{
    position:fixed; inset:0; background: rgba(15,44,71,0.35);
    display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
  }
  .modal-overlay.show{ display:flex; }
  .modal{
    background: var(--card); border-radius: var(--radius); padding: 22px;
    width:100%; max-width: 400px; box-shadow: 0 20px 60px rgba(15,44,71,0.25);
    max-height: 90vh; overflow-y: auto;
  }
  .modal h3{ font-family:'Baloo 2'; font-size:1.15rem; margin-bottom:14px; }
  .modal label{ display:block; font-size:0.76rem; font-weight:600; color: var(--text-dim); margin: 12px 0 5px; }
  .modal input, .modal select{
    width:100%; background: var(--bg-alt); border:1px solid var(--line); color: var(--text);
    border-radius: 8px; padding: 9px 11px; font-size:0.85rem; font-family:'Inter';
  }
  .modal .row2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
  .modal-actions button{
    border:none; border-radius: 999px; padding: 9px 18px; font-family:'Inter'; font-weight:700;
    font-size:0.85rem; cursor:pointer;
  }
  .btn-cancel{ background: var(--bg-alt); color: var(--text-dim); }
  .btn-save{ background: linear-gradient(100deg, var(--accent-a), var(--accent-b)); color:#fff; }
  .modal-note{ font-size:0.72rem; color: var(--text-faint); margin-top:4px; }

  /* ===== Modal Detail Acara ===== */
  .detail-modal{ max-width: 420px; }
  .detail-modal-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px; }
  .detail-brand{ font-size:0.72rem; font-weight:700; letter-spacing:.04em; color: var(--accent-a); }
  .detail-modal-icons{ display:flex; gap:6px; }
  .detail-modal-icons button{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
    background: var(--bg-alt); cursor:pointer; font-size:0.85rem;
    display:flex; align-items:center; justify-content:center;
  }
  .detail-modal-icons button:hover{ border-color: var(--accent-a); }
  .detail-modal-title{ font-size:1.1rem; margin-bottom:14px; line-height:1.35; }
  .detail-row{
    display:flex; gap:14px; padding:9px 0; border-top:1px solid var(--bg-alt);
    font-size:0.85rem;
  }
  .detail-row:first-of-type{ border-top:1px solid var(--line); }
  .detail-label{
    width:84px; flex-shrink:0; font-weight:700; letter-spacing:.03em;
    font-size:0.68rem; color: var(--accent-a); text-transform:uppercase; padding-top:2px;
  }
  .detail-value{ color: var(--text); word-break:break-word; }
  .detail-value a{ color: var(--accent-a); text-decoration:underline; }
  .detail-embed{ margin-top:14px; max-width:100%; overflow:hidden; }

  /* ===== Responsif: tablet & HP kecil ===== */
  @media (max-width: 480px){
    .header-inner{ padding: 12px 14px; flex-wrap:wrap; row-gap:8px; }
    .logo{ font-size: 1.05rem; }
    .header-actions{ flex-wrap:wrap; gap:8px; }
    .controls{ padding: 0 14px; gap:10px; }
    .filter-row{ padding: 0 14px; }
    main{ padding: 0 14px; gap:16px; }
    .panel{ padding: 14px; }
    .search-wrap{ flex: 1 1 100%; max-width: none; }
    .view-toggle{ flex: 1 1 auto; }
    .view-toggle button{ flex:1; padding: 8px 10px; }
    .add-btn{ font-size:0.78rem; padding:8px 12px; }
    .grid-week span{ font-size:0.6rem; padding:6px 1px; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .month-nav button{ width:38px; height:38px; }
    .day-cell{ padding:4px; gap:2px; }
    .day-num{ font-size:0.72rem; }
    .event-actions button{ width:32px; height:32px; }
    .modal{ padding:16px; }
    .modal .row2{ grid-template-columns: 1fr; }
    footer{ padding: 18px 14px 0; justify-content:center; text-align:center; }
  }

  /* Di HP: sembunyikan seluruh toggle Bulan/Daftar, langsung tampilkan Daftar tanpa tombol tab */
  @media (max-width: 700px){
    .view-toggle{ display:none; }

    /* backdrop-filter pada header membuat position:fixed FAB salah acuan (nempel ke header,
       bukan ke layar) di banyak browser — dimatikan khusus di HP supaya FAB benar-benar mengambang */
    header{ backdrop-filter: none; }

    /* Tombol Tambah Jadwal jadi FAB bulat mengambang di pojok kanan bawah */
    .add-btn{
      position: fixed; right:44px; bottom:54px; z-index:60;
      width:56px; height:56px; padding:0; border-radius:50%;
      justify-content:center; box-shadow: 0 6px 18px rgba(10,95,201,0.4);
      background: linear-gradient(100deg, var(--accent-a), var(--accent-b));
    }
    .add-btn-text{ display:none; }
    .add-btn-icon{ font-size:1.7rem; line-height:1; font-weight:700; }
  }

  /* Pastikan area sentuh nyaman di layar sentuh manapun (HP/tablet) */
  @media (hover: none) and (pointer: coarse){
    .month-nav button{ width:38px; height:38px; }
    .event-actions button{ width:32px; height:32px; }
    .admin-btn, .add-btn, .view-toggle button, .chip{ min-height: 38px; }
  }