@font-face{
  font-family:"Cocon Next Arabic";
  src:
    local("Cocon Next Arabic"),
    local("COCON NEXT ARABIC"),
    url("/assets/fonts/cocon-next-arabic.ttf") format("truetype");
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
}

:root{
  --bg:#060913;
  --bg2:#0b1222;
  --surface:#0f172a;
  --surface-2:#131f39;
  --primary:#4f2a85;
  --secondary:#3f8ea8;
  --text:#f4f7ff;
  --muted:#a8b5d3;
  --danger:#d55f6f;
  --success:#54c296;
  --border:#22314f;
  --shadow:0 18px 42px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:"Montserrat",Segoe UI,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
}
:root[dir="rtl"] body,
:root[dir="rtl"] input,
:root[dir="rtl"] textarea,
:root[dir="rtl"] button,
:root[dir="rtl"] select{
  font-family:"Cocon","Cocon Next Arabic","Cairo","Tajawal","Montserrat",Segoe UI,Arial,sans-serif;
}
.container{max-width:1200px;margin:auto;padding:1rem}
main.container{
  width:100%;
  flex:1 0 auto;
}
.is-admin-page .container{max-width:none;width:100%;padding:1rem}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;background:rgba(8,14,28,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topbar nav{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.topbar a{color:var(--text);text-decoration:none}
.brand{font-size:1.3rem;font-weight:800;color:var(--secondary)!important}
.brand-logo{display:block;height:38px;width:auto;max-width:200px;filter:none}
.topbar-right{display:flex;align-items:center;gap:.75rem}
.admin-datetime{
  display:grid;
  gap:.2rem;
  padding:.35rem .6rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  min-width:290px;
}
.admin-datetime-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
}
.admin-datetime-label{
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.35px;
  font-weight:800;
}
.admin-datetime-value{
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap;
}
.admin-menu-toggle{
  width:40px;height:40px;border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);
  display:grid;place-items:center;cursor:pointer;
}
.admin-menu-icon{font-size:1rem;line-height:1}
.lang-switch{display:flex;align-items:center;gap:.5rem}
.lang-btn{display:flex;align-items:center;gap:.45rem;padding:.45rem .6rem;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);color:var(--text);text-decoration:none;font-weight:800}
.lang-btn.active{border-color:rgba(67,149,173,.55);background:rgba(67,149,173,.12)}
.lang-icon{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--text)}
.lang-label{font-size:.85rem;color:var(--muted)}
.theme-toggle{display:flex;align-items:center;gap:.55rem;padding:.45rem .7rem;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);color:var(--text);cursor:pointer}
.theme-icon{width:26px;height:26px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);display:grid;place-items:center}
.theme-icon svg{
  width:16px;
  height:16px;
  display:block;
  /* Overlay both light/dark SVGs so layout never shifts */
  grid-area:1 / 1;
}
.theme-text{font-weight:900;font-size:.9rem;color:var(--muted)}
.nav-login{padding:.55rem .9rem;border-radius:10px;font-size:.88rem;font-weight:800}

.logout-icon-form{margin:0;padding:0}
.logout-icon-btn{
  width:38px;
  height:38px;
  padding:0;
  line-height:0;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.logout-icon-btn svg{
  width:18px;
  height:18px;
  display:block;
}
.logout-icon-btn:hover{
  border-color:rgba(255,255,255,.25);
}

.settings-menu{position:relative}
.settings-trigger{
  display:flex;align-items:center;gap:.5rem;
  padding:.52rem .72rem;border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);cursor:pointer
}
.settings-cog{
  width:24px;height:24px;display:grid;place-items:center;
  border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text)
}
.settings-cog svg{width:16px;height:16px}
.settings-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:220px;padding:.5rem;
  border:1px solid var(--border);
  border-radius:14px;background:var(--surface);
  box-shadow:0 10px 24px rgba(0,0,0,.20);
  display:none;z-index:20
}
.settings-menu.open .settings-dropdown{display:block}
.dropdown-item{width:100%;justify-content:flex-start;margin-bottom:.35rem}
.dropdown-item:last-child{margin-bottom:0}
.grid{display:grid;gap:1rem}.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.four{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.five{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.card{background:linear-gradient(180deg, rgba(19,31,57,.94), rgba(15,23,42,.96));border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:var(--shadow);transition:border-color .15s ease,background .15s ease,transform .15s ease}
.card:hover{border-color:rgba(76,100,150,.7);transform:translateY(-1px)}
.hero{padding:2.2rem;position:relative;overflow:hidden;background:linear-gradient(135deg, rgba(71,39,120,.35), rgba(67,149,173,.18)), var(--surface)}
.hero:before{content:"";position:absolute;inset:-2px;background:radial-gradient(800px 400px at 20% 10%, rgba(67,149,173,.22), transparent 60%), radial-gradient(600px 380px at 90% 20%, rgba(71,39,120,.35), transparent 55%);pointer-events:none}
.hero > *{position:relative}
input,textarea,button,select{width:100%;padding:.75rem;border-radius:12px;border:1px solid #2d3d6a;background:var(--surface-2);color:var(--text)}
input:focus,textarea:focus{outline:none;border-color:rgba(67,149,173,.65);box-shadow:0 0 0 3px rgba(67,149,173,.12)}
button,.button{background:linear-gradient(135deg,var(--primary),var(--secondary));border:0;color:white;cursor:pointer;padding:.75rem 1rem;border-radius:12px;text-decoration:none;display:inline-block}
.button.ghost{background:transparent;border:1px solid rgba(67,149,173,.45);color:var(--text)}
.button.subtle{background:linear-gradient(135deg, rgba(71,39,120,.8), rgba(67,149,173,.55));border:1px solid rgba(255,255,255,.08)}
.button.small-btn{width:auto;padding:.42rem .7rem;border-radius:10px;font-size:.82rem;line-height:1.1}
.thumb{width:100%;height:180px;object-fit:cover;border-radius:10px}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:.7rem;border-bottom:1px solid #2a365c}
.positive{color:var(--success)}.negative{color:var(--danger)}
.narrow{max-width:460px;margin:auto}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.58);display:grid;place-items:center;padding:1rem;z-index:120}
.modal[hidden]{display:none!important}
.modal[data-invoice-modal]{
  place-items:center;
  overflow:hidden;
  padding:1rem;
}
.re-listing-card{
  cursor:pointer;
}
.re-modal-card{
  width:min(980px,96vw);
  max-height:92vh;
  overflow:auto;
  display:grid;
  gap:.9rem;
}
.re-modal-close{
  width:max-content;
}
.re-modal-image-wrap{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-2);
}
.re-modal-image{
  display:block;
  width:100%;
  max-height:480px;
  object-fit:cover;
}
.re-modal-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:1.4rem;
  line-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-align:center;
  padding:0;
}
.re-modal-arrow-left{left:12px}
.re-modal-arrow-right{right:12px}
.re-modal-dots{
  display:flex;
  justify-content:center;
  gap:.45rem;
}
.re-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.32);
  cursor:pointer;
  padding:0;
}
.re-dot.active{
  background:var(--secondary);
}
.re-whatsapp-btn{
  background:#25D366;
  border:1px solid #25D366;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight:800;
}
.re-whatsapp-btn:hover{
  background:#1fb859;
  border-color:#1fb859;
}
.re-whatsapp-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.16);
}
.re-whatsapp-icon svg{
  width:14px;
  height:14px;
  display:block;
}
.footer{text-align:center;color:var(--muted);padding:2rem 1rem}
.whatsapp-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem .9rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  color:#ffffff;
  background:#25d366;
  border:1px solid #25d366;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.whatsapp-fab:hover{
  transform:translateY(-1px);
  background:#1fbb59;
  border-color:#1fbb59;
}
.wa-icon{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.22);
  font-size:.95rem
}
.wa-icon svg{width:16px;height:16px}
.wa-text{font-size:.92rem;line-height:1}

.hero-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:start}
.hero-title{font-size:clamp(1.6rem, 4vw, 2.7rem);margin:.6rem 0 .6rem}
.lead{color:var(--muted);max-width:56ch;line-height:1.6;margin:.2rem 0 1.2rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .65rem;border:1px solid rgba(67,149,173,.35);border-radius:999px;color:var(--secondary);background:rgba(67,149,173,.08);font-size:.85rem;font-weight:700}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.hero-stats{display:grid;grid-template-columns:1fr;gap:.65rem;margin-top:1.2rem}
.stat{background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:.75rem}
.stat-value{font-weight:950;letter-spacing:.2px}
.stat-label{color:var(--muted);font-size:.9rem;margin-top:.1rem}
.hero-panel{padding:1rem;background:rgba(13,18,33,.5);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.panel-title{margin:.2rem 0 .7rem}
.panel-hint{margin:.8rem 0 1rem;color:var(--muted);font-size:.92rem;line-height:1.5}

.section{margin-top:1.6rem}
.section-head{margin-bottom:.9rem}
.section-title{margin:0 0 .35rem;font-size:1.35rem}
.section-subtitle{margin:0;color:var(--muted);line-height:1.6}
.two-col{display:grid;grid-template-columns:1fr;gap:1rem}
.services-grid{grid-template-columns:1fr;gap:1rem}
.service-card{display:flex;flex-direction:column;gap:.55rem}
.service-icon{color:var(--text);width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.service-icon svg{width:22px;height:22px}
.service-card h3{margin:0}
.service-card p{margin:0;color:var(--muted);line-height:1.6}
.feature-list{margin-top:1rem;display:grid;gap:.6rem}
.feature{color:var(--muted);display:flex;gap:.6rem;align-items:flex-start}
.dot{width:10px;height:10px;border-radius:50%;margin-top:.45rem;background:linear-gradient(135deg,var(--primary),var(--secondary))}
.testimonial{background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:.85rem;margin-top:.8rem}
.quote{margin:0;color:var(--text);line-height:1.6;font-weight:700}
.byline{margin-top:.5rem;color:var(--muted);font-size:.95rem}

.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:.3rem 0}
.price-tile{border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(22,29,51,.65);padding:.75rem}
.price-tile .k{color:var(--muted);font-size:.85rem;font-weight:800;letter-spacing:.3px}
.price-tile .v{font-size:1.1rem;font-weight:950;margin-top:.35rem}
.price-tile .delta{margin-top:.35rem;font-size:.85rem;font-weight:800}
.price-tile .delta.up{color:#37d67a}
.price-tile .delta.down{color:#ff7d7d}

.contact-form{display:flex;flex-direction:column;gap:.9rem}
.form-row{display:grid;grid-template-columns:1fr;gap:.75rem}
.form-actions{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.form-note{color:var(--muted);font-size:.92rem}
.quick-links{display:grid;gap:.75rem}
.quick-link{padding:.75rem .85rem;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);color:var(--text);text-decoration:none;font-weight:700}
.contact-socials{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}
.social-link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.62rem .82rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}
.social-link.instagram:hover{border-color:rgba(197,77,171,.55)}
.social-link.whatsapp{
  background:#25d366;
  border-color:#25d366;
  color:#ffffff;
}
.social-link.whatsapp:hover{
  background:#1fbb59;
  border-color:#1fbb59;
}
.contact-map-wrap{
  margin-top:.75rem;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.contact-map{
  display:block;
  width:100%;
  height:380px;
  border:0;
}
.map-open-link{
  display:inline-flex;
  margin-top:.8rem;
}
.contact-kpi{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
.kpi{border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(0,0,0,.12);padding:.85rem}
.kpi-value{font-weight:950}
.kpi-label{color:var(--muted);margin-top:.25rem;font-size:.92rem}

@media (min-width: 860px){
  .hero-grid{grid-template-columns:1.2fr .8fr}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .two-col{grid-template-columns:1fr 1fr}
  .services-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-row{grid-template-columns:1fr 1fr}
}

:root[dir="rtl"] input,
:root[dir="rtl"] textarea,
:root[dir="rtl"] select{
  text-align:right;
}

:root[dir="rtl"] .topbar nav{
  flex-direction:row-reverse;
}
:root[dir="rtl"] .whatsapp-fab{
  right:auto;
  left:18px;
}

.landing-hero{
  position:relative;
  overflow:hidden;
  padding:3.4rem 0 2.2rem;
  background:
    radial-gradient(860px 340px at 12% 0%, rgba(79,42,133,.22), transparent 58%),
    radial-gradient(820px 320px at 92% 6%, rgba(63,142,168,.16), transparent 62%),
    linear-gradient(180deg, rgba(8,12,24,.7), rgba(6,9,19,.94));
}

.landing-hero__overlay{display:none}

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  align-items:start;
  max-width:900px;
  margin:0 auto;
}

.hero-left{padding:.2rem 0}
.hero-right{display:flex;justify-content:flex-end}

.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
.hero-primary{padding:.85rem 1.2rem}
.hero-secondary{padding:.85rem 1.2rem}
.hero-video{
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.7rem 1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.12);
}
.hero-video:hover{border-color:rgba(67,149,173,.45)}

.play{
  width:18px;height:18px;border-radius:6px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  position:relative;
}
.play:after{
  content:"";
  position:absolute;
  left:7px;top:5px;
  width:0;height:0;
  border-left:6px solid #fff;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
}

.kpi-row{
  margin-top:1.3rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
}
.kpi-card{
  background:rgba(11,18,34,.72);
  border:1px solid rgba(79,111,170,.25);
  border-radius:14px;
  padding:.8rem .9rem;
}
.kpi-icon{display:grid;place-items:center;color:var(--text);opacity:.95}
.kpi-icon svg{width:22px;height:22px}
.kpi-num{font-size:1.1rem;font-weight:950;margin-top:.35rem}
.kpi-text{color:var(--muted);margin-top:.2rem;font-weight:700;font-size:.92rem;line-height:1.25}

.hero-widget{max-width:520px}

.why{padding:2rem 0 0}
.why-inner{display:flex;flex-direction:column;gap:1.2rem}
.why-head{max-width:720px}
.why-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.why-card{
  border-radius:18px;
  padding:1.1rem 1rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
}
.why-card.filled{
  background:linear-gradient(135deg, rgba(71,39,120,.85), rgba(67,149,173,.55));
  border-color:rgba(255,255,255,.14);
}
.why-card.outlined{
  background:transparent;
  border-color:rgba(67,149,173,.28);
}
.why-icon{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  margin-bottom:.8rem;
}
.why-icon svg{width:22px;height:22px}
.why-card.filled .why-icon{background:rgba(255,255,255,.12)}
.why-card h3{margin:.2rem 0 .35rem}
.why-card p{margin:0;color:var(--muted);line-height:1.6}
.why-card.filled p{color:#eef3ff}

@media (min-width: 860px){
  .hero-inner{grid-template-columns:1fr;gap:1rem;align-items:center}
  .kpi-row{grid-template-columns:repeat(4, 1fr)}
  .why-grid{grid-template-columns:1fr 1fr}
}

:root[data-theme="light"]{
  --bg:#edf2fa;
  --bg2:#e6edf7;
  --surface:#ffffff;
  --surface-2:#f6f8fc;
  --text:#0d1424;
  --muted:#4f5d77;
  --border:#d4dcec;
  --shadow:0 14px 30px rgba(15,19,33,.08);
}

:root[data-theme="light"] body{background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
:root[data-theme="light"] .card{background:#fff;box-shadow:var(--shadow);border-color:var(--border)}
:root[data-theme="light"] .topbar{background:rgba(255,255,255,.92)}
:root[data-theme="light"] .settings-dropdown{box-shadow:0 14px 35px rgba(15,19,33,.14)}
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] button,
:root[data-theme="light"] select{
  background:#ffffff;
  color:#0d1424;
  border:1px solid #cfd8ea;
}
:root[data-theme="light"] .button.ghost{color:#1d2840;border-color:#9ab0d6;background:#f8fbff}
:root[data-theme="light"] .topbar a{color:#0d1424}
:root[data-theme="light"] .topbar a.nav-login{color:#ffffff}
:root[data-theme="light"] .price-tile{
  background:#f7fbff;
  border-color:#c8d9f3;
}
:root[data-theme="light"] .price-tile .k{
  color:#5a6e8f;
}
:root[data-theme="light"] .price-tile .v{
  color:#15233d;
}
:root[data-theme="light"] .price-tile .delta.up{
  color:#16894f;
}
:root[data-theme="light"] .price-tile .delta.down{
  color:#b23a3a;
}

:root[data-theme="light"] .landing-hero{
  background-image:linear-gradient(180deg, rgba(246,247,251,.55), rgba(246,247,251,.92));
}

:root[data-theme="light"] .why-card.filled{
  background:linear-gradient(135deg, rgba(71,39,120,.18), rgba(67,149,173,.12));
}
:root[data-theme="light"] .why-card.filled p{color:var(--text)}
:root[data-theme="light"] .social-link{
  background:#f8fbff;
  border-color:#c9d7ee;
  color:#13213a;
}
:root[data-theme="light"] .social-link.whatsapp{
  background:#25d366;
  border-color:#25d366;
  color:#ffffff;
}
:root[data-theme="light"] .contact-map-wrap{
  border-color:#cfd8ea;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(1){
  background:linear-gradient(135deg, #eef6ff, #dcecff);
  border-color:#9fc0ea;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(1) .kpi-num{
  color:#1f4f87;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(1) .kpi-text,
:root[data-theme="light"] .kpi-row .kpi-card:nth-child(1) .kpi-icon{
  color:#2a639f;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(2){
  background:linear-gradient(135deg, #edfcf3, #daf7e6);
  border-color:#95d9b5;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(2) .kpi-num{
  color:#1f6a45;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(2) .kpi-text,
:root[data-theme="light"] .kpi-row .kpi-card:nth-child(2) .kpi-icon{
  color:#2b8057;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(3){
  background:linear-gradient(135deg, #f4f1ff, #e9e1ff);
  border-color:#b7a6f3;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(3) .kpi-num{
  color:#4a2b92;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(3) .kpi-text,
:root[data-theme="light"] .kpi-row .kpi-card:nth-child(3) .kpi-icon{
  color:#5d39a7;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(4){
  background:linear-gradient(135deg, #fff3f0, #ffe3dc);
  border-color:#f3b3a1;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(4) .kpi-num{
  color:#8a2d18;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(4) .kpi-text{
  color:#a33a21;
}

:root[data-theme="light"] .kpi-row .kpi-card:nth-child(4) .kpi-icon{
  color:#a33a21;
}

.is-auth-page{min-height:100vh;display:flex;flex-direction:column}
.is-auth-page .container{flex:1;display:grid;place-items:start center;padding-top:3rem}
.auth-card{width:min(100%,460px);padding:1.25rem}
.auth-card h1{margin:.1rem 0 1rem}
.auth-card form{display:grid;gap:.65rem}
.remember-me-field{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.9rem;
  color:var(--muted);
}
.remember-me-field input[type="checkbox"]{
  width:auto;
  margin:0;
  padding:0;
}
.auth-help{margin:.9rem 0 0}
.auth-help a{color:var(--secondary);text-decoration:none;font-weight:700}
.auth-help a:hover{text-decoration:underline}

.admin-shell{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:1rem;
  align-items:stretch;
}
.admin-sidebar{
  position:sticky;
  top:84px;
  height:calc(100vh - 96px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.8rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.admin-sidebar h2{
  margin:.2rem 0 .6rem;
  font-size:1rem;
  color:var(--muted);
  letter-spacing:.3px;
}
.admin-sidebar a{
  color:var(--text);
  text-decoration:none;
  padding:.6rem .7rem;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  font-weight:700;
}
.admin-sidebar a:hover{
  background:var(--surface-2);
  border-color:var(--border);
}
.admin-sidebar a.active{
  background:rgba(67,149,173,.12);
  border-color:rgba(67,149,173,.28);
}
.logout-form{margin-top:auto;padding-top:.5rem}
.logout-btn{
  width:100%;
  background:transparent;
  border:1px solid rgba(213,95,111,.45);
  color:#ffb9c2;
  border-radius:10px;
  padding:.6rem .7rem;
  font-weight:800;
  cursor:pointer;
}
.admin-content{display:grid;gap:1rem}
.admin-content{min-width:0}

.admin-shell.sidebar-collapsed{
  grid-template-columns:1fr;
}
.admin-shell.sidebar-collapsed .admin-sidebar{
  display:none;
}

.charts-cta-card{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  align-items:flex-start;
}

.charts-prices-page{
  display:grid;
  gap:1rem;
}

.charts-toolbar{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.view-toggle{
  width:auto;
  padding:.5rem .75rem;
  font-size:.82rem;
  border-radius:10px;
  line-height:1.1;
}

.view-toggle.is-active{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-color:transparent;
  color:#fff;
}

.charts-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}

.charts-grid .chart-card{
  display:flex;
  flex-direction:column;
  overflow:hidden; /* prevent TradingView iframes from spilling out */
}

.charts-grid .chart-card .tv-widget{
  flex:0 0 220px; /* fixed height so TradingView can't grow and overlap cards */
  height:220px;
  min-height:0; /* fixes flex children overflow issues */
  width:100%;
}

@media (max-width: 859px){
  .charts-grid .chart-card .tv-widget{
    flex-basis:180px;
    height:180px;
  }
}

#live-charts-grid:fullscreen{
  background:var(--bg);
  padding:1rem;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-template-rows:repeat(2, minmax(0, 1fr));
  gap:1rem;
  align-content:stretch;
  height:100%;
  overflow:hidden;
}

#live-charts-grid:fullscreen .chart-card{
  min-height:0;
  height:100%;
}

#live-charts-grid:fullscreen .chart-card .tv-widget{
  flex:1 1 auto;
  height:100%;
  min-height:0;
}

.chart-card h3{
  margin-top:0;
  margin-bottom:.75rem;
}

.chart-card-logo{
  width:120px;
  height:120px;
  object-fit:contain;
  flex:0 0 auto;
}

.chart-card-logo-only{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}

.chart-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

#live-charts-grid:fullscreen .chart-card-logo-only{
  min-height:0;
}

#live-charts-grid:fullscreen .chart-card-logo{
  width:180px;
  height:180px;
}

.tv-iframe{
  width:100%;
  min-height:360px;
  border:0;
  border-radius:10px;
  background:var(--surface-2);
}

.prices-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}

.live-price-card{
  display:grid;
  grid-template-columns:minmax(150px,220px) 1fr auto;
  align-items:center;
  gap:1rem;
}

.live-price-main{
  min-width:170px;
}

.live-price-card .pair{
  color:var(--muted);
  font-weight:800;
}

.live-price-card .delta{
  margin-top:.35rem;
  font-weight:800;
}

.live-price-chart{
  flex:1;
  min-width:160px;
}

.sparkline{
  width:100%;
  height:44px;
}

.sparkline-track{
  stroke:rgba(255,255,255,.18);
  stroke-width:1;
}

.sparkline-line{
  fill:none;
  stroke-width:2.2;
}

.sparkline-line.up{stroke:#37d67a}
.sparkline-line.down{stroke:#ff7d7d}

.live-price-value{
  min-width:120px;
  text-align:right;
  margin-top:0!important;
  white-space:nowrap;
}

.live-price-card .pair{
  color:var(--muted);
  font-weight:800;
}

.live-price-card .value{
  margin-top:.45rem;
  font-size:1.45rem;
  font-weight:900;
}

.live-price-card .delta{
  margin-top:.45rem;
  font-weight:800;
}

.live-price-card .delta.up{color:#37d67a}
.live-price-card .delta.down{color:#ff7d7d}

.live-price-card.rows-only .live-price-chart{
  display:none;
}

.live-price-card.rows-only{
  grid-template-columns:1fr auto;
}

.is-hidden{
  display:none!important;
}

.invoice-preview{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
}
.invoice-modal-card{
  width:min(980px, 96vw);
  max-height:90vh;
  overflow:auto;
}
.invoice-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  margin-bottom:.8rem;
}
.invoice-modal-head h2{
  margin:0;
  font-size:1.05rem;
}
.invoice-modal-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.invoice-modal-form,
.invoice-modal-preview{
  min-width:0;
}
.invoice-modal-preview{
  position:sticky;
  top:.2rem;
}
.invoice-modal-form .grid.two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.invoice-items-list{
  display:grid;
  gap:.6rem;
  margin-bottom:.7rem;
}
.invoice-item-row{
  display:grid;
  grid-template-columns:110px 1.7fr 90px 120px auto;
  gap:.5rem;
  align-items:center;
}
.invoice-item-title{
  font-weight:800;
  color:var(--muted);
}
.invoice-preview-items{
  margin:.25rem 0 .75rem;
  padding-inline-start:1.1rem;
}
.invoice-preview-items-table{
  width:100%;
  border-collapse:collapse;
  margin:.35rem 0 .9rem;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.invoice-preview-items-table th,
.invoice-preview-items-table td{
  padding:.45rem .55rem;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.invoice-preview-items-table th{
  font-size:.82rem;
  color:var(--muted);
  font-weight:800;
  background:rgba(0,0,0,.14);
}
.invoice-preview-items-table tbody tr:last-child td{
  border-bottom:0;
}
.invoice-preview__head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  border-bottom:1px dashed var(--border);
  padding-bottom:.8rem;
}
.invoice-preview__head h3{margin:.1rem 0 .5rem}
.invoice-logo{display:block;height:48px;width:auto;max-width:280px;margin-bottom:.5rem}
.invoice-preview__client{margin-top:.9rem}
.invoice-preview__client h4{margin:.2rem 0 .5rem}
.invoice-preview__amount{margin-top:.9rem}
.invoice-preview__signature{
  margin-top:1.2rem;
  padding-top:1rem;
  border-top:1px dashed var(--border);
}
.signature-line{
  margin-top:1.6rem;
  width:260px;
  max-width:100%;
  border-top:1px solid var(--text);
}
.invoice-actions{
  margin-top:.9rem;
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}
.invoice-actions button{width:auto}
.invoice-status-form{
  margin:0;
}
.invoice-status-form select{
  min-width:130px;
}
.invoice-row-actions{
  display:flex;
  gap:.45rem;
}

.admin-tabs{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
}

.tab-link{
  display:inline-flex;
  align-items:center;
  padding:.42rem .72rem;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--muted);
  text-decoration:none;
  background:var(--surface-2);
  font-weight:700;
}

.tab-link.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
}

@media print{
  @page{margin:8mm}
  :root{
    --bg:#ffffff!important;
    --bg2:#ffffff!important;
    --surface:#ffffff!important;
    --surface-2:#ffffff!important;
    --text:#0f1321!important;
    --muted:#4b5568!important;
    --border:#d7dce8!important;
  }
  html,body{
    background:#ffffff!important;
    color:#0f1321!important;
  }
  .admin-content > .card{display:none!important}
  .admin-content > .card:first-child{display:block!important}
  .modal[data-invoice-modal]{
    display:block!important;
    position:static!important;
    inset:auto!important;
    background:transparent!important;
    padding:0!important;
    z-index:auto!important;
  }
  .invoice-modal-card{
    width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0!important;
    box-shadow:none!important;
    border:0!important;
    padding:0!important;
  }
  .invoice-modal-layout{
    display:block!important;
  }
  .invoice-modal-form{
    display:none!important;
  }
  .invoice-modal-preview{
    display:block!important;
  }
  .topbar,
  .admin-sidebar,
  .footer,
  .whatsapp-fab,
  [data-invoice-modal-open],
  .table,
  .invoice-actions{
    display:none!important;
  }
  .admin-shell,
  .admin-content{
    display:block!important;
  }
  .admin-content > .card:first-child > h1,
  .admin-content > .card:first-child > .negative,
  .admin-content > .card:first-child > .positive{
    display:none!important;
  }
  .invoice-preview{
    border:1px solid #d7dce8!important;
    background:#ffffff!important;
    color:#0f1321!important;
    page-break-inside:avoid;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .invoice-preview__head,
  .invoice-preview__signature{
    border-color:#d7dce8!important;
  }
  .invoice-preview-items-table{
    border-color:#d7dce8!important;
    background:#ffffff!important;
  }
  .invoice-preview-items-table th,
  .invoice-preview-items-table td{
    border-bottom-color:#d7dce8!important;
    color:#0f1321!important;
    background:#ffffff!important;
  }
  .invoice-preview-items-table th{
    background:#f3f5fa!important;
    color:#4b5568!important;
  }
  .signature-line{
    border-top-color:#0f1321!important;
  }
  .invoice-logo{
    filter:none!important;
  }
  .invoice-preview *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

@media (max-width: 900px){
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:static}
  .admin-datetime{
    min-width:0;
    width:100%;
  }
  .topbar-right{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .invoice-modal-layout{
    grid-template-columns:1fr;
  }
  .invoice-modal-preview{
    position:static;
  }
  .invoice-item-row{
    grid-template-columns:1fr;
  }
}

@media (max-width: 1200px){
  .invoice-modal-card{
    width:min(940px, 96vw);
  }
  .invoice-modal-layout{
    grid-template-columns:1fr;
  }
  .invoice-modal-preview{
    position:static;
  }
  .invoice-modal-form .grid.two{
    grid-template-columns:1fr;
  }
}

@media (min-width: 860px){
  .charts-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* ===========================
   Client Portfolio UI
   =========================== */
.client-hero{
  margin-bottom:1rem;
}
.client-hero-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.client-welcome{
  margin:0;
  font-size:1.35rem;
  letter-spacing:.2px;
}
.client-hero-sub{
  margin:.35rem 0 0;
  color:var(--muted);
  line-height:1.6;
}

.icon-button{
  width:44px;
  height:44px;
  padding:0;
  line-height:0;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.icon-button:hover{border-color:rgba(255,255,255,.25)}
.icon-button--edit{
  width:42px;
  height:42px;
}
.icon-button svg{
  width:22px;
  height:22px;
  display:block;
}
.icon-button__eye{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
}
.icon-button__eye svg{
  grid-area:1 / 1;
}

.client-kpis{
  margin-bottom:1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.client-kpi-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}
.client-kpi-hint{
  color:var(--muted);
  font-size:.85rem;
  font-weight:800;
}
.client-kpi-value{
  margin-top:.45rem;
  font-weight:950;
  font-size:1.35rem;
}

.client-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.9rem;
}

.client-tabs{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.portfolio-tab-panel{
  display:none;
}
.portfolio-tab-panel.is-active{
  display:block;
}

.client-empty{
  text-align:center;
  padding:1.4rem 1rem;
  color:var(--muted);
}
.client-empty h3{
  color:var(--text);
  margin:0 0 .5rem;
}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1rem;
}

.holding-card{
  padding:1rem;
}
.holding-card-head{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}
.holding-photo{
  width:82px;
  height:82px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.14);
  flex:0 0 auto;
  display:grid;
  place-items:center;
}
.holding-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.holding-photo__placeholder{
  display:grid;
  place-items:center;
  color:var(--muted);
  opacity:.95;
}
.holding-photo__placeholder svg{width:26px;height:26px}

.holding-card-title h3{
  margin:.1rem 0 .25rem;
  font-size:1.05rem;
}
.holding-sub{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-items:center;
  color:var(--muted);
  font-weight:800;
  font-size:.88rem;
}
.dot-sep{
  opacity:.7;
}

.holding-card-metrics{
  margin-top:.85rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.holding-metric__label{
  color:var(--muted);
  font-weight:900;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.2px;
}
.holding-metric__value{
  margin-top:.25rem;
  font-weight:950;
}

.holding-modal-card{
  width:min(980px, 96vw);
}
.holding-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
}

.holding-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.9rem;
}
.form-field label{
  display:block;
  margin-bottom:.35rem;
  color:var(--muted);
  font-size:.9rem;
  font-weight:900;
}

.holding-photo-preview{
  margin-top:.55rem;
}
.holding-photo-preview__img{
  width:100%;
  max-height:160px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}
.holding-photo-preview__placeholder,
.holding-photo-preview__existing{
  color:var(--muted);
  font-size:.9rem;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:12px;
  padding:.75rem .8rem;
}

.holding-preview-kpis{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.8rem;
}
.holding-preview-kpi{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.12);
  border-radius:14px;
  padding:.85rem 1rem;
}
.holding-preview-kpi__label{
  color:var(--muted);
  font-weight:900;
  font-size:.86rem;
}
.holding-preview-kpi__value{
  margin-top:.35rem;
  font-weight:950;
  font-size:1.1rem;
}

.holding-form-actions{
  margin-top:1rem;
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 640px){
  .holding-card-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .holding-card-metrics{
    grid-template-columns:1fr;
  }
}

/* Monochrome icon tweaks for light theme */
:root[data-theme="light"] .brand-logo{filter:none}
:root[data-theme="light"] .service-icon{background:rgba(15,19,33,.04);border:1px solid rgba(15,19,33,.12)}
:root[data-theme="light"] .why-icon{background:rgba(15,19,33,.04);border:1px solid rgba(15,19,33,.12)}
:root[data-theme="light"] .settings-cog{background:rgba(15,19,33,.04)}
:root[data-theme="light"] .logout-icon-btn{background:rgba(15,19,33,.03)}
:root[data-theme="light"] .whatsapp-fab{background:#25d366;border:1px solid #25d366;color:#ffffff;box-shadow:0 12px 28px rgba(15,19,33,.10)}
:root[data-theme="light"] .whatsapp-fab:hover{background:#1fbb59;border-color:#1fbb59}
:root[data-theme="light"] .wa-icon{background:rgba(255,255,255,.22)}
:root[data-theme="light"] .lang-icon{background:rgba(15,19,33,.04);border:1px solid rgba(15,19,33,.12)}
:root[data-theme="light"] .invoice-logo{filter:none}