/* =============================================
   نَفاذ Nafadh — Stylesheet
   Extracted as-is from the original design.
   No colors, layout, or visual rules changed.
   ============================================= */

 :root{
   --bg: #0b0a12;
   --bg-soft: #110f1c;
   --panel: #15131f;
   --panel-2: #181626;
   --border: #2a273a;
   --violet: #8b5cf6;
   --violet-2: #a78bfa;
   --violet-glow: rgba(139,92,246,.35);
   --text: #f1eefb;
   --text-dim: #a7a3bd;
   --text-dimmer: #716d8a;
   --green: #34d399;
   --red: #f87171;
   --blue: #60a5fa;
   --amber: #fbbf24;
   --radius: 16px;
   --nav-bg: rgba(11,10,18,.6);
   --white-fixed: #ffffff;
 }
 
 html[data-theme="light"]{
   --bg: #f6f5fb;
   --bg-soft: #ffffff;
   --panel: #ffffff;
   --panel-2: #f0eefa;
   --border: #e2dff0;
   --violet: #7c3aed;
   --violet-2: #7c3aed;
   --violet-glow: rgba(124,58,237,.18);
   --text: #1c1a27;
   --text-dim: #5d5876;
   --text-dimmer: #8e89a3;
   --green: #059669;
   --red: #dc2626;
   --blue: #2563eb;
   --amber: #d97706;
   --nav-bg: rgba(255,255,255,.7);
 }
 
 *{box-sizing:border-box; margin:0; padding:0;}
 html{scroll-behavior:smooth;}
 body{
   background: var(--bg);
   color: var(--text);
   font-family: 'IBM Plex Sans Arabic','Tajawal',sans-serif;
   min-height:100vh;
   position:relative;
   overflow-x:hidden;
   transition: background .25s ease, color .25s ease;
 }
 body::before{
   content:"";
   position:fixed; inset:0;
   background:
     radial-gradient(ellipse 600px 400px at 15% 10%, var(--violet-glow), transparent 60%),
     radial-gradient(ellipse 500px 500px at 90% 30%, rgba(167,139,250,.18), transparent 60%),
     radial-gradient(ellipse 700px 500px at 50% 100%, rgba(139,92,246,.12), transparent 60%);
   pointer-events:none;
   z-index:0;
 }
 html[data-theme="light"] body::before{
   background:
     radial-gradient(ellipse 600px 400px at 15% 10%, rgba(124,58,237,.08), transparent 60%),
     radial-gradient(ellipse 500px 500px at 90% 30%, rgba(124,58,237,.06), transparent 60%),
     radial-gradient(ellipse 700px 500px at 50% 100%, rgba(124,58,237,.05), transparent 60%);
 }
 .wrap{ position:relative; z-index:1; }
 
 /* ---------- NAV ---------- */
 nav{
   display:flex; align-items:center; justify-content:space-between;
   padding:18px 48px;
   border-bottom:1px solid var(--border);
   backdrop-filter: blur(10px);
   background: var(--nav-bg);
   position:sticky; top:0; z-index:50;
 }
 .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; }
.brand .brand-text{
  background: linear-gradient(90deg, var(--text), var(--violet-2) 60%, var(--text));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brandShine 5s ease-in-out infinite;
}
@keyframes brandShine{
  0%,100%{ background-position: 0% 50%; }
  50%    { background-position: 100% 50%; }
}
 .brand-icon{
   width:34px; height:34px; border-radius:9px;
   background: linear-gradient(135deg, var(--violet), #6d28d9);
   display:flex; align-items:center; justify-content:center;
   box-shadow: 0 4px 14px var(--violet-glow);
   flex-shrink:0;
 }
 .brand-icon svg{ width:18px; height:18px; }
 .nav-links{ display:flex; align-items:center; gap:6px; }
 .nav-links a{
   color: var(--text-dim);
   text-decoration:none;
   font-size:14.5px;
   font-weight:500;
   padding:9px 16px;
   border-radius:10px;
   transition: all .2s ease;
   display:flex; align-items:center; gap:6px;
   cursor:pointer;
 }
 .nav-links a:hover{ color:var(--text); background: rgba(139,92,246,.08); }
 .nav-links a.active{
   background: linear-gradient(135deg, var(--violet), #7c3aed);
   color:#fff;
   box-shadow: 0 4px 14px var(--violet-glow);
 }
 .nav-right{ display:flex; align-items:center; gap:10px; }
 .icon-btn{
   width:38px; height:38px; border-radius:10px;
   border:1px solid var(--border);
   background: var(--panel);
   display:flex; align-items:center; justify-content:center;
   color: var(--text-dim);
   cursor:pointer;
   transition: all .2s ease;
   position:relative;
 }
 .icon-btn:hover{ border-color: var(--violet); color: var(--violet-2); }
 .icon-btn .sun-icon{ display:none; }
 html[data-theme="light"] .icon-btn .moon-icon{ display:none; }
 html[data-theme="light"] .icon-btn .sun-icon{ display:block; }
 .login-btn{
   color:var(--text-dim); text-decoration:none; font-size:14.5px; font-weight:500;
   padding:9px 18px; border:1px solid var(--border); border-radius:10px;
   transition: all .2s;
 }
 .login-btn:hover{ border-color:var(--violet); color:var(--text); }
 
 .toast{
   position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
   background: var(--panel); border:1px solid var(--violet); color:var(--text);
   padding:13px 22px; border-radius:12px; font-size:14px; font-weight:600;
   box-shadow: 0 12px 30px rgba(0,0,0,.35);
   opacity:0; pointer-events:none; transition: all .25s ease; z-index:999;
   display:flex; align-items:center; gap:8px;
 }
 .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
 
 /* ---------- HOME PAGE ---------- */
 .page{ display:none; }
 .page.active{ display:block; }
 
 .hero{ max-width:1100px; margin:0 auto; padding:90px 24px 60px; text-align:center; }
 .eyebrow{
   display:inline-flex; align-items:center; gap:8px;
   color: var(--violet-2); font-size:14px; font-weight:600;
   background: rgba(139,92,246,.1);
   border:1px solid rgba(139,92,246,.25);
   padding:7px 16px; border-radius:999px;
   margin-bottom:28px;
 }
 .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--violet-2); }
 h1.hero-title{ font-size:52px; font-weight:800; line-height:1.25; margin-bottom:22px; }
 h1.hero-title .accent{
   background: linear-gradient(90deg, var(--violet-2), #c4b5fd, var(--violet));
   -webkit-background-clip:text; background-clip:text; color:transparent;
 }
 .hero-sub{ color: var(--text-dim); font-size:17px; line-height:1.9; max-width:640px; margin:0 auto 36px; }
 .hero-illustration{ width:220px; margin:0 auto 8px; position:relative; }
 .hero-illustration svg{ width:100%; filter: drop-shadow(0 20px 40px var(--violet-glow)); }
 .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
 .btn-primary{
   background: linear-gradient(135deg, var(--violet), #7c3aed);
   color:#fff; border:none; font-size:15.5px; font-weight:700;
   padding:16px 30px; border-radius:13px; cursor:pointer;
   display:inline-flex; align-items:center; gap:8px;
   box-shadow: 0 10px 30px var(--violet-glow);
   transition: transform .2s ease, box-shadow .2s ease;
   text-decoration:none;
 }
 .btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 14px 36px var(--violet-glow); }
 .btn-ghost{
   background: var(--panel);
   border:1px solid var(--border);
   color: var(--text);
   font-size:15.5px; font-weight:600;
   padding:16px 26px; border-radius:13px; cursor:pointer;
   display:inline-flex; align-items:center; gap:8px;
   transition: all .2s ease;
   text-decoration:none;
 }
 .btn-ghost:hover{ border-color: var(--violet); }
 
 .badge-row{ max-width:1000px; margin:64px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 24px; }
 .badge-card{
   background: var(--panel); border:1px solid var(--border); border-radius:14px;
   padding:20px 16px; display:flex; align-items:center; gap:12px; text-align:right;
 }
 .badge-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
 .badge-card h4{ font-size:14.5px; font-weight:700; margin-bottom:2px; }
 .badge-card p{ font-size:12.5px; color:var(--text-dimmer); }
 
 .tools-section{ max-width:1000px; margin:96px auto 0; padding:0 24px; text-align:center; }
 .tools-section h2{ font-size:30px; font-weight:800; margin-bottom:10px; }
 .tools-section .sub{ color:var(--text-dim); font-size:15px; margin-bottom:42px; }
 .tools-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
 .tool-card{
   border-radius:16px; padding:26px; text-align:right;
   border:1px solid var(--border);
   cursor:pointer; transition: transform .2s ease, border-color .2s ease;
   position:relative; overflow:hidden;
 }
 .tool-card:hover{ transform:translateY(-3px); }
 .tool-card.violet{ background: linear-gradient(165deg, rgba(139,92,246,.14), var(--panel) 60%); }
 .tool-card.violet:hover{ border-color: var(--violet); }
 .tool-card.emerald{ background: linear-gradient(165deg, rgba(16,185,129,.14), var(--panel) 60%); }
 .tool-card.emerald:hover{ border-color: var(--green); }
 .tool-card.blue{ background: linear-gradient(165deg, rgba(59,130,246,.14), var(--panel) 60%); }
 .tool-card.blue:hover{ border-color: var(--blue); }
 .tool-card.amber{ background: linear-gradient(165deg, rgba(245,158,11,.14), var(--panel) 60%); }
 .tool-card.amber:hover{ border-color: var(--amber); }
 .tool-icon{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
 .tool-card h3{ font-size:18px; font-weight:700; margin-bottom:8px; }
 .tool-card p{ font-size:13.5px; color:var(--text-dim); line-height:1.7; margin-bottom:18px; min-height:44px; }
 .tool-link{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:9px; background: rgba(139,92,246,.08); }
 .tool-link.violet{ color:var(--violet-2); }
 .tool-link.emerald{ color:var(--green); }
 .tool-link.blue{ color:var(--blue); }
 .tool-link.amber{ color:var(--amber); }
 
 .stats-section{
   max-width:1000px; margin:96px auto 0; padding:36px 24px;
   display:grid; grid-template-columns:repeat(4,1fr);
   border-top:1px solid var(--border); text-align:center;
 }
 .stats-section .stat-num{ font-size:30px; font-weight:800; color:var(--violet-2); margin-bottom:6px; }
 .stats-section .stat-label{ font-size:13px; color:var(--text-dimmer); }
 
 footer{
   margin-top:88px; border-top:1px solid var(--border);
   padding:48px 48px 24px;
   color:var(--text-dimmer); font-size:13px;
 }
 .footer-grid{
   max-width:1000px; margin:0 auto;
   display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px;
   align-items:start; text-align:right;
 }
 .footer-col h4{
   font-size:13.5px; font-weight:800; color:var(--text-dim);
   margin-bottom:16px; letter-spacing:.2px;
 }
 .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
 .footer-col ul a{
   color:var(--text-dimmer); text-decoration:none; font-size:13.5px;
   display:inline-block; padding:2px 0;
   transition:color .2s ease-out;
 }
 .footer-col ul a:hover{ color:var(--violet-2); }
 .footer-identity .footer-brand{ margin-bottom:12px; }
 .footer-name{ font-weight:800; font-size:15.5px; color:var(--text); }
 .footer-tagline{ font-size:13px; line-height:1.9; color:var(--text-dimmer); max-width:280px; margin:0; }
 .footer-bottom{
   max-width:1000px; margin:32px auto 0; padding-top:24px;
   border-top:1px solid var(--border);
   text-align:center; font-size:12.5px; color:var(--text-dimmer);
 }
 
 /* ---------- INBOX PAGE ---------- */
 .inbox-wrap{ max-width:1100px; margin:0 auto; padding:40px 24px 80px; }
 .inbox-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
 .inbox-header h1,.inbox-header h2{ font-size:26px; font-weight:800; display:flex; align-items:center; gap:10px; }
 .live-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(52,211,153,.18); }
 .inbox-header p{ color:var(--text-dim); font-size:14px; margin-top:4px; }
 
 .top-cards{ display:grid; grid-template-columns: 280px 1fr; gap:18px; margin-bottom:24px; }
 .card{ background: var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px; }
 .timer-card{ text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
 .timer-card .label{ color:var(--text-dim); font-size:13.5px; margin-bottom:10px; }
 .timer-card .time{ font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; margin-bottom:4px; }
 .timer-card .unit{ color:var(--text-dimmer); font-size:12.5px; margin-bottom:14px; }
 .progress-track{ width:100%; height:6px; background:var(--bg-soft); border-radius:999px; overflow:hidden; margin-bottom:18px; }
 .progress-fill{ height:100%; width:71%; background: linear-gradient(90deg, var(--violet), var(--violet-2)); border-radius:999px; transition: width 1s linear; }
 .timer-actions{ display:flex; gap:10px; width:100%; }
 .btn-small{
   flex:1; padding:11px 8px; border-radius:10px; border:none; font-size:13px; font-weight:700; cursor:pointer;
   display:flex; align-items:center; justify-content:center; gap:6px; transition: all .2s ease;
 }
 .btn-small.danger{ background: rgba(248,113,113,.12); color:var(--red); border:1px solid rgba(248,113,113,.25);}
 .btn-small.danger:hover{ background: rgba(248,113,113,.2); }
 .btn-small.neutral{ background: rgba(139,92,246,.06); color:var(--text-dim); border:1px solid var(--border); }
 .btn-small.neutral:hover{ border-color: var(--violet); color:var(--text); }
 .btn-small.primary{ background: linear-gradient(135deg, var(--violet), #7c3aed); color:#fff; }
 
 .email-card{ display:flex; align-items:center; gap:20px; justify-content:space-between; }
 .qr-box{ width:74px; height:74px; border-radius:12px; background:var(--white-fixed); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--border); }
 .email-info{ flex:1; text-align:right; }
 .email-info .status{
   display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--green);
   background: rgba(52,211,153,.1); padding:4px 12px; border-radius:999px; margin-bottom:10px;
 }
 .email-info .addr{ font-size:21px; font-weight:800; font-family:monospace; letter-spacing:.5px; }
 .email-info .addr-label{ font-size:12.5px; color:var(--text-dimmer); margin-bottom:4px; }
 .copy-btn{
   width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:rgba(139,92,246,.05);
   color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
   transition: all .2s;
 }
 .copy-btn:hover{ border-color: var(--violet); color:var(--violet-2); }
 .email-actions{ display:flex; gap:10px; flex-shrink:0; }
 .email-actions .btn-small{ padding:11px 18px; flex:none; }
 
 .msg-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
 .msg-toolbar h3{ font-size:16px; font-weight:700; color:var(--text-dim); }
 .filter-tabs{ display:flex; gap:6px; background:var(--panel); border:1px solid var(--border); padding:4px; border-radius:11px; }
 .filter-tabs button{
   border:none; background:transparent; color:var(--text-dim); font-size:13px; font-weight:600;
   padding:7px 14px; border-radius:8px; cursor:pointer; transition: all .2s; display:flex; align-items:center; gap:5px;
 }
 .filter-tabs button.active{ background: linear-gradient(135deg, var(--violet), #7c3aed); color:#fff; }
 
 .msg-list{ background: var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
 .msg-empty{ padding:50px 20px; text-align:center; color:var(--text-dimmer); font-size:14px; }
 .msg-row{
   display:flex; align-items:center; gap:16px;
   padding:18px 22px; border-bottom:1px solid var(--border);
   cursor:pointer; transition: background .15s;
 }
 .msg-row:last-child{ border-bottom:none; }
 .msg-row:hover{ background: rgba(139,92,246,.04); }
 .msg-row .unread-dot{ width:8px; height:8px; border-radius:50%; background:var(--violet-2); flex-shrink:0; }
 .msg-row .unread-dot.read{ background:transparent; }
 .msg-time{ font-size:12px; color:var(--text-dimmer); width:64px; flex-shrink:0; }
 .msg-avatar{ width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
 .msg-body{ flex:1; min-width:0; text-align:right; }
 .msg-subject{ font-size:14.5px; font-weight:700; margin-bottom:3px; }
 .msg-preview{ font-size:12.5px; color:var(--text-dimmer); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .msg-sender{ font-size:12.5px; color:var(--text-dim); width:160px; flex-shrink:0; text-align:left; direction:ltr; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

 /* ---------- Message detail modal ---------- */
 .msg-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; }
 .msg-modal.show{ display:flex; }
 .msg-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
 .msg-modal-card{
   position:relative; z-index:1; width:100%; max-width:560px; max-height:82vh; overflow-y:auto;
   background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
   padding:26px; box-shadow:0 20px 60px rgba(0,0,0,.45); text-align:right;
 }
 .msg-modal-close{
   position:absolute; top:14px; left:14px; width:34px; height:34px; border-radius:10px;
   border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim);
   display:flex; align-items:center; justify-content:center; cursor:pointer;
 }
 .msg-modal-close:hover{ color:var(--text); }
 .msg-modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-left:38px; }
 .msg-modal-avatar{ width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; }
 .msg-modal-sender{ font-weight:700; font-size:14px; color:var(--text); word-break:break-all; direction:ltr; text-align:left; }
 .msg-modal-time{ font-size:12.5px; color:var(--text-dimmer); margin-top:2px; }
 .msg-modal-subject{ font-size:18px; font-weight:700; color:var(--text); margin:0 0 14px; line-height:1.5; }
 .msg-modal-body{ font-size:14.5px; line-height:1.9; color:var(--text-dim); word-break:break-word; }
 .msg-plain{ white-space:pre-wrap; word-break:break-word; }
 .msg-modal-body a{ color:var(--violet-2); text-decoration:underline; word-break:break-all; }
 .msg-html-frame{ width:100%; min-height:340px; max-height:60vh; border:1px solid var(--border); border-radius:12px; background:#fff; }

 .show-more{
   text-align:center; padding:16px; color:var(--text-dim); font-size:13.5px; font-weight:600;
   cursor:pointer; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:6px;
 }
 .show-more:hover{ color:var(--violet-2); }
 
 .tip-bar{
   margin-top:18px; background: rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2);
   border-radius:13px; padding:14px 20px; text-align:center; font-size:13.5px; color:var(--text-dim);
 }
 
 /* ---------- TOOL PAGES (shared) ---------- */
 .tool-wrap{ max-width:760px; margin:0 auto; padding:50px 24px 90px; }
 .tool-header{ text-align:center; margin-bottom:34px; }
 .tool-header .tool-badge{ width:56px; height:56px; border-radius:15px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; }
 .tool-header h1,.tool-header h2{ font-size:28px; font-weight:800; margin-bottom:8px; }
 .tool-header p{ color:var(--text-dim); font-size:14.5px; }
 
 .gen-card{ background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:28px; margin-bottom:20px; }
 .field-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
 .field-row label{ font-size:13.5px; font-weight:600; color:var(--text-dim); }
 .select-input, .text-input{
   background: var(--bg-soft); border:1px solid var(--border); color:var(--text);
   padding:13px 16px; border-radius:11px; font-size:14.5px; font-family:inherit;
   outline:none; transition:border-color .2s;
 }
 .select-input:focus, .text-input:focus{ border-color:var(--violet); }
 .slider-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
 .slider-row .val{ color:var(--violet-2); font-weight:700; font-family:monospace; font-size:15px; }
 input[type=range]{ width:100%; accent-color: var(--violet); height:6px; cursor:pointer; }
 .toggle-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
 .toggle-chip{
   display:flex; align-items:center; gap:8px; padding:11px 14px;
   background: var(--bg-soft); border:1px solid var(--border); border-radius:10px;
   font-size:13.5px; cursor:pointer; user-select:none; transition:all .2s;
 }
 .toggle-chip.on{ border-color:var(--violet); background: rgba(139,92,246,.1); }
 .toggle-chip input{ accent-color:var(--violet); width:16px; height:16px; cursor:pointer; }
 .gen-btn{
   width:100%; margin-top:6px;
   background: linear-gradient(135deg, var(--violet), #7c3aed);
   color:#fff; border:none; font-size:15px; font-weight:700;
   padding:15px; border-radius:12px; cursor:pointer;
   display:flex; align-items:center; justify-content:center; gap:8px;
   box-shadow: 0 10px 26px var(--violet-glow);
   transition: transform .15s ease;
 }
 .gen-btn:hover{ transform:translateY(-1px); }
 .gen-btn:active{ transform:translateY(0); }
 
 .result-card{ background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:6px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
 .result-text{ flex:1; padding:14px 16px; font-family:monospace; font-size:17px; font-weight:600; color:var(--violet-2); word-break:break-all; text-align:center; }
 .strength-bar{ display:flex; gap:5px; margin-top:14px; padding:0 4px 14px; }
 .strength-seg{ flex:1; height:6px; border-radius:999px; background: var(--bg-soft); transition: background .2s; }
 .strength-seg.fill{ background: var(--green); }
 .strength-label{ text-align:center; font-size:12.5px; color:var(--text-dimmer); padding-bottom:14px; }
 
 .data-table{ background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
 .data-row{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--border); gap:10px; }
 .data-row:last-child{ border-bottom:none; }
 .data-row .dk{ font-size:13px; color:var(--text-dimmer); width:110px; flex-shrink:0; }
 .data-row .dv-wrap{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; justify-content:flex-end; }
 .data-row .dv{ text-align:left; direction:ltr; font-family:monospace; font-size:13.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .mini-copy{
   width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:rgba(139,92,246,.05);
   color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
   transition:all .2s;
 }
 .mini-copy:hover{ border-color:var(--violet); color:var(--violet-2); }
 
 .back-link{
   display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); text-decoration:none;
   font-size:13.5px; font-weight:600; margin-bottom:24px; transition:color .2s; cursor:pointer;
 }
 .back-link:hover{ color:var(--violet-2); }
 
 .username-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
 .username-grid .data-row{ border-left:1px solid var(--border); }
 .username-grid .data-row:nth-child(even){ border-left:none; }
 
 /* ---------- PASSWORD STRENGTH CHECKER ---------- */
 .pwcheck-input-wrap{ position:relative; }
 .pwcheck-input{
   width:100%; background: var(--bg-soft); border:1px solid var(--border); color:var(--text);
   padding:15px 50px 15px 16px; border-radius:12px; font-size:16px; font-family:monospace;
   outline:none; transition:border-color .2s; letter-spacing:.5px;
 }
 .pwcheck-input:focus{ border-color:var(--violet); }
 .pwcheck-toggle{
   position:absolute; left:8px; top:50%; transform:translateY(-50%);
   width:34px; height:34px; border-radius:9px; border:none; background:transparent;
   color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center;
 }
 .pwcheck-toggle:hover{ color:var(--violet-2); }
 .pwcheck-meter{ display:flex; gap:5px; margin-top:16px; }
 .pwcheck-seg{ flex:1; height:8px; border-radius:999px; background: var(--bg-soft); transition: background .25s ease; }
 .pwcheck-label-row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
 .pwcheck-label{ font-size:14px; font-weight:700; }
 .pwcheck-eta{ font-size:12.5px; color:var(--text-dimmer); }
 .pwcheck-rules{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
 .rule-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-dimmer); transition: color .2s; }
 .rule-row.ok{ color:var(--text); }
 .rule-icon{ width:18px; height:18px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: var(--bg-soft); transition: all .2s; }
 .rule-row.ok .rule-icon{ background: rgba(52,211,153,.18); color:var(--green); }
 .pwcheck-warnings{ margin-top:18px; }
 .warn-chip{
   display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--amber);
   background: rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.2);
   padding:10px 14px; border-radius:10px; margin-bottom:8px;
 }
 
 /* ---------- QR CODE GENERATOR ---------- */
 .qr-tabs{ display:flex; gap:6px; background:var(--bg-soft); border:1px solid var(--border); padding:4px; border-radius:11px; margin-bottom:18px; }
 .qr-tabs button{
   flex:1; border:none; background:transparent; color:var(--text-dim); font-size:13px; font-weight:600;
   padding:9px 10px; border-radius:8px; cursor:pointer; transition: all .2s;
 }
 .qr-tabs button.active{ background: linear-gradient(135deg, var(--violet), #7c3aed); color:#fff; }
 .qr-preview-card{
   background:var(--panel); border:1px solid var(--border); border-radius:18px;
   padding:30px; display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:20px;
 }
 .qr-canvas-box{
   width:200px; height:200px; background:#fff; border-radius:14px;
   display:flex; align-items:center; justify-content:center; overflow:hidden;
   box-shadow: 0 8px 24px rgba(0,0,0,.15);
 }
 .qr-canvas-box img, .qr-canvas-box canvas{ width:100%; height:100%; }
 .qr-empty-state{ color:#bbb; font-size:12.5px; text-align:center; padding:0 16px; }
 .qr-actions{ display:flex; gap:10px; width:100%; }
 .qr-color-row{ display:flex; gap:14px; align-items:center; }
 .qr-color-field{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); }
 .qr-color-field input[type=color]{
   width:34px; height:34px; border-radius:9px; border:1px solid var(--border); cursor:pointer; background:none; padding:2px;
 }
 .wifi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
 
 /* ---------- FILE TOOLS (shared: dropzone) ---------- */
 .dropzone{
   border:2px dashed var(--border); border-radius:16px;
   padding:40px 20px; text-align:center; cursor:pointer;
   transition: all .2s ease; background: var(--panel);
 }
 .dropzone.drag-over{ border-color: var(--violet); background: rgba(139,92,246,.06); }
 .dropzone .dz-icon{ width:48px; height:48px; margin:0 auto 14px; color:var(--violet-2); }
 .dropzone h4{ font-size:15px; font-weight:700; margin-bottom:6px; }
 .dropzone p{ font-size:13px; color:var(--text-dimmer); }
 .dropzone input[type=file]{ display:none; }
 
 .file-chip{
   display:flex; align-items:center; gap:12px;
   background:var(--panel); border:1px solid var(--border); border-radius:12px;
   padding:12px 16px; margin-bottom:10px;
 }
 .file-chip .fc-icon{ width:36px; height:36px; border-radius:9px; background:rgba(139,92,246,.12); color:var(--violet-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
 .file-chip .fc-info{ flex:1; min-width:0; text-align:right; }
 .file-chip .fc-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .file-chip .fc-size{ font-size:12px; color:var(--text-dimmer); }
 .file-chip .fc-remove{ width:28px; height:28px; border-radius:8px; border:none; background:rgba(248,113,113,.1); color:var(--red); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
 .file-chip .fc-remove:hover{ background:rgba(248,113,113,.18); }
 
 .compare-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
 .compare-box{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; text-align:center; }
 .compare-box img{ max-width:100%; border-radius:10px; max-height:180px; object-fit:contain; }
 .compare-box .cb-label{ font-size:12px; color:var(--text-dimmer); margin-bottom:8px; }
 .compare-box .cb-size{ font-size:14px; font-weight:700; margin-top:8px; }
 .compare-savings{
   text-align:center; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.2);
   color:var(--green); font-weight:700; font-size:14px; padding:10px; border-radius:10px; margin-bottom:16px;
 }
 
 .textarea-input{
   width:100%; min-height:140px; background: var(--bg-soft); border:1px solid var(--border); color:var(--text);
   padding:14px 16px; border-radius:12px; font-size:13.5px; font-family:monospace;
   outline:none; resize:vertical; transition:border-color .2s; line-height:1.6;
 }
 .textarea-input:focus{ border-color:var(--violet); }
 .swap-btn{
   width:42px; height:42px; border-radius:11px; border:1px solid var(--border); background:var(--panel);
   color:var(--violet-2); cursor:pointer; display:flex; align-items:center; justify-content:center;
   margin:10px auto; transition: all .2s;
 }
 .swap-btn:hover{ border-color:var(--violet); transform:rotate(180deg); }
 
 .pdf-list{ margin:16px 0; }
 .pdf-item{
   display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border);
   border-radius:12px; padding:10px 14px; margin-bottom:8px; cursor:grab;
 }
 .pdf-item .pdf-num{ width:26px; height:26px; border-radius:50%; background:rgba(139,92,246,.15); color:var(--violet-2); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
 .pdf-item .pdf-name{ flex:1; font-size:13px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .pdf-item .pdf-actions{ display:flex; gap:6px; }
 .pdf-item button{ width:26px; height:26px; border-radius:7px; border:none; background:rgba(255,255,255,.05); color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; }
 .pdf-item button:hover{ color:var(--violet-2); }
 
 .progress-bar-wrap{ display:none; margin:14px 0; }
 .progress-bar-wrap.active{ display:block; }
 .progress-bar-track{ height:8px; background:var(--bg-soft); border-radius:999px; overflow:hidden; }
 .progress-bar-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--violet), var(--violet-2)); transition: width .2s ease; }
 .progress-bar-text{ font-size:12.5px; color:var(--text-dimmer); margin-top:6px; text-align:center; }
 
 .error-banner{
   display:none; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.25);
   color:var(--red); font-size:13px; padding:12px 16px; border-radius:10px; margin-bottom:14px;
 }
 .error-banner.show{ display:block; }
 
 @media (max-width: 880px){
   .compare-row{ grid-template-columns:1fr; }
 }
 @media (max-width: 880px){
   nav{ padding:14px 18px; }
   .nav-links{ display:none; }
   h1.hero-title{ font-size:34px; }
   .badge-row, .tools-grid{ grid-template-columns:1fr 1fr; }
   .stats-section{ grid-template-columns:1fr 1fr; gap:24px; }
   .top-cards{ grid-template-columns:1fr; }
   .email-card{ flex-direction:column; align-items:stretch; text-align:center; }
   .email-info{ text-align:center; }
   .msg-sender{ display:none; }
   .username-grid{ grid-template-columns:1fr; }
   .username-grid .data-row{ border-left:none; }
   footer{ padding:40px 24px 24px; }
   .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
   .footer-identity{ grid-column:1 / -1; }
 }
 @media (max-width: 480px){
   .footer-grid{ grid-template-columns:1fr; }
 }

/* =============================================
   v3 additions — tools toolbar (search + categories),
   card entrance motion, floating theme button.
   Purely additive: nothing above this line changed.
   ============================================= */

.tools-toolbar{
  max-width:1000px; margin:0 auto 26px;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.tool-search{
  position:relative; width:100%; max-width:440px;
}
.tool-search input{
  width:100%;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:13px 44px 13px 16px;
  color:var(--text);
  font-family:inherit; font-size:14.5px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tool-search input:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 4px var(--violet-glow);
}
.tool-search svg{
  position:absolute; top:50%; right:15px; transform:translateY(-50%);
  color:var(--text-dimmer); pointer-events:none;
}
.cat-chips{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.cat-chip{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text-dim);
  border-radius:999px;
  padding:8px 18px;
  font-family:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}
.cat-chip:hover{ color:var(--text); border-color:var(--violet); transform:translateY(-1px); }
.cat-chip.active{
  background:linear-gradient(135deg, var(--violet), #7c3aed);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px var(--violet-glow);
}
.tool-card.filtered-out{ display:none; }
.tools-empty{
  display:none;
  text-align:center; color:var(--text-dimmer);
  padding:34px 0; font-size:15px;
}
.tools-empty.show{ display:block; }

/* Entrance motion for tool cards — subtle, staggered, disabled for
   users who prefer reduced motion. */
/* ============================================================
   v7 — New motion language: "springy + smooth"
   Replaces the previous flat fade/translate with a more
   refined, slightly bouncy entrance + an idle "breathing"
   glow on hover. Spring easing curve: cubic-bezier(.22,1.36,.36,1)
   (custom — no library) gives a single overshoot ~6% that
   settles cleanly within the duration.
   ============================================================ */
@keyframes springUp{
  0%   { opacity:0; transform:translateY(22px) scale(.92); filter:blur(4px); }
  60%  { opacity:1; filter:blur(0); }
  100% { opacity:1; transform:translateY(0)    scale(1);   filter:blur(0); }
}
@keyframes breathe{
  0%,100% { box-shadow:0 0 0 0 rgba(139,92,246,0); }
  50%     { box-shadow:0 0 0 6px rgba(139,92,246,.12); }
}
.tools-grid .tool-card{
  /* Entrance is handled once-per-page by triggerReveals() in script.js.
     The previous `animation:springUp ... both` restarted on EVERY page show
     (display:none→block re-runs CSS animations), so tool cards vanished and
     sprang back in on each navigation — the "tools disappear" regression.
     Removing the re-firing animation keeps them stable across navigation. */
  will-change:transform, opacity;
}
.tools-grid .tool-card:nth-child(1){ animation-delay:.02s; }
.tools-grid .tool-card:nth-child(2){ animation-delay:.07s; }
.tools-grid .tool-card:nth-child(3){ animation-delay:.12s; }
.tools-grid .tool-card:nth-child(4){ animation-delay:.17s; }
.tools-grid .tool-card:nth-child(5){ animation-delay:.22s; }
.tools-grid .tool-card:nth-child(6){ animation-delay:.27s; }
.tools-grid .tool-card:nth-child(n+7){ animation-delay:.32s; }
/* After the entrance settles, hovering a card runs the soft
   "breathe" glow loop — replaces the old flat translateY hover. */
.tools-grid .tool-card:hover{
  animation:breathe 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .tools-grid .tool-card,
  .tools-grid .tool-card:hover{ animation:none; }
}

/* "جديد" ribbon on freshly added tools */
.tool-new{
  position:absolute; top:14px; left:14px;
  background:linear-gradient(135deg, var(--green), #0ea5e9);
  color:#fff; font-size:11px; font-weight:800;
  border-radius:999px; padding:3px 10px;
  letter-spacing:.3px;
}
.tool-card{ position:relative; }

/* Floating theme toggle for standalone /tools/* pages */
.floating-theme{
  position:fixed; bottom:22px; left:22px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:all .2s ease;
}
.floating-theme:hover{ color:var(--text); border-color:var(--violet); transform:translateY(-2px); }
.floating-theme .sun-icon{ display:none; }
html[data-theme="light"] .floating-theme .sun-icon{ display:block; }
html[data-theme="light"] .floating-theme .moon-icon{ display:none; }

/* Small utility rows used by the new tools */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .two-col{ grid-template-columns:1fr; } }
.stat-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.stat-chip{
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:12px; padding:12px 16px; text-align:center; flex:1 1 100px;
}
.stat-chip b{ display:block; font-size:20px; color:var(--violet-2); }
.stat-chip span{ font-size:12.5px; color:var(--text-dim); }
.mono-out{
  direction:ltr; text-align:left;
  font-family:ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size:13.5px; line-height:1.7; word-break:break-all; white-space:pre-wrap;
}
.swatch-row{ display:flex; flex-wrap:wrap; gap:10px; }
.swatch{
  flex:1 1 90px; min-height:86px; border-radius:14px; border:1px solid var(--border);
  display:flex; align-items:flex-end; justify-content:center; padding:8px;
  cursor:pointer; transition:transform .15s ease;
}
.swatch:hover{ transform:translateY(-3px); }
.swatch code{
  background:rgba(0,0,0,.45); color:#fff; border-radius:8px;
  padding:3px 8px; font-size:12px; direction:ltr;
}
.regex-match{ background:rgba(139,92,246,.35); border-radius:4px; padding:0 2px; }
.jwt-part-h{ color:var(--red); } .jwt-part-p{ color:var(--violet-2); } .jwt-part-s{ color:var(--blue); }
.ok-badge{ color:var(--green); font-weight:700; }
.warn-badge{ color:var(--amber); font-weight:700; }
.err-badge{ color:var(--red); font-weight:700; }

/* =============================================
   v4 additions — brand logo, hero motion,
   scroll-reveal, button shine. Additive only.
   ============================================= */

/* Nav brand: white circular badge like the official logo */
.brand-icon.brand-logo{
  background:#fff;
  border-radius:50%;
  border:1px solid var(--border);
  overflow: hidden;
}
.brand-icon.brand-logo svg{ width:19px; height:22px; color:#221f33; }

/* Tool-page topbar logo */
.topbar-logo{ display:inline-flex; width:28px; height:32px; color:var(--text); }
.topbar-logo svg{ width:100%; height:100%; }

/* Hero logo: floating + soft glow */
.hero-logo{ display:flex; justify-content:center; position:relative; }
.hero-logo::before{
  /* Soft pulsing halo behind the logo for depth — sits underneath
     the image and pulses with the same rhythm as the float. */
  content:"";
  position:absolute; inset:-20% -20% -20% -20%;
  background:radial-gradient(closest-side, rgba(139,92,246,.35), transparent 70%);
  filter:blur(20px);
  z-index:-1;
  animation:heroGlow 5s ease-in-out infinite;
  pointer-events:none;
}
.hero-logo img, .hero-logo svg{
  width:180px; height:auto;
  color:var(--text);
  filter: drop-shadow(0 20px 50px var(--violet-glow));
  animation: heroFloat 5s ease-in-out infinite;
}
/* Hero logo motion — 3D-feel: gentle vertical float + micro-rotation.
   Adds a soft glow pulse underneath for depth. */
@keyframes heroFloat{
  0%,100%{ transform:translateY(0)    rotate(0deg)   scale(1); }
  25%    { transform:translateY(-8px) rotate(-1.2deg) scale(1.015); }
  50%    { transform:translateY(-14px) rotate(0deg)  scale(1.025); }
  75%    { transform:translateY(-8px)  rotate(1.2deg) scale(1.015); }
}
@keyframes heroGlow{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%    { opacity:.6;  transform:scale(1.12); }
}

/* Scroll reveal — now uses scale+translate with a springy curve
   for a more confident "settle into place" feel. */
.reveal{ opacity:0; transform:translateY(28px) scale(.96);
  transition: opacity .7s cubic-bezier(.22,1.36,.36,1),
              transform .7s cubic-bezier(.22,1.36,.36,1); }
.reveal.in{ opacity:1; transform:translateY(0) scale(1); }

/* Primary button shine sweep — kept, but with a longer
   ribbon and a smoother ease so the swipe feels deliberate. */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; height:100%; width:55%;
  left:-70%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-22deg);
  transition:left .7s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-primary:hover::after{ left:125%; }
.btn-primary:active{ transform:translateY(0); transition-duration:.12s; }

/* Stat numbers — small spring on hover instead of a plain lift. */
.stats-section > div{
  transition: transform .35s cubic-bezier(.22,1.36,.36,1),
              box-shadow .35s ease;
}
.stats-section > div:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 30px -10px rgba(139,92,246,.35);
}

@media (prefers-reduced-motion: reduce){
  .hero-logo svg{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn-primary::after{ display:none; }
}

/* =============================================
   v5 additions — official logo.png branding,
   footer brand, home FAQ section. Additive only.
   ============================================= */

/* Logo image inside existing logo containers */
.brand-icon.brand-logo img{ width:22px; height:auto; display:block; }
.topbar-logo img{ width:100%; height:100%; object-fit:contain; }
.hero-logo img{
  width:180px; height:auto;
  filter: drop-shadow(0 20px 50px var(--violet-glow));
  animation: heroFloat 5s ease-in-out infinite;
}
.brand-top img{ width:26px; height:auto; }

/* Footer brand */
.footer-brand{ display:flex; align-items:center; gap:10px; color:var(--text-dimmer); }
.footer-brand img{ width:26px; height:auto; }

/* Home FAQ section */
.faq-section{ max-width:720px; margin:90px auto 0; padding:0 22px; }
.faq-section h2{ text-align:center; font-size:26px; font-weight:800; margin-bottom:8px; }
.faq-section .faq-sub{ text-align:center; color:var(--text-dim); font-size:15px; margin-bottom:28px; }
.faq-item{
  border:1px solid var(--border); border-radius:14px;
  background:var(--panel); margin-bottom:12px; overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:16px 20px;
  font-weight:700; font-size:15.5px; color:var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:20px; line-height:1; color:var(--violet-2);
  flex-shrink:0; transition: transform .25s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ padding:0 20px 18px; margin:0; color:var(--text-dim); font-size:14.5px; line-height:1.9; }

@media (prefers-reduced-motion: reduce){
  .hero-logo img{ animation:none; }
  .faq-item summary::after{ transition:none; }
}

/* =============================================
   v6 additions — accessibility & design polish:
   skip link, focus-visible ring, unified shadow
   scale, ease-out micro-interactions, touch
   targets, tabular numerals, reduced motion.
   Additive only — visual design unchanged.
   ============================================= */

:root{
  --ease-out: cubic-bezier(.215,.61,.355,1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.14);
  --shadow-md: 0 4px 12px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.16);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.30), 0 24px 64px rgba(0,0,0,.22);
}
html[data-theme="light"]{
  --shadow-sm: 0 1px 2px rgba(28,26,39,.06), 0 2px 8px rgba(28,26,39,.05);
  --shadow-md: 0 4px 12px rgba(28,26,39,.08), 0 8px 24px rgba(28,26,39,.06);
  --shadow-lg: 0 12px 32px rgba(28,26,39,.12), 0 24px 64px rgba(28,26,39,.08);
}

/* Skip-to-content link: hidden until keyboard-focused */
.skip-link{
  position:fixed; top:-64px; right:16px; z-index:200;
  background:var(--violet); color:#fff;
  padding:12px 24px; border-radius:0 0 12px 12px;
  font-weight:700; font-size:14px; text-decoration:none;
  box-shadow:var(--shadow-md);
  transition: top .2s var(--ease-out);
}
.skip-link:focus-visible{ top:0; }

/* Clear 3px violet focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--violet);
  outline-offset:2px;
  border-radius:6px;
}
.tool-card:focus-visible{ border-radius:16px; }
:focus:not(:focus-visible){ outline:none; }

/* Unified shadow scale on elevated surfaces */
.card, .gen-card, .qr-preview-card, .result-card{ box-shadow:var(--shadow-sm); }
.tool-card:hover, .btn-primary:hover, .cat-chip.active{ box-shadow:var(--shadow-md); }
.msg-modal-card, .toast, .floating-theme{ box-shadow:var(--shadow-lg); }

/* Micro-interactions: 150–300ms, ease-out curve */
.nav-links a, .icon-btn, .btn-small, .copy-btn, .mini-copy, .cat-chip,
.btn-primary, .btn-ghost, .gen-btn, .toggle-chip, .swap-btn,
.filter-tabs button, .qr-tabs button, .dropzone, .back-link,
.floating-theme, .footer-col ul a, .msg-row, .tool-link, .show-more,
.pwcheck-toggle, .file-chip .fc-remove, .pdf-item button, .stats-section > div{
  transition-duration:.2s;
  transition-timing-function:var(--ease-out);
}
.tool-card{ transition:transform .25s var(--ease-out), border-color .2s var(--ease-out), box-shadow .25s var(--ease-out); }
.reveal{ transition-timing-function:var(--ease-out); }

/* Honest tabular numerals for the stats row */
.stats-section .stat-num{ font-variant-numeric:tabular-nums; }

/* 44px minimum touch targets on coarse pointers (phones/tablets) —
   desktop visual design stays untouched */
@media (pointer: coarse){
  button, .icon-btn, .copy-btn, .btn-small, .cat-chip,
  .filter-tabs button, .qr-tabs button, .nav-links a,
  .mini-copy, .pwcheck-toggle, .swap-btn, .file-chip .fc-remove,
  .pdf-item button, .footer-col ul a, .msg-modal-close{
    min-width:44px; min-height:44px;
  }
}

/* All motion off for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
}

/* =============================================
   v8 — Animated background system
   Adds: animated mesh-gradient + floating orbs +
   subtle moving grid + interactive particles
   canvas. Honors reduced motion.
   Additive only — does not modify any rule above.
   ============================================= */

/* Canvas that sits behind everything and renders the
   particle network. JS owns the drawing. */
.bg-particles{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  width:100%; height:100%;
}

/* Mesh gradient: 3 oversized blurred radial blobs that
   drift very slowly to give a "breathing aurora" feel. */
.bg-mesh{
  position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(139,92,246,.45), transparent 38%),
    radial-gradient(circle at 80% 30%, rgba(96,165,250,.30), transparent 42%),
    radial-gradient(circle at 50% 80%, rgba(217,70,239,.30), transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(52,211,153,.18), transparent 40%);
  filter: blur(60px) saturate(1.1);
  animation: meshDrift 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
html[data-theme="light"] .bg-mesh{
  background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,.18), transparent 42%),
    radial-gradient(circle at 80% 30%, rgba(37,99,235,.12), transparent 44%),
    radial-gradient(circle at 50% 80%, rgba(192,38,211,.10), transparent 46%),
    radial-gradient(circle at 80% 90%, rgba(5,150,105,.08),  transparent 42%);
  filter: blur(70px) saturate(1.05);
  /* meshDrift pumps opacity to .85–1 for the dark theme; on the light theme
     that made the whole page look washed-out/hazy. Hold the light mesh at a
     low, static opacity so light-theme colours stay crisp. Dark theme is
     unchanged. */
  animation: none;
  opacity: .38;
}
@keyframes meshDrift{
  0%   { transform: translate3d(0,0,0)        scale(1);    opacity:.85; }
  33%  { transform: translate3d(2%,-2%,0)     scale(1.06); opacity:1;   }
  66%  { transform: translate3d(-2%,1.5%,0)   scale(1.03); opacity:.92; }
  100% { transform: translate3d(1%,2%,0)      scale(1.08); opacity:1;   }
}

/* Subtle moving grid lines for a "tech" texture. Very low
   opacity so it never fights the content. */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(139,92,246,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 100%);
  animation: gridSlide 50s linear infinite;
}
html[data-theme="light"] .bg-grid{
  background-image:
    linear-gradient(rgba(124,58,237,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.06) 1px, transparent 1px);
}
@keyframes gridSlide{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 56px 56px, 56px 56px; }
}

/* Subtle noise overlay for texture (inline SVG, no asset). */
.bg-noise{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Make sure the page content sits above all background layers. */
.wrap{ position:relative; z-index:1; }

/* Disable heavy background motion for reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .bg-mesh, .bg-grid{ animation:none !important; }
  .bg-noise{ display:none; }
}

/* =============================================
   v9 — UI polish: gradient borders on tool cards,
   smoother hero, animated badges, refined nav.
   Purely additive. Honors reduced motion.
   ============================================= */

/* Animated gradient halo that follows the cursor over a tool card. */
.tools-grid .tool-card{
  position:relative;
  isolation:isolate;
}
.tools-grid .tool-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:17px;
  padding:1px;
  background: linear-gradient(135deg,
    var(--violet-2) 0%, transparent 30%,
    transparent 70%, var(--violet-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0;
  transition: opacity .35s var(--ease-out);
  pointer-events:none;
  z-index:-1;
}
.tools-grid .tool-card:hover::before,
.tools-grid .tool-card:focus-visible::before{ opacity:1; }
.tools-grid .tool-card.violet:hover::before{ background: linear-gradient(135deg,#a78bfa,#7c3aed 50%,transparent 80%); }
.tools-grid .tool-card.emerald:hover::before{ background: linear-gradient(135deg,#34d399,#059669 50%,transparent 80%); }
.tools-grid .tool-card.blue:hover::before{     background: linear-gradient(135deg,#60a5fa,#2563eb 50%,transparent 80%); }
.tools-grid .tool-card.amber:hover::before{   background: linear-gradient(135deg,#fbbf24,#d97706 50%,transparent 80%); }

/* Tool icon — softer glow on hover */
.tool-icon{
  position:relative;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.tool-card:hover .tool-icon{
  transform: translateY(-2px) scale(1.04) rotate(-3deg);
  box-shadow: 0 8px 24px -8px var(--violet-glow);
}

/* Better card lift + softer shadow on hover (replaces the old breathe) */
.tools-grid .tool-card:hover{
  animation:none;
  transform: translateY(-5px);
  box-shadow: 0 20px 50px -20px rgba(139,92,246,.45);
}

/* New "جديد" ribbon — make it pulse subtly so it draws the eye */
@keyframes ribbonPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  50%    { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}
.tool-new{ animation: ribbonPulse 1.8s ease-in-out infinite; }

/* Nav: subtle gradient strip at the bottom for a "glass" feel */
nav{ position:sticky; top:0; z-index:50; }
nav::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, var(--violet-glow) 50%, transparent);
  opacity:.8;
  pointer-events:none;
}

/* Brand mark — small floating animation in the nav (disabled: keep logo stable) */
.brand-icon.brand-logo{ overflow:hidden; }

/* Active nav link: keep gradient but add a tiny dot above it */
.nav-links a.active{ position:relative; }
.nav-links a.active::before{
  content:"";
  position:absolute; top:2px; left:50%;
  transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px #fff, 0 0 16px var(--violet-2);
  animation: navDot 1.6s ease-in-out infinite;
}
@keyframes navDot{
  0%,100%{ opacity:1;   transform:translateX(-50%) scale(1);   }
  50%    { opacity:.55; transform:translateX(-50%) scale(.7); }
}

/* Hero — make the big logo animation a little more confident */
.hero-logo img{ width:200px; }
@keyframes heroFloat{
  0%,100%{ transform:translateY(0)     rotate(0deg)  scale(1);    }
  25%    { transform:translateY(-10px) rotate(-2deg) scale(1.02); }
  50%    { transform:translateY(-18px) rotate(0deg)  scale(1.04); }
  75%    { transform:translateY(-10px) rotate(2deg)  scale(1.02); }
}

/* Hero h1 accent — animated gradient text (subtle, slow) */
@keyframes accentShift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
h1.hero-title .accent{
  background-size: 200% 200%;
  animation: accentShift 6s ease-in-out infinite;
}

/* Badge cards — gentle hover lift matching the tool cards */
.badge-card{
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.badge-card:hover{
  transform: translateY(-3px);
  border-color: var(--violet);
  box-shadow: 0 12px 28px -16px var(--violet-glow);
}
.badge-icon{ transition: transform .35s var(--ease-out); }
.badge-card:hover .badge-icon{ transform: scale(1.08) rotate(-6deg); }

/* Primary button — slightly bigger shine on hover */
.btn-primary{ transform: translateZ(0); }
.btn-primary:hover{ transform: translateY(-2px) scale(1.015); }

/* Stats: animated count-up backdrop (no JS needed; just a soft glow) */
.stats-section > div{
  position:relative;
  border-radius:14px;
  padding:14px 8px;
}
.stats-section > div:hover .stat-num{
  text-shadow: 0 0 18px var(--violet-glow);
}

/* FAQ: slightly more elegant open state */
.faq-item[open]{
  border-color: var(--violet);
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 92%, var(--violet) 8%));
}

/* Tool header badge — small pulse so the page feels alive */
@keyframes badgePulse{
  0%,100%{ box-shadow: 0 0 0 0 currentColor; }
  50%    { box-shadow: 0 0 0 6px transparent; }
}
.tool-header .tool-badge{
  position:relative;
  animation: badgePulse 2.4s ease-in-out infinite;
  color: var(--violet);
}

/* Inputs/textarea — gentle inner highlight on focus */
.text-input:focus, .select-input:focus, .textarea-input:focus,
.pwcheck-input:focus, .tool-search input:focus{
  box-shadow: 0 0 0 4px var(--violet-glow), inset 0 0 0 1px var(--violet);
}

/* Hover for footer brand image (disabled: keep logo stable) */

@media (prefers-reduced-motion: reduce){
  .tools-grid .tool-card:hover,
  .tools-grid .tool-card:hover::before,
  .nav-links a.active::before,
  h1.hero-title .accent,
  .tool-new,
  .tool-header .tool-badge,
  .hero-logo img{
    animation:none !important;
    transition:none !important;
  }
}

/* =============================================
   Password Engine — recommendations list.
   Shared styling used by both the password generator
   and the strength checker (Nafadh violet identity).
   ============================================= */
.pw-recos{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.pw-recos:empty{ display:none; }
.pw-reco{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; line-height:1.7; color:var(--violet-2);
  background: rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.20);
  border-radius:10px; padding:9px 12px;
}
.pw-reco::before{ content:"↳"; flex-shrink:0; opacity:.8; }
html[data-theme="light"] .pw-reco{ background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.16); }

/* Data generator — password panel (reuses the strength bar + recos styles). */
.data-pw{ margin-top:18px; }
.data-pw[hidden]{ display:none; }
.dpw-head{ font-size:13px; font-weight:700; color:var(--text-dimmer); margin-bottom:10px; }

/* ============================================================
   v7 i18n — LTR (English) layout overrides.
   These rules apply ONLY when <html dir="ltr"> (English UI).
   Arabic / RTL rendering is the default and is left untouched.
   ============================================================ */
[dir="ltr"] .badge-card,
[dir="ltr"] .tool-card,
[dir="ltr"] .top-cards,
[dir="ltr"] .email-info,
[dir="ltr"] .msg-body,
[dir="ltr"] .msg-modal-card,
[dir="ltr"] .file-chip .fc-info,
[dir="ltr"] .pdf-item .pdf-name{ text-align:left; }

[dir="ltr"] .msg-modal-close{ left:auto; right:14px; }
[dir="ltr"] .msg-modal-head{ padding-left:0; padding-right:38px; }
[dir="ltr"] .pwcheck-toggle{ left:auto; right:8px; }
[dir="ltr"] .tool-search svg{ right:auto; left:15px; }
[dir="ltr"] .tool-search input{ padding:13px 16px 13px 44px; }
[dir="ltr"] .tool-new{ left:auto; right:14px; }
[dir="ltr"] .skip-link{ right:auto; left:16px; }
[dir="ltr"] .username-grid .data-row{ border-left:none; border-right:1px solid var(--border); }
[dir="ltr"] .username-grid .data-row:nth-child(even){ border-right:none; }
[dir="ltr"] .floating-theme{ left:auto; right:22px; }

/* Floating language button (used on standalone tool pages that have no navbar) */
.floating-lang{
  position:fixed; bottom:22px; left:74px; z-index:60;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel);
  color:var(--text); font-weight:800; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
[dir="ltr"] .floating-lang{ left:auto; right:74px; }

/* ============================================================
   نَفاذ Nafadh — v8 dashboard shell + homepage redesign
   Additive layer. Extends the existing tokens; does not alter
   the existing tool/inbox page rules above.
   ============================================================ */
:root{
  --sidebar-w: 252px;
  --topbar-h: 66px;
  --rail-w: 322px;
  --shell-max: 1460px;
  --card-radius: 18px;
}

/* Old top nav is replaced by the app shell */
.wrap > nav{ display:none !important; }

/* Content clears the fixed topbar + sidebar */
.wrap{ padding-top: var(--topbar-h); padding-left: var(--sidebar-w); transition: padding .25s ease; }

/* ---------------- TOP BAR ---------------- */
.app-topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  display:flex; align-items:center; gap:16px;
  padding:0 20px; direction:ltr; z-index:60;
  background:var(--nav-bg); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar-lead{ display:flex; align-items:center; gap:10px; min-width:var(--sidebar-w); }
.app-topbar .brand{ text-decoration:none; }
.app-topbar .brand-icon{ width:38px; height:38px; border-radius:11px; background:transparent; box-shadow:none; overflow:hidden; }
.app-topbar .brand-icon img{ width:100%; height:100%; object-fit:contain; }
.menu-btn{ display:none; }

.topbar-nav{ display:flex; align-items:center; gap:4px; margin-inline:auto; }
.topbar-nav .nav-link{
  color:var(--text-dim); text-decoration:none; font-size:14px; font-weight:600;
  padding:8px 14px; border-radius:10px; cursor:pointer; transition:all .2s ease;
  position:relative; direction:rtl;
}
.topbar-nav .nav-link:hover{ color:var(--text); background:rgba(139,92,246,.08); }
.topbar-nav .nav-link.active{ color:var(--violet-2); background:transparent; box-shadow:none; }
.topbar-nav .nav-link.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-2px; height:3px;
  border-radius:3px; background:linear-gradient(90deg,var(--violet),var(--violet-2));
}

.topbar-actions{ display:flex; align-items:center; gap:9px; }
.lang-pill{ width:auto !important; padding:0 12px; font-weight:700; font-size:13px; letter-spacing:.3px; }
.bell-btn{ position:relative; }
.bell-dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--red); border:2px solid var(--panel); }
.app-topbar .login-btn{
  background:linear-gradient(135deg,var(--violet),#7c3aed); color:#fff; border:none;
  text-decoration:none; padding:9px 18px; border-radius:11px; font-size:14px; font-weight:700;
  box-shadow:0 6px 18px var(--violet-glow); white-space:nowrap; transition:transform .15s ease, box-shadow .2s ease;
}
.app-topbar .login-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px var(--violet-glow); color:#fff; }

/* ---------------- SIDEBAR ---------------- */
.app-sidebar{
  position:fixed; top:var(--topbar-h); bottom:0; left:0; width:var(--sidebar-w);
  padding:16px 14px 24px; overflow-y:auto; z-index:55; direction:rtl;
  background:var(--bg-soft); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.app-sidebar::-webkit-scrollbar{ width:8px; }
.app-sidebar::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
.side-nav{ display:flex; flex-direction:column; gap:3px; }
.side-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px; cursor:pointer; text-decoration:none;
  color:var(--text-dim); font-size:14.5px; font-weight:600; transition:all .18s ease;
  border:1px solid transparent;
}
.side-item svg{ width:19px; height:19px; flex-shrink:0; }
.side-item span{ white-space:nowrap; }
.side-item:hover{ color:var(--text); background:rgba(139,92,246,.09); }
.side-item.active{
  color:#fff; background:linear-gradient(135deg,var(--violet),#7c3aed);
  box-shadow:0 6px 18px var(--violet-glow);
}
.side-badge.live{
  margin-inline-start:auto; font-size:9.5px; font-weight:800; letter-spacing:.5px;
  color:#fff; background:var(--red); padding:2px 7px; border-radius:6px;
  position:relative; animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

.side-promo{
  border-radius:16px; padding:16px; color:#fff;
  background:linear-gradient(150deg,#7c3aed,#8b5cf6 55%,#6d28d9);
  box-shadow:0 12px 30px var(--violet-glow); position:relative; overflow:hidden;
}
.side-promo::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 0,rgba(255,255,255,.25),transparent 45%); pointer-events:none; }
.side-promo-head{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; margin-bottom:10px; }
.side-promo-head svg{ width:18px; height:18px; }
.side-promo-list{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.side-promo-list li{ font-size:12.5px; opacity:.95; padding-inline-start:18px; position:relative; }
.side-promo-list li::before{ content:"✓"; position:absolute; inset-inline-start:0; font-weight:800; }
.side-promo-btn{
  width:100%; border:none; cursor:pointer; padding:10px; border-radius:11px;
  background:#fff; color:#6d28d9; font-weight:800; font-size:13.5px; font-family:inherit;
  transition:transform .15s ease;
}
.side-promo-btn:hover{ transform:translateY(-1px); }

.side-assistant{
  border:1px solid var(--border); background:var(--panel); border-radius:16px; padding:14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-align:right;
}
.side-assistant-icon{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(139,92,246,.14); color:var(--violet-2);
}
.side-assistant-icon svg{ width:22px; height:22px; }
.side-assistant-text strong{ display:block; font-size:14px; color:var(--text); }
.side-assistant-text span{ display:block; font-size:11.5px; color:var(--text-dimmer); line-height:1.6; margin-top:2px; }
.side-assistant-btn{
  width:100%; border:1px solid var(--violet); background:rgba(139,92,246,.1); color:var(--violet-2);
  cursor:pointer; padding:9px; border-radius:11px; font-weight:700; font-size:13px; font-family:inherit;
  transition:all .18s ease;
}
.side-assistant-btn:hover{ background:var(--violet); color:#fff; }

.sidebar-scrim{ position:fixed; inset:0; background:rgba(6,5,12,.6); z-index:54; backdrop-filter:blur(2px); }
.sidebar-scrim[hidden]{ display:none; }

/* ---------------- HOME LAYOUT ---------------- */
.home-layout{
  display:grid; grid-template-columns:minmax(0,1fr) var(--rail-w); gap:26px;
  max-width:var(--shell-max); margin:0 auto; padding:26px 30px 40px; direction:ltr;
}
.home-main{ direction:rtl; min-width:0; display:flex; flex-direction:column; gap:28px; }
.home-rail{ direction:rtl; display:flex; flex-direction:column; gap:20px; }

/* section heads */
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.section-head h2{ font-size:24px; font-weight:800; }
.section-link{ color:var(--violet-2); font-size:13.5px; font-weight:700; text-decoration:none; white-space:nowrap; }
.section-link:hover{ text-decoration:underline; }

/* ---------------- HERO ---------------- */
#page-home .hero{
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:28px;
  max-width:none; margin:0; padding:8px 0 4px; text-align:right;
}
.hero-copy{ direction:rtl; }
#page-home .hero .eyebrow{ margin-bottom:14px; }
#page-home h1.hero-title{ font-size:44px; line-height:1.24; margin-bottom:14px; }
#page-home .hero-sub{ margin:0 0 20px; max-width:560px; font-size:16px; }

.hero-search{
  display:flex; align-items:center; gap:8px; background:var(--panel);
  border:1px solid var(--border); border-radius:15px; padding:7px 8px 7px 7px;
  box-shadow:0 10px 30px rgba(0,0,0,.18); max-width:600px;
}
.hero-search:focus-within{ border-color:var(--violet); box-shadow:0 12px 34px var(--violet-glow); }
.hero-search-scope{
  font-size:13px; font-weight:700; color:var(--text-dim); white-space:nowrap;
  padding:9px 14px; border-radius:11px; background:var(--panel-2); cursor:default;
}
.hero-search-input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:15px; padding:6px 4px;
}
.hero-search-input::placeholder{ color:var(--text-dimmer); }
.hero-search-btn{
  width:44px; height:44px; flex-shrink:0; border:none; cursor:pointer; border-radius:12px;
  background:linear-gradient(135deg,var(--violet),#7c3aed); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px var(--violet-glow);
  transition:transform .15s ease;
}
.hero-search-btn:hover{ transform:translateY(-1px) scale(1.03); }

.hero-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.hero-chip{
  font-size:13px; font-weight:600; color:var(--text-dim); text-decoration:none;
  padding:8px 15px; border-radius:999px; border:1px solid var(--border); background:var(--panel);
  transition:all .18s ease; cursor:pointer;
}
.hero-chip:hover{ color:var(--violet-2); border-color:var(--violet); background:rgba(139,92,246,.08); }

/* hero visual */
.hero-visual{ position:relative; height:300px; display:flex; align-items:center; justify-content:center; }
.hero-visual-glow{
  position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,var(--violet-glow),transparent 65%); filter:blur(10px);
}
.hero-logo-3d{ position:relative; width:190px; animation:floatY 6s ease-in-out infinite; }
.hero-logo-3d img{ width:100%; filter:drop-shadow(0 24px 46px var(--violet-glow)); }
.hero-orb{
  position:absolute; width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--border); color:var(--violet-2);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.hero-orb svg{ width:24px; height:24px; }
.orb-mail{ top:20px; left:6px; color:var(--blue); animation:floatY 5s ease-in-out infinite; }
.orb-search{ bottom:34px; left:20px; color:var(--violet-2); animation:floatY 6.5s ease-in-out .6s infinite; }
.orb-lock{ top:60px; right:8px; color:var(--green); animation:floatY 5.6s ease-in-out .3s infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

/* ---------------- STATS STRIP ---------------- */
.stats-strip{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
}
.stat-tile{
  background:var(--panel); border:1px solid var(--border); border-radius:15px; padding:16px 12px;
  text-align:center; transition:transform .2s ease, border-color .2s ease;
}
.stat-tile:hover{ transform:translateY(-3px); border-color:var(--violet); }
.stat-tile .stat-ico{ font-size:20px; margin-bottom:6px; }
.stat-tile .stat-num{ font-size:24px; font-weight:800; color:var(--text);
  background:linear-gradient(90deg,var(--violet-2),#c4b5fd); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-tile .stat-label{ font-size:12px; color:var(--text-dim); margin-top:3px; }

/* ---------------- FEATURE CARDS ---------------- */
.feature-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature-card{
  position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--card-radius);
  padding:22px 18px; display:flex; flex-direction:column; gap:12px; overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feature-card:hover{ transform:translateY(-4px); border-color:var(--violet); box-shadow:0 16px 40px rgba(0,0,0,.28); }
.feat-badge{
  position:absolute; top:14px; inset-inline-end:14px; font-size:10px; font-weight:800;
  color:#fff; background:linear-gradient(135deg,var(--green),#059669); padding:3px 9px; border-radius:7px;
}
.feat-icon{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.feat-icon svg{ width:26px; height:26px; }
.feat-icon.violet{ background:rgba(139,92,246,.15); color:var(--violet-2); }
.feat-icon.blue{ background:rgba(96,165,250,.15); color:var(--blue); }
.feat-icon.green{ background:rgba(52,211,153,.15); color:var(--green); }
.feat-icon.amber{ background:rgba(251,191,36,.15); color:var(--amber); }
.feature-card h3{ font-size:17px; font-weight:800; }
.feature-card > p{ font-size:13px; color:var(--text-dim); line-height:1.7; margin-top:-4px; }
.feat-list{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.feat-list li{ font-size:12.5px; color:var(--text-dim); padding-inline-start:18px; position:relative; }
.feat-list li::before{ content:""; position:absolute; inset-inline-start:2px; top:7px; width:6px; height:6px; border-radius:50%; background:var(--violet); }
.feat-platforms{ display:flex; gap:8px; font-size:18px; }
.feat-inline-form{ display:flex; gap:6px; }
.feat-inline-form input{
  flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
  padding:8px 10px; color:var(--text); font-family:inherit; font-size:12px; outline:none;
}
.feat-inline-form input:focus{ border-color:var(--violet); }
.feat-inline-btn{ border:none; cursor:pointer; border-radius:10px; padding:8px 12px; font-size:12px; font-weight:700; font-family:inherit;
  background:rgba(139,92,246,.15); color:var(--violet-2); white-space:nowrap; }
.feat-inline-btn:hover{ background:var(--violet); color:#fff; }
.feat-btn{
  margin-top:auto; text-align:center; text-decoration:none; cursor:pointer; font-family:inherit;
  padding:11px; border-radius:12px; font-size:13.5px; font-weight:700; border:1px solid var(--violet);
  background:rgba(139,92,246,.1); color:var(--violet-2); transition:all .18s ease; display:block;
}
.feat-btn:hover{ background:linear-gradient(135deg,var(--violet),#7c3aed); color:#fff; border-color:transparent; }

/* ---------------- TOOLS SECTION (reused, refit to column) ---------------- */
#page-home #tools{ max-width:none; padding:0; margin:0; }
#page-home #tools > h2, #page-home #tools > .sub{ display:none; }
#page-home #tools .tools-grid{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }

/* ---------------- BLOG ---------------- */
.blog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.blog-card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.blog-card:hover{ transform:translateY(-4px); border-color:var(--violet); box-shadow:0 16px 40px rgba(0,0,0,.28); }
.blog-thumb{ height:120px; position:relative; }
.thumb-a{ background:linear-gradient(135deg,#312e57,#1c1a2e); }
.thumb-b{ background:linear-gradient(135deg,#173a3a,#141d2b); }
.thumb-c{ background:linear-gradient(135deg,#3a2a17,#2b201a); }
.thumb-d{ background:linear-gradient(135deg,#2a1740,#1d1730); }
.blog-thumb::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(139,92,246,.35),transparent 60%); }
.blog-tag{ position:absolute; top:10px; inset-inline-start:10px; z-index:1; font-size:11px; font-weight:700; color:#fff;
  background:rgba(139,92,246,.85); padding:3px 10px; border-radius:8px; }
.blog-body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.blog-body h3{ font-size:14.5px; font-weight:700; line-height:1.6; }
.blog-meta{ display:flex; gap:6px; font-size:11.5px; color:var(--text-dimmer); }

/* ---------------- VALUE STRIP ---------------- */
.value-strip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--card-radius); padding:20px;
}
.value-item{ display:flex; align-items:center; gap:11px; }
.value-ico{ font-size:22px; flex-shrink:0; }
.value-item h4{ font-size:13.5px; font-weight:800; }
.value-item p{ font-size:11.5px; color:var(--text-dim); margin-top:2px; line-height:1.5; }

/* ---------------- RIGHT RAIL ---------------- */
.rail-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--card-radius); padding:18px; position:sticky; }
.trends-card{ top:calc(var(--topbar-h) + 20px); }
.rail-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rail-head h3{ font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; }
.rail-live{ font-size:10px; font-weight:800; color:#fff; background:var(--red); padding:3px 9px; border-radius:7px; animation:livePulse 2s ease-in-out infinite; }
.trend-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.trend-chip{ font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; padding:5px 12px; border-radius:999px;
  border:1px solid var(--border); background:transparent; color:var(--text-dim); transition:all .18s ease; }
.trend-chip.active,.trend-chip:hover{ background:var(--violet); color:#fff; border-color:transparent; }
.trend-list{ list-style:none; display:flex; flex-direction:column; }
.trend-list li{ display:flex; align-items:center; gap:11px; padding:10px 4px; border-bottom:1px solid var(--border); }
.trend-list li:last-child{ border-bottom:none; }
.trend-rank{ width:24px; height:24px; flex-shrink:0; border-radius:8px; background:var(--panel-2); color:var(--violet-2);
  font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:center; }
.trend-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.trend-name{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trend-sub{ font-size:11px; color:var(--text-dimmer); }
.trend-up{ color:var(--green); font-size:11px; }
.rail-btn{ width:100%; margin-top:14px; border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  cursor:pointer; font-family:inherit; padding:10px; border-radius:11px; font-weight:700; font-size:13px; transition:all .18s ease; }
.rail-btn:hover{ border-color:var(--violet); color:var(--violet-2); }

.news-card h3{ font-size:16px; font-weight:800; margin-bottom:6px; }
.news-card > p{ font-size:12.5px; color:var(--text-dim); line-height:1.7; margin-bottom:14px; }
.news-form{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.news-form input{ background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:11px 12px;
  color:var(--text); font-family:inherit; font-size:13px; outline:none; }
.news-form input:focus{ border-color:var(--violet); }
.news-btn{ border:none; cursor:pointer; border-radius:11px; padding:11px; font-family:inherit; font-weight:800; font-size:13.5px;
  background:linear-gradient(135deg,var(--violet),#7c3aed); color:#fff; box-shadow:0 6px 16px var(--violet-glow); }
.social-row{ display:flex; gap:10px; }
.social-ico{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim); transition:all .18s ease; }
.social-ico svg{ width:18px; height:18px; }
.social-ico:hover{ color:var(--violet-2); border-color:var(--violet); transform:translateY(-2px); }

/* footer clears sidebar automatically via .wrap padding */
footer{ position:relative; z-index:1; }

/* ---------------- ENTRANCE ANIMATIONS ---------------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.home-main > section{ animation:fadeUp .5s ease both; }
.home-main > section:nth-child(2){ animation-delay:.05s; }
.home-main > section:nth-child(3){ animation-delay:.1s; }
.home-main > section:nth-child(4){ animation-delay:.15s; }
.home-rail{ animation:fadeUp .6s ease .1s both; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1240px){
  .home-layout{ grid-template-columns:1fr; }
  .home-rail{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .rail-card{ position:static; }
}
@media (max-width:1024px){
  :root{ --sidebar-w:0px; }
  .wrap{ padding-left:0; }
  .menu-btn{ display:flex; }
  .topbar-lead{ min-width:auto; }
  .app-sidebar{ transform:translateX(-104%); transition:transform .28s ease; box-shadow:0 0 40px rgba(0,0,0,.5); width:260px; }
  .app-sidebar.open{ transform:none; }
  .topbar-nav{ display:none; }
}
@media (max-width:1024px){
  .feature-cards{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-strip{ grid-template-columns:repeat(3,1fr); }
  .value-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  #page-home .hero{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; height:210px; }
  #page-home .hero-visual{ height:300px; }
  .hero-logo-3d{ width:150px; }
  #page-home h1.hero-title{ font-size:34px; }
  .home-rail{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .home-layout{ padding:16px 14px 30px; gap:26px; }
  .app-topbar{ padding:0 12px; gap:8px; }
  .app-topbar .login-btn span{ display:none; }
  .app-topbar .login-btn{ padding:9px 12px; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
  .feature-cards{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .value-strip{ grid-template-columns:1fr; }
  .section-head h2{ font-size:20px; }
  #page-home h1.hero-title{ font-size:29px; }
  #page-home .hero-visual{ height:284px; }
  .hero-search-scope{ display:none; }
  .shareBtn, #shareBtn{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .home-main > section, .home-rail, .hero-logo-3d, .hero-orb, .side-badge.live, .rail-live{ animation:none !important; }
}

/* English (LTR) — let content blocks follow the document language,
   while the shell keeps sidebar-left / rail-right in both languages. */
html[dir="ltr"] .home-main,
html[dir="ltr"] .home-rail,
html[dir="ltr"] .hero-copy{ direction:ltr; }
html[dir="ltr"] #page-home .hero,
html[dir="ltr"] .side-assistant,
html[dir="ltr"] .feature-card,
html[dir="ltr"] .side-promo{ text-align:left; }
html[dir="ltr"] .feat-badge{ inset-inline-end:14px; }

/* ============================================================
   Hero holographic dotted globe (replaces the flat hero logo).
   Scoped entirely to .hero-visual — no other section touched.
   ============================================================ */
.hero-visual{ overflow:visible; }
.hero-globe{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.globe-canvas{ position:relative; z-index:2; width:100%; height:100%; }

.globe-glow{ position:absolute; z-index:0; top:47%; left:50%; width:82%; aspect-ratio:1/1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.55), rgba(139,92,246,.16) 52%, transparent 70%);
  filter:blur(13px); pointer-events:none; }
.globe-reflection{ position:absolute; z-index:0; bottom:1%; left:50%; width:64%; height:13%;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse, rgba(139,92,246,.45), transparent 70%); filter:blur(10px); pointer-events:none; }
html[data-theme="light"] .globe-glow{ background:radial-gradient(circle, rgba(124,58,237,.28), rgba(124,58,237,.1) 52%, transparent 70%); }

/* orbit rings */
.orbit-rings{ position:absolute; z-index:1; inset:0; pointer-events:none; }
.orbit-rings span{ position:absolute; top:50%; left:50%; width:116%; height:116%;
  translate:-50% -50%; scale:1 .34; rotate:0deg; border-radius:50%;
  border:1.5px solid transparent; border-top-color:rgba(167,139,250,.55); border-right-color:rgba(167,139,250,.16);
  animation:ringSpin 16s linear infinite; }
.orbit-rings span:nth-child(2){ width:134%; height:134%; scale:1 .3; border-top-color:rgba(96,165,250,.4);
  animation:ringSpin 26s linear infinite reverse; }
.orbit-rings span:nth-child(3){ width:100%; height:100%; scale:1 .52; border-top-color:rgba(139,92,246,.32);
  animation:ringSpin 34s linear infinite; }
@keyframes ringSpin{ to{ rotate:360deg; } }

/* drifting particles */
.particles{ position:absolute; z-index:3; inset:0; pointer-events:none; }
.particles span{ position:absolute; width:3px; height:3px; border-radius:50%; background:#c9bcff;
  box-shadow:0 0 7px 1px rgba(167,139,250,.85); opacity:.7; animation:floatP 6s ease-in-out infinite; }
.particles span:nth-child(1){ top:16%; left:22%; animation-duration:7s; }
.particles span:nth-child(2){ top:26%; right:16%; animation-duration:5.5s; animation-delay:.6s; }
.particles span:nth-child(3){ bottom:22%; left:14%; animation-duration:6.5s; animation-delay:.3s; }
.particles span:nth-child(4){ bottom:16%; right:24%; animation-duration:8s; animation-delay:1s; }
.particles span:nth-child(5){ top:50%; left:6%; animation-duration:7.5s; animation-delay:.2s; }
.particles span:nth-child(6){ top:60%; right:8%; animation-duration:6s; animation-delay:.8s; }
@keyframes floatP{ 0%,100%{ transform:translateY(0); opacity:.45; } 50%{ transform:translateY(-10px); opacity:1; } }

/* glassmorphism info badges around the globe */
.globe-badges{ position:absolute; z-index:4; inset:0; pointer-events:none; }
.gbadge{ position:absolute; display:flex; align-items:flex-start; gap:8px; width:170px; max-width:48%;
  padding:9px 11px; border-radius:14px;
  background:rgba(21,19,31,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(139,92,246,.35); box-shadow:0 10px 26px rgba(0,0,0,.32);
  animation:floatY 6s ease-in-out infinite; }
html[data-theme="light"] .gbadge{ background:rgba(255,255,255,.62); border-color:rgba(124,58,237,.28); box-shadow:0 10px 26px rgba(124,58,237,.12); }
.gb-ico{ width:26px; height:26px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:rgba(139,92,246,.2); color:var(--violet-2); }
.gb-ico svg{ width:15px; height:15px; }
.gb-txt strong{ display:block; font-size:12px; font-weight:800; color:var(--violet-2); }
.gb-txt span{ display:block; font-size:10px; line-height:1.45; color:var(--text); opacity:.82; margin-top:2px; }
.gb-tl{ top:7%;  left:-5%;  animation-delay:.2s; }
.gb-tr{ top:1%;  right:-6%; animation-delay:.6s; }
.gb-bl{ bottom:11%; left:-3%; animation-delay:.9s; }
.gb-br{ bottom:3%;  right:-5%; animation-delay:.4s; }

@media (max-width:1040px){ .globe-badges{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .orbit-rings span, .particles span, .gbadge{ animation:none !important; }
}

/* ============================================================
   UI/UX AUDIT FIXES (v9) — additive; identity unchanged.
   ============================================================ */

/* 1) Kill horizontal overflow: clip the decorative globe rings/glow
      to their box (they were % of a wide-but-short container and
      widened the page, shifting all RTL content off-screen). */
html{ overflow-x:clip; }
.hero-globe{ overflow:hidden; }
.home-layout{ overflow:visible; }

/* 2) Use more width on very large screens */
@media (min-width:1600px){ :root{ --shell-max:1600px; } }

/* 3) Touch targets — never below ~a comfortable size */
.section-link{ padding-block:6px; }
.trend-chip{ min-height:30px; display:inline-flex; align-items:center; }
.cat-chip{ display:inline-flex; align-items:center; }

/* login button: real text on desktop, real icon on mobile (never empty) */
.login-ico{ display:none; }
.app-topbar .login-btn{ display:inline-flex; align-items:center; gap:7px; }

@media (max-width:1024px){
  .icon-btn{ width:40px; height:40px; }
  .lang-pill{ min-width:44px; }
  .cat-chip{ padding:9px 15px; min-height:38px; }
  .trend-chip{ min-height:34px; }
}

@media (max-width:620px){
  /* declutter the mobile top bar; keep theme + language + login */
  #topSearchBtn, .bell-btn, #shareBtn{ display:none !important; }
  .topbar-actions{ gap:8px; }
  .app-topbar{ gap:8px; padding:0 12px; }
  .app-topbar .login-btn{ width:40px; height:40px; padding:0; justify-content:center; border-radius:11px; }
  .app-topbar .login-btn span{ display:none; }
  .login-ico{ display:block; width:18px; height:18px; }
}
@media (max-width:360px){
  .app-topbar .brand-text{ display:none; }   /* keep logo mark, save room */
}

/* v9.1 — square globe stage so rings scale to the globe (not the wide box) */
.hero-globe{ overflow:hidden; }
.globe-stage{ position:relative; height:100%; aspect-ratio:1/1; max-width:100%; margin:auto; }
.orbit-rings span{ width:110%; height:110%; }
.orbit-rings span:nth-child(2){ width:122%; height:122%; }
.orbit-rings span:nth-child(3){ width:96%; height:96%; }
.lang-pill{ min-width:42px; }
.section-link{ padding-block:7px; }

/* ============================================================
   v10 — Two-band homepage layout.
   Top band = Hero + stats beside the right rail (they end together).
   Everything below the rail flows FULL WIDTH (no reserved empty
   right column while scrolling). Identity/spacing unchanged.
   ============================================================ */
.home-layout{ display:block; direction:inherit; }
.home-top{
  display:grid; grid-template-columns:minmax(0,1fr) var(--rail-w); gap:26px;
  direction:ltr; align-items:start;
}
.home-full{ display:flex; flex-direction:column; gap:40px; margin-top:30px; }
.home-full > section{ animation:fadeUp .5s ease both; }
html[dir="ltr"] .home-full{ direction:ltr; }

/* rail no longer needs to stick beside a long column */
.trends-card{ position:static; }

@media (max-width:1240px){
  .home-top{ grid-template-columns:1fr; }
}

/* ============================================================
   v13 — Final approved reference (desktop + mobile) implementation
   ============================================================ */
/* ---------- Hero: realistic Earth ---------- */
#page-home .hero-visual{ height:400px; overflow:visible; }
.earth{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.earth canvas{ position:relative; z-index:1; width:100%; height:100%; }
.earth-glow{ position:absolute; width:88%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(56,140,240,.30), rgba(56,140,240,.06) 55%, transparent 70%); filter:blur(26px); }

/* ---------- Hero chips (icons) + search ---------- */
.hero-chip{ display:inline-flex; align-items:center; gap:7px; }
.hero-chip svg{ width:15px; height:15px; }
.scope-caret{ color:var(--text-dim); font-size:11px; margin-inline-start:-4px; }
.hero-search-btn{ background:linear-gradient(135deg,#6366f1,#7c3aed); }

/* ---------- Live Trends sparklines ---------- */
.trend-list li{ display:flex; align-items:center; gap:10px; }
.trend-up{ display:none; }
.spark{ width:56px; height:22px; flex-shrink:0; opacity:.92; }
.trend-chips{ flex-wrap:wrap; }

/* ---------- Category tiles (replace visible grid) ---------- */
#page-home #tools .tools-toolbar,
#page-home #tools .tools-grid,
#page-home #tools .tools-empty{ display:none; }
.cat-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.cat-tile{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; text-decoration:none;
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px 12px; color:var(--text);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cat-tile:hover{ transform:translateY(-3px); border-color:var(--violet); box-shadow:0 12px 28px rgba(0,0,0,.28); }
.ct-ic{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:14px;
  background:rgba(139,92,246,.14); color:var(--violet-2); }
.ct-ic svg{ width:24px; height:24px; }
.ct-name{ font-size:14.5px; font-weight:700; }
.ct-count{ font-size:11.5px; color:var(--text-dimmer); }

/* ---------- Footer: 5 columns + social ---------- */
.footer-grid-5{ display:grid; grid-template-columns:1.8fr 1fr 1fr 1.25fr 1fr; gap:30px; align-items:start; }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-social a{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim); transition:all .18s ease; }
.footer-social a svg{ width:18px; height:18px; }
.footer-social a:hover{ color:var(--violet-2); border-color:var(--violet); transform:translateY(-2px); }

/* ---------- Mobile bottom tab bar + mobile top bar ---------- */
.mobile-tabbar{ display:none; }
@media (max-width:820px){
  .wrap > nav.mobile-tabbar{ display:flex !important; position:fixed; top:auto; bottom:0; left:0; right:0; z-index:70; height:62px;
    background:var(--nav-bg); backdrop-filter:blur(16px); border-top:1px solid var(--border);
    align-items:center; justify-content:space-around; padding:0 6px calc(env(safe-area-inset-bottom, 0px)); }
  .mtab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; cursor:pointer;
    color:var(--text-dim); font-family:inherit; font-size:10.5px; font-weight:600; text-decoration:none; padding:6px 2px; min-width:0; }
  .mtab svg{ width:22px; height:22px; }
  .mtab.active{ color:var(--violet-2); }
  .mtab-fab{ width:54px; height:54px; margin-top:-24px; border-radius:50%; color:#fff; flex:0 0 auto;
    background:linear-gradient(135deg,#6366f1,#7c3aed); box-shadow:0 10px 22px var(--violet-glow); }
  .mtab-fab svg{ width:24px; height:24px; }
  .wrap{ padding-bottom:64px; }
  /* reference mobile top bar: hamburger · logo · search · bell */
  #shareBtn, #themeBtn, .lang-pill, .app-topbar .login-btn{ display:none !important; }
  #topSearchBtn, .bell-btn{ display:flex !important; }
  .app-topbar .brand-text{ display:inline !important; }
}
/* mobile stats: 4 compact tiles in a row (per reference) */
@media (max-width:600px){
  .stats-strip{ grid-template-columns:repeat(4,1fr) !important; gap:8px; }
  .stats-strip .stat-tile:nth-child(n+5){ display:none; }
  .stat-tile{ padding:12px 6px; }
  .stat-tile .stat-num{ font-size:18px; }
  .stat-tile .stat-label{ font-size:10px; }
  .stat-tile .stat-ico{ font-size:16px; }
}
/* footer responsive */
@media (max-width:960px){ .footer-grid-5{ grid-template-columns:1fr 1fr 1fr; } .footer-identity{ grid-column:1 / -1; } }
@media (max-width:560px){ .footer-grid-5{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   v14 — OSINT Hub card ONLY: intelligence-unit emblem + depth.
   Fully scoped to .osint-card / .osint-emblem. Nothing else.
   ============================================================ */
.osint-emblem{ position:relative; width:50px; height:50px; flex-shrink:0; }
.osint-emblem svg{ position:relative; z-index:1; width:100%; height:100%;
  filter:drop-shadow(0 3px 7px rgba(40,110,220,.45)); }
.oe-glow{ position:absolute; inset:-8px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(56,140,240,.5), rgba(139,92,246,.22) 45%, transparent 70%);
  filter:blur(6px); animation:oeGlow 5s ease-in-out infinite; }
.oe-rot{ transform-origin:28px 28px; animation:oeSpin 52s linear infinite; }
.oe-sweep{ transform-origin:28px 28px; animation:oeSpin 6s linear infinite; }
.oe-pulse{ transform-origin:28px 28px; transform-box:fill-box; animation:oePulse 3.2s ease-in-out infinite; }
@keyframes oeSpin{ to{ transform:rotate(360deg); } }
@keyframes oePulse{ 0%,100%{ transform:scale(1); opacity:.8; } 50%{ transform:scale(1.45); opacity:.12; } }
@keyframes oeGlow{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.95; transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .oe-rot,.oe-sweep,.oe-pulse,.oe-glow{ animation:none !important; } }

/* --- the card: intelligence-console depth (blue + deep purple + cyan) --- */
.osint-card{ position:relative; overflow:hidden;
  background:
    radial-gradient(130% 100% at 88% -8%, rgba(56,140,240,.16), transparent 52%),
    radial-gradient(120% 90% at 6% 108%, rgba(139,92,246,.12), transparent 55%),
    linear-gradient(158deg, #0f1730 0%, var(--panel) 62%);
  border-color:rgba(84,132,224,.34);
  box-shadow:inset 0 1px 0 rgba(150,195,255,.07), 0 14px 34px -16px rgba(18,42,96,.7);
}
.osint-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(140deg, rgba(56,189,248,.55), rgba(99,102,241,.18) 42%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.osint-card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; z-index:0;
  background:radial-gradient(circle at 82% 10%, rgba(34,211,238,.10), transparent 42%); }
.osint-card > *:not(.feat-badge){ position:relative; z-index:1; }
.osint-card .feat-badge{ z-index:3; }
.osint-card:hover{ transform:translateY(-5px); border-color:rgba(92,162,255,.55);
  box-shadow:inset 0 1px 0 rgba(150,195,255,.1), 0 24px 52px -18px rgba(28,66,150,.62), 0 0 0 1px rgba(56,189,248,.16); }

.osint-card h3{ font-size:18.5px; letter-spacing:.2px;
  background:linear-gradient(90deg,#dbeafe,#bcd3ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.osint-card > p{ color:var(--text-dim); }
.osint-card .feat-list{ gap:9px; }
.osint-card .feat-list li{ color:var(--text-dim); }
.osint-card .feat-list li::before{ background:linear-gradient(180deg,#38bdf8,#6366f1); box-shadow:0 0 6px rgba(56,189,248,.55); }
.osint-card .feat-badge{ background:linear-gradient(135deg,#22d3ee,#3b82f6); color:#04121f; }
.osint-card .feat-btn{ border-color:rgba(84,140,232,.5); color:#a8c9ff; background:rgba(56,140,240,.08); transition:all .22s ease; }
.osint-card .feat-btn:hover{ background:linear-gradient(135deg,#2563eb,#6d28d9); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(37,99,235,.38); }

/* ============================================================
   v15 — Orbiting tool icons around the globe + Live Activity card
   Scoped additions; nothing else changed.
   ============================================================ */
/* --- orbiting glass tool icons (JS-positioned along 3D orbit rings) --- */
.hero-visual{ overflow:visible; }
.earth-orbits{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.o-chip{ position:absolute; left:50%; top:50%; width:24px; height:24px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; will-change:transform,opacity;
  background:rgba(16,26,48,.5); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(120,170,255,.3); color:#d6e6ff;
  box-shadow:0 2px 10px rgba(0,0,0,.34), 0 0 12px rgba(80,150,255,.18), inset 0 1px 0 rgba(180,210,255,.14); }
.o-chip svg{ width:13px; height:13px; }

/* --- Live Activity dashboard card (replaces the old newsletter) --- */
/* compacted: smaller footprint, same content & function */
.activity-card{ padding:14px; }
.activity-card .rail-head{ margin-bottom:9px; }
.activity-card .act-grid{ display:flex; flex-direction:column; margin-top:2px; }
.act-row{ display:flex; align-items:center; gap:9px; padding:2.5px 2px; border-bottom:1px solid var(--border); font-size:12.5px; }
.act-row:last-child{ border-bottom:none; }
.act-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 8px currentColor; }
.act-dot.green{ background:#34d399; color:#34d399; }
.act-dot.blue{ background:#60a5fa; color:#60a5fa; }
.act-dot.amber{ background:#fbbf24; color:#fbbf24; }
.act-dot.cyan{ background:#22d3ee; color:#22d3ee; }
.act-dot.pulse{ animation:actPulse 1.7s ease-in-out infinite; }
@keyframes actPulse{ 0%,100%{ box-shadow:0 0 0 0 currentColor; } 50%{ box-shadow:0 0 9px 2px currentColor; } }
.act-label{ color:var(--text-dim); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-val{ font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.act-pill{ font-size:10px; font-weight:800; padding:2px 8px; border-radius:6px; }
.act-pill.ok{ background:rgba(52,211,153,.14); color:#34d399; border:1px solid rgba(52,211,153,.35); }
.act-row.perf .act-label{ flex:0 0 auto; }
.act-row.perf .act-bar{ flex:1; height:5px; border-radius:3px; background:var(--panel-2); overflow:hidden; margin:0 6px; }
.act-row.perf .act-bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#34d399,#fbbf24); animation:actBar 3s ease-in-out infinite; }
@keyframes actBar{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.25) } }
.act-foot{ display:flex; align-items:center; gap:7px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-dimmer); }

/* --- v16: responsive hero-visual height (override base #page-home rule; must win by source order) --- */
@media (max-width:860px){ #page-home .hero-visual{ height:300px; } }
@media (max-width:620px){ #page-home .hero-visual{ height:286px; } }

/* ============================================================
   v17 — News Center (مركز الأخبار) + Trend detail pages
   Additive; reuses Nafadh palette & card language. No other
   section altered. RTL-first; responsive desktop/tablet/mobile.
   ============================================================ */
.news-wrap{ max-width:1180px; margin:0 auto; padding:8px 4px 40px; direction:rtl; }
html[dir="ltr"] .news-wrap{ direction:ltr; }

/* header */
.nc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.nc-title h1{ font-size:30px; font-weight:800; display:flex; align-items:center; gap:10px; color:var(--text); }
.nc-sub{ color:var(--text-dim); font-size:15px; margin-top:6px; max-width:640px; line-height:1.7; }
.nc-updated{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dimmer);
  background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:7px 13px; white-space:nowrap; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; display:inline-block; animation:actPulse 1.7s ease-in-out infinite; }

/* region switcher */
.nc-regions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.nc-region{ background:var(--panel); border:1px solid var(--border); color:var(--text-dim); border-radius:999px;
  padding:8px 16px; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .18s ease; font-family:inherit; }
.nc-region:hover{ color:var(--text); border-color:var(--violet); }
.nc-region.active{ background:linear-gradient(135deg,var(--violet),#7c3aed); color:#fff; border-color:transparent; box-shadow:0 6px 18px var(--violet-glow); }

/* category tabs (scrollable) */
.nc-tabs{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; margin-bottom:8px; scrollbar-width:thin; }
.nc-tabs::-webkit-scrollbar{ height:6px; } .nc-tabs::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
.nc-tab{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; background:var(--panel-2); border:1px solid var(--border);
  color:var(--text-dim); border-radius:12px; padding:9px 14px; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .18s ease; font-family:inherit; }
.nc-tab:hover{ color:var(--text); border-color:var(--violet); transform:translateY(-1px); }
.nc-tab.active{ background:rgba(139,92,246,.14); color:var(--violet-2); border-color:var(--violet); }
.nc-tabic{ font-size:15px; }

/* toolbar */
.nc-toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 12px; }
.nc-search{ flex:1; min-width:230px; display:flex; align-items:center; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:4px 4px 4px 16px; transition:border-color .18s ease, box-shadow .18s ease; }
.nc-search:focus-within{ border-color:var(--violet); box-shadow:0 10px 30px var(--violet-glow); }
.nc-search-input{ flex:1; border:0; background:transparent; color:var(--text); font-size:14.5px; padding:11px 8px; outline:none; font-family:inherit; }
.nc-search-input::placeholder{ color:var(--text-dimmer); }
.nc-search-btn{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:0; cursor:pointer;
  border-radius:11px; background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; }
.nc-search-btn svg{ width:18px; height:18px; }
.nc-sortwrap{ display:flex; align-items:center; gap:8px; }
.nc-sortlbl{ font-size:13px; color:var(--text-dim); }
.nc-sort{ background:var(--panel); border:1px solid var(--border); color:var(--text); border-radius:11px; padding:11px 13px;
  font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.nc-ranges{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.nc-range{ background:transparent; border:1px solid var(--border); color:var(--text-dimmer); border-radius:999px;
  padding:6px 13px; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .18s ease; font-family:inherit; }
.nc-range:hover{ color:var(--text); } .nc-range.active{ background:var(--panel-2); color:var(--violet-2); border-color:var(--violet); }

/* status (error / empty) */
.nc-status{ text-align:center; padding:44px 20px; border:1px dashed var(--border); border-radius:16px; background:var(--panel);
  display:flex; flex-direction:column; align-items:center; gap:14px; margin:8px 0; }
.nc-status.error{ border-color:rgba(248,113,113,.4); } .nc-status .nc-status-msg{ color:var(--text-dim); font-size:15px; max-width:440px; line-height:1.7; }
.nc-status.error .nc-status-msg{ color:#fca5a5; }
.nc-retry{ background:var(--violet); color:#fff; border:0; border-radius:10px; padding:10px 22px; font-weight:800; cursor:pointer; font-family:inherit; }
.nc-retry:hover{ filter:brightness(1.08); }

/* grid + cards */
.nc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.nc-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.nc-card:hover{ transform:translateY(-4px); border-color:var(--violet); box-shadow:0 16px 38px rgba(0,0,0,.32); }
.nc-card:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.nc-cover{ position:relative; height:120px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1e293b,#0f172a); }
.nc-cover-ic{ font-size:40px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); opacity:.92; }
.nc-breaking{ position:absolute; top:10px; inset-inline-start:10px; background:#ef4444; color:#fff; font-size:10.5px; font-weight:800;
  padding:3px 9px; border-radius:6px; letter-spacing:.4px; box-shadow:0 3px 10px rgba(239,68,68,.5); animation:actPulse 1.7s ease-in-out infinite; }
.nc-cardbody{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.nc-cardtags{ display:flex; flex-wrap:wrap; gap:6px; }
.nc-chip{ font-size:11px; font-weight:700; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--border); border-radius:7px; padding:3px 8px; }
.nc-chip.alt{ color:var(--violet-2); border-color:var(--violet); background:rgba(139,92,246,.1); }
.nc-cardtitle{ font-size:15.5px; font-weight:800; line-height:1.5; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nc-cardmeta{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dimmer); margin-top:auto; }
.nc-dotsep{ opacity:.6; }
.nc-sentinel{ height:24px; }

/* skeletons + spinner */
.nc-skel{ pointer-events:none; } .nc-skel .nc-cover{ background:var(--panel-2); }
.nc-skline{ height:11px; border-radius:6px; background:linear-gradient(90deg,var(--panel-2),var(--border),var(--panel-2));
  background-size:200% 100%; animation:ncShimmer 1.3s ease-in-out infinite; margin:4px 0; }
.nc-skline.w40{ width:40%; } .nc-skline.w70{ width:70%; } .nc-skline.w90{ width:90%; }
@keyframes ncShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.nc-spin{ width:34px; height:34px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--violet); animation:ncSpin .8s linear infinite; }
@keyframes ncSpin{ to{ transform:rotate(360deg); } }

/* category cover accents (kept within brand blues/violets/teals/ambers) */
.cat-top{ background:linear-gradient(135deg,#1d4ed8,#0e2a63); }
.cat-ai{ background:linear-gradient(135deg,#7c3aed,#4c1d95); }
.cat-cyber{ background:linear-gradient(135deg,#0f766e,#0b3b52); }
.cat-tech{ background:linear-gradient(135deg,#2563eb,#3730a3); }
.cat-apps{ background:linear-gradient(135deg,#0891b2,#164e63); }
.cat-games{ background:linear-gradient(135deg,#7e22ce,#3b0764); }
.cat-sports{ background:linear-gradient(135deg,#15803d,#14532d); }
.cat-economy{ background:linear-gradient(135deg,#b45309,#713f12); }
.cat-ent{ background:linear-gradient(135deg,#be185d,#701a3e); }
.cat-space{ background:linear-gradient(135deg,#4338ca,#1e1b4b); }
.cat-science{ background:linear-gradient(135deg,#0d9488,#134e4a); }
.cat-privacy{ background:linear-gradient(135deg,#4f46e5,#312e81); }
.cat-searched{ background:linear-gradient(135deg,#0369a1,#0c4a6e); }
.cat-viral{ background:linear-gradient(135deg,#c026d3,#581c87); }
.cat-search{ background:linear-gradient(135deg,#334155,#1e293b); }

/* ---------------- detail page ---------------- */
.td-back{ display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border); color:var(--text-dim);
  border-radius:10px; padding:9px 15px; font-size:13.5px; font-weight:700; cursor:pointer; margin-bottom:18px; font-family:inherit; }
.td-back:hover{ color:var(--text); border-color:var(--violet); } .td-back svg{ width:16px; height:16px; }
html[dir="rtl"] .td-back svg{ transform:scaleX(-1); }
.td-article{ background:var(--panel); border:1px solid var(--border); border-radius:20px; overflow:hidden; padding:0 0 24px; }
.td-cover{ position:relative; height:210px; display:flex; align-items:center; justify-content:center; }
.td-cover-ic{ font-size:76px; filter:drop-shadow(0 6px 20px rgba(0,0,0,.45)); opacity:.95; }
.td-badges{ display:flex; flex-wrap:wrap; gap:8px; padding:18px 26px 0; }
.td-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text-dim);
  background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:5px 11px; }
.td-badge-ic{ font-size:13px; }
.td-title{ font-size:26px; font-weight:800; line-height:1.45; color:var(--text); padding:14px 26px 0; }
.td-summary{ font-size:16px; line-height:1.9; color:var(--text-dim); padding:12px 26px 0; }
.td-actions{ display:flex; flex-wrap:wrap; gap:10px; padding:20px 26px 0; }
.td-act{ display:inline-flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:11px; padding:11px 18px; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none; font-family:inherit; transition:all .18s ease; }
.td-act svg{ width:17px; height:17px; } .td-act:hover{ border-color:var(--violet); color:var(--violet-2); transform:translateY(-1px); }
.td-act.primary{ background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; border-color:transparent; }
.td-act.primary:hover{ color:#fff; filter:brightness(1.08); }
.td-why{ display:flex; gap:13px; align-items:flex-start; margin:22px 26px 0; padding:16px 18px; border-radius:14px;
  background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(139,92,246,.06)); border:1px solid var(--border); }
.td-why-ic{ font-size:22px; } .td-why-h{ font-weight:800; color:var(--text); font-size:14.5px; margin-bottom:3px; }
.td-why-t{ color:var(--text-dim); font-size:14px; line-height:1.7; }
.td-section{ margin:26px 26px 0; }
.td-sectitle{ font-size:16px; font-weight:800; color:var(--text); margin-bottom:13px; padding-inline-start:11px; border-inline-start:3px solid var(--violet); }
.td-keywords{ display:flex; flex-wrap:wrap; gap:8px; }
.td-kw{ background:var(--panel-2); border:1px solid var(--border); color:var(--violet-2); border-radius:8px; padding:6px 12px;
  font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; } .td-kw:hover{ border-color:var(--violet); }
.td-sources{ display:flex; flex-direction:column; gap:9px; }
.td-source{ display:flex; align-items:center; gap:11px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
  padding:12px 15px; text-decoration:none; color:var(--text); transition:all .18s ease; }
.td-source:hover{ border-color:var(--violet); transform:translateX(-3px); }
html[dir="ltr"] .td-source:hover{ transform:translateX(3px); }
.td-source svg{ width:18px; height:18px; color:var(--violet-2); flex-shrink:0; }
.td-source-name{ flex:1; font-weight:700; font-size:14px; }
.td-source-open{ font-size:11.5px; color:var(--text-dimmer); border:1px solid var(--border); border-radius:6px; padding:2px 9px; }
.td-tools{ display:flex; flex-wrap:wrap; gap:10px; }
.td-tool{ display:inline-flex; align-items:center; gap:8px; background:rgba(139,92,246,.1); border:1px solid var(--violet); color:var(--violet-2);
  border-radius:11px; padding:10px 16px; font-size:13.5px; font-weight:700; text-decoration:none; }
.td-tool:hover{ background:rgba(139,92,246,.18); } .td-tool-ic{ font-size:15px; }
.td-timeline{ display:flex; flex-direction:column; }
.td-tl-row{ display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.td-tl-row:last-child{ border-bottom:0; } .td-tl-row:hover .td-tl-t{ color:var(--violet-2); }
.td-tl-dot{ width:10px; height:10px; border-radius:50%; background:var(--violet); margin-top:5px; flex-shrink:0; box-shadow:0 0 0 4px rgba(139,92,246,.14); }
.td-tl-t{ font-weight:700; font-size:14px; color:var(--text); line-height:1.6; transition:color .15s ease; }
.td-tl-m{ font-size:12px; color:var(--text-dimmer); margin-top:3px; }
.td-relgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:13px; }
.td-mini{ display:flex; gap:12px; align-items:flex-start; background:var(--panel-2); border:1px solid var(--border); border-radius:13px; padding:13px; cursor:pointer; transition:all .18s ease; }
.td-mini:hover{ border-color:var(--violet); transform:translateY(-2px); }
.td-mini-ic{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.td-mini-title{ font-size:13.5px; font-weight:700; line-height:1.5; color:var(--text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.td-mini-meta{ display:flex; gap:6px; font-size:11.5px; color:var(--text-dimmer); margin-top:6px; }
.td-loading{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:70px 20px; }
.td-loading-t{ color:var(--text-dim); font-size:14.5px; }

/* homepage live trend items */
#homeTrendList .trend-live{ cursor:pointer; border-radius:10px; transition:background .16s ease; }
#homeTrendList .trend-live:hover{ background:var(--panel-2); }
#homeTrendList .trend-live:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.trend-hot{ font-size:9.5px; font-weight:800; color:#fff; background:#ef4444; border-radius:5px; padding:2px 7px; align-self:center; letter-spacing:.3px; }
.trend-list .trend-state{ min-height:124px; justify-content:center; align-items:center; flex-direction:column; text-align:center; color:var(--text-dim); gap:10px; border-bottom:0; font-size:13px; line-height:1.6; }
.trend-list .trend-state .nc-spin{ width:24px; height:24px; border-width:2px; }
.trend-retry{ border:1px solid var(--border); border-radius:8px; background:var(--panel-2); color:var(--text); padding:7px 11px; font:inherit; font-weight:700; cursor:pointer; transition:background .16s ease, border-color .16s ease; }
.trend-retry:hover,.trend-retry:focus-visible{ background:var(--violet); border-color:var(--violet); color:#fff; outline:none; }

/* responsive */
@media (max-width:760px){
  .nc-title h1{ font-size:24px; } .news-wrap{ padding:6px 2px 32px; }
  .nc-grid{ grid-template-columns:1fr; gap:14px; }
  .td-title{ font-size:21px; padding:14px 18px 0; } .td-summary{ padding:12px 18px 0; font-size:15px; }
  .td-badges,.td-actions{ padding-inline:18px; } .td-section{ margin-inline:18px; }
  .td-why{ margin-inline:18px; } .td-cover{ height:160px; } .td-cover-ic{ font-size:60px; }
  .td-relgrid{ grid-template-columns:1fr; }
}

.nc-status[hidden]{ display:none !important; }

/* ============================================================
   v18 — Professional news cards (real images + overlay + read-more)
   Upgrades ONLY the news-card visuals. Page layout, sections,
   positions, palette and identity are unchanged.
   ============================================================ */
/* equal-height cards */
.nc-grid{ grid-auto-rows:1fr; }
.nc-card{ height:100%; transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .2s ease; }
.nc-card:hover{ transform:translateY(-4px) scale(1.012); box-shadow:0 18px 44px rgba(0,0,0,.42); }

/* cover: image on top, branded category motif underneath */
.nc-cover{ position:relative; height:172px; overflow:hidden; background:#0e1526; }
.nc-cover-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.nc-cover-fallback::before{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px); background-size:15px 15px; opacity:.55; }
.nc-cover-fallback svg{ width:44%; height:44%; color:rgba(255,255,255,.22); position:relative; }
.nc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block; }
.nc-cover::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(4,7,15,.88) 0%, rgba(4,7,15,.34) 34%, rgba(4,7,15,0) 62%); }
.nc-cover-ic{ display:none; }

/* overlaid badges (readable over the bottom gradient) */
.nc-cat-badge{ position:absolute; top:10px; inset-inline-start:10px; z-index:3;
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:#fff;
  background:rgba(10,14,26,.68); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.15); border-radius:7px; padding:4px 9px; max-width:70%;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.nc-cover .nc-breaking{ top:10px; inset-inline-start:auto; inset-inline-end:10px; z-index:3; }
.nc-src-badge{ position:absolute; bottom:9px; inset-inline-start:12px; z-index:3;
  font-size:12px; font-weight:800; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.7);
  display:inline-flex; align-items:center; gap:6px; max-width:80%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.nc-src-count{ font-size:10px; font-weight:800; background:rgba(255,255,255,.24); border-radius:5px; padding:1px 6px; }

/* body: title (2 lines) + meta + read-more pinned to bottom */
.nc-cardbody{ padding:13px 15px 14px; display:flex; flex-direction:column; gap:9px; flex:1; }
.nc-cardtitle{ -webkit-line-clamp:2; font-size:15.5px; min-height:2.9em; }
.nc-cardmeta{ margin-top:0; flex-wrap:wrap; row-gap:4px; }
.nc-meta-src{ color:var(--violet-2); font-weight:700; }
.nc-more{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:0; color:var(--violet-2); font-weight:800; font-size:13px; cursor:pointer;
  font-family:inherit; padding:3px 0; transition:gap .18s ease, color .18s ease; }
.nc-more svg{ width:15px; height:15px; }
html[dir="rtl"] .nc-more svg{ transform:scaleX(-1); }
.nc-more:hover{ color:var(--violet); gap:9px; }

/* featured top story = first card, slightly larger to highlight it */
.nc-card.featured{ grid-column:span 2; }
.nc-card.featured .nc-cover{ height:300px; }
.nc-card.featured .nc-cardtitle{ font-size:22px; line-height:1.4; min-height:auto; }
.nc-card.featured .nc-src-badge{ font-size:14px; }
.nc-card.featured .nc-cat-badge{ font-size:12px; }
@media (max-width:760px){
  .nc-card.featured{ grid-column:auto; }
  .nc-card.featured .nc-cover{ height:200px; }
  .nc-card.featured .nc-cardtitle{ font-size:18px; }
}

/* detail cover + related thumbnails now use real images too */
.td-cover{ overflow:hidden; }
.td-cover .nc-cover-fallback{ position:absolute; inset:0; }
.td-cover .nc-cover-fallback svg{ width:118px; height:118px; }
.td-cover .nc-img{ z-index:1; }
.td-cover::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(4,7,15,.55), rgba(4,7,15,0) 55%); }
.td-cover .nc-breaking{ z-index:3; }
.td-cover-ic{ display:none; }
.td-mini-ic{ position:relative; overflow:hidden; padding:0; }
.td-mini-ic .nc-cover-fallback svg{ width:22px; height:22px; }
.td-mini-ic .nc-img{ z-index:1; }

/* keep only the featured (first) row larger; other rows stay compact & uniform */
.nc-grid{ grid-auto-rows:auto; }

/* v19 — image loading fix: always a real <img>, fill top fully */
.nc-img{ object-fit:cover; object-position:center; background:#0e1526; }
.nc-cover-fallback{ display:none; }

/* ============================================================
   v20 — Media Downloader tool (results). Additive; reuses the
   Nafadh palette & tool-page shell. No layout/identity changed.
   ============================================================ */
.md-form{ display:flex; gap:10px; align-items:center; }
.md-form .text-input{ flex:1; }
#mdAnalyzeBtn{ white-space:nowrap; padding:12px 20px; }
.md-platforms{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:12px; }
.md-plat-lbl{ font-size:12.5px; color:var(--text-dim); }
.md-plat-chip{ font-size:12px; font-weight:700; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:4px 9px; }
.md-status{ display:flex; align-items:center; gap:10px; margin-top:16px; padding:13px 15px; border-radius:12px; font-size:14px; }
.md-status.loading{ background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim); }
.md-status.error{ background:rgba(248,113,113,.10); border:1px solid rgba(248,113,113,.4); color:#fca5a5; }
.md-spin{ width:18px; height:18px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--violet); animation:ncSpin .8s linear infinite; flex-shrink:0; }
.md-result{ margin-top:18px; }
.md-head{ display:flex; gap:16px; align-items:flex-start; }
.md-thumb{ position:relative; width:210px; flex-shrink:0; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--panel-2); border:1px solid var(--border); }
.md-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.md-thumb-empty{ display:flex; align-items:center; justify-content:center; }
.md-thumb-empty::after{ content:"🎬"; font-size:40px; opacity:.5; }
.md-dur{ position:absolute; bottom:8px; inset-inline-end:8px; background:rgba(4,7,15,.82); color:#fff; font-size:12px; font-weight:800; padding:2px 8px; border-radius:6px; }
.md-meta{ flex:1; min-width:0; }
.md-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px; }
.md-plat{ font-size:11.5px; font-weight:800; color:#fff; background:linear-gradient(135deg,#6366f1,#7c3aed); border-radius:7px; padding:4px 10px; }
.md-chip{ font-size:11.5px; font-weight:700; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--border); border-radius:7px; padding:4px 9px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-title{ font-size:17px; font-weight:800; line-height:1.5; color:var(--text); }
.md-sec{ font-size:14px; font-weight:800; color:var(--text); margin:20px 0 11px; padding-inline-start:10px; border-inline-start:3px solid var(--violet); }
.md-dls{ display:flex; flex-direction:column; gap:9px; }
.md-dl{ display:flex; align-items:center; gap:12px; text-decoration:none; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px 15px; color:var(--text); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.md-dl:hover{ border-color:var(--violet); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.md-dl > svg{ width:22px; height:22px; color:var(--violet-2); flex-shrink:0; }
.md-dl-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.md-dl-label{ font-weight:800; font-size:14px; }
.md-dl-sub{ font-size:12px; color:var(--text-dimmer); }
.md-dl-go{ font-size:12.5px; font-weight:800; color:#fff; background:linear-gradient(135deg,#6366f1,#7c3aed); border-radius:8px; padding:7px 15px; flex-shrink:0; }
.md-note{ display:flex; gap:9px; align-items:flex-start; margin-top:16px; padding:13px 15px; border-radius:12px; background:var(--panel-2); border:1px solid var(--border); font-size:13px; line-height:1.7; color:var(--text-dim); }
.md-note-ic{ flex-shrink:0; }
@media (max-width:640px){ .md-head{ flex-direction:column; } .md-thumb{ width:100%; } .md-form{ flex-direction:column; align-items:stretch; } }

.md-status[hidden]{ display:none !important; }

/* ============================================================
   v23 — mobile coherence + media download polish.
   This final responsive layer intentionally sits after the legacy
   dashboard iterations so phones have one predictable layout.
   ============================================================ */
.md-dl{
  min-height:64px;
  touch-action:manipulation;
}
.md-dl:focus-visible,
.hero-chip:focus-visible,
.mtab:focus-visible{
  outline:3px solid var(--violet-2);
  outline-offset:3px;
}

@media (max-width:820px){
  :root{ --topbar-h:60px; }
  body{ padding-bottom:env(safe-area-inset-bottom, 0px); }
  .app-topbar{
    height:var(--topbar-h);
    padding-inline:12px;
    justify-content:space-between;
  }
  .topbar-lead{ gap:8px; }
  .app-topbar .brand-icon{ width:34px; height:34px; }
  .app-topbar .brand-text{ font-size:17px; }
  .topbar-actions{ gap:5px; }
  .icon-btn{ width:36px; height:36px; }
  .app-sidebar{
    top:var(--topbar-h);
    width:min(82vw,300px);
    padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .home-layout{ padding:14px 14px 26px; }
  .home-full{ margin-top:24px; gap:30px; }
  #page-home .hero{ gap:10px; }
  #page-home .hero-copy{ text-align:right; }
  .hero-search{ width:100%; min-height:58px; }
  .hero-search-input{ font-size:16px; }
  .hero-chips{ gap:7px; }
  .hero-chip{ padding:7px 11px; font-size:12px; }
  .earth-orbits .o-chip{ width:21px; height:21px; border-radius:7px; }
  .earth-orbits .o-chip svg{ width:11px; height:11px; }
  .tool-wrap,.inbox-wrap{ padding-inline:14px; }
  .tool-header h2{ font-size:24px; }
  .gen-card{ padding:16px; border-radius:16px; }
  .md-platforms{ max-height:70px; overflow:auto; padding-bottom:2px; }
  .md-plat-lbl{ width:100%; }
  .md-dl{ padding:12px; }
}

@media (max-width:620px){
  .wrap{ padding-top:var(--topbar-h); padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  .home-layout{ padding:12px 12px 22px; }
  #page-home .hero-visual{ height:250px; margin-block:2px 6px; }
  #page-home h1.hero-title{ font-size:28px; line-height:1.35; }
  #page-home .hero-sub{ font-size:14px; line-height:1.8; margin-bottom:16px; }
  .earth-glow{ width:74%; filter:blur(20px); }
  /* Retain enough orbit detail to communicate the network without
     letting sixteen floating controls crowd the compact hero. */
  .earth-orbits .o-chip:nth-child(n+10){ display:none; }
  .stats-strip{ margin-top:2px; }
  .stat-tile{ min-width:0; }
  .stat-tile .stat-label{ line-height:1.35; }
  .section-head{ align-items:flex-start; }
  .section-link{ padding-top:4px; }
  .cat-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cat-tile{ min-height:142px; padding:16px 8px; }
  .home-rail{ gap:14px; }
  .rail-card{ padding:15px; border-radius:16px; }
  .mobile-tabbar{ padding-bottom:env(safe-area-inset-bottom, 0px) !important; height:calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
  .md-form{ gap:8px; }
  #mdAnalyzeBtn{ min-height:48px; }
  .md-head{ gap:12px; }
  .md-title{ font-size:16px; overflow-wrap:anywhere; }
  .md-dl{ align-items:flex-start; gap:10px; }
  .md-dl-go{ padding:7px 10px; }
}

@media (max-width:380px){
  .app-topbar .brand-text{ display:none !important; }
  #page-home .hero-visual{ height:230px; }
  #page-home h1.hero-title{ font-size:25px; }
  .hero-chip{ padding:6px 9px; }
  .earth-orbits .o-chip:nth-child(n+8){ display:none; }
}

/* ============================================================
   v21 — OSINT Hub dashboard (glassmorphism). Additive; reuses
   Nafadh palette. No other page/section touched.
   ============================================================ */
.osint-wrap{ max-width:1200px; margin:0 auto; padding:6px 4px 44px; direction:rtl; }
html[dir="ltr"] .osint-wrap{ direction:ltr; }
.glass{ background:linear-gradient(160deg, rgba(30,27,50,.72), rgba(18,16,30,.62)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(139,92,246,.18); border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,.28); }

/* hero */
.oh-hero{ padding:30px 28px; margin-bottom:18px; position:relative; overflow:hidden; }
.oh-hero::after{ content:""; position:absolute; top:-60px; inset-inline-start:-40px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.28), transparent 70%); pointer-events:none; }
.oh-hero-badge{ display:inline-block; font-size:12px; font-weight:800; color:var(--violet-2); background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.35); border-radius:999px; padding:5px 14px; margin-bottom:14px; }
.oh-title{ font-size:30px; font-weight:800; color:var(--text); margin-bottom:8px; }
.oh-sub{ color:var(--text-dim); font-size:15px; line-height:1.8; max-width:720px; margin-bottom:20px; }
.oh-search{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.oh-type{ background:var(--panel); border:1px solid var(--border); color:var(--text); border-radius:13px; padding:0 14px; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; min-width:180px; }
.oh-input{ flex:1; min-width:220px; background:var(--panel); border:1px solid var(--border); color:var(--text); border-radius:13px; padding:14px 16px; font-size:15px; font-family:inherit; outline:none; transition:border-color .18s, box-shadow .18s; }
.oh-input:focus{ border-color:var(--violet); box-shadow:0 8px 30px var(--violet-glow); }
.oh-btn{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; border:0; border-radius:13px; padding:0 24px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; }
.oh-btn svg{ width:18px; height:18px; } .oh-btn:hover{ filter:brightness(1.08); }
.oh-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.oh-qchip{ background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-dim); border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .16s; }
.oh-qchip:hover{ color:var(--text); border-color:var(--violet); }

/* stats row */
.oh-statsrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.oh-stat{ padding:15px 16px; }
.oh-stat-k{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim); margin-bottom:7px; }
.oh-stat-v{ font-size:20px; font-weight:800; color:var(--text); } .oh-stat-v.ok{ color:#34d399; } .oh-stat-v.no{ color:#f87171; }
.oh-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-dimmer); display:inline-block; }
.oh-dot.ok{ background:#34d399; box-shadow:0 0 8px #34d399; animation:actPulse 1.7s ease-in-out infinite; } .oh-dot.no{ background:#f87171; }

/* results */
.oh-results{ margin-bottom:18px; }
.oh-result{ padding:20px 22px; }
.oh-result-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.oh-result-title{ display:flex; align-items:center; gap:12px; }
.oh-result-ic{ font-size:26px; }
.oh-result-label{ font-size:16px; font-weight:800; color:var(--text); }
.oh-result-input{ font-size:12.5px; color:var(--text-dim); word-break:break-all; }
.oh-result-acts{ display:flex; gap:8px; }
.oh-mini{ background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim); border-radius:9px; padding:7px 13px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.oh-mini:hover{ color:var(--violet-2); border-color:var(--violet); }
.oh-summary{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.oh-schip{ display:flex; flex-direction:column; gap:2px; background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.25); border-radius:11px; padding:8px 14px; min-width:80px; }
.oh-schip-k{ font-size:11px; color:var(--text-dim); } .oh-schip-v{ font-size:15px; font-weight:800; color:var(--text); }
.oh-note{ font-size:12.5px; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:10px 13px; margin-bottom:14px; line-height:1.7; }
.oh-sec-h{ font-size:13px; font-weight:800; color:var(--text); margin:6px 0 10px; padding-inline-start:9px; border-inline-start:3px solid var(--violet); }
.oh-kv{ display:flex; flex-direction:column; gap:1px; }
.oh-kv-row{ display:grid; grid-template-columns:150px 1fr; gap:12px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.05); }
.oh-kv-row:last-child{ border-bottom:0; }
.oh-kv-key{ font-size:12.5px; color:var(--text-dim); font-weight:700; }
.oh-kv-val{ font-size:13px; color:var(--text); word-break:break-word; }
.oh-val{ } .oh-dim{ color:var(--text-dimmer); }
.oh-arr{ display:flex; flex-wrap:wrap; gap:6px; flex-direction:column; }
.oh-tag{ display:inline-block; background:var(--panel-2); border:1px solid var(--border); border-radius:7px; padding:3px 9px; font-size:12px; color:var(--text); font-family:ui-monospace,monospace; width:fit-content; }
.oh-pill{ font-size:11px; font-weight:800; border-radius:6px; padding:2px 9px; } .oh-pill.ok{ background:rgba(52,211,153,.15); color:#34d399; } .oh-pill.no{ background:rgba(248,113,113,.15); color:#f87171; }
.oh-raw{ margin-top:14px; } .oh-raw summary{ cursor:pointer; font-size:12.5px; color:var(--text-dim); font-weight:700; padding:6px 0; }
.oh-pre{ background:#0b0a12; border:1px solid var(--border); border-radius:12px; padding:14px; font-size:12px; color:#a7f3d0; overflow:auto; max-height:340px; direction:ltr; text-align:left; font-family:ui-monospace,monospace; }
.oh-error{ display:flex; align-items:center; gap:12px; } .oh-err-ic{ font-size:24px; } .oh-err-msg{ color:#fca5a5; font-size:14px; line-height:1.7; }

/* skeleton */
.oh-skel{ border-radius:9px; background:linear-gradient(90deg,var(--panel-2),rgba(255,255,255,.06),var(--panel-2)); background-size:200% 100%; animation:ncShimmer 1.3s ease-in-out infinite; }
.oh-skel-h{ height:26px; width:45%; margin-bottom:16px; } .oh-skel-l{ height:14px; margin:8px 0; } .oh-skel-l:nth-child(3){ width:80%; } .oh-skel-l:nth-child(4){ width:60%; }

/* layout: tools grid + side */
.oh-layout{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
.oh-tools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.oh-tool{ text-align:start; padding:16px; cursor:pointer; transition:transform .18s, border-color .18s, box-shadow .18s; display:flex; flex-direction:column; gap:6px; font-family:inherit; }
.oh-tool:hover{ transform:translateY(-3px); border-color:var(--violet); box-shadow:0 16px 34px rgba(0,0,0,.34); }
.oh-tool-top{ display:flex; align-items:center; justify-content:space-between; }
.oh-tool-ic{ font-size:26px; }
.oh-tool-badge{ font-size:9.5px; font-weight:800; color:#fbbf24; background:rgba(251,191,36,.14); border:1px solid rgba(251,191,36,.35); border-radius:6px; padding:2px 7px; }
.oh-tool-label{ font-size:14.5px; font-weight:800; color:var(--text); }
.oh-tool-hint{ font-size:11.5px; color:var(--text-dimmer); line-height:1.6; }
.oh-soon{ opacity:.72; }
.oh-panel{ padding:16px; }
.oh-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.oh-panel-head h3{ font-size:15px; font-weight:800; color:var(--text); }
.oh-clear{ background:transparent; border:0; color:var(--text-dimmer); font-size:12px; cursor:pointer; font-family:inherit; } .oh-clear:hover{ color:#f87171; }
.oh-recent{ display:flex; flex-direction:column; gap:7px; }
.oh-recent-row{ display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:9px 11px; cursor:pointer; text-align:start; font-family:inherit; transition:border-color .16s; }
.oh-recent-row:hover{ border-color:var(--violet); }
.oh-recent-ic{ font-size:17px; } .oh-recent-in{ font-size:13px; font-weight:700; color:var(--text); word-break:break-all; } .oh-recent-lb{ font-size:11px; color:var(--text-dimmer); }

@media (max-width:880px){ .oh-statsrow{ grid-template-columns:repeat(2,1fr); } .oh-layout{ grid-template-columns:1fr; } .oh-title{ font-size:24px; } }
@media (max-width:560px){ .oh-search{ flex-direction:column; } .oh-type,.oh-btn{ width:100%; } .oh-kv-row{ grid-template-columns:1fr; gap:2px; } }

/* ============ v22 — OSINT Phase 2: Timeline + Report export ============ */
.oh-mini-accent{ background:linear-gradient(135deg,var(--violet),var(--violet-2)); border-color:transparent; color:#fff; }
.oh-mini-accent:hover{ filter:brightness(1.08); color:#fff; border-color:transparent; }
.oh-timeline{ position:relative; padding-inline-start:20px; margin:4px 0 8px; }
.oh-timeline::before{ content:""; position:absolute; inset-inline-start:5px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--violet),transparent); opacity:.5; }
.oh-tl-item{ position:relative; display:flex; gap:12px; padding:8px 0; }
.oh-tl-dot{ position:absolute; inset-inline-start:-19px; top:12px; width:11px; height:11px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.18); }
.oh-tl-item.past .oh-tl-dot{ background:var(--text-dimmer); box-shadow:0 0 0 3px rgba(148,163,184,.14); }
.oh-tl-body{ display:flex; flex-direction:column; gap:1px; }
.oh-tl-label{ font-size:13px; font-weight:800; color:var(--text); }
.oh-tl-date{ font-size:12px; color:var(--text-dim); }
.oh-tl-rel{ font-size:11px; color:var(--text-dimmer); }

/* ============ v23 — Username Intelligence Report (presentation only) ============ */
.oh-u-good{ color:#16c47f; } .oh-u-warn{ color:#f5a524; } .oh-u-bad{ color:#f0426c; } .oh-u-info{ color:#3b9dff; } .oh-u-off{ color:var(--text-dimmer); }
.oh-uhero{ background:linear-gradient(160deg,rgba(139,92,246,.12),rgba(139,92,246,.03)); border:1px solid var(--border); border-radius:16px; padding:18px 18px 20px; margin-bottom:16px; }
.oh-uhero-title{ font-size:13px; font-weight:800; color:var(--text-dim); letter-spacing:.3px; }
.oh-uname{ display:flex; align-items:baseline; gap:3px; margin:6px 0 14px; }
.oh-uname-at{ font-size:20px; color:var(--violet-2); font-weight:800; } .oh-uname-v{ font-size:26px; font-weight:900; color:var(--text); word-break:break-all; }
.oh-uscore-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.oh-uscore-lbl{ font-size:12.5px; color:var(--text-dim); font-weight:700; } .oh-uscore-num{ font-size:18px; font-weight:900; }
.oh-ubar{ height:12px; border-radius:8px; background:var(--panel-2); border:1px solid var(--border); overflow:hidden; }
.oh-ubar-fill{ height:100%; border-radius:8px; transition:width .5s ease; }
.oh-u-bg-good{ background:linear-gradient(90deg,#16c47f,#0fae6e); } .oh-u-bg-warn{ background:linear-gradient(90deg,#f5a524,#e0900f); } .oh-u-bg-bad{ background:linear-gradient(90deg,#f0426c,#d62d57); }
.oh-uverdict{ display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.oh-uverdict-txt{ font-size:13px; color:var(--text-dim); line-height:1.6; }
.oh-ubadge{ display:inline-block; font-size:12px; font-weight:800; padding:3px 11px; border-radius:20px; background:currentColor; }
.oh-ubadge{ position:relative; }
.oh-ubadge.oh-u-good{ background:rgba(22,196,127,.15); border:1px solid rgba(22,196,127,.4); }
.oh-ubadge.oh-u-warn{ background:rgba(245,165,36,.15); border:1px solid rgba(245,165,36,.4); }
.oh-ubadge.oh-u-bad{ background:rgba(240,66,108,.15); border:1px solid rgba(240,66,108,.4); }
.oh-ubadge.oh-u-info{ background:rgba(59,157,255,.15); border:1px solid rgba(59,157,255,.4); }
.oh-usec{ margin-top:18px; }
.oh-usec-h{ font-size:13px; font-weight:800; color:var(--text); margin:0 0 11px; padding-inline-start:9px; border-inline-start:3px solid var(--violet); }
.oh-uqgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:9px; }
.oh-uqcard{ display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px; background:var(--panel-2); border:1px solid var(--border); font-size:13px; font-weight:700; color:var(--text-dim); }
.oh-uqcard.is-on{ background:rgba(22,196,127,.08); border-color:rgba(22,196,127,.3); color:var(--text); }
.oh-uqcard.is-on.oh-u-warn{ background:rgba(245,165,36,.08); border-color:rgba(245,165,36,.3); }
.oh-uqcard.is-on.oh-u-info{ background:rgba(59,157,255,.08); border-color:rgba(59,157,255,.3); }
.oh-uqcard.is-off{ opacity:.6; }
.oh-uqic{ font-size:16px; font-weight:900; width:18px; text-align:center; }
.oh-uqcard.is-on .oh-uqic{ color:#16c47f; } .oh-uqcard.is-on.oh-u-warn .oh-uqic{ color:#f5a524; } .oh-uqcard.is-on.oh-u-info .oh-uqic{ color:#3b9dff; }
.oh-utable{ width:100%; border-collapse:collapse; font-size:13px; overflow:hidden; border-radius:12px; }
.oh-utable th{ text-align:start; font-size:11.5px; color:var(--text-dim); font-weight:800; padding:9px 11px; background:var(--panel-2); border-bottom:1px solid var(--border); }
.oh-utable td{ padding:9px 11px; border-bottom:1px solid var(--border); color:var(--text); }
.oh-utable tr:last-child td{ border-bottom:none; }
.oh-ulink{ color:var(--violet-2); font-weight:700; text-decoration:none; } .oh-ulink:hover{ text-decoration:underline; }
.oh-ualert{ display:flex; gap:12px; padding:14px 16px; border-radius:12px; background:rgba(59,157,255,.08); border:1px solid rgba(59,157,255,.28); }
.oh-ualert-ic{ font-size:20px; } .oh-ualert-t{ font-size:13.5px; font-weight:800; color:var(--text); } .oh-ualert-s{ font-size:12px; color:var(--text-dim); margin-top:3px; line-height:1.6; }
.oh-uchips{ display:flex; flex-wrap:wrap; gap:7px; }
.oh-ucand{ font-size:12.5px; font-weight:700; color:var(--text); background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:5px 10px; word-break:break-all; }
.oh-urows{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.oh-urow{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 13px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; }
.oh-urow-k{ font-size:12.5px; color:var(--text-dim); } .oh-urow-v{ font-size:14px; font-weight:800; color:var(--text); }
.oh-urec{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:12px; background:rgba(59,157,255,.08); border:1px solid rgba(59,157,255,.28); font-size:13.5px; font-weight:700; color:var(--text); }
.oh-urec-ic{ font-size:18px; }
.oh-usrc{ display:flex; flex-direction:column; gap:7px; }
.oh-usrc-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 13px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; }
.oh-usrc-n{ font-size:13px; font-weight:700; color:var(--text); }
.oh-udev{ margin-top:18px; }
.oh-ubadge.oh-u-off{ background:rgba(148,163,184,.14); border:1px solid rgba(148,163,184,.34); color:var(--text-dim); }

/* ============================================================
   v22 — Phase 2: Hero refresh + 6 interactive OSINT capsules.
   Additive & scoped to the hero. Redefines the old .o-chip look
   into modern glass capsules; JS (earth.js) feeds --tx/--ty/--ds.
   ============================================================ */
/* Only the capsules capture clicks; the orbit layer stays transparent. */
.earth-orbits{ pointer-events:none; }
.earth-orbits .o-chip.cap{ pointer-events:auto; }

.earth-orbits .o-chip.cap{
  width:auto; height:auto; min-height:34px; padding:7px 13px 7px 11px; gap:8px;
  border-radius:999px; cursor:pointer; text-decoration:none; white-space:nowrap;
  color:#e8f1ff; font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(135deg, rgba(28,42,74,.74), rgba(14,22,42,.68));
  border:1px solid rgba(130,175,255,.34);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 4px 16px rgba(0,0,0,.4), 0 0 14px rgba(90,150,255,.16), inset 0 1px 0 rgba(190,215,255,.16);
  /* position (JS) + depth-scale (JS) + hover-scale (CSS) composed together */
  transform: translate(-50%,-50%) translate(var(--tx,0), var(--ty,0)) scale(calc(var(--ds,1) * var(--hs,1)));
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.earth-orbits .o-chip.cap svg{ width:15px; height:15px; flex-shrink:0; color:#9fc4ff; transition:color .2s ease; }
.earth-orbits .o-chip.cap .cap-t{ line-height:1; }

/* Hover / keyboard focus → glow + scale (scale via --hs so it composes with JS position) */
.earth-orbits .o-chip.cap:hover,
.earth-orbits .o-chip.cap:focus-visible{
  --hs:1.16; z-index:24 !important; outline:none;
  color:#fff; border-color:rgba(150,190,255,.85);
  background:linear-gradient(135deg, rgba(58,86,150,.92), rgba(30,46,86,.88));
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 26px rgba(96,160,255,.55), inset 0 1px 0 rgba(210,228,255,.28);
}
.earth-orbits .o-chip.cap:hover svg,
.earth-orbits .o-chip.cap:focus-visible svg{ color:#dbe9ff; }

/* Tooltip (Arabic hint) above the capsule */
.earth-orbits .o-chip.cap::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:rgba(10,16,30,.96); color:#dce8ff; font-size:11px; font-weight:600; line-height:1.3;
  padding:6px 10px; border-radius:9px; border:1px solid rgba(130,175,255,.3); white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.45); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; direction:rtl; z-index:30;
}
.earth-orbits .o-chip.cap:hover::after,
.earth-orbits .o-chip.cap:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(-2px); }

/* Compact touch screens: icon-only pucks so 6 capsules never crowd or touch the globe */
@media (max-width:820px){
  .earth-orbits .o-chip.cap{ padding:0; width:34px; height:34px; min-height:0; border-radius:12px; justify-content:center; }
  .earth-orbits .o-chip.cap .cap-t{ display:none; }
  .earth-orbits .o-chip.cap svg{ width:16px; height:16px; }
  .earth-orbits .o-chip.cap::after{ display:none; }
}
@media (max-width:380px){
  .earth-orbits .o-chip.cap{ width:30px; height:30px; }
  .earth-orbits .o-chip.cap svg{ width:15px; height:15px; }
}

@media (prefers-reduced-motion: reduce){
  .earth-orbits .o-chip.cap{ transition:box-shadow .2s ease, border-color .2s ease; }
}

/* --- Hero polish: typography · search · buttons · lighting (scoped, identity kept) --- */
#page-home h1.hero-title{ letter-spacing:-.4px; }
#page-home .hero-sub{ max-width:580px; }
#page-home .hero-search{ border-radius:16px; box-shadow:0 14px 40px rgba(4,10,26,.34); }
#page-home .hero-search:focus-within{ box-shadow:0 16px 46px var(--violet-glow); }
.hero-search-btn{ transition:transform .15s ease, box-shadow .2s ease; }
.hero-search-btn:hover{ box-shadow:0 12px 26px var(--violet-glow); }
.hero-chip{ transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.hero-chip:hover{ transform:translateY(-1px); }
/* Richer, softer lighting behind the globe (scoped to .earth-glow only) */
.earth-glow{ background:radial-gradient(circle, rgba(70,150,250,.34), rgba(56,140,240,.08) 52%, transparent 72%); }

/* =====================================================================
   Phase 10 — OSINT Hub UX (additive)
   Smart verdict line, precise loading spinner, retry, and the
   "إظهار المزيد" (show-more) details toggle.
   ===================================================================== */

/* smart verdict (summary-first) */
.oh-verdict{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px;
  font-size:14.5px; line-height:1.7; font-weight:600; margin-bottom:14px; border:1px solid var(--border); }
.oh-verdict-ic{ font-size:17px; line-height:1.4; flex:none; }
.oh-verdict-txt{ color:var(--text); }
.oh-v-good{ background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.34); }
.oh-v-good .oh-verdict-ic{ color:#34d399; }
.oh-v-warn{ background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.34); }
.oh-v-warn .oh-verdict-ic{ color:#f59e0b; }
.oh-v-bad{ background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.34); }
.oh-v-bad .oh-verdict-ic{ color:#f87171; }

/* precise loading: spinner + tool-specific text + retry status */
.oh-loading-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.oh-loading-txt{ font-size:14px; font-weight:700; color:var(--text); }
.oh-loading-retry{ font-size:12.5px; color:#f59e0b; margin-bottom:12px; }
.oh-spin{ width:20px; height:20px; border-radius:50%; flex:none;
  border:2.5px solid rgba(139,92,246,.25); border-top-color:var(--violet); animation:ohSpin .7s linear infinite; }
@keyframes ohSpin{ to{ transform:rotate(360deg); } }

/* retry button on errors */
.oh-retry{ margin-inline-start:auto; background:var(--violet); color:#fff; border:0; border-radius:9px;
  padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.oh-retry:hover{ filter:brightness(1.08); }
.oh-infocard{ display:flex; align-items:center; gap:12px; }
.oh-infocard .oh-err-msg{ color:var(--text-dim); }

/* busy submit button */
.oh-btn.is-busy{ opacity:.6; cursor:progress; }

/* "show more" details toggle */
.oh-more{ margin-top:6px; border-top:1px solid var(--border); padding-top:10px; }
.oh-more>.oh-more-sum{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:8px; font-size:13px; font-weight:800; color:var(--violet-2); padding:8px 2px; }
.oh-more>.oh-more-sum::-webkit-details-marker{ display:none; }
.oh-more-chev{ transition:transform .2s ease; font-size:15px; }
.oh-more[open]>.oh-more-sum .oh-more-chev{ transform:rotate(180deg); }
.oh-more .oh-sec{ margin-top:6px; }