/* =============================================================
   蓝果吧 · 嵌入式模块样式（实时动态 / 网址收录）
   ============================================================= */

.module-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    gap: 14px;
}
.module-loader .loading-spinner { margin: 0; }

/* ---------------- 轻语（实时动态） ---------------- */
.shuoshuo-app { padding: 18px; }
.shuoshuo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.shuoshuo-header h2 { font-size: 18px; flex: 1; }

/* 发布区 */
.publish-box {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.6);
}
.publish-author {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}
.publish-author img {
    width: 42px; height: 42px; border-radius: 50%;
    object-fit: cover;
}
.publish-author .pu-name { font-weight: 600; font-size: 15px; }
.publish-author .pu-badge {
    font-size: 11px; color: var(--text-secondary);
    background: #f3f4f6; padding: 2px 8px; border-radius: 20px;
}
.publish-box textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
    min-height: 72px;
    outline: none;
    font-family: inherit;
}
.publish-box textarea:focus { border-color: var(--primary); }
.publish-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 10px;
    flex-wrap: wrap;
}
.publish-left { display: flex; align-items: center; gap: 10px; }
.file-hint { font-size: 12px; color: #999; }
.publish-btn {
    padding: 8px 22px;
    border-radius: 30px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
}
.publish-btn:hover { background: var(--primary-dark); }
.publish-btn:disabled { opacity: 0.6; cursor: default; }

/* 未登录提示 */
.login-hint {
    text-align: center;
    padding: 12px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.5);
    border-radius: 12px;
    margin-bottom: 16px;
}
.user-login-pop {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.user-login-pop input {
    flex: 1;
    min-width: 100px;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 7px 14px;
    font-size: 13px;
    outline: none;
}
.user-login-pop input:focus { border-color: var(--primary); }

/* 说说列表 */
.shuoshuo-list { display: flex; flex-direction: column; gap: 14px; }
.ss-item {
    background: rgba(255, 255, 255, 0.82);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.5);
    animation: fadeIn 0.3s ease;
}
.ss-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ss-head img {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-light);
}
.ss-name { font-weight: 600; font-size: 15px; }
.ss-time { font-size: 12px; color: #999; }
.ss-body { margin-bottom: 10px; }
.ss-content { font-size: 14.5px; color: var(--text-primary); word-break: break-word; white-space: pre-wrap; }
.ss-img {
    margin-top: 10px;
    border-radius: 12px;
    max-height: 320px;
    object-fit: cover;
    width: 100%;
    cursor: pointer;
}
.ss-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 30px;
    background: #f4f6f8;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
    user-select: none;
}
.ss-stat:hover { background: var(--primary-light); }
.ss-stat.liked { color: var(--primary); background: var(--primary-light); border-color: var(--primary); }

/* 评论区 */
.ss-comments { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.comment-item { display: flex; gap: 10px; margin-bottom: 10px; }
.comment-item img {
    width: 30px; height: 30px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
}
.comment-body { background: #f5f6f8; border-radius: 12px; padding: 8px 12px; flex: 1; }
.comment-nick { font-weight: 600; font-size: 13px; color: var(--primary); margin-bottom: 2px; }
.comment-text { font-size: 13.5px; word-break: break-word; white-space: pre-wrap; }
.comment-time { font-size: 11px; color: #aaa; margin-top: 3px; }
.comment-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.comment-form input {
    flex: 1;
    min-width: 100px;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 7px 14px;
    font-size: 13px;
    outline: none;
}
.comment-form input:focus { border-color: var(--primary); }
.comment-form button {
    padding: 7px 18px;
    border-radius: 30px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.comment-form button:hover { background: var(--primary-dark); }

.ss-loadmore {
    text-align: center;
    padding: 14px;
    color: var(--primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.ss-loadmore:hover { text-decoration: underline; }
.ss-end { text-align: center; color: #aaa; font-size: 13px; padding: 10px; }

/* ---------------- 网址收录 ---------------- */
.shoulu-app { padding: 18px; }
.shoulu-app h2 { font-size: 18px; margin-bottom: 6px; }
.shoulu-sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; }
.shoulu-form { background: rgba(255,255,255,0.7); border-radius: 16px; padding: 16px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.6); }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.form-group label .opt { color: #999; font-weight: normal; font-size: 12px; }
.form-group input[type="text"], .form-group textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    background: #fff;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { resize: vertical; min-height: 64px; }
.form-group input[type="file"] {
    font-size: 13px;
    color: var(--text-secondary);
    width: 100%;
}
.file-hint { font-size: 12px; color: #999; margin-top: 4px; }
.btn-primary {
    width: 100%;
    padding: 11px;
    border-radius: 30px;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition);
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.query-section { margin-top: 6px; }
.query-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.query-box { display: flex; gap: 8px; }
.query-box input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 9px 16px;
    font-size: 14px;
    outline: none;
    min-width: 0;
}
.query-box input:focus { border-color: var(--primary); }
.query-box button {
    padding: 9px 22px;
    border-radius: 30px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}
#queryResult { margin-top: 14px; display: none; }
.query-result-item {
    background: rgba(255,255,255,0.85);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.6);
}
.query-result-name { font-weight: 600; font-size: 14px; }
.badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 9px;
    border-radius: 20px;
    color: #fff;
    font-weight: normal;
    vertical-align: 1px;
}
.badge-0 { background: var(--warning); }
.badge-1 { background: var(--success); }
.badge-2 { background: var(--danger); }
.query-result-url { font-size: 12.5px; color: var(--primary); margin: 4px 0; word-break: break-all; }
.query-result-time { font-size: 12px; color: #999; }
.query-result-reason { font-size: 12px; color: var(--danger); margin-top: 3px; }

/* ---------------- 成功弹窗 ---------------- */
.ok-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9200;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}
.ok-modal.show { display: flex; }
.ok-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 34px;
    text-align: center;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
}
.ok-icon { font-size: 46px; margin-bottom: 12px; }
.ok-msg { color: var(--text-secondary); margin-bottom: 20px; font-size: 15px; }
.ok-btn {
    padding: 9px 30px;
    border-radius: 30px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}
.ok-btn:hover { background: var(--primary-dark); }

/* ---------------- 发布区头部（登录/退出） ---------------- */
.publish-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.publish-author { display: flex; align-items: center; gap: 10px; }
.publish-author img {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--primary-light);
}
.publish-author .pu-name { font-weight: 600; font-size: 15px; }
.logout-btn {
    padding: 6px 18px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: #f4f6f8;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}
.logout-btn:hover { background: #e2e8f0; color: var(--danger); }
.login-btn-wrap { text-align: center; margin: 8px 0 16px; }
.login-btn-wrap .btn-primary { max-width: 300px; }

/* ---------------- 个人书签模式（悬浮设置） ---------------- */
.languo-float-btn {
    position: fixed; top: 14px; right: 14px; z-index: 9600;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.9); box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 20px; transition: transform .2s; backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.6);
}
.languo-float-btn:hover { transform: scale(1.1); }
.languo-settings {
    position: fixed; top: 66px; right: 14px; z-index: 9600;
    width: 240px; background: rgba(255,255,255,0.97); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2); padding: 14px;
    display: none; backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.7);
}
.languo-settings.show { display: block; animation: fadeInDown .25s ease; }
.languo-settings-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; margin-bottom: 10px; }
.languo-close { font-size: 22px; color: #999; cursor: pointer; line-height: 1; }
.languo-close:hover { color: var(--danger); }
.languo-mode-label { font-size: 12.5px; color: #999; margin-bottom: 6px; }
.languo-mode-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.languo-mode-btn {
    padding: 10px; border-radius: 12px; border: 1px solid var(--border);
    background: #f8fafc; font-size: 14px; cursor: pointer; transition: .2s; text-align: center;
}
.languo-mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.languo-user-box { border-top: 1px dashed var(--border); padding-top: 10px; margin-bottom: 10px; }
.languo-user-info { font-size: 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.languo-login-btn, .languo-reg-btn {
    padding: 8px 16px; border-radius: 30px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; margin-right: 8px;
}
.languo-login-btn { background: var(--primary); color: #fff; }
.languo-reg-btn { background: var(--primary-light); color: var(--primary); }
.languo-link { color: var(--primary); font-size: 13px; text-decoration: none; }
.languo-personal-admin { border-top: 1px dashed var(--border); padding-top: 10px; }
.languo-admin-btn {
    width: 100%; padding: 11px; border-radius: 12px; border: none; cursor: pointer;
    background: linear-gradient(135deg,#4a6cf7,#7b5cf7); color: #fff; font-size: 14px; font-weight: 600;
}
.languo-admin-btn:hover { opacity: .9; }

/* 登录/注册弹窗 */
.languo-auth-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9700;
    background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 20px;
}
.languo-auth-card {
    background: #fff; border-radius: 20px; padding: 26px; width: 100%; max-width: 330px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.languo-auth-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; margin-bottom: 16px; }
.languo-auth-input {
    width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px;
    font-size: 14px; margin-bottom: 10px; outline: none; box-sizing: border-box;
}
.languo-auth-input:focus { border-color: var(--primary); }
.languo-captcha-row { display: flex; gap: 10px; align-items: center; }
.languo-captcha-img { width: 110px; height: 40px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); object-fit: cover; }
.languo-auth-err { color: var(--danger); font-size: 13px; min-height: 18px; margin: 4px 0 8px; }
.languo-auth-submit {
    width: 100%; padding: 13px; border-radius: 40px; border: none; cursor: pointer;
    background: var(--primary); color: #fff; font-size: 15px; font-weight: 700;
}
.languo-auth-submit:hover { background: var(--primary-dark); }

/* 个人书签视图 */
.personal-view { margin-left: 70px; }
.personal-view-head h2 { font-size: 18px; margin: 10px 0 6px 10px; }
.personal-empty { text-align: center; padding: 60px 20px; color: #718096; }
.personal-action-btn {
    margin-top: 16px; padding: 12px 30px; border-radius: 40px; border: none; cursor: pointer;
    background: var(--primary); color: #fff; font-size: 15px; font-weight: 600;
}

/* 个人后台 */
.languo-admin-card { background: #fff; border-radius: 20px; padding: 22px; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); max-height: 88vh; overflow: auto; }
.languo-admin-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.languo-tab {
    flex: 1; padding: 8px; border-radius: 10px; border: 1px solid var(--border);
    background: #f8fafc; font-size: 13px; cursor: pointer;
}
.languo-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.languo-admin-form select, .languo-admin-form input {
    width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
    font-size: 14px; margin-bottom: 8px; outline: none; box-sizing: border-box;
}
.languo-admin-save { width: 100%; padding: 11px; border-radius: 30px; border: none; cursor: pointer; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; margin-top: 4px; }
.languo-cat-list { margin-top: 8px; }
/* 更多设置 */
.languo-more-settings { border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 10px; }
.languo-more-card { background: #fff; border-radius: 20px; padding: 22px; width: 100%; max-width: 460px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); max-height: 90vh; display: flex; flex-direction: column; }
.languo-more-body { overflow-y: auto; flex: 1; padding-right: 4px; }
.languo-more-sec { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: #fafbfc; }
.languo-more-sec-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--text-primary); }
.languo-more-mode { display: flex; gap: 14px; margin-bottom: 8px; font-size: 13.5px; }
.languo-more-checks { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; }
.languo-more-checks label { display: inline-flex; align-items: center; gap: 5px; }
.languo-more-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.languo-more-img { position: relative; width: 52px; height: 52px; }
.languo-more-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.languo-more-img-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; }
.languo-more-actions { display: flex; gap: 10px; margin-top: 12px; }
.languo-more-actions .languo-admin-save { width: auto; }
/* 前端彩色首字图标 */
.letter-icon {
    width: 100%; height: 100%;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 17px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    user-select: none;
}
.languo-bk-section-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.languo-cat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; background: #f8fafc; margin-bottom: 6px; font-size: 13.5px; }
.languo-cat-ops { display: inline-flex; align-items: center; gap: 14px; }
.languo-del-link { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--border); }
/* 个人书签最近访问：删除按钮进入编辑模式才显示（与导航模式一致） */
.personal-view .recent-delete-btn {
    display: none;
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--danger); color: #fff; font-size: 14px;
    line-height: 22px; text-align: center; z-index: 60;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
#personalRecentSection.edit-mode .item .recent-delete-btn { display: flex; align-items: center; justify-content: center; }
.personal-view .item { position: relative; }
.languo-bk-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.languo-bk-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.languo-bk-thead, .languo-bk-row { display: grid; grid-template-columns: 24px 34px 56px 1fr 72px; gap: 5px; padding: 8px 8px; font-size: 13px; align-items: center; }
.languo-bk-name { min-width: 0; }
.languo-bk-name b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-all; line-height: 1.35;
}
@media (min-width: 768px) { .languo-bk-name b { -webkit-line-clamp: 1; } }
.languo-bk-thead { background: #f1f5f9; font-weight: 700; color: #64748b; }
.languo-bk-row { border-top: 1px solid var(--border); }
.languo-bk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.languo-bk-ops { display: flex; gap: 8px; justify-content: flex-end; }
.languo-bk-inline-edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #f1f5f9; border-radius: 8px; }
.languo-bk-inline-field { flex: 1 1 45%; min-width: 130px; }
@media (min-width: 768px) { .languo-bk-inline-field { flex: 1; min-width: 110px; } }
.languo-bk-inline-field label { display: block; font-size: 11px; color: #64748b; margin-bottom: 2px; }
.languo-bk-inline-field select, .languo-bk-inline-field input {
    width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px; box-sizing: border-box;
}
.languo-bk-inline-actions { display: flex; gap: 8px; align-items: flex-end; }
@media (max-width: 768px) {
    .personal-view { margin-left: 0; }
}
.ss-login-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9800;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px);
}
.ss-login-modal.show { display: flex; animation: fadeIn 0.25s ease; }
.ss-login-card {
    background: #fff;
    border-radius: 22px;
    padding: 30px 26px 24px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: fadeInDown 0.3s ease;
}
.ss-login-close {
    position: absolute;
    top: 12px; right: 18px;
    font-size: 26px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.ss-login-close:hover { color: var(--danger); }
.ss-login-card h3 { font-size: 20px; margin-bottom: 6px; }
.ss-login-tip { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; }
.ss-login-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    margin-bottom: 12px;
    outline: none;
    background: #f8fafc;
}
.ss-login-input:focus { border-color: var(--primary); background: #fff; }
.ss-login-submit {
    width: 100%;
    padding: 13px;
    border-radius: 40px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 6px;
}
.ss-login-submit:hover { background: var(--primary-dark); }