@font-face{font-family:MasahaArabic;src:url('/fonts/NotoSansArabic.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--brown:#4a2e1b;--cream:#faf7f2;--line:#e9ddd0}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:MasahaArabic,Arial,sans-serif;background:var(--cream);color:var(--brown);display:flex;flex-direction:column;height:100dvh}
.hub-header{flex:none;display:flex;align-items:center;gap:20px;padding:14px 24px;background:#fffdf9;border-bottom:1px solid var(--line);box-shadow:0 3px 18px #4a2e1b08;position:relative;z-index:1}
.hub-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hub-logo{display:grid;place-items:center;flex-shrink:0;background:#f1e5d7;border-radius:16px;width:44px;height:44px}
.hub-logo svg{display:block;width:24px;height:28px}
.hub-brand strong{font-size:23px;line-height:1.2}
.hub-brand p{font-size:11px;margin:4px 0 0;color:#927b68}
.demo-badge{font-size:11px;border:1px solid var(--line);border-radius:99px;padding:5px 10px;white-space:nowrap}
.hub-tabs{display:flex;gap:6px;padding:5px;background:#f4ede4;border-radius:16px;margin-inline-start:auto;min-width:0}
.hub-tabs button{font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;min-height:44px;padding:8px 22px;border:0;border-radius:12px;background:transparent;color:#79614e;transition:background .18s,color .18s,box-shadow .18s}
.hub-tabs button[aria-selected=true]{background:var(--brown);color:white;box-shadow:0 3px 8px #4a2e1b1a}
.hub-tabs button:hover{background:#eaddce;color:var(--brown)}
.hub-tabs button[aria-selected=true]:hover{background:#593820;color:white}
.hub-tabs button:focus-visible{outline:3px solid #c28b4e;outline-offset:3px}
.hub-workspace{flex:1;min-height:0;min-width:0}
.hub-workspace section{height:100%;width:100%;position:relative}
.hub-workspace [hidden]{display:none}
.hub-workspace iframe{display:block;width:100%;height:100%;border:0;background:var(--cream)}
@media(max-width:760px){.hub-header{flex-wrap:wrap;gap:10px;padding:12px}.hub-brand strong{font-size:20px}.demo-badge{margin-inline-start:auto}.hub-tabs{width:100%;margin:0}.hub-tabs button{flex:1;min-width:0;font-size:13px;padding:8px 5px}.hub-brand p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hub-tabs button{transition:none}}

.hub-loading{position:absolute;top:18px;left:50%;transform:translateX(-50%);margin:0;padding:10px 18px;background:#fffdf9;border:1px solid var(--line);border-radius:12px;color:var(--brown);font-size:14px;white-space:nowrap;pointer-events:none}