body{margin:0;font-family:Vazir,sans-serif;background:#1e1b2f;color:#e5e7eb;overflow-x:hidden}
button,div,h1,h2,h3,h4,h5,h6,input,label,li,ol,option,p,section,span,td{font-family:Vazir,sans-serif}
.login-panel{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#9333ea,#a855f7);animation:gradientShift 15s ease infinite}
@keyframes gradientShift{
0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
.login-container{background:rgba(30,27,47,.9);backdrop-filter:blur(15px);padding:40px;border-radius:20px;box-shadow:0 10px 30px rgba(147,51,234,.5);width:100%;max-width:400px;text-align:center;transform:translateY(0);transition:transform .5s ease-in-out}
.login-container h2{font-size:28px;color:#a855f7;margin-bottom:10px;text-shadow:0 0 10px rgba(147,51,234,.5)}
.login-subtitle{font-size:16px;color:#d1d5db;margin-bottom:20px}
.form-group{margin-bottom:20px}
.form-group input{width:100%;padding:12px;border:none;border-radius:10px;background:#2a263f;color:#fff;font-size:16px;outline:0;transition:box-shadow .3s,border .3s}
.form-group input:focus{box-shadow:0 0 15px rgba(147,51,234,.7);border:1px solid #a855f7}
.login-btn{background:linear-gradient(90deg,#9333ea,#a855f7);color:#fff;padding:12px 24px;border:none;border-radius:10px;font-size:16px;cursor:pointer;transition:transform .3s,box-shadow .3s,background .3s}
.login-btn:hover{transform:scale(1.05);box-shadow:0 5px 20px rgba(147,51,234,.7);background:linear-gradient(90deg,#a855f7,#9333ea)}
.error-message{color:#f44;font-size:14px;margin-top:10px;animation:shake .3s ease-in-out}
@keyframes shake{
0%,100%{transform:translateX(0)}
25%{transform:translateX(-5px)}
75%{transform:translateX(5px)}
}
.admin-panel{display:flex;min-height:100vh;flex-direction:row}
.sidebar{width:280px;background:linear-gradient(180deg,#9333ea,#a855f7);padding:30px;position:sticky;top:0;height:100vh;box-shadow:0 8px 20px rgba(147,51,234,.3);transition:transform .3s ease-in-out;z-index:100}
.sidebar-header h2{font-size:26px;color:#fff;text-shadow:0 0 12px rgba(147,51,234,.7);margin-bottom:20px;text-align:center}
.sidebar ul{list-style:none;padding:0}
.sidebar ul li a{display:flex;align-items:center;gap:12px;padding:15px;color:#f3e8ff;text-decoration:none;font-size:16px;border-radius:12px;transition:background .3s,transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.sidebar ul li a::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}
.sidebar ul li a:hover::before{left:100%}
.sidebar ul li a.active,.sidebar ul li a:hover{background:rgba(255,255,255,.1);transform:translateX(8px);box-shadow:0 5px 15px rgba(147,51,234,.5)}
.sidebar ul li a i{font-size:20px}
.menu-toggle{display:none;font-size:26px;color:#fff;cursor:pointer;margin-top:20px;text-align:center}
.content{flex:1;padding:40px;background:#1e1b2f;position:relative}
.panel-section{display:none}
.panel-section.active{display:block;animation:fadeInScale .5s ease-in-out}
@keyframes fadeInScale{
from{opacity:0;transform:scale(.95)}
to{opacity:1;transform:scale(1)}
}
.panel-section h2{font-size:34px;color:#a855f7;margin-bottom:15px;text-shadow:0 0 12px rgba(147,51,234,.7);text-align:center}
.subtitle{font-size:18px;color:#d1d5db;margin-bottom:30px;text-align:center}
.search-bar{position:relative;margin-bottom:25px;max-width:500px;margin-left:auto;margin-right:auto}
.search-bar input{width:100%;padding:14px 45px 14px 14px;border:none;border-radius:12px;background:#2a263f;color:#fff;font-size:16px;outline:0;transition:box-shadow .3s}
.search-bar input:focus{box-shadow:0 0 20px rgba(147,51,234,.7)}
.search-bar i{position:absolute;top:50%;right:15px;transform:translateY(-50%);color:#a855f7;font-size:20px}
.table-container{background:rgba(42,38,63,.9);backdrop-filter:blur(15px);padding:25px;border-radius:15px;box-shadow:0 8px 20px rgba(147,51,234,.3);overflow-x:auto}
table{width:100%;border-collapse:collapse;table-layout:auto}
td,th{padding:18px;text-align:center;font-size:15px;color:#d1d5db;white-space:nowrap}
th{background:linear-gradient(90deg,#9333ea,#a855f7);color:#fff;text-shadow:0 0 8px rgba(147,51,234,.5)}
tr:nth-child(even){background:rgba(147,51,234,.05)}
.status{padding:6px 12px;border-radius:20px;font-size:13px}
.status.active{background:#9333ea;color:#fff}
.status.inactive{background:#6b7280;color:#fff}
.btn{padding:10px 14px;border:none;border-radius:10px;cursor:pointer;transition:transform .3s,box-shadow .3s,background .3s}
.btn:hover{transform:scale(1.1);box-shadow:0 6px 15px rgba(147,51,234,.5)}
.btn-edit{background:#9333ea;color:#fff}
.btn-delete{background:#f44;color:#fff}
.btn-primary{background:linear-gradient(90deg,#9333ea,#a855f7);color:#fff;padding:14px 24px;font-size:16px;border-radius:12px}
.btn-primary:hover{animation:pulse 1.5s infinite}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(147,51,234,.7)}
70%{box-shadow:0 0 0 20px rgba(147,51,234,0)}
100%{box-shadow:0 0 0 0 rgba(147,51,234,0)}
}
.btn-copy{background:#22c55e;color:#fff}
.btn-danger{background:#f44;color:#fff;padding:14px 24px;font-size:16px;border-radius:12px}
.logout-btn-container{margin-top:30px;text-align:center}
.api-keys{display:grid;gap:25px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.api-card{background:rgba(42,38,63,.9);backdrop-filter:blur(15px);padding:25px;border-radius:15px;box-shadow:0 8px 20px rgba(147,51,234,.3);transition:transform .3s,box-shadow .3s}
.api-card:hover{transform:translateY(-8px);box-shadow:0 12px 25px rgba(147,51,234,.5)}
.api-card p{font-size:15px;color:#d1d5db;margin:12px 0}
.api-actions{display:flex;gap:12px;justify-content:center}
.settings-form{background:rgba(42,38,63,.9);backdrop-filter:blur(15px);padding:25px;border-radius:15px;box-shadow:0 8px 20px rgba(147,51,234,.3);max-width:500px;margin:0 auto}
.form-group{margin-bottom:25px}
.form-group label{display:block;font-size:15px;color:#d1d5db;margin-bottom:10px}
.form-group input[type=checkbox],.form-group select{width:100%;padding:14px;border:none;border-radius:12px;background:#2a263f;color:#fff;font-size:16px;outline:0}
.checkbox{display:flex;align-items:center;gap:12px;font-size:15px;color:#d1d5db}
.checkbox input{width:22px;height:22px;accent-color:#9333ea}
.log-filter{margin-bottom:25px;max-width:300px;margin-left:auto;margin-right:auto}
.log-filter input{width:100%;padding:14px;border:none;border-radius:12px;background:#2a263f;color:#fff;font-size:16px}
.logs-list{display:grid;gap:25px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.log-card{background:rgba(42,38,63,.9);backdrop-filter:blur(15px);padding:25px;border-radius:15px;display:flex;align-items:center;gap:18px;box-shadow:0 8px 20px rgba(147,51,234,.3);transition:transform .3s,box-shadow .3s}
.log-card:hover{transform:translateY(-8px);box-shadow:0 12px 25px rgba(147,51,234,.5)}
.log-card i{font-size:26px;color:#a855f7}
.log-card p{flex:1;font-size:15px;color:#d1d5db}
.log-card .time{font-size:13px;color:#9ca3af}
@media (max-width:1024px){
.sidebar{width:250px}
.content{padding:30px}
.panel-section h2{font-size:28px}
.subtitle{font-size:16px}
}
@media (max-width:768px){
.admin-panel{flex-direction:column}
.sidebar{width:100%;height:auto;position:fixed;top:0;left:0;transform:translateX(-100%);z-index:1000}
.sidebar.active{transform:translateX(0)}
.menu-toggle{display:block}
.content{padding:20px;margin-top:60px}
.panel-section h2{font-size:24px}
.subtitle{font-size:14px}
.table-container{overflow-x:auto}
table{min-width:600px}
.log-filter,.search-bar,.settings-form{max-width:100%}
.login-container{padding:30px;max-width:90%}
}
@media (max-width:480px){
.login-container{padding:20px;max-width:95%}
.login-container h2{font-size:24px}
.login-subtitle{font-size:14px}
.login-btn{padding:10px 20px;font-size:14px}
.panel-section h2{font-size:20px}
.subtitle{font-size:12px}
.content{padding:15px}
.btn{padding:8px 12px;font-size:14px}
.btn-danger,.btn-primary{padding:12px 20px;font-size:14px}
.api-card,.log-card{padding:20px}
.api-card p,.log-card p{font-size:14px}
.log-card i{font-size:22px}
.log-card .time{font-size:12px}
.form-group input[type=checkbox],.form-group select{padding:12px;font-size:14px}
.checkbox input{width:18px;height:18px}
}