: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;
    padding: 0;
    background: linear-gradient(180deg,#071024 0%,#07192b 100%);
    color: #e6eef6;
    /* display:flex;  <-- احذف أو عطل التمركز العمودي */
    /* align-items:center; */
    /* justify-content:center; */
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 100%;
    position: relative; /* لتكون الـ panel مرتبطة بالمحتوى */
}

.panel {
    position: absolute;
    top: 0; /* هذا يضمن أنها تلتصق بالسقف */
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 100%;
    overflow: auto;
    z-index: 100;
}

.container {
    width: 100%;
    max-width: 1100px;
    display: grid;
    margin: 0 auto;
    height: 100%;
}
.panel {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 100%;
    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;
    margin-bottom:16px;
    color: black;
        overflow: auto;

}
.tab {
    display: inline-block;       /* يجعل العنصر يأخذ عرض النص فقط */
    padding: 8px 12px;           /* مسافة داخلية مناسبة */
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: white;
    white-space: nowrap;         /* يمنع النص من الانتقال لسطر جديد */
    width: auto;                 /* يضبط العرض حسب المحتوى */
    box-sizing: border-box;      /* يحافظ على الحواف ضمن العرض */
}

.tab.active{
    background:var(--glass);
    border-color:rgba(255,255,255,0.04);
    color: white;
}
form{
    display:grid;
    gap:10px;
}
label{
    font-size:14px;
}
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);
}