/* =========================================================
   PASSWORD MANAGER PAGE
========================================================= */


/* =========================================================
   PAGE SAFETY
========================================================= */

body {
    overflow-x: hidden;
}


.pm-hero,
.pm-problem-section,
.pm-features,
.pm-security,
.pm-use-cases,
.pm-cta {
    width: 100%;
}


/* =========================================================
   HERO
========================================================= */

.pm-hero {

    position: relative;

    overflow: hidden;

    padding: 160px 0 110px;

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(16, 185, 129, .16),
            transparent 28%
        ),

        radial-gradient(
            circle at 15% 80%,
            rgba(37, 99, 235, .18),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #edf6ff,
            #eafaf5
        );
}


/* GRID */

.pm-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(37, 99, 235, .05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(37, 99, 235, .05) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:

        linear-gradient(
            to bottom,
            black,
            transparent
        );

    pointer-events: none;
}


/* ORBS */

.pm-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(20px);

    pointer-events: none;
}


.pm-orb-one {

    width: 420px;
    height: 420px;

    top: -160px;
    right: -120px;

    background:
        rgba(37, 99, 235, .14);
}


.pm-orb-two {

    width: 320px;
    height: 320px;

    bottom: -150px;
    left: 4%;

    background:
        rgba(16, 185, 129, .14);
}


/* CONTENT */

.pm-hero-content {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 70px;
}


/* =========================================================
   PRODUCT LABEL
========================================================= */

.product-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        8px 16px;

    border:
        1px solid
        rgba(37, 99, 235, .15);

    border-radius: 100px;

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

    color:
        #2563eb;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 10px 30px
        rgba(37, 99, 235, .08);
}


.label-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 9px;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #10b981
        );

}


/* =========================================================
   HERO TEXT
========================================================= */

.pm-hero h1 {

    margin:
        25px 0 20px;

    max-width: 700px;

    color:
        #092c55;

    font-size:

        clamp(
            38px,
            5vw,
            64px
        );

    line-height: 1.3;
}


.pm-hero h1 span {

    display: block;

    background:

        linear-gradient(
            90deg,
            #2563eb,
            #10b981
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.pm-description {

    max-width: 630px;

    margin: 0;

    color:
        #59748f;

    font-size: 17px;

    line-height: 2.1;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.pm-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 35px;
}


.pm-primary-button,
.pm-secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 54px;

    padding:
        0 26px;

    border-radius: 15px;

    font-weight: 800;

    text-decoration: none;

    transition:
        .3s ease;
}


.pm-primary-button {

    color:
        white;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #089d91
        );

    box-shadow:
        0 16px 40px
        rgba(37, 99, 235, .25);
}


.pm-primary-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 22px 50px
        rgba(37, 99, 235, .35);
}


.pm-secondary-button {

    color:
        #174a7d;

    border:
        1px solid
        rgba(37, 99, 235, .15);

    background:
        rgba(255, 255, 255, .7);
}


.pm-secondary-button:hover {

    transform:
        translateY(-4px);

    background:
        white;
}


/* MINI FEATURES */

.pm-mini-features {

    display: flex;

    flex-wrap: wrap;

    gap:
        12px 20px;

    margin-top: 30px;

    color:
        #52718d;

    font-size: 13px;
}


.pm-mini-features div {

    display: flex;

    align-items: center;

    gap: 7px;
}


.pm-mini-features span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    color:
        #059669;

    background:
        rgba(16, 185, 129, .13);

    font-weight: 900;
}


/* =========================================================
   VAULT DASHBOARD
========================================================= */

.pm-hero-visual {

    position: relative;
}


.vault-window {

    position: relative;

    overflow: hidden;

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

    border-radius: 26px;

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

    box-shadow:
        0 35px 85px
        rgba(20, 70, 130, .18);

    backdrop-filter:
        blur(20px);
}


/* TOP */

.vault-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        18px 22px;

    border-bottom:
        1px solid
        #e8eef5;
}


.vault-brand {

    display: flex;

    align-items: center;

    gap: 12px;
}


.vault-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #10b981
        );
}


.vault-brand strong {

    display: block;

    color:
        #193d65;

    font-size: 14px;
}


.vault-brand span {

    display: block;

    margin-top: 4px;

    color:
        #91a4b7;

    font-size: 10px;
}


.vault-status {

    padding:
        7px 12px;

    border-radius: 100px;

    color:
        #059669;

    background:
        rgba(16, 185, 129, .12);

    font-size: 10px;

    font-weight: 800;
}


/* BODY */

.vault-body {

    display: grid;

    grid-template-columns:
        120px 1fr;

    min-height: 410px;
}


/* SIDEBAR */

.vault-sidebar {

    padding:
        20px 10px;

    border-left:
        1px solid
        #e9eff5;

    background:
        #f5f9fd;
}


.vault-nav {

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        11px 10px;

    margin-bottom: 8px;

    border-radius: 9px;

    color:
        #8da0b3;

    font-size: 10px;
}


.vault-nav.active {

    color:
        #2563eb;

    background:
        white;

    box-shadow:
        0 8px 20px
        rgba(30, 70, 110, .08);
}


/* CONTENT */

.vault-content {

    padding: 25px;
}


.vault-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.vault-heading small {

    color:
        #9aacbd;

    font-size: 9px;
}


.vault-heading h3 {

    margin:
        6px 0 0;

    color:
        #173d65;

    font-size: 18px;
}


.vault-heading button {

    border: none;

    padding:
        10px 14px;

    border-radius: 10px;

    color:
        white;

    background:
        #2563eb;

    font-size: 10px;

    cursor: pointer;
}


/* SEARCH */

.vault-search {

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        12px 14px;

    margin:
        22px 0;

    border:
        1px solid
        #e9eff5;

    border-radius: 11px;

    color:
        #a1b1c0;

    font-size: 10px;

    background:
        #fafcff;
}


/* PASSWORD LIST */

.password-list {

    display: grid;

    gap: 10px;
}


.password-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        11px;

    border:
        1px solid
        #edf1f6;

    border-radius: 13px;

    transition:
        .25s ease;
}


.password-row:hover {

    transform:
        translateX(-3px);

    border-color:
        rgba(37, 99, 235, .25);

    background:
        #fbfdff;
}


.password-service {

    display: flex;

    align-items: center;

    gap: 10px;
}


.service-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 10px;

    background:
        #dcfce7;
}


.service-icon.blue {

    background:
        #dbeafe;
}


.service-icon.purple {

    background:
        #ede9fe;
}


.password-service strong {

    display: block;

    color:
        #355574;

    font-size: 10px;
}


.password-service small {

    display: block;

    margin-top: 4px;

    color:
        #9aabba;

    font-size: 8px;
}


/* ACCESS TAG */

.access-tag {

    padding:
        5px 9px;

    border-radius: 100px;

    font-size: 8px;

    font-weight: 800;
}


.access-tag.green {

    color:
        #059669;

    background:
        #d1fae5;
}


.access-tag.blue {

    color:
        #2563eb;

    background:
        #dbeafe;
}


.access-tag.purple {

    color:
        #7c3aed;

    background:
        #ede9fe;
}


/* SECURITY BAR */

.security-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 22px;

    padding:
        12px;

    border-radius: 12px;

    color:
        #496b87;

    background:
        #f4fbf8;

    font-size: 10px;
}


.security-bar div {

    display: flex;

    align-items: center;

    gap: 7px;
}


.security-bar strong {

    color:
        #059669;

    font-size: 10px;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.pm-floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        12px 16px;

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

    border-radius: 14px;

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

    box-shadow:
        0 20px 45px
        rgba(30, 70, 110, .15);

    color:
        #365675;

    font-size: 11px;

    font-weight: 700;

    backdrop-filter:
        blur(12px);
}


.pm-floating-card span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 8px;

    background:
        #d1fae5;
}


.pm-card-one {

    bottom: -22px;

    right: 35px;
}


.pm-card-two {

    top: 90px;

    left: -45px;
}


.pm-card-two span {

    color:
        white;

    background:
        #2563eb;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.pm-problem-section,
.pm-features,
.pm-security,
.pm-use-cases,
.pm-cta {

    padding:
        110px 0;
}


/* SECTION HEADING */

.section-heading {

    margin-bottom: 55px;
}


.center-heading {

    max-width: 720px;

    margin:
        0 auto 55px;

    text-align: center;
}


.section-tag {

    display: inline-block;

    margin-bottom: 16px;

    color:
        #2563eb;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.section-heading h2 {

    margin:
        0 0 18px;

    color:
        #10365e;

    font-size:

        clamp(
            30px,
            4vw,
            48px
        );

    line-height: 1.5;
}


.section-heading p {

    margin: 0;

    color:
        #67819a;

    line-height: 2;
}


/* =========================================================
   PROBLEM SECTION
========================================================= */

.pm-problem-section {

    background:
        #f7fbff;
}


.pm-problem-grid {

    display: grid;

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

    gap: 25px;

    max-width: 1050px;

    margin: auto;
}


.pm-problem-card,
.pm-solution-card {

    padding: 42px;

    border-radius: 26px;

    transition:
        .35s ease;
}


.pm-problem-card {

    border:
        1px solid
        #e9eff5;

    background:
        white;
}


.pm-solution-card {

    color:
        white;

    background:

        linear-gradient(
            135deg,
            #1558c5,
            #0b9c89
        );

    box-shadow:
        0 25px 65px
        rgba(20, 100, 150, .22);
}


.pm-problem-card:hover,
.pm-solution-card:hover {

    transform:
        translateY(-8px);
}


/* CARD TOP */

.problem-top,
.solution-top {

    display: flex;

    align-items: center;

    gap: 15px;
}


.problem-icon,
.solution-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;
    height: 55px;

    border-radius: 17px;

    font-size: 25px;
}


.problem-icon {

    background:
        #fff1f2;
}


.solution-icon {

    background:
        rgba(255, 255, 255, .15);
}


.problem-top span {

    color:
        #e11d48;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


.solution-top span {

    color:
        #c6fff1;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* TITLES */

.pm-problem-card h3,
.pm-solution-card h3 {

    margin:
        25px 0;

    font-size: 26px;
}


.pm-problem-card h3 {

    color:
        #183e66;
}


/* LIST */

.pm-problem-card ul,
.pm-solution-card ul {

    padding: 0;

    margin: 0;

    list-style: none;
}


.pm-problem-card li,
.pm-solution-card li {

    position: relative;

    padding:
        12px 30px 12px 0;

    line-height: 1.8;
}


.pm-problem-card li {

    color:
        #6e879f;

    border-bottom:
        1px solid
        #eff3f7;
}


.pm-problem-card li::before {

    content:
        "×";

    position: absolute;

    right: 0;

    color:
        #ef4444;

    font-weight: 900;
}


.pm-solution-card li {

    border-bottom:
        1px solid
        rgba(255, 255, 255, .13);
}


.pm-solution-card li::before {

    content:
        "✓";

    position: absolute;

    right: 0;

    color:
        #8fffe0;

    font-weight: 900;
}


/* =========================================================
   FEATURES
========================================================= */

.pm-features {

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #eef8ff
        );
}


.pm-features-layout {

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 65px;

    align-items: start;
}


.pm-features-text {

    position: sticky;

    top: 120px;
}


.pm-features-text h2 {

    margin:
        0 0 20px;

    color:
        #10365e;

    font-size:

        clamp(
            30px,
            4vw,
            46px
        );

    line-height: 1.5;
}


.pm-features-text h2 span {

    color:
        #0b9d8a;
}


.pm-features-text p {

    margin: 0;

    color:
        #66819b;

    line-height: 2;
}


.pm-text-link {

    display: inline-flex;

    gap: 10px;

    margin-top: 28px;

    color:
        #0b9d8a;

    font-weight: 800;

    text-decoration: none;
}


/* FEATURE GRID */

.pm-features-grid {

    display: grid;

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

    gap: 20px;
}


.pm-feature-card {

    padding: 30px;

    border:
        1px solid
        rgba(37, 99, 235, .08);

    border-radius: 23px;

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

    transition:
        .35s ease;
}


.pm-feature-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(37, 99, 235, .22);

    box-shadow:
        0 20px 45px
        rgba(20, 70, 120, .09);
}


.feature-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 22px;

    border-radius: 17px;

    background:

        linear-gradient(
            135deg,
            #e5efff,
            #dff8ef
        );

    font-size: 24px;
}


.pm-feature-card h3 {

    margin:
        0 0 12px;

    color:
        #183e66;

    font-size: 19px;
}


.pm-feature-card p {

    margin: 0;

    color:
        #7289a0;

    line-height: 1.9;

    font-size: 14px;
}


/* =========================================================
   SECURITY SECTION
========================================================= */

.pm-security {

    background:
        #f5faff;
}


.security-panel {

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    overflow: hidden;

    border-radius: 32px;

    background:
        white;

    box-shadow:
        0 25px 75px
        rgba(20, 70, 120, .1);
}


.security-content {

    padding: 65px;
}


.security-content h2 {

    margin:
        0 0 20px;

    color:
        #10365e;

    font-size:

        clamp(
            30px,
            4vw,
            45px
        );

    line-height: 1.55;
}


.security-content > p {

    color:
        #6b849d;

    line-height: 2;
}


/* SECURITY LIST */

.security-list {

    display: grid;

    gap: 15px;

    margin-top: 32px;
}


.security-list div {

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        #385c7c;
}


.security-list span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 9px;

    color:
        #059669;

    background:
        #d1fae5;

    font-weight: 900;
}


/* SECURITY VISUAL */

.security-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 500px;

    overflow: hidden;

    background:

        linear-gradient(
            135deg,
            #1558c5,
            #0b9c89
        );
}


.security-circle {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 210px;
    height: 210px;

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

    border-radius: 50%;

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

    backdrop-filter:
        blur(15px);

    color:
        white;

    text-align: center;
}


.security-lock {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 15px;

    border-radius: 22px;

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

    font-size: 30px;
}


.security-circle strong {

    font-size: 20px;

    letter-spacing: 2px;
}


.security-circle span {

    margin-top: 8px;

    color:
        #c9fff1;

    font-size: 9px;

    letter-spacing: 2px;
}


/* RINGS */

.security-ring {

    position: absolute;

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

    border-radius: 50%;
}


.ring-one {

    width: 330px;
    height: 330px;
}


.ring-two {

    width: 470px;
    height: 470px;
}


/* MINI CARD */

.security-mini-card {

    position: absolute;

    bottom: 5%;

    padding:
        13px 20px;

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

    border-radius: 13px;

    color:
        white;

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

    backdrop-filter:
        blur(10px);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   USE CASES
========================================================= */

.pm-use-cases {

    background:
        white;
}


.pm-use-grid {

    display: grid;

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

    gap: 18px;
}


.pm-use-card {

    padding:
        32px 25px;

    border:
        1px solid
        #e9f0f6;

    border-radius: 23px;

    background:
        #f9fcff;

    transition:
        .35s ease;
}


.pm-use-card:hover {

    transform:
        translateY(-8px);

    background:
        white;

    box-shadow:
        0 20px 50px
        rgba(20, 70, 120, .1);
}


.pm-use-card > div {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;
    height: 60px;

    margin-bottom: 22px;

    border-radius: 18px;

    background:

        linear-gradient(
            135deg,
            #e3eeff,
            #dcf9ef
        );

    font-size: 27px;
}


.pm-use-card h3 {

    margin:
        0 0 10px;

    color:
        #173e65;

    font-size: 18px;
}


.pm-use-card p {

    margin: 0;

    color:
        #748aa0;

    line-height: 1.9;

    font-size: 14px;
}


/* =========================================================
   CTA
========================================================= */

.pm-cta {

    padding-top: 70px;

    background:
        #f6fbff;
}


.pm-cta-box {

    position: relative;

    overflow: hidden;

    padding:
        90px 30px;

    border-radius: 34px;

    color:
        white;

    text-align: center;

    background:

        linear-gradient(
            135deg,
            #0d428b,
            #0a9c89
        );

    box-shadow:
        0 30px 75px
        rgba(10, 90, 130, .22);
}


.cta-glow {

    position: absolute;

    width: 420px;
    height: 420px;

    top: -260px;
    left: -100px;

    border-radius: 50%;

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

    filter:
        blur(10px);
}


.pm-cta-content {

    position: relative;

    z-index: 2;
}


.pm-cta-content > span {

    color:
        #7ff5d1;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.pm-cta-content h2 {

    margin:
        22px 0 16px;

    font-size:

        clamp(
            30px,
            4vw,
            50px
        );

    line-height: 1.45;
    color:white;
}


.pm-cta-content p {

    max-width: 620px;

    margin:
        auto;

    color:
        #d2eff0;

    line-height: 2;
}


.pm-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 32px;

    min-height: 55px;

    padding:
        0 30px;

    border-radius: 15px;

    color:
        #0b6472;

    background:
        white;

    font-weight: 800;

    text-decoration: none;

    transition:
        .3s ease;
}


.pm-cta-button:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 35px
        rgba(0, 0, 0, .18);
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:

        opacity .7s ease,

        transform .7s ease;
}


.reveal.show {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {


    .pm-hero-content {

        grid-template-columns:
            1fr;

        gap: 65px;
    }


    .pm-hero-text {

        max-width: 750px;
    }


    .pm-hero-visual {

        width: 100%;

        max-width: 720px;

        margin: auto;
    }


    .pm-features-layout {

        grid-template-columns:
            1fr;
    }


    .pm-features-text {

        position: static;

        max-width: 700px;
    }


    .security-panel {

        grid-template-columns:
            1fr;
    }


    .pm-use-grid {

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


}


@media (max-width: 850px) {


    .pm-hero {

        padding:
            135px 0 90px;
    }


    .pm-problem-grid {

        grid-template-columns:
            1fr;
    }


    .security-visual {

        min-height:
            420px;
    }


}


@media (max-width: 650px) {


    .pm-hero,
    .pm-problem-section,
    .pm-features,
    .pm-security,
    .pm-use-cases,
    .pm-cta {

        padding:
            80px 0;
    }


    .pm-hero {

        padding-top:
            120px;
    }


    .pm-hero h1 {

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


    .pm-actions {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .pm-primary-button,
    .pm-secondary-button {

        width: 100%;
    }


    .pm-mini-features {

        flex-direction:
            column;
    }


    /* DASHBOARD */

    .vault-window {

        border-radius:
            20px;
    }


    .vault-sidebar {

        display: none;
    }


    .vault-body {

        grid-template-columns:
            1fr;
    }


    .vault-content {

        padding:
            18px;
    }


    .vault-heading {

        flex-wrap: wrap;

        gap: 15px;
    }


    .pm-floating-card {

        display: none;
    }


    /* PROBLEM */

    .pm-problem-card,
    .pm-solution-card {

        padding:
            30px 22px;
    }


    /* FEATURES */

    .pm-features-grid {

        grid-template-columns:
            1fr;
    }


    /* SECURITY */

    .security-content {

        padding:
            42px 25px;
    }


    .security-visual {

        min-height:
            360px;
    }


    .ring-two {

        width: 380px;
        height: 380px;
    }


    /* USE CASES */

    .pm-use-grid {

        grid-template-columns:
            1fr;
    }


    /* CTA */

    .pm-cta-box {

        padding:
            65px 22px;
    }


}


@media (max-width: 420px) {


    .vault-top {

        padding:
            15px;
    }


    .vault-status {

        display: none;
    }


    .password-row {

        align-items:
            flex-start;

        gap: 10px;
    }


    .access-tag {

        white-space:
            nowrap;
    }


    .security-circle {

        width:
            180px;

        height:
            180px;
    }


    .ring-one {

        width:
            280px;

        height:
            280px;
    }


}