*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Microsoft JhengHei',Arial,sans-serif;
  background:linear-gradient(135deg,#6dd5fa 0%,#2980b9 100%);
  padding:52px 20px 20px;
  min-height:100vh;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* container */
.container{
  max-width:1400px;margin:0 auto;background:white;
  border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.2);
  overflow:hidden;
}

/* header */
.header{
  position: relative;
  background:linear-gradient(135deg,#6dd5fa 0%,#2980b9 100%);
  padding:30px;text-align:center;color:white;
}

.header h1{font-size:2.4em;cursor:pointer;}

/* person tabs */
.person-tabs{
  display:flex;justify-content:center;background:#ffffffdd;
  padding:10px 0;border-bottom:2px solid #2980b9;
}
.person-tabs a{
  padding:10px 20px;margin:0 10px;border-radius:10px;
  font-weight:bold;color:#2980b9;text-decoration:none;
  transition:.25s;font-size:1.25rem;
}
.person-tabs a.active{
  background:#2980b9;color:white;box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* date */
.date-select{text-align:center;margin:20px 0;}
.date-select input{
  padding:12px 18px;font-size:1.1em;border:2px solid #fff;
  border-radius:10px;background:rgba(255,255,255,0.9);
}

/* layout */
.main{
  display:grid;grid-template-columns:2fr 1fr;
  gap:30px;padding:30px;
}
/* card */
.card{
  background:#f8f9fa;padding:25px;border-radius:15px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* schedule item */
.schedule-item{
  background:white;padding:15px;margin-bottom:10px;border-radius:10px;
  display:flex;align-items:center;transition:0.3s;border-left:4px solid #3498db;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);margin-top: 10px;
}

.section-title {
  opacity: 0.5;
  pointer-events: none;
  background: #efefef;
}


.schedule-item:hover{transform:translateY(-3px);}
.schedule-item.completed{
  background:#dff9fb;border-left-color:#f39c12;color:#95a5a6;
  text-decoration:line-through;
}
.schedule-item input{width:22px;height:22px;margin-right:12px;}
.time{font-weight:bold;color:#2980b9;min-width:120px;font-size:1.1em;}
.activity{flex:1;font-size:1.1em;}

/* circle */
.progress-circle{position:relative;width:200px;height:200px;margin:25px auto;}
svg{transform:rotate(-90deg);}
.progress-bg{stroke:#e9ecef;stroke-width:18;fill:none;}
.progress{stroke:#f39c12;stroke-width:18;fill:none;stroke-dasharray:565;transition:.5s;}
.percent{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:2.4em;font-weight:bold;color:#f39c12;
}

/* summary */
.summary{
  display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px;
}
.summary-card{
  text-align:center;background:white;padding:20px;border-radius:12px;
}
.summary-card .number{font-size:2em;font-weight:bold;color:#2980b9;}
.summary .summary-card:first-child{display:none;}
/* week row */
.week-row{
  display:flex;align-items:center;margin-top:10px;cursor:pointer;
}
.week-label{width:80px;font-weight:bold;}
.week-bar{
  background:#e9ecef;height:22px;flex:1;border-radius:15px;overflow:hidden;
}
.week-fill{
  height:100%;background:linear-gradient(90deg,#6dd5fa,#2980b9);
  text-align:right;padding-right:8px;color:white;font-weight:bold;font-size:.9em;
  transition:.5s;
}

/* points badge */
.points-area{
  position:absolute;top:24px;right:24px;display:flex;gap:8px;z-index:9999;
}
.points-btn{
  background:linear-gradient(135deg,#ffcf71,#ff9f1c);
  color:#fff;padding:8px 14px;font-size:1.05rem;border-radius:12px;
  text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.25);
  transition:.2s;white-space:nowrap;
}
.points-btn:hover{transform:scale(1.1);}
.points-btn.earn{
  background:linear-gradient(135deg,#6dd47e,#2ecc71);
}

.excluded-tag{color:#c62828;font-size:13px;margin-left:6px;}
.schedule-item.excluded{opacity:0.55;}
.exclude-btn{
  margin-right:6px;padding:3px 6px;font-size:12px;border:none;border-radius:4px;
  cursor:pointer;background:#f8d7da;color:#a94442;
}
.exclude-btn:hover{background:#f2bfc3;}

/* mobile */
@media(max-width:600px){
  .summary .summary-card:first-child{display:block!important;}
  .progress-circle{display:none!important;}

  .summary{
    display:flex!important;gap:8px!important;margin-top:10px!important;
  }
  .summary-card{flex:1;text-align:center;padding:14px!important;}
  .summary-card .number{font-size:1.5rem!important;}

  .main{
    display:flex!important;flex-direction:column!important;
    gap:14px!important;padding:20px!important;
  }
  .main>.card:nth-child(1){order:2;}
  .main>.card:nth-child(2){order:1;}

  .header{padding:22px 14px!important;}
  .header h1{
    text-align:left!important;font-size:1.55rem!important;line-height:1.25!important;
    margin-right:80px!important;margin-bottom:0!important;
  }
  .points-btn{
    transform:scale(0.78)!important;top:12px!important;right:12px!important;
    padding:6px 12px!important;border-radius:10px!important;
  }

  .week-bar{height:18px!important;}
  .week-fill{font-size:0.8rem!important;padding-right:6px!important;}
}

/* current item */
.schedule-item.current{
  background:#FFFFDF!important;border-left-color:#ff0000!important;
  box-shadow:0 0 0 2px #e74c3c inset!important;
}

/* admin mobile wrap */
@media(max-width:600px){
  body.admin-mode .schedule-item{
    flex-wrap:wrap!important;align-items:flex-start!important;
  }
  body.admin-mode .time{
    min-width:80px;margin-bottom:6px;font-size:1rem;
  }
  body.admin-mode .activity{
    flex:1 1 auto!important;width:100%!important;white-space:normal!important;
    line-height:1.45;margin-top:4px;text-align:right;padding-right:12px;
    word-break:break-word;
  }
}

/* section style */
.schedule-item.section{
  background:#f2f2f2!important;border-left-color:#ccc!important;
  color:#555!important;font-weight:600;
}
.schedule-item.section.current{
  background:#fff8d6!important;border-left-color:#ff6b6b!important;
  box-shadow:0 0 0 2px #ff6b6b inset!important;color:#a63a3a!important;
}

/* theme toolbar */
#themeToolbar{
  position:fixed;top:0;left:0;right:0;background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);padding:6px 10px;display:flex;align-items:center;
  gap:8px;color:#fff;font-size:14px;z-index:99999;
}
#themeToolbar select{
  padding:4px 8px;border:none;border-radius:6px;font-size:14px;
}
#themeToolbar a.toolbar-btn{
  color:white;background:rgba(255,255,255,.2);
  padding:6px 12px;border-radius:6px;text-decoration:none;
  transition:.25s;font-size:14px;white-space:nowrap;
}
#themeToolbar a.toolbar-btn:hover{
  background:rgba(255,255,255,.35);
}

/* mobile wrap */
@media(max-width:600px){
  .card .schedule-item{
    flex-wrap:wrap!important;align-items:flex-start!important;
    padding:12px 14px!important;
  }
  .schedule-item .time{
    min-width:80px;font-size:1rem;margin-bottom:6px;
  }
  .schedule-item .activity{
    flex:1 1 100%!important;margin-top:2px;font-size:1.05rem;
    white-space:normal!important;line-height:1.45;word-break:break-word;
  }
}

/* weekModal */
#weekModal{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  display:none;justify-content:center;align-items:center;z-index:99999;
  height:100vh;overflow:hidden;padding:0;
}
#weekModal .modal-box{
  background:white;width:90%;max-width:500px;border-radius:12px;
  padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.3);
  max-height:80vh;overflow-y:auto;
}

/* ID tag */
.schedule-item{position:relative;}
.schedule-id-tag{
  position:absolute;top:4px;right:6px;background:rgba(0,0,0,0.45);
  color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;
  pointer-events:none;font-family:monospace;z-index:10;line-height:1.1;
}


/* 加扣點動畫 */
/* ⭐ 加點動畫（放大彈跳） */
@keyframes pointPopupPlus {
  0%   { opacity: 0; transform: scale(0.5); }
  20%  { opacity: 1; transform: scale(1.5); }
  60%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(0.5); }
}

/* ❗ 扣點動畫（紅色震動） */
@keyframes pointPopupMinus {
  0%   { opacity: 0; transform: scale(0.5) rotate(0deg); }
  15%  { opacity: 1; transform: scale(1.4) rotate(2deg); }
  30%  { transform: scale(1.0) rotate(-2deg); }
  45%  { transform: rotate(1deg); }
  60%  { transform: rotate(-1deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
}

.point-plus-anim {
  animation: pointPopupPlus 0.9s ease-out;
}

.point-minus-anim {
  animation: pointPopupMinus 0.9s ease-in-out;
}