/* ============================================
   江城·赛博朋克霓虹主题 · 安全版
   只作用于游戏输出内容·不动平台UI
   ============================================ */

/* ===== 顶部状态栏 ===== */
.top-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    margin: 8px 0 12px !important;
    background: linear-gradient(120deg, #0a0f1c, #12182a) !important;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    border-left: 3px solid #00f0ff !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
    font-family: 'Consolas', 'Menlo', monospace !important;
}
.top-bar::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: -100%;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #00f0ff, #ff2d75, transparent) !important;
    animation: kb-scan 5s linear infinite !important;
}
@keyframes kb-scan { 0% { left: -100%; } 100% { left: 100%; } }
.top-bar span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 11px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #d6f7ff !important;
    background: rgba(0, 240, 255, 0.1) !important;
    border: 1px solid rgba(0, 240, 255, 0.28) !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}
.top-bar span:last-child {
    color: #ffb3c8 !important;
    background: rgba(255, 45, 117, 0.12) !important;
    border-color: rgba(255, 45, 117, 0.5) !important;
    animation: kb-danger 2.5s ease-in-out infinite !important;
}
@keyframes kb-danger {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 45, 117, 0.3); }
    50% { box-shadow: 0 0 16px rgba(255, 45, 117, 0.8); }
}

/* ===== 雌小鬼系统旁白 ===== */
.sys {
    display: block !important;
    position: relative !important;
    margin: 12px 0 !important;
    padding: 16px 18px 16px 56px !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(255, 45, 117, 0.16)) !important;
    border: 1px solid rgba(168, 85, 247, 0.55) !important;
    border-left: 4px solid #a855f7 !important;
    border-radius: 0 14px 14px 0 !important;
    color: #f5e0ff !important;
    font-size: 14px !important;
    font-style: italic !important;
    line-height: 1.8 !important;
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.35) !important;
}
.sys::before {
    content: "👾" !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 26px !important;
    font-style: normal !important;
    filter: drop-shadow(0 0 10px #a855f7) !important;
    animation: kb-float 3s ease-in-out infinite !important;
}
@keyframes kb-float {
    0%, 100% { transform: translateY(-50%) rotate(-3deg); }
    50% { transform: translateY(-70%) rotate(3deg); }
}

/* ===== 思维链 ===== */
details.cot {
    margin: 10px 0 !important;
    border: 1px dashed rgba(123, 168, 216, 0.35) !important;
    border-radius: 10px !important;
    background: rgba(10, 15, 20, 0.7) !important;
    overflow: hidden !important;
}
details.cot > summary {
    cursor: pointer !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #7bc8ff !important;
    letter-spacing: 1.5px !important;
    list-style: none !important;
    user-select: none !important;
    background: rgba(0, 240, 255, 0.06) !important;
    font-style: italic !important;
}
details.cot > summary::-webkit-details-marker { display: none !important; }
details.cot > summary::before {
    content: "▶" !important;
    display: inline-block !important;
    margin-right: 8px !important;
    color: #4a8bc8 !important;
    font-size: 10px !important;
    transition: transform 0.3s ease !important;
}
details.cot[open] > summary::before {
    transform: rotate(90deg) !important;
    color: #00f0ff !important;
}
details.cot > summary + * {
    padding: 12px 16px !important;
    color: #7b96b0 !important;
    font-size: 12px !important;
    line-height: 1.9 !important;
    font-family: 'Consolas', monospace !important;
    white-space: pre-wrap !important;
}

/* ===== 正文气泡 ===== */
.story-bubble {
    display: block !important;
    margin: 12px 0 !important;
    padding: 22px 24px !important;
    background: linear-gradient(180deg, rgba(15, 20, 32, 0.98), rgba(20, 26, 42, 0.98)) !important;
    border: 1px solid rgba(0, 240, 255, 0.22) !important;
    border-left: 3px solid #00f0ff !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.4), 0 6px 24px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
}
.story-bubble::before {
    content: "❋" !important;
    position: absolute !important;
    top: 10px !important; left: 14px !important;
    color: rgba(0, 240, 255, 0.4) !important;
    font-size: 14px !important;
}
.story-bubble p {
    display: block !important;
    margin: 0 0 18px 0 !important;
    text-indent: 2em !important;
    text-align: justify !important;
    color: #d0dce8 !important;
    line-height: 2 !important;
    letter-spacing: 0.5px !important;
    font-size: 15.5px !important;
    font-family: 'Georgia', 'Noto Serif SC', 'STSong', serif !important;
    background: transparent !important;
}
.story-bubble p:first-child { text-indent: 0 !important; }
.story-bubble p:first-child::first-letter {
    float: left !important;
    font-size: 3.2em !important;
    line-height: 0.9 !important;
    padding: 6px 8px 0 0 !important;
    font-weight: bold !important;
    background: linear-gradient(135deg, #00f0ff, #ff2d75) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.story-bubble p:last-child { margin-bottom: 0 !important; }
.story-bubble p:last-child::after {
    content: "❈" !important;
    display: inline-block !important;
    margin-left: 8px !important;
    color: rgba(255, 45, 117, 0.5) !important;
    font-size: 12px !important;
    vertical-align: super !important;
}
.story-bubble b, .story-bubble strong {
    color: #ffd23f !important;
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.4) !important;
    font-weight: 700 !important;
}

/* ===== 状态栏折叠面板 ===== */
details:not(.cot) {
    margin: 10px 0 !important;
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #0c101a, #12162a) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4) !important;
}
details:not(.cot):hover {
    border-color: rgba(0, 240, 255, 0.5) !important;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.15) !important;
}
details:not(.cot) > summary {
    cursor: pointer !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #a8e6ff !important;
    list-style: none !important;
    user-select: none !important;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), transparent) !important;
    border-left: 3px solid #00f0ff !important;
}
details:not(.cot) > summary::-webkit-details-marker { display: none !important; }
details:not(.cot) > summary::before {
    content: "▶" !important;
    display: inline-block !important;
    margin-right: 10px !important;
    transition: transform 0.3s ease !important;
    color: #00f0ff !important;
    font-size: 10px !important;
}
details:not(.cot)[open] > summary::before {
    transform: rotate(90deg) !important;
    color: #ff2d75 !important;
}
details:not(.cot) > summary:hover {
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.2), transparent) !important;
    color: #fff !important;
}

/* ===== 面板表格 ===== */
.panel-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}
.panel-table th, .panel-table td {
    padding: 8px 11px !important;
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    text-align: left !important;
    vertical-align: middle !important;
}
.panel-table th {
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.18), rgba(0, 240, 255, 0.08)) !important;
    color: #a8e6ff !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.panel-table td {
    color: #cdd9e5 !important;
    background: rgba(255, 255, 255, 0.02) !important;
}
.panel-table tr:hover td {
    background: rgba(0, 240, 255, 0.06) !important;
    color: #fff !important;
}

/* ===== 横滑容器 + 姓名列固定 ===== */
.scroll-x {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
}
.scroll-x .panel-table { min-width: max-content !important; }
.scroll-x::after {
    content: "⇠ 滑动查看更多 ⇢" !important;
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #4a6a80 !important;
    padding: 4px 0 2px !important;
    letter-spacing: 2px !important;
}
.sticky-name th:first-child, .sticky-name td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: linear-gradient(90deg, #121a2a, #12162a) !important;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.6) !important;
    font-weight: 700 !important;
    color: #ffd23f !important;
    min-width: 90px !important;
}
.sticky-name thead th:first-child {
    z-index: 4 !important;
    background: linear-gradient(135deg, #0a2530, #12162a) !important;
    color: #a8e6ff !important;
}
.scroll-x::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
.scroll-x::-webkit-scrollbar-track {
    background: rgba(0, 240, 255, 0.05) !important;
    border-radius: 3px !important;
}
.scroll-x::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00f0ff, #ff2d75) !important;
    border-radius: 3px !important;
}

/* ===== 舆情面板 ===== */
.intel-panel {
    padding: 14px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.9 !important;
    color: #d0dce8 !important;
}
.intel-panel p {
    margin: 0 0 10px !important;
}
.intel-panel b {
    color: #00f0ff !important;
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.3) !important;
}
.intel-panel .comments {
    font-size: 12px !important;
    color: #8398aa !important;
    line-height: 1.95 !important;
    padding: 10px 12px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border-radius: 8px !important;
    border-left: 2px solid rgba(255, 45, 117, 0.5) !important;
}

/* ===== 可点击选项按钮 ===== */
.opts-panel {
    display: block !important;
    margin: 14px 0 8px !important;
    padding: 14px !important;
    background: linear-gradient(180deg, #0c111c, #08101a) !important;
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    border-radius: 10px !important;
    position: relative !important;
}
.opts-panel::before {
    content: "◆ 选择你的行动 ◆" !important;
    display: block !important;
    color: #7bc8ff !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px dashed rgba(0, 240, 255, 0.25) !important;
    text-align: center !important;
}
.opts-panel ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.opts-panel li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}
.opts-panel li > div[data-action] {
    display: block !important;
    cursor: pointer !important;
    padding: 12px 42px 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #d8f0ff !important;
    background: linear-gradient(90deg, #0d2733, #1a1230) !important;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    border-left: 3px solid #00f0ff !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    position: relative !important;
}
.opts-panel li > div[data-action]::after {
    content: "➤" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(0, 240, 255, 0.5) !important;
    font-size: 12px !important;
}
.opts-panel li > div[data-action]:hover {
    background: linear-gradient(90deg, #124050, #2a1d48) !important;
    border-color: #00f0ff !important;
    border-left-color: #ff2d75 !important;
    color: #fff !important;
    transform: translateX(4px) !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4) !important;
}
.opts-panel li > div[data-action]:hover::after {
    color: #ff2d75 !important;
    transform: translateY(-50%) translateX(4px) !important;
}

/* ===== 移动端适配 ===== */
@media (max-width: 520px) {
    .top-bar span { font-size: 11px !important; padding: 3px 8px !important; }
    .story-bubble { padding: 15px 16px !important; }
    .story-bubble p { font-size: 14.5px !important; line-height: 1.9 !important; }
    .story-bubble p:first-child::first-letter { font-size: 2.8em !important; }
    .panel-table { font-size: 12px !important; }
    .panel-table th, .panel-table td { padding: 6px 7px !important; }
    .sticky-name th:first-child, .sticky-name td:first-child { min-width: 66px !important; }
    .opts-panel li > div[data-action] { font-size: 13px !important; padding: 11px 36px 11px 13px !important; }
    .sys { font-size: 13px !important; padding-left: 48px !important; }
}