:root{--ec-deep:#063f35;--ec-deeper:#042f29;--ec-gold:#c89a3c;--ec-ink:#153c34;--ec-muted:#71807a;--ec-line:#dfe7e3;--ec-bg:#eef3f1;--ec-glass:rgba(255,255,255,.78);--ec-shadow:0 18px 55px rgba(13,54,45,.10)}
html{scroll-behavior:smooth}body{position:relative;isolation:isolate;background:var(--ec-bg)}body:before,body:after{content:"";position:fixed;z-index:-2;pointer-events:none;border-radius:50%;filter:blur(3px);opacity:.55;animation:ecFloat 14s ease-in-out infinite alternate}body:before{width:360px;height:360px;top:-150px;left:-120px;background:radial-gradient(circle,rgba(200,154,60,.18),transparent 68%)}body:after{width:420px;height:420px;right:-180px;bottom:-190px;background:radial-gradient(circle,rgba(6,63,53,.16),transparent 68%)}
@keyframes ecFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(20px,14px,0) scale(1.06)}}
button,.btn,input,select,textarea{transition:box-shadow .22s ease,border-color .22s ease,background .22s ease,transform .22s ease,filter .22s ease}.btn{box-shadow:0 5px 14px rgba(7,48,40,.05)}.btn:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(7,48,40,.11)}.btn:active{transform:translateY(0) scale(.98)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ec-gold)!important;box-shadow:0 0 0 4px rgba(200,154,60,.12)}
.card,.panel,.group,.box,.sectionItem,.sectionEditor{box-shadow:var(--ec-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.card:hover,.panel:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(13,54,45,.14)}
/* Dashboard */
.app{position:relative}.side{background:linear-gradient(165deg,#073f35 0%,#052f29 65%,#09251f 100%)!important;box-shadow:12px 0 35px rgba(2,35,29,.14);position:relative;overflow:hidden}.side:before{content:"";position:absolute;inset:-40% -60% auto auto;width:280px;height:280px;background:radial-gradient(circle,rgba(200,154,60,.18),transparent 65%);animation:ecFloat 10s ease-in-out infinite alternate}.brand{position:relative;z-index:1}.nav button{position:relative;overflow:hidden}.nav button:after{content:"";position:absolute;right:0;top:0;width:3px;height:100%;background:var(--ec-gold);transform:scaleY(0);transition:transform .25s ease}.nav button:hover:after,.nav button.active:after{transform:scaleY(1)}.nav button.active{background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.035))!important}.top{padding:14px 18px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border-radius:18px;box-shadow:0 12px 35px rgba(13,54,45,.08)}.cards .card{position:relative;overflow:hidden}.cards .card:before{content:"";position:absolute;left:-35px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:rgba(200,154,60,.08)}.num{letter-spacing:.5px}.table tbody tr{transition:background .18s ease,transform .18s ease}.table tbody tr:hover{background:#f7faf9;transform:translateX(-2px)}
/* Generic internal pages */
main,.main{position:relative}.group h3,.panel h2{letter-spacing:-.2px}.group>h3:before,.panel h2:before{content:"";display:inline-block;width:4px;height:18px;border-radius:8px;background:var(--ec-gold);vertical-align:-3px;margin-left:8px}.notice{border:1px solid rgba(200,154,60,.2);box-shadow:0 8px 24px rgba(200,154,60,.06)}
/* Template library */
.cards{gap:18px}.cards .card{border-radius:18px}.badge{transition:transform .18s ease}.card:hover .badge{transform:translateY(-1px)}
/* Document editor */
.bar{background:linear-gradient(90deg,#042f29,#063f35 55%,#0b5749)!important;box-shadow:0 8px 28px rgba(3,38,31,.22);position:relative;z-index:50}.bar:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--ec-gold),transparent);opacity:.7}.previewPane{background:radial-gradient(circle at 50% 0,#eef3f1 0,#dfe7e4 48%,#d6dfdc 100%)!important}.controls{box-shadow:-12px 0 35px rgba(9,50,42,.08);background:rgba(255,255,255,.92)!important;backdrop-filter:blur(10px)}.editorIntro{box-shadow:0 14px 34px rgba(5,55,45,.18);position:relative;overflow:hidden}.editorIntro:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;left:-80px;top:-110px;background:rgba(255,255,255,.08);animation:ecFloat 8s ease-in-out infinite alternate}.qbtn{box-shadow:0 5px 15px rgba(8,51,43,.05)}.qbtn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(8,51,43,.10)}.sectionItem{position:relative}.sectionItem.active{box-shadow:0 8px 25px rgba(200,154,60,.14)!important}.page{transition:transform .2s ease,box-shadow .25s ease}.page:hover{box-shadow:0 12px 38px rgba(0,0,0,.18)}
/* Login */
.login-card,.loginBox,.login{animation:ecIn .55s cubic-bezier(.2,.8,.2,1) both}@keyframes ecIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
/* reduced motion */
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:900px){.top{border-radius:14px}.cards .card:hover,.panel:hover{transform:none}}
/* V51 — RTL premium navigation: sidebar is permanently on the RIGHT */
.app{grid-template-columns:minmax(0,1fr) 250px!important;direction:rtl!important}
.app>.side{grid-column:2;grid-row:1;direction:rtl!important;box-shadow:-12px 0 35px rgba(2,35,29,.14)!important;position:sticky;right:0;top:0;height:100vh;z-index:100}
.app>.main{grid-column:1;grid-row:1;direction:rtl!important;min-width:0}
@media(max-width:900px){.app{grid-template-columns:1fr!important}.app>.side{grid-column:1;grid-row:auto;position:relative;height:auto;display:none}.app>.main{grid-column:1;grid-row:1}}