:root{
    --primary:#2f7cf6; --primary-600:#1e63d9;
    --bg:#f6f7fb; --text:#111; --muted:#6b7280; --border:#e5e7eb; --card:#fff;
}
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", Arial; margin:0}
.demo{padding:24px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary-600)}
.btn.secondary{background:#eef0f4}.btn.link{background:transparent;color:var(--primary);padding:0}
.btn.block{width:100%;justify-content:center}

/* modal */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;padding:24px;z-index:1300}
.createClassModal{width:min(860px,96vw);background:var(--card);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.18);overflow:hidden;z-index:1310}
.modal-hd{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.title{font-size:18px;font-weight:800}
.close{width:36px;height:36px;border-radius:50%;border:0;background:#f2f3f7;font-size:18px;cursor:pointer}
.modal-bd{padding:18px;background:var(--bg)}

/* method cards */
.cc-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cc-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:140px}
.cc-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.08);transform:translateY(-1px)}
.cc-card h3{margin:0;font-size:18px}
.cc-card p{margin:4px 0 0;color:var(--muted);line-height:1.6}

/* form */
.form{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px}
.row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}
.label{color:#374151;font-weight:600}
.field{max-width:360px}
select,input[type="text"],input[type="url"]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;font-size:15px;background:#fff}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.divider{height:1px;background:var(--border);margin:6px 0}
.foot-left{margin-right:auto;display:flex;align-items:center;gap:14px}

/* confirm table */
.preview{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px 6px;text-align:left;font-size:14px}
.table th{background:#fafafa}
@media (max-width:720px){.row{grid-template-columns:1fr}.field{max-width:100%}}

/* sweetalert*/
.swal2-container{z-index: 3000;}

/*=======================================================*/
/* 通用輸入框與標籤 (Tag) 樣式                  */
/*=======================================================*/
.tag-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}
.tag-input-group input[readonly] {
    background: #f6f7fb;
    cursor: not-allowed;
}
.as-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.class-tag {
    background: #eef2ff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.class-tag button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}
.class-tag.non-editable {
    padding-right: 8px;
    cursor: default;
    background-color: #e9ecef;
    border-color: #ced4da;
}

/*=======================================================*/
/* 通用 Modal 樣式 (兩個 Modal 共用)            */
/*=======================================================*/
.as-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}
.as-modal {
    width: min(840px, 96vw);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}
.as-hd {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.as-hd h3 {
    margin: 0;
    font-size: 20px;
}
.as-hd .right {
    display: flex;
    gap: 8px;
}
.as-bd {
    padding: 0;
    overflow-y: auto;
    flex-grow: 1;
}
.as-ft {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #fff;
    flex-shrink: 0;
}
.as-btn {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}
.as-btn:hover {
    background-color: #f9fafb;
}
.as-btn.primary {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}
.as-btn.primary:hover {
    background: #059669;
    border-color: #059669;
}
button:disabled, .as-btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}


/*=======================================================*/
/* ✨ 班級列表 Modal (#as-assign) 特定樣式          */
/*=======================================================*/
#as-assign .as-list {
    background: #f7f8fb; /* 列表背景色 */
    padding: 8px 16px;
}

/* 班級列表的 item 佈局 (grid) */
#as-assign .as-item {
    display: grid;
    grid-template-columns: 28px 1fr; /* 左欄放 checkbox，右欄放內容 */
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 12px;
    padding: 10px 16px;
    margin: 10px 0;
    transition: background-color 0.2s, border-color 0.2s;
}

/* 班級列表的 item hover 效果 */
#as-assign .as-item:hover {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

#as-assign .as-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#as-assign .as-badge {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
}
#as-assign .as-badge.speedy { background: #16a34a; }
#as-assign .as-badge.google { background: #e11d48; }
#as-assign .as-badge.chessay { background: #e1931d; }
#as-assign .as-badge.questions { background: #2894FF; }
#as-assign .as-badge.interactive { background: #2894FF; }

#as-assign .as-name {
    font-size: 16px;
    color: #1f2937;
    flex-shrink: 1; /* 允許班級名稱在空間不足時收縮 */
}

#as-assign .as-count {
    color: #6b7280;
    margin-left: 6px;
    white-space: nowrap; /* 避免人數換行 */
}

#as-assign .as-icon.as-del {
    margin-left: auto; /* ✨ 關鍵：讓垃圾桶圖示自動推到最右邊 */
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    color: #ef4444; /* A slightly softer red */
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

#as-assign .as-icon.as-del:hover {
    background-color: #fee2e2; /* Light red background on hover */
}

/* 「已派送」標籤 */
#as-assign .as-assigned-tag {
    font-size: 12px;
    font-weight: 500;
    color: #dc2626;
    background-color: #fee2e2;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 8px;
    white-space: nowrap;
}

/* 不可選的項目 (Disabled) */
#as-assign .as-item.disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.8;
}


/*=======================================================*/
/* ✨ 主題選擇 Modal (#ac-select) 特定樣式          */
/*=======================================================*/
#ac-select .as-body {
    padding: 8px 0; /* 主題列表 body 上下留白 */
    overflow-y: auto; /* 允許內容超出時垂直滾動 */
    flex-grow: 1;     /* 讓 body 區域自動填滿 Modal 的剩餘高度 */
}

/* 主題列表的 item 佈局 (simple) */
#ac-select .as-item {
    padding: 12px 24px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 16px;
}

#ac-select .as-item:last-child {
    border-bottom: none;
}

#ac-select .as-item:hover {
    background-color: #f9fafb;
}

#ac-select .as-item.selected {
    background-color: #eff6ff;
    font-weight: 500;
    color: #2563eb;
}

/*====================================================================*/
/* Loading 動畫容器的樣式 */
.as-loader-container {
    /* 使用 Flexbox 讓轉圈圈在容器中完美置中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 給予一些空間，避免貼邊 */
    padding: 40px 20px;
}

/* 轉圈圈動畫本體的樣式 */
.as-spinner {
    width: 40px;            /* 圓圈的大小 */
    height: 40px;           /* 圓圈的大小 */
    border-radius: 50%;     /* 讓 div 變成圓形 */
    
    /* 關鍵：使用 border 來畫圓圈 */
    border: 4px solid #f3f3f3; /* 淺灰色底圈 */
    border-top: 4px solid #3498db; /* 藍色，用來顯示旋轉的部分 */

    /* 指定動畫效果 */
    animation: spin 1s linear infinite; /* 動畫名稱、速度、循環方式 */
}

/* 定義動畫關鍵影格 (keyframes) */
@keyframes spin {
    0% { transform: rotate(0deg); }   /* 從 0 度開始 */
    100% { transform: rotate(360deg); } /* 旋轉一整圈 (360度) */
}