:root{
--bg:#070A0B;
--panel:#0E1314;
--panel2:#0B1011;
--text:#EAF2F2;
--muted:#9FB2B2;
--green:#31ff7a;
--pink:#ff4fd8;
--line:rgba(255,255,255,.10);
--shadow: 0 18px 60px rgba(0,0,0,.45);
--r:16px;
}

/* Global base */
html, body{ height:100%; }

body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
color:var(--text);
background:
radial-gradient(1200px 600px at 20% 10%, rgba(49,255,122,.10), transparent 55%),
radial-gradient(1000px 600px at 85% 25%, rgba(255,79,216,.10), transparent 60%),
var(--bg);
}

/* Bigger text for mobile readability */
body, button, input, textarea, select{
font-size:16px;
}

h1,h2,h3{ letter-spacing:.2px; }

a{ color: var(--green); }
a:hover{ filter: brightness(1.05); }

/* Optional utility classes */
.ff-card{
background: rgba(14,19,20,.72);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow);
}

.ff-btn{
border:none;
border-radius:14px;
padding:12px 14px;
font-weight:900;
cursor:pointer;
color:#04140A;
background: linear-gradient(135deg, var(--green), #9bffb9);
box-shadow: 0 10px 26px rgba(49,255,122,.18);
}
.ff-btn.secondary{
color:var(--text);
background: rgba(255,255,255,.06);
border:1px solid var(--line);
box-shadow:none;
}

input, textarea, select{
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: var(--text);
border-radius: 12px;
padding: 10px 12px;
outline:none;
}
input::placeholder, textarea::placeholder{ color: rgba(234,242,242,.55); }

/* Soft scrollbars */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
background: rgba(255,255,255,.12);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover{
background: rgba(255,255,255,.18);
}