* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: #f4f6f8;

    color: #333;

}


.container {

    width: 90%;

    max-width: 1000px;

    margin: auto;

    padding: 40px 0;

}


/* Header */

header {

    text-align: center;

    margin-bottom: 40px;

}


header h1 {

    font-size: 36px;

    margin-bottom: 10px;

}


header p {

    color: #666;

}


/* Cards */

.card {

    background: white;

    padding: 30px;

    margin-bottom: 30px;

    border-radius: 12px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.08);

}


/* Input */

.input-group {

    display: flex;

    gap: 10px;

}


input {

    flex: 1;

    padding: 14px;

    font-size: 16px;

    border: 1px solid #ccc;

    border-radius: 8px;

}


/* Buttons */

button {

    border: none;

    padding: 12px 20px;

    border-radius: 8px;

    cursor: pointer;

    background: #2563eb;

    color: white;

    font-size: 15px;

}


button:hover {

    opacity: 0.9;

}


/* Result */

.result {

    margin-top: 20px;

    padding: 20px;

    background: #eef6ff;

    border-radius: 8px;

}


.hidden {

    display: none;

}


.short-url-container {

    display: flex;

    gap: 10px;

    align-items: center;

}


.short-url-container a {

    flex: 1;

    word-break: break-all;

}


/* Section Header */

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


/* Table */

table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;

}


th,
td {

    padding: 12px;

    border-bottom: 1px solid #ddd;

    text-align: left;

}


th {

    background: #f5f5f5;

}


/* Delete Button */

.delete-btn {

    background: #dc2626;

}


.loading {

    text-align: center;

    color: #777;

}


/* Responsive */

@media (max-width: 700px) {

    .input-group {

        flex-direction: column;

    }


    table {

        font-size: 13px;

    }

}