/* ============================================================
   ريشة — Reesha | Design tokens
   لوحة الألوان: حبر أزرق داكن + ورق كريمي + أزرق لازوردي + أوكر
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Tajawal:wght@300;400;500;700;900&display=swap');

:root{
  --ink:        #14181F;   /* خلفية داكنة أساسية */
  --ink-soft:   #1D2330;   /* بطاقات على الخلفية الداكنة */
  --ink-line:   #313847;   /* خطوط فاصلة على الداكن */
  --paper:      #F6F1E7;   /* ورق كريمي للأقسام الفاتحة */
  --paper-dim:  #ECE5D3;
  --paper-line: #DDD3B8;
  --pigment:    #3159A0;   /* أزرق لازوردي - اللون الأساسي */
  --pigment-2:  #4670C7;
  --ochre:      #C98A3B;   /* أوكر - لون ثانوي */
  --madder:     #A63446;   /* أحمر مداد - للإعجاب/تنبيه */
  --text-onink: #ECE7D8;
  --text-onink-dim: #A9AEBB;
  --text-onpaper: #1B1B18;
  --text-onpaper-dim: #6B6558;
  --radius: 14px;
  --shadow: 0 12px 30px -12px rgba(20,24,31,.35);
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text-onink);
  font-family:'Tajawal',system-ui,sans-serif;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:'Aref Ruqaa',serif; font-weight:700; margin:0 0 .3em; line-height:1.25; }
p{ margin:0 0 1em; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--ochre); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* ---------- برواز شعار: ريشة تكتب خط الحبر ---------- */
.brush-underline{
  display:block;
  width:100%;
  height:14px;
  overflow:visible;
}
.brush-underline path{
  fill:none;
  stroke:var(--ochre);
  stroke-width:6;
  stroke-linecap:round;
  stroke-dasharray:340;
  stroke-dashoffset:340;
  animation:draw-ink 1.1s var(--ease) forwards;
}
@keyframes draw-ink{ to{ stroke-dashoffset:0; } }

/* ================= NAVBAR ================= */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,24,31,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Aref Ruqaa',serif; font-size:1.7rem; }
.brand svg{ width:34px; height:34px; }
.nav-links{ display:flex; gap:6px; align-items:center; }
.nav-links a{
  position:relative;
  padding:10px 16px;
  font-size:.98rem;
  color:var(--text-onink-dim);
  transition:color .2s;
}
.nav-links a svg{ display:none; }
.nav-links a::after{
  content:"";
  position:absolute; right:16px; left:16px; bottom:4px; height:3px;
  background:var(--ochre);
  border-radius:3px;
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{ color:var(--text-onink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--text-onink); }
.nav-links a.active::after{ transform:scaleX(1); }

.nav-auth{ display:flex; align-items:center; gap:12px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:.95rem; transition:transform .2s var(--ease), background .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--ochre); color:#1B1408; }
.btn-primary:hover{ background:#DA9B4C; box-shadow:0 8px 20px -8px rgba(201,138,59,.6); }
.btn-outline{ border-color:var(--ink-line); color:var(--text-onink); }
.btn-outline:hover{ border-color:var(--ochre); color:var(--ochre); }
.btn-ghost{ color:var(--text-onink-dim); padding:8px 10px; }
.btn-ghost:hover{ color:var(--text-onink); }
.btn-danger-ghost{ color:var(--madder); }

.user-chip{ display:flex; align-items:center; gap:10px; padding:6px 8px 6px 16px; border-radius:999px; background:var(--ink-soft); border:1px solid var(--ink-line); }
.user-chip img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.user-chip span{ font-size:.9rem; font-weight:700; }

/* ================= BUTTONS: Google ================= */
.g-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--paper); color:var(--text-onpaper);
  padding:11px 20px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1px solid var(--paper-line);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.g-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.g-btn svg{ width:19px; height:19px; }

/* ================= HERO ================= */
.hero{
  position:relative;
  padding:96px 0 70px;
  overflow:hidden;
}
.hero-grain{
  position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:radial-gradient(circle at 20% 20%, #fff 0, transparent 55%),
                    radial-gradient(circle at 80% 60%, #fff 0, transparent 50%);
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ochre); font-weight:700; font-size:.85rem;
  letter-spacing:.5px; margin-bottom:18px;
}
.hero .eyebrow::before{ content:""; width:22px; height:2px; background:var(--ochre); }
.hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); max-width:14ch; color:var(--text-onink); }
.hero h1 em{ font-style:normal; color:var(--ochre); }
.hero p.lead{ max-width:52ch; color:var(--text-onink-dim); font-size:1.12rem; }
.hero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:48px; flex-wrap:wrap; }
.hero-stats div b{ display:block; font-family:'Aref Ruqaa',serif; font-size:1.9rem; color:var(--ochre); }
.hero-stats div span{ color:var(--text-onink-dim); font-size:.88rem; }

/* ================= SECTIONS ================= */
section{ padding:70px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.section-head h2{ font-size:2rem; }
.section-head p{ color:var(--text-onink-dim); margin:6px 0 0; max-width:56ch; }
.section-head .brush-underline{ width:180px; margin-top:8px; }

.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  padding:8px 18px; border-radius:999px; border:1px solid var(--ink-line);
  color:var(--text-onink-dim); font-size:.88rem; font-weight:700; transition:.2s;
  background:transparent;
}
.chip:hover{ border-color:var(--ochre); color:var(--text-onink); }
.chip.active{ background:var(--pigment); border-color:var(--pigment); color:#fff; }

/* ================= GALLERY (masonry) ================= */
.masonry{
  columns:4 220px; column-gap:18px;
}
@media (max-width:1000px){ .masonry{ columns:3 200px; } }
@media (max-width:680px){ .masonry{ columns:2 160px; } }

.art-card{
  break-inside:avoid; margin:0 0 18px; border-radius:var(--radius);
  overflow:hidden; position:relative; background:var(--ink-soft);
  border:1px solid var(--ink-line);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.art-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.art-card img{ width:100%; height:auto; }
.art-card .art-meta{
  position:absolute; inset:auto 0 0 0; padding:16px 14px 12px;
  background:linear-gradient(to top, rgba(14,16,20,.92), transparent 90%);
  opacity:0; transform:translateY(6px);
  transition:opacity .25s, transform .25s;
}
.art-card:hover .art-meta{ opacity:1; transform:translateY(0); }
.art-meta strong{ display:block; font-size:.95rem; }
.art-meta .by{ font-size:.78rem; color:var(--text-onink-dim); display:flex; align-items:center; gap:6px; margin-top:2px; }
.art-meta .by img{ width:18px; height:18px; border-radius:50%; }
.art-badge{
  position:absolute; top:10px; right:10px; background:rgba(20,24,31,.75);
  color:var(--ochre); font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px;
  backdrop-filter:blur(4px);
}
.art-like{
  position:absolute; top:10px; left:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(20,24,31,.6); display:flex; align-items:center; justify-content:center;
  color:var(--text-onink); transition:.2s;
}
.art-like:hover{ background:var(--madder); color:#fff; }
.art-like.liked{ background:var(--madder); color:#fff; }
.art-like svg{ width:16px; height:16px; }

.empty-state{
  text-align:center; padding:70px 20px; color:var(--text-onink-dim);
  border:1px dashed var(--ink-line); border-radius:var(--radius);
}
.empty-state h3{ color:var(--text-onink); margin-bottom:8px; }

/* ================= PAPER SECTION (light) ================= */
.paper-section{ background:var(--paper); color:var(--text-onpaper); }
.paper-section .section-head p, .paper-section .text-dim{ color:var(--text-onpaper-dim); }
.category-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.category-card{
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius);
  padding:24px 20px; transition:.25s var(--ease);
}
.category-card:hover{ transform:translateY(-3px); border-color:var(--ochre); }
.category-card b{ font-family:'Aref Ruqaa',serif; font-size:1.25rem; display:block; margin-bottom:4px; }
.category-card span{ color:var(--text-onpaper-dim); font-size:.85rem; }

/* ================= FOOTER ================= */
footer{ border-top:1px solid var(--ink-line); padding:44px 0; margin-top:40px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer .brand{ font-size:1.3rem; }
footer p{ color:var(--text-onink-dim); font-size:.85rem; margin:0; }

/* ================= FORMS ================= */
.field{ margin-bottom:22px; }
.field label{ display:block; font-weight:700; margin-bottom:8px; font-size:.92rem; }
.field .hint{ color:var(--text-onink-dim); font-size:.8rem; margin-top:6px; }
input[type=text], input[type=email], input[type=search], textarea, select{
  width:100%; padding:13px 16px; border-radius:10px;
  border:1px solid var(--ink-line); background:var(--ink-soft); color:var(--text-onink);
  font-family:inherit; font-size:.98rem; transition:border-color .2s;
}
.paper-section input, .paper-section textarea, .paper-section select{
  background:#fff; border-color:var(--paper-line); color:var(--text-onpaper);
}
input:focus, textarea:focus, select:focus{ border-color:var(--ochre); outline:none; }
textarea{ resize:vertical; min-height:120px; }

.tag-input{ display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--ink-line); border-radius:10px; background:var(--ink-soft); }
.tag-input input{ border:none; background:none; flex:1; min-width:120px; padding:6px; }
.tag-pill{ background:var(--pigment); color:#fff; padding:5px 12px; border-radius:999px; font-size:.82rem; display:flex; align-items:center; gap:6px; }
.tag-pill button{ background:none; border:none; color:#fff; font-size:1rem; line-height:1; opacity:.8; }

.dropzone{
  border:2px dashed var(--ink-line); border-radius:var(--radius); padding:50px 20px;
  text-align:center; transition:.2s; cursor:pointer; position:relative; overflow:hidden;
}
.dropzone.drag{ border-color:var(--ochre); background:rgba(201,138,59,.06); }
.dropzone svg{ width:44px; height:44px; color:var(--ochre); margin-bottom:14px; }
.dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.dropzone-preview{ position:relative; }
.dropzone-preview img{ width:100%; max-height:420px; object-fit:contain; border-radius:10px; }
.dropzone-preview .remove-img{
  position:absolute; top:10px; left:10px; background:var(--madder); color:#fff;
  border:none; border-radius:999px; width:32px; height:32px;
}

.publish-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:flex-start; }
@media (max-width:860px){ .publish-grid{ grid-template-columns:1fr; } }

/* ================= ACCOUNT ================= */
.profile-head{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.profile-head img{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--ochre); }
.profile-head h1{ margin-bottom:4px; }
.profile-stats{ display:flex; gap:26px; margin-top:14px; }
.profile-stats b{ font-family:'Aref Ruqaa',serif; color:var(--ochre); }
.signin-gate{ text-align:center; padding:110px 20px; }
.signin-gate svg{ width:60px; height:60px; color:var(--ochre); margin-bottom:20px; }

/* ================= RESPONSIVE NAV ================= */
@media (max-width:780px){
  .site-nav .wrap{ height:auto; flex-wrap:wrap; padding:14px 20px; row-gap:10px; }
  .nav-links{ order:3; width:100%; overflow-x:auto; justify-content:flex-start; gap:2px; }
  .nav-links a{ padding:8px 12px; font-size:.9rem; }
  .masonry{ columns:2 150px; }
}

/* ================= AUTH CARD (login.html) ================= */
.auth-wrap{ min-height:calc(100vh - 76px); display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.auth-card{
  width:100%; max-width:440px; background:var(--ink-soft); border:1px solid var(--ink-line);
  border-radius:20px; padding:36px 34px; box-shadow:var(--shadow);
}
.auth-card h1{ font-size:1.9rem; text-align:center; }
.auth-card > p{ text-align:center; color:var(--text-onink-dim); margin-bottom:26px; }
.tab-switch{ display:flex; background:var(--ink); border-radius:999px; padding:4px; margin-bottom:26px; }
.tab-switch button{
  flex:1; border:none; background:none; color:var(--text-onink-dim); font-weight:700;
  padding:10px; border-radius:999px; transition:.2s;
}
.tab-switch button.active{ background:var(--ochre); color:#1B1408; }
.auth-form{ display:none; }
.auth-form.active{ display:block; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--text-onink-dim); font-size:.85rem; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--ink-line); }
.auth-error{ background:rgba(166,52,70,.12); border:1px solid var(--madder); color:#F0AEB5; padding:10px 14px; border-radius:10px; font-size:.88rem; margin-bottom:16px; display:none; }
.auth-error.show{ display:block; }
.avatar-upload{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.avatar-upload .circle{
  width:76px; height:76px; border-radius:50%; overflow:hidden; position:relative;
  background:var(--ink); border:2px dashed var(--ink-line); flex:none;
  display:flex; align-items:center; justify-content:center; color:var(--text-onink-dim);
}
.avatar-upload .circle img{ width:100%; height:100%; object-fit:cover; display:none; }
.avatar-upload .circle.has-img img{ display:block; }
.avatar-upload .circle.has-img svg{ display:none; }
.avatar-upload .circle input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.g-btn.full{ width:100%; justify-content:center; }

/* ================= ADMIN ================= */
.admin-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:44px; }
.admin-stat{ background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:var(--radius); padding:22px; }
.admin-stat b{ font-family:'Aref Ruqaa',serif; font-size:2rem; color:var(--ochre); display:block; }
.admin-stat span{ color:var(--text-onink-dim); font-size:.85rem; }
.admin-table{ width:100%; border-collapse:collapse; }
.admin-table th, .admin-table td{ text-align:right; padding:12px 14px; border-bottom:1px solid var(--ink-line); font-size:.92rem; }
.admin-table th{ color:var(--text-onink-dim); font-weight:700; font-size:.82rem; }
.admin-table img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.admin-table tr:hover{ background:rgba(255,255,255,.02); }
.badge-role{ padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-admin{ background:var(--madder); color:#fff; }
.badge-user{ background:var(--ink-line); color:var(--text-onink-dim); }
.table-scroll{ overflow-x:auto; border:1px solid var(--ink-line); border-radius:var(--radius); margin-bottom:50px; }

/* ================= UTIL ================= */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--pigment); color:#fff; padding:14px 26px; border-radius:999px;
  font-weight:700; box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:.3s var(--ease); z-index:100; font-size:.9rem;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }