@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--navy:#101827;--navy2:#172337;--gold:#d5ad63;--gold2:#f0d8a4;--ink:#202a3b;--muted:#778196;--line:#e8ebf0;--bg:#f4f6f9;--white:#fff;--green:#1b9a73;--red:#d95362;--blue:#4778d0;--shadow:0 8px 30px #18283d0a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Cairo',Tahoma,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}.loading{padding:60px;text-align:center}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 10% 10%,#29364d,var(--navy) 65%)}.login-card{width:min(440px,100%);background:#fff;border-radius:24px;padding:36px;box-shadow:0 24px 80px #0003}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:48px;height:48px;border-radius:15px;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-size:23px;font-weight:900}.brand-name{font-size:23px;font-weight:800}.brand-sub{font-size:11px;color:var(--muted);letter-spacing:2px}.login-card h1{font-size:23px;margin:28px 0 6px}.muted{color:var(--muted)}.field{display:flex;flex-direction:column;gap:6px;margin:13px 0}.field label{font-weight:700;font-size:12px}.field input,.field select,.field textarea,.search{border:1px solid #dfe4ec;border-radius:10px;background:#fff;padding:11px 12px;outline:none;width:100%;min-width:0}.field input:focus,.field select:focus,.field textarea:focus,.search:focus{border-color:var(--gold);box-shadow:0 0 0 3px #d5ad6320}.btn{border:0;border-radius:10px;padding:10px 15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn-primary{background:var(--navy);color:#fff}.btn-gold{background:var(--gold);color:var(--navy)}.btn-soft{background:#f0f2f6;color:var(--ink)}.btn-danger{background:#fff0f1;color:var(--red)}.btn:disabled{opacity:.45;cursor:not-allowed}.full{width:100%}.error{color:var(--red);font-size:12px;margin-top:10px}.app-layout{display:grid;grid-template-columns:245px 1fr;min-height:100vh}.sidebar{background:var(--navy);color:#fff;padding:22px 14px;display:flex;flex-direction:column;gap:22px}.sidebar .brand-name{color:#fff}.sidebar .brand-sub{color:#a7b0c0}.nav-label{font-size:10px;color:#8390a5;padding:0 13px;margin-bottom:5px;letter-spacing:1px}.nav{display:flex;flex-direction:column;gap:5px}.nav button{border:0;background:transparent;color:#b9c2d1;text-align:right;border-radius:10px;padding:11px 13px;display:flex;gap:12px;align-items:center}.nav button:hover,.nav button.active{background:#27344a;color:var(--gold2)}.nav-icon{width:22px;text-align:center;font-size:17px}.side-bottom{margin-top:auto;border-top:1px solid #344056;padding-top:15px}.user-mini{display:flex;align-items:center;gap:10px;padding:10px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e7d3a7;color:#283247;font-weight:800;flex-shrink:0}.user-mini .muted{color:#aeb8c7;font-size:11px}.main{min-width:0}.topbar{background:#fff;border-bottom:1px solid var(--line);height:76px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:14px}.top-title{font-weight:800;font-size:19px}.top-right{display:flex;align-items:center;gap:12px}.content{padding:28px;max-width:1600px;margin:auto}.page-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px;flex-wrap:wrap}.page-head h1{margin:0;font-size:23px}.page-head p{margin:3px 0 0;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--shadow)}.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.stat-icon{background:#f7f0e1;color:#98763b;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px}.stat-value{font-size:27px;font-weight:800;margin:10px 0 2px}.stat-foot{font-size:11px;color:var(--muted)}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}.panel-head{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.panel-head h3{margin:0;font-size:15px}.panel-body{padding:20px}.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:700px}th,td{text-align:right;padding:13px 16px;border-bottom:1px solid #edf0f4;white-space:nowrap}th{background:#fafbfc;color:#778196;font-size:11px;font-weight:700}td{font-size:12px}tbody tr:hover{background:#fcfcfd}tbody tr:last-child td{border-bottom:0}.pill{display:inline-flex;border-radius:30px;padding:4px 9px;font-size:10px;font-weight:700;background:#edf1f7;color:#5a667a}.pill.green{background:#e4f7ef;color:#16845f}.pill.red{background:#fff0f1;color:#c54555}.pill.gold{background:#fbf1d9;color:#99732d}.pill.blue{background:#eaf1ff;color:#3d67ba}.filters{display:flex;gap:9px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}.filters .search{max-width:280px}.filters select{border:1px solid #dfe4ec;border-radius:10px;padding:9px;background:#fff}.empty{text-align:center;color:var(--muted);padding:45px 15px}.empty-icon{font-size:30px;margin-bottom:8px}.bar-row{display:grid;grid-template-columns:105px 1fr 42px;align-items:center;gap:12px;margin:14px 0;font-size:12px}.bar-track{height:8px;border-radius:20px;background:#edf0f5;overflow:hidden}.bar-fill{height:100%;background:var(--gold);border-radius:20px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick{border:1px solid var(--line);border-radius:12px;background:#fff;padding:15px;text-align:right;display:flex;gap:11px;align-items:center}.quick:hover{border-color:var(--gold)}.quick-icon{width:38px;height:38px;background:#f8f2e6;border-radius:11px;display:grid;place-items:center;font-size:18px}.quick strong{display:block}.quick small{color:var(--muted)}.overlay{position:fixed;inset:0;background:#10182780;z-index:20;display:grid;place-items:center;padding:20px}.modal{background:#fff;border-radius:18px;width:min(650px,100%);max-height:90vh;overflow:auto;box-shadow:0 25px 90px #0003}.modal-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0;font-size:18px}.modal-body{padding:22px 24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.span-2{grid-column:span 2}.modal-foot{padding:15px 24px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-start}.toast{position:fixed;bottom:24px;left:24px;z-index:50;padding:13px 20px;border-radius:12px;background:#172337;color:white;box-shadow:0 8px 35px #0002}.toast.bad{background:#a93442}.menu-toggle{display:none}.hint{background:#fff9e9;border:1px solid #f1e2bd;padding:12px 14px;border-radius:10px;font-size:12px;color:#79602c;margin-bottom:15px}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.app-layout{grid-template-columns:210px 1fr}.content{padding:22px}.grid-2{grid-template-columns:1fr}}
@media(max-width:760px){.app-layout{display:block}.sidebar{position:fixed;z-index:15;inset:0 0 0 auto;width:270px;transform:translateX(110%);transition:transform .2s;box-shadow:-10px 0 30px #0002}.sidebar.open{transform:translateX(0)}.menu-toggle{display:inline-flex}.topbar{height:66px;padding:0 15px}.content{padding:17px 13px}.stats{gap:9px}.stat{padding:13px}.stat-value{font-size:22px}.stat-top{font-size:11px}.quick-grid{grid-template-columns:1fr}.page-head h1{font-size:20px}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.login-card{padding:26px}.top-title{font-size:16px}.top-right .hide-mobile{display:none}}

/* NASIAH modern motion system */
:root{--navy:#10182b;--navy2:#18253e;--gold:#d9b56f;--gold2:#f5dfae;--bg:#f3f5fa;--line:#e5e9f1;--shadow:0 12px 35px rgba(21,35,62,.065);--shadow-hover:0 20px 45px rgba(21,35,62,.12)}
html{scroll-behavior:smooth}body{background:radial-gradient(ellipse at 90% 0%,rgba(217,181,111,.10),transparent 32%),var(--bg);-webkit-font-smoothing:antialiased}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease}
#app{min-height:100vh}.loading{min-height:100vh;display:grid;place-items:center;color:var(--navy);font-weight:800;position:relative}.loading:after{content:"";width:28px;height:28px;border:3px solid #e8dfcb;border-top-color:var(--gold);border-radius:50%;animation:nasia-spin .8s linear infinite;margin-right:10px;display:inline-block;vertical-align:middle}
@keyframes nasia-spin{to{transform:rotate(360deg)}}@keyframes nasia-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes nasia-fade{from{opacity:0}to{opacity:1}}@keyframes nasia-slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}@keyframes nasia-glow{0%,100%{box-shadow:0 0 0 0 #d9b56f00}50%{box-shadow:0 0 0 7px #d9b56f15}}
.login-wrap{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 18%,#34445f 0,transparent 32%),radial-gradient(circle at 85% 85%,#493e2e 0,transparent 30%),linear-gradient(135deg,#0c1425,#17243a 60%,#101827)}.login-wrap:before,.login-wrap:after{content:"";position:absolute;border:1px solid #ffffff12;border-radius:50%;width:430px;height:430px;pointer-events:none;animation:nasia-float 12s ease-in-out infinite}.login-wrap:before{top:-230px;right:-90px}.login-wrap:after{bottom:-280px;left:-100px;width:520px;height:520px;animation-delay:-5s}@keyframes nasia-float{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(12px,-18px,0) rotate(7deg)}}
.login-card{position:relative;z-index:1;border:1px solid #ffffff80;box-shadow:0 30px 90px #0005;animation:nasia-rise .65s cubic-bezier(.2,.75,.25,1) both}.brand-mark{position:relative;overflow:hidden;background:linear-gradient(135deg,#f3d99f,#c59a4d);box-shadow:0 8px 20px #d5ad6333;transition:transform .3s ease}.brand:hover .brand-mark{transform:rotate(-7deg) scale(1.05)}.brand-name{letter-spacing:-.5px}.brand-sub{letter-spacing:1.5px}
.app-layout{grid-template-columns:258px minmax(0,1fr);gap:0}.sidebar{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(165deg,#111a2d 0%,#17243a 58%,#101827 100%);padding:25px 15px;box-shadow:8px 0 35px #1118270b}.sidebar:before{content:"";position:absolute;z-index:-1;top:-100px;right:-120px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#d9b56f20,transparent 70%);pointer-events:none}.sidebar .brand{padding:0 7px 9px}.sidebar .brand-mark{background:linear-gradient(135deg,#f1dba7,#c89e55)}.nav{gap:7px}.nav-label{margin-top:8px;margin-bottom:8px;letter-spacing:1.3px}.nav button{position:relative;overflow:hidden;border:1px solid transparent;border-radius:12px;padding:12px 13px;transition:all .23s cubic-bezier(.2,.75,.25,1)}.nav button:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#d9b56f0c,transparent);opacity:0;transition:opacity .25s}.nav button:hover{transform:translateX(-3px);background:#ffffff0b;color:#fff}.nav button:hover:before,.nav button.active:before{opacity:1}.nav button.active{background:linear-gradient(100deg,#d9b56f22,#d9b56f0b);border-color:#d9b56f30;color:var(--gold2);box-shadow:inset -3px 0 0 var(--gold)}.nav-icon{transition:transform .25s ease}.nav button:hover .nav-icon{transform:scale(1.12)}.side-bottom{border-color:#ffffff17}.user-mini{border-radius:13px;transition:background .2s}.user-mini:hover{background:#ffffff08}.avatar{box-shadow:0 3px 12px #10182710;transition:transform .25s ease}.avatar:hover{transform:scale(1.06)}
.main{min-height:100vh}.topbar{position:sticky;top:0;z-index:10;background:#ffffffdf;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #e5e9f1b8;box-shadow:0 5px 25px #17233705}.top-title{letter-spacing:-.35px}.content{padding:30px;animation:nasia-fade .35s ease both}.page-head{animation:nasia-rise .42s ease both}.page-head h1{letter-spacing:-.5px}.page-head p{line-height:1.8}
.stat,.panel,.quick{border-radius:18px;border-color:#e6eaf2;box-shadow:var(--shadow);transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,border-color .28s ease}.stat{position:relative;overflow:hidden;animation:nasia-rise .5s ease both}.stat:nth-child(2){animation-delay:.05s}.stat:nth-child(3){animation-delay:.1s}.stat:nth-child(4){animation-delay:.15s}.stat:after{content:"";position:absolute;inset:auto -35px -55px auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#d9b56f12,transparent 70%);pointer-events:none;transition:transform .4s ease}.stat:hover,.quick:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:#d9b56f70}.stat:hover:after{transform:scale(1.4)}.stat-icon{transition:transform .25s ease,background .25s ease}.stat:hover .stat-icon{transform:rotate(-5deg) scale(1.06);background:#f3e8cf}.stat-value{font-variant-numeric:tabular-nums;letter-spacing:-.7px}.panel{animation:nasia-rise .45s ease both;animation-delay:.08s}.panel-head{background:linear-gradient(100deg,#fff,#fbfcfe)}.panel-head h3{letter-spacing:-.2px}.quick{animation:nasia-rise .45s ease both}.quick:hover{background:linear-gradient(110deg,#fff,#fffdf8)}.quick-icon{flex-shrink:0;transition:transform .25s ease}.quick:hover .quick-icon{transform:scale(1.08) rotate(-4deg)}
tbody tr{transition:background .18s ease,box-shadow .18s ease}tbody tr:hover{background:#f8faff;box-shadow:inset -2px 0 #d9b56f}th{letter-spacing:.1px}.btn{transition:transform .18s ease,box-shadow .22s ease,background .22s ease}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #10182712}.btn:active:not(:disabled){transform:translateY(0) scale(.98)}.btn-primary{background:linear-gradient(135deg,#17243a,#101827)}.btn-gold{background:linear-gradient(135deg,#f0d8a4,#d9b56f)}.field input,.field select,.field textarea,.search,.filters select{transition:border-color .2s ease,box-shadow .2s ease}.field input:focus,.field select:focus,.field textarea:focus,.search:focus{box-shadow:0 0 0 4px #d5ad631c}.overlay{backdrop-filter:blur(5px);animation:nasia-fade .18s ease both}.modal{animation:nasia-rise .25s cubic-bezier(.2,.75,.25,1) both;border:1px solid #ffffff80}.toast{animation:nasia-slide .25s ease both;border:1px solid #ffffff1a}.pill{transition:filter .2s ease}.pill:hover{filter:saturate(1.15)}.bar-fill{background:linear-gradient(90deg,#c89e55,#efd9a6);transition:width .8s cubic-bezier(.2,.75,.25,1)}
@media(max-width:1050px){.app-layout{grid-template-columns:220px minmax(0,1fr)}.content{padding:23px}}
@media(max-width:760px){.sidebar{box-shadow:-15px 0 45px #0003;transition:transform .32s cubic-bezier(.2,.75,.25,1)}.topbar{box-shadow:0 5px 20px #17233708}.content{padding:18px 13px}.stat{border-radius:15px}.stat:hover,.quick:hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Language and appearance controls */
.preference-buttons{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.preference-btn{white-space:nowrap;min-height:36px;font-size:12px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.preference-buttons:has(#languageToggle){z-index:30}.login-wrap~.preference-buttons{position:fixed;top:16px;right:16px}.login-wrap+.preference-buttons{position:fixed;top:16px;right:16px}.login-wrap .login-card{width:min(460px,100%)}body:has(.login-wrap) > #app > .preference-buttons{position:fixed;top:16px;right:16px;z-index:5}
html[dir="ltr"] body{direction:ltr}html[dir="ltr"] .app-layout{grid-template-columns:258px minmax(0,1fr)}html[dir="ltr"] .sidebar{direction:ltr}html[dir="ltr"] .nav button{text-align:left}html[dir="ltr"] .quick{text-align:left}html[dir="ltr"] .top-right{direction:ltr}html[dir="ltr"] .sidebar .side-bottom{direction:ltr}html[dir="ltr"] .filters{direction:ltr}html[dir="ltr"] .modal-foot{justify-content:flex-end}html[dir="ltr"] .toast{left:auto;right:24px}
body.theme-dark{--bg:#0c1220;--line:#283247;--shadow:0 12px 35px rgba(0,0,0,.22);--shadow-hover:0 20px 45px rgba(0,0,0,.35);color:#e7ecf5;background:radial-gradient(ellipse at 90% 0%,rgba(217,181,111,.07),transparent 32%),#0c1220}
body.theme-dark .topbar{background:#111a2be8;border-color:#29334a;box-shadow:0 5px 25px #0002}body.theme-dark .panel,body.theme-dark .stat,body.theme-dark .quick,body.theme-dark .modal{background:#151f32;color:#e7ecf5;border-color:#2a354c}body.theme-dark .panel-head{background:linear-gradient(100deg,#151f32,#18243a)}body.theme-dark .quick:hover{background:#1a263b}body.theme-dark .muted,body.theme-dark .quick small{color:#a4b0c5}body.theme-dark input,body.theme-dark select,body.theme-dark textarea{background:#0e1728;color:#e7ecf5;border-color:#34415a}body.theme-dark .btn-soft{background:#202c42;color:#e5ebf5;border-color:#34415a}body.theme-dark .btn-soft:hover{background:#2a3851}body.theme-dark .table-wrap,body.theme-dark table{background:#151f32;color:#e7ecf5}body.theme-dark th{background:#1b2940;color:#d9e1ee;border-color:#2a354c}body.theme-dark td{border-color:#2a354c}body.theme-dark tbody tr:hover{background:#1c2a40}body.theme-dark .modal-head,body.theme-dark .modal-foot{border-color:#2a354c}body.theme-dark .bar-track{background:#2a354c}body.theme-dark .hint{background:#292719;border-color:#5d5030;color:#e4d19a}body.theme-dark .empty{color:#b5c0d2}body.theme-dark .stat-icon{background:#263248;color:#e8d3a1}body.theme-dark .overlay{background:#030711bd}body.theme-dark .login-wrap{color:#172337}
@media(max-width:760px){.preference-btn{min-height:32px;padding:7px 9px;font-size:11px}.topbar .preference-buttons{gap:5px}.topbar .top-right{gap:6px}html[dir="ltr"] .sidebar{right:auto;left:0;transform:translateX(-110%)}html[dir="ltr"] .sidebar.open{transform:translateX(0)}body:has(.login-wrap) > #app > .preference-buttons{right:10px;top:10px}}

/* NASIAH premium motion layer */
:root{--gold-glow:rgba(213,173,99,.22)}
body{background:radial-gradient(ellipse at 90% 0%,rgba(213,173,99,.075),transparent 32%),var(--bg);transition:background .35s ease,color .3s ease}
.sidebar{background:linear-gradient(165deg,#101827 0%,#172943 58%,#101827 100%);box-shadow:8px 0 36px rgba(8,19,36,.12);position:relative;overflow:hidden}
.sidebar:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 70%);top:-110px;right:-110px;pointer-events:none;animation:goldBreath 7s ease-in-out infinite}
.nav{position:relative;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.nav:hover{transform:translateX(-4px);background:rgba(213,173,99,.12)}
.nav.active{box-shadow:inset -3px 0 var(--gold),0 8px 22px rgba(0,0,0,.12);animation:navEnter .35s ease both}
.topbar{backdrop-filter:blur(18px);background:rgba(255,255,255,.82);border-bottom:1px solid rgba(213,173,99,.18)}
.stat,.panel,.login-card,.card,.table-wrap{animation:riseIn .6s cubic-bezier(.2,.75,.25,1) both;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.stats .stat:nth-child(2){animation-delay:.06s}.stats .stat:nth-child(3){animation-delay:.12s}.stats .stat:nth-child(4){animation-delay:.18s}.stats .stat:nth-child(5){animation-delay:.24s}
.stat{border:1px solid rgba(213,173,99,.13);overflow:hidden;position:relative}
.stat:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.38) 48%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.stat:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(18,35,57,.12);border-color:rgba(213,173,99,.55)}
.stat:hover:after{animation:shinePass .85s ease}
.stat-icon{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s ease}
.stat:hover .stat-icon{transform:rotate(-8deg) scale(1.1);background:linear-gradient(135deg,#f3dfb4,#d5ad63)}
.panel{border:1px solid rgba(22,39,62,.06);box-shadow:0 8px 26px rgba(20,35,55,.045)}
.panel:hover{box-shadow:0 14px 34px rgba(20,35,55,.075)}
button{transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
button:hover{filter:brightness(1.025)}button:active{transform:scale(.975)}
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(213,173,99,.17)!important}
tbody tr{transition:background .2s ease,transform .2s ease}tbody tr:hover{background:rgba(213,173,99,.07)}
.badge,.pill,.status{transition:transform .2s ease,box-shadow .2s ease}.badge:hover,.pill:hover,.status:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.page-head{animation:slideDown .45s ease both}
.logo,.brand{transition:transform .3s ease}.logo:hover,.brand:hover{transform:scale(1.025)}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes navEnter{from{opacity:.65;transform:translateX(-7px)}to{opacity:1;transform:translateX(0)}}
@keyframes shinePass{to{transform:translateX(130%)}}
@keyframes goldBreath{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:.9;transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Admin-only quick access to account creation */
.admin-add-account{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;box-shadow:0 5px 18px rgba(201,164,91,.16);transition:transform .22s ease,box-shadow .22s ease}
.admin-add-account:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(201,164,91,.28)}
.admin-add-account:active{transform:scale(.97)}
@media(max-width:600px){.admin-add-account span{display:none}.admin-add-account{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.admin-add-account{transition:none}}

/* NASIAH Signature Login — architectural, restrained, responsive */
.login-experience{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);background:#07162b;color:#eef3fc;overflow:hidden;position:relative;font-family:Inter,"Segoe UI",Tahoma,sans-serif}
.login-experience.is-ar{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
.login-story{position:relative;min-height:100vh;overflow:hidden;padding:clamp(28px,5vw,76px);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at 14% 20%,#274c75 0,transparent 42%),linear-gradient(155deg,#102c4c 0%,#0b1c33 53%,#071326 100%);isolation:isolate}
.story-sky{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 14% 78%,#d6a15d3b,transparent 30%),radial-gradient(ellipse at 65% 6%,#7195ba2a,transparent 30%)}
.story-gridline{position:absolute;inset:0;z-index:-2;opacity:.15;background-image:linear-gradient(#b8cbe315 1px,transparent 1px),linear-gradient(90deg,#b8cbe315 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
.story-copy{position:relative;z-index:2;max-width:520px}.story-brand{width:max-content;text-align:center;color:#e7c37e}.brand-house{width:80px;margin:auto}.brand-house svg{width:100%;fill:none;stroke:#e9c57e;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.brand-house rect{fill:#e9c57e;stroke:none}.story-word{font-size:clamp(40px,5vw,68px);font-weight:850;line-height:1.12;letter-spacing:-2px}.story-en{font-size:15px;letter-spacing:5px;color:#fff;margin-top:5px}.story-tag{font-size:10px;letter-spacing:4px;margin-top:12px;color:#d8b777}.story-eyebrow{font-size:clamp(22px,2.7vw,36px);font-weight:750;line-height:1.35;margin:clamp(30px,5vh,58px) 0 10px;color:#f0d5a1}.story-description{font-size:15px;line-height:1.9;color:#d2dced;max-width:420px}
.story-building{position:absolute;z-index:-1;bottom:0;left:0;right:0;height:55%;overflow:hidden;perspective:900px;background:linear-gradient(0deg,#081326 0%,#0b1c31a8 55%,transparent 100%)}.building-orb{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#e9bd795e,#e9bd7900 68%);left:30%;top:8%}.building-back{position:absolute;bottom:14%;left:8%;width:70%;height:40%;background:linear-gradient(150deg,#9db3c5,#243e58 60%,#172b41);clip-path:polygon(0 34%,67% 0,100% 26%,100% 100%,0 100%);opacity:.8;filter:drop-shadow(0 10px 22px #0007)}.building-house{position:absolute;bottom:10%;left:13%;width:75%;height:47%;background:linear-gradient(160deg,#c5d0d7 0%,#637d92 13%,#182f48 14%,#071a2c 100%);clip-path:polygon(0 25%,66% 0,100% 18%,100% 100%,0 100%);box-shadow:0 10px 50px #0008}.roof{position:absolute;inset:0 0 auto;height:12%;background:linear-gradient(90deg,#e6c18a,#5d6d7a 35%,#f3d5a0 36%,#b9864b 70%,#192d41);transform:skewY(-2deg);transform-origin:left}.house-glass{position:absolute;left:8%;right:8%;top:20%;height:55%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:5px;background:#172b40;padding:5px;box-shadow:0 0 0 1px #e5c28c88}.house-glass i{background:linear-gradient(135deg,#ffdf9b 0%,#d18b4d 45%,#233f57 100%);box-shadow:inset 0 0 18px #f7d69a55}.house-balcony{position:absolute;top:78%;left:4%;right:4%;height:4px;background:#e0c08b;box-shadow:0 7px 0 #a9c2d0,0 11px 0 #e0c08b}.landscape{position:absolute;bottom:0;left:0;right:0;height:18%;background:linear-gradient(180deg,#173b42,#08162a);clip-path:polygon(0 35%,15% 5%,30% 42%,45% 15%,70% 35%,85% 8%,100% 30%,100% 100%,0 100%)}
.story-features{position:relative;z-index:2;display:flex;gap:0;max-width:550px;border-top:1px solid #dce6f126;padding-top:20px}.story-features>div{flex:1;display:flex;align-items:center;gap:10px;padding:8px 15px;border-inline-end:1px solid #dce6f126;color:#dce6f1;font-size:12px}.story-features>div:first-child{padding-inline-start:0}.story-features>div:last-child{border:0}.story-features b{font-size:23px;color:#e7c37e;font-weight:500}
.login-panel-wrap{position:relative;display:grid;place-items:center;padding:clamp(26px,5vw,72px);background:linear-gradient(145deg,#0a1b31f5,#061326 78%)}.login-panel-wrap:before{content:"";position:absolute;inset:7% 8%;border:1px solid #dce8f111;border-radius:30px;pointer-events:none}.login-panel{position:relative;width:min(430px,100%);padding:clamp(24px,3.2vw,42px);border:1px solid #c8d7e629;border-radius:26px;background:linear-gradient(145deg,#1a304bcc,#0d2038e8);box-shadow:0 32px 90px #0005,inset 0 1px #ffffff12;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.login-panel .mobile-brand{display:none}.login-kicker{font-size:10px;letter-spacing:1.6px;color:#d6b675;font-weight:700;margin-bottom:15px}.login-panel h1{font-size:clamp(24px,2.3vw,31px);letter-spacing:-.7px;margin:0 0 8px;color:#f7f9fd;font-weight:760}.login-subtitle{color:#aebed2;font-size:13px;line-height:1.8;margin:0 0 28px}.login-label{display:block;font-size:12px;font-weight:700;color:#dce5f1;margin:18px 0 8px}.login-input{display:flex;align-items:center;gap:12px;min-height:58px;border:1px solid #9cb4d22c;border-radius:13px;background:#b6cce20d;padding:0 15px;transition:border-color .22s,background .22s,box-shadow .22s}.login-input:focus-within{border-color:#d7b774a8;background:#c6d9ec12;box-shadow:0 0 0 4px #d7b77413}.login-input>span{font-size:20px;color:#d7b774;flex-shrink:0}.login-input input{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:#f7f9fd!important;width:100%;min-width:0;padding:15px 0;font:inherit;font-size:13px}.login-input input::placeholder{color:#7f95b0}.password-toggle{border:0;background:transparent;color:#c7d5e5;padding:6px;cursor:pointer;font-size:18px}.login-submit{margin-top:24px;min-height:56px;border-radius:13px;background:linear-gradient(115deg,#f0d49a,#d5ad63 58%,#e9c783);color:#17243a;font-size:14px;display:flex;justify-content:space-between;padding:0 20px;box-shadow:0 10px 26px #d5ad6324}.submit-arrow{font-size:20px}.login-submit:hover{filter:brightness(1.04)}.login-secure{display:flex;align-items:center;justify-content:center;gap:9px;color:#9eb1c9;font-size:11px;margin-top:24px}.login-secure span:first-child{color:#d7b774;font-size:17px}.login-footer{border-top:1px solid #dce8f114;margin-top:25px;padding-top:18px;text-align:center;color:#7087a3;font-size:10px;letter-spacing:.3px}.login-footer span{padding:0 5px;color:#d7b774}.passkey-setup{margin-top:15px;padding:14px;border:1px solid #d5ad6340;border-radius:12px;background:#d5ad630d}.passkey-setup p{font-size:12px;color:#c4d0e0}.login-experience~.preference-buttons{position:fixed;top:20px;right:24px;z-index:40}.login-experience.is-en~.preference-buttons{right:24px;left:auto}.login-experience.is-ar~.preference-buttons{left:24px;right:auto}.login-experience .error{color:#ffb7bc}.login-experience .preference-btn{background:#142944;border:1px solid #8ca3c433;color:#eaf0f8;border-radius:30px;padding:8px 14px}.login-experience .preference-buttons{position:fixed;top:22px;right:22px;z-index:40}
html[dir="ltr"] .login-story{text-align:left}html[dir="rtl"] .login-story{text-align:right}html[dir="ltr"] .story-brand{direction:ltr}html[dir="rtl"] .story-brand{direction:rtl}html[dir="ltr"] .login-panel{text-align:left}html[dir="rtl"] .login-panel{text-align:right}html[dir="ltr"] .login-submit{flex-direction:row-reverse}html[dir="ltr"] .login-experience .preference-buttons{left:auto;right:22px}html[dir="rtl"] .login-experience .preference-buttons{right:auto;left:22px}
@media(max-width:950px){.login-experience{grid-template-columns:minmax(0,.8fr) minmax(390px,1fr)}.login-story{padding:35px}.story-features>div{padding:7px 9px;font-size:11px}.login-panel-wrap{padding:34px}}
@media(max-width:720px){.login-experience{grid-template-columns:1fr}.login-story{min-height:320px;padding:34px 24px 24px;justify-content:flex-start}.story-brand{display:flex;align-items:center;gap:12px;text-align:start!important}.brand-house{width:43px;margin:0}.story-word{font-size:34px}.story-en{font-size:10px;letter-spacing:2px}.story-tag{display:none}.story-eyebrow{font-size:22px;margin:22px 0 5px}.story-description{font-size:12px;max-width:330px;margin:0}.story-building{height:55%;left:25%;opacity:.45}.story-features{display:none}.login-panel-wrap{padding:25px 17px 36px}.login-panel-wrap:before{inset:12px;border-radius:20px}.login-panel{width:100%;max-width:460px;padding:27px 23px;border-radius:20px}.login-panel h1{font-size:25px}.login-experience .preference-buttons{top:12px!important;right:12px!important;left:auto!important}.login-experience.is-ar .preference-buttons{left:12px!important;right:auto!important}.login-experience .preference-btn{font-size:11px;padding:7px 10px}.login-secure{font-size:10px}}
@media(prefers-reduced-motion:reduce){.login-experience *{animation:none!important;transition:none!important}}

/* NASIAH Dynamic Login Upgrade — layered motion, ambient light and pointer depth */
.login-experience{--pointer-x:0;--pointer-y:0;isolation:isolate}
.login-story{background-size:160% 160%;animation:loginAtmosphere 18s ease-in-out infinite alternate}
.story-sky{z-index:-2;animation:skyGlow 12s ease-in-out infinite alternate}
.story-gridline{transform:perspective(700px) rotateX(7deg) translate3d(calc(var(--pointer-x)*-5px),calc(var(--pointer-y)*-5px),0);transform-origin:center top;transition:transform .25s ease-out;animation:gridDrift 24s linear infinite}
.story-building{transform:translate3d(calc(var(--pointer-x)*-10px),calc(var(--pointer-y)*-7px),0);transition:transform .35s ease-out}
.building-back{animation:buildingBreath 9s ease-in-out infinite alternate}
.building-house{transform:translateY(0);animation:houseFloat 7s ease-in-out infinite}
.building-orb{filter:blur(1px);animation:orbPulse 5s ease-in-out infinite alternate}
.login-panel{overflow:hidden;box-shadow:0 32px 90px #0006,inset 0 1px #ffffff15;transition:transform .25s ease-out,border-color .3s,box-shadow .3s}
.login-panel:before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 20%,#ffffff0d 38%,#e9c57e19 50%,transparent 68%);transform:translateX(-120%);animation:panelSheen 9s ease-in-out infinite}
.login-input{position:relative;overflow:hidden}
.login-input:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent,#ffffff08,transparent);transform:translateX(-110%);transition:transform .5s ease}
.login-input:hover:after{transform:translateX(110%)}
.login-submit{position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.login-submit:before{content:"";position:absolute;inset:-40% auto -40% -45%;width:30%;transform:skewX(-22deg);background:#ffffff65;filter:blur(8px);transition:left .65s ease}
.login-submit:hover{transform:translateY(-2px);box-shadow:0 14px 32px #d5ad6340;filter:brightness(1.04)}
.login-submit:hover:before{left:125%}
.story-features>div{transition:transform .25s ease,color .25s ease}
.story-features>div:hover{transform:translateY(-4px);color:#fff}
.story-features>div b{display:inline-block;transition:transform .3s ease}
.story-features>div:hover b{transform:rotate(-10deg) scale(1.12)}
@keyframes loginAtmosphere{0%{background-position:0% 20%}100%{background-position:100% 80%}}
@keyframes skyGlow{0%{opacity:.65;transform:scale(1)}100%{opacity:1;transform:scale(1.08)}}
@keyframes gridDrift{0%{background-position:0 0,0 0}100%{background-position:58px 58px,58px 58px}}
@keyframes buildingBreath{0%{transform:translateY(0) scale(1);opacity:.65}100%{transform:translateY(-8px) scale(1.025);opacity:.88}}
@keyframes houseFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes orbPulse{0%{opacity:.55;scale:.92}100%{opacity:1;scale:1.12}}
@keyframes panelSheen{0%,65%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@media(max-width:720px){.story-gridline,.story-building{transform:none!important}.login-panel{animation:nasia-rise .7s cubic-bezier(.2,.75,.25,1) both}.story-building{animation:mobileBuilding 10s ease-in-out infinite alternate}}
@keyframes mobileBuilding{0%{opacity:.3;transform:translateX(-5px)}100%{opacity:.58;transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.login-story,.story-sky,.story-gridline,.story-building,.building-back,.building-house,.building-orb,.login-panel:before,.login-input:after,.login-submit:before,.story-features>div{animation:none!important;transition:none!important;transform:none!important}}

/* NASIAH Login Panel — dark navy glass with a warm gold accent */
.login-panel{background:rgba(15,23,42,.82)!important;border:1px solid rgba(255,255,255,.15)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 32px 90px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08)}
.login-panel:before{border-radius:inherit}

/* NASIAH login photo integration: supplied real-estate image with subtle cinematic motion */
.login-story{background:#101c2a;isolation:isolate}
.login-story::before{content:"";position:absolute;inset:-2%;z-index:-3;background-image:url('/assets/login-real-estate.jpg');background-size:cover;background-position:center 42%;transform:translate3d(calc(var(--pointer-x,0)*-7px),calc(var(--pointer-y,0)*-5px),0) scale(1.025);animation:loginPhotoDrift 24s ease-in-out infinite alternate;will-change:transform}
.login-story::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,18,32,.43) 0%,rgba(8,20,34,.28) 38%,rgba(6,17,30,.74) 100%),linear-gradient(90deg,rgba(6,17,30,.68) 0%,rgba(6,17,30,.24) 72%,rgba(6,17,30,.1) 100%)}
.login-story .story-sky{background:radial-gradient(ellipse at 20% 75%,rgba(213,173,99,.18),transparent 40%);opacity:.9}
.login-story .story-gridline{opacity:.07}
.login-story .story-building{display:none}
.login-story .story-brand,.login-story .story-eyebrow,.login-story .story-description,.login-story .story-features{filter:drop-shadow(0 2px 12px rgba(0,0,0,.32))}
@keyframes loginPhotoDrift{0%{transform:translate3d(calc(var(--pointer-x,0)*-5px),calc(var(--pointer-y,0)*-3px),0) scale(1.025)}100%{transform:translate3d(calc(var(--pointer-x,0)*-8px),calc(var(--pointer-y,0)*-5px),0) scale(1.09)}}
@media(max-width:720px){.login-story::before{background-position:center 37%;animation-duration:30s}.login-story::after{background:linear-gradient(180deg,rgba(7,18,32,.35),rgba(6,17,30,.78))}.login-story .story-copy{max-width:100%}}
@media(prefers-reduced-motion:reduce){.login-story::before{animation:none;transform:none}}