/* إضافات موقع «الطيب إديو» فوق site.css */
.switch{display:inline-flex;gap:4px;padding:4px;border-radius:16px;background:rgba(17,23,55,.75);border:1px solid var(--line2);margin-bottom:18px}
.switch button{all:unset;cursor:pointer;padding:9px 16px;border-radius:12px;font:700 14.5px var(--display);color:var(--muted);transition:background .2s,color .2s}
.switch button[aria-selected="true"],.switch button[aria-checked="true"]{background:var(--btn);color:#fff;box-shadow:var(--glow)}
.switch button:focus-visible{outline:2px solid #67E8F9;outline-offset:2px}
.switch.small button{padding:7px 14px;font-size:13.5px}
.center-sw{display:flex;width:max-content;margin:0 auto 26px}
.hero h1{min-height:2.5em}

.roles{padding:18px 0 0}
.roles-in{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.role{padding:14px 12px;border-radius:16px;background:rgba(17,23,55,.72);border:1px solid var(--line);text-align:center}
.role i{font-style:normal;font-size:24px;display:block}
.role b{display:block;font:800 14.5px var(--display);margin:4px 0 2px}
.role small{color:var(--faint);font-size:12px;line-height:1.5;display:block}

.comp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.comp .card{padding:18px 18px 16px}
.comp h3{font-size:16.5px;display:flex;gap:10px;align-items:center}
.comp h3 span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--btn);color:#fff;font-size:16px;flex:none}
.comp p{color:var(--muted);font-size:14px;margin:0}

.plans{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.plan .per{color:var(--muted);font-size:14px}
.plan .price{font-size:40px}

.signup{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;padding:30px;box-shadow:var(--glow)}
.su-side p{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:0}.ticks li{padding:6px 0;color:var(--muted)}.ticks li:before{content:'✓';color:var(--emerald);font-weight:900;margin-inline-end:8px}
.field{margin-bottom:12px}
.field label{display:block;font:700 13.5px var(--display);color:var(--muted);margin-bottom:5px}
.field input,.field select{width:100%;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(6,9,25,.55);color:var(--text);font:500 15px var(--body)}
.field input:focus,.field select:focus{outline:2px solid #6366F1;outline-offset:0;border-color:transparent}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.btn.wide{width:100%}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;opacity:0;pointer-events:none}
.err{color:#FDA4AF;background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.35);padding:8px 12px;border-radius:12px;font-size:14px}
.fine{color:var(--faint);font-size:12px;margin:10px 0 0}
.done{text-align:center;padding:10px 0}
.done .code{font:900 34px var(--display);letter-spacing:4px;direction:ltr;padding:10px 18px;border-radius:16px;background:rgba(99,102,241,.12);border:1px dashed var(--line2);display:inline-block;margin:8px 0}
.done dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;text-align:start;max-width:420px;margin:14px auto;color:var(--muted)}
.done dt{font-weight:700;color:var(--text)}
.dl-btns{display:flex;gap:10px;flex-wrap:wrap}
.dl .btn[aria-disabled="true"]{opacity:.65}
.alert-row{border-color:rgba(244,63,94,.5)!important;box-shadow:0 0 18px -6px rgba(244,63,94,.6)}
.tag-s{display:inline-block;font-size:10.5px;padding:0 7px;border-radius:6px;margin-inline-start:4px}
.t-ok{background:rgba(16,185,129,.18);color:#6EE7B7}.t-bad{background:rgba(244,63,94,.18);color:#FDA4AF}.t-mid{background:rgba(245,158,11,.18);color:#FDE68A}

[data-theme="light"] .switch{background:rgba(255,255,255,.9)}
[data-theme="light"] .role{background:rgba(255,255,255,.88)}
[data-theme="light"] .field input,[data-theme="light"] .field select{background:#fff}
[data-theme="light"] .err{color:#9F1239}

@media(max-width:960px){.roles-in{grid-template-columns:repeat(3,1fr)}.comp{grid-template-columns:1fr 1fr}.signup{grid-template-columns:1fr;padding:20px}}
@media(max-width:560px){.roles-in{grid-template-columns:repeat(2,1fr)}.comp{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.switch{display:flex}.switch button{flex:1;text-align:center}.dl-btns{flex-direction:column;width:100%}}