* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif  !important;
    background: #e8e8e8;
    color: #090909;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 60px 20px;
}

.subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 35px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 15px;
}

input:focus {
    outline: none;
    border-color: #333;
}

button {
    border: none;
    border-radius: 6px;
    padding: 13px 20px;
    font-size: 15px;
    cursor: pointer;
}

#shortenButton {
    width: auto;
    flex-shrink: 0;
}

.message {
    margin-top: 20px;
    font-weight: bold;
}

.result {
    margin-top: 30px;
    padding: 20px;
    border-radius: 8px;
    background: #f4f7fb;
}

.short-url-box {
    display: flex;
    gap: 10px;
    align-items: center;
}

.short-url-box a {
    flex: 1;
    word-break: break-all;
}

#copyButton {
    background: #ddd;
    white-space: nowrap;
}

.hidden {
    display: none;
}

@media (max-width: 600px) {

    .card {
        padding: 25px;
    }

    .short-url-box {
        flex-direction: column;
        align-items: stretch;
    }

    #copyButton {
        width: 100%;
    }
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.home-link {
    text-decoration: none;
    background: #222;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
}

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

th {
    background: #f4f7fb;
}

.url-cell {
    max-width: 250px;
    word-break: break-all;
}

.copy-link {
    background: #ddd;
}

@media (max-width: 600px) {

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .home-link {
        text-align: center;
    }
}

/* =========================
   NEUMORPHIC BUTTON
========================= */

.neumorphic-btn {
    color: #090909;

    padding: 0.7em 1.7em;

    font-size: 18px;

    border-radius: 0.5em;

    background: #e8e8e8;

    cursor: pointer;

    border: 1px solid #e8e8e8;

    transition: all 0.3s;

    box-shadow:
        6px 6px 12px #c5c5c5,
        -6px -6px 12px #ffffff;
}

.neumorphic-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        8px 8px 16px #c5c5c5,
        -8px -8px 16px #ffffff;
}

.neumorphic-btn:active {
    color: #666;

    transform: translateY(1px);

    box-shadow:
        inset 4px 4px 12px #c5c5c5,
        inset -4px -4px 12px #ffffff;
}

/* =================================
   NEUMORPHIC SHORTLINK DESIGN
   ================================= */

body {
    background: #e8e8e8 !important;
}


/* Main card */


/* URL input area */

.url-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 8px !important;

    background: #e8e8e8 !important;

    border: none !important;
    border-radius: 14px !important;

    box-shadow:
        inset 5px 5px 10px #c5c5c5,
        inset -5px -5px 10px #ffffff !important;
}


/* Input */

.url-input-wrapper input {
    flex: 1 !important;

    background: transparent !important;

    border: none !important;
    outline: none !important;

    color: #090909 !important;

    padding: 14px 12px !important;
}

/* Copy button */

#copyButton {
    color: #090909 !important;

    background: #e8e8e8 !important;

    border: 1px solid #e8e8e8 !important;

    border-radius: 0.5em !important;

    box-shadow:
        6px 6px 12px #c5c5c5,
        -6px -6px 12px #ffffff !important;

    transition: all 0.3s !important;
}


#copyButton:active {
    box-shadow:
        inset 4px 4px 12px #c5c5c5,
        inset -4px -4px 12px #ffffff !important;
}

/* Poppins font */

body,
button,
input {
    font-family: 'Poppins', sans-serif !important;
}

/* =================================
   DIGITAL AURORA BACKGROUND
================================= */

body {
    position: relative;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(99, 91, 255, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(0, 200, 255, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(140, 80, 255, 0.16),
            transparent 35%
        ),
        #e8e8e8 !important;
}


/* Subtle futuristic grid */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.25) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.25) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

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

    opacity: 0.35;
}


/* Floating glow */

body::after {
    content: "";

    position: fixed;

    width: 450px;
    height: 450px;

    top: -180px;
    right: -150px;

    border-radius: 50%;

    background: rgba(99, 91, 255, 0.12);

    filter: blur(80px);

    pointer-events: none;

    animation: floatingGlow 8s ease-in-out infinite alternate;
}


@keyframes floatingGlow {

    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-100px, 80px) scale(1.25);
    }
}

/* URL icon */

.url-icon {
    font-size: 20px;
    opacity: 0.7;
    margin-left: 8px;
    flex-shrink: 0;
}

/* =================================
   PREMIUM URL INPUT
================================= */

.url-input-wrapper {
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.url-input-wrapper:focus-within {
    transform: translateY(-1px);

    box-shadow:
        inset 4px 4px 9px #c5c5c5,
        inset -4px -4px 9px #ffffff,
        0 0 18px rgba(99, 91, 255, 0.12) !important;
}

.url-input-wrapper input {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px;
    font-weight: 400;
}

.url-input-wrapper input::placeholder {
    font-family: 'Poppins', sans-serif !important;
    color: #8a8a8a;
}

/* URL focus effect */

.url-input-wrapper input {
    transition: all 0.25s ease;
}

.url-input-wrapper input:focus {
    transform: scale(1.01);
}

/* =================================
   COMPACT SHORTLINK CARD
================================= */

.card {
    width: 520px !important;
    max-width: 90% !important;

    padding: 32px !important;

    margin: 0 auto !important;

    border-radius: 20px !important;

    background: #e8e8e8 !important;
    border: none !important;

    box-shadow:
    10px 10px 20px #c5c5c5,
    -10px -10px 20px #ffffff !important;
}


/* =================================
   MATCH INPUT BOX SIZES
================================= */

.url-input-wrapper,
.custom-alias-box,
.expiration-box {
    width: 100% !important;
    max-width: 390px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;

    min-height: 64px;
}

.custom-alias-box input {
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Compact URL box */

.url-input-wrapper {
    width: 100% !important;
    max-width: 440px !important;

    margin: 0 auto !important;

    padding: 6px !important;

    border-radius: 14px !important;
}

.url-input-wrapper input {
    min-width: 0 !important;

    width: 100% !important;

    font-size: 13px !important;

    padding: 12px 8px !important;
}

.url-input-wrapper input::placeholder {
    white-space: nowrap;
}

#shortenButton {
    padding: 12px 20px !important;

    font-size: 14px !important;

    border-radius: 12px !important;

    white-space: nowrap;
}

.url-input-wrapper {
    max-width: 390px !important;
}

.url-input-wrapper input {
    font-size: 14px !important;
}

/* =================================
   SUBMIT BUTTON LOADING ANIMATION
================================= */

.button-loader {
    display: none;

    width: 16px;
    height: 16px;

    border: 3px solid rgba(99, 91, 255, 0.2);
    border-top: 3px solid #635bff;

    border-radius: 50%;

    animation: buttonSpin 0.8s linear infinite;
}

#shortenButton.loading {
    pointer-events: none;
    opacity: 0.85;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#shortenButton.loading .button-text {
    display: none;
}

#shortenButton.loading .button-loader {
    display: inline-block;
}

@keyframes buttonSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =================================
   SHORT LINK RESULT ANIMATION
================================= */

#result {
    animation: resultAppear 0.45s ease forwards;
}

@keyframes resultAppear {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 20px;
}

.action-buttons .neumorphic-btn {
    min-width: 110px;
}

/* =================================
   DARK / LIGHT THEME TOGGLE
================================= */

.card {
    position: relative;
}

/* Toggle button */

.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;

    width: 64px;
    height: 32px;

    padding: 0;

    border: none;
    background: transparent;

    cursor: pointer;

    z-index: 10;
}

/* Toggle track */

.toggle-track {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 64px;
    height: 32px;

    padding: 4px;

    border-radius: 999px;

    background: #ffffff;
    border: 1px solid #d4d4d8;

    box-sizing: border-box;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Moving circle */

.toggle-icon-active {
    position: absolute;

    left: 4px;
    top: 4px;

    width: 24px;
    height: 24px;

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

    border-radius: 50%;

    background: #e4e4e7;

    color: #3f3f46;

    font-size: 17px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

/* Other icon */

.toggle-icon-inactive {
    position: absolute;

    right: 7px;
    top: 6px;

    color: #18181b;

    font-size: 15px;

    transition: opacity 0.3s ease;
}


/* =================================
   DARK MODE
================================= */

body.dark-mode .toggle-track {
    background: #09090b;
    border-color: #27272a;
}

body.dark-mode .toggle-icon-active {
    transform: translateX(32px);

    background: #27272a;
    color: #ffffff;
}

body.dark-mode .toggle-icon-inactive {
    opacity: 0.5;
    color: #a1a1aa;
}


/* =================================
   LIGHT MODE
================================= */

body:not(.dark-mode) .toggle-icon-active {
    color: #3f3f46;
}

body:not(.dark-mode) .toggle-icon-inactive {
    color: #18181b;
}


/* Click effect */

.theme-toggle:active .toggle-track {
    transform: scale(0.96);
}


/* =================================
   DARK MODE WEBSITE COLORS
================================= */

body {
    background: #e8e8e8;
    color: #111111;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.card {
    background: #e8e8e8;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* Dark body */

body.dark-mode {
    background: #17181c;
    color: #f5f5f5;
}


/* Dark card */

body.dark-mode .card {
    background: #24262b;
}


/* Dark input */

body.dark-mode input {
    background: #30333a;
    color: #ffffff;
}

body.dark-mode input::placeholder {
    color: #a1a1aa;
}


/* Dark result */

body.dark-mode .result {
    background: #2c2f35;
    color: #ffffff;
}


/* Dark URL */

body.dark-mode #shortUrl {
    color: #8da2ff;
}


/* Dark buttons */

body.dark-mode .neumorphic-btn {
    background: #303238;
    color: #ffffff;

    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.5),
        -6px -6px 12px rgba(255, 255, 255, 0.03);
}

/* =================================
   DARK MODE
================================= */

body.dark-mode .short-text {
    color: #a49cff;
}

body.dark-mode .link-text {
    background: linear-gradient(
        90deg,
        #a49cff,
        #ffffff,
        #7c72ff,
        #a49cff
    );

    background-size: 250% auto;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}

/* =================================
   SHORTLINK HEADER
================================= */

.shortlink-title {
    margin: 0 0 30px 0 !important;
    padding: 0 !important;

    text-align: center !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 38px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;
    letter-spacing: -1px !important;

    white-space: nowrap !important;
}

/* ================================
   SHORTLINK HEADER ANIMATION
================================ */

.shortlink-title {
    animation: titleIn 0.8s ease-out;
    transition: text-shadow 0.3s ease, transform 0.3s ease;
}

/* Subtle hover effect */
.shortlink-title:hover {
    transform: translateY(-2px);
    text-shadow: 0 0 18px rgba(99, 91, 255, 0.35);
}

@keyframes titleIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================
   MODERN CUSTOM ALIAS
================================= */

.custom-alias-box {
    width: 100%;
    max-width: 390px;

    margin: 14px auto 0;

    display: flex;
    align-items: center;

    padding: 6px 12px;

    box-sizing: border-box;

    background: #e8e8e8;

    border: none;
    border-radius: 14px;

    box-shadow:
        inset 5px 5px 10px #c5c5c5,
        inset -5px -5px 10px #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* Focus */

.custom-alias-box:focus-within {
    transform: translateY(-2px);

    box-shadow:
        inset 4px 4px 9px #c5c5c5,
        inset -4px -4px 9px #ffffff,
        0 0 18px rgba(99, 91, 255, 0.14);
}


/* Prefix */

.alias-prefix {
    flex-shrink: 0;

    padding-left: 4px;
    padding-right: 5px;

    color: #635bff;

    font-family: 'Poppins', sans-serif !important;

    font-size: 14px;
    font-weight: 600;
}


/* Input */

.custom-alias-box input {
    flex: 1;

    width: 100%;
    min-width: 0;

    margin: 0 !important;
    padding: 12px 6px !important;

    border: none !important;
    outline: none !important;

    background: transparent !important;

    box-shadow: none !important;

    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;

    color: #090909 !important;
}

.custom-alias-box input::placeholder {
    color: #8a8a8a !important;
}


/* =================================
   DARK MODE
================================= */

body.dark-mode .custom-alias-box {
    background: #30333a;

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.45),
        inset -5px -5px 10px rgba(255, 255, 255, 0.03);
}

body.dark-mode .custom-alias-box input {
    color: #ffffff !important;
}

body.dark-mode .custom-alias-box input::placeholder {
    color: #a1a1aa !important;
}

body.dark-mode .alias-prefix {
    color: #9b94ff;
}

/* =================================
   SHORTEN BUTTON - WEBSITE PURPLE
================================= */

#shortenButton {
    background: #635bff !important;
    color: #ffffff !important;

    border: none !important;

    box-shadow:
        6px 6px 12px rgba(99, 91, 255, 0.28),
        -6px -6px 12px rgba(255, 255, 255, 0.8) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}

#shortenButton:hover {
    background: #7169ff !important;

    transform: translateY(-2px);

    box-shadow:
        8px 8px 16px rgba(99, 91, 255, 0.32),
        -6px -6px 12px rgba(255, 255, 255, 0.8) !important;
}

#shortenButton:active {
    transform: translateY(1px);

    background: #574ff0 !important;

    box-shadow:
        inset 4px 4px 10px rgba(45, 40, 150, 0.35),
        inset -4px -4px 10px rgba(255, 255, 255, 0.12) !important;
}

/* =================================
   SHORTLINK HEADER UNDERLINE
================================= */

.shortlink-title {
    position: relative;
    display: block;
}

/* Purple underline */

.shortlink-title::after {
    content: "";

    display: block;

    width: 70px;
    height: 4px;

    margin: 8px auto 0;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        transparent,
        #635bff,
        transparent
    );

    animation: headerLine 2s ease-in-out infinite;
}

/* Underline animation */

@keyframes headerLine {
    0%,
    100% {
        width: 50px;
        opacity: 0.45;
    }

    50% {
        width: 85px;
        opacity: 1;
    }
}

/* =================================
   LINK EXPIRATION
================================= */

.expiration-box {
    width: 100%;
    max-width: 390px;

    margin: 14px auto 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 6px 12px;

    box-sizing: border-box;

    background: #e8e8e8;

    border-radius: 14px;

    box-shadow:
        inset 5px 5px 10px #c5c5c5,
        inset -5px -5px 10px #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.expiration-box:focus-within {
    transform: translateY(-1px);

    box-shadow:
        inset 4px 4px 9px #c5c5c5,
        inset -4px -4px 9px #ffffff,
        0 0 18px rgba(99, 91, 255, 0.12);
}

.expiration-label {
    padding-left: 4px;

    font-family: 'Poppins', sans-serif !important;
    font-size: 14px;
    font-weight: 500;

    color: #666;
}

.expiration-box select {
    border: none !important;
    outline: none !important;

    background: transparent !important;

    padding: 10px 8px;

    font-family: 'Poppins', sans-serif !important;
    font-size: 14px;
    font-weight: 500;

    color: #090909;

    cursor: pointer;
}

/* Dark mode */

body.dark-mode .expiration-box {
    background: #30333a;

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.45),
        inset -5px -5px 10px rgba(255, 255, 255, 0.03);
}

body.dark-mode .expiration-label {
    color: #c0c0c0;
}

body.dark-mode .expiration-box select {
    color: #ffffff;
}

body.dark-mode .expiration-box select option {
    background: #30333a;
    color: #ffffff;
}

/* =================================
   FINAL DARK MODE
================================= */

body.dark-mode {
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(99, 91, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(0, 180, 255, 0.08),
            transparent 30%
        ),
        #17181c !important;

    color: #f5f5f5 !important;
}


/* Main card */

body.dark-mode .card {
    background: #24262b !important;

    box-shadow:
        10px 10px 20px rgba(0, 0, 0, 0.55),
        -8px -8px 18px rgba(255, 255, 255, 0.03) !important;
}


/* Header */

body.dark-mode .shortlink-title {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}

body.dark-mode .shortlink-title::after {
    background: linear-gradient(
        90deg,
        transparent,
        #8b82ff,
        transparent
    ) !important;
}


/* =================================
   URL INPUT BOX
================================= */

body.dark-mode .url-input-wrapper {
    background: #30333a !important;

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.45),
        inset -5px -5px 10px rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .url-input-wrapper input {
    background: transparent !important;

    color: #ffffff !important;
}

body.dark-mode .url-input-wrapper input::placeholder {
    color: #a1a1aa !important;
}


/* =================================
   CUSTOM ALIAS BOX
================================= */

body.dark-mode .custom-alias-box {
    background: #30333a !important;

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.45),
        inset -5px -5px 10px rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .custom-alias-box input {
    background: transparent !important;

    color: #ffffff !important;
}

body.dark-mode .custom-alias-box input::placeholder {
    color: #a1a1aa !important;
}


/* =================================
   EXPIRATION BOX
================================= */

body.dark-mode .expiration-box {
    background: #30333a !important;

    box-shadow:
        inset 5px 5px 10px rgba(0, 0, 0, 0.45),
        inset -5px -5px 10px rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .expiration-label {
    color: #d4d4d8 !important;
}

body.dark-mode .expiration-box select {
    background: transparent !important;

    color: #ffffff !important;
}

body.dark-mode .expiration-box select option {
    background: #30333a !important;
    color: #ffffff !important;
}


/* =================================
   SUBMIT BUTTON
================================= */

body.dark-mode #shortenButton {
    background: #7c72ff !important;
    color: #ffffff !important;

    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.45),
        -4px -4px 10px rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode #shortenButton:hover {
    background: #8b82ff !important;
}


/* =================================
   OTHER BUTTONS
================================= */

body.dark-mode .neumorphic-btn {
    color: #ffffff !important;
    background: #30333a !important;

    border: 1px solid #353840 !important;

    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.45),
        -4px -4px 10px rgba(255, 255, 255, 0.03) !important;
}


/* =================================
   RESULT BOX
================================= */

body.dark-mode .result {
    background: #2c2f35 !important;
    color: #ffffff !important;
}


/* =================================
   THEME TOGGLE
================================= */

body.dark-mode .toggle-track {
    background: #09090b !important;
    border-color: #3a3a40 !important;
}

body.dark-mode .toggle-icon-active {
    background: #30333a !important;
    color: #ffffff !important;
}

body.dark-mode .toggle-icon-inactive {
    color: #777b86 !important;
}

/* =================================
   COPY BUTTON - DARK MODE FIX
================================= */

body.dark-mode #copyButton {
    background: #30333a !important;
    color: #ffffff !important;

    border: 1px solid #383b43 !important;

    box-shadow:
        6px 6px 12px rgba(0, 0, 0, 0.45),
        -4px -4px 10px rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode #copyButton:hover {
    background: #353840 !important;

    box-shadow:
        7px 7px 14px rgba(0, 0, 0, 0.5),
        -4px -4px 10px rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode #copyButton:active {
    box-shadow:
        inset 4px 4px 10px rgba(0, 0, 0, 0.45),
        inset -3px -3px 8px rgba(255, 255, 255, 0.03) !important;
}

#copyButton {
    background: #e8e8e8 !important;
    color: #090909 !important;

    box-shadow:
        6px 6px 12px #c5c5c5,
        -6px -6px 12px #ffffff !important;
}

#copyButton:hover {
    transform: translateY(-1px);

    box-shadow:
        7px 7px 14px #c5c5c5,
        -7px -7px 14px #ffffff !important;
}

/* =================================
   DARK MODE - URL INPUT FIX
================================= */

body.dark-mode .url-input-wrapper,
body.dark-mode .url-input-wrapper input,
body.dark-mode .url-input-wrapper input:focus,
body.dark-mode .url-input-wrapper input:hover {
    background: transparent !important;
    background-color: transparent !important;

    color: #ffffff !important;

    border: none !important;
    outline: none !important;

    box-shadow: none !important;
}

body.dark-mode .url-input-wrapper {
    background: #30333a !important;

    box-shadow:
    inset 5px 5px 10px rgba(0, 0, 0, 0.45),
    inset -5px -5px 10px rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode .url-input-wrapper input::placeholder {
    color: #a1a1aa !important;
}


/* Chrome autofill / remembered URL fix */

body.dark-mode .url-input-wrapper input:-webkit-autofill,
body.dark-mode .url-input-wrapper input:-webkit-autofill:hover,
body.dark-mode .url-input-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;

    -webkit-box-shadow:
        0 0 0 1000px #30333a inset !important;

    box-shadow:
        0 0 0 1000px #30333a inset !important;

    background-color: #30333a !important;

    transition: background-color 9999s ease-in-out 0s;
}