/* 通用设置 */
body {
    font-family     : "Helvetica Neue", Arial, sans-serif;
    margin          : 0;
    padding         : 20px;
    background-color: #f9f9fb;
    color           : #333;
}

/* 容器 */
.container {
    max-width    : 600px;
    margin       : auto;
    padding      : 20px;
    background   : #fff;
    border-radius: 12px;
    box-shadow   : 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* 标题 */
h3 {
    text-align    : center;
    font-size     : 22px;
    font-weight   : 600;
    margin-bottom : 20px;
    color         : #222;
    border-bottom : 1px solid #eee;
    padding-bottom: 8px;
}

/* 链接展示 */
.container>div:first-of-type a {
    display        : inline-block;
    margin         : 4px 8px 8px 0;
    padding        : 6px 12px;
    background     : #eef2f7;
    border-radius  : 6px;
    color          : #0077cc;
    text-decoration: none;
    font-size      : 14px;
    transition     : background 0.2s;
}

.container>div:first-of-type a:hover {
    background: #dde8f0;
}

/* 表单 */
.form {
    display   : flex;
    flex-wrap : wrap;
    gap       : 8px;
    width     : 100%;
    box-sizing: border-box;
}

.form input {
    flex      : 1 1 0;
    min-width : 0;
    box-sizing: border-box;
}

.form button {
    flex-shrink: 0;
    white-space: nowrap;
    box-sizing : border-box;
}

input {
    flex         : 1;
    padding      : 10px 12px;
    border       : 1px solid #ccc;
    border-radius: 6px;
    font-size    : 14px;
}

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

button {
    padding      : 10px 16px;
    background   : #0077cc;
    color        : white;
    border       : none;
    border-radius: 6px;
    font-size    : 14px;
    cursor       : pointer;
    transition   : background 0.2s;
}

button:hover {
    background: #005fa3;
}

/* 列表 */
ul {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

li {
    background   : #fafafa;
    padding      : 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow   : 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* 链接信息 */
.link-name {
    font-weight  : 600;
    margin-bottom: 4px;
    font-size    : 15px;
}

.link-url {
    font-size : 13px;
    color     : #666;
    word-break: break-all;
}

/* 按钮组 */
.button-group {
    display        : flex;
    justify-content: flex-end;
    gap            : 8px;
    margin-top     : 8px;
}

.button-group button {
    padding      : 6px 10px;
    font-size    : 13px;
    border-radius: 6px;
}

/* 不同操作按钮颜色 */
.button-group button:nth-child(1) {
    background: #e74c3c;
}

.button-group button:nth-child(1):hover {
    background: #c0392b;
}

.button-group button:nth-child(2) {
    background: #f39c12;
}

.button-group button:nth-child(2):hover {
    background: #d35400;
}

.button-group button:nth-child(3) {
    background: #2ecc71;
}

.button-group button:nth-child(3):hover {
    background: #27ae60;
}

/* 移动端优化 */
@media screen and (max-width: 500px) {
    .form {
        flex-direction: column;
    }

    .form input,
    .form button {
        width: 100%;
    }
}

.toast {
    position      : fixed;
    top           : 12px;
    left          : 50%;
    transform     : translateX(-50%) translateY(-30px);
    background    : #444;
    color         : #fff;
    padding       : 10px 20px;
    border-radius : 6px;
    box-shadow    : 0 2px 12px rgba(0, 0, 0, 0.2);
    font-size     : 14px;
    opacity       : 0;
    transition    : all 0.15s ease;
    z-index       : 9999;
    pointer-events: none;
}

.toast.show {
    opacity  : 0.5;
    transform: translateX(-50%) translateY(0);
}