/* شاشة التفعيل - نفس ألوان وتصميم FrmActivation فى الديسك توب (ثيم ember الغامق) */
:root {
  --bg: #151b25; --surface2: #1b2230; --field: #0f141c; --border2: #2f3949;
  --text: #f3f5f8; --muted: #8a94a6; --faint: #5b6474;
  --accent: #ff7a45; --accent2: #ffb03a; --on-accent: #1a0e07;
  --success: #2bc48a; --danger: #f0525a; --warning: #f5b83d;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #0b0e13; color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px;
}
.act {
  width: 980px; max-width: 100%; min-height: 600px; background: var(--bg);
  border: 1px solid var(--border2); border-radius: 22px; overflow: hidden; position: relative;
  display: flex; box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.act::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); z-index: 2; }
.side {
  width: 340px; flex: 0 0 340px; padding: 44px 36px 24px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,122,69,.10), rgba(255,122,69,0) 70%), var(--surface2);
}
.logo {
  width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 700; font-size: 29px;
}
.vendor { font-size: 22px; font-weight: 700; margin-top: 16px; }
.tagline { color: var(--muted); font-size: 12.5px; margin-top: 4px; line-height: 1.6; }
.vlines { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.vlines div { color: var(--muted); font-size: 13px; direction: ltr; text-align: start; }
.ver { margin-top: auto; color: var(--faint); font-size: 12px; direction: ltr; text-align: start; }
.main { flex: 1; padding: 40px 40px 24px; display: flex; flex-direction: column; min-width: 0; }
.top { display: flex; align-items: flex-start; gap: 10px; }
.top h1 { flex: 1; margin: 0; font-size: 26px; font-weight: 700; }
.btn {
  border: 1px solid var(--border2); background: var(--surface2); color: var(--text); border-radius: 12px;
  font: 700 14px "Segoe UI", Tahoma, Arial, sans-serif; padding: 0 16px; height: 40px; cursor: pointer;
  transition: background .12s, transform .05s; white-space: nowrap;
}
.btn:hover { background: #222a3a; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { border: 0; color: var(--on-accent); background: linear-gradient(90deg, var(--accent), var(--accent2)); }
[dir="rtl"] .btn.primary { background: linear-gradient(270deg, var(--accent), var(--accent2)); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.big { height: 56px; border-radius: 16px; font-size: 17px; }
.btn.icon { width: 40px; padding: 0; }
.state { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; font-weight: 700; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.help { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.7; min-height: 44px; }
.cap { color: var(--muted); font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.sitebox {
  display: flex; align-items: center; gap: 10px; background: var(--field); border: 1.5px solid rgba(255,122,69,.47);
  border-radius: 14px; padding: 10px 10px 10px 18px; min-height: 60px;
}
[dir="rtl"] .sitebox { padding: 10px 18px 10px 10px; }
.sitekey {
  flex: 1; color: var(--accent); font: 700 24px Consolas, "Courier New", monospace; direction: ltr; text-align: left;
  overflow-wrap: anywhere; user-select: all;
}
.keybox { background: var(--field); border: 1px solid var(--border2); border-radius: 14px; padding: 10px 14px; transition: border-color .12s; }
.keybox:focus-within { border: 2px solid var(--accent); padding: 9px 13px; }
textarea#key {
  width: 100%; height: 80px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text);
  font: 15px Consolas, "Courier New", monospace; direction: ltr; text-align: left; text-transform: uppercase;
}
.row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.row .grow { flex: 1; }
.msg { min-height: 44px; margin-top: 10px; font-size: 13.5px; font-weight: 700; line-height: 1.6; color: var(--muted); }
.msg.err { color: var(--danger); } .msg.ok { color: var(--success); }
.bottom { margin-top: auto; display: flex; gap: 10px; padding-top: 12px; }
.bottom .activate { flex: 1; }
.online { display: none; }
.online.show { display: block; }
.online .btn { width: 100%; height: 46px; font-size: 15px; border-radius: 14px; }

/* نوافذ صغيرة (كلمة سر التصفير / ملف السحابة) */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-bg.show { display: flex; }
.modal { background: var(--bg); border: 1px solid var(--border2); border-radius: 18px; padding: 22px; width: 420px; max-width: 100%; }
.modal h3 { margin: 0 0 12px; font-size: 18px; }
.modal label { display: block; color: var(--muted); font-size: 13px; font-weight: 700; margin: 10px 0 6px; }
.modal input[type=password], .modal input[type=file] {
  width: 100%; background: var(--field); color: var(--text); border: 1px solid var(--border2); border-radius: 10px;
  padding: 10px 12px; font: 14px "Segoe UI", Tahoma, Arial, sans-serif; direction: ltr;
}
.modal .row { justify-content: flex-start; margin-top: 18px; }
.modal .msg { min-height: 0; }

@media (max-width: 820px) {
  .act { flex-direction: column; min-height: 0; }
  .side { width: auto; flex: none; padding: 26px 20px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 14px; }
  .side .logo { width: 52px; height: 52px; font-size: 22px; border-radius: 15px; }
  .side .vendor { margin-top: 0; font-size: 19px; }
  .side .tagline { flex-basis: 100%; }
  .vlines { flex-basis: 100%; margin-top: 10px; }
  .ver { flex-basis: 100%; margin-top: 8px; }
  .main { padding: 22px 20px 20px; }
  .top h1 { font-size: 21px; }
  .sitekey { font-size: 18px; }
  .bottom { flex-wrap: wrap; }
  .bottom .activate { flex-basis: 100%; order: -1; }
}