/* GoldrArt — site/styles.css | Created By: Dr.Maru_Faltas
   Modern eye-comfort typography: Alexandria/Cairo (display) + Tajawal/Plex Sans Arabic (body) + Inter/Sora (latin/numbers) */
[hidden]{display:none!important}
:root{
  --bg:#09090D; --bg2:#101018; --panel:rgba(23,23,31,.78); --panel-solid:#17171F;
  --line:rgba(212,175,55,.24); --gold:#D4AF37; --gold2:#F4E4B0; --gold-deep:#9a7a1e;
  --violet:#8B5CF6; --cyan:#67E8F9; --green:#22C55E; --red:#EF4444;
  --txt:#F7F7FA; --muted:#A1A1AA; --radius:16px;
  --display:"Alexandria","Cairo","Tajawal",sans-serif;
  --font:"Tajawal","IBM Plex Sans Arabic","Cairo","Inter",system-ui,"Segoe UI",Arial,sans-serif;
  --num:"Inter","Sora","IBM Plex Sans Arabic",system-ui,sans-serif;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="light"]{
  --bg:#FAF7EF; --bg2:#FFFFFF; --panel:rgba(255,255,255,.88); --panel-solid:#FFFFFF;
  --line:rgba(150,110,20,.3); --txt:#1B1B22; --muted:#5B5B66;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--txt); line-height:1.9; font-size:16px;
  background:var(--bg); min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.bg-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.bg-orbs span{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.bg-orbs span:nth-child(1){width:520px;height:520px;inset-inline-end:-120px;top:-140px;background:radial-gradient(circle,rgba(212,175,55,.35),transparent 65%)}
.bg-orbs span:nth-child(2){width:620px;height:620px;inset-inline-start:-160px;top:6%;background:radial-gradient(circle,rgba(139,92,246,.32),transparent 65%)}
.bg-orbs span:nth-child(3){width:560px;height:560px;inset-inline-start:30%;bottom:-220px;background:radial-gradient(circle,rgba(103,232,249,.2),transparent 65%)}
[data-theme="light"] .bg-orbs{opacity:.35}
h1,h2,h3,.brand b,.hero-title{font-family:var(--display); letter-spacing:0}
.num,.price,td.n,.price-big,.between span:last-child,.kpi .v{font-family:var(--num); font-variant-numeric:tabular-nums lining-nums}
a{color:var(--gold2)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:8px}

/* ===== Developer credit: thick luxurious glowing + gold verified badge ===== */
.dev-credit{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.dev-name{
  font-family:var(--display); font-weight:900;
  background:linear-gradient(100deg,#8a6d1c 0%,var(--gold) 22%,#fff6d8 38%,var(--gold2) 50%,#fff6d8 62%,var(--gold) 78%,#8a6d1c 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 5s linear infinite;
  filter:drop-shadow(0 0 10px rgba(212,175,55,.55)) drop-shadow(0 2px 14px rgba(212,175,55,.3));
}
.dev-name.sm{font-size:13px}
@keyframes shine{to{background-position:220% center}}
.verified{width:20px; height:20px; color:#111; background:linear-gradient(135deg,#fff0c0,var(--gold) 60%,var(--gold-deep));
  border-radius:50%; padding:2px; box-shadow:0 0 12px rgba(212,175,55,.8),0 0 3px rgba(212,175,55,.9)}
.verified.sm{width:16px; height:16px}
.verified svg,.verified.lucide{width:100%; height:100%}
.dev-credit.big{font-size:clamp(17px,2.6vw,23px); margin-top:10px}

/* ===== Login stage ===== */
.login-stage{min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
  max-width:1180px; margin:0 auto; padding:32px 22px}
.login-hero{text-align:center; padding:12px}
.hero-logo{width:92px; height:92px; margin:0 auto 18px; border-radius:28px; display:grid; place-items:center;
  font-family:var(--display); font-weight:900; font-size:52px; color:#171106;
  background:linear-gradient(135deg,#fff0c0,var(--gold) 55%,var(--gold-deep));
  box-shadow:0 0 0 1px rgba(212,175,55,.5),0 18px 60px rgba(212,175,55,.4),0 0 90px rgba(139,92,246,.25)}
.hero-title{font-size:clamp(40px,6vw,68px); font-weight:900; line-height:1.25; margin:0}
.hero-title span{background:linear-gradient(135deg,var(--gold2),var(--gold) 50%,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{color:var(--muted); font-size:clamp(15px,2.2vw,18px); max-width:46ch; margin:10px auto 0}
.login-card{max-width:440px; width:100%; margin:0 auto}
.login-card h2{display:flex; align-items:center; gap:10px; margin-top:0}
.login-card h2 svg{width:22px; height:22px; color:var(--gold)}
.login-card label{display:grid; gap:6px; margin:10px 0; font-size:14px}
.linklike{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px;
  background:none; border:none; color:var(--cyan); cursor:pointer; font-family:var(--font); font-size:14px; padding:8px}
.linklike:hover{text-decoration:underline}
.linklike svg{width:16px; height:16px}
.login-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px;
  padding-top:12px; border-top:1px dashed var(--line); font-size:12.5px; color:var(--muted)}

/* ===== App shell ===== */
.app{display:grid; grid-template-columns:264px 1fr; min-height:100vh}
.side{background:var(--panel); backdrop-filter:blur(18px); border-inline-end:1px solid var(--line);
  padding:18px 14px; position:sticky; top:0; height:100vh; overflow:auto}
.brand{display:flex; gap:12px; align-items:center; padding:6px 8px 16px}
.brand .logo{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#111;
  background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,var(--gold-deep)); font-weight:900; font-size:22px; font-family:var(--display);
  box-shadow:0 6px 24px rgba(212,175,55,.35); flex:none}
.brand b{font-size:16px; display:block; line-height:1.5}
.nav{display:grid; gap:4px; margin-top:6px}
.nav button{display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  background:transparent; border:1px solid transparent; color:var(--txt);
  padding:10px 12px; border-radius:12px; cursor:pointer; font-family:var(--font); font-size:14.5px}
.nav button svg{width:18px; height:18px; flex:none; color:var(--gold)}
.nav button:hover{background:rgba(212,175,55,.1)}
.nav button.active{background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(139,92,246,.18)); border-color:var(--line)}
.side .credit{margin-top:18px; font-size:12px; color:var(--muted); border-top:1px dashed var(--line); padding-top:12px}
.main{min-width:0; padding:0 0 60px}
.top{position:sticky; top:0; z-index:20; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:12px 20px; background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.top .crumb{font-size:13px; color:var(--muted)}
.top input[type="search"]{flex:1; min-width:180px; max-width:420px}

/* ===== Inputs incl. luxury dropdowns ===== */
input,select,textarea{background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--txt);
  border-radius:12px; padding:10px 12px; font-family:var(--font); font-size:15px; width:100%}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.22); outline:none}
select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-inline-end:36px;
  background-image:var(--chev); background-repeat:no-repeat;
  background-position:left 12px center}
[dir="ltr"] select{background-position:right 12px center}
select:hover{border-color:var(--gold); background-color:rgba(212,175,55,.07)}
select option{background:var(--panel-solid); color:var(--txt)}
.sel{display:block; position:relative}
label{display:grid; gap:6px; font-size:14.5px}
button{font-family:var(--font)}
.btn{border:1px solid var(--line); background:linear-gradient(135deg,rgba(212,175,55,.25),rgba(139,92,246,.2));
  color:var(--txt); border-radius:12px; padding:10px 16px; cursor:pointer; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(212,175,55,.25)}
.btn:active{transform:translateY(0)}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold)); color:#1a1405; border:none}
.btn.ghost{background:transparent}
.btn.block{width:100%; margin-top:6px}
.btn.sm{padding:6px 10px; font-size:13px; border-radius:10px; width:auto}
.btn svg{width:16px; height:16px; flex:none}

.wrap{padding:20px; max-width:1240px; margin:0 auto; display:grid; gap:16px}
.view{display:none} .view.show{display:grid; gap:16px; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1}}
.card{background:var(--panel); backdrop-filter:blur(18px); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; box-shadow:0 12px 40px rgba(0,0,0,.35)}
.card h2,.card h3{margin:.2em 0 .6em; line-height:1.6; display:flex; align-items:center; gap:10px}
.card h2 svg,.card h3 svg{width:20px; height:20px; color:var(--gold); flex:none}
.grad{background:linear-gradient(135deg,var(--gold2),var(--gold) 45%,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.kpi{position:relative; overflow:hidden}
.kpi svg{width:22px; height:22px; color:var(--gold)}
.kpi .v{font-size:30px; font-weight:800}
.kpi .l{color:var(--muted); font-size:13px}
.kpi::after{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--gold),var(--violet)); border-radius:4px}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:start}
th{color:var(--gold2); font-weight:700; white-space:nowrap; font-family:var(--display); font-size:13.5px}
tr:hover td{background:rgba(212,175,55,.06)}
.empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px; color:var(--muted)}
.empty svg{width:34px; height:34px; color:var(--gold); opacity:.7}
.tag{display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:12.5px; border:1px solid var(--line)}
.tag.ok{color:var(--green); border-color:rgba(34,197,94,.4)} .tag.warn{color:var(--gold2); border-color:var(--line)}
.tag.bad{color:var(--red); border-color:rgba(239,68,68,.4)}
.calc{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.result{background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(139,92,246,.12)); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px}
.price-big{font-size:40px; font-weight:800; color:var(--gold2)}
.between{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:14.5px}
.status-dot{width:10px; height:10px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 10px var(--green)}
.status-dot.off{background:var(--red); box-shadow:0 0 10px var(--red)}
.skel{border-radius:12px; background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 75%);
  background-size:200% 100%; animation:sh 1.2s infinite; min-height:18px}
@keyframes sh{to{background-position:-200% 0}}
.toast{position:fixed; bottom:18px; inset-inline:0; margin:0 auto; width:max-content; max-width:92vw; z-index:99;
  background:var(--panel-solid); border:1px solid var(--line); border-radius:14px; padding:12px 18px; display:none}
.toast.show{display:block}
footer{color:var(--muted); font-size:13px; text-align:center; padding:26px 12px 8px}
.drawer-btn{display:none}
.badge{font-size:11.5px; background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4); color:#ffb4b4;
  padding:1px 8px; border-radius:999px}
canvas.chart{width:100%; height:220px}
.alert{border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:14px; display:flex; gap:10px; align-items:flex-start}
.alert svg{width:18px; height:18px; flex:none; margin-top:4px; color:var(--gold)}
.alert.err{border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.08)}
.alert.warn{border-color:var(--line); background:rgba(212,175,55,.08)}
.alert.ok{border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.08)}
@media (max-width:1080px){ .g4{grid-template-columns:repeat(2,1fr)} .calc{grid-template-columns:1fr} .login-stage{grid-template-columns:1fr; gap:8px} }
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed; inset-inline-start:0; top:0; bottom:0; width:280px; z-index:50; transform:translateX(105%); transition:transform .25s}
  [dir="ltr"] .side{transform:translateX(-105%)}
  .side.open{transform:none}
  .drawer-btn{display:inline-flex}
  .g3,.g2{grid-template-columns:1fr} .g4{grid-template-columns:1fr 1fr}
  body{font-size:15px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} html{scroll-behavior:auto} }
@media print{ .side,.top,.no-print,.bg-orbs{display:none!important} .app{grid-template-columns:1fr} body{background:#fff; color:#111} }