/* =========================================================
IDEO-LAB CONTROL CENTER (HUD) — Fullscreen Overlay
========================================================= */
:root{
    --hud-bg: rgba(5,8,14,.74);
    --hud-glow: rgba(0,229,255,.22);
    --hud-line: rgba(180,120,255,.18);
    --hud-text: rgba(240,248,255,.92);
}

.hud-trigger{
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(0,255,242,.28);
    background: rgba(10,15,25,.55);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 18px rgba(0,255,242,.15);
    z-index: 12000;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hud-trigger:hover{
    transform: translateY(-2px);
    border-color: rgba(0,255,242,.55);
    box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 26px rgba(0,255,242,.22);
}
.hud-trigger__ring{
    position:absolute; inset:10px;
    border-radius: 14px;
    border: 1px solid rgba(164,94,255,.35);
    box-shadow: inset 0 0 18px rgba(164,94,255,.18);
}
.hud-trigger__dot{
    position:absolute; left:50%; top:50%;
    width:8px; height:8px; border-radius:50%;
    transform: translate(-50%,-50%);
    background: rgba(0,255,242,.85);
    box-shadow: 0 0 12px rgba(0,255,242,.7);
    animation: hudPulse 2.2s ease-out infinite;
}
@keyframes hudPulse{
    0%{ opacity: .9; transform: translate(-50%,-50%) scale(1); }
70%{ opacity: 0; transform: translate(-50%,-50%) scale(5.2); }
100%{ opacity: 0; transform: translate(-50%,-50%) scale(5.2); }
}

.hud-overlay{
    position: fixed; inset: 0;
    background: radial-gradient(circle at 60% 40%, rgba(0,229,255,.10), transparent 55%),
    radial-gradient(circle at 25% 70%, rgba(164,94,255,.12), transparent 60%),
    var(--hud-bg);
    z-index: 11950;
    display: none;
}
.hud-overlay.is-open{ display:block; }

.hud-shell{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%) scale(.98);
    width: min(1100px, calc(100vw - 36px));
    height: min(700px, calc(100vh - 36px));
    border-radius: 26px;
    border: 1px solid rgba(0,255,242,.22);
    background: rgba(10,15,25,.52);
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 42px rgba(0,229,255,.12);
    overflow: hidden;
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}
.hud-overlay.is-open .hud-shell{
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
}

/* Grid “tech lines” overlay */
.hud-shell::before{
    content:"";
    position:absolute; inset:0;
    background:
    linear-gradient(to right, rgba(0,229,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(164,94,255,.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%);
    pointer-events:none;
}
.hud-shell::after{
    content:"";
    position:absolute; inset:-2px;
    border-radius: 28px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    pointer-events:none;
}

.hud-topbar{
    position: relative;
    z-index: 2;
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 18px 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.hud-title{ display:flex; flex-direction:column; gap:2px; }
.hud-kicker{
    font: 700 12px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .18em;
    color: rgba(180,240,255,.85);
}
.hud-main{
    font: 900 18px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .12em;
    color: var(--hud-text);
    text-shadow: 0 0 18px rgba(0,229,255,.12);
}

.hud-actions{ display:flex; gap:10px; align-items:center; }
.hud-btn{
    border-radius: 12px;
    border: 1px solid rgba(0,255,242,.18);
    background: rgba(0,255,242,.06);
    color: rgba(220,255,255,.92);
    padding: 10px 12px;
    font: 800 12px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .12em;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hud-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(0,255,242,.35);
    box-shadow: 0 0 22px rgba(0,229,255,.12);
}
.hud-btn--close{
    border-color: rgba(255,64,129,.22);
    background: rgba(255,64,129,.06);
}

.hud-scanline{
    position:absolute; left:0; right:0; top:56px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.6), transparent);
    opacity: .35;
    filter: blur(.2px);
    animation: hudScan 5.4s linear infinite;
    z-index: 2;
}
@keyframes hudScan{
    0%{ transform: translateX(-30%); }
100%{ transform: translateX(30%); }
}

.hud-grid{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    height: calc(100% - 68px);
}


.hud-panel{
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(10,15,25,.35);
    box-shadow: inset 0 0 0 1px rgba(0,229,255,.05);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.hud-panel--wide{ padding-bottom: 10px; }

.hud-panel__header{
    display:flex; align-items:baseline; justify-content:space-between;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.hud-panel__title{
    font: 900 12px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .14em;
    color: rgba(240,248,255,.88);
}
.hud-panel__hint{
    font: 700 11px/1 "Inter", system-ui, sans-serif;
    color: rgba(200,230,255,.55);
}

.hud-modules{
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

.hud-modules--grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}


.hud-module{
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    min-height: 74px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
    color: rgba(240,248,255,.92);
    position: relative;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}


.hud-module::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(circle at 15% 35%, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%);
    opacity:.55;
    pointer-events:none;
}
.hud-module:hover{
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--c) 55%, rgba(255,255,255,.10));
    box-shadow: 0 0 26px color-mix(in srgb, var(--c) 22%, transparent);
}

.hud-module__icon{
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.06);
    color: var(--c);
    font-size: 17px;
}

.hud-module__label{
    font: 800 16px/1.1 "Inter", system-ui, sans-serif;
    letter-spacing: .03em;
    color: rgba(240,248,255,.96);
}


.hud-module__meta{
    font: 600 12px/1.3 "Inter", system-ui, sans-serif;
    color: rgba(200,230,255,.72);
    white-space: normal;
}

/* Telemetry zone */
.hud-telemetry{
    padding: 12px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 1fr;
    gap: 12px;
    height: 100%;
}
.hud-card{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
    padding: 12px;
    overflow:hidden;
    position: relative;
}
.hud-card--big{
    grid-column: 1 / span 2;
}
.hud-card__title{
    font: 900 12px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .14em;
    color: rgba(240,248,255,.84);
    margin-bottom: 10px;
}
.hud-card__foot{
    display:flex; gap:10px; align-items:center;
    margin-top: 10px;
    color: rgba(200,230,255,.7);
    font: 800 11px/1 "Inter", system-ui, sans-serif;
}
.hud-pill{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,229,255,.22);
    background: rgba(0,229,255,.06);
    letter-spacing: .16em;
}
.hud-pill--warn{
    border-color: rgba(255,64,129,.22);
    background: rgba(255,64,129,.06);
}
.hud-stat{ opacity:.9; }

/* Faux charts (CSS only) */
.hud-mini-chart{
    height: 140px;
    border-radius: 14px;
    border: 1px solid rgba(0,229,255,.12);
    background:
    radial-gradient(circle at 20% 30%, rgba(0,229,255,.10), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(164,94,255,.10), transparent 55%),
    linear-gradient(to right, rgba(0,229,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(164,94,255,.05) 1px, transparent 1px);
    background-size: auto, auto, 38px 38px, 38px 38px;
    position: relative;
    overflow:hidden;
}
.hud-mini-chart::after{
    content:"";
    position:absolute; inset:-20px;
    background: conic-gradient(from 90deg, rgba(0,229,255,.0), rgba(0,229,255,.35), rgba(164,94,255,.22), rgba(0,229,255,.0));
    opacity:.18;
    animation: hudSpin 8s linear infinite;
}
@keyframes hudSpin{ to{ transform: rotate(360deg); } }

.hud-radar{
    height: 150px;
    border-radius: 14px;
    border: 1px solid rgba(0,229,255,.12);
    background:
    radial-gradient(circle at center, rgba(0,229,255,.08) 0 15%, transparent 16%),
    radial-gradient(circle at center, rgba(0,229,255,.08) 0 34%, transparent 35%),
    radial-gradient(circle at center, rgba(0,229,255,.08) 0 52%, transparent 53%),
    linear-gradient(transparent, rgba(0,229,255,.10), transparent),
    rgba(10,15,25,.25);
    position: relative;
    overflow:hidden;
}
.hud-radar::before{
    content:"";
    position:absolute; inset:-40px;
    background: conic-gradient(from 0deg, rgba(0,229,255,.0), rgba(0,229,255,.55), rgba(0,229,255,.0));
    opacity:.18;
    animation: hudSpin 3.6s linear infinite;
}
.hud-bars{
    height: 150px;
    border-radius: 14px;
    border: 1px solid rgba(164,94,255,.12);
    background:
    linear-gradient(90deg, rgba(164,94,255,.14) 0 8px, transparent 8px 16px);
    mask-image: linear-gradient(to top, black 0 70%, transparent);
    opacity:.9;
}

.hud-footer{
    position:absolute; left:14px; right:14px; bottom:10px;
    display:flex; align-items:center; justify-content:space-between;
    color: rgba(200,230,255,.55);
    font: 800 11px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .12em;
}
.hud-dot{
    display:inline-block;
    width:8px; height:8px; border-radius:50%;
    background: rgba(0,255,242,.85);
    box-shadow: 0 0 12px rgba(0,255,242,.35);
    margin-right: 8px;
}

@media (max-width: 920px){
    .hud-grid{ grid-template-columns: 1fr; }
.hud-telemetry{ grid-template-columns: 1fr; grid-template-rows: 220px 1fr 1fr; }
.hud-card--big{ grid-column: auto; }
}


/* =========================================================
HUD trigger — mode "flottant / wander"
(reste fixed mais se déplace via transform)
========================================================= */
.hud-trigger--wander{
    /* petit flottement doux + trajet */
    animation: hudWander 34s ease-in-out infinite alternate;
    will-change: transform;
}

/* Pause au survol (UX) */
.hud-trigger--wander:hover{
    animation-play-state: paused;
}

/* Trajectoire : déplacements en vw/vh = s’adapte au viewport */
@keyframes hudWander{
    0%   { transform: translate3d(0,0,0); }
18%  { transform: translate3d(-10vw, -18vh, 0); }
38%  { transform: translate3d(-28vw, -6vh, 0); }
58%  { transform: translate3d(-18vw, -32vh, 0); }
78%  { transform: translate3d(-34vw, -20vh, 0); }
100% { transform: translate3d(-12vw, -42vh, 0); }
}

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
    .hud-trigger--wander{ animation: none !important; }
}


/* =========================================================
HUD Trigger: même style que les autres icônes + plus grand
+ départ centre écran + wander plein écran
========================================================= */
.ai-badge--hud{
    /* on part du centre du viewport */
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

    /* plus grand que tes badges actuels */
    width: 190px !important;
    height: 190px !important;
    border-radius: 32px !important;

    /* petit glow plus “premium” */
    border: 1px solid rgba(0,255,242,.45) !important;
    box-shadow:
    0 12px 36px rgba(0,0,0,.55),
    0 0 28px rgba(0,255,242,.18),
    inset 0 0 22px rgba(164,94,255,.14) !important;
}

.ai-badge--hud img{
    width: 110px !important;
    height: 110px !important;
}

/* Wander “plein écran” en partant du centre.
IMPORTANT: on garde translate(-50%,-50%) en base */
.ai-badge--hud-wander{
    animation: hudWanderCenter 52s ease-in-out infinite alternate;
    will-change: transform;
}

/* pause au hover (UX) */
.ai-badge--hud-wander:hover{ animation-play-state: paused; }

/* Trajectoire lente/moyenne, couvre tout l’écran */
@keyframes hudWanderCenter{
    0%   { transform: translate(-50%,-50%) translate3d(0,0,0); }
15%  { transform: translate(-50%,-50%) translate3d(-32vw, -22vh, 0); }
30%  { transform: translate(-50%,-50%) translate3d( 34vw, -18vh, 0); }
45%  { transform: translate(-50%,-50%) translate3d( 22vw,  26vh, 0); }
60%  { transform: translate(-50%,-50%) translate3d(-36vw,  24vh, 0); }
75%  { transform: translate(-50%,-50%) translate3d(-10vw, -34vh, 0); }
90%  { transform: translate(-50%,-50%) translate3d( 40vw,  10vh, 0); }
100% { transform: translate(-50%,-50%) translate3d(-18vw,  34vh, 0); }
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
    .ai-badge--hud-wander{ animation: none !important; }
.ai-badge--hud{ transform: translate(-50%,-50%) !important; }
}


/* =========================================================
Désactiver les anciennes icônes flottantes
========================================================= */
.ai-badge--wander,
.ai-badge--wander-2,
.ai-badge--wander-3,
.ai-badge--wander-4,
.ai-badge--wander-5,
.ai-badge--wander-9{
    display: none !important;
}


/* =========================================================
HUD — Boost contraste + hover + zones graph canvas
========================================================= */

/* Un peu plus clair (toujours dark) */
:root{
    --hud-bg: rgba(8, 12, 20, .78);
    --hud-glow-strong: rgba(0,229,255,.30);
    --hud-violet: rgba(164,94,255,.28);
    --hud-border: rgba(0,255,242,.26);
}

/* Panels plus “premium” */
.hud-panel{
    background: rgba(14,18,28,.46);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow:
    inset 0 0 0 1px rgba(0,229,255,.06),
    0 16px 44px rgba(0,0,0,.45);
}

/* Hover global sur les cards */
.hud-card{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hud-card:hover{
    transform: translateY(-2px);
    border-color: var(--hud-border);
    box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 26px rgba(0,229,255,.10),
    0 0 26px rgba(164,94,255,.08);
}

/* Zones graphiques (canvas) */
.hud-mini-chart,
.hud-radar,
.hud-bars{
    position: relative;
    overflow: hidden;
}

.hud-mini-chart canvas,
.hud-radar canvas,
.hud-bars canvas{
    width: 100%;
    height: 100%;
    display: block;
    opacity: .95;
    filter: drop-shadow(0 0 16px rgba(0,229,255,.10));
}

/* Petit “sheen” holographique */
.hud-mini-chart::before,
.hud-radar::before,
.hud-bars::before{
    content:"";
    position:absolute; inset:-40%;
    background: linear-gradient(115deg,
    transparent 0%,
    rgba(0,229,255,.08) 45%,
    rgba(164,94,255,.08) 55%,
    transparent 100%);
    transform: rotate(10deg);
    animation: hudSheen 7.5s linear infinite;
    pointer-events:none;
    opacity: .55;
}
@keyframes hudSheen{
    0%{ transform: translateX(-20%) rotate(10deg); }
100%{ transform: translateX(20%) rotate(10deg); }
}

/* Modules: hover plus “néon” */
.hud-module:hover{
    box-shadow:
    0 0 28px color-mix(in srgb, var(--c) 26%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Topbar un peu plus lisible */
.hud-main{
    text-shadow:
    0 0 18px rgba(0,229,255,.14),
    0 0 22px rgba(164,94,255,.08);
}


/* =========================================================
HUD Modules — GIF preview à droite
========================================================= */
.hud-module{
    /* 44px emoji | texte | preview gif */
    grid-template-columns: 44px 1fr 92px;
    align-items: center;
}

.hud-module__gif{
    grid-row: 1 / span 2;
    grid-column: 3;
    justify-self: end;

    width: 82px;
    height: 82px;
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.18);
    box-shadow:
    inset 0 0 18px rgba(0,229,255,.06),
    0 0 18px rgba(164,94,255,.08);

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hud-module:hover .hud-module__gif{
    transform: translateY(-1px) scale(1.02);
    border-color: color-mix(in srgb, var(--c) 40%, rgba(255,255,255,.14));
    box-shadow:
    inset 0 0 22px rgba(0,229,255,.10),
    0 0 26px color-mix(in srgb, var(--c) 16%, transparent);
}

.hud-module__gif .hud-gif{
    width: 100%;
    height: 100%;
    object-fit: cover;        /* look “dashboard” */
    border-radius: 12px;
    display: block;
    opacity: .95;
}

/* mobile : on réduit le preview */
@media (max-width: 520px){
    .hud-module{ grid-template-columns: 44px 1fr 74px; }
.hud-module__gif{ width: 66px; height: 52px; }
}



/* =========================================== */
/* === LAST PATCH FOR A MODAL REORG MENU   === */



@media (max-width: 900px){
    .hud-modules--grid{
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   HUD-DYN-2 — dynamic states
   ========================================================= */

.hud-module--locked {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.35);
}

.hud-module--locked:hover {
    transform: none;
    box-shadow: none;
}

.hud-module--new::after{
    display: none;
}

.hud-module--featured {
    border-color: color-mix(in srgb, var(--c) 42%, rgba(255,255,255,.10));
}

.hud-empty {
    grid-column: 1 / -1;
    min-height: 140px;
    border-radius: 18px;
    border: 1px dashed rgba(0, 229, 255, .24);
    background: rgba(255, 255, 255, .03);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: rgba(220, 245, 255, .86);
}

.hud-empty__title {
    font: 900 16px/1.2 "Inter", system-ui, sans-serif;
    letter-spacing: .08em;
}

.hud-empty__text {
    font: 600 13px/1.45 "Inter", system-ui, sans-serif;
    color: rgba(190, 220, 245, .70);
}


/* =========================================================
   HUD-DYN-3 — floating preview card
   ========================================================= */

.hud-preview {
    position: absolute;
    z-index: 20;
    width: min(360px, calc(100vw - 48px));
    min-height: 160px;
    display: none;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(0, 229, 255, .26);
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 229, 255, .12), transparent 42%),
        linear-gradient(135deg, rgba(14, 22, 42, .96), rgba(7, 12, 28, .97));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .58),
        0 0 34px rgba(0, 229, 255, .14);
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition:
        opacity .14s ease,
        transform .14s ease;
}

.hud-preview.is-visible {
    display: grid;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hud-preview__media {
    width: 104px;
    height: 104px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}

.hud-preview__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .96;
}

.hud-preview__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hud-preview__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hud-preview__status,
.hud-preview__popularity {
    font: 800 10px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .12em;
    color: rgba(210, 245, 255, .82);
}

.hud-preview__status {
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, .28);
    background: rgba(0, 229, 255, .08);
}

.hud-preview__status.is-locked {
    border-color: rgba(255, 179, 0, .34);
    background: rgba(255, 179, 0, .10);
    color: rgba(255, 230, 170, .92);
}

.hud-preview h3 {
    margin: 0;
    color: rgba(245, 250, 255, .96);
    font: 900 16px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .03em;
}

.hud-preview p {
    margin: 0;
    color: rgba(205, 225, 245, .78);
    font: 600 12px/1.45 "Inter", system-ui, sans-serif;
}

@media (max-width: 760px) {
    .hud-preview {
        display: none !important;
    }
}

.hud-module--featured .hud-module__label::before{
    content: "FEATURED";
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255,179,0,.45);
    background: rgba(255,179,0,.14);
    color: rgba(255,235,180,.96);
    font: 800 10px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .10em;
    box-shadow: 0 0 12px rgba(255,179,0,.14);
}

.hud-module--new .hud-module__label::after{
    content: "NEW";
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(0,229,255,.42);
    background: rgba(0,229,255,.14);
    color: rgba(220,255,255,.96);
    font: 800 10px/1 "Inter", system-ui, sans-serif;
    letter-spacing: .10em;
    box-shadow: 0 0 12px rgba(0,229,255,.14);
}