/* ===================== YUQINOON PORTAL CSS ===================== */
:root { --yqn-primary:#1e3a5f; --yqn-blue:#2563eb; --yqn-green:#16a34a; --yqn-red:#dc2626; --yqn-orange:#ea580c; --yqn-gray:#64748b; --yqn-light:#f8fafc; --yqn-border:#e2e8f0; --yqn-radius:10px; }

/* FORMS */
.yqn-form-wrap { max-width:600px; margin:30px auto; background:#fff; border-radius:var(--yqn-radius); box-shadow:0 4px 24px rgba(0,0,0,0.08); overflow:hidden; }
.yqn-form-header { background:var(--yqn-primary); color:#fff; padding:28px 30px; text-align:center; }
.yqn-form-header h2 { margin:0 0 6px; font-size:22px; }
.yqn-form-header p { margin:0; opacity:0.85; font-size:14px; }
.yqn-form { padding:30px; }
.yqn-field { margin-bottom:18px; }
.yqn-field label { display:block; font-weight:600; margin-bottom:6px; font-size:14px; color:#334155; }
.yqn-field label span { color:var(--yqn-red); }
.yqn-field input, .yqn-field select, .yqn-field textarea { width:100%; padding:10px 14px; border:1px solid var(--yqn-border); border-radius:8px; font-size:14px; transition:border .2s; box-sizing:border-box; }
.yqn-field input:focus, .yqn-field select:focus, .yqn-field textarea:focus { border-color:var(--yqn-blue); outline:none; box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.yqn-row { display:flex; gap:15px; }
.yqn-row-2 > .yqn-field { flex:1; }
.yqn-check { font-size:14px; }
.yqn-check label { font-weight:400; display:flex; align-items:center; gap:8px; }
.yqn-between { display:flex; justify-content:space-between; align-items:center; }
.yqn-form-foot { text-align:center; margin-top:15px; font-size:14px; color:var(--yqn-gray); }
.yqn-form-foot a { color:var(--yqn-blue); }

/* BUTTONS */
.yqn-btn { display:inline-flex; align-items:center; justify-content:center; padding:11px 24px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; border:none; text-decoration:none; transition:all .2s; }
.yqn-btn-primary { background:var(--yqn-blue); color:#fff; }
.yqn-btn-primary:hover { background:#1d4ed8; color:#fff; }
.yqn-btn-danger { background:var(--yqn-red); color:#fff; }
.yqn-btn-outline { background:transparent; border:1px solid var(--yqn-border); color:#334155; }
.yqn-btn-outline:hover { background:var(--yqn-light); }
.yqn-btn-wa { background:#25D366; color:#fff; }
.yqn-btn-wa:hover { background:#1da851; color:#fff; }
.yqn-btn-full { width:100%; }
.yqn-btn-sm { padding:6px 14px; font-size:13px; }

/* MESSAGES */
.yqn-msg { padding:12px 16px; border-radius:8px; margin-bottom:15px; font-size:14px; }
.yqn-msg.success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.yqn-msg.error { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }

/* PORTAL */
.yqn-portal { max-width:1000px; margin:20px auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.yqn-portal-head { display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-bottom:1px solid var(--yqn-border); margin-bottom:20px; }
.yqn-portal-head h1 { margin:0; font-size:24px; color:var(--yqn-primary); }
.yqn-portal-head p { margin:4px 0 0; color:var(--yqn-gray); }

/* TABS */
.yqn-tabs { display:flex; gap:4px; border-bottom:2px solid var(--yqn-border); margin-bottom:25px; overflow-x:auto; }
.yqn-tab { padding:10px 18px; border:none; background:none; cursor:pointer; font-size:14px; font-weight:500; color:var(--yqn-gray); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.yqn-tab.active { color:var(--yqn-blue); border-bottom-color:var(--yqn-blue); }
.yqn-tab:hover { color:var(--yqn-primary); }
.yqn-tab-panel { display:none; }
.yqn-tab-panel.active { display:block; }

/* STATS */
.yqn-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:15px; margin-bottom:25px; }
.yqn-stat { background:#fff; border:1px solid var(--yqn-border); border-radius:var(--yqn-radius); padding:18px; text-align:center; }
.yqn-stat .yqn-stat-icon { font-size:28px; display:block; margin-bottom:6px; }
.yqn-stat strong { font-size:20px; display:block; color:var(--yqn-primary); }
.yqn-stat small { color:var(--yqn-gray); font-size:12px; }

/* CARDS */
.yqn-wa-card { display:flex; align-items:center; justify-content:space-between; background:#f0fdf4; border:1px solid #86efac; border-radius:var(--yqn-radius); padding:18px 22px; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.yqn-live-card { background:#fef2f2; border:1px solid #fca5a5; border-radius:var(--yqn-radius); padding:22px; margin-bottom:20px; text-align:center; }
.yqn-live-dot { display:inline-block; font-size:14px; font-weight:700; color:var(--yqn-red); }

/* TABLES */
.yqn-table { width:100%; border-collapse:collapse; font-size:14px; margin-top:10px; }
.yqn-table th { background:var(--yqn-light); padding:10px 14px; text-align:left; font-weight:600; border-bottom:2px solid var(--yqn-border); font-size:13px; color:var(--yqn-gray); }
.yqn-table td { padding:10px 14px; border-bottom:1px solid var(--yqn-border); }
.yqn-table tr:hover { background:#f8fafc; }

/* BADGES */
.yqn-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.yqn-b-present { background:#dcfce7; color:#166534; }
.yqn-b-absent { background:#fee2e2; color:#991b1b; }
.yqn-b-late { background:#fef3c7; color:#92400e; }
.yqn-b-excused { background:#e0e7ff; color:#3730a3; }
.yqn-b-live { background:#fee2e2; color:#dc2626; }
.yqn-b-completed { background:#dcfce7; color:#166534; }
.yqn-b-scheduled { background:#e0e7ff; color:#3730a3; }
.yqn-b-active { background:#dcfce7; color:#166534; }

/* ATTENDANCE */
.yqn-att-summary { display:flex; align-items:center; gap:25px; background:#fff; border:1px solid var(--yqn-border); border-radius:var(--yqn-radius); padding:20px; margin-bottom:20px; flex-wrap:wrap; }
.yqn-att-ring { width:90px; height:90px; border-radius:50%; background:conic-gradient(var(--yqn-green) calc(var(--pct) * 1%), var(--yqn-border) 0); display:flex; align-items:center; justify-content:center; position:relative; }
.yqn-att-ring::before { content:''; width:70px; height:70px; background:#fff; border-radius:50%; position:absolute; }
.yqn-att-ring span { position:relative; z-index:1; font-weight:700; font-size:18px; }

/* REPORT CARDS */
.yqn-reports-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:15px; }
.yqn-report-card { background:#fff; border:1px solid var(--yqn-border); border-radius:var(--yqn-radius); padding:20px; text-align:center; }
.yqn-rc-icon { font-size:36px; margin-bottom:8px; }
.yqn-report-card h3 { margin:0 0 6px; }
.yqn-report-card small { color:var(--yqn-gray); }
.yqn-report-card .yqn-btn { margin-top:12px; }

/* CLASSMATES */
.yqn-mates-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.yqn-mate { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--yqn-border); border-radius:var(--yqn-radius); padding:14px; }
.yqn-avatar { width:42px; height:42px; border-radius:50%; background:var(--yqn-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex-shrink:0; }

/* PROFILE */
.yqn-profile { display:flex; gap:30px; background:#fff; border:1px solid var(--yqn-border); border-radius:var(--yqn-radius); padding:30px; flex-wrap:wrap; }
.yqn-avatar-lg { width:80px; height:80px; border-radius:50%; background:var(--yqn-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; flex-shrink:0; }
.yqn-profile-rows { flex:1; }
.yqn-prow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--yqn-border); font-size:14px; }
.yqn-prow span { color:var(--yqn-gray); }

/* TEACHER */
.yqn-batch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:15px; margin-bottom:20px; }
.yqn-batch-card { background:#fff; border:1px solid var(--yqn-border); border-radius:var(--yqn-radius); padding:18px; }
.yqn-batch-card h3 { margin:0 0 8px; color:var(--yqn-primary); }
.yqn-start-form { background:#fff; border:1px solid var(--yqn-border); border-radius:var(--yqn-radius); padding:25px; max-width:500px; }

.yqn-empty { color:var(--yqn-gray); font-style:italic; text-align:center; padding:30px; }

/* RESPONSIVE */
@media (max-width:768px) {
    .yqn-row { flex-direction:column; gap:0; }
    .yqn-portal-head { flex-direction:column; gap:10px; text-align:center; }
    .yqn-tabs { gap:0; }
    .yqn-tab { padding:8px 12px; font-size:13px; }
    .yqn-wa-card { flex-direction:column; text-align:center; }
    .yqn-att-summary { flex-direction:column; text-align:center; }
    .yqn-profile { flex-direction:column; align-items:center; text-align:center; }
}