/* QC.AE — shared theme, matched to hayaal.com/sign (light, Cairo, Apple-blue accent). */
:root{
  --ac:#0a84ff;--bg:#eef1f6;--card:#fff;--ink:#1c1c1e;--muted:#737380;--line:#e2e5ec;
  --ok:#16a34a;--down:#e5484d;--warn:#d97706;--radius:16px;--rsm:11px;
}
[data-theme="dark"]{--bg:#0f1620;--card:#19222e;--ink:#e7edf5;--muted:#93a1b2;--line:#2a3744;}
[data-theme="dark"] body{background:var(--bg);color:var(--ink);}
[data-theme="dark"] .topbar{background:rgba(16,24,34,.88);}
[data-theme="dark"] .botbar{background:rgba(16,24,34,.92);}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .btn.sec{background:#11202c;color:var(--ink);}
[data-theme="dark"] .btn.danger{background:#11202c;}
[data-theme="dark"] .seg{background:#0e1622;}
[data-theme="dark"] .hub,[data-theme="dark"] .picksheet,[data-theme="dark"] .pickitem,[data-theme="dark"] .doctile,[data-theme="dark"] .asset,[data-theme="dark"] .bizcard,[data-theme="dark"] .sect,[data-theme="dark"] .brandtile,[data-theme="dark"] .prev,[data-theme="dark"] .ritem,[data-theme="dark"] .scanrow{background:var(--card);}
[data-theme="dark"] .pickitem .pthumb,[data-theme="dark"] .asset .ph,[data-theme="dark"] .prev .th,[data-theme="dark"] .brandtile .bph{background:#11202c;}
[data-theme="dark"] .hub-row:hover,[data-theme="dark"] .navlinks a:hover,[data-theme="dark"] .docrow .da a:hover,[data-theme="dark"] .docrow .da button:hover,[data-theme="dark"] .botbar .bb:hover{background:rgba(255,255,255,.06);}
[data-theme="dark"] .note{background:#16202c;}
[data-theme="dark"] .kv,[data-theme="dark"] .docrow,[data-theme="dark"] .r{border-color:#243140;}
*{box-sizing:border-box;} html,body{margin:0;}
body{font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100dvh;-webkit-font-smoothing:antialiased;}
a{color:var(--ac);} img{max-width:100%;}

/* top bar — frosted, sticky */
@view-transition{navigation:auto;}   /* smooth cross-page navigation (modern browsers) — softens the multi-page reload flash */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.02rem;}
.brand .mk{width:30px;height:30px;border-radius:8px;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;letter-spacing:-.5px;}
.brand small{display:block;font-weight:600;font-size:.55rem;color:var(--muted);letter-spacing:.5px;}
.sp{margin-inline-start:auto;}
.navlinks{display:flex;gap:4px;margin-inline-start:16px;align-items:center;flex-wrap:wrap;}
.navlinks a,.navlinks button{color:var(--muted);text-decoration:none;font-weight:600;font-size:.88rem;padding:8px 12px;border-radius:10px;white-space:nowrap;background:none;border:0;font-family:inherit;cursor:pointer;}
.navlinks a:hover{color:var(--ink);background:rgba(0,0,0,.04);}
.lang{font-size:.8rem;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-weight:700;}
.topbar select{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--rsm);padding:8px 11px;font:inherit;font-weight:600;max-width:190px;text-overflow:ellipsis;}

main{max-width:920px;margin:0 auto;padding:20px 16px 64px;}
main.narrow{max-width:460px;}
.wrap{max-width:920px;margin:18px auto;padding:0 14px;}
h1{font-size:1.5rem;font-weight:800;letter-spacing:-.3px;margin:6px 0 16px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
label{display:block;font-size:.82rem;color:var(--muted);font-weight:600;margin:12px 0 5px;}
input,select,textarea{width:100%;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--rsm);padding:12px 13px;font:inherit;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent);}
input[type=checkbox],input[type=radio]{width:auto;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:13px;padding:13px 18px;font:inherit;font-weight:700;cursor:pointer;background:var(--ac);color:#fff;width:100%;text-decoration:none;}
.btn:active{transform:scale(.99);} .btn:disabled{opacity:.5;cursor:default;}
.btn.sec{background:#fff;border:1px solid var(--line);color:var(--ink);}
.btn.sm{width:auto;padding:9px 14px;font-size:.86rem;border-radius:10px;}
.btn.danger{background:#fff;border:1px solid color-mix(in srgb,var(--down) 40%,var(--line));color:var(--down);}
.muted{color:var(--muted);} .small{font-size:.85rem;} .center{text-align:center;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.err{background:color-mix(in srgb,var(--down) 10%,#fff);border:1px solid color-mix(in srgb,var(--down) 35%,transparent);color:var(--down);border-radius:11px;padding:11px 13px;font-size:.88rem;margin-bottom:12px;}
.note{background:color-mix(in srgb,var(--ac) 9%,#fff);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);border-radius:11px;padding:11px 13px;font-size:.88rem;line-height:1.5;margin-bottom:12px;}
.foot{text-align:center;color:var(--muted);font-size:.76rem;padding:24px 0 8px;}
.foot .lsw a{color:var(--ac);text-decoration:none;} .foot .lsw .on{font-weight:700;color:var(--ink);}

/* ---- account/business chrome: corner avatar + hub (dropdown desktop / sheet mobile) + mobile bottom nav ---- */
#bizSel,.topbar .navlinks #logout{display:none;}    /* the dropdown + sign-out move into the avatar hub */
.qc-chrome .topbar .navlinks{display:none;}    /* each page's own links hide — the injected .tb-nav is the one consistent nav */
.tb-nav{display:flex;align-items:center;gap:2px;}
.tb-nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.9rem;padding:8px 13px;border-radius:10px;white-space:nowrap;}
.tb-nav a:hover{color:var(--ink);background:rgba(0,0,0,.05);}
.tb-nav a.cur{color:var(--ink);background:color-mix(in srgb,var(--ac) 12%,transparent);}
[data-theme="dark"] .tb-nav a:hover{background:rgba(255,255,255,.06);}
.tb-right{margin-inline-start:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto;}
.tb-biz{font-size:.82rem;color:var(--muted);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-av{width:32px;height:32px;border-radius:50%;background:var(--ac);color:#fff;border:0;font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.hub-bd{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;} .hub-bd.open{display:block;}
.hub{display:none;position:fixed;z-index:61;top:54px;inset-inline-end:12px;width:300px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.18);padding:10px;}
.hub.open{display:block;} .hub-grip{display:none;}
.hub-lbl{font-size:.72rem;color:var(--muted);font-weight:700;margin:4px 6px;}
.hub-row{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;width:100%;background:none;border:0;font:inherit;font-size:.9rem;cursor:pointer;text-align:start;}
.hub-row:hover{background:rgba(0,0,0,.04);} .hub-row svg{width:19px;height:19px;color:var(--muted);flex:0 0 auto;}
.hub-row.accent{color:var(--ac);} .hub-row.danger{color:var(--down);} .hub-row.danger svg{color:var(--down);}
.hub-row.biz.on{background:color-mix(in srgb,var(--ac) 9%,var(--card));} .hub-row.biz.on svg{color:var(--ac);}
[data-theme="dark"] .hub-row.biz.on{background:color-mix(in srgb,var(--ac) 24%,var(--card));}
.hub-badge{width:26px;height:26px;border-radius:7px;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:0 0 auto;}
.hub-bn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hub-plus{width:26px;height:26px;border-radius:7px;border:1px dashed color-mix(in srgb,var(--ac) 50%,var(--line));display:flex;align-items:center;justify-content:center;color:var(--ac);font-weight:800;font-size:1.1rem;line-height:1;flex:0 0 auto;}
.hub-div{height:1px;background:var(--line);margin:8px 4px;}
.hub-head{display:flex;align-items:center;gap:11px;padding:6px 6px 10px;}
.hub-av{width:38px;height:38px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;}
.hub-name{font-weight:700;font-size:.92rem;} .hub-email{font-size:.78rem;color:var(--muted);word-break:break-all;}
.botbar{display:none;}
@media(max-width:640px){
  .topbar .navlinks a,.topbar .navlinks button{display:none;}
  .topbar .navlinks{gap:0;} .tb-biz{max-width:38vw;} .tb-nav{display:none;}
  .wrap,main{padding-bottom:calc(82px + env(safe-area-inset-bottom));}
  .hub{top:auto;bottom:0;inset-inline:0;width:auto;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;padding:8px 14px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.25);transform:translateY(100%);transition:transform .2s;display:block;}
  .hub.open{transform:translateY(0);} .hub-grip{display:block;width:34px;height:4px;border-radius:999px;background:var(--line);margin:6px auto 10px;}
  .botbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--line);justify-content:space-around;align-items:stretch;padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .botbar .bb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:var(--muted);text-decoration:none;font:inherit;font-size:.62rem;font-weight:600;padding:4px 2px;border-radius:10px;cursor:pointer;}
  .botbar .bb svg{width:24px;height:24px;} .botbar .bb .lb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .botbar .bb.on{color:var(--ac);}
}

/* segmented control (login/register) */
.seg{display:flex;gap:6px;margin:4px 0 4px;background:#eceef4;border-radius:12px;padding:4px;}
.seg button{flex:1;border:none;background:none;color:var(--muted);font-weight:700;padding:9px;border-radius:9px;cursor:pointer;font-family:inherit;}
.seg button.on{background:var(--ac);color:#fff;}

/* ---- signer editor ---- */
.sgn-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;}
.sgn-stage{position:relative;display:inline-block;max-width:100%;margin:6px 0 2px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;line-height:0;}  /* NOTE: no touch-action:none here — it blocked touch-scroll over the whole document; the drag-lock lives on .sgn-item only, so touching empty document area now scrolls the page */
.sgn-stage canvas#sgnPage{display:block;max-width:100%;height:auto;}
.sgn-item{position:absolute;cursor:move;touch-action:none;border:1px dashed color-mix(in srgb,var(--ac) 70%,transparent);}
.sgn-item canvas{display:block;width:100%;height:auto;pointer-events:none;}
.sgn-item .sgn-rz{position:absolute;right:-9px;bottom:-9px;width:22px;height:22px;border-radius:50%;background:var(--ac);border:2px solid #fff;cursor:nwse-resize;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.sgn-item .sgn-rm{position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;background:var(--down);color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;}
[dir=rtl] .sgn-item .sgn-rz{right:auto;left:-9px;cursor:nesw-resize;} [dir=rtl] .sgn-item .sgn-rm{left:auto;right:-9px;}
.sgn-item .sgn-cal{position:absolute;left:50%;transform:translateX(-50%);bottom:-13px;min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:#5e5ce6;color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.sgn-actions{display:flex;gap:10px;margin-top:14px;} .sgn-actions .btn{flex:1;}
.sgn-busy{opacity:.6;pointer-events:none;}

/* picker sheet */
.pickbd{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;}
.picksheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:301;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.3);width:min(92vw,440px);max-height:80vh;overflow:auto;padding:18px;}
.pickhd{font-weight:800;margin-bottom:12px;} .pickgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.pickitem{border:1px solid var(--line);border-radius:12px;padding:14px 8px;background:#fff;cursor:pointer;text-align:center;font-weight:800;}
.pickitem:hover{border-color:var(--ac);}
.pickitem .pthumb{height:54px;display:flex;align-items:center;justify-content:center;background:#f7f7f9;border-radius:8px;overflow:hidden;margin-bottom:6px;}
.pickitem .pthumb img{max-width:100%;max-height:50px;object-fit:contain;}
.pickitem .pl{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* asset manager grid */
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.asset{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;text-align:center;}
.asset .ph{height:90px;display:flex;align-items:center;justify-content:center;background:#f7f7f9;border-radius:8px;overflow:hidden;margin-bottom:8px;}
.asset .ph img{max-width:100%;max-height:84px;object-fit:contain;}
.asset .al{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asset .ad{font-size:.74rem;color:var(--down);cursor:pointer;margin-top:6px;display:inline-block;}

/* success */
.okwrap{text-align:center;padding:10px;} .okwrap .big{font-size:48px;}
.okwrap .vlink{word-break:break-all;font-family:ui-monospace,Consolas,monospace;font-size:.8rem;background:#f3f4f6;padding:8px;border-radius:8px;display:inline-block;margin:8px 0;}
#okQr{margin:10px auto;display:block;width:150px;height:150px;}