@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Syne:wght@700;800&display=swap');

/* ============================================================
   CSS VARIABLES
============================================================ */
:root{
  --green:#00ff9d;
  --cyan:#25d5ff;
  --dark:#020705;
  --gold:#d6b95c;
  --text:#f4fff9;
  --muted:#b5c9c1;
  --card-bg:rgba(11,31,24,.72);
  --border:rgba(0,255,157,.14);
  --border-hover:rgba(0,255,157,.38);
  --radius:20px;
  --radius-sm:12px;
  --shadow:0 8px 40px rgba(0,0,0,.45);
}

/* ============================================================
   RESET & BASE
============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:"Cairo",system-ui,sans-serif;
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  background:
    radial-gradient(circle at 80% 10%,rgba(0,255,157,.22),transparent 30%),
    radial-gradient(circle at 12% 18%,rgba(214,185,92,.15),transparent 28%),
    radial-gradient(circle at 50% 90%,rgba(37,213,255,.11),transparent 35%),
    linear-gradient(135deg,#020705 0%,#0b1f18 48%,#020705 100%);
}

body::before{
  content:"";
  position:fixed; inset:0; z-index:-3;
  background-image:
    linear-gradient(rgba(0,255,157,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,157,.05) 1px,transparent 1px);
  background-size:44px 44px;
  animation:gridMove 16s linear infinite;
}

body::after{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(115deg,transparent 0%,rgba(0,255,157,.04) 46%,transparent 52%),
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.05),transparent 34%);
  animation:screenPulse 7s ease-in-out infinite alternate;
  pointer-events:none;
}

a{ text-decoration:none; color:inherit; }

.container{ width:min(1180px,92vw); margin-inline:auto; }
.hidden{ display:none!important; }

/* ============================================================
   SPLASH SCREEN
============================================================ */
.splash{
  position:fixed; inset:0; z-index:9999;
  background:#020705;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s ease;
}

.splash-out{ opacity:0; visibility:hidden; pointer-events:none; }

.splash-inner{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  animation:splashIn .8s ease forwards;
}

.splash-rings{
  position:absolute;
  width:200px; height:200px;
  pointer-events:none;
}

.splash-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid transparent;
  animation:splashRing 2s linear infinite;
}

.r1{ border-color:rgba(0,255,157,.5); animation-delay:0s; }
.r2{ inset:-16px; border-color:rgba(37,213,255,.3); animation-delay:.4s; }
.r3{ inset:-32px; border-color:rgba(214,185,92,.2); animation-delay:.8s; }

.splash-logo{
  position:relative; z-index:2;
  width:90px; height:90px;
}

.splash-logo img{
  width:100%; height:100%;
  border-radius:24px;
  box-shadow:0 0 50px rgba(0,255,157,.4);
  animation:splashLogoPulse 1.5s ease-in-out infinite alternate;
}

.splash-text{
  text-align:center;
  position:relative; z-index:2;
}

.splash-name{
  display:block;
  font-size:clamp(22px,5vw,32px);
  font-weight:900;
  color:var(--text);
  letter-spacing:.02em;
}

.splash-sub{
  display:block;
  font-size:14px;
  color:var(--green);
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-top:4px;
}

.splash-bar{
  width:180px; height:3px;
  background:rgba(255,255,255,.1);
  border-radius:99px;
  overflow:hidden;
  margin-top:8px;
}

.splash-fill{
  height:100%;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  border-radius:99px;
  animation:splashLoad 2s ease forwards;
  box-shadow:0 0 12px var(--green);
}

/* ============================================================
   PAGE TRANSITION
============================================================ */
.page-transition{
  position:fixed; inset:0; z-index:8888;
  background:#020705;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s ease;
  pointer-events:none;
}

.page-transition.pt-in{
  opacity:1; visibility:visible; pointer-events:all;
}

.pt-logo{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  position:relative;
}

.pt-logo img{
  width:72px; height:72px;
  border-radius:18px;
  box-shadow:0 0 40px rgba(0,255,157,.5);
  animation:splashLogoPulse 1s ease-in-out infinite alternate;
}

/* ============================================================
   SCAN LINE & ORBS
============================================================ */
.scan-line{
  position:fixed; top:-3px; left:0; width:100%; height:2px;
  z-index:999;
  background:linear-gradient(90deg,transparent,var(--green),var(--cyan),transparent);
  box-shadow:0 0 18px var(--green),0 0 34px rgba(37,213,255,.4);
  animation:scan 4.5s linear infinite;
  pointer-events:none;
}

.cyber-orb{
  position:fixed;
  width:440px; height:440px;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none; z-index:-1; opacity:.32;
}

.orb-one{
  top:10%; left:-130px;
  background:rgba(0,255,157,.42);
  animation:orbOne 10s ease-in-out infinite alternate;
}

.orb-two{
  right:-160px; bottom:8%;
  background:rgba(37,213,255,.24);
  animation:orbTwo 12s ease-in-out infinite alternate;
}

/* ============================================================
   HEADER
============================================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(2,7,5,.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  min-height:72px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding-block:8px;
}

.brand{
  display:flex; align-items:center; gap:12px;
  flex-shrink:0;
}

.brand img{
  width:46px; height:46px;
  border-radius:14px;
  box-shadow:0 0 22px rgba(0,255,157,.2);
}

.brand strong{ display:block; font-weight:900; font-size:17px; }
.brand span{ display:block; color:var(--green); font-size:11px; letter-spacing:.06em; }

nav{
  display:flex; align-items:center; gap:6px;
  flex-wrap:nowrap;
}

nav a{
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  padding:6px 10px;
  border-radius:10px;
  transition:.2s;
  white-space:nowrap;
}

nav a:hover{ color:#fff; background:rgba(0,255,157,.09); }

.header-actions{
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}

/* Language Button */
.lang-btn{
  background:rgba(0,255,157,.1)!important;
  border:1px solid var(--border)!important;
  color:var(--green)!important;
  font-size:13px!important;
  font-weight:800!important;
  padding:7px 14px!important;
  border-radius:10px!important;
  box-shadow:none!important;
  min-width:44px;
  transition:.2s!important;
}

.lang-btn:hover{
  background:rgba(0,255,157,.18)!important;
  transform:none!important;
}

/* Admin Link */
.admin-link{
  font-size:13px;
  font-weight:700;
  color:var(--gold);
  padding:7px 14px;
  border-radius:10px;
  border:1px solid rgba(214,185,92,.25);
  background:rgba(214,185,92,.07);
  transition:.2s;
  white-space:nowrap;
}

.admin-link:hover{
  background:rgba(214,185,92,.16);
  color:#f5d87a;
}

/* Hamburger */
.hamburger{
  display:none!important;
  flex-direction:column;
  gap:5px;
  background:none!important;
  border:1px solid var(--border)!important;
  padding:9px 10px!important;
  border-radius:10px!important;
  box-shadow:none!important;
  cursor:pointer!important;
  width:42px;
}

.hamburger span{
  display:block;
  width:20px; height:2px;
  background:var(--text);
  border-radius:2px;
  transition:.28s;
}

.hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile Menu */
.mobile-menu{
  display:none;
  flex-direction:column;
  background:rgba(5,15,12,.96);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:12px 16px 20px;
  gap:4px;
  animation:mobileMenuIn .25s ease;
}

.mobile-menu.open{ display:flex; }

.mobile-menu a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  color:var(--muted);
  transition:.2s;
}

.mobile-menu a:hover{
  color:#fff;
  background:rgba(0,255,157,.09);
}

/* ============================================================
   BUTTONS
============================================================ */
.btn,
button{
  border:0;
  border-radius:14px;
  padding:12px 20px;
  font-family:inherit;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  color:#03100b;
  background:linear-gradient(135deg,var(--green),var(--gold));
  box-shadow:0 12px 32px rgba(0,255,157,.2);
  transition:.22s;
  -webkit-tap-highlight-color:transparent;
}

.btn:hover,
button:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 22px rgba(0,255,157,.5),0 18px 48px rgba(0,0,0,.3);
}

.btn:active, button:active{ transform:scale(.97); }

.outline,.dark{
  background:rgba(255,255,255,.055);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:inset 0 0 16px rgba(0,255,157,.03);
}

.outline:hover,.dark:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--border-hover);
  transform:translateY(-2px) scale(1.02);
  box-shadow:none;
}

/* ============================================================
   CARDS
============================================================ */
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  transition:.3s;
}

.card:hover{
  border-color:var(--border-hover);
  box-shadow:0 12px 60px rgba(0,0,0,.6),0 0 28px rgba(0,255,157,.06);
}

label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--green);
  letter-spacing:.04em;
  margin-bottom:7px;
  margin-top:16px;
  text-transform:uppercase;
}

label:first-child{ margin-top:0; }

input,textarea,select{
  width:100%;
  background:rgba(0,0,0,.3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  padding:12px 16px;
  transition:.22s;
  outline:none;
  appearance:none;
}

input:focus,textarea:focus,select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,255,157,.1);
  background:rgba(0,0,0,.45);
}

select option{ background:#0d1f18; color:var(--text); }

textarea{ resize:vertical; min-height:80px; }

/* ============================================================
   HERO
============================================================ */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  padding-block:90px 60px;
}

.hero-text{ display:flex; flex-direction:column; gap:20px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(0,255,157,.1);
  border:1px solid rgba(0,255,157,.25);
  color:var(--green);
  font-size:13px;
  font-weight:700;
  padding:7px 16px;
  border-radius:99px;
  width:fit-content;
  letter-spacing:.04em;
}

.hero-text h1{
  font-size:clamp(30px,4.5vw,52px);
  font-weight:900;
  line-height:1.18;
  background:linear-gradient(135deg,#fff 30%,var(--green) 70%,var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-text p{
  font-size:clamp(15px,1.5vw,17px);
  color:var(--muted);
  line-height:1.75;
  max-width:520px;
}

.actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hero-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow),0 0 50px rgba(0,255,157,.06);
  animation:heroCardFloat 4s ease-in-out infinite alternate;
}

.hero-card .shield{
  font-size:48px;
  margin-bottom:14px;
  display:block;
}

.hero-card h2{
  font-size:20px;
  font-weight:800;
  margin-bottom:16px;
  color:var(--green);
}

.hero-card ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }

.hero-card li{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--muted);
}

.hero-card li::before{
  content:"✓";
  color:var(--green);
  font-weight:900;
  flex-shrink:0;
}

/* Reveal */
.reveal{ opacity:0; transform:translateY(24px); animation:revealUp .7s ease forwards; }
.reveal:nth-child(2){ animation-delay:.2s; }

/* ============================================================
   STATS
============================================================ */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:60px;
}

.stats article{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:22px;
  text-align:center;
  transition:.28s;
}

.stats article:hover{
  border-color:var(--border-hover);
  transform:translateY(-3px);
}

.stats b{
  display:block;
  font-size:22px;
  font-weight:900;
  font-family:"Syne",sans-serif;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.stats span{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  display:block;
}

/* ============================================================
   TOOLS / SECTIONS
============================================================ */
.tool{ margin-bottom:60px; }

.title{
  text-align:center;
  margin-bottom:32px;
}

.title > span{
  display:inline-block;
  background:rgba(0,255,157,.1);
  border:1px solid rgba(0,255,157,.2);
  color:var(--green);
  font-size:11px;
  font-weight:700;
  padding:5px 14px;
  border-radius:99px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.title h2{
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  margin-bottom:8px;
}

.title p{
  color:var(--muted);
  max-width:560px;
  margin-inline:auto;
  font-size:15px;
  line-height:1.7;
}

.split{ display:grid; grid-template-columns:1fr 2fr; gap:36px; align-items:start; }

/* ============================================================
   SERVICES GRID
============================================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
  margin-bottom:24px;
}

.service-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:.28s;
}

.service-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(0,0,0,.5);
}

.service-icon{ font-size:32px; }

.service-card h3{
  font-size:17px;
  font-weight:800;
}

.service-card p{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}

/* ============================================================
   CHAT
============================================================ */
.chat-card{ display:flex; flex-direction:column; gap:16px; }

.chat-messages{
  min-height:220px;
  max-height:400px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  background:rgba(0,0,0,.25);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  scrollbar-width:thin;
  scrollbar-color:var(--green) transparent;
}

.msg{
  max-width:80%;
  padding:12px 16px;
  border-radius:14px;
  font-size:14px;
  line-height:1.65;
  animation:msgIn .3s ease;
}

.msg.ai{
  background:rgba(0,255,157,.08);
  border:1px solid rgba(0,255,157,.15);
  align-self:flex-start;
  border-bottom-right-radius:4px;
}

[dir="ltr"] .msg.ai{ border-bottom-right-radius:14px; border-bottom-left-radius:4px; }

.msg.user{
  background:rgba(214,185,92,.1);
  border:1px solid rgba(214,185,92,.2);
  align-self:flex-end;
  border-bottom-left-radius:4px;
}

[dir="ltr"] .msg.user{ border-bottom-left-radius:14px; border-bottom-right-radius:4px; }

.chat-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end;
}

.chat-row textarea{
  min-height:52px;
  max-height:120px;
  margin:0;
}

/* ============================================================
   INPUT ROW
============================================================ */
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.row input{
  flex:1;
  min-width:200px;
  margin:0;
}

.row button{ flex-shrink:0; margin:0; }

/* ============================================================
   RESULT / RISK CARDS
============================================================ */
.result{
  margin-top:14px;
  padding:14px 18px;
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,.2);
  border:1px solid var(--border);
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  transition:.3s;
}

.result.safe{
  background:rgba(0,255,157,.07);
  border-color:rgba(0,255,157,.3);
  color:var(--green);
}

.result.danger{
  background:rgba(255,60,60,.08);
  border-color:rgba(255,80,80,.3);
  color:#ff7070;
}

.result.warn{
  background:rgba(214,185,92,.07);
  border-color:rgba(214,185,92,.3);
  color:var(--gold);
}

/* Risk Card */
.risk-card{
  border-radius:var(--radius);
  padding:24px;
  border:1px solid var(--border);
}

.risk-safe{ background:rgba(0,255,157,.06); border-color:rgba(0,255,157,.25); }
.risk-warn{ background:rgba(214,185,92,.06); border-color:rgba(214,185,92,.25); }
.risk-danger{ background:rgba(255,60,60,.07); border-color:rgba(255,80,80,.28); }

.risk-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:16px;
}

.risk-badge{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  padding:5px 12px;
  border-radius:99px;
  background:rgba(255,255,255,.08);
  margin-bottom:6px;
}

.risk-card h3{ font-size:18px; font-weight:800; }

.risk-score{
  font-size:28px;
  font-weight:900;
  font-family:"Syne",sans-serif;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.risk-bar{
  height:6px;
  background:rgba(255,255,255,.1);
  border-radius:99px;
  overflow:hidden;
  margin-bottom:20px;
}

.risk-fill{
  height:100%;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  border-radius:99px;
  transition:width .6s ease;
}

.risk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
  margin-bottom:16px;
}

.risk-item{
  background:rgba(0,0,0,.25);
  padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
}

.risk-item span{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.risk-item b{ font-size:13px; }

.risk-reasons{
  padding-inline-start:18px;
  margin-block:8px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.risk-reasons li{ font-size:13px; color:var(--muted); }

.risk-note{
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:8px;
  font-style:italic;
}

.ai-report{
  margin-top:16px;
  padding:16px;
  background:rgba(0,0,0,.2);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  font-size:14px;
  line-height:1.7;
}

/* ============================================================
   PREVIEW
============================================================ */
.preview{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.preview img{
  max-width:180px;
  max-height:140px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  object-fit:cover;
}

/* ============================================================
   FOOTER
============================================================ */
.footer{
  padding-block:40px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  margin-top:40px;
}

.footer b{ font-size:16px; font-weight:900; }
.footer span{ font-size:13px; color:var(--muted); }

/* ============================================================
   ADMIN
============================================================ */
.admin-body{ background:#020e08; }

.admin-header{ border-bottom:1px solid rgba(214,185,92,.15); }

.admin-layout{ padding-block:40px; }

.admin-login{
  max-width:460px;
  margin-inline:auto;
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:stretch;
  text-align:center;
}

.admin-login h1{ font-size:26px; font-weight:900; margin-bottom:6px; }
.admin-login p{ font-size:14px; color:var(--muted); margin-bottom:12px; }

.login-logo{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
  height:80px;
}

.login-logo img{
  width:70px; height:70px;
  border-radius:20px;
  box-shadow:0 0 34px rgba(0,255,157,.3);
  position:relative; z-index:2;
}

.login-rings{
  position:absolute;
  width:90px; height:90px;
}

/* Tabs */
.admin-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:28px;
  background:rgba(0,0,0,.25);
  padding:8px;
  border-radius:16px;
  border:1px solid var(--border);
}

.tab-btn{
  background:transparent!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  font-size:14px!important;
  padding:10px 18px!important;
  transition:.2s!important;
  font-weight:700!important;
}

.tab-btn:hover{
  color:var(--text)!important;
  background:rgba(255,255,255,.06)!important;
  transform:none!important;
}

.tab-btn.active{
  background:linear-gradient(135deg,var(--green),var(--gold))!important;
  color:#03100b!important;
  border-color:transparent!important;
}

.tab-content{ display:none; }
.tab-content.active-tab{ display:block; }

/* Admin Grid */
.admin-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.admin-dashboard .title{ text-align:right; }
[dir="ltr"] .admin-dashboard .title{ text-align:left; }

.admin-dashboard .title h1{ font-size:26px; }

.admin-services{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:600px;
  overflow-y:auto;
  padding-inline-end:4px;
  scrollbar-width:thin;
  scrollbar-color:var(--green) transparent;
}

.admin-item{
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:16px;
  transition:.25s;
}

.admin-item:hover{
  border-color:var(--border-hover);
}

.admin-item h3{ font-size:15px; font-weight:800; margin-bottom:6px; }
.admin-item p{ font-size:13px; color:var(--muted); margin-bottom:10px; line-height:1.55; }

.admin-item-actions{ display:flex; gap:8px; }
.admin-item-actions button{ padding:8px 14px!important; font-size:13px!important; }

/* AI Settings */
.ai-settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:20px;
}

.ai-setting-card.full-width{ grid-column:1/-1; }

.ai-setting-card h3{
  font-size:16px;
  font-weight:800;
  margin-bottom:6px;
}

.ai-setting-card > p{
  font-size:13px;
  color:var(--muted);
  margin-bottom:14px;
}

.slider-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:8px;
}

.slider-wrap input[type="range"]{
  flex:1;
  accent-color:var(--green);
  height:6px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
}

.slider-wrap span{
  min-width:44px;
  text-align:center;
  font-weight:800;
  color:var(--green);
  font-size:15px;
}

.setting-note{
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
  padding:10px 12px;
  background:rgba(214,185,92,.06);
  border:1px solid rgba(214,185,92,.2);
  border-radius:8px;
  line-height:1.6;
}

.setting-note code{
  background:rgba(0,255,157,.1);
  color:var(--green);
  padding:1px 6px;
  border-radius:4px;
  font-family:monospace;
  font-size:12px;
}

/* Toggle switches */
.toggle-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;
}

.toggle-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(0,0,0,.2);
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  cursor:pointer;
  transition:.2s;
  margin-top:0!important;
}

.toggle-item:hover{ border-color:var(--border-hover); }

.toggle-item strong{ display:block; font-size:14px; font-weight:700; }
.toggle-item small{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

.toggle-switch{ position:relative; flex-shrink:0; }
.toggle-switch input{ opacity:0; width:0; height:0; position:absolute; }

.toggle-slider{
  display:block;
  width:44px; height:24px;
  background:rgba(255,255,255,.1);
  border-radius:99px;
  cursor:pointer;
  transition:.28s;
  position:relative;
}

.toggle-slider::after{
  content:"";
  position:absolute;
  top:3px; right:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--muted);
  transition:.28s;
}

[dir="rtl"] .toggle-slider::after{ right:auto; left:3px; }
[dir="ltr"] .toggle-slider::after{ right:3px; left:auto; }

.toggle-switch input:checked + .toggle-slider{
  background:rgba(0,255,157,.25);
  border:1px solid rgba(0,255,157,.4);
}

.toggle-switch input:checked + .toggle-slider::after{
  background:var(--green);
  box-shadow:0 0 10px rgba(0,255,157,.5);
}

[dir="rtl"] .toggle-switch input:checked + .toggle-slider::after{ left:auto; right:3px; }
[dir="ltr"] .toggle-switch input:checked + .toggle-slider::after{ right:auto; left:3px; }

/* Test Meta */
.test-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
  padding:14px;
  background:rgba(0,0,0,.2);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
}

.meta-row{
  display:flex; flex-direction:column; gap:4px;
}

.meta-row span{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.meta-row b{ font-size:14px; color:var(--green); }

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes gridMove{
  from{ background-position:0 0; }
  to{ background-position:44px 44px; }
}

@keyframes screenPulse{
  from{ opacity:.6; }
  to{ opacity:1; }
}

@keyframes scan{
  0%{ top:-3px; }
  100%{ top:calc(100vh + 3px); }
}

@keyframes orbOne{
  from{ transform:translate(0,0); }
  to{ transform:translate(60px,80px); }
}

@keyframes orbTwo{
  from{ transform:translate(0,0); }
  to{ transform:translate(-70px,-50px); }
}

@keyframes heroCardFloat{
  from{ transform:translateY(0); }
  to{ transform:translateY(-12px); }
}

@keyframes revealUp{
  to{ opacity:1; transform:translateY(0); }
}

@keyframes msgIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes splashIn{
  from{ opacity:0; transform:scale(.9); }
  to{ opacity:1; transform:scale(1); }
}

@keyframes splashRing{
  0%{ transform:rotate(0deg) scale(1); opacity:.7; }
  50%{ transform:rotate(180deg) scale(1.06); opacity:.4; }
  100%{ transform:rotate(360deg) scale(1); opacity:.7; }
}

@keyframes splashLogoPulse{
  from{ box-shadow:0 0 30px rgba(0,255,157,.3); }
  to{ box-shadow:0 0 60px rgba(0,255,157,.6); }
}

@keyframes splashLoad{
  0%{ width:0%; }
  60%{ width:80%; }
  100%{ width:100%; }
}

@keyframes mobileMenuIn{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   LTR (English) OVERRIDES
============================================================ */
[dir="ltr"] .brand span{ text-align:left; }
[dir="ltr"] nav a{ font-family:"Cairo",sans-serif; }

/* ============================================================
   RESPONSIVE — TABLET
============================================================ */
@media(max-width:900px){
  .hero{
    grid-template-columns:1fr;
    padding-block:60px 40px;
    text-align:center;
  }

  .hero-text{ align-items:center; }
  .hero-text p{ text-align:center; }

  .split{ grid-template-columns:1fr; }
  .split .title{ text-align:center; }

  .admin-grid{ grid-template-columns:1fr; }

  .stats{ grid-template-columns:repeat(2,1fr); }

  nav{ display:none; }
  .hamburger{ display:flex!important; }
  .admin-link{ display:none; }
}

/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */
@media(max-width:600px){
  .container{ width:94vw; }

  .header-inner{
    min-height:62px;
    padding-inline:14px;
  }

  .brand img{ width:38px; height:38px; border-radius:10px; }
  .brand strong{ font-size:15px; }
  .brand span{ font-size:10px; }

  .hero{ padding-block:48px 32px; gap:28px; }
  .hero-card{ padding:22px; }
  .hero-card .shield{ font-size:38px; }

  .stats{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .stats article{ padding:16px 12px; }
  .stats b{ font-size:18px; }

  .tool{ margin-bottom:42px; }

  .card{ padding:20px 16px; }

  .services-grid{ grid-template-columns:1fr; }

  .actions{
    flex-direction:column;
    width:100%;
  }

  .actions .btn,.actions button{
    width:100%;
    text-align:center;
  }

  .row{
    flex-direction:column;
    align-items:stretch;
  }

  .row input,.row button{ width:100%; min-width:unset; }

  .chat-messages{ max-height:300px; }

  .msg{ max-width:92%; }

  .chat-row{ grid-template-columns:1fr; }

  .admin-tabs{
    flex-direction:column;
    gap:6px;
  }

  .ai-settings-grid{ grid-template-columns:1fr; }

  .test-meta{ grid-template-columns:1fr; }

  .toggle-grid{ grid-template-columns:1fr; }

  .lang-btn{ padding:7px 10px!important; }

  .risk-grid{ grid-template-columns:1fr; }

  .title h2{ font-size:20px; }
  .title p{ font-size:14px; }

  /* safe area for iOS notch */
  body{ padding-top: env(safe-area-inset-top); }
  .header{ padding-top: env(safe-area-inset-top); }
}

@media(max-width:380px){
  .brand strong{ font-size:13px; }
  .hero-text h1{ font-size:24px; }
  .card{ padding:16px 13px; }
}

/* ============================================================
   iOS / SAFARI FIXES
============================================================ */
@supports(-webkit-touch-callout:none){
  input, textarea, select{
    font-size:16px; /* prevents auto-zoom on iOS */
  }
}

/* ============================================================
   v4 ADDITIONS
============================================================ */

/* Theme button */
.theme-btn{
  background:rgba(255,255,255,.06)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  font-size:16px!important;
  padding:7px 11px!important;
  border-radius:10px!important;
  box-shadow:none!important;
  min-width:40px;
}
.theme-btn:hover{ background:rgba(255,255,255,.12)!important; transform:none!important; }

/* LIGHT MODE */
body.light-mode{
  --dark:#f5f9f7;
  --text:#0a1f14;
  --muted:#4a7060;
  --card-bg:rgba(255,255,255,.85);
  --border:rgba(0,150,80,.15);
  --border-hover:rgba(0,180,90,.4);
  background:#e8f5ee;
  color:#0a1f14;
}
body.light-mode::before{ background-image:linear-gradient(rgba(0,150,80,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,150,80,.06) 1px,transparent 1px); }
body.light-mode .header{ background:rgba(232,245,238,.85); }
body.light-mode .mobile-menu{ background:rgba(232,245,238,.97); }
body.light-mode input,body.light-mode textarea,body.light-mode select{ background:rgba(255,255,255,.9); color:#0a1f14; border-color:rgba(0,150,80,.2); }
body.light-mode .risk-safe{ background:rgba(0,180,90,.06); }
body.light-mode .risk-warn{ background:rgba(200,150,0,.06); }
body.light-mode .risk-danger{ background:rgba(220,60,60,.06); }

/* CHAT ACTIONS */
.chat-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.small-btn{ padding:8px 14px!important; font-size:13px!important; border-radius:10px!important; }

/* EXPORT ROW */
.export-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* HISTORY BANNER */
.history-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(214,185,92,.08);
  border:1px solid rgba(214,185,92,.25);
  border-radius:var(--radius-sm);
  padding:12px 18px;
  margin-bottom:24px;
  font-size:14px;
  font-weight:700;
  color:var(--gold);
}
.history-banner button{ padding:7px 14px!important; font-size:13px!important; }

/* MODALS */
.modal-overlay{
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:fadeIn .2s ease;
}
.modal-overlay.hidden{ display:none; }

.modal-box{
  background:rgba(8,24,16,.95);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  max-width:580px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:0 20px 80px rgba(0,0,0,.8);
  scrollbar-width:thin;
}

body.light-mode .modal-box{ background:rgba(240,250,244,.97); }

.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.modal-header h3{ font-size:18px; font-weight:800; }
.modal-header button{ padding:7px 12px!important; font-size:14px!important; }

.history-list{ display:flex; flex-direction:column; gap:12px; }
.history-item{
  background:rgba(0,0,0,.2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px;
}
.history-meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.history-meta span{ font-size:13px; font-weight:700; color:var(--green); }
.history-meta small{ font-size:11px; color:var(--muted); }
.history-input{ font-size:13px; color:var(--text); margin-bottom:6px; font-weight:600; }
.history-result{ font-size:12px; color:var(--muted); line-height:1.55; }

/* THREATS */
.threats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.threats-grid h3{ font-size:17px; font-weight:800; margin-bottom:16px; }

.threat-list{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.threat-item{
  background:rgba(255,80,80,.06);
  border:1px solid rgba(255,80,80,.2);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14px;
}
.threat-item strong{ font-size:14px; }
.threat-badge{
  display:inline-block;
  background:rgba(255,80,80,.15);
  color:#ff7070;
  font-size:11px;
  padding:2px 8px;
  border-radius:99px;
  margin-inline-start:8px;
  font-weight:700;
  vertical-align:middle;
}
.threat-item p{ font-size:13px; color:var(--muted); margin:6px 0 4px; }
.threat-item small{ font-size:11px; color:var(--muted); }

/* TIPS */
.tips-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}
.tip-card{
  display:flex; flex-direction:column; gap:10px;
  animation:revealUp .5s ease both;
}
.tip-icon{ font-size:30px; }
.tip-card h3{ font-size:15px; font-weight:800; color:var(--green); }
.tip-card p{ font-size:13px; color:var(--muted); line-height:1.6; }

/* STATS DASHBOARD */
.stats-dashboard{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
  margin-bottom:0;
}
.stat-card{ text-align:center; padding:24px 16px; }
.stat-icon{ font-size:28px; margin-bottom:10px; }
.stat-val{
  font-size:32px; font-weight:900;
  font-family:'Syne',sans-serif;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.stat-lbl{ font-size:13px; color:var(--muted); margin-top:4px; }

/* TOP SERVICES */
.top-services{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.top-svc-row{
  display:grid;
  grid-template-columns:140px 1fr 40px;
  align-items:center;
  gap:12px;
  font-size:13px;
}
.top-svc-bar{ height:8px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.top-svc-fill{ height:100%; background:linear-gradient(90deg,var(--green),var(--cyan)); border-radius:99px; transition:width .6s ease; }
.top-svc-row b{ text-align:center; font-size:13px; color:var(--green); }

/* RATING */
.rating-stars{ display:flex; gap:8px; margin-top:10px; cursor:pointer; }
.rating-stars span{
  font-size:32px; color:rgba(255,255,255,.2);
  transition:.2s; user-select:none;
}
.rating-stars span:hover,
.rating-stars span.active{ color:var(--gold); text-shadow:0 0 14px rgba(214,185,92,.6); }

/* ============================================================
   RESPONSIVE v4
============================================================ */
@media(max-width:900px){
  .threats-grid{ grid-template-columns:1fr; }
}

@media(max-width:600px){
  .stats-dashboard{ grid-template-columns:repeat(2,1fr); }
  .top-svc-row{ grid-template-columns:100px 1fr 30px; font-size:12px; }
  .tips-grid{ grid-template-columns:1fr; }
  .export-row{ flex-direction:column; }
  .chat-actions{ flex-direction:column; }
}

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* ============================================================
   HIBP / BREACH STYLES
============================================================ */

/* Index mini grid */
.breach-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
}

.breach-full-link{
  display:flex;
  flex-direction:column;
}

.breach-link-inner{
  display:flex; flex-direction:column; gap:10px; height:100%;
}

.hibp-logo{ font-size:36px; }

.breach-link-inner h3{ font-size:17px; font-weight:800; color:var(--green); }
.breach-link-inner p{ font-size:13px; color:var(--muted); line-height:1.6; flex:1; }

/* HIBP page */
.hibp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:0;
}

.hibp-card-header{
  display:flex; align-items:flex-start; gap:16px; margin-bottom:20px;
}

.hibp-icon{ font-size:36px; flex-shrink:0; }
.hibp-card-header h2{ font-size:20px; font-weight:800; margin-bottom:4px; }
.hibp-card-header p{ font-size:13px; color:var(--muted); }

/* Breaches list */
.breaches-list{
  margin-top:16px;
  display:flex; flex-direction:column; gap:14px;
  max-height:500px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--green) transparent;
}

.breach-item{
  background:rgba(255,60,60,.06);
  border:1px solid rgba(255,80,80,.22);
  border-radius:var(--radius-sm);
  padding:16px;
  animation:revealUp .4s ease both;
}

.breach-header{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:8px; flex-wrap:wrap; gap:6px;
}

.breach-name{ font-size:15px; font-weight:800; }
.breach-name small{ font-size:12px; color:var(--muted); font-weight:400; }
.breach-date{ font-size:12px; color:var(--muted); }
.breach-count{ font-size:13px; color:#ff9090; margin-bottom:6px; font-weight:700; }
.breach-classes{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.breach-classes span{ color:var(--gold); }
.breach-desc{ font-size:12px; color:var(--muted); line-height:1.55; border-top:1px solid rgba(255,255,255,.08); padding-top:8px; margin-top:8px; }

/* Password strength */
.pass-strength{
  display:flex; align-items:center; gap:12px; margin-top:10px;
}
.strength-bar{ flex:1; height:6px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.strength-fill{ height:100%; border-radius:99px; transition:.3s; }
.pass-strength span{ font-size:13px; font-weight:700; min-width:80px; }

/* Password wrap */
.password-wrap{
  position:relative; flex:1;
}
.password-wrap input{ width:100%; padding-inline-end:44px; }
.show-pass{
  position:absolute; top:50%; inset-inline-end:8px;
  transform:translateY(-50%);
  background:none!important; border:none!important;
  padding:4px 8px!important; font-size:16px!important;
  box-shadow:none!important; color:var(--muted)!important;
  min-width:unset!important;
}

/* HIBP how-it-works */
.hibp-how h3{ font-size:17px; font-weight:800; margin-bottom:16px; }
.how-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.how-item{ display:flex; gap:14px; align-items:flex-start; }
.how-item > span{ font-size:28px; flex-shrink:0; }
.how-item strong{ display:block; font-size:14px; font-weight:800; margin-bottom:4px; }
.how-item p{ font-size:13px; color:var(--muted); line-height:1.6; }

/* HIBP stats bar */
.hibp-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  text-align:center;
  padding:24px;
}
.hibp-stat b{
  display:block;
  font-size:28px; font-weight:900;
  font-family:'Syne',sans-serif;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hibp-stat span{ font-size:13px; color:var(--muted); margin-top:4px; display:block; }

@media(max-width:900px){
  .breach-mini-grid{ grid-template-columns:1fr; }
  .hibp-grid{ grid-template-columns:1fr; }
  .how-grid{ grid-template-columns:1fr; }
  .hibp-stats{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:600px){
  .hibp-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   HIBP PAGE TABS + USERNAME GRID
============================================================ */

.hibp-tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  background:rgba(0,0,0,.25);
  padding:8px; border-radius:16px;
  border:1px solid var(--border);
  margin-bottom:24px;
}

.htab{
  background:transparent!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  font-size:14px!important;
  padding:10px 18px!important;
  transition:.2s!important;
  font-weight:700!important;
  display:flex; align-items:center; gap:6px;
}

.htab:hover{ color:var(--text)!important; background:rgba(255,255,255,.06)!important; transform:none!important; }

.htab.active{
  background:linear-gradient(135deg,var(--green),var(--gold))!important;
  color:#03100b!important;
}

.htab-content{ display:none; }
.htab-content.active-htab{ display:block; }

/* Breach tags */
.breach-tag{
  display:inline-block; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:99px;
}
.breach-tag.verified{ background:rgba(0,255,157,.15); color:var(--green); }
.breach-tag.sensitive{ background:rgba(255,80,80,.15); color:#ff7070; }

/* USERNAME GRID */
.username-grid{ margin-top:20px; }

.username-grid-inner{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}

.ucard{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  text-align:center;
  text-decoration:none;
  transition:.25s;
  animation:revealUp .4s ease both;
}

.ucard:hover{ transform:translateY(-3px); border-color:var(--border-hover); }

.ucard-found{
  background:rgba(0,255,157,.06);
  border-color:rgba(0,255,157,.25);
}

.ucard-notfound{
  background:rgba(255,255,255,.03);
  opacity:.6;
  cursor:default;
}

.ucard-icon{ font-size:28px; }
.ucard-name{ font-size:13px; font-weight:700; color:var(--text); }
.ucard-status{ font-size:12px; color:var(--muted); }
.ucard-found .ucard-status{ color:var(--green); font-weight:700; }

/* Skeleton loading */
.username-loading{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
  margin-top:4px;
}

.ucard-skeleton{
  height:110px;
  border-radius:var(--radius-sm);
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}

@keyframes shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

@media(max-width:600px){
  .hibp-tabs{ flex-direction:column; }
  .username-grid-inner{ grid-template-columns:repeat(3,1fr); }
}


/* ============================================================
   HOME HIBP TIMELINE REPORT
============================================================ */
.hibp-home-section .hibp-card{ overflow:hidden; }
.hibp-summary{
  display:flex;
  gap:18px;
  align-items:center;
  padding:20px;
  border-radius:20px;
  margin-top:8px;
  border:1px solid rgba(255,80,80,.25);
  background:rgba(255,60,60,.08);
}
.hibp-summary .hibp-count{
  min-width:74px;
  height:74px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#ff3b3b,#ff9f43);
  box-shadow:0 0 30px rgba(255,80,80,.25);
}
.hibp-summary h2{ margin:0 0 6px; color:#fff; }
.hibp-summary p{ margin:0; color:var(--muted); line-height:1.8; }
.breaches-list{ margin-top:24px; display:flex; flex-direction:column; gap:20px; }
.breach-timeline-item{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:18px;
  align-items:start;
}
.breach-date{ text-align:center; padding-top:12px; color:var(--green); }
.breach-date strong{ display:block; font-size:20px; font-weight:900; }
.breach-date span{ display:block; font-size:15px; color:var(--muted); }
.breach-card{
  position:relative;
  padding:22px;
  border-radius:22px;
  border:1px solid var(--border);
  background:rgba(11,31,24,.72);
  box-shadow:var(--shadow);
}
.breach-card::before{
  content:"";
  position:absolute;
  right:-28px;
  top:28px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 20px var(--green);
}
.breach-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.breach-logo{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:24px;
  background:rgba(0,255,157,.12);
  border:1px solid rgba(0,255,157,.22);
  color:var(--green);
  flex-shrink:0;
}
.breach-head h3{ margin:0; font-size:22px; color:#fff; }
.breach-head p{ margin:2px 0 0; color:var(--muted); }
.breach-desc{ color:var(--muted); line-height:1.9; margin:12px 0; }
.breach-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.breach-meta span,.compromised-list span{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:var(--green);
  background:rgba(0,255,157,.09);
  border:1px solid rgba(0,255,157,.18);
}
.compromised-title{ margin-top:14px; margin-bottom:8px; font-weight:900; color:#fff; }
.compromised-list{ display:flex; flex-wrap:wrap; gap:8px; }
@media(max-width:700px){
  .breach-timeline-item{ grid-template-columns:1fr; }
  .breach-date{ text-align:right; }
  .breach-card::before{ display:none; }
  .hibp-summary{ align-items:flex-start; }
}