:root{--p: #4653e5;--bg:#f3f4f6;--text:#1f2937;--border:#e5e7eb;}*{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif;}
body{background:var(--bg);color:var(--text);padding:15px;display:flex;flex-direction:column;align-items:center;}
.title{font-size:1.5rem;text-align:center;margin-bottom:15px;color: #e83d00;font-weight:bold;}
.filters{display:flex;gap:8px;margin-bottom:15px;width:100%;max-width:450px;justify-content:space-between;}
.filters select,.filters button{padding:6px 10px;border:1px solid var(--border);border-radius:6px;}
.cal-box{background:#fff;width:100%;max-width:450px;padding:20px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.1);}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;}
.btn{background:var(--p);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;text-decoration:none;text-align:center;}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;}
.grid-header{font-size:0.8rem;font-weight:bold;color:#6b7280;padding-bottom:5px;}
.day{aspect-ratio:1;display:flex;justify-content:center;align-items:center;background:#f9fafb;border-radius:6px;position:relative;cursor:pointer;}
.day.empty{background:transparent;cursor:default;}
.day.has-event{background:#eef2ff;border:1px solid #c7d2fe;}
.day.today{background:#dcfce7;border:2px solid #4ade80;color:#166534;font-weight:bold;}
.day.today.has-event{background:#bbf7d0;}
.badge{position:absolute;top:-5px;right:-5px;background: #ef4444;color:#fff;font-size:0.65rem;width:18px;height:18px;border-radius:50%;display:flex;justify-content:center;align-items:center;}
.badge-past {background: #a2a5ab !important; color: #fff !important; box-shadow: none !important;}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);justify-content:center;align-items:center;z-index:50;padding:15px;}
.modal.active{display:flex;}
.modal-content{background:#fff;width:100%;max-width:800px;border-radius:12px;max-height:90vh;overflow-y:auto;padding:25px;position:relative;}
.close{position:absolute;top:10px;right:15px;font-size:1.5rem;cursor:pointer;color:#666;}
.form-group{margin-bottom:12px;} .form-group label{display:block;font-size:0.85rem;margin-bottom:4px;}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;}
.event-card{margin-bottom:10px;} .event-poster{max-width:100%;max-height:250px;border-radius:8px;margin-bottom:10px;cursor:zoom-in;object-fit:contain;}
.meta-line{font-size:0.9rem;margin-bottom:5px;color:#555;}
.double-dotted{border-top:1px dotted #999;border-bottom:1px dotted #999;height:3px;margin:25px 0;}
.action-row{display:flex;gap:10px;margin-top:15px;} .btn-sm{padding:10px 8px;font-size:0.8rem;border-radius:4px;}
.badge-pending { position: absolute; bottom: -5px; right: -5px; background: #ffb800; color: #fff; font-size: 0.75rem; font-weight: bold; width: 22px; height: 22px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.event-title-tag { background: #cfff51; color:#000; padding:4px 12px; border-radius:20px; font-size:0.9rem; font-weight:600; margin:0; display:inline-block; }

/* Drag & Drop File Zone Styling */
.file-drop-zone { position: relative; border: 2px dashed #9ca3af; border-radius: 8px; padding: 15px; text-align: center; background: #f9fafb; cursor: pointer; transition: all 0.2s; margin-bottom: 10px; }
.file-drop-zone:hover, .file-drop-zone.dragover { background: #eef2ff; border-color: var(--p); }
.file-drop-zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop-zone .placeholder-text { color: #6b7280; font-size: 0.85rem; font-weight: 500; pointer-events: none; }
.change-slide {
    pointer-events:auto;background: #ff9d00de;color:#fff;border:none; width:30px;height:50px;font-size:1.2rem;line-height:1;cursor:pointer;
}
textarea {
    resize: none; overflow: hidden; min-height: 80px; transition: border-color 0.2s;
}
.current-month {
    background: #188100; color: #ffffff;
}
/* Event Type Badges */
.type-badge { padding: 3px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; display: inline-block; vertical-align: middle; line-height: 1; }
.type-badge.online { background: #dcfce7; color: #166534; border: 1px solid #4ade80; }
.type-badge.offline { background: #e5e7eb; color: #374151; border: 1px solid #9ca3af; }

.miniQuiz-button {
    position: absolute; top: 15px; left: 15px; font-size: 0.85rem; padding: 6px 12px; text-decoration: none; background: #fff; color: #000; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Mobile Text & Spacing Adjustments */
@media (max-width: 600px) {
    .title { font-size: 1.25rem; }
    .modal-content { padding: 15px; }
    .event-card h2 { font-size: 1.2rem; }
    .event-card h3 { font-size: 1rem; }
    .meta-line, .btn-sm, .form-group label { font-size: 0.8rem; }
    .event-title-tag { font-size: 0.75rem; padding: 3px 8px; }
    .cal-box { padding: 15px; }
    .day { font-size: 0.9rem; }
    #top-mq-btn { position: relative; top: 0; left: 0; margin-bottom: 15px; display: inline-block; }
    .title { margin-top: 0 !important; }
}