/* Abu Al-Azayem Whiteboard — Canonical Production Styles */
.azwb-shell{
  --wb-green:#1E6F5C;
  --wb-green-dark:#173E34;
  --wb-green-soft:#EAF5F0;
  --wb-line:#DCE7E3;
  --wb-line-soft:#E7EFEC;
  --wb-bg:#F3F7F5;
  --wb-text:#34574C;
  --wb-muted:#6F827B;
  --wb-danger:#A63D39;
  --wb-btn:40px;
  /* Internal whiteboard stack: document < feedback < editor < chrome < pages */
  --wb-z-document:2;
  --wb-z-loading:10;
  --wb-z-lock:12;
  --wb-z-timer:13;
  --wb-z-zoom:14;
  --wb-z-selection:20;
  --wb-z-editor:30;
  --wb-z-progress:34;
  --wb-z-toast:35;
  --wb-z-toolbar:40;
  --wb-z-pages:80;
  --wb-z-pages-top:90;
  --wb-z-page-actions:95;
  --wb-z-drop:4;
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#fff;
  color:var(--wb-text);
  font-family:"Cairo",system-ui,sans-serif;
}
.azwb-shell *,
.azwb-shell *::before,
.azwb-shell *::after{box-sizing:border-box}
.azwb-shell button,
.azwb-shell input,
.azwb-shell textarea{font-family:inherit}
.azwb-shell button{font-size:12px}
.azwb-shell button:focus-visible,
.azwb-shell input:focus-visible,
.azwb-shell textarea:focus-visible{
  outline:3px solid rgba(62,127,171,.24);
  outline-offset:2px;
}

/* ---------- Toolbar shell ---------- */
.azwb-toolbar{
  position:sticky;
  top:0;
  z-index:var(--wb-z-toolbar);
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  min-width:0;
  padding:6px 8px;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--wb-line-soft);
  backdrop-filter:blur(10px);
}
.azwb-toolbar>.azwb-divider{display:none}
.azwb-toolbar-row{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
}
.azwb-toolbar-row--control{
  order:1;
  justify-content:space-between;
}
.azwb-toolbar-row--control:empty{display:none}
.azwb-toolbar-row--write{
  order:2;
  direction:rtl;
  justify-content:flex-start;
  gap:6px;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:#B8C8C2 transparent;
  padding-bottom:2px;
}
.azwb-toolbar-row--write::-webkit-scrollbar{height:4px}
.azwb-toolbar-row--write::-webkit-scrollbar-track{background:transparent}
.azwb-toolbar-row--write::-webkit-scrollbar-thumb{background:#B8C8C2;border-radius:999px}

/* ---------- Shared icon controls ---------- */
.azwb-tool,
.azwb-iconbtn,
.azwb-control,
.azwb-icon-only,
.azwb-page-btn,
.azwb-page-nav-btn,
.azwb-mobilebar button{
  display:grid;
  place-items:center;
  width:var(--wb-btn);
  min-width:var(--wb-btn);
  height:var(--wb-btn);
  min-height:var(--wb-btn);
  padding:0;
  border:1px solid var(--wb-line);
  border-radius:10px;
  background:#fff;
  color:#45645A;
  cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.azwb-tool:hover:not(:disabled),
.azwb-iconbtn:hover:not(:disabled),
.azwb-control:hover:not(:disabled),
.azwb-icon-only:hover:not(:disabled),
.azwb-page-btn:hover:not(:disabled),
.azwb-page-nav-btn:hover:not(:disabled),
.azwb-mobilebar button:hover:not(:disabled){
  background:#F1F8F5;
  border-color:#BFD9CF;
  color:var(--wb-green);
}
.azwb-tool:active:not(:disabled),
.azwb-iconbtn:active:not(:disabled),
.azwb-control:active:not(:disabled),
.azwb-icon-only:active:not(:disabled),
.azwb-page-btn:active:not(:disabled),
.azwb-page-nav-btn:active:not(:disabled){transform:translateY(1px)}
.azwb-shell button:disabled{opacity:.38;cursor:not-allowed}
.azwb-tool.is-active,
.azwb-iconbtn.is-active,
.azwb-control.is-active{
  background:#E7F4EF;
  border-color:#8ABDAE;
  color:#155D4C;
  box-shadow:inset 0 0 0 1px rgba(30,111,92,.07);
}
.azwb-tool__icon{
  display:block;
  width:20px;
  height:20px;
  pointer-events:none;
}
.azwb-icon-only .azwb-tool__icon{width:19px;height:19px}

/* ---------- Writing tools ---------- */
.azwb-toolbar__tools{
  display:grid;
  grid-template-columns:repeat(12,var(--wb-btn));
  grid-template-rows:var(--wb-btn);
  grid-auto-flow:column;
  flex:0 0 auto;
  gap:3px;
  padding:4px;
  border:1px solid #E1EBE7;
  border-radius:12px;
  background:#FAFCFB;
  direction:rtl;
}
.azwb-toolbar__style{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:5px;
  min-height:calc(var(--wb-btn) + 8px);
  padding:4px 6px;
  border:1px solid #E1EBE7;
  border-radius:12px;
  background:#FAFCFB;
  direction:rtl;
}
.azwb-color{
  width:28px;
  min-width:28px;
  height:28px;
  padding:0;
  border:2px solid #fff;
  border-radius:9px;
  box-shadow:0 0 0 1px #D6E3DE;
  cursor:pointer;
}
.azwb-color:hover{transform:scale(1.05)}
.azwb-color.is-active{box-shadow:0 0 0 2px var(--wb-green)}
.azwb-background-color-wrap{
  position:relative;
  display:grid;
  place-items:center;
  width:var(--wb-btn);
  min-width:var(--wb-btn);
  height:var(--wb-btn);
  min-height:var(--wb-btn);
  border:1px solid var(--wb-line);
  border-radius:10px;
  background:#fff;
  color:#49675E;
  cursor:pointer;
  overflow:hidden;
}
.azwb-background-color-wrap:hover{border-color:#BFD4CC;background:#F8FBFA}
.azwb-background-color-wrap:focus-within{outline:3px solid rgba(62,127,171,.24);outline-offset:2px}
.azwb-background-color-wrap.is-disabled{opacity:.38;cursor:not-allowed}
.azwb-background-color-wrap>.azwb-tool__icon{width:18px;height:18px}
.azwb-background-color-wrap>i{
  position:absolute;
  right:5px;
  bottom:5px;
  width:11px;
  height:11px;
  border:1px solid rgba(0,0,0,.22);
  border-radius:3px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.75);
  pointer-events:none;
}
.azwb-background-color{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  opacity:0;
  cursor:pointer;
}
.azwb-background-color:disabled{cursor:not-allowed}
.azwb-size{
  width:105px;
  min-width:80px;
  accent-color:var(--wb-green);
  cursor:pointer;
}

/* ---------- General board actions ---------- */
.azwb-toolbar__actions{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:5px;
  padding:4px;
  border:1px solid #E1EBE7;
  border-radius:12px;
  background:#FAFCFB;
  direction:rtl;
}
.azwb-action-group{
  display:flex;
  align-items:center;
  gap:3px;
}
.azwb-action-group+.azwb-action-group{
  padding-inline-start:5px;
  border-inline-start:1px solid #DDE8E4;
}
.azwb-file{display:none}

/* ---------- Teacher controls: access right, session left ---------- */
.azwb-toolbar__teacher{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"session access";
  align-items:center;
  width:100%;
  gap:16px;
  direction:ltr;
}
.azwb-teacher-group{
  display:flex;
  align-items:center;
  width:max-content;
  gap:5px;
  padding:4px;
  border:1px solid #E1EBE7;
  border-radius:11px;
  background:#FAFCFB;
  direction:rtl;
}
.azwb-teacher-group--session{grid-area:session;justify-self:start}
.azwb-teacher-group--access{grid-area:access;justify-self:end}
.azwb-toolbar__teacher .azwb-control:not(.azwb-teacher-toggle){
  width:var(--wb-btn);
  min-width:var(--wb-btn);
}
.azwb-teacher-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  min-width:72px;
  gap:6px;
  padding:0 6px;
}
.azwb-teacher-toggle i{
  position:relative;
  display:block;
  width:27px;
  height:16px;
  flex:0 0 27px;
  border-radius:999px;
  background:#CBD9D4;
  transition:background-color .18s ease;
}
.azwb-teacher-toggle i::after{
  content:"";
  position:absolute;
  top:2px;
  right:2px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .18s ease;
}
.azwb-teacher-toggle.is-active i{background:var(--wb-green)}
.azwb-teacher-toggle.is-active i::after{transform:translateX(-11px)}
.azwb-control--danger{color:var(--wb-danger);border-color:#EED4D2}
.azwb-control--danger:hover:not(:disabled){background:#FFF3F2;border-color:#E3B8B4;color:var(--wb-danger)}

/* ---------- Mobile quick bar ---------- */
.azwb-mobilebar{display:none}

/* ---------- Status ---------- */
.azwb-statusline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:34px;
  padding:5px 11px;
  background:#F6FAF8;
  border-bottom:1px solid var(--wb-line-soft);
  color:#6C8179;
  font-size:12px;
}
.azwb-statusline b{color:#34574C;font-size:12px}
.azwb-statusline__left,
.azwb-statusline__right{
  display:flex;
  align-items:center;
  min-width:0;
  gap:9px;
}
.azwb-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#AEBEB8;
}
.azwb-dot.is-saved{background:#32A06D}
.azwb-dot.is-pending{background:#E4AF35}
.azwb-dot.is-saving{background:#E4AF35;animation:azwbPulse 1s infinite}
.azwb-help{
  min-width:0;
  overflow:hidden;
  color:#7C8E88;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@keyframes azwbPulse{50%{opacity:.35}}

/* ---------- Board viewport ---------- */
.azwb-workspace{
  display:grid;
  grid-template-columns:258px minmax(0,1fr);
  grid-template-areas:"pages stage";
  flex:0 0 auto;
  width:100%;
  height:var(--wb-document-viewer-height,920px);
  min-width:0;
  min-height:0;
  max-height:none;
  background:#2B2B2B;
  direction:ltr;
}
.azwb-stage-scroll{
  grid-area:stage;
  position:relative;
  display:block;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow-x:auto;
  overflow-y:auto;
  padding:28px 56px 40px;
  background:#3F4143;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-color:#8D8D8D #2F3031;
  direction:ltr;
}
.azwb-stage-scroll::-webkit-scrollbar{width:12px;height:12px}
.azwb-stage-scroll::-webkit-scrollbar-track{background:#2F3031}
.azwb-stage-scroll::-webkit-scrollbar-thumb{
  min-height:48px;
  border:2px solid #2F3031;
  border-radius:999px;
  background:#8D8D8D;
}
.azwb-stage-scroll::-webkit-scrollbar-thumb:hover{background:#A5A5A5}
.azwb-stage-scroll::-webkit-scrollbar-corner{background:#2F3031}
.azwb-document-track{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-width:0;
  min-height:100%;
  gap:30px;
}
.azwb-document-slot{
  position:relative;
  display:flex;
  flex:0 0 auto;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  min-width:0;
}
.azwb-document-preview{
  display:block;
  flex:0 0 auto;
  min-width:0;
  border:1px solid #CACACA;
  border-radius:2px;
  background-color:#fff;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  pointer-events:none;
  user-select:none;
}
.azwb-document-slot.is-active{z-index:var(--wb-z-document)}

.azwb-canvas-frame{
  position:relative;
  flex:0 0 auto;
  width:auto;
  min-width:0;
  aspect-ratio:.70710678;
  margin:0 auto;
  overflow:hidden;
  border:1px solid #CACACA;
  border-radius:2px;
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.azwb-canvas-frame.is-page-ratio{height:auto;max-height:none}
.azwb-canvas{
  display:block;
  width:100%;
  height:100%;
  background:#fff;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:crosshair;
  transition:opacity .08s ease;
}
.azwb-canvas[data-tool="select"]{cursor:default}
.azwb-canvas[data-tool="eraser"]{cursor:cell}
.azwb-canvas[data-tool="text"]{cursor:text}
.azwb-canvas[data-tool="spotlight"],
.azwb-canvas[data-tool="laser"]{cursor:none}
.azwb-canvas-frame.is-page-switching .azwb-canvas{opacity:.12}

/* ---------- Board overlays ---------- */
.azwb-board-lock{
  position:absolute;
  top:12px;
  left:12px;
  z-index:var(--wb-z-lock);
  display:none;
  max-width:calc(100% - 24px);
  padding:7px 10px;
  border-radius:999px;
  background:rgba(23,62,52,.92);
  color:#fff;
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}
.azwb-board-lock.is-show{display:flex}
.azwb-timer{
  position:absolute;
  top:12px;
  right:12px;
  z-index:var(--wb-z-timer);
  display:none;
  min-width:92px;
  padding:8px 12px;
  border-radius:13px;
  background:rgba(23,62,52,.94);
  color:#fff;
  direction:ltr;
  text-align:center;
  font-size:17px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.azwb-timer.is-show{display:block}
.azwb-timer.is-ending{background:var(--wb-danger)}

.azwb-page-loading{
  position:absolute;
  inset:0;
  z-index:var(--wb-z-loading);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(255,255,255,.72);
  color:#49665E;
  font-size:12px;
  font-weight:700;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease,visibility .12s ease;
  backdrop-filter:blur(1px);
}
.azwb-page-loading.is-show{opacity:1;visibility:visible}
.azwb-page-loading i{
  width:18px;
  height:18px;
  border:2px solid #C7D8D2;
  border-top-color:var(--wb-green);
  border-radius:50%;
  animation:azwbSpin .7s linear infinite;
}
@keyframes azwbSpin{to{transform:rotate(360deg)}}

.azwb-selectionbar{
  position:absolute;
  top:50%;
  left:50%;
  z-index:var(--wb-z-selection);
  display:none;
  align-items:center;
  max-width:calc(100% - 16px);
  gap:4px;
  padding:5px;
  overflow-x:auto;
  border:1px solid #D9E5E0;
  border-radius:12px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 32px rgba(31,70,58,.16);
  transform:translate(-50%,-100%);
  backdrop-filter:blur(8px);
  scrollbar-width:none;
}
.azwb-selectionbar::-webkit-scrollbar{display:none}
.azwb-selectionbar.is-show{display:flex}
.azwb-selectionbar.is-below{transform:translate(-50%,0)}
.azwb-selectionbar [data-wb-reveal]{display:none}
.azwb-selectionbar.is-cover [data-wb-reveal]{display:grid}
.azwb-selectionbar .azwb-icon-only{
  width:34px;
  min-width:34px;
  height:32px;
  min-height:32px;
}
.azwb-selectionbar .azwb-tool__icon{width:17px;height:17px}
.azwb-object-color{
  width:30px;
  height:30px;
  flex:0 0 30px;
  padding:2px;
  border:1px solid var(--wb-line);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

.azwb-zoom{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:var(--wb-z-zoom);
  display:flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border:1px solid var(--wb-line);
  border-radius:11px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 22px rgba(31,70,58,.10);
  backdrop-filter:blur(6px);
}
.azwb-zoom .azwb-icon-only{
  width:32px;
  min-width:32px;
  height:30px;
  min-height:30px;
}
.azwb-zoom .azwb-tool__icon{width:16px;height:16px}
.azwb-zoom span{
  min-width:46px;
  color:#49675E;
  text-align:center;
  font-size:12px;
  font-weight:900;
}
@media(pointer:coarse){
 .azwb-selectionbar .azwb-icon-only{
  width:44px;min-width:44px;height:44px;min-height:44px
 }
 .azwb-selectionbar .azwb-tool__icon{width:20px;height:20px}
 .azwb-selectionbar .azwb-object-color{
  width:44px;min-width:44px;height:44px;min-height:44px;flex-basis:44px;border-radius:11px
 }
 .azwb-zoom .azwb-icon-only{
  width:44px;min-width:44px;height:44px;min-height:44px
 }
 .azwb-zoom .azwb-tool__icon{width:19px;height:19px}
 .azwb-zoom span{min-width:50px}
}

/* ---------- Inline text editor ---------- */
.azwb-inline-editor{
  position:absolute;
  z-index:var(--wb-z-editor);
  display:none;
  min-width:80px;
  min-height:48px;
  max-width:calc(100% - 16px);
  padding:8px 10px;
  resize:horizontal;
  border:2px solid var(--wb-green);
  border-radius:10px;
  outline:0;
  background:rgba(255,255,255,.99);
  color:var(--wb-green-dark);
  font-family:"Cairo",sans-serif;
  font-weight:800;
  line-height:1.45;
  box-shadow:0 12px 30px rgba(23,62,52,.16);
}
.azwb-inline-editor.is-open{display:block}

/* ---------- Toast / progress ---------- */
.azwb-toast{
  position:absolute;
  right:50%;
  bottom:58px;
  z-index:var(--wb-z-toast);
  max-width:min(440px,calc(100% - 24px));
  padding:9px 13px;
  border-radius:11px;
  background:var(--wb-green-dark);
  color:#fff;
  font-size:12px;
  font-weight:700;
  pointer-events:none;
  opacity:0;
  transform:translate(50%,10px);
  transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.azwb-toast.is-show{opacity:1;transform:translate(50%,0)}
.azwb-progress{
  position:absolute;
  inset:0;
  z-index:var(--wb-z-progress);
  display:none;
  place-items:center;
  background:rgba(248,251,250,.88);
  backdrop-filter:blur(3px);
}
.azwb-progress.is-show{display:grid}
.azwb-progress>div{
  width:min(380px,calc(100% - 32px));
  padding:20px;
  border:1px solid #DCE8E3;
  border-radius:16px;
  background:#fff;
  text-align:center;
  box-shadow:0 18px 45px rgba(25,61,50,.14);
}
.azwb-progress b,
.azwb-progress small{display:block;font-size:12px}
.azwb-progress b{font-size:14px}
.azwb-progress small{margin-top:5px;color:var(--wb-muted)}
.azwb-progress__bar{
  height:7px;
  margin-top:12px;
  overflow:hidden;
  border-radius:999px;
  background:#E7EFEC;
}
.azwb-progress__bar i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--wb-green);
  transition:width .2s ease;
}

/* ---------- Timer popover ---------- */
.azwb-popover{
  position:absolute;
  z-index:var(--azwba-z-popover,260);
  display:none;
  width:220px;
  max-width:calc(100% - 16px);
  padding:10px;
  border:1px solid #D9E5E0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 45px rgba(20,61,49,.18);
}
.azwb-popover.is-open{display:block}
.azwb-popover h4{
  margin:0 0 8px;
  color:#294C41;
  font-size:12px;
}
.azwb-popover__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.azwb-popover button{
  min-height:38px;
  padding:0 8px;
  border:1px solid var(--wb-line);
  border-radius:9px;
  background:#F8FBFA;
  color:#3D6257;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.azwb-popover button:hover{background:#EAF5F0;color:var(--wb-green)}

/* ---------- PDF-viewer pages sidebar ---------- */
.azwb-pages{
  grid-area:pages;
  position:relative;
  z-index:var(--wb-z-pages);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:258px;
  min-width:258px;
  min-height:0;
  height:100%;
  overflow:visible;
  border:0;
  border-right:1px solid #444;
  background:#282828;
  color:#F2F2F2;
  direction:ltr;
}
.azwb-pages__topbar{
  position:relative;
  z-index:var(--wb-z-pages-top);
  display:flex;
  flex:0 0 46px;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  gap:5px;
  padding:6px 7px;
  overflow:visible;
  border-bottom:1px solid #3E3E3E;
  background:#333;
}
.azwb-page-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:28px;
  padding:0 7px;
  border:1px solid #4E4E4E;
  border-radius:4px;
  background:#262626;
  color:#F5F5F5;
  direction:ltr;
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.azwb-pages__list{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-width:0;
  min-height:0;
  max-height:none;
  gap:18px;
  padding:18px 22px 24px 10px;
  overflow-x:hidden;
  overflow-y:auto;
  direction:ltr;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-gutter:stable;
  scrollbar-color:#8F8F8F #343434;
}
.azwb-pages__list::-webkit-scrollbar{width:12px;height:0}
.azwb-pages__list::-webkit-scrollbar-track{background:#343434}
.azwb-pages__list::-webkit-scrollbar-thumb{
  min-height:48px;
  border:2px solid #343434;
  border-radius:999px;
  background:#8F8F8F;
}
.azwb-pages__list::-webkit-scrollbar-thumb:hover{background:#A7A7A7}
.azwb-page{
  position:relative;
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  width:132px;
  min-width:0;
  max-width:132px;
  min-height:0;
  height:auto;
  gap:7px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  color:#F1F1F1;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:opacity .14s ease,transform .14s ease;
}
.azwb-page:hover{background:transparent}
.azwb-page:focus-visible{
  outline:2px solid #8AB4F8;
  outline-offset:5px;
}
.azwb-page.is-active{background:transparent;color:#fff}
.azwb-page.is-dragging{opacity:.38;transform:scale(.985)}
.azwb-page.is-drop-before::before,
.azwb-page.is-drop-after::after{
  content:"";
  position:absolute;
  z-index:var(--wb-z-drop);
  left:2px;
  right:2px;
  height:3px;
  border-radius:999px;
  background:#8AB4F8;
  box-shadow:0 0 0 2px rgba(138,180,248,.20);
  pointer-events:none;
}
.azwb-page.is-drop-before::before{top:-10px}
.azwb-page.is-drop-after::after{bottom:-10px}
.azwb-page__thumb{
  display:block;
  width:96px;
  max-width:96px;
  height:auto;
  aspect-ratio:.7071;
  border:2px solid transparent;
  border-radius:1px;
  background-color:#fff;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  box-shadow:0 1px 5px rgba(0,0,0,.42);
  transition:border-color .14s ease,box-shadow .14s ease;
}
.azwb-page:hover .azwb-page__thumb{border-color:#777}
.azwb-page.is-active .azwb-page__thumb{
  border-color:#8AB4F8;
  box-shadow:0 0 0 2px rgba(138,180,248,.18),0 2px 8px rgba(0,0,0,.48);
}
.azwb-page b{
  display:block;
  width:auto;
  height:auto;
  min-width:0;
  margin:0;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#F3F3F3;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
}
.azwb-page.is-active b{background:transparent;color:#fff}
.azwb-page span{display:none}
.azwb-page-rename{
  width:116px;
  max-width:116px;
  min-width:0;
  min-height:32px;
  padding:4px 6px;
  border:1px solid #8AB4F8;
  border-radius:4px;
  background:#fff;
  color:#222;
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.azwb-page-nav,
.azwb-page-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:auto;
  min-width:0;
  gap:3px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  direction:rtl;
}
.azwb-page-actions{position:relative;z-index:var(--wb-z-page-actions)}
.azwb-page-more-menu{
  position:absolute;
  top:calc(100% + 7px);
  inset-inline-end:0;
  z-index:var(--azwba-z-popover,260);
  display:none;
  width:164px;
  padding:5px;
  border:1px solid #505050;
  border-radius:8px;
  background:#303030;
  box-shadow:0 12px 28px rgba(0,0,0,.34);
  direction:rtl;
}
.azwb-page-more-menu.is-open{display:grid;gap:2px}
.azwb-page-more-menu button{
  display:flex;
  align-items:center;
  width:100%;
  min-height:34px;
  gap:8px;
  padding:0 9px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#ECECEC;
  font:700 12px/1.2 "Cairo",sans-serif;
  text-align:right;
  cursor:pointer;
}
.azwb-page-more-menu button:hover:not(:disabled){background:#414141;color:#fff}
.azwb-page-more-menu button:disabled{opacity:.38;cursor:not-allowed}
.azwb-page-more-menu button.is-danger{color:#F0A6A3}
.azwb-page-more-menu .azwb-tool__icon{width:16px;height:16px;flex:0 0 16px}
.azwb-page-actions .azwb-page-btn,
.azwb-page-nav-btn{
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  border:1px solid #515151;
  border-radius:4px;
  background:#3C3C3C;
  color:#E8E8E8;
}
.azwb-page-actions .azwb-page-btn:hover:not(:disabled),
.azwb-page-nav-btn:hover:not(:disabled){
  border-color:#707070;
  background:#4A4A4A;
  color:#fff;
}
.azwb-page-actions .azwb-tool__icon,
.azwb-page-nav-btn .azwb-tool__icon{width:15px;height:15px}
.azwb-page[aria-disabled="true"]{cursor:not-allowed;opacity:.66}

/* ---------- Global tooltip portal ---------- */
.azwb-global-tooltip{
  position:fixed;
  z-index:var(--azwba-z-global-tooltip,10050);
  display:block;
  max-width:min(280px,calc(100vw - 16px));
  padding:6px 9px;
  border-radius:8px;
  background:#173E34;
  color:#fff;
  direction:rtl;
  text-align:center;
  font:700 12px/1.45 "Cairo",sans-serif;
  white-space:normal;
  overflow-wrap:anywhere;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(3px);
  box-shadow:0 8px 24px rgba(23,62,52,.22);
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.azwb-global-tooltip::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  border:5px solid transparent;
  border-top-color:#173E34;
  transform:translateX(-50%);
}
.azwb-global-tooltip.is-show{opacity:1;visibility:visible;transform:none}
.azwb-global-tooltip.is-below::after{
  top:auto;
  bottom:100%;
  border-top-color:transparent;
  border-bottom-color:#173E34;
}
.azwb-shell:fullscreen{
  width:100vw;
  height:100dvh;
  min-height:100dvh;
  background:#EEF4F1;
}
.azwb-shell:fullscreen .azwb-toolbar{top:0}
.azwb-shell:fullscreen .azwb-workspace{height:calc(100dvh - 132px);max-height:none}
.azwb-shell:fullscreen .azwb-stage-scroll{padding:6px}
.azwb-shell:fullscreen .azwb-canvas-frame:not(.is-page-ratio){
  width:min(100%,calc((100dvh - 160px) * 16 / 9));
}
.azwb-shell:fullscreen .azwb-pages{bottom:0}

/* ---------- Tablet ---------- */
@media(max-width:1180px) and (min-width:761px){
  .azwb-shell{--wb-btn:36px}
  .azwb-workspace{grid-template-columns:220px minmax(0,1fr)}
  .azwb-pages{width:220px;min-width:220px}
  .azwb-pages__topbar{gap:3px;padding-inline:5px}
  .azwb-page-actions,.azwb-page-nav{gap:2px}
  .azwb-page-actions .azwb-page-btn,.azwb-page-nav-btn{width:24px;min-width:24px;height:27px;min-height:27px}
  .azwb-page{width:124px;max-width:124px}
  .azwb-page__thumb{width:92px;max-width:92px}
  .azwb-page-rename{width:110px;max-width:110px}
  .azwb-toolbar-row--write{gap:5px}
  .azwb-toolbar__tools{
    grid-template-columns:repeat(12,var(--wb-btn));
    grid-template-rows:var(--wb-btn);
    gap:2px;
  }
  .azwb-toolbar__style{gap:4px;padding:4px 5px}
  .azwb-color{width:26px;min-width:26px;height:26px}
  .azwb-size{width:80px;min-width:70px}
  .azwb-toolbar__actions{gap:4px}
  .azwb-teacher-toggle{width:68px;min-width:68px}
}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .azwb-shell{
    --wb-btn:44px;
    min-height:0;
  }
  .azwb-toolbar{gap:5px;padding:5px}
  .azwb-toolbar-row--control{display:none;order:1}
  .azwb-toolbar-row--write{
    order:2;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:5px;
    overflow:visible;
    padding:0;
    direction:rtl;
  }
  .azwb-toolbar__tools{
    order:1;
    grid-template-columns:repeat(4,var(--wb-btn));
    grid-template-rows:repeat(3,var(--wb-btn));
    grid-auto-flow:row;
    width:max-content;
    max-width:100%;
    gap:3px;
    margin-inline-start:auto;
    padding:4px;
  }
  .azwb-toolbar__style,
  .azwb-toolbar__actions{display:none}
  .azwb-mobilebar{
    order:3;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    gap:4px;
    padding:4px;
    border:1px solid #E1EBE7;
    border-radius:11px;
    background:#FAFCFB;
    direction:rtl;
  }
  .azwb-shell.is-mobile-options .azwb-toolbar-row--control{display:flex}
  .azwb-shell.is-mobile-options .azwb-toolbar__style{
    order:2;
    display:flex;
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }
  .azwb-shell.is-mobile-options .azwb-toolbar__actions{
    order:3;
    display:flex;
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }
  .azwb-shell.is-mobile-options .azwb-toolbar__teacher{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"session access";
    width:100%;
    gap:8px;
  }
  .azwb-toolbar__teacher{display:none}
  .azwb-teacher-group{padding:4px}
  .azwb-statusline{padding:5px 8px}
  .azwb-statusline__right{display:none}
  .azwb-statusline__left{width:100%;justify-content:space-between}
  .azwb-stage-scroll{
    height:clamp(460px,62dvh,640px);
    padding:20px 18px 28px;
  }
  .azwb-canvas-frame{border-radius:2px}
  .azwb-selectionbar{max-width:calc(100% - 12px)}
  .azwb-selectionbar .azwb-icon-only{width:40px;min-width:40px;height:40px;min-height:40px}
  .azwb-object-color{width:40px;height:40px;flex-basis:40px}
  .azwb-zoom{left:6px;bottom:6px}
  .azwb-zoom .azwb-icon-only{width:38px;min-width:38px;height:38px;min-height:38px}
  .azwb-workspace{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"stage" "pages";
    height:auto;
    max-height:none;
    background:#2B2B2B;
  }
  .azwb-pages{
    width:100%;
    min-width:0;
    height:clamp(250px,36dvh,330px);
    border-top:1px solid #444;
    border-right:0;
  }
  .azwb-pages__topbar{
    flex:0 0 52px;
    justify-content:center;
    overflow-x:auto;
    overflow-y:hidden;
    padding:7px 8px;
  }
  .azwb-pages__list{
    max-height:none;
    gap:16px;
    padding:16px 16px 20px 8px;
  }
  .azwb-page-actions{gap:3px}
  .azwb-page-actions .azwb-page-btn,
  .azwb-page-nav-btn{
    width:32px;
    min-width:32px;
    height:34px;
    min-height:34px;
  }
  .azwb-page{
    width:130px;
    max-width:130px;
  }
  .azwb-page__thumb{width:96px;max-width:96px}
  .azwb-inline-editor{min-width:130px}
}

@media(max-width:520px){
  .azwb-help{display:none}
  .azwb-toast{bottom:50px}
  .azwb-board-lock{top:8px;left:8px}
  .azwb-timer{top:8px;right:8px}
  .azwb-selectionbar{
    flex-wrap:wrap;
    justify-content:center;
    overflow:visible;
    row-gap:4px;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .azwb-shell{min-height:0;--wb-btn:34px}
  .azwb-toolbar{padding:3px 5px}
  .azwb-toolbar-row--write{overflow-x:auto;flex-wrap:nowrap}
  .azwb-toolbar__tools{
    grid-template-columns:repeat(12,var(--wb-btn));
    grid-template-rows:var(--wb-btn);
    grid-auto-flow:column;
  }
  .azwb-statusline{display:none}
  .azwb-stage-scroll{height:clamp(300px,66dvh,420px);padding:14px 16px 20px}
  .azwb-pages{height:176px;padding-bottom:max(3px,env(safe-area-inset-bottom))}
  .azwb-pages__topbar{flex-basis:44px;padding-block:5px}
  .azwb-pages__list{max-height:none;gap:10px;padding:10px 12px 12px 6px}
  .azwb-page{width:104px;max-width:104px;min-height:0;height:auto}
  .azwb-page__thumb{width:78px;max-width:78px;height:auto}
}

/* ---------- Motion preferences ---------- */
@media(prefers-reduced-motion:reduce){
  .azwb-shell *,
  .azwb-shell *::before,
  .azwb-shell *::after,
  .azwb-global-tooltip{
    scroll-behavior:auto;
    transition:none;
    animation-duration:.001ms;
    animation-iteration-count:1;
  }
}