/* Owner Dashboard → Login & security (owner-security.js), reproducing Moataz's approved 2026-11-07 mockup.
   Desktop sizes are measured from the mockup at 1536×1024 (shell header 72px, sidebar from x=1268):
   hero 216px with a 40px title; tiles 62px tall from y≈211; password + options cards 364px tall from y≈301;
   side column 330px wide (162 / 142 / 140 / 152px cards, 16px apart, starting 12px lower); login activity 300px.
   Palette: deep navy #10283D, header #08243A, sidebar #071E32, primary navy #203D4E, luxury gold #C7A250,
   gold gradient #E0B755 → #B98412, background #F5F7F9, white #FFFFFF; status colours from his brief. */
.osec-view{--sx-ink:var(--os-ink,#10283D);--sx-muted:var(--os-muted,#64748B);--sx-navy:var(--os-navy,#203D4E);--sx-deep:#10283D;--sx-head:var(--os-header,#08243A);
  --sx-gold:var(--os-gold,#C7A250);--sx-gold-l:#E0B755;--sx-gold-d:#B98412;--sx-gold-grad:var(--os-gold-grad,linear-gradient(135deg,#E0B755 0%,#B98412 100%));--sx-active:#D6A52B;
  --sx-bg:var(--os-bg,#F5F7F9);--sx-card:var(--os-card,#FFFFFF);--sx-panel:#F1F3F6;--sx-line:var(--os-line,#E0E5EB);--sx-field:#D5DDE6;
  --sx-ok:#16A34A;--sx-ok2:#22C55E;--sx-ok-bg:#EAF8EE;--sx-warn:#F3B544;--sx-warn-ink:#8A5A00;--sx-warn-bg:#FFF4D9;--sx-bad:#DC2626;--sx-bad-bg:#FDECEC;--sx-info:#2563EB;--sx-off:#CBD5E1;
  --sx-shadow:0 10px 28px -16px rgba(16,40,61,.30),0 2px 6px -2px rgba(16,40,61,.06);
  background:var(--sx-bg);color:var(--sx-ink)}
.osec-view .sx-ic{width:22px;height:22px;flex:none}
.osec-page{padding:0 0 32px;min-width:0}
html[lang="ar"] .osec-view,html[dir="rtl"] .osec-view,html[dir="rtl"] .osec-dlg{font-family:Cairo,'Segoe UI',Tahoma,sans-serif}
html[dir="ltr"] .osec-view,html[dir="ltr"] .osec-dlg{font-family:Inter,'Segoe UI',system-ui,sans-serif}
.osec-view h1,.osec-view h2,.osec-view h3,.osec-dlg h2,.osec-dlg h3{font-family:inherit;letter-spacing:0}
.osec-card{background:var(--sx-card);border:1px solid #E7ECF1;border-radius:16px;box-shadow:var(--sx-shadow);min-width:0;position:relative}
.osec-muted{color:var(--sx-muted)}
.osec-small{font-size:.86rem}

/* ---------- hero ---------- */
.osec-hero{position:relative;height:216px;padding:13px 33px 0;overflow:hidden;color:#fff;background:var(--sx-bg)}
.osec-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:142px;
  background:linear-gradient(270deg,rgba(8,36,58,.92) 0%,rgba(8,36,58,.78) 26%,rgba(8,36,58,.18) 44%,rgba(8,36,58,0) 56%),url('/img/owner/security-hero.webp') left top/1268px 142px no-repeat,#123651}
html[dir="ltr"] .osec-hero::before{transform:scaleX(-1)}
.osec-hero::after{content:"";position:absolute;inset:118px 0 0 0;background:linear-gradient(180deg,rgba(245,247,249,0) 0%,rgba(229,235,241,.85) 42%,var(--sx-bg) 78%)}
.osec-hero-text{position:relative;z-index:1}
.osec-view .osec-hero h1{display:flex;align-items:center;gap:22px;margin:0;color:#fff;font-size:40px;line-height:50px;font-weight:800}
.osec-hero h1 .sx-ic{width:54px;height:54px;color:var(--sx-gold-l);stroke-width:1.7}
.osec-view .osec-hero p{margin:6px 0 0;font-size:22px;line-height:32px;color:rgba(255,255,255,.95);font-weight:500}

/* ---------- tiles (account tabs) ---------- */
.osec-tabs-wrap{position:relative;z-index:2;margin:-77px 33px 0 75px}
html[dir="ltr"] .osec-tabs-wrap{margin:-77px 75px 0 33px}
.osec-tabs{display:grid;grid-template-columns:221fr 220fr 218fr 211fr 262fr;gap:10px;list-style:none;margin:0;padding:0}
.osec-tab{display:flex;align-items:center;justify-content:center;gap:14px;height:62px;padding:0 12px;border-radius:12px;background:#fff;border:1px solid #E6EBF0;
  color:var(--sx-ink);font-weight:800;font-size:18px;text-decoration:none;box-shadow:0 10px 24px -14px rgba(16,40,61,.45);transition:background-color .15s ease}
.osec-tab .sx-ic{width:28px;height:28px;stroke-width:1.6;color:var(--sx-ink)}
.osec-tab:hover{background:#FBFCFD}
.osec-tab:focus-visible{outline:3px solid var(--sx-active);outline-offset:2px}
.osec-tab.is-active{background:var(--sx-gold-grad);border-color:transparent;color:#fff;box-shadow:0 12px 24px -12px rgba(185,132,18,.85)}
.osec-tab.is-active .sx-ic{color:#fff}

/* ---------- main grid ---------- */
.osec-grid{display:grid;grid-template-columns:minmax(0,1fr) 432px 330px;grid-template-rows:364px auto;grid-template-areas:"pw opts side" "act act side";
  column-gap:15px;row-gap:16px;margin:28px 22px 0 17px;align-items:start}
html[dir="ltr"] .osec-grid{margin:28px 17px 0 22px}
.osec-pw{grid-area:pw;height:364px}.osec-opts{grid-area:opts;min-height:364px}.osec-act{grid-area:act}
.osec-side{grid-area:side;display:flex;flex-direction:column;gap:16px;padding-top:12px}

/* card header with the gold icon and a hairline under it (password, options) */
.osec-pw h2,.osec-opts h2{display:flex;align-items:center;gap:14px;margin:0;padding:0 26px;height:62px;font-size:23px;font-weight:800;color:var(--sx-ink);border-bottom:1px solid #EDF1F5}
.osec-pw h2 .sx-ic,.osec-opts h2 .sx-ic{width:32px;height:32px;color:var(--sx-gold);stroke-width:1.7}

/* ---------- password ---------- */
#osecPwForm{padding:6px 28px 0 30px}
html[dir="ltr"] #osecPwForm{padding:6px 30px 0 28px}
.osec-field{display:block;margin:0 0 7px}
.osec-lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:800;font-size:15px;line-height:22px;margin-bottom:3px;color:var(--sx-ink)}
.osec-lab .req{color:var(--sx-bad)}
.osec-input{position:relative;display:block}
.osec-input input{width:100%;height:37px;min-height:0;margin:0;border:1px solid var(--sx-field);border-radius:10px;background:#fff;padding:0 14px;padding-inline-end:50px;font:inherit;font-size:15px;color:var(--sx-ink);box-sizing:border-box;letter-spacing:.06em}
.osec-input input::placeholder{color:var(--sx-ink);opacity:1;letter-spacing:.12em;font-weight:700}
html[dir="rtl"] .osec-input input{text-align:right;padding-left:50px;padding-right:14px}
.osec-input input:focus{outline:none;border-color:var(--sx-gold);box-shadow:0 0 0 3px rgba(199,162,80,.22)}
.osec-input input:focus::placeholder{opacity:.25}
.osec-input input[aria-invalid="true"]{border-color:var(--sx-bad)}
.osec-eye{position:absolute;inset-block:0;inset-inline-end:6px;width:40px;display:grid;place-items:center;background:none;border:0;color:#475569;cursor:pointer;border-radius:8px}
.osec-eye .sx-ic{width:20px;height:20px}
.osec-eye:focus-visible{outline:2px solid var(--sx-gold);outline-offset:-2px}
.osec-meter{display:flex;align-items:center;gap:14px;margin:0 0 4px;height:16px}
.osec-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1}
.osec-bars i{display:block;height:6px;border-radius:99px;background:#DCE3EA}
.osec-meter[data-s="1"] .osec-bars i:nth-child(-n+1){background:var(--sx-bad)}
.osec-meter[data-s="2"] .osec-bars i:nth-child(-n+2){background:var(--sx-warn)}
.osec-meter[data-s="3"] .osec-bars i:nth-child(-n+3){background:var(--sx-ok2)}
.osec-meter[data-s="4"] .osec-bars i{background:var(--sx-ok)}
.osec-meter b{font-size:15px;font-weight:800;min-width:62px;text-align:end}
.osec-meter[data-s="1"] b{color:var(--sx-bad)}.osec-meter[data-s="2"] b{color:var(--sx-warn-ink)}.osec-meter[data-s="3"] b,.osec-meter[data-s="4"] b{color:var(--sx-ok)}
.osec-code{background:var(--sx-panel);border:1px solid var(--sx-line);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.osec-code p{margin:0 0 6px;font-size:13px;line-height:1.45}
.osec-err{color:var(--sx-bad);font-weight:700;font-size:13px;margin:0 0 6px}
.osec-err:empty{display:none}
.osec-note{color:var(--sx-muted)}
.osec-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 22px;border-radius:12px;border:1px solid transparent;font:inherit;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none}
.osec-btn .sx-ic{width:22px;height:22px}
.osec-btn:focus-visible{outline:3px solid var(--sx-active);outline-offset:2px}
.osec-btn[disabled]{opacity:.6;cursor:progress}
.osec-gold{background:var(--sx-gold-grad);color:#fff;box-shadow:0 10px 22px -12px rgba(185,132,18,.85)}
.osec-gold:hover{filter:brightness(1.04)}
.osec-wide{width:calc(100% + 30px);margin-inline:-15px;height:44px;border-radius:14px;margin-top:9px}
.osec-line{background:#fff;border-color:var(--sx-line);color:var(--sx-ink)}
.osec-line:hover{background:var(--sx-panel)}
.osec-danger{background:var(--sx-bad);color:#fff}
.osec-dangerline{background:#fff;border-color:#F3C2C2;color:var(--sx-bad)}
.osec-dangerline:hover{background:var(--sx-bad-bg)}
.osec-forgot{font-weight:600;font-size:12.5px;color:var(--sx-info);text-decoration:none}
.osec-forgot:hover{text-decoration:underline}

/* ---------- security options ---------- */
.osec-opts .osec-opt{display:flex;align-items:center;gap:14px;min-height:69px;margin:0 22px 0 22px;padding:0;border-bottom:1px solid #EDF1F5}
.osec-opts .osec-opt:last-child{border-bottom:0}
.osec-opt>.sx-ic{width:30px;height:30px;color:var(--sx-ink);stroke-width:1.5}
.osec-opt-main{flex:1;min-width:0}
.osec-opt-main b{display:block;font-size:16.5px;line-height:24px;font-weight:800}
.osec-opt-main small{display:block;color:var(--sx-muted);font-size:13px;line-height:19px;font-weight:500}
.osec-opt-main small.osec-unsup{color:var(--sx-warn-ink)}
.osec-switch{position:relative;width:47px;height:25px;flex:none;border-radius:999px;border:0;padding:0;cursor:pointer;background:var(--sx-off);transition:background-color .18s ease;margin-inline-start:6px}
.osec-switch::after{content:"";position:absolute;top:2.5px;inset-inline-start:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:inset-inline-start .18s ease}
.osec-switch[aria-checked="true"]{background:linear-gradient(180deg,#22B04E,#16A34A)}
.osec-switch[aria-checked="true"]::after{inset-inline-start:24.5px}
.osec-switch:focus-visible{outline:3px solid var(--sx-active);outline-offset:2px}
.osec-switch[aria-busy="true"]{opacity:.6;cursor:progress}
.osec-switch[aria-disabled="true"]:not([data-locked]){cursor:not-allowed;opacity:.6}
.osec-switch[data-locked]{cursor:help}

/* ---------- side column ---------- */
.osec-score{height:162px;padding:14px 20px 0 18px;background:linear-gradient(135deg,#10283D 0%,#0B2033 100%);border:0;color:#fff}
.osec-score-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.osec-score h2{margin:0;color:#fff;font-size:22px;line-height:32px;font-weight:800;flex:1}
.osec-info{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:none;color:#fff;font:700 13px/1 Georgia,serif;cursor:pointer;display:grid;place-items:center;flex:none;order:2}
.osec-info:focus-visible{outline:2px solid var(--sx-gold-l);outline-offset:2px}
.osec-score-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;flex-direction:row-reverse}
.osec-ring{--p:0;--c:var(--sx-ok2);width:104px;height:104px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.12) 0)}
.osec-ring span{width:78px;height:78px;border-radius:50%;background:#0E2539;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;direction:ltr}
.osec-score-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:6px}
.osec-score-text{margin:0;color:rgba(255,255,255,.9);font-size:13px;line-height:18px;text-align:start}

.osec-mini{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:16px 20px 0 22px}
.osec-mini-ic{color:var(--sx-gold);padding-top:4px}
.osec-mini-ic .sx-ic{width:38px;height:38px;stroke-width:1.5}
.osec-mini-main{min-width:0;position:relative}
.osec-mini h2{margin:0;font-size:20px;line-height:30px;font-weight:800;color:var(--sx-ink)}
.osec-mini p{margin:6px 0 0;color:#334155;font-size:13px;line-height:19px}
.osec-mini .osec-val{font-size:17px;font-weight:700;color:var(--sx-ink);margin:8px 0 0}
.osec-mini .osec-end{display:flex;justify-content:flex-end;margin-top:6px}
html[dir="rtl"] .osec-mini .osec-end{justify-content:flex-end}
.osec-big{font-size:30px;font-weight:800;line-height:1;margin:14px 0 8px;color:var(--sx-ink)}
#osecTs{height:142px}#osecPwLast{height:140px}#osecSess{height:152px}
.osec-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--sx-info);font:inherit;font-weight:700;font-size:15px;cursor:pointer;min-height:28px}
.osec-link:hover{text-decoration:underline}
.osec-link:focus-visible{outline:2px solid var(--sx-info);outline-offset:2px;border-radius:4px}
.osec-link .sx-ic{width:16px;height:16px;stroke-width:2.4}
html[dir="ltr"] .osec-link .sx-ic{transform:scaleX(-1)}
#osecSess .osec-link{margin-inline-start:-12px}

/* pills */
.osec-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 12px;border-radius:999px;font-weight:800;font-size:14px;line-height:24px;white-space:nowrap}
.osec-pill .sx-ic{width:16px;height:16px;stroke-width:2.6}
.osec-pill.ok{background:var(--sx-ok-bg);color:var(--sx-ok)}
.osec-pill.okc{background:#DDF3E3;color:#15803D;padding:2px 8px 2px 12px}
.osec-pill.okc .sx-ic{width:20px;height:20px;color:var(--sx-ok)}
.osec-pill.okfill{background:#16A34A;color:#fff;font-size:18px;padding:4px 16px;line-height:28px;gap:8px}
.osec-pill.okfill .sx-ic{width:20px;height:20px}
.osec-pill.warn{background:var(--sx-warn-bg);color:var(--sx-warn-ink)}
.osec-pill.warnfill{background:var(--sx-warn);color:#3B2600;font-size:18px;padding:4px 16px;line-height:28px}
.osec-pill.bad{background:var(--sx-bad-bg);color:var(--sx-bad)}
.osec-pill.badfill{background:var(--sx-bad);color:#fff;font-size:18px;padding:4px 16px;line-height:28px}
.osec-pill.muted{background:var(--sx-panel);color:var(--sx-muted)}

/* ---------- login activity ---------- */
.osec-act{padding:0 10px 6px}
.osec-act-head{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 16px}
.osec-act h2{display:flex;align-items:center;gap:14px;margin:0;font-size:22px;font-weight:800;color:var(--sx-ink)}
.osec-act h2 .sx-ic{width:32px;height:32px;color:var(--sx-gold);stroke-width:1.6}
.osec-act-head .osec-link{font-size:13px}
.osec-table-wrap{overflow-x:auto}
.osec-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.osec-table col.c-dev{width:16%}.osec-table col.c-sw{width:17.5%}.osec-table col.c-ip{width:17%}.osec-table col.c-loc{width:17.5%}.osec-table col.c-res{width:11%}.osec-table col.c-when{width:21%}
.osec-table thead th{background:#EEF1F5;color:var(--sx-ink);font-weight:800;font-size:14px;text-align:start;padding:0 12px;height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osec-table thead th small{font-weight:600;font-size:10.5px;margin-inline-start:4px}
.osec-table thead th:first-child{border-start-start-radius:6px;border-end-start-radius:6px}
.osec-table thead th:last-child{border-start-end-radius:6px;border-end-end-radius:6px}
.osec-table td{padding:0 12px;height:49px;border-bottom:1px solid #EDF1F5;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1E293B}
.osec-table tr:last-child td{border-bottom:0}
.osec-table td:nth-child(2){border-inline-end:0}
.osec-dev{display:flex;align-items:center;gap:12px;font-weight:800}
.osec-dev .sx-ic{width:24px;height:24px;color:var(--sx-ink)}
.osec-ip{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.osec-flag{font-size:1.1rem;margin-inline-end:8px;vertical-align:-2px}
.osec-when{font-variant-numeric:tabular-nums}
.osec-empty{padding:22px;text-align:center;color:var(--sx-muted);background:var(--sx-panel);border-radius:12px;margin:0 6px}
.osec-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 18px;text-align:center;margin:28px 22px 0 17px}
.osec-spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--sx-line);border-top-color:var(--sx-gold);animation:osecspin .8s linear infinite}
@keyframes osecspin{to{transform:rotate(360deg)}}

/* ---------- dialogs ---------- */
.osec-dlg{border:0;border-radius:20px;padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:0 30px 80px -20px rgba(8,36,58,.55);color:var(--sx-ink);background:#fff}
.osec-dlg.osec-dlg-wide{width:min(980px,calc(100vw - 32px))}
.osec-dlg::backdrop{background:rgba(7,30,50,.55)}
.osec-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--sx-line);position:sticky;top:0;background:#fff;z-index:1}
.osec-dlg-head h2{margin:0;font-size:1.2rem;font-weight:800}
.osec-x{width:44px;height:44px;border-radius:12px;border:0;background:var(--sx-panel);color:var(--sx-ink);cursor:pointer;display:grid;place-items:center}
.osec-x .sx-ic{width:20px;height:20px}
.osec-x:focus-visible{outline:2px solid var(--sx-gold);outline-offset:2px}
.osec-dlg-body{padding:18px 22px 22px}
.osec-dlg-body p{line-height:1.55}
.osec-dlg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.osec-dlg .osec-field{margin-bottom:12px}
.osec-dlg .osec-field>span{display:block;font-weight:700;margin-bottom:6px}
.osec-dlg .osec-input input{height:44px;letter-spacing:normal}
.osec-sess{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--sx-line)}
.osec-sess:first-of-type{border-top:0}
.osec-sess>.sx-ic{width:28px;height:28px;color:var(--sx-navy);margin-top:2px}
.osec-sess-main{flex:1;min-width:0}
.osec-sess-main b{font-size:1rem}
.osec-sess-main small{display:block;color:var(--sx-muted);font-size:.86rem;line-height:1.5}
.osec-factors{list-style:none;margin:0;padding:0}
.osec-factors li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--sx-line)}
.osec-factors li:first-child{border-top:0}
.osec-factors li span{flex:1}
.osec-factors .sx-ic{width:20px;height:20px}
.osec-factors .ok .sx-ic{color:var(--sx-ok)}
.osec-factors .no .sx-ic{color:var(--sx-muted)}
.osec-factors em{font-style:normal;font-weight:700;color:var(--sx-muted);direction:ltr}
.osec-qr{display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0}
.osec-qr img{border:1px solid var(--sx-line);border-radius:12px;padding:6px;background:#fff}
.osec-secret{display:inline-block;font-size:.95rem;letter-spacing:.06em;background:var(--sx-panel);padding:6px 10px;border-radius:8px;word-break:break-all}
.osec-steps{margin:0 0 12px;padding-inline-start:20px;line-height:1.6}
.osec-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;list-style:none;padding:0;margin:12px 0}
.osec-codes code{display:block;background:var(--sx-panel);padding:8px;border-radius:8px;text-align:center;font-size:1rem}
.osec-unsupported{background:var(--sx-warn-bg);color:var(--sx-warn-ink);border-radius:12px;padding:12px 14px;font-size:.9rem;line-height:1.5}
.osec-dlg .osec-table td,.osec-dlg .osec-table th{white-space:normal}

/* Sign-in dialog: "Sign in with Face ID / Touch ID" (passkey-signin.js), same style as the social sign-in buttons. */
.pk-signin{margin-top:10px}
.pk-signin .pk-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px}

/* ---------- narrower desktops / tablets: same pieces, fluid ---------- */
@media (max-width:1400px){
  .osec-tabs-wrap,html[dir="ltr"] .osec-tabs-wrap{margin-inline:18px}
  .osec-tab{font-size:16px;gap:10px}
  .osec-grid,html[dir="ltr"] .osec-grid,.osec-state{margin-inline:16px}
  .osec-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 300px}
}
@media (max-width:1180px){
  .osec-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"side side" "pw opts" "act act"}
  .osec-pw,.osec-opts{height:auto;padding-bottom:18px}
  .osec-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}
  .osec-hero{padding-inline:20px}
}
@media (max-width:1024px){
  .osec-hero{margin-top:12px}
  .osec-tabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin}
  .osec-tabs li{flex:0 0 auto;scroll-snap-align:start}
  .osec-tab{padding:0 18px;white-space:nowrap}
}
/* ---------- phone ---------- */
@media (max-width:760px){
  /* The fixed bottom bar (≈64px) and the assistant button never cover the last controls. */
  .osec-page{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .osec-hero{height:184px;padding:16px 16px 0}
  .osec-hero::before{height:120px;background-size:auto 120px}
  .osec-hero::after{inset:96px 0 0 0}
  .osec-view .osec-hero h1{font-size:25px;line-height:34px;gap:10px}
  .osec-hero h1 .sx-ic{width:36px;height:36px}
  .osec-view .osec-hero p{font-size:15px;line-height:22px}
  .osec-tabs-wrap,html[dir="ltr"] .osec-tabs-wrap{margin:-58px 14px 0}
  .osec-tab{height:52px;font-size:15px}
  .osec-grid,html[dir="ltr"] .osec-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"side" "pw" "opts" "act";margin:18px 14px 0;row-gap:14px}
  .osec-side{display:flex;gap:14px}
  .osec-score,#osecTs,#osecPwLast,#osecSess{height:auto;min-height:0;padding-bottom:16px}
  
  .osec-pw h2,.osec-opts h2{padding:0 18px;font-size:20px;height:56px}
  #osecPwForm,html[dir="ltr"] #osecPwForm{padding:12px 18px 0}
  .osec-wide{width:100%;margin-inline:0}
  .osec-opts .osec-opt{margin:0 16px;height:auto;min-height:69px;padding:10px 0}
  .osec-opt-main b,.osec-opt-main small{white-space:normal}
  .osec-input input{height:44px}
  /* login activity: one card per sign-in */
  .osec-table{table-layout:auto}
  .osec-table colgroup,.osec-table thead{display:none}
  .osec-table,.osec-table tbody,.osec-table tr,.osec-table td{display:block;width:100%}
  .osec-table tr{border:1px solid var(--sx-line);border-radius:14px;padding:6px 12px;margin-bottom:10px}
  .osec-table td{display:flex;justify-content:space-between;align-items:center;gap:12px;height:auto;padding:8px 0;border-bottom:1px solid var(--sx-panel);white-space:normal}
  .osec-table td::before{content:attr(data-label);color:var(--sx-muted);font-weight:600;font-size:.85rem}
  .osec-table td:last-child{border-bottom:0}
  .osec-act-head{height:auto;padding:14px 8px 10px;flex-wrap:wrap}
  .osec-dlg{width:calc(100vw - 20px)}
}
@media (prefers-reduced-motion:reduce){.osec-switch,.osec-switch::after,.osec-tab{transition:none}.osec-spin{animation:none}}
/* active sessions: number in the middle, link at the end like the mockup */
#osecSess .osec-mini-main{display:flex;flex-direction:column}
#osecSess .osec-big{text-align:center;padding-inline-end:44px}
#osecSess .osec-link{align-self:flex-end;margin-inline-start:0;margin-inline-end:-6px}
#osecTs .osec-mini-main>.osec-pill{margin-top:6px}
/* English: longer labels at the same box sizes */
html[dir="ltr"] .osec-tab{font-size:16px;gap:10px;white-space:nowrap}
html[dir="ltr"] .osec-tab span{overflow:hidden;text-overflow:ellipsis}
html[dir="ltr"] .osec-mini h2{font-size:16px;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir="ltr"] .osec-score h2{font-size:20px}
.osec-table .osec-pill{font-size:13px;padding:1px 10px}
html[dir="ltr"] .osec-table col.c-dev{width:15%}html[dir="ltr"] .osec-table col.c-sw{width:17%}html[dir="ltr"] .osec-table col.c-ip{width:16%}
html[dir="ltr"] .osec-table col.c-loc{width:15%}html[dir="ltr"] .osec-table col.c-res{width:14%}html[dir="ltr"] .osec-table col.c-when{width:23%}
/* Final polish 11-07: headers that need two short lines wrap instead of clipping; 2FA status centred under its title like the mockup. */
@media (max-width:1700px){html[dir="ltr"] .osec-table thead th{white-space:normal;line-height:1.15}html[dir="ltr"] .osec-table thead th small{display:block;margin:0}}
html[dir="ltr"] .osec-table thead th small{white-space:nowrap}
#osecTs .osec-mini-main>.osec-pill{display:flex;width:max-content;margin:6px auto 0}
.osec-act .osec-table-wrap{padding-bottom:4px}
/* 1280–1500px desktops (e.g. 1440×900): same layout, tighter type so tiles and dates stay on one line. */
@media (max-width:1500px){
  .osec-tab,html[dir="ltr"] .osec-tab{font-size:16px;gap:10px;padding:0 8px;white-space:nowrap}
  .osec-tab .sx-ic{width:24px;height:24px}
  .osec-table{font-size:13px}
  .osec-table td,.osec-table thead th{padding:0 8px}
  .osec-table .osec-pill{padding:1px 8px}
}
.osec-opts .osec-opt{gap:12px;margin:0 20px}
.osec-opt-main b{font-size:16px}
.osec-table col.c-dev{width:17%}.osec-table col.c-loc{width:16.5%}
html[dir="ltr"] .osec-table col.c-dev{width:15%}html[dir="ltr"] .osec-table col.c-sw{width:16%}html[dir="ltr"] .osec-table col.c-res{width:15.5%}html[dir="ltr"] .osec-table col.c-loc{width:14.5%}
.osec-table td:nth-child(5){padding-inline:6px;overflow:visible}
.osec-table td:nth-child(5) .osec-pill{padding:1px 8px;gap:4px}
@media (max-width:1500px){.osec-dev{gap:8px}.osec-dev .sx-ic{width:22px;height:22px}}
html[dir="ltr"] .osec-table col.c-dev{width:17%}html[dir="ltr"] .osec-table col.c-ip{width:14%}
.osec-table td:first-child{white-space:normal;line-height:1.2}
html[dir="rtl"] .osec-table col.c-dev{width:18.5%}html[dir="rtl"] .osec-table col.c-loc{width:15%}
html[dir="rtl"] .osec-table td:first-child{white-space:nowrap}
.osec-dev{gap:10px}
/* Phones/tablets: AI button steps aside while it would cover a control (owner-security.js checkLauncher). */
body[data-route="owner-security"].osec-launch-aside .as-launch,body[data-route="owner-security"].osec-launch-aside #asLaunch{opacity:0;pointer-events:none;transition:opacity .15s ease}
/* Date & time never loses its AM/PM (ص/م): a wider column, and if it still can't fit, the time moves to a second
   line inside the same 49px row instead of being cut. Each part stays whole. */
html[dir="rtl"] .osec-table col.c-dev{width:16.5%}html[dir="rtl"] .osec-table col.c-sw{width:16%}html[dir="rtl"] .osec-table col.c-ip{width:15%}
html[dir="rtl"] .osec-table col.c-loc{width:14.5%}html[dir="rtl"] .osec-table col.c-res{width:11%}html[dir="rtl"] .osec-table col.c-when{width:27%}
.osec-table td.osec-when-td{white-space:normal;line-height:1.25}
.osec-when>span{white-space:nowrap;display:inline-block}
@media (max-width:1500px){html[dir="rtl"] .osec-table td:first-child{white-space:normal}}
@media (max-width:1500px){html[dir="rtl"] .osec-table thead th{white-space:normal;line-height:1.15;text-overflow:clip}}