/* 🔗 RAKAN official links (links.html / links-ar.html) — standalone page, RAKAN navy + cyan */
:root { --bg: #020814; --card: #0a1426; --card2: #0d1a31; --line: rgba(120, 170, 255, .14); --line2: rgba(120, 170, 255, .26); --text: #dbe7ff; --mute: #8ea2c4; --white: #fff; --cyan: #22c3ff; --gold: #ffc43d; color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lk { margin: 0; min-height: 100vh; background: radial-gradient(700px 420px at 50% -8%, rgba(34, 195, 255, .16), transparent 70%), radial-gradient(600px 400px at 100% 100%, rgba(47, 123, 255, .08), transparent 70%), var(--bg); color: var(--text); font: 400 15px/1.55 Inter, 'IBM Plex Sans Arabic', system-ui, sans-serif; }
[dir="rtl"] body.lk, html[dir="rtl"] body.lk { font-family: 'IBM Plex Sans Arabic', Inter, system-ui, sans-serif; }
body.lk-lock { overflow: hidden; }
a { color: inherit; }
.lk-wrap { max-width: 640px; margin: 0 auto; padding: 56px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 26px; }
.lk-head { display: grid; justify-items: center; gap: 10px; text-align: center; }
.lk-head img { width: 72px; height: 72px; filter: drop-shadow(0 10px 30px rgba(34, 195, 255, .45)); }
.lk-head h1 { margin: 4px 0 0; font: 700 clamp(1.5rem, 5vw, 2rem)/1.15 Sora, 'IBM Plex Sans Arabic', sans-serif; color: var(--white); }
.lk-brand { font-weight: 800; background: linear-gradient(100deg, #fff 10%, #6fe0ff 55%, #2f7bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lk-head p { margin: 0; color: var(--mute); }
.lk-sec { display: grid; gap: 10px; }
.lk-h { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 .7rem/1 Inter, 'IBM Plex Sans Arabic', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lk-h svg { width: 13px; height: 13px; fill: var(--cyan); }
.lk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lk-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--card2), var(--card)); text-decoration: none; min-width: 0; transition: border-color .2s, transform .2s, background .2s; }
.lk-card:hover, .lk-card:focus-visible { border-color: rgba(34, 195, 255, .55); transform: translateY(-1px); outline: none; }
.lk-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.lk-ic svg { width: 19px; height: 19px; }
.lk-ic.c1 { background: rgba(34, 195, 255, .14); } .lk-ic.c1 svg { fill: #6fe0ff; }
.lk-ic.c2 { background: rgba(47, 123, 255, .16); } .lk-ic.c2 svg { fill: #7aa6ff; }
.lk-ic.c3 { background: rgba(255, 196, 61, .14); } .lk-ic.c3 svg { fill: #ffd56a; }
.lk-ic.c4 { background: rgba(167, 120, 255, .15); } .lk-ic.c4 svg { fill: #c4a3ff; }
.lk-ic.c5 { background: rgba(46, 230, 140, .13); } .lk-ic.c5 svg { fill: #5ef0a6; }
.lk-ic.c6 { background: rgba(255, 255, 255, .08); } .lk-ic.c6 svg { fill: #fff; }
.lk-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.lk-tx b { font: 600 .95rem/1.25 Sora, 'IBM Plex Sans Arabic', sans-serif; color: var(--white); }
.lk-tx small { font-size: .78rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-out { flex: none; width: 15px; height: 15px; fill: var(--mute); opacity: .7; }
[dir="rtl"] .lk-out { transform: scaleX(-1); }
.lk-foot { display: grid; gap: 4px; justify-items: center; text-align: center; padding-top: 14px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--mute); }
.lk-foot p { margin: 0; } .lk-foot b { color: var(--white); }
.lk-copy { margin-top: 8px !important; font-size: .76rem; } .lk-copy a { color: var(--cyan); text-decoration: none; }
.lk-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(1, 4, 10, .78); backdrop-filter: blur(6px); }
.lk-modal[hidden] { display: none; }
.lk-box { max-width: 360px; display: grid; justify-items: center; gap: 12px; text-align: center; padding: 26px 24px 22px; border-radius: 18px; border: 1px solid rgba(255, 196, 61, .35); background: #0b1324; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.lk-shield { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); }
.lk-shield svg { width: 24px; height: 24px; fill: #2a1d00; }
.lk-box h2 { margin: 0; font: 700 1.15rem/1.2 Sora, 'IBM Plex Sans Arabic', sans-serif; color: var(--gold); }
.lk-box p { margin: 0; color: var(--text); font-size: .92rem; } .lk-box p b { color: var(--gold); }
.lk-box .lk-small { font-size: .78rem; color: var(--mute); }
.lk-ok { margin-top: 4px; font: 700 .92rem/1 Sora, 'IBM Plex Sans Arabic', sans-serif; color: #241800; background: linear-gradient(180deg, #ffd56a, #f0a91c); border: 0; border-radius: 10px; padding: 12px 22px; cursor: pointer; }
.lk-ok:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 520px) { .lk-grid { grid-template-columns: minmax(0, 1fr); } .lk-wrap { padding-top: 36px; } }
@media (prefers-reduced-motion: reduce) { .lk-card { transition: none; } }