/* =========================================================
   DEVLIX — PREMIUM UI COMPONENT LIBRARY
   FLUID / RESPONSIVE LIBRARY SHELL
   ========================================================= */


/* =========================================================
   01. ROOT / DESIGN TOKENS
========================================================= */

:root {

    --devlix-bg:
        #05070c;

    --devlix-panel:
        #090e17;

    --devlix-panel-soft:
        #0c121e;

    --devlix-border:
        rgba(120,155,210,.14);

    --devlix-border-bright:
        rgba(85,200,255,.28);

    --devlix-text:
        #edf4ff;

    --devlix-text-soft:
        rgba(220,230,245,.58);

    --devlix-text-muted:
        rgba(170,185,210,.38);

    --devlix-cyan:
        #64dcff;

    --devlix-blue:
        #438dff;

    --devlix-green:
        #68e0ae;

    --devlix-radius:
        18px;


    /* ---------------------------------------------------------
       FLUID SPACING
    --------------------------------------------------------- */

    --page-gutter:
        clamp(12px, 4vw, 78px);

    --content-gutter:
        clamp(10px, 2.5vw, 30px);

    --section-gap:
        clamp(28px, 4vw, 52px);

    --preview-radius:
        clamp(18px, 2vw, 24px);


    /* ---------------------------------------------------------
       SAFE COMPONENT WIDTH
    --------------------------------------------------------- */

    --content-max:
        1420px;

    --selector-max:
        520px;

}


/* =========================================================
   02. GLOBAL RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    min-height:
        100%;

    width:
        100%;

    background:
        var(--devlix-bg);

    overflow-x:
        hidden;

}


body {

    margin:
        0;

    min-width:
        320px;

    min-height:
        100vh;

    width:
        100%;

    background:
        var(--devlix-bg);

    color:
        var(--devlix-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;

    overflow-x:
        hidden;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    border:
        0;

}


button:focus {

    outline:
        none;

}


button:focus-visible {

    outline:
        1px solid
        rgba(100,220,255,.65);

    outline-offset:
        3px;

}


/* Prevent long component names from breaking layout */

h1,
h2,
h3,
p,
span,
div {

    overflow-wrap:
        break-word;

}


/* =========================================================
   03. MAIN LIBRARY SHELL
========================================================= */

.devlix-library {

    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

    min-height:
        100vh;

    overflow-x:
        clip;

    overflow-y:
        visible;

    background:

        radial-gradient(
            circle at 50% 16%,
            rgba(53,115,255,.085),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 54%,
            rgba(20,180,255,.035),
            transparent 38%
        ),

        #05070c;

}


/* =========================================================
   04. BACKGROUND GRID
========================================================= */

.devlix-library::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        -1;

    width:
        100%;

    height:
        100%;

    pointer-events:
        none;

    opacity:
        .28;

    background-image:

        linear-gradient(
            rgba(105,140,190,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(105,140,190,.045) 1px,
            transparent 1px
        );

    background-size:
        clamp(28px, 3vw, 42px)
        clamp(28px, 3vw, 42px);

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );

}


/* =========================================================
   05. HEADER
========================================================= */

.library-header {

    position:
        relative;

    z-index:
        1000;

    width:
        100%;

    min-height:
        clamp(70px, 7vw, 92px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 var(--page-gutter);

    border-bottom:
        1px solid
        rgba(130,155,195,.08);

    background:
        rgba(5,8,14,.68);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

}


/* =========================================================
   06. BRAND
========================================================= */

.brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(10px, 1.2vw, 15px);

}


.brand-mark {

    width:
        clamp(38px, 4vw, 45px);

    height:
        clamp(38px, 4vw, 45px);

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(95,190,255,.22);

    border-radius:
        clamp(9px, 1vw, 11px);

    background:

        linear-gradient(
            145deg,
            rgba(48,85,145,.28),
            rgba(8,14,26,.72)
        );

    color:
        #bcdcff;

    font-size:
        clamp(12px, 1.2vw, 14px);

    font-weight:
        700;

    letter-spacing:
        -.04em;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.05),

        0 0 25px
        rgba(60,170,255,.035);

}


.brand-text {

    min-width:
        0;

}


.brand-name {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #f2f7ff;

    font-size:
        clamp(14px, 1.45vw, 18px);

    font-weight:
        750;

    letter-spacing:
        clamp(.15em, .4vw, .24em);

}


.brand-subtitle {

    margin-top:
        3px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgba(150,165,190,.42);

    font-size:
        clamp(7px, .65vw, 9px);

    font-weight:
        600;

    letter-spacing:
        clamp(.10em, .25vw, .17em);

}


/* =========================================================
   07. SYSTEM STATUS
========================================================= */

.system-status {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(160,180,205,.40);

    font-size:
        clamp(7px, .7vw, 9px);

    font-weight:
        650;

    letter-spacing:
        clamp(.10em, .25vw, .18em);

}


.status-dot {

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        #65dcff;

    box-shadow:

        0 0 8px
        rgba(85,220,255,.75),

        0 0 16px
        rgba(85,220,255,.25);

}


/* =========================================================
   08. MAIN CONTENT
========================================================= */

.library-main {

    position:
        relative;

    z-index:
        5;

    width:
        min(
            var(--content-max),
            calc(100% - (var(--page-gutter) * 2))
        );

    margin:
        0 auto;

    padding:
        clamp(46px, 7vw, 82px)
        0
        clamp(48px, 7vw, 80px);

}


/* =========================================================
   09. HEADING
========================================================= */

.library-heading {

    width:
        min(100%, 900px);

    text-align:
        center;

    margin:
        0 auto clamp(32px, 4vw, 48px);

}


.eyebrow {

    margin-bottom:
        clamp(11px, 1.5vw, 16px);

    color:
        rgba(93,190,255,.60);

    font-size:
        clamp(8px, .8vw, 10px);

    font-weight:
        700;

    letter-spacing:
        clamp(.16em, .4vw, .27em);

}


.library-heading h1 {

    margin:
        0;

    font-size:
        clamp(
            36px,
            5vw,
            68px
        );

    line-height:
        .98;

    font-weight:
        650;

    letter-spacing:
        clamp(
            -.045em,
            -.12vw,
            -.055em
        );

    background:

        linear-gradient(
            180deg,
            #f7faff 0%,
            #c8d8f5 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.library-heading p {

    width:
        min(100%, 650px);

    margin:
        clamp(14px, 2vw, 20px)
        auto
        0;

    color:
        rgba(180,190,210,.52);

    font-size:
        clamp(12px, 1.2vw, 15px);

    line-height:
        1.6;

}


/* =========================================================
   10. SELECTOR SECTION
========================================================= */

.component-selector-section {

    position:
        relative;

    z-index:
        100;

    width:
        min(
            var(--selector-max),
            100%
        );

    margin:
        0 auto
        clamp(32px, 4vw, 46px);

}


.selector-label {

    display:
        block;

    margin:
        0 0 clamp(9px, 1vw, 13px);

    text-align:
        center;

    color:
        rgba(155,175,205,.38);

    font-size:
        clamp(8px, .7vw, 9px);

    font-weight:
        700;

    letter-spacing:
        clamp(.14em, .35vw, .22em);

}


.selector-wrapper {

    position:
        relative;

    width:
        100%;

}


/* =========================================================
   11. PREMIUM SELECTOR
========================================================= */

.premium-selector {

    position:
        relative;

    width:
        100%;

    height:
        clamp(56px, 5vw, 64px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        0 clamp(14px, 1.6vw, 22px);

    border:
        1px solid
        rgba(125,160,220,.20);

    border-radius:
        clamp(14px, 1.5vw, 18px);

    background:

        linear-gradient(
            135deg,
            rgba(17,25,42,.94),
            rgba(7,12,23,.98)
        );

    color:
        #eef5ff;

    cursor:
        pointer;

    appearance:
        none;

    -webkit-appearance:
        none;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.055),

        inset 0 -1px 0
        rgba(0,0,0,.45),

        0 12px 35px
        rgba(0,0,0,.25);

    transition:

        border-color .3s ease,

        box-shadow .3s ease,

        transform .25s ease;

}


.premium-selector:hover {

    border-color:
        rgba(82,202,255,.38);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 0 0 1px
        rgba(60,190,255,.05),

        0 12px 38px
        rgba(0,0,0,.35),

        0 0 28px
        rgba(45,180,255,.07);

}


.premium-selector:active {

    transform:
        scale(.99);

}


/* =========================================================
   12. SELECTED COMPONENT
========================================================= */

.premium-selector-current {

    min-width:
        0;

    flex:
        1 1 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(8px, 1vw, 12px);

    overflow:
        hidden;

}


.current-number {

    flex:
        0 0 auto;

    color:
        #66d8ff;

    font-size:
        clamp(8px, .8vw, 10px);

    font-weight:
        750;

    letter-spacing:
        .14em;

}


.current-divider {

    width:
        1px;

    height:
        19px;

    flex:
        0 0 1px;

    background:
        rgba(255,255,255,.12);

}


.current-name {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgba(240,246,255,.94);

    font-size:
        clamp(12px, 1.2vw, 15px);

    font-weight:
        600;

    letter-spacing:
        -.01em;

}


/* =========================================================
   13. SELECTOR ARROW
========================================================= */

.premium-selector-arrow {

    width:
        clamp(30px, 3vw, 34px);

    height:
        clamp(30px, 3vw, 34px);

    flex:
        0 0 clamp(30px, 3vw, 34px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:
        clamp(8px, 1vw, 10px);

    background:
        rgba(255,255,255,.035);

    transition:

        transform .35s
        cubic-bezier(.22,.61,.36,1),

        background .3s ease;

}


.premium-selector-arrow span {

    width:
        7px;

    height:
        7px;

    border-right:
        1.5px solid
        rgba(220,235,255,.75);

    border-bottom:
        1.5px solid
        rgba(220,235,255,.75);

    transform:
        rotate(45deg)
        translateY(-2px);

    transition:
        transform .35s ease;

}


/* =========================================================
   14. OPEN SELECTOR
========================================================= */

.selector-wrapper.is-open
.premium-selector {

    border-color:
        rgba(70,205,255,.42);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 0 0 1px
        rgba(60,190,255,.07),

        0 15px 45px
        rgba(0,0,0,.42),

        0 0 35px
        rgba(45,190,255,.10);

}


.selector-wrapper.is-open
.premium-selector-arrow {

    background:
        rgba(55,190,255,.08);

    transform:
        rotate(180deg);

}


/* =========================================================
   15. PREMIUM DROPDOWN
========================================================= */

.premium-dropdown {

    position:
        absolute;

    top:
        calc(100% + 10px);

    left:
        0;

    right:
        0;

    z-index:
        500;

    width:
        100%;

    padding:
        8px;

    max-height:
        min(
            390px,
            55vh
        );

    overflow-x:
        hidden;

    overflow-y:
        auto;

    border:
        1px solid
        rgba(110,155,220,.18);

    border-radius:
        clamp(14px, 1.5vw, 18px);

    background:

        linear-gradient(
            145deg,
            rgba(15,23,39,.985),
            rgba(5,10,20,.995)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.045),

        0 25px 60px
        rgba(0,0,0,.60),

        0 0 40px
        rgba(45,180,255,.07);

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-9px)
        scale(.985);

    transform-origin:
        top center;

    transition:

        opacity .25s ease,

        visibility .25s ease,

        transform .30s
        cubic-bezier(.22,.61,.36,1);

}


.selector-wrapper.is-open
.premium-dropdown {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   16. DROPDOWN OPTIONS
========================================================= */

.premium-option {

    position:
        relative;

    width:
        100%;

    min-height:
        clamp(46px, 4vw, 52px);

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(10px, 1.2vw, 14px);

    padding:
        0 clamp(11px, 1.4vw, 15px);

    border:
        0;

    border-radius:
        12px;

    background:
        transparent;

    color:
        rgba(220,230,245,.68);

    text-align:
        left;

    cursor:
        pointer;

    appearance:
        none;

    -webkit-appearance:
        none;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease;

}


.premium-option:hover {

    background:

        linear-gradient(
            90deg,
            rgba(52,190,255,.10),
            rgba(52,190,255,.025)
        );

    color:
        #f2f8ff;

    transform:
        translateX(3px);

}


.premium-option:active {

    transform:
        translateX(2px)
        scale(.99);

}


.option-number {

    width:
        28px;

    flex:
        0 0 28px;

    color:
        rgba(120,210,255,.52);

    font-size:
        clamp(8px, .8vw, 10px);

    font-weight:
        750;

    letter-spacing:
        .12em;

}


.premium-option:hover
.option-number {

    color:
        #69dcff;

}


.option-name {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        clamp(12px, 1.1vw, 14px);

    font-weight:
        550;

    letter-spacing:
        -.005em;

}


/* =========================================================
   17. ACTIVE OPTION
========================================================= */

.premium-option.active {

    background:

        linear-gradient(
            90deg,
            rgba(48,185,255,.12),
            rgba(70,100,255,.045)
        );

    color:
        #f3f8ff;

    box-shadow:

        inset 0 0 0 1px
        rgba(70,200,255,.08);

}


.premium-option.active::before {

    content:
        "";

    position:
        absolute;

    left:
        4px;

    top:
        50%;

    width:
        3px;

    height:
        22px;

    border-radius:
        99px;

    background:
        #5ddaff;

    box-shadow:
        0 0 10px
        rgba(80,215,255,.70);

    transform:
        translateY(-50%);

}


.premium-option.active
.option-number {

    color:
        #62d9ff;

}


/* =========================================================
   18. DROPDOWN SCROLLBAR
========================================================= */

.premium-dropdown {

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(80,190,255,.30)
        transparent;

}


.premium-dropdown::-webkit-scrollbar {

    width:
        5px;

}


.premium-dropdown::-webkit-scrollbar-track {

    background:
        transparent;

}


.premium-dropdown::-webkit-scrollbar-thumb {

    background:
        rgba(80,190,255,.28);

    border-radius:
        99px;

}


/* =========================================================
   19. PREVIEW SECTION
========================================================= */

.preview-section {

    position:
        relative;

    z-index:
        10;

    width:
        100%;

    min-height:
        clamp(360px, 42vw, 440px);

    overflow:
        hidden;

    border:
        1px solid
        rgba(115,145,195,.12);

    border-radius:
        var(--preview-radius);

    background:

        radial-gradient(
            circle at 50% 52%,
            rgba(50,120,255,.075),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            rgba(12,18,30,.82),
            rgba(6,10,18,.88)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.025),

        0 25px 70px
        rgba(0,0,0,.20);

}


/* =========================================================
   20. PREVIEW GRID
========================================================= */

.preview-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .55;

    background-image:

        linear-gradient(
            rgba(110,145,195,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(110,145,195,.045) 1px,
            transparent 1px
        );

    background-size:
        clamp(28px, 3vw, 40px)
        clamp(28px, 3vw, 40px);

}


/* =========================================================
   21. PREVIEW HEADER
========================================================= */

.preview-header {

    position:
        relative;

    z-index:
        5;

    min-height:
        clamp(52px, 5vw, 60px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        0 clamp(14px, 2vw, 24px);

    border-bottom:
        1px solid
        rgba(120,150,190,.07);

}


.preview-heading-left {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(7px, 1vw, 12px);

    overflow:
        hidden;

}


.preview-number {

    flex:
        0 0 auto;

    color:
        rgba(92,190,255,.60);

    font-size:
        clamp(7px, .75vw, 9px);

    font-weight:
        700;

    letter-spacing:
        .18em;

}


.preview-separator {

    flex:
        0 0 auto;

    color:
        rgba(255,255,255,.14);

}


.preview-type {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgba(170,185,210,.42);

    font-size:
        clamp(7px, .75vw, 9px);

    font-weight:
        700;

    letter-spacing:
        .18em;

}


.preview-live {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(170,185,210,.42);

    font-size:
        clamp(7px, .75vw, 9px);

    font-weight:
        700;

    letter-spacing:
        .16em;

}


/* =========================================================
   22. COMPONENT MOUNT
========================================================= */

.component-preview {

    position:
        relative;

    z-index:
        4;

    width:
        100%;

    min-height:
        clamp(270px, 31vw, 330px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        clamp(35px, 5vw, 60px)
        clamp(15px, 3vw, 30px);

    overflow:
        visible;

}


/*
   Important:
   Don't force the production buttons to shrink.
   The preview area itself adapts instead.
*/

.component-preview > * {

    max-width:
        100%;

}


/* =========================================================
   23. PREVIEW LOADER
========================================================= */

.preview-loading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        rgba(180,195,215,.35);

    font-size:
        clamp(8px, .75vw, 9px);

    font-weight:
        650;

    letter-spacing:
        .18em;

}


.preview-loading span {

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        #72d9ff;

    box-shadow:
        0 0 10px
        rgba(114,217,255,.8);

    animation:
        devlixLoaderPulse
        1s
        ease-in-out
        infinite;

}


@keyframes devlixLoaderPulse {

    0%,
    100% {

        opacity:
            .35;

        transform:
            scale(.8);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.2);

    }

}


/* =========================================================
   24. INTERACTION HINT
========================================================= */

.interaction-hint {

    position:
        absolute;

    left:
        50%;

    bottom:
        clamp(15px, 2vw, 24px);

    z-index:
        6;

    max-width:
        calc(100% - 30px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    transform:
        translateX(-50%);

    white-space:
        nowrap;

    color:
        rgba(150,170,195,.28);

    font-size:
        clamp(6px, .7vw, 9px);

    font-weight:
        650;

    letter-spacing:
        clamp(.08em, .25vw, .16em);

}


.hint-dot {

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        rgba(83,205,255,.65);

    box-shadow:
        0 0 8px
        rgba(83,205,255,.45);

}


/* =========================================================
   25. COMPONENT INFORMATION
========================================================= */

.component-information {

    position:
        relative;

    z-index:
        5;

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        1.3fr
        .9fr
        .9fr
        1fr
        .8fr;

    margin-top:
        14px;

    border:
        1px solid
        rgba(115,145,195,.10);

    border-radius:
        clamp(14px, 1.5vw, 18px);

    overflow:
        hidden;

    background:
        rgba(8,13,22,.66);

}


/* =========================================================
   26. INFORMATION ITEMS
========================================================= */

.info-item {

    min-width:
        0;

    min-height:
        clamp(72px, 7vw, 84px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        8px;

    padding:
        clamp(12px, 1.5vw, 16px)
        clamp(12px, 1.8vw, 22px);

    border-right:
        1px solid
        rgba(115,145,195,.07);

}


.info-item:last-child {

    border-right:
        0;

}


.info-label {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgba(150,170,195,.28);

    font-size:
        clamp(7px, .7vw, 8px);

    font-weight:
        700;

    letter-spacing:
        .18em;

}


.info-value {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgba(225,235,250,.63);

    font-size:
        clamp(10px, .9vw, 12px);

    font-weight:
        600;

}


.info-value.accent {

    color:
        #65cfff;

}


.info-value.ready {

    color:
        #68dca9;

}


.info-value.is-loading {

    color:
        #69d9ff;

}


.info-value.is-error {

    color:
        #ff7697;

}


/* =========================================================
   27. FOOTER
========================================================= */

.library-footer {

    position:
        relative;

    z-index:
        5;

    width:
        100%;

    min-height:
        clamp(64px, 6vw, 74px);

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        20px;

    padding:
        0 var(--page-gutter);

    border-top:
        1px solid
        rgba(120,150,190,.07);

    color:
        rgba(150,170,195,.28);

    font-size:
        clamp(7px, .7vw, 8px);

    font-weight:
        700;

    letter-spacing:
        .17em;

}


.footer-status {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.footer-center {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    white-space:
        nowrap;

}


.footer-right {

    text-align:
        right;

}


/* =========================================================
   28. LARGE DESKTOP
========================================================= */

@media (min-width: 1440px) {

    .library-main {

        padding-top:
            88px;

    }


    .preview-section {

        min-height:
            460px;

    }


    .component-preview {

        min-height:
            350px;

    }

}


/* =========================================================
   29. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .library-main {

        width:
            calc(100% - 36px);

    }


    .component-information {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .info-item {

        border-bottom:
            1px solid
            rgba(115,145,195,.07);

    }


    .info-item:nth-child(3n) {

        border-right:
            0;

    }


    .info-item:last-child {

        border-bottom:
            0;

    }


    .library-footer {

        padding-left:
            24px;

        padding-right:
            24px;

    }

}


/* =========================================================
   30. TABLET
========================================================= */

@media (max-width: 800px) {

    .library-header {

        min-height:
            76px;

        padding:
            0 20px;

    }


    .system-status {

        display:
            none;

    }


    .library-main {

        width:
            calc(100% - 28px);

        padding:
            56px 0 58px;

    }


    .library-heading {

        margin-bottom:
            36px;

    }


    .library-heading h1 {

        font-size:
            clamp(
                36px,
                9vw,
                58px
            );

    }


    .component-selector-section {

        margin-bottom:
            36px;

    }


    .preview-section {

        min-height:
            390px;

    }


    .preview-header {

        min-height:
            56px;

    }


    .component-preview {

        min-height:
            300px;

    }


    .component-information {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .info-item:nth-child(3n) {

        border-right:
            1px solid
            rgba(115,145,195,.07);

    }


    .info-item:nth-child(2n) {

        border-right:
            0;

    }


    .info-item:last-child {

        grid-column:
            1 / -1;

        border-right:
            0;

        border-bottom:
            0;

    }


    .library-footer {

        grid-template-columns:
            1fr;

        justify-items:
            center;

        gap:
            10px;

        padding:
            22px 20px;

    }


    .footer-status,
    .footer-center,
    .footer-right {

        justify-content:
            center;

        text-align:
            center;

    }

}


/* =========================================================
   31. MOBILE
========================================================= */

@media (max-width: 600px) {

    .library-header {

        min-height:
            70px;

        padding:
            0 15px;

    }


    .brand {

        gap:
            10px;

    }


    .brand-mark {

        width:
            38px;

        height:
            38px;

        border-radius:
            10px;

    }


    .brand-name {

        font-size:
            14px;

        letter-spacing:
            .18em;

    }


    .brand-subtitle {

        font-size:
            7px;

        letter-spacing:
            .11em;

    }


    .library-main {

        width:
            calc(100% - 20px);

        padding:
            46px 0 50px;

    }


    .library-heading {

        margin-bottom:
            32px;

    }


    .eyebrow {

        margin-bottom:
            12px;

    }


    .library-heading h1 {

        font-size:
            clamp(
                34px,
                10vw,
                48px
            );

    }


    .library-heading p {

        margin-top:
            15px;

        font-size:
            12px;

    }


    .component-selector-section {

        width:
            100%;

        margin-bottom:
            30px;

    }


    .premium-selector {

        height:
            58px;

        padding:
            0 14px 0 17px;

        border-radius:
            15px;

    }


    .current-name {

        font-size:
            13px;

    }


    .premium-dropdown {

        top:
            calc(100% + 8px);

        padding:
            7px;

        max-height:
            52vh;

        border-radius:
            15px;

    }


    .premium-option {

        min-height:
            48px;

        border-radius:
            10px;

    }


    .preview-section {

        min-height:
            350px;

        border-radius:
            18px;

    }


    .preview-header {

        padding:
            0 13px;

    }


    .preview-heading-left {

        gap:
            7px;

    }


    .preview-type {

        max-width:
            130px;

    }


    .preview-live {

        font-size:
            6px;

        letter-spacing:
            .10em;

    }


    .preview-live .status-dot {

        width:
            5px;

        height:
            5px;

        flex-basis:
            5px;

    }


    .component-preview {

        min-height:
            270px;

        padding:
            40px 12px;

    }


    .interaction-hint {

        bottom:
            16px;

        max-width:
            calc(100% - 24px);

        font-size:
            6px;

        letter-spacing:
            .08em;

    }


    .component-information {

        margin-top:
            10px;

        border-radius:
            14px;

    }


    .info-item {

        min-height:
            72px;

        gap:
            6px;

        padding:
            13px 13px;

    }


    .info-value {

        font-size:
            10px;

    }


    .library-footer {

        min-height:
            auto;

        padding:
            20px 15px;

    }


    .footer-center {

        flex-wrap:
            wrap;

        white-space:
            normal;

    }

}


/* =========================================================
   32. VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .library-main {

        width:
            calc(100% - 16px);

        padding-top:
            38px;

    }


    .brand-subtitle {

        display:
            none;

    }


    .brand-name {

        font-size:
            13px;

    }


    .premium-selector {

        height:
            56px;

        padding:
            0 12px 0 14px;

    }


    .current-name {

        font-size:
            12px;

    }


    .premium-selector-arrow {

        width:
            30px;

        height:
            30px;

        flex-basis:
            30px;

    }


    .preview-section {

        min-height:
            325px;

    }


    .preview-header {

        min-height:
            52px;

    }


    .preview-number,
    .preview-type {

        font-size:
            6px;

        letter-spacing:
            .12em;

    }


    .preview-type {

        max-width:
            105px;

    }


    .component-preview {

        min-height:
            250px;

        padding:
            35px 8px;

    }


    .interaction-hint {

        font-size:
            5.5px;

    }


    .component-information {

        grid-template-columns:
            1fr 1fr;

    }


    .info-item {

        min-height:
            68px;

        padding:
            11px 10px;

    }


    .info-label {

        font-size:
            6px;

    }


    .info-value {

        font-size:
            9px;

    }

}


/* =========================================================
   33. LANDSCAPE MOBILE
========================================================= */

@media (max-height: 520px) and (orientation: landscape) {

    .library-header {

        min-height:
            62px;

    }


    .library-main {

        padding-top:
            30px;

        padding-bottom:
            35px;

    }


    .library-heading {

        margin-bottom:
            24px;

    }


    .library-heading h1 {

        font-size:
            clamp(
                30px,
                6vw,
                46px
            );

    }


    .library-heading p {

        margin-top:
            10px;

    }


    .component-selector-section {

        margin-bottom:
            24px;

    }


    .premium-dropdown {

        max-height:
            65vh;

    }


    .preview-section {

        min-height:
            300px;

    }


    .component-preview {

        min-height:
            230px;

    }


    .interaction-hint {

        bottom:
            12px;

    }

}


/* =========================================================
   34. TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .premium-option:hover {

        transform:
            none;

    }


    .premium-selector:hover {

        border-color:
            rgba(125,160,220,.20);

        box-shadow:

            inset 0 1px 0
            rgba(255,255,255,.055),

            inset 0 -1px 0
            rgba(0,0,0,.45),

            0 12px 35px
            rgba(0,0,0,.25);

    }


    .premium-option {

        min-height:
            50px;

    }

}


/* =========================================================
   35. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}