/*!
 * Nabd — internet speed test (speed.doniaweb.com)
 * Copyright (c) 2026 Mahmoud Ali — doniaweb.com. All rights reserved.
 * Created: 2026-10-13
 */
/* ===== Front-end skins — selected by the admin (Templates page) =====
   Each skin sets design tokens for dark + light, plus a few structural touches.
   The default "nabd" skin uses the base values from app.css. */

/* ---------- Aurora / شفق ---------- */
[data-skin="aurora"] {
  --font: 'Tajawal', 'Readex Pro', system-ui, sans-serif;
  --radius: 28px; --btn-radius: 99px; --card-blur: 18px; --gauge-w: 18px;
  --orb-opacity: .5;
}
[data-skin="aurora"][data-theme="dark"] {
  --bg: #12061f; --bg2: #1a0a2b; --card: rgba(38, 16, 60, .55); --card-solid: #241036;
  --line: rgba(244, 114, 182, .18); --text: #fdf2f8; --muted: #c4a6c9; --track: rgba(244, 114, 182, .14);
  --c1: #f472b6; --c2: #fb923c; --orb-a: #8b5cf6; --orb-b: #f472b6;
  --bg-deco: radial-gradient(60% 50% at 85% 0%, rgba(139, 92, 246, .35), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(251, 146, 60, .22), transparent 70%);
}
[data-skin="aurora"][data-theme="light"] {
  --bg: #fff5fa; --bg2: #ffe9f3; --card: rgba(255, 255, 255, .7); --card-solid: #ffffff;
  --line: rgba(219, 39, 119, .14); --text: #3b0a2a; --muted: #8a5a76; --track: rgba(219, 39, 119, .1);
  --c1: #db2777; --c2: #ea580c; --orb-a: #c4b5fd; --orb-b: #f9a8d4; --orb-opacity: .55;
  --bg-deco: radial-gradient(60% 50% at 85% 0%, rgba(196, 181, 253, .5), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(253, 186, 116, .35), transparent 70%);
}
[data-skin="aurora"] .card, [data-skin="aurora"] .m, [data-skin="aurora"] .conn-item { border-color: color-mix(in srgb, var(--c1) 22%, transparent); }
[data-skin="aurora"] .tagline { font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.3rem); }
[data-skin="aurora"] .go-btn { background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c1) 25%, transparent), 0 20px 60px color-mix(in srgb, var(--c1) 45%, transparent); }
[data-skin="aurora"] .go-text { color: #fff; }
[data-skin="aurora"] .go-ring { border-color: var(--c2); }

/* ---------- Minimal / بسيط ---------- */
[data-skin="minimal"] {
  --font: 'IBM Plex Sans Arabic', 'Readex Pro', system-ui, sans-serif;
  --radius: 10px; --btn-radius: 8px; --card-blur: 0px; --gauge-w: 8px;
  --orb-opacity: 0; --shadow: none;
}
[data-skin="minimal"][data-theme="dark"] {
  --bg: #0b0b0c; --bg2: #111113; --card: #131315; --card-solid: #18181b;
  --line: rgba(255, 255, 255, .08); --text: #f5f5f5; --muted: #8b8b93; --track: rgba(255, 255, 255, .07);
  --c1: #10b981; --c2: #10b981;
}
[data-skin="minimal"][data-theme="light"] {
  --bg: #fafafa; --bg2: #f2f2f3; --card: #ffffff; --card-solid: #ffffff;
  --line: rgba(0, 0, 0, .08); --text: #111113; --muted: #6b6b73; --track: rgba(0, 0, 0, .06);
  --c1: #059669; --c2: #059669;
}
[data-skin="minimal"] .tagline { background: none; color: var(--text); -webkit-text-fill-color: currentColor; font-weight: 500; }
[data-skin="minimal"] .brand-mark { background: var(--text); }
[data-skin="minimal"] .brand-mark svg { stroke: var(--bg); }
[data-skin="minimal"] .g-glow { display: none; }
[data-skin="minimal"] .go-btn { background: var(--card-solid); box-shadow: inset 0 0 0 2px var(--c1); }
[data-skin="minimal"] .go-ring { display: none; }
[data-skin="minimal"] .btn.primary { background: var(--c1); }
[data-skin="minimal"] .insight b, [data-skin="minimal"] .auth-side h1, [data-skin="minimal"] .plan-stat b { background: none; color: var(--c1); -webkit-text-fill-color: currentColor; }
[data-skin="minimal"] .m.active { transform: none; }
[data-skin="minimal"] .topbar { backdrop-filter: none; background: var(--bg); }

/* ---------- Neon / نيون ---------- */
[data-skin="neon"] {
  --font: 'Changa', 'Readex Pro', system-ui, sans-serif;
  --num-font: 'Changa', ui-monospace, monospace;
  --radius: 6px; --btn-radius: 4px; --card-blur: 6px; --gauge-w: 14px;
  --orb-opacity: .28;
}
[data-skin="neon"][data-theme="dark"] {
  --bg: #05010d; --bg2: #0a0418; --card: rgba(12, 6, 30, .82); --card-solid: #0e0722;
  --line: rgba(0, 245, 212, .22); --text: #e9fffb; --muted: #8aa6b8; --track: rgba(0, 245, 212, .1);
  --c1: #00f5d4; --c2: #f72585; --orb-a: #f72585; --orb-b: #00f5d4;
  --num-glow: 0 0 18px rgba(0, 245, 212, .55);
  --bg-deco: linear-gradient(rgba(0, 245, 212, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 245, 212, .08) 1px, transparent 1px);
}
[data-skin="neon"][data-theme="light"] {
  --bg: #f4f2ff; --bg2: #ebe7ff; --card: rgba(255, 255, 255, .9); --card-solid: #ffffff;
  --line: rgba(124, 58, 237, .2); --text: #1a0b3d; --muted: #6a5f8f; --track: rgba(124, 58, 237, .1);
  --c1: #0d9488; --c2: #c026d3; --orb-a: #f0abfc; --orb-b: #5eead4; --orb-opacity: .3;
  --bg-deco: linear-gradient(rgba(124, 58, 237, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, .06) 1px, transparent 1px);
}
[data-skin="neon"] body { background-size: 32px 32px; }
[data-skin="neon"] .card, [data-skin="neon"] .m, [data-skin="neon"] .conn-item { box-shadow: 0 0 0 1px var(--line), 0 0 24px color-mix(in srgb, var(--c1) 10%, transparent); }
[data-skin="neon"] .tagline { text-transform: uppercase; letter-spacing: .02em; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c2) 45%, transparent)); }
[data-skin="neon"] .go-btn { border-radius: 50%; background: var(--card-solid); box-shadow: inset 0 0 0 2px var(--c1), 0 0 30px var(--c1), inset 0 0 30px color-mix(in srgb, var(--c1) 30%, transparent); }
[data-skin="neon"] .go-text { color: var(--c1); text-shadow: 0 0 14px var(--c1); letter-spacing: .1em; }
[data-skin="neon"] .go-ring { border-color: var(--c2); }
[data-skin="neon"] .g-glow { opacity: .9; }
[data-skin="neon"] .btn.primary { box-shadow: 0 0 18px color-mix(in srgb, var(--c2) 50%, transparent); }

/* ---------- Ocean / محيط ---------- */
[data-skin="ocean"] {
  --font: 'Almarai', 'Readex Pro', system-ui, sans-serif;
  --radius: 22px; --btn-radius: 14px; --card-blur: 12px; --gauge-w: 20px;
  --orb-opacity: .3;
}
[data-skin="ocean"][data-theme="dark"] {
  --bg: #03161f; --bg2: #052230; --card: rgba(6, 42, 58, .6); --card-solid: #07293a;
  --line: rgba(45, 212, 191, .16); --text: #e6fffb; --muted: #84aeb5; --track: rgba(45, 212, 191, .12);
  --c1: #2dd4bf; --c2: #38bdf8; --orb-a: #0ea5e9; --orb-b: #14b8a6;
  --bg-deco: radial-gradient(120% 60% at 50% 115%, rgba(14, 165, 233, .28), transparent 60%), radial-gradient(90% 40% at 50% 110%, rgba(45, 212, 191, .22), transparent 60%);
}
[data-skin="ocean"][data-theme="light"] {
  --bg: #eefcfb; --bg2: #e2f6f8; --card: rgba(255, 255, 255, .78); --card-solid: #ffffff;
  --line: rgba(13, 148, 136, .14); --text: #062a33; --muted: #4f7a82; --track: rgba(13, 148, 136, .1);
  --c1: #0d9488; --c2: #0284c7; --orb-a: #7dd3fc; --orb-b: #5eead4;
  --bg-deco: radial-gradient(120% 60% at 50% 115%, rgba(125, 211, 252, .45), transparent 60%);
}
[data-skin="ocean"] .go-btn { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c2) 35%, var(--card-solid)), var(--card-solid)); }

/* ---------- Sunset / غروب ---------- */
[data-skin="sunset"] {
  --font: 'Cairo', 'Readex Pro', system-ui, sans-serif;
  --radius: 18px; --btn-radius: 12px; --card-blur: 10px; --gauge-w: 24px;
  --orb-opacity: .38;
}
[data-skin="sunset"][data-theme="dark"] {
  --bg: #1a0a0c; --bg2: #230f12; --card: rgba(48, 18, 22, .62); --card-solid: #2a1216;
  --line: rgba(251, 191, 36, .15); --text: #fff7ed; --muted: #c9a5a0; --track: rgba(251, 191, 36, .12);
  --c1: #fbbf24; --c2: #f43f5e; --orb-a: #f43f5e; --orb-b: #f59e0b;
  --bg-deco: linear-gradient(180deg, rgba(244, 63, 94, .12), transparent 45%);
}
[data-skin="sunset"][data-theme="light"] {
  --bg: #fff8f1; --bg2: #ffefe0; --card: rgba(255, 255, 255, .8); --card-solid: #ffffff;
  --line: rgba(225, 29, 72, .14); --text: #3a0d13; --muted: #8c5f58; --track: rgba(234, 88, 12, .1);
  --c1: #d97706; --c2: #e11d48; --orb-a: #fda4af; --orb-b: #fcd34d;
  --bg-deco: linear-gradient(180deg, rgba(253, 164, 175, .3), transparent 45%);
}
[data-skin="sunset"] .tagline { font-weight: 800; }
[data-skin="sunset"] .go-btn { background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 18px 50px color-mix(in srgb, var(--c2) 45%, transparent); }
[data-skin="sunset"] .go-text { color: #fff; }
[data-skin="sunset"] .m-val, [data-skin="sunset"] .readout-val { font-weight: 800; }

/* Structural fixes */
[data-skin="minimal"] .bg-orb { display: none; }

/* ===== Palettes that ship with the new layouts (usable with any layout) ===== */
/* Bento */
[data-skin="bento"] { --font: 'IBM Plex Sans Arabic', 'Readex Pro', sans-serif; --radius: 22px; --btn-radius: 14px; --card-blur: 0px; --gauge-w: 14px; --orb-opacity: 0; --shadow: none; }
[data-skin="bento"][data-theme="light"] { --bg: #eceef2; --bg2: #e3e6ec; --card: #ffffff; --card-solid: #ffffff; --line: rgba(14, 17, 22, .07); --text: #0e1116; --muted: #5b6270; --track: rgba(14, 17, 22, .06); --c1: #2f5bff; --c2: #2f5bff; }
[data-skin="bento"][data-theme="dark"] { --bg: #0d0f13; --bg2: #13161b; --card: #171a20; --card-solid: #1c2027; --line: rgba(255, 255, 255, .07); --text: #f1f3f7; --muted: #9aa1ae; --track: rgba(255, 255, 255, .06); --c1: #6b86ff; --c2: #6b86ff; }
[data-skin="bento"] .bg-orb { display: none; }

/* Pulse */
[data-skin="pulse"] { --font: 'Tajawal', 'Readex Pro', sans-serif; --radius: 18px; --btn-radius: 99px; --card-blur: 0px; --gauge-w: 10px; --orb-opacity: 0; --shadow: none; }
[data-skin="pulse"][data-theme="light"] { --bg: #ffffff; --bg2: #f7f7f7; --card: #ffffff; --card-solid: #ffffff; --line: #eaeaea; --text: #141414; --muted: #5e5e5e; --track: #f1f1f1; --c1: #e8442a; --c2: #e8442a; }
[data-skin="pulse"][data-theme="dark"] { --bg: #0f0f10; --bg2: #151517; --card: #161618; --card-solid: #1b1b1e; --line: #2a2a2e; --text: #f4f4f4; --muted: #a3a3a3; --track: #222226; --c1: #ff5a3d; --c2: #ff5a3d; }
[data-skin="pulse"] .bg-orb { display: none; }

/* Editorial */
[data-skin="editorial"] { --font: 'Noto Sans Arabic', 'Readex Pro', sans-serif; --radius: 0px; --btn-radius: 0px; --card-blur: 0px; --gauge-w: 10px; --orb-opacity: 0; --shadow: none; }
[data-skin="editorial"][data-theme="light"] { --bg: #ffffff; --bg2: #f6f6f6; --card: #ffffff; --card-solid: #ffffff; --line: #d9d9d9; --text: #111111; --muted: #555555; --track: #f1f1f1; --c1: #b3121c; --c2: #b3121c; }
[data-skin="editorial"][data-theme="dark"] { --bg: #121212; --bg2: #181818; --card: #161616; --card-solid: #1c1c1c; --line: #333333; --text: #ededed; --muted: #a0a0a0; --track: #232323; --c1: #ff5059; --c2: #ff5059; }
[data-skin="editorial"] .bg-orb { display: none; }

/* HUD */
[data-skin="hud"] { --font: 'Changa', 'Readex Pro', sans-serif; --num-font: 'Changa', ui-monospace, monospace; --radius: 0px; --btn-radius: 0px; --card-blur: 4px; --gauge-w: 14px; --orb-opacity: .15; }
[data-skin="hud"][data-theme="dark"] { --bg: #07090c; --bg2: #0b0f0d; --card: rgba(12, 18, 15, .88); --card-solid: #0c120f; --line: #23302a; --text: #e6f2ea; --muted: #8fa79a; --track: #1b2620; --c1: #b6ff3b; --c2: #3be8ff; --orb-a: #3be8ff; --orb-b: #b6ff3b; --num-glow: 0 0 20px rgba(182, 255, 59, .4);
  --bg-deco: linear-gradient(rgba(182, 255, 59, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(182, 255, 59, .05) 1px, transparent 1px); }
[data-skin="hud"][data-theme="light"] { --bg: #f2f6ee; --bg2: #e9efe4; --card: #ffffff; --card-solid: #ffffff; --line: #c9d6c3; --text: #0b1410; --muted: #4e6357; --track: #e3ebdd; --c1: #3f8f00; --c2: #0b8fa3; --orb-a: #9be15d; --orb-b: #5fd4e6;
  --bg-deco: linear-gradient(rgba(63, 143, 0, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(63, 143, 0, .07) 1px, transparent 1px); }
[data-skin="hud"] body { background-size: 26px 26px; }

/* Chat */
[data-skin="chat"] { --font: 'Baloo Bhaijaan 2', 'Readex Pro', sans-serif; --radius: 22px; --btn-radius: 99px; --card-blur: 0px; --gauge-w: 16px; --orb-opacity: 0; }
[data-skin="chat"][data-theme="light"] { --bg: #f3f0ff; --bg2: #ebe6ff; --card: #ffffff; --card-solid: #ffffff; --line: #e4defa; --text: #1d1638; --muted: #625a80; --track: #ece7ff; --c1: #5b3fd9; --c2: #8b6cff; --shadow: 0 10px 30px rgba(91, 63, 217, .1); }
[data-skin="chat"][data-theme="dark"] { --bg: #120e24; --bg2: #181232; --card: #1c1636; --card-solid: #221a40; --line: rgba(139, 108, 255, .18); --text: #eeeaff; --muted: #a49cc9; --track: rgba(139, 108, 255, .12); --c1: #8b6cff; --c2: #b39dff; --shadow: 0 10px 30px rgba(0, 0, 0, .3); }
[data-skin="chat"] .bg-orb { display: none; }