:root{
--bg:#F3F5F8;
--surface:#FFFFFF;
--surface-2:#EAEEF3;
--surface-3:#F7F9FB;
--border:#DDE3EB;
--text:#161E2A;
--text-dim:#5B6676;
--text-faint:#8B95A5;
--primary:#2C5FE0;
--primary-hover:#2450C4;
--primary-text:#FFFFFF;
--valid:#1E8F5D;
--valid-bg:#E4F5EC;
--expired:#D64545;
--expired-bg:#FCEAEA;
--soon:#C97A1A;
--soon-bg:#FBF0DF;
--danger:#D64545;
--danger-hover:#B93838;
--radius-sm:8px;
--radius-md:14px;
--radius-lg:20px;
--radius-xl:26px;
--font-ui:'Cairo',sans-serif;
--font-mono:'JetBrains Mono',monospace;
color-scheme:light;
}

html[data-theme="dark"]{
--bg:#0E1420;
--surface:#161E2C;
--surface-2:#1E2838;
--surface-3:#131A27;
--border:#2A3446;
--text:#E7ECF3;
--text-dim:#93A0B4;
--text-faint:#5E6B80;
--primary:#5B8DEF;
--primary-hover:#7AA2F5;
--primary-text:#0E1420;
--valid:#3FBE85;
--valid-bg:#15301F;
--expired:#E88080;
--expired-bg:#391C1C;
--soon:#E3A94B;
--soon-bg:#392C14;
--danger:#E37272;
--danger-hover:#EE8C8C;
color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{
height:100%;
margin:0;
padding:0;
}

body{
background:var(--bg);
color:var(--text);
font-family:var(--font-ui);
font-size:15px;
line-height:1.55;
-webkit-tap-highlight-color:transparent;
tap-highlight-color:transparent;
overscroll-behavior:none;
transition:background-color .25s ease,color .25s ease;
}

@media (max-width:880px){
body,button,input,select,textarea,a,label,td,th,div,span{
-webkit-user-select:none;
user-select:none;
}
input,textarea{
-webkit-user-select:text;
user-select:text;
}
}

button{
font-family:var(--font-ui);
cursor:pointer;
background:none;
border:none;
color:inherit;
}

input,select,textarea{
font-family:var(--font-ui);
}

.icon-sprite{
position:absolute;
width:0;
height:0;
overflow:hidden;
}

.icon{
width:19px;
height:19px;
display:inline-block;
flex-shrink:0;
}

.icon-xl{
width:52px;
height:52px;
}

.hidden{
display:none !important;
}

.splash{
position:fixed;
inset:0;
background:var(--bg);
display:flex;
align-items:center;
justify-content:center;
z-index:500;
transition:opacity .5s ease;
}

.splash-inner{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}

.splash-logo{
width:96px;
height:96px;
object-fit:contain;
border-radius:var(--radius-lg);
margin-bottom:10px;
}

.splash-title{
font-size:32px;
font-weight:800;
margin:0;
letter-spacing:.5px;
}

.splash-sub{
color:var(--text-dim);
margin:2px 0 22px 0;
font-size:14px;
}

.splash-bar{
width:140px;
height:4px;
border-radius:99px;
background:var(--surface-2);
overflow:hidden;
}

.splash-bar span{
display:block;
height:100%;
width:40%;
background:var(--primary);
border-radius:99px;
animation:splash-load 1.4s ease-in-out infinite;
}

@keyframes splash-load{
0%{transform:translateX(-100%);}
100%{transform:translateX(350%);}
}

.splash.fade-out{
opacity:0;
pointer-events:none;
}

.screen{
min-height:100%;
}

.login-screen{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:var(--bg);
}

.login-card{
width:100%;
max-width:400px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-xl);
padding:36px 30px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.login-logo{
width:64px;
height:64px;
object-fit:contain;
border-radius:var(--radius-md);
margin-bottom:14px;
}

.login-title{
font-size:24px;
font-weight:800;
margin:0;
}

.login-sub{
color:var(--text-dim);
font-size:13.5px;
margin:6px 0 26px 0;
}

.form{
width:100%;
display:flex;
flex-direction:column;
gap:16px;
text-align:right;
}

.field{
display:flex;
flex-direction:column;
gap:7px;
}

.field label{
font-size:13px;
font-weight:600;
color:var(--text-dim);
}

.field input,.field select{
background:var(--surface-3);
border:1px solid var(--border);
color:var(--text);
border-radius:var(--radius-md);
padding:12px 14px;
font-size:14.5px;
outline:none;
transition:border-color .15s ease;
width:100%;
}

.field input:focus,.field select:focus{
border-color:var(--primary);
}

.input-with-action{
position:relative;
display:flex;
align-items:center;
}

.input-with-action input{
padding-left:44px;
}

.input-action{
position:absolute;
left:10px;
color:var(--text-faint);
padding:6px;
border-radius:var(--radius-sm);
display:flex;
}

.form-error{
color:var(--expired);
background:var(--expired-bg);
border-radius:var(--radius-sm);
padding:9px 12px;
font-size:13px;
margin:0;
text-align:center;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:11px 18px;
border-radius:var(--radius-md);
font-size:14px;
font-weight:700;
border:1px solid transparent;
white-space:nowrap;
transition:background-color .15s ease,border-color .15s ease,opacity .15s ease;
}

.btn:active{
opacity:.8;
}

.btn-primary{
background:var(--primary);
color:var(--primary-text);
}

.btn-primary:hover{
background:var(--primary-hover);
}

.btn-outline{
background:var(--surface);
color:var(--text);
border-color:var(--border);
}

.btn-outline:hover{
background:var(--surface-2);
}

.btn-danger{
background:var(--danger);
color:#fff;
}

.btn-danger:hover{
background:var(--danger-hover);
}

.btn-ghost{
background:transparent;
color:var(--text-dim);
}

.btn-ghost:hover{
color:var(--text);
}

.btn-block{
width:100%;
}

.btn:disabled{
opacity:.55;
pointer-events:none;
}

.spinner{
width:16px;
height:16px;
border-radius:50%;
border:2px solid rgba(255,255,255,.4);
border-top-color:#fff;
animation:spin .7s linear infinite;
}

.btn-outline .spinner{
border:2px solid var(--border);
border-top-color:var(--primary);
}

@keyframes spin{
to{transform:rotate(360deg);}
}

.app-shell{
min-height:100vh;
display:flex;
flex-direction:column;
}

.topbar{
display:flex;
align-items:center;
gap:14px;
padding:12px 22px;
background:var(--surface);
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:60;
}

.only-mobile{
display:none;
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.brand-logo{
width:32px;
height:32px;
object-fit:contain;
border-radius:var(--radius-sm);
}

.brand-name{
font-weight:800;
font-size:18px;
}

.topbar-actions{
margin-right:auto;
display:flex;
align-items:center;
gap:8px;
}

.icon-btn{
width:40px;
height:40px;
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
color:var(--text-dim);
}

.icon-btn:hover{
background:var(--surface-2);
color:var(--text);
}

.user-menu{
position:relative;
}

.user-menu-panel{
position:absolute;
left:0;
top:calc(100% + 8px);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:10px;
min-width:230px;
z-index:80;
}

.user-email{
font-size:12.5px;
color:var(--text-dim);
padding:6px 10px 10px 10px;
margin:0;
border-bottom:1px solid var(--border);
word-break:break-all;
}

.menu-item{
display:flex;
align-items:center;
gap:10px;
width:100%;
padding:10px;
border-radius:var(--radius-sm);
font-size:13.5px;
font-weight:600;
color:var(--text);
margin-top:6px;
text-align:right;
}

.menu-item:hover{
background:var(--surface-2);
}

.menu-item-danger{
color:var(--expired);
}

.app-body{
display:flex;
flex:1;
min-height:0;
}

.sidebar{
width:230px;
flex-shrink:0;
background:var(--surface);
border-left:1px solid var(--border);
padding:18px 14px;
display:flex;
flex-direction:column;
gap:22px;
}

.side-nav{
display:flex;
flex-direction:column;
gap:4px;
}

.side-link{
display:flex;
align-items:center;
gap:10px;
padding:11px 12px;
border-radius:var(--radius-md);
font-size:14px;
font-weight:700;
color:var(--text-dim);
text-align:right;
}

.side-link.active{
background:var(--primary);
color:var(--primary-text);
}

.sidebar-stats{
display:flex;
flex-direction:column;
gap:10px;
}

.stat-card{
background:var(--surface-3);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:14px;
display:flex;
align-items:center;
justify-content:space-between;
}

.stat-label{
font-size:12.5px;
color:var(--text-dim);
font-weight:600;
}

.stat-value{
font-family:var(--font-mono);
font-size:20px;
font-weight:600;
}

.stat-valid .stat-value{color:var(--valid);}
.stat-expired .stat-value{color:var(--expired);}
.stat-soon .stat-value{color:var(--soon);}

.content{
flex:1;
padding:20px 24px 40px 24px;
min-width:0;
overflow-x:auto;
}

.toolbar{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:18px;
}

.search-box{
flex:1;
min-width:220px;
display:flex;
align-items:center;
gap:8px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:10px 14px;
color:var(--text-faint);
}

.search-box input{
border:none;
outline:none;
background:transparent;
color:var(--text);
width:100%;
font-size:14px;
}

.toolbar-right{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.select-wrap{
display:flex;
align-items:center;
gap:6px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:0 12px;
color:var(--text-faint);
}

.select-wrap select{
border:none;
background:transparent;
color:var(--text);
padding:10px 4px;
outline:none;
font-size:13.5px;
}

.table-wrap{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
overflow:auto;
}

.data-table{
width:100%;
border-collapse:collapse;
min-width:1180px;
}

.data-table th{
text-align:right;
font-size:12px;
font-weight:700;
color:var(--text-dim);
padding:14px 16px;
border-bottom:1px solid var(--border);
white-space:nowrap;
background:var(--surface-3);
position:sticky;
top:0;
}

.data-table td{
padding:13px 16px;
border-bottom:1px solid var(--border);
font-size:13.5px;
white-space:nowrap;
}

.data-table tbody tr:last-child td{
border-bottom:none;
}

.data-table tbody tr:hover{
background:var(--surface-3);
}

.mono{
font-family:var(--font-mono);
}

.name-ar{
font-weight:700;
}

.badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 12px;
border-radius:99px;
font-size:11.5px;
font-weight:700;
font-family:var(--font-mono);
}

.badge-valid{
background:var(--valid-bg);
color:var(--valid);
}

.badge-expired{
background:var(--expired-bg);
color:var(--expired);
}

.remaining{
font-family:var(--font-mono);
font-weight:600;
}

.remaining-ok{color:var(--valid);}
.remaining-soon{color:var(--soon);}
.remaining-over{color:var(--expired);}

.row-actions{
display:flex;
align-items:center;
gap:6px;
}

.row-actions .icon-btn{
width:34px;
height:34px;
}

.empty-state{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:60px 20px;
color:var(--text-faint);
gap:10px;
text-align:center;
}

.empty-state p{
font-weight:700;
color:var(--text-dim);
margin:0;
}

.empty-state span{
font-size:13px;
}

.toast-stack{
position:fixed;
top:18px;
left:50%;
transform:translateX(-50%);
z-index:900;
display:flex;
flex-direction:column;
gap:8px;
width:min(92vw,380px);
}

.toast{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:12px 16px;
display:flex;
align-items:center;
gap:10px;
font-size:13.5px;
font-weight:600;
}

.toast-success{border-color:var(--valid);color:var(--valid);}
.toast-error{border-color:var(--expired);color:var(--expired);}
.toast-info{border-color:var(--primary);color:var(--primary);}

.modal-overlay{
position:fixed;
inset:0;
background:rgba(10,14,20,.55);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
z-index:400;
}

.modal{
width:100%;
max-width:520px;
max-height:88vh;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-xl);
display:flex;
flex-direction:column;
overflow:hidden;
}

.modal-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
border-bottom:1px solid var(--border);
flex-shrink:0;
}

.modal-head h2{
font-size:17px;
margin:0;
font-weight:800;
}

.modal-body{
padding:20px;
overflow-y:auto;
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.confirm-box{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:10px;
padding:6px 0 4px 0;
}

.confirm-box .icon-xl{
color:var(--expired);
}

.confirm-box p{
color:var(--text-dim);
font-size:14px;
margin:0;
}

.confirm-box strong{
color:var(--text);
}

.modal-actions{
display:flex;
gap:10px;
margin-top:22px;
}

.modal-actions .btn{
flex:1;
}

.progress-line{
display:flex;
align-items:center;
gap:10px;
font-size:13.5px;
color:var(--text-dim);
padding:10px 0;
}

@media (max-width:880px){
.sidebar{
position:fixed;
top:0;
bottom:0;
right:0;
z-index:70;
transform:translateX(100%);
transition:transform .25s ease;
width:250px;
border-left:1px solid var(--border);
padding-top:80px;
}

.sidebar.open{
transform:translateX(0);
}

.only-mobile{
display:flex;
}

.topbar{
padding:10px 14px;
}

.content{
padding:14px 12px 30px 12px;
}

.data-table{
min-width:0;
}

.data-table thead{
display:none;
}

.data-table,.data-table tbody,.data-table tr,.data-table td{
display:block;
width:100%;
}

.data-table tr{
border-bottom:1px solid var(--border);
padding:14px 6px;
}

.data-table td{
border:none;
padding:6px 8px;
white-space:normal;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:13px;
}

.data-table td::before{
content:attr(data-label);
font-weight:700;
color:var(--text-faint);
font-size:11.5px;
flex-shrink:0;
}

.data-table td.row-actions-cell{
justify-content:flex-end;
}

.grid-2{
grid-template-columns:1fr;
}

.login-card{
padding:28px 20px;
}

.toolbar{
flex-direction:column;
align-items:stretch;
}

.toolbar-right{
justify-content:stretch;
}

.toolbar-right .btn{
flex:1;
}
}

@media (max-width:880px) and (orientation:landscape){
.sidebar{
padding-top:70px;
}

.login-screen{
padding:14px;
}

.login-card{
padding:22px 20px;
}
}

.sidebar-backdrop{
position:fixed;
inset:0;
background:rgba(10,14,20,.5);
z-index:65;
}