:root{
  --olive:#4a5240;--olive-dark:#323826;--khaki:#c8b97a;--khaki-light:#e8ddb5;
  --tan:#ede8d5;--tan2:#ddd5b8;--tan3:#cec5a4;
  --bg:#f2ede0;--surface:#faf8f0;--surface2:#f0ead4;
  --border:rgba(74,82,64,0.15);--border2:rgba(74,82,64,0.28);
  --text:#2a2e25;--text-muted:#6a7060;--text-dim:#a0a890;
  --green:#3a5c3a;--green-bg:#e4ede4;--red:#7a3030;--red-bg:#f5e8e8;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Tajawal',sans-serif;direction:rtl;color:var(--text);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background:var(--olive-dark);
  background-image:
    radial-gradient(circle at 50% 0%,rgba(200,185,122,0.10) 0%,rgba(200,185,122,0) 55%),
    repeating-linear-gradient(-55deg,transparent 0,transparent 18px,rgba(255,255,255,0.02) 18px,rgba(255,255,255,0.02) 36px);
}
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(-45deg,var(--khaki) 0,var(--khaki) 10px,var(--olive-dark) 10px,var(--olive-dark) 20px);
  opacity:.85;z-index:5;
}
.wrap{width:100%;max-width:880px;display:flex;flex-direction:column;align-items:center;}
.card{
  background:var(--surface);border-radius:10px;border:1px solid var(--border2);
  box-shadow:0 22px 60px rgba(0,0,0,0.5);width:100%;max-width:400px;overflow:hidden;transition:max-width .25s ease;
}
.card.wide{max-width:760px;}
.top{background:var(--olive-dark);border-bottom:3px solid var(--khaki);padding:28px 22px 24px;text-align:center;}
.emblem{
  width:88px;height:88px;border-radius:50%;margin:0 auto 14px;overflow:hidden;position:relative;
  background:radial-gradient(circle at 32% 28%,rgba(255,240,200,0.18) 0%,rgba(255,240,200,0) 45%),radial-gradient(circle at 50% 50%,#3a4030 0%,#232719 100%);
  border:1.5px solid rgba(200,185,122,0.55);box-shadow:0 4px 12px rgba(0,0,0,0.45),inset 0 -3px 6px rgba(0,0,0,0.40);
}
.emblem img{width:100%;height:100%;object-fit:contain;padding:5px;display:block;}
.en{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:0.26em;color:rgba(200,185,122,0.62);}
.ar{font-size:18px;font-weight:800;color:#fff;margin-top:5px;line-height:1.3;}
.sub{font-size:11.5px;color:rgba(200,185,122,0.65);margin-top:5px;font-family:'IBM Plex Mono',monospace;letter-spacing:.03em;}
.body{padding:24px;}
.fg{margin-bottom:15px;display:flex;flex-direction:column;gap:6px;}
.fg label{font-size:10px;font-weight:600;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;}
.fg input{
  width:100%;padding:11px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:4px;
  color:var(--text);font-family:'Tajawal',sans-serif;font-size:15px;outline:none;transition:border-color .13s;
}
.fg input:focus{border-color:var(--olive);box-shadow:0 0 0 3px rgba(74,82,64,0.08);}
.btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;
  background:var(--olive);color:var(--khaki-light);border:1px solid var(--olive-dark);border-radius:4px;
  font-family:'Tajawal',sans-serif;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .13s;
}
.btn:hover{background:var(--olive-dark);}
.err{
  background:var(--red-bg);border:1px solid rgba(122,48,48,0.25);color:var(--red);font-size:12.5px;
  padding:9px 12px;border-radius:4px;margin-bottom:15px;line-height:1.6;
}
.dev{font-size:10px;color:var(--text-dim);text-align:center;margin-top:14px;font-family:'IBM Plex Mono',monospace;direction:ltr;}
.welcome{padding:18px 24px 6px;text-align:center;}
.welcome .hi{font-size:15px;font-weight:700;color:var(--text);}
.welcome .hint{font-size:12px;color:var(--text-muted);margin-top:4px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:18px 24px 8px;}
.tile{
  display:flex;flex-direction:column;gap:8px;text-align:right;cursor:pointer;
  background:var(--surface);border:1px solid var(--border2);border-right:4px solid var(--accent,var(--khaki));
  border-radius:8px;padding:16px;transition:transform .12s,box-shadow .12s,border-color .12s;text-decoration:none;color:inherit;
}
.tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(50,56,38,0.18);}
.tile .t-en{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.18em;color:var(--text-dim);}
.tile .t-ar{font-size:16.5px;font-weight:800;color:var(--text);line-height:1.3;}
.tile .t-go{margin-top:2px;font-size:11.5px;color:var(--olive);font-weight:600;}
.tile.admin{border-right-color:var(--red);}
.signout{margin:8px 24px 22px;}
.signout a{
  display:block;text-align:center;text-decoration:none;background:transparent;border:1px dashed var(--border2);
  color:var(--text-muted);border-radius:6px;padding:9px;font-family:'Tajawal',sans-serif;font-size:12.5px;
}
.signout a:hover{border-color:var(--olive);color:var(--text);}
.footer{margin-top:18px;text-align:center;font-size:10.5px;color:rgba(200,185,122,0.55);font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;line-height:1.8;}