@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;600;700&display=swap');

:root{
  --bg:#f6f3ea;
  --card:#fffdf8;
  --ink:#23301f;
  --muted:#6b6152;
  --green-900:#0f3d2e;
  --green-700:#1f6f4a;
  --green-500:#2f8f5e;
  --gold-600:#a9822f;
  --gold-400:#c9a54e;
  --border:#e4dcc4;
  --border-soft:#ece4cf;
  --danger:#a13b2e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Cairo', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.75;
}
h1,h2,h3,.brand,.post-title{font-family:'Amiri', 'Cairo', serif;}

a{color:var(--green-700)}
a:hover{color:var(--gold-600)}

/* --- Islamic geometric border pattern (repeating 8-point star motif, subtle) --- */
.motif-band{
  height:10px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cg fill='none' stroke='%23c9a54e' stroke-width='1' opacity='0.65'%3E%3Cpath d='M0 5 L5 0 L10 5 L5 10 Z'/%3E%3Cpath d='M10 5 L15 0 L20 5 L15 10 Z'/%3E%3Cpath d='M20 5 L25 0 L30 5 L25 10 Z'/%3E%3Cpath d='M30 5 L35 0 L40 5 L35 10 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:40px 10px;
}

header.site{
  background:linear-gradient(135deg, var(--green-900), var(--green-700));
  color:#fdf9ee;
  position:relative;
}
header.site .inner{max-width:820px;margin:0 auto;padding:2.4rem 1.4rem 1.6rem}
header.site .brand-row{display:flex;align-items:center;gap:0.6rem}
header.site .crescent{font-size:1.6rem;line-height:1;color:var(--gold-400)}
.logo-icon{width:38px;height:38px;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3))}
header.site h1.brand{margin:0;font-size:2.1rem;font-weight:700;letter-spacing:0.01em}
header.site h1.brand a{color:#fdf9ee;text-decoration:none}
header.site .tagline{margin:0.35rem 0 0;color:#d9e8de;font-size:0.92rem;opacity:0.85}

nav.tabs{max-width:820px;margin:0.9rem auto 0;padding:0 1.4rem;display:flex;flex-wrap:wrap;gap:0.4rem}
nav.tabs a{
  background:rgba(253,249,238,0.12);
  border:1px solid rgba(201,165,78,0.4);
  border-radius:7px;padding:0.4rem 0.85rem;font-size:0.9rem;color:#fdf9ee;text-decoration:none;
}
nav.tabs a:hover{background:rgba(201,165,78,0.25)}

.search-box{
  max-width:480px;margin:1.3rem auto 0;display:flex;gap:0;
  background:rgba(253,249,238,0.14);border:1.5px solid var(--gold-400);border-radius:999px;
  padding:0.25rem 0.3rem 0.25rem 1.1rem;box-shadow:0 2px 10px rgba(0,0,0,0.12);
}
.search-box input{
  flex:1;border:none;background:none;color:#fdf9ee;font-family:inherit;font-size:1rem;padding:0.35rem 0.4rem;
}
.search-box input::placeholder{color:#e3ecdf;opacity:0.8}
.search-box input:focus{outline:none}
.search-box button{
  background:var(--gold-400);color:var(--green-900);border:none;border-radius:999px;
  padding:0.5rem 1.2rem;cursor:pointer;font-size:0.9rem;font-weight:700;font-family:'Cairo',sans-serif;
}
.search-box button:hover{background:#dcb968}

.userbar{max-width:820px;margin:0 auto;padding:0.6rem 1.4rem 0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0.5rem 0.9rem;font-size:0.85rem}
.userbar a, .userbar button{color:#fdf9ee;background:none;border:none;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.userbar span{color:#d9e8de}

main{max-width:820px;margin:0 auto;padding:0 1.4rem 3.5rem}
.crumbs{padding:1rem 0 0.4rem;font-size:0.9rem;color:var(--muted)}
.crumbs a{text-decoration:none}

.flash{background:#fbf3d9;border:1px solid var(--gold-400);color:#5c4a12;border-radius:8px;padding:0.7rem 1rem;margin:1rem 0;font-size:0.92rem}

article.post, .card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.8rem 2rem;
  margin-bottom:1.7rem;
  box-shadow:0 1px 3px rgba(31,111,74,0.06);
}
.post-title{margin:0 0 0.3rem;font-size:1.6rem;color:var(--green-900)}
.post-title a{color:inherit;text-decoration:none}
.meta{color:var(--muted);font-size:0.87rem;margin-bottom:1.1rem}
.content{word-wrap:break-word;font-size:1.02rem}
.content img{max-width:100%;height:auto;border-radius:6px}

.labels{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:0.4rem}
.labels a{
  background:#eef3ea;border:1px solid var(--border-soft);color:var(--green-700);
  border-radius:999px;padding:0.2rem 0.75rem;font-size:0.8rem;text-decoration:none;
}
.labels a:hover{background:#e2ecdf}

.list-item{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px dashed var(--border)}
.list-item:last-child{border-bottom:none}
.list-item h3{margin:0 0 0.3rem;font-size:1.25rem}
.list-item h3 a{color:var(--green-900);text-decoration:none}
.list-item .excerpt{color:var(--ink);opacity:0.85}

.archive-year{margin-top:1.8rem}
.archive-year h2{color:var(--green-900);border-bottom:2px solid var(--gold-400);display:inline-block;padding-bottom:0.15rem}
.archive-month{margin:0.7rem 0 1.3rem 0.4rem}
.archive-month h3{margin:0 0 0.4rem;color:var(--muted);font-size:1rem;font-family:inherit}
.archive-month ul{margin:0;padding-left:1.2rem}
.archive-month li{margin-bottom:0.4rem}
.archive-month a{text-decoration:none;color:var(--ink)}
.archive-month a:hover{color:var(--green-700)}

.comments{margin-top:1.6rem;border-top:1px solid var(--border);padding-top:1.1rem}
.comments h3{margin:0 0 0.9rem;font-size:1.15rem;color:var(--green-900)}
.comment{background:#f4f1e6;border-radius:8px;padding:0.75rem 1rem;margin-bottom:0.65rem}
.comment .who{font-weight:600;font-size:0.88rem;color:var(--green-900)}
.comment .when{color:var(--muted);font-size:0.78rem}
.comment-form textarea{
  width:100%;min-height:110px;border:1px solid var(--border);border-radius:8px;padding:0.7rem;
  font-family:inherit;font-size:0.96rem;resize:vertical;
}
.comment-locked{background:#f4f1e6;border-radius:8px;padding:0.9rem 1rem;font-size:0.92rem;color:var(--muted)}
.comment-locked a{font-weight:600}

.btn{
  display:inline-block;background:var(--green-700);color:#fff;border:none;border-radius:8px;
  padding:0.55rem 1.2rem;font-size:0.95rem;cursor:pointer;text-decoration:none;font-family:inherit;
}
.btn:hover{background:var(--green-900);color:#fff}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#7e2c22}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--ink)}
.btn-ghost:hover{background:#f0ece0;color:var(--ink)}
.btn-sm{padding:0.3rem 0.7rem;font-size:0.82rem}

.pager{display:flex;justify-content:space-between;margin:1.6rem 0;font-weight:600}
.pager a{text-decoration:none}

form.auth-form{max-width:420px;margin:0 auto}
form.auth-form .field{margin-bottom:1rem}
form.auth-form label{display:block;margin-bottom:0.3rem;font-size:0.9rem;color:var(--muted)}
form.auth-form input{
  width:100%;border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.75rem;font-size:1rem;font-family:inherit;
}
form.auth-form input:focus{outline:2px solid var(--gold-400);border-color:var(--gold-400)}

table.admin-table{width:100%;border-collapse:collapse;font-size:0.92rem}
table.admin-table th, table.admin-table td{text-align:left;padding:0.6rem 0.5rem;border-bottom:1px solid var(--border)}
table.admin-table th{color:var(--muted);font-weight:600;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.03em}
table.admin-table tr:hover td{background:#f7f4e9}

.admin-shell{display:flex;gap:2rem;max-width:1060px;margin:0 auto;padding:0 1.4rem 3rem}
.admin-side{width:190px;flex-shrink:0}
.admin-side a{display:block;padding:0.5rem 0.7rem;border-radius:7px;color:var(--ink);text-decoration:none;font-size:0.92rem;margin-bottom:0.15rem}
.admin-side a:hover, .admin-side a.active{background:var(--green-700);color:#fff}
.admin-main{flex:1;min-width:0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.6rem}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1.1rem}
.stat-card .n{font-size:1.8rem;font-weight:700;color:var(--green-800,var(--green-700))}
.stat-card .l{color:var(--muted);font-size:0.85rem}

.form-grid{max-width:760px}
.form-grid .field{margin-bottom:1.1rem}
.form-grid label{display:block;margin-bottom:0.35rem;font-weight:600;font-size:0.9rem;color:var(--green-900)}
.form-grid input[type=text], .form-grid textarea{
  width:100%;border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.75rem;font-family:inherit;font-size:0.98rem;
}
.form-grid textarea{min-height:320px;resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:0.88rem}
.hint{color:var(--muted);font-size:0.82rem;margin-top:0.3rem}

.badge{display:inline-block;padding:0.15rem 0.55rem;border-radius:999px;font-size:0.75rem;font-weight:600}
.badge-pending{background:#fbf0d2;color:#8a6a10}
.badge-approved{background:#e1f0e4;color:#1f6f4a}
.badge-rejected{background:#f5dede;color:#a13b2e}
.badge-admin{background:#e6ddf7;color:#5b3aa6}

.surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0.8rem}
.surah-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:0.15rem;position:relative;
  transition:border-color 0.15s,box-shadow 0.15s;
}
.surah-card:hover{border-color:var(--gold-400);box-shadow:0 2px 8px rgba(31,111,74,0.1)}
.surah-no{
  position:absolute;top:0.7rem;right:0.8rem;background:var(--green-700);color:#fff;font-size:0.72rem;
  width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.surah-name{font-family:'Amiri',serif;font-size:1.15rem;color:var(--green-900);font-weight:700;padding-right:1.8rem}
.surah-ar{font-family:'Amiri',serif;font-size:1.1rem;color:var(--gold-600);direction:rtl}
.surah-meta{font-size:0.78rem;color:var(--muted);margin-top:0.2rem}

.quran-toolbar{display:flex;flex-wrap:wrap;gap:0.8rem;align-items:center;padding:1rem 1.3rem}
.surah-select{padding:0.5rem 0.7rem;border:1px solid var(--border);border-radius:7px;font-family:inherit;font-size:0.92rem}
.quran-ar-title{font-size:1.2rem;color:var(--gold-600);margin-right:0.6rem;direction:rtl}
.quran-besmele{
  text-align:center;font-family:'Amiri',serif;font-size:1.7rem;color:var(--green-900);
  margin:0.4rem 0 1.4rem;direction:rtl;
}
.quran-text{
  direction:rtl;text-align:justify;font-family:'Amiri',serif;font-size:1.55rem;line-height:2.6;color:var(--ink);
}
.quran-text .ayah-no{color:var(--gold-600);font-size:1.05rem;font-family:'Cairo',sans-serif}

footer.site{text-align:center;color:var(--muted);font-size:0.85rem;padding:2.2rem 1rem 2.6rem}
footer.site .crescent{color:var(--gold-600)}

.card{overflow-x:auto}

@media (max-width:640px){
  .admin-shell{flex-direction:column}
  .admin-side{width:100%}
  article.post,.card{padding:1.3rem 1.3rem}

  header.site .inner{padding:1.6rem 1rem 1.2rem}
  header.site h1.brand{font-size:1.5rem}
  .logo-icon{width:30px;height:30px}
  .search-box{max-width:100%}
  .search-box input{font-size:0.92rem}
  nav.tabs{padding:0 1rem;gap:0.3rem}
  nav.tabs a{padding:0.32rem 0.65rem;font-size:0.82rem}
  .userbar{padding:0.5rem 1rem 0;font-size:0.8rem}
  main{padding:0 1rem 2.5rem}

  .post-title{font-size:1.3rem}
  .content{font-size:0.97rem}

  .surah-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .quran-toolbar{padding:0.9rem 1rem}
  .quran-text{font-size:1.15rem;line-height:2.3}
  .quran-besmele{font-size:1.3rem}

  table.admin-table{font-size:0.85rem}
  table.admin-table th,table.admin-table td{padding:0.5rem 0.35rem}
}