/* ===================================================
   معجم الأسماء الكتابية — Stylesheet v5 Orange Edition
   Palette:
     Deep Navy : #0b1a2e
     Navy      : #12325a
     Blue      : #1c4f8a
     Orange    : #e87210  ← primary action
     Amber     : #f5a030
     Pale      : #fef4e4
     Warm BG   : #f6f0e8
   =================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;direction:rtl;margin:0;padding:0;background:#f6f0e8;color:#1a2030;line-height:1.7}
a{text-decoration:none;color:#12325a}
img{max-width:100%;display:block}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar{background:#0b1a2e;padding:6px 0;font-size:12px;color:rgba(255,255,255,.5)}
.topbar .container{display:flex;justify-content:space-between;align-items:center}

/* ── HEADER ─────────────────────────────────────────────── */
.site-header{background:linear-gradient(150deg,#0b1a2e 0%,#12325a 55%,#1c4f8a 100%);position:sticky;top:0;z-index:1000;box-shadow:0 4px 24px rgba(0,0,0,.35)}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}

/* Brand */
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand-logo{width:62px;height:62px;border-radius:50%;border:3px solid #e87210;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 5px rgba(232,114,16,.18)}
.brand-logo img{width:100%;height:100%;object-fit:cover}
.brand-logo i{color:#e87210;font-size:24px}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-size:20px;font-weight:900;color:#fff;line-height:1.2;white-space:nowrap}
.brand-sub{font-size:11px;color:#f5a030;font-style:italic;margin-top:2px}

/* Stats */
.hdr-stats{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:7px 18px}
.hs-n{display:block;font-size:18px;font-weight:900;color:#f5a030;line-height:1.1}
.hs-l{font-size:10px;color:rgba(255,255,255,.6)}
.hs-sep{color:#e87210;opacity:.7}

/* Mobile btn */
.mob-btn{display:none;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.25);border-radius:7px;padding:8px 10px;cursor:pointer;flex-shrink:0}
.mob-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;margin:4px 0;transition:all .3s}

/* Navbar */
.site-nav{background:rgba(0,0,0,.2);border-top:1px solid rgba(232,114,16,.28)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.nav-links{display:flex;list-style:none;margin:0;padding:0}
.nav-links a{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.8);font-size:13px;font-weight:600;padding:10px 15px;border-bottom:3px solid transparent;transition:all .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:#fff;border-bottom-color:#e87210;background:rgba(232,114,16,.1)}
.nav-links a.active{color:#f5a030}
.nav-search{display:flex;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);border-radius:30px;overflow:hidden;flex-shrink:0}
.nav-search:focus-within{background:rgba(255,255,255,.18);border-color:#e87210}
.nav-search input{background:transparent;border:none;outline:none;color:#fff;font-family:'Cairo',sans-serif;font-size:13px;padding:6px 12px;width:145px}
.nav-search input::placeholder{color:rgba(255,255,255,.4)}
.nav-search button{background:#e87210;border:none;color:#fff;padding:6px 14px;cursor:pointer;font-size:13px;transition:background .2s}
.nav-search button:hover{background:#c45e0a}

/* Search bar */
.search-bar{background:linear-gradient(180deg,#12325a 0%,#0b1a2e 100%);padding:18px 0}
.sb-wrap{display:flex;align-items:center;background:#fff;border-radius:50px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.sb-wrap:focus-within{box-shadow:0 4px 24px rgba(232,114,16,.38)}
.sb-icon{color:#e87210;font-size:18px;padding:0 14px 0 6px;flex-shrink:0}
.sb-input{flex:1;border:none;outline:none;font-family:'Cairo',sans-serif;font-size:15px;padding:13px 0;color:#1a2030;min-width:0;background:transparent}
.sb-btn{background:linear-gradient(135deg,#c45e0a,#e87210);color:#fff;border:none;padding:13px 26px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s}
.sb-btn:hover{background:linear-gradient(135deg,#12325a,#1c4f8a)}

/* ── HERO ──────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,#0b1a2e 0%,#12325a 55%,#1c4f8a 100%);color:#fff;padding:58px 0 86px;position:relative;overflow:hidden;text-align:center}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e87210' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/svg%3E") repeat}
.hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(232,114,16,.2);border:1px solid rgba(232,114,16,.5);color:#f5a030;padding:5px 18px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:16px}
.hero-title{font-size:clamp(24px,5vw,42px);font-weight:900;margin:0 0 12px;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.hero-sub{font-size:15px;color:rgba(255,255,255,.72);margin-bottom:28px}
.hero-nums{display:inline-flex;align-items:center;gap:20px;background:rgba(255,255,255,.08);border:1px solid rgba(232,114,16,.35);border-radius:16px;padding:16px 28px;box-shadow:0 0 32px rgba(232,114,16,.1)}
.hero-nums .hn{text-align:center}.hero-nums .hn b{display:block;font-size:28px;font-weight:900;color:#f5a030}.hero-nums .hn small{font-size:11px;color:rgba(255,255,255,.62)}
.hero-nums .sep{color:#e87210;font-size:20px;opacity:.7}
.hero-wave{position:absolute;bottom:0;left:0;right:0;line-height:0}
.hero-wave svg{display:block;width:100%}

/* ── SECTIONS ──────────────────────────────────────────── */
.section{padding:46px 0}
.sec-title{text-align:center;margin-bottom:32px}
.sec-title h2{font-size:clamp(18px,3vw,26px);font-weight:900;color:#12325a;margin:0 0 6px}
.sec-title p{color:#7a8a9a;font-size:13px;margin:0 0 6px}
.sec-title .div{color:#e87210;font-size:13px;letter-spacing:6px}

/* Letters grid */
.letters-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lg-a{display:flex;align-items:center;justify-content:center;width:50px;height:50px;background:linear-gradient(135deg,#12325a,#1c4f8a);color:#fff;border-radius:10px;font-size:18px;font-weight:700;transition:all .22s;box-shadow:0 2px 10px rgba(18,50,90,.18)}
.lg-a:hover{background:linear-gradient(135deg,#e87210,#f5a030);color:#fff;transform:translateY(-4px);box-shadow:0 8px 20px rgba(232,114,16,.32)}

/* Name cards */
.name-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:16px;padding:22px 14px;border:1px solid #e8ddd0;box-shadow:0 2px 12px rgba(18,50,90,.07);text-decoration:none;color:#1a2030;height:100%;transition:all .3s;position:relative;overflow:hidden}
.name-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#e87210,#f5a030);transform:scaleX(0);transition:transform .3s}
.name-card:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(232,114,16,.18);border-color:#f5a030;color:#1a2030}
.name-card:hover::before{transform:scaleX(1)}
.nc-lt{width:48px;height:48px;background:linear-gradient(135deg,#e87210,#f5a030);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;margin-bottom:12px;box-shadow:0 4px 14px rgba(232,114,16,.3)}
.nc-nm{font-size:17px;font-weight:800;color:#12325a;margin:0 0 7px}
.nc-mn{font-size:13px;color:#7a8a9a;flex:1;margin-bottom:10px}
.nc-more{font-size:12px;color:#e87210;font-weight:700;display:flex;align-items:center;gap:4px}

/* ── PAGE BANNER ───────────────────────────────────────── */
.page-banner{background:linear-gradient(135deg,#0b1a2e,#12325a,#1c4f8a);color:#fff;padding:28px 0;position:relative;overflow:hidden}
.page-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#e87210,#f5a030,#e87210)}
.breadcrumb{display:flex;align-items:center;gap:5px;list-style:none;padding:0;margin:0 0 8px;font-size:12px;flex-wrap:wrap}
.breadcrumb a{color:rgba(255,255,255,.6)}.breadcrumb a:hover{color:#f5a030}
.breadcrumb .sep{color:rgba(255,255,255,.3);font-size:10px}
.pb-h1{font-size:clamp(18px,4vw,28px);font-weight:900;margin:0 0 4px}
.pb-sub{font-size:13px;color:rgba(255,255,255,.7);margin:0}

/* ── LETTER FILTER ─────────────────────────────────────── */
.lf-bar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px;padding:12px 14px;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(18,50,90,.08);border:1px solid #e8ddd0}
.lf{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px;padding:0 8px;background:#faf7f3;border:1.5px solid #e8ddd0;border-radius:7px;font-size:13px;font-weight:700;color:#12325a;transition:all .18s}
.lf:hover,.lf.on{background:linear-gradient(135deg,#e87210,#f5a030);border-color:#e87210;color:#fff;box-shadow:0 3px 10px rgba(232,114,16,.28)}

/* ── SEARCH MODE BAR ───────────────────────────────────── */
.search-mode-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:10px 14px;background:#fff;border-radius:10px;border:1px solid #e8ddd0;box-shadow:0 2px 8px rgba(18,50,90,.06)}
.sm-label{font-size:13px;font-weight:700;color:#555;margin-left:4px;white-space:nowrap}
.sm-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:20px;font-size:13px;font-weight:700;border:1.5px solid #ddd;color:#666;background:#f8f8f8;transition:all .18s;white-space:nowrap}
.sm-btn:hover{border-color:#e87210;color:#e87210;background:#fef8f2}
.sm-btn.sm-active{background:linear-gradient(135deg,#e87210,#f5a030);border-color:#e87210;color:#fff;box-shadow:0 3px 10px rgba(232,114,16,.28)}
@media(max-width:480px){.search-mode-bar{flex-wrap:wrap}.sm-label{width:100%}}


/* ── NAMES TABLE ───────────────────────────────────────── */
.nt-wrap{border-radius:16px;overflow:hidden;box-shadow:0 6px 28px rgba(18,50,90,.12);border:1px solid #e8ddd0;background:#fff}
.nt-head{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#e87210,#c45e0a);color:#fff;padding:13px 18px;font-size:16px;font-weight:800}
.nt-cnt{font-size:12px;font-weight:600;background:rgba(255,255,255,.22);border-radius:50px;padding:2px 12px}
.nt{width:100%;border-collapse:collapse;font-size:14px}
.nt thead tr{background:linear-gradient(90deg,#0b1a2e,#12325a)}
.nt thead th{color:#fff;padding:11px 13px;text-align:right;font-weight:700;font-size:13px;white-space:nowrap;border-left:1px solid rgba(255,255,255,.08)}
.nt thead th:last-child{border-left:none}
.nt tbody tr{border-bottom:1px solid #f0e8dd;transition:background .15s}
.nt tbody tr:last-child{border-bottom:none}
.nt tbody tr:hover{background:#fef8f0}
.nt tbody td{padding:11px 13px;vertical-align:top}
.c-num{width:46px;text-align:center}
.nt tbody .c-num{text-align:center;color:#a0a8b0;font-size:12px;vertical-align:middle}
.nlink{font-weight:800;font-size:15px;color:#12325a;border-bottom:2px solid transparent;transition:all .2s}
.nlink:hover{color:#e87210;border-bottom-color:#e87210}
.c-mean{color:#3a4a5c;line-height:1.6;font-size:13px}
.wl{display:flex;flex-direction:column;gap:4px}
.wb{display:inline-block;background:#fef4e4;color:#a85e0a;border:1px solid #f5c88a;border-radius:6px;padding:2px 9px;font-size:12px;font-weight:600;direction:ltr;text-align:left}
.wh{margin-top:4px}
.wbtn{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1.5px solid #e87210;color:#e87210;border-radius:30px;padding:3px 11px;font-family:'Cairo',sans-serif;font-size:11px;font-weight:700;cursor:pointer;margin-top:5px;transition:all .2s;white-space:nowrap}
.wbtn:hover{background:#e87210;color:#fff}
.who{color:#1a8c74;font-size:13px;font-weight:600}
.emp{color:#ccc}

/* No results */
.no-res{text-align:center;padding:60px 20px;color:#7a8a9a}
.no-res i{font-size:48px;display:block;margin-bottom:16px;color:#f5c88a}
.no-res h3{font-weight:700;color:#12325a}

/* Pagination */
.pgn{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:24px}
.pgn a,.pgn span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;background:#fff;border:1.5px solid #e8ddd0;border-radius:8px;color:#12325a;font-size:14px;font-weight:600;transition:all .2s}
.pgn a:hover,.pgn a.on{background:linear-gradient(135deg,#e87210,#f5a030);border-color:#e87210;color:#fff;box-shadow:0 3px 12px rgba(232,114,16,.3)}
.pgn .dots{border:none;background:none;color:#aaa}

/* ── NAME DETAIL ───────────────────────────────────────── */
.name-section{padding:28px 0}
.name-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.name-main{background:#fff;border-radius:16px;border:1px solid #e8ddd0;padding:28px;box-shadow:0 2px 16px rgba(18,50,90,.08)}
.nd-hero{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;padding-bottom:20px;border-bottom:3px solid #fef4e4}
.nd-badge{width:68px;height:68px;flex-shrink:0;background:linear-gradient(135deg,#e87210,#c45e0a);color:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;box-shadow:0 6px 20px rgba(232,114,16,.3)}
.nd-name{font-size:clamp(22px,4vw,32px);font-weight:900;color:#12325a;margin:0 0 5px}
.nd-who{font-size:13px;color:#7a8a9a;margin:0}
.nd-block{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #f6f0e8}
.nd-block:last-child{border-bottom:none;margin-bottom:0}
.nd-btitle{font-size:15px;font-weight:800;color:#12325a;margin-bottom:11px;display:flex;align-items:center;gap:6px}
.nd-btitle i{color:#e87210}
.nd-cnt{background:#fef4e4;color:#a85e0a;font-size:11px;font-weight:700;padding:2px 10px;border-radius:50px}
.nd-body{font-size:15px;line-height:1.9;color:#444}
.wit-list{display:flex;flex-direction:column;gap:9px}
.wit{display:flex;gap:11px;background:#fef8f0;border-radius:10px;padding:12px;border-right:3px solid #e87210}
.wit:hover{background:#fef4e4}
.wit i{color:#e87210;font-size:12px;padding-top:3px;flex-shrink:0}
.nd-nav-btns{display:flex;justify-content:space-between;margin-top:18px}
.nd-nav-btn{display:inline-flex;align-items:center;gap:5px;background:#faf7f3;border:1.5px solid #e8ddd0;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;color:#12325a;transition:all .2s}
.nd-nav-btn:hover{background:linear-gradient(135deg,#e87210,#f5a030);border-color:#e87210;color:#fff}
.side-box{background:#fff;border:1px solid #e8ddd0;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(18,50,90,.07)}
.side-hdr{font-size:13px;font-weight:800;color:#12325a;padding:11px 14px;border-bottom:1px solid #f6f0e8;background:linear-gradient(90deg,#fef8f0,#fff8f2)}
.side-list{list-style:none;padding:9px 14px;margin:0}
.side-list li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f6f0e8;font-size:13px}
.side-list li:last-child{border-bottom:none}
.side-list .lbl{color:#7a8a9a}
.l-badge{background:linear-gradient(135deg,#e87210,#f5a030);color:#fff;padding:3px 12px;border-radius:30px;font-size:12px;font-weight:700}
.sim-list{list-style:none;padding:8px 14px;margin:0}
.sim-list li{padding:5px 0;border-bottom:1px solid #f6f0e8;font-size:13px}
.sim-list li:last-child{border-bottom:none}
.sim-list a{color:#1a2030}.sim-list a:hover{color:#e87210}

/* ── BUTTONS ───────────────────────────────────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#e87210,#f5a030);color:#fff;border:none;padding:11px 28px;border-radius:50px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(232,114,16,.35);transition:all .3s}
.btn-primary:hover{background:linear-gradient(135deg,#12325a,#1c4f8a);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(18,50,90,.3)}
.btn-sm-out{display:inline-flex;align-items:center;gap:5px;border:1.5px solid #e87210;color:#e87210;background:transparent;padding:5px 14px;border-radius:30px;font-size:12px;font-weight:700;transition:all .2s;margin:8px 14px}
.btn-sm-out:hover{background:#e87210;color:#fff}

/* ── QUOTE BAR ─────────────────────────────────────────── */
.quote-bar{background:linear-gradient(135deg,#0b1a2e 0%,#12325a 60%,#1c4f8a 100%);padding:36px 0;text-align:center;position:relative;overflow:hidden}
.quote-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#e87210,#f5a030,#e87210)}
.quote-bar .qt{font-family:'Amiri',serif;font-size:clamp(17px,2.8vw,22px);color:#fff;line-height:1.9;font-style:italic}
.quote-bar .qs{color:#f5a030;font-size:13px;font-weight:700;display:block;margin-top:6px}
.quote-bar .qi{color:#e87210;font-size:24px;opacity:.5;margin:0 8px}

/* ── FOOTER ────────────────────────────────────────────── */
.site-footer{background:#0b1a2e;color:rgba(255,255,255,.68);padding:44px 0 0;border-top:3px solid #e87210}
.ft-title{color:#f5a030;font-size:15px;font-weight:700;margin-bottom:12px}
.ft-desc{font-size:13px;line-height:1.8}
.ft-links{list-style:none;padding:0;margin:0}
.ft-links li{margin-bottom:6px}
.ft-links a{color:rgba(255,255,255,.55);font-size:13px;transition:color .2s}
.ft-links a:hover{color:#f5a030}
.ft-letters{display:flex;flex-wrap:wrap;gap:5px}
.ft-l{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.58);border-radius:5px;font-size:12px;font-weight:600;transition:all .2s}
.ft-l:hover{background:#e87210;color:#fff}
.ft-bottom{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;text-align:center}
.ft-bottom p{margin:0;font-size:12px}
.ft-cross{color:#e87210;font-size:22px;margin-bottom:4px}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:992px){
  .hdr-stats{display:none}
}
@media(max-width:768px){
  .mob-btn{display:block}
  .site-nav{display:none}
  .site-nav.open{display:block}
  .nav-inner{flex-direction:column;align-items:stretch;padding:8px 0 12px}
  .nav-links{flex-direction:column}
  .nav-links a{border-bottom:none;border-right:3px solid transparent;padding:9px 16px}
  .nav-links a:hover,.nav-links a.active{border-right-color:#e87210;border-bottom:none}
  .nav-search{margin:8px 0 0;border-radius:0}
  .nav-search input{flex:1;width:auto}
  .brand-name{font-size:16px}
  .brand-sub{display:none}
  .nd-hero{flex-direction:column;align-items:center;text-align:center}
  .name-grid{grid-template-columns:1fr}
  .nd-nav-btns{flex-wrap:wrap;gap:8px}
  .nd-nav-btn{flex:1;justify-content:center;font-size:12px;padding:6px 10px}
  .page-banner{padding:18px 0}
  .pb-h1{font-size:20px}
}
@media(max-width:576px){
  .hero-nums{flex-direction:column;gap:12px}
  .sep{display:none}
  .name-main{padding:18px}
}

/* ══ Mobile Table View — matches Desktop ════════════════════ */
.mob-table-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(18,50,90,.12);
  border: 1px solid #e8ddd0;
  background: #fff;
}

/* ─ Header — mirrors .nt-head ───────────────────── */
.mob-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg,#e87210,#c45e0a);
  color: #fff;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 800;
}
.mob-table-head i { margin-left: 8px; }
.mob-table-cnt {
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,.22);
  border-radius: 50px;
  padding: 2px 12px;
}

/* ─ Column labels — mirrors .nt thead ───────────── */
.mob-col-hdr {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg,#0b1a2e,#12325a);
  padding: 7px 14px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mob-col-hdr span {
  color: rgba(255,255,255,.68);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.mob-col-hdr .col-n    { width: 26px; text-align: center; flex-shrink: 0; }
.mob-col-hdr .col-name { flex: 0 0 100px; }
.mob-col-hdr .col-rest { flex: 1; }

/* ─ Body ────────────────────────────────────────── */
.mob-table-body { display: flex; flex-direction: column; }

/* ─ Row — mirrors .nt tbody tr ──────────────────── */
.mob-row {
  display: flex;
  flex-direction: column;
  padding: 13px 14px 11px;
  border-bottom: 1px solid #f0e8dd;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mob-row:last-child { border-bottom: none; }
.mob-row:hover, .mob-row:focus { background: #fef8f0; outline: none; }

/* Right accent bar on hover — matches desktop row highlight */
.mob-row::before {
  content: '';
  position: absolute;
  right: 0; top: 15%; bottom: 15%;
  width: 3.5px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg,#f5a030,#e87210);
  opacity: 0;
  transition: opacity .15s;
}
.mob-row:hover::before { opacity: 1; }

/* ─ Top line: number + name + arrow ─────────────── */
.mob-row-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.mob-row-num {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg,#0b1a2e,#12325a);
  color: rgba(255,255,255,.7);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -.5px;
}
.mob-row-name {
  font-size: 17px;
  font-weight: 900;
  color: #12325a;
  flex: 1;
  line-height: 1.3;
  transition: color .15s;
}
.mob-row:hover .mob-row-name { color: #e87210; }
.mob-row-arr {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fef4e4;
  border: 1.5px solid #f5c88a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e87210;
  font-size: 10px;
  transition: all .15s;
}
.mob-row:hover .mob-row-arr {
  background: linear-gradient(135deg,#e87210,#f5a030);
  border-color: #e87210;
  color: #fff;
}

/* ─ Data sections (meaning / witnesses / who_is) ── */
.mob-row-section {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding-right: 35px;
  margin-bottom: 5px;
}
.mob-row-section:last-child { margin-bottom: 0; }
.mob-sec-lbl {
  font-size: 10px;
  font-weight: 800;
  color: #1c4f8a;
  background: #edf3fa;
  border: 1px solid #c5d6ec;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.8;
}
.mob-sec-lbl i { margin-left: 3px; opacity: .65; font-size: 9px; }
.mob-sec-val {
  color: #3a4a5c;
  font-size: 12.5px;
  line-height: 1.55;
  flex: 1;
  min-width: 0;
}
.mob-sec-val.who { color: #1a8c74; font-weight: 600; }
.mob-sec-witnesses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.mob-sec-more {
  display: inline-flex;
  align-items: center;
  background: rgba(232,114,16,.1);
  border: 1.5px solid rgba(232,114,16,.4);
  color: #c45e0a;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
}

/* ── Desktop / Mobile visibility ─────────────────── */
.desktop-only { display: block !important; }
.mobile-only  { display: none  !important; }

@media screen and (max-width: 768px) {
  .desktop-only  { display: none  !important; }
  .mobile-only   { display: block !important; }
  .hide-xs       { display: none  !important; }
}