*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,Arial,sans-serif;background:#f4f1ec;color:#222;direction:rtl}
a{color:inherit;text-decoration:none}
header.top{background:#2b2118;color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
header.top h1{margin:0;font-size:20px}
.wrap{max-width:1100px;margin:20px auto;padding:0 16px}
.search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.search input,.search select,.form input,.form select,.form textarea{padding:10px;border:1px solid #ccc;border-radius:8px;font:inherit;width:100%}
.search input,.search select{width:auto;flex:1;min-width:140px}
.btn{background:#8a5a2b;color:#fff;border:0;border-radius:8px;padding:10px 18px;cursor:pointer;font:inherit;display:inline-block}
.btn.red{background:#b3261e}.btn.gray{background:#666}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px #0002;transition:.2s}
.card:hover{transform:translateY(-4px)}
.cover{aspect-ratio:3/4;background:linear-gradient(135deg,#8a5a2b,#2b2118);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-weight:bold}
.cover img{width:100%;height:100%;object-fit:cover}
.card .info{padding:10px;font-size:14px}
.card .info small{color:#777;display:block}
.box{background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px #0002;margin-bottom:20px}
.form label{display:block;margin:12px 0 4px;font-weight:bold}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:10px;border-bottom:1px solid #eee;text-align:right;font-size:14px}
.msg{padding:10px;border-radius:8px;margin-bottom:14px}
.msg.ok{background:#e3f6e5}.msg.err{background:#fde4e2}

/* reader */
body.reader{background:#1d1d1f;color:#fff;overflow:hidden}
#stage{height:calc(100vh - 112px);display:flex;align-items:center;justify-content:center;direction:ltr}
#book{margin:auto}
.bar{height:56px;display:flex;align-items:center;justify-content:center;gap:12px;background:#111}
.bar button{background:#333;color:#fff;border:0;border-radius:8px;padding:8px 16px;cursor:pointer;font:inherit}
#loader{position:fixed;inset:56px 0 56px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#1d1d1f;z-index:5}
#progress{width:260px;height:8px;background:#444;border-radius:4px;overflow:hidden}
#progress div{height:100%;width:0;background:#c98b4a}