/* ==========================================================================
   Progressive Jackpot Counter
   Bright violet / lavender casino styling for index.php, plus the admin panel
   ========================================================================== */

:root{
    /* violets */
    --v-950:#16043a;
    --v-900:#240a53;
    --v-800:#33107a;
    --v-700:#4b18a8;
    --v-600:#6a24d6;
    --v-500:#8b46f0;
    --v-400:#a97bff;
    --v-300:#c6a5ff;
    --v-200:#e0cdff;
    --v-100:#f1e8ff;

    /* golds */
    --g-100:#fff6da;
    --g-200:#ffe9a8;
    --g-300:#ffd775;
    --g-400:#f0b73f;
    --g-500:#d0901d;
    --g-700:#9a6613;

    --white:#ffffff;
    --ink:#2a0b63;

    --font-ui:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

    --bulb:#fff3cf;
    --radius:26px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
    font-family:var(--font-ui);
    color:var(--ink);
    background:linear-gradient(165deg,#b98cf5 0%,#8b5cf0 45%,#5a24b8 100%);
    min-height:100vh;
    min-height:100dvh;
    -webkit-font-smoothing:antialiased;
}

/* ==========================================================================
   Public display
   ========================================================================== */

body.stage{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    padding:clamp(16px,3vw,44px) clamp(10px,2.5vw,40px);
}

/* Background artwork (falls back to a gradient if the image is missing) */
.scene{
    position:fixed;
    inset:0;
    z-index:0;
    background-color:#6a24d6;
    background:
        url("img/scene.jpg") center center / cover no-repeat,
        radial-gradient(120% 90% at 50% 30%, #d9c2ff 0%, #a06ef0 45%, #4d1aa0 100%);
    background-blend-mode:normal;
}
/* Portrait phones and tablets get the vertical artwork so the props stay in frame */
@media (orientation:portrait) and (max-width:1000px){
    .scene{
        background:
            url("img/scene-portrait.jpg") center center / cover no-repeat,
            radial-gradient(120% 90% at 50% 30%, #d9c2ff 0%, #a06ef0 45%, #4d1aa0 100%);
    }
}
/* Animated background. Two stacked <video> elements crossfade into each other so the
   clip loops without a visible cut.
   The z-index here MUST beat .scene: the still artwork is opaque, and equal z-index would
   let it paint over the video (DOM order decides ties, and the video layer is inserted
   first). Layer order for the whole page is: scene 0 -> video 1 -> veil 2 -> content 3
   -> brandmark 4 -> full-screen button 5. */
.scene-video{
    position:fixed;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
}
.scene-video video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .9s ease;
}
.scene-video video.is-on{opacity:1;}

.scene-veil{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        radial-gradient(52% 42% at 50% 48%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 72%),
        radial-gradient(120% 80% at 50% 120%, rgba(60,15,130,.42) 0%, rgba(60,15,130,0) 60%);
}

.wrap{
    position:relative;
    z-index:3;
    width:100%;
    max-width:1560px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:clamp(8px,1.4vw,18px);
    isolation:isolate;
}

/* ---- logo ---- */

/* Corner brandmark, like the reference key visual. Admin upload wins, otherwise the
   shipped assets/img/logo.png is used. */
.brandmark{
    position:fixed;
    top:clamp(12px,2.2vw,34px);
    left:clamp(12px,2.2vw,34px);
    z-index:4;
    line-height:0;
    pointer-events:none;
}
.brandmark.is-empty{display:none;}
.brandmark img{
    width:auto;height:auto;
    max-width:clamp(90px,13vw,230px);
    max-height:clamp(34px,6vw,96px);
    filter:drop-shadow(0 4px 14px rgba(30,6,86,.5));
}
@media (max-width:640px){
    .brandmark img{max-width:96px;max-height:38px;}
}
body.presentation .brandmark{opacity:.92;}

/* ---- title block ---- */

.titles{margin:0;position:relative;}

.title-eyebrow{
    margin:0 0 .06em;
    font-weight:700;
    font-size:clamp(.95rem,3.1vw,2.55rem);
    letter-spacing:clamp(.14em,.62vw,.42em);
    text-indent:clamp(.14em,.62vw,.42em);   /* balance the trailing letter gap */
    text-transform:uppercase;
    color:#5b21b6;
    background:linear-gradient(180deg,#7c4dff 0%,#5b21b6 55%,#3f1188 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 2px 0 rgba(255,255,255,.55)) drop-shadow(0 6px 14px rgba(40,8,95,.35));
}

.title-hero{
    position:relative;
    margin:0;
    font-weight:900;
    font-size:clamp(3rem,12.5vw,10.5rem);
    line-height:.94;
    letter-spacing:.005em;
    text-transform:uppercase;
    background:linear-gradient(180deg,
        #f4e9ff 0%,
        #c9a2ff 18%,
        #8b46f0 42%,
        #5b18b8 58%,
        #a25cff 76%,
        #6c22cf 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}

/* 3D extrusion + light rim, painted behind the gradient face */
.title-hero::before{
    content:attr(data-text);
    position:absolute;
    left:0;right:0;top:0;
    z-index:-1;
    color:#3c0f86;
    -webkit-text-fill-color:#3c0f86;
    -webkit-text-stroke:.06em #ede0ff;
    paint-order:stroke fill;
    text-shadow:
        0 .010em 0 #4d16a3,
        0 .020em 0 #481499,
        0 .030em 0 #42128e,
        0 .040em 0 #3c1082,
        0 .050em 0 #360e76,
        0 .060em 0 #300c6a,
        0 .070em 0 #2a0a5e,
        0 .080em 0 #250952,
        0 .095em .04em rgba(20,3,60,.6),
        0 .16em .3em rgba(20,3,60,.45);
}

/* ---- board (plaque + frame) ---- */

.board{
    position:relative;
    width:auto;
    max-width:100%;
    margin-top:clamp(16px,2.4vw,32px);
    padding-top:clamp(14px,1.8vw,26px);
}

/* "TOTAL JACKPOT" plaque sitting on the top edge of the frame */
.plaque{
    position:absolute;
    top:0;left:50%;
    transform:translate(-50%,-42%);
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:none;
}
.crown{
    width:clamp(26px,3.2vw,52px);
    height:auto;
    margin-bottom:-6%;
    filter:drop-shadow(0 3px 6px rgba(30,6,80,.5));
}
.plaque-plate{
    display:inline-flex;
    align-items:center;
    gap:clamp(6px,.8vw,14px);
    padding:clamp(4px,.5vw,9px) clamp(12px,1.7vw,30px);
    border-radius:8px;
    background:linear-gradient(180deg,#4d17a8 0%,#320d78 50%,#4a16a2 100%);
    border:2px solid transparent;
    background-clip:padding-box;
    box-shadow:
        0 0 0 2px var(--g-400),
        0 0 0 4px rgba(60,15,130,.55),
        0 6px 16px rgba(28,6,78,.5),
        0 0 18px rgba(255,215,117,.35);
}
.plaque-text{
    font-weight:700;
    font-size:clamp(.6rem,1.5vw,1.35rem);
    letter-spacing:clamp(.08em,.28vw,.2em);
    text-transform:uppercase;
    color:var(--g-100);
    text-shadow:0 1px 2px rgba(0,0,0,.55);
    white-space:nowrap;
}
.gem{
    width:clamp(5px,.6vw,9px);
    height:clamp(5px,.6vw,9px);
    background:linear-gradient(180deg,var(--g-100),var(--g-400));
    transform:rotate(45deg);
    border-radius:1px;
    box-shadow:0 0 6px rgba(255,215,117,.9);
}

/* Outer purple bezel with the bulb ring */
.frame{
    position:relative;
    padding:clamp(13px,1.9vw,26px);
    border-radius:var(--radius);
    background:
        linear-gradient(180deg,#8f4bf5 0%,#6a24d6 26%,#4b18a8 60%,#7c3aea 100%);
    box-shadow:
        0 0 0 2px rgba(255,255,255,.35) inset,
        0 0 0 3px rgba(74,20,156,.55),
        0 18px 44px rgba(30,6,86,.55),
        0 0 60px rgba(168,110,255,.55);
}
.frame::after{ /* glossy sweep across the bezel */
    content:"";
    position:absolute;inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%);
    pointer-events:none;
}

/* Gold rail + dark inset panel that holds the digits */
.rail{
    position:relative;
    z-index:2;
    padding:clamp(10px,1.5vw,22px) clamp(10px,1.8vw,28px);
    border-radius:calc(var(--radius) - 10px);
    background:linear-gradient(180deg,#1a0642 0%,#25085c 45%,#160438 100%);
    box-shadow:
        0 0 0 2px var(--g-400),
        0 0 0 5px #2d0b6c,
        0 0 0 6px rgba(255,215,117,.45),
        0 8px 26px rgba(0,0,0,.5) inset;
}

/* Bulbs around the bezel */
.bulbs{position:absolute;inset:clamp(6px,.95vw,13px);pointer-events:none;z-index:3;}
.bulb{
    --size:clamp(7px,.92vw,13px);
    position:absolute;
    width:var(--size);height:var(--size);
    margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
    border-radius:50%;
    background:radial-gradient(circle at 34% 30%,#fffdf5 0%,var(--bulb) 42%,#f4c65a 100%);
    box-shadow:
        0 0 6px rgba(255,244,208,.95),
        0 0 16px rgba(255,220,130,.75),
        0 0 30px rgba(255,205,90,.45);
    animation:bulbChase 1.5s ease-in-out infinite;
}
@keyframes bulbChase{
    0%,100%{opacity:.42;transform:scale(.82);}
    45%    {opacity:1;transform:scale(1.15);}
}

/* ---- counter ---- */

.counter{
    --digit-w:clamp(30px,6.9vw,104px);
    --digit-h:clamp(48px,9.9vw,150px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(3px,.42vw,8px);
    flex-wrap:nowrap;
}

.currency{
    font-weight:800;
    font-size:calc(var(--digit-h) * .44);
    line-height:1;
    margin-right:clamp(4px,.6vw,12px);
    background:linear-gradient(180deg,var(--g-100) 0%,var(--g-300) 45%,var(--g-500) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.currency.is-empty{display:none;}

.digit{
    position:relative;
    display:block;
    width:var(--digit-w);
    height:var(--digit-h);
    overflow:hidden;
    border-radius:clamp(5px,.8vw,12px);
    background:linear-gradient(180deg,#3a1180 0%,#2a0a63 46%,#20064e 54%,#341073 100%);
    box-shadow:
        0 0 0 1px rgba(255,215,117,.45),
        0 0 0 3px rgba(12,2,36,.85),
        0 2px 6px rgba(0,0,0,.55) inset,
        0 0 16px rgba(150,90,255,.28) inset;
}
.digit::before{ /* top glass highlight */
    content:"";
    position:absolute;left:0;right:0;top:0;height:46%;
    background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,0));
    z-index:2;pointer-events:none;
}
.digit::after{ /* mechanical reel split */
    content:"";
    position:absolute;left:0;right:0;top:50%;height:1px;
    background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.55) 20%,rgba(0,0,0,.55) 80%,rgba(0,0,0,0));
    z-index:2;pointer-events:none;
}

.reel{
    display:block;
    height:1100%;                       /* 11 slots: 0-9 plus a duplicate 0 for the wrap */
    transition:transform .55s cubic-bezier(.22,.85,.28,1);
    will-change:transform;
}
.reel b{
    display:flex;
    align-items:center;
    justify-content:center;
    height:calc(100% / 11);
    font-weight:700;
    font-size:calc(var(--digit-h) * .60);
    line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,#fff7dd 0%,#ffe09a 38%,#f3b944 62%,#c9871a 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,196,80,.45));
}

.digit.flash{animation:digitFlash .6s ease-out;}
@keyframes digitFlash{
    0%  {box-shadow:0 0 0 1px rgba(255,246,218,.95),0 0 0 3px rgba(12,2,36,.85),0 0 26px rgba(255,225,150,.85);}
    100%{box-shadow:0 0 0 1px rgba(255,215,117,.45),0 0 0 3px rgba(12,2,36,.85),0 2px 6px rgba(0,0,0,.55) inset,0 0 16px rgba(150,90,255,.28) inset;}
}

/* Separators are never digit columns - no box, just the glyph */
.sep{
    align-self:flex-end;
    width:clamp(9px,1.15vw,26px);
    text-align:center;
    font-weight:800;
    font-size:calc(var(--digit-h) * .42);
    line-height:1;
    padding-bottom:calc(var(--digit-h) * .06);
    color:var(--g-300);
    text-shadow:0 2px 3px rgba(0,0,0,.6),0 0 12px rgba(255,196,80,.6);
}
.sep-dot{color:var(--g-200);}

/* ---- tagline ---- */

.tagline{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6em;
    margin:clamp(14px,2vw,26px) 0 0;
    font-weight:600;
    font-size:clamp(.72rem,1.55vw,1.32rem);
    color:#31106f;
    text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.pulse{
    width:.72em;height:.72em;border-radius:50%;
    background:#7c3aed;
    box-shadow:0 0 0 3px rgba(255,255,255,.5);
}
.pulse[data-running="1"]{
    background:#22c55e;
    animation:pulseBeat 1.5s ease-in-out infinite;
}
@keyframes pulseBeat{
    0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.5),0 0 0 0 rgba(34,197,94,.55);}
    60%    {box-shadow:0 0 0 3px rgba(255,255,255,.5),0 0 0 .55em rgba(34,197,94,0);}
}

/* ---- full-screen button ---- */

.fs-btn{
    position:fixed;
    right:clamp(10px,2vw,26px);
    bottom:clamp(10px,2vw,26px);
    z-index:5;
    display:inline-flex;align-items:center;gap:.5em;
    padding:.6em 1.05em;
    font:inherit;font-size:.85rem;font-weight:600;
    color:var(--g-100);
    background:rgba(45,11,108,.8);
    border:1px solid rgba(255,215,117,.5);
    border-radius:999px;
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:opacity .3s ease,transform .18s ease,background .18s ease;
}
.fs-btn:hover{background:rgba(74,22,162,.92);transform:translateY(-1px);}
.fs-btn:focus-visible{outline:3px solid var(--g-300);outline-offset:2px;}
body.idle .fs-btn{opacity:0;pointer-events:none;}
body.presentation .wrap{max-width:none;}
body.offline .pulse{background:#ef4444;animation:none;}

/* ---- breakpoints ---- */

/* On landscape screens the artwork carries the brand logo in its upper left. Drop the
   content column below it so the logo reads as part of the title lockup instead of
   colliding with it. */
@media (min-width:900px) and (min-aspect-ratio:23/20){
    .wrap{margin-top:20vh;}
    .counter{--digit-w:clamp(30px,5.6vw,86px);--digit-h:clamp(48px,8vw,124px);}
    .title-hero{font-size:clamp(3rem,9.5vw,7.5rem);}
}

@media (min-width:1900px){
    .wrap{max-width:1820px;}
    .counter{--digit-w:clamp(104px,6.2vw,168px);--digit-h:clamp(150px,9vw,242px);}
}
@media (min-width:2500px){
    .wrap{max-width:2380px;}
    .counter{--digit-w:200px;--digit-h:290px;}
}

@media (max-width:640px){
    .counter{gap:2px;}
    .title-hero{font-size:clamp(2.6rem,14vw,4.6rem);}
    .rail{padding-left:8px;padding-right:8px;}
}
@media (max-width:420px){
    .counter{--digit-w:clamp(25px,8vw,38px);--digit-h:clamp(40px,12.6vw,60px);}
    .title-eyebrow{letter-spacing:.12em;text-indent:.12em;}
}

@media (max-height:560px) and (orientation:landscape){
    .title-eyebrow{font-size:clamp(.7rem,2.4vh,1.2rem);}
    .title-hero{font-size:clamp(2rem,9vh,4.4rem);}
    .counter{--digit-h:clamp(40px,15vh,104px);--digit-w:clamp(27px,10.5vh,72px);}
    .tagline{display:none;}
}

@media (prefers-reduced-motion:reduce){
    .reel{transition:none;}
    .bulb,.pulse{animation:none;}
}

/* ==========================================================================
   Admin panel
   ========================================================================== */

body.admin{
    padding:clamp(14px,3vw,40px);
    color:var(--v-100);
    background:
        radial-gradient(110% 80% at 50% -10%, #5a24b8 0%, rgba(90,36,184,0) 55%),
        linear-gradient(170deg,#2a0a63 0%,#1b0645 50%,#12042e 100%);
    background-attachment:fixed;
}

.admin-shell{max-width:1080px;margin:0 auto;}

.admin-head{
    display:flex;flex-wrap:wrap;gap:12px;
    align-items:center;justify-content:space-between;
    margin-bottom:22px;
}
.admin-head h1{
    margin:0;
    font-size:clamp(1.1rem,3.2vw,1.75rem);
    font-weight:800;
    letter-spacing:.02em;
    background:linear-gradient(180deg,var(--g-100),var(--g-300) 50%,var(--g-500));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}
.admin-head .head-actions{display:flex;gap:10px;flex-wrap:wrap;}

.card{
    background:linear-gradient(180deg,rgba(74,22,162,.55),rgba(28,8,66,.85));
    border:1px solid rgba(255,215,117,.3);
    border-radius:18px;
    padding:clamp(16px,2.6vw,26px);
    margin-bottom:20px;
    box-shadow:0 18px 44px rgba(0,0,0,.4),0 0 0 1px rgba(169,123,255,.16) inset;
}
.card h2{
    margin:0 0 4px;
    font-size:1rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:var(--g-200);
}
.card .hint{margin:0 0 18px;font-size:.86rem;color:rgba(224,205,255,.66);line-height:1.55;}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(224,205,255,.82);}
.field small{font-size:.76rem;color:rgba(224,205,255,.55);line-height:1.45;}

input[type=text],input[type=number],input[type=password],input[type=file],select{
    width:100%;
    padding:12px 14px;
    font:inherit;font-size:1rem;
    color:var(--white);
    background:rgba(12,3,34,.72);
    border:1px solid rgba(169,123,255,.45);
    border-radius:10px;
    outline:none;
    transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus{border-color:var(--g-300);box-shadow:0 0 0 3px rgba(255,215,117,.2);}
input[type=file]{padding:9px 10px;font-size:.9rem;}

.switch{display:flex;align-items:center;gap:10px;font-size:.94rem;color:var(--v-100);cursor:pointer;user-select:none;}
.switch input{width:20px;height:20px;accent-color:var(--g-400);cursor:pointer;}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;
    padding:12px 20px;
    font:inherit;font-weight:700;font-size:.92rem;
    letter-spacing:.03em;
    border-radius:10px;
    border:1px solid rgba(255,215,117,.45);
    background:linear-gradient(180deg,rgba(106,36,214,.9),rgba(51,16,122,.92));
    color:var(--g-100);
    cursor:pointer;
    text-decoration:none;
    transition:transform .12s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.4);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:3px solid var(--g-300);outline-offset:2px;}
.btn-gold{
    background:linear-gradient(180deg,var(--g-200),var(--g-400) 55%,var(--g-500));
    color:#3a1d00;border-color:rgba(255,246,218,.85);
    text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--v-100);border-color:rgba(169,123,255,.45);}
.btn-danger{background:linear-gradient(180deg,#c0335c,#83203c);color:#ffe8ee;border-color:rgba(255,150,180,.5);}
.btn-wide{width:100%;}

.btn-row{display:flex;flex-wrap:wrap;gap:10px;}
.btn-row form{display:contents;}

.alert{
    padding:13px 16px;border-radius:12px;margin-bottom:18px;
    font-size:.93rem;line-height:1.5;
    border:1px solid transparent;
}
.alert-ok{background:rgba(40,150,90,.2);border-color:rgba(90,230,150,.45);color:#c9ffe2;}
.alert-err{background:rgba(190,40,80,.22);border-color:rgba(255,120,150,.45);color:#ffd6e0;}

.live-box{
    display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
    padding:16px 18px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(16,4,44,.9),rgba(74,22,162,.7));
    border:1px solid rgba(255,215,117,.32);
}
.live-value{
    font-weight:800;
    font-size:clamp(1.5rem,6.4vw,2.6rem);
    letter-spacing:.01em;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,#fff7dd,#ffe09a 40%,#e3a52f);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    word-break:break-all;
}
.live-meta{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:rgba(224,205,255,.7);}
.badge{
    display:inline-block;padding:.25em .8em;border-radius:999px;
    font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.badge-live{background:rgba(90,240,160,.16);color:#8dffc4;border:1px solid rgba(90,240,160,.45);}
.badge-off{background:rgba(255,255,255,.08);color:rgba(224,205,255,.75);border:1px solid rgba(255,255,255,.18);}

.logo-preview{
    margin-top:10px;padding:12px;border-radius:10px;
    background:rgba(255,255,255,.07);
    display:inline-block;
}
.logo-preview img{max-width:180px;max-height:80px;display:block;}

/* Login screen */

body.login{display:flex;align-items:center;justify-content:center;}
.login-card{width:100%;max-width:400px;}
.login-card .card{margin-bottom:0;}
.login-title{
    text-align:center;margin:0 0 6px;
    font-size:1.35rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    background:linear-gradient(180deg,var(--g-100),var(--g-400));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}
.login-sub{text-align:center;margin:0 0 20px;font-size:.85rem;color:rgba(224,205,255,.65);}

.table-note{
    font-size:.82rem;color:rgba(224,205,255,.68);line-height:1.65;
    background:rgba(0,0,0,.24);border-left:3px solid var(--g-400);
    padding:12px 14px;border-radius:0 10px 10px 0;
}

@media (max-width:600px){
    .btn{width:100%;}
    .btn-row{flex-direction:column;}
    .admin-head{flex-direction:column;align-items:stretch;}
    .admin-head .head-actions{width:100%;}
}