
/* GIRUZIN 033 — Premium UI 2026 */
:root{
 --gx-bg:#07111f; --gx-bg2:#0b1930; --gx-card:rgba(14,31,53,.78);
 --gx-card2:rgba(18,40,66,.72); --gx-border:rgba(125,211,252,.15);
 --gx-text:#f5fbff; --gx-muted:#9bb0c5; --gx-cyan:#19c3ff;
 --gx-blue:#4d73ff; --gx-green:#36d399; --gx-radius:22px;
 --gx-shadow:0 24px 70px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 background:
 radial-gradient(900px 450px at 8% -10%,rgba(25,195,255,.14),transparent 60%),
 radial-gradient(800px 500px at 100% 0%,rgba(77,115,255,.16),transparent 55%),
 linear-gradient(145deg,var(--gx-bg),var(--gx-bg2)) !important;
 color:var(--gx-text) !important;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important;
}
body.gx-light{
 --gx-bg:#f4f8fc;--gx-bg2:#eaf2f9;--gx-card:rgba(255,255,255,.88);
 --gx-card2:#fff;--gx-border:rgba(20,55,85,.13);--gx-text:#102033;
 --gx-muted:#60758a;--gx-shadow:0 20px 55px rgba(35,67,95,.13);
 background:linear-gradient(145deg,#f8fbff,#eaf3fa)!important;
}
body.gx-light header{background:rgba(255,255,255,.82)!important}
a{transition:.2s ease}
main{max-width:1240px!important;margin:auto}
header{
 position:sticky!important;top:0;z-index:1000;
 background:rgba(5,15,27,.72)!important;
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 border-bottom:1px solid var(--gx-border)!important;
}
nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
nav a{
 padding:9px 13px;border-radius:12px;text-decoration:none;
 color:var(--gx-muted)!important;font-weight:700;
}
nav a:hover,nav a.active{
 color:#fff!important;background:rgba(25,195,255,.11);
}
.gx-hero{
 margin:20px 0 28px;padding:34px 30px;
 border:1px solid var(--gx-border);border-radius:28px;
 background:
 linear-gradient(120deg,rgba(25,195,255,.10),transparent 45%),
 linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
 box-shadow:var(--gx-shadow);position:relative;overflow:hidden;
}
.gx-hero:after{
 content:"";position:absolute;width:230px;height:230px;border-radius:50%;
 right:-80px;top:-110px;background:rgba(25,195,255,.13);filter:blur(10px)
}
.gx-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.15em;color:var(--gx-cyan);font-weight:800}
.gx-hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.04;margin:.3em 0}
.gx-hero p{max-width:720px;color:var(--gx-muted);font-size:1.05rem}
.gx-grid{
 display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;
}
.gx-card{
 grid-column:span 4;min-height:150px;padding:22px;
 border:1px solid var(--gx-border);border-radius:var(--gx-radius);
 background:linear-gradient(180deg,var(--gx-card2),var(--gx-card));
 box-shadow:var(--gx-shadow);transition:transform .22s,box-shadow .22s,border-color .22s;
}
.gx-card:hover{transform:translateY(-5px);border-color:rgba(25,195,255,.34);box-shadow:0 28px 75px rgba(0,0,0,.34)}
.gx-card.wide{grid-column:span 8}
.gx-card.full{grid-column:1/-1}
.gx-card h2,.gx-card h3{margin-top:0}
.gx-icon{
 width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
 background:linear-gradient(135deg,rgba(25,195,255,.20),rgba(77,115,255,.20));
 border:1px solid rgba(25,195,255,.18);font-size:1.35rem;margin-bottom:14px;
}
.gx-muted{color:var(--gx-muted)}
.gx-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.gx-btn{
 border:0!important;border-radius:13px!important;padding:11px 16px!important;
 background:linear-gradient(135deg,var(--gx-cyan),var(--gx-blue))!important;
 color:white!important;font-weight:800!important;cursor:pointer;
 box-shadow:0 10px 25px rgba(25,195,255,.18);
}
.gx-btn.secondary{background:rgba(255,255,255,.07)!important;border:1px solid var(--gx-border)!important}
.gx-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.gx-stat{font-size:2rem;font-weight:900;letter-spacing:-.04em}
.gx-pill{
 display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
 background:rgba(54,211,153,.11);color:#72e8b7;font-weight:800;font-size:.78rem;
 border:1px solid rgba(54,211,153,.15)
}
.gx-list{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.gx-list li{
 padding:13px 14px;border:1px solid var(--gx-border);border-radius:13px;
 background:rgba(255,255,255,.025)
}
.gx-progress{height:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.gx-progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gx-cyan),var(--gx-blue))}
.gx-toolbar{
 display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
 padding:13px 15px;margin:0 0 18px;border:1px solid var(--gx-border);
 border-radius:15px;background:rgba(255,255,255,.035)
}
.gx-toolbar input,.gx-toolbar select{
 min-height:42px;padding:9px 12px;background:rgba(255,255,255,.055)!important;
 border:1px solid var(--gx-border)!important;color:inherit;border-radius:11px!important
}
.gx-empty{
 padding:45px 20px;text-align:center;border:1px dashed var(--gx-border);
 border-radius:18px;color:var(--gx-muted)
}
.gx-floating{
 position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;gap:8px;
 padding:8px;background:rgba(4,14,25,.80);border:1px solid var(--gx-border);
 border-radius:17px;backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.3)
}
.gx-floating button{
 width:42px;height:42px;padding:0!important;border-radius:12px!important;
 border:1px solid var(--gx-border)!important;background:rgba(255,255,255,.07)!important;
 color:#fff!important;cursor:pointer;font-size:1.05rem
}
.gx-floating button:hover{background:rgba(25,195,255,.17)!important}
@media(max-width:900px){
 .gx-card,.gx-card.wide{grid-column:span 6}
}
@media(max-width:620px){
 .gx-card,.gx-card.wide{grid-column:1/-1}
 .gx-hero{padding:25px 20px;border-radius:22px}
 .gx-floating{right:10px;bottom:10px}
}


/* Correção de contraste: texto escuro em qualquer superfície clara */
body.gx-light,
body.gx-light main,
body.gx-light section,
body.gx-light article,
body.gx-light div,
body.gx-light p,
body.gx-light span,
body.gx-light li,
body.gx-light label,
body.gx-light small,
body.gx-light strong,
body.gx-light b,
body.gx-light h1,
body.gx-light h2,
body.gx-light h3,
body.gx-light h4,
body.gx-light h5,
body.gx-light h6,
body.gx-light td,
body.gx-light th {
  color: #111827 !important;
}
body.gx-light .gx-muted,
body.gx-light .gx-hero p,
body.gx-light .gx-kicker {
  color: #334155 !important;
}
body.gx-light a:not(.gx-btn) {
  color: #075985 !important;
}
body.gx-light nav a {
  color: #334155 !important;
}
body.gx-light nav a:hover,
body.gx-light nav a.active {
  color: #0f172a !important;
  background: rgba(14,116,144,.10) !important;
}
body.gx-light .gx-card,
body.gx-light .gx-hero,
body.gx-light .gx-toolbar,
body.gx-light .gx-list li,
body.gx-light .gx-empty {
  color: #111827 !important;
}
body.gx-light input,
body.gx-light select,
body.gx-light textarea {
  color: #111827 !important;
  background: #ffffff !important;
}
body.gx-light input::placeholder,
body.gx-light textarea::placeholder {
  color: #64748b !important;
}
body.gx-light .gx-pill {
  color: #065f46 !important;
}
body.gx-light .gx-btn {
  color: #ffffff !important;
}
body.gx-light .gx-floating {
  background: rgba(255,255,255,.92) !important;
}
body.gx-light .gx-floating button {
  color: #111827 !important;
  background: rgba(15,23,42,.06) !important;
}
