/* 导航站布局（顶栏 + 搜索 + 分区「更多」+ 密网格，色系偏常见福利导航深色+红强调） */
:root {
    --bg: #14141c;
    --bg2: #1c1c28;
    --card: #222230;
    --border: #2d2d3d;
    --text: #e8e8f0;
    --muted: #8b8ba3;
    --accent: #ff4757;
    --accent2: #e84118;
    --accent-soft: rgba(255, 71, 87, 0.15);
    --notice-bg: #2a1f0f;
    --notice-border: #5c4a2a;
    --danger: #f87171;
    --ok: #4ade80;
    --radius: 8px;
    --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--bg);
    background-image: linear-gradient(180deg, #0f0f16 0%, var(--bg) 32%, #12121a 100%);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.55;
}

.page-home {
    padding-bottom: 56px;
}

a { color: #ff6b81; text-decoration: none; }
a:hover { text-decoration: underline; color: #ff9eb0; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/* —— 顶栏 —— */
.site-header {
    background: linear-gradient(180deg, #1a1a24 0%, #15151f 100%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 12px 16px;
    min-height: 56px;
}

.site-header--sub .header-search {
    display: none;
}

.logo {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.02em;
}
.logo a {
    color: var(--text);
    text-decoration: none;
    text-shadow: 0 0 24px rgba(255, 71, 87, 0.35);
}
.logo a:hover { color: #fff; }

.top-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.top-nav-list a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}
.top-nav-list a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}
.top-nav-list a.active {
    color: #fff;
    background: var(--accent);
    font-weight: 600;
}

.header-search {
    position: relative;
    
    max-width: 320px;
    min-width: 160px;
}
.search-input {
    width: 100%;
    padding: 0.55rem 3rem 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    font-size: 0.88rem;
}
.search-input::placeholder {
    color: #5c5c72;
}
.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.search-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--muted);
    pointer-events: none;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 16px 80px;
}
.main.narrow { max-width: 560px; }

.main-home {
    padding-top: 8px;
}

/* —— 公告条 —— */
.notice-strip {
    margin: 0 0 20px;
    border: 1px solid var(--notice-border);
    border-radius: var(--radius);
    background: var(--notice-bg);
}
.notice-strip-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
}
.notice-label {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #e67e22, #d35400);
}
.notice-body {
    font-size: 0.88rem;
    color: #e8dcc8;
    line-height: 1.65;
}

/* —— 分类块 —— */
.nav-block {
    margin-top: 28px;
}
.block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.block-title-mark {
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), #c0392b);
}
.block-more {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
}
.block-more:hover {
    color: #ff6b81;
}

/* 分类统一一种样式：全文字 OR 全图标，均无描边卡片 */
.link-grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

.link-grid--text {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 4px 6px;
}

.link-grid--icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px 8px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    transition: background 0.12s;
}
.card--plain {
    border: none;
    background: transparent;
    box-shadow: none;
}
.link-grid--text .card--text-mode {
    padding: 4px 6px;
    align-items: flex-start;
}
.link-grid--text .card--text-mode:hover {
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.link-grid--icons .card--icon-mode {
    padding: 4px 2px 6px;
    align-items: center;
    text-align: center;
}
.link-grid--icons .card--icon-mode:hover {
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.card-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: #f0f0f8;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.link-grid--text .card-name {
    font-size: 0.8rem;
}

.card-url {
    font-size: 0.68rem;
    color: var(--muted);
    word-break: break-all;
    line-height: 1.25;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-url-sub {
    font-size: 0.62rem;
    opacity: 0.75;
}

.card-icon-wrap--tile {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 auto 2px;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    box-shadow: none;
    display: block;
}
.card-icon-wrap--tile .card-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    vertical-align: top;
}
.card-icon-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #8b8ba3;
    background: rgba(255, 255, 255, 0.06);
}

.link-grid--icons .card-name {
    font-size: 0.72rem;
    -webkit-line-clamp: 2;
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 28px 16px 40px;
    margin-top: 32px;
    background: #0c0c12;
}
.footer-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.footer-copy {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.88rem;
}
.footer-links {
    margin: 0 0 12px;
    font-size: 0.88rem;
}
.footer-links a {
    color: #ff6b81;
}
.footer-muted {
    color: var(--muted) !important;
    font-size: 0.85rem;
}
.footer-muted:hover {
    color: #ff6b81 !important;
}
.footer-dot {
    margin: 0 8px;
    color: var(--border);
}
.footer-note {
    margin: 0;
    font-size: 0.78rem;
    color: #5c5c72;
    line-height: 1.55;
}

.fab-top {
    position: fixed;
    right: 16px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 0.9;
    transition: opacity 0.2s, background 0.2s;
}
.fab-top:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    opacity: 1;
}

/* Apply + forms */
.page-title {
    font-size: 1.5rem;
    margin: 0 0 20px;
}
.notice-box {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 24px;
    font-size: 0.92rem;
    color: var(--muted);
}
.notice-box p { margin: 0.4em 0; }

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 0.95rem;
}
.alert-ok {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: var(--ok);
}
.alert-err {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--danger);
}

.form .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.form .field > span {
    font-size: 0.9rem;
    color: var(--muted);
}
.form textarea {
    resize: vertical;
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
}
.form input[type="text"],
.form input[type="url"],
.form input[type="password"],
.form select,
.form textarea {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    font-size: 1rem;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.captcha-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.field-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 140px;
}
.captcha-img {
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    vertical-align: bottom;
}

.form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    font-size: 0.95rem;
    cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.primary {
    background: linear-gradient(135deg, #ff6b81, var(--accent));
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn.ghost {
    background: transparent;
}
.btn.danger {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.4);
    color: var(--danger);
}

/* Admin */
.admin-layout .main { max-width: 1080px; }
.admin-main-compact {
    padding-top: 16px;
    padding-bottom: 48px;
}
.admin-hint {
    margin: -4px 0 10px;
    font-size: 0.8rem;
    color: #6b6b80;
    line-height: 1.45;
}
.admin-muted { color: #6b6b80; }

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 18px;
}
.table-compact table.data th,
.table-compact table.data td {
    padding: 6px 8px;
    font-size: 0.82rem;
}
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
table.data th,
table.data td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
table.data th {
    background: var(--bg2);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: none;
}
table.data tr:last-child td { border-bottom: none; }
table.data .actions { white-space: nowrap; }

.admin-preview-cell { min-width: 200px; }
.admin-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.admin-thumb-sm {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.admin-thumb-fallback {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg2);
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--muted);
    flex-shrink: 0;
}
.admin-preview-meta {
    min-width: 0;
    flex: 1;
}
.admin-preview-name {
    display: block;
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--text);
    line-height: 1.3;
}
.admin-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.admin-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 71, 87, 0.2);
    color: #ffb4bc;
}
.admin-badge-soft {
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
}
.admin-open-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: #ff6b81;
}

.form-compact .field {
    margin-bottom: 10px;
}
.form-compact .field > span {
    font-size: 0.82rem;
}
.form-compact .form-actions {
    margin-top: 6px;
}
.form-compact textarea {
    min-height: 88px;
}

.field-check {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
}
.field-check input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}
.field-check span {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.45;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.82rem;
    border-radius: 6px;
}

.admin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
    margin-top: 8px;
    align-items: start;
}
@media (max-width: 820px) {
    .admin-grid-2 {
        grid-template-columns: 1fr;
    }
}

.admin-dialog {
    max-width: 400px;
    width: calc(100vw - 32px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    background: var(--bg2);
    color: var(--text);
}
.dialog-title {
    margin: 0 0 12px;
    font-size: 1rem;
}
.dialog-form {
    padding: 14px 16px 16px;
}

.admin-section-title {
    font-size: 0.98rem;
    margin: 22px 0 8px;
    color: var(--accent);
}
.admin-section-title:first-of-type { margin-top: 0; }

.admin-cat-display-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}
.admin-cat-display-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-cat-display-name {
    font-size: 0.86rem;
    color: var(--text);
    min-width: 0;
    flex: 1;
}
.admin-cat-display-row select {
    max-width: 160px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    font-size: 0.82rem;
}

.small { font-size: 0.85rem; color: var(--muted); }

.inline-form {
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.login-panel {
    max-width: 400px;
    margin: 40px auto;
    padding: 28px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.login-panel h1 {
    margin: 0 0 20px;
    font-size: 1.25rem;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
dialog {
    color: var(--text);
}

.lock-msg {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.92rem;
}

@media (max-width: 720px) {
    .header-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .header-search {
        max-width: none;
        order: 3;
    }
    .top-nav-list {
        justify-content: center;
    }
}