:root{--ink:#172b35;--muted:#6b7e86;--accent:#176b87;--paper:#f7fafb;--panel:#fff;--border:#dce7ea} .afaq-wb{font-family:Cairo,Tajawal,Arial,sans-serif;background:var(--paper);color:var(--ink);min-height:760px;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(23,43,53,.1);font-size:14px}.afaq-wb *{box-sizing:border-box}.afaq-topbar{min-height:72px;display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap}.afaq-brand{display:flex;align-items:center;gap:9px;margin-left:auto}.afaq-brand small{display:block;color:var(--muted);font-size:10px}.afaq-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--accent),#2f9eb5);color:#fff;font-size:23px;font-weight:800}.afaq-select{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px}.afaq-select select,.afaq-topic{border:1px solid var(--border);border-radius:8px;padding:8px;background:#fff;color:var(--ink);font:inherit}.afaq-topic{min-width:145px}.afaq-actions{display:flex;gap:6px;align-items:center}.afaq-button,.afaq-small,.afaq-icon{border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:8px;padding:8px 11px;cursor:pointer;font:inherit}.afaq-button:hover,.afaq-small:hover,.afaq-icon:hover{border-color:var(--accent);color:var(--accent)}.afaq-layout{display:grid;grid-template-columns:72px minmax(0,1fr) 220px;min-height:680px}.afaq-tools{background:#173d4b;padding:10px 7px;display:flex;flex-direction:column;gap:7px}.afaq-tool{border:0;background:transparent;color:#dcebef;border-radius:10px;padding:9px 2px;cursor:pointer;font-size:20px}.afaq-tool span{display:block;font-size:9px;margin-top:2px}.afaq-tool:hover,.afaq-tool.active{background:#24677b;color:#fff}.afaq-main{min-width:0;padding:12px;display:flex;flex-direction:column;gap:10px}.afaq-toolbar,.afaq-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 10px}.afaq-group{display:flex;align-items:center;gap:8px}.afaq-group label{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}.afaq-stage-wrap{position:relative;flex:1;min-height:520px;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:auto;background-image:linear-gradient(#d8e5e8 1px,transparent 1px),linear-gradient(90deg,#d8e5e8 1px,transparent 1px);background-size:28px 28px}.afaq-canvas{display:block;width:100%;min-width:700px;height:auto;touch-action:none;cursor:crosshair;background:rgba(255,255,255,.45)}.afaq-empty{position:absolute;inset:0;display:grid;place-items:center;color:#9cb0b6;pointer-events:none;font-size:18px}.afaq-zoom-float{position:sticky;bottom:14px;display:flex;gap:5px;justify-content:flex-start;padding:0 12px;direction:ltr}.afaq-zoom-float button{border:1px solid var(--border);background:#fff;border-radius:50%;width:32px;height:32px;cursor:pointer}.afaq-students{background:var(--panel);border-right:1px solid var(--border);padding:14px;display:flex;flex-direction:column}.afaq-panel-title{font-weight:700;display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:10px}.afaq-panel-title button{border:0;background:transparent;cursor:pointer;font-size:18px}.afaq-student-list{color:var(--muted);font-size:12px;padding-top:12px}.afaq-credit{margin-top:auto;color:var(--muted);font-size:10px;border-top:1px solid var(--border);padding-top:10px}.afaq-modal{position:fixed;inset:0;background:rgba(15,35,43,.45);display:grid;place-items:center;z-index:9999}.afaq-modal-card{background:#fff;border-radius:16px;padding:22px;min-width:280px;text-align:center;box-shadow:0 10px 28px rgba(23,43,53,.1)}.afaq-modal-card>button:first-child{float:left;border:0;background:transparent;font-size:20px;cursor:pointer}.afaq-timer-display{font-size:44px;font-weight:800;color:var(--accent);margin:12px}.afaq-timer-controls input{width:70px;padding:8px;border:1px solid var(--border);border-radius:8px}.afaq-wb.afaq-dark{--paper:#15262d;--panel:#1d343d;--ink:#edf7f9;--muted:#a9c0c6;--border:#34525b}.afaq-wb.afaq-dark .afaq-select select,.afaq-wb.afaq-dark .afaq-topic,.afaq-wb.afaq-dark .afaq-button,.afaq-wb.afaq-dark .afaq-small,.afaq-wb.afaq-dark .afaq-icon,.afaq-wb.afaq-dark .afaq-modal-card{background:#213b44;color:var(--ink)}.afaq-wb.afaq-dark .afaq-stage-wrap{background-color:#263d43}.afaq-wb.afaq-dark .afaq-canvas{background:rgba(30,50,55,.4)}@media(max-width:900px){.afaq-layout{grid-template-columns:60px minmax(0,1fr)}.afaq-students{position:absolute;inset-inline-start:60px;top:82px;bottom:0;width:230px;z-index:4;transform:translateX(110%);transition:transform .2s}.afaq-students.open{transform:translateX(0)}.afaq-topbar{padding:10px}.afaq-brand{width:100%;margin:0}.afaq-select{flex:1}.afaq-topic{min-width:120px;flex:1}.afaq-actions{margin-right:auto}.afaq-stage-wrap{min-height:500px}}@media(max-width:560px){.afaq-select{font-size:0}.afaq-select select{font-size:11px;max-width:100px}.afaq-topic{order:5;width:100%}.afaq-main{padding:7px}.afaq-tools{padding:7px 3px}.afaq-tool{font-size:17px}.afaq-tool span{font-size:8px}.afaq-stage-wrap{min-height:440px}.afaq-canvas{min-width:620px}}