:root {
    --mg-primary: #5b5bd6;
    --mg-primary-dark: #4444b8;
    --mg-accent: #8b5cf6;
    --mg-ink: #182033;
    --mg-muted: #73809a;
    --mg-line: #e8ebf2;
    --mg-surface: #ffffff;
    --mg-soft: #f7f8fc;
    --mg-success: #16a36a;
    --mg-success-soft: #eafaf3;
    --mg-danger: #dc3f59;
    --mg-danger-soft: #fff0f2;
    --mg-shadow: 0 24px 70px rgba(36, 43, 82, .16);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--mg-ink);
    background: #f3f5fb;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;
    text-align: right;
    direction: rtl;
}

button, input, select { font-family: inherit; }
button { outline: none !important; }

.installer-bg {
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.installer-bg-one {
    top: -260px;
    right: -180px;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(91, 91, 214, .20), rgba(91, 91, 214, 0) 68%);
}

.installer-bg-two {
    bottom: -300px;
    left: -200px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(139, 92, 246, .16), rgba(139, 92, 246, 0) 68%);
}

.installer-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    width: calc(100% - 48px);
    max-width: 1240px;
    min-height: 760px;
    margin: 32px auto;
    overflow: hidden;
    background: var(--mg-surface);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 28px;
    box-shadow: var(--mg-shadow);
}

.installer-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 38px 30px 30px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(155deg, rgba(255,255,255,.10), transparent 35%),
        linear-gradient(145deg, #4c4cc3 0%, #5b5bd6 48%, #7c52da 100%);
}

.installer-sidebar:before,
.installer-sidebar:after {
    position: absolute;
    content: '';
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.installer-sidebar:before {
    top: -120px;
    left: -140px;
    width: 330px;
    height: 330px;
}

.installer-sidebar:after {
    right: -110px;
    bottom: 120px;
    width: 260px;
    height: 260px;
}

.brand-mark {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 12px);
    align-items: end;
    gap: 5px;
    width: 60px;
    height: 56px;
    padding: 12px;
    margin-bottom: 19px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 17px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.brand-mark span {
    display: block;
    background: #fff;
    border-radius: 6px;
}
.brand-mark span:nth-child(1) { height: 16px; opacity: .7; }
.brand-mark span:nth-child(2) { height: 30px; }
.brand-mark span:nth-child(3) { height: 23px; opacity: .86; }

.brand-copy { position: relative; z-index: 1; }
.brand-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.68);
    font: 600 10px/1.4 Arial, sans-serif;
    letter-spacing: 1.5px;
    direction: ltr;
    text-align: right;
}
.brand-copy h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; }
.brand-copy p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.8; }

.steps {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 52px;
}

.steps:before {
    position: absolute;
    top: 30px;
    right: 22px;
    bottom: 30px;
    width: 1px;
    content: '';
    background: rgba(255,255,255,.17);
}

.step-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 20px;
    gap: 13px;
    align-items: center;
    width: 100%;
    min-height: 66px;
    padding: 10px 11px;
    color: rgba(255,255,255,.62);
    text-align: right;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 15px;
    transition: .22s ease;
}
.step-item[disabled] { cursor: default; }
.step-item.is-active {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.step-item.is-complete { color: #fff; }

.step-number {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-weight: 700;
    background: rgba(30, 31, 102, .22);
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 14px;
}
.step-item.is-active .step-number { color: var(--mg-primary); background: #fff; }
.step-item.is-complete .step-number { color: #fff; background: rgba(20,178,116,.9); }
.step-copy { display: flex; flex-direction: column; min-width: 0; }
.step-copy strong { font-size: 13px; font-weight: 700; }
.step-copy small { color: inherit; font-size: 10px; opacity: .76; }
.step-item > .fa { display: none; color: #8ff0c7; }
.step-item.is-complete > .fa { display: block; }

.sidebar-note {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 15px;
    margin-top: auto;
    background: rgba(22, 25, 93, .19);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
}
.sidebar-note > i { padding-top: 4px; color: #a8f3d2; font-size: 18px; }
.sidebar-note div { display: flex; flex-direction: column; }
.sidebar-note strong { font-size: 12px; }
.sidebar-note span { color: rgba(255,255,255,.67); font-size: 10px; line-height: 1.8; }

.installer-content { min-width: 0; padding: 39px 44px 34px; background: #fff; }
.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 27px;
    margin-bottom: 27px;
    border-bottom: 1px solid var(--mg-line);
}
.content-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--mg-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
}
.content-header h2 { margin: 0; color: var(--mg-ink); font-size: 23px; font-weight: 800; }
.secure-badge {
    flex: 0 0 auto;
    padding: 8px 13px;
    color: #38785f;
    font-size: 10px;
    font-weight: 700;
    background: #edf9f4;
    border: 1px solid #d9f1e7;
    border-radius: 99px;
}
.secure-badge i { margin-left: 5px; }

.step-panel { display: none; animation: panel-in .32s ease both; }
.step-panel.is-active { display: block; }
@keyframes panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 22px;
}
.section-heading h3,
.form-section-head h3 { margin: 0 0 5px; font-size: 17px; font-weight: 800; }
.section-heading p,
.form-section-head p { margin: 0; color: var(--mg-muted); font-size: 11px; }
.summary-pill {
    flex: 0 0 auto;
    padding: 7px 11px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
}
.summary-pill i { margin-left: 4px; }
.summary-pill.is-success { color: var(--mg-success); background: var(--mg-success-soft); }
.summary-pill.is-danger { color: var(--mg-danger); background: var(--mg-danger-soft); }

.requirement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.requirement-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr 18px;
    gap: 11px;
    align-items: center;
    min-height: 92px;
    padding: 14px;
    background: var(--mg-soft);
    border: 1px solid transparent;
    border-radius: 15px;
    transition: .2s ease;
}
.requirement-card:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(42,49,86,.07); }
.requirement-card.is-danger { background: #fff7f8; border-color: #f8d9df; }
.requirement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--mg-primary);
    background: #eeeeff;
    border-radius: 12px;
}
.requirement-card.is-danger .requirement-icon { color: var(--mg-danger); background: #ffe7eb; }
.requirement-main { display: flex; flex-direction: column; min-width: 0; }
.requirement-main strong { font-size: 11px; }
.requirement-main span { overflow: hidden; color: #59647b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.requirement-main small { color: #929aae; font-size: 9px; }
.requirement-status { font-size: 17px; }
.requirement-card.is-success .requirement-status { color: var(--mg-success); }
.requirement-card.is-danger .requirement-status { color: var(--mg-danger); }

.permission-box {
    display: grid;
    grid-template-columns: minmax(190px, .75fr) 1.25fr;
    gap: 20px;
    padding: 18px;
    margin-top: 16px;
    background: #fafbfe;
    border: 1px solid var(--mg-line);
    border-radius: 17px;
}
.permission-title { display: flex; gap: 11px; align-items: flex-start; }
.permission-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #7b59cf;
    background: #f0eaff;
    border-radius: 11px;
}
.permission-title div { display: flex; flex-direction: column; }
.permission-title strong { font-size: 11px; }
.permission-title span { color: var(--mg-muted); font-size: 9px; line-height: 1.8; }
.permission-list { display: flex; flex-direction: column; gap: 7px; }
.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 10px;
    font-size: 10px;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 9px;
}
.permission-state { flex: 0 0 auto; font-size: 9px; font-weight: 700; }
.permission-state i { margin-left: 4px; }
.permission-state.is-success { color: var(--mg-success); }
.permission-state.is-danger { color: var(--mg-danger); }

.inline-alert {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 15px;
    margin-top: 16px;
    border-radius: 12px;
}
.inline-alert > i { padding-top: 4px; font-size: 16px; }
.inline-alert div { display: flex; flex-direction: column; }
.inline-alert strong { font-size: 11px; }
.inline-alert span { font-size: 10px; line-height: 1.9; }
.inline-alert .alert-content { min-width: 0; flex: 1; }
.alert-details {
    margin: 10px 0 0;
    padding: 10px 12px;
    max-height: 240px;
    overflow: auto;
    border: 1px solid rgba(167, 46, 67, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
    color: #6f2333;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    font: 11px/1.75 Consolas, Monaco, monospace;
}
.alert-details.is-hidden { display: none; }
.inline-alert.is-danger { color: #a72e43; background: var(--mg-danger-soft); border: 1px solid #fad5dc; }
.inline-alert.is-hidden { display: none; }

.panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    margin-top: 25px;
    border-top: 1px solid var(--mg-line);
}
.action-hint { color: var(--mg-muted); font-size: 9px; }
.action-hint i { margin-left: 4px; color: var(--mg-primary); }

.primary-action,
.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 45px;
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none !important;
    border: 0;
    border-radius: 12px;
    transition: .2s ease;
}
.primary-action {
    color: #fff !important;
    background: linear-gradient(135deg, var(--mg-primary), var(--mg-accent));
    box-shadow: 0 10px 23px rgba(91,91,214,.23);
}
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 14px 27px rgba(91,91,214,.30); }
.primary-action:active { transform: translateY(0); }
.primary-action[disabled] { opacity: .46; cursor: not-allowed; transform: none; box-shadow: none; }
.secondary-action { color: #626d83; background: #f1f3f8; }
.secondary-action:hover { color: var(--mg-ink); background: #e9ecf3; }

.form-section {
    padding: 21px;
    margin-bottom: 15px;
    background: #fbfbfd;
    border: 1px solid var(--mg-line);
    border-radius: 18px;
}
.form-section-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 19px; }
.section-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--mg-primary);
    background: #eeeeff;
    border-radius: 12px;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field-group { min-width: 0; }
.field-group label { display: block; margin-bottom: 6px; color: #404a60; font-size: 10px; font-weight: 800; }
.input-wrap { position: relative; }
.input-wrap > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 14px;
    width: 16px;
    color: #a0a8ba;
    text-align: center;
    transform: translateY(-50%);
}
.input-wrap input,
.input-wrap select {
    width: 100%;
    height: 44px;
    padding: 8px 41px 8px 12px;
    color: var(--mg-ink);
    font-size: 11px;
    background: #fff;
    border: 1px solid #dfe3ec;
    border-radius: 11px;
    outline: none;
    box-shadow: none;
    transition: .2s ease;
}
.input-wrap input[dir="ltr"] { padding-right: 41px; text-align: left; }
.input-wrap select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.select-wrap:after {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #9ca5b8;
    content: '\f107';
    font-family: FontAwesome;
    transform: translateY(-50%);
    pointer-events: none;
}
.input-wrap input:focus,
.input-wrap select:focus {
    border-color: rgba(91,91,214,.7);
    box-shadow: 0 0 0 3px rgba(91,91,214,.10);
}
.input-wrap:focus-within > i { color: var(--mg-primary); }
.input-wrap input::placeholder { color: #b4bac8; }

.license-section { background: linear-gradient(145deg, #faf9ff, #f7f8ff); border-color: #e4e0fa; }
.license-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(190px, .65fr); gap: 18px; align-items: center; }
.license-input input { height: 50px; font: 700 12px/1.4 Consolas, Monaco, monospace; letter-spacing: .4px; }
.field-help { display: block; margin-top: 7px; color: var(--mg-muted); font-size: 9px; }
.license-security { display: flex; flex-direction: column; gap: 7px; padding: 13px; background: rgba(255,255,255,.72); border: 1px solid #e6e3f5; border-radius: 12px; }
.license-security span { color: #667087; font-size: 9px; }
.license-security i { margin-left: 5px; color: var(--mg-success); }

.form-actions { margin-top: 18px; }
.install-action { min-width: 220px; }
.button-loading { display: none; }
.install-action.is-loading .button-idle { display: none; }
.install-action.is-loading .button-loading { display: inline-flex; align-items: center; gap: 7px; }

.success-state { max-width: 720px; padding: 10px 10px 20px; margin: 0 auto; text-align: center; }
.success-illustration {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    height: 94px;
    margin: 11px auto 25px;
    color: #fff;
    font-size: 37px;
    background: linear-gradient(145deg, #20b77a, #12a366);
    border-radius: 31px;
    box-shadow: 0 17px 36px rgba(22,163,106,.23);
}
.success-ring { position: absolute; inset: -12px; border: 1px solid rgba(22,163,106,.17); border-radius: 38px; }
.success-ring.ring-two { inset: -24px; border-color: rgba(22,163,106,.08); border-radius: 46px; }
.success-state h3 { margin: 4px 0 8px; font-size: 22px; font-weight: 900; }
.success-state > p { max-width: 580px; margin: 0 auto; color: var(--mg-muted); font-size: 11px; }
.success-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    max-width: 560px;
    margin: 25px auto 15px;
}
.success-details > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; text-align: right; background: #f8f9fc; border: 1px solid var(--mg-line); border-radius: 12px; }
.success-details span { color: var(--mg-muted); font-size: 9px; }
.success-details strong { max-width: 65%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.success-text { color: var(--mg-success); direction: rtl !important; }

.cron-card { max-width: 650px; padding: 17px; margin: 16px auto 21px; text-align: right; background: #1d2537; border-radius: 16px; box-shadow: 0 14px 34px rgba(29,37,55,.15); }
.cron-title { display: flex; gap: 10px; align-items: flex-start; color: #fff; }
.cron-title > i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #b8b9ff; background: rgba(255,255,255,.08); border-radius: 9px; }
.cron-title div { display: flex; flex-direction: column; }
.cron-title strong { font-size: 10px; }
.cron-title span { color: #8e99b0; font-size: 9px; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 13px; }
.copy-row code { display: block; min-width: 0; padding: 11px 12px; overflow: hidden; color: #dfe2f1; font: 10px/1.7 Consolas, Monaco, monospace; text-align: left; text-overflow: ellipsis; white-space: nowrap; direction: ltr; background: #151b29; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; }
.copy-row button { padding: 0 14px; color: #fff; font-size: 10px; font-weight: 700; background: var(--mg-primary); border: 0; border-radius: 9px; }
.copy-row button i { margin-left: 5px; }
#copy-feedback { display: block; min-height: 17px; margin-top: 5px; color: #75e3b4; font-size: 9px; }
.dashboard-action { min-width: 210px; }

.installation-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    background: rgba(18, 23, 39, .66);
    backdrop-filter: blur(7px);
    transition: .2s ease;
}
.installation-overlay.is-visible { visibility: visible; opacity: 1; }
.overlay-card {
    width: 100%;
    max-width: 420px;
    padding: 34px 31px 29px;
    text-align: center;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 26px 80px rgba(8,12,25,.28);
    transform: translateY(10px) scale(.98);
    transition: .25s ease;
}
.installation-overlay.is-visible .overlay-card { transform: translateY(0) scale(1); }
.overlay-spinner { display: flex; justify-content: center; gap: 7px; height: 35px; margin-bottom: 17px; }
.overlay-spinner span { width: 8px; height: 8px; margin-top: 14px; background: var(--mg-primary); border-radius: 50%; animation: bounce 1.05s infinite ease-in-out; }
.overlay-spinner span:nth-child(2) { animation-delay: .13s; }
.overlay-spinner span:nth-child(3) { animation-delay: .26s; }
@keyframes bounce { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-10px); opacity: 1; } }
.overlay-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 900; }
.overlay-card p { margin: 0; color: var(--mg-primary); font-size: 11px; font-weight: 700; }
.overlay-card small { display: block; color: var(--mg-muted); font-size: 9px; line-height: 1.8; }
.overlay-progress { height: 5px; margin: 20px 0 13px; overflow: hidden; background: #edf0f6; border-radius: 99px; }
.overlay-progress span { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, var(--mg-primary), var(--mg-accent)); border-radius: inherit; animation: progress-slide 1.5s infinite ease-in-out; }
@keyframes progress-slide { from { transform: translateX(250%); } to { transform: translateX(-250%); } }

@media (max-width: 1050px) {
    .installer-shell { grid-template-columns: 260px minmax(0, 1fr); width: calc(100% - 30px); }
    .installer-sidebar { padding-right: 23px; padding-left: 23px; }
    .installer-content { padding-right: 31px; padding-left: 31px; }
    .requirement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .installer-shell { display: block; min-height: 0; margin: 15px auto; border-radius: 22px; }
    .installer-sidebar { min-height: 0; padding: 24px; }
    .brand-mark { float: right; margin: 0 0 0 13px; }
    .brand-copy { min-height: 56px; }
    .steps { flex-direction: row; gap: 7px; margin-top: 24px; }
    .steps:before, .step-copy small, .sidebar-note { display: none; }
    .step-item { grid-template-columns: 35px 1fr 15px; min-height: 54px; padding: 7px; }
    .step-number { width: 35px; height: 35px; border-radius: 11px; }
    .step-copy strong { font-size: 10px; }
    .installer-content { padding: 28px 25px; }
}

@media (max-width: 650px) {
    body { background: #fff; }
    .installer-shell { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
    .installer-sidebar { border-radius: 0 0 24px 24px; }
    .brand-copy h1 { font-size: 21px; }
    .brand-copy p { display: none; }
    .steps { overflow-x: auto; padding-bottom: 3px; }
    .step-item { min-width: 145px; }
    .installer-content { padding: 25px 18px 30px; }
    .content-header { align-items: flex-start; padding-bottom: 20px; margin-bottom: 22px; }
    .content-header h2 { font-size: 19px; }
    .secure-badge { display: none; }
    .section-heading { display: block; }
    .summary-pill { display: inline-block; margin-top: 12px; }
    .requirement-grid, .form-grid, .success-details { grid-template-columns: 1fr; }
    .permission-box, .license-row { grid-template-columns: 1fr; }
    .panel-actions { flex-wrap: wrap-reverse; }
    .action-hint { width: 100%; text-align: center; }
    .primary-action, .secondary-action { width: 100%; }
    .form-section { padding: 17px 14px; }
    .form-actions { display: grid; grid-template-columns: 1fr; }
    .copy-row { grid-template-columns: 1fr; }
    .copy-row button { min-height: 40px; }
    .success-state h3 { font-size: 19px; }
}

.standalone-success {
    display: block;
    max-width: 820px;
    min-height: 0;
    margin-top: 8vh;
}
.standalone-success .installer-content { padding: 65px 45px; }