@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--green:#16b66b;--green2:#087c51;--ink:#17221c;--muted:#6a766f;--bg:#f5f8f6;--card:#fff;--line:#dfe8e2;--red:#d84545;--amber:#c58a17;--shadow:0 12px 35px rgba(18,60,38,.08)}*{box-sizing:border-box}html{direction:rtl}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Cairo',sans-serif}.container{width:min(1120px,calc(100% - 32px));margin:auto}a{color:inherit}.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.navwrap{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:22px;font-weight:800;color:#075e54}.brand img{width:46px;height:46px;border-radius:13px}.site-header nav{display:flex;gap:22px}.site-header nav a{text-decoration:none;font-weight:700;color:#455149}.hero{padding:72px 0;background:linear-gradient(135deg,#f6fff9,#eef8f2)}.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:center}.eyebrow{display:inline-block;background:#dff7e9;color:#087c51;padding:7px 12px;border-radius:999px;font-weight:800}.hero h1{font-size:48px;line-height:1.35;margin:18px 0 12px}.hero p{font-size:19px;color:var(--muted)}.actions{display:flex;gap:12px;margin-top:26px}.btn{border:1px solid #18a963;background:#fff;color:#087c51;border-radius:12px;padding:11px 18px;text-decoration:none;font:inherit;font-weight:800;cursor:pointer;display:inline-flex;justify-content:center;align-items:center}.btn.primary{background:linear-gradient(135deg,#20c66e,#099c58);color:#fff;border:0}.btn.small{padding:7px 12px;font-size:13px}.support-line{margin-top:22px;color:var(--muted)}.hero-card,.download-card,.plan,.contact-box,.panel,.kpi,.activation-code{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.hero-card{padding:30px;text-align:center}.hero-card img{width:100px;border-radius:24px}.hero-card h2{margin-bottom:5px}.version{margin-top:20px;background:#eef9f3;padding:10px;border-radius:12px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:34px 0 64px}.features article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}.features b{font-size:19px}.features p{color:var(--muted);margin-bottom:0}.page{padding:48px 0 70px}.page-head{margin-bottom:24px}.page-head h1,.legal h1{font-size:36px;margin:0 0 8px}.page-head p{color:var(--muted)}.download-card{padding:26px;display:grid;grid-template-columns:80px 1fr auto;gap:20px;align-items:center}.download-card img{width:80px;border-radius:20px}.download-card h2{margin:0 0 6px}.download-card p{color:var(--muted)}.plan{max-width:720px;margin:auto;padding:30px}.plan h2{color:var(--green2);font-size:30px}.plan-grid{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.plan-grid span{background:#eef9f3;border:1px solid #c9ead7;padding:10px 14px;border-radius:12px;font-weight:700}.contact-box{max-width:560px;margin:auto;padding:34px;text-align:center}.contact-box strong{display:block;font-size:34px;color:var(--green2);margin:10px}.legal{padding:50px 0 80px;max-width:850px}.legal p{line-height:2;color:#435047}footer{background:#12251b;color:#dbe7e0;padding-top:34px}.foot{display:flex;justify-content:space-between;gap:20px}.foot a{display:block;text-decoration:none;margin:6px 0}.copy{text-align:center;border-top:1px solid #2a3c32;margin-top:25px;padding:13px;color:#96a79d}.admin-body{min-height:100vh}.sidebar{position:fixed;right:0;top:0;bottom:0;width:240px;background:#0b281b;color:#fff;padding:22px 16px;display:flex;flex-direction:column}.admin-brand{color:#fff;margin-bottom:24px}.sidebar nav{display:grid;gap:5px}.sidebar nav a,.logout{color:#d7e7dd;text-decoration:none;padding:10px 12px;border-radius:10px}.sidebar nav a:hover{background:#183a29}.logout{margin-top:auto}.admin-main{margin-right:240px;min-height:100vh}.admin-top{height:72px;background:#fff;border-bottom:1px solid var(--line);padding:0 26px;display:flex;align-items:center}.admin-top b{display:block;font-size:20px}.admin-top small{color:var(--muted)}.admin-content{padding:24px}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}.kpi{padding:18px}.kpi span{font-size:13px;color:var(--muted)}.kpi b{display:block;font-size:29px;margin-top:5px;color:var(--green2)}.kpi.danger b{color:var(--red)}.kpi.warn b{color:var(--amber)}.panel{padding:20px;margin-bottom:18px}.panel h2{margin-top:0}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:right;padding:12px 10px;border-bottom:1px solid #edf1ee;font-size:14px}th{color:#66736b;font-weight:700;background:#fafcfb}td a{color:#087c51;font-weight:700;text-decoration:none}td small{display:block;color:var(--muted)}.badge{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;background:#edf2ef;color:#526158}.badge.active{background:#e3f8ec;color:#087c51}.badge.expired,.badge.suspended,.badge.revoked{background:#fff0f0;color:#bf3737}.badge.warn{background:#fff7df;color:#9d6a00}.two-col{display:grid;grid-template-columns:1fr 1.5fr;gap:18px}.form-grid{display:grid;gap:13px}.form-grid label{font-weight:700;font-size:13px}.form-grid input,.form-grid select,.form-grid textarea,.search input{width:100%;margin-top:6px;border:1px solid #ccd9d1;border-radius:11px;padding:11px 12px;font-family:inherit;background:#fff}.search{display:flex;gap:8px}.search button,.link-btn,.mini-actions button{border:0;background:#eef8f2;color:#087c51;border-radius:9px;padding:7px 10px;font-family:inherit;font-weight:700;cursor:pointer}.alert{padding:12px 15px;border-radius:12px;margin-bottom:16px}.alert.success{background:#e8f8ef;color:#087c51}.alert.error{background:#fff0f0;color:#b33737}.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#ecf9f1,#f8fbf9)}.login-card{width:min(410px,calc(100% - 28px));background:#fff;padding:32px;border-radius:22px;box-shadow:var(--shadow);display:grid;gap:15px}.login-card img{width:75px;margin:auto;border-radius:18px}.login-card h1{text-align:center;font-size:23px}.login-card label{font-weight:700}.login-card input{width:100%;padding:12px;border:1px solid #ccd8d0;border-radius:11px;margin-top:5px;font-family:inherit}.customer-head{display:flex;justify-content:space-between}.customer-head h2{margin:0}.customer-head p{margin:5px 0 0;color:var(--muted)}.activation-code{padding:18px 20px;margin-bottom:18px;display:flex;align-items:center;gap:15px;background:#f2fff7}.activation-code span{color:var(--muted)}.activation-code strong{font-size:24px;color:#075e54;direction:ltr}.sub-card{border:1px solid var(--line);border-radius:15px;padding:15px;margin:10px 0}.sub-row,.sub-meta{display:flex;justify-content:space-between;gap:10px}.sub-row small{display:block;color:var(--muted)}.sub-meta{margin:12px 0;color:#66736b;font-size:13px}.mini-actions{display:flex;gap:7px;flex-wrap:wrap}.mini-actions form{margin:0}.narrow{max-width:650px}.log-list{display:grid;gap:8px}.log-list>div{border-bottom:1px solid #edf1ee;padding:10px 0}.log-list b{display:block}.log-list span{font-size:12px;color:var(--muted)}.muted{color:var(--muted)}
@media(max-width:900px){.site-header nav{display:none}.hero-grid,.two-col{grid-template-columns:1fr}.hero h1{font-size:34px}.features{grid-template-columns:1fr}.download-card{grid-template-columns:70px 1fr}.download-card .btn{grid-column:1/-1}.sidebar{width:78px;padding:16px 9px}.sidebar .brand span,.sidebar nav a{font-size:0}.sidebar nav a:before{content:'•';font-size:24px}.logout{font-size:0}.logout:before{content:'↩';font-size:22px}.admin-main{margin-right:78px}.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== WASender Server 1.0.1 — Responsive UI ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{min-width:0;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;max-width:100%}
.container,.admin-main,.admin-content,.panel,.two-col>*{min-width:0}

/* Public navigation */
.site-menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#075e54;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.site-menu-toggle svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* Admin mobile navigation */
.admin-menu-toggle,.sidebar-close{display:none;border:0;background:transparent;color:inherit;cursor:pointer;font-family:inherit}
.admin-backdrop{display:none;position:fixed;inset:0;background:rgba(5,24,15,.46);z-index:89;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-top-inner{width:100%;display:flex;align-items:center;gap:12px}
.admin-top-copy{min-width:0}
.admin-top-copy b,.admin-top-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Better sizing on medium screens */
@media (max-width:1180px){
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:900px){
  /* Public website */
  .container{width:min(100% - 28px,1120px)}
  .navwrap{height:auto;min-height:70px;position:relative;gap:12px;padding:10px 0;flex-wrap:wrap}
  .site-menu-toggle{display:inline-flex}
  .site-header nav{display:none;order:3;width:100%;background:#fff;border-top:1px solid var(--line);padding:8px 0 4px;gap:0;flex-direction:column}
  .site-header nav.open{display:flex}
  .site-header nav a{padding:11px 8px;border-bottom:1px solid #f0f4f1}
  .site-header nav a:last-child{border-bottom:0}
  .hero{padding:44px 0}
  .hero-grid,.two-col{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(30px,8vw,40px)}
  .hero p{font-size:17px}
  .actions{flex-wrap:wrap}
  .actions .btn{flex:1 1 180px}
  .features{grid-template-columns:1fr;padding-top:24px;padding-bottom:42px}
  .download-card{grid-template-columns:64px minmax(0,1fr);padding:20px;gap:14px}
  .download-card img{width:64px}
  .download-card .btn{grid-column:1/-1;width:100%}
  .foot{flex-direction:column}

  /* Admin: true off-canvas sidebar instead of compressed 78px bar */
  .sidebar{width:min(82vw,290px);right:0;transform:translateX(105%);transition:transform .22s ease;z-index:100;padding:18px 16px;box-shadow:-12px 0 35px rgba(0,0,0,.18)}
  .sidebar .brand span,.sidebar nav a,.logout{font-size:inherit}
  .sidebar nav a:before,.logout:before{content:none}
  .sidebar-head{margin-bottom:16px}
  .admin-brand{margin-bottom:0}
  .sidebar-close{display:inline-flex;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);align-items:center;justify-content:center;font-size:26px;line-height:1}
  .admin-body.nav-open .sidebar{transform:translateX(0)}
  .admin-body.nav-open .admin-backdrop{display:block}
  .admin-main{margin-right:0;width:100%}
  .admin-top{height:auto;min-height:68px;padding:10px 16px;position:sticky;top:0;z-index:60}
  .admin-menu-toggle{display:inline-flex;width:44px;height:44px;border-radius:12px;background:#eef8f2;color:#075e54;align-items:center;justify-content:center;font-size:25px;flex:0 0 auto}
  .admin-content{padding:16px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kpi{padding:16px;min-height:126px}
  .kpi span{font-size:13px;line-height:1.8}
  .kpi b{font-size:28px}
  .panel{padding:16px;border-radius:16px}
  .panel-head,.customer-head,.sub-row,.sub-meta,.activation-code{flex-wrap:wrap;align-items:flex-start}
  .panel-head>*,.customer-head>*,.activation-code>*{min-width:0}
  .panel-head h2{margin-bottom:8px}
  .search{width:100%;flex-wrap:wrap}
  .search input{flex:1 1 190px;margin-top:0}
  .search button{flex:0 0 auto}
  .activation-code strong{font-size:20px;overflow-wrap:anywhere;word-break:break-word}
  .form-grid input,.form-grid select,.form-grid textarea{font-size:16px} /* prevents iOS zoom */
  .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
  .table-wrap table{min-width:620px}
  th,td{white-space:nowrap}
  td small{white-space:normal}
}

@media (max-width:560px){
  .container{width:calc(100% - 22px)}
  .brand{font-size:19px}
  .brand img{width:42px;height:42px}
  .hero{padding:34px 0}
  .hero-card,.plan,.contact-box{padding:22px}
  .page{padding:32px 0 48px}
  .page-head h1,.legal h1{font-size:30px}
  .actions{display:grid;grid-template-columns:1fr;width:100%}
  .actions .btn{width:100%}
  .download-card{grid-template-columns:52px minmax(0,1fr);padding:16px}
  .download-card img{width:52px;border-radius:14px}
  .plan h2{font-size:25px}
  .contact-box strong{font-size:25px;overflow-wrap:anywhere}

  .admin-content{padding:12px}
  .admin-top{padding-inline:12px}
  .admin-top b{font-size:18px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:14px 12px;min-height:112px;border-radius:16px}
  .kpi b{font-size:27px}
  .panel{padding:14px;margin-bottom:14px}
  .panel h2{font-size:21px}
  .btn{width:100%}
  .btn.small{width:auto}
  .mini-actions{width:100%}
  .mini-actions form{flex:1 1 130px}
  .mini-actions button{width:100%}
  .activation-code{padding:15px;align-items:stretch}
  .activation-code strong{width:100%;font-size:18px}
  .login-card{padding:24px 18px;border-radius:18px}
}

@media (max-width:380px){
  .stats-grid{grid-template-columns:1fr}
  .kpi{min-height:auto}
  .admin-content{padding:10px}
  .panel{padding:12px}
}

@media (min-width:901px){
  .sidebar{transform:none!important}
  .admin-backdrop{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}