@import url(
    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
);


/* ========================================
   RESET
======================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ========================================
   VARIABLES
======================================== */

:root {

    --background: #0f0f0f;

    --surface: #171717;

    --surface-hover: #1d1d1d;

    --border: #292929;

    --border-light: #343434;

    --text: #f5f5f5;

    --muted: #999999;

    --accent: #ff5a36;

    --accent-hover: #ff6b4a;

    --success: #4ade80;

    --danger: #ef4444;
}


/* ========================================
   GLOBAL
======================================== */

body {

    min-height: 100vh;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    line-height: 1.5;

    background:
        var(--background);

    color:
        var(--text);
}


button,
input,
textarea {

    font-family: inherit;
}


/* ========================================
   NAVBAR
======================================== */

.navbar {

    width: 100%;

    height: 72px;

    padding:
        0
        24px;

    display: flex;

    align-items: center;

    border-bottom:
        1px solid
        var(--border);

    background:
        #0d0d0d;
}


.brand {

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--text);

    text-decoration: none;

    font-size: 22px;

    font-weight: 700;
}


.brand-logo-icon {

    width: 58px;

    height: 54px;

    object-fit: contain;

    flex-shrink: 0;
}


.brand-name {

    display: inline-flex;

    align-items: center;

    gap: 0;
}


.brand-clone {

    color:
        var(--accent);
}


.brand-cat {

    color:
        #ffffff;
}


.page-path {

    color:
        #777777;

    font-weight: 600;
}


.nav-links {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 24px;
}


.nav-links a {

    color:
        var(--muted);

    text-decoration: none;

    font-size: 16px;

    font-weight: 500;

    transition:
        color
        0.2s ease;
}


.nav-links a:hover {

    color:
        var(--accent);
}


/* ========================================
   MOBILE NAVIGATION DEFAULT
======================================== */

.menu-button,
.mobile-menu {

    display: none;
}


/* ========================================
   LANDING
======================================== */

.landing {

    min-height: 100vh;

    display: flex;

    flex-direction: column;
}


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

.hero {

    width: 100%;

    max-width: 850px;

    margin: auto;

    padding:
        70px
        25px
        50px;

    text-align: center;
}


.hero-badge {

    display: inline-block;

    margin-bottom: 25px;

    padding:
        7px
        12px;

    border:
        1px solid
        var(--border-light);

    border-radius:
        999px;

    color:
        var(--muted);

    font-size: 11px;

    letter-spacing:
        1.2px;
}


.hero h1 {

    margin-bottom: 25px;

    font-size:
        clamp(
            48px,
            7vw,
            82px
        );

    font-weight: 700;

    line-height: 1.02;

    letter-spacing:
        -4px;
}


.hero h1 span {

    color:
        var(--accent);
}


.hero-description {

    max-width: 540px;

    margin:
        0
        auto
        45px;

    color:
        var(--muted);

    font-size: 17px;

    line-height: 1.7;
}


/* ========================================
   CREATE CARD
======================================== */

.create-card {

    max-width: 680px;

    margin:
        0
        auto;

    padding: 24px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    text-align: left;
}


.create-card label {

    display: block;

    margin-bottom:
        12px;

    font-size: 13px;

    font-weight: 600;
}


.page-input-group {

    display: flex;

    align-items: center;

    background:
        #101010;

    border:
        1px solid
        var(--border-light);

    border-radius:
        9px;

    overflow: hidden;
}


.url-prefix {

    padding-left:
        16px;

    color:
        var(--muted);

    font-size: 16px;
}


.page-input-group input {

    flex: 1;

    min-width: 0;

    padding:
        15px
        10px;

    border: none;

    outline: none;

    background:
        transparent;

    color:
        var(--text);

    font-size: 15px;
}


.page-input-group input::placeholder {

    color:
        #666666;
}


.input-hint {

    margin-top:
        10px;

    color:
        #666666;

    font-size: 12px;
}


/* ========================================
   PRIMARY BUTTON
======================================== */

.primary-button {

    padding:
        12px
        18px;

    border: none;

    border-radius:
        8px;

    background:
        var(--accent);

    color:
        #ffffff;

    font-weight: 600;

    cursor: pointer;

    transition:
        background
        0.2s ease,
        transform
        0.1s ease;
}


.primary-button:hover {

    background:
        var(--accent-hover);
}


.primary-button:active {

    transform:
        translateY(1px);
}


.primary-button:disabled {

    opacity: 0.55;

    cursor:
        not-allowed;
}


.page-input-group
.primary-button {

    margin: 5px;
}


/* ========================================
   EXPIRY
======================================== */

.expiry-info {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 16px;

    padding:
        10px
        14px;

    border:
        1px solid
        rgba(
            255,
            90,
            54,
            0.3
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            90,
            54,
            0.07
        );

    color:
        #cfcfcf;

    font-size: 13px;

    letter-spacing:
        0.2px;
}


.expiry-icon {

    font-size:
        14px;
}


/* ========================================
   FOOTER
======================================== */

.landing-footer {

    padding:
        25px;

    text-align: center;

    color:
        #555555;

    font-size: 12px;
}


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

.info-page {

    width: 90%;

    max-width: 1000px;

    margin:
        0
        auto;

    padding:
        100px
        0
        80px;

    text-align:
        center;
}


.info-page h1 {

    margin-top:
        20px;

    font-size:
        52px;

    line-height:
        1.1;

    letter-spacing:
        -1px;
}


.info-page h1 span {

    color:
        var(--accent);
}


.info-description {

    max-width:
        650px;

    margin:
        25px
        auto
        50px;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.7;
}


/* ========================================
   ABOUT CARD
======================================== */

.info-card {

    max-width:
        750px;

    margin:
        0
        auto;

    padding:
        35px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    text-align:
        left;
}


.info-card h2 {

    margin-bottom:
        20px;

    color:
        var(--text);

    font-size:
        24px;
}


.info-card p {

    margin-bottom:
        18px;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.7;
}


.info-card p:last-child {

    margin-bottom:
        0;
}


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

.features-grid {

    display: grid;

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

    gap:
        18px;

    margin-top:
        55px;
}


.feature-card {

    padding:
        28px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    text-align:
        left;

    transition:
        border-color
        0.2s ease,
        transform
        0.2s ease;
}


.feature-card:hover {

    border-color:
        var(--accent);

    transform:
        translateY(-3px);
}


.feature-card > span {

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        18px;

    border-radius:
        10px;

    background:
        rgba(
            255,
            90,
            54,
            0.1
        );

    font-size:
        20px;
}


.feature-card h3 {

    margin-bottom:
        10px;

    font-size:
        18px;
}


.feature-card p {

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.6;
}


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

.page-shell,
.manage-shell {

    width:
        100%;

    min-height:
        100vh;
}


.page-navbar {

    padding-left:
        5%;

    padding-right:
        5%;
}


.page-header {

    width:
        90%;

    max-width:
        1000px;

    margin:
        55px
        auto
        25px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;
}


.page-title-row {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.page-header h1 {

    font-size:
        32px;

    letter-spacing:
        -1px;
}


.page-description,
.owner-label {

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        13px;
}


.owner-label {

    color:
        var(--accent);
}


/* ========================================
   STATUS BADGES
======================================== */

.status-badge {

    padding:
        5px
        9px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        600;
}


.status-badge.unlocked {

    background:
        rgba(
            74,
            222,
            128,
            0.08
        );

    color:
        var(--success);
}


.status-badge.locked {

    background:
        rgba(
            239,
            68,
            68,
            0.08
        );

    color:
        #f87171;
}


/* ========================================
   EDITOR
======================================== */

.editor-card {

    width:
        90%;

    max-width:
        1000px;

    margin:
        0
        auto;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    overflow:
        hidden;
}


.editor-toolbar {

    height:
        56px;

    padding:
        0
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        var(--border);
}


.editor-toolbar-right {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.editor-label h2 {

    color:
        var(--accent);

    font-size:
        14px;

    letter-spacing:
        1px;
}


.character-count {

    color:
        #666666;

    font-size:
        11px;
}


textarea {

    width:
        100%;

    min-height:
        460px;

    padding:
        24px;

    border:
        none;

    outline:
        none;

    resize:
        vertical;

    background:
        #121212;

    color:
        var(--text);

    font-size:
        15px;

    line-height:
        1.7;
}


textarea::placeholder {

    color:
        #555555;
}


textarea:focus {

    background:
        #131313;
}


textarea[readonly] {

    cursor:
        default;

    opacity:
        0.8;
}


/* ========================================
   COPY BUTTON
======================================== */

.copy-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        9px
        14px;

    border:
        1px solid
        var(--accent);

    border-radius:
        8px;

    background:
        var(--accent);

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background
        0.2s ease,
        transform
        0.15s ease;
}


.copy-button:hover {

    background:
        var(--accent-hover);

    transform:
        translateY(-1px);
}


.copy-button.copied {

    background:
        #16a34a;

    border-color:
        #16a34a;

    color:
        #ffffff;
}


.copy-button i {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        16px;

    line-height:
        1;
}


/* ========================================
   EDITOR FOOTER
======================================== */

.editor-footer {

    min-height:
        65px;

    padding:
        12px
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-top:
        1px solid
        var(--border);
}


.status-message {

    color:
        var(--muted);

    font-size:
        12px;
}


.save-button {

    min-width:
        125px;
}


.readonly-message {

    color:
        #777777;

    font-size:
        12px;
}


/* ========================================
   OWNER PANEL
======================================== */

.owner-panel {

    width:
        90%;

    max-width:
        1000px;

    margin:
        20px
        auto;

    padding:
        18px
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        #141414;

    border:
        1px solid
        rgba(
            255,
            90,
            54,
            0.55
        );

    border-radius:
        12px;
}


.owner-panel-info {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.owner-icon {

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        rgba(
            255,
            90,
            54,
            0.15
        );

    color:
        var(--accent);
}


.owner-panel h2 {

    margin-bottom:
        3px;

    font-size:
        15px;
}


.owner-panel p {

    color:
        #888888;

    font-size:
        12px;
}


/* ========================================
   SECONDARY BUTTON
======================================== */

.secondary-button {

    padding:
        10px
        15px;

    border:
        1px solid
        var(--border-light);

    border-radius:
        8px;

    background:
        var(--surface);

    color:
        var(--text);

    cursor:
        pointer;
}


/* ========================================
   OWNER LOCK BUTTONS
======================================== */

.owner-panel
.danger-button,
.owner-panel
.secondary-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        10px
        16px;

    border:
        1px solid
        var(--accent);

    border-radius:
        8px;

    font-weight:
        600;

    cursor:
        pointer;
}


.owner-panel
.danger-button {

    background:
        var(--accent);

    color:
        #ffffff;
}


.owner-panel
.danger-button:hover {

    background:
        var(--accent-hover);
}


.owner-panel
.secondary-button {

    background:
        transparent;

    color:
        var(--accent);
}


.owner-panel
.secondary-button:hover {

    background:
        rgba(
            255,
            90,
            54,
            0.1
        );
}


.owner-panel
.danger-button i,
.owner-panel
.secondary-button i {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        16px;

    line-height:
        1;
}


/* ========================================
   DANGER BUTTON
======================================== */

.danger-button {

    padding:
        10px
        15px;

    border:
        1px solid
        rgba(
            239,
            68,
            68,
            0.3
        );

    border-radius:
        8px;

    background:
        rgba(
            239,
            68,
            68,
            0.08
        );

    color:
        #f87171;

    font-weight:
        600;

    cursor:
        pointer;
}


.danger-button:disabled {

    opacity:
        0.5;

    cursor:
        not-allowed;
}


/* ========================================
   PAGE FOOTER
======================================== */

.page-footer {

    width:
        90%;

    max-width:
        1000px;

    margin:
        45px
        auto
        25px;

    padding-top:
        20px;

    display:
        flex;

    justify-content:
        space-between;

    border-top:
        1px solid
        var(--border);

    color:
        #555555;

    font-size:
        11px;
}


/* ========================================
   PAGE ERROR
======================================== */

.page-error {

    margin-top:
        10px;

    padding:
        10px
        14px;

    border:
        1px solid
        rgba(
            255,
            140,
            0,
            0.35
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            140,
            0,
            0.08
        );

    color:
        #ff9d2e;

    font-size:
        14px;

    text-align:
        left;
}


/* ========================================
   MANAGE PAGE
======================================== */

.manage-content {

    width:
        90%;

    max-width:
        850px;

    margin:
        70px
        auto;
}


.manage-heading {

    margin-bottom:
        35px;
}


.manage-eyebrow {

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.5px;
}


.manage-heading h1 {

    margin-top:
        10px;

    font-size:
        40px;

    letter-spacing:
        -1.5px;
}


.manage-heading h1 span {

    color:
        var(--muted);
}


.manage-heading p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        14px;
}


.settings-card {

    margin-bottom:
        15px;

    padding:
        24px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        13px;
}


.setting-row {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;
}


.setting-icon {

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        #202020;

    font-size:
        18px;
}


.setting-info {

    flex:
        1;
}


.setting-info h2,
.share-heading h2 {

    margin-bottom:
        4px;

    font-size:
        14px;
}


.setting-status {

    margin-bottom:
        3px;

    font-size:
        12px;

    font-weight:
        600;
}


.locked-text {

    color:
        #f87171;
}


.unlocked-text {

    color:
        var(--success);
}


.setting-description {

    color:
        #666666;

    font-size:
        12px;
}


.manage-status {

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        12px;
}


/* ========================================
   SHARE
======================================== */

.share-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        18px;
}


.share-heading p {

    color:
        #666666;

    font-size:
        12px;
}


.share-url {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        13px
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        #101010;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        13px;
}


/* ====================================================
   MOBILE
==================================================== */

@media (
    max-width:
    768px
) {


    /* =====================================
       NAVBAR
    ====================================== */

    .navbar {

        height:
            74px;

        padding:
            0
            16px;

        position:
            relative;

        z-index:
            100;
    }


    .brand {

        gap:
            6px;

        font-size:
            20px;
    }


    .brand-logo-icon {

        width:
            46px;

        height:
            46px;
    }


    .nav-links {

        display:
            none;
    }


    /* =====================================
       HAMBURGER
    ====================================== */

    .menu-button {

        width:
            42px;

        height:
            42px;

        margin-left:
            auto;

        border:
            none;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        background:
            transparent;

        cursor:
            pointer;
    }


    .menu-button span {

        width:
            23px;

        height:
            2px;

        border-radius:
            5px;

        background:
            #ffffff;

        transition:
            transform
            0.25s ease,
            opacity
            0.25s ease;
    }


    .menu-button.open
    span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);
    }


    .menu-button.open
    span:nth-child(2) {

        opacity:
            0;
    }


    .menu-button.open
    span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* =====================================
       MOBILE MENU
    ====================================== */

    .mobile-menu {

        width:
            100%;

        padding:
            8px
            18px
            18px;

        display:
            none;

        position:
            relative;

        background:
            #0d0d0d;

        border-bottom:
            1px solid
            var(--border);

        z-index:
            90;
    }


    .mobile-menu.open {

        display:
            block;
    }


    .mobile-menu a {

        padding:
            16px
            7px;

        display:
            flex;

        align-items:
            center;

        gap:
            14px;

        color:
            #d5d5d5;

        text-decoration:
            none;

        font-size:
            16px;

        font-weight:
            500;

        border-bottom:
            1px solid
            #1e1e1e;
    }


    .mobile-menu a:last-child {

        border-bottom:
            none;
    }


    .mobile-menu a span {

        width:
            25px;

        color:
            var(--accent);

        font-size:
            20px;
    }


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

    .hero {

        margin:
            0
            auto;

        padding:
            58px
            18px
            32px;
    }


    .hero-badge {

        margin-bottom:
            24px;
    }


    .hero h1 {

        margin-bottom:
            24px;

        font-size:
            clamp(
                44px,
                13vw,
                57px
            );

        line-height:
            1.06;

        letter-spacing:
            -2.5px;
    }


    .hero-description {

        margin-bottom:
            34px;

        padding:
            0
            4px;

        font-size:
            15px;

        line-height:
            1.65;
    }


    /* =====================================
       CREATE CARD
    ====================================== */

    .create-card {

        width:
            100%;

        padding:
            19px;

        border-radius:
            14px;
    }


    .create-card label {

        margin-bottom:
            13px;

        font-size:
            14px;
    }


    .page-input-group {

        padding:
            7px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            8px;
    }


    .url-prefix {

        display:
            none;
    }


    .page-input-group input {

        padding:
            14px
            12px;

        font-size:
            16px;
    }


    .page-input-group
    .primary-button {

        width:
            100%;

        margin:
            0;

        padding:
            14px;

        font-size:
            15px;
    }


    .input-hint {

        line-height:
            1.6;
    }


    .expiry-info {

        margin-top:
            14px;

        font-size:
            13px;
    }


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

    .info-page {

        width:
            calc(
                100% - 34px
            );

        padding:
            58px
            0
            48px;
    }


    .info-page h1 {

        font-size:
            39px;

        letter-spacing:
            -1.4px;
    }


    .info-description {

        font-size:
            15px;
    }


    .info-card {

        padding:
            23px;
    }


    .features-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    /* =====================================
       PAGE NAVBAR
    ====================================== */

    .page-navbar {

        padding:
            0
            16px;
    }


    .page-navbar
    .brand-logo-icon {

        width:
            46px;

        height:
            46px;
    }


    .page-path {

        font-size:
            17px;

        color:
            #777777;
    }


    /* =====================================
       PAGE HEADER
    ====================================== */

    .page-header {

        width:
            calc(
                100% - 28px
            );

        margin:
            26px
            auto
            14px;

        display:
            block;
    }


    /* page name already appears in navbar */

    .page-title-row h1 {

        display:
            none;
    }


    .page-title-row {

        margin-bottom:
            8px;
    }


    .status-badge {

        font-size:
            11px;
    }


    .owner-label,
    .page-description {

        margin-top:
            8px;

        font-size:
            12px;
    }


    /* =====================================
       EDITOR
    ====================================== */

    .editor-card {

        width:
            calc(
                100% - 28px
            );

        border-radius:
            13px;
    }


    .editor-toolbar {

        height:
            54px;

        padding:
            0
            12px;
    }


    .editor-toolbar-right {

        gap:
            10px;
    }


    .character-count {

        font-size:
            10px;
    }


    textarea {

        min-height:
            48vh;

        max-height:
            62vh;

        padding:
            20px
            17px;

        font-size:
            15px;
    }


    /* =====================================
       COPY BUTTON
    ====================================== */

    .editor-copy-button {

        width:
            40px;

        height:
            40px;

        padding:
            0;

        border-radius:
            8px;

        background:
            rgba(
                255,
                90,
                54,
                0.08
            );

        color:
            var(--accent);

        border:
            1px solid
            rgba(
                255,
                90,
                54,
                0.45
            );
    }


    .editor-copy-button:hover {

        transform:
            none;
    }


    .editor-copy-button
    .copy-label {

        display:
            none;
    }


    .editor-copy-button i {

        font-size:
            18px;
    }


    .editor-copy-button.copied {

        background:
            #16a34a;

        color:
            #ffffff;

        border-color:
            #16a34a;
    }


    /* =====================================
       EDITOR FOOTER / SAVE
    ====================================== */

    .editor-footer {

        padding:
            11px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            7px;
    }


    .status-message {

        text-align:
            center;
    }


    .save-button {

        width:
            100%;

        padding:
            14px;

        font-size:
            15px;
    }


    /* =====================================
       OWNER CONTROLS
    ====================================== */

    .owner-panel {

        width:
            calc(
                100% - 28px
            );

        margin:
            14px
            auto;

        padding:
            15px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            14px;
    }


    .owner-panel-info {

        width:
            100%;
    }


    .owner-icon {

        width:
            42px;

        height:
            42px;
    }


    .owner-panel h2 {

        font-size:
            14px;
    }


    .owner-panel p {

        margin-top:
            3px;

        font-size:
            11px;
    }


    .owner-panel
    .secondary-button,
    .owner-panel
    .danger-button {

        width:
            100%;

        padding:
            12px;
    }


    /* =====================================
       PAGE FOOTER
    ====================================== */

    .page-footer {

        width:
            calc(
                100% - 28px
            );

        margin-top:
            28px;

        flex-direction:
            column;

        gap:
            7px;
    }


    .landing-footer {

        padding:
            24px
            14px;

        font-size:
            11px;
    }


    /* =====================================
       MANAGE
    ====================================== */

    .manage-content {

        margin-top:
            40px;
    }


    .manage-heading h1 {

        font-size:
            32px;
    }


    .setting-row {

        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .setting-info {

        min-width:
            calc(
                100% - 65px
            );
    }


    .setting-row >
    div:last-child {

        width:
            100%;

        margin-top:
            10px;
    }


    .setting-row button {

        width:
            100%;
    }


    .share-url {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .share-url button {

        width:
            100%;
    }

}