@charset "UTF-8";

/* ==================================================================
   Nightsea 夜海空间
   2009 年的 QQ 空间：深蓝黑、半透明盒子、12px 宋体、胶囊按钮、挂件。
   不引外部字体，不引任何图片（头图是主题自带的 SVG）。
   ================================================================== */

/* ---------- 基础 ---------- */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.ns {
    margin: 0;
    padding: 0;
    color: #c6d8e1;
    background-color: #050c11;
    background-image:
        radial-gradient(900px 480px at 50% -8%, rgba(38, 92, 106, .28), transparent 70%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px);
    font: 12px/1.8 "宋体", SimSun, "Microsoft YaHei", "PingFang SC", sans-serif;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

body.ns a {
    color: #9ad4e4;
    text-decoration: none;
}

body.ns a:hover {
    color: #d8f6ff;
    text-decoration: underline;
}

body.ns img {
    border: 0;
    vertical-align: middle;
}

body.ns ul,
body.ns ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ns p {
    margin: 0;
}

body.ns h1,
body.ns h2,
body.ns h3,
body.ns h4 {
    margin: 0;
    font-weight: bold;
}

body.ns input,
body.ns textarea,
body.ns button {
    font-family: inherit;
    font-size: 12px;
}

/* ---------- 版面 ---------- */

.ns-page {
    width: 1000px;
    margin: 0 auto;
    background: rgba(3, 10, 14, .42);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 0 30px rgba(0, 0, 0, .7);
}

.ns-main {
    display: flex;
    gap: 8px;
    padding: 8px;
    align-items: flex-start;
    transition: opacity .15s ease;
}

.ns-main.is-loading {
    opacity: .55;
}

.ns-col-l {
    width: 300px;
    flex: 0 0 300px;
}

.ns-col-r {
    flex: 1;
    min-width: 0;
}

/* ---------- 头部大图 ---------- */

.ns-top {
    position: relative;
    height: 330px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #04141b;
}

.ns-sky,
.ns-sky-img,
.ns-sky-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ns-sky-img {
    object-fit: cover;
    filter: saturate(.95) brightness(.92);
}

.ns-top-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 8, 11, .38) 0%, rgba(2, 8, 11, 0) 38%, rgba(2, 8, 11, .42) 100%),
        linear-gradient(90deg, rgba(2, 8, 11, .28) 0%, rgba(2, 8, 11, 0) 45%);
}

.ns-id {
    position: absolute;
    left: 26px;
    top: 22px;
    z-index: 3;
    max-width: 460px;
}

.ns-nick {
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: .5px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 14px rgba(120, 205, 225, .35);
}

.ns-nick a {
    color: #fff;
}

.ns-nick a:hover {
    color: #e6fbff;
    text-decoration: none;
}

.ns-lv {
    display: inline-flex;
    align-items: center;
    height: 22px;
    margin-left: 7px;
    padding: 0 9px 0 1px;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff6b0 0%, #ffdc45 20%, #ffbe12 58%, #ef9d00 100%);
    border: 1px solid rgba(122, 62, 0, .9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -2px 4px rgba(180, 90, 0, .45), 0 0 10px rgba(255, 190, 60, .55);
    color: #fffdf2;
    font: bold 11px/1 Tahoma, Arial, sans-serif;
    letter-spacing: .5px;
    text-shadow: 0 1px 1px rgba(140, 66, 0, .95), 0 0 2px rgba(120, 52, 0, .9);
    vertical-align: -3px;
    white-space: nowrap;
}

.ns-lv img {
    display: block;
    width: 22px;
    height: 19px;
    margin-right: 3px;
    border: 0;
}

.ns-url {
    margin-top: 5px;
    font: 11px/1.5 Tahoma, Arial, sans-serif;
    color: #8fb0bf;
}

.ns-url a {
    color: #8fb0bf;
}

.ns-sign {
    margin-top: 7px;
    max-width: 430px;
    color: #d9e8f0;
    line-height: 1.85;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
}

.ns-corner {
    position: absolute;
    right: 22px;
    top: 16px;
    z-index: 3;
    width: 158px;
    height: 104px;
    padding: 3px;
    background: rgba(240, 248, 251, .85);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
    transform: rotate(-1.6deg);
    overflow: hidden;
}

.ns-corner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.5) brightness(1) contrast(1.1);
}

/* 左下角贴图：两张照片斜贴在一起 */

.ns-snaps {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.ns-snap {
    position: absolute;
    margin: 0;
    padding: 3px;
    background: rgba(240, 248, 251, .88);
    border: 1px solid rgba(255, 255, 255, .62);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .62);
    overflow: hidden;
    transform: rotate(var(--r, 0deg));
    transform-origin: 50% 50%;
}

.ns-snap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.92) brightness(.9) contrast(1.06);
}

/* 六张散在封面各处：两两成对、大小角度错开，只避开挂钟/昵称/右上角照片/爱心 */
.ns-snap-1 { --r: -8deg; --k: .085; left: 138px; top: 92px;  width: 104px; height: 80px; z-index: 2; }
.ns-snap-2 { --r: 6deg;  --k: .06;  left: 222px; top: 158px; width: 84px;  height: 66px; z-index: 4; }
.ns-snap-3 { --r: -5deg; --k: .10;  left: 352px; top: 52px;  width: 92px;  height: 72px; z-index: 3; }
.ns-snap-4 { --r: 9deg;  --k: .05;  left: 486px; top: 118px; width: 120px; height: 90px; z-index: 5; }
.ns-snap-5 { --r: -7deg; --k: .075; left: 556px; top: 222px; width: 86px;  height: 68px; z-index: 2; }
.ns-snap-6 { --r: 7deg;  --k: .065; left: 700px; top: 86px;  width: 100px; height: 78px; z-index: 4; }

/* --- 闪图特效：一道高光扫过 + 亮度脉冲，六张错开时间 --- */

.ns-snaps.has-fx .ns-snap::after {
    content: "";
    position: absolute;
    top: -25%;
    left: 0;
    width: 58%;
    height: 160%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .5) 40%,
        rgba(240, 252, 255, .92) 52%,
        rgba(255, 255, 255, .5) 64%,
        rgba(255, 255, 255, 0) 100%);
    transform: rotate(16deg) translateX(-260%);
    animation: ns-snap-glint 3.6s ease-in-out infinite;
    pointer-events: none;
}

.ns-snaps.has-fx .ns-snap img {
    animation: ns-snap-glow 3.6s ease-in-out infinite;
}

/* 每张的扫光周期和起始时间都不一样，看起来就是随机闪 */

.ns-snaps.has-fx .ns-snap-1::after,
.ns-snaps.has-fx .ns-snap-1 img { animation-duration: calc(var(--cyc, 10s) * .97); animation-delay: 0s; }

.ns-snaps.has-fx .ns-snap-2::after,
.ns-snaps.has-fx .ns-snap-2 img { animation-duration: calc(var(--cyc, 10s) * 1.09); animation-delay: calc(var(--cyc, 10s) * .19); }

.ns-snaps.has-fx .ns-snap-3::after,
.ns-snaps.has-fx .ns-snap-3 img { animation-duration: calc(var(--cyc, 10s) * .91); animation-delay: calc(var(--cyc, 10s) * .08); }

.ns-snaps.has-fx .ns-snap-4::after,
.ns-snaps.has-fx .ns-snap-4 img { animation-duration: calc(var(--cyc, 10s) * 1.15); animation-delay: calc(var(--cyc, 10s) * .31); }

.ns-snaps.has-fx .ns-snap-5::after,
.ns-snaps.has-fx .ns-snap-5 img { animation-duration: calc(var(--cyc, 10s) * .94); animation-delay: calc(var(--cyc, 10s) * .13); }

.ns-snaps.has-fx .ns-snap-6::after,
.ns-snaps.has-fx .ns-snap-6 img { animation-duration: calc(var(--cyc, 10s) * 1.05); animation-delay: calc(var(--cyc, 10s) * .24); }

@keyframes ns-snap-glint {
    0%, 84% { transform: rotate(16deg) translateX(-260%); }
    100%    { transform: rotate(16deg) translateX(420%); }
}

@keyframes ns-snap-glow {
    0%, 84%, 100% { filter: saturate(.92) brightness(.9) contrast(1.06); }
    92%           { filter: saturate(1.25) brightness(1.45) contrast(1.16); }
}

/* --- 心跳缩放：咚·咚两下再歇一拍，六张周期和幅度都不一样，永不同步 ---
   周期由后台「特效间隔」控制，这里写的是相对倍率（--cyc 由模板内联给出） */

.ns-snaps.has-beat .ns-snap {
    animation: ns-snap-beat 10s ease-in-out infinite;
}

.ns-snaps.has-beat .ns-snap-1 { animation-duration: calc(var(--cyc, 10s) * .93); animation-delay: 0s; }
.ns-snaps.has-beat .ns-snap-2 { animation-duration: calc(var(--cyc, 10s) * 1.07); animation-delay: calc(var(--cyc, 10s) * .14); }
.ns-snaps.has-beat .ns-snap-3 { animation-duration: calc(var(--cyc, 10s) * .88); animation-delay: calc(var(--cyc, 10s) * .06); }
.ns-snaps.has-beat .ns-snap-4 { animation-duration: calc(var(--cyc, 10s) * 1.13); animation-delay: calc(var(--cyc, 10s) * .23); }
.ns-snaps.has-beat .ns-snap-5 { animation-duration: calc(var(--cyc, 10s) * .96); animation-delay: calc(var(--cyc, 10s) * .1); }
.ns-snaps.has-beat .ns-snap-6 { animation-duration: calc(var(--cyc, 10s) * 1.04); animation-delay: calc(var(--cyc, 10s) * .18); }

@keyframes ns-snap-beat {
    0%   { transform: rotate(var(--r, 0deg)) scale(1); }
    2%   { transform: rotate(var(--r, 0deg)) scale(calc(1 + var(--k, .08))); }
    5%   { transform: rotate(var(--r, 0deg)) scale(1); }
    8%   { transform: rotate(var(--r, 0deg)) scale(calc(1 + var(--k, .08) * .6)); }
    11%  { transform: rotate(var(--r, 0deg)) scale(1); }
    100% { transform: rotate(var(--r, 0deg)) scale(1); }
}

/* 挂钟 */

.ns-clock {
    position: absolute;
    left: 32px;
    top: 133px;
    z-index: 3;
    width: 88px;
    transform-origin: 50% 0;
    animation: ns-swing 7s ease-in-out infinite;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .65));
}

.ns-clock-img {
    display: block;
    width: 100%;
    height: auto;
}

.ns-clock-hands {
    position: absolute;
    left: 16.67%;
    top: 32.56%;
    width: 66.38%;
    height: 51.21%;
    pointer-events: none;
    overflow: visible;
}

/* 挂坠：用写实图片，不用矢量绘制 */

.ns-clock-thread {
    position: absolute;
    left: 50%;
    top: 93.5%;
    width: 1px;
    height: 12px;
    margin-left: -0.5px;
    background: linear-gradient(180deg, rgba(230, 244, 251, .9), rgba(170, 208, 224, .45));
    box-shadow: 0 0 4px rgba(170, 215, 235, .45);
    pointer-events: none;
}

.ns-clock-drop {
    position: absolute;
    left: 50%;
    top: calc(93.5% + 10px);
    width: 17px;
    height: auto;
    margin-left: -8.5px;
    transform-origin: 50% 0;
    animation: ns-drop-swing 7.5s ease-in-out infinite;
    pointer-events: none;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .6));
}

@keyframes ns-drop-swing {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

@keyframes ns-swing {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* 爱心挂坠 */

.ns-heart {
    position: absolute;
    right: 26px;
    top: 124px;
    z-index: 3;
    width: 112px;
    text-align: center;
}

.ns-heart-img {
    display: block;
    width: 74px;
    height: auto;
    margin: 0 auto;
    transform-origin: 50% 0;
    animation: ns-swing 5.4s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}

.ns-heart-chain {
    display: block;
    position: relative;
    height: 30px;
    margin-bottom: 1px;
}

.ns-heart-chain i {
    position: absolute;
    left: 50%;
    width: 6px;
    height: 8px;
    margin-left: -3px;
    border: 1px solid rgba(206, 228, 238, .55);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(240, 250, 255, .32), rgba(150, 180, 195, .08));
    box-shadow: 0 0 3px rgba(180, 220, 235, .3);
}

.ns-heart-chain i:nth-child(1) { top: 0; }
.ns-heart-chain i:nth-child(2) { top: 8px; }
.ns-heart-chain i:nth-child(3) { top: 16px; }

.ns-heart-svg {
    display: block;
    width: 52px;
    height: 48px;
    margin: 0 auto;
    transform-origin: 50% 0;
    animation: ns-swing 5.4s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}

.ns-heart-txt {
    margin-top: 5px;
    font: italic 12px/1.6 Georgia, "Times New Roman", serif;
    letter-spacing: .6px;
    color: #eef8fc;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}

.ns-heart-txt em {
    font-style: italic;
    display: inline-block;
    margin-top: 1px;
    letter-spacing: 2.6px;
    color: #dcf0f8;
}

/* ---------- 导航 ---------- */

.ns-nav {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(32, 60, 71, .94), rgba(9, 22, 28, .96));
    border-top: 1px solid rgba(150, 200, 215, .18);
    border-bottom: 1px solid rgba(0, 0, 0, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.ns-nav-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
}

.ns-nav-item {
    position: relative;
}

.ns-pill {
    display: inline-block;
    padding: 0 14px;
    height: 23px;
    line-height: 21px;
    border-radius: 12px;
    font-size: 12px;
    color: #b9d2dd;
    background: linear-gradient(180deg, #3b5b69, #162a31 62%, #0d1c22);
    border: 1px solid rgba(140, 195, 210, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .55);
    white-space: nowrap;
}

.ns-pill:hover {
    color: #effbff;
    text-decoration: none;
    border-color: rgba(185, 235, 250, .62);
    background: linear-gradient(180deg, #4f7a8b, #1d3742 62%, #10232a);
}

.ns-pill.is-on {
    color: #f2fdff;
    border-color: rgba(178, 238, 252, .8);
    background: linear-gradient(180deg, #57919f, #1e3d49 62%, #122b34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 9px rgba(120, 210, 235, .4);
}

.ns-drop {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 132px;
    padding: 4px 0;
    display: none;
    background: #07141a;
    border: 1px solid rgba(140, 195, 210, .35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .7);
    z-index: 40;
}

.ns-nav-item.has-drop:hover .ns-drop,
.ns-nav-item.has-drop:focus-within .ns-drop {
    display: block;
}

.ns-drop li a {
    display: block;
    padding: 3px 12px;
    color: #b6cdd8;
    white-space: nowrap;
}

.ns-drop li a:hover {
    background: rgba(120, 200, 225, .14);
    color: #eafaff;
    text-decoration: none;
}

/* 音乐盒歌单：点一下展开，不走 hover（按钮和面板之间有缝，鼠标过去会闪） */
.ns-nav-music.is-open .ns-drop {
    display: block;
}

.ns-nav-music .ns-drop {
    min-width: 168px;
    max-height: 46vh;
    overflow-y: auto;
}

.ns-drop-tracks li a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
}

.ns-trk-ic {
    flex: 0 0 10px;
    font: 9px/1 Tahoma, Arial, sans-serif;
    color: #5f7c8a;
    text-align: center;
}

.ns-trk-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-drop-tracks li.is-on a {
    color: #e2f6fd;
    background: rgba(120, 200, 225, .16);
}

.ns-drop-tracks li.is-on .ns-trk-ic {
    color: #8fd0e6;
}

.ns-nav-side {
    flex: 1 1 0;
    text-align: right;
    font: 11px/1 Tahoma, "宋体", sans-serif;
    color: #7e9aa8;
    white-space: nowrap;
}

.ns-nav-side a {
    color: #93b1bf;
}

.ns-nav-side span {
    color: #6d8b99;
    cursor: default;
}

.ns-nav-side i {
    font-style: normal;
    margin: 0 5px;
    color: #4f6d7a;
}

.ns-subnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 30px;
    padding: 0 14px;
    background: rgba(6, 17, 22, .94);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ns-subnav-list {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ns-tab {
    display: inline-block;
    padding: 0 11px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    font-size: 11px;
    color: #a2bcc8;
    border: 1px solid transparent;
}

.ns-tab:hover {
    color: #e8f8ff;
    text-decoration: none;
    background: rgba(255, 255, 255, .07);
}

.ns-tab.is-on {
    color: #0a1e26;
    background: linear-gradient(180deg, #f2fbfe, #d7ebf2);
    border-color: #fff;
    box-shadow: 0 0 8px rgba(200, 240, 255, .45);
    text-shadow: none;
}

.ns-subnav-side {
    font: 11px/1 Tahoma, "宋体", sans-serif;
    color: #6d8b99;
}

/* ---------- 盒子 ---------- */

.ns-box {
    margin-bottom: 8px;
    background: rgba(8, 19, 25, .62);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 7px rgba(0, 0, 0, .4);
}

.ns-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 26px;
    padding: 0 10px;
    background: linear-gradient(180deg, rgba(78, 122, 138, .58), rgba(16, 35, 44, .7));
    border-bottom: 1px solid rgba(0, 0, 0, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.ns-hd-t {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #eaf6fa;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ns-hd-t i {
    display: inline-block;
    width: 3px;
    height: 11px;
    background: #86d3e6;
    box-shadow: 0 0 6px rgba(134, 211, 230, .8);
}

.ns-hd-link {
    font: normal 11px/1 Tahoma, "宋体", sans-serif;
    color: #a8c6d2;
    flex: 0 0 auto;
}

.ns-hd-link:hover {
    color: #e8faff;
}

.ns-bd {
    padding: 9px 10px;
}

.ns-hint,
.ns-empty {
    color: #7f9aa7;
    line-height: 1.9;
}

.ns-hint {
    padding: 6px 8px;
    border: 1px dashed rgba(140, 195, 210, .3);
    background: rgba(255, 255, 255, .025);
}

/* ---------- 左栏 ---------- */

.ns-welcome {
    color: #b8cdd8;
    line-height: 1.95;
}

.ns-welcome a {
    color: #9ad4e4;
}

.ns-bd-log {
    padding: 5px 8px 7px;
}

.ns-log li {
    position: relative;
    padding: 1px 0 1px 11px;
    line-height: 1.85;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ns-log li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    background: #7fb2c2;
    box-shadow: 0 0 4px rgba(127, 178, 194, .7);
}

.ns-log time {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #86a1ae;
    margin-right: 5px;
}

.ns-log a {
    color: #cfe3ec;
}

.ns-log a:hover {
    color: #a8ecff;
}

.ns-me {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.ns-me-ava {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(180, 215, 230, .35);
    background: #0b1c23;
    overflow: hidden;
}

.ns-me-ava img,
.ns-me-ava svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ns-me-info {
    min-width: 0;
}

.ns-me-name {
    color: #e7f5fa;
    font-weight: bold;
}

.ns-me-sign {
    color: #97b2bf;
    line-height: 1.75;
    margin-top: 2px;
}

.ns-me-stats {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dotted rgba(255, 255, 255, .14);
    color: #8ba7b4;
    font-size: 11px;
}

.ns-me-stats b {
    color: #9fe0f2;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    margin-right: 2px;
}

/* ---------- 相框 ---------- */

.ns-photos {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
}

.ns-photo {
    flex: 0 0 96px;
    width: 96px;
    height: 70px;
    padding: 2px;
    background: rgba(228, 242, 248, .82);
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .55);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ns-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.9);
}

.ns-photo:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(160, 230, 250, .6);
}

.ns-photo-blank {
    display: block;
    background: rgba(255, 255, 255, .02);
    border: 1px dashed rgba(140, 195, 210, .28);
    box-shadow: none;
    position: relative;
}

.ns-photo-blank::after {
    content: "+";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(140, 195, 210, .35);
    font: 20px/1 Tahoma, sans-serif;
}

/* ---------- 看大图（相框 / 相册点开） ---------- */

.ns-photo,
.ns-album-item a {
    cursor: zoom-in;
}

body.ns-lb-open {
    overflow: hidden;
}

.ns-lb {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
}

.ns-lb[hidden] {
    display: none;
}

.ns-lb-mask {
    position: absolute;
    inset: 0;
    background: rgba(2, 9, 13, .84);
    animation: ns-lb-fade .16s ease-out;
}

.ns-lb-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(860px, 100%);
    max-height: 100%;
    background: rgba(6, 19, 26, .97);
    border: 1px solid rgba(150, 205, 220, .32);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 20px 50px rgba(0, 0, 0, .8), 0 0 36px rgba(96, 190, 216, .12);
    animation: ns-lb-pop .18s ease-out;
}

.ns-lb-hd {
    flex: 0 0 auto;
    height: 28px;
}

.ns-lb-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.ns-lb-n {
    font: normal 11px/1 Tahoma, "宋体", sans-serif;
    color: #a8c6d2;
    letter-spacing: .5px;
}

.ns-lb-x {
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    color: #cfe6ef;
    background: rgba(10, 28, 36, .8);
    border: 1px solid rgba(140, 195, 210, .35);
    border-radius: 3px;
    cursor: pointer;
}

.ns-lb-x:hover {
    color: #fff;
    background: rgba(170, 74, 74, .6);
    border-color: rgba(255, 150, 150, .6);
}

.ns-lb-bd {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px;
    min-height: 0;
}

.ns-lb-fig {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ns-lb-img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 180px);
    padding: 5px;
    background: rgba(228, 242, 248, .86);
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .7);
}

.ns-lb-cap {
    max-width: 100%;
    color: #a5bec9;
    text-align: center;
    word-break: break-word;
}

.ns-lb-cap:empty {
    display: none;
}

.ns-lb-link {
    font: normal 11px/1 Tahoma, "宋体", sans-serif;
    color: #86d3e6;
    border-bottom: 1px dotted rgba(134, 211, 230, .55);
}

.ns-lb-nav {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 13px/1 Tahoma, "宋体", sans-serif;
    color: #9ad4e4;
    background: linear-gradient(180deg, rgba(40, 82, 96, .5), rgba(8, 24, 31, .5));
    border: 1px solid rgba(140, 195, 210, .25);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ns-lb-nav:hover {
    color: #eafaff;
    border-color: rgba(160, 230, 250, .6);
    background: linear-gradient(180deg, rgba(70, 130, 150, .55), rgba(12, 34, 42, .55));
}

.ns-lb.is-single .ns-lb-nav {
    visibility: hidden;
}

@keyframes ns-lb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ns-lb-pop {
    from { opacity: 0; transform: translateY(6px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .ns-lb {
        padding: 10px 6px;
    }

    .ns-lb-bd {
        position: relative;
        padding: 6px;
        gap: 0;
    }

    /* 窄屏把翻页按钮压在图片两侧，别挤占宽度 */
    .ns-lb-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 20px;
        background: rgba(4, 14, 19, .72);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    }

    .ns-lb-nav.is-prev { left: 10px; }
    .ns-lb-nav.is-next { right: 10px; }

    .ns-lb-img {
        max-height: calc(100vh - 150px);
    }
}

/* ---------- 电影 / 关注 ---------- */

.ns-movie {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ns-movie + .ns-movie {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dotted rgba(255, 255, 255, .14);
}

.ns-movie-cover {
    flex: 0 0 64px;
    width: 64px;
    height: 88px;
    padding: 2px;
    background: rgba(228, 242, 248, .82);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .55);
}

.ns-movie-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ns-movie-txt {
    min-width: 0;
}

.ns-movie-txt h3 {
    color: #e7f5fa;
    margin-bottom: 3px;
}

.ns-movie-txt h3 a {
    color: #e7f5fa;
}

.ns-movie-txt p {
    color: #a5bec9;
    line-height: 1.9;
}

.ns-friends {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ns-friends li a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
    color: #c3d8e2;
    overflow: hidden;
}

.ns-friends li a:hover {
    text-decoration: none;
    border-color: rgba(150, 215, 235, .4);
    background: rgba(120, 200, 225, .1);
}

.ns-friend-ava {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #2c4d5a, #0e2229);
    border: 1px solid rgba(160, 210, 225, .3);
    color: #9ed9ea;
    font-family: Tahoma, "宋体", sans-serif;
    overflow: hidden;
}

.ns-friend-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ns-friend-name {
    color: #d6e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-friend-desc {
    display: none;
}

/* ---------- 文章 ---------- */

.ns-post-title {
    font-size: 19px;
    line-height: 1.6;
    color: #eef9fd;
    text-align: center;
    padding: 4px 0 2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}

.ns-post-meta {
    text-align: center;
    color: #87a3b0;
    font: 11px/1.9 Tahoma, "宋体", sans-serif;
    padding: 2px 0 10px;
    border-bottom: 1px dotted rgba(255, 255, 255, .16);
    margin-bottom: 12px;
}

.ns-post-meta a {
    color: #93b8c6;
}

.ns-post-meta span {
    margin: 0 4px;
    color: #4e6b78;
}

.ns-md {
    color: #c2d5df;
    font-size: 12px;
    line-height: 2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ns-md p {
    margin: 0 0 12px;
}

.ns-md h2 {
    font-size: 14px;
    color: #e9f6fa;
    border-left: 3px solid #86d3e6;
    padding-left: 8px;
    margin: 20px 0 10px;
    line-height: 1.6;
}

.ns-md h3 {
    font-size: 13px;
    color: #dcf0f7;
    margin: 16px 0 8px;
}

.ns-md h4 {
    font-size: 12px;
    color: #cfe6ef;
    margin: 14px 0 6px;
}

.ns-md a {
    color: #8fd7e6;
    border-bottom: 1px dotted rgba(143, 215, 230, .5);
}

.ns-md a:hover {
    color: #d6f7ff;
    border-bottom-color: #d6f7ff;
    text-decoration: none;
}

.ns-md ul,
.ns-md ol {
    padding-left: 22px;
    margin: 0 0 12px;
    list-style: disc;
}

.ns-md ol {
    list-style: decimal;
}

.ns-md li {
    margin: 2px 0;
}

.ns-md blockquote {
    margin: 12px 0;
    padding: 8px 12px;
    border-left: 2px dotted #5f8b9b;
    background: rgba(255, 255, 255, .04);
    color: #a9c3cf;
}

.ns-md blockquote p:last-child {
    margin-bottom: 0;
}

.ns-md img {
    max-width: 100%;
    height: auto;
    padding: 2px;
    background: rgba(228, 242, 248, .8);
    border: 1px solid rgba(255, 255, 255, .4);
}

.ns-md hr {
    height: 1px;
    border: 0;
    margin: 16px 0;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 4px, transparent 4px 8px);
}

.ns-md pre {
    margin: 0 0 12px;
    padding: 10px 12px;
    overflow: auto;
    background: #04101a;
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 3px solid rgba(134, 211, 230, .5);
    font: 12px/1.75 Consolas, Monaco, "Courier New", monospace;
    color: #a8d8c6;
    text-shadow: none;
}

.ns-md code {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, .08);
    padding: 1px 4px;
    color: #a8d8c6;
}

.ns-md pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.ns-md table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 12px;
}

.ns-md th,
.ns-md td {
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 5px 8px;
    text-align: left;
}

.ns-md th {
    background: rgba(120, 200, 225, .1);
    color: #dcf1f8;
}

.ns-md iframe {
    max-width: 100%;
}

.ns-post-tags {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dotted rgba(255, 255, 255, .16);
    color: #8ba7b4;
}

.ns-post-tags a {
    display: inline-block;
    margin-right: 6px;
    padding: 0 7px;
    border: 1px solid rgba(150, 215, 235, .3);
    border-radius: 9px;
    font-size: 11px;
    line-height: 17px;
    color: #a9d8e6;
}

.ns-post-tags a:hover {
    text-decoration: none;
    border-color: rgba(180, 235, 250, .7);
    background: rgba(120, 200, 225, .12);
}

.ns-postnav {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dotted rgba(255, 255, 255, .16);
    color: #8ba7b4;
}

.ns-pn {
    line-height: 2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- 归档列表 ---------- */

.ns-list li {
    padding: 8px 0;
    border-bottom: 1px dotted rgba(255, 255, 255, .12);
}

.ns-list li:last-child {
    border-bottom: 0;
}

.ns-li-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
}

.ns-li-top time {
    flex: 0 0 auto;
    font: 11px/1.6 Tahoma, Arial, sans-serif;
    color: #86a1ae;
}

.ns-li-title {
    color: #dcf0f8;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ns-li-title:hover {
    color: #a8ecff;
}

.ns-li-ex {
    color: #93adba;
    line-height: 1.9;
    margin-top: 2px;
}

.ns-li-meta {
    color: #6f8c9a;
    font: 11px/1.8 Tahoma, "宋体", sans-serif;
    margin-top: 2px;
}

.ns-li-meta span {
    margin: 0 4px;
}

/* ---------- 分页 ---------- */

.ns-pager {
    margin-top: 8px;
    text-align: center;
}

.ns-pagenav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
}

.ns-pagenav li {
    display: block;
}

.ns-pagenav li a,
.ns-pagenav li span,
.ns-pagenav li.current a {
    display: block;
    padding: 1px 7px;
    font: 11px/18px Tahoma, "宋体", sans-serif;
    color: #a3c0cd;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
}

.ns-pagenav li a:hover {
    color: #e8faff;
    border-color: rgba(160, 225, 245, .5);
    text-decoration: none;
}

.ns-pagenav li.current a,
.ns-pagenav li.current span {
    color: #eafaff;
    background: rgba(120, 200, 225, .2);
    border-color: rgba(160, 225, 245, .55);
}

/* ---------- 留言板 ---------- */

.ns-cmt-list {
    margin: 0 0 4px;
}

.ns-cmt {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px dotted rgba(255, 255, 255, .12);
}

.ns-cmt:last-child {
    border-bottom: 0;
}

.ns-cmt-ava {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 1px;
    background: rgba(228, 242, 248, .8);
    border: 1px solid rgba(255, 255, 255, .35);
    overflow: hidden;
}

.ns-cmt-ava img,
.ns-cmt-ava svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ns-cmt-main {
    flex: 1;
    min-width: 0;
}

.ns-cmt-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.7;
}

.ns-cmt-name {
    color: #9fe0f2;
}

.ns-cmt-name a {
    color: #9fe0f2;
}

.ns-cmt-owner {
    font-style: normal;
    font-size: 10px;
    padding: 0 4px;
    color: #4a3000;
    background: linear-gradient(180deg, #ffee9c, #e0b02a);
    border-radius: 2px;
    line-height: 14px;
    text-shadow: none;
}

.ns-cmt-wait {
    font-style: normal;
    font-size: 10px;
    color: #e2b0b0;
    border: 1px solid rgba(220, 140, 140, .4);
    padding: 0 4px;
    line-height: 14px;
}

.ns-cmt-time {
    font: 11px/1.6 Tahoma, Arial, sans-serif;
    color: #7d99a6;
}

.ns-cmt-floor {
    margin-left: auto;
    font: 11px/1.6 Tahoma, "宋体", sans-serif;
    color: #6d8b99;
}

.ns-cmt-body {
    color: #c2d6e0;
    line-height: 1.95;
    margin-top: 2px;
    word-wrap: break-word;
}

.ns-cmt-body p {
    margin: 0 0 6px;
}

.ns-cmt-body p:last-child {
    margin-bottom: 0;
}

.ns-cmt-ops {
    margin-top: 3px;
    font-size: 11px;
    color: #6f8c9a;
}

.ns-cmt-ops a {
    color: #7fa4b4;
    margin-right: 8px;
}

.ns-cmt-ops a:hover {
    color: #b8e9f8;
}

/* 手机端扁平回复的 @ 前缀 */
.ns-cmt-at {
    color: #8fdcf2;
    font-weight: bold;
    text-decoration: none;
}

.ns-cmt-at:hover {
    text-decoration: underline;
}

.ns-cmt-kids {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 1px dotted rgba(255, 255, 255, .18);
}

.ns-cmt.is-child {
    padding: 7px 0;
}

.ns-cmt.is-child .ns-cmt-ava {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
}

.ns-respond {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dotted rgba(255, 255, 255, .16);
}

.ns-respond-title {
    font-size: 12px;
    color: #dceff7;
    margin-bottom: 8px;
}

.ns-cancel {
    font-size: 11px;
    margin-bottom: 6px;
}

.ns-respond-id {
    color: #8ba7b4;
    margin-bottom: 8px;
}

.ns-form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ns-field {
    margin-bottom: 8px;
    flex: 1 1 150px;
    min-width: 0;
}

.ns-field label {
    display: block;
    color: #8ba7b4;
    font-size: 11px;
    margin-bottom: 3px;
}

.ns-input,
.ns-textarea {
    width: 100%;
    padding: 5px 8px;
    color: #d8e9f1;
    background: #06131a;
    border: 1px solid rgba(140, 190, 205, .3);
    border-radius: 2px;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}

.ns-input:focus,
.ns-textarea:focus {
    border-color: rgba(150, 225, 245, .7);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 7px rgba(120, 210, 235, .3);
}

.ns-textarea {
    resize: vertical;
    line-height: 1.8;
}

.ns-respond-actions {
    margin-top: 4px;
}

.ns-btn {
    padding: 0 16px;
    height: 24px;
    line-height: 22px;
    color: #eafaff;
    cursor: pointer;
    border-radius: 12px;
    background: linear-gradient(180deg, #4d8496, #1b3641 62%, #122a33);
    border: 1px solid rgba(170, 235, 250, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 3px rgba(0, 0, 0, .5);
}

.ns-btn:hover {
    background: linear-gradient(180deg, #5e9cb0, #21414e 62%, #16323c);
    border-color: rgba(200, 245, 255, .8);
}

.ns-search {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.ns-search .ns-input {
    flex: 1;
}

/* ---------- 相册 ---------- */

.ns-album {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.ns-album-item a {
    display: block;
    position: relative;
    padding: 3px;
    background: rgba(228, 242, 248, .82);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
    overflow: hidden;
}

.ns-album-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    filter: saturate(.9);
    transition: transform .25s ease;
}

.ns-album-item a:hover img {
    transform: scale(1.05);
}

.ns-album-cap {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    padding: 2px 6px;
    background: linear-gradient(180deg, rgba(2, 10, 14, 0), rgba(2, 10, 14, .8));
    color: #dff2fa;
    font-size: 11px;
    line-height: 1.7;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 说说 ---------- */

.ns-shuo li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px dotted rgba(255, 255, 255, .12);
}

.ns-shuo li:last-child {
    border-bottom: 0;
}

.ns-shuo-face {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(180, 215, 230, .35);
    background: #0b1c23;
    overflow: hidden;
}

.ns-shuo-face img,
.ns-shuo-face svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ns-shuo-body {
    flex: 1;
    min-width: 0;
}

.ns-shuo-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 3px;
}

.ns-shuo-name {
    color: #8fd0e6;
    font-weight: bold;
}

a.ns-shuo-name:hover {
    color: #b9e8f6;
}

.ns-shuo-time {
    font: 11px/1.6 Tahoma, Arial, sans-serif;
    color: #6f8c9a;
}

.ns-shuo-txt {
    color: #c6dae4;
    line-height: 1.95;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ns-shuo-txt a {
    color: #8fd0e6;
}

/* ---------- 好友页 ---------- */

.ns-linklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.ns-linkcard a {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    color: #c6dae4;
}

.ns-linkcard a:hover {
    text-decoration: none;
    border-color: rgba(150, 215, 235, .45);
    background: rgba(120, 200, 225, .1);
}

.ns-linkcard-ava {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #2c4d5a, #0e2229);
    border: 1px solid rgba(160, 210, 225, .3);
    color: #9ed9ea;
    overflow: hidden;
}

.ns-linkcard-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ns-linkcard-txt {
    min-width: 0;
}

.ns-linkcard-txt b {
    display: block;
    color: #dcf0f8;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ns-linkcard-txt em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #86a1ae;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- 个人档页 ---------- */

.ns-profile {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dotted rgba(255, 255, 255, .16);
}

.ns-profile-ava {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    padding: 3px;
    background: rgba(228, 242, 248, .82);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .55);
}

.ns-profile-ava img,
.ns-profile-ava svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ns-profile-name {
    font-size: 17px;
    color: #eefaff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.ns-profile-sign {
    color: #a2bcc8;
    margin-top: 4px;
    line-height: 1.9;
}

/* ---------- 404 ---------- */

.ns-404 {
    text-align: center;
    padding: 26px 10px 30px;
}

.ns-404-no {
    font: bold 54px/1 Tahoma, Arial, sans-serif;
    color: rgba(150, 220, 240, .35);
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(120, 210, 235, .3);
}

.ns-404-txt {
    margin: 10px 0 12px;
    color: #a2bcc8;
}

.ns-404-links a {
    display: inline-block;
    padding: 0 12px;
    height: 22px;
    line-height: 20px;
    border: 1px solid rgba(150, 215, 235, .35);
    border-radius: 11px;
}

.ns-404 .ns-search {
    max-width: 320px;
    margin: 14px auto 0;
}

/* ---------- 页脚 ---------- */

.ns-foot {
    margin-top: 8px;
    padding: 14px 10px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #7893a1;
    font: 11px/2 Tahoma, "宋体", sans-serif;
}

.ns-foot-line {
    color: #7893a1;
}

.ns-foot-line span {
    margin: 0 5px;
    color: #405965;
}

.ns-foot a {
    color: #8fadbb;
}

.ns-foot-note {
    color: #8ba7b4;
    margin-bottom: 4px;
}

/* ---------- 磁带机（头部横条） ---------- */

.ns-tape {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    justify-content: center;
    z-index: 4;
    font: 11px/1.4 Tahoma, "宋体", sans-serif;
}

.ns-tape-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 300px;
    height: 32px;
    padding: 4px 8px 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(56, 78, 84, .96) 0%, rgba(22, 40, 48, .96) 26%, rgba(9, 20, 26, .96) 68%, rgba(30, 49, 57, .96) 100%);
    border: 1px solid rgba(160, 205, 220, .36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 6px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .55);
}

.ns-tape-shell::before,
.ns-tape-shell::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d5e6ee, #46606b);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}

.ns-tape-shell::before { left: 3px; }
.ns-tape-shell::after { right: 3px; }

.ns-reel {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    display: block;
}

.ns-reel svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ns-tape-strip {
    flex: 0 0 18px;
    height: 5px;
    background: linear-gradient(180deg, #0e1a20, #22353d 45%, #0a1318);
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid #000;
}

.ns-tape.is-playing .ns-reel:nth-child(1) svg {
    animation: ns-reel-spin 2.2s linear infinite;
}

.ns-tape.is-playing .ns-reel:nth-child(3) svg {
    animation: ns-reel-spin 2.9s linear infinite;
}

@keyframes ns-reel-spin {
    to { transform: rotate(360deg); }
}

.ns-tape-mid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.ns-tape-name {
    font: 11px/1.3 "宋体", Tahoma, sans-serif;
    color: #d3e7f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}

.ns-tape-time {
    flex: 0 0 auto;
    font: 9px/1 Tahoma, Arial, sans-serif;
    color: #7d9ba9;
    white-space: nowrap;
}

.ns-tape-ctrl {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ns-tape-ctrl button {
    width: 20px;
    height: 13px;
    padding: 0;
    cursor: pointer;
    color: #86a9b8;
    font: 6.5px/1 Tahoma, Arial, sans-serif;
    letter-spacing: -1.5px;
    background: linear-gradient(180deg, #2c4551, #101f26);
    border: 1px solid rgba(150, 200, 215, .22);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.ns-tape-ctrl button:hover {
    color: #eafaff;
    border-color: rgba(190, 240, 252, .72);
    background: linear-gradient(180deg, #4d7281, #193039);
}

.ns-tape-ctrl button:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7);
}

.ns-tape-play {
    width: 20px;
    color: #d5eef9;
    border-color: rgba(160, 215, 230, .38);
}

.ns-tape-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 3px;
    height: 2px;
    cursor: pointer;
    border-radius: 1px;
    background: rgba(0, 0, 0, .6);
    overflow: hidden;
}

.ns-tape-bar:focus-visible {
    outline: 1px solid rgba(160, 225, 245, .6);
    outline-offset: 2px;
}

.ns-tape-prog {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #4e93a8, #a6e4f5);
    box-shadow: 0 0 6px rgba(159, 224, 242, .55);
}

.ns-tape-min {
    display: none;
}


/* ---------- 响应式 ---------- */

/* 手机 UA：右栏不再输出（相框、电影都搬走），一律单栏，
   连 iPad 横屏这种宽度超过 900px 的也收成一列，免得右边空一块 */
body.ns-mobile .ns-main {
    flex-direction: column;
}

body.ns-mobile .ns-col-l,
body.ns-mobile .ns-col-r {
    width: 100%;
    flex: none;
}

@media (max-width: 1020px) {
    .ns-page {
        width: auto;
        margin: 0 6px;
    }
}

@media (max-width: 900px) {
    .ns-main {
        flex-direction: column;
    }

    .ns-col-l,
    .ns-col-r {
        width: 100%;
        flex: none;
    }

    .ns-col-r {
        order: 1;
    }

    .ns-col-l {
        order: 2;
    }

    .ns-top {
        height: 210px;
    }

    .ns-clock,
    .ns-heart,
    .ns-snaps,
    .ns-corner {
        display: none;
    }

    .ns-sign {
        max-width: 100%;
    }

    .ns-id {
        left: 16px;
        top: 14px;
        right: 16px;
        max-width: none;
    }

    .ns-nick {
        font-size: 16px;
    }

    .ns-nav {
        height: auto;
        min-height: 44px;
        padding: 8px 12px;
        flex-wrap: wrap;
    }

    .ns-nav-main {
        flex-wrap: wrap;
        padding-bottom: 2px;
    }

    .ns-nav-side {
        flex: 0 0 100%;
        width: 100%;
        padding-top: 2px;
        text-align: left;
    }

    .ns-subnav {
        height: auto;
        padding: 5px 12px;
        flex-wrap: wrap;
    }

    .ns-linklist {
        grid-template-columns: 1fr;
    }

    .ns-album {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .ns-album-item img {
        height: 96px;
    }

    .ns-profile {
        flex-direction: column;
    }

    .has-tape .ns-page {
        padding-bottom: 96px;
    }

    .ns-tape {
        position: fixed;
        right: 8px;
        bottom: 8px;
        left: auto;
        top: auto;
        transform: none;
        width: auto;
        z-index: 60;
        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6));
    }

    .ns-tape-shell {
        width: 228px;
        height: 38px;
    }

    .ns-tape-min {
        position: absolute;
        right: 0;
        top: -18px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 18px;
        padding: 0;
        cursor: pointer;
        color: #a9c9d6;
        font: 12px/1 Tahoma, Arial, sans-serif;
        background: linear-gradient(180deg, #2e454f, #12232a);
        border: 1px solid rgba(150, 200, 215, .3);
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
    }

    .ns-tape-min .ns-ic-cassette {
        display: none;
        width: 14px;
        height: 14px;
    }

    .ns-tape.is-min {
        width: auto;
    }

    .ns-tape.is-min .ns-tape-shell {
        display: none;
    }

    .ns-tape.is-min .ns-tape-min {
        position: static;
        width: 38px;
        height: 38px;
        border-bottom: 1px solid rgba(150, 200, 215, .3);
        border-radius: 6px;
        background: linear-gradient(180deg, #35494f, #0d1a20);
    }

    .ns-tape.is-min .ns-ic-dash {
        display: none;
    }

    .ns-tape.is-min .ns-ic-cassette {
        display: block;
    }
}

@media (max-width: 640px) {
    .ns-top {
        height: 170px;
    }

    .ns-post-title {
        font-size: 16px;
    }

    .ns-cmt-floor {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .ns-crystal,
    .ns-heart-svg,
    .ns-reel svg {
        animation: none !important;
    }

    .ns-photo,
    .ns-album-item img {
        transition: none;
    }

    .ns-lb-box,
    .ns-lb-mask {
        animation: none;
    }
}

/* ================================================================== */
/* 非主流装饰层：飘落星星 / 头部角花 / 页脚星芒 / 闪字签名              */
/* ================================================================== */

@keyframes ns-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-7px) rotate(3deg); }
}

/* --- 页脚上方星芒 --- */
.ns-fx-foot {
    text-align: center;
    padding: 10px 0 2px;
    line-height: 0;
}

.ns-fx-foot img {
    width: 46px;
    animation: ns-bob 5.5s ease-in-out infinite;
    filter: drop-shadow(0 0 7px rgba(255, 220, 120, .55));
}

/* --- 签名闪字（金色流光） --- */
.ns-sign {
    background-image: linear-gradient(100deg,
        #ffe9a8 0%, #ffffff 16%, #ffd24a 34%,
        #fff6cf 50%, #ffffff 66%, #ffd24a 84%, #ffe9a8 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: ns-shine 5s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 210, 90, .4));
}

@keyframes ns-shine {
    0%   { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ns-fx-foot img,
    .ns-sign { animation: none; }

    .ns-snaps.has-fx .ns-snap::after { display: none; }
    .ns-snaps.has-fx .ns-snap img { animation: none; }
    .ns-snaps.has-beat .ns-snap { animation: none; }
}

/* ---------- 评论：内联回复框 + 移动端多级回复 ---------- */

/* 点「回复」后 Typecho 把 .ns-respond 移进 li.ns-cmt，让它整行铺开成一个面板 */
.ns-cmt > .ns-respond {
    flex: 0 0 100%;
    width: 100%;
    margin: 8px 0 2px;
    padding: 10px 12px;
    background: rgba(6, 19, 26, .55);
    border: 1px solid rgba(140, 190, 205, .2);
    border-radius: 4px;
}

.ns-cmt > .ns-respond .ns-respond-title {
    margin-bottom: 7px;
}

.ns-cmt > .ns-respond .ns-cancel {
    margin-bottom: 5px;
}

@media (max-width: 640px) {
    /* 表单字段竖排，避免两列挤在窄屏 */
    .ns-form-row {
        flex-direction: column;
        gap: 0;
    }

    .ns-field {
        flex: 1 1 auto;
        width: 100%;
    }

    /* 多级回复：缩进封顶在 2 层，深回复不再越来越窄 */
    .ns-cmt-kids {
        padding-left: 8px;
        margin-top: 6px;
    }

    .ns-cmt-kids .ns-cmt-kids .ns-cmt-kids {
        padding-left: 0;
        border-left: 0;
    }

    /* 深层的子评论用浅底区分，替代缩进 */
    .ns-cmt-kids .ns-cmt-kids .ns-cmt-kids .ns-cmt {
        background: rgba(255, 255, 255, .03);
        border-radius: 4px;
        padding: 6px 8px;
    }

    .ns-cmt > .ns-respond {
        padding: 9px;
    }

    .ns-cmt-ava {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .ns-cmt.is-child .ns-cmt-ava {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }
}