/* =========================================================
   نظام الرومنة — Shared Design System
   Dark-first, KAFD-inspired glass aesthetic, with light mode.
   ========================================================= */
:root{
  --bg: #060a12;
  --bg-2: #0c1220;
  --surface: #10192b;
  --surface-2: #152036;
  --glass: rgba(14,20,36,0.42);
  --glass-strong: rgba(14,20,36,0.68);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --text: #eef2f7;
  --text-dim: #8b96ab;
  --text-faint: #5c6478;
  --accent: #35d0c2;
  --accent-bright: #5eeade;
  --accent-2: #e8b04b;
  --accent-2-bright: #f9d27d;
  --danger: #e0685a;
  --success: #4fbf8b;
  --radius-pill: 999px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  --glow-accent: 0 0 0 1px rgba(53,208,194,0.25), 0 8px 30px -6px rgba(53,208,194,0.35);
  --glow-gold: 0 0 24px -4px rgba(232,176,75,0.5);
  --sheen: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.14) 48%, transparent 66%);
}
[data-theme="light"]{
  --bg: #eef1f6;
  --bg-2: #f7f9fb;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --glass: rgba(255,255,255,0.55);
  --glass-strong: rgba(255,255,255,0.78);
  --border: rgba(10,14,20,0.09);
  --border-strong: rgba(10,14,20,0.16);
  --text: #0e131c;
  --text-dim: #57607a;
  --text-faint: #8890a3;
  --accent: #0f9c8c;
  --accent-bright: #0c7d70;
  --accent-2: #c98a1f;
  --accent-2-bright: #a76f14;
  --glow-accent: 0 0 0 1px rgba(15,156,140,0.18), 0 8px 26px -8px rgba(15,156,140,0.28);
  --glow-gold: 0 0 22px -6px rgba(201,138,31,0.35);
  --shadow: 0 20px 50px -22px rgba(20,30,50,0.25);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family:'Tajawal','Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  transition: background .3s ease, color .3s ease;
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:#04151a;}

.eyebrow{
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-bright); margin-bottom:10px; display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--accent); display:inline-block;}

h1,h2,h3{font-family:'Cairo',sans-serif; margin:0;}

/* ---------- Floating glass navbar (signature element) ---------- */
.site-nav{
  position:fixed; top:18px; left:18px; right:18px; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:9px 10px 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border:1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.03);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
  max-width:1180px; margin:0 auto;
  overflow:hidden;
}
.site-nav::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: radial-gradient(120% 200% at 15% -60%, rgba(255,255,255,0.16), transparent 55%);
}
.site-nav.scrolled{
  background: var(--glass-strong);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.16);
}
.nav-brand{
  display:flex; align-items:center; gap:10px; font-family:'Cairo',sans-serif; font-weight:700; font-size:16px;
  color:var(--text); flex-shrink:0; position:relative;
}
.nav-brand .mark{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center; color:var(--accent-bright);
  font-family:'Cairo',sans-serif; font-size:14px; flex-shrink:0;
  box-shadow: var(--glow-accent);
}
.nav-links{display:flex; align-items:center; gap:4px; font-size:14px; position:relative;}
.nav-links a{
  padding:9px 16px; border-radius:var(--radius-pill); color:var(--text-dim);
  transition: all .18s ease; font-weight:500; white-space:nowrap; position:relative;
}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,0.06);}
.nav-links a.active{color: var(--bg); background:linear-gradient(135deg, var(--accent-bright), var(--accent)); box-shadow: var(--glow-accent); font-weight:700;}
[data-theme="light"] .nav-links a.active{color:#fff;}

.nav-user{position:relative; flex-shrink:0;}
.avatar-btn{
  width:38px; height:38px; border-radius:50%; cursor:pointer; border:1.5px solid var(--border-strong);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#04151a; font-family:'Cairo',sans-serif; font-weight:700; font-size:14px;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--glow-gold);
}
.avatar-btn:hover{transform:scale(1.07); box-shadow: var(--glow-accent), var(--glow-gold);}
.user-menu{
  position:absolute; top:calc(100% + 12px); left:0; min-width:240px;
  background:var(--glass-strong); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.12);
  padding:14px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition: all .18s ease; z-index:210;
}
.nav-user.open .user-menu, .nav-user:hover .user-menu{opacity:1; visibility:visible; transform:translateY(0);}
.user-menu-header{display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--border);}
.user-menu-header .avatar-btn{cursor:default;}
.user-menu-name{font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; color:var(--text);}
.user-menu-sub{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
.user-menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 8px; border-radius:9px; font-size:13.5px; color:var(--text-dim); cursor:pointer;
  transition: background .15s ease;
}
.user-menu-item:hover{background:rgba(255,255,255,0.06); color:var(--text);}
.login-form{display:flex; flex-direction:column; gap:8px;}
.login-form input{
  background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-family:'Tajawal',sans-serif; font-size:13px; padding:8px 10px;
}
.login-form input:focus{outline:none; border-color:var(--accent);}
.btn-mini{
  font-family:'Tajawal',sans-serif; font-size:13px; font-weight:700; padding:8px 10px;
  border-radius:8px; border:none; cursor:pointer; background:var(--accent); color:#04151a;
}
.toggle-switch{
  width:38px; height:22px; border-radius:999px; background:var(--border-strong); position:relative; cursor:pointer; flex-shrink:0;
  transition: background .2s ease;
}
.toggle-switch.on{background:var(--accent);}
.toggle-switch .knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff;
  transition: transform .2s ease;
}
.toggle-switch.on .knob{transform:translateX(16px);}
.demo-note{font-size:10.5px; color:var(--text-faint); line-height:1.6; margin-top:10px; padding-top:10px; border-top:1px solid var(--border);}
.auth-error{font-size:11.5px; color:var(--danger); min-height:14px; line-height:1.5;}
.auth-switch{font-size:11.5px; color:var(--text-faint); text-align:center; margin-top:2px;}
.auth-switch a{color:var(--accent-bright); font-weight:700; cursor:pointer;}

/* ---------- Generic page shell ---------- */
.page-shell{max-width:1180px; margin:0 auto; padding:120px 20px 80px;}
.glass-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: 0 30px 60px -35px rgba(0,0,0,0.5);
}
[data-theme="light"] .glass-card{box-shadow:0 20px 40px -28px rgba(20,30,50,0.18);}

.btn{
  font-family:'Tajawal',sans-serif; font-size:14px; font-weight:600;
  padding:11px 20px; border-radius:var(--radius-pill); cursor:pointer;
  border:1px solid var(--border-strong); background:transparent; color:var(--text-dim);
  transition:all .18s ease; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{border-color:var(--accent); color:var(--text);}
.btn.primary{
  background:linear-gradient(135deg, var(--accent-bright), var(--accent));
  color:#04151a; border-color:transparent; font-weight:700; box-shadow:var(--glow-accent);
  position:relative; overflow:hidden;
}
.btn.primary::after{
  content:""; position:absolute; inset:0; background:var(--sheen); transform:translateX(-120%);
  transition: transform .6s ease;
}
.btn.primary:hover::after{transform:translateX(120%);}
.btn.primary:hover{filter:brightness(1.06); box-shadow:var(--glow-accent), var(--glow-gold);}
.btn.small{padding:7px 14px; font-size:12.5px;}
.btn.danger{color:var(--danger); border-color:rgba(224,104,90,0.4);}

footer.site-footer{
  max-width:1180px; margin:0 auto; padding:40px 20px 60px; text-align:center;
  color:var(--text-faint); font-size:12.5px; border-top:1px solid var(--border); margin-top:60px;
}

[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].revealed{opacity:1; transform:translateY(0);}
[data-reveal="1"].revealed{transition-delay:.05s;}
[data-reveal="2"].revealed{transition-delay:.15s;}
[data-reveal="3"].revealed{transition-delay:.25s;}
[data-reveal="4"].revealed{transition-delay:.35s;}