@import"https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap";:root{font-family:Cairo,Arial,sans-serif;color:#f2efe8;background:#0d1213;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button,a{cursor:pointer}a{text-decoration:none}.admin{min-height:100vh;background:radial-gradient(circle at 85% 0,#27373a 0,#0d1213 37%);padding:44px clamp(18px,5vw,74px) 70px}.admin-head{max-width:1280px;margin:auto auto 32px;display:flex;justify-content:space-between;align-items:end;gap:24px}.kicker{color:#efb83f;font-size:12px;letter-spacing:.13em}.admin h1{font-size:clamp(30px,5vw,56px);line-height:1.1;margin:12px 0 8px}.admin-head p,.section-head p{color:#94a1a1;margin:0}.outline,.save,.add{display:flex;align-items:center;gap:9px;border-radius:12px;padding:13px 18px;font-weight:800}.outline{border:1px solid #efb83f;color:#efb83f}.workspace{max-width:1280px;margin:auto;display:grid;grid-template-columns:minmax(360px,.9fr) minmax(360px,1.1fr);gap:22px}.controls,.preview,.links{background:#192223;border:1px solid #2d3c3e;border-radius:22px;padding:25px}.links{max-width:1280px;margin:22px auto 0}.section-head{display:flex;gap:14px;align-items:start;border-bottom:1px solid #2b393a;padding-bottom:19px;margin-bottom:20px}.section-head>span{color:#efb83f;border:1px solid #efb83f;border-radius:8px;padding:4px 8px;font-size:12px}.section-head h2{font-size:21px;margin:0 0 4px}.controls{display:grid;gap:15px}label{display:grid;gap:7px;color:#d8ddda;font-size:14px}input,select{width:100%;background:#0e1516;border:1px solid #405052;border-radius:10px;color:#f7f4ed;padding:12px 13px;outline:0}input:focus,select:focus{border-color:#efb83f}.upload{position:relative;border:1px dashed #506263;padding:12px;border-radius:10px;display:flex;align-items:center;justify-content:space-between}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload small{color:#8b9898;margin-right:6px}.color-grid,.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.color-field span{display:flex;align-items:center;background:#0e1516;border:1px solid #405052;border-radius:10px;padding:4px 10px;gap:7px}.color-field input[type=color]{width:35px;height:32px;padding:0;border:0}.color-field code{color:#aab6b4;font-size:12px}.save{background:#efb83f;border:0;color:#151515;justify-content:center}.preview-window{background:#070a0b;border-radius:16px;min-height:575px;display:grid;place-items:center;overflow:hidden}.preview-window .client{width:min(100%,420px);min-height:575px;box-shadow:none}.links .section-head{margin-bottom:18px}.link-editor{display:grid;gap:11px}.link-row{display:grid;grid-template-columns:56px 1fr 1.2fr 1.4fr 40px 36px;gap:8px;align-items:center}.icon-input{text-align:center}.icon-btn{height:45px;border:1px solid #754840;color:#ff9c8d;background:transparent;border-radius:10px}.switch{display:block;position:relative}.switch input{display:none}.switch span{display:block;width:34px;height:20px;background:#354547;border-radius:20px}.switch span:after{content:"";display:block;width:14px;height:14px;margin:3px;background:#9aa6a5;border-radius:50%;transition:.2s}.switch input:checked+span{background:#5b8c69}.switch input:checked+span:after{transform:translate(14px);background:#fff}.add{margin-top:17px;background:transparent;color:#efb83f;border:1px solid #efb83f}.client{--accent:#f05a28;--page-bg:#f8ebde;--ink:#4a2118;--card:#fff9f2;--font:Cairo;direction:rtl;color:var(--ink);font-family:var(--font),Arial,sans-serif;background:var(--page-bg);padding:28px 22px 20px;min-height:100vh}.client-top{display:flex;direction:ltr;justify-content:space-between;align-items:center}.round,.spark{width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--card)}.spark{font-size:23px}.identity{text-align:center;padding:19px 0 27px}.logo{width:118px;height:118px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:auto auto 20px;color:var(--accent);font-size:21px;overflow:hidden}.logo img{width:100%;height:100%;object-fit:contain}.identity h1{color:var(--accent);font:500 clamp(29px,7vw,43px)/1.25 Georgia,serif;margin:0}.identity p{color:var(--accent);font:18px Georgia,serif;margin:8px 0 21px}.socials{display:flex;gap:20px;justify-content:center;color:var(--accent);font-size:28px}.socials a{color:inherit}.client-links{display:grid;gap:15px}.client-link{border:1.5px solid var(--accent);border-radius:var(--radius,22px);background:color-mix(in srgb,var(--card) 80%,transparent);min-height:78px;padding:12px 19px;display:flex;align-items:center;gap:14px;color:var(--accent);transition:.2s}.client-link:hover{transform:translateY(-2px);background:var(--card)}.link-icon{font-size:27px;width:31px;text-align:center}.client-link span:nth-child(2){flex:1;text-align:center}.client-link strong,.client-link small{display:block}.client-link strong{font-size:17px}.client-link small{font-size:12px;opacity:.75;margin-top:2px}.dots{font-size:20px;letter-spacing:2px}.client footer{text-align:center;color:var(--ink);opacity:.62;font-size:12px;padding:35px 0 0}.client footer b{color:var(--accent)}@media(max-width:850px){.admin-head,.workspace{display:grid;grid-template-columns:1fr}.admin-head{align-items:start}.outline{justify-self:start}.link-row{grid-template-columns:45px 1fr 1fr 42px 36px}.link-row input:nth-child(4){grid-column:span 2}.controls,.preview,.links{padding:19px}}@media(max-width:540px){.admin{padding:25px 12px 45px}.color-grid,.select-grid{grid-template-columns:1fr}.link-row{grid-template-columns:42px 1fr 36px}.link-row input:nth-child(2),.link-row input:nth-child(3),.link-row input:nth-child(4){grid-column:span 2}.link-row .icon-btn{grid-column:3;grid-row:1}.link-row .switch{grid-column:3;grid-row:2}}button,a,.upload,.link-icon-upload,.save,.add,.outline,.icon-btn,.round,.spark{transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease,border-color .22s ease}button:hover,a:hover,.upload:hover,.link-icon-upload:hover,.save:hover,.add:hover,.outline:hover,.icon-btn:hover{transform:translateY(-2px)}button:active,a:active{transform:translateY(0) scale(.97)}.socials a{display:grid;place-items:center}.socials img{width:29px;height:29px;object-fit:contain;transition:transform .22s ease}.socials a:hover img{transform:scale(1.16) rotate(-6deg)}.company-signature{font-family:Segoe Script,Brush Script MT,cursive;font-style:italic;font-weight:600;white-space:nowrap}@media(max-width:540px){.company-grid,.company-controls,.company-element-controls{grid-template-columns:1fr}.client .company-footer{gap:9px;padding:11px 8px}.company-meta{gap:6px}}.company-footer .company-signature{font-family:Segoe Script,Brush Script MT,cursive;font-style:italic;font-weight:600;white-space:nowrap}.logo-controls{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:14px;border:1px solid #334446;border-radius:12px;background:#121a1b}.logo-controls label:first-child{grid-column:span 2}.logo-controls small{color:#efb83f;font-size:12px}.logo-controls input[type=range]{padding:0;accent-color:#efb83f;background:transparent;border:0}.client .logo{position:relative;overflow:hidden}.client .logo img{position:absolute;object-fit:contain;flex:none;cursor:grab}.client .draggable-logo{cursor:grab}.client .draggable-logo:active,.client .logo img:active{cursor:grabbing}.link-icon img{width:30px;height:30px;object-fit:contain;display:block;margin:auto}.link-icon-upload{position:relative;width:56px;height:46px;display:grid;place-items:center;border:1px solid #405052;border-radius:10px;background:#0e1516;color:#efb83f;font-size:20px;cursor:pointer;overflow:hidden}.link-icon-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.link-icon-upload img{width:32px;height:32px;object-fit:contain}.company-settings{max-width:1280px;margin:22px auto 0;background:#192223;border:1px solid #2d3c3e;border-radius:22px;padding:25px}.company-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.company-grid .upload{min-height:48px}.company-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px;border:1px solid #334446;border-radius:12px;background:#121a1b}.company-controls input[type=range]{padding:0;accent-color:#efb83f;background:transparent;border:0}.company-controls small{color:#efb83f;font-size:12px}.client .company-footer{display:flex;flex-direction:row;direction:ltr;align-items:center;justify-content:center;gap:14px;margin-top:22px;padding:13px 18px;border-radius:12px;opacity:1}.company-footer img{object-fit:contain;border-radius:10px;flex:0 0 auto}.company-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;direction:rtl}.company-footer strong{color:var(--company-accent);font-size:13px}.company-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;direction:ltr}.company-footer span,.company-footer a{font-size:11px;color:inherit;opacity:.8}.company-footer a{color:var(--company-accent)}.company-signature{font-family:Segoe Script,Brush Script MT,cursive;font-style:italic;font-weight:600;white-space:nowrap}@media(max-width:540px){.company-grid,.company-controls,.company-element-controls,.company-dimension-controls{grid-template-columns:1fr}.client .company-footer{gap:9px;padding:11px 8px}.company-meta{gap:6px}}.client .company-footer{position:relative;display:grid;grid-template-columns:minmax(88px,120px) 1fr;grid-template-rows:72px 22px;min-height:108px;overflow:hidden;align-items:center;text-align:center}.company-brand{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;height:72px;overflow:hidden}.company-brand strong{font-size:11px;line-height:1.1;white-space:nowrap}.company-logo-box{width:100%;height:54px;display:grid;place-items:center;overflow:hidden}.company-logo-box img{max-width:none;max-height:none;object-fit:contain;flex:0 0 auto}.company-info{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;overflow:hidden}.company-info a{font-size:11px}.company-website{grid-column:1/-1;grid-row:2;justify-self:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.company-footer .company-signature{font-family:Segoe Script,Brush Script MT,cursive;font-style:italic;font-weight:600;white-space:nowrap}.company-footer .company-info a,.company-footer .company-website{color:var(--company-accent)}.client .company-footer{grid-template-columns:minmax(150px,190px) 1fr;grid-template-rows:auto auto;min-height:0;margin-inline:auto;padding:12px 18px}.company-brand{height:auto;min-height:98px}.company-logo-box{width:180px;height:84px;overflow:visible}.company-element-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid #334446;border-radius:12px;background:#0e1516}.company-element-controls>strong{grid-column:1/-1;color:#efb83f}.element-position{display:grid;gap:8px;padding:10px;border:1px solid #2d3c3e;border-radius:10px}.element-position b{color:#f7f4ed}.element-position input[type=range]{padding:0;accent-color:#efb83f;background:transparent;border:0}.element-position small{color:#efb83f;font-size:11px}.company-dimension-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid #334446;border-radius:12px;background:#0e1516}.company-dimension-controls>strong{grid-column:1/-1;color:#efb83f}.company-dimension-controls input[type=range]{padding:0;accent-color:#efb83f;background:transparent;border:0}.company-dimension-controls small{color:#efb83f;font-size:11px}.client .company-footer,.company-info{overflow:visible}.company-info .company-signature{display:block;overflow:visible;max-width:none}.client .socials{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;width:100%;max-width:100%;padding-inline:8px;overflow:visible}.client .socials a{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center}.client .socials img{width:29px;height:29px;max-width:29px;max-height:29px}.workspace{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}.workspace>*{min-width:0}.workspace>.preview{grid-column:1;grid-row:1 / span 3;position:sticky;top:18px;height:min(760px,calc(100vh - 36px));max-height:calc(100vh - 36px);min-width:0;overflow:hidden;z-index:2}.workspace>.controls,.workspace>.links,.workspace>.company-settings{grid-column:2;min-width:0;width:100%;margin:0}.workspace>.controls{grid-row:1}.workspace>.links{grid-row:2}.workspace>.company-settings{grid-row:3}.preview-window{width:min(100%,430px);height:calc(100% - 86px);min-height:0;padding:16px 12px;display:flex;justify-content:center;align-items:flex-start;margin-inline:auto;overflow-x:hidden;overflow-y:auto}.preview-window .client{flex:0 0 auto;width:393px;min-height:0;height:auto;max-width:none;transform:none;box-shadow:none}.controls,.preview,.links,.company-settings{overflow:hidden}@media(max-width:850px){.workspace{grid-template-columns:minmax(0,1fr)}.workspace>.preview,.workspace>.controls,.workspace>.links,.workspace>.company-settings{grid-column:1;grid-row:auto;position:relative;top:auto}.workspace>.preview{order:-1}.preview-window .client{width:min(100%,420px);height:auto;transform:none}}
