/*
Theme Name: QZone Retro 宽屏
Theme URI: https://maomaoyu.org
Description: 复刻2012年QQ空间宽屏模式的怀旧主题：黑顶栏、分享生活横幅、三栏布局，左侧个人档与最近评论，右侧搜索标签云与友链。情怀外壳，博客内核。
Author: 编程专家
Author URI: https://maomaoyu.org
Version: 1.0
*/

/* ============ Reset ============ */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:"微软雅黑","Microsoft YaHei","宋体",Arial,sans-serif;
    font-size:12px; color:#333; background:#eaf1f7;
}
a { text-decoration:none; color:#333; }
a:hover { color:#1b5fa8; }
ul,ol { list-style:none; }
img { border:0; max-width:100%; }
button,input,textarea,select { font-family:inherit; font-size:12px; }

/* ============ Top Bar ============ */
.topbar {
    height:48px; background:linear-gradient(to bottom,#2a2d33,#15171b);
    border-bottom:2px solid #0c0d10;
    display:flex; align-items:center; padding:0 20px;
}
.logo { display:flex; align-items:center; color:#fff; font-size:20px; font-weight:bold;
    text-shadow:0 1px 2px #000; }
.logo .star { color:#ffd324; font-size:24px; margin-right:7px;
    filter:drop-shadow(0 0 4px rgba(255,211,36,.6)); }
.logo small { font-size:11px; color:#9aa3ad; font-weight:normal; margin-left:10px; }
.top-nav { margin-left:34px; display:flex; height:100%; }
.top-nav a { color:#c7cdd4; padding:0 16px; display:flex; align-items:center; height:100%;
    border-right:1px solid rgba(255,255,255,.06); position:relative; }
.top-nav a:first-child { border-left:1px solid rgba(255,255,255,.06); }
.top-nav a:hover, .top-nav a.active { color:#fff; background:linear-gradient(to bottom,#3a3e45,#23262b); }
.top-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:#ffd324; }
.top-user { margin-left:auto; display:flex; align-items:center; color:#c7cdd4; gap:12px; }
.top-user .avatar { width:28px; height:28px; border-radius:3px; background:linear-gradient(135deg,#5aa6e8,#2f78c4);
    display:flex; align-items:center; justify-content:center; font-size:16px; border:1px solid #111; }
.top-user a { color:#c7cdd4; }
.top-user a:hover { color:#fff; }
.top-user .uname { color:#ffe27a; }

/* ============ Banner ============ */
.banner {
    height:150px; position:relative; overflow:hidden;
    background:linear-gradient(to bottom,#cfe8fb 0%,#b9dcfa 45%,#a8d2f7 100%);
    border-bottom:1px solid #94c2ee;
}
.banner .sun { position:absolute; left:70px; top:28px; font-size:52px;
    filter:drop-shadow(0 0 14px rgba(255,214,90,.8)); }
.cloud { position:absolute; color:rgba(255,255,255,.85); font-size:40px; }
.c1 { left:240px; top:24px; } .c2 { left:520px; top:52px; font-size:30px; }
.c3 { right:120px; top:20px; font-size:34px; }
.banner-hill { position:absolute; bottom:0; left:0; right:0; height:44px;
    background:linear-gradient(to top,#9ccf8e,#b9e0ab); }
.banner-slogan { position:absolute; left:50%; top:30px; transform:translateX(-50%);
    text-align:center; color:#2b6da6; }
.banner-slogan .big { font-size:24px; font-weight:bold; letter-spacing:6px;
    text-shadow:0 1px 0 #fff; }
.banner-slogan .sub { margin-top:6px; font-size:12px; color:#5c90b8; letter-spacing:2px; }
.banner-user { position:absolute; right:60px; top:26px; display:flex; align-items:center; }
.banner-user .bp { width:88px; height:88px; border-radius:6px; border:3px solid #fff;
    background:linear-gradient(135deg,#ffd88a,#ffb74d); box-shadow:0 3px 10px rgba(70,120,170,.4);
    display:flex; align-items:center; justify-content:center; font-size:52px; }
.banner-user .info { margin-left:14px; color:#2b6da6; }
.banner-user .nick { font-size:20px; font-weight:bold; display:flex; align-items:center; }
.diamond { margin-left:8px; background:linear-gradient(to bottom,#fff176,#f9a825); color:#8a5b00;
    font-size:10px; font-weight:bold; padding:1px 6px; border-radius:2px; border:1px solid #e0a800; }
.level { margin-left:6px; background:#e8453c; color:#fff; font-size:10px; padding:1px 5px;
    border-radius:2px; }
.banner-user .meta { margin-top:8px; color:#5c90b8; line-height:1.9; }
.banner-user .meta a { color:#3a7cb4; }

/* ============ Tab Nav ============ */
.tabnav { background:linear-gradient(to bottom,#f6fafe,#e2edf8); border-bottom:1px solid #c2d7ec;
    height:38px; display:flex; align-items:flex-end; padding:0; }
.tabnav-inner { max-width:1180px; width:100%; margin:0 auto; padding:0 14px;
    display:flex; align-items:flex-end; height:100%; }
.tabnav a { padding:8px 18px; color:#4a76a0; border:1px solid transparent; border-bottom:none;
    border-radius:4px 4px 0 0; margin-right:2px; }
.tabnav a:hover { background:#fff; border-color:#c2d7ec; color:#1b5fa8; }
.tabnav a.active { background:#fff; border-color:#c2d7ec; color:#1b5fa8; font-weight:bold;
    padding-top:10px; position:relative; }
.tabnav a.active::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:#4a90d9; border-radius:4px 4px 0 0; }

/* ============ Layout ============ */
.wrap { max-width:1180px; margin:14px auto; padding:0 14px;
    display:flex; gap:14px; align-items:flex-start; }
.side-left { width:210px; flex-shrink:0; max-width:210px; }
.side-right { width:230px; flex-shrink:0; max-width:230px; }
.main { flex:1; min-width:0; }

/* ============ Module Box ============ */
.module { background:#fff; border:1px solid #cfe0f0; border-radius:4px; margin-bottom:14px;
    overflow:hidden; }
.module-hd { height:34px; padding:0 12px; display:flex; align-items:center;
    background:linear-gradient(to bottom,#5fa5e6,#3d83cc); color:#fff;
    border-bottom:1px solid #2f6fb0; }
.module-hd h2 { font-size:13px; font-weight:bold; display:flex; align-items:center; }
.module-hd h2 .ic { margin-right:6px; }
.module-hd .more { margin-left:auto; font-size:11px; color:#eaf3fb; }
.module-hd .more:hover { color:#fff; text-decoration:underline; }
.module-bd { padding:12px; }
.module-hd.plain { background:linear-gradient(to bottom,#f6fafe,#e9f1f9); color:#3a6a96;
    border-bottom:1px solid #d6e4f2; }
.module-hd.plain .more { color:#6a93bb; }

/* ============ Left: Profile ============ */
.profile-card { text-align:center; }
.profile-card .avatar-big { width:100px; height:100px; border-radius:6px; border:3px solid #fff;
    box-shadow:0 2px 8px rgba(80,130,180,.4); margin:2px auto 8px; display:block;
    background:linear-gradient(135deg,#ffd88a,#ffb74d); font-size:56px; line-height:94px; }
.profile-card .pname { font-size:16px; font-weight:bold; color:#1b5fa8; display:inline-flex;
    align-items:center; }
.profile-card .sign { margin-top:8px; color:#8aa3bb; line-height:1.8; font-family:"楷体",serif;
    padding:0 4px; word-break:break-all; }
.profile-stat { display:flex; border-top:1px solid #e3edf6; margin-top:12px; }
.profile-stat .cell { flex:1; padding:10px 2px; border-right:1px solid #eef3f8; cursor:pointer; }
.profile-stat .cell:last-child { border-right:none; }
.profile-stat .cell:hover { background:#f4f9fe; }
.profile-stat .num { font-size:17px; font-weight:bold; color:#3d83cc; }
.profile-stat .lab { color:#93a9bf; margin-top:3px; }

/* avatar wall */
.visitor-grid { display:flex; flex-wrap:wrap; gap:8px; }
.visitor-grid .v { width:38px; height:38px; border-radius:3px; border:1px solid #d3e2f0;
    background:#f0f6fc; display:flex; align-items:center; justify-content:center; font-size:20px;
    cursor:pointer; }
.visitor-grid .v:hover { border-color:#5fa5e6; }

/* data rows */
.mini-list li { display:flex; align-items:center; padding:6px 2px; border-bottom:1px dashed #e7f0f8; }
.mini-list li:last-child { border-bottom:none; }
.mini-list .ic { margin-right:6px; }
.mini-list .txt { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#444; }
.mini-list a.txt:hover { color:#1b5fa8; }
.mini-list .date { color:#a9bdce; font-size:10px; margin-left:6px; flex-shrink:0; }
.mini-list .rank { width:16px; height:16px; border-radius:2px; background:#c3d5e6; color:#fff;
    font-size:10px; text-align:center; line-height:16px; margin-right:7px; flex-shrink:0; }
.mini-list .rank.top1 { background:#f5a623; }
.mini-list .rank.top2 { background:#9aa7b3; }
.mini-list .rank.top3 { background:#d08b5b; }

/* ============ Right: search / tag / friend ============ */
.search-box { display:flex; }
.search-box input { flex:1; height:28px; border:1px solid #c2d7ec; border-right:none;
    padding:0 8px; outline:none; border-radius:3px 0 0 3px; background:#fbfdff; }
.search-box input:focus { border-color:#5fa5e6; }
.search-box button { width:56px; height:28px; border:1px solid #3d83cc; border-radius:0 3px 3px 0;
    background:linear-gradient(to bottom,#5fa5e6,#3d83cc); color:#fff; cursor:pointer;
    padding:0; font-size:13px; }
.tag-cloud { line-height:2.1; }
.tag-cloud a { display:inline-block; margin-right:4px; padding:1px 7px; border-radius:2px;
    background:#eef5fc; color:#4a76a0; border:1px solid #dbe9f7; }
.tag-cloud a:hover { background:#3d83cc; color:#fff; border-color:#3d83cc; }
.friend-list li { padding:6px 2px; border-bottom:1px dashed #e7f0f8; }
.friend-list li:last-child { border-bottom:none; }
.friend-list a { display:flex; align-items:center; }
.friend-list .fa-av { width:26px; height:26px; border-radius:3px; margin-right:8px;
    background:#eaf3fc; display:flex; align-items:center; justify-content:center; font-size:15px; }
.friend-list .fa-name { color:#444; }
.friend-list a:hover .fa-name { color:#1b5fa8; }
.calendar-box { text-align:center; }
.calendar-box .cal-month { font-size:15px; color:#1b5fa8; margin-bottom:8px; font-weight:bold; }
.calendar-box table { width:100%; border-collapse:collapse; table-layout:fixed; }
.calendar-box th { color:#8aa3bb; font-weight:normal; padding:6px 0; width:14.28%; font-size:13px; }
.calendar-box td { text-align:center; padding:6px 0; color:#555; width:14.28%;
    font-size:14px; height:32px; }
.calendar-box td a { display:inline-block; }
.calendar-box td.has a { color:#3d83cc; font-weight:bold; }
.calendar-box td.today { background:#3d83cc; border-radius:2px; }
.calendar-box td.today a { color:#fff; }
.adv-tip { background:linear-gradient(to bottom,#fff8e8,#fdefc9); border:1px solid #f0d99a;
    border-radius:4px; padding:10px; color:#8a6d2f; line-height:1.8; }

/* ============ Main: Post box / filter ============ */
.publish-box { background:#fff; border:1px solid #cfe0f0; border-radius:4px; padding:12px;
    margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.publish-box .em { font-size:30px; }
.publish-box .ann { flex:1; color:#6a829a; line-height:1.7; }
.publish-box .ann b { color:#1b5fa8; }

.filter-bar { display:flex; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:4px; }
.filter-bar .lab { color:#8aa3bb; margin-right:6px; }
.filter-bar a { padding:3px 12px; border-radius:12px; color:#5c7d9c; border:1px solid transparent; }
.filter-bar a:hover { background:#e8f1fa; color:#1b5fa8; }
.filter-bar a.active { background:#3d83cc; color:#fff; }

/* ============ Feed item ============ */
.feed { background:#fff; border:1px solid #d8e5f2; border-radius:5px; margin-bottom:14px; padding:14px; }
.feed-head { display:flex; align-items:center; }
.feed-head .f-av { width:42px; height:42px; border-radius:4px; border:1px solid #d3e2f0;
    background:#f0f6fc; display:flex; align-items:center; justify-content:center; font-size:24px;
    margin-right:10px; }
.feed-head .f-who { line-height:1.5; }
.feed-head .f-name { font-size:13px; font-weight:bold; color:#1b5fa8; }
.feed-head .f-name .cate { font-weight:normal; color:#8aa3bb; margin-left:8px; font-size:11px; }
.feed-head .f-time { color:#a5bacd; font-size:11px; }
.feed-head .f-act { margin-left:auto; color:#9ab2c8; font-size:11px; }
.feed-head .f-act a { color:#6a93bb; margin-left:10px; }

.feed-title { font-size:17px; font-weight:bold; color:#222; margin:10px 0 8px; }
a.feed-title:hover { color:#1b5fa8; }
.feed-body { color:#444; line-height:1.9; }
.feed-body p { margin:0 0 10px; }
.feed-thumb { margin:8px 0; border-radius:4px; overflow:hidden; display:inline-block;
    border:1px solid #e0eaf4; max-width:100%; }
.feed-more { color:#3d83cc; font-weight:bold; }
.feed-more:hover { text-decoration:underline; }

.feed-tags { margin-top:8px; }
.feed-tags a { display:inline-block; background:#eef5fc; color:#4a76a0; border:1px solid #dbe9f7;
    padding:1px 8px; border-radius:2px; margin-right:5px; font-size:11px; }
.feed-tags a:hover { background:#3d83cc; color:#fff; }
.feed-actions { margin-top:12px; padding-top:10px; border-top:1px solid #edf2f7; display:flex; gap:22px; }
.feed-actions a { color:#6a829a; font-size:12px; }
.feed-actions a:hover { color:#1b5fa8; }
.feed-actions a .n { color:#3d83cc; font-weight:bold; margin-left:3px; }

/* ============ Article detail ============ */
.article { background:#fff; border:1px solid #d8e5f2; border-radius:5px; padding:26px 30px; }
.article-title { font-size:24px; color:#1f3c57; text-align:center; line-height:1.5; }
.article-meta { text-align:center; color:#9ab2c8; margin:14px 0 22px; padding-bottom:16px;
    border-bottom:1px solid #edf2f7; }
.article-meta span { margin:0 8px; }
.article-meta a { color:#5c90b8; }
.article-content { color:#333; font-size:14px; line-height:2; }
.article-content p { margin:0 0 16px; }
.article-content h2,.article-content h3 { color:#1f3c57; margin:24px 0 12px; }
.article-content h2 { font-size:19px; border-left:4px solid #3d83cc; padding-left:10px; }
.article-content h3 { font-size:16px; }
.article-content ul,.article-content ol { margin:0 0 16px 22px; }
.article-content ul { list-style:disc; }
.article-content ol { list-style:decimal; }
.article-content li { margin-bottom:6px; }
.article-content blockquote { margin:0 0 16px; padding:10px 16px; background:#f4f9fe;
    border-left:4px solid #9cc4ec; color:#5f7f96; border-radius:0 4px 4px 0; }
.article-content code { background:#eef3f8; padding:1px 6px; border-radius:3px;
    font-family:Consolas,Monaco,monospace; font-size:12px; color:#c7254e; }
.article-content pre { background:#2d3748; color:#e2e8f0; padding:14px 16px; border-radius:5px;
    overflow-x:auto; margin-bottom:16px; line-height:1.7; }
.article-content pre code { background:none; color:inherit; padding:0; font-size:12px; }
.article-content img { border-radius:5px; margin:6px 0; }
.article-content a { color:#3d83cc; text-decoration:underline; }
.article-content table { border-collapse:collapse; width:100%; margin-bottom:16px; }
.article-content th,.article-content td { border:1px solid #dbe4ee; padding:8px 12px; text-align:left; }
.article-content th { background:#f0f6fc; }
.article-foot { margin-top:26px; padding-top:16px; border-top:1px solid #edf2f7; display:flex;
    justify-content:space-between; flex-wrap:wrap; gap:10px; color:#5c7d9c; }
.article-foot a { color:#3d83cc; }
.post-tags { text-align:center; margin-top:20px; }
.post-tags a { display:inline-block; background:#eef5fc; color:#4a76a0; border:1px solid #dbe9f7;
    padding:3px 12px; border-radius:3px; margin:0 4px; }
.post-tags a:hover { background:#3d83cc; color:#fff; }

/* prev/next nav */
.post-nav { background:#fff; border:1px solid #d8e5f2; border-radius:5px; margin-top:14px; padding:14px 18px; }
.post-nav div { padding:5px 0; color:#5c7d9c; }
.post-nav a { color:#3d83cc; }

/* ============ Pagination ============ */
.pager { display:flex; justify-content:center; gap:6px; margin:22px 0 6px; }
.pager a,.pager span { min-width:34px; height:34px; padding:0 10px; display:inline-flex;
    align-items:center; justify-content:center; border:1px solid #cfe0f0; border-radius:4px;
    background:#fff; color:#4a76a0; }
.pager a:hover { border-color:#3d83cc; color:#1b5fa8; }
.pager .current { background:#3d83cc; border-color:#3d83cc; color:#fff; font-weight:bold; }
.pager .disabled { color:#c0cdd9; background:#f7fafc; }

/* ============ Comments ============ */
.comment-box { background:#fff; border:1px solid #d8e5f2; border-radius:5px; padding:20px 22px; margin-top:14px; }
.comment-box h3 { font-size:15px; color:#1f3c57; margin-bottom:16px; padding-bottom:10px;
    border-bottom:1px solid #edf2f7; }
.comment-box h3 .n { color:#3d83cc; }
.comment-form .row { margin-bottom:12px; }
.comment-form input,.comment-form textarea { border:1px solid #c2d7ec; border-radius:4px;
    padding:8px 10px; outline:none; width:100%; background:#fbfdff; }
.comment-form input:focus,.comment-form textarea:focus { border-color:#5fa5e6; background:#fff; }
.comment-form textarea { resize:vertical; min-height:96px; }
.btn { display:inline-block; padding:8px 24px; border:1px solid #2f6fb0; border-radius:4px;
    background:linear-gradient(to bottom,#5fa5e6,#3d83cc); color:#fff; cursor:pointer; }
.btn:hover { background:linear-gradient(to bottom,#6fb0f0,#4590d8); color:#fff; }
.comment-list { margin-top:22px; }
.comment-item { display:flex; padding:14px 0; border-bottom:1px dashed #e7f0f8; }
.comment-item:last-child { border-bottom:none; }
.comment-item .c-av { width:40px; height:40px; border-radius:4px; border:1px solid #d3e2f0;
    background:#f0f6fc; display:flex; align-items:center; justify-content:center; font-size:22px;
    margin-right:12px; flex-shrink:0; }
.comment-item .c-main { flex:1; min-width:0; }
.comment-item .c-head { display:flex; align-items:center; }
.comment-item .c-name { font-weight:bold; color:#1b5fa8; font-size:12px; }
.comment-item .c-time { color:#a5bacd; font-size:11px; margin-left:10px; }
.comment-item .c-reply { margin-left:auto; color:#6a93bb; font-size:11px; }
.comment-item .c-body { margin-top:6px; color:#444; line-height:1.8; }
.comment-children { margin-left:52px; }
.comment-by-author .c-name::after { content:"博主"; font-size:10px; background:#f5a623; color:#fff;
    padding:0 5px; border-radius:2px; margin-left:6px; font-weight:normal; }
.comment-closed { color:#9ab2c8; text-align:center; padding:16px; }
.page-nav-links { margin:18px 0; text-align:center; color:#5c7d9c; }
.page-nav-links a { color:#3d83cc; margin:0 6px; }

/* ============ Archive ============ */
.archive-year { margin-bottom:18px; }
.archive-year h3 { font-size:15px; color:#1f3c57; padding:8px 12px; background:#f0f6fc;
    border-left:4px solid #3d83cc; border-radius:0 4px 4px 0; margin-bottom:8px; }
.archive-year h3 .cnt { color:#9ab2c8; font-size:11px; font-weight:normal; margin-left:8px; }
.archive-list li { display:flex; padding:8px 6px; border-bottom:1px dashed #e7f0f8; align-items:center; }
.archive-list .date { color:#9ab2c8; width:90px; flex-shrink:0; }
.archive-list a { color:#333; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-list a:hover { color:#1b5fa8; }
.archive-list .cmt { color:#b5c6d6; font-size:11px; margin-left:10px; }

/* ============ 404 ============ */
.error-page { background:#fff; border:1px solid #d8e5f2; border-radius:5px; text-align:center;
    padding:60px 30px; }
.error-page .big { font-size:72px; font-weight:bold; color:#cfe0f0; }
.error-page .tip { color:#5c7d9c; margin:14px 0 24px; font-size:14px; }

/* ============ Footer ============ */
.footer { background:linear-gradient(to bottom,#2a2d33,#1a1c20); border-top:2px solid #0c0d10;
    color:#9aa3ad; margin-top:10px; }
.footer-inner { max-width:1180px; margin:0 auto; padding:22px 20px; text-align:center; }
.footer a { color:#c7cdd4; }
.footer a:hover { color:#fff; }
.footer .links { margin-bottom:10px; line-height:2; }
.footer .links a { margin:0 10px; }
.footer .copy { font-size:11px; color:#767f88; line-height:2; }

/* ============ Login Modal ============ */
.top-user .login-trigger {
    cursor:pointer !important; color:#ffe680 !important; padding:5px 16px; border-radius:14px;
    background:rgba(255,230,128,0.15); font-size:12px; transition:all .2s ease;
    border:1px solid rgba(255,230,128,0.5); display:inline-flex; align-items:center; gap:4px;
    text-decoration:none !important; user-select:none; line-height:1.5;
    box-shadow:0 0 6px rgba(255,230,128,0.15);
}
.top-user .login-trigger:hover {
    background:rgba(255,230,128,0.3) !important; border-color:#ffe680 !important;
    text-decoration:none !important; color:#fff !important;
    box-shadow:0 0 12px rgba(255,230,128,0.5); transform:translateY(-1px);
}

.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.35); }

.modal-box { position:fixed; top:56px; right:24px; z-index:10000; width:340px; max-width:92vw;
    background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.5);
    overflow:hidden;
    animation:modalDropIn .25s ease; }
@keyframes modalDropIn { from{transform:translateY(-16px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal-hd { background:linear-gradient(to bottom,#4a9fe5,#2a7cc7); padding:14px 18px;
    display:flex; align-items:center; justify-content:space-between; }
.modal-hd h2 { margin:0; font-size:16px; color:#fff; font-weight:bold; text-shadow:0 1px 2px rgba(0,0,0,0.15); }
.modal-close { font-size:22px; color:rgba(255,255,255,0.8); cursor:pointer; line-height:1;
    transition:color .15s; }
.modal-close:hover { color:#fff; }

.modal-bd { padding:20px 22px 22px; }
.modal-bd .form-row { margin-bottom:14px; }
.modal-bd label { display:block; font-size:13px; color:#555; margin-bottom:5px; font-weight:bold; }
.modal-bd input[type="text"],
.modal-bd input[type="password"] { width:100%; box-sizing:border-box; height:34px; padding:0 10px;
    border:1px solid #c8d2db; border-radius:4px; font-size:13px; color:#333;
    transition:border-color .2s, box-shadow .2s; }
.modal-bd input[type="text"]:focus,
.modal-bd input[type="password"]:focus { border-color:#4a9fe5; outline:none;
    box-shadow:0 0 0 3px rgba(74,159,229,0.18); }
.modal-bd .form-check { display:flex; align-items:center; }
.modal-bd .form-check label { font-weight:normal; margin-bottom:0; display:flex; align-items:center;
    gap:5px; font-size:12px; color:#777; cursor:pointer; }
.modal-bd .modal-btn { width:100%; height:36px; border:none; border-radius:4px;
    background:linear-gradient(to bottom,#4a9fe5,#2a7cc7); color:#fff; font-size:14px;
    font-weight:bold; cursor:pointer; letter-spacing:2px;
    box-shadow:0 2px 6px rgba(42,124,199,0.35); transition:opacity .2s; }
.modal-bd .modal-btn:hover { opacity:0.9; }
.modal-bd .modal-btn:active { opacity:0.8; }
.modal-tip { text-align:center; font-size:11px; color:#aaa; margin:10px 0 0; }

/* ============ Responsive ============ */
@media (max-width:1000px) {
    .side-right { display:none; }
    .wrap { max-width:760px; }
}
@media (max-width:760px) {
    .top-nav { display:none; }
    .banner-slogan { display:none; }
    .banner-user { right:20px; }
    .banner-user .bp { width:64px; height:64px; font-size:38px; }
    .side-left { width:100%; }
    .wrap { flex-direction:column; }
    .article { padding:18px 16px; }
    .tabnav { padding:0 8px; overflow-x:auto; }
    .tabnav a { white-space:nowrap; padding:8px 12px; }
}