@font-face{font-family:XtraArabic;src:url(assets/fonts/arabic-400.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:XtraArabic;src:url(assets/fonts/arabic-500.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:XtraArabic;src:url(assets/fonts/arabic-600.ttf) format('truetype');font-weight:600;font-display:swap}
:root{color-scheme:light;--ink:#282c30;--muted:#767675;--line:#eae7e2;--paper:#fff;--teal:#b8402f;--teal-dark:#963222;--soft:#fbefeb;--nav:#fff;--red:#b8402f}
body{font-family:XtraArabic,Arial,sans-serif;font-size:14px;background:#fff}
button:focus-visible,a:focus-visible{outline-color:var(--teal)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #b8402f12}
.button{border-radius:7px;text-decoration:none;font-size:13px}.primary{box-shadow:none}.small{font-size:12px}
.brand{width:185px;flex-shrink:0;display:block;overflow:hidden;height:76px;letter-spacing:0}
.brand img{width:185px;height:auto;display:block}.brand-light{color:var(--ink)}
.app-shell{display:block}.sidebar{height:94px;position:static;display:flex;flex-direction:row;align-items:center;gap:38px;background:#fff;color:var(--ink);padding:0 max(36px,calc((100vw - 1320px)/2));border-bottom:1px solid var(--line)}
.sidebar .brand{padding:0}.nav-label,.sidebar-bottom,.nav-icon{display:none}
.sidebar nav{height:100%;flex-direction:row;align-items:stretch;gap:28px;min-width:0}
.nav-item{position:relative;width:auto;white-space:nowrap;border-radius:0;background:transparent;color:var(--muted);padding:0 0;font-size:13px;gap:9px}
.nav-item:hover{background:transparent;color:var(--ink)}.nav-item.active{background:transparent;color:var(--ink);font-weight:600}
.nav-item.active:after{content:"";position:absolute;bottom:-1px;inset-inline:0;height:3px;background:var(--teal)}
.nav-count{margin:0;background:#f4f1eb;color:#847b70;font-size:10px;border-radius:4px;padding:1px 5px}
.topbar{height:54px;padding:0 max(36px,calc((100vw - 1280px)/2));border-bottom:0;font-size:11px}
.top-actions{gap:15px}.avatar{background:#f3eee7;color:#6e5348;font-family:Georgia,serif;font-size:17px;border:1px solid #e8ded4}.webmail-link{color:var(--teal);text-decoration:none;font-weight:500;white-space:nowrap}
.main-content{max-width:1360px;padding:40px 40px 0;margin:auto}
.page-heading{margin-bottom:32px}.page-heading h1{font-size:42px;font-weight:500;letter-spacing:-1px;line-height:1.5}.page-heading p{font-size:13px;margin-top:9px}.page-heading .eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--teal)}
.page-heading>.button{padding:12px 23px;min-height:46px}
.stats-grid{border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:0;margin-bottom:36px}
.stat{border:0;border-radius:0;background:#fff;display:grid;grid-template-columns:1fr auto;padding:21px 25px;gap:0 16px;align-items:center}
.stat:first-child{padding-right:0}.stat:last-child{padding-left:0}.stat+.stat{border-right:1px solid var(--line)}
.stat>span{font-size:12px;color:var(--muted)}.stat strong{font-size:27px;font-weight:500;grid-column:2;grid-row:1 / 3;color:var(--ink)}.stat small{font-size:10px;color:#9a9690}
.panel{border-radius:0;border-color:var(--line)}.panel-toolbar{padding:20px 22px}.panel-title h2{font-size:15px;font-weight:500}.filters input,.filters select{background:#faf9f7;font-size:12px}.filters input{width:260px}
th{background:#faf9f7;color:#918b84;font-size:11px;font-weight:400;padding:15px 23px}td{padding:26px 23px;border-color:var(--line)}
tr:hover td{background:#fdfcf9}.mail-avatar{background:#f5efe7;color:#8e6048;font-family:Georgia,serif;border-radius:50%;font-size:18px;width:40px;height:40px;border:1px solid #ede2d4}
.email-text strong{font-size:14px;font-weight:500}.email-text small{color:#96938c;font-size:10px}.email-cell{gap:15px}.domain-pill{background:#f8f6f2;border-color:#eee9e1;color:#82796d;border-radius:4px;font-size:11px}.quota-text{font-size:12px}.row-actions .button{font-size:11px;padding:7px 11px}
.count-label{background:#f5f2ec;color:#8d8377}.badge{border-radius:5px}.badge.neutral{background:#f4f2ed;color:#7f796e}
.note-row{background:#fff;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0;color:var(--muted);font-size:12px}.note-icon{border-color:#b4aea4}.page-footer{color:#96928a}
.domain-grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.domain-card{display:grid;grid-template-columns:45px minmax(150px,1fr) 130px auto;align-items:center;gap:20px;border:0;border-bottom:1px solid var(--line);padding:26px 8px;overflow:visible}
.domain-card .card-top{display:contents}.domain-card .card-symbol{grid-column:1;grid-row:1 / 3;background:#f7f4ee;color:#85745e;border-radius:50%;font-size:20px}.domain-card .card-top .badge{grid-column:3;grid-row:1 / 3;justify-self:start}
.domain-card h2{grid-column:2;grid-row:1;margin:0;font-size:18px;font-weight:500}.domain-card p{grid-column:2;grid-row:2;font-size:11px;margin-top:-14px}.domain-card .card-bottom{grid-column:4;grid-row:1 / 3;margin:0;gap:9px}
.settings-card,.connection-card,.help-panel{border-radius:8px}.connection-card .card-symbol{border-radius:8px}.cf-permissions{background:#faf9f7}.dns-record textarea,.dns-record pre,.cf-change pre{background:#faf9f7}
dialog{border-radius:12px;box-shadow:0 25px 90px #282c3024}dialog::backdrop{background:#242a304f;backdrop-filter:blur(2px)}
.toast{background:#343731;border-radius:7px}.toast.error{background:#963222}
.login-screen{max-width:1180px;margin:auto;grid-template-columns:1.1fr 1fr;min-height:100vh}.login-story{background:#fff;color:var(--ink);padding:50px 55px}.login-story:after{display:none}.login-story h1{font-size:50px;font-weight:500;letter-spacing:-1px}.login-story p{color:var(--muted);font-size:16px}.login-story .eyebrow{color:var(--teal);font-size:12px;letter-spacing:0}.story-foot{color:#99938b;border-top:1px solid var(--line);padding-top:24px}.dot{background:#74a488}.login-form-wrap{padding:55px}.login-form h2{font-weight:500}.login-form input{height:49px;border-radius:7px}.login-note{font-size:12px;color:var(--muted);line-height:2}.login-note a{color:var(--teal);text-decoration:none;font-weight:500}
@media(max-width:1150px){.sidebar{gap:25px;padding:0 24px}.sidebar nav{gap:20px}.nav-item{font-size:12px}.brand,.brand img{width:155px}.main-content{padding:30px 26px 0}.domain-card{grid-template-columns:40px minmax(120px,1fr) auto;gap:15px}.domain-card .card-top .badge{grid-column:3;grid-row:1}.domain-card .card-bottom{grid-column:2 / 4;grid-row:3}.domain-card p{margin:0}.topbar{padding:0 26px}}
@media(max-width:760px){
 .sidebar{height:auto;display:block;padding:0 20px}.sidebar .brand{height:67px;margin:0}.sidebar nav{display:flex;overflow-x:auto;gap:24px;height:49px;padding-bottom:0}.nav-item{flex-direction:row;font-size:12px;gap:6px;min-width:max-content;padding:0 0 12px}.nav-count{display:inline}.topbar{height:57px;padding:0 20px}.topbar>span{display:none}.top-actions{width:100%;justify-content:space-between;gap:10px}.top-actions .avatar{display:none}.webmail-link{font-size:11px}
 .main-content{padding:24px 20px 0}.page-heading h1{font-size:31px}.page-heading p{font-size:12px;max-width:225px}.page-heading>.button{font-size:11px;padding:9px 12px;min-height:41px;margin-top:15px}
 .stats-grid{margin-bottom:24px}.stat{display:flex;flex-direction:column;align-items:flex-start;padding:15px 12px;gap:5px}.stat>span{font-size:10px;min-height:34px}.stat strong{font-size:24px}.stat small{font-size:8px;line-height:1.8}.stat:first-child{padding-right:0}.stat:last-child{padding-left:0}
 .filters input{min-width:0;width:120px}.panel-toolbar{padding:18px 15px}.email-text strong{font-size:12px}td,th{padding:18px 15px}.note-row{font-size:10px}.domain-card{padding:24px 0;gap:12px}.domain-card h2{font-size:16px}.domain-card .card-bottom .button{font-size:11px;padding:8px 12px}
 .login-screen{display:block}.login-story{min-height:260px;padding:15px 28px 25px}.login-story h1{font-size:33px}.login-story p{font-size:13px}.login-story .eyebrow{display:block;margin-top:15px;font-size:10px}.login-form-wrap{padding:20px 28px 40px}.login-form>p.muted{margin-bottom:22px}
}
.sidebar nav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:24px}
.sidebar nav::-webkit-scrollbar{display:none}
.limited-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.customer-cell{display:flex;flex-direction:column;gap:5px;min-width:170px;white-space:normal;line-height:1.6}
.customer-cell strong{font-weight:500;color:var(--ink)}
.customer-cell small,.operator-username{color:var(--muted);font-size:11px}
.customer-mobile{align-self:flex-start;font-size:12px;font-family:Arial,sans-serif}
#mail-table .row-actions{flex-wrap:wrap;max-width:215px;gap:7px}
#mail-table .row-actions .button{padding:8px 11px;font-size:11px;white-space:nowrap}
.form-section-title{font-size:16px;font-weight:500;border-top:1px solid var(--line);padding-top:22px;margin:22px 0 0}
.customer-form-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:16px}
.domain-choices{border:1px solid var(--line);border-radius:7px;margin:23px 0 10px;padding:8px 16px 15px;max-height:230px;overflow:auto}
.domain-choices legend{padding:0 7px;font-size:13px}
#dialog-fields .domain-choice{display:flex;align-items:center;gap:10px;margin:12px 0 0;cursor:pointer;line-height:1.7}
.domain-choice input[type=checkbox]{width:18px;height:18px;min-height:0;flex-shrink:0;accent-color:var(--teal);margin:0;padding:0}
.domain-choice span{overflow-wrap:anywhere}
.operator-username{display:block;margin-top:6px}
.operator-domain-list{max-width:370px;white-space:normal}
.operator-domain-list .domain-pill{display:inline-block;margin:4px 0 4px 8px}
#view-operators .empty{padding:45px 24px 50px}
#view-operators .table-scroll{overflow-x:auto}
@media(max-width:760px){
 .customer-form-grid{grid-template-columns:1fr;gap:0}
 #mail-table td.customer-column{grid-column:1 / -1;align-self:start}
 #mail-table td:last-child{grid-column:auto}
 #mail-table td:has(.row-actions){grid-column:1 / -1}
 #mail-table .customer-cell{border-inline-start:2px solid var(--line);padding-inline-start:13px;margin:2px 0 4px}
 #view-operators .panel-toolbar{align-items:flex-start;gap:10px;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){
 .sidebar nav{overflow-y:hidden;scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}
 #view-mailboxes .table-scroll{overflow:visible}#view-mailboxes table,#mail-table{display:block;width:100%}#view-mailboxes thead{display:none}
 #mail-table tr{display:grid;grid-template-columns:1fr auto;gap:14px 10px;padding:20px 17px;border-top:1px solid var(--line)}
 #mail-table td{display:block;padding:0;border:0;white-space:normal;background:transparent}
 #mail-table td:first-child{grid-column:1 / -1}#mail-table td:nth-child(2){align-self:center}#mail-table td:last-child{grid-column:1 / -1}
 #mail-table .email-text strong{font-size:14px}#mail-table .row-actions{gap:9px}#mail-table .row-actions .button{min-height:36px;flex:1}
}
@media(max-width:760px){#mail-table td:last-child{grid-column:auto}#mail-table td:has(.row-actions){grid-column:1 / -1}}
#edit-dialog{padding:0;overflow:hidden;width:min(520px,calc(100vw - 28px))}
#edit-form{display:flex;flex-direction:column;max-height:90vh}
#edit-form .dialog-head{padding:22px 28px 10px;margin:0;flex-shrink:0}
#dialog-description{padding:0 28px 14px;flex-shrink:0}
#dialog-fields{min-height:0;overflow-y:auto;padding:0 28px 12px;overscroll-behavior:contain}
#dialog-error{padding:0 28px;margin:0;flex-shrink:0}
#edit-form .dialog-actions{margin:0;padding:18px 28px;border-top:1px solid var(--line);flex-shrink:0}
@media(max-width:760px){#edit-form .dialog-head,#dialog-description,#dialog-fields,#dialog-error,#edit-form .dialog-actions{padding-inline:22px}}
.integration-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:30px}.integration-intro h2{font-size:24px;font-weight:500;margin:10px 0}.integration-intro code{display:block;font-size:12px;margin-top:15px;overflow-wrap:anywhere}.integration-downloads{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center}
#integration-domains .domain-choice{display:flex;align-items:center;gap:10px;margin:12px 0 0;cursor:pointer;line-height:1.7}
.integration-row{padding:24px;border-top:1px solid var(--line)}.integration-row-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:18px}.integration-row-head>div:first-child{display:flex;align-items:center;gap:14px}.integration-row h3{font-size:18px;font-weight:500;margin:0}.integration-row p{margin-top:16px}.integration-keys{margin-top:18px}.integration-keys summary{cursor:pointer;color:var(--teal);padding-block:8px}.integration-key-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}.integration-key-row .text-button{margin-inline-start:auto}
#integration-dialog{padding:0;overflow:hidden;width:min(550px,calc(100vw - 28px))}#integration-form{display:flex;flex-direction:column;max-height:90vh}#integration-form .dialog-head{padding:22px 28px 10px;margin:0;flex-shrink:0}.integration-fields{overflow-y:auto;min-height:0;padding:0 28px 12px}#integration-form .dialog-actions{padding:18px 28px;margin:0;border-top:1px solid var(--line)}#integration-secret{font-family:monospace;width:100%;resize:none;overflow-wrap:anywhere;margin-bottom:18px}
@media(max-width:760px){.integration-intro,.integration-row-head{align-items:stretch;flex-direction:column}.integration-downloads{justify-content:flex-start}.integration-row{padding:20px 16px}.integration-key-row{gap:10px 16px}.integration-fields,#integration-form .dialog-head,#integration-form .dialog-actions{padding-inline:22px}}