:root{
    --bg:#f4f6f9; --card:#fff; --line:#e2e6ec; --txt:#1f2733; --dim:#7b8794;
    --brand:#2563eb; --ok:#128a5b; --okbg:#e7f6ef; --err:#b42318; --errbg:#fdecea;
    --warn:#8a5a00; --radius:10px;
}
*{box-sizing:border-box}
body{
    margin:0; background:var(--bg); color:var(--txt);
    font:15px/1.7 "Segoe UI",Tahoma,"Noto Kufi Arabic",Arial,sans-serif;
}
.topbar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    background:var(--card); border-bottom:1px solid var(--line); padding:16px 24px;
}
.topbar h1{font-size:19px; margin:0}
.counter{font-size:13px; color:var(--dim)}
.counter b{color:var(--brand); font-size:15px}

.wrap{max-width:1080px; margin:24px auto; padding:0 16px}
.cols{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start}
@media(max-width:820px){.cols{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.card h2{font-size:15px; margin:0 0 4px}
.card h2+.hint{margin-top:0}
.card h2:not(:first-child){margin-top:22px}
.hint{color:var(--dim); font-size:13px; margin:0 0 10px}
code{background:#eef1f5; padding:1px 5px; border-radius:4px; font-size:12px}

textarea{
    width:100%; padding:12px; border:1px solid var(--line); border-radius:8px;
    font:14px/1.8 inherit; resize:vertical; background:#fbfcfd;
}
textarea:focus,input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:transparent}

.file{
    display:block; text-align:center; padding:22px; cursor:pointer;
    border:2px dashed var(--line); border-radius:8px; color:var(--dim);
    background:#fbfcfd; transition:.15s;
}
.file:hover,.file.over{border-color:var(--brand); color:var(--brand); background:#f2f6ff}
.file input{display:none}

.options{display:flex; flex-wrap:wrap; gap:18px; margin:18px 0; font-size:13.5px}
.options label{display:flex; align-items:center; gap:6px}
.num{width:64px; padding:5px; border:1px solid var(--line); border-radius:6px; text-align:center}

button{
    width:100%; padding:12px; border:0; border-radius:8px; cursor:pointer;
    background:var(--brand); color:#fff; font:600 15px inherit;
}
button:hover{background:#1d4ed8}
button:disabled{background:#9aa5b1; cursor:not-allowed}
.note{color:var(--dim); font-size:12.5px; margin:14px 0 0}

.alert{padding:12px 16px; border-radius:8px; margin-bottom:14px; font-size:14px}
.alert.success{background:var(--okbg); color:var(--ok); border:1px solid #bfe6d4}
.alert.error{background:var(--errbg); color:var(--err); border:1px solid #f6c8c3}

.stats{
    list-style:none; display:grid; gap:10px; margin:0 0 18px; padding:0;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}
.stats li{
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:12px; text-align:center; font-size:12.5px; color:var(--dim);
}
.stats li span{display:block; font-size:20px; font-weight:700; color:var(--txt)}
.stats li.ok span{color:var(--ok)}
.stats li.warn span{color:var(--warn)}

.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th,.tbl td{padding:8px 6px; border-bottom:1px solid var(--line); text-align:right}
.tbl th{color:var(--dim); font-weight:600; font-size:12.5px}
.tbl tr:last-child td{border-bottom:0}
.dim{color:var(--dim); font-size:12px; white-space:nowrap}

/* ---- إعدادات CSV ---- */
.csvbox{
    border:1px solid var(--line); border-radius:8px; padding:12px 14px 6px; margin:16px 0 0;
    background:#fbfcfd;
}
.csvbox legend{font-size:12.5px; color:var(--dim); padding:0 6px}
.csvbox .row{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px}
.csvbox label{display:flex; align-items:center; gap:6px; font-size:13.5px}
.csvbox select{
    padding:6px 8px; border:1px solid var(--line); border-radius:6px;
    background:#fff; font:inherit; font-size:13px;
}
.tiny{font-size:12px; margin:2px 0 8px}
.csvinfo{display:block; margin-top:6px; font-size:12.5px; opacity:.85}

/* ---- لوحة إدارة القاعدة والجداول ---- */
.admin{margin-bottom:18px}
.adminrow{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end; margin-top:12px}
.adminrow form{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0}
.adminrow label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--dim)}
.adminrow select,.adminrow input[type=text]{
    padding:7px 9px; border:1px solid var(--line); border-radius:6px;
    background:#fff; font:inherit; font-size:13.5px; color:var(--txt); min-width:170px;
}
.adminrow .pick{padding-inline-end:20px; border-inline-end:1px solid var(--line)}
button.mini{width:auto; padding:8px 16px; font-size:13.5px}
button.ghost{background:transparent; color:var(--dim); border:1px solid var(--line)}
button.ghost:hover{background:#eef1f5; color:var(--txt)}

/* ---- البحث والحذف ---- */
.undo{margin-bottom:10px}
.searchbox{display:flex; gap:8px; margin-bottom:12px}
.searchbox input[type=search]{
    flex:1; min-width:0; padding:7px 10px; border:1px solid var(--line);
    border-radius:6px; font:inherit; font-size:13.5px; background:#fbfcfd;
}
.btnlink{display:inline-flex; align-items:center; text-decoration:none; border-radius:8px; padding:8px 14px}
button.danger{background:var(--errbg); color:var(--err); border:1px solid #f6c8c3}
button.danger:hover{background:var(--err); color:#fff}
.delall{margin-bottom:12px}
.tbl td form{margin:0}
button.del{
    width:24px; height:24px; padding:0; line-height:1; border-radius:6px;
    background:transparent; color:var(--dim); border:1px solid transparent; font-size:16px;
}
button.del:hover{background:var(--errbg); color:var(--err); border-color:#f6c8c3}
.tbl th:last-child,.tbl td:last-child{width:34px}

/* ---- سجل عمليات الرفع ---- */
.log{margin-bottom:14px; border:1px solid var(--line); border-radius:8px; background:#fbfcfd}
.log summary{cursor:pointer; padding:9px 12px; font-size:13px; color:var(--dim)}
.log summary:hover{color:var(--txt)}
.log[open] summary{border-bottom:1px solid var(--line)}
.logtbl{font-size:12.5px}
.logtbl td{padding:8px 10px; vertical-align:middle}
.logtbl form{margin:0}
.logtbl .src{display:block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.logtbl .num-cell{white-space:nowrap; color:var(--dim)}
.logtbl button.mini{padding:5px 10px; font-size:12px}
.logtbl tr.undone{opacity:.5}
.log .hint{padding:0 12px 8px}

/* ---- المعاينة ومؤشر الانتظار ---- */
.alert.info{background:#eef4ff; color:#1e40af; border:1px solid #c7d7fe}
.preview{margin-bottom:18px; border-color:#c7d7fe}
.samplelist{margin:10px 0 6px; padding-inline-start:22px; font-size:13.5px; line-height:2}
.samplelist li{padding-inline-start:4px}
.badge{
    display:inline-block; min-width:52px; text-align:center; margin-inline-end:8px;
    padding:1px 7px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge.new{background:var(--okbg); color:var(--ok)}
.badge.old{background:#eef1f5; color:var(--dim)}

.actions{display:flex; gap:10px}
.actions button{flex:1}
button.secondary{background:#eef1f5; color:var(--txt)}
button.secondary:hover{background:#e2e6ec}
button.busy{position:relative; opacity:.85; cursor:progress}
button.busy::after{
    content:''; display:inline-block; width:13px; height:13px; margin-inline-start:8px;
    vertical-align:-2px; border:2px solid currentColor; border-top-color:transparent;
    border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.busynote{color:var(--dim); margin-top:8px}