* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }

body { background: #f0f2f5; color: #1c1e21; min-height: 100vh; }

header {
    background: linear-gradient(135deg, #1a2a6c, #2d4373);
    color: #fff; text-align: center; padding: 28px 16px;
}
header h1 { font-size: 1.6rem; margin-bottom: 6px; }
header p { opacity: .85; font-size: .95rem; }

main { max-width: 1100px; margin: 20px auto; padding: 0 14px; display: grid; gap: 18px; }

.card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.07); }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row.small { margin-top: 10px; align-items: center; }
.row.small label { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.row.small input { width: 130px; }

input[type="text"] {
    flex: 1; min-width: 200px; padding: 11px 14px;
    border: 1.5px solid #d0d4da; border-radius: 10px; font-size: 1rem;
}
input[type="text"]:focus { outline: none; border-color: #2d4373; }

.btn {
    padding: 11px 18px; border: 1.5px solid #d0d4da; border-radius: 10px;
    background: #fff; cursor: pointer; font-size: .95rem; transition: .15s;
}
.btn:hover { background: #f5f6f8; }
.btn.primary { background: #2d4373; border-color: #2d4373; color: #fff; }
.btn.primary:hover { background: #1a2a6c; }
.btn.primary:disabled { opacity: .6; cursor: wait; }
.btn.ghost { border-style: dashed; color: #666; width: 100%; margin-top: 10px; }

.advanced { margin-top: 12px; font-size: .9rem; color: #444; }
.advanced summary { cursor: pointer; color: #2d4373; }

.hint { color: #7a7f87; font-size: .85rem; margin-top: 8px; }

.status { margin-top: 12px; padding: 11px 14px; border-radius: 10px; font-size: .95rem; }
.status.info  { background: #e8f0fe; color: #1a4a8a; }
.status.ok    { background: #e6f6e9; color: #1d6f31; }
.status.error { background: #fdeaea; color: #a12525; }
.hidden { display: none !important; }

/* -------- النتائج -------- */
.result-head { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.result-head input { flex: 1; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.result-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 850px) { .result-body { grid-template-columns: 1fr; } }

.player-wrap iframe, #player { width: 100%; aspect-ratio: 16/9; border-radius: 10px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: #f5f6f8; padding: 9px; font-size: .85rem; color: #555; text-align: right; }
td { padding: 5px 6px; border-bottom: 1px solid #eef0f3; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f8f9fb; }

.cell { width: 100%; border: 1px solid transparent; border-radius: 7px; padding: 7px 9px; font-size: .95rem; background: transparent; }
.cell:focus { outline: none; border-color: #2d4373; background: #fff; }
.cell.q { width: 70px; text-align: center; font-weight: 600; }
.cell.time { width: 110px; text-align: center; font-family: monospace; font-size: 1rem; }

.row-actions { white-space: nowrap; }
.mini {
    border: none; background: #eef0f3; border-radius: 7px;
    width: 30px; height: 30px; cursor: pointer; margin-inline-start: 4px;
}
.mini:hover { background: #dde1e6; }
.mini.del:hover { background: #fdeaea; color: #a12525; }

/* -------- المحفوظات -------- */
#savedCard h2 { font-size: 1.1rem; margin-bottom: 12px; }
.saved-list { display: grid; gap: 10px; }
.saved-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px; border: 1px solid #e6e8ec; border-radius: 10px; cursor: pointer;
}
.saved-item:hover { background: #f8f9fb; }
.saved-item img { width: 96px; border-radius: 8px; }
.saved-item .meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.saved-item .meta span { color: #7a7f87; font-size: .85rem; }