:root{
  --green:#0b6b57;
  --green-dark:#0a473c;
  --green-soft:#e9f5f0;
  --gold:#c69322;
  --ink:#103b33;
  --muted:#657870;
  --line:#e2e9e5;
  --cream:#fbfaf6;
  --shadow:0 14px 34px rgba(21,65,53,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
a{color:inherit}
button,input{font:inherit}
.container{width:min(1500px,94%);margin:0 auto}
.arabic{font-family:"Noto Naskh Arabic","Amiri","Scheherazade New",serif;direction:rtl}

/* header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.985);border-bottom:1px solid #edf1ef;backdrop-filter:blur(10px)}
.header-inner{min-height:82px;display:grid;grid-template-columns:310px 1fr auto;align-items:center;gap:24px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{display:block;width:275px;height:64px;object-fit:contain;object-position:left center}
.desktop-nav{display:flex;justify-content:center;gap:30px;white-space:nowrap}
.desktop-nav a{text-decoration:none;font-size:14px;font-weight:700;color:#254b42;padding:29px 0;position:relative}
.desktop-nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:14px;height:2px;background:var(--gold);transition:.2s}
.desktop-nav a:hover:after{left:0;right:0}
.header-actions{display:flex;align-items:center;gap:11px}
.search-box{height:46px;width:205px;border:1px solid #dce5e1;border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 13px;background:#fff}
.search-box input{width:100%;border:0;outline:0;background:transparent;font-size:12px}
.install-app-btn{height:52px;border:0;border-radius:13px;background:linear-gradient(135deg,#0a604e,#08765e);color:#fff;padding:6px 14px;display:flex;align-items:center;gap:9px;box-shadow:0 8px 18px rgba(11,107,87,.18);cursor:pointer}
.install-app-btn .phone{font-size:22px}.install-app-btn b,.install-app-btn small{display:block;text-align:left;line-height:1.05}.install-app-btn b{font-size:14px}.install-app-btn small{font-size:9px;margin-top:3px;opacity:.8}
.login-btn,.signup-btn{height:48px;padding:0 18px;border-radius:11px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px;font-weight:800}
.login-btn{background:#eef6f2;border:1px solid #dcebe4}
.signup-btn{background:linear-gradient(135deg,#c08a1b,#d2a12d);color:#fff}
.hamburger{display:none;border:0;background:none;font-size:26px;color:var(--green-dark)}
.mobile-menu{display:none}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(90deg,#fbfaf6 0%,#fff 52%,#f4f6f3 100%)}
.hero-decoration{position:absolute;right:0;top:0;width:36%;height:100%;opacity:.28;background:
linear-gradient(30deg,transparent 24%,rgba(198,147,34,.10) 25%,rgba(198,147,34,.10) 26%,transparent 27%,transparent 74%,rgba(198,147,34,.10) 75%,rgba(198,147,34,.10) 76%,transparent 77%);
background-size:54px 90px;pointer-events:none}
.hero-grid{position:relative;z-index:1;min-height:440px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;align-items:center}
.hero-copy{padding:45px 0 72px}
.eyebrow{font-size:15px;letter-spacing:8px;color:#3f6258;font-weight:600;margin-bottom:16px}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(54px,5vw,78px);line-height:.99;margin:0;max-width:780px;color:#0c463d;letter-spacing:-1.1px}
.hero h1 span{color:#b47f16}
.hero p{font-size:18px;color:#566c65;max-width:690px;margin:20px 0 0}
.hero p b{color:#153f36}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.btn-primary,.btn-secondary{min-height:53px;padding:0 24px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800}
.btn-primary{background:linear-gradient(135deg,#0b6854,#08745b);color:#fff;box-shadow:0 10px 22px rgba(11,107,87,.16)}
.btn-secondary{background:#fff;border:1px solid #dfe6e2;color:#173f36}

.hero-right{display:grid;grid-template-columns:minmax(340px,1fr) 190px;gap:26px;align-items:center;padding-right:4px}
.book-stack{width:100%;max-width:480px}
.book{height:76px;border-radius:6px 17px 17px 6px;display:flex;align-items:center;justify-content:center;font-family:Georgia,"Times New Roman",serif;font-size:24px;box-shadow:0 14px 26px rgba(48,48,42,.14);margin:-2px 0;position:relative;overflow:hidden}
.book:before,.book:after{content:"";position:absolute;left:22px;right:22px;height:1px;background:rgba(226,188,103,.44)}
.book:before{top:11px}.book:after{bottom:11px}
.book-green{background:#17493e;color:#e6bc52;border:2px solid #163a33}
.book-cream{background:#eee3cb;color:#234d43;border:2px solid #d4bd8c}
.book-blue{background:#203a51;color:#e4b94d;border:2px solid #172c40}
.hero-quote{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:17px;line-height:1.55;color:#263f38}
.hero-quote i{display:block;width:48px;height:2px;background:var(--gold);margin-top:18px}

/* shortcuts */
.shortcut-strip{margin-top:-28px;position:relative;z-index:5}
.shortcut-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow)}
.shortcut-card{display:grid;grid-template-columns:56px 1fr 18px;align-items:center;gap:12px;min-height:76px;padding:12px 14px;border-radius:13px;text-decoration:none;transition:.18s}
.shortcut-card:hover{background:#f8fbf9}
.shortcut-icon{width:52px;height:52px;border-radius:13px;background:#e6f3ed;color:#0b765e;display:grid;place-items:center;font-size:27px}
.shortcut-copy strong,.shortcut-copy small{display:block}.shortcut-copy strong{font-size:16px}.shortcut-copy small{font-size:12px;color:var(--muted);margin-top:2px}.shortcut-arrow{font-size:27px;color:#60766f}

/* exercise */
.exercise-section{padding:22px 0 64px}
.exercise-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}
.exercise-card,.analysis-card,.hint-card{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 6px 18px rgba(25,65,54,.035)}
.exercise-card{padding:24px}
.exercise-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lesson-pill,.level-pill{display:inline-flex;align-items:center;background:#eaf5f0;color:#0d5e4d;border-radius:999px;padding:8px 13px;font-weight:800;font-size:13px}
.sentence-panel{font-size:42px;text-align:center;padding:26px 18px;background:linear-gradient(180deg,#f2f7f4,#fbfdfc);border:1px solid #edf2ef;border-radius:15px;margin:18px 0}
.question h2{font-size:22px;margin:0;color:#123f36}.question p{color:var(--muted);margin:5px 0 16px}
.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.choice{min-height:58px;border:1px solid #d9e3de;border-radius:12px;background:#fff;color:#24483f;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:.18s}
.choice:hover{border-color:#8ab4a5}.choice.selected{border-color:#0d785f;background:#edf8f3}
.radio{width:21px;height:21px;border:2px solid #78968c;border-radius:50%;position:relative;flex:0 0 21px}.choice.selected .radio{border-color:#0d785f}.choice.selected .radio:after{content:"";position:absolute;inset:4px;border-radius:50%;background:#0d785f}
.exercise-actions{display:flex;gap:12px;align-items:center;margin-top:15px}
.check-btn,.discussion-btn,.next-btn{min-height:48px;border-radius:12px;padding:0 18px;border:0;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.check-btn{background:linear-gradient(135deg,#0b6b57,#08745c);color:#fff}.discussion-btn{background:#eef4f1;color:#173f36}.next-btn{margin-left:auto;background:#eef8f4;border:1px solid #d9e7e0;color:#165846}
.feedback{margin-top:14px;padding:12px 14px;border-radius:11px}.feedback.success{background:#edf8f2;color:#245f48}.feedback.error{background:#fff3f0;color:#87463b}
.side-stack{display:grid;gap:14px;align-content:start}
.analysis-card{padding:22px}.analysis-card h3{font-size:21px;margin:0 0 15px}.analysis-card ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}.analysis-card li{display:flex;align-items:center;gap:10px;color:#365c52}.analysis-card li span{width:26px;height:26px;border-radius:50%;background:#0b725a;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}.analysis-card em{font-style:normal}
.hint-card{padding:18px 20px;display:flex;gap:14px}.bulb{font-size:28px}.hint-card h4{margin:0 0 4px;font-size:18px}.hint-card p{margin:0;color:var(--muted);font-size:14px}

/* existing generic pages */
.section{padding:64px 0}.section.alt{background:#f8faf8}.section-head{max-width:760px;margin-bottom:28px}.section-head h2{font-size:40px;margin:10px 0}.kicker{display:inline-flex;background:#eaf5f0;color:#0c5f4d;padding:6px 11px;border-radius:999px;font-size:13px;font-weight:800}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px}.path{display:grid;gap:12px}.path-item{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:15px}.path-no{width:44px;height:44px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf6f2;color:#0d5e4d;font-size:12px;font-weight:800}
.form-card{max-width:720px;margin:40px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}.form-group{margin-bottom:15px}.form-group label{display:block;font-weight:700;margin-bottom:6px}.form-control{width:100%;padding:12px 13px;border:1px solid #d6e1dc;border-radius:10px}.btn{display:inline-flex;padding:11px 16px;border-radius:10px;border:0;background:var(--green);color:#fff;text-decoration:none;font-weight:800}.btn.secondary{background:#fff;color:var(--green);border:1px solid #cfded7}
.dashboard-shell{padding:36px 0 70px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{border:1px solid var(--line);border-radius:15px;padding:18px}.stat strong{display:block;font-size:28px;color:var(--green)}.menu{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}.menu a{border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-decoration:none}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #edf1ef;text-align:left}

/* footer */
.site-footer{background:#0d3f35;color:#dbe7e2;margin-top:50px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding:40px 0}.footer-grid>div{display:flex;flex-direction:column;gap:7px}.footer-grid a{color:#dbe7e2;text-decoration:none}.footer-logo{width:250px;background:#fff;border-radius:10px;padding:7px}.footer-install{width:max-content;border:0;border-radius:10px;padding:9px 12px;background:var(--gold);color:#fff;font-weight:800}.ios-help{font-size:12px;color:#b8cbc3}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:13px}.mobile-bottom-nav{display:none}

/* responsive */
@media(max-width:1260px){
  .header-inner{grid-template-columns:250px 1fr auto}.brand img{width:230px}.desktop-nav{gap:20px}.search-box{display:none}
  .hero-right{grid-template-columns:1fr}.hero-quote{display:none}
}
@media(max-width:1020px){
  .desktop-nav{display:none}.hamburger{display:block}.header-inner{display:flex;justify-content:space-between}.header-actions{margin-left:auto}
  .menu-open .mobile-menu{display:flex;flex-direction:column;position:absolute;top:82px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 4%;box-shadow:var(--shadow)}
  .mobile-menu a{padding:10px 4px;text-decoration:none;font-weight:700}
  .hero-grid{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:44px 0 28px}.hero-right{padding:0 0 72px;grid-template-columns:1fr}.book-stack{max-width:520px}.hero-quote{display:none}
  .shortcut-panel{grid-template-columns:repeat(2,1fr)}.exercise-layout{grid-template-columns:1fr}.choice-grid{grid-template-columns:repeat(2,1fr)}.grid,.stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  body{padding-bottom:68px}.header-inner{min-height:72px}.brand img{width:180px;height:50px}.login-btn,.signup-btn{display:none}.install-app-btn{height:42px;padding:5px 9px}.install-app-btn small{display:none}.menu-open .mobile-menu{top:72px}
  .hero-copy{padding:36px 0 24px}.eyebrow{font-size:11px;letter-spacing:4px}.hero h1{font-size:42px;line-height:1.04}.hero p{font-size:15px}.desktop-break{display:none}.hero-actions{gap:10px}.btn-primary,.btn-secondary{min-height:48px;padding:0 17px;font-size:13px}
  .hero-right{padding-bottom:58px}.book-stack{max-width:100%}.book{height:58px;font-size:20px}
  .shortcut-strip{margin-top:-20px}.shortcut-panel{grid-template-columns:1fr 1fr;padding:8px;gap:8px}.shortcut-card{grid-template-columns:42px 1fr;padding:9px}.shortcut-icon{width:40px;height:40px;font-size:20px}.shortcut-copy small,.shortcut-arrow{display:none}
  .exercise-card{padding:15px}.exercise-head{flex-direction:column;align-items:flex-start}.sentence-panel{font-size:29px;padding:18px 9px}.choice-grid{grid-template-columns:1fr}.exercise-actions{flex-wrap:wrap}.next-btn{margin-left:0}.grid,.stats{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}
  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:150;background:rgba(255,255,255,.98);border-top:1px solid var(--line);padding:7px 8px max(7px,env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(28,65,54,.08)}
  .mobile-bottom-nav a{text-decoration:none;color:#365b51;display:flex;flex-direction:column;align-items:center}.mobile-bottom-nav span{font-size:18px}.mobile-bottom-nav small{font-size:10px}
}

/* FINAL HERO BOOK IMAGE OVERRIDE */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(560px,.98fr);gap:42px}
.hero-copy{padding-top:42px}
.hero h1{font-size:clamp(52px,4.55vw,72px);max-width:760px}
.hero-right{grid-template-columns:minmax(390px,1fr) 185px;gap:22px;align-items:center}
.kitab-visual{margin:0;width:100%;display:flex;align-items:center;justify-content:center}
.kitab-visual img{display:block;width:100%;max-width:500px;height:auto;border-radius:18px;mix-blend-mode:multiply;filter:drop-shadow(0 16px 18px rgba(30,55,48,.12))}
.hero-quote{align-self:center}
@media(max-width:1260px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(440px,.9fr)}
  .hero-right{grid-template-columns:1fr}
  .kitab-visual img{max-width:470px}
}
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .hero-right{display:flex;justify-content:center;padding-bottom:68px}
  .kitab-visual{max-width:560px}
}
@media(max-width:720px){
  .hero h1{font-size:40px}
  .hero-right{padding-bottom:54px}
  .kitab-visual img{max-width:100%;border-radius:12px}
}


/* ==========================================================
   NAHWU SINTESA — FINISHING V6
   Final visual tuning after live-site review
   ========================================================== */
@media (min-width:1261px){
  /* 1. Brand is deliberately more visible without making navbar taller */
  .header-inner{
    grid-template-columns:340px minmax(470px,1fr) auto;
  }
  .brand img{
    width:325px;
    height:68px;
  }

  /* 2. Headline is 10–15% calmer, giving the books equal visual weight */
  .hero-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:42px;
  }
  .hero h1{
    font-size:clamp(52px,4.15vw,66px);
    line-height:1.015;
    max-width:760px;
    letter-spacing:-.8px;
  }
  .hero-copy{
    padding-top:48px;
  }

  /* 3. Books are larger and visually blend into the hero.
        multiply softens the rectangular cream background without
        altering the source asset or creating a fragile mask. */
  .hero-right{
    grid-template-columns:minmax(440px,1fr) 205px;
    gap:32px;
  }
  .kitab-visual{
    width:100%;
    min-width:0;
  }
  .kitab-visual img{
    width:108%;
    max-width:570px;
    margin-left:-4%;
    border-radius:0;
    mix-blend-mode:multiply;
    filter:drop-shadow(0 18px 20px rgba(24,55,46,.14));
  }

  /* 4. Quote gets its own breathing room */
  .hero-quote{
    padding-left:4px;
    font-size:17px;
    line-height:1.6;
  }
}

/* Medium desktop / laptop: keep everything balanced */
@media (min-width:1021px) and (max-width:1260px){
  .brand img{width:245px;height:62px}
  .hero h1{font-size:clamp(48px,4.7vw,61px);line-height:1.02}
  .kitab-visual img{
    max-width:500px;
    border-radius:0;
    mix-blend-mode:multiply;
  }
}

/* Mobile/tablet: do not let desktop finishing cause overflow */
@media (max-width:1020px){
  .kitab-visual img{
    border-radius:0;
    mix-blend-mode:multiply;
  }
}


/* ==========================================================
   NAHWU SINTESA — V7 VISUAL UPDATE
   Target: visible live-site improvement without changing backend
   ========================================================== */

/* Official logo treatment:
   the approved square artwork supplies the emblem,
   while the readable navbar wordmark is typeset beside it. */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:300px;
  overflow:visible;
}
.brand-emblem{
  width:66px;
  height:64px;
  overflow:hidden;
  display:block;
  position:relative;
  flex:0 0 66px;
}
.brand-emblem img{
  position:absolute;
  width:106px !important;
  height:106px !important;
  max-width:none !important;
  object-fit:contain;
  left:-20px;
  top:-3px;
}
.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1;
  white-space:nowrap;
}
.brand-copy strong{
  font-size:21px;
  letter-spacing:.6px;
  color:#06395c;
}
.brand-copy strong em{
  font-style:normal;
  color:#c38a18;
}
.brand-copy small{
  font-size:9px;
  letter-spacing:2.25px;
  font-weight:800;
  color:#1e4969;
  margin-top:6px;
}
.brand-copy i{
  font-size:7px;
  font-style:normal;
  color:#6c7b77;
  margin-top:5px;
}

/* Desktop hero: exact two-line headline. */
@media (min-width:1261px){
  .header-inner{
    grid-template-columns:320px minmax(450px,1fr) auto !important;
    min-height:86px;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1.10fr) minmax(0,.90fr) !important;
    gap:34px !important;
  }
  .hero-copy{
    padding-top:48px !important;
  }
  .hero h1{
    font-size:58px !important;
    line-height:1.02 !important;
    max-width:820px !important;
    letter-spacing:-.75px !important;
  }
  .hero h1 span{
    white-space:nowrap;
  }

  .hero-right{
    grid-template-columns:minmax(380px,1fr) 180px !important;
    gap:24px !important;
  }
  .kitab-visual{
    overflow:visible;
    margin:0;
  }
  .kitab-visual img{
    width:104% !important;
    max-width:535px !important;
    margin-left:-2% !important;
    border-radius:0 !important;
    /* feathered mask removes the pasted rectangular feel */
    -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 62%,rgba(0,0,0,.94) 74%,rgba(0,0,0,.45) 90%,transparent 100%);
    mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 62%,rgba(0,0,0,.94) 74%,rgba(0,0,0,.45) 90%,transparent 100%);
    mix-blend-mode:multiply;
    filter:drop-shadow(0 18px 18px rgba(23,55,46,.16)) !important;
  }
  .hero-quote{
    font-size:16px !important;
    line-height:1.62 !important;
    padding-left:6px !important;
  }
}

/* Laptop: still cleaner, but allow headline to wrap safely. */
@media (min-width:1021px) and (max-width:1260px){
  .brand{min-width:260px}
  .brand-emblem{width:58px;height:58px;flex-basis:58px}
  .brand-emblem img{width:96px !important;height:96px !important;left:-19px;top:-3px}
  .brand-copy strong{font-size:18px}
  .brand-copy small{font-size:8px}
  .brand-copy i{display:none}
  .hero h1{font-size:54px !important;line-height:1.03 !important}
  .kitab-visual img{
    -webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 64%,rgba(0,0,0,.92) 78%,rgba(0,0,0,.35) 92%,transparent 100%);
    mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 64%,rgba(0,0,0,.92) 78%,rgba(0,0,0,.35) 92%,transparent 100%);
  }
}

/* Mobile: use compact official identity; no horizontal overflow. */
@media (max-width:1020px){
  .brand{min-width:0;gap:7px}
  .brand-emblem{width:50px;height:50px;flex-basis:50px}
  .brand-emblem img{width:82px !important;height:82px !important;left:-16px;top:-2px}
  .brand-copy strong{font-size:15px}
  .brand-copy small{font-size:6.5px;letter-spacing:1.3px;margin-top:4px}
  .brand-copy i{display:none}
  .kitab-visual img{
    -webkit-mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 66%,rgba(0,0,0,.88) 80%,rgba(0,0,0,.32) 93%,transparent 100%);
    mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 66%,rgba(0,0,0,.88) 80%,rgba(0,0,0,.32) 93%,transparent 100%);
  }
}

@media (max-width:720px){
  .brand-copy strong{font-size:14px}
  .brand-copy small{display:none}
  .hero h1 span{white-space:normal}
}


/* ==========================================================
   NAHWU SINTESA — V8 BOOK IMAGE FIX
   Use the real transparent PNG asset directly.
   ========================================================== */
.kitab-visual{
  background:transparent !important;
  overflow:visible !important;
}
.kitab-visual img{
  display:block !important;
  width:100% !important;
  max-width:560px !important;
  height:auto !important;
  margin:0 auto !important;
  border-radius:0 !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter:drop-shadow(0 18px 24px rgba(22,52,44,.18)) !important;
  background:transparent !important;
}

@media (min-width:1261px){
  .kitab-visual img{
    width:108% !important;
    max-width:585px !important;
    margin-left:-4% !important;
  }
}

@media (max-width:1020px){
  .kitab-visual img{
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
  }
}

/* V9 activation UI helpers */
.card + .card{margin-top:12px}
.table-wrap{margin-top:16px}
.table-wrap small{color:var(--muted)}
.form-control[type="radio"]{width:auto}
select.form-control{background:#fff}

/* ==========================================================
   V10 ACCOUNT & SECURITY
   ========================================================== */
.account-link{
  height:48px;
  padding:0 15px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  color:#165846;
  background:#fff;
  border:1px solid #dce8e2;
}
.account-link:hover{background:#f7fbf9}

.account-grid{
  display:grid;
  grid-template-columns:280px minmax(0,760px);
  gap:22px;
  align-items:start;
}
.account-side{
  position:sticky;
  top:104px;
  text-align:center;
}
.account-avatar{
  width:82px;height:82px;
  margin:0 auto 14px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:34px;font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,var(--green),#0b8065);
}
.account-side h2{margin:0 0 4px}
.account-side p{margin:0 0 18px;color:var(--muted);overflow-wrap:anywhere}
.account-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}
.account-meta span{color:var(--muted)}
.account-back{width:100%;margin-top:14px}
.account-main{display:grid;gap:16px}
.account-section{margin-top:0 !important}
.account-section h2{margin:10px 0 6px}
.security-note{margin:0 0 18px;color:var(--muted)}
.password-wrap{position:relative}
.password-wrap .form-control{padding-right:78px}
.show-pass{
  position:absolute;
  right:8px;top:50%;
  transform:translateY(-50%);
  border:0;background:#eef6f2;
  color:#165846;
  border-radius:8px;
  padding:6px 9px;
  cursor:pointer;font-size:12px;font-weight:800;
}
.field-help{display:block;color:var(--muted);font-size:12px;margin-top:5px}

@media(max-width:900px){
  .account-grid{grid-template-columns:1fr}
  .account-side{position:static}
}
@media(max-width:720px){
  .account-link{display:none}
}