:root{
    --bg:#0f172a;--card:#0b1220;--accent:#06b6d4;--muted:#94a3b8;--glass: rgba(255,255,255,0.03);--success:#10b981;--danger:#ef4444;--radius:12px;--gap:12px;
    font-family:system-ui, 'Segoe UI', Roboto, 'Noto Sans Arabic', 'Helvetica Neue', Arial;
}
html,body{
    height:100%;
    margin:0;
    background:linear-gradient(180deg,#071024 0%,#07192b 100%);
    color:#e6eef6;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.container {
    width: 100%;
    max-width: 1100px;
    display: grid;
    margin: 0 auto;
    height: 300px;
}
.panel {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 400px;
    overflow: auto;
    z-index: 100;
}
.panel::-webkit-scrollbar {
    width: 8px;
}
.panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.panel::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.6);
    border-radius: 10px;
}
.panel::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.9);
}
.tabs{
    display:flex;
    gap:8px;
    margin-bottom:16px;
}
.tab{
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer;
    background:transparent;
    color:var(--muted);
    border:1px solid transparent;
}
.tab.active{
    background:var(--glass);
    color:var(--accent);
    border-color:rgba(255,255,255,0.04);
}
form{
    display:grid;
    gap:10px;
}
label{
    font-size:14px;
    color:#cfe7f3;
}
input, select{
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    padding:10px 12px;
    border-radius:10px;
    color:inherit;
    outline:none;
}
input:focus, select:focus{
    border-color:rgba(6,182,212,0.5);
    box-shadow:0 6px 18px rgba(6,182,212,0.06);
}
.row{
    display:flex;
    gap:10px;
}
.col{
    flex:1;
}
.hint{
    font-size:13px;
    color:var(--muted);
}
.actions{
    display:flex;
    gap:8px;
    margin-top:6px;
}
button{
    border:0;
    padding:10px 14px;
    border-radius:10px;
    cursor:pointer;
}
.btn-primary{
    background:var(--accent);
    color:#042023;
}
.btn-ghost{
    background:transparent;
    color:var(--muted);
    border:1px solid rgba(255,255,255,0.03);
}
.muted{
    color:var(--muted);
}